/* ============================================================================
   MetaResponses — hoja de estilos base
   ----------------------------------------------------------------------------
   Híbrido deliberado, decidido con el usuario el 05/08/2026:

   - ESTRUCTURA de seleccionpersonal: plantillas Django planas y un CSS escrito a
     mano. Sin Bootstrap, sin Tailwind, sin paso de build de node. El servidor es
     un CentOS 7 sin cadena de herramientas JS y el deploy no va a adquirir una.
   - ASPECTO de tia-carmela: paleta azul, tarjetas de radio 10px, sombras suaves,
     cabeceras de tabla en versalitas.
   - TIPOGRAFÍA propia: tia-carmela usa Grandstander, que es una tipografía de
     centro infantil. Aquí el usuario es un emprendedor pequeño — el registro es
     informal pero adulto. Outfit para títulos (geométrica, cercana, seria) e
     IBM Plex Sans para la interfaz (la de la casa, y con diacríticos correctos
     en español).

   ORDEN DE PRIORIDAD: escritorio primero, teléfono después pero de verdad.
   El acceso principal es laptop/escritorio, como el resto de los módulos. El
   teléfono es una vía de acceso real (la asistente del inquilino #1 trabaja
   desde el navegador del móvil porque la coexistencia de WhatsApp prohíbe los
   dispositivos vinculados), no una idea a futuro: todo lo que aquí se ve en
   escritorio tiene que ser usable a 360px.
   ========================================================================== */

:root {
  --brand: #2552b0;
  --brand-dark: #1c3e86;
  --brand-soft: #eef2ff;
  --accent: #f99d1c;
  --ok: #2f9e2a;
  --ok-soft: #f0fdf4;
  --warn: #92400e;
  --warn-soft: #fffbeb;
  --danger: #b3161f;
  --danger-soft: #fff5f5;

  --ink: #2d3748;
  --ink-strong: #1a202c;
  --muted: #718096;
  --line: #e2e8f0;
  --line-soft: #f0f4f8;
  --surface: #fff;
  --bg: #f5f7fb;

  /* Color del inquilino. base.html lo sobreescribe con tenant.brand_color. */
  --tenant: #2552b0;

  /* Cromo del entorno. Local = pizarra oscura; producción = azul (.env-prod). */
  --chrome: #22303f;
  --chrome-2: #2b3b4d;
  --chrome-text: #cbd5e0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-family: 'Outfit', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 600;
  color: var(--brand-dark);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

a { color: var(--brand); }
button, select, input, textarea { font-family: inherit; }

.app { min-height: 100vh; display: flex; flex-direction: column; }


/* --- Barra superior ------------------------------------------------------ */

.topnav {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 58px;
  padding: 0 20px;
  background: var(--chrome);
  /* La franja del color del inquilino. El fondo lo decide el ENTORNO (local vs
     producción) y la marca del inquilino entra por aquí y por el monograma: si
     el inquilino tiñera la barra entera, se perdería la señal de "esto es
     producción" que evita tocar datos reales creyendo estar en local. */
  border-bottom: 3px solid var(--tenant);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 60;
  flex: none;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; min-width: 0; }

/* Monograma en lugar de logo fijo: la plataforma es multi-inquilino y cada uno
   trae su nombre y su color, no un archivo de imagen que habría que subir. */
.brand-mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--tenant);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.brand-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-name em {
  display: block;
  font-style: normal;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-size: 11px;
  opacity: .62;
}

.topnav nav { display: flex; align-items: center; gap: 2px; height: 100%; overflow-x: auto; scrollbar-width: none; }
.topnav nav::-webkit-scrollbar { display: none; }
.topnav nav a {
  display: inline-flex; align-items: center; height: 100%;
  padding: 0 13px;
  color: var(--chrome-text);
  text-decoration: none;
  font-size: 13.5px; font-weight: 500;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px; /* muerde el borde del inquilino para que el activo lo tape */
}
.topnav nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.topnav nav a.active { color: #fff; font-weight: 600; border-bottom-color: #fff; }

.topnav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: #a7b6c6; }
.topnav-user { white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.role-chip {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px;
  background: rgba(255, 255, 255, .13); color: #fff;
}
.logout-form { display: inline; }
.logout-btn {
  background: none; border: none; cursor: pointer;
  color: #a7b6c6; font-size: 12.5px; padding: 0;
  text-decoration: none;
}
.logout-btn:hover { color: #fff; text-decoration: underline; }


/* --- Cuerpo y barra lateral ---------------------------------------------- */

.body { display: flex; flex: 1; min-height: 0; }

.sidebar {
  width: 216px; flex: none;
  background: var(--chrome-2);
  color: #aebbc8;
  display: flex; flex-direction: column;
  padding: 16px 0;
}
.sidebar-label {
  padding: 0 20px 9px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #7b8b9c;
}
.nav-btn {
  display: flex; align-items: center; gap: 10px;
  margin: 1px 8px; padding: 8px 12px;
  border-radius: 8px;
  color: #aebbc8; text-decoration: none;
  font-size: 13px; font-weight: 500;
}
.nav-btn:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-btn.active { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }
.nav-btn .icon { width: 18px; display: inline-flex; justify-content: center; }
.nav-btn .count {
  margin-left: auto;
  font-size: 11px; font-weight: 700;
  background: rgba(255, 255, 255, .16); color: #fff;
  padding: 1px 7px; border-radius: 20px;
}

.main-content { flex: 1; min-width: 0; overflow: auto; padding: 22px 24px 56px; }


/* --- Pie ------------------------------------------------------------------ */

.footer { background: var(--chrome); color: #8fa0b2; padding: 9px 20px; flex: none; }
.footer-inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 11px; }
.footer .env-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(255, 255, 255, .1);
}


/* --- Encabezado de página ------------------------------------------------- */

.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.page-title { font-size: 23px; }
.page-sub { font-size: 13px; color: var(--muted); margin-top: 4px; max-width: 68ch; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }


/* --- Tarjetas ------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(16, 24, 40, .05);
  overflow: hidden;
}
.card + .card { margin-top: 16px; }
.card-header {
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 700; color: var(--brand-dark);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-header .hint { font-weight: 400; font-size: 11.5px; color: var(--muted); }
.card-body { padding: 16px; }
.card-footer {
  padding: 9px 16px; background: #f8fafc;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}


/* --- Rejillas ------------------------------------------------------------- */

.grid { display: grid; gap: 14px; }
.grid-stats { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 15px;
  box-shadow: 0 1px 4px rgba(16, 24, 40, .05);
  display: block; text-decoration: none; color: inherit;
}
a.stat:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(37, 82, 176, .12); }
.stat-label {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}
.stat-value { font-family: 'Outfit', sans-serif; font-size: 27px; font-weight: 600; color: var(--brand-dark); line-height: 1; }
.stat-note { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.stat-strong { border-left: 4px solid var(--accent); }


/* --- Tablas --------------------------------------------------------------- */

/* El envoltorio es obligatorio: en un teléfono la tabla desborda y lo que debe
   desplazarse es ella, nunca la página entera. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tbl { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.tbl thead th {
  text-align: left; padding: 9px 14px;
  background: #f8fafc; border-bottom: 2px solid var(--line);
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.tbl tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: #f0f5ff; }
.tbl td.num, .tbl th.num { text-align: right; }
.tbl a { text-decoration: none; font-weight: 600; }
.tbl a:hover { text-decoration: underline; }
.cell-main { font-weight: 600; color: var(--ink-strong); }
.cell-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }


/* --- Botones -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid transparent; border-radius: 7px;
  padding: 8px 15px;
  font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-outline { background: #fff; border-color: var(--brand); color: var(--brand); }
.btn-outline:hover { background: var(--brand); color: #fff; }
.btn-quiet { background: #fff; border-color: #cbd5e0; color: var(--ink); font-weight: 600; }
.btn-quiet:hover { background: #f8fafc; }
.btn-sm { font-size: 12px; padding: 5px 11px; border-radius: 6px; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; }


/* --- Avisos --------------------------------------------------------------- */

.alert {
  border-radius: 9px; padding: 11px 15px; margin-bottom: 14px;
  font-size: 13px; font-weight: 600;
}
.alert-success { background: var(--ok-soft); color: #166534; border-left: 4px solid var(--ok); }
.alert-error, .alert-danger { background: var(--danger-soft); color: #991b1b; border-left: 4px solid var(--danger); }
.alert-warning { background: var(--warn-soft); color: var(--warn); border-left: 4px solid var(--accent); }
.alert-info { background: var(--brand-soft); color: var(--brand-dark); border-left: 4px solid var(--brand); }


/* --- Insignias ------------------------------------------------------------ */

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px;
  white-space: nowrap;
}
.badge-neutral { background: #edf2f7; color: #4a5568; }
.badge-brand { background: var(--brand-soft); color: var(--brand-dark); }
.badge-ok { background: #dcfce7; color: #166534; }
.badge-warn { background: #fef3c7; color: var(--warn); }
.badge-danger { background: #fee2e2; color: #991b1b; }

/* Estado de la ventana de servicio de 24h de Meta. No es decoración: fuera de
   la ventana el texto libre es IMPOSIBLE y sólo caben plantillas aprobadas, así
   que quien va a responder tiene que verlo antes de escribir. */
.win-open { background: #dcfce7; color: #166534; }
.win-closed { background: #fee2e2; color: #991b1b; }

.score { display: inline-grid; place-items: center; min-width: 38px; height: 26px; border-radius: 7px; font-weight: 700; font-size: 12.5px; }
.score-high { background: #dcfce7; color: #166534; }
.score-mid { background: #fef3c7; color: var(--warn); }
.score-low { background: #fee2e2; color: #991b1b; }
.score-none { background: #edf2f7; color: #a0aec0; }


/* --- Formularios ---------------------------------------------------------- */

.form-row { margin-bottom: 14px; }
.form-label { display: block; font-size: 12.5px; font-weight: 700; color: #4a5568; margin-bottom: 5px; }
.form-control {
  display: block; width: 100%;
  padding: 9px 12px;
  border: 1px solid #cbd5e0; border-radius: 7px;
  font: inherit; font-size: 14px; color: var(--ink); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 82, 176, .12); }
.form-control::placeholder { color: #a0aec0; }
.form-help { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.form-error { font-size: 12px; color: #991b1b; margin-top: 5px; font-weight: 600; }


/* --- Filtros, acciones en lote y paginacion -------------------------------- */
/* Los filtros van por GET para que una busqueda util se pueda guardar en
   favoritos o pasar a la otra persona del equipo. En el telefono la fila se
   apila sola porque envuelve, sin necesidad de otra media query. */

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters .form-control { width: auto; flex: 0 1 auto; }
.filters input[type="search"] { flex: 1 1 260px; min-width: 0; }

.tbl th.tick, .tbl td.tick { width: 34px; padding-right: 0; }
.tbl td.tick input, .tbl th.tick input { width: 15px; height: 15px; cursor: pointer; }

.bulk {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 16px; background: #f8fafc; border-top: 1px solid var(--line);
}
.bulk-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.bulk .form-control { width: auto; padding: 5px 10px; font-size: 12.5px; }
.bulk-sep { flex: 1 1 12px; }

.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pager-state { font-size: 12.5px; color: var(--ink); }
.pager [aria-disabled="true"] { opacity: .45; cursor: default; }


/* --- Estado vacío y notas ------------------------------------------------- */

.empty-state { text-align: center; padding: 40px 16px; color: #a0aec0; }
.empty-state .icon { font-size: 30px; display: block; margin-bottom: 10px; }
.empty-state p { font-size: 13px; margin: 0; }

/* Nota de andamiaje: marca a la vista lo que todavía NO está construido, para
   que nadie confunda una pantalla en pie con una pantalla terminada. */
.scaffold-note {
  border: 1px dashed #cbd5e0; border-radius: 9px;
  padding: 11px 14px; margin-top: 14px;
  background: #fbfcfe; color: var(--muted);
  font-size: 12.5px;
}
.scaffold-note strong { color: #4a5568; }

.mono { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--muted); }
.muted { color: var(--muted); }


/* --- Hilo de conversacion -------------------------------------------------- */
/* Entrantes a la izquierda, salientes a la derecha: es la convencion de todos
   los mensajeros y no hay ninguna razon para inventar otra aqui. Lo que SI se
   aparta de WhatsApp es que un mensaje fallido se queda a la vista en rojo en
   lugar de desaparecer — el hilo es tambien el registro de lo que no salio. */

.thread {
  padding: 16px;
  max-height: 60vh;
  overflow-y: auto;
  background: #fbfcfe;
}

.msg { display: flex; flex-direction: column; margin-bottom: 12px; max-width: 78%; }
.msg-in { align-items: flex-start; margin-right: auto; }
.msg-out { align-items: flex-end; margin-left: auto; }

.msg-bubble {
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.45;
  word-break: break-word;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}
.msg-in .msg-bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--ink); }
.msg-out .msg-bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.msg-out .msg-bubble .muted { color: rgba(255, 255, 255, .72); }

.msg-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 4px; padding: 0 3px;
  font-size: 11px; color: var(--muted);
}

/* Fallido: el globo pierde el azul de "esto llego" y se queda en rojo con el
   motivo debajo. Un mensaje que no salio pintado igual que uno que si salio es
   la peor mentira que puede contar esta pantalla. */
.msg-failed .msg-bubble { background: var(--danger-soft); color: #991b1b; border: 1px solid #fecaca; }
.msg-failed .msg-bubble .muted { color: #b91c1c; }
.msg-error {
  margin-top: 4px; padding: 6px 9px;
  background: var(--danger-soft); border-left: 3px solid var(--danger); border-radius: 5px;
  color: #991b1b; font-size: 11px; word-break: break-word;
}

/* --- Cuadro de respuesta --------------------------------------------------- */

.reply-box { padding: 14px 16px; border-top: 1px solid var(--line); background: #fff; }
.reply-box .form-row:last-of-type { margin-bottom: 11px; }
.reply-box textarea.form-control { resize: vertical; min-height: 74px; }
.reply-box textarea.form-control:disabled { background: #f8fafc; color: var(--muted); cursor: not-allowed; }
/* El texto escrito sobrevive a un envio fallido; decirlo evita que alguien
   cierre la pestana creyendo que lo perdio. */
.reply-kept { font-weight: 400; font-size: 12px; margin-top: 4px; opacity: .85; }


/* --- Conversacion y control de etapa --------------------------------------- */

.conv { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); }
.conv:last-child { border-bottom: none; }
.conv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.conv-stage { font-size: 12.5px; color: var(--muted); }

.stage-form .form-label { margin-bottom: 4px; }
.stage-row { display: flex; gap: 7px; align-items: stretch; }
.stage-row .form-control { flex: 1; min-width: 0; padding: 6px 10px; font-size: 13px; }
.stage-row .btn { flex: none; }
.stage-reason { margin-top: 7px; padding: 6px 10px; font-size: 12.5px; }


/* --- Historial de etapas --------------------------------------------------- */
/* El registro de transiciones se muestra, no solo se escribe: un registro que
   nadie ve nunca es un registro cuyos errores nadie nota. Y es el combustible
   de calibracion de la capa de puntaje por intencion, que no se puede
   reconstruir despues. */

.timeline { padding: 6px 16px 14px; }
.timeline-item { padding: 8px 0 8px 15px; border-left: 2px solid var(--line); position: relative; }
.timeline-item::before {
  content: ""; position: absolute; left: -5px; top: 13px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 2px #fff;
}
.timeline-item:last-child { border-left-color: transparent; }
.timeline-main { font-size: 13px; color: var(--ink); }
.timeline-main strong { color: var(--brand-dark); }
.timeline-arrow { color: var(--muted); margin: 0 3px; }
.timeline-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }


/* --- Lista de datos clave-valor -------------------------------------------- */

.kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 12.5px; }
.kv dt { font-weight: 700; color: var(--muted); white-space: nowrap; }
.kv dd { color: var(--ink-strong); text-align: right; }
.lead-notes {
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--ink); white-space: pre-wrap;
}


/* --- Pantallas sin cromo (entrar, sin acceso) ----------------------------- */

.centered {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(1100px 480px at 50% -10%, rgba(37, 82, 176, .10), transparent 70%),
    var(--bg);
}
.panel {
  width: 100%; max-width: 396px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 13px;
  padding: 28px 26px;
  box-shadow: 0 12px 34px -20px rgba(16, 24, 40, .45);
}
.panel-head { text-align: center; margin-bottom: 22px; }
.panel-mark {
  width: 50px; height: 50px; margin: 0 auto 12px;
  display: grid; place-items: center;
  border-radius: 13px; background: var(--tenant); color: #fff;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 21px;
}
.panel-head h1 { font-size: 20px; }
.panel-head p { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.panel-foot { margin-top: 18px; text-align: center; font-size: 11.5px; color: var(--muted); }

/* El formulario de filtro es la unica pantalla publica del modulo y la unica
   que se ve casi siempre en un telefono: nueve preguntas necesitan mas ancho
   que un cuadro de acceso, y los controles se agrandan porque quien responde lo
   hace con el pulgar, de pie y con prisa. */
.panel-form { max-width: 520px; }
.panel-form .form-control { font-size: 15px; padding: 11px 13px; }
.panel-form .btn { padding: 12px 18px; font-size: 14px; }


/* --- Respuestas del filtro, ya calificadas -------------------------------- */
/* El puntaje se muestra desglosado. Es una suma con denominador fijo, no un
   modelo: quien lo mira tiene que poder rehacerlo a mano, porque decide a quien
   llama Veronica primero y "lo dijo el sistema" no es una respuesta. */

.answers { padding: 4px 16px 14px; }
.answer-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.answer-row:last-child { border-bottom: none; }
.answer-q { font-size: 12px; color: var(--muted); max-width: 60%; }
.answer-a { font-size: 13px; font-weight: 600; color: var(--ink-strong); text-align: right; }
.answer-pts { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); margin-left: 7px; white-space: nowrap; }
.answers-total { display: flex; justify-content: space-between; padding: 11px 0 2px; font-size: 13px; font-weight: 700; color: var(--brand-dark); }


/* --- Producción ----------------------------------------------------------- */
/* El cromo cambia de color entre local y producción a propósito: en seleccion
   ya demostró que evita editar datos reales creyendo estar en la copia local. */

body.env-prod { --chrome: #1c3e86; --chrome-2: #2552b0; --chrome-text: #c3d0ea; }
body.env-prod .footer { color: #a8bde3; }
body.env-prod .sidebar { color: #d3ddf2; }
body.env-prod .nav-btn { color: #d3ddf2; }


/* --- Teléfono y tableta ---------------------------------------------------- */
/* El escritorio es el acceso principal, pero la asistente del inquilino #1
   trabaja desde el navegador del móvil y no tiene alternativa: la coexistencia
   de WhatsApp prohíbe los dispositivos vinculados, así que no puede usar
   WhatsApp Web con el número del negocio. Estas reglas son requisito, no
   cortesía. La barra lateral no se esconde tras un botón — se convierte en una
   tira horizontal desplazable, que se ve y no necesita JavaScript. */

@media (max-width: 900px) {
  .body { flex-direction: column; }

  .sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid rgba(0, 0, 0, .18);
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar-label { display: none; }
  .nav-btn { margin: 0; flex: none; white-space: nowrap; padding: 7px 11px; }
  .nav-btn .count { margin-left: 4px; }

  .main-content { padding: 16px 14px 44px; }
  .page-title { font-size: 20px; }
  .grid-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

  /* En el telefono el hilo es la pantalla entera, no una columna de dos. */
  .msg { max-width: 88%; }
  .thread { max-height: none; padding: 13px; }
}

@media (max-width: 620px) {
  .topnav { height: auto; flex-wrap: wrap; padding: 9px 14px 0; gap: 10px; row-gap: 8px; }
  .topnav nav { order: 3; width: 100%; height: 40px; }
  .topnav nav a { padding: 0 11px; }
  .topnav-right { font-size: 12px; gap: 9px; }
  .topnav-user { max-width: 108px; }
  .brand-name em { display: none; }
  .stat-value { font-size: 23px; }
  .card-header { flex-wrap: wrap; }
}