/* =============================================================================
   MiikaBot — hoja de estilos única.
   -----------------------------------------------------------------------------
   Dirección de diseño (decidida antes de escribir una línea de código):

   · Es una herramienta de trabajo que alguien mira ocho horas al día, no una
     página de marketing. Por eso: fondo gris papel, tinta casi negra, líneas
     de un píxel y CERO gradientes, sombras grandes o esquinas muy redondeadas.

   · TRES colores con SIGNIFICADO, nunca decorativos:
       verde petróleo (--marca)  → la marca y las acciones que hace un humano
       violeta       (--bot)     → TODO lo que hace el bot, sin excepción
       ámbar         (--pendiente) / rojo (--alerta) → estados que piden algo
     Un color que no significa nada se elimina.

   · La plata y los identificadores (precios, guías, cédulas, teléfonos, códigos)
     van SIEMPRE en monoespaciada con cifras tabulares. En una bandeja donde un
     precio mal leído cuesta dinero, los dígitos alineados son función.

   · Firma de la interfaz: la CINTA DEL BOT (.cinta-bot). Una franja permanente
     arriba del hilo que responde la pregunta que nadie más responde en una
     bandeja con IA: ¿quién le está contestando a este cliente ahora mismo, yo
     o el robot? Es lo único ruidoso de la pantalla, y es a propósito.

   Tipografías: las del sistema. Sin @import ni CDN de fuentes — una herramienta
   interna tiene que pintar en el primer frame y funcionar sin internet.
   ============================================================================= */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* Superficies */
  --papel:        #F7F7F5;
  --lienzo:       #FFFFFF;
  --lienzo-2:     #FBFBFA;
  --lienzo-3:     #F1F1EF;

  /* Tinta */
  --tinta:        #16181D;
  --tinta-2:      #5C616B;
  --tinta-3:      #6E737B;
  --tinta-4:      #9AA0A6; /* solo iconos y adornos, nunca texto necesario */

  /* Líneas */
  --linea:        #E4E5E8;
  --linea-fuerte: #D3D5D9;

  /* Señales con significado */
  --marca:        #0D5C4A;
  --marca-fuerte: #0A4739;
  --marca-tenue:  #E7F0EC;
  --sobre-marca:  #FFFFFF;

  --bot:          #6B4FD8;
  --bot-tenue:    #EFEBFC;

  /* ~~#A66A00~~ (26-sep; paso 73, jefe-blindaje-factura bac67c4; prueba ctr1). MEDIDO: 4,48:1 sobre
     blanco y 4,00:1 sobre su fondo tenue, por debajo del 4,5:1 del texto normal (WCAG AA). Este da
     5,34:1 y 4,76:1: es el color de «Por aprobar», «Sin responder» y los avisos de la ventana. */
  --pendiente:      #965F00;
  --pendiente-tenue:#FBF1DE;

  --alerta:       #B4401F;
  --alerta-tenue: #FBEBE6;

  --foco:         #2563EB;

  /* Medidas */
  --alto-barra:   52px;
  --alto-nav-movil: 58px;
  --r-chico:      5px;
  --r:            7px;
  --r-grande:     10px;

  --sombra-flotante: 0 1px 2px rgba(22,24,29,.06), 0 8px 24px rgba(22,24,29,.10);

  /* PANTALLAS DE ENTRADA (arranque · entrar · elegir cuenta · invitación).
     Las únicas superficies del producto con profundidad, y a propósito: se
     miran veinte segundos, son la primera impresión y no contienen ni un dato
     de trabajo que el adorno pueda estorbar. La aplicación NO usa nada de esto
     — ningún token de aquí aparece fuera de .arranque/.entrar. */
  --r-entrada:          14px;
  --entrada-rejilla:    rgba(22, 24, 29, .055);
  --entrada-halo-marca: rgba(13, 92, 74, .17);
  --entrada-halo-bot:   rgba(107, 79, 216, .13);
  --entrada-caja:       #FFFFFF;
  --entrada-campo:      #FAFAF9;
  --entrada-sombra:     0 1px 1px rgba(22,24,29,.04),
                        0 2px 6px rgba(22,24,29,.05),
                        0 20px 46px -14px rgba(22,24,29,.18);

  /* Tipografías */
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono", Menlo,
          Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel:        #0E0F12;
    --lienzo:       #16181C;
    --lienzo-2:     #1B1E23;
    --lienzo-3:     #22262C;

    --tinta:        #E9EAEC;
    --tinta-2:      #A5AAB3;
    --tinta-3:      #949AA3;
    --tinta-4:      #6E747D;

    --linea:        #272B31;
    --linea-fuerte: #383D45;

    --marca:        #3FBF9E;
    --marca-fuerte: #58D2B2;
    --marca-tenue:  #10312A;
    --sobre-marca:  #06231C;

    --bot:          #A392F0;
    --bot-tenue:    #241E3D;

    --pendiente:      #E0A54A;
    --pendiente-tenue:#33270F;

    --alerta:       #F0836A;
    --alerta-tenue: #3A1B12;

    --foco:         #7AA5FF;

    --sombra-flotante: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.5);

    /* Entrada en oscuro: la caja sube un peldaño sobre el fondo y el campo baja
       uno. En claro pasa lo mismo al revés — en los dos modos el campo se lee
       hundido y la caja levantada, que es lo que la hace parecer una tarjeta. */
    --entrada-rejilla:    rgba(255, 255, 255, .055);
    --entrada-halo-marca: rgba(63, 191, 158, .15);
    --entrada-halo-bot:   rgba(163, 146, 240, .18);
    --entrada-caja:       #1A1D22;
    --entrada-campo:      #121418;
    --entrada-sombra:     0 1px 1px rgba(0,0,0,.5),
                          0 2px 8px rgba(0,0,0,.4),
                          0 22px 54px -14px rgba(0,0,0,.75);
  }
}

/* ----------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.011em; }
h1 { font-size: 20px; line-height: 1.3; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
p  { margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

code, .mono, .cifra {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
  letter-spacing: -0.01em;
}

[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: 3px;
}

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Ritmo vertical reutilizable */
.pila-8  { display: grid; gap: 8px; }
.pila-16 { display: grid; gap: 14px; }
.pila-24 { display: grid; gap: 22px; }

/* Listas que ya traen su propio separador en cada ítem (.miembro, .conv…): la
   viñeta y la sangría del navegador solo estorbarían. */
.lista-plana { list-style: none; margin: 0; padding: 0; }

/* Botones al pie de una tarjeta o una pantalla de falla. */
.fila-acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* --------------------------------------------------------------- textos -- */
.rotulo {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.apagado { color: var(--tinta-2); }
.chiquito { font-size: 12.5px; }

/* ======================================================== primitivas: botón */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-chico);
  background: var(--lienzo);
  color: var(--tinta);
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn:hover:not(:disabled) { background: var(--lienzo-3); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primario {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--sobre-marca);
}
.btn-primario:hover:not(:disabled) { background: var(--marca-fuerte); border-color: var(--marca-fuerte); }

.btn-peligro { color: var(--alerta); border-color: var(--linea-fuerte); }
.btn-peligro:hover:not(:disabled) { background: var(--alerta-tenue); border-color: var(--alerta); }

/* Accion destructiva que NO compite con los botones de todos los dias.
   "Desconectar" se hace una vez y corta la entrada de clientes; "Pausar" se hace
   a diario. Con el mismo peso visual se pulsa el que no era. Se ve al pasar por
   encima y tiene area de toque de sobra en el celular. */
.enlace-peligro {
  background: none; border: 0; padding: 6px 8px; min-height: 30px;
  font: inherit; font-size: 12.5px; color: var(--tinta-3);
  cursor: pointer; border-radius: var(--r-chico); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--linea-fuerte);
}
.enlace-peligro:hover { color: var(--alerta); text-decoration-color: currentColor; }
.enlace-peligro:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.btn-plano { border-color: transparent; background: transparent; color: var(--tinta-2); }
.btn-plano:hover:not(:disabled) { background: var(--lienzo-3); color: var(--tinta); }

.btn-chico { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.btn-ancho { width: 100%; }

.btn-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto;
  border: 1px solid transparent; border-radius: var(--r-chico);
  background: transparent; color: var(--tinta-2); cursor: pointer;
}
.btn-icono:hover { background: var(--lienzo-3); color: var(--tinta); }
.btn-icono svg { width: 16px; height: 16px; }

/* ======================================================= primitivas: campo */
.campo { display: grid; gap: 5px; min-width: 0; }
.campo > label {
  font-size: 12px;
  font-weight: 600;
  color: var(--tinta-2);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-chico);
  background: var(--lienzo);
  color: var(--tinta);
  font-size: 13.5px;
}
.campo textarea { min-height: 70px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-tenue);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-4); }
.campo-pista { font-size: 12px; color: var(--tinta-3); }
.campo-compacto input, .campo-compacto select { min-height: 32px; font-size: 13px; }
.campo input[type="number"], .campo input.cifra { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 620px) {
  .rejilla-2, .rejilla-3 { grid-template-columns: 1fr; }
}

/* ==================================================== primitivas: insignias */
.insignia {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  background: var(--lienzo-3);
  color: var(--tinta-2);
  white-space: nowrap;
}
.insignia-abierta  { background: var(--marca-tenue); color: var(--marca); }
.insignia-pendiente{ background: var(--pendiente-tenue); color: var(--pendiente); }
.insignia-resuelta { background: var(--lienzo-3); color: var(--tinta-3); }
.insignia-bot      { background: var(--bot-tenue); color: var(--bot); }
.insignia-alerta   { background: var(--alerta-tenue); color: var(--alerta); }
/* Los tres niveles de «por donde te avisamos». `aviso` no es `alerta`: alerta significa
   «crees que estas avisado y no lo estas», que es lo unico que hay que mirar ya. */
.insignia-ok       { background: var(--marca-tenue); color: var(--marca); }
.insignia-aviso    { background: var(--pendiente-tenue); color: var(--pendiente); }
.insignia-rol      { text-transform: capitalize; }
/* Aclaración, no estado: "Tú", "Aquí estás". Se lee y se olvida. */
.insignia-tenue    { background: transparent; border: 1px solid var(--linea-fuerte); color: var(--tinta-3); }

/* Roles. El dueño lleva el color de la marca porque es el único que no se puede
   quedar sin existir; administrador y asesor bajan de intensidad, no de color. */
.insignia-owner    { background: var(--marca-tenue); color: var(--marca); }
.insignia-admin    { background: var(--lienzo-3); color: var(--tinta); }
.insignia-agent    { background: var(--lienzo-3); color: var(--tinta-3); }

/* Estados de un pedido. La escala va de "todavía nada" a "cerrado", y el ámbar
   marca el único momento en que la pelota está afuera (en la transportadora). */
.insignia-borrador   { background: var(--lienzo-3); color: var(--tinta-3); }
.insignia-confirmado { background: var(--marca-tenue); color: var(--marca); }
.insignia-enviado    { background: var(--pendiente-tenue); color: var(--pendiente); }
.insignia-entregado  { background: var(--marca); color: var(--sobre-marca); }
.insignia-cancelado  { background: var(--alerta-tenue); color: var(--alerta); }

/* ============================================================================
   LA TARJETA DE «REGISTRAR PEDIDO» (20-sep-2026)
   ----------------------------------------------------------------------------
   Un formulario te pide que HAGAS el trabajo; una ficha te pide que lo REVISES.
   Lo unico que esta pantalla tiene que conseguir es que alguien pueda confirmar
   SIN volver a leer el chat — y eso lo hace `procedencia`: la marquita gris que
   dice de donde salio cada dato. Va callada a proposito (no compite con el dato)
   salvo cuando dice «falta», que es lo unico que pide accion.
   ========================================================================== */
.tarjeta-lineas { display: flex; flex-direction: column; gap: 10px; }
.tarjeta-fila {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
}
/* Un valor largo —una direccion completa, que es lo que el mensajero necesita entero— se
   lleva la linea, y su marquita se va con el en vez de quedarse suelta a la izquierda. */
.tarjeta-fila .tarjeta-valor { flex: 1 1 auto; min-width: 0; }
.tarjeta-fila .procedencia { flex: 0 0 auto; }
.tarjeta-rotulo {
  font-size: 12.5px; color: var(--tinta-3); min-width: 92px;
}
.tarjeta-valor { font-size: 14px; color: var(--tinta); }
/* Un hueco se VE como un hueco. Nunca se rellena con algo plausible. */
.tarjeta-valor.falta, .tarjeta-total b.falta {
  color: var(--alerta); font-weight: 600;
}
.procedencia {
  font-size: 11px; color: var(--tinta-3); white-space: nowrap;
  border: 1px solid var(--linea); border-radius: 100px; padding: 1px 8px;
}
.procedencia.es-falta { color: var(--alerta); border-color: var(--alerta); }
/* La cantidad supuesta se dice: es el unico numero de la tarjeta que no salio del
   chat, y el asesor tiene que poder corregirlo sin sorpresas. */
.procedencia.es-supuesto { color: var(--pendiente); border-color: var(--pendiente); }
.tarjeta-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--linea-fuerte); padding-top: 10px;
  margin-top: 2px;
  font-size: 15px;
}
.tarjeta-total b { font-size: 19px; }
/* Los datos y el aviso de lo que falta salian pegados: se vio en la captura de 390 px. */
.tarjeta-lineas + .pila-8, .tarjeta-total + .pila-8 { margin-top: 2px; }

/* ============================================================================
   LAS ETIQUETAS DE LA FILA DE PEDIDOS (19-sep-2026)
   ----------------------------------------------------------------------------
   El dueño: los siete filtros pasan a tres y el estado fino baja a etiqueta de la
   fila. Los nombres dicen QUE HAY QUE HACER, no como se llama el campo, asi que
   las clases tampoco se llaman como el campo: `es-por-despachar`, no
   `insignia-confirmado`.

   El color no decora, clasifica, y hay exactamente tres niveles:
     · lo que se cerro bien      -> el color de la marca, sin gritar;
     · lo que espera a alguien    -> ambar (la pelota esta afuera);
     · lo que se debe o no cuadra -> alerta. Y solo eso, para que se siga leyendo.
   ========================================================================== */
.pedidos-etiquetas { display: inline-flex; flex-wrap: wrap; gap: 4px; }

.insignia.es-borrador       { background: var(--lienzo-3); color: var(--tinta-3); }
.insignia.es-por-despachar  { background: var(--marca-tenue); color: var(--marca); }
.insignia.es-en-camino      { background: var(--pendiente-tenue); color: var(--pendiente); }
.insignia.es-entregado      { background: var(--marca); color: var(--sobre-marca); }
.insignia.es-cancelado      { background: var(--alerta-tenue); color: var(--alerta); }
/* Un estado que el servidor anadio y esta pantalla todavia no conoce. Se ve, con el
   gris de «no se lo que significa», que es honesto: lo contrario es esconderlo. */
.insignia.es-otro           { background: var(--lienzo-3); color: var(--tinta-2); }

/* PLATA. Estas dos son las unicas que pueden gritar, y por eso las demas no gritan. */
.insignia.es-falta-pagar    { background: var(--alerta-tenue); color: var(--alerta); }
/* «Cobro sin confirmar» NO es lo mismo que «te deben»: [MEDIDO 19-sep] son 19 pedidos y
   3.596.361 COP, y lo mas probable es que el dinero si se cobrara y nadie cerrara el
   registro. Ambar, no rojo: hay que revisarlo, no es una perdida confirmada. */
.insignia.es-cobro-sin-confirmar { background: var(--pendiente-tenue); color: var(--pendiente); }
.insignia.es-contraentrega  { background: var(--lienzo-3); color: var(--tinta-2); }

/* Estados del PAGO (PD3) — eje aparte del estado del pedido a propósito: un
   pedido puede ir "enviado" y sin pagar. [MEDIDO 16-sep-2026, 39 pedidos reales
   de Miikatech] el reparto es contraentrega 26 · sin_cobro 5 · pagado 4 ·
   pendiente 4; `parcial` no aparece hoy pero el servidor lo admite.
   `pendiente` reutiliza el ámbar de arriba (misma idea: falta algo). */
.insignia-pagado        { background: var(--marca); color: var(--sobre-marca); }
.insignia-parcial       { background: var(--pendiente-tenue); color: var(--pendiente); }
.insignia-contraentrega { background: var(--pendiente-tenue); color: var(--pendiente); }
.insignia-sin_cobro     { background: var(--lienzo-3); color: var(--tinta-3); }

/* ------------------------------------------------------------ tarjeta/nota */
.tarjeta {
  background: var(--lienzo);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 16px;
}

/* Una tarjeta que hay que mirar YA. Hoy solo la usa el gasto de IA cuando el mes en curso
   ya paso lo que costo el mes anterior entero. No cambia de color de fondo: el borde basta
   para que salte a la vista sin convertir la pantalla en un semaforo. */
.tarjeta-alerta {
  border-color: var(--alerta);
  box-shadow: inset 3px 0 0 var(--alerta);
}
.tarjeta-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}

.nota {
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--tinta-4);
  border-radius: var(--r-chico);
  background: var(--lienzo-2);
  font-size: 13px;
  color: var(--tinta-2);
}
.nota-alerta { border-left-color: var(--alerta); background: var(--alerta-tenue); color: var(--alerta); }
/* Una marca del asistente pegada en la caja (B-MARCA): la frase y «Quitar» en la misma fila,
   que se parte en el celular. `[hidden]` gana (línea de arriba, !important). */
.aviso-marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 6px; }
.nota-aviso  { border-left-color: var(--pendiente); background: var(--pendiente-tenue); color: var(--pendiente); }
.nota-bot    { border-left-color: var(--bot); background: var(--bot-tenue); color: var(--bot); }
.nota strong { font-weight: 650; }
.nota-titulo { font-weight: 650; }
.nota-ok     { border-left-color: var(--marca); background: var(--marca-tenue); color: var(--marca); }
.nota .btn   { margin-top: 8px; }

/* El detalle crudo del servidor: existe para quien lo necesite, plegado para
   quien no. Nunca es lo primero que se lee. */
.detalle-tecnico { font-size: 12.5px; color: var(--tinta-3); }
.detalle-tecnico summary { cursor: pointer; }
.detalle-tecnico > :not(summary) { margin-top: 8px; }

/* ================================================== PANTALLAS DE ENTRADA ==
   Arranque, entrar, elegir negocio e invitación. Aquí SÍ hay profundidad, y es
   una decisión, no una inconsistencia: son las cuatro pantallas que alguien ve
   antes de que exista un dato que proteger. Todo lo de esta sección está
   acotado a .arranque / .entrar y no filtra ni una regla a la bandeja.

   El fondo son dos capas planas —halo y rejilla— hechas con gradientes: cero
   filtros, cero blur, cero imágenes, cero peticiones. Pinta en el primer frame
   y se ve igual sin internet.

   El halo lleva los DOS colores con significado del producto (verde petróleo
   arriba = el humano, violeta abajo = el bot) porque eso es literalmente lo que
   vende la plataforma: los dos atienden la misma bandeja. Un degradado que
   significa algo no es adorno.
   ========================================================================= */

/* --- LAS PANTALLAS DE ENTRADA SON SIEMPRE OSCURAS ------------------------
   Decisión tomada mirando las dos versiones renderizadas, no en abstracto: en
   oscuro esto se lee como producto de software; en claro se quedaba en "papel
   bonito" — exactamente la queja del dueño ("se ve elegante… falta q se vea de
   tecnología"). Windows viene en claro de fábrica, así que dejarlo al gusto del
   sistema era garantizar que la mayoría viera justo la versión que no funciona.

   Por qué no rompe nada: son ~20 segundos de pantalla y no hay ni un dato de
   trabajo aquí. La APLICACIÓN sigue respetando el tema del sistema tal cual
   estaba — quien trabaja ocho horas manda sobre su propio fondo. El corte
   entrada oscura → bandeja clara es el mismo patrón de Linear, Vercel o Stripe:
   la puerta es de la marca, el escritorio es del usuario.

   Se hace redefiniendo los tokens en el contenedor en vez de reescribir reglas:
   una clase gana siempre a `:root`, así que esto pisa el modo claro Y el oscuro
   sin depender del orden del archivo ni de `!important`.
   ------------------------------------------------------------------------- */
.arranque,
.entrar {
  position: relative;
  isolation: isolate;
  color-scheme: dark; /* que los controles nativos y la barra del navegador acompañen */

  /* ⚠️ ESTE `color` NO ES REDUNDANTE, ES EL ARREGLO DE UN BUG QUE YA PASÓ.
     `body` declara `color: var(--tinta)`. Esa variable se resuelve EN BODY (donde
     todavía vale la tinta clara) y lo que baja a los hijos es el color YA
     calculado, no la variable. Redefinir `--tinta` aquí abajo no reevalúa nada:
     el título "Entra a tu bandeja" salía en tinta casi negra sobre fondo casi
     negro — invisible. Verificado en captura con el sistema en tema claro.
     Volver a declarar `color` aquí obliga a resolver la variable en ESTE ámbito. */
  color: var(--tinta);

  --papel:        #0E0F12;
  --lienzo:       #16181C;
  --lienzo-2:     #1B1E23;
  --lienzo-3:     #22262C;

  --tinta:        #E9EAEC;
  --tinta-2:      #A5AAB3;
  --tinta-3:      #949AA3;
  --tinta-4:      #6E747D;

  --linea:        #272B31;
  --linea-fuerte: #383D45;

  --marca:        #3FBF9E;
  --marca-fuerte: #58D2B2;
  --marca-tenue:  #10312A;
  --sobre-marca:  #06231C;

  --bot:          #A392F0;
  --bot-tenue:    #241E3D;

  --pendiente:      #E0A54A;
  --pendiente-tenue:#33270F;

  --alerta:       #F0836A;
  --alerta-tenue: #3A1B12;

  --foco:         #7AA5FF;

  --sombra-flotante: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.5);

  --entrada-rejilla:    rgba(255, 255, 255, .055);
  --entrada-halo-marca: rgba(63, 191, 158, .15);
  --entrada-halo-bot:   rgba(163, 146, 240, .18);
  --entrada-caja:       #1A1D22;
  --entrada-campo:      #121418;
  --entrada-sombra:     0 1px 1px rgba(0,0,0,.5),
                        0 2px 8px rgba(0,0,0,.4),
                        0 22px 54px -14px rgba(0,0,0,.75);
}

