/* El panel del mostrador.
 *
 * A doble color (Ale, 30/09): una barra en noche a la izquierda con el
 * logotipo, el negocio y las secciones, y a la derecha la pared gris-azulada
 * muy clara con tarjetas de papel blanco teñidas con el color de su semáforo.
 * El azul de la marca vive en pocos sitios: el mate del logotipo (sobre
 * noche, en el azul claro), el botón primario y, como marca de selección, la
 * píldora de la sección activa y el contorno de la tarjeta elegida. No pinta
 * fondos; noche sí, pero solo la barra.
 *
 * Cuatro anchos: escritorio (≥1180: barra · pared · conversación · ficha),
 * tableta ancha (1024–1179: la ficha se pliega arriba de la conversación),
 * tableta (760–1023: la barra se estrecha a solo iconos) y celular (<760:
 * una cosa a la vez, la barra es el renglón de arriba y las secciones van
 * abajo). */

/* Las fuentes viven aquí, en `fuentes/`, y no en Google: el panel se abre
   desde un aviso en el celular con red mala, y sin ellas el logotipo saldría
   en la del sistema. Solo el subconjunto latino (acentos, ñ, «» y rayas).
   El trabajador de fondo (`sw.js`) las guarda para abrir sin red: si se
   añade una aquí, se añade allá. */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fuentes/outfit-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fuentes/figtree.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fuentes/ibm-plex-mono-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fuentes/ibm-plex-mono-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --pared:  #EEF1F5;
  --papel:  #FFFFFF;
  --tinta:  #14171F;
  --tinta2: #4B5563;
  --tinta3: #6B7280;
  --linea:  #DCE2EA;
  --azul:   #096ACC;
  --azul2:  #1F81DF;
  --noche:  #052E59;
  --sobre-noche: #FFFFFF;
  /* La barra de al lado: noche en claro y en oscuro (Marca.md lo permite
     como fondo oscuro de marca). Sobre noche, el azul de marca no se lee: el
     mate y la marca de sección van en el azul claro del modo oscuro. */
  --lado: #052E59;
  --sobre-lado: #FFFFFF;
  --lado-azul: #4C9BEA;
  --lado-ancho: 224px;

  /* El semáforo: relleno (píldora) y tinta (texto sobre papel). */
  --listo: #1D9A5B; --listo-t: #157A47; --listo-fuerte: #157A47;
  --comp:  #D48A00; --comp-t:  #8A5A00;
  --cur:   #6D4FE0; --cur-t:   #5439C2;
  --no:    #8A94A6; --no-t:    #5B6573;
  --tinte: 8%;

  --sombra: 0 1px 2px rgba(20,23,31,.06), 0 4px 12px rgba(20,23,31,.05);
  --sombra-alta: 0 8px 24px rgba(20,23,31,.16), 0 2px 6px rgba(20,23,31,.08);
  /* El panel de la conversación sobre el tablero (1.11): sombra solo hacia la izquierda. */
  --sombra-panel: -14px 0 32px rgba(20,23,31,.12), -2px 0 6px rgba(20,23,31,.06);

  --sans:  Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  --out:   Outfit, Figtree, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --suave: cubic-bezier(.2, .8, .2, 1);
  --cab: 56px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pared:  #0E141C;
    --papel:  #161E29;
    --tinta:  #EDF1F5;
    --tinta2: #B3BCC9;
    --tinta3: #8A94A6;
    --linea:  #26303D;
    --listo-t: #5FD39A; --comp-t: #F2B84B; --cur-t: #A891FF; --no-t: #A3ACBA;
    --noche:  #096ACC;
    --tinte: 15%;
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
    --sombra-alta: 0 10px 28px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
    --sombra-panel: -16px 0 36px rgba(0,0,0,.5), -2px 0 6px rgba(0,0,0,.35);
  }
  /* En oscuro la barra sigue en noche, que ahí casi se funde con la pared:
     una línea tenue las separa. */
  .lado { box-shadow: inset -1px 0 rgba(255, 255, 255, .07); }
}

/* ── Base ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; }

html { height: 100%; }
body {
  height: 100%;
  display: grid;
  grid-template-columns: var(--lado-ancho) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  background: var(--pared);
  color: var(--tinta);
  font: 400 14px/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  caret-color: var(--azul);
  accent-color: var(--azul);
  scrollbar-color: color-mix(in srgb, var(--tinta3) 45%, transparent) transparent;
  scrollbar-width: thin;
}
::selection { background: color-mix(in srgb, var(--azul) 22%, transparent); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--tinta3) 40%, transparent); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.out  { font-family: var(--out); font-weight: 600; }
.ic { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.3em; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── La barra de al lado ───────────────────────────────────────────────── */

.lado {
  grid-column: 1; grid-row: 1;
  background: var(--lado); color: var(--sobre-lado);
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 12px 14px;
  min-height: 0; overflow: hidden auto;
  /* Sobre noche, «azul» es el claro: el mate del logotipo, el foco y el
     contador de «Te toca». */
  --azul: var(--lado-azul);
}
.lado .logo { padding: 0 8px; margin-bottom: 16px; color: var(--sobre-lado); }

.logo {
  font-family: var(--out); font-weight: 600; font-size: 22px; letter-spacing: -.01em;
  display: inline-flex; align-items: center; line-height: 1;
  color: var(--tinta);
}
.mate { display: inline-block; height: .86em; width: .92em; vertical-align: -.06em; margin: 0 .02em; overflow: visible; }
.mate .ojos { transform-box: fill-box; transform-origin: center; transition: transform .45s var(--suave); }
.mate .ojo  { transform-box: fill-box; transform-origin: center; transition: transform .35s var(--suave); }
.mate.parpadeo .ojo { transform: scaleY(.12); transition-duration: .08s; }
.mate.cerrado  .ojo { transform: scaleY(.12); }
.mate.abierto  .ojo { transform: scaleY(1.22) scaleX(1.12); }
.mate-grande { width: 68px; height: 64px; display: block; margin: 0 auto 10px; }

.negocio { display: flex; align-items: center; padding: 0 8px; margin-bottom: 14px; }
.negocio__nombre, .negocio select {
  display: inline-flex; align-items: center; gap: 6px; width: 100%;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
  padding: 6px 12px; font-weight: 500; font-size: 13px;
  background: rgba(255, 255, 255, .08); color: var(--sobre-lado);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.negocio select {
  appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-opacity='.7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
}
.negocio select:hover { background-color: rgba(255, 255, 255, .13); }
.negocio select option { color: var(--tinta); background: var(--papel); }

.secciones { display: flex; flex-direction: column; gap: 2px; }
.seccion {
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 10px 0 12px; border-radius: 10px;
  color: rgba(255, 255, 255, .72); font-weight: 500; font-size: 14px; text-align: left;
  transition: color .15s, background .15s;
}
.seccion .ic { width: 18px; height: 18px; }
.seccion span { flex: 1; }
.seccion:hover { color: var(--sobre-lado); background: rgba(255, 255, 255, .06); }
.seccion.activa { color: var(--sobre-lado); background: rgba(255, 255, 255, .1); }
/* La marca de la sección activa es la píldora del ojo del mate, en azul claro. */
.seccion::before {
  content: ''; position: absolute; left: -4px; top: 50%; width: 4px; height: 16px; margin-top: -8px;
  border-radius: 2px; background: var(--lado-azul);
  transform: scaleY(0); transition: transform .25s var(--suave);
}
.seccion.activa::before { transform: none; }
.seccion em {
  font-style: normal; font-size: 11px; font-weight: 500; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--lado-azul); color: var(--lado); display: grid; place-items: center;
}

.lado__pie { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
.saldo { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; border-radius: 10px; padding: 8px 12px; margin-bottom: 4px; }
.saldo:hover { background: rgba(255, 255, 255, .06); }
.saldo small { font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, .55); letter-spacing: .05em; text-transform: uppercase; }
.saldo b { font-weight: 500; font-size: 15px; color: var(--sobre-lado); }
.campana {
  position: relative; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px;
  border-radius: 10px; color: rgba(255, 255, 255, .72); font-weight: 500; font-size: 14px;
}
.campana:hover { background: rgba(255, 255, 255, .06); color: var(--sobre-lado); }
.campana .ic { width: 18px; height: 18px; }
.campana span { flex: 1; text-align: left; }
.campana em {
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  background: var(--listo-fuerte); color: #fff; font-style: normal; font-size: 11px; font-weight: 500;
  font-family: var(--mono); display: grid; place-items: center;
}
.yo { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; text-align: left; min-width: 0; }
.yo:hover { background: rgba(255, 255, 255, .06); }
.inicial {
  width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: var(--sobre-lado);
  display: grid; place-items: center; font-weight: 600; font-size: 13px; font-family: var(--out); flex: none;
}
.yo__quien { min-width: 0; display: grid; line-height: 1.2; }
.yo__quien b { font-weight: 600; font-size: 13px; color: var(--sobre-lado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yo__quien small { font-size: 11.5px; color: rgba(255, 255, 255, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

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

main { grid-column: 2; grid-row: 1; min-height: 0; display: grid; }
.vista { min-height: 0; }
.hoja { overflow: auto; padding: 24px 28px 40px; }
.hoja h2 { font-family: var(--out); font-weight: 600; font-size: 20px; letter-spacing: -.01em; }
.ayuda { color: var(--tinta3); font-size: 13px; max-width: 60ch; }
.cargando { color: var(--tinta3); font-size: 13px; }

/* ── Bandeja: tres columnas ───────────────────────────────────────────── */

.bandeja { display: grid; grid-template-columns: 340px minmax(0, 1fr) 320px; min-height: 0; }
.bandeja:not(.abierta) .conv { grid-column: 2 / 4; }

.pared {
  border-right: 1px solid var(--linea);
  padding: 14px 14px 0;
  overflow: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 0;
}
.buscar {
  display: flex; align-items: center; gap: 8px; flex: none;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 10px;
  padding: 7px 10px; color: var(--tinta3); font-size: 13px;
  transition: border-color .15s;
}
.buscar:focus-within { border-color: var(--azul); }
.buscar input { flex: 1; border: 0; background: none; outline: none; min-width: 0; color: var(--tinta); }
.buscar input::placeholder { color: var(--tinta3); }
.buscar input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Las pestañas de la pared (1.7): en todos los anchos, una lista a la vez. */
.pestanas { display: flex; gap: 14px; margin: 0 -14px; padding: 0 14px; border-bottom: 1px solid var(--linea); background: var(--papel); flex: none; overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana { font-weight: 500; font-size: 13.5px; color: var(--tinta2); padding: 10px 0; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; min-height: 40px; }
.pestana span { font-family: var(--mono); font-size: 12px; color: var(--tinta3); margin-left: 5px; }
.pestana.activa { color: var(--tinta); border-color: var(--azul); }
.pared__cab { display: flex; gap: 8px; flex: none; }
.pared__cab .buscar { flex: 1; min-width: 0; }
.pared__cab .btn { padding: 7px 11px; font-size: 13px; }

/* Filtros por semáforo: las mismas píldoras de «corregir semáforo» de la
   ficha. Los cuatro en un renglón (por eso «No cliente» y no «No es
   cliente»); donde no caben (la pared de 300 px de la tableta), se deslizan. */
.filtros { display: flex; gap: 4px; flex: none; overflow-x: auto; scrollbar-width: none; margin: -4px -14px; padding: 0 14px; }
/* Con «Todas» y «Sin leer» (1.7) son seis y no caben en 340 px: el renglón se desliza y el borde derecho se desvanece para que se note. */
.filtros { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.filtros::-webkit-scrollbar { display: none; }
.filtros button {
  font-size: 11.5px; border: 1px solid var(--linea); background: transparent; color: var(--tinta2);
  border-radius: 999px; padding: 4px 7px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex: none;
  transition: border-color .15s, color .15s, background .15s;
}
.filtros button .pildora { width: 5px; height: 11px; border-radius: 3px; }
.filtros button .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--azul); flex: none; }
.filtros button:hover { color: var(--tinta); }
.filtros button.act { border-color: var(--tinta); color: var(--tinta); background: var(--papel); }

.franjas { display: flex; flex-direction: column; padding-bottom: 14px; }
.franja { display: none; }
.franja.activa { display: block; }
[data-n].cambio, [data-cn].cambio { display: inline-block; animation: salta .4s var(--suave); }
@keyframes salta { 30% { transform: translateY(-3px) scale(1.15); } }
/* El recuadro de la franja (1.7): las filas van dentro, una tras otra,
   separadas por una línea. Sin sombra: no es una pieza suelta, es la lista. */
.franja .tarjetas { display: flex; flex-direction: column; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.franja.vacia .tarjetas { display: none; }
.franja__vacia { display: none; color: var(--tinta3); font-size: 12.5px; padding: 2px 2px 0; }
.franja.vacia .franja__vacia { display: block; }
.pared__estado { color: var(--tinta3); font-size: 12.5px; padding: 0 2px; }

/* La fila (1.7, «Bandeja pulida»; antes, tarjeta suelta con sombra): barra de
   semáforo · avatar · cuerpo, dentro del recuadro de su franja. La que tiene
   algo nuevo del cliente va teñida con su semáforo (regla del tinte); la
   leída es papel liso con el nombre un tono abajo. Conserva la clase
   `.tarjeta` para que el FLIP y los manejadores de panel.js no cambien. */
.tarjeta {
  display: grid; grid-template-columns: 4px 36px minmax(0, 1fr); gap: 0 10px; align-items: start;
  background: var(--papel); padding: 10px 12px 9px 8px;
  border-bottom: 1px solid var(--linea);
  position: relative; cursor: pointer;
  transition: transform .35s var(--suave), opacity .35s, background-color .35s;
  will-change: transform;
}
.tarjeta:last-child { border-bottom: 0; }
/* Al pasar: un velo de tinta al 3 %, que oscurece en claro y aclara en oscuro. */
.tarjeta:hover::after { content: ''; position: absolute; inset: 0; background: var(--tinta); opacity: .03; pointer-events: none; }
.tarjeta.listo { background: color-mix(in srgb, var(--listo) var(--tinte), var(--papel)); }
.tarjeta.comparando { background: color-mix(in srgb, var(--comp) var(--tinte), var(--papel)); }
.tarjeta.curioso { background: color-mix(in srgb, var(--cur) var(--tinte), var(--papel)); }
.tarjeta.no-cliente { background: color-mix(in srgb, var(--no) calc(var(--tinte) + 2%), var(--papel)); }
/* Leída (1.1): ya la abrieron y no ha llegado nada nuevo. Pierde el tinte y
   el nombre baja un tono; la barra conserva su color, que es lo que sigue
   diciendo qué es. La que está abierta sigue encendida mientras se mira.
   Cuál es leída lo decide `esLeida` en panel.js. */
.tarjeta.leida:not(.elegida) { background: var(--papel); }
.tarjeta.leida:not(.elegida) .nombre, .tarjeta.leida:not(.elegida) q.razon { color: var(--tinta2); }
.tarjeta.leida:not(.elegida) .quien { background: transparent; color: var(--tinta2); box-shadow: inset 0 0 0 1px var(--linea); }
.tarjeta.leida:not(.elegida) .avatar { background: color-mix(in srgb, var(--pared) 70%, var(--papel)); color: var(--tinta2); }
/* Y al volver a escribir el cliente se enciende: sale de papel liso a su
   color y la barra da un salto. */
.tarjeta.enciende { animation: enciende .9s var(--suave); }
.tarjeta.enciende > .pildora { animation: salta .5s var(--suave) .15s; }
@keyframes enciende { from { background: var(--papel); } }
.tarjeta.elegida { box-shadow: inset 0 0 0 2px var(--azul); }
.tarjeta.nueva { animation: llega .6s var(--suave); }
.tarjeta.mudando { transition: none; }
@keyframes llega { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }

/* La barra del semáforo: el ojo del mate estirado a lo alto de la fila. */
.tarjeta > .pildora { width: 4px; height: auto; min-height: 36px; align-self: stretch; border-radius: 2px; }
.tarjeta > .pildora.vacia { border-width: 1px; }
/* El avatar: la inicial en un círculo con el azul muy rebajado (no es un
   fondo de marca: es el tinte de un dato), y encima, abajo a la derecha, la
   insignia del canal en su color, con un filo de papel para despegarla. */
.tarjeta .avatar {
  position: relative; width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--azul) 12%, var(--papel)); color: var(--azul);
  display: grid; place-items: center; font-family: var(--out); font-weight: 600; font-size: 15px; line-height: 1;
}
.tarjeta .avatar.anonimo { color: var(--tinta3); }
.tarjeta .avatar b { font-weight: 600; }
.insignia {
  position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--no); color: #fff; border: 2px solid var(--papel);
  display: grid; place-items: center; font-style: normal;
}
.insignia .ic { width: 9px; height: 9px; stroke-width: 2.6; }
.insignia.canal-whatsapp { background: #25D366; }
.insignia.canal-instagram { background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); }
.insignia.canal-sitio { background: var(--azul); }
.insignia.canal-prueba { background: var(--tinta3); }
.tarjeta .cuerpo { min-width: 0; }

.fila { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pildora { width: 7px; height: 15px; border-radius: 4px; flex: none; background: var(--no); }
.listo > .pildora, .pildora.listo { background: var(--listo); }
.comparando > .pildora, .pildora.comparando { background: var(--comp); }
.curioso > .pildora, .pildora.curioso { background: var(--cur); }
.pildora.vacia { background: transparent; border: 1.5px solid var(--no); }
.tarjeta .nombre { font-family: var(--out); font-weight: 600; font-size: 14px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta .nombre.anonimo { font-weight: 500; color: var(--tinta2); font-style: italic; }
.tarjeta time { font-family: var(--mono); font-size: 11px; color: var(--tinta3); white-space: nowrap; }
.quiere { font-size: 13px; color: var(--tinta2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
q.razon { display: block; font-size: 12.5px; font-style: italic; color: var(--tinta); margin-top: 6px; line-height: 1.35; quotes: "«" "»"; }
.pie { margin-top: 7px; font-size: 11.5px; color: var(--tinta3); }
.pie > span:first-child { display: inline-flex; align-items: center; gap: 4px; min-width: 0; flex: 1; }
.pie__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie .ic { width: 14px; height: 14px; }
.sinleer { margin-left: auto; background: var(--azul); color: #fff; border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; flex: none; }
.quien + .sinleer { margin-left: 6px; }
/* En «Todas», quién la tiene cuando no es una persona: el bot (punto azul) o cerrada (hueca). */
.quien.bot { background: transparent; color: var(--tinta3); box-shadow: inset 0 0 0 1px var(--linea); display: inline-flex; align-items: center; gap: 5px; }
.quien.bot i { width: 7px; height: 7px; border-radius: 50%; background: var(--azul); }
.quien.cerrada { background: transparent; color: var(--tinta3); box-shadow: inset 0 0 0 1px var(--linea); }
.quien { margin-left: auto; background: var(--noche); color: var(--sobre-noche); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 500; flex: none; }
.tarjeta.chica .quiere, .tarjeta.chica q.razon { display: none; }

/* ── La conversación ──────────────────────────────────────────────────── */

.conv { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; background: var(--pared); }
.conv__cab { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--papel); border-bottom: 1px solid var(--linea); min-height: 53px; }
.conv__cab .nombre { font-family: var(--out); font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atras { display: none; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: var(--tinta2); margin-left: -8px; }
.canal { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--tinta3); white-space: nowrap; }
.canal .ic { width: 15px; height: 15px; }
.estado { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta2); border: 1px solid var(--linea); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.estado:empty { display: none; }
.estado b { width: 7px; height: 7px; border-radius: 50%; background: var(--no); display: inline-block; }
.estado.espera b { background: var(--comp); }
.estado.humano b { background: var(--azul); }
.estado.cerrada { color: var(--tinta3); }

.hilo { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; overflow: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.hilo .dia { align-self: center; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta3); margin: 6px 0 2px; }
.msj { max-width: 72%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; box-shadow: var(--sombra); white-space: pre-wrap; overflow-wrap: anywhere; }
.msj.cliente { background: var(--papel); align-self: flex-start; border-bottom-left-radius: 4px; }
.msj.bot { background: color-mix(in srgb, var(--tinta) 6%, var(--pared)); align-self: flex-end; border-bottom-right-radius: 4px; box-shadow: none; }
.msj.humano { background: var(--noche); color: var(--sobre-noche); align-self: flex-end; border-bottom-right-radius: 4px; }
.msj small { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11px; color: var(--tinta3); margin-top: 4px; white-space: normal; }
.msj.humano small { color: color-mix(in srgb, var(--sobre-noche) 72%, transparent); }
.msj small .mate-mini { width: 11px; height: 10px; }
/* El acuse de entrega (1.9), al final de la firma: ✓ enviado, ✓✓ entregado, ✓✓ azul leído, «no llegó» en falla. */
.acuse { letter-spacing: -.18em; margin-left: 2px; padding-right: .18em; }
.acuse.leido { color: var(--azul); }
.acuse.fallo { letter-spacing: 0; color: #C93B3B; }
.msj.humano .acuse { color: color-mix(in srgb, var(--sobre-noche) 72%, transparent); }
.msj.humano .acuse.leido { color: var(--lado-azul); }
/* Los eventos del hilo (1.8): lo que pasó y no es un mensaje (el bot pidió
   relevo, Ale la tomó, se la devolvió, cambió el semáforo, la cerró), en su
   sitio entre las burbujas: píldora de papel con línea, mono 11 px, centrada,
   con su hora. Vienen de la base como mensajes «de sistema». */
.sistema { align-self: center; font-family: var(--mono); font-size: 11px; color: var(--tinta3); background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); border-radius: 999px; padding: 3px 11px; text-align: center; margin-block: 2px; max-width: 92%; }
.vacio-hilo { margin: auto; text-align: center; color: var(--tinta3); font-size: 13px; }

.piecon { padding: 12px 20px; background: var(--papel); border-top: 1px solid var(--linea); display: flex; align-items: center; gap: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.piecon p { color: var(--tinta2); font-size: 13px; flex: 1; min-width: 0; }
.piecon p b { color: var(--tinta); font-weight: 600; }
.piecon p.candado { display: flex; gap: 10px; align-items: flex-start; text-align: left; }
.piecon p.candado svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--tinta3); }
.msj a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.piecon .aviso-canal { flex-basis: 100%; font-size: 12px; color: var(--comp-t); }
.escribe { flex: 1; border: 1px solid var(--linea); border-radius: 12px; padding: 9px 12px; font-size: 13.5px; background: var(--pared); resize: none; min-height: 40px; max-height: 160px; line-height: 1.4; outline: none; transition: border-color .15s; }
.escribe:focus { border-color: var(--azul); }
.escribe::placeholder { color: var(--tinta3); }

/* La barra del compositor (1.10, «Escribes con todo»). Con la conversación
   tomada, la caja es un recuadro de pared con el texto arriba y las herramientas
   abajo (`.herramientas`; `.barra` es la de navegación del celular): Adjuntar (solo WhatsApp e Instagram), Respuestas (las guardadas,
   que también salen con «/») y Nota interna; Enviar sigue siendo el único
   azul. En modo nota todo el recuadro se tiñe de ámbar y el botón dice
   «Guardar nota»: tres señales para no mandarle al cliente un recado. Con
   poco ancho (tableta, celular) la barra se queda en iconos. */
.redacta { position: relative; flex: 1 1 auto; min-width: 0; border: 1px solid var(--linea); border-radius: 12px; background: var(--pared); transition: border-color .15s, background-color .15s; container-type: inline-size; }
.redacta:focus-within { border-color: var(--azul); }
.redacta .escribe { display: block; width: 100%; border: 0; background: transparent; padding: 10px 12px 4px; min-height: 0; }
.herramientas { display: flex; align-items: center; gap: 2px; padding: 4px 6px 6px; }
.herramientas .btn.azul { margin-left: auto; }
.herr { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 8px; border-radius: 8px; color: var(--tinta2); font-size: 13px; font-weight: 500; transition: background-color .15s, color .15s; }
.herr .ic { width: 18px; height: 18px; flex: none; }
.herr:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); color: var(--tinta); }
.herr:disabled { opacity: .4; pointer-events: none; }
.herr[aria-pressed="true"] { background: color-mix(in srgb, var(--comp) 22%, var(--papel)); color: var(--comp-t); }
@container (max-width: 470px) {
  .herramientas .herr { width: 36px; padding: 0; }
  .herramientas .herr span { display: none; }
}
.redacta.nota { background: color-mix(in srgb, var(--comp) 10%, var(--papel)); border-color: color-mix(in srgb, var(--comp) 45%, var(--papel)); }
.redacta.nota:focus-within { border-color: var(--comp); }
.redacta__nota { display: flex; align-items: center; gap: 5px; padding: 8px 12px 0; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--comp-t); }
.redacta__nota .ic { width: 13px; height: 13px; }
.piecon.con-nota #nota-suelta { flex: none; }

/* La foto o el PDF a punto de salir: una ficha de papel sobre el texto. */
.adjunto { display: flex; align-items: center; gap: 10px; margin: 8px 8px 0; padding: 6px; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; }
.adjunto[hidden] { display: none; }
.adjunto img { width: 40px; height: 40px; border-radius: 7px; object-fit: cover; flex: none; }
.adjunto .adj-doc__pdf { width: 34px; height: 40px; }
.adjunto__txt { min-width: 0; flex: 1; display: grid; }
.adjunto__txt b { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adjunto__txt small { font-family: var(--mono); font-size: 11px; color: var(--tinta3); font-variant-numeric: tabular-nums; }

/* La lista de respuestas guardadas: flota sobre la caja, a su ancho. */
.sugeridas { position: absolute; left: -1px; right: -1px; bottom: calc(100% + 8px); z-index: 5; background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--sombra-alta); max-height: min(300px, 45vh); overflow: auto; padding-top: 4px; }
.sugeridas[hidden] { display: none; }
.sug { display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left; padding: 8px 12px; font-size: 13px; color: var(--tinta2); }
.sug b { font-family: var(--mono); font-weight: 500; font-size: 12.5px; color: var(--tinta); flex: none; }
.sug span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug.activa, .sug:hover { background: var(--pared); box-shadow: inset 3px 0 var(--azul); }
.sug-vacio { padding: 10px 12px; font-size: 13px; color: var(--tinta3); line-height: 1.4; }
.sug-pie { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; padding: 4px 10px 4px 4px; background: var(--papel); border-top: 1px solid var(--linea); }
.sug-pie span { font-family: var(--mono); font-size: 11px; color: var(--tinta3); white-space: nowrap; }

/* En el hilo: la nota es un post-it ámbar del lado del equipo, sin sombra
   (no es la voz de nadie hacia el cliente); la foto va dentro de la burbuja
   y el PDF como ficha que se abre. */
.msj.nota { align-self: flex-end; background: color-mix(in srgb, var(--comp) 12%, var(--papel)); border: 1px solid color-mix(in srgb, var(--comp) 40%, var(--papel)); border-bottom-right-radius: 4px; box-shadow: none; }
.nota__et { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--comp-t); }
.nota__et .ic { width: 13px; height: 13px; }
.adj-foto { display: block; margin: -3px -6px 6px; }
.adj-foto img { display: block; max-width: min(260px, 100%); max-height: 300px; border-radius: 10px; object-fit: cover; background: color-mix(in srgb, var(--sobre-noche) 12%, transparent); }
.msj a.adj-doc { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--sobre-noche) 12%, transparent); text-decoration: none; }
.adj-doc__pdf { width: 30px; height: 36px; flex: none; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea); color: #C93B3B; font-family: var(--mono); font-size: 11px; font-weight: 500; }
.adj-doc__nombre { font-weight: 500; overflow-wrap: anywhere; }

/* La ventanita de las respuestas guardadas. */
#dialogo-respuestas { width: min(520px, calc(100vw - 32px)); }
.resp { display: flex; gap: 10px; align-items: flex-start; padding: 10px 8px; border-bottom: 1px solid var(--linea); }
.resp:last-child { border-bottom: 0; }
.resp.editando { background: var(--pared); border-radius: 8px; }
.resp > div { flex: 1; min-width: 0; }
.resp b { font-family: var(--mono); font-weight: 500; font-size: 12.5px; }
.resp p { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--tinta2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.resp > span { display: flex; flex: none; }
.resp .ic { width: 16px; height: 16px; }
.forma-resp { display: grid; gap: 8px; color: var(--tinta); }
.forma-resp > b { font-family: var(--out); font-weight: 600; font-size: 13px; }
.atajo { display: flex; align-items: center; padding-left: 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--pared); font-family: var(--mono); font-size: 13px; color: var(--tinta3); }
.atajo:focus-within { border-color: var(--azul); }
.atajo input { flex: 1; min-width: 0; padding: 8px 12px 8px 1px; border: 0; background: transparent; outline: none; font-family: var(--mono); font-size: 13px; color: var(--tinta); }
.forma-resp textarea { padding: 8px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--pared); outline: none; font-size: 13.5px; line-height: 1.4; resize: vertical; }
.forma-resp textarea:focus { border-color: var(--azul); }
.forma-resp .error { color: #C93B3B; font-size: 12.5px; }
.forma-resp .error:empty { display: none; }
.forma-resp .botones { display: flex; justify-content: flex-end; gap: 8px; }

/* Probar el bot (solo la casa): en una conversación de prueba el pie dice
   como quién se escribe, con las mismas píldoras de «corregir semáforo».
   Mientras el bot no acaba, el mate piensa (mira a un lado y a otro) y la
   píldora de la ficha late. */
.piecon.de-prueba { flex-wrap: wrap; row-gap: 8px; }
.como { flex-basis: 100%; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta3); }
.como .ic { width: 14px; height: 14px; }
.como b { font-weight: 500; color: var(--tinta2); }
.como button { font-size: 11.5px; border: 1px solid var(--linea); color: var(--tinta2); border-radius: 999px; padding: 4px 10px; transition: border-color .15s, color .15s; }
.como button:hover { color: var(--tinta); }
.como button[aria-pressed="true"] { border-color: var(--tinta); color: var(--tinta); }
.ensayo p { max-width: 42ch; margin: 0 auto; line-height: 1.45; text-wrap: balance; }
.ensayo p b { display: block; font-family: var(--out); font-weight: 600; font-size: 16px; color: var(--tinta); margin-bottom: 4px; }
.arranques { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 16px; }
.arranques button { font-size: 12.5px; color: var(--tinta2); background: var(--papel); border: 1px solid var(--linea); border-radius: 999px; padding: 6px 13px; transition: border-color .15s, color .15s; }
.arranques button:hover { color: var(--tinta); border-color: var(--tinta3); }
.msj.pensando { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; }
.msj.pensando .mate { height: 17px; width: 18px; margin: 0; }
.msj.pensando small { margin: 0; }
.msj.pensando .ojos { animation: piensa 2.4s ease-in-out infinite; }
@keyframes piensa { 0%, 100% { transform: translate(0, -7px); } 30% { transform: translate(-10px, -9px); } 65% { transform: translate(10px, -9px); } }

/* Botones: el azul solo en el primario. */
.btn {
  font-weight: 500; border: 0; border-radius: 10px; padding: 9px 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13.5px;
  transition: background .15s, transform .15s var(--suave), opacity .15s; white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.azul { background: var(--azul); color: #fff; }
.btn.azul:hover:not(:disabled) { background: var(--azul2); }
.btn.suave { background: var(--pared); color: var(--tinta); border: 1px solid var(--linea); }
.btn.suave:hover:not(:disabled) { border-color: var(--tinta3); }
.btn.raso { background: none; color: var(--tinta2); padding: 6px 8px; }
.btn.raso:hover:not(:disabled) { color: var(--tinta); background: var(--pared); }
.btn .ic { width: 16px; height: 16px; }
.btn.ocupado { pointer-events: none; opacity: .7; }

/* ── La ficha ─────────────────────────────────────────────────────────── */

.ficha { border-left: 1px solid var(--linea); background: var(--papel); overflow: auto; overscroll-behavior: contain; min-height: 0; display: flex; flex-direction: column; }
.ficha__resumen { display: none; }
.ficha__cuerpo { padding: 18px 18px 0; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.sem { display: flex; gap: 12px; align-items: flex-start; }
.sem .pildora { width: 12px; height: 26px; border-radius: 6px; margin-top: 2px; }
.sem h4 { font-family: var(--out); font-weight: 600; font-size: 18px; line-height: 1.15; }
.sem q { display: block; font-size: 13px; font-style: italic; color: var(--tinta2); margin-top: 5px; quotes: "«" "»"; }
.sem .corregido { display: block; font-size: 11.5px; color: var(--tinta3); margin-top: 4px; }
.sem .tomando { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta3); margin-top: 6px; }
.sem.llenando .pildora { animation: late 1.2s ease-in-out infinite; }
.sem.cambio .pildora { animation: salta .5s var(--suave); }
@keyframes late { 50% { opacity: .3; } }
.corrige { display: flex; gap: 6px; flex-wrap: wrap; }
.corrige button {
  font-size: 11.5px; border: 1px solid var(--linea); background: transparent; color: var(--tinta2);
  border-radius: 999px; padding: 4px 9px; display: inline-flex; align-items: center; gap: 5px;
  transition: border-color .15s, color .15s;
}
.corrige button .pildora { width: 5px; height: 11px; border-radius: 3px; }
.corrige button:hover { color: var(--tinta); }
.corrige button.act { border-color: var(--tinta); color: var(--tinta); }
.ficha dl { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ficha dt { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta3); margin-bottom: 2px; }
.ficha dd { font-size: 13px; color: var(--tinta); line-height: 1.4; }
.ficha dd.vacio { color: var(--tinta3); font-style: italic; }
.porque { background: color-mix(in srgb, var(--comp) 10%, var(--papel)); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.4; }
.porque b { display: block; font-family: var(--out); font-weight: 600; font-size: 12.5px; margin-bottom: 2px; }
.contacto { border-top: 1px solid var(--linea); padding-top: 12px; font-size: 12.5px; color: var(--tinta2); display: grid; gap: 6px; }
.contacto span { display: flex; gap: 6px; align-items: flex-start; }
.contacto .ic { width: 14px; height: 14px; color: var(--tinta3); margin-top: 2px; }
.contacto a:hover { text-decoration: underline; text-underline-offset: 2px; }
.contacto .memoria { font-style: italic; color: var(--tinta3); }
.ficha .acciones { margin-top: auto; padding: 12px 0 16px; border-top: 1px solid var(--linea); display: flex; gap: 8px; flex-wrap: wrap; }
.ficha .acciones .btn { flex: 1; }
.ficha__nada { color: var(--tinta3); font-size: 13px; }

/* ── Manual ───────────────────────────────────────────────────────────── */

.manual { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
.versiones { border-right: 1px solid var(--linea); padding: 22px 18px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.versiones h2 { font-size: 16px; }
.versiones__lista { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.version { background: var(--papel); border-radius: 10px; padding: 10px 12px; box-shadow: var(--sombra); font-size: 12.5px; display: grid; gap: 4px; cursor: pointer; border: 1px solid transparent; }
.version:hover { border-color: var(--linea); }
.version.viendo { border-color: var(--azul); }
.version__cab { display: flex; align-items: center; gap: 8px; }
.version__cab b { font-family: var(--out); font-weight: 600; }
.version__activa { margin-left: auto; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--listo-t); font-weight: 500; font-family: var(--mono); }
.version__nota { color: var(--tinta2); line-height: 1.35; }
.version__meta { font-family: var(--mono); font-size: 11px; color: var(--tinta3); }
.version .btn { justify-self: start; margin-top: 4px; padding: 5px 10px; font-size: 12px; }
.editor { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; background: var(--papel); }
/* Cada trozo en su renglón, dicho a mano: el aviso casi siempre está oculto,
   y sin esto el texto se colaba en su renglón (dos líneas de alto) y el pie
   se quedaba con todo el hueco. */
.editor__aviso { grid-row: 1; }
#manual-texto { grid-row: 2; }
.editor__pie { grid-row: 3; }
.editor__aviso { padding: 10px 22px; background: color-mix(in srgb, var(--comp) 10%, var(--papel)); border-bottom: 1px solid var(--linea); font-size: 13px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#manual-texto { border: 0; resize: none; padding: 22px 26px; font: 400 14px/1.55 var(--sans); background: var(--papel); color: var(--tinta); outline: none; white-space: pre-wrap; tab-size: 2; }
/* Una versión apagada se lee en gris; la activa en solo lectura (el dueño
   de un negocio, que no edita) se lee como texto normal. */
#manual-texto.apagada { color: var(--tinta2); }
.editor__lectura { flex: 1; min-width: 0; font-size: 13px; color: var(--tinta2); line-height: 1.4; }
.editor__lectura b { color: var(--tinta); font-weight: 600; }
.versiones > .btn { justify-self: start; align-self: flex-start; }
.editor__pie { display: flex; align-items: center; gap: 10px; padding: 12px 22px; border-top: 1px solid var(--linea); background: var(--papel); }
.editor__pie input { flex: 1; min-width: 0; border: 1px solid var(--linea); border-radius: 10px; padding: 8px 12px; background: var(--pared); outline: none; font-size: 13px; }
.editor__pie input:focus { border-color: var(--azul); }
.editor__letras { font-size: 11.5px; color: var(--tinta3); white-space: nowrap; }

/* ── Gasto ────────────────────────────────────────────────────────────── */

.gasto__cab { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.gasto__cuerpo { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; max-width: 1180px; }
.bloque { background: var(--papel); border-radius: 12px; box-shadow: var(--sombra); padding: 16px 18px; display: grid; gap: 10px; min-width: 0; }
.bloque h3 { font-family: var(--out); font-weight: 600; font-size: 14px; }
.bloque.ancho { grid-column: 1 / -1; }
.cifra { font-family: var(--mono); font-size: 26px; font-weight: 500; letter-spacing: -.01em; line-height: 1.1; }
.cifra small { font-size: 12px; color: var(--tinta3); font-weight: 400; margin-left: 4px; }
.bloque .nota { font-size: 12.5px; color: var(--tinta3); }
.tope { height: 6px; border-radius: 3px; background: var(--pared); overflow: hidden; }
.tope i { display: block; height: 100%; width: 100%; background: var(--listo); border-radius: 3px; transform-origin: left; transition: transform .6s var(--suave); }
.tope.alto i { background: var(--comp); }
.tope.lleno i { background: #C93B3B; }
.tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabla th { text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta3); font-weight: 400; padding: 4px 8px 6px 0; border-bottom: 1px solid var(--linea); }
.tabla td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { font-family: var(--mono); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla th.num { text-align: right; }
.tabla .falla { color: var(--comp-t); }
.dias { display: grid; gap: 5px; }
.dia-fila { display: grid; grid-template-columns: 58px minmax(0, 1fr) 76px 40px; gap: 10px; align-items: center; font-size: 12px; }
.dia-fila .barra-dia { height: 10px; background: var(--pared); border-radius: 5px; overflow: hidden; }
.dia-fila .barra-dia i { display: block; height: 100%; background: color-mix(in srgb, var(--tinta) 30%, transparent); border-radius: 5px; }
.dia-fila.hoy .barra-dia i { background: var(--tinta2); }
.dia-fila .num { font-family: var(--mono); text-align: right; white-space: nowrap; }
.dia-fila .num.suave { color: var(--tinta3); }
.recargas { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 12.5px; }
.recargas li { display: flex; gap: 8px; align-items: baseline; }
.recargas .mono { margin-left: auto; white-space: nowrap; }
.recargas .falla { color: var(--comp-t); }
.forma { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.forma input, .forma textarea { border: 1px solid var(--linea); border-radius: 10px; padding: 8px 12px; background: var(--pared); outline: none; font-size: 13px; }
.forma input:focus, .forma textarea:focus { border-color: var(--azul); }
.forma input.chico { width: 130px; }
.forma input.largo, .forma textarea { flex: 1 1 100%; }
.forma textarea { min-height: 90px; resize: vertical; }
.ia-en-uso { font-family: var(--mono); font-size: 12px; color: var(--tinta2); display: grid; gap: 3px; }
.ia-en-uso span { color: var(--tinta3); }

/* ── Gasto mejorado (1.13, boceto aprobado por Ale el 9/10) ──────────────
   La casa: saldo en días y el mes arriba (dos columnas), clientes, accesos y
   el detalle técnico a lo ancho. El dueño: Meta, plan y bot en fila (tres en
   escritorio). Los chips de mes son los de la pared: el elegido en papel. */
.gasto__cuerpo.casa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gasto__cuerpo.dueno { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.meses { display: flex; gap: 6px; flex-wrap: wrap; }
.mes { border: 1px solid var(--linea); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; color: var(--tinta2); background: transparent; min-height: 32px; }
.mes:hover { color: var(--tinta); }
.mes.act { border-color: var(--tinta); color: var(--tinta); background: var(--papel); font-weight: 500; }
.meses-nota { flex-basis: 100%; margin-top: -10px; font-size: 12px; color: var(--tinta3); }
.g-lab { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta3); }
.g-sub { display: block; font-size: 12px; color: var(--tinta3); margin-top: 2px; }
.bloque .cifra.falla { color: #C93B3B; }
/* La cifra en pesos que enseña el dólar: parece texto, con subrayado de puntos. */
.mx { font: inherit; color: inherit; background: none; border: 0; padding: 0; border-bottom: 1px dotted var(--tinta3); cursor: help; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cifra .mx { border-bottom-color: transparent; }
.cifra .mx:hover { border-bottom-color: var(--tinta3); }

.g-saldo { --tono: var(--listo); --tono-t: var(--listo-t); background: color-mix(in srgb, var(--tono) var(--tinte), var(--papel)); }
.g-saldo.ambar { --tono: var(--comp); --tono-t: var(--comp-t); }
.g-saldo.rojo { --tono: #C93B3B; --tono-t: #B23434; }
@media (prefers-color-scheme: dark) { .g-saldo.rojo { --tono-t: #F08A8A; } }
.g-alcanza { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.g-alcanza span { font-size: 14px; color: var(--tinta2); }
.g-alcanza b { font-size: 38px; font-weight: 500; line-height: 1.05; letter-spacing: -.01em; color: var(--tono-t); }
.g-chico { justify-self: start; padding: 6px 11px; font-size: 13px; }
.g-chico .ic { width: 15px; height: 15px; }
.g-cuadrito { background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 12px; display: grid; gap: 8px; max-width: 380px; box-shadow: var(--sombra-alta); }
.g-campos { display: flex; gap: 6px; }
.g-campos input { border: 1px solid var(--linea); border-radius: 10px; padding: 8px 10px; background: var(--pared); color: var(--tinta); font-size: 13.5px; outline: none; min-width: 0; }
.g-campos input:focus { border-color: var(--azul); }
.g-campos > input { flex: 1; }
.g-usd { display: flex; align-items: center; gap: 6px; flex: 0 0 132px; }
.g-usd span { font-size: 11.5px; color: var(--tinta3); }
.g-usd input { width: 100%; font-family: var(--mono); }
.g-equiv { font-size: 12px; color: var(--tinta3); min-height: 16px; }
.g-pie { display: flex; justify-content: flex-end; gap: 8px; }

.g-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.g-tres > div { display: grid; gap: 2px; min-width: 0; }
.g-tres .cifra { font-size: 24px; }
.g-tres small { font-size: 12px; color: var(--tinta3); }

/* Los clientes: tabla en escritorio y tableta, renglón de dos pisos en celular. */
.g-tabla { display: grid; }
.g-cli { display: grid; grid-template-columns: minmax(0, 1.3fr) 118px 96px 86px minmax(220px, 1.2fr); gap: 0 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--linea); font-size: 13.5px; }
.g-cli--cab { border-top: 0; padding: 0 0 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta3); }
.g-nom { font-family: var(--out); font-weight: 600; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.g-nom small { display: block; font-family: var(--sans); font-weight: 400; font-size: 11.5px; color: var(--tinta3); }
.g-num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-cli--cab .g-num { font-family: var(--mono); }
.g-cli.propia .g-ia, .g-cli.propia .g-cada { color: var(--tinta3); }
.g-det { display: none; font-size: 12px; color: var(--tinta2); }
.g-modelo { min-width: 0; }
.g-sel { width: 100%; max-width: 280px; border: 1px solid var(--linea); border-radius: 999px; padding: 5px 10px; background: var(--pared); color: var(--tinta); font-size: 12.5px; font-weight: 500; }
.g-sel:focus { border-color: var(--azul); outline: none; }
.g-sel:disabled { opacity: .55; }
.g-propia { font-size: 12.5px; color: var(--tinta3); }

.g-filas { list-style: none; padding: 0; display: grid; font-size: 13px; }
.g-filas li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--linea); }
.g-filas li:first-child { border-top: 0; }
.g-filas li > .mono { white-space: nowrap; color: var(--tinta3); font-size: 11.5px; }
.g-filas small { font-size: 11.5px; color: var(--tinta3); margin-left: 4px; }
.g-meta .g-filas li > .mono { color: var(--tinta); font-size: 13px; }
.g-filas b { font-weight: 600; }
.g-medida { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.g-ojo { font-size: 12.5px; color: var(--comp-t); background: color-mix(in srgb, var(--comp) 10%, transparent); border-radius: 8px; padding: 8px 10px; }
.g-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.g-plan__nombre { font-family: var(--out); font-weight: 600; font-size: 14px; color: var(--tinta2); }
.g-cuenta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--tinta2); font-size: 13.5px; }
.g-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, #C93B3B 10%, var(--papel)); color: var(--tinta); font-size: 13.5px; }
.g-aviso .ic { width: 18px; height: 18px; color: #C93B3B; flex: none; margin-top: 1px; }
.g-aviso.ancho { grid-column: 1 / -1; }

/* Las conversaciones del mes, una barra por día. */
.g-barras { display: flex; align-items: flex-end; gap: 2px; height: 56px; }
.g-barras i { flex: 1; min-width: 2px; background: color-mix(in srgb, var(--tinta) 22%, transparent); border-radius: 2px 2px 1px 1px; }
.g-barras i.cero { background: var(--linea); }
.g-barras i.hoy { background: var(--tinta2); }
.g-barras__pie { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--tinta3); margin-top: -4px; }

.g-detalle summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.g-detalle summary::-webkit-details-marker { display: none; }
.g-detalle summary::before { content: ""; width: 7px; height: 7px; border: solid var(--tinta3); border-width: 0 2px 2px 0; transform: rotate(-45deg); align-self: center; transition: transform .2s var(--suave); }
.g-detalle[open] summary::before { transform: rotate(45deg); }
.g-detalle summary .nota { font-size: 12.5px; }
.g-detalle__cuerpo { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px; }
.g-detalle__cuerpo > div { display: grid; gap: 8px; align-content: start; min-width: 0; }
.g-detalle__cuerpo .g-scroll { grid-column: 1 / -1; }
.g-scroll { overflow-x: auto; }
.g-tope { display: grid; gap: 4px; font-size: 12.5px; color: var(--tinta2); }
@media (prefers-reduced-motion: reduce) { .g-detalle summary::before { transition: none; } }

@media (max-width: 1179px) {
  .g-cli { grid-template-columns: minmax(0, 1.2fr) 70px 84px 76px minmax(170px, 1.2fr); }
  .g-cli--cab span:nth-child(2) { font-size: 0; }
  .g-cli--cab span:nth-child(2)::after { content: "Conv."; font-size: 11px; }
}
@media (max-width: 1023px) {
  .gasto__cuerpo.casa { grid-template-columns: minmax(0, 1fr); }
  .g-detalle__cuerpo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759px) {
  .gasto__cab h2 { margin-right: auto; }
  .g-alcanza b { font-size: 34px; }
  .g-cuadrito { max-width: none; }
  .g-campos { flex-wrap: wrap; }
  .g-usd { flex: 1 1 100%; }
  .g-pie .btn { flex: 1; min-height: 44px; }
  .g-chico { min-height: 40px; }
  .g-tres .cifra { font-size: 21px; }
  .g-cli--cab { display: none; }
  .g-cli { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom ia" "det modelo"; gap: 6px 10px; padding: 10px 0; }
  .g-cli:nth-child(2) { border-top: 0; }
  .g-nom { grid-area: nom; }
  .g-ia { grid-area: ia; }
  .g-conv, .g-cada { display: none; }
  .g-det { display: block; grid-area: det; align-self: center; }
  .g-modelo { grid-area: modelo; justify-self: end; max-width: 60vw; }
  .g-sel { min-height: 36px; font-size: 12px; }
  .g-filas li { flex-wrap: wrap; row-gap: 2px; }
  .mes { min-height: 36px; }
}

/* ── Novedades: la cuenta del mate (1.12, boceto aprobado por Ale el 8/10) ──
   Un perfil de red social del mate: la portada es una rejilla de ojitos que
   se voltean hacia el cursor, el avatar es el mate entero que mira, y el
   subrayado de las pestañas son sus dos ojos. «Lo nuevo» es papel limpio;
   «Ya viene» es papel de cuaderno punteado con borde de obra, para que se
   lea «en construcción» sin decirlo. Ninguna pieza repite Conexiones ni
   Difusiones. El azul de marca sale solo en los ojos de las pestañas, la
   etapa actual, «Nuevo», el «Me encanta» puesto y el botón de publicar. */
.novedades { --rebote: cubic-bezier(.34, 1.56, .64, 1); }
.nv .cambio { display: inline-block; animation: salta .4s var(--suave); }
.nv-cols { display: grid; grid-template-columns: minmax(0, 584px) 280px; gap: 24px; justify-content: center; align-items: start; }
.nv-col, .nv-muro { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nv-lado { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; min-width: 0; }

.nv-perfil { background: var(--papel); border-radius: 16px; box-shadow: var(--sombra); overflow: hidden; }
.nv-portada { height: 136px; position: relative; overflow: hidden; background: var(--pared); border-bottom: 1px solid var(--linea); }
.nv-ojito {
  position: absolute; width: 5px; height: 12px; border-radius: 3px;
  --oj: color-mix(in srgb, var(--tinta3) 30%, var(--pared)); background: var(--oj);
  transition: transform .4s var(--suave), background-color .3s, scale .08s;
}
.nv-ojito.v { --oj: color-mix(in srgb, var(--listo) 50%, var(--pared)); }
.nv-ojito.a { --oj: color-mix(in srgb, var(--comp) 50%, var(--pared)); }
.nv-ojito.m { --oj: color-mix(in srgb, var(--cur) 50%, var(--pared)); }
.nv-ojito.cerca { --oj: var(--tinta3); }
.nv-ojito.v.cerca { --oj: var(--listo); }
.nv-ojito.a.cerca { --oj: var(--comp); }
.nv-ojito.m.cerca { --oj: var(--cur); }
.nv-ojito.parpadeo { scale: 1 .15; }
.nv-yo { display: flex; gap: 16px; padding: 0 22px; align-items: flex-start; }
.nv-avatar {
  width: 104px; height: 104px; margin-top: -46px; flex: none; position: relative;
  background: var(--papel); border-radius: 30px; display: grid; place-items: center;
  box-shadow: 0 0 0 1px var(--linea), var(--sombra);
}
.nv .mate { margin: 0; vertical-align: 0; }
.nv-avatar .mate { width: 74px; height: 69px; }
.nv-avatar .mate.gm-logo { width: 100%; height: 100%; }   /* el logo de la cuenta llena el cuadro */
.nv-quien { padding-top: 10px; min-width: 0; }
.nv-nombre { display: flex; align-items: center; gap: 8px; }
.nv-nombre b { font: 600 26px/1.1 var(--out); letter-spacing: -.015em; }
.nv-ver { font: 500 12px var(--mono); color: var(--tinta2); border: 1px solid var(--linea); border-radius: 999px; padding: 2px 8px; font-variant-numeric: tabular-nums; }
.nv-bio { font-size: 15px; color: var(--tinta2); margin-top: 4px; }
.nv-cifras { font: 12.5px var(--mono); color: var(--tinta3); padding: 10px 22px 14px 142px; font-variant-numeric: tabular-nums; }
.nv-cifras b { color: var(--tinta); font-weight: 500; }
.nv-pestanas { display: flex; position: relative; border-top: 1px solid var(--linea); padding: 0 8px; }
.nv-pestanas [role="tab"] { flex: 1; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 7px; font: 600 15px var(--out); color: var(--tinta3); transition: color .2s; }
.nv-pestanas [role="tab"]:hover, .nv-pestanas [aria-selected="true"] { color: var(--tinta); }
.nv-n { font: 500 11.5px var(--mono); color: var(--tinta3); background: var(--pared); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.nv-punto-tab { width: 7px; height: 7px; border-radius: 50%; background: var(--azul); }
.nv-ojos { position: absolute; left: 0; bottom: 5px; display: flex; gap: 4px; transition: transform .55s var(--rebote); pointer-events: none; }
.nv-ojos i { display: block; width: 5px; height: 11px; border-radius: 3px; background: var(--azul); transition: transform .09s; }
.nv-ojos.parpadeo i { transform: scaleY(.15); }
/* El punto de «Novedades» en las barras: algo que no he visto. */
.nv-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--lado-azul); flex: none; }
.barra__boton .nv-punto { position: absolute; top: 4px; left: calc(50% + 9px); }
@media (min-width: 760px) and (max-width: 1023px) { .seccion .nv-punto { position: absolute; top: 9px; left: calc(50% + 9px); } }

/* La publicación */
.nv-post { background: var(--papel); border-radius: 14px; box-shadow: var(--sombra); padding: 16px 18px 8px; position: relative; container-type: inline-size; scroll-margin: 20px; }
.nv-post:focus { outline: none; }
.nv-post.es-borrador { box-shadow: none; border: 1px dashed var(--tinta3); }
.nv-post.nv-recien { animation: nv-recien 1.6s var(--suave); }
@keyframes nv-recien { 0%, 40% { box-shadow: 0 0 0 2px var(--azul), var(--sombra); } 100% { box-shadow: 0 0 0 2px transparent, var(--sombra); } }
.nv-entra { animation: nv-entra .45s var(--suave) both; }
@keyframes nv-entra { from { opacity: 0; transform: translateY(10px); } }
.nv-fijada { font: 500 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--tinta3); display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.nv-fijada .ic { width: 14px; height: 14px; }
.nv-cab { display: flex; align-items: center; gap: 10px; }
.nv-av { width: 40px; height: 40px; border-radius: 13px; background: var(--pared); display: grid; place-items: center; flex: none; }
.nv-av .mate { width: 27px; height: 25px; }
.nv-autor { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.nv-autor b { font: 600 15px var(--out); }
.nv-autor small { font: 11.5px var(--mono); color: var(--tinta3); font-variant-numeric: tabular-nums; }
.nv-nueva, .nv-borr { font: 500 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; }
.nv-nueva { background: var(--azul); color: #fff; }
.nv-borr { border: 1px dashed var(--tinta3); color: var(--tinta2); }
.nv-mas { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--tinta3); }
.nv-mas:hover, .nv-mas[aria-expanded="true"] { background: var(--pared); color: var(--tinta); }
.nv-menu { position: absolute; top: 56px; right: 12px; z-index: 5; background: var(--papel); box-shadow: var(--sombra-alta); border-radius: 12px; padding: 6px; min-width: 190px; animation: nv-entra .2s var(--suave); }
.nv-menu button { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 40px; padding: 0 10px; border-radius: 8px; font-size: 14px; text-align: left; }
.nv-menu button:hover { background: var(--pared); }
.nv-menu .rojo { color: #C93B3B; }
.nv-titulo { font: 600 20px/1.25 var(--out); letter-spacing: -.012em; margin: 12px 0 6px; text-wrap: balance; }
.nv-texto { font-size: 14.5px; line-height: 1.58; color: var(--tinta2); white-space: pre-line; overflow-wrap: anywhere; }
.nv-texto.corto { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.nv-leer { font-weight: 600; color: var(--tinta); font-size: 13.5px; min-height: 32px; padding: 4px 0 0; }
.nv-leer:hover { text-decoration: underline; }
.nv-media { margin: 12px 0 2px; border-radius: 12px; border: 1px solid var(--linea); overflow: hidden; position: relative; background: var(--pared); }
.nv-media img, .nv-media video { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; }
.nv-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nv-media.anima { cursor: pointer; }
.nv-etq { position: absolute; left: 10px; bottom: 10px; font: 500 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(11, 14, 19, .72); border-radius: 6px; padding: 2px 7px; }
.nv-play { position: absolute; inset: 0; display: none; place-items: center; }
.nv-play .ic { width: 52px; height: 52px; padding: 15px 14px 15px 16px; border-radius: 50%; background: rgba(11, 14, 19, .72); color: #fff; }
.nv-media.pausa .nv-play { display: grid; }
.nv-acciones { display: flex; align-items: center; gap: 2px; margin-top: 12px; padding-top: 6px; border-top: 1px solid var(--linea); }
.nv-acciones button { min-height: 40px; padding: 0 10px; border-radius: 10px; display: inline-flex; align-items: center; gap: 7px; font-weight: 500; font-size: 13.5px; color: var(--tinta2); position: relative; }
.nv-acciones button:hover { background: var(--pared); color: var(--tinta); }
.nv-ojitos { display: inline-flex; gap: 3px; align-items: center; height: 14px; }
.nv-ojitos i { width: 5px; height: 11px; border-radius: 3px; background: currentColor; transition: transform .35s var(--rebote); }
.nv-acciones .nv-reac.on { color: var(--azul); }
.nv-reac.on .nv-ojitos i { transform: scaleY(1.3) scaleX(1.15); }
.nv-cuenta { font: 500 12px var(--mono); font-variant-numeric: tabular-nums; }
.nv-acciones .nv-enlace { width: 40px; justify-content: center; padding: 0; }
.nv-acciones .nv-probar { margin-left: auto; color: var(--tinta); font-weight: 600; }
.nv-acciones .ic { width: 17px; height: 17px; }
.nv-chispa { position: absolute; left: 18px; top: 50%; width: 4px; height: 9px; border-radius: 2px; background: var(--azul); pointer-events: none; animation: nv-chispa .6s var(--suave) forwards; }
@keyframes nv-chispa {
  from { transform: translate(-50%, -50%) rotate(var(--a)) translateY(-4px); opacity: 1; }
  to { transform: translate(-50%, -50%) rotate(var(--a)) translateY(-24px); opacity: 0; }
}
.nv-falta { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--pared); font-size: 13px; color: var(--tinta2); }
.nv-falta > span { display: flex; gap: 6px; align-items: center; }
.nv-falta .ic { width: 16px; height: 16px; }
.nv-falta .btn { min-height: 40px; }
.nv-pedida { color: var(--listo-t); font-weight: 600; }
.nv-confirma { margin: 12px 0 4px; padding: 12px; border-radius: 12px; background: var(--pared); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13.5px; color: var(--tinta2); }
.nv-confirma p { flex: 1 1 100%; }
.nv-confirma .btn { min-height: 40px; }
.btn.rojo { background: #C93B3B; color: #fff; }
.nv-ver-campo { display: flex; align-items: center; gap: 8px; margin-right: auto; font-size: 13px; }
.nv-ver-campo input { width: 84px; height: 40px; border-radius: 10px; background: var(--papel); border: 1px solid var(--linea); padding: 0 10px; }
.nv-ver-campo em, .nv-campo em { font: normal 11px var(--mono); color: var(--tinta3); margin-left: 4px; }
.nv-err { color: #C93B3B; font-size: 13px; }
.nv-err:empty { display: none; }

/* «Ya viene»: papel de cuaderno y borde de obra. */
.nv-post.viene {
  box-shadow: none; border: 1px dashed color-mix(in srgb, var(--tinta3) 50%, transparent);
  background-image: radial-gradient(circle, var(--linea) 1px, transparent 1.4px); background-size: 16px 16px; background-position: 8px 8px;
}
.nv-etapas { list-style: none; padding: 0; margin: 16px 0 2px; display: flex; align-items: center; }
.nv-etapas li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tinta3); white-space: nowrap; }
.nv-etapas li:not(:first-child) { flex: 1; }
.nv-etapas li:not(:first-child)::before { content: ''; flex: 1; min-width: 10px; height: 1px; background: var(--linea); margin-right: 4px; }
.nv-etapas li i { width: 7px; height: 15px; border-radius: 4px; border: 1.5px solid var(--linea); flex: none; background: var(--papel); }
.nv-etapas li.hecha { color: var(--tinta2); }
.nv-etapas li.hecha i { background: var(--tinta2); border-color: var(--tinta2); }
.nv-etapas li.hecha + li::before { background: var(--tinta2); }
.nv-etapas li.ahora { color: var(--tinta); font-weight: 600; }
.nv-etapas li.ahora i { background: var(--azul); border-color: var(--azul); animation: nv-parpa 4.2s infinite; }
@keyframes nv-parpa { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.15); } }
/* Angosta (la vista previa de la columna de la derecha): solo la etapa de ahora lleva nombre. */
@container (max-width: 330px) { .nv-etapas li:not(.ahora) span { display: none; } .nv-etapas li { gap: 5px; } }
.nv-etapa { width: 6px; height: 13px; border-radius: 3px; border: 1.5px solid var(--azul); display: inline-block; flex: none; }
.nv-etapa.e1 { background: linear-gradient(to top, var(--azul) 50%, transparent 50%); }
.nv-etapa.e2 { background: var(--azul); }
.nv-pie-viene { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 12px 0 8px; border-top: 1px dashed color-mix(in srgb, var(--tinta3) 40%, transparent); }
.nv-quiero {
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--linea); background: var(--papel);
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px;
  transition: background-color .25s, color .25s, border-color .25s, transform .2s var(--rebote);
}
.nv-quiero:hover { border-color: var(--tinta3); }
.nv-quiero:active { transform: scale(.95); }
.nv-quiero.on { background: var(--noche); border-color: var(--noche); color: #fff; }
.nv-quiero .ic { width: 18px; height: 18px; }
.nv-cuantos-txt, .nv-cuantos { font-size: 13px; color: var(--tinta3); }
.nv-cuantos-txt b, .nv-cuantos b { font: 500 13px var(--mono); color: var(--tinta); display: inline-block; }
.nv-cuantos { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 8px; margin-left: -8px; border-radius: 10px; color: var(--tinta2); }
.nv-cuantos:hover:not(:disabled) { background: var(--pared); }
.nv-cuantos[aria-expanded="true"] .ic { transform: rotate(180deg); }
.nv-cuantos .ic { width: 16px; height: 16px; transition: transform .2s var(--suave); }
.nv-salio { margin-left: auto; }
.nv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.nv-chips span { font-size: 12.5px; border: 1px solid var(--linea); border-radius: 999px; padding: 4px 10px; background: var(--papel); color: var(--tinta2); }
.nv-dice { display: flex; gap: 8px; align-items: flex-end; }
.nv .nv-mini { width: 22px; height: 20px; flex: none; }
.nv-burbuja { background: color-mix(in srgb, var(--tinta) 6%, var(--pared)); border-radius: 14px 14px 14px 4px; padding: 8px 12px; font-size: 13.5px; line-height: 1.4; }
.nv-respuesta { margin: 0 0 10px; animation: nv-entra .4s var(--suave); }
.nv-mes { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta3); display: flex; align-items: center; gap: 10px; padding: 4px 4px 0; }
.nv-mes::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.nv-fin { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 0 8px; color: var(--tinta3); font-size: 13px; text-align: center; }
.nv-fin .mate { width: 38px; height: 35px; }
.nv-fin b { display: block; font: 600 15px var(--out); color: var(--tinta); }
.nv-fin span { font: 11.5px var(--mono); }

/* La columna de la derecha (≥ 1180) */
.nv-caja { background: var(--papel); border-radius: 14px; box-shadow: var(--sombra); padding: 14px 16px; }
.nv-caja h3 { font: 600 15px var(--out); margin-bottom: 6px; }
.nv-fila { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 9px 8px; border-radius: 10px; margin: 0 -8px; width: calc(100% + 16px); }
.nv-fila:hover { background: var(--pared); }
.nv-fila .nv-etapa { margin-top: 3px; }
.nv-fila span { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.nv-fila small { display: block; font: 11.5px var(--mono); color: var(--tinta3); font-weight: 400; margin-top: 2px; }
.nv-tranqui { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--tinta2); }
.nv-etq-lado { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta3); margin: 2px 2px 0; }
.nv-previa { pointer-events: none; }

/* El panel para publicar (solo la casa) */
.nv-abre { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--papel); border-radius: 14px; box-shadow: var(--sombra); padding: 12px 14px; text-align: left; }
.nv-falso { flex: 1; min-height: 44px; border-radius: 999px; background: var(--pared); display: flex; align-items: center; padding: 0 16px; color: var(--tinta3); font-size: 14.5px; transition: background-color .15s; }
.nv-abre:hover .nv-falso { background: color-mix(in srgb, var(--tinta) 6%, var(--pared)); }
.nv-abre-ic { color: var(--tinta3); display: flex; }
.nv-abre-ic .ic { width: 22px; height: 22px; }
.nv-hoja { background: var(--papel); border-radius: 14px; box-shadow: var(--sombra), 0 0 0 1px var(--linea); padding: 16px 18px; }
.nv-hoja .nv-hoja-cab, .nv-hoja .nv-seg-previa { display: none; }
.nv-forma-arriba { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.nv-seg { display: inline-flex; background: var(--pared); border-radius: 999px; padding: 3px; }
.nv-seg button { min-height: 36px; padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: 13.5px; color: var(--tinta3); }
.nv-seg [aria-checked="true"], .nv-seg [aria-selected="true"] { background: var(--papel); color: var(--tinta); box-shadow: var(--sombra); }
.nv-x { margin-left: auto; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--tinta3); }
.nv-x:hover { background: var(--pared); color: var(--tinta); }
.nv-chips-elige { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.nv-chip { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linea); display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--tinta2); }
.nv-chip:hover { border-color: var(--tinta3); }
.nv-chip.on { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); color: var(--tinta); font-weight: 600; }
.nv-tit { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--linea); transition: border-color .2s; }
.nv-tit:focus-within { border-color: var(--azul); }
.nv-tit input { flex: 1; min-width: 0; border: 0; background: none; font: 600 21px/1.3 var(--out); letter-spacing: -.01em; padding: 6px 0 8px; }
.nv-tit .mono { font-size: 11px; color: var(--tinta3); }
.nv-tit input:focus-visible, .nv-forma textarea:focus-visible { outline: none; }
.nv-forma ::placeholder { color: var(--tinta3); opacity: 1; }
.nv-forma textarea { display: block; width: 100%; min-height: 96px; border: 0; background: none; resize: vertical; font-size: 15px; line-height: 1.55; padding: 12px 0 6px; }
.nv-suelta { border: 1.5px dashed var(--linea); border-radius: 12px; padding: 16px; text-align: center; color: var(--tinta3); font-size: 13.5px; margin-top: 8px; transition: border-color .2s, background-color .2s; }
.nv-suelta.encima { border-color: var(--azul); background: color-mix(in srgb, var(--azul) 6%, transparent); }
.nv-suelta > .ic { width: 26px; height: 26px; }
.nv-suelta p { margin-top: 4px; }
.nv-suelta .mono { font-size: 11.5px; }
.nv-suelta .btn { margin-top: 6px; min-height: 40px; }
.nv-media-lista { position: relative; margin-top: 8px; max-width: 340px; }
.nv-media-lista .nv-media { margin: 0; }
.nv-quitar { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; background: rgba(11, 14, 19, .72); color: #fff; display: grid; place-items: center; }
.nv-nom { font-size: 11.5px; color: var(--tinta3); margin-top: 6px; }
.nv-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 14px; }
.nv-campo { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--tinta2); font-weight: 500; min-width: 0; }
.nv-media-lista + .nv-nom + .nv-campo, .nv-media-lista + .nv-campo { margin-top: 10px; }
.nv-ancho { grid-column: 1 / -1; }
.nv-campo .nv-chips-elige { margin: 0; }
.nv-campo input, .nv-select select { height: 42px; border-radius: 10px; background: var(--pared); border: 1px solid transparent; padding: 0 12px; font-size: 14px; font-weight: 400; color: var(--tinta); width: 100%; }
.nv-campo input:focus-visible, .nv-select select:focus-visible { outline: none; border-color: var(--azul); }
.nv-campo small { font-size: 12px; color: var(--tinta3); font-weight: 400; }
.nv-select { position: relative; display: block; }
.nv-select select { appearance: none; padding-right: 34px; }
.nv-select .ic { position: absolute; right: 10px; top: 12px; width: 18px; height: 18px; color: var(--tinta3); pointer-events: none; }
.nv-fijar { flex-direction: row; align-items: center; justify-content: space-between; align-self: end; min-height: 42px; }
.nv-forma > .nv-err { margin-top: 8px; }
.nv-forma-pie { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linea); }
.nv-solo { margin-right: auto; font-size: 11px; color: var(--tinta3); display: flex; gap: 6px; align-items: center; }
.nv-solo .ic { width: 14px; height: 14px; }

@media (max-width: 1179px) {
  .nv-cols { grid-template-columns: minmax(0, 640px); }
  .nv-lado { display: none; }
  .nv-hoja .nv-seg-previa { display: flex; margin-bottom: 14px; }
  .nv-seg-previa button { flex: 1; }
  .nv-previa-aqui { margin-bottom: 4px; }
}
@media (max-width: 759px) {
  .nv-portada { height: 78px; }
  .nv-yo { padding: 0 14px; gap: 12px; }
  .nv-avatar { width: 72px; height: 72px; margin-top: -30px; border-radius: 22px; }
  .nv-avatar .mate { width: 50px; height: 47px; }
  .nv-nombre b { font-size: 22px; }
  .nv-bio { font-size: 13.5px; line-height: 1.35; }
  .nv-cifras { font-size: 11.5px; padding: 10px 14px 12px; }
  .nv-col, .nv-muro { gap: 12px; }
  .nv-post { padding: 14px 14px 6px; }
  .nv-titulo { font-size: 18px; }
  .nv-etapas li { font-size: 12px; gap: 5px; }
  /* En el celular el panel para publicar es una hoja entera, con su cabecera. */
  .nv-hoja { position: fixed; inset: 0; z-index: 40; overflow: auto; overscroll-behavior: contain; border-radius: 0; box-shadow: none; padding: 0 0 calc(16px + env(safe-area-inset-bottom)); background: var(--pared); }
  .nv-hoja .nv-hoja-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: 0; z-index: 2; min-height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0; background: var(--papel); border-bottom: 1px solid var(--linea); }
  .nv-hoja-cab b { font: 600 16px var(--out); }
  .nv-hoja-cab .btn { min-height: 40px; }
  .nv-hoja .nv-seg-previa { margin: 12px 12px 0; display: flex; background: var(--papel); box-shadow: 0 0 0 1px var(--linea); }
  .nv-forma { background: var(--papel); padding: 14px; margin-top: 12px; }
  .nv-previa-aqui { padding: 12px; }
  .nv-forma-arriba .nv-x, .nv-forma-pie .nv-forma-publica { display: none; }
  .nv-opciones { grid-template-columns: 1fr; }
  .nv-media-lista { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nv-etapas li.ahora i, .nv-entra, .nv-post.nv-recien, .nv-chispa { animation: none; }
  .nv-ojito, .nv-ojos { transition: none; }
}

/* ── Personas (solo la casa): quién puede entrar ──────────────────────── */

.personas__cab { margin-bottom: 18px; display: grid; gap: 4px; }
.personas__cuerpo { display: grid; gap: 18px; max-width: 760px; }
.personas .forma { background: var(--papel); border-radius: 12px; padding: 14px 16px; box-shadow: var(--sombra); }
.personas .forma h3 { flex-basis: 100%; font-family: var(--out); font-weight: 600; font-size: 14px; }
.personas .forma select { border: 1px solid var(--linea); border-radius: 10px; padding: 8px 12px; background: var(--pared); color: var(--tinta); font-size: 13px; }
.personas .forma .clase { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tinta2); }
.personas .forma .btn { margin-left: auto; }
.provisional { background: color-mix(in srgb, var(--listo) 10%, var(--papel)); border-radius: 12px; padding: 14px 16px; display: grid; gap: 8px; box-shadow: var(--sombra); }
.provisional b { font-family: var(--out); font-weight: 600; font-size: 14px; }
.provisional .fila { gap: 12px; flex-wrap: wrap; }
.provisional code { font-family: var(--mono); font-size: 22px; letter-spacing: .04em; user-select: all; -webkit-user-select: all; }
.provisional p { font-size: 12.5px; color: var(--tinta2); line-height: 1.4; }
.grupo { display: grid; gap: 8px; }
.grupo h3 { font-family: var(--out); font-weight: 600; font-size: 13px; letter-spacing: .01em; padding: 0 2px; display: flex; gap: 8px; align-items: center; }
.grupo h3 span { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--tinta3); }
.persona { background: var(--papel); border-radius: 10px; box-shadow: var(--sombra); padding: 10px 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.persona .inicial { background: var(--noche); }
.persona > div:not(.acciones) { min-width: 0; flex: 1; display: grid; }
.persona b { font-family: var(--out); font-weight: 600; font-size: 14px; }
.persona small { font-size: 12px; color: var(--tinta3); overflow-wrap: anywhere; }
.estado-cuenta { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta3); white-space: nowrap; }
.estado-cuenta.pendiente { color: var(--comp-t); }
.persona .acciones { display: flex; gap: 2px; }

/* ── Conexiones: «Avanzado» (la IA propia, permisos a mano, webhooks, llaves) ──
   Mismo sistema que Personas: grupos con su título en Outfit, renglones de
   papel (`.persona`) y una forma de papel para añadir. Lo que se enseña una
   sola vez (secreto, llave) sale en la caja verde de `.provisional`. La
   pantalla de los canales y la guía (1.6) van más abajo. */

.conexiones__cab { margin-bottom: 18px; display: grid; gap: 4px; }
.conexiones__cuerpo { display: grid; gap: 28px; max-width: 760px; }
.conexiones .grupo > .ayuda { margin: -4px 2px 2px; }
.conexiones .forma { background: var(--papel); border-radius: 12px; padding: 14px 16px; box-shadow: var(--sombra); }
.conexiones .forma h3 { flex-basis: 100%; font-family: var(--out); font-weight: 600; font-size: 14px; letter-spacing: 0; padding: 0; }
.conexiones .forma select { border: 1px solid var(--linea); border-radius: 10px; padding: 8px 12px; background: var(--pared); color: var(--tinta); font-size: 13px; max-width: 100%; }
.conexiones .forma select:focus { border-color: var(--azul); outline: none; }
.conexiones .forma .clase { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tinta2); }
.conexiones .forma .nota { flex-basis: 100%; font-size: 12.5px; color: var(--tinta3); line-height: 1.45; max-width: 64ch; }
.conexiones .forma > .btn { margin-left: auto; }
.conexiones .forma .pie-forma { flex-basis: 100%; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
/* La clave se escribe tapada, pero sin ser un campo de contraseña: Safari
   ofrecería guardarla en el llavero como si fuera la del panel. */
.conexiones .secreta { -webkit-text-security: disc; text-security: disc; font-family: var(--mono); }
.conexiones .secreta::placeholder { font-family: var(--sans); -webkit-text-security: none; }
.conexion .inicial .ic { width: 15px; height: 15px; }
.conexion .mate-fila { width: 30px; height: 28px; flex: none; }
.conexion b .mono { font-weight: 500; font-size: 13px; }
.conexion small .mono { font-size: 11.5px; color: var(--tinta2); }
.conexion .url { font-family: var(--mono); font-weight: 500; font-size: 12.5px; overflow-wrap: anywhere; }
.conexion.apagada .url, .conexion.apagada .eventos { opacity: .55; }
.eventos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.evento { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--linea); border-radius: 999px; padding: 2px 8px; font-size: 11.5px; color: var(--tinta2); white-space: nowrap; }
.evento .pildora { width: 5px; height: 11px; border-radius: 3px; }
/* Instagram: la cuenta va en mono, como las direcciones; las cuentas de la
   casa son chips con su «quitar». */
.conexion small.falla { color: var(--comp-t); }
.conexiones .forma .eventos { flex-basis: 100%; margin-top: 0; }
.conexiones .forma .nota b { font-weight: 500; color: var(--comp-t); }
.evento.con-quitar { font-family: var(--mono); padding-right: 3px; gap: 3px; }
.evento.con-quitar button { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--tinta3); transition: color .15s, background .15s; }
.evento.con-quitar button:hover { color: var(--tinta); background: var(--pared); }
.evento.con-quitar .ic { width: 11px; height: 11px; }
/* El campo y su botón en un renglón propio (la nota de arriba no llena el ancho). */
.conexiones .forma .en-fila { flex-basis: 100%; display: flex; gap: 8px; align-items: center; }
.conexiones .forma .en-fila input { flex: 1; min-width: 0; }
#forma-ig-casa .en-fila input, #forma-wa-casa .en-fila input { max-width: 260px; font-family: var(--mono); }
#forma-ig-casa .en-fila input::placeholder, #forma-wa-casa .en-fila input::placeholder { font-family: var(--sans); }
.provisional code.largo { font-size: 14px; letter-spacing: 0; overflow-wrap: anywhere; min-width: 0; }
.provisional pre { font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--tinta2); white-space: pre-wrap; overflow-wrap: anywhere; background: color-mix(in srgb, var(--papel) 70%, transparent); border-radius: 8px; padding: 8px 10px; }
.falta-secreto { background: color-mix(in srgb, var(--comp) 10%, var(--papel)); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--tinta); box-shadow: var(--sombra); }
.como { font-size: 13px; color: var(--tinta2); padding: 0 2px; }
.como summary { cursor: pointer; font-weight: 500; list-style: none; display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; }
.como summary::-webkit-details-marker { display: none; }
.como summary::before { content: ''; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin: 0 4px 0 2px; transition: transform .2s var(--suave); }
.como[open] summary::before { transform: rotate(45deg); }
.como[open] summary { color: var(--tinta); }
/* ── Conexiones fácil (1.6, propuesta C, Ale 6/10) ─────────────────────
   El mate saluda con una frase de estado; los canales son cuatro letreros
   (logo oficial en su color sobre un cuadro de papel, nombre, estado en una
   frase, «Conectar» azul o el interruptor); la guía es una plática con las
   mismas burbujas de la bandeja (`.msj`), con dibujos de lo que se ve en
   Meta; «Avanzado» (solo la casa) pliega lo técnico, que conserva el
   sistema de Personas de arriba. */
.conexiones__cuerpo { max-width: 820px; }
.saludo { display: flex; gap: 12px; align-items: flex-end; }
.saludo .mate-saludo { width: 46px; height: 43px; flex: none; margin: 0 0 2px; }
.saludo .msj { max-width: 56ch; font-size: 14px; white-space: normal; }
.letreros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.letrero { background: var(--papel); border-radius: 14px; box-shadow: var(--sombra); padding: 18px 16px 16px; display: grid; gap: 8px; align-content: start; justify-items: start; }
.letrero h3 { font-family: var(--out); font-weight: 600; font-size: 17px; letter-spacing: 0; }
.letrero p { font-size: 13px; color: var(--tinta2); line-height: 1.4; min-height: 2.8em; overflow-wrap: anywhere; }
.letrero__pie { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; width: 100%; margin-top: 2px; }
.letrero__pie .btn.azul { width: 100%; }
.letrero.pronto { opacity: .6; }
.letrero.con-pega p { color: var(--comp-t); }
/* El letrero del mate (la IA y su versión) cruza la fila entera. */
.letrero.ia { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.letrero.ia > div:not(.letrero__pie) { min-width: 0; flex: 1; display: grid; gap: 3px; }
.letrero.ia p { min-height: 0; }
.letrero.ia .letrero__pie { width: auto; margin: 0; }
.logo-canal .ic { width: 28px; height: 28px; color: var(--tinta2); }
/* Los logos de Meta van en su color oficial (sus reglas no dejan recolorearlos):
   la armonía la pone el cuadro de papel con la línea y las esquinas del panel. */
.logo-canal { width: 56px; height: 56px; border-radius: 14px; background: var(--papel); border: 1px solid var(--linea); display: grid; place-items: center; flex: none; }
.logo-canal svg { width: 34px; height: 34px; }
.logo-canal .mate-fila { width: 36px; height: 34px; }
.logo-canal .gm-estatura { width: 42px; height: 42px; }
.logo-canal.pronto svg { filter: grayscale(1); opacity: .5; }
.logo-canal.chico { width: 32px; height: 32px; border-radius: 9px; }
.logo-canal.chico svg { width: 20px; height: 20px; }
.logo-canal.chico .mate-fila { width: 22px; height: 20px; }
.btn.grande { padding: 12px 18px; font-size: 15px; border-radius: 12px; min-height: 44px; }
/* El interruptor del bot: gris apagado, verde (el del semáforo) encendido. */
.sw { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 13.5px; color: var(--tinta); border-radius: 999px; }
.sw i { width: 44px; height: 26px; border-radius: 999px; background: var(--no); position: relative; flex: none; transition: background .2s; }
.sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: left .2s var(--suave); }
.sw.on i { background: var(--listo); }
.sw.on i::after { left: 21px; }
.sw.xl { font-family: var(--out); font-weight: 600; font-size: 17px; gap: 14px; }
.sw.xl i { width: 72px; height: 42px; }
.sw.xl i::after { width: 36px; height: 36px; }
.sw.xl.on i::after { left: 33px; }
/* «Avanzado», plegado */
.avanzado { border-top: 1px solid var(--linea); padding-top: 14px; }
.avanzado summary { cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 13px; color: var(--tinta2); border-radius: 6px; }
.avanzado summary::-webkit-details-marker { display: none; }
.avanzado summary b { font-weight: 500; color: var(--tinta); display: inline-flex; align-items: center; gap: 6px; }
.avanzado summary b::before { content: ''; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin: 0 4px 0 2px; transition: transform .2s var(--suave); }
.avanzado[open] summary b::before { transform: rotate(45deg); }
.avanzado summary span { color: var(--tinta3); }
.avanzado__cuerpo { display: grid; gap: 28px; margin-top: 18px; }
/* Sus cuatro letreros cerrados y la hoja del que se abre (9/10): una cosa a
   la vez, con el sistema de la hoja de Ajustes de un canal. */
.av-letreros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.av-letrero { background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--sombra); padding: 12px; min-height: 64px; display: flex; align-items: center; gap: 10px; text-align: left; color: var(--tinta); transition: border-color .15s; }
.av-letrero:hover { border-color: var(--tinta3); }
.av-letrero__txt { min-width: 0; flex: 1; display: grid; gap: 1px; }
.av-letrero b { font-family: var(--out); font-weight: 600; font-size: 14px; }
.av-letrero small { font-size: 12px; color: var(--tinta3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-ic { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--linea); background: var(--papel); display: grid; place-items: center; flex: none; color: var(--tinta2); }
.av-ic .ic { width: 18px; height: 18px; }
.av-ic .mate-fila { width: 24px; height: 22px; }
.av-chev { width: 7px; height: 7px; border-right: 2px solid var(--tinta3); border-bottom: 2px solid var(--tinta3); transform: rotate(-45deg); flex: none; margin-right: 4px; }
.av-hoja { display: grid; gap: 14px; max-width: 720px; margin-top: 14px; }
.av-hoja__cab { display: flex; gap: 12px; align-items: flex-start; }
.av-hoja__cab h3 { font-family: var(--out); font-weight: 600; font-size: 18px; }
.av-hoja__cab .av-ic { width: 42px; height: 42px; }
.av-hoja .ayuda.falla { color: var(--comp-t); }
.av-modelos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.av-modelo { background: var(--papel); border-radius: 10px; box-shadow: var(--sombra); padding: 10px 12px; display: grid; gap: 2px; }
.av-modelo small { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta3); }
.av-modelo b { font-family: var(--out); font-weight: 600; font-size: 16px; }
.av-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.av-vacio { border: 1px dashed var(--linea); border-radius: 10px; padding: 14px; text-align: center; font-size: 13px; color: var(--tinta3); }
@media (max-width: 1179px) { .av-letreros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .av-letreros { grid-template-columns: 1fr; gap: 0; background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--sombra); overflow: hidden; }
  .av-letrero { border: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--linea); min-height: 60px; }
  .av-letrero:last-child { border-bottom: 0; }
  .av-acciones .btn { min-height: 40px; }
}
/* La guía (una plática) y la hoja de ajustes de un canal */
.guia, .ajustes { display: grid; gap: 14px; max-width: 720px; }
.guia__cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.guia__cab h3 { font-family: var(--out); font-weight: 600; font-size: 18px; display: inline-flex; align-items: center; gap: 10px; }
.guia__cab .btn.raso { margin-left: -8px; }
.guia__charla { display: flex; flex-direction: column; gap: 10px; }
.guia__charla .msj { max-width: 60ch; white-space: normal; }
.guia__charla .msj.bot { align-self: flex-start; border-bottom-left-radius: 4px; border-bottom-right-radius: 14px; display: grid; gap: 12px; font-size: 14px; }
.guia__charla .msj.bot p a { color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }
.guia__charla .msj.humano { align-self: flex-end; }
.guia__charla .msj small { margin: 0; }
.opciones { display: grid; gap: 8px; }
.opciones button { text-align: left; background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 11px 14px; font-weight: 500; font-size: 14px; color: var(--tinta); display: flex; gap: 10px; align-items: center; box-shadow: var(--sombra); min-height: 44px; transition: border-color .15s; }
.opciones button:hover { border-color: var(--tinta3); }
.opciones button small { display: block; font-family: var(--sans); font-weight: 400; font-size: 12.5px; color: var(--tinta3); margin-top: 1px; }
.guia__acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.guia__acciones .btn.azul { min-height: 40px; }
.guia__final { padding: 6px 0 2px; }
.guia__forma { display: grid; gap: 8px; }
.guia__forma input { width: 100%; }
.provisional.etiqueta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; }
.provisional.etiqueta code.largo { font-size: 12px; flex: 1; min-width: 0; }
.ajustes__sw { display: grid; gap: 6px; padding: 4px 2px; }
.ajustes .persona { align-items: flex-start; }
/* Los dibujos de lo que se ve en Meta y en el celular: imitan sus pantallas
   claras, así que llevan sus colores literales también en oscuro. */
.dibujo { margin: 0; display: grid; gap: 6px; justify-items: start; }
.dibujo figcaption { font-family: var(--mono); font-size: 11px; color: var(--tinta3); line-height: 1.4; }
.dibujo img { max-width: 100%; border-radius: 10px; border: 1px solid var(--linea); }
.meta-win { background: #fff; color: #1C2B33; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; box-shadow: var(--sombra); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; width: 100%; max-width: 360px; }
.meta-win .wb { background: #E4E6EB; height: 20px; display: flex; gap: 5px; align-items: center; padding: 0 9px; }
.meta-win .wb i { width: 8px; height: 8px; border-radius: 50%; background: #C4C9D0; }
.meta-win .wc { padding: 14px 16px; display: grid; gap: 9px; }
.meta-win .wm { font: 700 14px/1 sans-serif; color: #0866FF; letter-spacing: -.02em; }
.meta-win .wt { font-weight: 600; font-size: 14px; line-height: 1.3; }
.meta-win .wp { font-size: 12px; color: #465A69; line-height: 1.4; }
.meta-win .wf { border: 1px solid #CED0D4; border-radius: 6px; padding: 7px 10px; font-size: 12.5px; }
.meta-win .wf.sel { border-color: #0866FF; background: #EBF5FF; }
.meta-win .wf.sel::before { content: '●'; color: #0866FF; margin-right: 8px; }
.meta-win .wbt { background: #0866FF; color: #fff; border-radius: 6px; padding: 8px 14px; text-align: center; font-weight: 600; font-size: 12.5px; width: fit-content; min-width: 120px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--azul); }
.cel { width: 210px; border-radius: 22px; border: 3px solid var(--tinta3); background: #ECE5DD; overflow: hidden; color: #111; font-family: system-ui, sans-serif; }
.cel .ch { background: #075E54; color: #fff; padding: 9px 12px; font-size: 12px; font-weight: 600; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cel .ch i { width: 20px; height: 20px; border-radius: 50%; background: #0866FF; display: inline-block; }
.cel .ch small { flex-basis: 100%; font-weight: 400; font-size: 10.5px; opacity: .8; }
.cel .cm { background: #fff; margin: 12px 10px; border-radius: 8px; padding: 9px 10px; font-size: 11.5px; line-height: 1.4; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.cel .cm b { display: block; font-family: var(--mono); font-size: 15px; letter-spacing: .1em; margin: 6px 0 2px; }
.cel .cb { background: #fff; margin: 0 10px 12px; border-radius: 8px; padding: 8px; text-align: center; color: #0866FF; font-weight: 600; font-size: 12px; box-shadow: 0 0 0 3px #ECE5DD, 0 0 0 5px var(--azul); }

/* Un botón que se lee como enlace, dentro de un párrafo. */
.enlace { color: var(--tinta); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; border-radius: 4px; }
.enlace:hover { color: var(--azul); }
/* `.como` es también el «escribes como» de la charla de prueba, que va en fila. */
.conexiones .como { display: block; }
.conexiones .como p b { color: var(--tinta); }
.como dl { margin-top: 10px; display: grid; gap: 8px; }
.como dt { font-family: var(--mono); font-size: 12px; color: var(--tinta); overflow-wrap: anywhere; }
.como dd { font-size: 12.5px; color: var(--tinta3); line-height: 1.4; max-width: 64ch; }
.como p { margin-top: 10px; font-size: 12.5px; color: var(--tinta3); line-height: 1.45; max-width: 64ch; }
.como code { font-family: var(--mono); font-size: 12px; color: var(--tinta2); }

/* ── Diálogos: la campana y la cuenta ─────────────────────────────────── */

/* `margin: auto` es lo que centra un <dialog>; el reinicio de arriba (margin: 0
   para todo) se lo quitaba y el diálogo salía pegado a la esquina. */
.dialogo { margin: auto; border: 0; border-radius: 14px; padding: 0; background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-alta); width: min(440px, calc(100vw - 32px)); max-height: min(80vh, 640px); display: none; grid-template-rows: auto minmax(0, 1fr) auto; }
.dialogo[open] { display: grid; }
.dialogo.chico { width: min(360px, calc(100vw - 32px)); }
.dialogo::backdrop { background: rgba(14, 20, 28, .35); }
.dialogo__cab { display: flex; align-items: center; padding: 14px 16px 10px; }
.dialogo__cab h2 { font-family: var(--out); font-weight: 600; font-size: 16px; }
.cerrar { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--tinta3); }
.cerrar:hover { background: var(--pared); color: var(--tinta); }
.dialogo__cuerpo { overflow: auto; padding: 0 8px 8px; }
.dialogo__pie { padding: 10px 16px 14px; border-top: 1px solid var(--linea); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--tinta2); }
.aviso-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 10px; border-radius: 10px; width: 100%; text-align: left; font-size: 13px; }
.aviso-item:hover { background: var(--pared); }
.aviso-item .pildora { width: 7px; height: 17px; margin-top: 2px; }
.aviso-item .pildora.relevo { background: var(--comp); }
.aviso-item .pildora.verde { background: var(--listo); }
.aviso-item .pildora.falla, .aviso-item .pildora.tope, .aviso-item .pildora.saldo { background: #C93B3B; }
.aviso-item .pildora.novedad { background: var(--azul); }
.aviso-item .pildora.pide { background: var(--listo); }
.aviso-item .pildora.meta { background: var(--comp); }
.aviso-item > div { min-width: 0; flex: 1; }
.aviso-item b { display: block; font-weight: 600; }
.aviso-item p { color: var(--tinta2); line-height: 1.35; }
.aviso-item small { display: block; font-family: var(--mono); font-size: 11px; color: var(--tinta3); margin-top: 3px; }
.aviso-item.visto b { font-weight: 500; color: var(--tinta2); }
.dialogo__cuerpo .nada { padding: 20px 16px 24px; text-align: center; color: var(--tinta3); font-size: 13px; }
.cuenta { padding: 4px 8px 12px; display: grid; gap: 12px; font-size: 13px; }
.cuenta .quien-soy { display: flex; gap: 12px; align-items: center; }
.cuenta .quien-soy b { display: block; font-family: var(--out); font-weight: 600; font-size: 15px; }
.cuenta .quien-soy span { display: block; color: var(--tinta3); font-size: 12.5px; overflow-wrap: anywhere; }
.cuenta .quien-soy .inicial { background: var(--noche); }
.cuenta .push { border-top: 1px solid var(--linea); padding-top: 12px; display: grid; gap: 8px; }
.cuenta .push p { color: var(--tinta2); font-size: 12.5px; line-height: 1.4; }
.cuenta summary { cursor: pointer; font-weight: 500; color: var(--tinta2); list-style: none; display: flex; align-items: center; gap: 6px; }
.cuenta summary::-webkit-details-marker { display: none; }
.cuenta summary::before { content: ''; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin: 0 4px 0 2px; transition: transform .2s var(--suave); }
.cuenta details[open] summary::before { transform: rotate(45deg); }
.cuenta details[open] summary { color: var(--tinta); }
.cuenta .campos { display: grid; gap: 10px; margin-top: 10px; }
.cuenta .campos .btn { justify-self: start; }

/* ── El aviso que flota y la puerta cerrada ───────────────────────────── */

.toast {
  position: fixed; right: 20px; top: 16px; z-index: 30;
  background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-alta); border-radius: 12px;
  padding: 10px 14px 10px 12px; display: flex; gap: 10px; align-items: center; font-size: 13px; max-width: min(360px, calc(100vw - 40px));
  opacity: 0; transform: translateY(-8px); transition: .4s var(--suave); pointer-events: none;
}
.toast.ver { opacity: 1; transform: none; pointer-events: auto; }
.toast .pildora { width: 8px; height: 18px; }
.toast b { display: block; font-family: var(--out); font-weight: 600; }
.toast.error .pildora { background: #C93B3B; }

/* La puerta: el logotipo arriba (el mate mira al campo y cierra los ojos al
   escribir la contraseña) y una hoja de papel con dos campos. */
.puerta { position: fixed; inset: 0; z-index: 40; background: var(--pared); display: grid; place-items: center; padding: 24px; overflow: auto; }
.puerta__caja { width: min(380px, 100%); display: grid; gap: 20px; justify-items: center; }
.puerta .logo { font-size: 28px; }
.puerta__forma { width: 100%; background: var(--papel); border-radius: 14px; box-shadow: var(--sombra); padding: 22px 22px 20px; display: grid; gap: 14px; }
.puerta__forma h1 { font-family: var(--out); font-weight: 600; font-size: 20px; letter-spacing: -.01em; }
.puerta__forma h1 + p { color: var(--tinta2); font-size: 13.5px; line-height: 1.45; margin-top: -8px; }
.campo { display: grid; gap: 5px; font-size: 12.5px; color: var(--tinta2); font-weight: 500; }
.campo input { width: 100%; border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; background: var(--pared); color: var(--tinta); font-size: 14px; outline: none; transition: border-color .15s; }
.campo input:focus { border-color: var(--azul); }
.puerta__error { color: #C93B3B; font-size: 13px; line-height: 1.4; }
.puerta__forma .btn { width: 100%; padding: 11px 14px; font-size: 14px; }
.puerta__nota { color: var(--tinta3); font-size: 12.5px; text-align: center; max-width: 36ch; line-height: 1.45; }
.puerta__nota button { color: var(--tinta2); text-decoration: underline; text-underline-offset: 2px; font: inherit; }
.puerta__nota button:hover { color: var(--tinta); }
.puerta__olvide { justify-self: center; font: inherit; font-size: 13px; color: var(--tinta2); text-decoration: underline; text-underline-offset: 2px; padding: 4px 6px; border-radius: 6px; }
.puerta__olvide:hover { color: var(--tinta); }
/* 2.0 «Entra solo»: la contraseña una vez con «Ver», la ayuda bajo el campo,
   el escalón contratado bajo la hoja y la caja verde de «revisa tu correo». */
.campo small { display: block; font-weight: 400; color: var(--tinta3); font-size: 12px; line-height: 1.4; }
.campo input[readonly] { color: var(--tinta2); background: var(--papel); }
.campo .ver { position: relative; display: block; }
.campo .ver input { padding-right: 76px; }
.campo .ver button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: inherit; font-size: 12.5px; font-weight: 500; color: var(--tinta2); padding: 6px 8px; border-radius: 8px; }
.campo .ver button:hover { background: var(--pared); color: var(--tinta); }
.puerta__forma b { font-weight: 600; color: var(--tinta); }
.puerta__plan { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta3); display: flex; gap: 8px; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.puerta__plan b { color: var(--tinta2); font-weight: 500; }
.puerta__listo { background: color-mix(in srgb, var(--listo) 10%, var(--papel)); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; }

/* ── Barra de abajo (celular) ─────────────────────────────────────────── */

.barra { display: none; }

/* ── Tableta: pared + conversación; la ficha se pliega arriba ─────────── */

@media (max-width: 1179px) {
  .bandeja { grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .pared { grid-row: 1 / 5; grid-column: 1; }
  /* Los cuatro trozos de la conversación y la ficha pasan a ser hijos
     directos de la rejilla, en orden: cabecera, ficha, hilo, pie. */
  .conv { display: contents; }
  .conv__cab { grid-column: 2; grid-row: 1; }
  .ficha { grid-column: 2; grid-row: 2; border-left: 0; border-bottom: 1px solid var(--linea); overflow: visible; max-height: 60vh; }
  .hilo { grid-column: 2; grid-row: 3; }
  .piecon { grid-column: 2; grid-row: 4; }
  .ficha__resumen { display: flex; align-items: center; gap: 10px; padding: 10px 16px; width: 100%; text-align: left; min-height: 48px; }
  .ficha__resumen .pildora { width: 9px; height: 20px; border-radius: 5px; }
  .ficha__resumen b { font-family: var(--out); font-weight: 600; font-size: 14px; display: block; }
  .ficha__resumen small { font-size: 12px; color: var(--tinta2); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ficha__resumen > div { min-width: 0; flex: 1; }
  .ficha__resumen .ic { color: var(--tinta3); width: 18px; height: 18px; transition: transform .25s var(--suave); }
  .ficha__resumen[aria-expanded="true"] .ic { transform: rotate(180deg); }
  .ficha__cuerpo { display: none; padding: 4px 16px 0; overflow: auto; max-height: calc(60vh - 48px); }
  .ficha.abierta .ficha__cuerpo { display: flex; }
  /* Abierta, el resumen no repite el semáforo que ya se lee debajo: se
     vuelve la cabecera de la ficha. */
  .ficha.abierta .ficha__resumen b, .ficha.abierta .ficha__resumen small, .ficha.abierta .ficha__resumen .pildora { display: none; }
  .ficha.abierta .ficha__resumen > div::before { content: 'Ficha del cliente'; font-family: var(--out); font-weight: 600; font-size: 14px; }
  .ficha .acciones { margin-top: 4px; }
  .hoja { padding: 20px 20px 40px; }
  .manual { grid-template-columns: 260px minmax(0, 1fr); }
}

@media (max-width: 1023px) {
  .letreros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Tableta (760–1023): la barra se estrecha a solo iconos ───────────── */

@media (min-width: 760px) and (max-width: 1023px) {
  :root { --lado-ancho: 72px; }
  .lado { padding: 16px 8px 12px; }
  /* Solo el mate: es el icono de la app. El nombre vuelve al ensanchar. */
  .lado .logo { font-size: 0; justify-content: center; padding: 0; margin-bottom: 14px; }
  .lado .logo .mate { width: 34px; height: 32px; margin: 0; }
  /* El negocio, por sus iniciales; el selector va encima, invisible, para
     que al tocarlo se abra la lista de verdad. */
  .negocio { position: relative; padding: 0; margin-bottom: 10px; height: 32px; display: grid; place-items: center; }
  .negocio::before {
    content: attr(data-iniciales); display: grid; place-items: center; width: 44px; height: 32px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08);
    font: 600 12px var(--out); letter-spacing: .04em; color: var(--sobre-lado);
  }
  .negocio__nombre { display: none; }
  .negocio select { position: absolute; inset: 0; width: 44px; margin: auto; opacity: 0; }
  .seccion { flex-direction: column; justify-content: center; gap: 3px; height: 54px; padding: 0 4px; font-size: 11px; }
  .seccion .ic { width: 22px; height: 22px; }
  .seccion span { flex: none; }
  .seccion::before { left: -8px; }
  .seccion em { position: absolute; top: 5px; right: 6px; }
  .saldo { display: none; }
  .campana { flex-direction: column; justify-content: center; gap: 3px; height: 54px; padding: 0; font-size: 11px; }
  .campana span { flex: none; text-align: center; }
  .campana em { position: absolute; top: 5px; right: 8px; }
  .yo { justify-content: center; padding: 6px 0; }
  .yo__quien { display: none; }
}

/* ── Celular: una cosa a la vez ───────────────────────────────────────── */

@media (max-width: 759px) {
  :root { --cab: 52px; }
  body { grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(var(--cab) + env(safe-area-inset-top)) minmax(0, 1fr) auto; }
  main { grid-column: 1; grid-row: 2; }
  /* La barra se acuesta: es el renglón de arriba. */
  .lado { grid-column: 1; grid-row: 1; flex-direction: row; align-items: center; gap: 10px; padding: env(safe-area-inset-top) 10px 0 14px; overflow: hidden; }
  .lado .logo { margin: 0; padding: 0; font-size: 20px; }
  .negocio { margin: 0; padding: 0; flex: 1; min-width: 0; }
  .negocio__nombre, .negocio select { width: auto; max-width: 44vw; padding: 4px 10px; font-size: 12.5px; }
  .negocio select { padding-right: 26px; }
  .secciones, .saldo { display: none; }
  .lado__pie { margin: 0; padding: 0; border: 0; flex-direction: row; align-items: center; gap: 2px; }
  .campana { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .campana span { display: none; }
  .campana em { position: absolute; top: 3px; right: 3px; }
  .yo { padding: 4px; }
  .yo__quien { display: none; }

  .bandeja { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .pared { grid-row: 1 / 5; grid-column: 1; border-right: 0; padding: 12px 14px 0; gap: 10px; }
  .pestanas { gap: 16px; }
  .pestana { min-height: 44px; }
  .tarjeta { padding: 12px 14px 11px 10px; grid-template-columns: 4px 40px minmax(0, 1fr); gap: 0 12px; }
  .tarjeta .avatar { width: 40px; height: 40px; font-size: 16px; }
  .tarjeta.chica .quiere { display: block; }

  /* Con una conversación abierta, la pared se va y la conversación ocupa todo. */
  .conv__cab, .ficha, .hilo, .piecon { display: none; }
  .bandeja.abierta .pared { display: none; }
  .bandeja.abierta .conv__cab { display: flex; grid-column: 1; grid-row: 1; padding: 10px 14px; }
  .bandeja.abierta .ficha { display: flex; grid-column: 1; grid-row: 2; }
  .bandeja.abierta .hilo { display: flex; grid-column: 1; grid-row: 3; padding: 14px; }
  .bandeja.abierta .piecon { display: flex; grid-column: 1; grid-row: 4; flex-wrap: wrap; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .atras { display: grid; }
  .conv__cab .nombre { font-size: 15px; }
  .canal { display: none; }
  .msj { max-width: 84%; font-size: 13.5px; }
  .piecon .btn.azul.tomar { flex-basis: 100%; padding: 12px; }
  /* Con «Nota» al lado, «Tomar» se queda en el mismo renglón (1.10). */
  .piecon.con-nota .btn.azul.tomar { flex: 1 1 0; }
  .piecon.con-nota #nota-suelta { min-height: 44px; }
  /* La barra en celular: iconos de 44 px, Enviar igual de alto. */
  .herramientas { padding: 2px 4px 4px; }
  .herramientas .herr { width: 44px; height: 44px; }
  .herramientas .btn { min-height: 44px; }
  .adjunto .herr { width: 44px; height: 44px; }
  .sug { min-height: 44px; align-items: center; }
  .sug-pie .btn { min-height: 44px; }
  .sug-pie span { display: none; }
  .piecon p { flex-basis: 100%; text-align: center; }
  .ficha .acciones .btn { min-height: 44px; }
  .corrige button, .como button { min-height: 32px; }
  .filtros { margin: -2px -14px; }
  .filtros button { min-height: 36px; padding: 4px 11px; }
  .arranques button { min-height: 40px; }
  .pared__cab .btn { min-height: 40px; }

  main { padding-bottom: 0; }
  .barra {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--lado);
    padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .barra__boton { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: rgba(255, 255, 255, .62); font-weight: 500; min-height: 44px; justify-content: center; border-radius: 8px; }
  .barra__boton .ic { width: 22px; height: 22px; }
  .barra__boton.activa { color: var(--sobre-lado); }
  /* La misma píldora del ojo, acostada, marca la sección activa. */
  .barra__boton::before { content: ''; position: absolute; top: -6px; left: 50%; width: 16px; height: 3px; margin-left: -8px; border-radius: 2px; background: var(--lado-azul); transform: scaleX(0); transition: transform .25s var(--suave); }
  .barra__boton.activa::before { transform: none; }
  .bandeja.abierta ~ .barra, body.conv-abierta .barra { display: none; }

  .hoja { padding: 16px 14px 32px; }
  .manual { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding: 0; }
  .versiones { border-right: 0; border-bottom: 1px solid var(--linea); padding: 14px; max-height: 38vh; }
  .versiones__lista { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .version { min-width: 220px; }
  #manual-texto { padding: 16px 14px; }
  .editor__pie { flex-wrap: wrap; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .editor__pie input { flex-basis: 100%; }
  .editor__pie .btn { flex: 1; }
  .gasto__cuerpo { grid-template-columns: 1fr; }
  .dia-fila { grid-template-columns: 50px minmax(0, 1fr) 70px; }
  .dia-fila .num.suave { display: none; }
  .toast { right: 12px; left: 12px; max-width: none; top: calc(var(--cab) + 10px + env(safe-area-inset-top)); }
  .puerta { padding: 20px 16px; align-content: start; padding-top: max(40px, 12vh); }
  .persona .acciones { flex-basis: 100%; flex-wrap: wrap; }
  .conexiones .forma .clase { flex-basis: 100%; min-height: 32px; }
  .conexiones .forma select { flex: 1; min-width: 0; }
  .conexion .acciones .btn { min-height: 40px; }
  .evento.con-quitar button { width: 30px; height: 30px; }
  /* El estado baja a su propio renglón: al lado le quitaba sitio a la
     dirección, que se partía a media palabra. */
  .conexion .estado-cuenta { flex-basis: 100%; white-space: normal; }
  /* Conexiones fácil en el celular: dos letreros por renglón, más chicos. */
  .letreros { gap: 10px; }
  .letrero { padding: 14px 12px 12px; border-radius: 12px; }
  .letrero h3 { font-size: 15px; }
  .letrero p { font-size: 12px; min-height: 3.6em; }
  .logo-canal { width: 48px; height: 48px; border-radius: 12px; }
  .logo-canal svg { width: 28px; height: 28px; }
  .letrero .sw { font-size: 12.5px; gap: 8px; }
  .letrero.ia { flex-wrap: wrap; }
  .letrero.ia > div:not(.letrero__pie) { flex-basis: calc(100% - 62px); }
  .letrero.ia .letrero__pie { margin-left: 62px; }
  .saludo .msj { font-size: 13.5px; }
  .guia__charla .msj { max-width: 92%; }
  .opciones button { min-height: 48px; }
  .sw.xl { font-size: 16px; }
  /* Con seis secciones (la casa), las etiquetas de la barra se aprietan. */
  .barra { padding-left: 4px; padding-right: 4px; }
  .barra__boton { font-size: 10.5px; letter-spacing: -.01em; min-width: 0; }
  /* Y con siete (la casa, con Difusiones encendida), un poco más. */
  .barra:has(> .barra__boton:nth-of-type(7):not([hidden])) { padding-left: 2px; padding-right: 2px; }
  .barra:has(> .barra__boton:nth-of-type(7):not([hidden])) .barra__boton { font-size: 10px; letter-spacing: -.03em; }
}

/* ── Columnas por semáforo (1.11) ─────────────────────────────────────── */
/* Una vista de la bandeja, no una sección: el interruptor «Lista ·
   Columnas» de la pared. Las pestañas siguen mandando y las columnas
   reparten por color lo de la pestaña elegida. Cada columna es el recuadro
   de papel de la 1.7 con las mismas filas, su cabecera fija y su propio
   desplazamiento. */

/* En la lista, la barra no existe: sus tres renglones son hijos de la pared. */
.pared__barra { display: contents; }

/* El interruptor: dos botones de icono, el elegido en papel con tinta (como
   el chip encendido de los filtros) sobre un riel de pared. */
.modo { display: inline-flex; flex: none; padding: 2px; gap: 2px; background: var(--pared); border: 1px solid var(--linea); border-radius: 10px; }
.modo button { width: 32px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--tinta3); transition: background .15s, color .15s, box-shadow .15s; }
.modo button .ic { width: 18px; height: 18px; }
.modo button:hover { color: var(--tinta); }
.modo button[aria-pressed="true"] { background: var(--papel); color: var(--tinta); box-shadow: 0 0 0 1px var(--linea), 0 1px 2px rgba(20,23,31,.06); }

.saltos { display: none; }
.cierra-panel { display: none; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: var(--tinta2); margin-right: -8px; flex: none; }
.cierra-panel:hover { background: var(--pared); color: var(--tinta); }

.columnas .pared { overflow: hidden; }
.tablero { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-bottom: 16px; position: relative; }
.columna { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; transition: border-color .15s; }
.columna__cab { display: flex; align-items: center; gap: 8px; padding: 11px 12px 10px; border-bottom: 1px solid var(--linea); flex: none; }
.columna__cab h3 { font-family: var(--out); font-weight: 600; font-size: 13px; letter-spacing: .01em; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.columna__cab .mono { font-family: var(--mono); font-size: 12px; color: var(--tinta3); font-variant-numeric: tabular-nums; }
/* Contiene solo el desplazamiento vertical: de lado, el dedo tiene que llegar al tablero. */
.columna__cuerpo { flex: 1; min-height: 0; overflow: hidden auto; overscroll-behavior: auto contain; display: flex; flex-direction: column; }
.columna__vacia { color: var(--tinta3); font-size: 12.5px; padding: 14px 12px; }
/* Las que aún no tienen ficha, al final de la gris, bajo su etiqueta. */
.columna__sub { display: flex; justify-content: space-between; gap: 8px; padding: 12px 12px 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta3); border-bottom: 1px solid var(--linea); background: var(--papel); }
.columna__cuerpo > .tarjeta + .columna__sub { border-top: 1px solid var(--linea); margin-top: -1px; }
.columna .tarjeta { flex: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.columna .tarjeta:last-child { border-bottom: 1px solid var(--linea); }
/* En columnas el pie puede no llevar texto: lo de la derecha no se estira. */
.pie > .quien:first-child, .pie > .sinleer:first-child { flex: none; margin-left: auto; }
.pie > .quien.bot:first-child { display: inline-flex; }
.pie > .sinleer:first-child { display: grid; }
.columna .quiere { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Arrastrar = corregir el semáforo. La tarjeta se levanta (contorno azul,
   inclinada, con la sombra de lo que flota); en su sitio queda su huella, y
   la columna de destino enseña el hueco ámbar punteado. */
.tarjeta.levantada { opacity: .35; }
.tarjeta.fantasma {
  position: fixed; left: 0; top: 0; z-index: 60; margin: 0; pointer-events: none;
  border: 0; border-radius: 10px; box-shadow: inset 0 0 0 2px var(--azul), var(--sombra-alta);
  rotate: -2.5deg; scale: 1.02; animation: levanta .18s var(--suave); will-change: translate;
}
@keyframes levanta { from { rotate: 0deg; scale: 1; } }
.hueco {
  flex: none; position: sticky; top: 0; z-index: 1; margin: 8px; border-radius: 8px;
  border: 2px dashed var(--comp); background: color-mix(in srgb, var(--comp) 10%, var(--papel));
  animation: abre-hueco .2s var(--suave);
}
@keyframes abre-hueco { from { opacity: 0; transform: scaleY(.6); } }
.columna.destino { border-color: color-mix(in srgb, var(--comp) 55%, var(--linea)); }
.columna.destino .columna__vacia { display: none; }
.tablero.arrastrando, body.arrastrando { cursor: grabbing; }
body.arrastrando * { cursor: grabbing !important; }
.tarjeta.aterriza { animation: aterriza .45s var(--suave); }
@keyframes aterriza { from { opacity: .4; transform: scale(.97); box-shadow: inset 0 0 0 2px var(--azul); } }

/* Escritorio: la barra es un renglón (pestañas · filtros … buscar · interruptor),
   el tablero ocupa todo el ancho, y la conversación sale como panel desde la
   derecha con el tablero detrás. */
@media (min-width: 1180px) {
  .bandeja.columnas { grid-template-columns: minmax(0, 1fr) minmax(380px, 560px) 320px; grid-template-rows: minmax(0, 1fr); }
  .bandeja.columnas .pared { grid-column: 1 / -1; grid-row: 1; border-right: 0; padding: 0 20px; gap: 16px; }
  .columnas .pared__barra { display: flex; align-items: center; gap: 18px; flex: none; margin: 0 -20px; padding: 0 20px; background: var(--papel); border-bottom: 1px solid var(--linea); }
  .columnas .pestanas { order: 1; align-self: stretch; align-items: flex-end; margin: 0; padding: 0; border: 0; background: none; overflow: visible; }
  .columnas .filtros { order: 2; margin: 0; padding: 0; overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .columnas .pared__cab { order: 3; margin-left: auto; align-items: center; }
  .columnas .pared__cab .buscar { flex: none; width: 260px; }
  .bandeja.columnas .conv, .bandeja.columnas .ficha { display: none; grid-row: 1; z-index: 5; }
  .bandeja.columnas.abierta .conv { display: grid; grid-column: 2; box-shadow: var(--sombra-panel); animation: entra-panel .32s var(--suave); }
  .bandeja.columnas.abierta .ficha:not([hidden]) { display: flex; grid-column: 3; animation: entra-panel .32s var(--suave); }
  .columnas .cierra-panel { display: grid; }
}
@keyframes entra-panel { from { opacity: 0; transform: translateX(28px); } }

/* Tableta y celular: la conversación a pantalla completa, con «atrás», como
   en la lista del celular; el tablero se desliza de lado con imán. */
@media (max-width: 1179px) {
  .bandeja.columnas { grid-template-columns: minmax(0, 1fr); }
  .bandeja.columnas .pared { grid-column: 1; border-right: 0; }
  .bandeja.columnas .conv__cab, .bandeja.columnas .ficha, .bandeja.columnas .hilo, .bandeja.columnas .piecon { display: none; }
  .bandeja.columnas.abierta .pared { display: none; }
  .bandeja.columnas.abierta .conv__cab { display: flex; grid-column: 1; }
  .bandeja.columnas.abierta .ficha:not([hidden]) { display: flex; grid-column: 1; }
  .bandeja.columnas.abierta .hilo { display: flex; grid-column: 1; }
  .bandeja.columnas.abierta .piecon:not([hidden]) { display: flex; grid-column: 1; }
  .columnas .atras { display: grid; }
  .columnas .tablero {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 14px; margin: 0 -14px; padding: 0 14px 14px;
    scrollbar-width: none;
  }
  .columnas .tablero::-webkit-scrollbar { display: none; }
  .columnas .tablero.arrastrando { scroll-snap-type: none; }
  .columna { flex: 0 0 260px; scroll-snap-align: start; }
}

/* Celular: una columna a la vez con la siguiente asomándose, y arriba los
   chips que saltan a cada una. Aquí no se arrastra: se corrige en la ficha. */
@media (max-width: 759px) {
  .modo button { width: 44px; height: 40px; }
  .columnas .saltos:not([hidden]) { display: flex; gap: 6px; flex: none; overflow-x: auto; scrollbar-width: none; margin: -4px -14px; padding: 0 14px; }
  .saltos::-webkit-scrollbar { display: none; }
  .saltos button {
    display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 0 12px;
    border: 1px solid var(--linea); border-radius: 999px; background: transparent; color: var(--tinta2); font-size: 12.5px; white-space: nowrap;
    transition: border-color .15s, color .15s, background .15s;
  }
  .saltos button .pildora { width: 5px; height: 11px; border-radius: 3px; }
  .saltos button .mono { font-family: var(--mono); font-size: 11.5px; color: var(--tinta3); font-variant-numeric: tabular-nums; }
  .saltos button.act { border-color: var(--tinta); color: var(--tinta); background: var(--papel); }
  .columna { flex-basis: calc(100% - 44px); scroll-snap-stop: always; }
  .columnas .tablero { gap: 10px; }
  .columna .tarjeta { -webkit-user-select: auto; user-select: auto; -webkit-touch-callout: default; }
}

/* ── Difusiones por WhatsApp (función `difusiones`, Ale 8/10) ─────────── */
/* Una hoja como Novedades: papel sobre la pared. La lista de las mandadas
   son filas de papel con la barra de acuses (leído en azul de marca, porque
   es el ✓✓ azul del hilo; entregado al 35 %; no llegó en rojo falla). La
   vista previa de la plantilla imita la burbuja de WhatsApp sobre su fondo
   (`--wa`), que es lo único de otro color: dice «así se verá allá». */
:root { --wa: #E9E3DA; }
/* En oscuro el fondo va más hondo que el papel, y los botones en el azul
   claro de la barra: el de marca no se lee sobre papel oscuro. */
@media (prefers-color-scheme: dark) {
  :root { --wa: #0A1016; }
  .wa__boton { color: var(--lado-azul); }
  .dif-cifra .azul { color: var(--lado-azul); }
}

.difusiones #difusiones-cuerpo { max-width: 980px; }
.dif__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.dif__cab > .btn { flex: none; }
.dif__paso { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta3); margin-bottom: 2px; }
.dif__et { display: block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta3); margin: 16px 0 6px; }
.difusiones .ayuda { margin-bottom: 14px; }
.dif__atras { margin: 0 0 8px -8px; }
.dif__aviso { background: color-mix(in srgb, var(--comp) 10%, var(--papel)); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--tinta2); margin-bottom: 10px; }
.dif__vacia { display: flex; gap: 14px; align-items: center; background: var(--papel); border-radius: 12px; box-shadow: var(--sombra); padding: 16px 18px; max-width: 620px; color: var(--tinta2); font-size: 13.5px; }
.dif__vacia .dif__mate { width: 46px; height: 42px; flex: none; }
.dif__vacia .dif__mate use { color: var(--azul); }

.dif__lista { display: grid; gap: 8px; max-width: 720px; }
.dif__cab--lista, .dif__cab--lista + .ayuda { max-width: 720px; }
.dif-fila { display: grid; gap: 8px; text-align: left; background: var(--papel); border-radius: 10px; box-shadow: var(--sombra); padding: 12px 14px; color: var(--tinta); transition: box-shadow .2s; }
.dif-fila:hover { box-shadow: 0 2px 4px rgba(20,23,31,.08), 0 8px 20px rgba(20,23,31,.08); }
.dif-fila__cab { display: flex; align-items: baseline; gap: 10px; }
.dif-fila__cab b { font-family: var(--out); font-weight: 600; font-size: 14px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dif-fila__cab time { font-size: 11px; color: var(--tinta3); flex: none; }
.dif__alto { font-family: var(--mono); font-size: 11px; color: var(--comp-t); flex: none; }
.dif-fila__cifras { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--tinta2); }
.dif-fila__cifras .fallo { color: #C93B3B; }
.dif-fila__cifras .fuerte { color: var(--tinta); }
.dif-barra { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--pared); }
.dif-barra i { display: block; height: 100%; transition: width .4s var(--suave); }
.dif-barra .leido { background: var(--azul); }
.dif-barra .entregado { background: color-mix(in srgb, var(--azul) 35%, transparent); }
.dif-barra .fallo { background: #C93B3B; }

/* Los pasos: lista + vista previa lado a lado; en angosto, una debajo de otra. */
.dif__dos { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; margin-top: 10px; }
.dif__dos--abajo { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 18px; }
.dif__pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea); max-width: 980px; }
.difusiones .error, .suelta .error { color: #C93B3B; font-size: 12.5px; margin-top: 10px; }
.difusiones .error:empty, .suelta .error:empty { display: none; }
.dif__meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--tinta2); }
.dif__meta .ic { width: 12px; height: 12px; }
.dif__meta:hover { color: var(--tinta); }

.plantillas { display: grid; gap: 6px; }
.plantilla { display: grid; gap: 3px; text-align: left; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; color: var(--tinta); }
.plantilla:hover:not(:disabled) { border-color: var(--tinta3); }
.plantilla.act { outline: 2px solid var(--azul); outline-offset: -1px; border-color: transparent; }
.plantilla:disabled { opacity: .6; cursor: default; }
.plantilla__cab { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.plantilla__cab b { font-family: var(--out); font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.plantilla__cab .mono { font-size: 11.5px; color: var(--tinta3); flex: none; }
.plantilla__et { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta3); }
.plantilla__no { font-size: 12px; color: var(--tinta2); }

/* La vista previa: la burbuja de WhatsApp sobre su fondo. */
.wa { background: var(--wa); border-radius: 12px; padding: 12px; display: grid; gap: 3px; justify-items: start; }
.wa__burbuja { background: var(--papel); border-radius: 10px 10px 10px 4px; padding: 9px 11px; max-width: 290px; width: fit-content; box-shadow: 0 1px 1px rgba(0,0,0,.08); display: grid; gap: 4px; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.wa__burbuja p { white-space: pre-wrap; }
.wa__burbuja small { font-size: 12px; color: var(--tinta3); }
.wa__cab { font-weight: 600; }
.wa__hueco { font-family: var(--mono); font-size: 11.5px; background: color-mix(in srgb, var(--azul) 14%, transparent); color: var(--tinta); border-radius: 4px; padding: 0 4px; }
.wa__boton { background: var(--papel); border-radius: 8px; padding: 7px 12px; width: 100%; max-width: 290px; text-align: center; color: var(--azul); font-weight: 500; font-size: 13px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.wa__pie { font-family: var(--mono); font-size: 11px; color: var(--tinta3); margin-top: 6px; }

.datos { display: grid; gap: 4px; margin-top: 4px; }
.dato { display: grid; gap: 6px; }
.dato .dif__et { margin: 10px 0 0; text-transform: none; letter-spacing: 0; }
.dato__modo { display: flex; gap: 6px; }
.dato small { font-size: 12px; color: var(--tinta3); }
.dato input, .dif__falta input { width: 100%; border: 1px solid var(--linea); border-radius: 10px; padding: 8px 12px; background: var(--pared); outline: none; font-size: 13.5px; }
.dato input:focus, .dif__falta input:focus { border-color: var(--azul); }

/* Los chips de colores, fechas y modo: los de los filtros de la pared, más grandes. */
.dif__chips, .dif__muestra { display: flex; flex-wrap: wrap; gap: 6px; }
.dif__muestra { margin-top: 10px; }
.chip-dif {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; white-space: nowrap;
  border: 1px solid var(--linea); border-radius: 999px; background: transparent; color: var(--tinta2); font-size: 12.5px;
  transition: border-color .15s, color .15s, background .15s;
}
.chip-dif .pildora { width: 5px; height: 11px; border-radius: 3px; }
.chip-dif .mono { font-size: 11.5px; color: var(--tinta3); font-variant-numeric: tabular-nums; }
.chip-dif:hover:not(.quieto) { color: var(--tinta); }
.chip-dif.act { border-color: var(--tinta); color: var(--tinta); background: var(--papel); font-weight: 500; }
.chip-dif.quieto { cursor: default; background: var(--papel); min-height: 28px; font-size: 12px; }
.chip-dif.tenue { color: var(--tinta3); }
.dif__cuenta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; background: var(--papel); border-radius: 12px; box-shadow: var(--sombra); padding: 14px 16px; margin-top: 18px; max-width: 620px; }
.dif__cuenta b { font-size: 26px; font-weight: 500; }
.dif__cuenta small { flex-basis: 100%; font-size: 11.5px; color: var(--tinta3); }

.dif__resumen { background: var(--papel); border-radius: 12px; box-shadow: var(--sombra); padding: 2px 14px; }
.dif__resumen div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 13.5px; }
.dif__resumen div + div { border-top: 1px solid var(--linea); }
.dif__resumen span:first-child { color: var(--tinta2); }
.dif__resumen .mono { text-align: right; font-size: 12.5px; overflow-wrap: anywhere; }
.dif__nota { margin-top: 10px; font-size: 12.5px; }
.dif__falta { display: grid; gap: 6px; margin-top: 14px; font-size: 13px; color: var(--tinta2); }

/* Una difusión: cómo va, las cifras y las personas. */
.dif__progreso, .dif__detenida { display: grid; gap: 10px; border-radius: 12px; padding: 12px 14px; margin: 10px 0 4px; font-size: 13px; color: var(--tinta2); max-width: 720px; }
.dif__progreso { background: var(--papel); box-shadow: var(--sombra); }
.dif__progreso .dif-barra { height: 8px; }
.dif__detenida { background: color-mix(in srgb, var(--comp) 10%, var(--papel)); grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.dif__detenida b, .dif__progreso b { color: var(--tinta); }
.dif-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.dif-cifra { background: var(--papel); border-radius: 12px; box-shadow: var(--sombra); padding: 10px 14px; }
.dif-cifra .dif__et { margin: 0 0 2px; }
.dif-cifra .azul { color: var(--azul); }
.dif-cifra b { font-size: 26px; font-weight: 500; }
.dif-grupo { display: grid; gap: 8px; align-content: start; }
.dif-grupo h3 { font-family: var(--out); font-weight: 600; font-size: 14px; display: flex; gap: 8px; align-items: baseline; }
.dif-grupo h3 .mono { font-size: 12px; color: var(--tinta3); font-weight: 400; }
.dif-grupo .ayuda { margin: 0; }
.dif-personas { display: grid; gap: 6px; }
.dif-persona { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--papel); border-radius: 10px; box-shadow: var(--sombra); padding: 8px 10px; color: var(--tinta); min-height: 44px; }
.dif-persona .inicial { background: var(--noche); flex: none; }
.dif-persona > span:not(.inicial) { display: grid; flex: 1; min-width: 0; }
.dif-persona b { font-family: var(--out); font-weight: 600; font-size: 13.5px; }
.dif-persona small { font-size: 12px; color: var(--tinta3); overflow-wrap: anywhere; }
.dif-persona > .ic { width: 14px; height: 14px; color: var(--tinta3); flex: none; transform: rotate(180deg); }

/* En el hilo: la plantilla es una burbuja de persona con su nombre arriba. */
.msj.plantilla .plantilla__marca { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11px; letter-spacing: .02em; margin-bottom: 4px; color: color-mix(in srgb, var(--sobre-noche) 72%, transparent); }
.msj.plantilla .plantilla__marca .ic { width: 12px; height: 12px; }

/* El pie de una conversación con «Mandar una plantilla». */
.piecon.con-plantilla { flex-wrap: wrap; row-gap: 8px; }
/* El texto arriba y los dos botones juntos debajo, a la derecha. */
.piecon.con-plantilla p { flex: 1 1 100%; }
.piecon.con-plantilla #nota-suelta, .piecon.con-plantilla #seguir-prueba { margin-left: auto; }
.piecon.con-plantilla > .btn:first-of-type { margin-left: auto; }
.piecon.con-plantilla #b-plantilla { flex: none; }

/* El interruptor de la ficha. */
.ficha-dif { display: grid; gap: 4px; }
.ficha-dif small { font-size: 12px; color: var(--tinta3); padding-left: 54px; }

/* La ventana de «Mandar una plantilla». */
.dialogo-plantilla { width: min(480px, calc(100vw - 32px)); max-height: min(86vh, 720px); }
.dialogo-plantilla .dialogo__cuerpo { padding: 0 16px 12px; }
.dialogo-plantilla .dialogo__pie { justify-content: space-between; }
.dialogo-plantilla .dialogo__pie .mono { font-size: 11.5px; color: var(--tinta3); }
.dlg-cargando { margin: 6px 0 14px; }
.suelta { display: grid; gap: 10px; }
.suelta__chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.suelta__chips::-webkit-scrollbar { display: none; }
.suelta__chips .chip-dif { flex: none; }

.dif__vista--dentro { display: none; }
@media (max-width: 1023px) {
  .dif__dos { grid-template-columns: minmax(0, 1fr); }
  .dif__vista--lado { display: none; }
  .dif__vista--dentro { display: block; margin: 2px 0 10px; }
}
@media (max-width: 759px) {
  .dif__cab h2 { font-size: 18px; }
  .dif-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dif__detenida { grid-template-columns: minmax(0, 1fr); }
  .dif__detenida .btn, .dif__pie .btn.azul { min-height: 44px; }
  .chip-dif { min-height: 40px; }
  .ficha-dif small { padding-left: 0; }
  /* «Mandar una plantilla» sube desde abajo, como una hoja del celular. */
  .dialogo-plantilla { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 88vh; border-radius: 14px 14px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .dialogo-plantilla .dialogo__pie .btn { min-height: 44px; flex: 1 1 100%; justify-content: center; }
  .piecon.con-plantilla > .btn:first-of-type { margin-left: 0; }
  .piecon.con-plantilla #b-plantilla { flex: 1 1 auto; justify-content: center; min-height: 44px; }
}

/* ── Movimiento reducido ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .hilo { scroll-behavior: auto; }
  /* Lo que se repite sin fin no se acelera: se apaga. */
  .msj.pensando .ojos, .sem.llenando .pildora { animation: none; }
  /* La tarjeta levantada sigue inclinada (dice que está en la mano), pero sin llegar girando. */
  .tarjeta.fantasma, .hueco, .tarjeta.aterriza { animation: none; }
}