/* Interfaz del PoC. Sin dependencias externas: se sirve entera desde `app`. */

:root {
  --fondo: #fbfaf8;
  --panel: #ffffff;
  --borde: #e4e0d8;
  --texto: #22201d;
  --tenue: #6f6a62;
  --acento: #b4530a;
  --acento-suave: #fdf3e9;
  --aviso: #8a5a00;
  --aviso-fondo: #fdf6e3;
  --error: #a12a1e;
  --error-fondo: #fdeeec;
  --ok: #2f6b3f;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #171614;
    --panel: #201e1b;
    --borde: #35322d;
    --texto: #eae7e1;
    --tenue: #a29c92;
    --acento: #e8945a;
    --acento-suave: #2b2119;
    --aviso: #e0b563;
    --aviso-fondo: #2a2317;
    --error: #e98d80;
    --error-fondo: #2c1c19;
    --ok: #86c095;
  }
}

* { box-sizing: border-box; }

/* El `display: none` de `[hidden]` lo pone la hoja del navegador, así que
 * cualquier `display` declarado acá le gana y el atributo deja de ocultar. Pasa
 * con todo lo que la interfaz muestra y esconde por `hidden` —el panel del
 * selector de alcance, el toggle gráfico/tabla— porque su clase fija un
 * `display`. Esta regla es del autor y con `!important`, así que gana siempre:
 * `hidden` significa oculto, sin excepciones. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Encabezado ──────────────────────────────────────────────────────── */

header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--borde);
  background: var(--panel);
  position: sticky; top: 0; z-index: 10;
}
.marca { display: flex; align-items: center; gap: .5rem; }
.marca strong { color: var(--acento); letter-spacing: -.01em; }
.marca span { color: var(--tenue); }
.chip {
  font-size: .72rem; padding: .15rem .5rem; border-radius: 999px;
  background: var(--acento-suave); color: var(--acento);
  border: 1px solid var(--borde);
}
nav { display: flex; gap: .25rem; }
nav button {
  border: 1px solid transparent; background: none; color: var(--tenue);
  padding: .4rem .8rem; border-radius: 7px; cursor: pointer; font-size: .9rem;
}
nav button:hover { background: var(--fondo); color: var(--texto); }
nav button.activo { background: var(--acento-suave); color: var(--acento); border-color: var(--borde); }

/* ── Vistas ──────────────────────────────────────────────────────────── */