/* `.entrar` no es `fixed` como el arranque: si no se pinta el fondo aquí, en
   modo claro se ve el papel blanco del `body` por debajo de la tarjeta oscura. */
.entrar { background: var(--papel); }

/* Capa 1 — el halo. */
.arranque::before,
.entrar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(62% 46% at 16% -4%, var(--entrada-halo-marca), transparent 70%),
    radial-gradient(54% 42% at 90% 104%, var(--entrada-halo-bot), transparent 72%);
}

/* Capa 2 — la rejilla. Es la que hace que se lea "producto de software" sin
   decirlo. La máscara la apaga hacia los bordes para que sea una insinuación
   y no un cuaderno cuadriculado. Si el navegador no entiende `mask-image`,
   degrada a rejilla pareja: sigue viéndose bien. */
.arranque::after,
.entrar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--entrada-rejilla) 1px, transparent 1px),
    linear-gradient(to bottom, var(--entrada-rejilla) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(115% 85% at 50% 40%, #000 22%, transparent 76%);
          mask-image: radial-gradient(115% 85% at 50% 40%, #000 22%, transparent 76%);
}

/* ------------------------------------------------------------- arranque -- */
.arranque {
  position: fixed; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 10px;
  padding: 24px;
  background: var(--papel);
  text-align: center;
  z-index: 50;
}
.arranque-marca {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 650; letter-spacing: -0.01em;
}
.arranque-texto { color: var(--tinta-3); font-size: 13px; }

/* --------------------------------------------------------------- entrar -- */
.entrar {
  min-height: 100dvh;
  display: grid;
  /* `minmax(0, 1fr)` y no `auto`: sin esto la columna se dimensiona por el
     contenido MÁS ancho que no se puede partir (los correos del bloque de
     cuentas de prueba, en monoespaciada), la tarjeta se hace más ancha que el
     celular y `place-items: center` la desborda hacia la derecha. Verificado:
     con `auto` se sale de la pantalla en 390 px. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
}

/* La tarjeta. Presencia por elevación y por una sola curva más generosa que la
   del resto del producto (14px contra 7px), no por brillos. */
.entrar-caja {
  position: relative;
  width: 100%; max-width: 392px; min-width: 0;
  display: grid; gap: 18px;
  padding: 30px 28px 26px;
  border: 1px solid var(--linea);
  border-radius: var(--r-entrada);
  background: var(--entrada-caja);
  box-shadow: var(--entrada-sombra);
  animation: entrada-aparece .42s cubic-bezier(.22, .68, .32, 1) both;
}

/* La costura de arriba: un pelo de 1px que va de verde a violeta. Es la firma
   de estas pantallas y es la misma frase de la marca dicha en un píxel. */
.entrar-caja::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: var(--r-entrada) var(--r-entrada) 0 0;
  background: linear-gradient(90deg,
    transparent 4%, var(--marca) 30%, var(--bot) 70%, transparent 96%);
  opacity: .85;
  pointer-events: none;
}

@keyframes entrada-aparece {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

.entrar-marca {
  display: flex; align-items: center; gap: 9px;
  font-weight: 650; font-size: 15px; letter-spacing: -0.012em;
}
/* EL LOGO EN LA LANDING (el dueño, 28-sep: «que se vea el logo y la marca MiikaBot»): el mismo icono de la app. */
.inicio-marca { font-size: 19px; gap: 10px; }
.inicio-marca .marca-logo { display: block; width: 36px; height: 36px; border-radius: 9px; flex: 0 0 auto; }

/* Ojo: .marca-punto TAMBIÉN vive en la barra de la aplicación. Esta regla base
   es la de siempre y no se toca; lo que late está acotado abajo a las pantallas
   de entrada. */
.marca-punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-tenue);
  flex: 0 0 auto;
}

/* EL LATIDO. Dos anillos que salen del punto, primero verde y después violeta,
   con siete segundos de ciclo. Dice sin una sola palabra lo único que hay que
   decir en un login: aquí adentro hay alguien —y algo— despierto. Va lento a
   propósito: si se nota que "hay una animación", ya es demasiada. */
.entrar-marca .marca-punto,
.arranque-marca .marca-punto { position: relative; }

.entrar-marca .marca-punto::before,
.entrar-marca .marca-punto::after,
.arranque-marca .marca-punto::before,
.arranque-marca .marca-punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;                 /* estado de reposo: sin movimiento, sin anillo */
  pointer-events: none;
  animation: entrada-latido 3.6s ease-out infinite;
}
.entrar-marca .marca-punto::before,
.arranque-marca .marca-punto::before { border: 1px solid var(--marca); }

.entrar-marca .marca-punto::after,
.arranque-marca .marca-punto::after {
  border: 1px solid var(--bot);
  animation-delay: 1.8s;
}

@keyframes entrada-latido {
  0%   { transform: scale(1);   opacity: .5; }
  70%  {                        opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* Jerarquía de verdad: el título manda, la bajada acompaña, la ayuda se calla.
   Tres tamaños y tres pesos distintos, no tres párrafos iguales. */
.entrar-titulo {
  font-size: clamp(21px, 5.4vw, 25px);
  line-height: 1.22;
  letter-spacing: -0.022em;
}
.landing-no-usado-entrar-bajada {
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.55;
  margin-top: -8px;
}

/* Campos y botones un punto más grandes que en la app: aquí no hay densidad
   que defender y sí un dedo que tiene que acertar a la primera. */
.entrar .campo input {
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--entrada-campo);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.entrar .campo input:focus { background: var(--lienzo); }
.entrar .btn { min-height: 44px; border-radius: 8px; }
.entrar .btn-primario { font-weight: 600; letter-spacing: -0.005em; }

/* -------------------------------------------------------------------------
   Ítems A1 y A2 (2026-08-30) — entrar con Google y pantalla de activación.
   Todo vive dentro de `.entrar`, que ya define su propia paleta oscura, así
   que aquí solo se usan las variables: nada de colores sueltos.
   ------------------------------------------------------------------------- */

/* Google no permite recolorear su marca a gusto, así que el botón se queda
   neutro (fondo claro, texto oscuro) en vez de teñirse con la marca. */
.btn-google {
  background: #FFFFFF;
  color: #1F1F1F;
  border-color: #DADCE0;
  font-weight: 600;
  gap: 10px;
}
.btn-google:hover:not(:disabled) { background: #F1F3F4; }
.btn-google-marca {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #DADCE0;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  color: #4285F4;
}

/* Separador "o con tu correo": una línea a cada lado del texto. */
.entrar-separador {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: var(--tinta-3);
  font-size: 12.5px;
}
.entrar-separador::before,
.entrar-separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linea);
}

/* Los 3 pasos de la pantalla de activación. */
.pasos-activacion {
  margin: 18px 0;
  padding-left: 20px;
  display: grid;
  gap: 12px;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.65;
}
.pasos-activacion li::marker { color: var(--marca); font-weight: 700; }
.pasos-activacion strong { color: var(--tinta); font-weight: 650; }

/* Un botón que se ve como enlace: para acciones secundarias dentro de un
   párrafo, donde un `.btn` de verdad pesaría demasiado. */
.enlace-plano {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--marca);
  text-decoration: underline;
  cursor: pointer;
}
.enlace-plano:hover { color: var(--marca-fuerte); }

.entrar .nota { margin: 4px 0; }
.entrar .nota p + p { margin-top: 6px; }

/* Tarjetas de selección de cuenta.
   La regla base la comparte el modal de Ajustes (js/ajustes.js), así que se
   queda EXACTAMENTE como estaba: lo de la pantalla de entrada va acotado con
   `.entrar` delante para no tocar la aplicación. */
.cuenta-opcion {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 52px; padding: 10px 14px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--r);
  background: var(--lienzo); cursor: pointer; text-align: left;
}
.cuenta-opcion:hover { border-color: var(--marca); background: var(--marca-tenue); }
.cuenta-opcion-nombre { font-weight: 600; }
.cuenta-opcion-id { display: block; font-size: 12px; color: var(--tinta-3); font-family: var(--mono); }
.cuenta-opcion-activa { border-color: var(--marca); background: var(--marca-tenue); }

.entrar .cuenta-opcion {
  min-height: 56px;
  padding: 11px 14px;
  border-color: var(--linea);
  border-radius: 10px;
  background: var(--entrada-campo);
  transition: border-color .14s ease, background-color .14s ease, transform .14s ease;
}
.entrar .cuenta-opcion:hover { transform: translateY(-1px); }

/* Celular angosto: la tarjeta cede aire lateral antes que ceder legibilidad. */
@media (max-width: 400px) {
  .entrar { padding: 18px 14px calc(18px + env(safe-area-inset-bottom)); }
  .entrar-caja { padding: 24px 20px 22px; gap: 16px; }
}

/* Pantalla baja (celular acostado): la tarjeta deja de estar centrada y se
   pega arriba, si no el teclado se come el botón. */
@media (max-height: 560px) {
  .entrar { align-items: start; }
}

/* ================================================================ APP ===== */
.app {
  display: grid;
  grid-template-rows: var(--alto-barra) minmax(0, 1fr);
  height: 100dvh;
}

/* ------------------------------------------------------------------ barra */
.barra {
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  background: var(--lienzo);
  border-bottom: 1px solid var(--linea);
  min-width: 0;
}
.barra-marca { display: flex; align-items: center; gap: 7px; font-weight: 650; font-size: 14px; flex: 0 0 auto; }
.barra-marca .marca-texto { display: none; }
@media (min-width: 900px) { .barra-marca .marca-texto { display: inline; } }

.selector-cuenta {
  display: flex; align-items: center; gap: 6px;
  min-height: 30px; max-width: 210px; padding: 0 8px;
  border: 1px solid var(--linea); border-radius: var(--r-chico);
  background: var(--lienzo-2); color: var(--tinta);
  font-size: 13px; font-weight: 600; cursor: pointer;
  min-width: 0;
}
.selector-cuenta:hover { background: var(--lienzo-3); }
.selector-cuenta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ico-chevron { width: 13px; height: 13px; flex: 0 0 auto; color: var(--tinta-3); }

.nav-principal { display: none; gap: 2px; margin-left: 6px; }
@media (min-width: 820px) { .nav-principal { display: flex; } }
.nav-enlace {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 11px;
  border-radius: var(--r-chico);
  font-size: 13.5px; font-weight: 550; color: var(--tinta-2);
}
.nav-enlace:hover { background: var(--lienzo-3); color: var(--tinta); }
.nav-enlace[aria-current="page"] { background: var(--lienzo-3); color: var(--tinta); font-weight: 650; }

.barra-derecha { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }

/* ------------------------------------------------------------ nav (móvil) */
.nav-movil {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  height: calc(var(--alto-nav-movil) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--lienzo);
  border-top: 1px solid var(--linea);
  z-index: 20;
}
.nav-movil-enlace {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: 11px; font-weight: 550; color: var(--tinta-3);
  min-height: 44px;
  /* «Más» es un <button> (abre una hoja) y las otras son enlaces: sin esto el navegador le
     pone su caja gris, que en oscuro casi no dejaba leer la letra (prueba nv2, 23-sep). */
  background: none; border: 0; padding: 0; cursor: pointer;
}
.nav-movil-enlace svg { width: 20px; height: 20px; }
.nav-movil-enlace[aria-current="page"] { color: var(--marca); }
@media (max-width: 819px) {
  .nav-movil { display: flex; }
  .app { grid-template-rows: var(--alto-barra) minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ rutas */
.ruta { min-height: 0; min-width: 0; }

.hoja {
  overflow-y: auto;
  padding: 22px 20px calc(40px + var(--alto-nav-movil));
}
@media (min-width: 820px) { .hoja { padding-bottom: 60px; } }
.hoja-ancho { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }   /* minmax(0,…): un hijo ancho no ensancha toda la hoja (360 px, 30-sep) */

.hoja-titulo { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.hoja-titulo h1 { font-size: 22px; }
.hoja-bajada { color: var(--tinta-2); font-size: 13.5px; }
/* La acción principal de la pantalla se va al extremo opuesto del título. */
.hoja-titulo > .btn { margin-left: auto; }

/* ============================================================= BANDEJA ==== */
.bandeja {
  display: grid;
  /* DOS columnas, no tres, a CUALQUIER ancho. La ficha del cliente ya no es una
     columna fija: es un panel que se despliega con el boton del nombre.
     El dueño: "no me gusta que aparezca SIEMPRE esa pestana a la derecha; que se
     extienda cuando uno pulse un boton". */
  grid-template-columns: 296px minmax(0, 1fr);
  min-height: 0;
  /* LA PÁGINA NO SE DESPLAZA (26-sep, prueba bs1). El dueño en el PC: «como 3 desplazadores» y
     «sube y baja de forma rara». Uno era la PÁGINA: el pie legal iba suelto debajo de una app de
     100dvh, y lo que no cabía en la columna de la lista se salía por abajo. Ahora solo la lista
     y el chat tienen su scroll; lo que no quepa se recorta aquí, nunca empuja la página. */
  overflow: hidden;
}
.panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--lienzo); }
.panel-lista { border-right: 1px solid var(--linea); background: var(--lienzo-2); overflow: hidden; }

/* LA FICHA DEL CLIENTE: PANEL PLEGADO, Y `position: fixed` NO ES UN DETALLE.
   -------------------------------------------------------------------------
   Con `position: absolute` este panel ENSANCHABA LA PAGINA ENTERA en el telefono.
   Medido el 2026-09-15 a 390 px con la pantalla de conversaciones:
       document.documentElement.clientWidth  = 390   (lo que mide el telefono)
       window.innerWidth / scrollWidth       = 723   (lo que media la pagina)
   El panel esta plegado a la derecha con `transform: translateX(101%)`, pero no
   tiene NINGUN ancestro posicionado: su bloque contenedor era el documento, y un
   elemento absoluto SI cuenta para el area desplazable. O sea que los 330 px
   escondidos se sumaban al ancho de la pagina y el telefono te dejaba arrastrar
   la interfaz de lado.
   El dueño: "desde el celular se ve como una pagina web mal optimizada, mas grande
   de lo que el celular es".
   `fixed` lo ancla a la ventana y lo saca del area desplazable: misma posicion en
   pantalla, misma animacion, y scrollWidth vuelve a 390.
   NO SE PUEDE VOLVER A `absolute` — lo vigila prueba mv1-el-celular-no-hace-zoom-solo. */
.panel-ficha {
  border-left: 1px solid var(--linea); background: var(--lienzo-2); overflow-y: auto;
  position: fixed; top: var(--alto-barra); right: 0; bottom: 0;
  width: min(330px, 88vw);
  z-index: 30;
  box-shadow: var(--sombra-flotante);
  transform: translateX(101%);
  transition: transform .18s ease;
}
.bandeja.ficha-abierta .panel-ficha { transform: none; }

/* --- columna 1: cabecera de la lista --- */
.lista-cabecera {
  padding: 10px 12px;
  border-bottom: 1px solid var(--linea);
  display: grid; gap: 9px;
}
.buscador { position: relative; display: flex; align-items: center; }
.ico-lupa {
  position: absolute; left: 9px; width: 14px; height: 14px;
  color: var(--tinta-4); pointer-events: none;
}
.buscador input {
  width: 100%; min-height: 32px; padding: 6px 10px 6px 29px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-chico);
  background: var(--lienzo); font-size: 13px;
}
.buscador input:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-tenue); }
.buscador input::-webkit-search-cancel-button { cursor: pointer; }

.filtros { display: flex; gap: 5px; flex-wrap: wrap; }
.chip {
  min-height: 28px; padding: 0 10px;
  border: 1px solid var(--linea-fuerte); border-radius: 100px;
  background: var(--lienzo); color: var(--tinta-2);
  font-size: 12.5px; font-weight: 550; cursor: pointer;
}
.chip:hover { background: var(--lienzo-3); }
.chip[aria-pressed="true"] {
  background: var(--tinta); border-color: var(--tinta); color: var(--papel); font-weight: 600;
}
.chip .conteo { opacity: .7; margin-left: 4px; font-variant-numeric: tabular-nums; }
/* «Filtros» detrás de un botón (bandeja-compacta.js, prueba bco1): con la bandera, los chips y el canal
   se pliegan hasta que se pulsa; con un filtro puesto, el botón lleva un punto de la marca. */
.bandeja.filtros-plegados:not(.filtros-abiertos) .plegable { display: none; }
/* Tan alto como el buscador (32 px; 44 en el celular, donde los dos suben por el pulgar). */
.buscador .boton-filtros { flex: none; align-self: stretch; margin-left: 6px; }
.boton-filtros[aria-expanded="true"] { background: var(--lienzo-3); }
/* «+N»: las insignias que no caben; al pasar el ratón, el `title` las dice. */
.conv-etiqueta.es-mas { cursor: help; font-variant-numeric: tabular-nums; }
.boton-filtros .filtros-punto {
  display: inline-block; width: 7px; height: 7px; margin-left: 6px; vertical-align: middle;
  border-radius: 50%; background: var(--marca);
}

/* --- columna 1: la lista --- */
/* PARTE DE 0 Y GUARDA UN MÍNIMO (B4, prueba tq1). Con `auto` competía con la tarjeta de
   bienvenida, que no se encogía: MEDIDO en Chrome el 25-sep, la lista quedaba en 0 px a 390×844,
   360×640, 1366×768 y 1280×720 con los 3 pasos pendientes. Ahora la tarjeta se queda con lo que
   sobra y la lista nunca baja de min(200px, 35vh).
   EL SCROLL ES DE `.lista-desplazable` (26-sep, prueba bs1), que envuelve las filas y, al final,
   «Ver más antiguas»: así ese enlace queda al final de la lista, dentro del mismo scroll, y no
   arriba. `overscroll-behavior` para que al llegar al final no arrastre nada más. */
