/* Modo oscuro (bloque 8 · Apariencia) * * POR QUÉ EL ATRIBUTO VA EN `.admin-app` Y NO EN * ---------------------------------------------------- * Estas variables son globales: si `data-theme` se pusiera en la raíz, el * portal del paciente y el del médico cambiarían con él, y ninguno de los dos * se ha revisado en oscuro. Poniéndolo en el contenedor del panel, la cascada * lo limita a su subárbol, que es justo lo que se pidió: aplicarlo al admin * ahora y dejar las variables listas para extenderlo después. * * CÓMO SE INVIERTE * ---------------- * La mitad de la interfaz usa la escala `--slate-*` directamente para textos * y bordes, no solo los tokens de superficie. Redefinir solo `--bg-surface` y * `--text-main` dejaría los grises al revés: texto oscuro sobre fondo oscuro. * Por eso se invierte la escala entera —el 50 pasa a ser el 900— y con eso la * mayor parte del panel funciona sin tocar un solo componente. * * TRES ESTADOS, NO DOS * -------------------- * `data-theme="claro"`, `"oscuro"` y `"auto"`. En automático manda el sistema, * y por eso hace falta la consulta de medio: sin ella, "automático" se * quedaría en claro para quien tenga el sistema en oscuro. */ .admin-app[data-theme="oscuro"], .admin-app[data-theme="auto"] { /* Se declara vacío a propósito: el bloque real está en la regla compartida de abajo, para no repetir 30 variables dos veces. */ } /* Los valores, una sola vez. `:is()` evita duplicar el bloque entero. */ .admin-app[data-theme="oscuro"] { --slate-50: #0f172a; --slate-100: #1e293b; --slate-200: #334155; --slate-300: #475569; --slate-400: #64748b; --slate-500: #94a3b8; --slate-600: #cbd5e1; --slate-700: #e2e8f0; --slate-800: #f1f5f9; --slate-900: #f8fafc; --bg-app: #0b1220; --bg-surface: #131c2e; --bg-surface-subtle: #1a2436; --text-main: #e8eef7; --text-muted: #a3b0c4; --text-subtle: #7c8aa0; --border-color: #26324a; --border-color-subtle: #1c2637; /* El azul de marca sube de luminosidad: el 600 sobre fondo oscuro queda por debajo del contraste mínimo para texto. */ --primary-50: #0d2438; --primary-100: #10314b; --primary-300: #3d8fc4; --primary-400: #56a8dc; --primary-500: #6bb8e8; --primary-600: #7cc4f0; --primary-700: #9ad3f5; --primary-800: #b8e0f8; --accent-50: #0c2a20; --accent-600: #4ade80; --accent-700: #6ee7a5; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 4px 12px rgba(0, 0, 0, .45); /* Estos dos se quedaron fuera al quitar el marco: el sidebar seguía pintándose con un gris claro fijo, y con el texto ya invertido eso dejaba letras claras sobre fondo claro. */ --mac-bg-sidebar: #101a2c; --mac-border: rgba(255, 255, 255, .09); color-scheme: dark; } @media (prefers-color-scheme: dark) { .admin-app[data-theme="auto"] { --slate-50: #0f172a; --slate-100: #1e293b; --slate-200: #334155; --slate-300: #475569; --slate-400: #64748b; --slate-500: #94a3b8; --slate-600: #cbd5e1; --slate-700: #e2e8f0; --slate-800: #f1f5f9; --slate-900: #f8fafc; --bg-app: #0b1220; --bg-surface: #131c2e; --bg-surface-subtle: #1a2436; --text-main: #e8eef7; --text-muted: #a3b0c4; --text-subtle: #7c8aa0; --border-color: #26324a; --border-color-subtle: #1c2637; --primary-50: #0d2438; --primary-100: #10314b; --primary-300: #3d8fc4; --primary-400: #56a8dc; --primary-500: #6bb8e8; --primary-600: #7cc4f0; --primary-700: #9ad3f5; --primary-800: #b8e0f8; --accent-50: #0c2a20; --accent-600: #4ade80; --accent-700: #6ee7a5; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 4px 12px rgba(0, 0, 0, .45); --mac-bg-sidebar: #101a2c; --mac-border: rgba(255, 255, 255, .09); color-scheme: dark; } } /* Los blancos escritos a pelo en los componentes no los alcanza ninguna variable. Se corrigen aquí, que es el único sitio donde se sabe que estamos en oscuro. */ .admin-app[data-theme="oscuro"] .admin-table, .admin-app[data-theme="oscuro"] [style*="background: #fff"], .admin-app[data-theme="oscuro"] [style*="background: #ffffff"] { background: var(--bg-surface) !important; color: var(--text-main); } @media (prefers-color-scheme: dark) { .admin-app[data-theme="auto"] .admin-table, .admin-app[data-theme="auto"] [style*="background: #fff"], .admin-app[data-theme="auto"] [style*="background: #ffffff"] { background: var(--bg-surface) !important; color: var(--text-main); } } /* UN TOKEN NO PUEDE SER TEXTO Y RELLENO A LA VEZ * ---------------------------------------------- * `--primary-600` se usa para dos cosas opuestas: como color de texto sobre * fondo claro, y como relleno debajo de texto blanco. Al aclararlo para que se * leyera en oscuro, el segundo caso quedó en blanco sobre azul claro: 1.91 de * contraste, cuando el mínimo legible es 4.5. * * `--primary-solido` separa los dos usos. En claro vale lo mismo que siempre; * en oscuro se hunde para que el blanco encima siga leyéndose. */ :root { --primary-solido: #0277b0; } /* mismo motivo que --primary-600 */ .admin-app[data-theme="oscuro"] { --primary-solido: #1d4ed8; } @media (prefers-color-scheme: dark) { .admin-app[data-theme="auto"] { --primary-solido: #1d4ed8; } } .admin-app[data-theme="oscuro"] .sidebar-nav-item.active, .admin-app[data-theme="oscuro"] .btn-primary, .admin-app[data-theme="oscuro"] .admin-avatar-btn, .admin-app[data-theme="oscuro"] .dest-espacios.lleno, .admin-app[data-theme="oscuro"] .filtro-opcion.activa, .admin-app[data-theme="oscuro"] .fb-tag-linear, .admin-app[data-theme="oscuro"] .sintoma-chip:hover { background: var(--primary-solido); color: #fff; } .admin-app[data-theme="oscuro"] .btn-primary:hover { background: #1e40af; } @media (prefers-color-scheme: dark) { .admin-app[data-theme="auto"] .sidebar-nav-item.active, .admin-app[data-theme="auto"] .btn-primary, .admin-app[data-theme="auto"] .filtro-opcion.activa, .admin-app[data-theme="auto"] .fb-tag-linear, .admin-app[data-theme="auto"] .admin-avatar-btn { background: var(--primary-solido); color: #fff; } .admin-app[data-theme="auto"] .btn-primary:hover { background: #1e40af; } } /* POR QUE AQUI NO HAY NADA PARA LOS ENLACES DE LA BARRA LATERAL * ------------------------------------------------------------- * Hubo unas reglas aqui que fijaban su color a mano en oscuro. Las puse porque * medi 2.25 de contraste y lo di por un fallo. No lo era: mi pagina de pruebas * ponia la clase `admin-app` en el , y `aplicarTema()` coge el PRIMER * `.admin-app` del documento --o sea el body, no el panel--. Con el atributo en * el elemento equivocado, la cascada que yo media no era la de la aplicacion. * * Montado como lo monta la app, `color: var(--slate-600)` de `admin-mac.css` ya * da 11.73 en oscuro y 7.12 en claro, sin ayuda de nadie. Lo comprobe anulando * las reglas: el numero no se movio. * * Lo dejo escrito porque el fantasma era convincente, y porque quien vuelva a * medir esto conviene que sepa que el banco de pruebas necesita UN solo * `.admin-app`, el que monta `renderAdminLayout`. */ /* ROJOS Y AMBARES QUE SOLO SERVIAN SOBRE FONDO CLARO * -------------------------------------------------- * `--danger-700` (#b91c1c) y `--warning-600` (#b45309) estan elegidos para * leerse sobre blanco: dan 5.02 y mas. Sobre la superficie oscura del panel * (#131c2e) caen a 2.63 y 3.39, los dos por debajo del 4.5. * * Casi todos sus usos van acompañados de un fondo claro escrito a mano * (`background: #fee2e2`), y esos se leen igual en los dos temas. Los de aqui * abajo son los que pintan el color a pelo sobre la superficie del tema. * * Encontrado midiendo la seccion "Facturacion de Estudios" con datos reales: * una celda con el numero en rojo daba 2.63. * * Va por selector y no redefiniendo el token, precisamente porque el token * TAMBIEN se usa sobre esos fondos claros: un rojo claro sobre rosa claro * fallaria al reves. * * Todo esto cuelga de `.admin-app`, asi que no alcanza al portal del centro * --que no tiene modo oscuro-- aunque algunas clases vengan de `centros.css`. */ .admin-app[data-theme="oscuro"] .cm-num.malo, .admin-app[data-theme="oscuro"] .dest-dias.vencido, .admin-app[data-theme="oscuro"] .centro-error, .admin-app[data-theme="oscuro"] .centro-metrica.alerta b, .admin-app[data-theme="oscuro"] .kanban-reloj.rojo, .admin-app[data-theme="oscuro"] .se-error, .admin-app[data-theme="oscuro"] .res-estado.caido .res-estado-n, .admin-app[data-theme="oscuro"] .eq-baja, .admin-app[data-theme="oscuro"] .sol-archivo small.mal { color: #f87171; /* 6.16 sobre #131c2e */ } .admin-app[data-theme="oscuro"] .dest-dias.aviso, .admin-app[data-theme="oscuro"] .ficha-cifra.aviso b, .admin-app[data-theme="oscuro"] .aud-anomalias strong, .admin-app[data-theme="oscuro"] .centro-sucursales em.falta, .admin-app[data-theme="oscuro"] .cm-sin-licencia, .admin-app[data-theme="oscuro"] .res-estado.con-prisa .res-estado-n { color: #f59e0b; /* 7.93 sobre #131c2e */ } @media (prefers-color-scheme: dark) { .admin-app[data-theme="auto"] .cm-num.malo, .admin-app[data-theme="auto"] .dest-dias.vencido, .admin-app[data-theme="auto"] .centro-error, .admin-app[data-theme="auto"] .centro-metrica.alerta b, .admin-app[data-theme="auto"] .kanban-reloj.rojo, .admin-app[data-theme="auto"] .se-error, .admin-app[data-theme="auto"] .res-estado.caido .res-estado-n, .admin-app[data-theme="auto"] .eq-baja, .admin-app[data-theme="auto"] .sol-archivo small.mal { color: #f87171; } .admin-app[data-theme="auto"] .dest-dias.aviso, .admin-app[data-theme="auto"] .ficha-cifra.aviso b, .admin-app[data-theme="auto"] .aud-anomalias strong, .admin-app[data-theme="auto"] .centro-sucursales em.falta, .admin-app[data-theme="auto"] .cm-sin-licencia, .admin-app[data-theme="auto"] .res-estado.con-prisa .res-estado-n { color: #f59e0b; } }