/* ============================================================ VMED — Tema claro COCORA es un sistema oscuro: sus colores están pensados sobre #04070e. Invertirlos no funciona —el cian #22d3ee sobre blanco queda en 1,6:1 y el ámbar #fbbf24 en 1,8:1—, así que esta paleta se ELIGE: los mismos matices, escalonados para fondo claro y verificados contra blanco. Sólo se redefinen tokens. Ninguna regla de cocora.css se toca, así que el sistema visual sigue siendo el mismo. Se aplica de dos formas: [data-tema="claro"] elección explícita @media (prefers-color-scheme: light) guardado ajuste del sistema El guardado :not([data-tema="oscuro"]) es lo que permite que alguien con el sistema en claro elija oscuro y se respete. ============================================================ */ /* Todo el tema cuelga de UNA clase, .tema-claro, que un script en pone antes del primer pintado. Con selectores de atributo hacían falta dos bloques —el explícito y el del media query— y cada regla se escribía dos veces; una de las dos copias se habría quedado atrás al primer cambio. */ :root.tema-claro { color-scheme: light; --bg: #f6f8fa; --bg2: #eef2f6; /* Los paneles de COCORA son translúcidos sobre un halo oscuro. En claro el halo desaparece, así que los paneles pasan a ser blancos sólidos: una traslucidez sobre blanco no se distingue del fondo. */ --panel: #ffffff; --panel2: #ffffff; --panel-solido: #ffffff; --border: rgba(15, 23, 42, .12); --border2: rgba(21, 128, 61, .30); --text: #0f172a; --muted: #475569; --dim: #64748b; /* Escalones oscuros de los mismos matices: todos sobre 4,5:1 en blanco, salvo cyan2, que queda en 3,7 y por eso sólo se usa en marcas y bordes. */ --green: #15803d; --green2: #166534; --cyan: #0e7490; --cyan2: #0891b2; --sky: #0369a1; --violet: #6d28d9; --magenta: #a21caf; --blue: #1d4ed8; --rojo: #b91c1c; --ambar: #b45309; --brand: linear-gradient(120deg, #15803d, #0e7490 60%, #0891b2); --glow-c: rgba(14, 116, 144, .28); --glow-g: rgba(21, 128, 61, .25); /* Gráficos: superficie blanca y rejilla en gris frío, no en cian translúcido. */ --grafico-fondo: #ffffff; --grafico-serie: #0e7490; --grafico-rejilla: rgba(15, 23, 42, .10); } /* ============================================================ Reglas que no se resuelven cambiando un token, porque cocora.css las escribió con color literal. Se agrupan aquí para que quede claro qué hubo que rehacer y por qué. ============================================================ */ .tema-claro body::before { /* El halo de fondo es un degradado radial pensado para lucir sobre negro; sobre blanco produce manchas sucias. Se apaga. */ background: var(--bg); } .tema-claro .sidebar, .tema-claro .topbar { /* Sin el desenfoque translúcido: sobre claro no aporta y encarece el pintado. */ background: var(--panel); backdrop-filter: none; } .tema-claro .topbar { border-bottom: 1px solid var(--border); } .tema-claro .sidebar { border-right: 1px solid var(--border); } .tema-claro .panel { backdrop-filter: none; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -18px rgba(15, 23, 42, .25); } .tema-claro table.tabla th { background: #f1f5f9; } .tema-claro table.tabla td { border-bottom-color: rgba(15, 23, 42, .08); } .tema-claro table.tabla tbody tr:hover { background: #f8fafc; } .tema-claro .control { background: #ffffff; border-color: rgba(15, 23, 42, .18); } .tema-claro .control:focus { box-shadow: 0 0 0 3px rgba(14, 116, 144, .14); } .tema-claro .nav-item:hover { background: rgba(15, 23, 42, .05); } .tema-claro .nav-item.activo { background: linear-gradient(90deg, rgba(21, 128, 61, .12), rgba(14, 116, 144, .06)); box-shadow: inset 2px 0 0 var(--green); } /* .tema-claro .btn empata en especificidad con .btn.primario de cocora.css y carga después, así que le borraba el degradado: quedaba texto blanco sobre fondo blanco. Las variantes tienen que repetir su fondo aquí. */ .tema-claro .btn { background: #ffffff; } .tema-claro .btn:hover { background: #f8fafc; } .tema-claro .btn.primario { background: var(--brand); color: #ffffff; } .tema-claro .btn.primario:hover { background: var(--brand); } .tema-claro .btn.peligro { background: rgba(185, 28, 28, .06); color: var(--rojo); } .tema-claro .btn.peligro:hover { background: rgba(185, 28, 28, .12); } /* Las insignias de COCORA usan texto claro sobre fondo translúcido oscuro. En claro hay que subir el fondo y bajar el texto para que se lean. */ .tema-claro .badge.ok { background: rgba(21, 128, 61, .10); color: #15803d; border-color: rgba(21, 128, 61, .28); } .tema-claro .badge.no { background: rgba(185, 28, 28, .09); color: #b91c1c; border-color: rgba(185, 28, 28, .26); } .tema-claro .badge.warn { background: rgba(180, 83, 9, .10); color: #b45309; border-color: rgba(180, 83, 9, .26); } .tema-claro .badge.info { background: rgba(3, 105, 161, .09); color: #0369a1; border-color: rgba(3, 105, 161, .26); } .tema-claro .badge.neutro { background: rgba(15, 23, 42, .05); color: var(--muted); border-color: var(--border); } .tema-claro .badge.violeta { background: rgba(109, 40, 217, .09); color: #6d28d9; border-color: rgba(109, 40, 217, .26); } .tema-claro .aviso.ok { background: #f0fdf4; border-color: rgba(21, 128, 61, .28); color: #14532d; } .tema-claro .aviso.error { background: #fef2f2; border-color: rgba(185, 28, 28, .26); color: #7f1d1d; } .tema-claro .aviso.info { background: #f0f9ff; border-color: rgba(3, 105, 161, .26); color: #0c4a6e; } .tema-claro .aviso.warn { background: #fffbeb; border-color: rgba(180, 83, 9, .26); color: #78350f; } .tema-claro .secreto { background: #f8fafc; color: #15803d; border-color: rgba(21, 128, 61, .30); } .tema-claro .ingreso-caja { background: #ffffff; backdrop-filter: none; box-shadow: 0 20px 50px -20px rgba(15, 23, 42, .28); } .tema-claro .orbe { opacity: .10; } .tema-claro .buscador-fondo, .tema-claro .camara-fondo { background: rgba(15, 23, 42, .38); } .tema-claro .buscador-caja, .tema-claro .visor-caja, .tema-claro .camara-caja { background: #ffffff; } .tema-claro .buscador-item:hover, .tema-claro .buscador-item.activo { background: linear-gradient(90deg, rgba(21, 128, 61, .10), rgba(14, 116, 144, .05)); } .tema-claro .buscador-disparo kbd, .tema-claro .buscador-campo kbd { background: #f1f5f9; } .tema-claro .nav-cuenta { background: rgba(15, 23, 42, .05); } .tema-claro .nav-cuenta--alerta { background: rgba(185, 28, 28, .09); color: #b91c1c; border-color: rgba(185, 28, 28, .26); } .tema-claro .nav-cuenta--proceso { background: rgba(3, 105, 161, .09); color: #0369a1; border-color: rgba(3, 105, 161, .26); } .tema-claro .dropzone { background: #f8fafc; } .tema-claro .dropzone:hover, .tema-claro .dropzone.activa { background: rgba(14, 116, 144, .05); } .tema-claro .archivo { background: #f8fafc; } .tema-claro .analito:hover { background: rgba(15, 23, 42, .04); } .tema-claro .analito.activo { background: rgba(14, 116, 144, .07); } .tema-claro .lista-analitos { scrollbar-color: rgba(15, 23, 42, .22) transparent; } .tema-claro .lista-analitos::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .22); } .tema-claro .tabla-wrap, .tema-claro .calendario { scrollbar-color: rgba(15, 23, 42, .22) transparent; } .tema-claro .tabla-wrap::-webkit-scrollbar-thumb, .tema-claro .calendario::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .22); } .tema-claro .calendario th.medicamento, .tema-claro .calendario td.medicamento { background: #ffffff; } /* El signo de puntualidad iba en tinta casi negra sobre verde neón; sobre los verdes oscuros del tema claro hay que invertirlo a blanco. */ .tema-claro .dosis { color: rgba(255, 255, 255, .92); } .tema-claro .dosis--sindato { background: repeating-linear-gradient(45deg, rgba(15, 23, 42, .07) 0 3px, transparent 3px 6px); } .tema-claro .clave-rango i { background: rgba(15, 23, 42, .06); } .tema-claro .grafico-caja { background: var(--grafico-fondo); } .tema-claro .esqueleto i { background: linear-gradient(90deg, rgba(15, 23, 42, .04) 25%, rgba(15, 23, 42, .09) 37%, rgba(15, 23, 42, .04) 63%); background-size: 400% 100%; } /* ===================== SELECTOR DE TEMA ===================== */ .tema-boton { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s; flex-shrink: 0; } .tema-boton:hover { color: var(--text); border-color: var(--cyan); } .tema-boton svg { width: 16px; height: 16px; } /* Se muestra el icono del tema que está activo, no el que se aplicaría al pulsar: el botón informa el estado y el título dice qué hará. */ .tema-boton [data-icono] { display: none; } :root[data-tema="oscuro"] .tema-boton [data-icono="oscuro"], :root[data-tema="claro"] .tema-boton [data-icono="claro"], :root[data-tema="sistema"] .tema-boton [data-icono="sistema"] { display: block; }