.lista-desplazable {
  flex: 1 1 0;
  min-height: min(200px, 35vh);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Las filas. Sin scroll propio: el de la lista es el de `.lista-desplazable`. */
.lista-conversaciones { display: block; min-width: 0; }

.conv {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  padding: 10px 12px 10px 8px;
  border: 0;
  border-bottom: 1px solid var(--linea);
  border-left: 2px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.conv:hover { background: var(--lienzo-3); }
/* QUIEN ESPERA A UNA PERSONA, MARCADO EN SU FILA (26-sep, prueba bs1). ~~Un banner rojo arriba~~:
   El dueño, «muy agresivo visualmente». Un borde sutil y ya; la abierta manda sobre él. */
.conv.conv-espera { border-left-color: color-mix(in srgb, var(--pendiente) 65%, transparent); }
.conv[aria-current="true"] {
  background: var(--lienzo);
  border-left-color: var(--marca);
}
.conv-punto {
  width: 7px; height: 7px; border-radius: 50%;
  margin-top: 6px;
  background: transparent;
}
.conv.sin-leer .conv-punto { background: var(--marca); }
.conv-cuerpo { min-width: 0; display: grid; gap: 2px; }
.conv-fila { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.conv-nombre {
  font-size: 13.5px; font-weight: 550; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv.sin-leer .conv-nombre { font-weight: 700; }
.conv-hora {
  margin-left: auto; flex: 0 0 auto;
  font-size: 11.5px; color: var(--tinta-3);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.conv-previa {
  font-size: 12.5px; color: var(--tinta-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-etiquetas { display: flex; gap: 5px; align-items: center; margin-top: 3px; flex-wrap: wrap; }
/* SIN MAYUSCULAS, Y NO ES GUSTO: AQUI DENTRO VA UN NOMBRE DE PERSONA.
   Estas insignias nacieron diciendo cosas cortas del sistema ("Pendiente",
   "Resuelta"), y en mayusculas se leian como rotulos. Desde que una de ellas dice
   quien atiende la conversacion, el texto es "La atiende Ana" — y con
   `text-transform: uppercase` en la fila se leia "LA ATIENDE ANA" (medido el
   2026-09-15 a 390 px: 85 px de ancho, gritado). El dueño lo pidio normal.
   Al quitarlo se quedan sin gritar TODAS, que era la otra opcion que habia sobre la
   mesa (dejar el uppercase y exceptuar esta): once insignias con dos maneras de
   escribirse en la misma fila se ven desordenadas, y la unica que tiene que saltar
   —"Necesita humano"— ya salta por su fondo rojo, no por sus mayusculas.
   Como compensacion de contraste la letra sube de 10.5 a 11 px: en minusculas y a
   10.5 px la altura de la x quedaba por debajo de lo legible de un vistazo. */
.conv-etiqueta {
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  color: var(--tinta-3);
}
/* El color de cada red. No es adorno: en una lista mezclada, el color se lee de un
   vistazo y el texto hay que leerlo. Son tonos apagados a proposito — el rojo de
   "Necesita humano" tiene que seguir siendo lo unico que salta. */
.conv-etiqueta.canal-whatsapp { color: #1a6b4a; background: #e3f2ea; }
.conv-etiqueta.canal-instagram { color: #8a3a6b; background: #fbe9f3; }
.conv-etiqueta.canal-messenger { color: #2a4f8a; background: #e7eefb; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .conv-etiqueta.canal-whatsapp { color: #7fd4ab; background: #163024; }
  :root:not([data-tema="claro"]) .conv-etiqueta.canal-instagram { color: #e3a3c9; background: #331f2b; }
  :root:not([data-tema="claro"]) .conv-etiqueta.canal-messenger { color: #9dbcf0; background: #1b2740; }
}

.conv-etiqueta.es-canal { color: var(--tinta-4); }
.conv-etiqueta.es-pendiente { color: var(--pendiente); }
.conv-etiqueta.es-resuelta { color: var(--tinta-4); }
.conv-etiqueta.es-mia { color: var(--marca); }
.conv-etiqueta.es-sin-asignar { color: var(--alerta); }
/* EN PRUEBA (modo-prueba.js): el asistente no le contesta a este cliente. En el color de
   «pendiente», no en rojo: no es una alarma, es un aviso de que ahí contesta una persona. */
.conv-etiqueta.es-en-prueba { color: var(--pendiente); }
/* POR APROBAR (modo sugerencia, B-SUG): el asistente redactó y nadie lo ha enviado. Con fondo,
   como «necesita atención»: hay un cliente esperando el clic de alguien del equipo. */
.conv-etiqueta.es-por-aprobar { color: var(--bot); background: var(--bot-tenue); }

/* «Tu asistente»: los tres estados como tres opciones grandes (bot.js, seccionModo). */
.modo-opciones { display: grid; gap: 8px; margin: 10px 0; }
/* «Tu asistente» fácil (asi1): el estado en grande arriba, de un color que se entiende de lejos; lo avanzado, plegado. */
/* La bandeja fácil (baf1/baf2): los que esperan arriba de la lista y los dos botones del chat. */
.bandeja-esperan { border: 1px solid var(--pendiente); background: var(--pendiente-tenue); border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; display: grid; gap: 8px; }
.bandeja-esperan-titulo { margin: 0; font-size: 1rem; }
.bandeja-esperan-fila { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.bandeja-esperan-quien { display: grid; gap: 2px; min-width: 0; }
.bandeja-esperan-quien strong, .bandeja-esperan-quien span { overflow-wrap: anywhere; }
.bandeja-esperan-mas { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.chat-botones-faciles { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
.chat-botones-faciles .btn { flex: 1 1 160px; min-height: 48px; }
.asistente-estado { border-left: 8px solid var(--tinta-3); border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; background: var(--lienzo-2); }
.asistente-estado.es-todos { border-left-color: var(--marca); background: var(--marca-tenue); }
.asistente-estado.es-prueba, .asistente-estado.es-sugerencia { border-left-color: var(--pendiente); background: var(--pendiente-tenue); }
.asistente-estado.es-apagado { border-left-color: var(--alerta); background: var(--alerta-tenue); }
.asistente-estado-titulo { margin: 0 0 4px; font-size: 1.35rem; letter-spacing: .02em; }
.asistente-estado-frase { margin: 0; }
/* Los 3 campos del dueño (c74): cada día con sus franjas; la vista previa de la bienvenida como un globo. */
.asistente-dia { display: grid; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--linea); }
.asistente-franja { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-left: 28px; }
.asistente-franja input[type="time"] { font-size: 16px; min-height: 40px; }
.asistente-vista-previa { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--marca-tenue); white-space: pre-wrap; overflow-wrap: anywhere; }
.asistente-vista-previa:empty { display: none; }
.asistente-atajos { display: flex; flex-wrap: wrap; gap: 8px; }
.asistente-avanzado { margin-top: 16px; }
/* «Más opciones» de Ajustes (aju1): plegado, con el mismo botón grande de «Avanzado». */
.ajustes-mas { margin-top: 16px; }
.ajustes-mas > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
/* La ficha del cliente fácil (fcl1): «Escribirle por WhatsApp» a todo el ancho y «Para facturar» plegado. */
.cliente-acciones .btn { width: 100%; min-height: 48px; }
.cliente-facturar { margin-top: 12px; }
.cliente-facturar > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.asistente-avanzado > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.modo-opcion {
  display: grid; gap: 2px; text-align: left; width: 100%;
  padding: 10px 12px; border-radius: 10px; font: inherit; cursor: pointer;
  border: 1px solid var(--linea-fuerte); background: var(--lienzo-2); color: var(--tinta);
}
.modo-opcion.es-actual { border-color: var(--marca); box-shadow: 0 0 0 2px var(--marca-tenue); }
.modo-opcion:disabled { cursor: default; opacity: .75; }
.modo-numeros { margin-top: 6px; }
.modo-minutos { margin-top: 6px; }
.modo-minutos input { width: 5em; }
/* La unica etiqueta con fondo: dice que alguien esta esperando y el bot ya se
   rindio. Con el mismo peso que las demas se pierde entre lo cotidiano, y este
   aviso solo sirve si se ve de un vistazo. */
.conv-etiqueta.es-necesita-humano {
  color: var(--sobre-marca);
  background: var(--alerta);
  font-weight: 600;
}

/* PASADOS 15 MINUTOS, la misma insignia pesa mas. No cambia de color: ya es la de
   alerta, y un segundo color rojo no dice «mas urgente», dice «otra cosa». Lo que
   cambia es el peso y un contorno que la separa del resto de la fila.
   Los 15 minutos son los mismos con los que el servidor avisa al dueno por Telegram:
   si el aviso ya salio por el telefono, la bandeja no puede estar tranquila. */
.conv-etiqueta.es-necesita-humano.es-urgente {
  font-weight: 700;
  outline: 2px solid var(--alerta);
  outline-offset: 1px;
}

/* «SIN RESPONDER»: el cliente hablo y nadie contesto. Dos pesos, y la diferencia es
   deliberada (ver web/js/sin-responder.js):

   · `es-sin-responder` — entre 15 min y 6 h. Es la ventana en la que el servidor ya
     avisa por Telegram, asi que aqui solo hace falta que se vea: borde, no relleno.
   · `es-olvidada` — mas de 6 h. Es la que el servidor manda «al resumen» y no existia en
     ninguna pantalla: [MEDIDO] dos conversaciones llevaban 102 y 156 horas y NADA las
     marcaba. Va rellena, como «Necesita atencion», porque pesa lo mismo.

   Las dos por debajo de `es-necesita-humano` en el orden de la fila, no en el color: ahi
   el bot ya se rindio y pidio una persona, que es una situacion mas concreta. */
.conv-etiqueta.es-sin-responder {
  color: var(--alerta);
  border-color: var(--alerta);
  font-weight: 600;
}
.conv-etiqueta.es-olvidada {
  color: var(--sobre-marca);
  background: var(--alerta);
  border-color: var(--alerta);
  font-weight: 700;
}

/* --- columna 2: hilo --- */
.panel-hilo { position: relative; }
.hilo { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
/* Arrastrando un archivo encima: que se vea que se puede soltar (bandeja.js, JP1-19). */
.hilo[data-soltando] { position: relative; }
.hilo[data-soltando]::after {
  content: 'Suelta aquí para adjuntar';
  position: absolute; inset: 8px; z-index: 5;
  display: grid; place-items: center;
  border: 2px dashed var(--marca); border-radius: 12px;
  background: var(--marca-tenue); color: var(--tinta);
  font-weight: 600; pointer-events: none;
}

.hilo-cabecera {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--linea);
  min-height: 48px;
}
.hilo-quien { min-width: 0; flex: 1 1 auto; display: grid; }

/* VOLVER A LA LISTA, EN EL TELEFONO.
   Era una flecha suelta de 40x40. Una flecha sola obliga a adivinar a donde
   lleva, y 40 px se quedan por debajo del minimo tocable. Ahora lleva la palabra
   al lado y 44 px de alto. El display lo pone `.solo-movil`: en escritorio no
   existe, porque alli la lista esta siempre a la vista. */
.btn-volver {
  align-items: center; gap: 4px;
  min-height: 44px; padding: 0 10px 0 6px; margin-left: -6px;
  border: 0; border-radius: var(--r-chico);
  background: none; color: var(--tinta-2);
  font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; flex: 0 0 auto;
}
.btn-volver:hover { background: var(--lienzo-3); }
.btn-volver svg { width: 16px; height: 16px; flex: 0 0 auto; }
.hilo-nombre { font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hilo-meta { font-size: 11.5px; color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* AMPLIAR EL CHAT, EN EL COMPUTADOR (paso 181, punto 3; chat-amplio.js, prueba amp1).
   Con la bandera, el boton de la cabecera pone `chat-amplio` en la bandeja: la lista se va y el chat
   se queda con todo el ancho. Las burbujas pasan de los 560 px de siempre, con el tope en em (crece
   con la letra y con el zoom) y nunca en pixeles. Solo de 700 px para arriba: en el telefono ya se ve
   una cosa a la vez, y alli el boton no aparece. La ficha no se toca: flota encima (`.panel-ficha`).
   X58-3 (revision cruzada de A, 28-sep): la lista solo se esconde con una conversacion ABIERTA
   (data-panel="hilo", lo pone y lo quita bandeja.js). Sin conversacion no hay cabecera ni boton para
   volver: ahi la lista se ve siempre, aunque la clase siga puesta. prueba amp1 (AMP1-11). */
.btn-ampliar {
  flex: 0 0 auto; min-height: 32px; padding: 0 10px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-chico);
  background: var(--lienzo); color: var(--tinta-2);
  font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.btn-ampliar:hover { background: var(--lienzo-3); }
@media (max-width: 699px) { .btn-ampliar { display: none; } }
@media (min-width: 700px) {
  .bandeja.chat-amplio[data-panel="hilo"] { grid-template-columns: minmax(0, 1fr); }
  .bandeja.chat-amplio[data-panel="hilo"] .panel-lista { display: none; }
  .bandeja.chat-amplio .msg { max-width: min(48em, 82%); }
  .bandeja.chat-amplio .msg-sugerencia { max-width: min(48em, 92%); }
}

/* ============ FIRMA: la cinta del bot ====================================== */
.cinta-bot {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--linea);
  background: var(--bot-tenue);
  color: var(--bot);
  font-size: 12.5px;
  font-weight: 600;
}
.cinta-punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
  animation: latido 2.6s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.78); }
}
.cinta-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cinta-reloj { font-weight: 700; letter-spacing: 0; }
.cinta-acciones { margin-left: auto; display: flex; gap: 6px; flex: 0 0 auto; }
.cinta-acciones .btn {
  min-height: 26px; padding: 0 9px; font-size: 12px;
  border-color: currentColor; color: inherit; background: transparent;
}
.cinta-acciones .btn:hover:not(:disabled) { background: rgba(0,0,0,.06); }

/* Bot en pausa: el humano manda. La cinta se apaga y deja de latir. */
.cinta-bot.esta-pausado {
  background: var(--lienzo-2);
  color: var(--tinta-2);
}
.cinta-bot.esta-pausado .cinta-punto { animation: none; opacity: .45; }
/* Canal apagado: nada sale por aquí, ni el bot ni un humano. */
.cinta-bot.canal-apagado { background: var(--alerta-tenue); color: var(--alerta); }
.cinta-bot.canal-apagado .cinta-punto { animation: none; }

/* --- mensajes --- */
.mensajes {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;   /* al llegar arriba o abajo no arrastra la página (prueba bs1) */
  padding: 16px 16px 20px;
  display: flex; flex-direction: column; gap: 3px;
  background: var(--papel);
  -webkit-overflow-scrolling: touch;
}
/* «Ver mensajes anteriores», arriba del hilo (el hilo se pagina de a 50, prueba hp1). */
.hilo-anteriores { display: grid; justify-items: center; gap: 4px; padding: 8px 0 4px; color: var(--tinta-3); }

.dia-separador {
  align-self: center;
  margin: 12px 0 8px;
  padding: 2px 10px;
  border-radius: 100px;
  background: var(--lienzo);
  border: 1px solid var(--linea);
  font-size: 11px; font-weight: 600; color: var(--tinta-3);
}
.msg { display: flex; flex-direction: column; max-width: min(560px, 82%); }
.msg + .msg { margin-top: 7px; }
.msg-entrante { align-self: flex-start; }
.msg-saliente { align-self: flex-end; align-items: flex-end; }

.msg-burbuja {
  padding: 8px 11px;
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  background: var(--lienzo);
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Una dirección que manda un cliente. Va subrayada Y con color: solo con color, quien no
   distinga bien los tonos no ve que es pulsable. El `overflow-wrap: anywhere` de arriba
   ya se encarga de que una dirección larguísima no estire la burbuja. */
.msg-enlace {
  color: var(--marca);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.msg-enlace:hover { color: var(--marca-fuerte); }
.msg-enlace:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.msg-entrante .msg-burbuja { border-bottom-left-radius: 3px; }
.msg-saliente .msg-burbuja {
  border-bottom-right-radius: 3px;
  /* La franja de color es la que dice QUIÉN habló. No es adorno. */
  border-right: 3px solid var(--marca);
}
.msg-saliente.de-bot .msg-burbuja { border-right-color: var(--bot); background: var(--bot-tenue); }

.msg-pie {
  display: flex; align-items: center; gap: 6px;
  margin-top: 3px; padding: 0 3px;
  font-size: 11px; color: var(--tinta-3);
}
.msg-autor { font-weight: 650; }
.msg-saliente.de-bot .msg-autor { color: var(--bot); }
.msg-hora { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.msg-estado { text-transform: lowercase; }
.msg-estado.es-fallido { color: var(--alerta); font-weight: 650; }
/* BORRAR, en Messenger e Instagram (26-sep, prueba bm1): discreto. Se ve al pasar el ratón o con el
   foco dentro del mensaje, y SIEMPRE en una pantalla táctil, donde no hay «pasar el ratón». */
.msg-borrar { opacity: 0; transition: opacity .12s ease; }
.msg:hover .msg-borrar, .msg:focus-within .msg-borrar { opacity: 1; }
@media (hover: none) { .msg-borrar { opacity: 1; } }
/* Lo que queda de un mensaje borrado desde la bandeja o anulado por el cliente: una línea tenue. */
.msg-borrado, .msg-anulado, .msg-no-leible { opacity: .9; }
/* Un mensaje que el cliente editó en WhatsApp (ítem 22): la marca, discreta, antes de la hora. */
.msg-editado { font-style: italic; }
.msg-tapa { font-style: italic; color: var(--tinta-3); background: transparent; border-style: dashed; }

/* ── LOS CHULITOS (H44) ──────────────────────────────────────────
   `text-transform` se apaga para ellos: un ✓ no tiene minúscula, y con la regla puesta el
   navegador no hace nada — pero la palabra de respaldo (un estado que no conocemos) sí la
   hereda, y ahí sí molesta. Se apaga solo donde hay glifo.
   `letter-spacing` negativo en los dobles: ✓✓ con el espaciado normal se lee como dos
   marcas separadas en vez de una sola de «entregado». */
.msg-estado.es-enviado,
.msg-estado.es-entregado,
.msg-estado.es-leido,
.msg-estado.es-en-vuelo { text-transform: none; }
.msg-estado.es-entregado,
.msg-estado.es-leido { letter-spacing: -0.18em; padding-right: 0.18em; }

/* El azul del «leído». `--foco` y no un azul escrito a mano: ya está en la paleta y tiene
   su variante para el tema oscuro (#7AA5FF), así que no hay que acordarse de nada. */
.msg-estado.es-leido { color: var(--foco); }
/* El estado que no sabemos leer. En CURSIVA, que es como esta hoja marca ya lo que no es
   un dato firme (`.msg-hora.es-aproximada`), y apagado: no es una noticia, es una duda. */
.msg-estado.es-sin-confirmar { font-style: italic; color: var(--tinta-3); }
/* No se sabe si salió (un mensaje aprobado: A, 24-sep). Cursiva de duda, en «pendiente». */
.msg-estado.es-incierta { font-style: italic; color: var(--pendiente); }
/* Y los otros dos, apagados: el acuse no compite con lo que dijo el cliente. */
.msg-estado.es-enviado,
.msg-estado.es-entregado { color: var(--tinta-3); }

/* 🔴 UN MENSAJE QUE NO LLEGO. Antes solo cambiaba una linea del pie, y en un hilo
   largo eso no se ve: el asesor cree que contesto. Ahora cambia la burbuja entera —
   borde y fondo— para que se note al ojear, sin leer. */
.msg-no-llego .msg-burbuja {
  border-color: var(--alerta);
  border-left: 3px solid var(--alerta);
  background: var(--alerta-tenue);
}
.msg-no-llego-motivo {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--alerta);
  overflow-wrap: anywhere;
}
.msg.enviando .msg-burbuja { opacity: .6; }

/* NO SE SABE SI LLEGÓ (un mensaje aprobado cuya respuesta de Meta se perdió: A, 24-sep). En el
   color de «pendiente» y no en el de alarma: no se afirma que falló, se pide revisarlo. */
.msg-duda .msg-burbuja { border-left: 3px solid var(--pendiente); background: var(--pendiente-tenue); }
.msg-duda-motivo { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--pendiente); overflow-wrap: anywhere; }

/* SIN ENVIAR (B9, envio-robusto.js): no se sabe si llegó; se queda con «Reintentar».
   Punteado y en el color de «pendiente»: no es un error del cliente, es algo por hacer. */
.msg-sin-enviar .msg-burbuja { border: 1px dashed var(--pendiente); opacity: .85; }
.msg-sin-enviar-motivo { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--pendiente); overflow-wrap: anywhere; }
.msg-sin-enviar-motivo p { margin: 0 0 4px; }

/* EL MENSAJE QUE NO SE PUDO PROCESAR (B4, estados-visibles.js): llegó, pero el asistente no lo
   leyó ni le contestó. Borde del color de «pendiente», no de alarma: el mensaje está, falta
   que alguien le conteste. */
.msg-no-procesado .msg-burbuja { border-left: 3px solid var(--pendiente); }
.msg-no-procesado-motivo { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--pendiente); overflow-wrap: anywhere; }

/* UN CANAL EN PAUSA, arriba de la lista (B4). */
.bandeja-pausa { display: grid; gap: 6px; margin: 0 0 8px; }
.bandeja-pausa .pausa-frase { margin: 0; }
/* UNA SUGERENCIA DEL ASISTENTE SIN ENVIAR (B-SUG, sugerencia-pantalla.js). No puede parecerse
   a un mensaje enviado: borde discontinuo, sin chulitos, y la etiqueta encima que lo dice. */
.msg-sugerencia { max-width: min(560px, 92%); }
.msg-sugerencia .msg-burbuja {
  border: 1px dashed var(--bot);
  background: var(--lienzo);
}
.msg-sugerencia .msg-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-sugerencia-etiqueta { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--bot); }
.msg-sugerencia-aviso,
.msg-sugerencia-fallo { margin: 4px 0 0; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.msg-sugerencia-aviso { color: var(--pendiente); }
.msg-sugerencia-fallo { color: var(--alerta); }
.msg-sugerencia-acciones { margin-top: 6px; justify-content: flex-end; flex-wrap: wrap; }
.msg-sugerencia-hecho { margin: 4px 0 0; font-size: 12px; color: var(--tinta-3); }
/* Editando una sugerencia en la caja (bandeja.js): se ve encima, con «Cancelar». */
.editando-sugerencia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 6px; }

/* --- lo que manda el cliente que no es texto (web/js/medios.js) ---
   El dueño: «que cuando a uno le envíen una imagen, un audio, un video, un sticker,
   todo se pueda previsualizar en la página directamente».

   Dos estados, y los dos tienen que verse bien:
   · SIN ARCHIVO (lo de hoy): una tarjeta de texto que dice QUÉ llegó, lo que la
     persona escribió o dijo, y una línea admitiendo que todavía no se puede ver.
     Apagada a propósito — informa, no grita. Antes aquí salía «[imagen]» crudo.
   · CON ARCHIVO (cuando el servidor lo publique): manda el archivo, y la tarjeta se
     hace al lado. Por eso `.con-archivo` quita el borde y el relleno: un marco
     alrededor de una foto solo la hace más pequeña.

   `white-space: normal` NO es un detalle: `.msg-burbuja` lleva `pre-wrap` para
   respetar los saltos de línea de un mensaje escrito, y heredado aquí dejaba huecos
   raros entre los nodos de la tarjeta. */
.msg-medio {
  display: grid; gap: 6px;
  white-space: normal;
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--r);
  padding: 8px 10px;
  background: var(--lienzo-3);
}
.msg-medio.con-archivo {
  border: 0; padding: 0; background: none; gap: 5px;
}
.msg-medio-cabeza { display: flex; align-items: baseline; gap: 8px; }
.msg-medio-titulo { font-size: 12.5px; font-weight: 650; color: var(--tinta-2); }
.msg-medio-dato {
  font-size: 11px; color: var(--tinta-3);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
/* El pie de foto o la transcripción: es lo que dijo la persona, o sea lo MÁS
   importante de la tarjeta. Va con la tinta del mensaje, no apagado. */
.msg-medio-detalle { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--tinta); }
/* La línea honesta. Apagada y pequeña: dice algo cierto, pero no es la noticia. */
/* El pie de foto y la transcripcion conservan sus parrafos. [MEDIDO] los 6 pies del
   bot traen saltos de linea dobles, y `white-space: normal` los colapsaba: lo que el
   cliente ve en dos parrafos, el asesor lo veia en uno. */
.msg-medio-detalle,
.msg-transcripcion-texto { white-space: pre-wrap; overflow-wrap: anywhere; }

.msg-medio-aviso { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--tinta-3); }

/* Quien escribio lo que viene debajo. Va en VERSALITAS y apagado: tiene que leerse antes
   que el texto, sin competir con el. */
.msg-medio-rotulo {
  margin: 0 0 2px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* ── LA UBICACIÓN, EL CONTACTO Y EL PEDIDO (H24) ─────────────────────────
   Pares rótulo-valor. El rótulo apagado y el valor con la tinta del mensaje: lo que
   importa es el dato —qué pidió, a dónde, qué teléfono—, no la palabra que lo nombra.
   `tabular-nums` en el valor porque casi todos son cifras (precios, cantidades,
   coordenadas, teléfonos) y alineadas se comparan de un vistazo.

   ⚠️ Las variables son las que EXISTEN (`--tinta`, `--tinta-3`, `--linea`, `--lienzo-2`,
   `--marca`, `--foco`). Escribí primero `--fondo-2`, `--borde` y `--acento`, que no
   existen en esta hoja: un `var()` sin definir no da error, se queda en nada — el borde
   desaparece y el fondo se vuelve transparente, sin una sola queja en la consola. */
.msg-tarjeta-linea {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  /* Una dirección larga o una referencia sin espacios no puede ensanchar la burbuja: a
     390 px eso empuja la hora fuera de la pantalla. */
  overflow-wrap: anywhere;
}
.msg-tarjeta-rotulo { color: var(--tinta-3); }
.msg-tarjeta-valor { color: var(--tinta); font-variant-numeric: tabular-nums; }

/* El enlace al mapa. No va como el `.msg-enlace` subrayado de una dirección que escribió
   un cliente, porque no es lo mismo: eso es texto, y esto es LA ACCIÓN de la tarjeta. Va
   con forma de botón y con alto suficiente para acertarle con el pulgar. */
.msg-tarjeta-enlace {
  display: inline-block;
  margin-top: 4px;
  padding: 7px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--r-chico);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--marca);
  background: var(--lienzo-2);
}
.msg-tarjeta-enlace:hover { color: var(--marca-fuerte); }
/* El foco se VE: quien navega con teclado tiene que saber dónde está. Mismo tratamiento
   que `.msg-enlace`, para que la pantalla no tenga dos formas de decir lo mismo. */
.msg-tarjeta-enlace:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* La hora que es una estimacion. En cursiva para que se note al ojear sin leerla. */
.msg-hora.es-aproximada { font-style: italic; }

/* `max-width: 100%` es lo que impide que una foto de 3000 px empuje la página de
   lado en un teléfono, y `height: auto` que salga aplastada. */
/* ── EL REPRODUCTOR DE NOTAS DE VOZ ──────────────────────────────────────────
   Una sola fila dentro de la burbuja: play, barra, tiempos y velocidad.

   El nativo se cambio por esto porque iba con `preload="none"` y se pintaba
   «0:00 / 0:00» hasta que alguien pulsaba play — que mirandolo es «hay un boton
   de play y no funciona», la queja literal del dueño (21-sep-2026).

   La barra es un `<input type="range">` de verdad, con la pinta quitada: asi el
   arrastre, el dedo en un movil, las flechas del teclado y el lector de pantalla
   vienen ya resueltos. Hacerla con divs seria mas codigo y dejaria fuera a quien
   usa el teclado. */
.nota-voz {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;            /* sin esto la barra empuja la burbuja a lo ancho */
  padding: 2px 0;
}

.nota-voz-play {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: var(--sobre-marca);
  background: var(--marca);
}
.nota-voz-play:hover { background: var(--marca-fuerte); }

/* La barra ocupa lo que sobra, y puede encogerse hasta nada en una pantalla
   estrecha sin reventar la fila. */
.nota-voz-barra {
  flex: 1 1 auto;
  min-width: 40px;
  height: 18px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.nota-voz-barra:disabled { cursor: default; opacity: 0.55; }

/* El riel y el punto, por duplicado: los dos motores usan seudoelementos
   distintos y no se pueden juntar en una sola regla — si se juntan, el navegador
   que no entienda una de las dos descarta el bloque entero. */
.nota-voz-barra::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--linea-fuerte);
}
.nota-voz-barra::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--linea-fuerte);
}
.nota-voz-barra::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;       /* centrado sobre un riel de 4px */
  border: 0;
  border-radius: 50%;
  background: var(--marca);
}
.nota-voz-barra::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--marca);
}
.nota-voz-barra:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Cifras tabulares: sin ellas el ancho baila a cada segundo y la fila entera
   tiembla mientras suena. */