.vista { display: none; max-width: 900px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.vista.activa { display: block; }
.cargando { color: var(--tenue); padding: 2rem 0; }

.bienvenida { padding: 2rem 0 1rem; }
.bienvenida h1 { font-size: 1.7rem; margin: 0 0 .5rem; letter-spacing: -.02em; }
.bienvenida p { color: var(--tenue); margin: 0 0 1.25rem; max-width: 62ch; }
.ejemplos { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.ejemplos button {
  background: var(--panel); border: 1px solid var(--borde); color: var(--texto);
  padding: .5rem .8rem; border-radius: 8px; cursor: pointer; text-align: left;
  font-size: .88rem;
}
.ejemplos button:hover { border-color: var(--acento); color: var(--acento); }

/* ── Conversación ────────────────────────────────────────────────────── */

.turno { margin: 1.5rem 0; }
.pregunta-usuario {
  font-weight: 600; font-size: 1.05rem; margin-bottom: .75rem;
  padding-left: .8rem; border-left: 3px solid var(--acento);
}
.interpretacion { color: var(--tenue); font-size: .9rem; margin-bottom: .75rem; }

.aviso, .rechazo, .fallo {
  border: 1px solid var(--borde); border-radius: 10px;
  padding: .75rem .9rem; margin: .6rem 0; font-size: .9rem;
}
.aviso { background: var(--aviso-fondo); border-color: color-mix(in srgb, var(--aviso) 30%, transparent); }
.aviso .titulo { color: var(--aviso); font-weight: 600; }
.rechazo { background: var(--panel); }
.fallo { background: var(--error-fondo); border-color: color-mix(in srgb, var(--error) 30%, transparent); color: var(--error); }
.aviso ul, .rechazo ul { margin: .35rem 0 0; padding-left: 1.1rem; }

/* ── Indicador de progreso ───────────────────────────────────────────── */

.progreso {
  border: 1px solid var(--borde); border-left: 3px solid var(--acento);
  border-radius: 10px; background: var(--panel); padding: .8rem .95rem;
}
.progreso-fila { display: flex; align-items: center; gap: .55rem; }
.progreso-texto { font-weight: 600; font-size: .95rem; }
.progreso-reloj {
  margin-left: auto; font-family: var(--mono); font-size: .82rem;
  color: var(--tenue); font-variant-numeric: tabular-nums;
}
.progreso-detalle { color: var(--tenue); font-size: .85rem; margin-top: .35rem; }
.progreso-adelanto { margin-top: .6rem; font-size: .85rem; color: var(--texto); }
.progreso-adelanto details.capot { margin-top: 0; }

.girador {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--acento) 25%, transparent);
  border-top-color: var(--acento);
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Respeta a quien pidió menos movimiento: el cronómetro sigue informando. */
@media (prefers-reduced-motion: reduce) {
  .girador { animation: pulsar 1.6s ease-in-out infinite; }
  @keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
}

/* ── Resultados ──────────────────────────────────────────────────────── */

.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--borde); border-radius: 10px; background: var(--panel); }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { padding: .5rem .7rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--borde); }
th { background: var(--fondo); font-weight: 600; font-size: .78rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .03em; }
tr:last-child td { border-bottom: none; }
td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.barra { display: block; height: 3px; background: var(--acento); border-radius: 2px; margin-top: 3px; opacity: .55; }
.sin-datos { color: var(--tenue); padding: 1rem; font-style: italic; }

/* ── Gráficos ────────────────────────────────────────────────────────── */

.g-toggle {
  display: inline-flex; gap: .2rem; margin-bottom: .6rem;
  border: 1px solid var(--borde); border-radius: 8px; padding: .15rem;
}
.g-tab {
  border: none; background: none; color: var(--tenue); font: inherit;
  font-size: .8rem; padding: .25rem .7rem; border-radius: 6px; cursor: pointer;
}
.g-tab.activo { background: var(--acento-suave); color: var(--acento); }
.g-cobertura {
  font-size: .8rem; color: var(--aviso); background: var(--aviso-fondo);
  border: 1px solid color-mix(in srgb, var(--aviso) 30%, transparent);
  border-radius: 8px; padding: .5rem .7rem; margin-bottom: .7rem;
}
.g-nota { font-size: .78rem; color: var(--tenue); margin-top: .5rem; }

