/* ================================================================ TORRES DEL SABER — Portal Torres La hoja de las paginas de DENTRO (alumno y padres) y del pie. El personal usa main.css; esta no. ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@700;800&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --navy: #0C2955; --gold: #c9a227; --gold-light: #e8c547; --fondo: #EDF1F9; --border: #D4DEEF; --white: #fff; --text: #1A2540; --muted: #5E6F90; --radius: 16px; --shadow: 0 8px 32px rgba(10,22,40,.10); } body { font-family: 'Inter', sans-serif; background: var(--fondo); color: var(--text); min-height: 100vh; } /* ── Topbar ── */ .portal-topbar { background: var(--navy); border-bottom: 3px solid var(--gold); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; } .portal-brand { display: flex; align-items: center; gap: 10px; color: white; font-family: 'Poppins',sans-serif; font-size: 16px; font-weight: 800; letter-spacing: .5px; } .portal-brand-icon { background: var(--gold); color: var(--navy); width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .portal-brand-icon svg { width: 18px; height: 18px; fill: currentColor; } .portal-brand-sub { display: block; font-size: 11px; font-weight: 500; color: rgba(255,255,255,.5); letter-spacing: .3px; } .topbar-actions { display: flex; align-items: center; gap: 10px; } .btn-topbar { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: all .2s; white-space: nowrap; } .btn-topbar svg { width: 14px; height: 14px; } .btn-clave { background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.15); } .btn-clave:hover { background: rgba(255,255,255,.18); } .btn-reporte { background: rgba(201,162,39,.15); color: #e8c547; border: 1px solid rgba(201,162,39,.25); } .btn-reporte:hover { background: rgba(201,162,39,.25); } .btn-salir { background: rgba(220,38,38,.15); color: #fca5a5; border: 1px solid rgba(220,38,38,.2); } .btn-salir:hover { background: rgba(220,38,38,.28); } /* ── Layout ── */ .container { max-width: 900px; margin: 0 auto; padding: 28px 20px 60px; } /* ── Welcome ── */ .welcome-banner { background: linear-gradient(135deg, var(--navy) 0%, #1A4080 100%); border-radius: var(--radius); padding: 28px 30px; margin-bottom: 20px; display: flex; align-items: center; gap: 20px; color: white; border: 1px solid rgba(201,162,39,.2); } .welcome-avatar { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--gold), var(--gold-light)); display: flex; align-items: center; justify-content: center; font-family: 'Poppins',sans-serif; font-size: 26px; font-weight: 800; color: var(--navy); } .welcome-text h2 { font-family: 'Poppins',sans-serif; font-size: 21px; font-weight: 800; margin-bottom: 4px; } .welcome-text p { font-size: 13px; color: rgba(255,255,255,.55); } /* ── Avisos ── */ .aviso { border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-size: 13px; display: flex; align-items: flex-start; gap: 10px; } .aviso svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; } .aviso-warning { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; } .aviso-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; } /* ── Card ── */ .card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 20px; border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .card-title { font-family: 'Poppins',sans-serif; font-size: 14.5px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 8px; } .card-title svg { width: 17px; height: 17px; color: var(--gold); } .card-body { padding: 22px; } /* ── Estado hoy ── */ .estado-hoy-box { border-radius: 14px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; border: 2px solid transparent; } .estado-hoy-left { display: flex; align-items: center; gap: 14px; } .estado-hoy-emoji { font-size: 36px; line-height: 1; } .estado-hoy-label { font-family: 'Poppins',sans-serif; font-size: 22px; font-weight: 800; } .estado-hoy-sub { font-size: 12.5px; margin-top: 2px; opacity: .7; } .estado-hoy-hora { font-family: 'Poppins',sans-serif; font-size: 28px; font-weight: 800; opacity: .85; } .sin-registro { background: #F0F4FB; border: 2px dashed #c7d2e8; border-radius: 14px; padding: 20px 24px; text-align: center; color: var(--muted); font-size: 13.5px; margin-bottom: 20px; } .sin-registro strong { display: block; font-size: 15px; color: var(--text); margin-bottom: 4px; } /* ── Stats ── */ .stats-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 22px; } .stat-card { background: var(--white); border-radius: 14px; padding: 18px 14px 16px; text-align: center; border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(12,41,85,.07), 0 1px 3px rgba(12,41,85,.04); position: relative; overflow: hidden; transition: transform 200ms ease, box-shadow 200ms ease; } .stat-card:hover { transform: translateY(-2px); } .stat-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 14px 14px 0 0; } .sc-verde::after { background: #059669; } .sc-amari::after { background: #d97706; } .sc-rojo::after { background: #dc2626; } .sc-celest::after { background: #0891b2; } .sc-violeta::after { background: #6d28d9; } .sc-pct::after { background: linear-gradient(90deg, var(--gold), #D9B83A); } .stat-card .s-ico { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; flex-shrink: 0; } .stat-card .s-ico svg { width: 20px; height: 20px; } .sc-verde .s-ico { background: rgba(5,150,105,.10); color: #059669; } .sc-amari .s-ico { background: rgba(217,119,6,.10); color: #d97706; } .sc-rojo .s-ico { background: rgba(220,38,38,.10); color: #dc2626; } .sc-celest .s-ico { background: rgba(8,145,178,.10); color: #0891b2; } .sc-violeta .s-ico { background: rgba(109,40,217,.10); color: #6d28d9; } .sc-pct .s-ico { background: rgba(201,162,39,.13); color: #A8841B; } .stat-card .s-num { font-family: 'Poppins',sans-serif; font-size: 28px; font-weight: 800; margin: 0 0 3px; line-height: 1; } .stat-card .s-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); } .sc-verde .s-num { color: #059669; } .sc-amari .s-num { color: #d97706; } .sc-rojo .s-num { color: #dc2626; } .sc-celest .s-num { color: #0891b2; } .sc-violeta .s-num { color: #6d28d9; } .sc-pct .s-num { color: var(--navy); font-size: 26px; } .sc-pct { background: linear-gradient(135deg, var(--navy) 0%, #1A4080 100%); color: white; } .sc-pct .s-lbl { color: rgba(255,255,255,.55); } .sc-pct .s-num { color: var(--gold); } .sc-pct:hover { box-shadow: 0 8px 24px rgba(12,41,85,.20); } /* ── Datos del estudiante card ── */ .datos-card { background: linear-gradient(135deg, #0C2955 0%, #0F3266 60%, #071C3D 100%); border-radius: 18px; margin-bottom: 20px; border: 1px solid rgba(201,162,39,.25); box-shadow: 0 12px 40px rgba(10,22,40,.22), 0 0 0 1px rgba(201,162,39,.08); overflow: hidden; position: relative; } .datos-card-stripe { height: 3px; background: linear-gradient(90deg, #c9a227, #e8c547, #c9a227); } .datos-card-watermark-lg { position: absolute; right: -20px; top: -20px; width: 140px; height: 140px; border-radius: 50%; background: rgba(201,162,39,.05); pointer-events: none; } .datos-card-watermark-sm { position: absolute; right: 30px; top: 30px; width: 60px; height: 60px; border-radius: 50%; background: rgba(201,162,39,.04); pointer-events: none; } .datos-card-header { padding: 20px 24px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.08); } .datos-card-identity { display: flex; align-items: center; gap: 12px; } .datos-card-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #c9a227, #e8c547); display: flex; align-items: center; justify-content: center; font-family: 'Poppins',sans-serif; font-size: 19px; font-weight: 800; color: #0C2955; flex-shrink: 0; } .datos-card-nombre { font-family: 'Poppins',sans-serif; font-size: 16px; font-weight: 800; color: #ffffff; line-height: 1.2; } .datos-card-dni { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 2px; letter-spacing: .3px; } .datos-badge { padding: 4px 12px; border-radius: 20px; font-size: 10px; font-weight: 800; letter-spacing: 1px; } .datos-badge-activo { background: rgba(16,185,129,.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,.3); } .datos-badge-inactivo { background: rgba(239,68,68,.15); color: #fca5a5; border: 1px solid rgba(239,68,68,.3); } .datos-card-grid { padding: 18px 24px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .datos-field { background: rgba(255,255,255,.05); border-radius: 10px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.07); } .datos-field-label { font-size: 10px; color: rgba(255,255,255,.4); font-weight: 600; letter-spacing: .8px; margin-bottom: 4px; text-transform: uppercase; } .datos-field-value { font-size: 13px; color: #ffffff; font-weight: 600; } /* ── Info grid ── */ .info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .info-item { background: var(--fondo); border-radius: 10px; padding: 13px 15px; border: 1px solid var(--border); } .info-item .lbl { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; } .info-item .val { font-size: 14.5px; font-weight: 700; color: var(--navy); } /* ── Carnet ── */ .carnet-img { width: 100%; max-width: 480px; border-radius: 14px; box-shadow: var(--shadow); display: block; margin: 0 auto 16px; } .btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 10px; font-size: 13.5px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: all .2s; } .btn svg { width: 15px; height: 15px; } .btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: var(--navy); } .btn-gold:hover { box-shadow: 0 4px 14px rgba(201,162,39,.4); transform: translateY(-1px); } /* Boton principal del portal: mismo dorado con texto navy que el "Entrar" de la puerta (`.btn-submit` en portal_publico_base.html), pero de tamano normal y sin las sombras grandes -aqui va dentro de una tarjeta sobre fondo claro, no sobre el azul oscuro de la puerta. */ .btn-primary { background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: var(--navy); font-weight: 700; } .btn-primary:hover { box-shadow: 0 4px 14px rgba(201,162,39,.4); transform: translateY(-1px); } /* ── Exam stats ── */ .exam-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 16px; } .exam-stat { background: var(--fondo); border-radius: 10px; padding: 14px; border: 1px solid var(--border); text-align: center; } .exam-stat .es-val { font-family: 'Poppins',sans-serif; font-size: 24px; font-weight: 800; color: var(--navy); } .exam-stat .es-lbl { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; } /* ── Tabla ── */ table { width: 100%; border-collapse: collapse; font-size: 13.5px; } thead th { background: var(--navy); color: rgba(255,255,255,.85); padding: 11px 14px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; } tbody tr { border-bottom: 1px solid #f0f2f8; transition: background .15s; } tbody tr:nth-child(even) { background: #fafbfd; } tbody tr:hover { background: #f0f4ff; } tbody td { padding: 11px 14px; vertical-align: middle; } .empty-state { text-align: center; padding: 36px 24px; color: var(--muted); font-size: 14px; line-height: 1.6; } /* ── Badges ── */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; } /* Colores de texto a 4,5:1 o mas sobre su fondo (WCAG AA, medido con axe-core el 17-set-2026): los de antes quedaban entre 3,1 y 3,6. */ .badge-ok { background: #ecfdf5; color: #047857; } .badge-tard { background: #fffbeb; color: #b45309; } .badge-falta { background: #fef2f2; color: #b91c1c; } .badge-exit { background: #eff6ff; color: #2563eb; } .badge-just { background: #ecfeff; color: #0e7490; } .badge-early { background: #ecfeff; color: #0e7490; } .badge-sim { background: #eef2ff; color: #4338ca; } .badge-rapid { background: #fffbeb; color: #b45309; } .badge-feriado { background: #f3e8ff; color: #7c3aed; } .badge-clase { background: #ecfeff; color: #0e7490; } /* ── Tabs de resultados ── */ .res-tabs-bar { display: flex; border-bottom: 2px solid #f0f0f0; padding: 0 18px; overflow-x: auto; } .res-tab-btn { background: none; border: none; cursor: pointer; padding: 11px 18px; font-size: 11px; font-weight: 800; letter-spacing: .8px; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s; white-space: nowrap; flex-shrink: 0; } .res-tab-btn.active { color: var(--navy); border-bottom-color: var(--navy); } /* ── Desglose modal ── */ .btn-detalle-examen { background: #1a1a2e; color: #fff; border: none; border-radius: 20px; padding: 4px 12px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s; } .btn-detalle-examen:hover { background: #c9a227; color: #1a1a2e; } /* blanco sobre dorado no se lee */ .desglose-table { width: 100%; border-collapse: collapse; font-size: 13px; } .desglose-table th { background: #f8f9ff; padding: 8px 10px; text-align: left; font-size: 11px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid #eee; } .desglose-table td { padding: 9px 10px; border-bottom: 1px solid #f0f0f0; color: #1a1a2e; } .desglose-table tr:last-child td { border-bottom: none; } .desglose-table .col-nombre { font-weight: 700; } .desglose-table .col-ok { color: #047857; font-weight: 700; } .desglose-table .col-err { color: #dc2626; font-weight: 700; } .desglose-table .col-blank { color: #666; } .desglose-table .col-pts { font-weight: 800; color: #1a1a2e; text-align: right; } .desglose-total td { background: #f8f9ff; font-weight: 800; border-top: 2px solid #eee !important; } /* ── Respuestas modal ── */ .btn-respuestas-examen { background: #047857; color: #fff; border: none; border-radius: 20px; padding: 4px 12px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s; } .btn-respuestas-examen:hover { background: #065f46; } .preg-card { border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 14px; overflow: hidden; } .preg-header { padding: 10px 14px; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .preg-header.ok { background: #ecfdf5; color: #047857; } .preg-header.err { background: #fef2f2; color: #b91c1c; } .preg-header.blank { background: #f9fafb; color: #666; } .preg-enunciado { padding: 10px 14px 8px; font-size: 13px; color: #1a1a2e; line-height: 1.5; border-bottom: 1px solid #f0f0f0; } .preg-opciones { padding: 8px 14px 12px; } .opcion-row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 10px; border-radius: 8px; margin-bottom: 4px; font-size: 12.5px; color: #374151; line-height: 1.45; } .opcion-row.correcta { background: #ecfdf5; color: #065f46; font-weight: 700; } .opcion-row.alumno-err { background: #fef2f2; color: #991b1b; font-weight: 700; } .opcion-letra { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: #e5e7eb; color: #374151; } .opcion-row.correcta .opcion-letra { background: #047857; color: #fff; } .opcion-row.alumno-err .opcion-letra { background: #dc2626; color: #fff; } .preg-sin-respuesta { font-size: 11px; color: #888; padding: 4px 0 6px 2px; } /* ── Spinner ── */ @keyframes spin { to { transform: rotate(360deg); } } /* ── Responsive ── */ @media (max-width: 640px) { .portal-topbar { padding: 0 12px; height: 52px; } .portal-brand { font-size: 12.5px; letter-spacing: 0; flex-shrink: 1; min-width: 0; overflow: hidden; gap: 8px; } .portal-brand > div:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .portal-brand-icon { width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; } .portal-brand-icon svg { width: 14px; height: 14px; } .portal-brand-sub { display: none; } .topbar-actions { gap: 5px; flex-shrink: 0; } .btn-topbar { padding: 9px 10px; border-radius: 8px; min-width: 36px; justify-content: center; gap: 0; } .btn-topbar-label { display: none; } .container { padding: 14px 12px 60px; } .welcome-banner { flex-direction: column; text-align: center; padding: 20px 16px; gap: 12px; margin-bottom: 14px; } .welcome-avatar { width: 52px; height: 52px; font-size: 20px; } .welcome-text h2 { font-size: 17px; } .welcome-text p { font-size: 11.5px; } .estado-hoy-box { flex-direction: column; text-align: center; padding: 16px; } .estado-hoy-label { font-size: 20px; } .estado-hoy-hora { font-size: 24px; } .estado-hoy-emoji { font-size: 30px; } .sin-registro { padding: 16px 14px; font-size: 13px; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .sc-pct { grid-column: span 2; } .stat-card .s-num { font-size: 24px; } .info-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .info-item .val { font-size: 13px; } .card-header { padding: 13px 14px; gap: 6px; flex-wrap: wrap; } .card-title { font-size: 13px; } .card-body { padding: 14px; } .exam-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; } .exam-stat .es-val { font-size: 20px; } .carnet-img { border-radius: 10px; } .btn { font-size: 13px; padding: 9px 16px; } .datos-card-header { flex-direction: column; align-items: flex-start; gap: 10px; } .datos-card-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px 16px 16px; } .table-responsive thead { display: none; } .table-responsive tbody tr { display: block; border: 1px solid var(--border); border-radius: 10px; margin: 0 0 10px; padding: 10px 12px; background: var(--white); } .table-responsive tbody td { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border: none; border-bottom: 1px solid #f0f2f8; font-size: 12.5px; } .table-responsive tbody td:last-child { border-bottom: none; } .table-responsive tbody td::before { content: attr(data-label); font-weight: 600; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; flex-shrink: 0; margin-right: 8px; } .eval-row-inner { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } .res-tabs-bar { padding: 0 10px; } .res-tab-btn { padding: 10px 12px; font-size: 10px; } } /* ── Pie de pagina ───────────────────────────────────────────────────────── */ .pie-publico { margin-top: 48px; padding: 34px 20px 22px; border-top: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.72); font-size: 12.5px; line-height: 1.65; } .pie-cols { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .pie-titulo { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .pie-publico a { color: rgba(255,255,255,.86); text-decoration: none; } .pie-publico a:hover { color: var(--gold); text-decoration: underline; } .pie-docs { list-style: none; padding: 0; margin: 0; } .pie-docs li { margin-bottom: 5px; } .pie-redes { display: flex; gap: 14px; margin-top: 10px; } .pie-horario { margin-top: 8px; color: rgba(255,255,255,.60); } .pie-legal { max-width: 980px; margin: 24px auto 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); text-align: center; font-size: 11.5px; color: rgba(255,255,255,.52); } @media (max-width: 640px) { .pie-cols { grid-template-columns: 1fr; gap: 24px; text-align: center; } .pie-redes { justify-content: center; } } /* El pie sobre el fondo CLARO de las paginas de dentro. Las puertas van sobre azul oscuro y usan la variante de arriba; esta solo cambia los colores. */ .container ~ .pie-publico { border-top-color: var(--border); color: var(--muted); background: #fff; } .container ~ .pie-publico a { color: var(--navy); } /* El dorado de marca sobre blanco da 2,4:1 y no se lee: sobre el fondo claro los titulos del pie van en un dorado oscuro (5,2:1). En las puertas, sobre azul, el dorado de siempre si se lee. */ .container ~ .pie-publico .pie-titulo, .container ~ .pie-publico a:hover { color: #86680A; } .container ~ .pie-publico .pie-legal { color: var(--muted); border-top-color: var(--border); } /* El horario tiene color PROPIO arriba (rgba(255,255,255,.60), para el fondo oscuro de las puertas) y gana por especificidad al color del bloque: sin esta linea sale blanco sobre blanco en las seis paginas de dentro. */ .container ~ .pie-publico .pie-horario { color: var(--muted); } /* ── La calle: la pagina publica de un documento ────────────────────────────── `publico_documento.html` es la pagina donde un padre que AUN NO se ha matriculado lee el reglamento. Usaba cinco clases que no existian en ninguna hoja: con el reset de arriba (`* { margin:0; padding:0 }`) los

,

y