.nota-voz-tiempo {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-3);
  white-space: nowrap;
}

.nota-voz-velocidad {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 2px 6px;
  border: 1px solid var(--linea);
  border-radius: var(--r-chico);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--tinta-2);
  background: transparent;
}
.nota-voz-velocidad:hover { border-color: var(--marca); color: var(--marca); }

/* El <audio> hace el trabajo y no se ve: los controles son los de arriba. */
.nota-voz-audio { display: none; }

/* ⛔ ESTA REGLA NO SOBRA. `[hidden]` lo trae el navegador con especificidad CERO, asi
   que `.nota-voz-play { display: grid }` se lo pasa por encima y un control «escondido»
   se seguiria viendo. Es la trampa clasica de esconder con el atributo. */
.nota-voz [hidden] { display: none !important; }

/* La frase que explica por que no suena. Ocupa la fila entera porque es lo unico que
   queda cuando los controles se van. */
.nota-voz-fallo {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--tinta-3);
}

.msg-medio-imagen, .msg-medio-sticker, .msg-medio-reproductor {
  display: block; max-width: 100%; height: auto;
}
.msg-medio-imagen { border-radius: var(--r); background: var(--lienzo-3); }
/* Un sticker no es una foto: va sin marco y pequeño, como en cualquier chat. */
.msg-medio-sticker { width: 140px; }

/* ---- La transcripcion de una nota de voz ----
   VA ETIQUETADA Y SE DISTINGUE del pie de foto, y no es un adorno: sin decir de donde
   salio, el asesor la lee como si el cliente la hubiera escrito y le contesta citandola.
   Una transcripcion se equivoca; lo que alguien escribio, no. */
.msg-transcripcion {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border-left: 3px solid var(--linea-fuerte);
  background: var(--lienzo-2);
  display: grid;
  gap: 3px;
}
.msg-transcripcion-rotulo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
/* En cursiva: se lee distinto de lo que la persona tecleo, sin tener que leer el rotulo
   cada vez. */
.msg-transcripcion-texto { margin: 0; line-height: 1.45; font-style: italic; }

/* El boton de abrir el archivo: se pide al servidor, no se baja solo. Va pegado a la
   cabecera de la tarjeta y ocupa lo que necesita, no la fila entera. */
.msg-medio-abrir { justify-self: start; margin-top: 2px; }

.msg-medio-reproductor { width: 100%; }
.msg-medio-archivo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--marca);
  overflow-wrap: anywhere;
}
.msg-medio-archivo:hover { text-decoration: underline; }

/* --- responder --- */
.responder {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea);
  background: var(--lienzo);
}
.responder textarea {
  flex: 1 1 auto;
  max-height: 140px;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r);
  background: var(--lienzo-2);
  font-size: 13.5px;
  line-height: 1.5;
  resize: none;
}
.responder textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-tenue); }
.btn-enviar { min-height: 38px; flex: 0 0 auto; }
.btn-enviar svg { width: 15px; height: 15px; }
@media (max-width: 520px) { .btn-enviar span { display: none; } .btn-enviar { padding: 0 12px; } }

/* El clip y el micrófono. `flex: 0 0 auto` NO es decoración: sin él los aplasta el
   `flex: 1 1 auto` del campo de escribir y quedan en dos rayitas de 2 px —MEDIDO en las
   capturas de 390 y de 1280 el 15-sep-2026, con los dos botones ilegibles. */
.responder .btn-icono {
  flex: 0 0 auto;
  width: 38px; min-height: 38px; padding: 0;
  display: grid; place-items: center;
}
.responder .btn-icono svg { width: 18px; height: 18px; }

.responder-aviso {
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--alerta-tenue);
  color: var(--alerta);
  font-size: 12.5px;
  border-top: 1px solid var(--linea);
}

/* --- los mensajes aprobados (plantillas-pantalla.js) ------------------------------------
   Ocupan el sitio de la caja de escribir con la ventana de 24 h cerrada. Salen de la maqueta
   de docs/contratos/plantillas-maqueta.html, con los tokens del tema (claro y oscuro). La
   lista tiene tope de alto y se desplaza: en un celular no puede tapar la conversación. */
.aprobados {
  display: flex; flex-direction: column; gap: 10px;
  /* NO SE ENCOGE (26-sep, prueba bs1). Con `overflow-y: auto` su mínimo es 0, y el chat, que es
     más alto, lo aplastaba: MEDIDO en el arnés a 1440×900 se veía «Pasaron más de 24 h» y el
     borde de la primera opción, con un scroll propio encima de dos opciones cortas. Ahora cede
     el chat; el panel solo se desplaza si pasa de 60dvh. */
  flex: 0 0 auto;
  max-height: 60dvh; overflow-y: auto;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea-fuerte);
  background: var(--lienzo);
}
.aprobados p { margin: 0; }
.aprobados-aviso { font-size: 13.5px; line-height: 1.45; color: var(--pendiente); font-weight: 600; }
.aprobados-escrito { padding: 8px 10px; border-radius: var(--r-chico); background: var(--lienzo-2); border: 1px dashed var(--linea-fuerte); }
.aprobados-escrito-titulo { font-size: 12px; color: var(--tinta-3); margin-bottom: 3px; }
.aprobados-escrito-texto { font-size: 13.5px; color: var(--tinta); white-space: pre-wrap; user-select: text; }
.aprobados-titulo { font-size: 13px; color: var(--tinta-2); }
.aprobados-vacia { font-size: 14px; line-height: 1.45; color: var(--tinta); }
.aprobados-nota { font-size: 12.5px; line-height: 1.45; color: var(--tinta-3); }
.aprobados-nota.es-error { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: var(--alerta); }
.aprobados-lista { display: flex; flex-direction: column; gap: 8px; }
.aprobados-opcion {
  text-align: left; padding: 10px 12px;
  /* Cabecera, cuerpo y pie llegan separados por una línea en blanco (a-plantillas). */
  white-space: pre-wrap;
  font: inherit; font-size: 14px; line-height: 1.4; color: var(--tinta);
  background: var(--lienzo-2); border: 1px solid var(--linea-fuerte); border-radius: var(--r);
  cursor: pointer;
}
.aprobados-opcion:hover { border-color: var(--marca); }
.aprobados-opcion:focus-visible { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-tenue); }
.aprobados-categoria { display: block; margin-bottom: 3px; font-size: 12px; color: var(--tinta-3); }
.aprobados-hueco { padding: 0 6px; border-radius: 6px; font-size: 13px; color: var(--pendiente); background: var(--pendiente-tenue); }
.aprobados-lleno { font-weight: 650; }
.aprobados-previa {
  align-self: flex-end; max-width: 88%;
  padding: 10px 12px; border-radius: var(--r);
  font-size: 14.5px; line-height: 1.45; background: var(--marca-tenue); color: var(--tinta);
  white-space: pre-wrap;
}
.aprobados-previa small { display: block; margin-bottom: 4px; font-size: 12px; color: var(--tinta-3); }
.aprobados-campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tinta-2); }
/* 16 px en el celular: con menos, iOS hace zoom al tocar la casilla (prueba mv1). */
.aprobados-campo input {
  font: inherit; font-size: 16px; padding: 9px 10px;
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-chico);
}
.aprobados-campo input:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-tenue); }
.aprobados-costo { font-size: 13px; color: var(--tinta-2); }
.aprobados-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.aprobados-pie { font-size: 12px; color: var(--tinta-3); }
.msg-aprobado { font-weight: 600; color: var(--tinta-2); }
/* «Esto estuvo mal» (paso 162, prueba eem1): vuelve el 27-sep, en el menú «…» del mensaje del asistente.
   El menú se ve al pasar el ratón (y siempre en una pantalla táctil), como «Borrar»; la marca, sin gritar. */
.msg-reportado { font-weight: 600; color: var(--tinta-2); }
.msg-menu { display: inline-block; opacity: 0; transition: opacity .12s ease; }
.msg:hover .msg-menu, .msg:focus-within .msg-menu, .msg-menu[open] { opacity: 1; }
@media (hover: none) { .msg-menu { opacity: 1; } }
.msg-menu > summary { list-style: none; cursor: pointer; padding: 0 6px; color: var(--tinta-3); }
.msg-menu > summary::-webkit-details-marker { display: none; }

/* --- lo que se va a mandar, antes de mandarlo --- */
/* La miniatura mide lo mismo que el alto minimo del campo de escribir: la fila no da
   un salto al elegir un archivo. Y lleva `flex-wrap` porque el nombre de un archivo
   puede ser larguisimo y a 390 px no puede empujar el boton de quitar fuera. */
/* Desde el 22-sep la previa lleva VARIOS archivos, uno por fila. En columna y no en
   fila: cuatro fichas en horizontal se encogen hasta que no se lee ni el nombre, y el
   nombre es justo lo que distingue una foto de otra antes de mandarlas. */
.adjunto-previa {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--linea);
  background: var(--lienzo-2);
  /* Con diez adjuntos esto no puede comerse la conversación entera. */
  max-height: 40vh;
  overflow-y: auto;
}
.adjunto-ficha {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.adjunto-previa img,
.adjunto-previa video { width: 46px; height: 46px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.adjunto-previa audio { max-width: 100%; height: 34px; flex: 1 1 200px; }
.adjunto-previa .adjunto-datos { flex: 1 1 140px; min-width: 0; }
.adjunto-previa .adjunto-nombre {
  display: block; font-size: 13px; font-weight: 600;
  overflow-wrap: anywhere;
}
.adjunto-previa .adjunto-peso { display: block; font-size: 12px; color: var(--tinta-2); }
.adjunto-icono {
  width: 46px; height: 46px; border-radius: 6px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--lienzo-3); color: var(--tinta-2);
}
.adjunto-icono svg { width: 20px; height: 20px; }

/* H09: el buscador de productos del catalogo (bandeja.js, prueba ph1). */
.selector-producto-lista {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px; max-height: 50vh; overflow-y: auto;
}
.selector-producto {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; min-height: 44px; padding: 8px 10px; text-align: left;
  border: 1px solid var(--linea); border-radius: 10px;
  background: var(--papel); color: var(--tinta); cursor: pointer;
}
.selector-producto:hover, .selector-producto:focus-visible { border-color: var(--marca); }
/* El agotado se VE, pero no se puede elegir: no es un boton, y se nota. */
.selector-producto-no { cursor: default; opacity: .6; }

/* --- mientras se graba --- */
.grabando {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea);
  background: var(--lienzo);
}
.grabando .grabando-punto {
  width: 10px; height: 10px; border-radius: 50%; background: var(--alerta); flex: 0 0 auto;
  animation: latido 1.4s ease-in-out infinite;
}
/* Un punto que late es informacion (esto SIGUE grabando), no adorno; pero a quien pide
   menos movimiento se le deja quieto y en su sitio, no invisible. */
@media (prefers-reduced-motion: reduce) { .grabando .grabando-punto { animation: none; } }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.grabando .grabando-tiempo {
  font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; flex: 0 0 auto;
}
.grabando .grabando-texto { flex: 1 1 120px; font-size: 12.5px; color: var(--tinta-2); }
.grabando .btn { min-height: 44px; }

/* --- columna 3: ficha --- */
.ficha { padding: 14px; display: grid; gap: 16px; }
.ficha-encabezado { display: grid; gap: 8px; justify-items: start; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lienzo-3); color: var(--tinta-2);
  font-size: 14px; font-weight: 650;
}
.ficha-nombre { font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.ficha-sub { font-size: 12.5px; color: var(--tinta-3); }

.ficha-bloque { display: grid; gap: 8px; }
.ficha-bloque + .ficha-bloque { border-top: 1px solid var(--linea); padding-top: 14px; }

/* El bloque de 'Necesita humano' en la ficha. Usa el MISMO --alerta que la etiqueta de
   la lista para que se lean como la misma cosa: alguien esta esperando. Va con borde
   lateral en vez de fondo lleno porque aqui dentro va un boton, y sobre fondo lleno el
   boton se pierde. */
.ficha-bloque.ficha-alerta {
  border-left: 3px solid var(--alerta);
  padding-left: 10px;
}
.ficha-bloque.ficha-alerta .rotulo { color: var(--alerta); }

.dato { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.dato dt { color: var(--tinta-3); flex: 0 0 auto; }
.dato dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-weight: 550; }

.segmentado { display: flex; border: 1px solid var(--linea-fuerte); border-radius: var(--r-chico); overflow: hidden; }
.segmentado button {
  flex: 1 1 0; min-height: 32px; padding: 0 6px;
  border: 0; border-right: 1px solid var(--linea);
  background: var(--lienzo); color: var(--tinta-2);
  font-size: 12.5px; font-weight: 550; cursor: pointer;
}
.segmentado button:last-child { border-right: 0; }
.segmentado button:hover { background: var(--lienzo-3); }
.segmentado button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); font-weight: 650; }

.etiquetas { display: flex; flex-wrap: wrap; gap: 5px; }
.etiqueta {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 4px 2px 9px;
  border: 1px solid var(--linea-fuerte); border-radius: 100px;
  font-size: 12px; background: var(--lienzo);
}
.etiqueta button {
  width: 18px; height: 18px; border: 0; border-radius: 50%;
  background: transparent; color: var(--tinta-3); cursor: pointer;
  display: grid; place-items: center; font-size: 13px; line-height: 1;
}
.etiqueta button:hover { background: var(--lienzo-3); color: var(--alerta); }

/* EL VELO DE LA FICHA — A TODOS LOS ANCHOS, Y AHI ESTA EL ARREGLO.
   -------------------------------------------------------------------------
   Vivia dentro de @media (max-width: 1159px) con este argumento escrito al lado:
   "en escritorio son 330 px al lado del chat, y oscurecer la aplicacion entera
   seria tratar una consulta rapida como un modal". Es FALSO, y se midio el
   2026-09-15 a 1200 px con la ficha abierta: no esta al lado, esta ENCIMA. El
   hilo ocupa de 296 a 1200 y la ficha flotante se le pone sobre 870-1200, asi
   que tapaba «Enviar» (x 1101-1188) y la accion de la franja del asistente
   (x 1107-1188) — document.elementFromPoint en el centro de los dos devolvia el
   propio panel.
   Y sin velo no habia NADA que la cerrara tocando fuera: un clic del raton en
   (150, 400) dejaba la clase ficha-abierta puesta. Escribir seguia funcionando
   porque Enter envia, pero la accion de la franja no tiene atajo: quedaba muerta
   y nada lo decia.
   Por eso la regla es BASE: a cualquier ancho, si la ficha esta abierta hay
   salida tocando fuera. Con la ficha cerrada el velo no existe (display: none),
   asi que no se come ni un clic. */
.velo-ficha { display: none; }
.bandeja.ficha-abierta .velo-ficha {
  display: block; position: fixed; inset: 0; z-index: 25;
  background: rgba(22,24,29,.3);
}

/* ============================================================== CLIENTE === */
/* Encabezado: quién es, y las tres cifras que contestan "¿me conviene este
   cliente?" sin abrir un solo pedido. */
.cliente-cabeza { display: grid; gap: 14px; justify-items: start; }
.cliente-identidad { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar-grande { width: 48px; height: 48px; font-size: 16px; }
.cliente-nombre { font-size: 22px; overflow-wrap: anywhere; }
.cliente-sub {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 13px; color: var(--tinta-3);
}
.punto-sep { color: var(--tinta-4); }

.cliente-cifras {
  display: flex; flex-wrap: wrap; gap: 10px;
  width: 100%;
}
.dato-grande {
  flex: 1 1 150px;
  display: grid; gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--linea); border-radius: var(--r);
  background: var(--lienzo);
}
.dato-grande-valor { font-size: 17px; font-weight: 700; }
.dato-grande-etiqueta { font-size: 11.5px; color: var(--tinta-3); }

/* Pedidos a la izquierda (lo que se mira), datos e etiquetas a la derecha (lo
   que se completa una vez y casi no se vuelve a tocar). */
.cliente-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.cliente-col-principal, .cliente-col-lateral { display: grid; gap: 16px; min-width: 0; }

.lista-faltantes { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 2px; font-size: 12.5px; }

/* Agregar una etiqueta: campo y botón en la misma línea, porque es un gesto
   de un segundo y no merece un formulario. */
.fila-agregar { display: flex; gap: 8px; margin-top: 10px; }
.fila-agregar input {
  flex: 1 1 auto; min-width: 0; min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-chico);
  background: var(--lienzo); color: var(--tinta); font-size: 13px;
}
.fila-agregar input:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-tenue); }

