/* ================================================================ CAMPANA DE REPORTES DE CALIFICACIONES - UdeG campana.css | Paleta: #005391 / #003661 / Blanco Tema claro/oscuro via [data-theme="dark"] en ================================================================ */ /* ---------------------------------------------------------------- 1. VARIABLES DE TEMA ---------------------------------------------------------------- */ :root { /* Paleta UdeG */ --udeg-blue: #005391; --udeg-dark: #003661; --udeg-light: #e8f2fb; --udeg-mid: #4a9fd4; --accent-gold: #c8942f; --accent-green: #1f8a68; --accent-rose: #b5265e; /* Superficies - modo claro */ --bg: #ffffff; --bg-2: #f0f5fb; --bg-3: #e6eef7; --surface: #ffffff; --surface-2: #f0f5fb; /* Bordes */ --border: #cddaeb; --border-2: #b0c6df; /* Texto */ --text: #0a1f33; --text-2: #3a5572; --text-3: #6a8aaa; /* Semántica */ --color-green: #1a5c2e; --color-green-bg: #e8f5ec; --color-red: #7a1a1a; --color-red-bg: #fce8e8; --color-amber: #7a4f0a; --color-amber-bg: #fef3e2; --color-gray: #5a6a7a; --color-gray-bg: #eef2f6; /* Componentes */ --pie-faltante: #b0c6df; --header-bg: var(--udeg-dark); --header-accent: var(--udeg-blue); --shadow-sm: 0 1px 4px rgba(0,83,145,.08); --shadow-md: 0 2px 16px rgba(0,83,145,.12); --shadow-lg: 0 22px 70px rgba(0,39,78,.16); --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 14px; --radius-pill: 999px; } [data-theme="dark"] { --bg: #0a1520; --bg-2: #0f1e2e; --bg-3: #162840; --surface: #0f1e2e; --surface-2: #162840; --border: #1e3550; --border-2: #2a4a6a; --text: #e8f2fb; --text-2: #a0c0de; --text-3: #5a8aaa; --udeg-blue: #4a9fd4; --udeg-dark: #0a1a2e; --udeg-light: #0f2a3e; --color-green: #4aaa6a; --color-green-bg: #0a2a18; --color-red: #e06060; --color-red-bg: #2a0a0a; --color-amber: #d4a040; --color-amber-bg: #2a1a00; --color-gray: #8a9aaa; --color-gray-bg: #162030; --pie-faltante: #2a4060; --header-bg: #061020; --header-accent: #005391; --shadow-sm: 0 1px 4px rgba(0,0,0,.3); --shadow-md: 0 2px 16px rgba(0,0,0,.4); --shadow-lg: 0 24px 76px rgba(0,0,0,.45); } /* ---------------------------------------------------------------- 2. RESET & BASE ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { transition: background-color .3s, color .3s; } body { font-family: Aptos, 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; line-height: 1.6; background: var(--bg-2); color: var(--text); min-height: 100vh; } a { color: var(--udeg-blue); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------------------------------------------------------------- 3. HEADER ---------------------------------------------------------------- */ .site-header { background: var(--header-bg); position: sticky; top: 0; z-index: 50; box-shadow: 0 10px 30px rgba(0, 28, 56, .14); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 28px; min-height: 64px; flex-wrap: wrap; } .header-accent-bar { height: 3px; background: linear-gradient(90deg, var(--udeg-blue), var(--udeg-mid)); } /* Logo */ .logo-box { height: 2.5rem; /*width: 3.5rem; 48px; */ /* border-radius: var(--radius-md); border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); */ display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .logo-box img { width: 100%; height: 100%; object-fit: contain; } .logo-placeholder { font-size: 9px; color: rgba(255,255,255,.5); text-align: center; line-height: 1.3; } /* Brand text */ .header-brand { display: flex; align-items: center; gap: 14px; min-width: 0; } .brand-label { font-size: 9px; font-weight: 600; letter-spacing: 0; color: rgba(255,255,255,.4); text-transform: uppercase; display: block; margin-bottom: 2px; } .brand-title { font-size: 17px; font-weight: 700; color: #fff; line-height: 1.2; overflow-wrap: anywhere; } .brand-sub { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 1px; } /* Header right */ .header-right { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; flex: 1 1 auto; gap: 8px; margin-left: 24px; max-width: 100%; min-width: 0; padding: 0; } /* Theme toggle */ .theme-toggle { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); border: 0.5px solid rgba(255,255,255,.2); border-radius: var(--radius-pill); color: rgba(255,255,255,.85); cursor: pointer; font-size: 12px; min-height: 34px; padding: 6px 12px; font-family: inherit; transition: background .15s, border-color .15s, transform .15s; } .theme-toggle:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); transform: translateY(-1px); } .theme-toggle:focus-visible { outline: 2px solid rgba(255,255,255,.8); outline-offset: 2px; } .theme-icon { display: inline-block; width: 17px; height: 17px; position: relative; flex: 0 0 17px; color: currentColor; background: transparent; border: 0; border-radius: 50%; box-shadow: none; } .theme-icon[data-mode="dark"] { transform: rotate(-18deg); } .theme-icon[data-mode="dark"]::before { content: ""; position: absolute; inset: 2px 3px 2px 4px; border-radius: 50%; border: 1.7px solid currentColor; border-left-color: transparent; border-top-color: transparent; } .theme-icon[data-mode="light"] { color: #f2c14d; } .theme-icon[data-mode="light"]::before { content: ""; position: absolute; inset: 5px; border: 1.6px solid currentColor; border-radius: 50%; } .theme-icon[data-mode="light"]::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; border-radius: 50%; background: currentColor; transform: translate(-50%, -50%); box-shadow: 0 -8px 0 currentColor, 0 8px 0 currentColor, 8px 0 0 currentColor, -8px 0 0 currentColor, 5.6px -5.6px 0 currentColor, -5.6px -5.6px 0 currentColor, 5.6px 5.6px 0 currentColor, -5.6px 5.6px 0 currentColor; } /* User chip */ .user-chip { background: rgba(255,255,255,.1); border: 0.5px solid rgba(255,255,255,.2); border-radius: var(--radius-md); margin-right: auto; padding: 5px 12px; text-align: right; } .user-name { font-size: 12px; font-weight: 700; color: #fff; } .user-email { font-size: 10px; color: rgba(255,255,255,.55); margin-top: 1px; } /* Role navigation */ .role-nav { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; flex: 0 1 auto; max-width: 100%; } .role-btn { font-size: 13px; padding: 4px 12px; border-radius: var(--radius-pill); border: 0.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); cursor: pointer; font-family: inherit; transition: all .15s; text-decoration: none; display: inline-block; } .role-btn:hover { background: rgba(255,255,255,.18); text-decoration: none; } .role-btn.active { background: #fff; color: var(--udeg-dark); border-color: #fff; font-weight: 700; } .salir-btn { font-size: 13px; padding: 4px 12px; border-radius: var(--radius-pill); border: 0.5px solid rgba(255,255,255,.15); background: transparent; color: rgba(255,255,255,.45); cursor: pointer; font-family: inherit; transition: all .15s; text-decoration: none; display: inline-block; } .salir-btn:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); } /* ---------------------------------------------------------------- 4. MENSAJES DJANGO ---------------------------------------------------------------- */ .messages-container { padding: 12px 28px 0; max-width: 1080px; margin: 0 auto; width: 100%; } .alert { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-radius: var(--radius-md); font-size: 13px; margin-bottom: 8px; border: 0.5px solid transparent; } .alert-success { background: var(--color-green-bg); color: var(--color-green); border-color: var(--color-green); } .alert-error { background: var(--color-red-bg); color: var(--color-red); border-color: var(--color-red); } .alert-warning { background: var(--color-amber-bg); color: var(--color-amber); border-color: var(--color-amber); } .alert-info { background: var(--udeg-light); color: var(--udeg-blue); border-color: var(--udeg-blue); } .alert-close { background: none; border: none; cursor: pointer; color: inherit; font-size: 13px; padding: 0 4px; opacity: .6; } .alert-close:hover { opacity: 1; } /* ---------------------------------------------------------------- 5. MAIN CONTENT ---------------------------------------------------------------- */ .main-content { flex: 1; padding: 28px; max-width: 1180px; width: 100%; margin: 0 auto; } .main-content-authless { max-width: 100%; padding: 0; } /* Page header */ .page-label { font-size: 10px; font-weight: 700; letter-spacing: 0; color: var(--udeg-blue); text-transform: uppercase; margin-bottom: 5px; } .page-title { font-size: 24px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .page-sub { font-size: 13px; color: var(--text-3); margin-bottom: 22px; } /* ---------------------------------------------------------------- 6. CARDS ---------------------------------------------------------------- */ .card { background: var(--surface); border-radius: var(--radius-lg); border: 0.5px solid var(--border); padding: 20px 24px; box-shadow: var(--shadow-sm); } .card + .card { margin-top: 16px; } /* ---------------------------------------------------------------- 7. STAT CARDS (métricas rápidas) ---------------------------------------------------------------- */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 22px; } .stat-card { background: var(--surface); border-radius: var(--radius-md); border: 0.5px solid var(--border); padding: 14px 18px; } .stat-label { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0; margin-bottom: 4px; } .stat-value { font-size: 28px; font-weight: 700; line-height: 1; } .stat-value.blue { color: var(--udeg-blue); } .stat-value.green { color: var(--color-green); } .stat-value.amber { color: var(--color-amber); } .stat-value.red { color: var(--color-red); } /* ---------------------------------------------------------------- 8. TABLAS ---------------------------------------------------------------- */ .table-wrap { overflow-x: auto; } .card > .table-wrap { border: 0.5px solid var(--border); border-radius: var(--radius-md); } .card > .table-wrap table { min-width: 720px; } .card > .table-wrap .review-report-table { min-width: 1060px; table-layout: fixed; } .card > .table-wrap .config-history-table { min-width: 900px; table-layout: fixed; } .review-report-table th, .review-report-table td, .config-history-table th, .config-history-table td { padding-left: 16px; padding-right: 16px; } .review-col-materia { width: 24%; } .review-col-crn { width: 8%; } .review-col-profesor { width: 18%; } .review-col-archivo { width: 15%; } .review-col-estatus { width: 13%; } .review-col-revision { width: 22%; } .config-col-campana { width: 28%; } .config-col-ciclo { width: 11%; } .config-col-periodo { width: 31%; } .config-col-estado { width: 18%; } .config-col-acciones { width: 12%; } table { width: 100%; border-collapse: collapse; font-size: 15px; } thead th { font-size: 10px; font-weight: 700; letter-spacing: 0; color: var(--text-3); text-transform: uppercase; padding: 10px 12px; text-align: left; border-bottom: 0.5px solid var(--border); background: var(--surface-2); white-space: nowrap; position: sticky; top: 0; z-index: 1; } tbody td { padding: 13px 12px; border-bottom: 0.5px solid var(--border); vertical-align: middle; color: var(--text); } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: var(--udeg-light); } .materia-name { font-weight: 600; color: var(--text); display: block; margin-bottom: 2px; } .materia-code { font-size: 11px; color: var(--text-3); } .table-meta { color: var(--text-2); font-size: 15px; line-height: 1.45; } .table-meta-muted { color: var(--text-3); } .crn-badge { display: inline-block; background: var(--udeg-light); color: var(--udeg-blue); font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-sm); } /* ---------------------------------------------------------------- 9. BADGES DE ESTATUS ---------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; white-space: nowrap; } .status-line-icon { display: inline-block; width: 14px; height: 14px; border: 1.7px solid currentColor; border-radius: 50%; position: relative; flex: 0 0 14px; } .status-line-icon::before, .status-line-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.7px; border-radius: 999px; background: currentColor; transform-origin: 50% 0; } .status-line-icon::before { height: 4px; transform: translate(-50%, -1px); } .status-line-icon::after { height: 5px; transform: translate(-50%, -1px) rotate(120deg); } .badge-validado { background: var(--color-green-bg); color: var(--color-green); } .badge-faltante { background: var(--color-gray); color: #fff; } .badge-rechazado { background: var(--color-red-bg); color: var(--color-red); } .badge-pendiente { background: var(--color-amber-bg); color: var(--color-amber); } .review-report-table td[data-label="Estatus"] .badge { color: #fff; font-size: 13px; font-weight: 700; padding: 5px 12px; } .review-report-table td[data-label="Estatus"] .badge-validado { background: var(--color-green); } .review-report-table td[data-label="Estatus"] .badge-faltante { background: var(--color-gray); } .review-report-table td[data-label="Estatus"] .badge-rechazado { background: var(--color-red); } .review-report-table td[data-label="Estatus"] .badge-pendiente { background: var(--color-amber); } /* ---------------------------------------------------------------- 10. BOTONES ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 16px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .15s; border: none; text-decoration: none; white-space: nowrap; } .btn-primary { background: var(--udeg-blue); color: #fff; } .btn-primary:hover { background: var(--udeg-dark); color: #fff; } .btn-secondary { background: transparent; color: var(--udeg-blue); border: 0.5px solid var(--udeg-blue); } .btn-secondary:hover { background: var(--udeg-light); } .btn-success { background: var(--color-green); color: #fff; } .btn-success:hover { background: #134820; } .btn-danger { background: #9b2020; color: #fff; } .btn-danger:hover { background: #7a1a1a; } .btn-outline-danger { background: transparent; color: var(--color-red); border: 0.5px solid var(--color-red); } .btn-outline-danger:hover { background: var(--color-red-bg); } .btn-sm { font-size: 11px; padding: 4px 12px; } .btn-group { display: flex; flex-direction: column; align-items: stretch; gap: 10px; } .btn-group > form { display: flex; width: 100%; } .btn-group > .btn, .btn-group > form > .btn { width: 100%; min-width: 112px; } .professor-report-table td[data-label="Acciones"] .btn-group, .professor-report-table td[data-label="Acciones"] .upload-action-stack { width: 150px; max-width: 100%; } .professor-report-table td[data-label="Acciones"] .btn, .review-report-table td[data-label="Archivo"] .btn { font-size: 13px; } .review-report-table td[data-label="Archivo"] .btn { width: 128px; max-width: 100%; } .professor-report-table td[data-label="Acciones"] > .btn { width: 100%; min-width: 112px; } .upload-action-stack { display: flex; flex-direction: column; align-items: stretch; gap: 6px; } .upload-action-stack > .btn { width: 100%; min-width: 112px; } .upload-action-note { display: block; color: var(--text-3); font-size: 13px; line-height: 1.35; text-align: center; } .locked-action-note { color: var(--text-3); font-size: 13px; text-align: center; } /* ---------------------------------------------------------------- 11. FILTROS ---------------------------------------------------------------- */ .filter-bar { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; } .filter-chip { padding: 6px 16px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; border: 0.5px solid var(--border-2); background: var(--surface); cursor: pointer; color: var(--text-2); font-family: inherit; transition: all .15s; text-decoration: none; display: inline-block; } .filter-chip:hover { background: var(--udeg-light); color: var(--udeg-blue); border-color: var(--udeg-blue); } .filter-chip.active { background: var(--udeg-blue); color: #fff; border-color: var(--udeg-blue); } /* ---------------------------------------------------------------- 12. TEXTAREA DE REVISIÓN ---------------------------------------------------------------- */ .review-textarea { width: 100%; border: 0.5px solid var(--border-2); border-radius: var(--radius-md); padding: 7px 10px; font-size: 15px; font-family: inherit; resize: vertical; min-height: 60px; color: var(--text); background: var(--surface-2); margin-bottom: 6px; transition: border-color .15s; } .review-textarea:focus { outline: none; border-color: var(--udeg-blue); } .review-actions { display: flex; gap: 6px; } .review-actions .btn { flex: 1; font-size: 13px; min-height: 38px; } .review-report-table .review-actions .btn-outline-danger { background: #9b2020; border-color: #9b2020; color: #fff; } .review-report-table .review-actions .btn-outline-danger:hover { background: #7a1a1a; border-color: #7a1a1a; color: #fff; } .review-row-pending td:first-child { box-shadow: inset 3px 0 0 var(--udeg-blue); } .review-report-table td[data-label="Revisión"] { min-width: 240px; } /* ---------------------------------------------------------------- 13. GRÁFICAS PIE (Director) ---------------------------------------------------------------- */ .pie-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 8px; } .pie-card { background: var(--surface); border-radius: var(--radius-lg); border: 0.5px solid var(--border); padding: 20px; transition: box-shadow .2s; } .pie-card:hover { box-shadow: var(--shadow-md); } .pie-dept-label { font-size: 9px; font-weight: 700; letter-spacing: 0; color: var(--text-3); text-transform: uppercase; margin-bottom: 3px; } .pie-dept-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; line-height: 1.3; } .pie-sub { font-size: 12px; color: var(--text-3); margin-bottom: 14px; } .pie-svg { display: block; margin: 0 auto 4px; } .pie-legend { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; } .pie-legend-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); } .pie-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* ---------------------------------------------------------------- 13b. BARRAS APILADAS (Director) ---------------------------------------------------------------- */ .stacked-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 8px; } .stacked-card { background: var(--surface); border-radius: var(--radius-lg); border: 0.5px solid var(--border); padding: 20px; transition: box-shadow .2s, transform .2s; } .stacked-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .stacked-card-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 16px; } .stacked-percent { min-width: 68px; text-align: right; color: var(--udeg-blue); font-size: 28px; font-weight: 800; line-height: 1; } .stacked-percent::after { content: " con archivo"; display: block; margin-top: 4px; color: var(--text-3); font-size: 10px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; } .stacked-percent-review::after { content: " validados"; } .stacked-percent-control::after { content: " enviados"; } .stacked-bar { display: flex; width: 100%; height: 22px; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-gray-bg); border: 0.5px solid var(--border-2); } .stacked-segment { min-width: 0; transition: width .45s ease; } .stacked-sent { background: linear-gradient(90deg, var(--udeg-blue), var(--udeg-mid)); } .stacked-validated { background: linear-gradient(90deg, var(--color-green), #2f8f4d); } .stacked-review-pending { background: linear-gradient(90deg, var(--color-amber), #d69b2d); } .stacked-rejected { background: linear-gradient(90deg, #9b2020, #c0392b); } .stacked-pending, .stacked-missing { background: repeating-linear-gradient( 135deg, var(--pie-faltante), var(--pie-faltante) 8px, rgba(255,255,255,.32) 8px, rgba(255,255,255,.32) 10px ); } .stacked-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; color: var(--text-2); font-size: 12px; } .stacked-meta span { display: inline-flex; align-items: center; gap: 7px; } .stacked-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; } .stacked-dot-sent { background: var(--udeg-blue); } .stacked-dot-validated { background: var(--color-green); } .stacked-dot-review-pending { background: var(--color-amber); } .stacked-dot-rejected { background: #c0392b; } .stacked-dot-pending, .stacked-dot-missing { background: var(--pie-faltante); } /* ---------------------------------------------------------------- 13c. DASHBOARD CONTROL ESCOLAR ---------------------------------------------------------------- */ .control-division { margin-top: 22px; } .control-division-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding: 20px 22px; border: 0.5px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(0,83,145,.10), transparent 45%), var(--surface); box-shadow: var(--shadow-sm); } .control-division-head h3 { color: var(--text); font-size: 22px; line-height: 1.2; margin: 2px 0 6px; } .control-division-head p { color: var(--text-2); margin: 0; } .control-division-kpis { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 360px; } .control-division-kpis span { border: 0.5px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 700; padding: 7px 11px; white-space: nowrap; } .control-dept-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } .control-dept-grid .stacked-card { display: flex; flex-direction: column; } .control-card-actions { margin-top: auto; padding-top: 16px; } .control-card-actions .btn { font-size: 13px; width: 100%; } .control-detail-toolbar { display: flex; justify-content: flex-start; margin-bottom: 18px; } .control-back-link { min-width: 190px; font-size: 13px; } .control-detail-page { margin-top: 22px; } .control-detail-stacked-bar { margin-bottom: 18px; } .modal-control-detail { max-width: min(1100px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow-y: auto; } .control-detail-sub { color: var(--text-2); margin: -12px 0 16px; font-size: 13px; } .control-detail-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .control-detail-filter-chip { display: inline-flex; align-items: center; gap: 7px; border: 0.5px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 700; font-family: inherit; min-height: 44px; padding: 0 14px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .control-detail-filter-chip:hover { border-color: var(--udeg-blue); color: var(--udeg-blue); } .control-detail-filter-chip.active { background: var(--udeg-blue); border-color: var(--udeg-blue); color: #fff; } .control-detail-wrap { border: 0.5px solid var(--border); border-radius: var(--radius-md); } .control-detail-table td { vertical-align: top; } .control-detail-table .badge { white-space: nowrap; } .control-detail-empty td { color: var(--text-3); font-size: 12px; } /* ---------------------------------------------------------------- 14. MODALES (subir PDF, vista previa) ---------------------------------------------------------------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 20, 40, .55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; } .modal { background: var(--surface); border-radius: var(--radius-xl); padding: 28px; max-width: 480px; width: 100%; position: relative; border: 0.5px solid var(--border); box-shadow: var(--shadow-md); } .modal-wide { max-width: 700px; } .modal-label { font-size: 10px; font-weight: 700; letter-spacing: 0; color: var(--udeg-blue); text-transform: uppercase; margin-bottom: 8px; } .modal-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 20px; } .modal-close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; border: 0.5px solid var(--border-2); background: var(--surface-2); cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-family: inherit; } .modal-close:hover { background: var(--border); color: var(--text); } .modal-actions { display: flex; gap: 10px; margin-top: 4px; } .modal-actions .btn { flex: 1; } /* ---------------------------------------------------------------- 15. DROP ZONE (subida de PDF) ---------------------------------------------------------------- */ .drop-zone { border: 1.5px dashed var(--border-2); border-radius: var(--radius-md); padding: 32px 20px; text-align: center; background: var(--surface-2); margin-bottom: 20px; cursor: pointer; transition: border-color .15s, background .15s; } .drop-zone:hover, .drop-zone.dragover { border-color: var(--udeg-blue); background: var(--udeg-light); } .drop-icon { font-size: 28px; display: block; margin-bottom: 10px; } .drop-title { font-size: 14px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; } .drop-hint { font-size: 12px; color: var(--text-3); } /* ---------------------------------------------------------------- 16. PDF PREVIEW ---------------------------------------------------------------- */ .pdf-viewer-bar { background: #1e1e1e; border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 8px 14px; display: flex; align-items: center; gap: 12px; font-size: 11px; color: #ccc; } .pdf-viewer-body { background: #3c3c3c; border-radius: 0 0 var(--radius-sm) var(--radius-sm); min-height: 300px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .pdf-viewer-body iframe { width: 100%; height: 500px; border: none; } /* ---------------------------------------------------------------- 17. CONFIGURACION DE CAMPANA ---------------------------------------------------------------- */ .config-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 18px; margin-bottom: 18px; } .config-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; } .config-title { margin: 0; font-size: 20px; color: var(--text); } .config-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .form-field, .check-row { display: flex; flex-direction: column; gap: 7px; } .form-field-wide, .check-row, .config-actions { grid-column: 1 / -1; } .form-field label { font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--text-3); } .form-field input, .form-field select { width: 100%; min-height: 42px; border: 0.5px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); padding: 9px 11px; font: inherit; } .form-field input:focus, .form-field select:focus { outline: none; border-color: var(--udeg-blue); box-shadow: 0 0 0 3px rgba(0, 61, 121, .12); } .check-row { flex-direction: row; align-items: center; padding: 11px 12px; border: 0.5px solid var(--border-2); border-radius: var(--radius-sm); color: var(--text-2); font-size: 13px; } .check-row input { width: 16px; height: 16px; accent-color: var(--udeg-blue); } .form-error { color: var(--color-red); font-size: 12px; } .config-actions { display: flex; justify-content: flex-end; } .config-actions .btn-primary { font-size: 13px; } .config-edit-btn { font-size: 13px; min-width: 108px; padding-left: 22px; padding-right: 22px; } .config-note { margin: 0 0 12px; color: var(--text-2); font-size: 13px; line-height: 1.55; } .compact-note { margin: 6px 0 0; font-size: 12px; } .period-message-preview { border-radius: var(--radius-md); border: 0.5px solid var(--color-amber); background: var(--color-amber-bg); color: var(--text); padding: 14px; font-size: 13px; line-height: 1.5; } .closed-period-card { display: flex; align-items: center; gap: 18px; border-color: rgba(172, 111, 22, .45); } .closed-period-card h3 { margin: 0 0 6px; color: var(--text); } .closed-period-card p { margin: 0; color: var(--text-2); } .closed-period-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 50%; background: var(--color-amber-bg); color: var(--color-amber); font-size: 26px; font-weight: 800; } /* ---------------------------------------------------------------- 18. LOGIN ---------------------------------------------------------------- */ .login-page { min-height: 100vh; display: flex; flex-direction: column; position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(120deg, rgba(0,83,145,.12) 0 32%, transparent 32% 100%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 52%, var(--bg-3) 100%); } .login-page::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(0,83,145,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(0,83,145,.045) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(180deg, rgba(0,0,0,.65), transparent 78%); } .login-page::after { content: ""; position: absolute; inset: auto -12% -18% -12%; height: 32%; z-index: -1; background: linear-gradient(90deg, rgba(31,138,104,.18), rgba(200,148,47,.2), rgba(181,38,94,.14)); transform: skewY(-4deg); opacity: .85; } .login-top-bar { /* background: rgba(0,54,97,.96); */ padding: 16px 32px 14px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(0,25,50,.18); } .login-brand { display: flex; align-items: center; gap: 16px; min-width: 0; } .login-top-bar .brand-title { font-size: 18px; } .login-top-bar .brand-sub { color: rgba(255,255,255,.68); } .login-theme-toggle { flex: 0 0 auto; } .login-body-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(32px, 6vw, 72px) 20px; } .login-split { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr); max-width: 1040px; width: 100%; min-height: 450px; position: relative; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(0,83,145,.14); background: var(--surface); } .login-split::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--accent-green), var(--udeg-mid), var(--accent-gold), var(--accent-rose)); z-index: 2; } .login-left { background: linear-gradient(135deg, rgba(0,0,0,.05), transparent 42%), linear-gradient(145deg, #061d34 0%, #063961 58%, #082b45 100%); padding: clamp(32px, 4vw, 46px) clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 20px; color: #fff; } .login-right { background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72)), var(--surface); padding: clamp(32px, 4vw, 46px) clamp(28px, 4vw, 42px); display: flex; flex-direction: column; gap: 22px; justify-content: center; } .login-kicker { color: rgba(255,255,255,.72); font-size: 12px; font-weight: 800; text-transform: uppercase; } .login-heading { max-width: 560px; font-size: clamp(27px, 3.5vw, 36px); font-weight: 800; color: #fff; line-height: 1.12; text-wrap: balance; } .login-desc { max-width: 520px; font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.7; } .login-status-strip { display: flex; flex-wrap: wrap; gap: 8px; } .login-status-strip span { border: 1px solid rgba(255,255,255,.17); background: rgba(255,255,255,.08); border-radius: var(--radius-sm); color: rgba(255,255,255,.82); font-size: 12px; font-weight: 700; padding: 6px 10px; } .login-steps { list-style: none; display: grid; gap: 0; margin-top: 2px; } .login-steps li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.55; } .login-step-number { color: var(--accent-gold); font-size: 12px; font-weight: 800; } .login-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; } .login-stat { border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-sm); padding: 12px 10px; background: rgba(255,255,255,.07); } .login-stat-value { display: block; color: #fff; font-size: 22px; line-height: 1; font-weight: 800; } .login-stat-label { display: block; margin-top: 6px; color: rgba(255,255,255,.62); font-size: 11px; line-height: 1.3; } .login-footer { margin-top: auto; padding-top: 16px; border-top: 0.5px solid rgba(255,255,255,.12); font-size: 11px; color: rgba(255,255,255,.35); } .app-logo-box { min-height: 80px; border-radius: var(--radius-sm); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-3); background: linear-gradient(135deg, rgba(0,83,145,.06), transparent 52%), var(--surface-2); } .app-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; } .login-logo-panel { min-height: 96px; padding: 16px 20px; } .access-copy { display: grid; gap: 7px; } .access-label, .domain-label { font-size: 12px; font-weight: 800; color: var(--udeg-blue); text-transform: uppercase; } .access-copy h3 { color: var(--text); font-size: 22px; line-height: 1.18; font-weight: 800; text-wrap: balance; } .access-copy p { color: var(--text-2); font-size: 13px; line-height: 1.6; } .domain-block { display: grid; gap: 8px; } .domain-pills { display: flex; gap: 8px; flex-wrap: wrap; } .domain-pill { background: color-mix(in srgb, var(--udeg-light) 78%, white); color: var(--udeg-blue); font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--border-2) 82%, transparent); overflow-wrap: anywhere; } .google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, var(--udeg-blue), #0878b3); color: #fff; border: none; min-height: 52px; padding: 13px 16px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; width: 100%; box-shadow: 0 14px 28px rgba(0,83,145,.24); transition: transform .15s, box-shadow .15s, background .15s; text-decoration: none; } .google-btn:hover { background: linear-gradient(135deg, var(--udeg-dark), var(--udeg-blue)); color: #fff; transform: translateY(-1px); box-shadow: 0 18px 34px rgba(0,54,97,.28); text-decoration: none; } .google-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--udeg-mid) 55%, white); outline-offset: 3px; } .google-mark { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 26px; border-radius: 50%; background: #fff; color: #1d4f88; font-size: 15px; font-weight: 800; } .login-config-missing { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 16px; } .login-config-missing p { margin-top: 8px; color: var(--text-2); font-size: 13px; } .login-note { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--text-3); text-align: center; } .login-note-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-green) 16%, transparent); } [data-theme="dark"] .login-page { background: linear-gradient(120deg, rgba(74,159,212,.10) 0 32%, transparent 32% 100%), linear-gradient(180deg, #07111d 0%, var(--bg) 58%, #0b1b2d 100%); } [data-theme="dark"] .login-right { background: linear-gradient(180deg, rgba(15,30,46,.96), rgba(15,30,46,.88)), var(--surface); } [data-theme="dark"] .domain-pill { background: rgba(74,159,212,.12); } /* ---------------------------------------------------------------- 19. RESPONSIVE ---------------------------------------------------------------- */ @media (max-width: 1440px) { .header-inner { align-items: center; gap: 8px 16px; padding: 8px 24px; } .site-header .logo-box { height: 2.2rem; } .site-header .brand-sub { display: none; } .header-right { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; flex: none; margin-left: 0; gap: 8px; padding: 0; } .user-chip { margin-right: 0; } .role-nav { flex: 1 1 auto; justify-content: flex-end; max-width: 100%; } } @media (max-width: 920px) { .role-nav { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 2px; scrollbar-width: none; } .role-nav::-webkit-scrollbar { display: none; } .role-btn, .salir-btn { flex: 0 0 auto; } } @media (max-width: 1100px) { .control-dept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 920px) { .login-top-bar { padding: 14px 18px; } .login-split { grid-template-columns: 1fr; max-width: 680px; } .login-right { order: -1; } .login-left, .login-right { padding: 30px 26px; } } @media (min-width: 921px) and (max-height: 760px) { .login-body-wrap { align-items: flex-start; padding: 34px 20px; } .login-left { gap: 16px; } .login-stat-grid { display: none; } .login-footer { margin-top: 0; } } @media (max-width: 768px) { .header-inner { display: grid; grid-template-columns: 1fr; padding: 10px 16px 8px; gap: 10px; min-height: 0; } .header-brand { align-items: center; gap: 12px; } .site-header .logo-box { height: 2rem; } .header-right { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; width: 100%; } .theme-toggle { grid-column: 2; min-height: 32px; padding: 5px 10px; } .user-chip { grid-column: 1; grid-row: 1; align-self: stretch; text-align: left; min-width: 0; overflow: hidden; } .user-name, .user-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-email { display: none; } .role-nav { grid-column: 1 / -1; } .brand-title { font-size: 14px; } .brand-sub { display: none; } .main-content { padding: 16px; } .login-body-wrap { padding: 22px 14px 34px; } .login-brand { gap: 12px; } .login-top-bar .logo-box { height: 2.1rem; } .login-left { padding: 28px 22px; } .login-right { padding: 28px 22px; } .login-status-strip, .domain-pills { gap: 6px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .pie-grid, .stacked-grid, .control-dept-grid { grid-template-columns: 1fr; } .control-division-head { flex-direction: column; } .control-division-kpis { justify-content: flex-start; } .config-layout, .config-form { grid-template-columns: 1fr; } .professor-report-table, .professor-report-table thead, .professor-report-table tbody, .professor-report-table tr, .professor-report-table th, .professor-report-table td, .review-report-table, .review-report-table thead, .review-report-table tbody, .review-report-table tr, .review-report-table th, .review-report-table td { display: block; } .card > .table-wrap .professor-report-table, .card > .table-wrap .review-report-table { min-width: 0; table-layout: auto; } .professor-report-table thead, .review-report-table thead { display: none; } .professor-report-table tbody tr, .review-report-table tbody tr { border: 0.5px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px; margin-bottom: 14px; } .professor-report-table tbody tr:hover td, .review-report-table tbody tr:hover td { background: transparent; } .professor-report-table tbody td, .review-report-table tbody td { display: grid; grid-template-columns: minmax(92px, 34%) minmax(0, 1fr); gap: 12px; align-items: start; border-bottom: 0.5px solid var(--border); padding: 10px 0; width: auto; } .professor-report-table tbody td::before, .review-report-table tbody td::before { content: attr(data-label); color: var(--text-3); font-size: 10px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; } .professor-report-table tbody td:first-child, .review-report-table tbody td:first-child { padding-top: 0; } .professor-report-table tbody td:last-child, .review-report-table tbody td:last-child { border-bottom: none; padding-bottom: 0; } .professor-report-table .btn-group, .professor-report-table .upload-action-stack, .professor-report-table .btn, .review-report-table .btn { width: 100%; } .professor-report-table .locked-action-note, .professor-report-table .upload-action-note { text-align: left; } .professor-report-table .upload-action-stack { max-width: none; } .review-report-table .review-actions { flex-direction: column; } .review-report-table td[data-label="Revisión"] form { min-width: 0; } } @media (max-width: 480px) { .header-inner { flex-wrap: wrap; padding: 10px 14px; } .user-chip { display: none; } .header-right { display: flex; align-items: flex-start; justify-content: flex-start; } .theme-toggle { align-self: flex-start; } .role-nav { width: 100%; } .login-top-bar { align-items: flex-start; flex-direction: column; } .login-theme-toggle { align-self: flex-start; } .login-stat-grid { grid-template-columns: 1fr; } .login-steps li { grid-template-columns: 36px minmax(0, 1fr); } .access-copy h3 { font-size: 20px; } .stats-grid { grid-template-columns: 1fr 1fr; } }