/* sigdoc-theme.css — Tokens del design system SIGDOC. 3 temas: institucional / oscuro / alto-contraste. Copiados verbatim del mock aprobado app/mocks/panel_salud_mock.html. El tema activo se selecciona con y persiste en localStorage (clave sigdoc-tema, ver panel.js). */ @import "components.css"; /* ───────── Fuentes self-hosted — IBM Plex (OFL, app/static/fonts) ────────── */ @font-face{ font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/ibm-plex-sans-400.woff2") format("woff2"); } @font-face{ font-family:"IBM Plex Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/ibm-plex-sans-500.woff2") format("woff2"); } @font-face{ font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/ibm-plex-sans-600.woff2") format("woff2"); } @font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); } @font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); } @font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/ibm-plex-mono-600.woff2") format("woff2"); } /* ───────── Tokens invariantes del rediseño (tipografía + espaciado) ───────── */ /* Iguales en los 3 temas: tamaños/escala y la grilla de espaciado 4–24. */ :root{ --font-ui:"IBM Plex Sans", system-ui, Roboto, -apple-system, sans-serif; --font-mono:"IBM Plex Mono", ui-monospace, "Consolas", monospace; --fs-eyebrow:11px; --fs-meta:11.5px; --fs-body:14px; --fs-row:13px; --fs-card-title:13.5px; --fs-h1:20px; --fs-kpi:21px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; } /* ───────────────────────── TOKENS — TEMA INSTITUCIONAL ───────────────────── */ [data-theme="institucional"]{ --color-primario:#2C6FA8; --color-primario-hover:#1F5485; --color-primario-suave:#E3EEF7; --color-primario-oscuro:#1A4467; --color-secundario:#5A8CB0; --color-secundario-suave:#D9E8F2; --color-acento-rojo:#A4243B; --color-acento-rojo-suave:#FBE9ED; --bg-app:#F7F9FB; --bg-card:#FFFFFF; --bg-zebra:#F4F7FA; --bg-hover:#E3EEF7; --bg-seleccionado:#FFF4C2; --border-suave:#E0E4E9; --border-medio:#C0C8D2; --border-fuerte:#8A95A3; --border-error:#D9534F; --text-principal:#2C2C2A; --text-secundario:#5A6A7A; --text-tenue:#8A95A3; --text-sobre-primario:#FFFFFF; --text-link:#2C6FA8; --estado-exito:#1B7F4F; --estado-exito-suave:#E1F2EA; --estado-alerta:#C77700; --estado-alerta-suave:#FBEEDB; --estado-info:#5A8CB0; --estado-info-suave:#E5EEF5; --estado-critico:#A4243B; --estado-critico-suave:#FBE9ED; --estado-neutro:#6B6B68; --estado-neutro-suave:#EEEEEC; --accion-ver:#2C6FA8; --accion-editar:#C77700; --accion-eliminar:#D9534F; --accion-confirmar:#1B7F4F; --sombra-card:0 1px 3px rgba(0,0,0,.04); --sombra-modal:0 8px 32px rgba(0,0,0,.12); --sombra-hover:0 2px 8px rgba(0,0,0,.06); --radio-pequeno:4px; --radio-medio:6px; --radio-grande:8px; /* ── Rediseño institucional (tokens nuevos, aditivos) ── */ --surface-app:#F6F8FA; --surface-card:#FFFFFF; --surface-zebra:#FAFBFC; --border-card:#E4E8EC; --divider:#F1F4F7; --tx-titulo:#16202C; --tx-cuerpo:#475569; --tx-secundario:#64748B; --tx-hint:#94A3B8; --codigo-bg:#EAF2F9; --codigo-border:#C5DCEC; --codigo-text:#1F5485; --ok-dot:#12B76A; --ok-text:#027A48; --ok-bg:#ECFDF3; --ok-border:#ABEFC6; --warn-dot:#F79009; --warn-text:#B54708; --warn-bg:#FFFAEB; --warn-border:#FEDF89; --bad-dot:#F04438; --bad-text:#B42318; --bad-bg:#FEF3F2; --bad-border:#FECDCA; --info-dot:#175CD3; --info-text:#175CD3; --info-bg:#EFF8FF; --neutral-dot:#94A3B8; --neutral-text:#475569; --neutral-bg:#F2F4F7; --radio-card:10px; --radio-control:8px; --radio-pill:999px; --radio-chip:6px; --shadow-card:0 1px 2px rgba(16,24,40,.05); --shadow-hover:0 2px 8px rgba(16,24,40,.08); --shadow-modal:0 8px 32px rgba(0,0,0,.12); } /* ───────────────────────── TOKENS — TEMA OSCURO ──────────────────────────── */ [data-theme="oscuro"]{ --color-primario:#5A9FD9; --color-primario-hover:#7AB5E0; --color-primario-suave:#1A3045; --color-primario-oscuro:#3A7FB8; --color-secundario:#7BA8C6; --color-secundario-suave:#243648; --color-acento-rojo:#D85A6B; --color-acento-rojo-suave:#3A1820; --bg-app:#1A1D21; --bg-card:#24282E; --bg-zebra:#2A2F36; --bg-hover:#2F353D; --bg-seleccionado:#4A4520; --border-suave:#2F353D; --border-medio:#3F4651; --border-fuerte:#5A6470; --border-error:#D85A6B; --text-principal:#E8EAED; --text-secundario:#A8B0BA; --text-tenue:#6A7280; --text-sobre-primario:#FFFFFF; --text-link:#5A9FD9; --estado-exito:#4AA876; --estado-exito-suave:#1A3025; --estado-alerta:#E0A040; --estado-alerta-suave:#3A2A15; --estado-info:#7BA8C6; --estado-info-suave:#1F3040; --estado-critico:#D85A6B; --estado-critico-suave:#3A1820; --estado-neutro:#8A9098; --estado-neutro-suave:#2A2D32; --accion-ver:#5A9FD9; --accion-editar:#E0A040; --accion-eliminar:#D85A6B; --accion-confirmar:#4AA876; --sombra-card:0 1px 3px rgba(0,0,0,.3); --sombra-modal:0 8px 32px rgba(0,0,0,.5); --sombra-hover:0 2px 8px rgba(0,0,0,.4); --radio-pequeno:4px; --radio-medio:6px; --radio-grande:8px; /* ── Rediseño oscuro (misma intención, adaptada a fondo oscuro) ── */ --surface-app:#1A1D21; --surface-card:#24282E; --surface-zebra:#20242A; --border-card:#2F353D; --divider:#262B31; --tx-titulo:#E8EAED; --tx-cuerpo:#C4CBD4; --tx-secundario:#A8B0BA; --tx-hint:#6A7280; --codigo-bg:#1A3045; --codigo-border:#2C4A66; --codigo-text:#9FC3E6; --ok-dot:#3DCB86; --ok-text:#5BD89B; --ok-bg:#13301F; --ok-border:#1F5236; --warn-dot:#F7A53B; --warn-text:#F0B860; --warn-bg:#322512; --warn-border:#5A431C; --bad-dot:#F7766B; --bad-text:#F79189; --bad-bg:#3A1A18; --bad-border:#5E2A26; --info-dot:#5A9FD9; --info-text:#7FB6E4; --info-bg:#16293A; --neutral-dot:#8A9098; --neutral-text:#A8B0BA; --neutral-bg:#2A2F36; --radio-card:10px; --radio-control:8px; --radio-pill:999px; --radio-chip:6px; --shadow-card:0 1px 2px rgba(0,0,0,.4); --shadow-hover:0 2px 8px rgba(0,0,0,.5); --shadow-modal:0 8px 32px rgba(0,0,0,.6); } /* ───────────────────── TOKENS — TEMA ALTO CONTRASTE ──────────────────────── */ [data-theme="alto-contraste"]{ --color-primario:#003F7F; --color-primario-hover:#002C5C; --color-primario-suave:#D5E5F5; --color-primario-oscuro:#001F40; --color-secundario:#2C5A85; --color-secundario-suave:#C5DAE8; --color-acento-rojo:#8B0000; --color-acento-rojo-suave:#FFD5D5; --bg-app:#FFFFFF; --bg-card:#FFFFFF; --bg-zebra:#F0F0F0; --bg-hover:#D5E5F5; --bg-seleccionado:#FFEB3B; --border-suave:#999999; --border-medio:#666666; --border-fuerte:#000000; --border-error:#8B0000; --text-principal:#000000; --text-secundario:#333333; --text-tenue:#555555; --text-sobre-primario:#FFFFFF; --text-link:#003F7F; --estado-exito:#006400; --estado-exito-suave:#C8E6C9; --estado-alerta:#B8860B; --estado-alerta-suave:#FFF3C4; --estado-info:#003F7F; --estado-info-suave:#D5E5F5; --estado-critico:#8B0000; --estado-critico-suave:#FFD5D5; --estado-neutro:#444444; --estado-neutro-suave:#DDDDDD; --accion-ver:#003F7F; --accion-editar:#B8860B; --accion-eliminar:#8B0000; --accion-confirmar:#006400; --sombra-card:0 0 0 1px #000; --sombra-modal:0 0 0 2px #000; --sombra-hover:0 0 0 2px #003F7F; --radio-pequeno:2px; --radio-medio:3px; --radio-grande:4px; /* ── Rediseño alto contraste (bordes en vez de sombra, AA, radios chicos) ── */ --surface-app:#FFFFFF; --surface-card:#FFFFFF; --surface-zebra:#F0F0F0; --border-card:#000000; --divider:#999999; --tx-titulo:#000000; --tx-cuerpo:#1A1A1A; --tx-secundario:#333333; --tx-hint:#555555; --codigo-bg:#D5E5F5; --codigo-border:#003F7F; --codigo-text:#001F40; --ok-dot:#006400; --ok-text:#004D00; --ok-bg:#C8E6C9; --ok-border:#006400; --warn-dot:#8A6100; --warn-text:#6B4B00; --warn-bg:#FFF3C4; --warn-border:#8A6100; --bad-dot:#8B0000; --bad-text:#6B0000; --bad-bg:#FFD5D5; --bad-border:#8B0000; --info-dot:#003F7F; --info-text:#002C5C; --info-bg:#D5E5F5; --neutral-dot:#444444; --neutral-text:#1A1A1A; --neutral-bg:#DDDDDD; --radio-card:4px; --radio-control:3px; --radio-pill:999px; --radio-chip:3px; --shadow-card:0 0 0 1px #000; --shadow-hover:0 0 0 2px #003F7F; --shadow-modal:0 0 0 2px #000; }