.resumen-pedido {
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--lienzo);
  overflow: hidden;
}
.resumen-pedido + .resumen-pedido { margin-top: 10px; }
.pedido-cabecera {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  width: 100%; padding: 11px 13px;
  border: 0; background: transparent; text-align: left; cursor: pointer;
}
.pedido-cabecera:hover { background: var(--lienzo-2); }
.pedido-id { font-family: var(--mono); font-size: 12.5px; color: var(--tinta-3); }
.pedido-fecha { font-size: 12.5px; color: var(--tinta-3); }
.pedido-total { margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; }
.pedido-detalle { padding: 0 13px 14px; display: grid; gap: 14px; border-top: 1px solid var(--linea); padding-top: 13px; }

.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th {
  text-align: left; font-size: 11px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-3);
  padding: 0 8px 6px 0; border-bottom: 1px solid var(--linea);
}
.tabla td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num {
  text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tabla .total-fila td { font-weight: 700; border-top: 2px solid var(--linea-fuerte); border-bottom: 0; padding-top: 9px; }
.tabla-envoltura { overflow-x: auto; }
/* El código interno del producto vive debajo de su nombre, no compitiendo. */
.sku { display: block; margin-top: 2px; }

.pedido-envio { display: grid; gap: 7px; }
.pedido-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
/* Un pedido cancelado se ve, pero deja de pedir atención. */
.pedido-cancelado { opacity: .62; }
.pedido-cancelado:hover, .pedido-cancelado:focus-within { opacity: 1; }

/* --- planes: lo que pasa al pasarse del tope, y lo que se monta aparte --- */
/* Una lista de frases sueltas, sin viñeta: son avisos, no un menu de opciones. Van
   pegadas debajo de los planes porque explican al grupo entero, no a una fila. */
.lista-pistas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.lista-pistas li::before { content: '· '; color: var(--tinta-3); }
/* El aviso de «se monta aparte» va en ambar, no en rojo: no es un error del cliente ni
   algo roto — es una aclaracion, y pintarla de alarma la haria sonar a problema. */
.nota-aparte { color: var(--pendiente); }

/* --------------------------------------------------- tablero de pedidos (PD3) */
/* Una "tabla" hecha con divs (`role="table"`) para poder volverse tarjetas en el
   celular sin duplicar el marcado. `.pedidos-fila { display: contents }` en
   escritorio deja que sus celdas se unan directo a la rejilla del padre — el
   truco de siempre para una tabla accesible construida con grid. */
.pedidos-tabla {
  display: grid;
  /* COLUMNAS QUE SE ENCOGEN, no anchos fijos. [MEDIDO 16-sep a 1280 px] con los fijos
     la rejilla pedia 936 px dentro de un envoltorio de 860 y la columna de PAGO salia
     cortada por la mitad: se leia «Contra…» y «Sin co…». El envoltorio tiene su barra
     de desplazamiento como red, pero una tabla que hay que arrastrar de lado teniendo
     420 px de ventana libre es una tabla mal medida.
     Cada columna trae su minimo —lo que de verdad ocupa su dato— y la del cliente se
     lleva el sobrante, que es la que puede tener nombres largos. */
  /* SIETE, una por celda de la fila (23-sep-2026): la de «Pago» se quedó aquí cuando el pago
     pasó a etiqueta dentro de «Estado» (19-sep), y cada fila salía corrida una celda. PD3-20. */
  grid-template-columns:
    minmax(52px, auto) minmax(84px, auto) minmax(110px, 1.2fr) minmax(128px, auto)
    minmax(84px, auto) minmax(96px, auto) minmax(100px, auto);
  column-gap: 8px;
}
/* EL ENVOLTORIO DE LAS FILAS TAMBIEN DESAPARECE. `#pedidos-filas` existe para poder
   repintar solo el cuerpo sin tocar la cabecera, pero siendo un hijo normal de la
   rejilla ocupaba UNA celda: las filas se apilaban una debajo de otra, cada dato en
   su propio renglon. [MEDIDO el 16-sep-2026 mirando la captura de 1280 px] la
   cabecera salia horizontal y los pedidos en vertical. */
#pedidos-filas { display: contents; }
.pedidos-fila { display: contents; }
.pedidos-fila:not(.pedidos-fila-cabecera) { cursor: pointer; }
.pedidos-celda {
  padding: 9px 0; border-bottom: 1px solid var(--linea);
  font-size: 13px; display: flex; align-items: center; gap: 6px; min-width: 0;
}
.pedidos-fila-cabecera .pedidos-celda {
  font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-3); border-bottom: 1px solid var(--linea-fuerte);
}
.pedidos-fila:hover:not(.pedidos-fila-cabecera) .pedidos-celda { background: var(--lienzo-2); }
.pedidos-fila:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }

@media (max-width: 819px) {
  /* En el teléfono la "tabla" se vuelve tarjetas: cada fila, un bloque; cada
     celda, una etiqueta encima de su valor (el mismo patrón que una factura de
     ferretería, no el de una hoja de cálculo apretada). */
  .pedidos-tabla { display: block; }
  /* LA CABECERA SE ESCONDE DE VERDAD. Estaba escrita ANTES de `.pedidos-fila`, y las
     dos tienen la misma fuerza (una clase), asi que ganaba la de abajo: la cabecera
     salia en el telefono como una tarjeta vacia con ocho rotulos y ni un dato.
     [MEDIDO 16-sep en la captura de 390 px.] Con el padre delante gana esta, este
     donde este — y `#pedidos-filas` no la contiene, asi que no arrastra a las filas. */
  .pedidos-tabla .pedidos-fila-cabecera { display: none; }
  .pedidos-fila {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
    padding: 12px; border: 1px solid var(--linea); border-radius: var(--r);
    margin-bottom: 8px; background: var(--lienzo);
  }
  .pedidos-celda { display: block; padding: 0; border-bottom: 0; min-height: 44px; }
  .pedidos-celda::before {
    content: attr(data-etiqueta); display: block; font-size: 10.5px;
    letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 2px;
  }
  /* En el teléfono, todo botón que se toca con el dedo mide 44 px — el mínimo
     táctil recomendado. `.btn-icono` de la barra de escritorio no se toca aquí
     (es compartido con toda la app); este ajuste vive solo dentro del tablero. */
  .pedidos-celda .btn-icono, .campo-copiable .btn-icono {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  }
}

/* Productos de un pedido: crece sin techo, pero con su PROPIO scroll — un
   pedido de 40 líneas no puede empujar el resto de la ficha fuera de vista. */
.pedido-productos-scroll { max-height: 380px; overflow-y: auto; }

/* Un dato + su botón de copiar, en la ficha del pedido (los datos "sueltos" de
   `camposCopiables`). El dato ocupa lo que sobra; el botón nunca se encoge. */
.campo-copiable { display: flex; align-items: center; gap: 8px; }
.campo-copiable .dato { flex: 1; min-width: 0; }
.campo-copiable .btn-icono { flex: 0 0 auto; }

/* Un dato que NO cabe en una fila etiqueta-valor: la direccion de entrega. La
   etiqueta va ENCIMA y el valor ocupa el ancho entero, a la izquierda. `.dato`
   alinea el valor a la derecha en la mitad estrecha de la fila, y una direccion
   colombiana de verdad ahi se lee cortada (20-sep-2026). El `flex: 1; min-width: 0`
   es el mismo de `.campo-copiable .dato`: sin el, el boton de copiar se pega al texto. */
.dato-ancho { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dato-ancho .valor { font-size: 13px; font-weight: 550; overflow-wrap: anywhere; }

.lineas-dinero { display: grid; gap: 4px; }
.linea-dinero {
  display: flex; justify-content: space-between; gap: 12px; font-size: 13px;
}
.linea-dinero .valor { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.linea-dinero.es-total {
  border-top: 1px solid var(--linea-fuerte); margin-top: 5px; padding-top: 7px;
  font-weight: 700; font-size: 15px;
}

.item-editable {
  display: grid;
  grid-template-columns: 1.4fr 2.4fr .7fr 1.1fr 32px;
  gap: 8px; align-items: end;
}
@media (max-width: 760px) {
  .item-editable { grid-template-columns: 1fr 1fr; }
  .item-editable .quitar-item { grid-column: 2; justify-self: end; }
}

/* ================================================================ EQUIPO == */
.miembro {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linea);
  flex-wrap: wrap;
}
.miembro:last-child { border-bottom: 0; }
/* APILADO, no en linea. Sin `display:flex` los hijos son spans sueltos y el
   navegador los pega: se leia "WhatsApp MiikatechWhatsApp" en los canales y
   "Nomina 150Hasta 150 conversaciones al mes" en los planes. El defecto ya
   estaba en los canales desde antes; la pantalla de planes, con dos lineas de
   descripcion por fila, solo lo hizo imposible de ignorar. */
.miembro-quien { min-width: 0; flex: 1 1 190px; display: flex; flex-direction: column; gap: 2px; }
.miembro-correo {
  font-size: 13.5px; font-weight: 550; overflow-wrap: anywhere;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.miembro-uid { font-size: 11.5px; color: var(--tinta-4); font-family: var(--mono); }
.miembro-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }   /* wrap: a 360 px «Asistente / Pausar / Desconectar» no caben en una fila */
/* Paso 11 · un botón por canal (canales-por-red.js): el botón de cada red va debajo de su nombre, a lo ancho. */
.red-control { flex: 1 1 100%; min-width: 0; }
.red-control:empty { display: none; }
.miembro-acciones select { min-height: 32px; font-size: 13px; padding: 4px 8px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-chico); background: var(--lienzo); }

.jerarquia {
  display: grid; gap: 6px;
  font-size: 13px;
}
.jerarquia-fila { display: flex; gap: 10px; align-items: baseline; }
.jerarquia-fila .insignia { flex: 0 0 auto; min-width: 96px; justify-content: center; }

/* El código de invitación es lo ÚNICO que sale de "invitar": si no se puede
   leer y copiar de un vistazo, la invitación no sirve. */
.codigo-bloque {
  display: block;
  padding: 9px 11px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-chico);
  background: var(--lienzo-2);
  overflow-wrap: anywhere;
  user-select: all;
}
.codigo-grande { font-size: 15px; font-weight: 650; letter-spacing: .01em; }

/* ================================================ vacíos, cargas y errores */
.vacio {
  flex: 1 1 auto;
  display: grid; place-content: center; justify-items: center; gap: 7px;
  padding: 40px 24px;
  text-align: center;
}
.vacio-icono { width: 30px; height: 30px; color: var(--tinta-4); }
.vacio-icono svg { width: 100%; height: 100%; }
.vacio h2 { font-size: 15px; }
.vacio p { font-size: 13px; color: var(--tinta-2); max-width: 320px; }
.vacio-chico { padding: 22px 14px; }

.cargando {
  display: flex; align-items: center; gap: 8px;
  padding: 16px; color: var(--tinta-3); font-size: 13px;
}
.girador {
  width: 13px; height: 13px; flex: 0 0 auto;
  border: 2px solid var(--linea-fuerte); border-top-color: var(--tinta-3);
  border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Esqueleto de carga: da la forma de lo que viene, sin spinner eterno. */
.esqueleto { padding: 10px 12px; border-bottom: 1px solid var(--linea); display: grid; gap: 6px; }
.esqueleto-linea {
  height: 9px; border-radius: 3px;
  background: linear-gradient(90deg, var(--lienzo-3) 25%, var(--linea) 37%, var(--lienzo-3) 63%);
  background-size: 300% 100%;
  animation: brillo 1.4s ease-in-out infinite;
}
@keyframes brillo { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ================================================================= MODAL == */
.capa-modal {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 18px;
  background: rgba(22, 24, 29, .42);
  overflow-y: auto;
}
.modal {
  width: 100%; max-width: 560px;
  max-height: calc(100dvh - 36px);
  display: flex; flex-direction: column;
  background: var(--lienzo);
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  box-shadow: var(--sombra-flotante);
  animation: subir .16s ease-out;
}
.modal-ancho { max-width: 720px; }
@keyframes subir { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-cabecera {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--linea);
}
.modal-cabecera h2 { flex: 1 1 auto; font-size: 15.5px; }
.modal-cuerpo { padding: 16px; overflow-y: auto; display: grid; gap: 14px; }
.modal-pie {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--linea);
  flex-wrap: wrap;
}

/* --- el recorrido de la bandeja (primer-uso-pantalla.js) ---------------------------------
   Solo tokens del tema: así se ve igual de bien en claro y en oscuro sin una regla aparte.
   El dibujo de cada paso es decorativo (aria-hidden) y no se puede pulsar. */
.primer-uso { display: grid; gap: 10px; }
.primer-uso-cuenta { margin: 0; font-size: 12px; font-weight: 600; color: var(--tinta-3); }
.primer-uso-titulo { margin: 0; font-size: 17px; line-height: 1.3; color: var(--tinta); }
.primer-uso-texto { margin: 0; line-height: 1.55; color: var(--tinta-2); }
.primer-uso-pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; width: 100%; }
.pu-escena {
  display: grid; gap: 8px; padding: 14px;
  background: var(--lienzo-2); border: 1px solid var(--linea); border-radius: var(--r);
  pointer-events: none; user-select: none;
}
.pu-fila {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--papel); border-radius: var(--r-chico);
}
.pu-avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--marca-tenue); }
.pu-lineas { flex: 1 1 auto; display: grid; gap: 6px; }
.pu-linea { display: block; width: 72%; height: 7px; border-radius: 4px; background: var(--linea-fuerte); }
.pu-linea-corta { width: 44%; }
.pu-punto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--marca); }
.pu-chip {
  justify-self: start; padding: 3px 10px; border-radius: 100px;
  font-size: 12px; font-weight: 600; color: var(--alerta); background: var(--alerta-tenue);
}
.pu-burbuja { width: 62%; padding: 9px 10px; border-radius: var(--r); }
.pu-entra { justify-self: start; background: var(--papel); }
.pu-sale { justify-self: end; background: var(--bot-tenue); }
.pu-boton {
  justify-self: start; padding: 5px 12px; font-size: 13px; font-weight: 550;
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-chico);
}
.pu-opcion {
  display: block; padding: 8px 12px; font-size: 14px;
  color: var(--tinta-2); background: var(--papel);
  border: 1px solid var(--linea); border-radius: var(--r-chico);
}
.pu-opcion.es-elegida { color: var(--tinta); border-color: var(--marca); box-shadow: inset 3px 0 0 var(--marca); }

.volcado {
  margin: 0; padding: 12px;
  background: var(--lienzo-2); border: 1px solid var(--linea); border-radius: var(--r-chico);
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 320px; overflow-y: auto;
  color: var(--tinta-2);
}

/* ================================================================ AVISOS == */
.avisos {
  position: fixed; z-index: 70;
  left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid; gap: 8px; justify-items: center;
  width: min(440px, calc(100vw - 24px));
  pointer-events: none;
}
@media (max-width: 819px) { .avisos { bottom: calc(var(--alto-nav-movil) + 14px + env(safe-area-inset-bottom)); } }
.aviso {
  pointer-events: auto;
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--linea-fuerte);
  border-left: 3px solid var(--marca);
  border-radius: var(--r);
  background: var(--lienzo);
  box-shadow: var(--sombra-flotante);
  font-size: 13px;
  animation: subir .16s ease-out;
}
.aviso.es-error { border-left-color: var(--alerta); color: var(--alerta); }
.aviso.es-aviso { border-left-color: var(--pendiente); color: var(--pendiente); }
.aviso-cerrar {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  color: var(--tinta-3); font-size: 16px; line-height: 1;
  width: 22px; height: 22px; border-radius: 4px;
}
.aviso-cerrar:hover { background: var(--lienzo-3); }

/* ======================================================== responsive =======
   TRES APARATOS, TRES DISEÑOS — no una pantalla estirada.
   El dueño, 15-sep-2026: «celular, tablet y computador, y que cada parte tenga su
   personalización completa — no una sola pantalla estirada».

   · ≥1160px  COMPUTADOR — lista de 296 px + chat + la ficha que se despliega encima.
   · 700-1159 TABLET      — lista de 274 px + chat a la vez, y la ficha que se
                            despliega. Con la barra de abajo mientras sea ≤819 px.
   · ≤699px   TELÉFONO    — una cosa a la vez: o la lista, o el chat (y «‹ Volver»).

   POR QUÉ 700 Y NO OTRO NÚMERO — está medido, no elegido a ojo:
   la lista mide 274 px en este tramo, así que a 700 px al chat le quedan 426, y 426
   es MÁS ANCHO QUE UN TELÉFONO (390 px es el que se mide en todas las capturas). O
   sea: el corte está justo donde el chat de la tablet deja de ser más estrecho que
   el mismo chat en un celular. Por debajo, dos columnas dejarían el chat peor que el
   teléfono, y ahí es cuando se parte en «una cosa a la vez».

   Y RESUELVE UN CORTE QUE PARTÍA LAS TABLETS POR LA MITAD: el anterior era 819 px, y
   los iPad de pie miden 744 · 768 · 810 · 820 · 834. Con 819 la MISMA tablet era un
   teléfono de pie y un computador de lado. Con 700 todas las tablets son tablets.
   MEDIDO antes del cambio a 768 px (cinta-apagado): columnas «768px», lista 0 px de
   ancho (escondida) y el chat ocupando los 768 — la pantalla estirada que él describe.
   ========================================================================= */
.solo-movil { display: none; }

@media (max-width: 1159px) {
  .bandeja { grid-template-columns: 274px minmax(0, 1fr); }
}

/* La ficha del cliente pierde su segunda columna antes que la bandeja: sus dos
   columnas son gruesas (una tabla de pedidos y un formulario fiscal). */
@media (max-width: 900px) {
  .cliente-columnas { grid-template-columns: minmax(0, 1fr); }
}

/* ≤819px — DONDE ESTÁ LA BARRA DE ABAJO.
   Este corte ya no decide la forma de la pantalla: decide quién paga el relleno de
   la barra de navegación, que es lo único que cambia a 819 px (`.nav-movil` pasa a
   `display: flex`). Va aparte del corte del teléfono a propósito: una tablet de 768
   px tiene DOS columnas y ADEMÁS barra abajo, y las dos cosas son ciertas a la vez.
   Sin este relleno la barra se sienta encima del botón de enviar. */
/* La altura que se ve: por defecto la de la pantalla; teclado-del-celular.js la achica con el teclado abierto (inline en <html>). */
:root { --alto-visible: 100dvh; }

