/* Ravn — shared stylesheet: colours, type and interface pieces.
 *
 * Every template used to repeat its own palette (161 loose colours in the
 * landing alone). Changing one shade meant touching eight files. It all lives
 * here.
 *
 * ── Where the colours come from ─────────────────────────────────────────────
 * Raven feathers are not flat black: they carry blue, violet and green
 * iridescence depending on how the light hits them. That is where the accents
 * come from, and why the blacks carry a hint of blue instead of being pure
 * #000. No neon: these are pigments, not LEDs.
 *
 * The channel colours (WhatsApp / Instagram) are not decorative: they identify
 * where each conversation comes from and are used as a data series in the
 * charts. That pair is validated with the colour-blindness and contrast checks
 * (CVD separation 12.8 against a target of 8; minimum contrast 4.2:1 against
 * both surfaces). If they change, they have to be validated again.
 *
 * Messenger blue does NOT go into charts alongside the other two: on a dark
 * band the three do not separate enough. It is only a label with text in the
 * internal panel.
 *
 * Rule: colour is never the only signal. Every status carries text as well.
 */

:root {
  /* ── Surfaces: black with a blue tint (feather, not void) ── */
  --bg:         #0B0B0D;
  --surface:    #141418;
  --surface-2:  #101014;
  --surface-3:  #1A1A20;
  --line:       #23232A;
  --line-soft:  #1A1A20;

  /* ── Text ── */
  --ink:        #F2EFE9;
  --ink-2:      #A7A39C;
  --ink-3:      #6F6B64;

  /* ── Brand ── */
  --gold:       #C9A15A;
  --gold-hi:    #D8B472;
  --gold-dim:   rgba(201, 161, 90, 0.12);

  /* ── Iridescence: interface accents, not data ── */
  --teal:       #50AFB4;
  --teal-dim:   rgba(80, 175, 180, 0.12);
  --violet:     #9D8CD0;
  --violet-dim: rgba(157, 140, 208, 0.13);

  /* ── Channels: identity and data series (validated pair) ── */
  --wa:         #158A48;
  --wa-ink:     #57C489;   /* the channel green is dark; for text it is lightened */
  --wa-dim:     rgba(21, 138, 72, 0.16);
  --ig:         #CB719E;
  --ig-dim:     rgba(203, 113, 158, 0.14);
  --fb:         #6885C3;   /* label only, in the internal panel */
  --fb-dim:     rgba(104, 133, 195, 0.14);

  /* ── Status: always accompanied by text ── */
  --good:       #69BA7C;
  --good-dim:   rgba(105, 186, 124, 0.12);
  --warn:       #E2805E;
  --warn-dim:   rgba(226, 128, 94, 0.12);
  --danger:     #D8625C;
  --danger-dim: rgba(216, 98, 92, 0.12);

  --radius:     14px;
  --radius-sm:  10px;
  --shadow:     0 18px 50px rgba(0, 0, 0, 0.45);
  --sans:       'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --display:    'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  /* Monoespaciada: la del sistema, a propósito. Las especificaciones pedían
     JetBrains Mono, pero una fuente más son ~90 KB y una petición a un tercero
     para lo que aquí solo hace de etiqueta y de contador. La pila cubre Windows,
     macOS y Linux sin descargar nada. */
  --mono:       ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;
  color-scheme: dark;
}

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

* { box-sizing: border-box; }

/* `hidden` gana siempre. Es un selector de atributo, así que pierde contra
   cualquier clase que fije `display`, y esconder algo con `el.hidden = true`
   dejaba de funcionar sin avisar: el elemento quedaba a la vista con su
   atributo puesto, que es lo más difícil de ver depurando.

   Ya había pasado tres veces —la fila de alta, el disquete y los recuadros
   punteados del calendario, que se quedaban pegados en todas las columnas— y
   cada una se había parcheado por separado. Esto lo cierra de raíz. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { font-family: var(--display); margin: 0; letter-spacing: -0.01em; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hi); }

::selection { background: var(--gold); color: var(--bg); }

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

.muted { color: var(--ink-3); font-size: 13px; }
.sub   { color: var(--ink-3); font-size: 13px; margin: 4px 0 0; line-height: 1.6; }
.hint  { color: var(--ink-3); font-size: 12.5px; margin-top: 7px; line-height: 1.6; }
.hidden { display: none !important; }

/* Screen readers only. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Cards ────────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

/* A colour strip on top tells sections apart without shouting. */
.card--gold   { box-shadow: inset 0 2px 0 var(--gold); }
.card--teal   { box-shadow: inset 0 2px 0 var(--teal); }
.card--violet { box-shadow: inset 0 2px 0 var(--violet); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.btn-gold  { background: var(--gold); color: var(--bg); font-weight: 700; padding: 12px 22px; }
.btn-gold:hover { background: var(--gold-hi); color: var(--bg); }
.btn-ghost { background: none; border: 1px solid var(--line); color: var(--ink-2); padding: 11px 18px; font-weight: 600; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: default; }

.btn-icon {
  background: none;
  border: 1px solid transparent;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 14px;
  line-height: 1;
  font-family: inherit;
}
.btn-icon:hover { background: var(--surface-3); color: var(--ink); }
.btn-icon.danger:hover { color: var(--danger); }
.btn-icon:disabled { opacity: 0.25; cursor: default; background: none; }

.linkbtn {
  background: none; border: none; padding: 0;
  color: var(--ink-2); font-family: inherit; font-size: 13.5px; cursor: pointer;
}
.linkbtn:hover { color: var(--gold); }

/* ── Fields ───────────────────────────────────────────────────────────────── */

label { display: block; font-size: 13px; font-weight: 600; color: #C9C4BB; margin-bottom: 6px; }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=date], input[type=time], input[type=search],
textarea, select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid #2A2A33;
  border-radius: 9px;
  padding: 11px 13px;
  color: var(--ink);
  font-size: 14.5px;
  font-family: inherit;
  outline: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-dim);
}
::placeholder { color: #55535C; }
textarea { resize: vertical; min-height: 74px; line-height: 1.55; }

/* ── Nativos, domados ───────────────────────────────────────────────────────
 * Lo de arriba les da la caja; esto les quita lo que el navegador les pone y
 * el producto no quiere. Nada de esto reemplaza el control: un `select` sigue
 * siendo un `select`, que es lo que sabe abrirse bien con teclado, en el
 * telefono y con un lector de pantalla. Solo se le cambia la piel.
 */

/* Nuestra flecha en vez de la del sistema. */
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px; 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='%238A8792' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
  background-size: 15px;
}
/* Sin flecha cuando el navegador ya dibuja varias filas. */
select[multiple], select[size]:not([size="1"]) { background-image: none; padding-right: 13px; }

/* El iconito de calendario y el de reloj salen blancos sobre fondo oscuro.
   `filter` es lo unico que llega hasta ellos. */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator {
  filter: invert(58%) sepia(6%) saturate(320%) hue-rotate(205deg);
  cursor: pointer; opacity: 0.8;
}
input[type=date]:hover::-webkit-calendar-picker-indicator,
input[type=time]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* Las flechitas de `number` estorban mas de lo que sirven: la cantidad se
   escribe, y al lado de un campo de texto rompen la altura. */
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Casillas en el dorado de marca y del tamano de algo que se toca con el dedo.
   `accent-color` es lo que deja pintarlas sin rehacerlas a mano, que es como se
   pierde el soporte de teclado. */
input[type=checkbox], input[type=radio] {
  accent-color: var(--gold); width: 17px; height: 17px;
  cursor: pointer; flex: none; vertical-align: middle;
}

/* Una fila de "casilla + su texto" que no se parte ni desalinea. */
.check {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: var(--ink-2); margin: 0;
}
.check input { margin: 0; }
.check:hover { color: var(--ink); }

.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { font-size: 13px; font-weight: 600; color: #C9C4BB; }

/* ── Tags and badges ──────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  white-space: nowrap;
}
.badge-wa     { color: var(--wa-ink); border-color: rgba(21,138,72,0.5);  background: var(--wa-dim); }
.badge-ig     { color: var(--ig);     border-color: rgba(203,113,158,0.5); background: var(--ig-dim); }
.badge-fb     { color: var(--fb);     border-color: rgba(104,133,195,0.5); background: var(--fb-dim); }
.badge-good   { color: var(--good);   border-color: rgba(105,186,124,0.5); background: var(--good-dim); }
.badge-warn   { color: var(--warn);   border-color: rgba(226,128,94,0.55); background: var(--warn-dim); }
.badge-gold   { color: var(--gold);   border-color: rgba(201,161,90,0.55); background: var(--gold-dim); }
.badge-violet { color: var(--violet); border-color: rgba(157,140,208,0.5); background: var(--violet-dim); }

/* Status dot. It always goes with text beside it. */
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.dot-good { background: var(--good); }
.dot-warn { background: var(--warn); }
.dot-off  { background: #2A2A33; }

/* ── Notices ──────────────────────────────────────────────────────────────── */

.alert {
  border-radius: var(--radius-sm);
  padding: 12px 15px;
  font-size: 13.5px;
  line-height: 1.55;
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.alert-error  { background: var(--danger-dim); border: 1px solid rgba(216,98,92,0.45); color: #EFA9A4; }
.alert-ok     { background: var(--good-dim);   border: 1px solid rgba(105,186,124,0.42); color: #9ED4AC; }
.alert-warn   { background: var(--warn-dim);   border: 1px solid rgba(226,128,94,0.45); color: #F0BCA6; }
.alert-info   { background: var(--gold-dim);   border: 1px solid rgba(201,161,90,0.3);  color: #D7CFC0; }
.alert-teal   { background: var(--teal-dim);   border: 1px solid rgba(80,175,180,0.32); color: #A9DCDF; }

/* ── Stat card ────────────────────────────────────────────────────────────── */

.stat { position: relative; }
.stat .stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stat .stat-label { color: var(--ink-3); font-size: 13px; line-height: 1.4; }
.stat .stat-value { font-family: var(--display); font-weight: 700; line-height: 1; margin-top: 10px; }
.stat .stat-foot { font-size: 13px; margin-top: 9px; color: var(--ink-3); }

/* The icon pill is what gives each card its colour. */
.chip {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
/* Un chip puede llevar un emoji o un dibujo. El SVG hereda el color de acento
   de la variante (.chip-gold y compania lo ponen en `color`), asi que no hay
   que repetirlo en cada icono. A 19px los dibujos con algo de detalle se
   perdian dentro del chip; a 21 se leen. */
.chip svg { width: 21px; height: 21px; }
.chip-gold   { background: var(--gold-dim);   color: var(--gold); }
.chip-teal   { background: var(--teal-dim);   color: var(--teal); }
.chip-violet { background: var(--violet-dim); color: var(--violet); }
.chip-good   { background: var(--good-dim);   color: var(--good); }
.chip-warn   { background: var(--warn-dim);   color: var(--warn); }

/* ── Data bars ────────────────────────────────────────────────────────────── */

.track { height: 10px; background: #1C1C23; border-radius: 0 5px 5px 0; overflow: hidden; }
.track > span { display: block; height: 100%; border-radius: 0 5px 5px 0; background: var(--gold); }

/* ── Background tint: the iridescence, very faint ─────────────────────────── */

.sheen {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60rem 30rem at 12% -8%,  rgba(80,175,180,0.07), transparent 60%),
    radial-gradient(50rem 28rem at 92% 4%,   rgba(157,140,208,0.06), transparent 60%),
    radial-gradient(46rem 26rem at 50% 108%, rgba(201,161,90,0.05),  transparent 62%);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ══ Panel structure: sidebar on desktop, tabs on mobile ══
 * Shared by the customer panel and the internal one: the same navigation in
 * both keeps moving from one to the other from feeling like another product.
 */

.shell { display: flex; min-height: 100vh; position: relative; z-index: 1; }

.side {
  width: 232px; flex: none; border-right: 1px solid var(--line-soft);
  padding: 20px 13px; display: flex; flex-direction: column; gap: 3px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: linear-gradient(180deg, #101016 0%, var(--bg) 62%);
}
.side .mark { display: flex; align-items: center; gap: 10px; padding: 0 9px 8px; color: var(--ink); }
.side .mark img { width: 30px; height: auto; display: block; flex: none; }
.side .mark b { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: 0.04em; }
.side .mark small { font-size: 10.5px; color: var(--ink-3); font-weight: 600; letter-spacing: 0.09em; }
.side .biz {
  padding: 6px 9px 14px; font-size: 13px; color: var(--ink-2);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.side .seclabel {
  font-size: 10.5px; color: var(--ink-3); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 14px 9px 6px;
  display: flex; align-items: center; gap: 7px;
}
/* El dibujo del grupo no sigue al tamaño de la etiqueta: a 10.5px no se lee.
   `flex:none` para que no lo aplaste el título de al lado. */
.side .seclabel > svg { flex: none; opacity: 0.8; }
/* Un grupo del menú que se pliega. El `summary` lleva la misma clase que la
   etiqueta fija para verse igual; lo único suyo es el chevron y el cursor. */
.side details.secgrupo > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.side details.secgrupo > summary::-webkit-details-marker { display: none; }
.side details.secgrupo > summary .chev {
  margin-left: auto; width: 7px; height: 7px; flex: none;
  border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(-45deg); transition: transform 0.15s;
}
.side details.secgrupo[open] > summary .chev { transform: rotate(45deg); }

.navlink {
  display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 9px;
  color: var(--ink-2); font-size: 14px; font-family: inherit;
}
.navlink:hover { background: var(--surface); color: var(--ink); }
.navlink[aria-current="page"], .navlink.active { background: var(--gold-dim); color: var(--gold); font-weight: 600; }
/* El hueco del dibujo mide siempre lo mismo, lleve lo que lleve: así los
   nombres del menú quedan alineados entre sí. */
.navlink .ic { width: 20px; flex: none; display: flex; align-items: center;
  justify-content: center; opacity: 0.92; }
.navlink[aria-current="page"] .ic, .navlink.active .ic { opacity: 1; }
.side .whoami {
  display: flex; align-items: center; gap: 10px; padding: 12px 9px;
  border-top: 1px solid var(--line-soft); margin-top: 6px;
}
.side .whoami .av {
  width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--bg);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main > .inner { padding: 26px 30px 60px; display: flex; flex-direction: column; gap: 20px; flex: 1; }
.main h1 { font-size: 24px; font-weight: 700; }

/* Header and tabs: mobile only, where the sidebar does not fit. */
.mtop { display: none; }

@media (max-width: 900px) {
  .side { display: none; }
  .mtop {
    display: block; position: sticky; top: 0; z-index: 50;
    background: rgba(11,11,13,0.94); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line-soft);
  }
  .mtop .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; }
  .mtop .tabs { display: flex; gap: 2px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  .mtop .tabs::-webkit-scrollbar { display: none; }
  .mtop .tab {
    padding: 10px 13px; font-size: 14px; color: var(--ink-2); white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
  }
  .mtop .tab[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); font-weight: 600; }
  .main > .inner { padding: 20px 16px 48px; gap: 16px; }
}

/* ══ Conversation bubbles ═══════════════════════════════════════════════════
 * Shared by a conversation's detail and the editor's preview.
 * CAREFUL: the text goes in `.txt`, which is the only thing with `pre-wrap`.
 * If pre-wrap is put on the whole bubble, Jinja slips the HTML's line break
 * and indentation inside the message and every bubble comes out with blank
 * lines.
 */

.chatbox {
  background: #0B141A; border: 1px solid #1E2A31; border-radius: var(--radius);
  padding: 14px 12px; display: flex; flex-direction: column; gap: 7px;
}
.msg { display: flex; }
.msg.out { justify-content: flex-end; }
.bub {
  max-width: min(78%, 30rem); padding: 7px 10px 6px; font-size: 14px; line-height: 1.45;
  background: #202C33; color: #E9EDEF; border-radius: 8px 8px 8px 2px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.28);
}
.msg.out .bub { background: #005C4B; border-radius: 8px 8px 2px 8px; }
.bub .txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.bub .hora { font-size: 10.5px; color: #8696A0; float: right; margin: 6px 0 0 9px; position: relative; top: 3px; }
.msg.out .bub .hora { color: #A7CCC2; }

/* ══ Conversaciones a dos paneles (como WhatsApp Web) ═══════════════════════
 * La lista a la izquierda no se va nunca: contestar varios chats seguidos
 * yendo y viniendo de una lista a una ficha es lo que se siente torpe.
 * Las dos URLs siguen existiendo; esto solo las pinta juntas.
 */

/* `.convo` y no `.wa`: `wa` ya era el modificador de canal de una pildora en
   el login (<span class="pill wa">), y esta regla la convirtio en un panel de
   pantalla completa que estiro la pagina entera. Dos letras en una hoja
   compartida chocan con algo tarde o temprano. */
.convo {
  display: flex; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--surface);
  /* Alto de pantalla menos el respiro del contenedor: el chat tiene que
     terminar donde termina la ventana, o la caja de escribir queda fuera. */
  height: calc(100vh - 112px); min-height: 26rem;
}

.wa-list {
  width: 340px; flex: none; display: flex; flex-direction: column;
  border-right: 1px solid var(--line); background: var(--bg); min-width: 0;
}
.wa-list-top { padding: 16px 14px 10px; border-bottom: 1px solid var(--line-soft); }
.wa-list-top h1 { font-size: 19px; margin-bottom: 12px; }
/* Cestas: las pestañas de bandeja. Estaban sueltas en la plantilla y se
   perdieron al rehacerla; aquí ya son una pieza más del sistema. */
.cestas {
  display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 11px; padding: 4px; width: fit-content; max-width: 100%;
  /* Un solo renglón. Partidas en dos se leen como dos controles distintos, y
     la píldora dorada de la activa deja de señalar dónde estás. */
  flex-wrap: nowrap;
}
.cestas a {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; min-width: 0;
}
.cestas a[aria-current="page"] { background: var(--gold); color: var(--bg); }
.cestas a:hover:not([aria-current]) { color: var(--ink); }
.cestas .n {
  font-variant-numeric: tabular-nums; font-size: 12px; padding: 1px 7px;
  border-radius: 999px; background: rgba(255,255,255,0.09);
}
.cestas a[aria-current="page"] .n { background: rgba(0,0,0,0.22); }

/* El reloj de las 24 horas, dondequiera que se pinte. */
.reloj { font-variant-numeric: tabular-nums; font-weight: 600; }

/* En la columna de la lista caben tres pestañas solo si aprietan: 340px menos
   los respiros dejan ~300px, y a tamaño normal las tres piden ~347px. */
.wa-list .cestas { margin-bottom: 0; width: auto; }
.wa-list .cestas a { padding: 7px 9px; font-size: 12px; gap: 5px; }
.wa-list .cestas .n { padding: 1px 5px; font-size: 11px; }
.wa-nota { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin: 11px 0 0; }
.wa-nota.warn { color: var(--warn); }

.wa-rows { flex: 1; overflow-y: auto; min-height: 0; }
.wa-sinfilas { padding: 30px 18px; text-align: center; font-size: 13.5px; line-height: 1.6; }

.wa-list .chatfila {
  display: flex; gap: 11px; align-items: center; padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.wa-list .chatfila:hover { background: var(--surface); }
.wa-list .chatfila.activa { background: var(--surface-2); }
.wa-list .chatfila > a { flex: 1; min-width: 0; color: var(--ink); }
.wa-list .l1 { display: flex; align-items: baseline; gap: 8px; }
.wa-list .quien { font-weight: 600; font-size: 14px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-list .cuando, .wa-list .l1 .reloj { font-size: 11.5px; flex: none; }
.wa-list .l2 { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.wa-list .prev { flex: 1; min-width: 0; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-pag { display: flex; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-top: 1px solid var(--line-soft); }

/* ---- El chat ---- */
.wa-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #0B141A; }

.wa-cab {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.wa-cab .av {
  width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2);
  color: var(--ink-2); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; flex: none;
}
.wa-cab .quien { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.wa-cab .quien b { font-size: 14.5px; }
.wa-cab .quien span { font-size: 11.5px; }
.wa-cab .wa-devolver { margin: 0; flex: none; }
.wa-cab .wa-devolver .btn { padding: 7px 12px; font-size: 12.5px; }
/* El volver solo sirve en el móvil, donde la lista no está al lado. */
.wa-volver { display: none; color: var(--ink-2); }

/* La caja de mensajes llena el panel y hace su propio scroll: el borde y el
   radio son de la versión suelta, aquí estorban. */
.wa-pane .chatbox {
  flex: 1; overflow-y: auto; min-height: 0;
  border: 0; border-radius: 0; padding: 16px 14px;
}

.wa-vacio {
  flex: 1; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background:
    radial-gradient(38rem 26rem at 18% 8%,  rgba(80,175,180,0.10), transparent 62%),
    radial-gradient(34rem 24rem at 88% 22%, rgba(157,140,208,0.09), transparent 60%),
    radial-gradient(40rem 30rem at 40% 96%, rgba(201,161,90,0.10), transparent 64%),
    linear-gradient(160deg, #101016 0%, #0B0B0D 58%);
}
/* El mismo cuervo del login, igual de tenue: textura, no ilustración. */
.wa-vacio .marca {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(26rem, 70%); height: auto; opacity: 0.05; pointer-events: none;
}
.wa-vacio .dice { position: relative; z-index: 1; padding: 0 24px; }
.wa-vacio .dice b { display: block; font-size: 17px; margin-bottom: 7px; }
.wa-vacio .dice p { color: var(--ink-3); font-size: 13.5px; max-width: 34ch; margin: 0 auto; }

/* ---- Escribir ---- */
.responder { flex: none; border-top: 1px solid var(--line); background: var(--surface); }

/* Entregas que no salieron o aún no salen (entregas durables). Van entre la
   conversación y la caja de responder, con su propio scroll y altura acotada:
   son un aviso, no pueden empujar fuera la caja de escribir. El color va con
   palabra al lado, nunca solo. */
.entregas { flex: none; max-height: 38vh; overflow-y: auto; border-top: 1px solid var(--line);
            background: var(--surface); padding: 10px 14px; display: grid; gap: 10px; }
.entregas .lote { border: 1px solid var(--line); border-left-width: 3px; border-radius: 10px;
                  padding: 9px 12px; background: var(--surface-2); }
.entregas .lote-incierta, .entregas .lote-parcial { border-left-color: var(--gold); }
.entregas .lote-fallida { border-left-color: var(--danger, #d9534f); }
.entregas .lote-pendiente { border-left-color: var(--ink-3); }
.entregas .lote-cab { font-size: 13px; margin-bottom: 6px; }
.entregas .parte { padding: 6px 0; border-top: 1px dashed var(--line-soft); }
.entregas .parte:first-of-type { border-top: 0; }
.entregas .parte-texto { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.entregas .parte-estado { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.entregas .parte-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.entregas .parte-acciones form { margin: 0; }
.entregas .parte-acciones .btn { padding: 5px 10px; font-size: 12px; }
.wa-reloj { padding: 8px 16px 0; }
.wa-reloj .reloj { font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 600; }

.wa-escribe { display: flex; align-items: flex-end; gap: 10px; padding: 10px 14px 12px; margin: 0; }
.wa-escribe textarea {
  flex: 1; resize: none; max-height: 140px; overflow-y: auto;
  font-family: inherit; font-size: 14px; line-height: 1.5;
  padding: 11px 15px; border-radius: 20px;
}
.wa-enviar {
  width: 42px; height: 42px; flex: none; border-radius: 50%; border: none;
  background: var(--gold); color: var(--bg); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.wa-enviar svg { width: 19px; height: 19px; margin-left: 2px; }
.wa-enviar:hover { filter: brightness(1.08); }
.wa-cerrada { padding: 14px 16px; color: var(--warn); font-size: 13px; line-height: 1.6; }

.reloj.poco { color: var(--warn); }
/* Quién escribió la burbuja. Solo las que puso una persona la llevan: las del
   bot no la necesitan. */
.firma { display: block; font-size: 10.5px; color: #8696A0; font-weight: 600;
  margin-bottom: 4px; letter-spacing: 0.02em; }

@media (max-width: 860px) {
  /* Un panel a la vez, como el WhatsApp del teléfono: la lista, o el chat. */
  .convo { height: calc(100vh - 150px); }
  .wa-list { width: 100%; border-right: none; }
  .convo.abierta .wa-list { display: none; }
  .convo:not(.abierta) .wa-pane { display: none; }
  .wa-volver { display: flex; align-items: center; }
  .wa-volver svg { width: 22px; height: 22px; }
}


/* ══ Demo conversation (landing and login) ══════════════════════════════════
 * /static/chat-demo.js plays it. The colours are real WhatsApp's because
 * that is what the visitor recognises.
 */

.cd-chat { display: flex; flex-direction: column; gap: 7px; }
.cd-msg { display: flex; animation: cdEntra .32s ease-out both; }
.cd-msg.cd-out { justify-content: flex-end; }
.cd-msg.cd-ya { animation: none; }
.cd-bub {
  max-width: 86%; padding: 8px 11px; font-size: 13px; line-height: 1.45;
  background: #202C33; color: #E9EDEF; border-radius: 8px 8px 8px 2px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.cd-out .cd-bub { background: #005C4B; border-radius: 8px 8px 2px 8px; }
.cd-opts { margin: 8px -11px -8px; }
.cd-opt {
  border-top: 1px solid #2A3942; color: #00A884; font-size: 12.5px;
  padding: 8px; text-align: center;
}

/* The three dots for "typing". */
.cd-typing { display: flex; gap: 4px; align-items: center; padding: 11px; }
.cd-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: #8696A0;
  animation: cdPunto 1.25s ease-in-out infinite;
}
.cd-typing i:nth-child(2) { animation-delay: .18s; }
.cd-typing i:nth-child(3) { animation-delay: .36s; }

@keyframes cdEntra {
  from { opacity: 0; transform: translateY(9px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes cdPunto {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .cd-msg { animation: none; }
  .cd-typing i { animation: none; opacity: .6; }
}

/* ---------- Editable table (bot editor and catalog) ----------
   Each screen sets its columns in `grid-template-columns`, because they are
   not the same: the editor has concept and value; the catalog, price and
   duration. Everything else is shared. */
.tabla { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.tgrid { display: grid; align-items: stretch; }
.tgrid > * { border-bottom: 1px solid var(--line-soft); }
.tgrid .th {
  font-size: 11px; color: var(--ink-3); font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 9px 11px; background: #141319;
  display: flex; align-items: center;
}
.tgrid .cel { display: flex; align-items: center; border-left: 1px solid var(--line-soft); }
.tgrid .cel:first-child { border-left: none; }
.tgrid input[type=text] {
  border: none; border-radius: 0; background: none; padding: 10px 11px;
  font-size: 14px; width: 100%;
}
.tgrid input[type=text]:focus { box-shadow: inset 0 0 0 2px var(--gold); background: var(--gold-dim); }
.tgrid .quitar { display: flex; align-items: center; justify-content: center; gap: 2px; border-left: 1px solid var(--line-soft); }
.tgrid .ult { border-bottom: none; }

/* Icon button: square, discreet, and red only on hover. */
.ibtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: none; border: 1px solid transparent; border-radius: 8px; padding: 6px;
  color: var(--ink-3); cursor: pointer; font-family: inherit; font-size: 13px; line-height: 1;
}
.ibtn svg { display: block; width: 16px; height: 16px; }
.ibtn:hover { background: var(--surface-3); color: var(--ink); }
.ibtn.rojo:hover { background: var(--danger-dim); color: var(--danger); }
.ibtn.agregar { border-color: #35302A; border-style: dashed; color: var(--ink-2); padding: 7px 12px; }
.ibtn.agregar:hover { border-color: var(--gold); border-style: solid; color: var(--gold); background: var(--gold-dim); }

/* "Agregar" goes above the table, flush left. */
.tablatop { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }

/* ══ Vocabulario común de las seis pantallas ════════════════════════════════
 * Las seis especificaciones del rediseño repiten las mismas seis piezas. Viven
 * aquí una vez y no seis: una etiqueta de columna que se ve distinta en Pedidos
 * y en Catálogo se lee como dos productos, no como uno.
 *
 * Ninguna trae color a mano: todo sale de las variables de arriba. Cambiar el
 * dorado sigue siendo cambiar una línea.
 */

/* Etiqueta de columna o de campo: monoespaciada, chica y en versalitas. Es lo
   que distingue "el nombre de la columna" de "el dato", sin una regla ni un
   fondo de por medio. */
.lbl {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
  display: block;
}
.lbl.gold { color: var(--gold); }
.lbl.warn { color: var(--warn); }

/* Metadato en mono sin versalitas: horas, contadores, precios unitarios. */
.meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.04em; }

/* Cualquier número que se compare con otro de la fila de arriba. */
.tnum { font-variant-numeric: tabular-nums; }

/* Estado = punto + palabra. NUNCA solo el punto: quien no distingue el naranja
   del dorado tiene que poder leerlo igual, y en blanco y negro también. */
.estado {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.estado::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--ink-3);
}
.estado.pendiente { color: var(--warn); }
.estado.pendiente::before { background: var(--warn); }
.estado.confirmado { color: var(--gold); }
.estado.confirmado::before { background: var(--gold); }
.estado.terminado { color: var(--good); }
.estado.terminado::before { background: var(--good); }
.estado.cancelado { color: var(--ink-3); text-decoration: line-through; }
.estado.cancelado::before { background: #2A2A33; }

/* Estado de guardado EN PALABRAS. Sustituye al disquete: un icono no puede
   decir "guardando…", y en el disquete no se distinguía "sin cambios" de "hay
   cosas sin guardar", que es justo lo que hay que saber antes de cerrar. */
.guardado {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.guardado::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: currentColor; opacity: 0.55;
}
.guardado[data-estado="sucio"] { color: var(--warn); }
.guardado[data-estado="guardando"] { color: var(--gold); }
.guardado[data-estado="guardado"] { color: var(--good); }

/* Menú `⋯`: un <details>, que trae Escape, foco y teclado sin JS. Sustituye a
   la hilera de iconos siempre visibles de cada fila. */
.menu { position: relative; display: inline-flex; }
.menu > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: center; width: 28px; height: 28px; border-radius: 8px;
  color: var(--ink-3); font-size: 16px; line-height: 1;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover, .menu[open] > summary { background: var(--surface-3); color: var(--ink); }
.menu .pop {
  position: absolute; top: 32px; right: 0; z-index: 40; min-width: 178px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  text-transform: none; letter-spacing: 0; text-align: left;
}
.menu .pop > * {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: none; border-radius: 7px; padding: 8px 10px;
  font-family: inherit; font-size: 13.5px; color: var(--ink-2);
  cursor: pointer; text-align: left;
}
.menu .pop > *:hover { background: var(--surface-3); color: var(--ink); }
.menu .pop > .rojo:hover { background: var(--danger-dim); color: var(--danger); }
.menu .pop svg { width: 15px; height: 15px; flex: none; }

/* Asidero de arrastre. Se dibuja con puntos, no con el carácter ⠿: la braille
   no está en todas las fuentes y donde falta sale el rectángulo vacío. */
.asa {
  width: 16px; height: 20px; flex: none; cursor: grab; border-radius: 4px;
  background-image: radial-gradient(currentColor 1.1px, transparent 1.2px);
  background-size: 5px 5px; background-position: 2px 3px;
  background-repeat: repeat; color: #3D3D43;
}
.asa:hover { color: var(--gold); }
.asa:active { cursor: grabbing; }

/* Chips excluyentes: "A domicilio | Recoge en tienda", los filtros de una
   pantalla, el estado de un pedido nuevo. Son botones de verdad, así que el
   teclado y los lectores de pantalla los ven. */
.chips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chipsel {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
  border-radius: 18px; padding: 6px 13px; font-family: inherit;
  font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.chipsel:hover { border-color: var(--gold); color: var(--ink); }
.chipsel[aria-pressed="true"], .chipsel[aria-current="page"] {
  background: var(--gold); border-color: var(--gold); color: var(--bg);
}
.chipsel .n {
  font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
/* Chip de filtro en versalitas, para las barras de herramientas. */
.chipsel.mono { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; border-radius: 16px; }

/* Contador `− n +`. Los signos son botones; el número es un input de verdad,
   que es lo que deja escribir 12 sin picar doce veces. */
.paso {
  display: inline-flex; align-items: center; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.paso button {
  background: none; border: none; color: var(--ink-3); cursor: pointer;
  font-family: inherit; font-size: 15px; line-height: 1; padding: 7px 9px;
}
.paso button:hover { color: var(--gold); }
.paso input {
  width: 38px; text-align: center; background: none; border: none;
  border-radius: 0; padding: 7px 0; font-size: 13.5px;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.paso input:focus { box-shadow: none; }

/* Caja de búsqueda con su lupa. El icono va de fondo para que el `input` siga
   siendo un `input` y no una caja con un hijo encima. */
.buscar {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F6B64' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 11px center;
  background-size: 16px; padding-left: 34px;
}

/* Barra de herramientas de una pantalla: botón de alta, ayuda, y a la derecha
   el estado de guardado. */
.barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.barra .derecha { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* Estado vacío con recuadro punteado. Nunca una pantalla en blanco: una
   pantalla vacía se lee como algo que no cargó. */
.vacio-caja {
  border: 1px dashed var(--line); border-radius: 12px;
  padding: 34px 22px; text-align: center; color: var(--ink-3);
  font-size: 13.5px; line-height: 1.7;
}

/* Menu badge: how many things are waiting in that section. */
.aviso {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 6px; margin-left: auto;
  border-radius: 999px; background: var(--warn); color: #14100C;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.tab .aviso { margin-left: 6px; }

/* Primeros pasos: misiones cumplidas / disponibles; palomita verde al terminar. */
.tut-pill {
  display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
  min-width: 30px; height: 19px; padding: 0 7px; border-radius: 999px;
  background: var(--gold-dim); color: var(--gold-hi); border: 1px solid rgba(201, 161, 90, 0.35);
  font: 700 10.5px var(--mono); letter-spacing: 0.04em;
}
.tut-pill.ok { min-width: 19px; padding: 0; background: var(--good-dim); color: var(--good);
  border-color: rgba(105, 186, 124, 0.4); }
/* Aviso dorado del Resumen mientras falten las misiones de configuración. */
.tut-aviso { display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border: 1px solid rgba(201, 161, 90, 0.35); border-radius: 12px;
  background: linear-gradient(90deg, rgba(201, 161, 90, 0.10), rgba(201, 161, 90, 0.03));
  color: var(--ink-2); font-size: 14px; text-decoration: none; }
.tut-aviso:hover { border-color: var(--gold); }
.tut-aviso .ic { color: var(--gold); }
.tut-aviso b { color: var(--gold-hi); }
.tut-aviso .ver { margin-left: auto; color: var(--ink-2); white-space: nowrap; }

/* Falta de pago: el modal del dueño (un <dialog> nativo, encima de todo). */
.corte-modal { width: min(440px, calc(100vw - 32px)); padding: 26px 24px 22px; border-radius: 16px;
  border: 1px solid rgba(226, 128, 94, 0.45); background: var(--surface); color: var(--ink);
  text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); }
.corte-modal::backdrop { background: rgba(5, 5, 8, 0.74); }
.corte-modal .corte-icono { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%;
  display: grid; place-items: center; background: var(--warn-dim); color: var(--warn); }
.corte-modal h2 { font: 700 19px/1.3 var(--display); margin: 0; }
.corte-modal p { color: var(--ink-2); font-size: 14px; line-height: 1.55; margin: 10px 0 0; }
.corte-modal .corte-calma { color: var(--ink-3); font-size: 13px; }
.corte-modal .corte-botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 20px; }
.corte-modal .corte-botones form { margin: 0; }

/* Admin: lo que el dueño dejó en /vincular para que lo vinculemos. */
.pedido-vinc { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px;
  margin: -6px 0 16px; }
.pedido-vinc dt { color: var(--ink-3); }
.pedido-vinc dd { margin: 0; color: var(--ink); }

/* La fecha de entrega al confirmar un pedido (un <dialog> nativo). */
.entrega-dialogo { width: min(380px, calc(100vw - 32px)); padding: 22px 22px 18px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); }
.entrega-dialogo::backdrop { background: rgba(5, 5, 8, 0.6); }
.entrega-dialogo h2 { font: 700 17px/1.3 var(--display); margin: 0; }
.entrega-dialogo .muted { margin: 6px 0 14px; }
.entrega-dialogo .entrega-error { color: var(--warn); font-size: 12.5px; margin: 8px 0 0; }
.entrega-dialogo .botones { display: flex; gap: 9px; justify-content: flex-end; margin-top: 16px; }
.alta-entrega { display: flex; flex-direction: column; gap: 5px; }
.alta-entrega[hidden] { display: none; }

/* La vista previa del formulario de WhatsApp (formulario.js): se encima en el
   celular de Configurar bot o de Probar, con los tonos del chat de al lado. */
.fform { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
  background: #0B141A; color: #E9EDEF; font-size: 13.5px; }
.fform.ocupado { opacity: 0.6; pointer-events: none; }
.fform-cab { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #1F2C33;
  border-bottom: 1px solid #101A20; flex: none; }
.fform-cab b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fform-x { background: none; border: none; color: #AEBAC1; font-size: 18px; line-height: 1;
  cursor: pointer; padding: 2px 6px; min-width: 32px; min-height: 32px; }
.fform-cuerpo { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.fform-marca { margin: 0; font-size: 11px; color: #8696A0; text-align: center; }
.fform-error { margin: 0; padding: 8px 10px; border-radius: 8px; background: rgba(232, 131, 74, 0.14);
  color: #F0B48E; font-size: 12.5px; }
.fform-aviso { margin: 18px 14px; color: #D1D7DB; line-height: 1.5; }
.fform-texto { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; background: #111B21;
  border-radius: 8px; padding: 9px 11px; }
.fform-campo { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: #AEBAC1;
  border: 0; margin: 0; padding: 0; min-width: 0; }
.fform-campo legend { padding: 0; margin-bottom: 5px; }
.fform-campo select, .fform-campo input, .fform-campo textarea { width: 100%; box-sizing: border-box;
  background: #202C33; color: #E9EDEF; border: 1px solid #2A3942; border-radius: 8px; padding: 9px 10px;
  font: inherit; font-size: 13.5px; }
.fform-campo small { color: #8696A0; font-size: 11.5px; }
.fform-radios { display: flex; flex-direction: column; gap: 2px; }
.fform-radios label { display: flex; align-items: center; gap: 8px; padding: 7px 2px; color: #E9EDEF;
  font-size: 13.5px; cursor: pointer; }
.fform-radios input { accent-color: #00A884; width: 16px; height: 16px; margin: 0; }
.fform-pie { flex: none; margin: 10px 14px 14px; padding: 11px; border: none; border-radius: 20px;
  background: #00A884; color: #0B141A; font: inherit; font-weight: 600; cursor: pointer; }
.fform-pie:disabled { background: #2A3942; color: #6F7C84; cursor: default; }
/* El mensaje con el botón que abre el formulario, en el chat de la vista previa. */
.wa-flow { max-width: 85%; }
.wa-flow .bub { max-width: 100%; border-radius: 8px 8px 0 2px; }
.wa-flow-cta { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: #202C33; border: none; border-top: 1px solid #2A3942; border-radius: 0 0 8px 8px;
  color: #00A884; font: inherit; font-size: 13.5px; padding: 10px 8px; cursor: pointer; }
.wa-flow-nota { font-size: 11.5px; color: #8696A0; margin: 4px 2px 0; line-height: 1.4; }