/* Wachimen · Estandarte + Atalaya (WCH-V0). Clases NUEVAS con prefijo .w-, copiadas de la maqueta
* ~/briefs/ux-visual/maqueta-wachimen-atalaya-10-pantallas.html. Se usan junto con /css/wachimen.css (que trae los tokens:
* --primary, --s0…s3, --pc, --ok/--okc, --warn/--warnc, --err/--errc, --line, --t2, --c-* …). No toca ninguna clase existente.
* Uso: y después .
* Iconos:
* El color nunca va solo: semáforo y etiquetas llevan icono o palabra. Los números van a la derecha (.w-num). */
/* ---------- letra y base de las pantallas Estandarte ---------- */
.w-pantalla { font: 400 var(--t-cuerpo)/1.5 var(--fuente); color: var(--text); }
.w-pantalla h1, .w-pantalla h2, .w-pantalla h3 { font-family: var(--fuente); letter-spacing: -.01em; }
.w-titulo h1 { font-size: var(--t-h1); font-weight: 700; margin: 0; }
.w-titulo p { margin: 2px 0 0; color: var(--t2); }
.w-apoyo { color: var(--t2); font-size: var(--t-apoyo); margin-top: 2px; }
.w-nota { font-size: var(--t-apoyo); color: var(--t2); }
.w-num { text-align: right; font-variant-numeric: tabular-nums; }
.w-relleno { padding: 18px 20px; }
.w-sp { flex: 1; }
.w-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.w-reparte { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.w-rejilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
/* ---------- iconos (Lucide locales: /iconos/sprite.svg y un .svg por icono) ---------- */
.w-icono { width: 18px; height: 18px; flex: none; }
/* ---------- logo: el ojo del vigía ---------- */
.w-ojo { display: inline-block; flex: none; width: 38px; height: 38px; background: url("/iconos/ojo-vigia-claro.svg") center/contain no-repeat; }
.w-ojo.oscuro { background-image: url("/iconos/ojo-vigia-oscuro.svg"); } /* sobre superficie clara */
.w-ojo.grande { width: 64px; height: 64px; margin: 0 auto 10px; }
.w-logo { display: flex; align-items: center; gap: 10px; height: 40px; color: #fff; font: 700 19px var(--fuente); letter-spacing: -.01em; text-decoration: none; } /* nombre blanco: solo sobre el marco oscuro */
/* ---------- semáforo: círculo de 44 px con icono (A2); verde, ámbar, rojo. El color nunca va solo ---------- */
.w-semaforo { width: var(--c-semaforo); height: var(--c-semaforo); border-radius: 50%; display: grid; place-items: center; flex: none; }
.w-semaforo svg { width: 22px; height: 22px; }
.w-semaforo.verde { background: var(--okc); color: var(--ok); box-shadow: 0 0 0 4px rgba(95, 207, 138, .16); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); }
.w-semaforo.ambar { background: var(--warnc); color: var(--warn); box-shadow: 0 0 0 4px rgba(240, 176, 74, .18); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 20%, transparent); }
.w-semaforo.rojo { background: var(--errc); color: var(--err); box-shadow: 0 0 0 4px rgba(255, 107, 102, .18); box-shadow: 0 0 0 4px color-mix(in srgb, var(--err) 20%, transparent); }
.w-semaforo.gris { background: var(--neuc); color: var(--neu); box-shadow: 0 0 0 4px rgba(201, 206, 218, .18); box-shadow: 0 0 0 4px color-mix(in srgb, var(--neu) 18%, transparent); }
@supports not (background: color-mix(in srgb, red 50%, blue)) { /* respaldo (navegador viejo) en tema claro */
:root[data-theme="light"] .w-semaforo.verde { box-shadow: 0 0 0 4px rgba(21, 128, 61, .18); } :root[data-theme="light"] .w-semaforo.ambar { box-shadow: 0 0 0 4px rgba(133, 77, 14, .2); }
:root[data-theme="light"] .w-semaforo.rojo { box-shadow: 0 0 0 4px rgba(185, 28, 28, .2); } :root[data-theme="light"] .w-semaforo.gris { box-shadow: 0 0 0 4px rgba(71, 85, 105, .18); } }
.w-semaforo.tv { width: var(--c-semaforo-tv); height: var(--c-semaforo-tv); }
.w-semaforo.tv svg { width: 54px; height: 54px; }
/* ---------- sello «Actualizado hace X» (A3) ---------- */
.w-sello { display: inline-flex; gap: 6px; align-items: center; font: 600 var(--t-chica) var(--fuente); color: var(--t2); margin-top: 6px; }
.w-sello svg { width: 14px; height: 14px; }
.w-franja .w-sello, .w-alerta .w-sello { margin-top: 0; }
/* ---------- franja de alertas fija (A4) ---------- */
.w-franja { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 20px; border-radius: var(--c-tarjeta-radio); background: var(--s0);
border: 1px solid var(--line); border-left: 6px solid var(--warn); margin-bottom: 14px; }
.w-franja h3 { font-size: 16px; font-weight: 600; margin: 0; }
.w-franja .w-apoyo { margin: 0; }
.w-franja.roja { border-left-color: var(--err); }
.w-franja.verde { border-left-color: var(--ok); }
/* línea de alerta roja (una sola línea, hasta 40 px) */
.w-alerta { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 14px; border-radius: 12px; background: var(--errc); color: var(--err);
font: 600 var(--t-apoyo) var(--fuente); margin: 0 0 12px; white-space: nowrap; overflow: hidden; }
.w-alerta .w-sello { color: var(--err); }
@media (max-width: 1199px) { .w-alerta { min-height: var(--c-tocar); } }
@media (max-width: 599px) { .w-alerta .w-sello { display: none; } }
/* ---------- tarjeta ---------- */
.w-tarjeta { background: var(--s0); border-radius: var(--c-tarjeta-radio); box-shadow: var(--sh1); overflow: hidden; color: var(--text);
transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.w-tarjeta h3 { font-size: var(--t-h3); font-weight: 600; margin: 0; }
.w-tarjeta.borde { box-shadow: none; border: 1px solid var(--line); }
.w-ejemplo { font-size: 11px; font-weight: 600; color: var(--t2); letter-spacing: .04em; text-transform: uppercase; padding: 0 20px 8px; }
.w-heroe { border-radius: var(--c-tarjeta-radio); padding: 14px 20px; white-space: nowrap; text-overflow: ellipsis; color: #fff; position: relative; overflow: hidden;
background: radial-gradient(120% 150% at 0% 0%, #123a60 0%, #0f172a 62%); }
.w-heroe::after { content: ""; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px; border-radius: 50%; background: var(--grad); opacity: .35; filter: blur(32px); }
.w-heroe h1 { display: inline; font-size: 16px; font-weight: 700; position: relative; margin: 0; }
.w-heroe p { display: inline; margin: 0; font-size: var(--t-cuerpo); color: #cbd5e1; position: relative; }
.w-heroe p::before { content: " · "; }
@media (max-width: 599px) { .w-heroe { white-space: normal; padding: 14px 16px; } .w-heroe h1, .w-heroe p { display: block; } .w-heroe p::before { content: none; } }
.w-siguiente { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--pc); color: var(--on-pc);
border-radius: var(--c-tarjeta-radio); padding: 16px 20px; }
.w-siguiente h3 { font-size: 16px; font-weight: 600; margin: 0; }
.w-siguiente span { font-size: var(--t-apoyo); opacity: .85; }
/* ---------- tarjeta de número (200 × 132, centrada) ---------- */
.w-cifras { display: grid; grid-template-columns: repeat(auto-fill, var(--c-cifra-ancho)); gap: 14px; justify-content: start; }
.w-cifra { width: var(--c-cifra-ancho); height: var(--c-cifra-alto); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px; }
.w-cifra:hover, .w-modulo:hover { box-shadow: var(--sh2); transform: translateY(-2px); }
.w-cifra .ik { width: 36px; height: 36px; border-radius: 12px; background: var(--pc); color: var(--primary); display: grid; place-items: center; margin: 0 auto 8px; }
.w-cifra small { display: block; color: var(--t2); font-size: var(--t-chica); font-weight: 500; }
.w-cifra b { display: block; font: 700 var(--t-cifra) var(--fuente); font-variant-numeric: tabular-nums; line-height: 1.2; }
.w-cifra i { font-style: normal; font-size: var(--t-chica); color: var(--ok); font-weight: 600; }
.w-cifra i.gris { color: var(--t2); }
.w-modulo { width: var(--c-modulo-ancho); height: var(--c-modulo-alto); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.w-modulo .cod { font: 700 var(--t-chica) var(--fuente); color: var(--primary); letter-spacing: .05em; }
.w-modulo h3 { font-size: 15px; line-height: 1.35; }
.w-modulo .pie { display: flex; align-items: center; justify-content: space-between; color: var(--t2); font-size: 12.5px; margin-top: auto; }
@media (max-width: 599px) { .w-cifras { grid-template-columns: repeat(2, 1fr); } .w-cifra { width: auto; } .w-cifras > .w-cifra:last-child:nth-child(odd) { grid-column: 1 / -1; }
.w-modulo { width: auto; height: auto; min-height: 150px; } }
@media (min-width: 600px) and (max-width: 1199px) { .w-cifras { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } .w-cifra { width: auto; } }
/* ---------- botones (144 × 44; 48 en tablet y con el dedo) ---------- */
.w-boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--c-boton-alto); min-width: var(--c-boton-ancho); padding: 0 18px;
border-radius: 99px; border: 2px solid transparent; font: 600 var(--t-boton) var(--fuente); white-space: nowrap; cursor: pointer; text-decoration: none;
background: var(--primary); color: var(--on-primary); transition: background .16s var(--ease), box-shadow .16s; flex: none; }
.w-boton:hover { background: var(--primary-h); box-shadow: var(--sh1); }
.w-boton-suave { background: var(--pc); color: var(--on-pc); } /* tonal */
.w-boton-suave:hover { background: var(--s3); }
.w-boton-secundario { background: transparent; color: var(--primary); border-color: var(--outline); }
.w-boton-secundario:hover { background: var(--s2); }
.w-boton:focus-visible, .w-campo:focus-within, .w-seg span:focus-visible, .w-seg > .w-opcion:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.w-boton:disabled, .w-boton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
@media (max-width: 599px) { .w-boton, .w-boton.ancho-movil { flex: 1 1 100%; } .w-siguiente .w-boton { width: 100%; } } /* como la maqueta: todo botón a ancho completo en celular */
/* ---------- campos (44; 48 en tablet y con el dedo) ---------- */
.w-herramientas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 0 20px 14px; }
.w-campo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 200px; height: var(--c-campo-alto); border-radius: 99px; background: var(--s2);
border: 2px solid transparent; padding: 0 16px; display: flex; align-items: center; gap: 10px; color: var(--t2); font-size: 13.5px; font-weight: 500; }
.w-campo.caja { border-radius: 12px; background: var(--s0); border-color: var(--outline); color: var(--text); }
.w-campo input, .w-campo select { all: unset; flex: 1; min-width: 0; height: 100%; color: var(--text); font: 500 13.5px var(--fuente); }
.w-campo input::placeholder { color: var(--t2); }
.w-etiqueta-campo { display: block; font: 600 var(--t-chica) var(--fuente); color: var(--t2); margin: 0 0 6px; }
@media (max-width: 599px) { .w-herramientas { padding: 0 14px 14px; } .w-campo { min-width: 0; flex-basis: 100%; font-size: 16px; } .w-campo input, .w-campo select { font-size: 16px; } }
/* ---------- barra de opciones (pestañas): 112 × 36 ---------- */
.w-seg { display: inline-flex; background: var(--s2); border-radius: 99px; padding: 4px; gap: 2px; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.w-seg::-webkit-scrollbar { display: none; }
.w-seg > span, .w-seg > .w-opcion { width: var(--c-seg-ancho); height: var(--c-seg-alto); min-height: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none;
border-radius: 99px; border: 0; background: transparent; font: 600 var(--t-apoyo) var(--fuente); color: var(--t2); white-space: nowrap; cursor: pointer; }
.w-seg > .on, .w-seg > .w-opcion[aria-pressed="true"], .w-seg > .w-opcion[aria-selected="true"] { background: var(--s0); color: var(--primary); box-shadow: var(--sh1); }
@media (min-width: 600px) and (max-width: 1199px) { .w-seg.n4, .w-seg.n5 { width: 100%; } .w-seg.n4 > span, .w-seg.n4 > .w-opcion, .w-seg.n5 > span, .w-seg.n5 > .w-opcion { flex: 1; width: auto; min-width: 0; padding: 0 4px; } }
@media (max-width: 599px) { .w-seg { width: 100%; } .w-seg.n2 > span, .w-seg.n2 > .w-opcion, .w-seg.n3 > span, .w-seg.n3 > .w-opcion { flex: 1; width: auto; min-width: 0; }
.w-seg.n5 { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 28px; overflow: visible; } .w-seg.n5 > span, .w-seg.n5 > .w-opcion { width: auto; min-width: 0; padding: 0 4px; }
.w-seg.n4 { display: grid; grid-template-columns: repeat(2, 1fr); border-radius: 28px; overflow: visible; } .w-seg.n4 > span, .w-seg.n4 > .w-opcion { width: auto; min-width: 0; height: 48px; padding: 0 4px; } } /* 4 opciones: 2 + 2 (132 × 48) */
/* ---------- etiquetas de estado (104 × 28): icono o palabra, nunca solo el color ---------- */
.w-etiqueta { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: var(--c-etiqueta-ancho); height: var(--c-etiqueta-alto); border-radius: 99px;
font: 600 var(--t-chica) var(--fuente); white-space: nowrap; }
.w-etiqueta svg { width: 14px; height: 14px; flex: none; }
.w-etiqueta.ok { background: var(--okc); color: var(--ok); }
.w-etiqueta.ambar { background: var(--warnc); color: var(--warn); }
.w-etiqueta.rojo { background: var(--errc); color: var(--err); }
.w-etiqueta.gris { background: var(--neuc); color: var(--neu); }
.w-etiqueta.info { background: var(--pc); color: var(--on-pc); }
.w-contador { display: inline-flex; align-items: center; justify-content: center; width: var(--c-etiqueta-ancho); height: var(--c-etiqueta-alto); border-radius: 99px; background: var(--pc);
color: var(--on-pc); font: 600 var(--t-chica) var(--fuente); white-space: nowrap; flex: none; }
/* ---------- tabla: filas de 40 (48 en tablet), números a la derecha, tabulares ---------- */
.w-tabla-caja { overflow-x: auto; }
.w-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; min-width: 640px; font-size: var(--t-tabla); }
.w-tabla th { background: var(--s1); font: 600 var(--t-th) var(--fuente); letter-spacing: .05em; text-transform: uppercase; color: var(--t2); text-align: left; padding: 0 16px; height: var(--c-fila-th); white-space: nowrap; border: 0; }
.w-tabla td { height: var(--c-fila); padding: 0 8px 0 24px; border: 0; border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-tabla); }
.w-tabla tr:hover td { background: var(--s1); }
.w-tabla td.w-num, .w-tabla th.w-num { text-align: right; }
.w-tabla th.w-num { text-align: left; } /* como la maqueta: el título queda a la izquierda; la cifra, a la derecha */
.w-tabla td.w-num { padding: 0 16px 0 8px; } /* la cifra queda a 16 px del borde derecho, como la maqueta */
@media (max-width: 1199px) { .w-tabla { min-width: 0; table-layout: auto; } .w-tabla colgroup { display: none; } .w-tabla td { max-width: 190px; } }
/* celular: cada fila es una tarjeta; la etiqueta de cada dato sale de data-l */
@media (max-width: 599px) {
.w-tabla-caja { overflow: visible; }
.w-tabla, .w-tabla tbody, .w-tabla tr, .w-tabla td { display: block; min-width: 0; }
.w-tabla tr:has(th) { display: none; }
.w-tabla tr { padding: 10px 14px; border-top: 1px solid var(--line); }
.w-tabla tr:hover td { background: none; }
.w-tabla td { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: auto; min-height: 34px; padding: 2px 0; border-top: 0; white-space: normal; overflow: visible; max-width: none; text-align: right; }
.w-tabla td::before { content: attr(data-l); font: 600 11px var(--fuente); letter-spacing: .05em; text-transform: uppercase; color: var(--t2); flex: none; }
.w-tabla td:first-child { font-weight: 600; text-align: left; } .w-tabla td:first-child::before { content: none; }
}
.w-progreso { height: 6px; border-radius: 9px; background: var(--s3); overflow: hidden; width: 100%; max-width: 120px; }
.w-progreso i { display: block; height: 100%; background: var(--grad); }
/* ---------- línea de tiempo de un incidente ---------- */
.w-linea { padding: 6px 20px 16px; }
.w-linea .li { display: flex; align-items: center; gap: 12px; min-height: 40px; border-top: 1px solid var(--line); }
.w-linea .li:first-child { border-top: 0; }
.w-linea .punto { width: 12px; height: 12px; border-radius: 50%; background: var(--outline); flex: none; }
.w-linea .punto.rojo { background: var(--err); } .w-linea .punto.ambar { background: var(--warn); }
.w-linea .tx { flex: 1; min-width: 0; }
.w-linea .hr { text-align: right; font-variant-numeric: tabular-nums; color: var(--t2); flex: none; }
/* ---------- vacío y avisos ---------- */
.w-vacio { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "a t b" "a p b"; column-gap: 16px; align-items: center; padding: 16px 20px; }
.w-vacio .arte { grid-area: a; width: 56px; height: 56px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(22, 96, 243, .28); }
.w-vacio .arte svg { width: 26px; height: 26px; }
.w-vacio h3 { grid-area: t; font-size: var(--t-h3); } .w-vacio p { grid-area: p; margin: 2px 0 0; color: var(--t2); } .w-vacio .w-boton { grid-area: b; }
@media (max-width: 599px) { .w-vacio { grid-template-columns: 1fr; grid-template-areas: "a" "t" "p" "b"; justify-items: center; text-align: center; row-gap: 6px; padding: 20px 16px; } }
/* ---------- Modo TV (letra grande, de lejos) ---------- */
.w-tv { background: var(--bg); padding: 28px; display: grid; gap: 22px; align-content: start; }
.w-tv .cab { display: flex; align-items: center; gap: 14px; font: 800 24px var(--fuente); color: var(--text); }
.w-tv .hora { font: 700 20px var(--fuente); color: var(--t2); font-variant-numeric: tabular-nums; }
.w-tv .rejilla { display: grid; grid-template-columns: 230px repeat(3, minmax(0, 1fr)); gap: 18px; }
.w-tv .sem, .w-tv .cif { background: var(--s0); border-radius: 22px; padding: 22px; border: 1px solid var(--line); }
.w-tv .sem { display: grid; justify-items: center; gap: 12px; } .w-tv .sem b { font: 800 26px var(--fuente); color: var(--text); }
.w-tv .cif { text-align: center; } .w-tv .cif small { display: block; font: 600 18px var(--fuente); color: var(--t2); }
.w-tv .cif b { display: block; font: 800 var(--t-tv-cifra)/1.1 var(--fuente); color: var(--text); margin-top: 8px; font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .w-tv .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w-tv .sem { grid-column: 1 / -1; } .w-tv .cif b { font-size: 48px; } }
@media (prefers-reduced-motion: reduce) { .w-tarjeta, .w-boton, .w-cifra, .w-modulo { transition: none !important; } }