/* Número grande (un único valor) */
.g-hero { padding: .5rem 0 .3rem; }
.g-hero-num { font-size: 2.6rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.g-hero-lab { color: var(--tenue); font-size: .85rem; margin-top: .2rem; }
.g-hero-sub { color: var(--tenue); font-size: .8rem; margin-top: .3rem; }

/* Columnas (serie temporal) */
.g-serie { padding: 1.4rem 0 0; }
.g-plot {
  display: flex; align-items: flex-end; gap: 2px; height: 200px;
  border-bottom: 1px solid var(--borde);
}
.g-slot {
  flex: 1; height: 100%; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; position: relative;
}
.g-fill {
  width: 100%; max-width: 24px; background: var(--acento);
  border-radius: 4px 4px 0 0; min-height: 2px;
}
.g-valor-col {
  position: absolute; top: -1.15em; font-size: .68rem; color: var(--tenue);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Un NULL: hueco punteado en la base, jamás una columna en cero. */
.g-nulo {
  width: 100%; max-width: 24px; height: 3px; border-radius: 2px; opacity: .5;
  background: repeating-linear-gradient(90deg, var(--tenue) 0 2px, transparent 2px 4px);
}
.g-labels { display: flex; gap: 2px; margin-top: .35rem; }
.g-lab {
  flex: 1; text-align: center; font-size: .68rem; color: var(--tenue);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Barras horizontales (corte por categoría) */
.g-cat { display: flex; flex-direction: column; gap: 2px; padding: .3rem 0; }
.g-fila { display: grid; grid-template-columns: minmax(70px, 26%) 1fr 6.5rem; align-items: center; gap: .6rem; }
.g-fila-lab {
  text-align: right; font-size: .82rem; color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.g-barzone { display: flex; align-items: center; min-width: 0; }
.g-bar { height: 16px; background: var(--acento); border-radius: 0 4px 4px 0; min-width: 2px; }
.g-bar-val { font-size: .76rem; color: var(--tenue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-nulo-txt { font-size: .76rem; color: var(--tenue); font-style: italic; }

/* ── Cómo se calculó ─────────────────────────────────────────────────── */

details.capot { margin-top: .75rem; border: 1px solid var(--borde); border-radius: 10px; background: var(--panel); }
details.capot > summary {
  cursor: pointer; padding: .55rem .9rem; font-size: .85rem; color: var(--tenue);
  list-style: none; user-select: none;
}
details.capot > summary::before { content: "▸ "; }
details.capot[open] > summary::before { content: "▾ "; }
details.capot > summary:hover { color: var(--acento); }
.capot-cuerpo { padding: 0 .9rem .9rem; }
.capot-cuerpo h4 { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); margin: .9rem 0 .35rem; }
pre {
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px;
  padding: .7rem; overflow-x: auto; font-family: var(--mono); font-size: .78rem;
  margin: 0; line-height: 1.5;
}
.definicion { border-top: 1px solid var(--borde); padding: .5rem 0; }
.definicion:first-of-type { border-top: none; }
.definicion code { font-family: var(--mono); font-size: .8rem; color: var(--acento); }
.definicion p { margin: .2rem 0 0; font-size: .85rem; color: var(--tenue); }
.meta-uso { font-size: .78rem; color: var(--tenue); margin-top: .8rem; }

/* ── Explicación en criollo ──────────────────────────────────────────── */

/* Misma mecánica que el capot (un details que se despliega), pero con un acento
 * propio: es la lectura amable de la consulta, no el detalle técnico. */
details.explicacion-caja {
  margin-top: .75rem; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--panel); border-left: 3px solid var(--acento);
}
details.explicacion-caja > summary {
  cursor: pointer; padding: .55rem .9rem; font-size: .85rem; font-weight: 600;
  color: var(--acento); list-style: none; user-select: none;
}
details.explicacion-caja > summary::before { content: "▸ "; }
details.explicacion-caja[open] > summary::before { content: "▾ "; }
.explicacion-cuerpo { padding: 0 .9rem .9rem; }
.explicacion-cuerpo p { margin: .6rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--texto); }
.explicacion-cuerpo p:first-child { margin-top: 0; }

/* ── Formulario ──────────────────────────────────────────────────────── */

/* Barra inferior: el alcance y el formulario viajan juntos, pegados abajo. */
#barra-consulta { position: sticky; bottom: 1rem; margin-top: 1.5rem; z-index: 5; }

#formulario {
  display: flex; gap: .5rem; align-items: flex-end;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 12px; padding: .5rem;
}
#pregunta {
  flex: 1; border: none; background: none; color: var(--texto);
  font: inherit; resize: none; padding: .5rem; outline: none; max-height: 40vh;
}
#enviar {
  background: var(--acento); color: #fff; border: none; border-radius: 8px;
  padding: .55rem 1.1rem; cursor: pointer; font-size: .9rem; font-weight: 500;
}
#enviar:disabled { opacity: .5; cursor: default; }

/* ── Selector de alcance ─────────────────────────────────────────────── */

