/* Helia English. Tema Sala de Control (Theme Vault LAB-010). ok/error/actual son semánticos, aparte del acento. */
:root {
  color-scheme: dark;
  --fondo: #0b0e0f; --superficie: #121719; --borde: #273136; --borde-fuerte: #3b484e; --texto: #e3e8e6; --suave: #8f9c98;
  --acento: #3fd69b; --sobre-acento: #03140c;
  --ok: #3fd69b; --ok-fondo: rgba(63, 214, 155, .14); --error: #ff5d4f; --error-fondo: rgba(255, 93, 79, .2); --actual: #6cc4ff;
  --f-display: "Barlow Condensed", "Arial Narrow", sans-serif; --f-texto: "Barlow", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --radio: 2px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fondo); color: var(--texto); font: 15px/1.5 var(--f-texto); }
.envoltura { padding: 16px max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px)); max-width: 1440px; margin: 0 auto; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--actual); outline-offset: 2px; }
[hidden] { display: none !important; }

.app { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; min-height: calc(100vh - 48px); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 12px 20px; border-bottom: 1px solid var(--borde); }
.marca { font: 600 22px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.marca small { color: var(--suave); font: 500 11px var(--f-mono); letter-spacing: .08em; margin-left: 6px; }
.secciones { display: flex; gap: 4px; flex-wrap: wrap; margin-right: auto; }
.secciones a, .secciones .deshabilitado { padding: 6px 10px; text-decoration: none; color: var(--suave); }
.secciones a[aria-current="page"] { color: var(--texto); box-shadow: inset 0 -2px 0 var(--acento); }
.secciones .deshabilitado { opacity: .55; }
.pronto { font: 500 10px var(--f-mono); text-transform: uppercase; letter-spacing: .06em; margin-left: 4px; }
.usuario { display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: 13px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: var(--sobre-acento); font-weight: 600; position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.pantalla { padding: 20px; display: grid; gap: 16px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin: 0; line-height: 1.15; text-wrap: balance; }
h1 { font-size: 28px; } h3 { font-size: 15px; }
.eyebrow { font: 500 11px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.volver { text-decoration: none; } .volver:hover { color: var(--texto); }
.titulo-bloque { display: grid; gap: 4px; min-width: 0; }

.boton { border: 1px solid var(--borde-fuerte); background: transparent; padding: 8px 14px; border-radius: var(--radio); cursor: pointer; font-size: 14px; }
.boton:hover { border-color: var(--suave); }
.boton.primario { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); font-weight: 600; }
.boton.peligro { color: var(--error); border-color: color-mix(in srgb, var(--error) 50%, transparent); }
.boton.chico { padding: 4px 10px; font-size: 13px; }
.chip { border: 1px solid var(--borde); background: transparent; padding: 5px 10px; border-radius: var(--radio); cursor: pointer; font-size: 13px; }
.chip[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.disenos { display: flex; gap: 4px; flex-wrap: wrap; }
.aviso { color: var(--error); margin: 0; font-size: 14px; }

.cabecera { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; justify-content: space-between; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.guardado { font: 12px var(--f-mono); color: var(--suave); display: inline-flex; align-items: center; gap: 6px; }
.guardado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.guardado[data-estado="guardando"]::before { background: var(--actual); }
.guardado[data-estado="error"] { color: var(--error); } .guardado[data-estado="error"]::before { background: var(--error); }

.metricas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--borde); border-radius: var(--radio); }
.metrica { padding: 10px 14px; display: grid; gap: 2px; border-left: 1px solid var(--borde); min-width: 0; }
.metrica:first-child { border-left: 0; }
.metrica b { font: 600 22px/1.1 var(--f-mono); font-variant-numeric: tabular-nums; }
.metrica b.malo { color: var(--error); }
.metrica span { font-size: 12px; color: var(--suave); }
.barra-avance { height: 4px; background: var(--borde); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.barra-avance i { display: block; height: 100%; background: var(--ok); width: 0; transition: width .3s; }

.trabajo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 230px; gap: 16px; }
.panel { border: 1px solid var(--borde); border-radius: var(--radio); display: grid; grid-template-rows: auto 1fr; min-width: 0; background: var(--fondo); }
.panel-cab { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--borde); }
.lectura, .escritura .espejo, .escritura textarea { font-family: var(--f-mono); font-size: 16px; line-height: 1.85; }
.fuente { padding: 14px 16px; height: calc(100vh - 330px); min-height: 300px; overflow-y: auto; white-space: pre-wrap; overflow-wrap: break-word; }
.w { border-radius: 2px; color: var(--suave); }
.w.ok { color: var(--ok); background: var(--ok-fondo); }
.w.error, .w.omitida { color: var(--error); background: var(--error-fondo); text-decoration: underline wavy var(--error); text-underline-offset: 4px; cursor: pointer; font-weight: 600; }
.w.omitida { text-decoration-style: dotted; }
.w.actual { color: var(--texto); box-shadow: 0 2px 0 var(--actual); background: color-mix(in srgb, var(--actual) 16%, transparent); }
.w.actual.mal { box-shadow: 0 2px 0 var(--error); }
.espejo .enfoque { outline: 2px solid var(--actual); outline-offset: 2px; border-radius: 2px; animation: enfoque 1.2s ease-out 2; }
.w.enfoque { outline: 2px solid var(--actual); outline-offset: 2px; animation: enfoque 1.2s ease-out 2; }
@keyframes enfoque { 50% { outline-color: transparent; } }
.extra { font-size: .75em; color: var(--error); text-decoration: line-through; vertical-align: super; margin: 0 2px; }

.escritura { position: relative; height: calc(100vh - 330px); min-height: 300px; }
/* El espejo (texto coloreado) y el textarea (texto real, transparente) deben cortar las líneas en el mismo punto:
   los dos reservan siempre el canal de la barra de desplazamiento, así tienen el mismo ancho útil con o sin barra. */
.escritura .espejo, .escritura textarea { position: absolute; inset: 0; margin: 0; padding: 14px 16px; border: 0; white-space: pre-wrap; overflow-wrap: break-word; scrollbar-gutter: stable; }
.escritura textarea { overflow-y: auto; }
.escritura .espejo { overflow-y: hidden; pointer-events: none; color: var(--texto); }
.escritura textarea { background: transparent; color: transparent; caret-color: var(--actual); resize: none; outline: none; }
.escritura textarea::selection { background: color-mix(in srgb, var(--actual) 35%, transparent); color: transparent; }
.t-error, .t-actual-mal { color: var(--error); }
.t-error { text-decoration: underline wavy var(--error); text-underline-offset: 4px; }
.t-extra { color: var(--error); text-decoration: line-through; }

.lado { display: grid; gap: 12px; align-content: start; min-width: 0; }
.caja { border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px; display: grid; gap: 8px; align-content: start; }
.corregir { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 260px; overflow-y: auto; }
.corregir button { width: 100%; text-align: left; background: none; border: 0; border-radius: var(--radio); padding: 6px 8px; cursor: pointer; display: grid; gap: 1px; font-size: 13px; }
.corregir button:hover { background: var(--error-fondo); }
.esperado { color: var(--ok); font-family: var(--f-mono); }
.escrito { color: var(--error); font-family: var(--f-mono); text-decoration: line-through; }
.vacio { color: var(--suave); font-size: 13px; }
.interruptor { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.leyenda { font-size: 13px; }
.leyenda span { display: flex; align-items: center; gap: 8px; }
.leyenda i { width: 22px; height: 12px; border-radius: 2px; }
.l-ok { background: var(--ok-fondo); box-shadow: inset 0 0 0 1px var(--ok); }
.l-error { background: var(--error-fondo); box-shadow: inset 0 0 0 1px var(--error); }
.l-actual { box-shadow: inset 0 -2px 0 var(--actual); }
.confirmar { border: 1px solid var(--error); border-radius: var(--radio); padding: 10px; display: grid; gap: 8px; font-size: 13px; }

.trabajo[data-diseno="apilado"], .trabajo[data-diseno="enfocado"] { grid-template-columns: minmax(0, 1fr) 230px; }
.trabajo[data-diseno="apilado"] .lado, .trabajo[data-diseno="enfocado"] .lado { grid-column: 2; grid-row: 1 / span 2; }
.trabajo[data-diseno="apilado"] .fuente { height: calc((100vh - 380px) * .55); min-height: 200px; }
.trabajo[data-diseno="apilado"] .escritura { height: calc((100vh - 380px) * .45); min-height: 160px; }
.trabajo[data-diseno="enfocado"] .fuente { height: calc(100vh - 470px); min-height: 280px; font-size: 19px; padding: 22px 28px; }
.trabajo[data-diseno="enfocado"] .escritura { height: 90px; min-height: 90px; }

.fila { display: flex; gap: 8px; flex-wrap: wrap; }
.nuevo { border: 1px solid var(--acento); border-radius: var(--radio); padding: 14px; display: grid; gap: 10px; background: var(--fondo); }
.nuevo input, .nuevo textarea { width: 100%; background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--radio); padding: 8px 10px; }
.nuevo textarea { min-height: 160px; resize: vertical; font-family: var(--f-mono); }

.lista-textos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tarjeta-texto { border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; display: grid; gap: 10px; text-decoration: none; background: var(--fondo); }
.tarjeta-texto:hover { border-color: var(--acento); }
.tarjeta-texto h3 { text-transform: none; letter-spacing: 0; font-size: 18px; }
.tarjeta-texto .datos { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 12px var(--f-mono); color: var(--suave); }
.estado { font: 500 11px var(--f-mono); padding: 2px 6px; border-radius: var(--radio); border: 1px solid var(--borde); color: var(--suave); justify-self: start; }
.estado.fin { color: var(--ok); border-color: var(--ok); }

.ingreso { display: grid; place-items: center; padding: 64px 20px; }
.tarjeta-ingreso { width: min(440px, 100%); display: grid; gap: 16px; }
.tarjeta-ingreso h1 { font-size: 34px; }
.tarjeta-ingreso p { margin: 0; color: var(--suave); }
.espacio { border-top: 1px solid var(--borde); padding-top: 14px; font-size: 13px; color: var(--suave); display: grid; gap: 6px; }

.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kpi { border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; display: grid; gap: 2px; }
.kpi b { font: 600 26px/1.1 var(--f-mono); font-variant-numeric: tabular-nums; }
.kpi span { font-size: 12px; color: var(--suave); }
.kpi em { font-style: normal; font-size: 12px; color: var(--ok); }
.dos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.grafico svg { width: 100%; height: auto; display: block; }
.frecuentes { display: flex; flex-wrap: wrap; gap: 6px; align-content: start; }
.frecuentes span { border: 1px solid var(--borde); border-radius: var(--radio); padding: 4px 8px; font: 13px var(--f-mono); }
.frecuentes s { color: var(--error); } .frecuentes b { color: var(--ok); font-weight: 500; }

@media (max-width: 1100px) {
  .trabajo, .trabajo[data-diseno] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .trabajo[data-diseno] .lado { grid-column: 1 / -1; grid-row: auto; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .trabajo[data-diseno="apilado"] .panel, .trabajo[data-diseno="enfocado"] .panel { grid-column: 1 / -1; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .trabajo, .trabajo[data-diseno] { grid-template-columns: minmax(0, 1fr); }
  .panel { grid-column: 1 / -1; }
  .fuente, .trabajo[data-diseno] .fuente { height: 260px; min-height: 0; }
  .escritura, .trabajo[data-diseno] .escritura { height: 200px; min-height: 0; }
  .metricas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metrica:nth-child(4) { border-left: 0; }
  .metrica:nth-child(n+4) { border-top: 1px solid var(--borde); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pantalla { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }