/* Sin framework y sin build. Variables para que el tema oscuro sea una línea. */
:root {
  --fondo: #f4f5f7;
  --tarjeta: #ffffff;
  --texto: #1c1f23;
  --suave: #6b7280;
  --borde: #e3e5e8;
  --acento: #0b7285;
  --acento-texto: #ffffff;
  --error-fondo: #fdecec;
  --error-texto: #a4232a;
  --radio: 10px;
  /* Alto de arranque del cuadro de escribir: DOS renglones.
     Hugo lo notó al poner /seguimiento —que ocupa dos— y le gustó más esa
     proporción. Es un valor y no un cálculo porque lo comparten cosas con
     tipografías distintas (el textarea y el aviso de fuera-de-ventana), y con
     `em` cada una salía de un alto diferente.
     61 px = 2 renglones de 14.5 px con `line-height: 1.4`, más 18 de relleno y
     2 de borde. Medido. */
  --alto-redactor: 61px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #16181c; --tarjeta: #1e2126; --texto: #e8eaed;
    --suave: #9aa2ad; --borde: #2c3037; --acento: #2b9fb3;
    --error-fondo: #3a1e20; --error-texto: #f3a3a7;
  }
}

* { box-sizing: border-box; }

/* ⚠️ Los controles de formulario NO heredan la tipografía: sin esta línea, el
   navegador les pone su propia fuente —Arial— y quedan junto a texto en la del
   sistema. Se medía en toda la app: los tres selects del encabezado, el
   buscador, la lupa, "N más", "Salir".
   Se hereda solo la FAMILIA, no `font` completo: cada control ya tiene su
   tamaño pensado y `font: inherit` los igualaría todos a 15 px. */
button, input, select, textarea, optgroup { font-family: inherit; }
body {
  margin: 0;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
}

.entrada {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 32px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.tarjeta h1 {
  margin: 0 0 24px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.2px;
}
.tarjeta h1 span { color: var(--acento); }

label {
  display: block;
  margin: 16px 0 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--suave);
}
input {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 8px;
}
input:focus {
  outline: 2px solid var(--acento);
  outline-offset: -1px;
  background: var(--tarjeta);
}
button {
  width: 100%;
  margin-top: 24px;
  padding: 11px;
  font-size: 15px;
  font-weight: 600;
  color: var(--acento-texto);
  background: var(--acento);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
button:hover { filter: brightness(1.08); }

.error {
  margin: 0 0 4px;
  padding: 10px 12px;
  font-size: 14px;
  background: var(--error-fondo);
  color: var(--error-texto);
  border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════════════════
   La bandeja
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --entrante: #ffffff;
  --saliente: #d7f0e4;
  --barra: #12303a;
}
@media (prefers-color-scheme: dark) {
  :root { --entrante: #262a31; --saliente: #14453a; --barra: #0d1418; }
}

.app { height: 100vh; display: grid; grid-template-rows: auto 1fr; }

.barra {
  display: flex; align-items: center; gap: 20px;
  padding: 0 16px; height: 46px;
  background: var(--barra); color: #eef2f4;
}
.marca { font-size: 15px; letter-spacing: -.2px; }
.marca b { color: #52c7d8; font-weight: 600; }
.barra nav { flex: 1; display: flex; gap: 4px; }
.barra nav a {
  padding: 5px 12px; border-radius: 6px;
  /* Subido desde #b9c6cc: contra el azul oscuro de la barra, las pestañas
     inactivas se leían como deshabilitadas. */
  color: #d3dde1; text-decoration: none; font-size: 14px;
}
.barra nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.barra nav a.activo { background: rgba(255,255,255,.12); color: #fff; }
/* Se separa del grupo, pero NO se apaga: llevaba opacidad .6 y el resultado
   fue que no se encontraba, que es justo lo contrario de para qué se agregó.
   El verde la distingue sin subirle el peso: dice "esto es de WhatsApp", no
   "esto es más importante que la Bandeja". */
.barra nav a.secundaria { margin-left: auto; color: #25d366;
                          display: inline-flex; align-items: center; gap: 6px; }
.barra nav a.secundaria:hover { color: #4ef08a; background: rgba(37,211,102,.12); }
.barra nav a.secundaria.activo { background: rgba(37,211,102,.16); color: #4ef08a; }
.yo { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #b9c6cc; }
.yo em { font-style: normal; opacity: .65; }
.enlace {
  width: auto; margin: 0; padding: 4px 10px; font-size: 13px; font-weight: 500;
  background: rgba(255,255,255,.1); color: #eef2f4;
}

.tres { display: grid; grid-template-columns: 330px 1fr; min-height: 0; }
.columna { min-height: 0; border-right: 1px solid var(--borde); }

/* ── Lista ─────────────────────────────────────────────────────────── */
.lista { display: grid; grid-template-rows: auto auto 1fr; background: var(--tarjeta); }
.buscador { padding: 10px; border-bottom: 1px solid var(--borde); }
.buscador input { padding: 8px 10px; font-size: 14px; }

.filtros { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--borde); }
.filtros a {
  padding: 4px 9px; border-radius: 20px; font-size: 12.5px;
  color: var(--suave); text-decoration: none; background: var(--fondo);
}
.filtros a.activo { background: var(--acento); color: #fff; }
/* El número reserva su ancho aunque sea de un dígito.
   Sin esto, filtrar por "Míos" bajaba «Todos 1429» a «Todos 3», el chip se
   encogía y los de prioridad se recorrían a la izquierda. Los contadores
   cambian todo el tiempo; que los botones se muevan debajo del cursor es de
   las cosas que más molestan al usar algo todo el día.
   4ch cubre hasta 9999 con `tabular-nums`, donde todos los dígitos miden
   igual. Alineado a la derecha: los números crecen hacia adentro, no
   empujando el texto. */
.filtros a span {
  opacity: .7; margin-left: 3px; font-variant-numeric: tabular-nums;
  display: inline-block; min-width: 4ch; text-align: right;
}

.conversaciones { overflow-y: auto; }
.fila {
  display: block; padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
  text-decoration: none; color: var(--texto); cursor: pointer;
}
.fila:hover { background: var(--fondo); }
.fila.abierta { background: var(--fondo); box-shadow: inset 3px 0 0 var(--acento); }
.fila-arriba { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.fila-arriba strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-arriba time { font-size: 11.5px; color: var(--suave); flex-shrink: 0; }
.fila-abajo { display: flex; justify-content: space-between; gap: 8px; margin-top: 3px; }
.previa { font-size: 13px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flecha { font-style: normal; opacity: .55; }
.globo {
  flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--acento); color: #fff;
  font-size: 11px; font-weight: 600; text-align: center; line-height: 18px;
}
.fila-etiquetas { display: flex; gap: 5px; align-items: center; margin-top: 5px; font-size: 11px; }
.etapa, .quien, .ventana {
  padding: 1px 6px; border-radius: 4px; background: var(--fondo);
  border: 1px solid var(--borde); color: var(--suave);
}
.ventana { border-color: #2f9e6a; color: #2f9e6a; }

/* ── Hilo ──────────────────────────────────────────────────────────── */
.hilo-y-ficha { overflow: hidden; }
.hilo-y-ficha-interno { height: 100%; display: grid; grid-template-columns: 1fr 300px; min-height: 0; }
.hilo { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; position: relative; }

/* ── Volver a lo actual ────────────────────────────────────────────────
   Flota sobre el hilo, pegado al borde de abajo y por encima del redactor.
   Redondo y discreto: no compite con el mensaje que estás leyendo, pero se
   encuentra sin buscarlo — como el de WhatsApp. */
.al-final {
  position: absolute; right: 18px; bottom: 96px; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; font-size: 17px; line-height: 1;
  background: var(--tarjeta); color: var(--acento);
  border: 1px solid var(--borde); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
}
.al-final.se-ve { opacity: 1; transform: none; }
.al-final:hover { background: var(--fondo); }

.hilo-cab {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 16px; background: var(--tarjeta); border-bottom: 1px solid var(--borde);
}
.hilo-cab strong { font-size: 15px; }
.hilo-cab small { display: block; font-size: 12px; color: var(--suave); margin-top: 2px; }
.cab-derecha { display: flex; gap: 6px; align-items: center; font-size: 11.5px; }
.ventana.abierta { border-color: #2f9e6a; color: #2f9e6a; }
.ventana.cerrada { border-color: #c98a2e; color: #c98a2e; }

.mensajes { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 3px; }
.dia {
  align-self: center; margin: 14px 0 8px; padding: 3px 12px;
  border-radius: 12px; background: var(--tarjeta); border: 1px solid var(--borde);
  font-size: 11.5px; color: var(--suave);
}
.msg { display: flex; }
.msg.saliente { justify-content: flex-end; }
.burbuja {
  max-width: 74%; padding: 7px 10px 4px;
  border-radius: 10px; background: var(--entrante);
  border: 1px solid var(--borde); font-size: 14px;
}
.msg.saliente .burbuja { background: var(--saliente); }
.burbuja p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.burbuja .sin-texto { color: var(--suave); font-style: italic; }

/* Botón de sync de pedidos: deliberadamente pequeño y gris. Es un atajo para
   el momento «acabo de vender y lo quiero ver», no una acción principal — la
   tarea de fondo ya lo hace sola cada cinco minutos. Si se ve importante,
   invita a picarlo por costumbre y eso son llamadas a Shopify de más. */
.sync-pedidos {
  font-size: 11px; font-weight: 500; padding: 2px 7px; margin-left: 6px;
  border: 1px solid var(--borde); border-radius: 999px;
  background: transparent; color: var(--suave); cursor: pointer;
  vertical-align: middle;
}
.sync-pedidos:hover { color: var(--texto); border-color: var(--suave); }
.sync-pedidos .cargando { display: none; }
.sync-pedidos.htmx-request .quieto { display: none; }
.sync-pedidos.htmx-request .cargando { display: inline; }
.aviso-sync { font-size: 11px; color: var(--suave); margin-left: 6px; }
/* Las ligas de un mensaje. `overflow-wrap: anywhere` ya está en `.burbuja p`,
   así que una URL larga parte sola y no estira la burbuja. Subrayado discreto
   para que se distinga del texto sin gritar: en un hilo con muchos enlaces de
   producto, el azul fuerte se vuelve ruido. */
.burbuja a { color: inherit; text-decoration: underline;
             text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
             text-underline-offset: 2px; }
.burbuja a:hover { text-decoration-color: currentColor; }
.burbuja .tipo {
  display: inline-block; margin-bottom: 3px; padding: 0 5px;
  border-radius: 3px; background: var(--fondo);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--suave);
}
.burbuja footer {
  display: flex; gap: 6px; justify-content: flex-end; align-items: center;
  margin-top: 2px; font-size: 10.5px; color: var(--suave);
}
.burbuja .viejo { opacity: .6; }
.burbuja .entrega { font-variant: small-caps; }

.mas-viejos, .mas-nuevos {
  width: auto; align-self: center; margin: 0 0 10px;
  padding: 5px 14px; font-size: 12.5px; font-weight: 500;
  background: var(--tarjeta); color: var(--acento); border: 1px solid var(--borde);
}

.redactor { padding: 10px 16px; background: var(--tarjeta); border-top: 1px solid var(--borde); display: flex; gap: 8px; }
.redactor textarea {
  flex: 1; padding: 9px 12px; font: inherit; resize: none;
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 8px;
}
.redactor button {
  width: auto; margin: 0; padding: 9px 18px;
  /* Mismo ancho en "Enviar" y en "Guardar nota": si cambiaran, el cuadro de
     texto —que ocupa el resto— cambiaría de ancho al alternar de pestaña, y el
     texto ya escrito se reacomodaría delante de uno.
     140 px es lo que mide el más largo ("Guardar nota") con su relleno; medido,
     no estimado. */
  min-width: 140px;
}
.redactor button:disabled, .redactor textarea:disabled { opacity: .5; cursor: not-allowed; }
.redactor .aviso { margin: 0; font-size: 12.5px; color: #c98a2e; }

/* Fuera de la ventana de 24 h. Copia exacta de la caja de escribir —mismo
   padding, mismo borde, misma tipografía— para que al cambiar de "Responder"
   a "Nota interna" no cambie el alto y brinque el hilo de arriba.
   El texto NO envuelve nunca: si envolviera, volvería el brinco. */
.redactor .fuera-de-ventana { display: flex; gap: 10px; align-items: flex-end; width: 100%; }
.redactor .fuera-de-ventana .aviso {
  flex: 1; padding: 9px 12px; font: inherit; color: #c98a2e;
  /* La MISMA caja que el textarea, no una parecida: mismo relleno, misma
     tipografía y el mismo alto. Cambiar de pestaña no debe mover nada, y con
     `em` no bastaba porque el aviso y el textarea tienen font-size distinto. */
  padding: 9px 14px; font-size: 14.5px; line-height: 1.4;
  min-height: var(--alto-redactor);
  /* Arriba, no centrado: al lado del cuadro de nota —donde el texto empieza en
     el primer renglón— un aviso centrado se ve descuadrado. */
  display: flex; align-items: flex-start;
  background: var(--fondo);
  border: 1px dashed var(--borde); border-radius: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.redactor .fuera-de-ventana button { opacity: .5; cursor: not-allowed; }

/* ── Ficha ─────────────────────────────────────────────────────────── */
.ficha { overflow-y: auto; padding: 16px; background: var(--tarjeta); border-left: 1px solid var(--borde); }
.ficha h3 { margin: 0; font-size: 15px; }
.ficha .tel { margin: 2px 0 12px; font-size: 12.5px; color: var(--suave); }
.ficha h4 {
  margin: 20px 0 8px; padding-top: 12px; border-top: 1px solid var(--borde);
  font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--suave);
}
.ficha h4 span { opacity: .7; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.etiquetas span {
  padding: 2px 7px; border-radius: 4px; font-size: 11.5px;
  background: var(--fondo); border: 1px solid var(--borde); color: var(--suave);
}
.ficha dl { margin: 0; font-size: 13px; }
.ficha dt { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--suave); margin-top: 10px; }
.ficha dd { margin: 1px 0 0; overflow-wrap: anywhere; }

.pedidos { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pedidos td { padding: 4px 0; border-bottom: 1px solid var(--borde); }
.pedidos .aqt { font-weight: 600; }
.pedidos .fecha, .pedidos .canal { color: var(--suave); }
.pedidos .monto { text-align: right; font-variant-numeric: tabular-nums; }
.suma { margin: 10px 0 0; font-size: 13px; color: var(--suave); }
.suma b { color: var(--texto); }

.vacio { margin: 0; padding: 40px; text-align: center; color: var(--suave); }
.vacio-chico { margin: 0; font-size: 12.5px; color: var(--suave); }

@media (max-width: 1100px) {
  .hilo-y-ficha-interno { grid-template-columns: 1fr; }
  .ficha { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   El Kanban — la pantalla principal
   ══════════════════════════════════════════════════════════════════════ */
.tablero {
  display: flex; gap: 10px; padding: 12px;
  overflow-x: auto; overflow-y: hidden; min-height: 0;
}
.col {
  flex: 0 0 258px; display: grid; grid-template-rows: auto 1fr;
  min-height: 0; background: var(--fondo);
  border: 1px solid var(--borde); border-radius: 10px;
}
/* La etapa se distingue de un vistazo por su papel en el proceso */
.col.transito { border-top: 3px solid #8b93a1; }
.col.ganada   { border-top: 3px solid #2f9e6a; }
.col.perdida  { border-top: 3px solid #a4232a; }
.col:not(.transito):not(.ganada):not(.perdida) { border-top: 3px solid var(--acento); }

.col > header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 11px; border-bottom: 1px solid var(--borde);
}
.col h2 { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .1px; }
.cuenta {
  min-width: 22px; padding: 1px 7px; border-radius: 10px;
  background: var(--tarjeta); border: 1px solid var(--borde);
  font-size: 11.5px; color: var(--suave); text-align: center;
  font-variant-numeric: tabular-nums;
}

.tarjetas { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 7px; min-height: 60px; }

.tarjeta {
  padding: 8px 9px; background: var(--tarjeta);
  border: 1px solid var(--borde); border-radius: 8px;
  cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.tarjeta:hover { border-color: var(--acento); }
.tarjeta:active { cursor: grabbing; }
.t-arriba { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.t-arriba strong {
  font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prio { flex-shrink: 0; font-size: 13px; }
.t-abajo {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
  margin-top: 6px; font-size: 10.5px; color: var(--suave);
}
.t-abajo time { margin-right: auto; }
.ped, .v24, .quien {
  padding: 1px 5px; border-radius: 4px;
  background: var(--fondo); border: 1px solid var(--borde);
}
.ped { border-color: var(--acento); color: var(--acento); }
.v24 { border-color: #2f9e6a; color: #2f9e6a; }

.fantasma { opacity: .35; }
.arrastrando { transform: rotate(1.5deg); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
/* Si el servidor rechaza el movimiento, la tarjeta regresa y avisa */
.tarjeta.fallo { animation: regreso 1.6s ease; border-color: #a4232a; }
@keyframes regreso {
  0%, 100% { background: var(--tarjeta); }
  15%, 60% { background: var(--error-fondo); }
}

.mas-tarjetas {
  width: 100%; margin: 2px 0 0; padding: 6px;
  font-size: 11.5px; font-weight: 500;
  background: transparent; color: var(--acento);
  border: 1px dashed var(--borde); border-radius: 8px;
}

.alterna {
  padding: 4px 10px; border-radius: 6px; font-size: 12.5px;
  color: #b9c6cc; text-decoration: none; border: 1px solid rgba(255,255,255,.18);
}
.alterna.prendido { background: var(--acento); color: #fff; border-color: transparent; }

/* ── Panel de conversación ───────────────────────────────────────────────
   Centrado y con margen, no un cajón pegado a la derecha. Dos razones:

   1. ANCHO. El cajón medía 880 px y la ficha se lleva 336, así que al hilo le
      quedaban ~540 — por eso el cuadro de escribir se sentía angosto contra
      WhatsApp Web. Centrado llega a ~1,350 px en una MacBook Air: el hilo casi
      duplica su ancho.
   2. CONTEXTO. Con margen en toda la periferia se sigue viendo el tablero
      alrededor, que es más que lo que dejaba ver un cajón tapando el 82%
      derecho.

   Sin animación: se probó a 440, 240, 140 y 20 ms y Hugo prefirió que se
   perciba instantáneo. Lo que se conserva del rediseño es el ancho. */
.fondo-panel {
  position: fixed; inset: 0; z-index: 19;
  background: rgba(0,0,0,.34);
  opacity: 0; pointer-events: none;
}
body.con-panel .fondo-panel { opacity: 1; pointer-events: auto; }

.panel {
  position: fixed; z-index: 20;
  top: 62px; bottom: 26px;
  left: 50%; width: min(1320px, 94vw);
  margin-left: min(-660px, -47vw);
  background: var(--fondo);
  border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.32);
  overflow: hidden;
  /* Sin animación: Hugo lo probó a 440, 240, 140 y 20 ms y prefirió que se
     perciba instantáneo. Aparece y desaparece, sin transición. */
  display: none;
}
body.con-panel .panel { display: block; }
.panel .hilo-y-ficha-interno { height: 100%; }

/* Con más ancho, la ficha puede ser más cómoda sin quitarle al hilo */
.panel .hilo-y-ficha-interno { grid-template-columns: 1fr 360px; }

@media (max-width: 1000px) {
  .panel { top: 52px; bottom: 8px; width: 96vw; margin-left: -48vw; border-radius: 10px; }
}


/* ── Dueño del lead y no leídos ─────────────────────────────────────── */
/* Dos canales visuales distintos, a propósito:
     el COLOR dice de quién es      → para barrer la vista buscando los tuyos
     el CONTRASTE dice si falta contestar → es la lista de pendientes
   Si el color del dueño pintara toda la tarjeta, el "no leído" se perdería. */
.avatar {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .2px;
  display: inline-flex; align-items: center; justify-content: center;
}
.t-arriba, .fila-arriba { display: flex; align-items: center; gap: 6px; }
.t-arriba strong, .fila-arriba strong { flex: 1; min-width: 0; }

.tarjeta {
  border-left: 3px solid var(--dueno, transparent);
  background: color-mix(in srgb, var(--dueno, transparent) 5%, var(--tarjeta));
}
.tarjeta.no-leida {
  background: color-mix(in srgb, var(--acento) 9%, var(--tarjeta));
  border-color: var(--acento);
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
}
.tarjeta.no-leida .t-arriba strong { font-weight: 700; }
/* Las leídas se atenúan: lo pendiente resalta por contraste, no por adorno */
.tarjeta:not(.no-leida) .t-arriba strong { font-weight: 500; opacity: .78; }

.fila { border-left: 3px solid var(--dueno, transparent); }
.fila.no-leida { background: color-mix(in srgb, var(--acento) 7%, var(--tarjeta)); }
.fila.no-leida .fila-arriba strong { font-weight: 700; }
.fila:not(.no-leida) .fila-arriba strong { font-weight: 500; opacity: .8; }

.marcar {
  width: auto; margin: 0; padding: 3px 9px; font-size: 11.5px; font-weight: 500;
  background: var(--fondo); color: var(--suave);
  border: 1px solid var(--borde); border-radius: 6px; cursor: pointer;
}
.marcar.leido { color: var(--acento); border-color: var(--acento); }

/* ── Que el embudo COMPLETO quepa sin scroll lateral ────────────────────
   Hugo trabaja en una MacBook Air y con 8 columnas de ancho fijo había que
   scrollear de lado — lo cual anula el punto del Kanban, que es ver todo el
   proceso de un vistazo.

   Las columnas ahora se reparten el ancho disponible (`flex: 1 1 0`) en vez de
   medir 258px cada una. Con `min-width` se garantiza que la tarjeta siga
   siendo legible; si la ventana es más angosta que eso, entonces sí aparece el
   scroll, pero como excepción y no como estado normal. */
.tablero { gap: 7px; padding: 9px; }
.col { flex: 1 1 0; min-width: 144px; }

/* Los nombres largos ("Pendiente por proveedor", "Confirmado o en Proceso")
   pasan a dos renglones en vez de recortarse: la etapa hay que reconocerla. */
.col > header { padding: 7px 8px; align-items: flex-start; gap: 5px; }
.col h2 { font-size: 11.5px; line-height: 1.25; }
.cuenta { min-width: 20px; padding: 0 5px; font-size: 11px; flex-shrink: 0; }

/* Tarjeta compacta: cabe en columna angosta sin perder ningún dato */
.tarjetas { padding: 6px; gap: 6px; }
.tarjeta { padding: 6px 7px; }
.avatar { width: 18px; height: 18px; font-size: 9px; }
.t-arriba { gap: 5px; }
.t-arriba strong { font-size: 12.5px; }
.prio { font-size: 12px; }
.t-abajo { gap: 4px; margin-top: 5px; font-size: 10px; }
.ped, .v24 { padding: 0 4px; }
.globo { min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; }

/* En pantallas grandes no hace falta que se estiren tanto */
@media (min-width: 1800px) { .col { max-width: 300px; } }

/* ── Redactor ───────────────────────────────────────────────────────── */
.redactor form { display: flex; gap: 8px; width: 100%; align-items: flex-end; }
.redactor button:disabled { opacity: .55; cursor: wait; }
.error-envio {
  margin: 8px 16px; padding: 9px 12px; border-radius: 8px;
  background: var(--error-fondo); color: var(--error-texto); font-size: 13px;
}

/* ── Señales del "en vivo" ──────────────────────────────────────────────── */
/* Una tarjeta que acaba de cambiar se destaca un momento: si no, algo se mueve
   en la pantalla y no queda claro qué fue. */
.tarjeta.recien { animation: recien 2s ease; }
@keyframes recien {
  0%   { box-shadow: 0 0 0 2px var(--acento); }
  70%  { box-shadow: 0 0 0 2px var(--acento); }
  100% { box-shadow: none; }
}

/* Si se cae la conexión hay que decirlo: creer que estás viendo lo último
   cuando no lo estás es peor que saber que se cayó. */
body.sin-conexion .barra::after {
  content: 'Sin conexión en vivo — recarga la página';
  position: fixed; top: 46px; left: 0; right: 0; z-index: 30;
  padding: 5px; text-align: center; font-size: 12px;
  background: #c98a2e; color: #1c1f23;
}

/* ── Fijadas ─────────────────────────────────────────────────────────── */
/* Se distinguen con una línea punteada arriba, no con más color: el color ya
   dice de quién es el lead y el contraste ya dice si falta contestar. Un tercer
   uso del color volvería el tablero ilegible. */
.tarjeta.fijada, .fila.fijada { border-top: 2px dotted var(--acento); }
.pin { flex-shrink: 0; font-size: 11px; opacity: .85; }
.marcar.fijado { color: var(--acento); border-color: var(--acento); }

/* ══════════════════════════════════════════════════════════════════════
   Respuestas rápidas
   ══════════════════════════════════════════════════════════════════════ */
.redactor { position: relative; }
.panel-atajos {
  display: none;
  position: absolute; bottom: calc(100% + 6px); left: 16px; right: 16px;
  max-height: 320px; overflow-y: auto; z-index: 40;
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: 10px; box-shadow: 0 -6px 24px rgba(0,0,0,.16);
}
.panel-atajos.visible { display: block; }
.sugerencias { margin: 0; padding: 4px; list-style: none; }
.sugerencias li { padding: 7px 9px; border-radius: 7px; cursor: pointer; }
.sugerencias li.elegida { background: color-mix(in srgb, var(--acento) 12%, var(--tarjeta)); }
.s-arriba { display: flex; align-items: baseline; gap: 8px; }
.s-arriba code {
  font-size: 12.5px; font-weight: 600; color: var(--acento);
  background: var(--fondo); padding: 1px 5px; border-radius: 4px;
}
.s-titulo { font-size: 12.5px; color: var(--suave); }
.s-mia {
  font-size: 10px; padding: 0 5px; border-radius: 4px;
  border: 1px solid var(--borde); color: var(--suave);
}
.s-cuerpo {
  margin: 3px 0 0; font-size: 12.5px; color: var(--texto);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Una variable sin resolver se avisa ANTES de enviar, no después */
.s-faltan { margin: 3px 0 0; font-size: 11px; color: #c98a2e; }

/* ── Pantalla de administración ─────────────────────────────────────── */
.pagina { overflow-y: auto; padding: 20px; display: grid; gap: 16px; align-content: start; }
.tarjeta.ancha { max-width: 1000px; width: 100%; padding: 20px 22px; }
.tarjeta.ancha h2 {
  margin: 0 0 16px; font-size: 15px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.formulario label { display: block; margin-bottom: 12px; }
.formulario .renglon { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.pista { display: block; font-size: 11px; font-weight: 400; color: var(--suave); margin-bottom: 4px; }
.formulario textarea {
  width: 100%; padding: 10px 12px; font: inherit; resize: vertical;
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 8px;
}
.formulario select {
  width: 100%; padding: 10px 12px; font: inherit;
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 8px;
}
.formulario button { width: auto; margin-top: 4px; padding: 10px 22px; }
.variables-ayuda { margin: 4px 0 14px; font-size: 12px; color: var(--suave); }
.variables-ayuda code {
  background: var(--fondo); border: 1px solid var(--borde);
  padding: 1px 5px; border-radius: 4px; margin-right: 4px; color: var(--acento);
}

.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th {
  text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--borde);
  font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--suave);
}
.tabla td { padding: 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla .der { text-align: right; font-variant-numeric: tabular-nums; }
.tabla code { color: var(--acento); font-weight: 600; }
.tabla small { color: var(--suave); }
.cuerpo-celda { max-width: 380px; white-space: pre-wrap; }
.borrar {
  width: auto; margin: 0; padding: 4px 10px; font-size: 12px;
  background: transparent; color: var(--error-texto);
  border: 1px solid var(--borde); border-radius: 6px;
}

/* Variable sin resolver en el cuadro de escribir: se ve en el momento, no al
   intentar enviar. El servidor de todos modos lo impide. */
.aviso-variables {
  position: absolute; bottom: calc(100% + 4px); left: 16px; right: 16px;
  margin: 0; padding: 6px 10px; border-radius: 7px;
  background: #fdf3e3; color: #8a5a12; font-size: 12px;
  border: 1px solid #e8c98a;
}
@media (prefers-color-scheme: dark) {
  .aviso-variables { background: #3a2f1a; color: #f0d9a8; border-color: #6b5526; }
}

/* ── Acciones del encabezado de la conversación ─────────────────────── */
.hilo-cab { flex-wrap: wrap; gap: 8px 10px; }
.cab-quien { min-width: 160px; }
.cab-acciones { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-left: auto; }
.cab-acciones select {
  padding: 4px 6px; font-size: 11.5px; max-width: 152px;
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 6px; cursor: pointer;
}
.cab-acciones select:disabled { opacity: .55; cursor: not-allowed; }

/* Cotizar. Mide y se alinea como los demás controles del encabezado —mismo
   padding, misma tipografía, mismo radio— pero va en verde de acción: es lo
   único de esa barra que abre otra pantalla en vez de cambiar un dato. */
.btn-cotizar {
  padding: 4px 11px; font-size: 11.5px; font-weight: 600;
  background: var(--verde, #16a34a); color: #fff;
  border: 1px solid transparent; border-radius: 6px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn-cotizar:hover { filter: brightness(1.08); }
.icono {
  width: auto; margin: 0; padding: 4px 9px; font-size: 11.5px; font-weight: 500;
  background: var(--fondo); color: var(--suave);
  border: 1px solid var(--borde); border-radius: 6px; cursor: pointer;
}
.icono:hover { border-color: var(--acento); color: var(--acento); }
.icono.activo { background: color-mix(in srgb, var(--acento) 14%, var(--tarjeta));
                border-color: var(--acento); color: var(--acento); }

/* ── Adjuntos en el hilo ─────────────────────────────────────────────── */
.adjuntos { display: flex; flex-direction: column; gap: 5px; margin-bottom: 5px; }
.adj { max-width: 100%; }
.adj.imagen { display: block; line-height: 0; position: relative; }
/* Los tres puntitos: discretos hasta que se pasa el cursor por la imagen */
.adj-mas {
  position: absolute; top: 6px; right: 6px;
  width: auto; min-width: 0; margin: 0; padding: 0 6px; line-height: 20px;
  background: rgba(0,0,0,.45); color: #fff; border: 0; border-radius: 5px;
  font-size: 14px; cursor: pointer; opacity: 0; transition: opacity .12s;
}
.adj.imagen:hover .adj-mas, .adj-mas:focus, .adj.imagen:has(.adj-menu:not([hidden])) .adj-mas { opacity: 1; }
.adj-menu {
  /* `fixed` y no `absolute`: la posición la calcula visor.js contra la ventana,
     porque anclado a la imagen se salía cuando la foto era más angosta que el
     menú. */
  position: fixed; z-index: 60;
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.2);
  padding: 4px; min-width: 168px; line-height: normal;
}
.adj-menu[hidden] { display: none; }
.adj-menu a {
  display: block; padding: 6px 9px; border-radius: 5px;
  font-size: 12.5px; color: var(--texto); text-decoration: none;
}
.adj-menu a:hover { background: var(--fondo); }
.adj.imagen img {
  max-width: 260px; max-height: 260px; width: auto; height: auto;
  border-radius: 7px; border: 1px solid var(--borde); object-fit: cover;
}
/* El audio manda el ancho de su burbuja: con 240 px la barra era tan corta que
   no se podía mover uno dentro de una nota de voz larga. Hugo lo pidió y tiene
   razón — en una nota de dos minutos, un píxel son cuatro segundos.
   El `min-width` en la burbuja es lo que de verdad la ensancha: el reproductor
   solo no puede pasar del ancho de su contenedor. */
.msg:has(.adj.audio) .burbuja { min-width: min(420px, 92%); max-width: 92%; }
.adj.audio { width: 100%; min-width: 0; height: 36px; }
.adj.video { max-width: 260px; border-radius: 7px; }
.adj.archivo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 9px; border-radius: 7px; font-size: 12.5px;
  background: var(--fondo); border: 1px solid var(--borde);
  color: var(--texto); text-decoration: none; overflow-wrap: anywhere;
}
.adj.archivo:hover { border-color: var(--acento); color: var(--acento); }
/* Los caducados se muestran igual: que existió es información */
.adj.caducado {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 7px; font-size: 12px;
  background: var(--fondo); border: 1px dashed var(--borde);
  color: var(--suave); font-style: italic;
}

/* ── Visor de fotos ──────────────────────────────────────────────────── */
.visor {
  display: none;
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.86);
  align-items: center; justify-content: center;
  padding: 48px 60px;
}
.visor.visible { display: flex; }
.visor img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.visor button {
  position: absolute; width: auto; margin: 0;
  background: rgba(255,255,255,.14); color: #fff;
  border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
}
.visor button:hover { background: rgba(255,255,255,.26); }
.visor-cerrar { top: 14px; right: 16px; width: 36px; height: 36px; font-size: 15px; }
.visor-antes, .visor-despues {
  top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; font-size: 30px; line-height: 1; padding-bottom: 4px;
}
.visor-antes { left: 12px; }
.visor-despues { right: 12px; }
.visor-pie {
  position: absolute; bottom: 14px; left: 0; right: 0;
  display: flex; gap: 16px; align-items: center; justify-content: center;
  font-size: 12.5px; color: rgba(255,255,255,.72);
}
.visor-bajar { color: rgba(255,255,255,.9); text-decoration: none; }
.visor-bajar:hover { text-decoration: underline; }
/* La foto en el hilo invita a abrirse */
.adj.imagen img { cursor: zoom-in; transition: opacity .12s; }
.adj.imagen:hover img { opacity: .9; }

/* ── Cargar al llegar al borde ───────────────────────────────────────── */
/* El botón sigue existiendo: avisa que hay más y se puede picar. Al cargar
   cambia de texto en vez de desaparecer, para que no parezca que se trabó. */
.cargando { display: none; }
.htmx-request .quieto { display: none; }
.htmx-request .cargando { display: inline; }
.mas-viejos.htmx-request, .mas-nuevos.htmx-request, .mas-tarjetas.htmx-request { opacity: .65; cursor: wait; }

/* ── Ficha editable ──────────────────────────────────────────────────── */
/* Los campos son inputs siempre, no texto que hay que clicar para editar: el
   caso real es que el cliente está dictando su CP mientras se escribe. Se ven
   como texto hasta que los tocas, para que la ficha no parezca un formulario. */
.campos { display: grid; gap: 2px; }
.campo { display: block; position: relative; }
.campo .etiqueta {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .3px; color: var(--suave); margin: 9px 0 1px;
}
.campo input, .campo select {
  width: 100%; padding: 4px 6px; font: inherit; font-size: 13px;
  color: var(--texto); background: transparent;
  border: 1px solid transparent; border-radius: 6px;
}
.campo input:hover, .campo select:hover { border-color: var(--borde); }
.campo input:focus, .campo select:focus {
  background: var(--fondo); border-color: var(--acento); outline: none;
}
.campo input::placeholder { color: var(--suave); opacity: .55; }
.campo select { cursor: pointer; }
.campo-titulo input { font-size: 15px; font-weight: 600; padding: 3px 6px; }

.aviso { display: block; min-height: 13px; font-size: 10.5px; padding-left: 6px; }
.campo-ok { color: #2f9e6a; }
/* El error se queda en pantalla hasta que se corrige: un RFC mal escrito no se
   descubre hasta que el cliente pide su factura, semanas después. */
.campo-error { color: var(--error-texto); }

/* ── Etiquetas ───────────────────────────────────────────────────────── */
.etiquetas { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 10px 0 4px; }
.etiq {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 4px 2px 7px; border-radius: 4px; font-size: 11.5px;
  background: var(--fondo); border: 1px solid var(--borde); color: var(--suave);
}
.etiq button {
  width: auto; margin: 0; padding: 0 2px; font-size: 10px; line-height: 1;
  background: transparent; color: var(--suave); border: 0; cursor: pointer;
}
.etiq button:hover { color: var(--error-texto); }
.etiq-nueva { display: inline-flex; }
.etiq-nueva input {
  width: 96px; padding: 2px 7px; font-size: 11.5px;
  background: transparent; color: var(--texto);
  border: 1px dashed var(--borde); border-radius: 4px;
}
.etiq-nueva input:focus {
  width: 150px; background: var(--fondo); border-style: solid;
  border-color: var(--acento); outline: none;
}

/* ── Sugerencias de etiqueta ─────────────────────────────────────────── */
.etiq-nueva { position: relative; }
.sug-caja { position: absolute; top: calc(100% + 3px); left: 0; z-index: 30; }
.sug-etiq {
  margin: 0; padding: 3px; list-style: none; min-width: 150px;
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: 7px; box-shadow: 0 3px 12px rgba(0,0,0,.14);
}
.sug-etiq button {
  width: 100%; margin: 0; padding: 4px 8px; text-align: left;
  font-size: 12px; font-weight: 400;
  background: transparent; color: var(--texto);
  border: 0; border-radius: 5px; cursor: pointer;
}
.sug-etiq button:hover { background: var(--fondo); color: var(--acento); }

/* ── Datos más compactos ─────────────────────────────────────────────── */
/* Iban muy separados en vertical: en una ficha con 7 campos, el CP quedaba
   fuera de la vista y había que buscarlo. */
.campos { gap: 0; }
.campo .etiqueta { margin: 5px 0 0; font-size: 10px; }
.campo input, .campo select { padding: 2px 6px; font-size: 12.5px; }
.aviso { min-height: 0; font-size: 10px; padding-left: 6px; }
.aviso:empty { display: none; }
.ficha h4 { margin: 14px 0 5px; padding-top: 9px; }
.ficha .tel { margin: 1px 0 6px; }
.etiquetas { margin: 7px 0 2px; }

/* ══════════════════════════════════════════════════════════════════════
   Notas internas
   ══════════════════════════════════════════════════════════════════════ */
/* La nota se ve DISTINTA a cualquier mensaje: ni burbuja, ni alineada a un lado.
   Si se pareciera, algún día alguien manda una al cliente. */
.nota {
  align-self: stretch; margin: 4px 0;
  padding: 7px 10px; border-radius: 8px;
  background: #fdf6e3; border: 1px solid #e8d9a8; border-left: 3px solid #c99a2e;
  font-size: 13px; color: #4a3c14;
}
@media (prefers-color-scheme: dark) {
  .nota { background: #33291a; border-color: #5c4a25; border-left-color: #c99a2e; color: #f0e2c0; }
}
.nota-cab { display: flex; align-items: center; gap: 7px; font-size: 11px; margin-bottom: 3px; }
.nota-etiqueta {
  padding: 0 5px; border-radius: 3px; background: #c99a2e; color: #fff;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}
.nota-cab strong { font-weight: 600; }
.nota-cab time { color: inherit; opacity: .6; }
.nota-borrar {
  width: auto; margin: 0 0 0 auto; padding: 0 4px; font-size: 10px; line-height: 1;
  background: transparent; color: inherit; opacity: .5; border: 0; cursor: pointer;
}
.nota-borrar:hover { opacity: 1; color: var(--error-texto); }
.nota p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.nota mark {
  background: #c99a2e; color: #fff; padding: 0 3px; border-radius: 3px; font-weight: 600;
}

/* ── Los dos modos del redactor ──────────────────────────────────────── */
.redactor { flex-direction: column; align-items: stretch; gap: 7px; }
.modos { display: flex; gap: 3px; }
.modo {
  width: auto; margin: 0; padding: 3px 11px; font-size: 12px; font-weight: 500;
  background: transparent; color: var(--suave);
  border: 1px solid transparent; border-radius: 6px; cursor: pointer;
}
.modo:hover { color: var(--texto); }
.modo.activo { background: var(--fondo); border-color: var(--borde); color: var(--texto); }
.modo[data-modo="nota"].activo { background: #c99a2e; border-color: #c99a2e; color: #fff; }

/* ⚠️ `.redactor .caja-nota` y no `.caja-nota` a secas: unas líneas más arriba
   está `.redactor form { display: flex }`, que tiene MÁS especificidad (clase +
   elemento) y le ganaba. Resultado: la caja de nota se veía SIEMPRE, con su
   "el cliente NO la ve" justo arriba de donde se escribe la respuesta.
   Lo reportó Hugo. Es el tipo de error que no se ve en el HTML ni en el
   servidor: las dos cajas están ahí y solo el CSS decide cuál se muestra. */
.redactor .caja-nota { display: none; }
.redactor.en-nota .caja-nota { display: flex; }
.redactor.en-nota .caja-mensaje { display: none; }
/* Todo el redactor cambia de color en modo nota: la señal tiene que ser
   imposible de pasar por alto, no un detalle en una esquina. */
.redactor.en-nota { background: #fdf6e3; }
@media (prefers-color-scheme: dark) { .redactor.en-nota { background: #33291a; } }
.redactor.en-nota textarea { border-color: #c99a2e; background: #fffdf6; color: #4a3c14; }
@media (prefers-color-scheme: dark) {
  .redactor.en-nota textarea { background: #262013; color: #f0e2c0; }
}
.redactor.en-nota button[type="submit"] { background: #c99a2e; }

/* ── Barra unificada ─────────────────────────────────────────────────── */
/* Tamaños fijos para que las pestañas NO cambien de ancho al navegar: antes
   cada pantalla escribía su propia barra y se movían al pasar de una a otra. */
.barra { flex-shrink: 0; }
a.marca { color: #eef2f4; text-decoration: none; flex-shrink: 0; }
.barra nav a {
  line-height: 1.4;
  border: 1px solid transparent;   /* reserva el borde para que el activo no empuje */
}
.barra nav a.activo { border-color: rgba(255,255,255,.14); }

/* ⚠️ `.app` es una rejilla de DOS renglones (barra + contenido). Cuando una
   pantalla mete una barra de filtros en medio hay que declarar el tercero, o
   el contenido se queda con alto automático, crece más allá de la ventana y la
   página entera se recorre hacia abajo.
   Pasó exactamente eso al cambiar `.sobre-tablero` por `.filtros-barra`: la
   regla seguía apuntando al nombre viejo y ya no casaba con nada. Lo reportó
   Hugo — "en el Kanban cuando hago clic en los filtros como que se recorre
   todo hacia abajo". */
.app:has(> .filtros-barra) { grid-template-rows: auto auto 1fr; }
/* Y volvió a pasar el 2026-08-21 con `.pp-tira` (los primeros pasos encima del
   tablero): cuarto hijo, tres renglones declarados, y el tablero se fue a un
   renglón implícito de alto automático. Hugo: "siguen saliendo muy abajo los
   títulos de las columnas".
   La regla es: CADA hijo directo de `.app` tiene que tener su renglón. */
.app:has(> .filtros-barra):has(> .pp-tira) { grid-template-rows: auto auto auto 1fr; }

/* ── Datos en un renglón, no apilados ────────────────────────────────────
   Hugo: "veo innecesario tener que scrollear hacia abajo en un cliente que
   solo tiene un pedido en la tabla inferior".

   Cada campo apilaba etiqueta arriba e input abajo: ~40 px por campo, 280 px
   solo de datos, y los pedidos quedaban fuera de la vista. En un renglón son
   ~24 px, así que la ficha completa de un cliente con pocos pedidos cabe sin
   scroll — que es el punto de tener la ficha al lado. */
.ficha { width: 100%; }
.hilo-y-ficha-interno { grid-template-columns: 1fr 336px; }

.campo {
  display: grid; grid-template-columns: 92px 1fr;
  align-items: center; column-gap: 6px;
  border-bottom: 1px solid transparent;
}
.campo:hover { border-bottom-color: var(--borde); }
.campo .etiqueta {
  margin: 0; font-size: 10px; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.campo input, .campo select { padding: 3px 5px; font-size: 12.5px; }
/* El aviso ocupa las dos columnas y solo cuando hay algo que decir */
.campo .aviso { grid-column: 1 / -1; padding-left: 98px; }

/* El nombre sí va completo arriba */
.campo-titulo { grid-template-columns: 1fr; }
.campo-titulo .aviso { padding-left: 6px; }

.ficha h4 { margin: 12px 0 3px; padding-top: 8px; }
.ficha h3 { display: none; }        /* el nombre ya es el input de arriba */
.pedidos td { padding: 3px 0; }
.suma { margin: 7px 0 0; }

/* En el extremo el botón se ve apagado: queda claro que ya no hay más fotos */
.visor button:disabled { opacity: .22; cursor: default; }
.visor button:disabled:hover { background: rgba(255,255,255,.14); }

/* ══════════════════════════════════════════════════════════════════════
   Ficha — versión final
   ══════════════════════════════════════════════════════════════════════
   Tres cosas que reportó Hugo:
     · las etiquetas de la izquierda se cortaban  → más ancho, sin recortar
     · "los campos ni parecen campos"            → borde y fondo propios
     · "el color de dentro y fuera es muy parecido" → más contraste
   ══════════════════════════════════════════════════════════════════════ */
.hilo-y-ficha-interno { grid-template-columns: 1fr 352px; }
.ficha { padding: 14px 14px 20px; }

/* Los grupos dicen PARA QUÉ sirve cada dato: envío, facturación, origen.
   Una lista de nueve campos sueltos obliga a leerlos todos para hallar uno. */
.ficha h4 {
  margin: 14px 0 5px; padding: 0 0 3px;
  border-top: 0; border-bottom: 1px solid var(--borde);
  font-size: 10px; letter-spacing: .6px; color: var(--acento);
}
.ficha h4:first-of-type { margin-top: 10px; }

.campos { display: grid; gap: 4px; }
.campo {
  display: grid; grid-template-columns: 104px 1fr;
  align-items: center; column-gap: 8px; border-bottom: 0;
}
.campo:hover { border-bottom-color: transparent; }
.campo .etiqueta {
  margin: 0; font-size: 10.5px; line-height: 1.25;
  white-space: normal; overflow: visible; text-overflow: clip;   /* ya no se recorta */
  text-transform: none; letter-spacing: 0; color: var(--suave);
}

/* Que se vean como campos: borde propio y fondo distinto al de la ficha */
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 5px 7px; font: inherit; font-size: 12.5px;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--borde); border-radius: 6px;
}
@media (prefers-color-scheme: light) {
  /* En claro, el fondo de la ficha es blanco: el campo va un tono abajo para
     que se distinga sin verse sucio. */
  .campo input, .campo select, .campo textarea { background: #f7f8f9; }
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--suave); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  background: var(--tarjeta); border-color: var(--acento);
  outline: 2px solid color-mix(in srgb, var(--acento) 22%, transparent);
  outline-offset: -1px;
}
.campo textarea { resize: vertical; line-height: 1.35; }
.campo-alto { align-items: start; }
.campo-alto .etiqueta { padding-top: 6px; }

.campo-titulo { grid-template-columns: 1fr; margin-bottom: 1px; }
.campo-titulo input {
  font-size: 15px; font-weight: 600; padding: 5px 7px;
  background: transparent; border-color: transparent;
}
.campo-titulo input:hover { background: var(--fondo); border-color: var(--borde); }
.campo .aviso { grid-column: 2; padding-left: 2px; }
.campo-titulo .aviso { grid-column: 1; }

/* ── Nombre editable y teléfono copiable en el encabezado ────────────── */
.cab-quien { min-width: 190px; }
.cab-nombre {
  width: 100%; max-width: 260px; padding: 2px 6px;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--texto);
  background: transparent; border: 1px solid transparent; border-radius: 6px;
}
.cab-nombre:hover { background: var(--fondo); border-color: var(--borde); }
.cab-nombre:focus {
  background: var(--fondo); border-color: var(--acento); outline: none;
}
.cab-nombre.guardado { border-color: #2f9e6a; }
.cab-quien small { display: block; margin-top: 1px; padding-left: 6px; }

.copiar {
  width: auto; margin: 0; padding: 0 3px; font: inherit; font-size: 12px;
  background: transparent; color: var(--suave);
  border: 0; border-bottom: 1px dashed var(--borde);
  border-radius: 0; cursor: copy;
}
.copiar:hover { color: var(--acento); border-bottom-color: var(--acento); }
.copiar.copiado { color: #2f9e6a; border-bottom-color: transparent; }

/* ── Pedidos arriba, y plegados cuando son muchos ────────────────────── */
.bloque-pedidos { margin-bottom: 4px; }
.bloque-pedidos h4 { margin-top: 4px; display: flex; align-items: baseline; gap: 6px; }
.suma-inline { margin-left: auto; color: var(--texto); font-size: 11.5px; }
.pedidos td { padding: 2px 0; font-size: 12px; }
.pedidos .aqt .copiar { font-size: 12px; font-weight: 600; color: var(--acento); }
/* Las filas de más viven en la MISMA tabla, así comparten el ancho de columna */
.fila-oculta { display: none; }
.bloque-pedidos.abierto .fila-oculta { display: table-row; }

/* Anchos fijos para que nada se recorra al desplegar.
   El reparto viejo daba 42 % al número de pedido y 18 % al estado, de cuando
   esa columna decía "shop" o "bodega". Con los estados en claro
   —"Enviado, sin guía" mide 90 px— el texto se salía y se empalmaba con el
   monto, mientras el AQT reservaba 136 px para 55 de texto. Lo reportó Hugo en
   la ficha de Armando.
   Ahora cada columna se lleva lo que usa, medido: AQT 55 px, fecha 71,
   estado 90, monto 56. */
.pedidos { table-layout: fixed; }
.pedidos .aqt { width: 24%; }
.pedidos .fecha { width: 22%; }
.pedidos .entrega { width: 32%; }
.pedidos .monto { width: 22%; }
/* Y si algún día hay un estado más largo, se recorta con puntos suspensivos en
   vez de invadir la columna de al lado. El texto completo sigue en el `title`. */
.pedidos .entrega span {
  display: inline-block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: bottom;
}
/* Que se vea que es para picarle: subrayado punteado y color de enlace */
.ver-mas-pedidos {
  /* Ancho fijo para que el título no se recorra al cambiar el texto entre
     "Ver más pedidos" y "Ver menos" */
  width: 88px; text-align: left; margin: 0; padding: 0; font: inherit;
  font-size: 10px; font-weight: 500; letter-spacing: .3px;
  color: var(--acento); background: transparent;
  border: 0; border-bottom: 1px dashed var(--acento); border-radius: 0;
  cursor: pointer; text-transform: none;
}
.ver-mas-pedidos:hover { border-bottom-style: solid; }
.sin-pedidos { margin: 6px 0 2px; }

/* ── Un poco más apretado entre filas ────────────────────────────────── */
.campos { gap: 2px; }
.campo input, .campo select, .campo textarea { padding: 3px 7px; }
.campo .etiqueta { font-size: 10px; }
.ficha h4 { margin: 10px 0 3px; padding-bottom: 2px; }
.etiquetas { margin: 5px 0 2px; }
.etiq, .etiq-nueva input { padding-top: 1px; padding-bottom: 1px; }

/* ── Teléfono: ver, copiar, o escribirle ─────────────────────────────── */
.ir-whats {
  display: inline-block; padding: 0 4px; font-size: 11px;
  color: #25d366; text-decoration: none; transform: rotate(-45deg);
}
.ir-whats:hover { filter: brightness(1.2); }

/* ── Detalle de un pedido ────────────────────────────────────────────── */
.ver-pedido {
  width: auto; margin: 0; padding: 0; font: inherit; font-size: 12px;
  font-weight: 600; color: var(--acento);
  background: transparent; border: 0; border-bottom: 1px dashed var(--acento);
  border-radius: 0; cursor: pointer;
}
.ver-pedido:hover { border-bottom-style: solid; }

.capa-detalle { display: none; }
body.con-detalle .capa-detalle {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.42); padding: 24px;
}
.detalle-pedido {
  width: min(460px, 94vw); max-height: 82vh; overflow-y: auto;
  padding: 16px 18px; border-radius: 12px;
  background: var(--tarjeta); border: 1px solid var(--borde);
  box-shadow: 0 12px 44px rgba(0,0,0,.3);
}
.detalle-pedido header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.detalle-pedido header strong { font-size: 16px; }
.canal-etiq {
  padding: 1px 6px; border-radius: 4px; font-size: 10.5px; text-transform: uppercase;
  background: var(--fondo); border: 1px solid var(--borde); color: var(--suave);
}
.detalle-pedido header time { font-size: 12px; color: var(--suave); }
.cerrar-detalle {
  width: auto; margin: 0 0 0 auto; padding: 2px 7px; font-size: 12px;
  background: var(--fondo); color: var(--suave);
  border: 1px solid var(--borde); border-radius: 6px; cursor: pointer;
}

.estados { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.est {
  padding: 2px 8px; border-radius: 12px; font-size: 11.5px;
  background: var(--fondo); border: 1px solid var(--borde); color: var(--suave);
}
.est-paid, .est-fulfilled, .est-delivered { border-color: #2f9e6a; color: #2f9e6a; }
.est-pending, .est-unfulfilled, .est-partial { border-color: #c98a2e; color: #c98a2e; }
.est-alerta, .est-cancelled, .est-refunded, .est-voided { border-color: #a4232a; color: #a4232a; }

.guia {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin-bottom: 10px; padding: 7px 9px; border-radius: 8px;
  background: var(--fondo); border: 1px solid var(--borde); font-size: 12.5px;
}
.guia-paq { font-weight: 600; }
.rastrear { color: var(--acento); text-decoration: none; font-size: 12px; }
.rastrear:hover { text-decoration: underline; }
.sin-guia { margin: 0 0 10px; font-size: 12px; color: #c98a2e; }

.lineas { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lineas td { padding: 5px 0; border-bottom: 1px solid var(--borde); vertical-align: top; }
.lineas .cant { width: 34px; color: var(--suave); font-variant-numeric: tabular-nums; }
.lineas .prod small { display: block; font-size: 10.5px; color: var(--suave); }
.lineas .imp { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.totales {
  display: flex; align-items: baseline; gap: 8px; margin-top: 10px;
  padding-top: 8px; border-top: 1px solid var(--borde); font-size: 13px;
}
.totales b { margin-left: auto; font-size: 15px; }
.devuelto { color: #a4232a; font-size: 11.5px; }
.fuente-guia { font-size: 10px; color: var(--suave); font-style: italic; }
/* El genérico se ve distinto: no promete lo que no cumple */
.rastrear.generico { color: #c98a2e; }
.guia-num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--texto); }
.guia-num:hover { color: var(--acento); }
.pega-numero { font-size: 10.5px; color: #c98a2e; }
.folio-guia { font-size: 10.5px; color: var(--suave); }
/* El título de pedidos: "3 PEDIDOS  Ver más pedidos        $39,575" */
.bloque-pedidos h4 { text-transform: uppercase; gap: 8px; }
.ent-bodega, .ent-envio {
  padding: 0 5px; border-radius: 3px; font-size: 10px;
  border: 1px solid var(--borde); color: var(--suave);
}
.ent-bodega { border-color: #8b6d1f; color: #8b6d1f; }
.ent-envio { border-color: var(--acento); color: var(--acento); }

/* ── Botones que cambian de texto: ancho fijo ────────────────────────────
   "Marcar leído" ↔ "Marcar no leído" y "Archivar" ↔ "Desarchivar" cambian de
   largo al picarles. Sin ancho fijo, el botón se recorre —o brinca de renglón—
   y hay que buscarlo otra vez para dar el siguiente clic. Y estos son botones
   que se pican varias veces seguidas. */
.icono { display: inline-flex; align-items: center; justify-content: center; }
.ancho-leido { min-width: 104px; }
.ancho-archivo { min-width: 82px; }
.ancho-pin { min-width: 30px; }

/* ── El cuadro de escribir ───────────────────────────────────────────────
   Hugo: "en whatsapp web me cabe casi el doble de caracteres".
   Era el ancho del panel, no la letra. Con el panel centrado el hilo casi
   duplica su espacio; aquí se aprovecha: menos aire alrededor y el cuadro se
   estira hasta donde llega. */
.redactor { padding: 8px 14px 10px; }
.redactor form { gap: 10px; }
.redactor textarea {
  padding: 9px 14px;
  font-size: 14.5px;
  line-height: 1.4;
  max-height: 160px;
  /* Altura fija de arranque: si se dejara al navegador, elegiría una que no
     coincide con la de los renglones, y al primer tecleo el auto-crecer la
     cambiaba — recorriendo toda la conversación unos píxeles. */
  min-height: var(--alto-redactor);
  box-sizing: border-box;
  overflow-y: auto;
}
.redactor button[type="submit"] { padding: 9px 20px; flex-shrink: 0; }

/* El hilo también gana: burbujas más anchas ahora que hay dónde */
.mensajes { padding: 16px 22px; }
.burbuja { max-width: 68%; }
/* Un borrador recuperado parpadea un momento: si no, aparece texto que uno no
   escribió ahora y no queda claro de dónde salió */
.redactor.con-borrador textarea { border-color: #c98a2e; background: #fffdf6; }
@media (prefers-color-scheme: dark) {
  .redactor.con-borrador textarea { background: #2a2419; }
}

/* ── Estado del pedido en la ficha ───────────────────────────────────── */
.pedidos .entrega span {
  padding: 0 5px; border-radius: 3px; font-size: 9.5px;
  border: 1px solid var(--borde); white-space: nowrap;
}
.est-bien   { border-color: #2f9e6a; color: #2f9e6a; }
.est-espera { border-color: #c98a2e; color: #c98a2e; }
.est-malo   { border-color: #a4232a; color: #a4232a; }
.est-neutro { color: var(--suave); }
/* Un monto que no cuenta se ve, pero tachado: existió y no suma */
.no-cuenta { text-decoration: line-through; opacity: .5; }
.descartados {
  font-size: 10px; color: #a4232a; padding: 0 4px;
  border: 1px solid #a4232a; border-radius: 3px;
}
.est-grande { font-weight: 600; }
.est-crudo { color: var(--suave); border-color: var(--borde); font-size: 9.5px; }
.detalle-pedido .est-bien   { border-color: #2f9e6a; color: #2f9e6a; }
.detalle-pedido .est-espera { border-color: #c98a2e; color: #c98a2e; }
.detalle-pedido .est-malo   { border-color: #a4232a; color: #a4232a; }

/* ── Filtros de prioridad y hallazgos de la búsqueda ─────────────────── */
/* Los dos grupos de chips comparten tipografía y alto: antes eran 12.5 px/27 px
   contra 10.5 px/24 px y parecían dos componentes pegados, no dos filas del
   mismo. */
/* `#chips` existe solo para poder repintarlo de un golpe (hx-swap-oob). Con
   `display: contents` no cuenta para el acomodo: sus dos filas siguen siendo
   hijas del contenedor de la barra, como antes de que existiera. Sin esto, en
   el embudo se apilaban una debajo de otra —105 px de barra donde caben en
   una sola— porque el div se volvía un renglón completo. */
#chips { display: contents; }
.filtros.prioridades { margin-top: -4px; }
.filtros.prioridades a b { font-weight: 400; }
/* Los que no tienen nada siguen ahí y siguen a un clic, solo se ven apagados */
.filtros.prioridades a.vacio { opacity: .45; }

/* ── La bandeja: la lista manda ───────────────────────────────────────────
   La barra se comía 194 px de los 565 de la columna —el 34 %— y a la lista le
   quedaban cinco conversaciones a la vista. En una pantalla donde se pasa el
   día, el filtro es el medio y la lista es el fin.
   Aquí los chips de prioridad se quedan en icono + número: el nombre sigue en
   el `title` y los cuatro caben en un solo renglón. */
.columna.lista .filtros-barra { padding: 0; }
.columna.lista .filtros { gap: 3px; padding: 4px 8px 0; }
.columna.lista .filtros a { font-size: 11.5px; padding: 2px 6px; }
.columna.lista .filtros.prioridades a b { display: none; }
.columna.lista .filtros.prioridades { padding-bottom: 4px; }
.columna.lista .buscador { margin: 6px 8px; }
.columna.lista .buscador input { padding: 5px 9px; font-size: 12.5px; }

/* ── La fila de la bandeja: dos renglones ─────────────────────────────────
   El tercero repetía la etapa en 47 de 50 filas. Quitarlo bajó la fila de
   90 a 60 px: de cinco conversaciones a la vista a ocho. */
.columna.lista .fila { padding: 8px 12px; }
/* Alto fijo del renglón. Sin esto los emojis (🔥 ⭐ ⏳ 🧊) estiran la línea y
   las filas con prioridad medían 72 px contra 65 las demás — filas del mismo
   tipo con alturas distintas, que es justo lo que se nota al recorrer la
   lista con la vista. */
.fila .fila-abajo { align-items: center; gap: 5px; line-height: 18px; height: 18px; }
.fila .fila-abajo > * { line-height: 18px; }
.fila .fila-abajo .previa { flex: 1; min-width: 0; }
.fila .fila-abajo .prio { font-size: 11px; flex-shrink: 0; }
.fila .fila-abajo .ventana { flex-shrink: 0; }
.fila .fila-abajo .cuando-hallazgo { flex-shrink: 0; }
.previa.hallazgo { font-style: normal; }
.previa.hallazgo mark {
  background: #ffe08a; color: inherit; border-radius: 2px; padding: 0 1px;
}
.cuando-hallazgo { color: var(--suave); font-size: 10px; }
.hay-mas { padding: 8px 12px; color: var(--suave); font-size: 11px; text-align: center; }

/* ── Barra de filtros compartida (bandeja + embudo) ──────────────────── */
/* En la bandeja va en columna, dentro del panel angosto de la izquierda.
   En el embudo va en renglón, arriba del tablero, para no comerse alto. */
.app > .filtros-barra {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 16px; border-bottom: 1px solid var(--borde);
}
.app > .filtros-barra .buscador { max-width: 320px; margin: 0; }
.app > .filtros-barra .filtros { margin: 0; }
/* El input ocupa TODO el formulario. Antes no: se quedaba en su ancho
   intrínseco (178 px de los 320 disponibles) y arrancaba 10 px a la derecha
   del borde del form. Como la ✕ se coloca respecto al form, terminaba montada
   sobre el borde derecho del input en vez de dentro. Lo reportó Hugo.
   Con el input a `flex: 1` y sin margen, las dos cajas coinciden y `right`
   significa lo que parece. */
.buscador { position: relative; display: flex; align-items: center; }
.buscador input { flex: 1; min-width: 0; margin: 0; }
/* Dentro de la barra de filtros el formulario NO lleva relleno propio.
   Lo heredaba del diseño viejo, cuando el buscador era su propio bloque con
   borde abajo. Esos 10 px hacían que el input arrancara adentro del form, y
   como la ✕ se coloca respecto al form, terminaba 2 px FUERA del borde del
   input — montada en la orilla. Sin el relleno, las dos cajas son la misma y
   `right: 8px` cae donde parece. */
.filtros-barra .buscador { padding: 0; border-bottom: 0; }
/* Cuando hay ✕, el texto no le pasa por debajo: se le reserva su lugar. Con
   "Armando" no se nota; con un SKU largo el término quedaría escrito bajo el
   botón. */

/* ⚠️ Chrome le pinta su PROPIA ✕ a los `input[type=search]` al pasar el cursor,
   encima de la nuestra: salían dos. Lo reportó Hugo.
   Se queda la nuestra y no la del navegador porque no hacen lo mismo: la
   nativa solo vacía el campo, y la nuestra es un enlace a la dirección sin
   búsqueda — limpia también del lado del servidor y deja el historial bien.
   Además la nuestra se ve siempre que hay texto, no solo al pasar por encima. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.buscador .limpiar {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: var(--suave); text-decoration: none; font-size: 13px; padding: 0 3px;
}
.buscador .limpiar:hover { color: var(--texto); }
/* Se ve solo cuando hay algo escrito. `:placeholder-shown` es verdadero
   mientras el campo está vacío, así que el CSS lo resuelve sin JS y funciona
   igual tecleando que llegando con la búsqueda en la dirección.
   ⚠️ `input[type="search"]` y no `input` a secas: en el formulario también van
   los campos OCULTOS de filtro y prioridad, y un `hidden` nunca muestra
   placeholder — así que `:has(input:not(:placeholder-shown))` era verdadero
   siempre y la ✕ salía con el campo vacío. */
.buscador .limpiar { display: none; }
.buscador:has(input[type="search"]:not(:placeholder-shown)) .limpiar { display: block; }
.filtros-barra .buscador:has(input[type="search"]:not(:placeholder-shown)) input { padding-right: 26px; }

/* ── Menú de clic derecho ────────────────────────────────────────────── */
.menu-tarjeta {
  position: fixed; z-index: 90; min-width: 208px; max-width: 260px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 9px;
  box-shadow: 0 8px 28px rgba(0,0,0,.22); padding: 6px; outline: none;
  font-size: 12.5px;
}
.menu-tarjeta > header {
  padding: 4px 8px 7px; font-weight: 600; color: var(--texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid var(--borde); margin-bottom: 4px;
}
.menu-tarjeta button, .menu-tarjeta a { font-size: 12.5px; }
.mt-accion, .mt-enlace {
  display: block; width: 100%; text-align: left; margin: 0;
  padding: 6px 8px; border-radius: 6px; border: 0;
  background: transparent; color: var(--texto); cursor: pointer;
  text-decoration: none;
}
.mt-accion:hover, .mt-enlace:hover { background: var(--fondo); }
.mt-peligro { color: #a4232a; }
.mt-suave { color: var(--suave); }
.mt-separador { height: 1px; background: var(--borde); margin: 5px 2px; }
.mt-titulo {
  padding: 5px 8px 3px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .3px; color: var(--suave);
}
.mt-fila { display: flex; gap: 3px; padding: 0 6px 3px; }
.mt-chip {
  width: auto; flex: 1; margin: 0; padding: 5px 0; text-align: center;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  cursor: pointer; color: var(--suave);
}
.mt-chip:hover { background: var(--fondo); }
.mt-chip.activo { border-color: var(--acento); background: var(--fondo); }
.mt-select {
  width: calc(100% - 12px); margin: 0 6px 3px; padding: 5px 7px;
  font-size: 12.5px; border: 1px solid var(--borde); border-radius: 6px;
  background: var(--fondo); color: var(--texto);
}
.mt-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px 5px; }
.mt-etiq {
  display: inline-flex; align-items: center; gap: 2px; font-size: 11px;
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 10px; padding: 1px 3px 1px 8px;
}
.mt-quitar {
  width: auto; margin: 0; padding: 0 4px; background: transparent; border: 0;
  color: var(--suave); cursor: pointer; font-size: 13px; line-height: 1;
}
.mt-quitar:hover { color: #a4232a; }
.mt-vacio { color: var(--suave); font-size: 11px; }
.mt-etiqueta-nueva {
  width: calc(100% - 12px); margin: 0 6px 4px; padding: 5px 7px;
  font-size: 12px; border: 1px solid var(--borde); border-radius: 6px;
  background: var(--fondo); color: var(--texto);
}
.mt-aviso {
  position: absolute; right: 10px; bottom: 8px; font-size: 11px;
  background: var(--texto); color: var(--tarjeta);
  padding: 2px 7px; border-radius: 9px;
}

/* ── Clientes ────────────────────────────────────────────────────────── */
.tabla-envoltura { overflow: auto; padding: 0 16px 24px; }
.tabla-clientes { max-width: 1100px; }
.tabla-clientes td small { display: block; color: var(--suave); font-size: 10.5px; }
.tabla-clientes .dinero { font-weight: 600; }
.tabla-clientes tr.sin-leer td:first-child { border-left: 2px solid var(--acento); }
.tabla-clientes a.fila { text-decoration: none; color: var(--texto); font-weight: 500; }
.tabla-clientes a.fila:hover { text-decoration: underline; }
/* El silencio se ve antes de leerse: es la columna por la que se entra aquí */
.callado { font-variant-numeric: tabular-nums; color: var(--suave); }
.callado.algo { color: #c98a2e; }
.callado.mucho { color: #a4232a; font-weight: 600; }

/* ── Buscar dentro de la conversación ────────────────────────────────── */
.cab-buscar { display: flex; align-items: center; }
.lupa {
  width: auto; margin: 0; padding: 3px 6px; background: transparent;
  border: 1px solid transparent; border-radius: 6px; cursor: pointer;
  font-size: 13px; opacity: .6;
}
.lupa:hover { opacity: 1; background: var(--fondo); }
.buscar-hilo { display: none; align-items: center; gap: 4px; }
.hilo-cab.buscando .buscar-hilo { display: flex; }
.hilo-cab.buscando .lupa { display: none; }
.buscar-hilo input {
  width: 190px; margin: 0; padding: 4px 8px; font-size: 12.5px;
  border: 1px solid var(--borde); border-radius: 6px;
  background: var(--fondo); color: var(--texto);
}
.cerrar-buscar {
  width: auto; margin: 0; padding: 2px 5px; background: transparent;
  border: 0; color: var(--suave); cursor: pointer;
}
/* Los resultados caen sobre el hilo, como una cortina: se ven junto a la
   conversación, no en lugar de ella. */
.hallazgos-hilo {
  display: none; position: absolute; top: 100%; right: 0; z-index: 40;
  width: min(420px, 92%); max-height: 62vh; overflow-y: auto;
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: 0 0 10px 10px; box-shadow: 0 10px 26px rgba(0,0,0,.2);
}
.hilo-cab.buscando .hallazgos-hilo:not(:empty) { display: block; }
.hallazgos-cuenta {
  padding: 6px 12px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .3px; color: var(--suave); border-bottom: 1px solid var(--borde);
}
.hallazgo-fila {
  display: block; padding: 7px 12px; text-decoration: none; color: var(--texto);
  border-bottom: 1px solid var(--borde); font-size: 12.5px;
}
.hallazgo-fila:hover { background: var(--fondo); }
.hallazgo-fila time { display: block; font-size: 10.5px; color: var(--suave); }
.hallazgo-fila mark { background: #ffe08a; color: inherit; border-radius: 2px; }
.hallazgos-vacio { padding: 12px; color: var(--suave); font-size: 12.5px; margin: 0; }
.hilo-cab { position: relative; }

/* El mensaje al que se saltó: se ve de inmediato y el resalte se apaga solo */
.msg.enfocado .burbuja {
  outline: 2px solid var(--acento); outline-offset: 2px;
  animation: aparece-enfoque 2.4s ease-out forwards;
}
@keyframes aparece-enfoque {
  0%, 55% { outline-color: var(--acento); }
  100% { outline-color: transparent; }
}
.msg .burbuja mark { background: #ffe08a; color: inherit; border-radius: 2px; padding: 0 1px; }
/* El de abajo lleva el margen del otro lado */
.mas-nuevos { margin: 10px 0 0; }

/* ── B4: el encabezado de Clientes se queda a la vista ────────────────────
   Son 60 filas en una tabla de 4,400 px: a la tercera pantalla ya no se sabe
   cuál columna es "Han comprado" y cuál "Sin escribir". */
.tabla-clientes thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--tarjeta);
  box-shadow: inset 0 -1px 0 var(--borde);
}
/* Un pedido sin renglones: se dice qué falta en vez de dejar el cuadro mudo */
.sin-lineas {
  margin: 10px 0 0; padding: 10px 12px; font-size: 12.5px; color: var(--suave);
  background: var(--fondo); border: 1px dashed var(--borde); border-radius: 8px;
}
.sin-lineas small { display: block; margin-top: 3px; font-size: 11px; opacity: .8; }

/* ── Editar una respuesta sin salir de la conversación ────────────────── */
.s-editar {
  width: auto; margin: 0 0 0 auto; padding: 1px 6px; font-size: 12px;
  background: transparent; border: 1px solid transparent; border-radius: 5px;
  color: var(--suave); cursor: pointer; opacity: 0;
}
.sugerencias li:hover .s-editar,
.sugerencias li.elegida .s-editar { opacity: .75; }
.s-editar:hover { opacity: 1; background: var(--fondo); border-color: var(--borde); }
/* En edición, la sugerencia deja de comportarse como opción de la lista */
.sugerencias li.editando { background: var(--fondo); cursor: default; }
.sugerencias li.editando .s-cuerpo, .sugerencias li.editando .s-faltan { display: none; }
.s-editor { display: flex; flex-direction: column; gap: 5px; padding: 6px 0 2px; }
.s-editor input, .s-editor textarea {
  width: 100%; margin: 0; padding: 5px 8px; font-size: 12.5px;
  border: 1px solid var(--borde); border-radius: 6px;
  background: var(--tarjeta); color: var(--texto);
}
.s-editor textarea { min-height: 76px; resize: vertical; }
.s-editor-pie { display: flex; align-items: center; gap: 6px; }
.s-editor-pie button {
  width: auto; margin: 0; padding: 4px 10px; font-size: 12px;
}
.s-editor-pie .s-cancelar { background: transparent; color: var(--suave); border: 1px solid var(--borde); }
.s-editor-pie small { color: var(--suave); font-size: 10.5px; margin-left: auto; }
.s-editor-error { color: var(--error-texto); font-size: 11.5px; }

/* ── Desplegable de {{variables}} dentro del editor ───────────────────── */
.s-vars {
  list-style: none; margin: 3px 0 0; padding: 3px;
  max-height: 168px; overflow-y: auto;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 7px;
}
.s-vars li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 7px; border-radius: 5px; cursor: pointer;
}
.s-vars li.elegida, .s-vars li:hover { background: var(--fondo); }
.s-vars code { color: var(--acento); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.s-vars span { color: var(--suave); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── El archivo que va con el mensaje ─────────────────────────────────── */
.s-adj { font-size: 11px; opacity: .8; }
.adjunto-pegado {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px; margin-bottom: -2px;
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 8px; font-size: 12px;
}
.adjunto-pegado[hidden] { display: none; }
.ap-nombre { flex: 1; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-quitar {
  width: auto; margin: 0; padding: 0 5px; min-width: 0;
  background: transparent; border: 0; color: var(--suave); cursor: pointer;
}
.ap-quitar:hover { color: var(--error-texto); }
.ap-miniatura {
  width: 34px; height: 34px; object-fit: cover;
  border-radius: 5px; border: 1px solid var(--borde); flex-shrink: 0;
  cursor: zoom-in;
}
.ap-miniatura[hidden], .ap-icono[hidden] { display: none; }

/* "Directo": el pedido llegó sin que nadie lo trabajara. Sello discreto y no
   alarmante — es información para la comisión, no un problema. El asterisco
   dice que alguien lo corrigió a mano. */
.sello-directo {
  display: inline-block; margin-left: 5px; padding: 1px 6px;
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
  color: var(--suave); background: var(--fondo);
  border: 1px solid var(--borde); border-radius: 999px;
  vertical-align: middle; cursor: help;
}

/* ── Conectar WhatsApp ───────────────────────────────────────────────────
   Pantalla peligrosa: se lee entera antes de tocar nada, así que ancho de
   lectura y aire. Nada de esto se parece al resto del CRM a propósito. */
.conectar { max-width: 720px; margin: 32px auto; padding: 0 20px; line-height: 1.55; }
.conectar h1 { font-size: 22px; margin-bottom: 18px; }
.conectar h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em;
               color: var(--suave); margin: 22px 0 8px; }
.cn-actual { padding: 14px 16px; background: var(--fondo);
             border: 1px solid var(--borde); border-radius: 8px; }
.cn-actual code { font-size: 12px; }
.cn-aviso { margin: 22px 0; padding: 14px 18px;
            border-left: 3px solid #d97706; background: #fffbeb; border-radius: 0 8px 8px 0; }
.cn-aviso li { margin: 8px 0; }
.cn-boton { padding: 11px 20px; font-size: 15px; font-weight: 600;
            background: var(--verde, #16a34a); color: #fff; border: 0;
            border-radius: 8px; cursor: pointer; }
.cn-falta { padding: 16px 18px; background: var(--fondo);
            border: 1px dashed var(--borde); border-radius: 8px; }
.cn-falta ol { margin: 10px 0 10px 18px; }
.cn-falta li { margin: 6px 0; }
.cn-resultado { margin-top: 18px; padding: 14px 16px; background: var(--fondo);
                border: 1px solid var(--borde); border-radius: 8px; }
.cn-clave form { margin: 20px 0; display: flex; flex-direction: column; gap: 6px;
                 max-width: 340px; }
.cn-clave input { padding: 9px 11px; font-size: 15px;
                  border: 1px solid var(--borde); border-radius: 7px; }
/* `--papel` no existe: la variable nunca se definio, asi que `color` quedaba
   invalido, heredaba el texto oscuro y el boton salia negro sobre negro.
   `--fondo` da el contraste correcto en los dos temas: claro sobre oscuro
   en modo claro, y oscuro sobre claro en modo oscuro. */
.cn-clave button { padding: 10px; font-size: 15px; font-weight: 600;
                   background: var(--texto); color: var(--fondo);
                   border: 0; border-radius: 7px; cursor: pointer; }
.cn-error { color: #b91c1c; font-weight: 600; }
.primeros-pasos { max-width: 560px; margin: 48px auto; padding: 0 24px;
                  line-height: 1.6; color: var(--texto); }
.primeros-pasos h2 { font-size: 17px; margin-bottom: 12px; }
.primeros-pasos p { margin: 12px 0; font-size: 14px; color: var(--suave); }
.pp-numero { color: var(--texto); font-size: 15px; }
/* El párrafo en inglés es para el revisor de Meta, que no lee español. Va
   atenuado y separado para que no compita con el texto del equipo. */
.pp-en { font-size: 13px; padding-top: 12px; border-top: 1px solid var(--borde); }
/* Variante para el embudo: aquí el aviso va ENCIMA del tablero, así que no
   puede ser una columna centrada de 560 px — empujaba los títulos de las
   etapas media pantalla hacia abajo. Ancho completo y alto mínimo. */
.pp-tira .primeros-pasos { max-width: none; margin: 8px 12px; padding: 10px 14px;
                           background: var(--fondo); border: 1px solid var(--borde);
                           border-radius: 8px; }
.pp-tira .primeros-pasos h2 { font-size: 14px; margin-bottom: 2px; }
.pp-tira .primeros-pasos p { margin: 3px 0; }
.pp-tira .pp-en { padding-top: 6px; }
.cn-cuentas { padding: 14px 16px; background: var(--fondo);
              border: 1px solid var(--borde); border-radius: 8px; }
.cn-cuentas table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cn-cuentas th { text-align: left; font-size: 11px; text-transform: uppercase;
                 letter-spacing: .04em; color: var(--suave); font-weight: 600;
                 padding: 0 8px 6px 0; }
.cn-cuentas td { padding: 7px 8px 7px 0; border-top: 1px solid var(--borde); }
.cn-cuentas code { font-size: 12px; color: var(--suave); }
.cn-marca { display: inline-block; padding: 2px 8px; border-radius: 999px;
            background: var(--verde, #16a34a); color: #fff;
            font-size: 11px; font-weight: 600; white-space: nowrap; }
.cn-ojo { margin: 12px 0 0; font-size: 13px; color: var(--suave); }
@media (prefers-color-scheme: dark) {
  .cn-aviso { background: #2a2010; }
}

/* ── Lo que Ana habría contestado (modo sombra) ─────────────────────────
   Se ve DISTINTO a un mensaje a propósito: rayado diagonal, sin burbuja, sin
   los colores de entrante/saliente. Si se pareciera a un mensaje real, algún
   día alguien va a creer que ya se envió — y ese error no se puede deshacer,
   porque la duda queda del lado del cliente, no del nuestro. */
.sugerencia {
  margin: 0 12px 8px;
  padding: 10px 12px;
  border: 1px dashed var(--acento);
  border-radius: var(--radio);
  background: repeating-linear-gradient(
    45deg, transparent, transparent 8px,
    color-mix(in srgb, var(--acento) 5%, transparent) 8px,
    color-mix(in srgb, var(--acento) 5%, transparent) 16px);
  font-size: .92rem;
}
.sug-cabecera { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sug-quien { font-weight: 600; color: var(--acento); }
.sug-accion {
  font-size: .8rem; padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--acento) 15%, transparent);
}
/* En letra chica pero SIEMPRE presente: es la diferencia entre revisar y creer
   que ya se mandó. */
.sug-nota { margin-left: auto; font-size: .78rem; color: var(--suave); }
.sug-texto { margin: 8px 0 0; white-space: pre-wrap; }
.sug-motivo { margin: 6px 0 0; color: var(--suave); font-size: .86rem; }

.sug-datos { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; }
.sug-datos div { display: flex; gap: 5px; font-size: .84rem; }
.sug-datos dt { color: var(--suave); }
.sug-datos dt::after { content: ':'; }
.sug-datos dd { margin: 0; font-weight: 500; }

.sug-veredicto { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.sug-veredicto button {
  padding: 4px 12px; border-radius: var(--radio); cursor: pointer;
  border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto);
}
.sug-si { border-color: var(--acento) !important; color: var(--acento) !important; }
.sug-no { color: var(--error-texto) !important; }
.sug-costo { margin-left: auto; color: var(--suave); font-size: .76rem; }

/* Cuando decide callarse o escalar no hay texto que juzgar: se apaga el bloque
   para que no compita visualmente con una propuesta de respuesta. */
.sug-callar, .sug-escalar { opacity: .82; }

.sug-listo, .sug-ya {
  color: var(--suave); border-style: solid; background: none; text-align: center;
}

/* ── Cómo va Ana ────────────────────────────────────────────────────────
   Una cifra grande y sola arriba: es la única que contesta "¿ya está lista?".
   Todo lo demás explica; ésa decide. */
.calidad { max-width: 820px; margin: 0 auto; padding: 20px 16px 60px; }
.cal-sub { color: var(--suave); margin-top: -6px; }

.cal-principal {
  display: flex; align-items: center; gap: 18px;
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 22px; margin: 18px 0;
}
.cal-cifra { font-size: 3.2rem; font-weight: 700; color: var(--acento); line-height: 1; }
.cal-pie { color: var(--suave); }
.cal-pie small { opacity: .8; }

.cal-aviso {
  background: var(--error-fondo); color: var(--error-texto);
  padding: 9px 12px; border-radius: var(--radio); font-size: .9rem;
}

.cal-cajas { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 26px; }
.cal-cajas div {
  flex: 1 1 140px; background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 10px 12px;
  font-size: .82rem; color: var(--suave);
}
.cal-cajas span { display: block; font-size: 1.15rem; font-weight: 600; color: var(--texto); }

.cal-tabla { width: 100%; border-collapse: collapse; margin-bottom: 28px; }
.cal-tabla th, .cal-tabla td {
  text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--borde);
}
.cal-tabla th { font-size: .8rem; color: var(--suave); font-weight: 600; }

.cal-lista { list-style: none; padding: 0; display: grid; gap: 8px; }
.cal-item {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-left: 3px solid var(--borde);
  border-radius: var(--radio); padding: 10px 12px;
}
.cal-bueno { border-left-color: var(--acento); }
.cal-malo  { border-left-color: var(--error-texto); }
.cal-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
            font-size: .8rem; color: var(--suave); }
.cal-item p { margin: 6px 0 0; }
.cal-acc { padding: 0 7px; border-radius: 999px; background: var(--fondo); }
.cal-ok { color: var(--acento); }
.cal-mal { color: var(--error-texto); }

/* ── Revisión de atención (comisiones) ──────────────────────────────────
   Pantalla de una sola persona, se abre una vez al mes. Se prioriza leer
   rápido 50 renglones y marcar, no la densidad. */
.at-pagina { max-width: 1100px; margin: 24px auto; padding: 0 20px; }
.at-pagina h1 { font-size: 22px; margin-bottom: 10px; }
.at-intro { color: var(--suave); font-size: 14px; line-height: 1.55; max-width: 760px; }
.at-filtro { display: flex; gap: 12px; align-items: end; margin: 20px 0 14px; }
.at-filtro label { display: flex; flex-direction: column; gap: 4px;
                   font-size: 12px; color: var(--suave); }
.at-filtro input { padding: 7px 9px; border: 1px solid var(--borde);
                   border-radius: 7px; font-size: 14px; }
.at-filtro button { padding: 8px 14px; border: 1px solid var(--borde);
                    border-radius: 7px; background: var(--fondo);
                    cursor: pointer; font-size: 14px; color: var(--texto); }
.at-resumen { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px;
              padding: 12px 14px; background: var(--fondo);
              border: 1px solid var(--borde); border-radius: 8px; }
.at-resumen .at-at b { color: #16a34a; }
.at-resumen .at-di b { color: #d97706; }
.at-ciego-res { color: #b91c1c; }
.at-tabla { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; }
.at-tabla th { text-align: left; font-size: 11px; text-transform: uppercase;
               letter-spacing: .04em; color: var(--suave); font-weight: 600;
               padding: 0 8px 6px 0; }
.at-tabla td { padding: 8px 8px 8px 0; border-top: 1px solid var(--borde);
               vertical-align: middle; }
.at-monto { text-align: right; white-space: nowrap; }
.at-marca { display: inline-block; padding: 2px 8px; border-radius: 999px;
            font-size: 11px; font-weight: 600; }
.at-atendido { background: rgba(22,163,74,.14); color: #16a34a; }
.at-directo { background: rgba(217,119,6,.14); color: #d97706; }
.at-mano { font-size: 11px; color: var(--suave); margin-left: 4px; }
.at-motivo { font-size: 12px; color: var(--suave); }
/* Los ciegos se ven distinto a propósito: no son "directo", son "no sé". */
.at-fila-ciega { background: rgba(185,28,28,.05); }
.at-fila-ciega .at-motivo { color: #b91c1c; }
.at-acciones { display: flex; gap: 10px; align-items: center; margin: 18px 0;
               font-size: 14px; }
.at-acciones button { padding: 9px 16px; border: 0; border-radius: 8px;
                      background: #16a34a; color: #fff; font-weight: 600;
                      cursor: pointer; font-size: 14px; }
.at-acciones button.secundario { background: var(--fondo); color: var(--texto);
                                 border: 1px solid var(--borde); }