.alcance { position: relative; margin-bottom: .5rem; }
.alcance-toggle {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: .45rem .7rem; cursor: pointer; color: var(--texto); font: inherit;
  font-size: .85rem; text-align: left;
}
.alcance-toggle:hover { border-color: var(--acento); }
.alcance-icono { color: var(--acento); font-size: .95rem; flex: none; }
.alcance-etiqueta { color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alcance-etiqueta.alcance-activo { color: var(--texto); font-weight: 600; }
.alcance-cambiar { margin-left: auto; color: var(--acento); font-size: .8rem; flex: none; }

.alcance-panel {
  position: absolute; bottom: calc(100% + .4rem); left: 0; right: 0;
  display: flex; flex-direction: column;
  /* Alto real lo fija abrirAlcance() según el espacio libre; esto es el tope. */
  max-height: min(66vh, calc(100vh - 150px));
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18); padding: .6rem; z-index: 20;
}
/* Cerrado se oculta con el atributo `hidden` (ver la regla `[hidden]` del reset:
 * hace falta porque el `display: flex` de acá le gana a la hoja del navegador). */
/* Con la barra arriba (conversación vacía) el panel se abre hacia abajo. */
.alcance-panel.hacia-abajo { bottom: auto; top: calc(100% + .4rem); }
.alcance-buscar {
  flex: none;
  width: 100%; border: 1px solid var(--borde); border-radius: 8px;
  background: var(--fondo); color: var(--texto); font: inherit; font-size: .85rem;
  padding: .4rem .6rem; outline: none;
}
.alcance-buscar:focus { border-color: var(--acento); }
.alcance-barra {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  margin: .5rem .1rem; font-size: .78rem; color: var(--tenue);
}
.alcance-limpiar {
  background: none; border: none; color: var(--acento); cursor: pointer;
  font: inherit; font-size: .78rem; padding: 0;
}
.alcance-limpiar:hover { text-decoration: underline; }
/* Toma el alto que queda en el panel acotado; el buscador y la barra quedan
   fijos arriba. min-height:0 es lo que permite que scrollee dentro del flex. */
.alcance-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.alcance-item {
  display: flex; align-items: center; gap: .5rem; padding: .3rem;
  border-radius: 6px; cursor: pointer; font-size: .86rem;
}
.alcance-item:hover { background: var(--fondo); }
.alcance-item input { accent-color: var(--acento); flex: none; }
.alcance-nombre { flex: 1; }
.alcance-inactivo {
  font-size: .68rem; color: var(--tenue); border: 1px solid var(--borde);
  border-radius: 4px; padding: 0 .3rem; flex: none;
}
.alcance-vacio { color: var(--tenue); font-size: .82rem; padding: .5rem .3rem; font-style: italic; }

/* Botón "Ejecutar de nuevo" en la auditoría: secundario, discreto. */
.audit-acciones { margin-top: .6rem; }
.boton-reejecutar {
  font: inherit; font-size: .82rem; padding: .35rem .8rem;
  background: transparent; color: var(--acento);
  border: 1px solid var(--borde); border-radius: 8px; cursor: pointer;
}
.boton-reejecutar:hover { border-color: var(--acento); }
.boton-reejecutar:disabled { opacity: .5; cursor: default; }
.audit-resultado:not(:empty) { margin-top: .7rem; }
.pie { color: var(--tenue); font-size: .78rem; text-align: center; margin-top: .75rem; }

/* ── El capot ────────────────────────────────────────────────────────── */

