/* ─────────────────────────────────────────────────────────────
   estilos.css — LA PINTA DEL PANEL
   Mismos colores, tipografías y formas que la web (web/prueba-scroll-4):
   fondo gris claro, tarjetas blancas, texto casi negro, verde NOOVA para
   acentuar, Sora para títulos e Inter para el texto. Pensado primero para
   el celular y después para la compu.
   ───────────────────────────────────────────────────────────── */

/* Tipografías: se sirven desde el propio panel (publico/fuentes/), no desde
   Google, para que ningún tercero se entere de cuándo y desde dónde se entra.
   Licencia SIL OFL 1.1 (ver publico/fuentes/LICENCIA-*.txt). Solo el juego
   "latin" (incluye tildes y la ñ) y los pesos que se usan. */
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fuentes/sora-latin-400-normal.woff2?v=98141d7eaa6e) format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fuentes/sora-latin-600-normal.woff2?v=fa9ab76f3051) format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fuentes/sora-latin-700-normal.woff2?v=c3337a673c9b) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fuentes/inter-latin-400-normal.woff2?v=8909904ab6c8) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fuentes/inter-latin-500-normal.woff2?v=f3779f1efccc) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fuentes/inter-latin-600-normal.woff2?v=f9a06e79cd3a) format('woff2'); }

:root {
  --fondo: #f3f4ef;
  --superficie: #ffffff;
  --borde: rgba(17, 19, 20, .10);
  --texto: #111314;
  --suave: #4f5a61;
  --verde: #8bc53f;
  --verde-osc: #4a7d14;
  --verde-suave: rgba(139, 197, 63, .55);
  --rojo: #b42318;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--fondo); color: var(--texto);
  font: 400 16px/1.55 Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; min-height: 100svh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
h1, h2 { font-family: Sora, Inter, sans-serif; letter-spacing: -0.025em; }
a { color: inherit; }

.etiqueta { display: block; font: 600 11px/1 Inter, sans-serif; letter-spacing: .2em; color: var(--verde-osc); text-transform: uppercase; margin-bottom: 12px; }
.etiqueta::before { content: ""; display: inline-block; width: 14px; height: 2px; background: var(--verde); vertical-align: middle; margin-right: 8px; }
.bajada { color: var(--suave); margin-top: 8px; max-width: 56ch; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--texto); color: #fff; text-decoration: none;
  font: 600 15px/1 Inter, sans-serif; text-align: center;
}
.boton:disabled { opacity: .6; cursor: wait; }
.boton.linea { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--texto); }
/* Borrar (no se puede deshacer): en rojo. */
.boton.peligro { background: var(--rojo); color: #fff; }
.cli-borrar { color: var(--rojo); }
.cli-ficha-pie { display: flex; justify-content: flex-end; margin-top: 18px; }
.cli-item-cambios { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--borde); }
.cli-cabeza-botones { display: flex; gap: 6px; flex-wrap: wrap; }
.cli-lista-borrar { margin: 0 0 10px 20px; font-size: 15px; line-height: 1.6; }
.cli-pregunta { font-size: 16px; line-height: 1.5; margin: 4px 0 8px; }
.boton.chico { padding: 9px 16px; font-size: 13px; }
.boton:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }

.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 22px; padding: 22px; }

/* ── Entrar y código ─────────────────────────────────────────── */
.acceso {
  min-height: 100vh; min-height: 100svh;
  display: grid; align-content: center; justify-items: center; gap: 22px;
  padding: 32px 20px;
}
.acceso-logo { height: 34px; width: auto; }
.acceso .tarjeta { width: 100%; max-width: 400px; padding: 28px 24px; box-shadow: 0 12px 32px rgba(17, 19, 20, .08); }
.acceso h1 { font-size: 30px; line-height: 1.1; font-weight: 700; }
.acceso .boton { width: 100%; margin-top: 18px; }

.formulario { display: grid; margin-top: 18px; }
.formulario label { font-size: 14px; color: var(--suave); margin: 12px 0 6px; }
.formulario input {
  width: 100%; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--borde); background: var(--fondo); color: var(--texto);
  font: 500 16px/1.2 Inter, sans-serif; /* 16px: así el iPhone no hace zoom al tocar */
}
.formulario input:focus { border-color: var(--verde-osc); background: var(--superficie); outline: none; box-shadow: 0 0 0 3px var(--verde-suave); }
.campo-codigo { text-align: center; letter-spacing: .5em; font: 600 26px/1.2 Sora, Inter, sans-serif !important; }

.aviso {
  margin-top: 16px; padding: 12px 14px; border-radius: 12px;
  background: rgba(180, 35, 24, .08); color: var(--rojo); font-size: 14px; font-weight: 500;
}
.volver { display: block; text-align: center; margin-top: 16px; font-size: 14px; color: var(--suave); }

/* ── Inicio ──────────────────────────────────────────────────── */
.barra {
  position: sticky; top: max(10px, env(safe-area-inset-top)); z-index: 20;
  margin: 10px 12px 0; max-width: 1080px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 8px 8px 18px;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--borde); border-radius: 999px;
  box-shadow: 0 8px 28px rgba(17, 19, 20, .08);
}
@media (min-width: 1104px) { .barra { margin: 10px auto 0; } }
.marca { display: block; line-height: 0; }
.marca img { height: 28px; width: auto; }

.inicio { max-width: 1080px; margin: 0 auto; padding: 36px 20px 48px; }
.inicio h1 { font-size: clamp(32px, 6vw, 52px); line-height: 1.05; font-weight: 700; }

.grilla { display: grid; gap: 12px; margin-top: 28px; }
@media (min-width: 640px) { .grilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .grilla { grid-template-columns: repeat(3, 1fr); } }

.seccion { position: relative; display: grid; gap: 6px; text-decoration: none; }
.seccion h2 { font-size: 19px; line-height: 1.2; margin-top: 8px; }
.seccion p { color: var(--suave); font-size: 14px; }
.seccion.apagada { opacity: .85; }
a.seccion:hover { border-color: var(--verde); }
.icono { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(139, 197, 63, .18); color: var(--verde-osc); }
.insignia {
  position: absolute; top: 18px; right: 18px;
  font: 600 11px/1 Inter, sans-serif; letter-spacing: .04em;
  padding: 6px 10px; border-radius: 999px;
  background: var(--fondo); color: var(--suave); border: 1px solid var(--borde);
}


/* ── WhatsApp (etapa 1) ──────────────────────────────────────────
   Armado como WhatsApp Web con la pinta de NOOVA:
   - compu (900 px o más): una tarjeta blanca grande con dos columnas,
     la lista de chats a la izquierda y el chat abierto a la derecha;
   - celular: una sola columna, como la app (lista, o chat a pantalla
     completa con la flecha para volver). Qué columna se ve lo decide la
     clase "con-chat" del <body>.
   ───────────────────────────────────────────────────────────────── */
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.ico { width: 20px; height: 20px; flex: none; display: block; }

body.pantalla-wa {
  height: 100vh; height: 100dvh; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
}

.wa-app {
  flex: 1; min-height: 0;
  width: calc(100% - 24px); max-width: 1400px; margin: 12px auto 14px;
  display: grid; grid-template-columns: minmax(320px, 400px) 1fr;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 22px;
  box-shadow: 0 12px 32px rgba(17, 19, 20, .08);
  overflow: hidden;
}

/* Botones redondos de ícono (volver). */
.wa-icono-boton {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 999px; color: var(--texto); text-decoration: none;
  background: var(--superficie); border: 1px solid var(--borde);
  transition: background .15s, border-color .15s;
}
.wa-icono-boton:hover { background: var(--fondo); }

/* ── La lista ─────────────────────────────────────────────────── */
.wa-col-lista { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--borde); }
.wa-lista-cabeza { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; }
.wa-titulo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.wa-titulo h1, .wa-titulo h2 { font: 700 22px/1.1 Sora, Inter, sans-serif; letter-spacing: -0.025em; }
.wa-conexion { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1.2 Inter, sans-serif; color: var(--verde-osc); }
.wa-conexion::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px rgba(139, 197, 63, .22); }
.wa-conexion.caida { color: var(--rojo); }
.wa-conexion.caida::before { background: var(--rojo); box-shadow: 0 0 0 3px rgba(180, 35, 24, .15); }

/* "Abrir WhatsApp Web": secundario y discreto. */
.boton.wa-web {
  flex: none; padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--suave);
  box-shadow: inset 0 0 0 1px var(--borde); transition: color .15s, box-shadow .15s, background .15s;
}
.boton.wa-web::after { content: "↗"; font-size: 12px; }
.boton.wa-web:hover { color: var(--texto); background: var(--fondo); }

.wa-buscar { position: relative; margin: 0 16px 8px; }
.wa-lupa { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--suave); pointer-events: none; }
.wa-buscar input {
  width: 100%; height: 44px; padding: 0 16px 0 42px; border-radius: 999px;
  border: 1px solid transparent; background: var(--fondo); color: var(--texto);
  font: 400 15px/1.2 Inter, sans-serif; transition: border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance: none; appearance: none;
}
.wa-buscar input::placeholder { color: #6b7572; }
.wa-buscar input:focus { outline: none; background: var(--superficie); border-color: var(--verde-osc); box-shadow: 0 0 0 3px var(--verde-suave); }

.wa-lista { list-style: none; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 8px 16px; }
.wa-item {
  display: flex; gap: 12px; align-items: center; padding: 10px 10px; border-radius: 16px;
  color: inherit; text-decoration: none; transition: background .15s;
}
.wa-item:hover { background: rgba(17, 19, 20, .04); }
.wa-item.activo { background: rgba(139, 197, 63, .18); }
.wa-item:focus-visible { outline: 3px solid var(--verde); outline-offset: -3px; }
.wa-item-cuerpo { flex: 1; min-width: 0; display: grid; gap: 3px; }
.wa-item-fila { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wa-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px/1.3 Inter, sans-serif; }
.wa-hora { flex: none; font-size: 12px; color: var(--suave); font-variant-numeric: tabular-nums; }
.wa-ultimo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.35; color: var(--suave); }
/* La fila de un chat que tenés vos: el botón chico de devolver va encima
   del costado derecho del enlace (afuera de él), y el enlace le deja lugar. */
.wa-fila { position: relative; }
.wa-item.con-boton { padding-right: 58px; }
.wa-fila-devolver { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.wa-boton-fila {
  display: grid; place-items: center; width: 40px; height: 40px; cursor: pointer;
  border-radius: 999px; border: 0; background: rgba(139, 197, 63, .18); color: var(--verde-osc);
  transition: background .15s;
}
.wa-boton-fila .ico { width: 18px; height: 18px; }
.wa-boton-fila:hover { background: rgba(139, 197, 63, .32); }
.wa-boton-fila:disabled { opacity: .6; cursor: wait; }
.wa-boton-fila:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.wa-vacio { padding: 36px 16px; text-align: center; color: var(--suave); font-size: 14px; }

/* El circulito con las iniciales (un color fijo por chat). */
.wa-avatar {
  width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font: 600 16px/1 Sora, Inter, sans-serif; letter-spacing: .02em; user-select: none;
}
.wa-avatar .ico { width: 24px; height: 24px; }
.wa-avatar.grande { width: 42px; height: 42px; font-size: 15px; }
.av-0 { background: #e3f1d0; color: #3d6b10; }
.av-1 { background: #d6eef0; color: #1d6770; }
.av-2 { background: #fcebc5; color: #855600; }
.av-3 { background: #e7e4f6; color: #4a3f98; }
.av-4 { background: #fbe1dc; color: #9c3727; }
.av-5 { background: #dfe7ee; color: #33506a; }

.pastilla {
  flex: none; font: 600 11px/1 Inter, sans-serif; padding: 5px 9px; border-radius: 999px;
  background: var(--fondo); color: var(--suave); white-space: nowrap;
}
.pastilla.vos { background: var(--texto); color: #fff; }
.pastilla.clara { background: rgba(139, 197, 63, .18); color: var(--verde-osc); }
.pastilla.cola { background: #fff1d1; color: #855600; }

/* ── El chat ──────────────────────────────────────────────────── */
.wa-col-chat { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; }

/* La textura sutil del fondo (puntitos, sin imágenes de afuera). */
.wa-mensajes, .wa-sin-chat {
  background-color: #eef0e8;
  background-image:
    radial-gradient(rgba(74, 125, 20, .09) 1.1px, transparent 1.6px),
    radial-gradient(rgba(17, 19, 20, .045) 1.1px, transparent 1.6px);
  background-size: 24px 24px, 24px 24px;
  background-position: 0 0, 12px 12px;
}

.wa-sin-chat { align-items: center; justify-content: center; text-align: center; padding: 32px; gap: 6px; }
.wa-sin-chat img { height: 30px; width: auto; opacity: .9; margin-bottom: 18px; }
.wa-sin-chat h2 { font: 700 24px/1.15 Sora, Inter, sans-serif; letter-spacing: -0.025em; }
.wa-sin-chat p { color: var(--suave); font-size: 15px; max-width: 36ch; }

.wa-chat-cabeza {
  display: flex; align-items: center; gap: 12px; min-height: 70px;
  padding: 12px 18px; background: var(--superficie); border-bottom: 1px solid var(--borde);
  position: relative; z-index: 2;
}
.wa-atras { display: none; }
.wa-chat-quien { flex: 1; min-width: 0; }
.wa-chat-quien h1 { font: 600 17px/1.25 Sora, Inter, sans-serif; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-detalle { display: block; font-size: 13px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-devolver { flex: none; }
.wa-boton-devolver {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 9px 14px; border-radius: 999px; border: 0;
  background: rgba(139, 197, 63, .18); color: var(--verde-osc);
  font: 600 13px/1 Inter, sans-serif; transition: background .15s;
}
.wa-boton-devolver .ico { width: 16px; height: 16px; }
.wa-boton-devolver:hover { background: rgba(139, 197, 63, .3); }
.wa-boton-devolver:disabled { opacity: .6; cursor: wait; }
.wa-boton-devolver:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }

/* Avisos (error, enviado, en cola, devuelto): franjas claras arriba del chat. */
.wa-avisos { position: absolute; top: 82px; left: 0; right: 0; z-index: 3; display: grid; justify-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
.wa-banner {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; max-width: 640px;
  padding: 11px 14px; border-radius: 14px; font: 500 14px/1.4 Inter, sans-serif;
  box-shadow: 0 10px 28px -10px rgba(17, 19, 20, .25); pointer-events: auto;
}
.wa-banner::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: currentColor; }
.wa-banner.error { background: #fdeeec; color: var(--rojo); border: 1px solid rgba(180, 35, 24, .18); }
.wa-banner.bueno { background: #eef7e3; color: var(--verde-osc); border: 1px solid rgba(74, 125, 20, .2); }
.wa-banner.yendose { opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .35s; }
/* En la lista el aviso de error va en el lugar, no flotando. */
.wa-col-lista .wa-banner { margin: 0 16px 8px; width: auto; box-shadow: none; }

.wa-mensajes { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.wa-mensajes-dentro {
  min-height: 100%; max-width: 900px; margin: 0 auto; padding: 14px 22px 18px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.wa-anteriores {
  align-self: center; margin: 4px 0 8px; padding: 8px 16px; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
  font: 600 13px/1 Inter, sans-serif; box-shadow: 0 1px 2px rgba(17, 19, 20, .06);
}
.wa-anteriores:hover { background: var(--fondo); }
.wa-anteriores:disabled { opacity: .6; cursor: wait; }
.wa-hilo, .wa-dia-grupo { display: flex; flex-direction: column; gap: 3px; }

/* El separador de día ("Hoy", "Ayer"). Queda fijo arriba mientras se lee
   ese día; como cada día es su propio bloque (.wa-dia-grupo), el del día
   siguiente lo empuja y nunca se apilan. Al quedar fijo NO flota encima de
   una burbuja: ocupa una franja del color del fondo (con un degradé abajo)
   y los mensajes pasan por DEBAJO de la franja, no se mezclan con la
   pastilla. El margen negativo hace que la franja llegue hasta el borde de
   arriba de la caja de mensajes (el padding de .wa-mensajes-dentro). */
.wa-dia {
  position: sticky; top: 0; z-index: 1; display: flex; justify-content: center;
  margin: 6px -22px 4px; padding: 8px 22px 12px; pointer-events: none;
  background: linear-gradient(#eef0e8 0, #eef0e8 calc(100% - 10px), rgba(238, 240, 232, 0) 100%);
}
.wa-dia span {
  padding: 5px 12px; border-radius: 999px; background: #fff;
  font: 600 12px/1.2 Inter, sans-serif; color: var(--suave);
  box-shadow: 0 1px 2px rgba(17, 19, 20, .08);
}

.burbuja {
  position: relative; max-width: min(72%, 560px); padding: 6px 10px 7px;
  border-radius: 12px; background: var(--superficie); color: var(--texto);
  box-shadow: 0 1px 1.5px rgba(17, 19, 20, .12);
  font-size: 15px; line-height: 1.42;
}
.burbuja.primera { margin-top: 8px; }
.burbuja.cliente, .burbuja.sistema { align-self: flex-start; }
.burbuja.clara, .burbuja.juanchi { align-self: flex-end; }
.burbuja.clara { background: #e5f3d4; }
.burbuja.juanchi { background: #cde8a6; }
.burbuja.sistema { background: #f4f4f1; color: var(--suave); }
/* La "colita" de la primera burbuja de cada tanda. */
.burbuja.primera.cliente, .burbuja.primera.sistema { border-top-left-radius: 0; }
.burbuja.primera.clara, .burbuja.primera.juanchi { border-top-right-radius: 0; }
.burbuja.primera::before { content: ""; position: absolute; top: 0; width: 8px; height: 12px; background: inherit; }
.burbuja.primera.cliente::before, .burbuja.primera.sistema::before { left: -7px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.burbuja.primera.clara::before, .burbuja.primera.juanchi::before { right: -7px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.burbuja .quien { display: block; font: 600 12.5px/1.3 Inter, sans-serif; color: var(--verde-osc); margin-bottom: 1px; }
.burbuja.juanchi .quien { color: #24420a; }
.burbuja .texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.burbuja .adjunto { display: block; color: var(--suave); font-size: 14px; }
/* La hora va adentro, abajo a la derecha; el "hueco" le guarda lugar. */
.burbuja .hueco { display: inline-block; width: 44px; height: 1px; }
.burbuja .meta { position: absolute; right: 9px; bottom: 4px; font-size: 11px; line-height: 1; color: rgba(17, 19, 20, .62); font-variant-numeric: tabular-nums; }
.burbuja.en-cola { background: #f6faf0; box-shadow: none; border: 1.5px dashed rgba(74, 125, 20, .45); }
.burbuja.en-cola::before { display: none; }
.burbuja .cola-nota {
  display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 9px; border-radius: 9px;
  background: #fff1d1; color: #855600; font: 500 12px/1.35 Inter, sans-serif;
}
.burbuja .cola-nota .ico { width: 14px; height: 14px; }
.nota-sistema {
  align-self: center; max-width: 90%; text-align: center; margin: 10px 0 4px;
  padding: 6px 12px; border-radius: 10px; background: #fff6e0; color: #6b4a00;
  font: 500 12.5px/1.4 Inter, sans-serif; box-shadow: 0 1px 1.5px rgba(17, 19, 20, .08);
}

/* ── El pie: la caja para escribir ────────────────────────────── */
.wa-pie {
  position: relative; z-index: 2; flex: none;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #f8f9f5; border-top: 1px solid var(--borde);
}
.wa-bajar {
  position: absolute; right: 22px; bottom: calc(100% + 14px);
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--superficie); color: var(--suave);
  box-shadow: 0 4px 14px rgba(17, 19, 20, .18);
}
.wa-bajar.hay-nuevos::after { content: ""; position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--verde); border: 2px solid var(--superficie); }
.wa-escribir { display: flex; align-items: flex-end; gap: 10px; max-width: 900px; margin: 0 auto; }
.wa-caja {
  flex: 1; min-width: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: 24px;
  transition: border-color .15s, box-shadow .15s;
}
.wa-caja:focus-within { border-color: var(--verde-osc); box-shadow: 0 0 0 3px var(--verde-suave); }
.wa-caja textarea {
  display: block; width: 100%; resize: none; min-height: 46px; max-height: 160px;
  padding: 12px 18px; border: 0; border-radius: 24px; background: transparent; color: var(--texto);
  font: 400 16px/1.4 Inter, sans-serif; /* 16px: así el iPhone no hace zoom al tocar */
}
.wa-caja textarea:focus { outline: none; }
.wa-caja textarea::placeholder { color: #6b7572; }
.wa-enviar {
  flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--verde) 0%, var(--verde-osc) 100%);
  box-shadow: 0 8px 18px -8px rgba(74, 125, 20, .7);
  transition: transform .12s, filter .15s;
}
.wa-enviar .ico { width: 20px; height: 20px; margin-left: -2px; margin-top: 1px; }
.wa-enviar:hover { filter: brightness(1.05); }
.wa-enviar:active { transform: scale(.94); }
.wa-enviar:disabled { filter: grayscale(.4); opacity: .7; cursor: wait; }
.wa-anteriores:focus-visible, .wa-bajar:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.wa-enviar:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }

/* Cuando no se le puede escribir (baja, 30 días, nunca escribió...). */
.wa-cerrado {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  max-width: 900px; margin: 0 auto; padding: 12px 16px; border-radius: 14px;
  font: 500 14px/1.4 Inter, sans-serif; text-align: left;
}
.wa-cerrado .ico { width: 18px; height: 18px; }
.wa-cerrado.gris { background: var(--fondo); color: var(--suave); }
.wa-cerrado.ambar { background: #fff4da; color: #7a5000; }
.wa-cerrado.rojo { background: #fdeeec; color: var(--rojo); }

/* ── Celular: una columna, como la app ────────────────────────── */
@media (max-width: 899px) {
  body.pantalla-wa { padding: 0; }
  .pantalla-wa .barra { display: none; }
  /* La app ocupa justo lo que se ve. Con el teclado del iPhone abierto,
     panel.js ajusta --alto-visible y --arriba-visible para que la caja de
     escribir quede pegada arriba del teclado. */
  .wa-app {
    position: fixed; left: 0; top: 0; width: 100%;
    height: 100vh; height: var(--alto-visible, 100dvh);
    transform: translateY(var(--arriba-visible, 0px));
    margin: 0; border: 0; border-radius: 0; box-shadow: none;
    grid-template-columns: 1fr;
  }
  body.pantalla-wa:not(.con-chat) .wa-col-chat { display: none; }
  body.pantalla-wa.con-chat .wa-col-lista { display: none; }
  .wa-col-lista { border-right: 0; }
  .wa-lista-cabeza { padding: calc(12px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 12px calc(14px + env(safe-area-inset-left)); }
  .wa-buscar { margin: 0 calc(14px + env(safe-area-inset-right)) 8px calc(14px + env(safe-area-inset-left)); }
  .wa-lista { padding: 2px 6px calc(16px + env(safe-area-inset-bottom)); }
  .wa-atras { display: grid; border: 0; width: 34px; margin-left: -6px; }
  .wa-chat-cabeza {
    flex-wrap: wrap; gap: 10px; min-height: 0;
    padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 10px calc(10px + env(safe-area-inset-left));
  }
  .wa-devolver { flex-basis: 100%; }
  .wa-boton-devolver { width: 100%; justify-content: center; padding: 10px 14px; }
  .wa-avisos { top: auto; position: relative; padding: 8px 12px 0; background: #eef0e8; }
  .wa-banner { box-shadow: none; }
  .wa-avisos:not(:has(> :not([hidden]))) { display: none; }
  .wa-mensajes-dentro { padding: 10px 12px 14px; }
  .burbuja { max-width: 86%; font-size: 16px; }
  .wa-nombre { font-size: 16px; }
  .wa-ultimo { font-size: 15px; }
  .wa-hora { font-size: 12.5px; }
  .wa-dia { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .wa-fila-devolver { right: 8px; }
  .wa-boton-fila { width: 44px; height: 44px; }
  .wa-item.con-boton { padding-right: 62px; }
  .wa-pie { padding: 8px calc(10px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left)); }
  .wa-escribir { gap: 8px; }
  .wa-bajar { right: 14px; }
}
@media (max-width: 420px) {
  .boton.wa-web { padding: 8px 10px; }
}
/* Sin caja ni aviso (ej. Clara no responde): el pie no ocupa lugar. */
.wa-pie:not(:has(.wa-escribir, .wa-cerrado)) { padding: 0; border-top: 0; }

/* ── Compu: WhatsApp ocupa toda la ventana y se lee más grande ──────
   Pedido de Juanchi (13/10): "más visible y que ocupe todo el espacio".
   Como WhatsApp Web: sin ancho máximo ni márgenes alrededor; arriba una
   barra fina con el logo y Salir, y la app usa todo el alto que queda. */
@media (min-width: 900px) {
  body.pantalla-wa { padding: 0; }
  .pantalla-wa .barra {
    position: static; flex: none; width: 100%; max-width: none; margin: 0;
    padding: 6px 16px 6px 20px; border: 0; border-bottom: 1px solid var(--borde); border-radius: 0;
    box-shadow: none; background: var(--superficie);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .pantalla-wa .marca img { height: 24px; }
  .pantalla-wa .barra .boton.chico { padding: 7px 14px; }
  .wa-app {
    width: 100%; max-width: none; margin: 0;
    border: 0; border-radius: 0; box-shadow: none;
    /* La lista: 400 px en una compu chica, crece en pantallas grandes. */
    grid-template-columns: clamp(400px, 28vw, 520px) 1fr;
  }

  /* La lista, más grande y con más contraste. */
  .wa-lista-cabeza { padding: 18px 18px 12px; }
  .wa-titulo h1, .wa-titulo h2 { font-size: 24px; white-space: nowrap; }
  .wa-conexion { font-size: 13px; }
  .boton.wa-web { font-size: 13px; padding: 9px 14px; color: var(--texto); }
  .wa-buscar { margin: 0 18px 10px; }
  .wa-buscar input { height: 46px; font-size: 16px; }
  .wa-lista { padding: 4px 10px 18px; }
  .wa-item { padding: 12px 12px; gap: 14px; }
  .wa-avatar { width: 54px; height: 54px; font-size: 18px; }
  .wa-avatar .ico { width: 26px; height: 26px; }
  .wa-nombre { font-size: 16.5px; }
  .wa-hora { font-size: 13px; }
  .wa-ultimo { font-size: 15px; }
  .pastilla { font-size: 12px; padding: 6px 10px; }

  /* El chat. */
  .wa-chat-cabeza { min-height: 76px; padding: 12px 24px; gap: 14px; }
  .wa-avatar.grande { width: 48px; height: 48px; font-size: 17px; }
  .wa-chat-quien h1 { font-size: 19px; }
  .wa-detalle { font-size: 14px; }
  .wa-boton-devolver { font-size: 14px; padding: 10px 16px; }
  .wa-boton-devolver .ico { width: 17px; height: 17px; }
  .wa-avisos { top: 88px; }
  .wa-banner { font-size: 15px; max-width: 720px; }
  .wa-mensajes-dentro { max-width: none; padding: 16px clamp(24px, 5%, 80px) 20px; }
  .wa-dia { margin-left: calc(-1 * clamp(24px, 5%, 80px)); margin-right: calc(-1 * clamp(24px, 5%, 80px)); padding-left: clamp(24px, 5%, 80px); padding-right: clamp(24px, 5%, 80px); }
  .wa-dia span { font-size: 13px; padding: 6px 14px; }
  .burbuja { max-width: min(65%, 720px); font-size: 16px; line-height: 1.45; padding: 7px 12px 8px; }
  .burbuja .quien { font-size: 13.5px; }
  .burbuja .adjunto { font-size: 15px; }
  .burbuja .hueco { width: 50px; }
  .burbuja .meta { font-size: 12px; right: 10px; bottom: 5px; }
  .burbuja .cola-nota { font-size: 13px; }
  .nota-sistema { font-size: 13.5px; }
  .wa-anteriores { font-size: 14px; }
  .wa-pie { padding: 12px clamp(24px, 5%, 80px) 14px; }
  .wa-escribir, .wa-cerrado { max-width: none; }
  .wa-cerrado { font-size: 15px; }
  .wa-caja textarea { min-height: 50px; padding: 13px 20px; font-size: 16px; }
  .wa-enviar { width: 50px; height: 50px; }
  .wa-enviar .ico { width: 22px; height: 22px; }
  .wa-sin-chat h2 { font-size: 28px; }
  .wa-sin-chat p { font-size: 16px; }
  .wa-sin-chat img { height: 36px; }
}

/* Pantallas grandes (1600 px o más): todo un punto más grande. */
@media (min-width: 1600px) {
  .wa-nombre { font-size: 17px; }
  .wa-ultimo { font-size: 15.5px; }
  .wa-avatar { width: 56px; height: 56px; }
  .burbuja { font-size: 17px; }
  .burbuja .hueco { width: 54px; }
  .burbuja .meta { font-size: 12.5px; }
  .wa-chat-quien h1 { font-size: 20px; }
  .wa-caja textarea { font-size: 17px; }
}
/* Fila de un chat que tenés vos (con el botón de devolver): el último
   mensaje va entero en su línea y las pastillas abajo, así no queda "Clie…". */
.wa-item.con-boton .wa-item-fila:last-child { flex-wrap: wrap; row-gap: 5px; }
.wa-item.con-boton .wa-ultimo { flex-basis: 100%; }

/* ── Clientes y garantías (etapa 2) ──────────────────────────────
   Páginas normales del panel (la barra de arriba, como el inicio), con el
   ancho de la pantalla. /clientes es una tabla dentro de una tarjeta
   blanca: encabezado que queda fijo al bajar, filas que se marcan al pasar
   el mouse (toda la fila lleva a la ficha), pastillas de color para la
   garantía. En el celular, cada cliente es una tarjeta (sin tabla ancha).
   La ficha y los formularios: tarjetas blancas sobre el fondo gris claro.
   ───────────────────────────────────────────────────────────────── */
.cli-pagina { max-width: 1280px; margin: 0 auto; padding: 22px 20px 48px; }
.cli-pagina-form { max-width: 820px; }

/* "Volver a la lista" / "Inicio": enlace chico con flecha, arriba de todo. */
.cli-volver {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px -6px; padding: 6px 10px 6px 6px;
  border-radius: 999px; font: 600 13.5px/1 Inter, sans-serif; color: var(--suave); text-decoration: none;
  transition: background .15s, color .15s;
}
.cli-volver .ico { width: 18px; height: 18px; }
.cli-volver:hover { background: rgba(17, 19, 20, .05); color: var(--texto); }

/* La cabeza de la tabla: título, cuántos hay y los dos botones. */
.cli-encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cli-encabezado h1 { font: 700 clamp(30px, 4.5vw, 40px)/1.05 Sora, Inter, sans-serif; letter-spacing: -0.03em; }
.cli-cuenta { margin-top: 6px; font: 500 14px/1.3 Inter, sans-serif; color: var(--suave); font-variant-numeric: tabular-nums; }
.cli-encabezado-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.cli-encabezado-acciones .boton { gap: 7px; }
.cli-encabezado-acciones .ico { width: 16px; height: 16px; }
.cli-pagina > .wa-banner { max-width: none; margin-bottom: 14px; box-shadow: none; }

/* Buscar y filtrar: una tarjeta con el buscador, las fechas y las pastillas. */
.cli-filtros-caja {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 22px;
  padding: 14px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(17, 19, 20, .04);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
}
.cli-buscar-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cli-buscar { position: relative; flex: 1 1 320px; min-width: 0; }
.cli-lupa { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--suave); pointer-events: none; }
.cli-buscar input {
  width: 100%; height: 46px; padding: 0 16px 0 42px; border-radius: 999px;
  border: 1px solid transparent; background: var(--fondo); color: var(--texto);
  font: 400 16px/1.2 Inter, sans-serif; transition: border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance: none; appearance: none;
}
.cli-buscar input::placeholder { color: #6b7572; }
.cli-buscar input:focus, .cli-fecha input:focus { outline: none; background: var(--superficie); border-color: var(--verde-osc); box-shadow: 0 0 0 3px var(--verde-suave); }
.cli-fechas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 4px 0 12px; min-height: 46px; border-radius: 999px; background: var(--fondo); }
.cli-fechas-ico { width: 17px; height: 17px; color: var(--suave); }
.cli-fecha { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 Inter, sans-serif; color: var(--suave); }
.cli-fecha input {
  height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--texto); font: 500 14px/1 Inter, sans-serif; font-variant-numeric: tabular-nums;
}
.boton.cli-filtrar { height: 46px; padding: 0 20px; }

.cli-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.cli-chips-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cli-chips-titulo { font: 600 11px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); margin-right: 4px; }
.cli-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px;
  font: 600 13px/1 Inter, sans-serif; color: var(--texto); text-decoration: none; white-space: nowrap;
  background: var(--superficie); border: 1px solid var(--borde); transition: background .15s, border-color .15s, color .15s;
}
.cli-chip:hover { background: var(--fondo); border-color: rgba(17, 19, 20, .2); }
.cli-chip.activo { background: var(--texto); border-color: var(--texto); color: #fff; }
.cli-chip-n { font: 600 11.5px/1 Inter, sans-serif; font-variant-numeric: tabular-nums; padding: 3px 7px; border-radius: 999px; background: rgba(17, 19, 20, .07); color: var(--suave); }
.cli-chip.activo .cli-chip-n { background: rgba(255, 255, 255, .2); color: #fff; }
.cli-chip .cli-flecha { font-size: 10px; }
.cli-solo-celular { display: none; }
.cli-limpiar {
  display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 7px 10px; border-radius: 999px;
  font: 500 13px/1 Inter, sans-serif; color: var(--suave); text-decoration: none; transition: color .15s, background .15s;
}
.cli-limpiar .ico { width: 14px; height: 14px; }
.cli-limpiar:hover { color: var(--rojo); background: #fdeeec; }

/* La tabla. "overflow: clip" redondea las puntas sin romper el encabezado
   fijo (con "hidden" dejaría de quedar pegado arriba). */
.cli-tabla-caja {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 22px;
  box-shadow: 0 12px 32px rgba(17, 19, 20, .06); overflow: clip;
}
.cli-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.cli-tabla th {
  position: sticky; top: calc(max(10px, env(safe-area-inset-top)) + 58px); z-index: 5;
  background: #fafaf7; border-bottom: 1px solid var(--borde);
  padding: 12px 14px; text-align: left; white-space: nowrap;
  font: 600 12px/1.2 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--suave);
}
.cli-tabla th:first-child { padding-left: 20px; }
.cli-tabla th.num, .cli-tabla td.num { text-align: right; }
.cli-orden { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; padding: 4px 6px; margin: -4px -6px; border-radius: 8px; transition: color .15s, background .15s; }
.cli-orden:hover { color: var(--texto); background: rgba(17, 19, 20, .05); }
.cli-flecha { font-size: 10px; line-height: 1; opacity: .35; transition: opacity .15s; }
.cli-orden:hover .cli-flecha { opacity: .7; }
.cli-tabla th.activo { color: var(--verde-osc); background: #f1f7e8; }
.cli-tabla th.activo .cli-flecha { opacity: 1; }

.cli-fila { position: relative; cursor: pointer; transition: background .12s; }
.cli-fila td { padding: 13px 14px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.cli-fila td:first-child { padding-left: 20px; }
.cli-fila td.cli-c-nombre { min-width: 230px; }
.cli-fila:last-child td { border-bottom: 0; }
.cli-fila td.en-orden { background: rgba(139, 197, 63, .05); }
.cli-fila:hover td { background: rgba(139, 197, 63, .12); }
.cli-fila:focus-within td { background: rgba(139, 197, 63, .12); }

/* El nombre es el enlace. En la compu, el clic en el resto de la fila lo
   resuelve panel.js (estirar el enlace con ::after en una fila de tabla no
   anda igual en todos los navegadores); en el celular, la tarjeta sí lo
   estira (ver abajo). */
.cli-nombre-enlace { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; border-radius: 10px; }
.cli-nombre-enlace .wa-avatar { width: 40px; height: 40px; font-size: 14px; }
.cli-nombre-enlace .wa-avatar .ico { width: 20px; height: 20px; }
.cli-nombre-texto { display: grid; gap: 2px; min-width: 0; }
.cli-nombre-texto strong { font: 600 15px/1.3 Inter, sans-serif; overflow-wrap: anywhere; }
.cli-fila:hover .cli-nombre-texto strong { color: var(--verde-osc); }
.cli-sub { font-size: 12.5px; line-height: 1.3; color: var(--suave); }
.cli-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cli-c-fecha, .cli-c-doc, .cli-c-tel { color: #2b3236; }
.cli-serie {
  display: inline-block; margin: 1px 4px 1px 0; padding: 3px 7px; border-radius: 6px;
  font: 500 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em;
  background: var(--fondo); color: #2b3236; white-space: nowrap;
}
.cli-c-monto { font-weight: 600; font-variant-numeric: tabular-nums; }
.cli-nada { color: #b3b9b6; }

/* Sin resultados. */
.cli-vacio-caja { display: grid; justify-items: center; gap: 6px; padding: 54px 20px 58px; text-align: center; }
.cli-vacio-icono { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 8px; border-radius: 20px; background: rgba(139, 197, 63, .18); color: var(--verde-osc); }
.cli-vacio-icono .ico { width: 28px; height: 28px; }
.cli-vacio-caja h2 { font: 700 20px/1.2 Sora, Inter, sans-serif; letter-spacing: -0.02em; }
.cli-vacio-caja p { color: var(--suave); font-size: 15px; max-width: 40ch; }
.cli-vacio-caja .boton { margin-top: 12px; }

.pastilla.g-ok { background: rgba(139, 197, 63, .18); color: var(--verde-osc); }
.pastilla.g-pendiente { background: #fff1d1; color: #855600; }
.pastilla.g-sin { background: #eceee8; color: #5d6669; }
.pastilla.g-rehacer { background: #fdeeec; color: var(--rojo); }

/* La cabeza de la ficha y de los formularios. */
.cli-ficha-cabeza { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.cli-ficha-cabeza .wa-avatar.grande { width: 56px; height: 56px; font-size: 19px; }
.cli-ficha-quien { flex: 1; min-width: 0; display: grid; gap: 3px; }
.cli-ficha-quien h1 { font: 700 clamp(24px, 3.6vw, 32px)/1.1 Sora, Inter, sans-serif; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.cli-detalle { font-size: 14.5px; color: var(--suave); }
.cli-abrir-chat { flex: none; text-decoration: none; }
.cli-avisos { display: grid; gap: 8px; }
.cli-avisos .wa-banner { max-width: none; margin-bottom: 14px; box-shadow: none; }
.cli-grilla { display: grid; gap: 14px; align-items: start; }
.cli-columna { display: grid; gap: 14px; min-width: 0; }

.cli-tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; padding: 16px 18px 18px; box-shadow: 0 1px 2px rgba(17, 19, 20, .04); min-width: 0; }
.cli-tarjeta-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cli-tarjeta h2 { font: 700 16px/1.2 Sora, Inter, sans-serif; letter-spacing: -0.02em; }

/* Botones chicos con ícono (Editar, Ver, Descargar, Nueva). */
.cli-boton {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  font: 600 13px/1 Inter, sans-serif; color: var(--texto); text-decoration: none; white-space: nowrap;
  background: var(--fondo); border: 1px solid var(--borde); transition: background .15s, border-color .15s;
}
.cli-boton .ico { width: 15px; height: 15px; }
.cli-boton:hover { background: #e9ebe4; border-color: rgba(17, 19, 20, .16); }

.cli-datos { display: grid; gap: 10px 18px; grid-template-columns: 1fr; }
.cli-dato { min-width: 0; }
.cli-dato dt { font: 500 12px/1.3 Inter, sans-serif; color: var(--suave); text-transform: uppercase; letter-spacing: .06em; }
.cli-dato dd { font: 500 15px/1.4 Inter, sans-serif; overflow-wrap: anywhere; margin-top: 2px; }
.cli-dato dd a { color: var(--verde-osc); font-weight: 600; }
.cli-vacio { color: #79827f; font-weight: 400; font-size: 14px; }
.cli-notas { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde); }
.cli-notas-titulo { display: block; font: 500 12px/1.3 Inter, sans-serif; color: var(--suave); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.cli-notas p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }

.cli-items { list-style: none; display: grid; gap: 10px; }
.cli-item { padding: 12px 14px; border-radius: 14px; background: #fafaf7; border: 1px solid var(--borde); min-width: 0; }
.cli-item-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cli-item-titulo { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cli-item-titulo .ico { width: 17px; height: 17px; color: var(--verde-osc); }
.cli-item-titulo strong { font: 600 14.5px/1.35 Inter, sans-serif; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cli-item-linea { margin-top: 4px; font-size: 14px; color: var(--texto); }
.cli-item-linea.suave { color: var(--suave); font-size: 13px; }
.cli-item-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.cli-item-acciones:empty { display: none; }
.cli-archivo { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.boton.cli-hacer { gap: 7px; padding: 8px 14px; font-size: 13px; }
.boton.cli-hacer .ico { width: 15px; height: 15px; }

/* Empresa: comprados, vendidos, en stock. */
.cli-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cli-numeros div { padding: 12px 10px; border-radius: 14px; background: var(--fondo); text-align: center; display: grid; gap: 2px; }
.cli-numeros strong { font: 700 26px/1.1 Sora, Inter, sans-serif; font-variant-numeric: tabular-nums; }
.cli-numeros span { font-size: 13px; color: var(--suave); }
.cli-numeros .destacado { background: rgba(139, 197, 63, .18); }
.cli-numeros .destacado strong { color: var(--verde-osc); }

.cli-finales { list-style: none; display: grid; gap: 4px; }
.cli-final { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; text-decoration: none; color: inherit; transition: background .15s; }
.cli-final:hover { background: var(--fondo); }
.cli-final .wa-avatar { width: 40px; height: 40px; font-size: 14px; }
.cli-final-cuerpo { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cli-final-cuerpo strong { font: 600 14.5px/1.3 Inter, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-final-cuerpo span { font-size: 13px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Formularios (nueva garantía, nuevo cliente, editar). */
.cli-form { max-width: 760px; margin: 0 auto; display: grid; gap: 4px; padding: 20px 20px 22px; }
.cli-nota { padding: 11px 14px; border-radius: 12px; background: #eef7e3; color: #2f5410; font-size: 14px; line-height: 1.45; margin-bottom: 8px; }
.cli-dos { display: grid; gap: 4px 14px; }
.cli-campo { display: grid; gap: 6px; padding: 6px 0; min-width: 0; }
.cli-campo label, .cli-tipo legend { font: 600 14px/1.3 Inter, sans-serif; color: var(--texto); }
.cli-opcional { font-weight: 400; color: var(--suave); }
.cli-campo input, .cli-campo select, .cli-campo textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--borde);
  background: var(--fondo); color: var(--texto); font: 500 16px/1.3 Inter, sans-serif; /* 16px: sin zoom en el iPhone */
  transition: border-color .15s, box-shadow .15s, background .15s; -webkit-appearance: none; appearance: none;
}
.cli-campo select { background-image: linear-gradient(45deg, transparent 50%, var(--suave) 50%), linear-gradient(135deg, var(--suave) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.cli-campo input { height: 49px; }
.cli-campo input[type="date"] { line-height: 1; padding-top: 0; padding-bottom: 0; }
.cli-campo input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.cli-campo textarea { resize: vertical; min-height: 96px; line-height: 1.45; }
.cli-campo input:focus, .cli-campo select:focus, .cli-campo textarea:focus { outline: none; border-color: var(--verde-osc); background: var(--superficie); box-shadow: 0 0 0 3px var(--verde-suave); }
.cli-campo.con-error input, .cli-campo.con-error select { border-color: rgba(180, 35, 24, .55); background: #fff8f7; }
.cli-error { font: 500 13px/1.35 Inter, sans-serif; color: var(--rojo); }
.cli-ayuda { font-size: 13px; color: var(--suave); }
.cli-tipo { border: 0; display: grid; gap: 8px; padding: 4px 0 10px; }
.cli-tipo legend { margin-bottom: 8px; }
.cli-opcion { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borde); background: var(--fondo); cursor: pointer; font-size: 15px; }
.cli-opcion input { width: 18px; height: 18px; accent-color: var(--verde-osc); }
.cli-opcion:has(input:checked) { border-color: var(--verde-osc); background: #eef7e3; }
.cli-form-pie { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.cli-form-pie .boton { min-width: 140px; white-space: nowrap; }

/* La venta con factura (15/10): el formulario es una columna de tarjetas
   (la factura, el cliente, la garantía). */
.cli-form.venta-form { padding: 0; gap: 14px; background: none; border: 0; box-shadow: none; }
.venta-form .cli-tarjeta { display: grid; gap: 4px; }
.venta-form .cli-tarjeta-cabeza { margin-bottom: 4px; }
/* Lo que la factura no trajo: marcado en amarillo para completar. */
.cli-campo.falta input, .cli-campo.falta select { border-color: #d9a400; background: #fffaeb; }
.cli-campo.falta .cli-ayuda { color: #8a6200; font-weight: 500; }
/* Las preguntas antes de guardar. */
.venta-avisos { border-color: #e6c25a; background: #fffdf3; }
.venta-avisos-lista { list-style: none; display: grid; gap: 12px; }
.venta-avisos-lista p { font-size: 14.5px; line-height: 1.45; margin-bottom: 6px; }
.venta-avisos-lista .cli-opcion { margin-top: 6px; }
.cli-campo input[type="file"] { height: auto; padding: 12px 14px; }
.cli-motivo { color: #8a6200; }
.wa-banner a { color: inherit; font-weight: 600; }

@media (min-width: 640px) {
  .cli-dos { grid-template-columns: 1fr 1fr; }
  .cli-datos { grid-template-columns: 1fr 1fr; }
}
/* Compu ancha: la ficha en dos columnas de tarjetas. */
@media (min-width: 1100px) {
  .cli-grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 900px) {
  .cli-pagina { padding: 28px 28px 56px; }
  /* La barra de arriba con el mismo ancho que la tabla. */
  .pantalla-cli .barra { max-width: 1224px; margin: 10px 28px 0; }
  .cli-tarjeta { padding: 18px 20px 20px; }
  .cli-tarjeta h2 { font-size: 17px; }
}
@media (min-width: 1280px) {
  .pantalla-cli .barra { margin: 10px auto 0; }
}
/* Pantalla mediana: la cédula y el teléfono se esconden (están en la ficha). */
@media (max-width: 1023px) {
  .cli-tabla .secundaria { display: none; }
}
/* Pantalla mediana (tablet, compu chica): la tabla más apretada para que
   entre entera. Sin esto, entre 720 y ~820 px y entre 1024 y ~1080 px la
   columna de la garantía quedaba cortada (la caja recorta lo que sobra). */
@media (min-width: 720px) and (max-width: 1179px) {
  .cli-tabla th, .cli-fila td { padding-left: 10px; padding-right: 10px; }
  .cli-tabla th:first-child, .cli-fila td:first-child { padding-left: 16px; }
  .cli-tabla th { white-space: normal; }
  .cli-fila td.cli-c-nombre { min-width: 180px; }
}

/* ── Celular: cada cliente es una tarjeta ─────────────────────── */
@media (max-width: 719px) {
  .cli-pagina { padding: 14px calc(12px + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); }
  .cli-encabezado { align-items: flex-start; }
  .cli-encabezado-acciones { width: 100%; }
  .cli-encabezado-acciones .boton { flex: 1; }
  .cli-filtros-caja { border-radius: 18px; padding: 12px; }
  .cli-buscar { flex-basis: 100%; }
  .cli-fechas { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 0; min-height: 0; background: none; }
  .cli-fechas-ico { display: none; }
  .cli-fecha { display: grid; gap: 5px; min-width: 0; }
  .cli-fecha input { width: 100%; min-width: 0; height: 42px; padding: 0 10px; font-size: 16px; background: var(--fondo); border-color: transparent; } /* 16px: sin zoom en el iPhone */
  .boton.cli-filtrar { flex: 1 1 100%; }
  .cli-chips { gap: 10px; }
  .cli-chips-grupo { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding-bottom: 2px; }
  .cli-chips-grupo::-webkit-scrollbar { display: none; }
  .cli-solo-celular { display: flex; }
  .cli-limpiar { margin-left: 0; }

  /* La tabla deja de ser tabla: una tarjeta por cliente. */
  .cli-tabla-caja { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
  .cli-tabla, .cli-tabla tbody { display: block; }
  .cli-tabla thead { display: none; }
  .cli-fila {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: start;
    margin-bottom: 10px; padding: 14px; border-radius: 18px;
    background: var(--superficie); border: 1px solid var(--borde); box-shadow: 0 1px 2px rgba(17, 19, 20, .04);
  }
  .cli-fila:hover td, .cli-fila:focus-within td, .cli-fila td.en-orden { background: transparent; }
  .cli-fila:active { background: #f4f8ee; }
  .cli-fila td, .cli-fila td:first-child { display: block; padding: 0; border: 0; }
  .cli-fila td.cli-c-nombre { min-width: 0; }
  /* Toda la tarjeta es el enlace a la ficha (anda sin código). */
  .cli-nombre-enlace::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
  .cli-nombre-enlace:focus-visible { outline: none; }
  .cli-nombre-enlace:focus-visible::after { outline: 3px solid var(--verde); outline-offset: -3px; }
  .cli-fila td.vacia { display: none; }
  .cli-fila .cli-c-nombre { grid-column: 1; grid-row: 1; }
  .cli-fila .cli-c-garantia { grid-column: 2; grid-row: 1; align-self: center; }
  .cli-tabla .secundaria { display: block; }
  .cli-fila .cli-c-doc, .cli-fila .cli-c-tel, .cli-fila .cli-c-fecha, .cli-fila .cli-c-serie, .cli-fila .cli-c-monto {
    grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    margin-left: 52px; font-size: 14px; text-align: right;
  }
  .cli-fila td[data-etiqueta]:not(.cli-c-nombre):not(.cli-c-garantia)::before {
    content: attr(data-etiqueta); flex: none; text-align: left; font: 500 12.5px/1.4 Inter, sans-serif; color: var(--suave);
  }
  .cli-fila .cli-c-serie { flex-wrap: wrap; justify-content: flex-end; }
  .cli-fila .cli-c-serie::before { margin-right: auto; }
  /* La raya entre el nombre y los datos: es de la tarjeta (va en su segundo
     renglón), así está aunque falte la cédula. */
  .cli-fila::after { content: ""; grid-column: 1 / -1; grid-row: 2; margin-left: 52px; border-top: 1px solid var(--borde); }
  .cli-fila:not(:has(td:not(.vacia):not(.cli-c-nombre):not(.cli-c-garantia)))::after { display: none; }
  .cli-vacio-caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; }
}
@media (max-width: 899px) {
  .cli-abrir-chat { flex-basis: 100%; justify-content: center; padding: 10px 14px; }
  .cli-tarjeta { border-radius: 16px; padding: 14px 14px 16px; }
  .cli-form { padding: 16px 14px 18px; }
  .cli-form-pie .boton { flex: 1; min-width: 0; padding-left: 12px; padding-right: 12px; }
  .cli-numeros strong { font-size: 22px; }
}

/* ── Números del negocio (etapa 3, bloque 1) ─────────────────────
   Usa las mismas piezas que Clientes (tarjetas, items, formularios).
   Acá solo lo propio: las cuatro partes, los montos y la tabla por mes. */
.num-pagina { max-width: 1080px; }
.num-pagina > .cli-tarjeta, .num-pagina > .cli-grilla, .num-partes { margin-bottom: 14px; }
.num-partes { display: grid; gap: 14px; grid-template-columns: 1fr; }
.num-parte { display: grid; gap: 4px; align-content: start; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.num-parte:hover { border-color: var(--verde-osc); box-shadow: 0 8px 22px rgba(17, 19, 20, .07); }
.num-parte .pastilla { justify-self: start; margin-top: 6px; }
.num-parte-titulo { font: 600 12px/1.2 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.num-parte-numero { font: 700 24px/1.15 Sora, Inter, sans-serif; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.num-parte-linea { font-size: 14px; color: var(--suave); overflow-wrap: anywhere; }
.num-grande { font: 700 26px/1.2 Sora, Inter, sans-serif; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.num-grande.cli-vacio { font-size: 20px; }
.num-sub { display: block; font: 400 12.5px/1.3 Inter, sans-serif; color: var(--suave); letter-spacing: 0; }
.num-grande .num-sub { display: inline; font-size: 14px; }
.num-monto { font: 600 15px/1.3 Inter, sans-serif; font-variant-numeric: tabular-nums; text-align: right; }
.num-monto .num-sub { display: inline; }
.num-nota { white-space: pre-wrap; overflow-wrap: anywhere; }
.num-terminado { opacity: .7; }
.num-pagina .cli-item > .pastilla, .num-pagina .cli-tarjeta > .pastilla { display: inline-block; margin-top: 8px; }
.num-proximo { margin-top: 4px; }
.num-total-linea { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borde); font-size: 15px; }
.num-total-linea strong { font-variant-numeric: tabular-nums; }
.cli-numeros.num-dos { grid-template-columns: 1fr 1fr; }
.cli-numeros.num-dos strong { font-size: 20px; overflow-wrap: anywhere; }
.num-item-enlace { padding: 0; }
.num-enlace { display: grid; gap: 2px; padding: 12px 14px; text-decoration: none; color: inherit; border-radius: 14px; }
.num-enlace:hover { background: #f1f7e8; }
.num-enlace .pastilla { justify-self: start; }
.num-por-mes .wa-banner { max-width: none; margin: 10px 0 0; box-shadow: none; }
.num-anio { font: 700 15px/1.2 Sora, Inter, sans-serif; margin: 18px 0 8px; }

/* La tabla por mes: si no entra (celular), se corre de costado y la
   columna del mes queda fija a la izquierda. */
.num-tabla-caja { overflow-x: auto; border: 1px solid var(--borde); border-radius: 14px; -webkit-overflow-scrolling: touch; }
.num-tabla-caja:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.num-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.num-tabla th, .num-tabla td { padding: 9px 12px; border-bottom: 1px solid var(--borde); white-space: nowrap; text-align: left; vertical-align: top; }
.num-tabla thead th { background: #fafaf7; font: 600 12px/1.25 Inter, sans-serif; color: var(--suave); white-space: normal; min-width: 90px; }
.num-tabla .num { text-align: right; }
.num-tabla th:first-child { position: sticky; left: 0; z-index: 1; background: var(--superficie); font-weight: 600; }
/* La columna fija lleva un borde y una sombrita a la derecha: así lo que pasa
   por abajo al correr la tabla de costado no se mezcla con el mes. */
.num-tabla th:first-child, .num-tabla td:first-child { border-right: 1px solid var(--borde); box-shadow: 4px 0 6px -4px rgba(17, 19, 20, .18); }
.num-tabla thead th:first-child { background: #fafaf7; }
.num-tabla tfoot th:first-child { background: #f1f7e8; }
.num-tabla tbody tr:hover td, .num-tabla tbody tr:hover th { background: #f4f8ee; }
.num-tabla .num-total { font-weight: 600; background: #f6f9f1; }
.num-tabla tfoot th, .num-tabla tfoot td { font-weight: 700; border-bottom: 0; background: #f1f7e8; }
.num-tabla .cli-nada { color: #b3b9b6; }

/* Formas de pago: la tablita de cuotas → días. */
.num-cuotas { border-collapse: collapse; max-width: 280px; }
.num-cuotas th { font: 600 12px/1.2 Inter, sans-serif; color: var(--suave); text-align: left; padding: 0 6px 6px 0; }
.num-cuotas td { padding: 0 6px 6px 0; }
.cli-campo .num-cuotas input { height: 42px; padding: 8px 10px; }

@media (min-width: 640px) { .num-partes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .num-partes { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 719px) {
  .num-tabla { font-size: 13px; }
  .num-tabla th, .num-tabla td { padding: 8px 9px; }
  .num-parte-numero { font-size: 21px; }
}

/* Números del negocio: el Resumen. */
.num-parte-resumen { margin-bottom: 14px; border-color: rgba(74, 125, 20, .35); background: #f6faf0; }
.num-periodo { margin-bottom: 14px; display: grid; gap: 10px; }
.num-fechas { align-items: flex-end; }
.num-resultado .num-grande { margin-bottom: 4px; }
.num-total-linea.num-pendiente strong { font-weight: 500; color: var(--suave); }
.num-desplegable { margin-top: 12px; }
.num-desplegable summary { cursor: pointer; font: 600 14px/1.3 Inter, sans-serif; color: var(--verde-osc); padding: 6px 0; }
.num-desplegable[open] summary { margin-bottom: 8px; }
.num-detalle td a { color: var(--verde-osc); font-weight: 600; }
.cli-numeros .destacado strong { overflow-wrap: anywhere; }
@media (max-width: 719px) {
  .num-fechas { display: grid; grid-template-columns: 1fr 1fr; }
  .num-fechas .boton { grid-column: 1 / -1; }
}

/* Resumen en el celular: las pastillas del período bajan de renglón en vez
   de correrse de costado. */
@media (max-width: 719px) {
  .num-periodo .cli-chips-grupo { flex-wrap: wrap; overflow: visible; }
}

/* ── Ventas (etapa 3, Ventas parte 1, 16/10) ─────────────────────
   La lista usa la misma tabla que Clientes (que en el celular se vuelve
   tarjetas); acá solo lo propio. */
.ven-tabla { font-size: 14px; }
.ven-tabla td { white-space: nowrap; }
.ven-tabla td.ven-c-cliente, .ven-tabla td.ven-c-avisos, .ven-tabla td.ven-c-forma, .ven-tabla td.ven-c-envio { white-space: normal; }
.ven-tabla td.ven-c-avisos .pastilla { display: inline-block; margin: 2px 4px 2px 0; }
.ven-abrir { color: var(--verde-osc); font-weight: 600; text-decoration: none; }
.ven-abrir:hover { text-decoration: underline; }
.ven-cliente { color: inherit; font-weight: 600; text-decoration: none; position: relative; z-index: 1; }
.ven-cliente:hover { color: var(--verde-osc); text-decoration: underline; }
.ven-falta { color: #8a6200; font-weight: 500; }
.ven-avisos .pastilla { display: inline-block; margin: 2px 4px 2px 0; }
.ven-ganancia { margin-top: 14px; }
.ven-forma select { height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); font: 500 14px/1 Inter, sans-serif; max-width: 260px; }
.ven-nota { margin: 0 0 12px; }
.ven-pie { margin-top: 14px; }
.ven-tabla-completar select { width: 100%; min-width: 130px; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--borde); background: var(--superficie); font: 500 14px/1 Inter, sans-serif; }
.ven-tabla-completar td.ven-c-venta { display: grid; gap: 2px; min-width: 200px; white-space: normal; }
.ven-tabla-completar tr.con-error td { background: #fdf6e4; }
.ven-tabla-completar select[aria-invalid="true"] { border-color: var(--rojo); }
.ven-completar { cursor: default; }
/* Pagos aparte en la lista rápida (18/10): monto, forma y fecha, uno abajo del otro. */
.ven-tabla-completar td.ven-c-aparte { display: grid; gap: 4px; min-width: 160px; white-space: normal; }
.ven-tabla-completar td.ven-c-aparte input { width: 100%; min-width: 130px; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--borde); background: var(--superficie); font: 500 14px/1 Inter, sans-serif; }
.ven-tabla-completar td.ven-c-aparte input[aria-invalid="true"] { border-color: var(--rojo); }
.num-form-boton { display: inline; }
.num-item-pie { padding: 0 14px 12px; }
.num-archivadas { opacity: .85; }
@media (max-width: 1023px) {
  .ven-tabla .secundaria { display: none; }
}
/* Celular: cada venta es una tarjeta (como los clientes). */
@media (max-width: 719px) {
  .ven-fila { grid-template-columns: minmax(0, 1fr); }
  .ven-fila td, .ven-fila td:first-child { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; text-align: right; white-space: normal; }
  .ven-fila td.vacia { display: none; }
  .ven-fila td[data-etiqueta]::before { content: attr(data-etiqueta); flex: none; text-align: left; font: 500 12.5px/1.4 Inter, sans-serif; color: var(--suave); }
  .ven-fila td.ven-c-fecha { grid-row: 1; font-size: 15px; }
  .ven-fila td.ven-c-avisos { flex-wrap: wrap; justify-content: flex-end; }
  .ven-tabla .secundaria { display: flex; }
  .ven-fila::after { display: none; }
  /* Toda la tarjeta abre la venta (el enlace de la fecha se estira); el
     nombre del cliente queda arriba y sigue llevando a su ficha. */
  .ven-abrir::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
  .ven-tabla-completar .ven-fila td { display: grid; gap: 4px; text-align: left; }
  .ven-tabla-completar .ven-fila td[data-etiqueta]::before { text-align: left; }
  .ven-tabla-completar td.ven-c-venta::before { display: none; }
  .ven-forma select { max-width: none; width: 100%; }
}

/* Los montos no se cortan por la mitad: entre "$" y el número va un espacio
   que no corta (montoLindo) y acá se saca el "cortar en cualquier lado". Entre
   dos montos ("$ X + US$ Y") sí puede bajar de renglón. */
.num-grande, .num-parte-numero, .cli-numeros strong, .cli-numeros.num-dos strong, .cli-numeros .destacado strong, .num-total-linea strong { overflow-wrap: normal; word-break: normal; }
.num-total-linea { flex-wrap: wrap; }
.num-total-linea strong { margin-left: auto; text-align: right; }
.num-grande.num-no-aplica { font-size: 17px; font-weight: 600; color: var(--suave); }

/* /ventas: 7 columnas, con renglones chicos adentro (así la Ganancia y los
   Avisos se ven sin deslizar en una compu de 1.400 px). */
.ven-tabla td { white-space: normal; vertical-align: top; }
.ven-tabla .ven-c-fecha, .ven-tabla .ven-c-ganancia, .ven-tabla td.ven-c-monto { white-space: nowrap; }
.ven-chico { display: block; font-size: 12.5px; line-height: 1.4; color: var(--suave); }
.ven-tabla td.num .ven-chico { text-align: right; }
.ven-tabla td.ven-c-costos { min-width: 170px; }
.ven-tabla td.ven-c-avisos { min-width: 140px; max-width: 220px; }
.ven-tabla td.ven-c-cliente { min-width: 120px; }
/* De dónde vino (18/10): el selector chico abajo del nombre, en la lista. */
.ven-origen-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.ven-origen-form .cli-campo { padding: 0; }
.ven-origen-form select { padding-top: 6px; padding-bottom: 6px; max-width: 230px; }
@media (min-width: 720px) { .ven-origen-form select { font-size: 13px; } } /* en el celular, 16px: sin zoom */
.ven-origen-pagina { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 8px; }
.ven-origen-pagina .cli-campo { flex: 1 1 220px; }
@media (max-width: 719px) {
  .ven-fila td.ven-c-monto, .ven-fila td.ven-c-forma, .ven-fila td.ven-c-costos { flex-wrap: wrap; }
  .ven-fila td .ven-chico { flex-basis: 100%; text-align: right; }
}

/* ── Ventas: el tablero de arriba (16/10, el boceto que aprobó Juanchi) ──
   Cuatro tarjetas (Vendido con más peso, en oscuro), la franja amarilla de
   lo que falta, y los gráficos (SVG armados en el servidor: los colores van
   acá, por clase; los tamaños, como atributos del SVG). */
.ven-pagina, .num-tablero { --vt-tenue: #7c868c; --vt-verde-claro: #d6e8bd; --vt-grilla: #ebece7; --vt-gris: #d3d6d0; }

.vt-tarjetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .vt-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vt-kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; box-shadow: 0 1px 2px rgba(17, 19, 20, .04); }
.vt-nombre { font-size: 14px; color: var(--suave); font-weight: 500; }
.vt-valor { font: 700 30px/1.1 Sora, Inter, sans-serif; letter-spacing: -0.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Cuando no hay número (falta completar o no hay ventas): en chico, sin parecer un error. */
.vt-valor.largo { font-size: 26px; }
.vt-valor.muy-largo { font-size: 22px; }
.vt-valor.vt-nada { font: 600 17px/1.3 Inter, sans-serif; letter-spacing: 0; color: var(--suave); white-space: normal; padding: 6px 0 2px; }
.vt-extra { font-size: 13px; color: var(--suave); line-height: 1.45; }
.vt-extra b { color: var(--texto); font-weight: 600; }
.vt-pie { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 6px; }
.vt-pie.vt-pie-bloque { display: block; }
.vt-cambio { font-size: 13px; font-weight: 600; white-space: nowrap; }
.vt-cambio.sube { color: var(--verde-osc); }
.vt-cambio.baja { color: var(--rojo); }
.vt-cambio.igual { color: var(--suave); }
.vt-cambio.nada { font-weight: 400; color: var(--vt-tenue); font-size: 12px; white-space: normal; }
.vt-cambio small { font-weight: 400; color: var(--vt-tenue); font-size: 12px; display: block; }
.vt-spark { width: 96px; height: 30px; flex: none; }
.vt-spark polyline { fill: none; stroke: #c4c9c2; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vt-spark circle { fill: var(--verde-osc); }

.vt-kpi.vt-principal { background: var(--texto); color: #fff; border-color: var(--texto); }
.vt-principal .vt-nombre, .vt-principal .vt-extra, .vt-principal .vt-valor.vt-nada { color: #c3c8cb; }
.vt-principal .vt-cambio.sube { color: #b5e07a; }
.vt-principal .vt-cambio.baja { color: #f3a39a; }
.vt-principal .vt-cambio.igual { color: #c3c8cb; }
.vt-principal .vt-cambio small, .vt-principal .vt-cambio.nada { color: #9aa2a7; }
.vt-spark.clara polyline { stroke: #5d676d; }
.vt-spark.clara circle { fill: #b5e07a; }

.vt-info { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid currentColor; font-size: 10px; font-weight: 600; font-style: normal; cursor: help; margin-left: 5px; vertical-align: 1px; line-height: 1; }

.vt-avance { display: block; width: 100%; height: 6px; margin-top: 4px; border-radius: 99px; overflow: hidden; }
.vt-avance .vt-pista { fill: var(--vt-grilla); }
.vt-avance .vt-relleno { fill: var(--verde); }

@media (max-width: 520px) {
  .vt-tarjetas { gap: 10px; }
  .vt-kpi { padding: 14px; }
  .vt-valor { font-size: clamp(19px, 6vw, 23px); }
  .vt-valor.largo { font-size: clamp(15px, 4.7vw, 19px); }
  .vt-valor.muy-largo { font-size: clamp(13px, 3.9vw, 16px); }
  .vt-valor.vt-nada { font-size: 15px; }
  .vt-spark { width: 64px; }
  .vt-pie { flex-direction: column; align-items: flex-start; }
}

/* La franja amarilla de lo que falta completar. */
.vt-falta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fff4d1; border: 1px solid #f0d27a; border-radius: 14px; padding: 10px 10px 10px 16px; margin: 12px 0; font-size: 14px; }
.vt-falta strong { font-weight: 600; }
.vt-falta .boton { gap: 7px; }
.vt-falta .ico { width: 16px; height: 16px; }

/* Los gráficos. */
.vt-graficos { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.vt-falta + .vt-graficos { margin-top: 0; }
.vt-chicos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 12px 0 18px; }
@media (max-width: 860px) { .vt-graficos, .vt-chicos { grid-template-columns: minmax(0, 1fr); } }
/* Sin "De dónde vino" (ninguna venta con origen), los envíos a todo el ancho. */
.vt-chicos.uno { grid-template-columns: minmax(0, 1fr); }
/* "US$ 547" y "el 17/10" no se cortan en dos renglones. */
.vt-junto { white-space: nowrap; }
/* Ganancia negativa (decisión de Juanchi): el número, el margen y la etiqueta del gráfico en rojo. */
.vt-valor.vt-negativo, .vt-extra.vt-negativo { color: var(--rojo); }
/* En la tarjeta oscura, el rojo de siempre no se lee: uno más claro. */
.vt-principal .vt-valor.vt-negativo, .vt-principal .vt-extra.vt-negativo { color: #f3a39a; }
.vt-grafico .vt-valor-linea.vt-negativo { fill: var(--rojo); }
.vt-caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; padding: 16px 18px 18px; min-width: 0; box-shadow: 0 1px 2px rgba(17, 19, 20, .04); }
.vt-caja h2 { font: 700 16px/1.2 Sora, Inter, sans-serif; }
.vt-sub { font-size: 13px; color: var(--suave); margin-top: 2px; }
.vt-nota { font-size: 12.5px; color: var(--vt-tenue); margin-top: 10px; }
.vt-vacio { font-size: 14px; color: var(--suave); margin-top: 14px; }
.vt-tenue { color: var(--vt-tenue); }
.vt-leyenda { display: flex; gap: 16px; font-size: 13px; color: var(--suave); margin: 12px 0 4px; }
.vt-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.vt-leyenda i { display: inline-block; }
.vt-l-barra { width: 10px; height: 10px; border-radius: 3px; background: var(--vt-verde-claro); }
.vt-l-linea { width: 16px; height: 2px; background: var(--verde-osc); border-radius: 2px; }

.vt-tiempo { position: relative; }
.vt-grafico { display: block; width: 100%; height: auto; overflow: visible; }
.vt-grafico.angosto { display: none; }
@media (max-width: 560px) {
  .vt-grafico.ancho { display: none; }
  .vt-grafico.angosto { display: block; }
}
.vt-grafico text { font: 400 11px Inter, sans-serif; }
.vt-eje { fill: var(--vt-tenue); }
.vt-grilla { stroke: var(--vt-grilla); stroke-width: 1; }
.vt-grilla.cero { stroke: #d9dbd4; }
.vt-sombra { fill: rgba(139, 197, 63, .10); }
.vt-grafico .vt-sombra-texto { fill: var(--verde-osc); font-weight: 600; }
.vt-barra { fill: var(--vt-verde-claro); }
.vt-linea { fill: none; stroke: var(--verde-osc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vt-punto-g { fill: var(--verde-osc); }
.vt-ultimo { fill: var(--verde-osc); stroke: #fff; stroke-width: 2; }
.vt-grafico .vt-valor-linea { fill: var(--texto); font-size: 12px; font-weight: 600; }
.vt-zona { fill: transparent; cursor: default; }
.vt-zona:hover, .vt-zona.activa { fill: rgba(17, 19, 20, .035); }
.vt-tip { position: absolute; z-index: 3; pointer-events: none; background: var(--texto); color: #fff; font-size: 12px; line-height: 1.45; padding: 8px 10px; border-radius: 10px; white-space: nowrap; transform: translate(-50%, -100%); }
.vt-tip b { font-weight: 600; display: block; }
.vt-tip span { display: block; }
.vt-tip[hidden] { display: none; }

/* Cómo te pagan: barras horizontales. */
.vt-filas { display: grid; gap: 14px; margin-top: 14px; }
.vt-arriba { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.vt-arriba b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vt-barrita { display: block; width: 100%; height: 10px; margin: 6px 0 4px; }
.vt-barrita .vt-pista { fill: transparent; }
.vt-barrita .vt-relleno { fill: var(--verde); }
.vt-fila.sin .vt-relleno, .vt-punto.sin .vt-relleno { fill: var(--vt-gris); }
.vt-fila.sin .vt-arriba { color: var(--suave); }
.vt-abajo { font-size: 12px; color: var(--vt-tenue); }

/* Cómo se fue cada venta. */
.vt-lista { display: grid; margin-top: 10px; }
.vt-lista > div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--vt-grilla); font-size: 14px; }
.vt-lista > div:first-child { border-top: 0; }
.vt-lista span:last-child { color: var(--suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vt-lista .sin span { color: var(--vt-tenue); }
.vt-lista .total { font-weight: 600; }
.vt-lista .total span:last-child { color: var(--texto); }

/* De dónde vino. */
.vt-puntos { display: grid; gap: 10px; margin-top: 14px; }
.vt-punto { display: grid; grid-template-columns: 130px minmax(0, 1fr) 32px; align-items: center; gap: 10px; font-size: 14px; }
.vt-punto .vt-barrita { margin: 0; }
.vt-punto b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.vt-punto.sin span { color: var(--suave); }
@media (max-width: 520px) { .vt-punto { grid-template-columns: 110px minmax(0, 1fr) 28px; } }

.ven-cuenta { margin: 0 0 10px 4px; }

/* ── Números del negocio: el tablero (16/10, el boceto que aprobó Juanchi) ──
   Las tarjetas, la franja y las cajas son las del tablero de Ventas (vt-*).
   Acá va lo propio: las pestañas, la "Fecha", la cascada, los gráficos por
   mes, las listas y "Para cargar y editar". */
.nt-controles { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.nt-pestanas { display: flex; gap: 4px; padding: 4px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nt-pestanas::-webkit-scrollbar { display: none; }
.nt-pestana { font: 500 14px/1 Inter, sans-serif; color: var(--suave); padding: 10px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap; flex: none; }
.nt-pestana:hover { color: var(--texto); background: rgba(17, 19, 20, .05); }
.nt-pestana.activa { background: var(--texto); color: #fff; }
.nt-pestana:focus-visible { outline: 2px solid var(--verde-osc); outline-offset: 2px; }
.nt-fecha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nt-fecha > label { font-size: 14px; color: var(--suave); }
.nt-fecha select, .nt-fecha input[type="date"] { font: 500 14px/1.2 Inter, sans-serif; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; padding: 9px 14px; min-height: 40px; }
/* La flechita del desplegable, dibujada con dos degradés (la política de
   seguridad no deja imágenes "data:", como en .cli-campo select). */
.nt-fecha select { padding-right: 36px; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto) 50%), linear-gradient(135deg, var(--texto) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.nt-fechas { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--suave); font-size: 14px; }
/* El atributo hidden manda (si no, el display de arriba lo pisa). */
.nt-fecha [hidden] { display: none !important; }
/* ── WhatsApp: las dos pestañas y Estadísticas (18/10) ──
   Las pestañas son las mismas de Números (.nt-pestanas); en la lista de
   chats van a lo ancho, entre el título y el buscador. */
.wa-vistas { margin: 0 16px 10px; flex: none; }
.wa-vistas .nt-pestana { flex: 1; text-align: center; padding: 9px 12px; }
.tc-pagina .nt-pestanas { flex: none; }
.tc-cajas .vt-sub { font-size: 12.5px; }
.tc-cajas .tc-caja-compraron .vt-valor { color: var(--verde-osc); }
.tc-nota { margin: 8px 2px 14px; }
.tc-grilla { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; align-items: start; }
.tc-columna { display: grid; gap: 12px; min-width: 0; }
@media (max-width: 860px) { .tc-grilla { grid-template-columns: minmax(0, 1fr); } }
.tc-calientes { list-style: none; margin-top: 12px; display: grid; gap: 2px; }
.tc-caliente { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--borde); }
.tc-caliente:first-child { border-top: 0; }
.tc-quien { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.tc-nombre { font: 600 15px/1.3 Inter, sans-serif; color: var(--texto); overflow-wrap: anywhere; }
a.tc-nombre { text-decoration: none; }
a.tc-nombre:hover { color: var(--verde-osc); text-decoration: underline; }
.tc-tel { font-size: 13px; color: var(--suave); font-variant-numeric: tabular-nums; }
.tc-cuando { font-size: 12.5px; color: var(--suave); white-space: nowrap; grid-row: 1; grid-column: 2; }
.tc-senales { display: flex; flex-wrap: wrap; gap: 4px; grid-column: 1 / -1; }
.pastilla.tc-senal { background: rgba(139, 197, 63, .18); color: var(--verde-osc); }
.tc-renglones { list-style: none; margin-top: 10px; display: grid; }
.tc-renglones li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 0; border-top: 1px solid var(--borde); font-size: 14.5px; }
.tc-renglones li:first-child { border-top: 0; }
.tc-renglones strong { font: 700 18px/1.2 Sora, Inter, sans-serif; font-variant-numeric: tabular-nums; text-align: right; }
.tc-extra { grid-column: 1 / -1; font-size: 12.5px; color: var(--suave); }
.tc-subtitulo { font: 700 14px/1.2 Sora, Inter, sans-serif; margin-top: 14px; }
@media (max-width: 640px) { .tc-cuando { grid-row: auto; grid-column: 1 / -1; white-space: normal; } }

@media (max-width: 640px) {
  .nt-controles { flex-direction: column; align-items: stretch; }
  .nt-fecha select { flex: 1; min-width: 0; }
  .nt-fechas { width: 100%; }
  .nt-fechas input[type="date"] { flex: 1; min-width: 0; }
}

.nt-falta .nt-botones { display: flex; gap: 6px; flex-wrap: wrap; }
.nt-falta .boton.linea { background: transparent; }
.nt-fila { margin-top: 12px; }
.vt-falta + .vt-tarjetas { margin-top: 0; }
.nt-avance { display: block; }
.nt-stock .vt-avance { height: 10px; margin-top: 8px; }
.nt-stock .vt-relleno { fill: var(--verde); }

/* Los gráficos propios: barras grises (costos), verdes (unidades,
   ganancia), rojas hacia abajo del cero (lo negativo), y la cascada. */
.nt-barra-gris { fill: #c9ced0; }
.nt-barra-verde { fill: var(--verde); }
.nt-barra-neg { fill: #e8a39c; }
.vt-grafico .nt-valor-barra { fill: var(--texto); font-size: 12px; font-weight: 600; }
.vt-grafico .nt-valor-barra.vt-negativo { fill: var(--rojo); }
.nt-c-total { fill: var(--vt-verde-claro); }
.nt-c-resta { fill: #c9ced0; }
.nt-c-final { fill: var(--verde-osc); }
.nt-c-final.neg { fill: #e8a39c; }
.nt-c-linea { stroke: #c4c9c2; stroke-width: 1; }
.vt-grafico .nt-c-valor { fill: var(--texto); font-size: 12px; font-weight: 600; }
/* En el celular cada barra tiene ~52 de ancho: a 12px "−43,9 mil" se pegaba con el de al lado (tester, 16/10). */
.vt-grafico.angosto .nt-c-valor { font-size: 10.5px; }
.vt-grafico .nt-c-valor.final { fill: var(--verde-osc); }
.vt-grafico .nt-c-valor.vt-negativo { fill: var(--rojo); }
.vt-grafico .nt-c-nombre { fill: var(--suave); }

/* "En qué se va la plata": barras grises. */
.nt-gasto .vt-relleno { fill: #9aa3a8; }

/* Las listas (lo que viene, costos fijos, compras, por lote). */
.nt-lista { display: grid; margin-top: 8px; }
.nt-lista > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid var(--vt-grilla); font-size: 14px; }
.nt-lista > div:first-child { border-top: 0; }
.nt-lista > div > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.nt-lista > div > span:last-child { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.nt-lista small { display: block; font-size: 12px; color: var(--vt-tenue); font-weight: 400; }
.nt-lista .entra > span:last-child { color: var(--verde-osc); }
.nt-lista .sin > span:last-child { color: var(--suave); font-weight: 500; }
.nt-lista a { color: inherit; }
.nt-etq { font: 600 12px/1.2 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-tenue); margin-top: 14px; }
.nt-ir { display: inline-block; margin-top: 12px; font-size: 14px; color: var(--verde-osc); font-weight: 600; text-decoration: none; }
.nt-ir:hover { text-decoration: underline; }

/* "Para cargar y editar": las cinco partes, más chicas. */
.nt-cargar { margin-top: 26px; }
.nt-seccion { font: 700 20px/1.2 Sora, Inter, sans-serif; letter-spacing: -0.025em; margin: 0 0 10px; }
/* La lista de ventas, abajo de la pestaña Ventas (17/10: antes en /ventas). */
.nt-lista-ventas { margin-top: 26px; scroll-margin-top: 16px; }
.nt-lista-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.nt-lista-cabeza .nt-seccion { margin: 0; }
.nt-lista-ventas .cli-vacio-caja h3 { font: 700 20px/1.2 Sora, Inter, sans-serif; letter-spacing: -0.02em; margin: 0; }
.num-partes.nt-ajustes { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .num-partes.nt-ajustes { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.nt-ajustes .num-parte { padding: 12px 14px; border-radius: 14px; gap: 2px; }
.nt-ajustes .num-parte-titulo { font: 600 14px/1.25 Inter, sans-serif; letter-spacing: 0; text-transform: none; color: var(--texto); }
.nt-ajustes .num-parte-numero { font: 600 14px/1.35 Inter, sans-serif; letter-spacing: 0; color: var(--suave); }
.nt-ajustes .num-parte-linea { font-size: 13px; }
.nt-ajustes .pastilla { font-size: 12px; }
.num-parte-ok { justify-self: start; margin-top: 6px; font-size: 12px; color: var(--verde-osc); font-weight: 500; }

/* La pestaña Caja: lo que entró (verde) y lo que salió (gris), lado a lado. */
.nt-barra-entra { fill: var(--verde); }
.nt-barra-sale { fill: #b9bfc2; }
.nt-l-entra { width: 10px; height: 10px; border-radius: 3px; background: var(--verde); }
.nt-l-sale { width: 10px; height: 10px; border-radius: 3px; background: #b9bfc2; }
.vt-principal .nt-ir-claro { color: #b5e07a; }
.nt-no-cuadra { margin-top: 12px; }
.nt-no-cuadra ul { margin: 8px 0 0 18px; display: grid; gap: 4px; font-size: 13px; color: var(--suave); }
.vt-extra.nt-chico { font-size: 12px; color: var(--vt-tenue); }
/* Un saldo negativo adentro de una línea ("Empezaste con $ -3.000"): en rojo. */
.vt-extra .vt-negativo { color: var(--rojo); }
/* En Resumen, la cascada no se estira a la altura de "Lo que viene". */
.nt-fila-arriba { align-items: start; }
.vt-principal .vt-extra.nt-chico { color: #9aa2a7; }
/* La plata de cada cuenta, adentro de la tarjeta oscura "Plata que tenés hoy". */
.vt-principal .nt-cuentas { margin-top: 10px; }
.vt-principal .nt-cuentas > div { border-top-color: #3d464b; color: #fff; font-size: 13px; padding: 7px 0; }
.vt-principal .nt-cuentas small { color: #9aa2a7; }
.vt-principal .nt-cuentas .sin > span:last-child { color: #c3c8cb; }
.vt-principal .nt-cuentas .vt-negativo { color: #f3a39a; }

/* Sin código en el navegador no se puede deslizar hasta la pestaña elegida:
   en el celular las seis pestañas van en dos renglones, así se ven todas. */
@media (max-width: 640px) {
  .nt-pestanas { flex-wrap: wrap; border-radius: 20px; overflow-x: visible; }
  .nt-pestana { padding: 9px 13px; }
}

/* ── Mis gastos (18/10) ─────────────────────────────────────────
   Usa las piezas de Números (tarjetas, items, pestañas). Acá solo el
   selector del mes y el renglón de las pestañas dentro de la tarjeta. */
.gas-meses { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.gas-mes-form { display: flex; gap: 8px; align-items: center; }
.gas-mes-form input { font: 500 15px/1.2 Inter, sans-serif; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); color: var(--texto); min-height: 40px; }
.gas-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num-pagina .cli-tarjeta > .nt-pestanas { margin: 4px 0 10px; width: fit-content; }

/* ── Publicidad (19/10): gasto de Meta, chats y ventas por anuncio ── */
.wa-banner.aviso { background: #fdf6e3; color: #7a5300; border: 1px solid rgba(160, 110, 0, .22); }
.pub-pagina .vt-caja + .vt-caja, .pub-tablas .vt-caja { margin-top: 14px; }
.pub-tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; }
.pub-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.pub-tabla th, .pub-tabla td { padding: 10px 12px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.pub-tabla thead th { font: 600 12px/1.2 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); white-space: nowrap; }
.pub-tabla thead th.activo { color: var(--verde-osc); background: #f1f7e8; }
.pub-tabla thead th.activo .cli-flecha { opacity: 1; }
.pub-tabla .num { text-align: right; white-space: nowrap; }
.pub-tabla tbody tr:last-child th, .pub-tabla tbody tr:last-child td { border-bottom: 0; }
.pub-tabla tbody th { font-weight: 500; min-width: 180px; }
.pub-nombre { display: block; }
.pub-detalle { display: block; font-size: 12.5px; color: var(--suave); margin-top: 2px; }
.pub-sin { font-size: 12.5px; color: var(--suave); }