@media (max-width: 819px) {
  /* Con el teclado abierto (teclado-del-celular.js, prueba tcl1): la app mide lo que se ve, la barra de abajo se esconde (era lo que
     más se comía) y la fila de escribir deja de pagar el hueco de esa barra. */
  html.teclado-abierto .app { height: var(--alto-visible); }
  html.teclado-abierto .nav-movil { display: none; }
  html.teclado-abierto .responder { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .lista-desplazable { padding-bottom: calc(var(--alto-nav-movil) + 8px); }   /* el scroll es suyo (prueba bs1) */
  .responder { padding-bottom: calc(10px + var(--alto-nav-movil) + env(safe-area-inset-bottom)); }
  .responder-aviso { padding-bottom: calc(8px + var(--alto-nav-movil) + env(safe-area-inset-bottom)); }
  /* Mientras se graba, esta fila OCUPA EL SITIO de la de escribir, asi que necesita el
     mismo hueco para la barra de abajo: sin esto, «Listo» queda debajo de «Bandeja». */
  .grabando { padding-bottom: calc(10px + var(--alto-nav-movil) + env(safe-area-inset-bottom)); }
  /* Los mensajes aprobados también ocupan ese sitio (ventana de 24 h cerrada): mismo hueco.
     MEDIDO a 390×844 el 23-sep: sin él, «Enviar mensaje aprobado» quedaba debajo de «Bandeja». */
  .aprobados { padding-bottom: calc(14px + var(--alto-nav-movil) + env(safe-area-inset-bottom)); }
  /* En el teléfono se tocan con el dedo, no con un puntero: 44 px es el mínimo, el mismo
     que ya se le puso a «‹ Volver». En el computador se quedan en 38, que es la altura
     del campo de escribir y de «Enviar». */
  .responder .btn-icono { width: 44px; min-height: 44px; }
  .responder textarea, .btn-enviar { min-height: 44px; }
}

/* ≤699px — EL TELÉFONO: UNA COSA A LA VEZ.
   Aquí sí cambia la forma: la bandeja deja de ser dos columnas y se convierte en dos
   pantallas (la lista o el chat), con «‹ Volver» para salir del chat, que es el gesto
   de una aplicación de celular. La ficha sube a `top: 0` porque ahí ocupa la pantalla
   entera y no tiene sentido dejar asomando la barra de arriba. */
@media (max-width: 699px) {
  .bandeja { grid-template-columns: minmax(0, 1fr); }
  .panel-lista { border-right: 0; }
  .bandeja[data-panel="lista"] .panel-hilo { display: none; }
  .bandeja[data-panel="hilo"] .panel-lista { display: none; }
  .panel-ficha { top: 0; }
  .solo-movil { display: inline-flex; }
  .msg { max-width: 88%; }
}

/* PUNTEROS GRUESOS (DEDO): NADA POR DEBAJO DE 44px DE ALTO TOCABLE.

   ⛔ Y ahora de verdad. Esta misma frase llevaba aqui escrita desde hace tiempo y las
   reglas de debajo ponian **34px**: el comentario prometia una cosa y el CSS hacia otra.
   Es la forma mas silenciosa de que una regla se pierda — nadie relee un comentario que
   ya esta escrito. Lo vigila MV1-G1, que lee ESTE bloque y se pone rojo con cualquier
   medida por debajo de 44.

   [MEDIDO en la auditoria movil del 21-sep-2026, con la aplicacion real a 375x812 y estas
   mismas reglas de dedo aplicadas]:
     MiikaBot (ir a inicio) ... 9x9      <- ni siquiera estaba cubierto
     «Encenderlo» ............. 80x26
     Ver la foto / Escuchar ... 80x34
     Enviar ................... 40x40
     chips, Salir, Buscar ..... 34-37
   Los tres de media («Ver la foto», «Escuchar», «Ver el video») son justo los que se
   tocan cuando se ensena la bandeja a un cliente.

   LO QUE CUESTA, dicho para que se pueda discutir: la fila de filtros pasa de 34 a 44, o
   sea 20px menos de lista (son dos filas). A 812px de alto eso es un 2,5% — y a cambio
   los filtros se pueden tocar sin apuntar. */
@media (pointer: coarse) {
  .conv { padding-top: 13px; padding-bottom: 13px; }
  .chip { min-height: 44px; }
  .btn { min-height: 44px; }
  .btn-chico { min-height: 44px; }
  .btn-icono { width: 44px; height: 44px; }

  /* EL ENLACE A INICIO. Por debajo de 900px la palabra «MiikaBot» se esconde y lo unico
     que quedaba tocable era el punto de 9px. Es el enlace que devuelve a la bandeja desde
     cualquier pantalla. No se le da alto visible: se le da AREA. */
  .barra-marca { min-width: 44px; min-height: 44px; }

  /* La cinta del asistente manda sobre `.btn` con mas especificidad, asi que su boton
     —encender o apagar el asistente, que es la accion mas delicada de la pantalla— se
     quedaba en 26px. */
  .cinta-acciones .btn { min-height: 44px; }

  /* Por debajo de 520px el boton de enviar pierde su palabra y se queda en 40 de ANCHO.
     El alto ya lo daba `.btn`; lo que faltaba era el ancho. */
  .btn-enviar { min-width: 44px; }

  /* Cambiar de negocio y salir viven en la barra de arriba, que ya mide 58px: darles 44
     no mueve nada de sitio. */
  .selector-cuenta { min-height: 44px; }

  /* El buscador es la unica via a las conversaciones que se caen del tope. */
  #buscar-conv { min-height: 44px; }
}

/* =========================================================== movimiento === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  /* La regla de arriba ya deja todo quieto, pero con las pantallas de entrada
     no se apuesta: el latido se apaga entero y la tarjeta se declara visible a
     mano. Una animación mal cancelada aquí no es un adorno perdido — es un
     login en blanco y nadie puede entrar. */
  .entrar-marca .marca-punto::before,
  .entrar-marca .marca-punto::after,
  .arranque-marca .marca-punto::before,
  .arranque-marca .marca-punto::after {
    animation: none !important;
    opacity: 0 !important;
  }
  .entrar-caja {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================ impresión === */
@media print {
  .barra, .nav-movil, .panel-lista, .responder, .cinta-acciones, .avisos { display: none !important; }
  body { background: #fff; }
}


/* L8 — la casilla de terminos. Tapa la app entera a proposito: es una condicion
   para entrar, no un aviso que se pueda ignorar. */
.capa-terminos {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: rgba(15, 23, 42, .55); padding: 1.25rem;
}
/* EL FONDO SALE DEL TEMA, NO DE UN BLANCO FIJO.

   Medido en la pagina viva el 2026-09-07, con el sistema en modo oscuro:
     texto  rgb(233, 234, 236)   (casi blanco, heredado del tema)
     fondo  rgb(255, 255, 255)   (este `background: #fff` de aqui)
     contraste 1.1:1 -> practicamente invisible

   Y esto es la PRIMERA pantalla que ve alguien al entrar, y ademas es el
   consentimiento legal: la unica que no puede permitirse ser ilegible. Se pedia
   aceptar unas condiciones que no se veian.

   Un color fijo dentro de una interfaz que sigue el tema del usuario siempre
   acaba asi: el fondo se queda quieto y el texto se mueve. Los dos tienen que
   salir del mismo sitio. */
.capa-terminos__hoja {
  background: var(--lienzo); color: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: .8rem; padding: 1.5rem;
  max-width: 30rem; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.capa-terminos__hoja h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.capa-terminos label { display: block; margin: 1rem 0; line-height: 1.5; }
.capa-terminos input { margin-right: .5rem; }
.capa-terminos__acciones { display: flex; justify-content: flex-end; margin-top: 1rem; }

/* Pie legal (L1). */
.pie-legal {
  max-width: 60rem; margin: 2.5rem auto 0; padding: 1.25rem;
  border-top: 1px solid var(--linea);
  font-size: .82rem; line-height: 1.6; color: var(--tinta-2);
}
.pie-legal__nota { margin: .35rem 0 0; }
.pie-legal__enlaces { margin: .5rem 0 0; }
.pie-legal__enlaces a { color: var(--tinta-2); }

/* P1 — el panel de métricas. */
.metricas-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.metricas { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 1rem 0 1.5rem; }
/* Estas tarjetas se escribieron con el color puesto a mano (#fff, #6b7280) y por eso
   se saltaban el tema oscuro entero: en modo oscuro quedaban BLANCAS, y la cifra
   —que no declaraba color— heredaba la tinta clara del tema. Resultado: el numero
   mas importante de la pantalla, gris claro sobre blanco. Ahora van por los mismos
   tokens que el resto de la app, asi que siguen al tema en los dos sentidos. */
.metrica { background: var(--lienzo); border: 1px solid var(--linea); border-radius: .7rem; padding: 1rem 1.1rem; }
.metrica-titulo { margin: 0 0 .35rem; font-size: .8rem; font-weight: 600; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .03em; }
.metrica-valor { margin: 0; font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: var(--tinta);
                 font-variant-numeric: tabular-nums; }
.metrica-detalle { margin: .35rem 0 0; font-size: .85rem; color: var(--tinta-2); }
/* Sin dato NO es cero: se ve distinto a propósito. */
.metrica--sin-dato .metrica-valor { font-size: .95rem; font-weight: 500; color: var(--tinta-3); font-style: italic; }
.metricas-seccion { font-size: 1rem; margin: 1.5rem 0 .25rem; }
.metricas-nota { margin: 0 0 .5rem; font-size: .88rem; color: var(--tinta-2); }

/* ── Clases que el código ya pintaba y la hoja no tenía (2026-09-13) ──────────
   Las encontró prueba cs2-css-sin-clases-fantasma.test.mjs. Sin estas reglas cada una
   salía con el estilo por defecto del navegador, sin un solo error en consola. Todo
   va con las variables de arriba, para que el tema oscuro las siga solo.
   Van juntas y aquí (no repartidas) para que al fusionar con otras ramas choquen lo
   menos posible. */

/* «Negocios»: el estado de cobro. Con una lista larga, quien debe plata tiene que
   verse sin leer letra por letra: en mora en rojo, al día en verde. */
.negocio-cobro.es-al_dia  { background: var(--marca-tenue); color: var(--marca); }
.negocio-cobro.es-en_mora { background: var(--alerta-tenue); color: var(--alerta); }
.negocio-cobro.es-prueba  { background: var(--pendiente-tenue); color: var(--pendiente); }

/* Métricas: el selector de 7/30/90 días, con la forma de los selectores de las filas,
   y la explicación de cada cifra, que antes solo salía pasando el mouse por encima. */
.metricas-cabecera { flex-wrap: wrap; }
.metricas-rango {
  min-height: 34px; padding: 4px 8px; font-size: 13px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-chico);
  background: var(--lienzo); color: var(--tinta);
}
.metrica-ayuda { margin: .45rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--tinta-3); }

/* Tu asistente: el contador del cuadro de instrucciones. Verde, ámbar al acercarse al
   tope y rojo al pasarse — ANTES de pulsar Guardar, no después. */
.contador { font-variant-numeric: tabular-nums; }
.contador.es-bien   { color: var(--marca); }
.contador.es-cerca  { color: var(--pendiente); font-weight: 600; }
.contador.es-pasado { color: var(--alerta); font-weight: 650; }

/* Inventario: el resumen de la vista previa y las tablas de productos.
   SIN ancho mínimo, a propósito: con uno, en el celular la columna del PRECIO quedaba
   fuera de la pantalla (medido a 390 px el 2026-09-13), y la vista previa existe
   justo para ver el precio como se va a guardar. Las columnas no se pegan porque
   `.tabla` ya les da separación; las cifras no se parten (`.tabla .num`). */
.previa-resumen { display: grid; gap: 2px; margin: 12px 0 10px; }
.tabla-datos th, .tabla-datos td { padding-right: 12px; }
.tabla-datos .alerta { color: var(--alerta); font-weight: 600; }

/* La barra de «no está enviando»: el motivo, en tinta normal para que se lea. */
.aviso-canal .aviso-canal-motivo { color: var(--tinta); }

/* Ajustes: lo que hace falta antes de dejar funcionando tu WhatsApp. */
.requisitos-conexion {
  padding: 10px 12px;
  border: 1px solid var(--linea); border-radius: var(--r);
  background: var(--lienzo-2);
  font-size: 13px;
}
.requisitos-conexion > * + * { margin-top: 8px; }
.requisitos-conexion > summary { cursor: pointer; font-weight: 600; color: var(--tinta); padding: 12px 0; }   /* dedo: ~20 px de alto a 44 */
.lista-requisitos { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; line-height: 1.5; color: var(--tinta-2); }
.lista-requisitos b { color: var(--tinta); }

/* Pie legal: la línea con los datos del comerciante. */
.pie-legal__datos { margin: 0; color: var(--tinta-2); }

/* Una insignia de alerta que se TOCA para ver el motivo. Antes el motivo vivía en un
   `title`, que en el celular no existe. Se ve igual que las demás insignias: solo
   gana cursor y foco visible. */
.insignia-tocable {
  border: 0; font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.6;
  cursor: pointer;
  /* Un dedo necesita más que los 22 px de alto de una insignia normal. */
  min-height: 32px; padding: 4px 10px;
}
.insignia-tocable:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* La cinta cuando el asistente está APAGADO (de la cuenta o de ese número). Antes
   decía «Bot activo, le está contestando al cliente» aunque estuviera apagado: la
   pregunta más importante de la bandeja respondida al revés. Ámbar, como la pausa:
   nadie le contesta al cliente salvo tú. */
.cinta-bot.bot-apagado { background: var(--pendiente-tenue); color: var(--pendiente); }
.cinta-bot.bot-apagado .cinta-punto { animation: none; opacity: .45; }
.cinta-bot.bot-desconocido .cinta-punto { animation: none; opacity: .45; }

/* ── Biblioteca de clientes, en «Negocios» (B4) ────────────────────────────────
   Una fila por cliente que se abre como ficha (<details>): en el celular se lee de un
   vistazo quién debe y quién está suspendido, y el detalle aparece al tocar. */
.biblioteca-nota { margin: 0; }
.biblioteca-controles { display: grid; gap: 10px; }
.cliente { border-bottom: 1px solid var(--linea); }
.lista-plana > li:last-child > .cliente { border-bottom: 0; }
.cliente-cabeza {
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 30px 12px 0;
  list-style: none; cursor: pointer;
}
.cliente-cabeza::-webkit-details-marker { display: none; }
.cliente-cabeza::after {
  content: "";
  position: absolute; right: 8px; top: 18px;
  width: 8px; height: 8px;
  border-right: 1.6px solid var(--tinta-3); border-bottom: 1.6px solid var(--tinta-3);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.cliente[open] > .cliente-cabeza::after { transform: rotate(-135deg); top: 22px; }
.cliente-cabeza:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--r-chico); }
.cliente-ficha { display: grid; gap: 10px; padding: 0 0 16px; }
.cliente-ficha select {
  min-height: 34px; padding: 4px 8px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-chico);
  background: var(--lienzo); color: var(--tinta);
}
@media (prefers-reduced-motion: reduce) {
  .cliente-cabeza::after { transition: none; }
}

/* ── «Día a día» y «De cada 100 que escribieron», en «Cómo va el asistente» ─────
   Las barras las dibuja web/js/graficas.js (SVG) con lo que calcula metricas-serie.js.
   Un día sin registros no tiene barra, y el tramo sin registros va sombreado y dicho
   con palabras: nunca una línea en cero. Solo tokens, así el tema oscuro las sigue. */
.dia-a-dia, .cada-cien { display: grid; gap: .6rem; min-width: 0; }
.dia-a-dia-cuerpo { display: grid; gap: .9rem; min-width: 0; }
.grafica {
  margin: 0; display: grid; gap: .45rem; min-width: 0;
  background: var(--lienzo); border: 1px solid var(--linea); border-radius: .7rem;
  padding: .9rem 1rem;
}
.grafica-titulo { font-size: .8rem; font-weight: 600; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .03em; }
.grafica-lienzo { min-width: 0; }
.grafica-svg { display: block; width: 100%; max-width: 100%; height: auto; touch-action: pan-y; }
.grafica-barra { fill: var(--marca); }
/* Un día que el rango corta (el primero, o hoy, que no ha terminado): más tenue, para que una barra
   corta no parezca un mal día (M12, prueba am1). */
.grafica-barra--a-medias { fill-opacity: .45; }
.grafica-cero { fill: var(--tinta-4); }
.grafica-guia { stroke: var(--linea); stroke-width: 1; shape-rendering: crispEdges; }
.grafica-base { stroke: var(--linea-fuerte); stroke-width: 1; shape-rendering: crispEdges; }
.grafica-tramo { fill: var(--linea); opacity: .7; }
.grafica-foco { fill: var(--marca-tenue); }
.grafica-texto { fill: var(--tinta-3); font-family: var(--sans); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafica-texto-tramo { font-style: italic; }
.grafica-sin-registros { font-size: .8rem; color: var(--tinta-3); }
.grafica-frase { font-size: .88rem; color: var(--tinta-2); min-height: 1.5em; }
.cada-cien-filas {
  display: grid; gap: .8rem;
  background: var(--lienzo); border: 1px solid var(--linea); border-radius: .7rem;
  padding: .9rem 1rem;
}
.cada-cien-fila { display: grid; gap: .3rem; }
.cada-cien-rotulos { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .15rem .8rem; font-size: .88rem; }
.cada-cien-etiqueta { color: var(--tinta); font-weight: 550; }
.cada-cien-cifra { color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.cada-cien-pista { display: block; height: 8px; border-radius: 4px; background: var(--lienzo-3); overflow: hidden; }
.cada-cien-relleno { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--marca); }

/* ── La bienvenida de 3 pasos, arriba de la lista de chats (T8) ─────────────────
   Una tarjeta, no un aviso: se lee y se usa, no interrumpe. El verde solo va donde
   el dato demuestra que el paso está hecho (bienvenida-pasos.js). */
.bienvenida {
  /* Se encoge y se recorre por dentro (B4, prueba tq1): sin esto aplastaba la lista de chats. */
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 10px 10px 2px;
  padding: 12px 14px;
  border: 1px solid var(--linea-fuerte);
  border-left: 3px solid var(--marca);
  border-radius: var(--r-grande);
  background: var(--lienzo);
  display: grid; gap: 10px;
}
.bienvenida[hidden] { display: none; }
.bienvenida.es-plegada { padding: 2px 4px; border-left-width: 1px; gap: 0; }
.bienvenida-volver { width: 100%; justify-content: flex-start; }
.bienvenida-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }   /* wrap: «0 de 4 listos · 1 esperando aprobación» a 320 px */
.bienvenida-cabecera h2 { font-size: 15px; }
.bienvenida-cuenta { flex: 0 0 auto; font-size: 12px; font-weight: 650; color: var(--marca); }
.bienvenida-bajada { font-size: 12.5px; line-height: 1.5; color: var(--tinta-2); }
.bienvenida-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bienvenida-paso { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.bienvenida-marca {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--linea-fuerte);
  font-size: 12px; font-weight: 700; color: var(--tinta-3);
}
.bienvenida-marca svg { width: 14px; height: 14px; }
.bienvenida-paso.es-hecho .bienvenida-marca { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.bienvenida-paso.es-bloqueado .bienvenida-marca,
.bienvenida-paso.es-esperando .bienvenida-marca { border-color: var(--pendiente); color: var(--pendiente); }
.bienvenida-paso-cuerpo { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.bienvenida-paso-titulo { font-size: 13.5px; font-weight: 650; }
.bienvenida-paso.es-hecho .bienvenida-paso-titulo { color: var(--tinta-2); }
.bienvenida-paso-cuerpo .btn { margin-top: 5px; white-space: normal; text-align: left; }
.bienvenida-pie { display: flex; justify-content: flex-end; }
.bienvenida-pie[data-para-todos] { display: grid; justify-content: stretch; gap: 4px; }
.bienvenida-pie[data-para-todos] ul { margin: 0; padding-left: 18px; }
/* Pantallas bajas: los pasos primero, para que el botón del primero se vea sin mover nada. La
   bajada pasa debajo y NO se esconde: es la que dice que el asistente es una IA (B4, prueba tq1). */
@media (max-height: 740px) {
  .bienvenida-bajada { order: 1; }
  .bienvenida-pie { order: 2; }
}

/* ── El aviso del plan (2026-09-09) ────────────────────────────────────────
   Dos niveles con dos colores porque significan dos cosas distintas, y el
   color es lo primero que se lee:
     · `pendiente` (ámbar) — «te estás acercando». Informa, no alarma.
     · `alerta`    (rojo)  — «tu bot NO está respondiendo ahora mismo».
   Se usan las variables que YA existen y que el tema oscuro redefine: un color
   escrito a mano aquí saldría ilegible en oscuro, que es el fallo que ya pasó
   una vez con las pantallas de entrada. */
.aviso-plan {
  margin: 0 0 1rem;
  padding: .75rem .9rem;
  border: 1px solid var(--pendiente);
  border-left-width: 3px;
  border-radius: var(--r);
  background: var(--pendiente-tenue);
  color: var(--tinta);
}
.aviso-plan strong { display: block; margin-bottom: .2rem; }
.aviso-plan p { margin: 0; font-size: .9rem; }
.aviso-plan-cortado {
  border-color: var(--alerta);
  background: var(--alerta-tenue);
}

/* El consumo del plan con su desglose por canal. Los tres canales se enseñan
   siempre, incluso en cero: un canal que desaparece cuando no tiene tráfico es
   un canal del que nadie puede sospechar que no se está contando. */
.consumo-plan { margin: 0 0 1rem; }
.consumo-plan-total { margin: 0 0 .4rem; font-size: .95rem; color: var(--tinta); }
.consumo-plan-canales { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-canal {
  padding: .2rem .55rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-size: .82rem;
  color: var(--tinta-2);
  background: var(--lienzo-2);
}
.chip-canal b { color: var(--tinta); }

/* P2 — lo que incluye el plan, con el consumo al lado. */
.limite { display: flex; align-items: baseline; gap: .6rem; padding: .35rem 0; }
.limite-etiqueta { flex: 1; }
.limite-cifra { font-variant-numeric: tabular-nums; font-weight: 600; }
/* Sin cupo se ve ANTES de chocar con el tope, no cuando ya falló la invitación. */
.limite--lleno .limite-cifra { color: var(--pendiente); }
.limite-aviso { font-size: .78rem; color: var(--pendiente); text-transform: uppercase; letter-spacing: .03em; }

/* P3 — la ayuda. Deliberadamente sobria: es para leerla, no para lucirla. */
.ayuda-bloque { margin: 1.75rem 0; max-width: 42rem; }
.ayuda-titulo { font-size: 1.02rem; margin: 0 0 .4rem; }
.ayuda-bloque p { margin: .4rem 0; line-height: 1.6; }
.ayuda-lista { margin: .5rem 0; padding-left: 1.2rem; }
.ayuda-lista li { margin: .3rem 0; line-height: 1.55; }

/* ---------------------------------------------------- el canal caido (W10) */
/* Barra fija arriba de todo. Se gana ese sitio porque mientras dure NO SALE NI
   UN MENSAJE: no es el aviso de una seccion, es que el producto no funciona.
   Usa los tokens de alerta que ya existen — no se inventa una paleta nueva. */
/* Sin red (prueba of1): informa, no alarma. Lo que no salió ya lo dice cada burbuja. */
.aviso-sin-conexion {
  margin: 0;
  background: var(--lienzo-2);
  color: var(--tinta);
  border-bottom: 1px solid var(--linea);
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}
.aviso-sin-conexion[hidden] { display: none; }

/* Te invitaron a otro negocio (prueba iv5): una invitación, no una alarma. */
.aviso-invitacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  background: var(--marca-tenue);
  color: var(--tinta);
  border-bottom: 1px solid var(--linea);
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1.45;
}
.aviso-invitacion[hidden] { display: none; }
.aviso-invitacion-texto { margin: 0; flex: 1 1 16rem; min-width: 0; }
.aviso-invitacion-acciones { display: flex; gap: 8px; flex-shrink: 0; }
.aviso-invitacion-motivo { margin: 0; flex-basis: 100%; color: var(--alerta); }
.aviso-invitacion-motivo[hidden] { display: none; }

.aviso-canal {
  background: var(--alerta-tenue);
  color: var(--alerta);
  border-bottom: 1px solid var(--alerta);
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.45;
}
.aviso-canal[hidden] { display: none; }
.aviso-canal strong { font-weight: 650; }
.aviso-canal .aviso-canal-desde { opacity: 0.85; }
/* La línea que se está reconectando (contrato de reconexión de A): un estado que espera, no un error. */
.aviso-canal.aviso-canal--reconectando { background: var(--pendiente-tenue); color: var(--pendiente); border-bottom-color: var(--pendiente); }

/* ---- Tu asistente: la pantalla de configuracion del bot ---- */

/* Cada tono enseña la frase EXACTA que se le manda al modelo. Sin eso, "cercano" y
   "neutral" son dos palabras y hay que probarlas para ver en que se diferencian. */
.opcion-tono {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "radio nombre" "radio frase";
  gap: 2px 10px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  cursor: pointer;
}
.opcion-tono:hover { border-color: var(--linea-fuerte, var(--linea)); }
.opcion-tono.elegida { border-color: var(--marca); background: var(--marca-tenue); }
.opcion-tono input { grid-area: radio; margin-top: 3px; }
.opcion-tono-nombre { grid-area: nombre; font-weight: 600; }
.opcion-tono-frase { grid-area: frase; line-height: 1.45; }

.campo-texto-largo {
  width: 100%;
  font: inherit;
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--lienzo);
  color: inherit;
  resize: vertical;
}
.campo-corto { max-width: 7rem; }
.fila-inline { display: flex; align-items: center; gap: 8px; }
/* El reporte del dueño (reporte-del-dueno.js): una línea por párrafo, legible a 360 px. */
.reporte-linea { margin: 0 0 .4rem; line-height: 1.45; overflow-wrap: anywhere; }
/* La vista previa del aviso de venta (Ajustes, prueba aw1): el texto tal cual llega a Telegram. */
.aviso-vista-previa { margin: 0; padding: 12px; border-radius: 8px; background: var(--papel); color: var(--tinta);
  font-family: var(--sans); font-size: .85rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.fila-botones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.fila-editable { display: flex; gap: 8px; align-items: center; }
.fila-editable .campo-texto { flex: 1; min-width: 0; }

/* ================================================ CONFIGURACION DEL NEGOCIO ===
   La pantalla donde el dueño contesta lo que su asistente necesita para vender
   (web/js/configurar-negocio.js). Los dos niveles de revisión —el dueño: "validar
   tonterías... pero sin camisa de fuerza"— tienen que verse distintos de verdad:
   el error usa el mismo rojo que el resto de la app, la duda el mismo ámbar. */

/* El resumen por grupo, arriba de las tarjetas: cuánto le falta a cada uno.
   Gris mientras falta, verde cuando está completo, rojo cuando queda algo
   IMPOSIBLE sin corregir (no solo raro). */
.cn-resumen { display: grid; gap: 2px; }
.cn-resumen-fila {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--linea);
}
.cn-resumen-fila:last-child { border-bottom: 0; }
.cn-resumen-nombre { font-size: 13px; }
.cn-resumen-cifra { font-size: 12.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.cn-resumen-fila--listo .cn-resumen-cifra { color: var(--marca); font-weight: 600; }
.cn-resumen-fila--error .cn-resumen-cifra { color: var(--alerta); font-weight: 600; }

/* LAS 10 PREGUNTAS NECESARIAS (lo-necesario-pantalla.js), arriba de Configuración. Cada
   pregunta con su casilla y, debajo, lo que dijo el servidor de ELLA: verde si se guardó,
   rojo si volvió rechazada, ámbar si no hubo noticia. Solo colores del tema. */
.ln-tarjeta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
/* Un enlace largo en una respuesta no puede ensanchar la tarjeta ni la pantalla (360 px; anywhere, no break-word: break-word no baja el mínimo). */
.ln-tarjeta, .bienvenida { overflow-wrap: anywhere; }
/* «Dejar el asistente funcionando en tu WhatsApp» mide ~310 px y .btn no parte texto: a 360 px ensanchaba todo Ajustes. */
.hoja .pila-8 > .btn, .canal-tarjeta .btn { white-space: normal; text-align: center; }
.ln-botones .enlace-plano { min-height: 44px; padding: 0 6px; }
.ln-quitar { min-width: 44px; }
.ln-frase { margin: 0; }
.ln-pregunta { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--linea); }
.ln-enunciado { margin: 0; font-weight: 600; white-space: pre-line; }
.ln-casilla, .ln-mensajes textarea { width: 100%; box-sizing: border-box; }
.ln-mensajes { display: grid; gap: 6px; }
.ln-marcas, .ln-opciones { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.ln-marca, .ln-opcion { display: inline-flex; align-items: center; gap: 6px; }
.ln-aviso { color: var(--pendiente); }
.ln-estado { margin: 0; }
.ln-estado--guardada { color: var(--marca); }
.ln-estado--rechazada { color: var(--alerta); }
.ln-estado--sin-noticia { color: var(--pendiente); }
/* Una pregunta por pantalla (pasada de simplicidad, 23-sep): el paso, los botones en fila y
   la pantalla del final. «Más opciones» y «Más datos»: lo avanzado, plegado. */
.ln-paso { margin: 0; }
.ln-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.ln-final { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--linea); }
.mas-opciones { margin-top: 18px; }
.mas-opciones > summary, .mas-datos > summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
.mas-opciones[open] > summary { margin-bottom: 8px; }
.mas-datos { margin-top: 8px; }
/* Las filas (servicios, citas, criterios…): cada fila son casillas, con su ✕ (prueba ln3). */
.ln-filas { display: grid; gap: 10px; }
.ln-fila { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--linea); border-radius: var(--r); position: relative; }
.ln-campo { display: grid; gap: 3px; }
.ln-campo input, .ln-campo select { width: 100%; box-sizing: border-box; }
.ln-quitar { justify-self: end; }
@media (pointer: coarse) { .ln-campo input, .ln-campo select { min-height: 44px; } }
/* «Planes y módulos» en una línea que se abre (prueba ps1). */
.planes-resumen { cursor: pointer; font-weight: 600; padding: 4px 0; }
.planes-plegados[open] > .planes-resumen { margin-bottom: 10px; }
@media (pointer: coarse) {
  .ln-casilla, .ln-marca input, .ln-opcion input { min-height: 44px; }
}

/* Los campos de cada grupo: dos por fila en pantallas anchas, una por fila en el
   celular (mismo punto de corte que `.rejilla-2`, que es lo que ya reparte las
   columnas). Los 44px de aquí son solo para ESTA pantalla — no se tocan los
   controles de las demás. */
@media (pointer: coarse) {
  .cn-campos input, .cn-campos select { min-height: 44px; }
}

/* error → bloquea de verdad; duda → se guarda igual, pero se pregunta. */
.campo--error input, .campo--error select { border-color: var(--alerta); background: var(--alerta-tenue); }
.campo--duda input, .campo--duda select { border-color: var(--pendiente); background: var(--pendiente-tenue); }
.campo-mensaje { margin: 0; font-size: 12px; }
.campo-mensaje--error { color: var(--alerta); }
.campo-mensaje--duda { color: var(--pendiente); }

/* ---- Inventario: encontrar UNO entre cuatrocientos ----
   [MEDIDO 18-sep en Chrome] 388 productos pintan en 794 ms y 3 en 811: el numero de filas
   no se nota. Lo que faltaba no era velocidad, era poder buscar. */
.inv-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 12px 0 14px;
}
/* El buscador manda y se lleva el sitio que sobra; los filtros se acomodan al lado y
   bajan solos en el celular. */
.inv-buscador { flex: 1 1 260px; min-width: 0; }
.inv-buscador input {
  /* 16 px o mas: por debajo, Safari en iPhone hace zoom solo al tocar la casilla. */
  font-size: 16px;
  min-height: 42px;
}
.inv-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
/* El selector de categoría (inv2): ancho completo en el celular, 16 px para que Safari no haga zoom. */
.inv-categoria { flex: 1 1 200px; min-width: 0; }
/* El motivo por el que el asistente no vende un producto (inv4): su propia línea bajo el nombre. */
/* Varios a la vez (lot1): la barra sobre la tabla; a 360 px los botones bajan solos. */
.inv-lote { margin: 0 0 12px; display: grid; gap: 8px; }
.inv-lote-cuenta { margin: 0; font-weight: 600; }
.inv-lote-confirmar { margin: 0; }
.inv-lote-todos { margin: 0; }
.inv-sel { margin-right: 8px; vertical-align: middle; min-width: 20px; min-height: 20px; }
/* La pantalla «Hoy» (hoy1): tres tarjetas con su número grande y su botón; en el celular, una debajo de otra. */
.hoy-tarjetas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.hoy-tarjeta { display: grid; gap: 6px; align-content: start; }
.hoy-titulo { margin: 0; font-size: 1rem; }
.hoy-numero { margin: 0; font-size: 2.4rem; font-weight: 700; line-height: 1.1; }
.hoy-linea { margin: 8px 0 0; }
/* La ficha del pedido fácil (ped1): pasos en fila, el que sigue con un botón grande; el WhatsApp del cliente al lado. */
.pedido-arriba { display: grid; gap: 8px; }
.pedido-pasos { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pedido-paso { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea-fuerte); color: var(--tinta-3); }
.pedido-paso.hecho { color: var(--tinta-2); }
.pedido-paso.actual { font-weight: 700; color: var(--marca); border-color: var(--marca); }
.pedido-paso-boton { width: 100%; min-height: 52px; font-size: 1.05rem; margin-bottom: 8px; }
.pedido-whatsapp { width: 100%; min-height: 48px; }
.pedido-pasos-titulo { margin: 12px 0 6px; font-size: .95rem; }
.inv-motivo { display: block; margin-top: 2px; color: var(--pendiente); }
.inv-categoria select { width: 100%; font-size: 16px; min-height: 42px; }

/* LO QUE PIDE ACCION, y solo eso. Un producto sin precio es el unico que el asistente no
   puede cerrar: se pinta distinto del «no lo se» de las existencias, que no impide vender. */
.inv-ojo { color: var(--pendiente); font-weight: 600; }
/* El precio por par, debajo del de unidad: el bot lo cotiza, asi que el dueño lo ve. */
.inv-par { display: block; font-weight: 400; margin-top: 2px; }
/* La segunda linea de la fila: la referencia y, si hay que encargarlo, su insignia. */
.inv-abajo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.inv-abajo .sku { margin: 0; }
.inv-fila-sin-precio td:first-child { box-shadow: inset 3px 0 0 var(--pendiente); padding-left: 13px; }
.inv-fila-agotado td:first-child { box-shadow: inset 3px 0 0 var(--alerta); padding-left: 13px; }

/* Subir la lista se hace una vez al mes; mirar los productos, todos los dias. */
.inv-importar { margin-top: 18px; }
.inv-importar > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 10px 0;
}
.inv-importar[open] > summary { margin-bottom: 4px; }

/* FUERA EL 20-sep-2026 con la seccion «Por donde te avisamos» y los pasos numerados
   que explicaban como crear un bot de Telegram: `.avisos-negocio` (+3 descendientes) y
   `.lista-numerada` (+1). Cero usos en todo web/ despues de quitar esa tarjeta de
   ajustes.js. CSS que nadie aplica se descarga igual y ademas miente sobre lo que la app
   sabe pintar. Si el interruptor de avisos vuelve (ver `avisos-de-telegram.js` en
   prueba portero-modulos-huerfanos), sera una casilla suelta y no necesita esto. */

/* Los avisos de la configuracion: contestado, valido, y aun asi deja una regla
   apagada. Van arriba y en ambar — el rojo es para lo que impide guardar, y esto no
   lo impide: se puede tener de verdad una tarifa que hoy no se usa. */
.cn-avisos { display: grid; gap: 8px; margin: 4px 0 16px; }
.cn-aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--pendiente);
  background: var(--pendiente-tenue);
  color: var(--tinta);
  font-size: .92rem;
  line-height: 1.45;
}
.cn-aviso-marca {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pendiente);
  color: var(--sobre-marca);
  font-weight: 700; font-size: 12px;
  margin-top: 1px;
}

/* ---- La presentacion en la pantalla de entrada ----
   Tres frases y tres puntos. No es una landing: es lo minimo para que alguien que
   nunca ha visto esto entienda que es antes de que se le pida el correo. */
.entrar-bajada {
  margin: 0 0 18px;
  color: var(--tinta-2);
  line-height: 1.55;
}
.entrar-puntos {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: .94rem;
  line-height: 1.5;
}
.entrar-puntos li {
  padding-left: 18px;
  position: relative;
  color: var(--tinta-2);
}
.entrar-puntos li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--marca);
}
.entrar-puntos b { color: var(--tinta); font-weight: 600; }


/* ================= LA LANDING =================
   Lo primero que ve alguien que llega por un enlace. Corta a proposito: lo justo
   para decidir si esto sirve, no un folleto. */

/* EL FONDO. El dueño: "muy negro, muy estatico, me gustaria que se viera algo mas
   bonito".

   Se resuelve con DOS resplandores muy suaves en las esquinas superiores, del verde de
   la marca, sobre el fondo del tema. No es una imagen ni una animacion: son dos
   gradientes radiales, o sea cero peticiones de red y cero coste de bateria.

   Por que resplandores y no un degradado de arriba abajo: un degradado plano se lee
   como "plantilla". Dos focos descentrados dan profundidad y dejan el centro limpio,
   que es donde va el texto — el titular tiene que seguir siendo lo que se ve primero.

   Intensidad al 7% y 5%: se nota que el fondo respira, sin que se convierta en el
   protagonista. Si sube mas, compite con el boton. */
/* LA LANDING SE VE IGUAL EN TODOS LADOS, y es una decision, no un descuido.
   El dueño: "en el celular me entra con colores diferentes que en el computador,
   esta un poquito raro". Pasaba porque heredaba el tema del visitante: claro en el
   movil, oscuro en el PC.
   Una pagina de venta que cambia de aspecto segun el telefono de quien la abre no se
   puede enviar a un cliente sin saber que va a ver. Los colores se fijan aqui, sin
   depender de tokens que cambian con el tema. La APLICACION (tras el login) si sigue
   el tema del usuario: ahi se trabaja horas y manda su comodidad. */
.inicio {
  min-height: 100dvh;
  --l-fondo: #0E1116;
  --l-superficie: #151A21;
  --l-linea: #232A33;
  --l-texto: #EEF1F4;
  --l-suave: #A8B0BA;
  --l-acento: #34C794;
  color: var(--l-texto);
  background:
    radial-gradient(ellipse 70% 50% at 15% -5%, rgba(52, 199, 148, .10), transparent 60%),
    radial-gradient(ellipse 60% 45% at 85% 0%, rgba(52, 199, 148, .07), transparent 60%),
    var(--l-fondo);
}
.inicio .btn-chico {
  background: transparent;
  border: 1px solid var(--l-linea);
  color: var(--l-texto);
}
.inicio .btn-chico:hover { border-color: var(--l-acento); }
.inicio .btn-primario { background: var(--l-acento); color: #06231A; border: none; }
.inicio .btn-primario:hover { filter: brightness(1.06); }

/* Una linea de luz bajo la barra: separa sin dibujar un borde duro. */
.inicio-barra {
  position: relative;
}
.inicio-barra::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(52, 199, 148, .35) 30%, rgba(52, 199, 148, .35) 70%, transparent);
}

/* Las tarjetas dejan de ser cajas planas: un punto de luz arriba a la izquierda las
   levanta del fondo. Sutil a proposito — se nota al mirarlas, no antes. */
.inicio-bloques article {
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(52, 199, 148, .045), transparent 70%),
    var(--l-superficie);
  transition: border-color .18s ease, transform .18s ease;
}
.inicio-bloques article:hover {
  border-color: rgba(52, 199, 148, .35);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .inicio-bloques article { transition: none; }
  .inicio-bloques article:hover { transform: none; }
}

/* La etiqueta de "En camino": dice la verdad sin apagar el bloque. */
.etiqueta-pronto {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  color: #E0A458;
  background: rgba(224, 164, 88, .12);
  border: 1px solid rgba(224, 164, 88, .28);
  vertical-align: middle;
  margin-left: 4px;
}
.inicio-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  max-width: 1040px;
  margin: 0 auto;
  border-bottom: 1px solid var(--l-linea);
}

.inicio-hero {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px 48px;
  text-align: center;
}
.inicio-hero h1 {
  font-size: clamp(1.9rem, 5.5vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 18px;
  text-wrap: balance;
}
.inicio-bajada {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--l-suave);
  margin: 0 auto 28px;
  max-width: 56ch;
}
.btn-grande { padding: 12px 30px; font-size: 1rem; }
.inicio-nota {
  margin: 14px 0 0;
  font-size: .87rem;
  color: var(--l-suave);
}

/* Rejilla que se apila sola en el celular: sin media query, la columna minima manda. */
.inicio-bloques {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.inicio-bloques article {
  border: 1px solid var(--l-linea);
  border-radius: 12px;
  padding: 22px;
  /* SIN `background` AQUI, A PROPOSITO. Habia un `var(--fondo-suave, transparent)`
     que pisaba la regla de mas arriba —misma especificidad, esta va despues— y
     dejaba las tarjetas TRANSPARENTES en produccion: `--fondo-suave` no existe en
     ninguna parte, asi que siempre caia en el respaldo. Medido en la pagina viva:
     rgba(0, 0, 0, 0) y background-image: none.
     El fondo de estas tarjetas lo pone la regla de arriba, con --l-superficie. */
}
.inicio-bloques h2 {
  font-size: 1.06rem;
  margin: 0 0 9px;
  line-height: 1.3;
}
.inicio-bloques p {
  margin: 0;
  font-size: .94rem;
  line-height: 1.55;
  color: var(--l-suave);
}

/* El bloque honesto. Va con el mismo peso visual que lo demas, no escondido al final
   en letra chica: decir que falta antes de la primera reunion es parte de la oferta. */
.inicio-honesto {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px 56px;
}
.inicio-honesto h2 { font-size: 1.25rem; margin: 0 0 6px; }
.inicio-honesto > p { color: var(--l-suave); margin: 0 0 16px; font-size: .94rem; }
.inicio-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.inicio-lista li {
  position: relative;
  padding-left: 18px;
  font-size: .94rem;
  line-height: 1.55;
  color: var(--l-suave);
}
.inicio-lista li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--l-acento);
}
.inicio-lista b { color: var(--l-texto); }