.seccion { margin-bottom: 2.5rem; }
.seccion > h2 { font-size: 1.15rem; margin: 0 0 .3rem; letter-spacing: -.01em; }
.seccion > p.intro { color: var(--tenue); margin: 0 0 1rem; font-size: .9rem; max-width: 68ch; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: .9rem 1rem; margin-bottom: .75rem; }
.tarjeta h3 { margin: 0 0 .2rem; font-size: .95rem; font-family: var(--mono); color: var(--acento); }
.tarjeta .etiqueta { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); margin-top: .6rem; }
.tarjeta p { margin: .15rem 0 0; font-size: .88rem; }
.marca-provisorio {
  display: inline-block; font-size: .68rem; padding: .1rem .4rem; border-radius: 4px;
  background: var(--aviso-fondo); color: var(--aviso); border: 1px solid color-mix(in srgb, var(--aviso) 30%, transparent);
  margin-left: .4rem; vertical-align: middle;
}
.lista-simple { margin: 0; padding-left: 1.2rem; color: var(--tenue); font-size: .9rem; }
.lista-simple li { margin-bottom: .3rem; }
.pares { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; font-size: .88rem; }
.pares dt { color: var(--tenue); }
.pares dd { margin: 0; font-family: var(--mono); font-size: .82rem; }
.archivo-link { color: var(--acento); text-decoration: none; border-bottom: 1px dotted currentColor; }
.archivo-link:hover { border-bottom-style: solid; }

/* ── Usuarios ─────────────────────────────────────────────────────────── */

.invitar-caja { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 1rem; margin-bottom: 1.5rem; }
.invitar-caja h3 { margin: 0 0 .6rem; font-size: .95rem; }
.invitar-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.invitar-email { flex: 1 1 16rem; padding: .5rem .6rem; font-size: .9rem; border-radius: 8px;
  border: 1px solid var(--borde); background: var(--fondo); color: var(--texto); }
.invitar-rol { padding: .5rem .6rem; font-size: .9rem; border-radius: 8px;
  border: 1px solid var(--borde); background: var(--fondo); color: var(--texto); }
.invitar-btn { padding: .5rem 1.1rem; font-size: .9rem; border-radius: 8px; border: 0;
  background: var(--acento); color: #fff; cursor: pointer; }
.invitar-btn:disabled { opacity: .5; cursor: default; }
.invitar-msg { margin-top: .6rem; font-size: .85rem; min-height: 1.1rem; }
.invitar-msg.ok-inline { color: var(--ok); }
.invitar-msg.error-inline { color: var(--error); }
.invitar-msg.aviso-inline { color: var(--aviso); }

/* Tabla como grid: se adapta y no necesita <table>. */
.usuarios-tabla { display: grid; border: 1px solid var(--borde); border-radius: 10px;
  overflow: hidden; background: var(--panel); }
.usuarios-fila { display: grid; align-items: center;
  grid-template-columns: minmax(12rem, 2fr) 8rem 7rem 7rem 8rem minmax(0, auto);
  gap: .75rem; padding: .65rem .9rem; border-top: 1px solid var(--borde); font-size: .88rem; }
.usuarios-fila:first-child { border-top: 0; }
.usuarios-cab { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tenue); background: var(--fondo); }
.u-mail { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.u-mail > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-vos { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--acento);
  background: var(--acento-suave); padding: .05rem .35rem; border-radius: 999px; }
.u-tenue { color: var(--tenue); font-size: .82rem; }
.u-rol, .u-estado { font-size: .74rem; padding: .1rem .45rem; border-radius: 999px; white-space: nowrap; }
.u-rol-admin { background: var(--acento-suave); color: var(--acento); }
.u-rol-analyst { background: var(--fondo); color: var(--tenue); border: 1px solid var(--borde); }
.u-activo { background: var(--acento-suave); color: var(--ok); }
.u-pendiente { background: var(--aviso-fondo); color: var(--aviso); }
.u-inactivo { background: var(--error-fondo); color: var(--error); }
.u-acciones { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.u-btn { padding: .3rem .55rem; font-size: .78rem; border-radius: 7px; border: 1px solid var(--borde);
  background: var(--panel); color: var(--texto); cursor: pointer; }
.u-btn:hover { border-color: var(--acento); }
.u-btn:disabled { opacity: .5; cursor: default; }
.u-btn-peligro:hover { border-color: var(--error); color: var(--error); }

@media (max-width: 720px) {
  .usuarios-cab { display: none; }
  .usuarios-fila { grid-template-columns: 1fr; gap: .35rem; }
  .u-acciones { justify-content: flex-start; }
}