/* ==========================================================================
   MOCKUP CANÓNICO — WhatsApp iOS, modo oscuro, AL PIXEL
   FORMATOS-CANONICOS.md §3 (R25) · memoria reference_whatsapp_mockup_fidelity
   --------------------------------------------------------------------------
   ESCALA: todo en em sobre .wa. La base se ata al --pt del iPhone, así el
   chat escala junto con el teléfono sin tocar un solo número:
       font-size: calc(16 * var(--pt))
   --wa-fit es la única perilla de ajuste y se aplica SOLO al cuerpo de la
   conversación: en el teléfono real el header y la barra de escribir NO
   cambian de tamaño porque haya más mensajes. WA.fit() la baja hasta que la
   conversación entra sin cortarse (fit height-aware).

   COLORES EXACTOS — no se redeclaran por pieza, se consumen por var().
   ========================================================================== */

.wa{
  --wa-bg:        #0B141A;   /* fondo del chat            */
  --wa-panel:     #1F2C34;   /* header y barra de escribir*/
  --wa-in:        #202C33;   /* globo ENTRANTE (izquierda)*/
  --wa-out:       #005C4B;   /* globo SALIENTE (derecha)  */
  --wa-text:      #E9EDEF;   /* texto de los globos       */
  --wa-meta:      #8696A0;   /* "en línea", timestamps    */
  --wa-tick:      #53BDEB;   /* doble check LEÍDO         */
  --wa-tint:      #00A884;   /* tinte iOS: chevron, llamadas */
  --wa-field:     #2A3942;   /* pill de escribir          */
  --wa-daypill:   #182229;   /* pill de fecha             */
  --wa-sep:       rgba(255,255,255,.08);

  --wa-doodle-url:   url("doodle.svg");
  --wa-doodle-color: rgba(255,255,255,.05);
  --wa-doodle-size:  calc(384 * var(--pt, 1px));  /* tile de 600u -> glifos de ~34 pt.
                                 va en --pt, NO en em: el fondo de pantalla no
                                 se achica porque la conversación sea larga */

  --wa-fit: 1;

  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background: var(--wa-bg);
  color: var(--wa-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               Inter, "Helvetica Neue", sans-serif;
  font-size: calc(16 * var(--pt, 1px));
  line-height:1.28;
  -webkit-font-smoothing: antialiased;
  overflow:hidden;
}
.wa *, .wa *::before, .wa *::after{ box-sizing:border-box; }

/* ==========================================================================
   1. STATUS BAR iOS  (alto = safe area top del 16 Pro: 62 pt)
   ========================================================================== */
.wa-status{
  flex:0 0 auto; height:3.875em; position:relative;
  background: var(--wa-panel);
  color: var(--wa-text);
  display:flex; align-items:flex-start; justify-content:space-between;
  padding: 1.05em 1.9em 0;
  font-size:1em;
}
.wa-status__time{
  font-size:1.0625em; font-weight:600; letter-spacing:-.01em;
  min-width:5.4em;              /* deja libre el hueco de la Dynamic Island */
}
.wa-status__icons{ display:flex; align-items:center; gap:.34em; min-width:5.4em; justify-content:flex-end; }
.wa-status__icons svg{ display:block; height:.72em; width:auto; }
.wa-status__icons .wa-batt{ height:.78em; }

/* ==========================================================================
   2. HEADER DEL CHAT
   ========================================================================== */
.wa-head{
  flex:0 0 auto; display:flex; align-items:center; gap:.5em;
  padding:.28em .75em .5em .5em;
  background: var(--wa-panel);
  border-bottom:.0625em solid var(--wa-sep);
}
.wa-head__back{
  flex:0 0 auto; display:flex; align-items:center; gap:.1em;
  color: var(--wa-tint); padding:0 .1em 0 .15em;
}
.wa-head__back svg{ display:block; width:.72em; height:1.35em; }
.wa-head__badge{                 /* contador de no leídos junto al chevron */
  font-size:.9em; color:var(--wa-tint); font-weight:400;
}
.wa-head__av{
  flex:0 0 auto; width:2.375em; height:2.375em; border-radius:50%;
  background:#3B4A54 center/cover no-repeat; overflow:hidden;
  display:grid; place-items:center;
}
.wa-head__av img{ width:100%; height:100%; object-fit:cover; display:block; }
.wa-head__who{ flex:1; min-width:0; padding-left:.15em; }
.wa-head__name{
  display:block;
  font-size:1.0625em; font-weight:600; letter-spacing:-.015em; color:var(--wa-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2;
}
.wa-head__sub{
  display:block;
  font-size:.8125em; color:var(--wa-meta); line-height:1.25; margin-top:.05em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wa-head__acts{ flex:0 0 auto; display:flex; align-items:center; gap:1.35em; color:var(--wa-tint); }
.wa-head__acts svg{ display:block; width:1.45em; height:1.45em; fill:currentColor; }

/* ==========================================================================
   3. CUERPO + FONDO DOODLE  (el default de WhatsApp, no un liso)
   ========================================================================== */
.wa-body{
  position:relative; flex:1 1 auto; min-height:0;
  background: var(--wa-bg);
  font-size: calc(1em * var(--wa-fit));   /* el fit vive ACÁ y sólo acá */
  padding:.55em .55em .35em;
  display:flex; flex-direction:column; justify-content:flex-end; gap:.125em;
  overflow:hidden;
}
.wa-body::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: var(--wa-doodle-color);
  -webkit-mask-image: var(--wa-doodle-url);
          mask-image: var(--wa-doodle-url);
  -webkit-mask-size: var(--wa-doodle-size) var(--wa-doodle-size);
          mask-size: var(--wa-doodle-size) var(--wa-doodle-size);
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
}
.wa-body > *{ position:relative; z-index:1; }

/* pill de fecha centrado */
.wa-daypill{
  align-self:center; margin:.35em 0 .5em;
  background: var(--wa-daypill); color: var(--wa-meta);
  font-size:.78125em; font-weight:500; letter-spacing:.02em;
  padding:.4em .75em; border-radius:.55em; text-transform:uppercase;
}
/* aviso de cifrado (lo primero que muestra todo chat real) */
.wa-e2e{
  align-self:center; max-width:82%; margin:.1em 0 .55em; text-align:center;
  background:#182F1E; color:#E5C36B;
  font-size:.75em; line-height:1.35; padding:.5em .8em; border-radius:.5em;
}
/* R26 punto 3: el aviso de cifrado SIEMPRE con su candado, inline antes del texto */
.wa-e2e__lock{
  display:inline-block; width:.92em; height:.92em; vertical-align:-.13em;
  margin-right:.3em;
}
.wa-e2e__lock svg{ width:100%; height:100%; display:block; fill:currentColor; }

/* ==========================================================================
   4. GLOBOS
   REGLA DURA (el error más común): VERDE = vos = SALIENTE = DERECHA.
                                    GRIS  = el otro = ENTRANTE = IZQUIERDA.
   ========================================================================== */
.wa-b{
  position:relative; flex:0 0 auto; max-width:78%;
  padding:.375em .5em .375em .5em;
  border-radius:.5em;
  font-size:1.0625em; line-height:1.31; letter-spacing:-.005em;
  box-shadow:0 .0625em .0625em rgba(0,0,0,.13);
  word-wrap:break-word;
}
/* Los saltos de linea del mensaje se respetan, como en WhatsApp real: un
   reporte de varias lineas llegaba colapsado en un solo parrafo. Ampliacion del
   componente (R25: se amplia para todos, no se forkea por pieza), 01-ago-2026. */
.wa-b{ white-space: pre-wrap; }
.wa-b.is-in { align-self:flex-start; background:var(--wa-in);  color:var(--wa-text); }
.wa-b.is-out{ align-self:flex-end;   background:var(--wa-out); color:var(--wa-text); }
.wa-b + .wa-b{ margin-top:.125em; }
.wa-b.starts-group{ margin-top:.5em; }
.wa-b b{ font-weight:600; }

/* --- colita (tail) -------------------------------------------------------
   Por defecto iOS: la colita va ABAJO, en el ÚLTIMO globo del grupo.
   Variante web/Android (.wa[data-tail="web"]): ARRIBA, en el PRIMERO.
   Se dibuja con máscara (no con un recorte del color de fondo), porque
   atrás hay doodle: un recorte sólido se vería como un parche.
   ------------------------------------------------------------------------ */
.wa-b.has-tail::after{
  content:""; position:absolute;
  width:.5em; height:.8125em;              /* 8:13, la proporción real */
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}
/* iOS — abajo */
.wa[data-tail="ios"] .wa-b.is-out.has-tail{ border-bottom-right-radius:0; }
.wa[data-tail="ios"] .wa-b.is-in.has-tail { border-bottom-left-radius:0; }
.wa[data-tail="ios"] .wa-b.is-out.has-tail::after{
  right:-.5em; bottom:0; background:var(--wa-out);
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13"><path d="M5.188,12H0V0.807L6.467,9.432C7.526,10.844,6.958,12,5.188,12z"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13"><path d="M5.188,12H0V0.807L6.467,9.432C7.526,10.844,6.958,12,5.188,12z"/></svg>');
}
.wa[data-tail="ios"] .wa-b.is-in.has-tail::after{
  left:-.5em; bottom:0; background:var(--wa-in);
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13"><path d="M2.812,12H8V0.807L1.533,9.432C0.474,10.844,1.042,12,2.812,12z"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13"><path d="M2.812,12H8V0.807L1.533,9.432C0.474,10.844,1.042,12,2.812,12z"/></svg>');
}
/* Web / Android — arriba */
.wa[data-tail="web"] .wa-b.is-out.has-tail{ border-top-right-radius:0; }
.wa[data-tail="web"] .wa-b.is-in.has-tail { border-top-left-radius:0; }
.wa[data-tail="web"] .wa-b.is-out.has-tail::after{
  right:-.5em; top:0; background:var(--wa-out);
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13"><path d="M5.188,1H0v11.193l6.467-8.625C7.526,2.156,6.958,1,5.188,1z"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13"><path d="M5.188,1H0v11.193l6.467-8.625C7.526,2.156,6.958,1,5.188,1z"/></svg>');
}
.wa[data-tail="web"] .wa-b.is-in.has-tail::after{
  left:-.5em; top:0; background:var(--wa-in);
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13"><path d="M2.812,1H8v11.193L1.533,3.568C0.474,2.156,1.042,1,2.812,1z"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13"><path d="M2.812,1H8v11.193L1.533,3.568C0.474,2.156,1.042,1,2.812,1z"/></svg>');
}

/* --- metadatos del globo: hora + ticks, abajo a la derecha --------------- */
.wa-meta{
  float:right; margin:.35em -.1em -.1em .5em;
  display:inline-flex; align-items:center; gap:.28em;
  font-size:.6875em; line-height:1; white-space:nowrap;
  color: rgba(233,237,239,.6);
}
.wa-b.is-out .wa-meta{ color: rgba(233,237,239,.62); }
.wa-meta svg{ display:block; width:1.05em; height:auto; }
/* TICKS: sólo en SALIENTES. Azul = leído, gris = entregado. */
.wa-tick{ color:var(--wa-tick); }
.wa-tick.is-sent{ color: rgba(233,237,239,.6); }
.wa-b.is-in .wa-tick{ display:none; }

/* ==========================================================================
   5. NOTA DE VOZ
   ========================================================================== */
.wa-b.is-audio{ width:16.5em; max-width:82%; padding:.45em .5em .3em; }
.wa-audio{ display:flex; align-items:center; gap:.4em; }
.wa-audio__av{
  position:relative; flex:0 0 auto; width:2.75em; height:2.75em; border-radius:50%;
  background:#54656F center/cover no-repeat; overflow:visible;
}
.wa-audio__av img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.wa-audio__mic{
  position:absolute; right:-.05em; bottom:-.05em;
  width:1.15em; height:1.15em; border-radius:50%;
  background:#25D366; display:grid; place-items:center;
}
.wa-b.is-in  .wa-audio__mic{ box-shadow:0 0 0 .1em var(--wa-in);  }
.wa-b.is-out .wa-audio__mic{ box-shadow:0 0 0 .1em var(--wa-out); background:#8696A0; }
.wa-audio__mic svg{ width:.62em; height:auto; fill:#fff; display:block; }
.wa-audio__play{ flex:0 0 auto; display:grid; place-items:center; width:1.5em; color:var(--wa-text); }
.wa-audio__play svg{ width:1.05em; height:auto; fill:currentColor; display:block; }
.wa-audio__box{ flex:1; min-width:0; }
.wa-audio__wave{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:.12em; height:1.35em;
}
.wa-audio__wave i{
  flex:1 1 0; min-width:0; max-width:.14em;   /* barras FINAS, como el real */
  border-radius:.07em; height:26%;
  background: rgba(233,237,239,.42);
}
.wa-audio__wave i:nth-child(2n){ height:52%; }
.wa-audio__wave i:nth-child(3n){ height:80%; }
.wa-audio__wave i:nth-child(4n){ height:38%; }
.wa-audio__wave i:nth-child(5n){ height:96%; }
.wa-audio__wave i:nth-child(7n){ height:64%; }
.wa-audio__wave i:nth-child(11n){ height:44%; }
.wa-audio__wave i.is-played{ background: rgba(233,237,239,.9); }
.wa-audio__dot{
  position:absolute; top:50%; width:.72em; height:.72em; border-radius:50%;
  background:#E9EDEF; transform:translate(-50%,-50%);
}
.wa-audio__row{ display:flex; align-items:center; justify-content:space-between; margin-top:.1em; }
.wa-audio__dur{ font-size:.6875em; color:rgba(233,237,239,.6); }
.wa-b.is-audio .wa-meta{ float:none; margin:0; }

/* ==========================================================================
   6. IMAGEN
   ========================================================================== */
.wa-b.is-img{ padding:.1875em; max-width:65%; }
.wa-img{ position:relative; border-radius:.4em; overflow:hidden; display:block; }
.wa-img img{ display:block; width:100%; height:auto; }
/* la hora sobre la foto va con velo local, como en el real */
.wa-img__meta{
  position:absolute; right:.35em; bottom:.3em;
  display:inline-flex; align-items:center; gap:.25em;
  font-size:.6875em; color:#fff; padding:.15em .35em; border-radius:.5em;
  background:rgba(0,0,0,.4);
}
.wa-img__meta svg{ width:1.05em; height:auto; display:block; }
.wa-b.is-img .wa-cap{ padding:.3em .35em .1em; font-size:.9375em; }

/* ==========================================================================
   7. DOCUMENTO (PDF)
   ========================================================================== */
.wa-b.is-doc{ max-width:78%; padding:.3em; text-decoration:none; color:inherit; display:block; }
.wa-doc{
  display:flex; align-items:center; gap:.55em;
  background: rgba(0,0,0,.16); border-radius:.4em; padding:.55em .6em;
}
.wa-doc__ic{ flex:0 0 auto; width:1.9em; height:2.3em; display:grid; place-items:center; }
.wa-doc__ic svg{ width:100%; height:auto; display:block; }
.wa-doc__mt{ flex:1; min-width:0; }
.wa-doc__name{
  display:block; font-size:.9375em; color:var(--wa-text); font-weight:400;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wa-doc__sub{ display:block; font-size:.75em; color:rgba(233,237,239,.6); margin-top:.15em; }
.wa-b.is-doc .wa-meta{ float:right; margin:.25em .15em 0 0; }

/* ==========================================================================
   8. "escribiendo…"
   ========================================================================== */
.wa-typing{
  align-self:flex-start; background:var(--wa-in); border-radius:.5em;
  padding:.65em .7em; display:flex; gap:.28em; margin-top:.5em;
}
.wa-typing i{ width:.44em; height:.44em; border-radius:50%; background:#8696A0; display:block; }
.wa-typing i{ animation: wa-tp 1.3s infinite; }
.wa-typing i:nth-child(2){ opacity:.75; animation-delay:.18s; }
.wa-typing i:nth-child(3){ opacity:.5;  animation-delay:.36s; }
@keyframes wa-tp{
  0%,60%,100%{ opacity:.34; transform:translateY(0); }
  30%        { opacity:.95; transform:translateY(-.15em); }
}

/* ==========================================================================
   9. BARRA DE ESCRIBIR — COMPLETA: + · pill con placeholder y carita ·
      cámara · micrófono.  (Abajo queda el hueco del home indicator: 34 pt)
   ========================================================================== */
.wa-input{
  flex:0 0 auto; display:flex; align-items:flex-end; gap:.55em;
  background: var(--wa-panel);
  padding:.45em .6em 2.125em;
  color: var(--wa-meta);
}
.wa-input__plus{ flex:0 0 auto; width:1.35em; height:1.35em; display:grid; place-items:center; margin-bottom:.36em; }
.wa-input__plus svg{ width:100%; height:100%; display:block; }
.wa-input__field{
  flex:1; min-width:0; display:flex; align-items:center; gap:.35em;
  background: var(--wa-field); border-radius:1.05em;
  padding:.3em .45em .3em .7em; min-height:1.95em;
}
.wa-input__ph{ flex:1; min-width:0; font-size:1em; color:var(--wa-meta); line-height:1.2; }
.wa-input__emoji{ flex:0 0 auto; width:1.3em; height:1.3em; }
.wa-input__emoji svg{ width:100%; height:100%; display:block; fill:currentColor; }
.wa-input__act{ flex:0 0 auto; width:1.4em; height:1.4em; margin-bottom:.32em; }
.wa-input__act svg{ width:100%; height:100%; display:block; fill:currentColor; }

/* globo reservado pero invisible (tandas de historias: el chat crece sin mover lo anterior) */
.wa-b.is-oculto{ visibility:hidden; }
.wa-daypill.is-oculto{ visibility:hidden; }

/* GRUPOS: nombre del participante arriba del texto (solo en el primero de su tanda) */
.wa-au{ display:block; font-size:.8125em; font-weight:600; line-height:1.2; margin-bottom:.15em; }

/* Documento abrible: mismo dibujo, con la señal mínima de que se puede tocar.
   Solo aplica cuando el mensaje trae `href`; sin él el adjunto queda inerte. */
a.wa-doc--abrible{ text-decoration:none; color:inherit; cursor:pointer; }
a.wa-doc--abrible:hover{ filter:brightness(1.12); }

/* ── visor de documento (vista:"documento") ──────────────────────────────────
   La pantalla que WhatsApp abre al tocar la tarjeta de un PDF. Agregado el
   30-ago-2026 a pedido de Tobías; no altera la vista de chat. */
.wa-doch{
  display:flex; align-items:center; gap:calc(var(--pt) * 6);
  padding:calc(var(--pt) * 5) calc(var(--pt) * 7);
  background:#1F2C34; color:#E9EDEF;
}
.wa-doch__back{ display:flex; color:#00A884; }
.wa-doch__back svg{ width:calc(var(--pt) * 11); height:calc(var(--pt) * 11); }
.wa-doch__who{ display:flex; flex-direction:column; min-width:0; }
.wa-doch__name{
  font-size:calc(var(--pt) * 8.2); font-weight:600; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wa-doch__sub{ font-size:calc(var(--pt) * 6.4); color:#8696A0; margin-top:calc(var(--pt) * 1); }
.wa-docv{
  flex:1 1 auto; min-height:0; background:#0B141A;
  display:flex; align-items:flex-start; justify-content:center;
  padding:calc(var(--pt) * 6) calc(var(--pt) * 4);
}
.wa-docv__pg{
  width:100%; height:auto; display:block; background:#fff;
  border-radius:calc(var(--pt) * 2);
  box-shadow:0 calc(var(--pt) * 2) calc(var(--pt) * 8) rgba(0,0,0,.45);
}

/* Dato como etiqueta (04-sep-2026): [Kilogramos], [Pesos], [Nombre del productor]. Un rectángulo
   con el nombre del dato en lugar del valor: la estructura de la respuesta se ve, el dato no. */
.wa-dato{ display:inline-block; padding:0 .38em; margin:0 .04em; line-height:1.35; border-radius:.28em;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.09); color:inherit;
  font-size:.86em; font-weight:500; letter-spacing:.01em; white-space:nowrap; vertical-align:baseline; }
.wa-b.is-out .wa-dato{ border-color:rgba(255,255,255,.34); background:rgba(0,0,0,.14); }
b .wa-dato{ font-weight:600; }
.wa-doc__name .wa-dato{ font-size:.92em; }