.inicio-pie {
  border-top: 1px solid var(--l-linea);
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px;
  font-size: .85rem;
  color: var(--l-suave);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.inicio-pie p { margin: 0; }
.inicio-legal-enlaces { display: flex; gap: 16px; }
.inicio-legal-enlaces a { color: inherit; }


/* ---- Pedir la cuenta: el formulario de la landing ----
   LA LANDING ES OSCURA A LA FIJA (ver el bloque .inicio), asi que las casillas no
   pueden heredar los tokens del tema del visitante: en un computador con tema claro
   saldrian cajas blancas sobre fondo negro. Todo lo de aqui se pinta con la paleta
   --l-* de la landing, incluidos el rojo y el ambar de los avisos. */
.inicio-solicitud {
  max-width: 1040px;
  margin: 0 auto;
  padding: 8px 24px 40px;
}
.inicio-solicitud h2 { font-size: 1.5rem; margin: 0 0 8px; }
/* `margin: 0 auto` viene del hero, donde todo va centrado. Aqui el titulo esta a la
   izquierda, asi que la bajada centrada quedaba flotando a media pagina — se ve en la
   captura aunque ninguna prueba lo note. */
.inicio-solicitud .inicio-bajada { margin: 0 0 20px; }
/* Dos columnas cuando hay sitio y una cuando no. `minmax(0, 1fr)` y no `1fr`: con
   `1fr` una pista no baja del ancho de su contenido y una ayuda larga ensancha la
   columna hasta sacar la pagina de la pantalla. */
.solicitud-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px 20px;
  margin-bottom: 18px;
}
.inicio-solicitud .campo > label {
  color: var(--l-texto);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.inicio-solicitud .campo input {
  background: var(--l-superficie);
  border: 1px solid var(--l-linea);
  color: var(--l-texto);
  /* 16 px o mas: por debajo de eso Safari en iPhone hace zoom solo al tocar la
     casilla y deja la pagina descuadrada (el mismo motivo que en mv1). */
  font-size: 16px;
  min-height: 44px;
}
.inicio-solicitud .campo input:focus {
  border-color: var(--l-acento);
  outline: 2px solid rgba(52, 199, 148, .35);
  outline-offset: 1px;
}
.inicio-solicitud .campo input::placeholder { color: var(--l-suave); }
.inicio-solicitud .campo-pista { color: var(--l-suave); }
.campo-opcional {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--l-suave);
  border: 1px solid var(--l-linea);
  border-radius: 999px;
  padding: 1px 7px;
}
/* El rojo y el ambar de la landing: fijos, por lo mismo que el resto. */
.inicio-solicitud .campo--error input { border-color: #F2767B; background: #2A1416; }
.inicio-solicitud .campo--duda input { border-color: #E0A458; background: #2A2013; }
.inicio-solicitud .campo-mensaje--error { color: #F2767B; }
.inicio-solicitud .campo-mensaje--duda { color: #E0A458; }

/* El permiso de datos: la casilla arriba del todo de su linea, no centrada, porque el
   texto puede ocupar dos renglones y una casilla a media altura se ve suelta. */
.campo-permiso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9rem;
  color: var(--l-suave);
  line-height: 1.5;
  cursor: pointer;
  margin-bottom: 18px;
}
.campo-permiso input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--l-acento);
  cursor: pointer;
}
.campo-permiso a { color: var(--l-acento); }

.solicitud-accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
/* La linea de estado no empuja nada al aparecer y desaparecer: ocupa su sitio desde
   el principio. Un boton que se mueve cuando cambia el texto de al lado se falla. */
#solicitud-estado { margin: 0; min-height: 1.2em; }
#solicitud-aviso { margin: 14px 0 0; }


/* ---- La ranura de solicitudes y sus tickets ----
   El estado se lee de un vistazo por color; el texto solo confirma. */
.ticket {
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 14px 16px;
  display: grid;
  gap: 8px;
}
.ticket-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ticket-texto {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.5;
  font-size: .94rem;
}
/* La respuesta va indentada y con una linea al lado: se distingue de lo que escribio
   el cliente sin necesidad de poner "respuesta:" delante. */
.ticket-respuesta {
  border-left: 2px solid var(--marca);
  padding: 2px 0 2px 12px;
  margin-left: 4px;
  display: grid;
  gap: 2px;
}
.ticket-respuesta p { margin: 0; line-height: 1.5; }
.ticket-estado-abierto { color: var(--sobre-marca); background: var(--marca); }
.ticket-estado-en_curso { color: #9A5B0B; background: #FBF0DC; }
.ticket-estado-resuelto { color: #1a6b4a; background: #e3f2ea; }
.ticket-estado-descartado { color: var(--tinta-2); background: var(--lienzo-3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .ticket-estado-en_curso { color: #E0A458; background: #33270F; }
  :root:not([data-tema="claro"]) .ticket-estado-resuelto { color: #74C69D; background: #163024; }
}


/* ---- El ciclo: de un desconocido a una venta cerrada ----
   Va numerado porque SI es una secuencia: cada paso depende del anterior. Eso es lo
   que separa un proceso completo de una lista de funciones sueltas. */
.inicio-antetitulo {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--l-acento);
  margin: 0 0 14px;
}
.inicio-ciclo {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px 56px;
}
.inicio-ciclo-titulo {
  font-size: clamp(1.35rem, 3.2vw, 1.8rem);
  text-align: center;
  margin: 0 0 32px;
  letter-spacing: -.01em;
}
.ciclo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}
.ciclo li {
  position: relative;
  padding: 20px 18px 18px;
  border: 1px solid var(--l-linea);
  border-radius: 12px;
  background: var(--l-superficie);
  margin: 0;
}
.ciclo-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--l-acento);
  color: #06231A;
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.ciclo h3 {
  font-size: 1rem;
  margin: 0 0 7px;
  line-height: 1.3;
  color: var(--l-texto);
}
.ciclo p {
  margin: 0;
  font-size: .89rem;
  line-height: 1.5;
  color: var(--l-suave);
}

/* El cierre: una sola pregunta y un solo boton. Es el punto donde se decide. */
.inicio-cierre {
  max-width: 620px;
  margin: 0 auto;
  padding: 8px 24px 56px;
  text-align: center;
}
.inicio-cierre h2 { font-size: 1.5rem; margin: 0 0 12px; letter-spacing: -.01em; }
.inicio-cierre p { color: var(--l-suave); margin: 0 auto 22px; line-height: 1.6; }

.inicio-honesto h2, .inicio-bloques h2 { color: var(--l-texto); }

/* ---- Qué hacemos: los 7 servicios (25-sep-2026, prueba qh1) ----
   Tarjetas como las del ciclo, pero SIN número: aquí no hay secuencia, se toma uno o
   varios. Una raya de acento arriba las distingue del ciclo sin ruido. Son 7: con una
   rejilla la última fila quedaba coja a la izquierda (4 + 3, MEDIDO en Chrome a 1280 px);
   con flex centrado queda 4 + 3 al medio. Hasta 620 px (corte declarado en prueba mv1), una
   por fila a todo lo ancho. */
.inicio-servicios {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px 56px;
  text-align: center;
}
.inicio-servicios .inicio-ciclo-titulo { margin-bottom: 10px; }
.servicios {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  text-align: left;
}
/* `>`: la tarjeta es el hijo DIRECTO. Con `.servicios li` a secas, las viñetas de dentro de una
   tarjeta («Tu equipo de IA», los servicios con su alcance) salían cada una como otra tarjeta
   (visto en Chrome, 26-sep; prueba tei1). */
.servicios > li {
  flex: 0 1 236px;
  margin: 0;
  padding: 20px 18px 18px;
  border: 1px solid var(--l-linea);
  border-top: 2px solid var(--l-acento);
  border-radius: 12px;
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(52, 199, 148, .045), transparent 70%),
    var(--l-superficie);
  transition: border-color .18s ease, transform .18s ease;
}
.servicios > li:hover { border-color: rgba(52, 199, 148, .35); transform: translateY(-2px); }
@media (max-width: 620px) { .servicios > li { flex-basis: 100%; } }
/* «TODO EN UNO» (248): una sola tarjeta, con 5 viñetas. A 236 px quedaría una columna larga; se abre hasta 560 y
   en el celular se encoge sola (flex-shrink). */
.servicios--uno > li { flex-basis: 560px; }
/* Donde caben DOS y no tres (621-787 px: el contenido mide el ancho menos 48, y tres piden 740), las dos
   llenan la fila en vez de quedarse en 236 con un hueco a cada lado. La última, sola, mide lo mismo y va
   centrada. Visto en Chrome a 768 (26-sep, capturas para el dueño). */
@media (min-width: 621px) and (max-width: 787px) { .servicios > li { flex-basis: calc(50% - 8px); } }
@media (prefers-reduced-motion: reduce) {
  .servicios > li { transition: none; }
  .servicios > li:hover { transform: none; }
}
.servicios h3 {
  font-size: 1rem;
  margin: 0 0 7px;
  line-height: 1.3;
  color: var(--l-texto);
}
.servicios p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--l-suave);
}
/* Las viñetas dentro de una tarjeta: una lista corta, con su guion, y el botón al pie. */
.servicios .vinetas { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 7px; }
.servicios .vinetas li { position: relative; padding-left: 14px; font-size: .88rem; line-height: 1.45; color: var(--l-suave); }
.servicios .vinetas li::before { content: '–'; position: absolute; left: 0; color: var(--l-acento); }
.servicios > li { display: flex; flex-direction: column; }
.servicios > li .btn { margin-top: auto; align-self: flex-start; text-decoration: none; }
.inicio-servicios-accion { margin: 0; }
.inicio-servicios-accion .btn { text-decoration: none; display: inline-block; }


/* ---------------------------------------------------- la hoja "Más" del celular
   Lo que no cabe en la barra de abajo. Solo existe en celular: en escritorio el
   menu completo esta arriba y esta hoja nunca se muestra.

   Se dibuja con los tokens del tema (no con colores fijos) porque esto es parte de
   la APLICACION, y ahi manda la comodidad de quien trabaja horas. La landing es lo
   contrario: colores fijos, porque se le manda a un desconocido. */
.hoja-mas { position: fixed; inset: 0; z-index: 60; }
.hoja-mas[hidden] { display: none; }
@media (min-width: 820px) { .hoja-mas { display: none; } }

.hoja-mas-fondo {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .45);
}
.hoja-mas-panel {
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--alto-nav-movil) + env(safe-area-inset-bottom));
  background: var(--lienzo);
  border-top: 1px solid var(--linea);
  border-radius: 14px 14px 0 0;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  display: grid; gap: 2px;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .18);
}
.hoja-mas-enlace,
.hoja-mas-cerrar {
  display: block; width: 100%;
  padding: 15px 14px;
  border: none; background: none;
  color: var(--tinta); font: inherit; font-size: 1rem; text-align: left;
  text-decoration: none; border-radius: 10px;
  /* 15px arriba y abajo dejan el area de toque por encima de 44px, que es el
     minimo con el que un dedo acierta sin pelearse. */
}
.hoja-mas-enlace[hidden] { display: none; }
.hoja-mas-enlace:hover,
.hoja-mas-cerrar:hover { background: var(--lienzo-3); }
.hoja-mas-enlace[aria-current="page"] { color: var(--marca); font-weight: 600; }
.hoja-mas-cerrar {
  margin-top: 4px; border-top: 1px solid var(--linea);
  border-radius: 0 0 10px 10px; color: var(--tinta-2); text-align: center;
}

/* Los enlaces de la capa de condiciones TIENEN QUE PARECER ENLACES.

   El dueño, viendo la pantalla: "esa ventana me encantó se ve pro, PEROOOO...
   debería poder ir con alguna forma link o texto a leer esos términos".

   Y los enlaces YA estaban ahí, apuntando a /legal/terminos y /legal/datos (que
   responden 200, comprobado). Lo que fallaba es que se veian igual que el texto
   de alrededor: sin color y sin subrayado. Un enlace que no se distingue del
   texto no existe para quien lo mira — y aqui eso significa pedirle a alguien que
   acepte unas condiciones sin darle forma de leerlas. */
.capa-terminos a {
  color: var(--marca);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.capa-terminos a:hover { color: var(--marca-fuerte); }

/* El aviso de que la bandeja viene cortada. Discreto a proposito: informa, no
   alarma — la situacion es normal, lo que no seria normal es callarla. */

/* ------------------------------------------ EL ZOOM RARO DEL CELULAR (iOS)
   El dueño: "en los celulares se hace un zoom raro y a la vez se quita el zoom".

   No es un fallo de diseño: es una regla de Safari en iOS. Cuando se enfoca un
   campo con letra de MENOS de 16px, el sistema hace zoom para que se lea — y al
   salir del campo lo deshace. Entrar y salir de la caja de respuesta produce
   exactamente ese vaivén.

   Medido aquí: los campos estaban a 13 y 13.5px. Basta con subirlos a 16px EN
   PANTALLA PEQUEÑA. En escritorio se quedan como estaban: ahí 13.5px es el
   tamaño correcto para la densidad de la interfaz, y subirlo la afearía sin
   arreglar nada, porque en escritorio no existe ese zoom.

   16px no es un número elegido a ojo: es el umbral exacto de la regla de iOS. */
@media (max-width: 819px) {
  .campo input,
  .campo select,
  .campo textarea,
  .campo-compacto input,
  .campo-compacto select,
  .buscador input,
  #texto-respuesta,
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* Dos selectores con clase propia le ganan al `select` de arriba por especificidad y
   devolvían el zoom de iOS (encontrado por la revisión del 2026-09-13): el rango de
   Métricas y el selector de cobro de Negocios. Van aparte y DESPUÉS del bloque de
   arriba, que es el que vigila prueba mv1. */
@media (max-width: 819px) {
  .metricas-rango,
  .miembro-acciones select {
    font-size: 16px;
  }
}

/* --------------------------- LA BARRA DE ABAJO SE VE SIEMPRE, TAMBIEN EN EL CHAT
   Aqui vivia la regla contraria: dentro de una conversacion se escondia la barra
   (Bandeja · Inventario · Metricas · Mas) para ganar 116 px de pantalla. El dueño la
   revoco el 15-sep-2026, textual: «deberian aparecer en todo momento para uno poder
   pasar del chat a las metricas, a los ajustes y demas».

   Asi que NO hay ninguna regla aqui: la barra se queda con su "display: flex" de
   ≤819px y el relleno que el cuadro de respuesta le paga (--alto-nav-movil) vuelve a
   hacer falta siempre — ese relleno vive en el bloque de ≤819px de mas arriba, junto a
   ".responder" y ".responder-aviso", y MEDIDO a 390 px con el chat abierto deja el
   boton de enviar en 738-776 y la barra empezando en 786: no la toca.

   Si alguien vuelve a esconderla, tiene que devolver tambien ese relleno, o la barra
   se come el boton de enviar. Lo vigila prueba mv1-el-celular-no-hace-zoom-solo. */

/* El nombre del cliente, que ahora ES el acceso a su ficha.

   Se dibuja como texto, no como botón: si pareciera un botón volveríamos justo al
   ruido que se quitó. Lo que dice que es tocable es el chevron y que responda al
   pasar por encima — suficiente, y no grita. */
.hilo-quien {
  border: none; background: none; padding: 4px 6px; margin: -4px -6px;
  border-radius: 8px; text-align: left; font: inherit; color: inherit;
  cursor: pointer;
  grid-template-columns: 1fr auto; align-items: center; column-gap: 8px;
}
.hilo-quien:hover { background: var(--lienzo-3); }
.hilo-quien .hilo-nombre, .hilo-quien .hilo-meta { grid-column: 1; }
.hilo-chevron {
  grid-column: 2; grid-row: 1 / span 2;
  width: 14px; height: 14px; color: var(--tinta-3); flex: 0 0 auto;
}
/* El chevron se queda EN TODOS LOS ANCHOS. Antes se escondia en escritorio porque
   alli la ficha ya estaba a la vista y el nombre no abria nada; ahora la ficha
   empieza plegada tambien en escritorio, asi que el chevron dice la verdad. */

/* El camino a lo que se cae del tope de 300. Va al pie de la lista, con aire, porque es
   un final de camino y no un control mas de la cabecera. */
.bandeja-mas-antiguas { padding: 10px 12px 16px; display: grid; gap: 6px; justify-items: center; }
.bandeja-mas-antiguas[hidden] { display: none; }
/* ~~.bandeja-corte, .bandeja-cifras, .bandeja-espera y .cifras-linea~~: quitadas el 26-sep con
   lo que pintaban (El dueño: la bandeja «lo más sobria y sencilla posible»). */


/* Las etiquetas que pone el bot. Distinguidas por color porque significan cosas
   muy distintas: una dice que hay plata hecha y la otra que hay plata posible.

   "Compró" en verde de marca, "Caliente" en el ámbar de lo pendiente, y el número
   de pedido en gris porque es un dato, no un estado. */
.conv-etiqueta.es-compro {
  color: var(--marca); background: var(--marca-tenue); font-weight: 600;
}
.conv-etiqueta.es-caliente {
  color: var(--pendiente); background: var(--pendiente-tenue); font-weight: 600;
}
.conv-etiqueta.es-pedido {
  color: var(--tinta-2); background: var(--lienzo-3);
}

/* EN QUÉ VA EL CLIENTE (248, punto 6; estado-del-cliente.js, prueba edc1), con su bandera. Los colores son los de siempre
   para lo mismo: Interesado en el ámbar de «Caliente», Compró en el verde de «Compró»; Cotizó en verde sin fondo (plata
   posible, no hecha); Nuevo y No quiere, apagados pero legibles (--tinta-2, nunca --tinta-4: son texto necesario).
   Ninguna en rojo: el rojo de «Necesita atención» tiene que seguir siendo lo único que salta. */
.conv-etiqueta.es-etapa { font-weight: 600; }
/* «Copiar número» y «Escribirle por WhatsApp» en la ficha (paso 250). */
.ficha-numero-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* «RESPUESTAS RÁPIDAS» (paso 252; respuestas-rapidas-pantalla.js y bandeja.js). En Ajustes, cada una en su fila con subir y
   bajar a la derecha; en el chat, una lista de botones como la del producto, con un icono si lleva foto. */
.respuestas-lista { display: grid; gap: 6px; }
.respuesta-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.respuesta-fila-cuerpo { display: grid; gap: 2px; min-width: 0; }
.respuesta-fila-orden { display: flex; gap: 4px; flex: 0 0 auto; }
.respuesta-ficha { margin-top: 10px; }
.respuesta-foto { display: block; max-width: 160px; max-height: 160px; border-radius: var(--r); border: 1px solid var(--linea); }
.respuesta-elegible { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; text-align: left;
  padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--lienzo); color: var(--tinta); }
.respuesta-elegible:hover { border-color: var(--marca); }
.respuesta-elegible .chiquito { grid-column: 1 / -1; }
.respuesta-con-foto { width: 16px; height: 16px; color: var(--tinta-3); }
.conv-etiqueta.etapa-nuevo { color: var(--tinta-2); }
.conv-etiqueta.etapa-interesado { color: var(--pendiente); background: var(--pendiente-tenue); }
.conv-etiqueta.etapa-cotizo { color: var(--marca); }
.conv-etiqueta.etapa-compro { color: var(--marca); background: var(--marca-tenue); }
.conv-etiqueta.etapa-no-quiere { color: var(--tinta-2); background: var(--lienzo-3); }
.conv-etiqueta.es-no-responde { color: var(--pendiente); }
.filtro-etapa { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.filtro-etapa[hidden] { display: none; }
.filtro-etapa #filtro-etapa-ayuda { flex-basis: 100%; margin: 0; }

/* «PON EL ASISTENTE EN TU WEB» (pasos 36-37 del camino, 26-sep; widget-pantalla.js, prueba wg1).
   Los campos a un lado y, al otro, una página de mentira con el botón como saldrá en la web del
   negocio. En el celular, uno debajo del otro. */
.widget-rejilla { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
@media (min-width: 820px) { .widget-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.widget-previa {
  position: relative; min-height: 200px;
  border: 1px solid var(--linea); border-radius: var(--r);
  background: var(--lienzo-2);
  overflow: hidden;
}
/* LA VISTA PREVIA ES EL BOTÓN DE VERDAD (revisión del 37, 28-sep): la disposición, las medidas, la letra, el borde y las
   sombras son las MISMAS de web/w.js (.mb, .b, .b svg, .s y su @media), y el globo va AL LADO del ícono, no encima.
   La prueba wg1 (WG1-15) ejecuta w.js y compara regla por regla: si una cambia sola, se pone en rojo. El color del globo
   y su letra los pone widget-pantalla.js, como w.js. */
.widget-previa-flotante {
  position: absolute; right: 14px; bottom: 14px;
  max-width: calc(100% - 28px);
  display: flex; align-items: center; gap: 10px; flex-direction: row-reverse;
  font: 500 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.widget-previa.es-izquierda .widget-previa-flotante { right: auto; left: 14px; flex-direction: row; }
.widget-previa-saludo {
  min-width: 0;
  border: 1px solid rgba(0, 0, 0, .12); padding: 8px 12px; border-radius: 12px; max-width: 240px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.widget-previa-boton {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25); flex: none;
}
.widget-previa-boton svg { width: 32px; height: 32px; fill: #fff; }   /* el glifo oficial, blanco (marca de WhatsApp) */
@media (max-width: 600px) {
  .widget-previa-saludo { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 6px 10px; font-size: 13px; }
}
/* «La línea para tu web» respira después de «Guardar» (revisión del 37: iban pegados). */
.widget-titulo-linea { margin-top: 16px; }
.widget-linea {
  width: 100%; margin-top: 8px; padding: 8px 10px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-chico);
  background: var(--lienzo-2); color: var(--tinta);
  font-family: var(--mono); font-size: 12.5px; resize: none;
}

/* El enlace de WhatsApp y su código QR (paso 37): el enlace en letra fija, para copiarlo; el QR siempre sobre
   blanco y con su margen (así lo lee la cámara también en el tema oscuro). */
.enlace-qr-enlace {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-chico);
  background: var(--lienzo-2); color: var(--tinta);
  font-family: var(--mono); font-size: 12.5px;
}
.enlace-qr-previa { width: 180px; max-width: 100%; margin: 8px 0; background: #fff; border-radius: var(--r-chico); }
.enlace-qr-previa svg { display: block; width: 100%; height: auto; }

/* La clave de la app autenticadora (paso 165): en grupos, fácil de copiar a mano. */
.totp-clave { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 18px; letter-spacing: .08em; user-select: all; }
/* La sección «Seguridad» de cada negocio en la vista de plataforma (paso 164). */
.seguridad-del-negocio > summary { cursor: pointer; font-weight: 600; }

/* ---- La lista previa del alta de WhatsApp (paso 119): dos tarjetas para elegir cómo se usa y sus casillas ---- */
.opciones-del-alta { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.opcion-del-alta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--lienzo);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.opcion-del-alta:hover { border-color: var(--marca); background: var(--marca-tenue); }
.opcion-del-alta:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.casilla-del-alta { display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; }
.casilla-del-alta input { margin-top: 3px; flex: 0 0 auto; }
.casilla-del-alta .insignia { margin-left: auto; flex: 0 0 auto; }

/* ---- Conectar canales (paso 185): una tarjeta por red, con su estado, su arreglo y su botón ---- */
.canales-tarjetas { display: grid; gap: 12px; }
.canal-tarjeta { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--r-grande); background: var(--lienzo); }
.canal-tarjeta .btn { justify-self: start; }
/* Una sola vista (185): los números de cada red, con sus acciones, dentro de su tarjeta. */
.canales-de-la-red { border-top: 1px solid var(--linea); padding-top: 8px; }

/* El porqué y el camino de una casilla de la lista previa (paso 194): debajo, sangrado bajo el texto. */
.casilla-detalle { margin: 4px 0 0 26px; }

/* «Tus servicios» en Ajustes (paso 136, servicios-pantalla.js, prueba svp1): cada duración y cada adicional en su
   recuadro, para que se vea qué precio va con qué duración; la fila de la lista, el nombre y sus duraciones en línea. */
.servicio-ficha { margin-top: 12px; }
.servicio-variante,
.servicio-adicional { padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--r-chico); background: var(--lienzo-2); }
.servicio-fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }

/* Pantallas de la plataforma en un celular de 360 px: una línea larga sin espacios (una URL) no ensancha la pantalla; los select y el «Responder» se tocan con el dedo. */
[data-versiones-de-capa], [data-tickets-de-todos] { overflow-wrap: anywhere; }
@media (pointer: coarse) {
  [data-responder-ticket] select, [data-responder-ticket] > summary { min-height: 44px; }
}