/* TR3BOL Data · estilos
   Jerarquía y layout tomados del prototipo de Claude Design (canvas "TR3BOL Data · Demo
   guiada"): barra lateral oscura, contenido en tarjetas claras, el embudo como una fila
   de tarjetas donde cada número viene con su frase y su fórmula debajo.
   Los estilos son propios, no los del prototipo. */

:root{
  --tinta:#171717;
  --verde:#0F3A45;
  --naranja:#E8663C;
  --papel:#F5F4F1;
  --blanco:#FFFFFF;
  --borde:#E6E3DD;
  --gris:#555555;
  --ok:#1F6E58;
  --mal:#8A3416;
  --aviso-fondo:#FFF6E0;
  --aviso-borde:#EBCB7A;
  --aviso-tinta:#4A3A10;
}

*{ box-sizing:border-box; }

/* El atributo `hidden` es solo un `display:none` de la hoja del navegador, así que
   CUALQUIER regla de autor con `display` le gana. Pasó dos veces en esta app: #app
   (display:flex) quedaba alcanzable con Tab por detrás del login, y #ficha-msg
   (.aviso, display:block) dibujaba una caja amarilla vacía arriba de la ficha. En vez
   de parchear cada caso, se corta acá para toda la app. */
[hidden]{ display:none !important; }
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--tinta);
  background:var(--papel);
}
h1,h2,h3{ margin:0; }
.sub{ margin:6px 0 0; color:var(--gris); font-size:15px; }
.nota{ margin:0 0 16px; color:var(--gris); font-size:13.5px; max-width:70ch; line-height:1.5; }

/* ---------- login ---------- */
#login-gate{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:var(--papel); padding:16px;
}
.login{ width:min(340px,100%); }
.login h1{ font-size:24px; letter-spacing:.06em; }
.login h1 span{ color:var(--naranja); }
.field{ display:flex; flex-direction:column; gap:4px; margin:14px 0; }
.field label{ font-size:12.5px; color:var(--gris); }
.field input{
  font:inherit; font-size:15px; padding:10px 12px; min-height:44px;
  border:1px solid var(--borde); border-radius:10px; background:var(--blanco); width:100%;
}
button{
  font:inherit; font-size:14px; font-weight:600; min-height:44px; padding:0 18px;
  border-radius:10px; border:1px solid var(--verde);
  background:var(--verde); color:#FAFAFA; cursor:pointer;
}
button:hover{ background:#0b2c35; }
#login-status{ margin:12px 0 0; font-size:13.5px; color:var(--gris); min-height:1.2em; }
#login-status.error, .aviso.error{ color:var(--mal); }

/* ---------- layout ---------- */
#app{ display:flex; min-height:100vh; flex-wrap:wrap; }
/* (el `hidden` de #app lo cubre la regla global [hidden] de arriba) */
.side{
  flex:1 1 220px; max-width:250px; background:var(--verde); color:#FAFAFA;
  padding:26px 14px; display:flex; flex-direction:column; gap:3px;
}
.marca{ padding:0 10px 22px; }
.marca strong{ display:block; font-size:19px; font-weight:800; letter-spacing:.08em; }
.marca span{ font-size:10.5px; letter-spacing:.24em; opacity:.75; }
.seccion-label{ font-size:10.5px; letter-spacing:.16em; opacity:.7; padding:10px 10px 5px; }
.nav-item{
  display:flex; align-items:center; min-height:44px; padding:9px 11px;
  border-radius:8px; font-size:14px; color:#D9E3E5; text-decoration:none;
}
.nav-item.activo{ background:rgba(255,255,255,.14); color:#FFF; font-weight:600; }
.nav-item.pendiente{ opacity:.42; cursor:default; }
.nav-item.externo{ margin-top:14px; border:1px solid rgba(255,255,255,.28); }
.side-pie{
  margin-top:auto; padding-top:18px; display:flex; flex-direction:column; gap:8px;
  font-size:12px; color:#C7D6D9; word-break:break-all;
}
.side-pie button{
  background:transparent; border:1px solid rgba(255,255,255,.35); color:#FAFAFA;
  min-height:36px; font-size:13px; font-weight:400;
}
.side-pie button:hover{ background:rgba(255,255,255,.1); }

main{ flex:999 1 560px; min-width:0; padding:34px 40px 60px; }
.cabecera{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end;
  gap:16px; margin-bottom:24px;
}
.cabecera h1{ font-size:30px; font-weight:800; letter-spacing:-.01em; }

/* ---------- tarjetas ---------- */
.card{
  background:var(--blanco); border:1px solid var(--borde); border-radius:15px;
  padding:24px; margin-bottom:20px;
}
.card h2{ font-size:19px; font-weight:700; margin-bottom:14px; }
.cargando{ color:var(--gris); font-size:14px; }

.cifras{ display:flex; gap:28px; flex-wrap:wrap; margin-bottom:12px; }
.cifra b{ display:block; font-size:30px; font-weight:700; font-variant-numeric:tabular-nums; }
.cifra span{ font-size:12.5px; color:var(--gris); }
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.chip{
  font-size:12.5px; padding:4px 10px; border-radius:999px;
  background:var(--papel); border:1px solid var(--borde);
}

.tabla{ width:100%; border-collapse:collapse; font-size:13px; }
.tabla th{
  text-align:left; font-size:11px; letter-spacing:.08em; color:var(--gris);
  text-transform:uppercase; padding:8px 10px 8px 0; border-bottom:1px solid var(--borde);
}
.tabla td{ padding:9px 10px 9px 0; border-bottom:1px solid #F0EEE9; vertical-align:top; }
.estado{ font-size:11.5px; padding:2px 8px; border-radius:999px; border:1px solid var(--borde); }
.estado-ok{ background:#E8F3EF; color:var(--ok); border-color:#BFDED3; }
.estado-parcial{ background:var(--aviso-fondo); color:var(--aviso-tinta); border-color:var(--aviso-borde); }
.estado-error{ background:#FBEAE3; color:var(--mal); border-color:#E9BCA9; }

.aviso{
  display:block; background:var(--aviso-fondo); border:1px solid var(--aviso-borde);
  border-radius:10px; padding:10px 14px; font-size:13.5px; color:var(--aviso-tinta);
  margin:0 0 14px; line-height:1.45;
}

/* ---------- embudo ---------- */
.grupo{ border-top:1px solid var(--borde); padding-top:18px; margin-top:18px; }
.grupo:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
.grupo.chico{ opacity:.62; }
.grupo header{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:8px; margin-bottom:12px;
}
.grupo h3{ font-size:16px; font-weight:700; }
.grupo .n{ font-size:12.5px; color:var(--gris); font-variant-numeric:tabular-nums; }
/* 160px y no 190: el embudo son CINCO etapas y con 190 entraban cuatro por fila, así
   que «Acción» caía sola en un renglón propio y el embudo dejaba de leerse como un
   recorrido de izquierda a derecha, que es todo el punto. Con 160 entran las cinco en
   una pantalla de 1280 para arriba, y abajo de eso envuelven de a dos o tres. */
.etapas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:11px; }
.etapa{
  border:1px solid var(--borde); border-radius:11px; padding:15px;
  background:#FBFAF8; display:flex; flex-direction:column; gap:6px;
}
.etapa.vacia{ background:#F7F6F4; color:var(--gris); }
.etapa-n{ font-size:10.5px; letter-spacing:.11em; color:var(--gris); font-weight:600; }
.etapa-preg{ font-size:14px; font-weight:600; }
.etapa-val{ font-size:27px; font-weight:700; font-variant-numeric:tabular-nums; }
.etapa-lect{ font-size:13px; line-height:1.4; }
.etapa-pie{
  border-top:1px solid var(--borde); padding-top:7px; margin-top:auto;
  display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--gris);
}
.etapa-pie b{ color:#333; font-weight:600; }
.muestra{ font-variant-numeric:tabular-nums; }

@media (max-width:720px){
  main{ padding:24px 16px 48px; }
  .side{ max-width:none; flex-basis:100%; }
}

/* ===========================================================================
   Fase 2 · Resumen, Cuentas, Piezas y Detalle
   =========================================================================== */

.volver{ font-size:13px; color:var(--verde); text-decoration:none; display:inline-block; margin-bottom:6px; }
.volver:hover{ text-decoration:underline; }
.sub-h{ font-size:15px; font-weight:700; margin:22px 0 6px; }
.bien{ color:var(--ok); }
.mal{ color:var(--mal); }
code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em;
      background:var(--papel); padding:1px 5px; border-radius:4px; }

/* ---------- filtros ---------- */
.filtros{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-bottom:18px; }
.filtros label{ display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--gris); }
.filtros select, .filtros input[type=search]{
  font:inherit; font-size:14px; min-height:44px; padding:0 10px;
  border:1px solid var(--borde); border-radius:10px; background:var(--blanco); color:var(--tinta);
}
.filtros .buscar input{ min-width:240px; }
.segmentado{ display:flex; background:var(--blanco); border:1px solid var(--borde);
             border-radius:10px; padding:3px; }
.segmentado button{
  border:0; background:transparent; color:#444; font:inherit; font-size:14px; font-weight:400;
  padding:0 14px; min-height:38px; border-radius:7px;
}
.segmentado button[aria-pressed="true"]{ background:var(--tinta); color:#FAFAFA; font-weight:600; }
.segmentado button:hover{ background:#EDEBE6; }
.segmentado button[aria-pressed="true"]:hover{ background:var(--tinta); }

/* ---------- cabeceras de grupo ---------- */
.grupo-head{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:8px; margin-bottom:10px;
}
.grupo-head h2, .grupo-head h3{ font-size:17px; font-weight:700; }
.grupo-head .n{ font-size:12.5px; color:var(--gris); font-variant-numeric:tabular-nums; }
.delta{ font-size:12px; font-weight:600; }

/* ---------- listas de piezas ---------- */
.lista-piezas{ list-style:none; margin:0; padding:0; }
.lista-piezas li{
  display:flex; gap:13px; align-items:center; padding:11px 0;
  border-top:1px solid #EEECE7; cursor:pointer;
}
.lista-piezas li:first-child{ border-top:0; }
.lista-piezas li:hover, .fila-pieza:hover{ background:#FBFAF8; }
.lista-piezas li:focus-visible, .fila-pieza:focus-visible{
  outline:2px solid var(--verde); outline-offset:-2px;
}
.lista-piezas img, .fila-pieza img{
  width:40px; height:52px; border-radius:6px; object-fit:cover; flex:none; background:var(--papel);
}
.sin-thumb{ width:40px; height:52px; border-radius:6px; background:#DEDBD5; display:block; flex:none; }
.li-txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.titulo{
  font-size:14.5px; font-weight:600; display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.meta{ font-size:12px; color:var(--gris); display:block; }
/* `.meta` es `display:block` porque casi siempre es un <span> apilado debajo de un título.
   Puesta sobre un <td> ese block rompe el layout de la tabla: la celda deja de ser celda y
   la fila se desarma (pasó en la tabla del banco de ideas, donde la fecha caía en otro
   renglón). Se restituye acá en vez de prohibir la clase en las celdas, porque usarla ahí
   es natural y nadie se va a acordar de la regla. */
td.meta, th.meta{ display:table-cell; }
.idx{ display:flex; flex-direction:column; align-items:flex-end; flex:none;
      font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }

/* ---------- tabla de piezas ---------- */
.tabla-piezas td{ vertical-align:middle; }
.tabla-piezas .fila-pieza{ cursor:pointer; }
.col-thumb{ width:52px; }
.col-titulo{ max-width:0; width:40%; }
.col-titulo .titulo{ max-width:100%; }
.col-alcance, .col-idx{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.col-idx span:first-child{ font-weight:600; font-size:15px; }
.chip-instagram{ background:#FCECE6; border-color:#F0C9B8; }
.chip-facebook{ background:#E7EEF7; border-color:#BFD2E8; }
.chip-tiktok{ background:#EAEAEA; border-color:#CFCFCF; }
.pill{
  font-size:11.5px; padding:3px 9px; border-radius:999px; white-space:nowrap;
  background:var(--papel); border:1px solid var(--borde);
}
.pill-gancho, .pill-retencion, .pill-valor, .pill-difusion, .pill-accion{
  background:#FBEAE3; border-color:#E9BCA9; color:var(--mal);
}
.pill-sin-caida{ background:#E8F3EF; border-color:#BFDED3; color:var(--ok); }
.pill-muestra-chica{ opacity:.7; }

/* ---------- cuentas ---------- */
.semanas{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; align-items:flex-start; }
/* flex-start y no flex-end: las barras ya se apoyan abajo dentro de su .barra-caja de alto
   fijo, así que alinear el CONTENEDOR al final empujaba hacia abajo las columnas cuyo
   título de pieza ocupa menos líneas, y los números quedaban en distinta altura. */
.semana{ flex:0 0 108px; display:flex; flex-direction:column; gap:3px; align-items:center; }
.barra-caja{ height:96px; display:flex; align-items:flex-end; }
.barra{ width:34px; background:var(--verde); border-radius:4px 4px 0 0; }
.semana-n{ font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.semana-f{ font-size:11px; color:var(--gris); }
.semana-pieza{
  font-size:11px; color:var(--gris); text-align:center; line-height:1.3; cursor:pointer;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.semana-pieza:hover{ color:var(--tinta); text-decoration:underline; }
.semana-pieza.vacia{ cursor:default; opacity:.5; }

/* ---------- detalle ---------- */
.comparada{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.red-col{ border:1px solid var(--borde); border-radius:12px; padding:16px; background:#FBFAF8; }
.red-head h3{ font-size:15px; font-weight:700; }
.red-idx{ display:flex; align-items:baseline; gap:7px; margin:10px 0 12px; }
.red-idx b{ font-size:26px; font-variant-numeric:tabular-nums; }
.red-idx span{ font-size:12px; color:var(--gris); }
.tabla-etapas td{ padding:6px 8px 6px 0; font-size:13px; border-bottom:1px solid #EFEDE8; }
.tabla-etapas tr.vacia{ opacity:.55; }
.tabla-etapas .n{ font-weight:600; font-variant-numeric:tabular-nums; }
.sub-embudo{ margin-top:14px; border-top:1px solid var(--borde); padding-top:12px; }
.sub-embudo h4{ font-size:13px; font-weight:700; margin:0 0 8px; }
.pasos{ display:flex; gap:10px; flex-wrap:wrap; }
.paso{ flex:1 1 72px; text-align:center; background:var(--blanco);
       border:1px solid var(--borde); border-radius:8px; padding:7px 4px; }
.paso b{ display:block; font-size:16px; font-variant-numeric:tabular-nums; }
.paso span{ font-size:10.5px; color:var(--gris); line-height:1.2; display:block; }
.caption{
  white-space:pre-wrap; font-family:inherit; font-size:13.5px; line-height:1.5;
  background:var(--papel); border:1px solid var(--borde); border-radius:10px;
  padding:14px; margin:0; max-height:280px; overflow:auto;
}

@media (max-width:720px){
  .col-alcance, .col-ficha{ display:none; }
  .filtros .buscar input{ min-width:0; width:100%; }
}

/* ===========================================================================
   Fase 3 · ficha, cola de GrowthBot y transcripción
   =========================================================================== */

.ficha-acciones{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:14px 0; }
button.secundario{ background:var(--blanco); color:var(--verde); border:1px solid var(--verde); }
button.secundario:hover{ background:#EDF2F3; }
/* El «Guardar» de cada fila va en outline, no en sólido. Con 19 atributos, 16 botones
   oscuros en columna le ganaban visualmente a «Aceptar los N propuestos», que es la
   acción que hace que validar una pieza lleve menos de un minuto. El de la fila es la
   excepción (corregir uno), no el camino principal. */
button.chico{
  min-height:32px; font-size:12.5px; padding:0 11px;
  background:var(--blanco); color:var(--verde); border:1px solid var(--borde); font-weight:500;
}
button.chico:hover{ background:#EDF2F3; border-color:var(--verde); }
button:disabled{ opacity:.5; cursor:default; }
button:disabled:hover{ background:var(--verde); }
button.secundario:disabled:hover{ background:var(--blanco); }

.tabla-ficha td{ padding:7px 10px 7px 0; vertical-align:middle; border-bottom:1px solid #F0EEE9; }
.ficha-clave{ font-size:13px; font-weight:600; width:150px; }
.ficha-valor select, .ficha-valor input{
  font:inherit; font-size:13.5px; min-height:38px; padding:0 9px; width:100%; max-width:300px;
  border:1px solid var(--borde); border-radius:8px; background:var(--blanco); color:var(--tinta);
}
.valor-fijo{ font-size:13.5px; color:var(--gris); }
.ficha-fuente{ white-space:nowrap; }
.ficha-fuente .meta{ display:inline; margin-left:6px; }
.pill-propuesto{ background:#FFF6E0; border-color:#EBCB7A; color:#4A3A10; }
.pill-validado{ background:#E8F3EF; border-color:#BFDED3; color:var(--ok); }
.ficha-just{ width:60px; }
.tip{ font-size:12px; color:var(--verde); border-bottom:1px dotted var(--verde); cursor:help; }
.ficha-ok{ width:92px; text-align:right; }

/* ---------- indicador de la cola ---------- */
.cola{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px;
  background:var(--blanco); border:1px solid var(--borde); border-radius:12px; padding:12px 16px;
}
.cola b{ font-size:14px; }
.cola span{ font-size:13px; color:var(--gris); }
.cola button{ margin-left:auto; }
.cola.dormida{ background:var(--aviso-fondo); border-color:var(--aviso-borde); }
.aviso-inline{ color:var(--aviso-tinta) !important; font-weight:600; }

/* ---------- transcripción ---------- */
.transcripcion{ max-height:340px; overflow:auto; border:1px solid var(--borde);
                border-radius:10px; background:var(--papel); padding:12px 14px; }
.frase{ font-size:13.5px; line-height:1.55; margin-bottom:5px; display:flex; gap:10px; }
.frase .t{ font-variant-numeric:tabular-nums; color:var(--gris); font-size:12px;
           flex:none; width:40px; padding-top:1px; }

/* ===========================================================================
   Fase 4 · Patrones, caídas e informes
   =========================================================================== */
.tabla-patron td{ vertical-align:middle; }
.tabla-patron tr.chico{ opacity:.55; }
.col-valor b{ display:block; font-size:14px; }
.col-n{ font-variant-numeric:tabular-nums; width:48px; }
.celda-etapa{ position:relative; font-size:12.5px; font-variant-numeric:tabular-nums;
              white-space:nowrap; min-width:62px; }
.barrita{ display:block; height:3px; border-radius:2px; margin-top:3px; }
.barrita.pos{ background:var(--ok); }
.barrita.neg{ background:var(--mal); }
.col-acc{ text-align:right; white-space:nowrap; }
.col-frase{ font-size:12.5px; color:#333; max-width:0; width:34%; }
.chk{ flex-direction:row !important; align-items:center; gap:6px !important;
      font-size:13px !important; min-height:44px; }
.chk input{ width:16px; height:16px; }
.filtros input[type=text]{ font:inherit; font-size:14px; min-height:44px; padding:0 10px;
  border:1px solid var(--borde); border-radius:10px; background:var(--blanco); min-width:280px; }
.informe{ border-top:1px solid var(--borde); padding-top:16px; margin-top:16px; }
.informe:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
.informe-cuerpo{ white-space:pre-wrap; font-size:13.5px; line-height:1.6;
  background:var(--papel); border:1px solid var(--borde); border-radius:10px; padding:14px; }
.sugeridos{ list-style:none; margin:0; padding:0; }
.sugeridos li{ display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:9px 0; border-top:1px solid #EEECE7; font-size:13.5px; }
.sugeridos li button{ margin-left:auto; }
.pill-en-curso{ background:#FFF6E0; border-color:#EBCB7A; color:#4A3A10; }
.pill-cerrado{ background:#E8F3EF; border-color:#BFDED3; color:var(--ok); }