/* ===================================================================== ATENA — NOCHE DE LA SABIDURÍA (oscuro) / ATENA FINANCIAL (claro) Sistema visual compartido por login.php, index.php y escuelas.php. CSS plano, sin build. El tema se alterna con [data-theme] en (ver atena-theme.js). ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600;700&display=swap'); :root { --atena-bg-black: #000; --atena-bg: #070C1B; --atena-surface: #0D1630; --atena-sidebar: #0A1128; --atena-border-subtle: #1E2D5A; --atena-gold: #C5A059; --atena-gold-text: #C5A059; /* dorado usado como TEXTO (encabezados, links, badges) */ --atena-gold-bright: #D4AF37; --atena-on-gold: #070C1B; /* texto/íconos sobre fondos dorados: siempre oscuro */ --atena-blue-accent: #3B82F6; --atena-text: #F9FAFB; --atena-text-muted: #9CA3AF; --atena-success: #7fd18f; --atena-success-bg: rgba(127, 209, 143, 0.08); --atena-danger: #f3a3a1; --atena-danger-bg: rgba(197, 90, 89, 0.15); --atena-warning: #D4AF37; --atena-warning-bg: rgba(212, 175, 55, 0.08); --atena-orange-text: #f0a868; --font-serif: 'Playfair Display', Georgia, serif; --font-sans: 'Inter', Arial, sans-serif; } /* Modo claro — paleta "Atena Financial": ivory + azul noche + dorado mate */ :root[data-theme="light"] { --atena-bg: #FAFAFA; --atena-surface: #FFFFFF; --atena-sidebar: #0A192F; /* encabezados de tabla siguen en azul noche en ambos temas */ --atena-border-subtle: #E5E7EB; --atena-gold-text: #8A6D23; /* dorado más profundo: legible sobre fondo claro */ --atena-gold-bright: #B3894A; --atena-text: #1F2933; --atena-text-muted: #6B7280; --atena-success: #1a7f37; --atena-success-bg: rgba(26, 127, 55, 0.08); --atena-danger: #b3261e; --atena-danger-bg: rgba(179, 38, 30, 0.08); --atena-warning: #8A6D23; --atena-warning-bg: rgba(197, 160, 89, 0.12); --atena-orange-text: #8a4a00; } :root { color-scheme: dark light; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } body { font-family: var(--font-sans); background: var(--atena-bg); color: var(--atena-text); forced-color-adjust: none; } .jexcel, .jexcel * { forced-color-adjust: none; } h1, h2, h3 { font-family: var(--font-sans); color: var(--atena-gold-text); font-weight: 700; } .eyebrow { margin: 0; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--atena-text-muted); font-weight: 600; } .encabezado-titulo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 4px; } .encabezado-titulo h2 { margin: 0; font-size: 26px; } .badge-institucion { font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 999px; border: 1px solid rgba(197, 160, 89, 0.4); color: var(--atena-gold-text); background: rgba(197, 160, 89, 0.08); white-space: nowrap; } a { color: var(--atena-gold-text); } a:hover { text-decoration: underline; } /* Botón para alternar modo oscuro/claro */ .btn-tema { background: transparent; color: var(--atena-text-muted); border: 1px solid var(--atena-border-subtle); border-radius: 999px; width: 32px; height: 32px; padding: 0; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .btn-tema:hover { background: rgba(197, 160, 89, 0.12); box-shadow: none; color: var(--atena-gold-text); } .panel, .atena-card { background: var(--atena-surface); border: 1px solid rgba(197, 160, 89, 0.3); border-radius: 12px; box-shadow: 0 4px 20px rgba(197, 160, 89, 0.08); } input[type=text], input[type=date], input[type=password], select { background: var(--atena-surface); border: 1px solid var(--atena-border-subtle); color: var(--atena-text); font-family: var(--font-sans); } input[type=text]::placeholder, input[type=password]::placeholder { color: var(--atena-text-muted); } input:focus, select:focus { outline: none; border-color: var(--atena-gold); } button, .btn-primario { font-family: var(--font-sans); font-weight: 700; background: var(--atena-gold); color: var(--atena-on-gold); border: 0; transition: background 0.15s, box-shadow 0.15s; } button:hover, .btn-primario:hover { background: var(--atena-gold-bright); box-shadow: 0 0 15px rgba(212, 175, 55, 0.4); } .btn-secundario, button.small { background: transparent; color: var(--atena-gold-text); border: 1px solid var(--atena-gold); font-weight: 600; } .btn-secundario:hover, button.small:hover { background: rgba(197, 160, 89, 0.12); box-shadow: none; } .btn-advertencia { background: transparent; color: var(--atena-orange-text); border: 1px solid #bf5700; font-weight: 600; } .btn-advertencia:hover { background: rgba(191, 87, 0, 0.15); box-shadow: 0 0 12px rgba(191, 87, 0, 0.25); } /* Toolbar de acciones (botones + filtros) */ .toolbar { margin-bottom: 10px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: rgba(128, 128, 128, 0.04); border: 1px solid var(--atena-border-subtle); border-radius: 10px; } .toolbar-divider { border-left: 1px solid var(--atena-border-subtle); height: 24px; } /* Tarjeta contenedora de la hoja de calificaciones */ .card-tabla { background: var(--atena-surface); border: 1px solid rgba(197, 160, 89, 0.3); border-radius: 12px; box-shadow: 0 4px 20px rgba(197, 160, 89, 0.08); padding: 14px; overflow-x: auto; } /* Alertas / avisos de estado */ .alert { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin: 0 0 10px; border-left: 3px solid; color: var(--atena-text); } .alert b { font-weight: 700; } .alert-exito { background: var(--atena-success-bg); border-color: var(--atena-success); } .alert-advertencia { background: var(--atena-danger-bg); border-color: var(--atena-danger); } .alert-bloqueo { background: var(--atena-warning-bg); border-color: var(--atena-warning); } table { color: var(--atena-text); } th, td { border-color: var(--atena-border-subtle) !important; } th { background: var(--atena-sidebar) !important; color: var(--atena-gold); font-family: var(--font-sans); } .msg.ok { background: var(--atena-success-bg); color: var(--atena-success); border: 1px solid var(--atena-success); } .msg.err { background: var(--atena-danger-bg); color: var(--atena-danger); border: 1px solid var(--atena-danger); } .estado-1 { color: var(--atena-success); } .estado-0 { color: var(--atena-danger); } /* Hoja de calificaciones (jspreadsheet-ce) — el encabezado se queda en azul noche/dorado en ambos temas, como el resto de franjas de acento. */ .jexcel > thead > tr > td { background: var(--atena-sidebar) !important; color: var(--atena-gold) !important; font-family: var(--font-sans); padding: 8px 10px !important; } .jexcel, .jexcel > tbody > tr > td { background: var(--atena-surface) !important; color: var(--atena-text) !important; border-color: var(--atena-border-subtle) !important; font-family: var(--font-sans); } .jexcel > tbody > tr > td { padding: 6px 10px !important; } .jexcel > tbody > tr:nth-child(even) > td { background: rgba(128, 128, 128, 0.06) !important; } .jexcel > tbody > tr > td.readonly { background: rgba(128, 128, 128, 0.08) !important; color: #777 !important; } .jexcel > tbody > tr > td.highlight-selected { background: rgba(197, 160, 89, 0.18) !important; box-shadow: inset 0 0 0 2px var(--atena-gold); } .jexcel td.jexcel_row, .jexcel td.jexcel_selectall { background: var(--atena-sidebar) !important; color: var(--atena-gold) !important; } /* Listbox de calificaciones (rol escuela) */ .jdropdown-header { background: var(--atena-sidebar) !important; color: #F9FAFB !important; } .jdropdown-container { background: var(--atena-surface) !important; border: 1px solid rgba(197,160,89,0.3) !important; } .jdropdown-item { color: var(--atena-text) !important; } .jdropdown-item:hover { background: rgba(197,160,89,0.15) !important; } .jdropdown-close { color: var(--atena-gold-text) !important; }