@font-face { font-family: 'Inter'; src: url('/fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); font-style: italic; font-display: swap; }

:root {
  --c-fondo: #0b0714; --c-superficie: #140d22; --c-superficie-2: #1c1330; --c-linea: #2c2048; --c-linea-2: #3d2c66;
  --c-texto: #ffffff; --c-texto-2: #c9c1dc; --c-texto-3: #8f84a8;
  --c-marca: #602e9f; --c-acento: #7b35ff; --c-lila: #b58cf0; --c-azul: #0a99ff; --c-wa: #25d366;
  --c-ok: #10b981; --c-alerta: #f5a524; --c-error: #ef4444;
  --f-texto: 'Inter', system-ui, sans-serif; --f-titulo: 'Plus Jakarta Sans', 'Inter', sans-serif; --f-editorial: 'Instrument Serif', Georgia, serif;
  --t-xs: 12px; --t-s: 14px; --t-m: 16px; --t-l: 20px; --t-xl: 28px; --t-xxl: 40px;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;
  --r-s: 8px; --r-m: 12px; --r-l: 18px;
  --sombra: 0 8px 30px rgba(0,0,0,.35);
  --mov-rapido: 160ms; --mov: 260ms;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--c-fondo); color: var(--c-texto); font: 400 var(--t-m)/1.5 var(--f-texto); }
a { color: var(--c-lila); }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 800; margin: 0 0 var(--e-3); line-height: 1.2; }
h1 { font-size: var(--t-xl); } h2 { font-size: var(--t-l); } h3 { font-size: var(--t-m); font-weight: 700; }
.editorial { font-family: var(--f-editorial); font-style: italic; font-weight: 400; color: var(--c-lila); }
.saltar { position: absolute; left: -999px; } .saltar:focus { left: var(--e-4); top: var(--e-4); background: var(--c-acento); color: #fff; padding: var(--e-2) var(--e-3); z-index: 99; }
:focus-visible { outline: 2px solid var(--c-lila); outline-offset: 2px; }
.cargando { padding: var(--e-7); color: var(--c-texto-3); }

/* Estructura: menú lateral + contenido (PC primero) */
.app { display: grid; grid-template-columns: 248px minmax(0,1fr); min-height: 100vh; }
.lateral { background: var(--c-superficie); border-right: 1px solid var(--c-linea); padding: var(--e-5) var(--e-4); display: flex; flex-direction: column; gap: var(--e-1); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marca { display: flex; align-items: center; gap: var(--e-2); font-family: var(--f-titulo); font-weight: 800; font-size: var(--t-l); margin-bottom: var(--e-5); }
.marca b { background: var(--c-marca); border-radius: var(--r-s); padding: 2px 8px; }
.grupo { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--c-texto-3); margin: var(--e-4) 0 var(--e-1); }
.lateral a { color: var(--c-texto-2); text-decoration: none; padding: var(--e-2) var(--e-3); border-radius: var(--r-s); min-height: 40px; display: flex; align-items: center; gap: var(--e-2); }
.lateral a:hover { background: var(--c-superficie-2); color: #fff; }
.lateral a[aria-current="page"] { background: var(--c-marca); color: #fff; }
.principal { padding: var(--e-6) var(--e-7); max-width: 1280px; width: 100%; }
.barra-sup { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); margin-bottom: var(--e-5); flex-wrap: wrap; }
.semaforo { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.punto { font-size: var(--t-xs); padding: 4px 10px; border-radius: 99px; border: 1px solid var(--c-linea-2); color: var(--c-texto-2); }
.punto::before { content: '●'; margin-right: 6px; }
.punto.ok::before { color: var(--c-ok); } .punto.pendiente::before { color: var(--c-alerta); } .punto.caido::before { color: var(--c-error); }

/* Piezas */
.tarjeta { background: var(--c-superficie); border: 1px solid var(--c-linea); border-radius: var(--r-l); padding: var(--e-5); }
.rejilla { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.fila { display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap; }
.entre { justify-content: space-between; }
.apagado { color: var(--c-texto-3); font-size: var(--t-s); }
.btn { font: 600 var(--t-s)/1 var(--f-texto); border: 1px solid var(--c-linea-2); background: var(--c-superficie-2); color: #fff; padding: 0 var(--e-4); min-height: 44px; border-radius: var(--r-m); cursor: pointer; transition: background var(--mov-rapido), transform var(--mov-rapido); }
.btn:hover { background: var(--c-linea); } .btn:active { transform: scale(.98); }
.btn.primario { background: var(--c-acento); border-color: var(--c-acento); }
.btn.primario:hover { background: var(--c-marca); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.texto { background: none; border-color: transparent; color: var(--c-lila); }
label { display: block; font-weight: 600; font-size: var(--t-s); margin-bottom: var(--e-1); }
input, select, textarea { width: 100%; font: 400 var(--t-m) var(--f-texto); color: #fff; background: var(--c-fondo); border: 1px solid var(--c-linea-2); border-radius: var(--r-m); padding: var(--e-3); min-height: 44px; }
textarea { min-height: 140px; resize: vertical; }
input[type="checkbox"] { width: 22px; min-height: 22px; accent-color: var(--c-acento); }
.campo { margin-bottom: var(--e-4); }
.pista { font-size: var(--t-xs); color: var(--c-texto-3); margin-top: var(--e-1); }
.etiqueta { font-size: var(--t-xs); padding: 2px 8px; border-radius: 99px; background: var(--c-superficie-2); border: 1px solid var(--c-linea-2); color: var(--c-texto-2); white-space: nowrap; }
.etiqueta.acento { background: rgba(123,53,255,.18); border-color: var(--c-acento); color: var(--c-lila); }
.numero { font-family: var(--f-titulo); font-weight: 800; font-size: var(--t-xxl); font-variant-numeric: tabular-nums; }

/* Ayuda (se puede ocultar) */
.ayuda { border: 1px dashed var(--c-linea-2); background: rgba(181,140,240,.06); border-radius: var(--r-m); padding: var(--e-3) var(--e-4); font-size: var(--t-s); color: var(--c-texto-2); margin-bottom: var(--e-4); }
.ayuda b { color: var(--c-lila); }
body.sin-ayudas .ayuda, body.sin-ayudas .pista { display: none; }

/* Recorrido del video: barra de progreso por fases */
.pasos { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: var(--e-1); margin: var(--e-4) 0 var(--e-5); counter-reset: paso; }
.paso { text-decoration: none; color: var(--c-texto-3); font-size: var(--t-xs); padding-top: var(--e-3); border-top: 4px solid var(--c-linea); }
.paso.hecho { border-color: var(--c-marca); color: var(--c-texto-2); }
.paso.actual { border-color: var(--c-acento); color: #fff; font-weight: 600; }
.paso.viendo { color: var(--c-lila); }
.fase-cuerpo { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: var(--e-5); align-items: start; }
.lista-check { list-style: none; padding: 0; margin: 0 0 var(--e-4); }
.lista-check li { padding: var(--e-1) 0; font-size: var(--t-s); color: var(--c-texto-2); }
.lista-check li::before { content: '○'; margin-right: var(--e-2); color: var(--c-texto-3); }
.lista-check li.ok { color: #fff; } .lista-check li.ok::before { content: '✓'; color: var(--c-ok); }
.puntaje { display: flex; gap: var(--e-1); } .puntaje button { width: 44px; }
.puntaje button[aria-pressed="true"] { background: var(--c-acento); border-color: var(--c-acento); }

/* Kanban */
.kanban { display: flex; gap: var(--e-3); overflow-x: auto; padding-bottom: var(--e-3); }
.columna { flex: 0 0 240px; background: var(--c-superficie); border: 1px solid var(--c-linea); border-radius: var(--r-l); padding: var(--e-3); min-height: 200px; }
.columna h3 { font-size: var(--t-s); display: flex; justify-content: space-between; }
.item { display: block; text-decoration: none; color: #fff; background: var(--c-superficie-2); border: 1px solid var(--c-linea-2); border-radius: var(--r-m); padding: var(--e-3); margin-bottom: var(--e-2); font-size: var(--t-s); transition: border-color var(--mov-rapido); }
.item:hover { border-color: var(--c-lila); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
th, td { text-align: left; padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--c-linea); }
th { color: var(--c-texto-3); font-weight: 600; }
.vacio { text-align: center; padding: var(--e-6); color: var(--c-texto-3); }
.mensajes { display: flex; flex-direction: column; gap: var(--e-2); max-height: 420px; overflow-y: auto; margin-bottom: var(--e-3); }
.msj { max-width: 75%; padding: var(--e-2) var(--e-3); border-radius: var(--r-m); background: var(--c-superficie-2); font-size: var(--t-s); }
.msj.agente, .msj.humano { align-self: flex-end; background: rgba(123,53,255,.25); }
.msj small { display: block; color: var(--c-texto-3); font-size: 11px; }
.aviso { position: fixed; bottom: var(--e-5); right: var(--e-5); background: var(--c-superficie-2); border: 1px solid var(--c-lila); border-radius: var(--r-m); padding: var(--e-3) var(--e-4); box-shadow: var(--sombra); z-index: 50; animation: entra var(--mov) ease-out; }
.aviso.error { border-color: var(--c-error); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.login { max-width: 420px; margin: 12vh auto; }

/* Celular: se ve bien, aunque el foco es PC */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; bottom: 0; top: auto; height: auto; width: 100%; flex-direction: row; overflow-x: auto; padding: var(--e-1); z-index: 40; border-right: 0; border-top: 1px solid var(--c-linea); }
  .lateral .marca, .lateral .grupo { display: none; }
  .lateral a { flex: 0 0 auto; font-size: var(--t-xs); }
  .principal { padding: var(--e-4) var(--e-4) 96px; }
  .fase-cuerpo { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }