/* ============================================================ MODO OSCURO Activado con [data-tema="oscuro"] en el ============================================================ */ [data-tema="oscuro"] { --gris-bg: #1a1a1a; --gris-borde: #333; --gris-texto: #aaa; --texto: #e8e8e8; --card-bg: #2a2a2a; --dorado-claro: rgba(199, 155, 58, 0.15); } [data-tema="oscuro"] body { background: var(--gris-bg); color: var(--texto); } [data-tema="oscuro"] .aviso, [data-tema="oscuro"] .seccion-admin, [data-tema="oscuro"] .stat-card, [data-tema="oscuro"] .login-caja, [data-tema="oscuro"] .modal-caja { background: var(--card-bg); color: var(--texto); border-color: var(--gris-borde); } [data-tema="oscuro"] .aviso h3, [data-tema="oscuro"] .seccion-admin h2, [data-tema="oscuro"] .titulo-vista h1 { color: var(--dorado); } [data-tema="oscuro"] .contenido, [data-tema="oscuro"] .descripcion-vista, [data-tema="oscuro"] .stat-label { color: var(--gris-texto); } [data-tema="oscuro"] input, [data-tema="oscuro"] select, [data-tema="oscuro"] textarea { background: #1f1f1f; border-color: #444; color: var(--texto); } [data-tema="oscuro"] input:focus, [data-tema="oscuro"] select:focus, [data-tema="oscuro"] textarea:focus { border-color: var(--dorado); box-shadow: 0 0 0 3px rgba(199, 155, 58, 0.2); } [data-tema="oscuro"] .nav-admin { background: #1f1f1f; border-color: #333; } [data-tema="oscuro"] .tabs { background: #1f1f1f; } [data-tema="oscuro"] .tabs button { color: #aaa; } [data-tema="oscuro"] .tabs button.activo { color: var(--dorado); } [data-tema="oscuro"] .tabla-admin th { background: #1f1f1f; color: #aaa; } [data-tema="oscuro"] .tabla-admin td { border-bottom-color: #333; } [data-tema="oscuro"] .tabla-admin tr:hover { background: #1f1f1f; } [data-tema="oscuro"] .meta-card { background: #1f1f1f; } [data-tema="oscuro"] .academia-tag { background: #2a2a2a; } [data-tema="oscuro"] .info-privados { background: rgba(199, 155, 58, 0.1); } /* Botón cambio de tema */ .btn-tema { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 14px; margin-right: 8px; transition: background 0.2s; } .btn-tema:hover { background: rgba(255,255,255,0.25); }