/* Azul — hoja unica, sin build step, sin webfonts.
   Roboto es la fuente del sistema en Chrome Android: 0 KB descargados. */

:root{
  --brand:#07C160; --brand-700:#06AD56; --brand-chip:#D6F5E3;
  --bg:#FFFFFF; --surface-2:#F0F2F5; --wallpaper:#E5DDD5;
  --bubble-in:#FFFFFF; --bubble-out:#D9FDD3; --divider:#E9EDEF;
  --text:#111B21; --text-2:#667781; --text-3:#8696A0; --on-brand:#FFFFFF;
  /* #667781 sobre #DFF0FA da 3.98:1 (el gris de WhatsApp daria 2.61 y falla).
     Mas oscuro que el original y ademas mejor para un usuario mayor. */
  --check:#667781; --check-read:#0088CC; --danger:#D32F2F;
  --sh-bubble:0 1px .5px rgba(11,20,26,.13);
  --sh-fab:0 4px 8px rgba(0,0,0,.20);
  --appbar:56px; --row:72px; --avatar:48px; --r-bubble:8px;

  --fs:1;
  --fs-msg:calc(15px*var(--fs));   --fs-name:calc(17px*var(--fs));
  --fs-prev:calc(14px*var(--fs));  --fs-time:calc(11px*var(--fs));
  --fs-title:calc(22px*var(--fs));
}
[data-fs="grande"]{--fs:1.13}
[data-fs="enorme"]{--fs:1.27}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overscroll-behavior-y:none}
body{
  font-family:Roboto,"Segoe UI",-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:var(--text); background:var(--bg);
  font-size:var(--fs-msg); line-height:1.35;
}
button,input,textarea{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}

/* ── Navegacion entre pantallas ──────────────────────────────────── */
.screen{position:fixed;inset:0;display:none;flex-direction:column;background:var(--bg)}
.screen.on{display:flex}

/* ── Barra superior ──────────────────────────────────────────────── */
.bar{
  height:var(--appbar);flex:0 0 auto;background:var(--brand);color:var(--on-brand);
  display:flex;align-items:center;gap:4px;padding:0 4px 0 8px;
  padding-top:env(safe-area-inset-top);height:calc(var(--appbar) + env(safe-area-inset-top));
}
.bar h1{font-size:var(--fs-title);font-weight:600;margin:0 0 0 8px;flex:1}
.bar .ico{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;color:#fff}
.bar .ico:active{background:rgba(255,255,255,.18)}
.bar .peer{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.bar .peer b{display:block;font-size:var(--fs-name);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .peer small{display:block;font-size:12px;opacity:.85}

/* ── Avatares: iniciales sobre color derivado del nombre ─────────── */
.av{
  width:var(--avatar);height:var(--avatar);border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;color:#fff;font-weight:500;font-size:18px;
  background:var(--brand);user-select:none;
}
.av.sm{width:36px;height:36px;font-size:14px}

/* ── Lista de chats ──────────────────────────────────────────────── */
.list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.row{
  min-height:var(--row);display:flex;align-items:center;gap:12px;
  padding:8px 16px;border-bottom:1px solid var(--divider);width:100%;text-align:left;
}
.row:active{background:var(--surface-2)}
.row .mid{flex:1;min-width:0}
.row .nm{font-size:var(--fs-name);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .pv{font-size:var(--fs-prev);color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.row .end{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto}
.row .tm{font-size:12px;color:var(--text-2)}
.row.unread .tm{color:var(--brand)}
.badge{
  min-width:20px;height:20px;border-radius:10px;background:var(--brand);color:#fff;
  font-size:12px;font-weight:500;display:grid;place-items:center;padding:0 6px;
}
.empty{padding:48px 32px;text-align:center;color:var(--text-2)}
.empty b{display:block;color:var(--text);font-size:18px;margin-bottom:8px}

/* ── Boton flotante ──────────────────────────────────────────────── */
.fab{
  position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:16px;background:var(--brand);
  box-shadow:var(--sh-fab);display:grid;place-items:center;color:#fff;
  transition:transform 90ms;
}
.fab:active{transform:scale(.94)}

/* ── Conversacion ────────────────────────────────────────────────── */
.thread{
  flex:1;overflow-y:auto;padding:8px;background:var(--wallpaper);
  display:flex;flex-direction:column;gap:2px;
}
.b{
  max-width:85%;border-radius:var(--r-bubble);padding:6px 9px 8px;
  box-shadow:var(--sh-bubble);position:relative;
  word-wrap:break-word;overflow-wrap:anywhere;
}
.b.in{background:var(--bubble-in);align-self:flex-start}
.b.out{background:var(--bubble-out);align-self:flex-end}
.b.first{margin-top:8px}
.b.in.first{border-top-left-radius:0}
.b.out.first{border-top-right-radius:0}
/* El hueco reservado para hora+checks en la ultima linea: es el truco que
   evita que el texto quede debajo de la hora. */
/* Hueco reservado en la ultima linea para la hora y los checks.
   En español la hora ocupa mas que en ingles ("5:15 a.m." frente a "5:15 PM")
   y con los dos checks al lado hacen falta unos 80px; con menos, en mensajes
   cortos como "Hola" la hora se monta sobre el texto. */
.b .tx::after{content:'';display:inline-block;width:82px;height:1px}
.b.in .tx::after{width:62px}
.b .meta{
  position:absolute;right:9px;bottom:6px;font-size:var(--fs-time);
  color:var(--text-2);display:flex;align-items:center;gap:3px;
}
.b .meta svg{display:block}
.b .meta .rd{color:var(--check-read)}
.chip{
  align-self:center;margin:10px 0;padding:5px 12px;border-radius:8px;
  background:rgba(255,255,255,.92);box-shadow:var(--sh-bubble);
  font-size:12.5px;color:#54656F;
}

/* ── Compositor ──────────────────────────────────────────────────── */
.composer{
  flex:0 0 auto;display:flex;align-items:flex-end;gap:6px;padding:6px 8px;
  padding-bottom:calc(6px + env(safe-area-inset-bottom));background:var(--surface-2);
}
.composer .box{
  flex:1;background:#fff;border-radius:24px;padding:4px 12px 4px 4px;
  display:flex;align-items:center;gap:4px;min-height:46px;
}
.clip{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;
  color:var(--text-2);border-radius:50%}
.clip:active{background:var(--surface-2)}
.composer textarea{
  flex:1;border:0;outline:0;resize:none;max-height:110px;
  font-size:16px; /* 16px evita el auto-zoom de iOS */
  line-height:21px;background:transparent;
}
.send{
  width:46px;height:46px;border-radius:50%;background:var(--brand);
  display:grid;place-items:center;color:#fff;flex:0 0 auto;transition:transform 90ms;
}
.send:active{transform:scale(.92)}

/* ── Alta y acceso ───────────────────────────────────────────────── */
.pad{padding:24px 24px calc(24px + env(safe-area-inset-bottom));overflow-y:auto;flex:1}
.hero{text-align:center;padding:32px 0 24px}
.hero img{width:88px;height:88px;border-radius:22px}
.hero h2{font-size:24px;font-weight:600;margin:16px 0 6px}
.hero p{color:var(--text-2);margin:0}
label{display:block;font-size:15px;color:var(--text-2);margin:18px 0 6px}
.fld{
  width:100%;padding:14px 16px;border:1px solid #D1D7DB;border-radius:10px;
  font-size:17px;background:#fff;outline:0;
}
.fld:focus{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-chip)}
.btn{
  width:100%;min-height:56px;border-radius:12px;background:var(--brand);color:#fff;
  font-size:17px;font-weight:500;margin-top:24px;transition:transform 90ms;
}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.55}
.btn.ghost{background:transparent;color:var(--brand);margin-top:8px;min-height:48px}
.hint{font-size:14px;color:var(--text-2);margin-top:8px}
.err{
  background:#FDECEA;color:#8C1D18;border-radius:10px;padding:12px 14px;
  margin-top:16px;font-size:15px;display:none;
}
.err.on{display:block}

/* Toque comodo para manos mayores: nada por debajo de 48px. */
button,.row{min-height:48px}

.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(88px + env(safe-area-inset-bottom));
  background:#2A3942;color:#fff;font-size:14px;padding:14px 18px;border-radius:8px;
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:50;max-width:88vw;
}
.toast.on{opacity:1}

/* ── Escritorio: dos paneles, como WhatsApp Web ──────────────────────────
   En el telefono las pantallas se turnan ocupando todo. En un monitor eso se
   ve roto: una columna estirada a 1900 px. A partir de 900 px la lista se
   queda fija a la izquierda y la conversacion ocupa la derecha, que es como
   el usuario ya conoce esto en la computadora. */

#vacio { display: none; }

@media (min-width: 900px) {
  body {
    display: grid;
    grid-template-columns: 400px 1fr;
    max-width: 1500px;
    height: 100vh;
    margin: 0 auto;
    background: var(--bg);
    box-shadow: 0 0 32px rgba(0,0,0,.28);
  }
  html { background: #0b141a; }

  /* Dejan de flotar: pasan a ser celdas de la rejilla. */
  .screen { position: relative; inset: auto; height: 100vh; min-height: 0; }

  /* La lista no se oculta nunca. */
  #s-chats {
    display: flex;
    grid-column: 1;
    border-right: 1px solid var(--divider);
  }
  #s-chats .fab { display: none; }   /* con la lista siempre visible, sobra */

  /* Todo lo demas comparte la celda derecha y se apila encima del marcador.
     El z-index es imprescindible: sin el, el marcador va despues en el HTML y
     por eso se pintaba ENCIMA de la conversacion, tapandola con el logo. */
  #s-chat, #s-new, #s-invite, #vacio {
    grid-column: 2;
    grid-row: 1;
  }
  #vacio { z-index: 0; }
  #s-chat, #s-new, #s-invite { z-index: 1; }

  #vacio {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: var(--surface-2); text-align: center; padding: 32px;
  }
  #vacio img { width: 96px; height: 96px; border-radius: 24px; opacity: .9; }
  #vacio h2 { font-size: 26px; font-weight: 400; margin: 20px 0 8px; color: var(--text); }
  #vacio p { color: var(--text-2); margin: 0; max-width: 34ch; }

  /* En escritorio la flecha de atras no tiene sentido: la lista ya esta ahi. */
  #s-chat [data-back] { display: none; }

  /* El alta y el acceso siguen cubriendo la pantalla entera, centrados. */
  #s-welcome, #s-register, #s-login {
    position: fixed; inset: 0; z-index: 20;
    max-width: 460px; left: 50%; transform: translateX(-50%);
    background: var(--bg); height: 100vh;
  }

  /* La barra deja de necesitar el hueco de la muesca del telefono. */
  .bar { height: var(--appbar); padding-top: 0; }
  .composer { padding-bottom: 6px; }
}

/* Entre movil y escritorio: se centra como un telefono para que probar desde
   el PC se parezca a lo que vera el comerciante. */
@media (min-width: 560px) and (max-width: 899px) {
  html { background: #0b141a; }
  .screen {
    left: 50%; right: auto; transform: translateX(-50%);
    width: 100%; max-width: 480px;
    box-shadow: 0 0 40px rgba(0,0,0,.45);
  }
}

/* ── Fotos y notas de voz ───────────────────────────────────────────── */

/* La foto no lleva el relleno de la burbuja: va a sangre, como en WhatsApp. */
.b.media{padding:3px;max-width:75%}
.b.media .tx::after{width:0}
.b .foto{display:block;border-radius:6px;max-width:100%;width:240px;
  height:auto;background:var(--surface-2);cursor:pointer}
.b.media .meta{right:10px;bottom:8px;color:#fff;z-index:1}
/* Velo oscuro bajo la hora: sobre una foto clara el texto blanco desaparecia.
   Una sombra de texto no basta cuando el fondo es blanco puro. */
.b.media::after{content:'';position:absolute;left:3px;right:3px;bottom:3px;
  height:44px;border-radius:0 0 6px 6px;pointer-events:none;
  background:linear-gradient(transparent,rgba(0,0,0,.45))}
.b.media .meta .rd{color:#8ED8FF}

/* Nota de voz — misma anatomia que WhatsApp: avatar con micro, boton de
   reproducir, onda con punto de posicion, y duracion. */
.voz{display:flex;align-items:center;gap:8px;min-width:236px;padding:2px 0}
.vz-av{position:relative;width:40px;height:40px;font-size:15px}
.vz-mic{position:absolute;right:-2px;bottom:-1px;color:#8696A0}
.b.out .vz-mic{color:var(--brand-700)}
.vz-play{width:28px;height:28px;flex:0 0 auto;display:grid;place-items:center;
  color:#54656F;background:none}
.b.out .vz-play{color:#3F7A5C}

.onda{flex:1;position:relative;height:20px;display:flex;align-items:center;gap:2px}
.onda i{flex:1;min-width:2px;max-width:3px;border-radius:2px;
  background:rgba(0,0,0,.22);transition:background .1s}
.onda i.pasada{background:var(--brand-700)}
/* El punto marca por donde va, y se mueve con la reproduccion. */
.onda .punto{position:absolute;left:0;top:50%;width:11px;height:11px;
  margin-top:-5.5px;margin-left:-5.5px;border-radius:50%;
  background:var(--brand);box-shadow:0 1px 2px rgba(0,0,0,.3);
  transition:left .1s linear}
.b.in .onda .punto{background:#54656F}

.voz .dur{font-size:12px;color:var(--text-2);min-width:32px;text-align:right}

/* Barra de grabacion: sustituye al compositor mientras se graba */
#grabando{display:none;align-items:center;gap:10px;padding:12px 16px;
  background:var(--surface-2);border-top:1px solid var(--divider)}
#grabando.on{display:flex}
#grabando .pt{width:11px;height:11px;border-radius:50%;background:var(--danger);
  animation:lat 1.2s infinite}
@keyframes lat{0%,100%{opacity:1}50%{opacity:.25}}
#grabando #g-t{font-variant-numeric:tabular-nums;font-size:16px}
#grabando .hint-g{color:var(--text-2);font-size:13px;margin-left:auto}
.send.rec{background:var(--danger);transform:scale(1.15)}

/* ── Visor de foto ──────────────────────────────────────────────────── */
#lupa{position:fixed;inset:0;z-index:60;display:none;
  background:rgba(0,0,0,.94);align-items:center;justify-content:center}
#lupa.on{display:flex}
#lupa img{max-width:100%;max-height:100%;object-fit:contain}
#lupa-x{position:absolute;top:calc(8px + env(safe-area-inset-top));left:8px;
  width:48px;height:48px;border-radius:50%;color:#fff;font-size:32px;line-height:1;
  display:grid;place-items:center}
#lupa-x:active{background:rgba(255,255,255,.16)}

/* ── Botones del compositor ─────────────────────────────────────────── */
/* El clip iba casi negro y competia con el texto; el boton de enviar flotaba
   suelto. Se rebaja el clip y se alinea el circulo con la caja. */
.clip{color:#8696A0}
.send{width:48px;height:48px;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.send:active{transform:scale(.92)}
.composer{align-items:center;gap:8px}

/* ── Responder ──────────────────────────────────────────────────────── */
/* Barra de cita sobre el compositor, como al deslizar un mensaje en WhatsApp. */
#cita{display:none;align-items:stretch;gap:8px;padding:8px 10px 0;
  background:var(--surface-2)}
#cita.on{display:flex}
#cita .cita-cuerpo{flex:1;min-width:0;background:rgba(255,255,255,.85);
  border-left:4px solid var(--brand);border-radius:8px;padding:6px 10px}
#cita b{display:block;color:var(--brand-700);font-size:13px;font-weight:600}
#cita span{display:block;color:var(--text-2);font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cita-x{width:36px;color:var(--text-2);font-size:26px;line-height:1;flex:0 0 auto}

/* Cita dentro de la burbuja */
.q{display:block;background:rgba(0,0,0,.055);border-left:4px solid var(--brand);
  border-radius:6px;padding:5px 8px;margin:0 0 4px;cursor:pointer}
.b.in .q{border-left-color:#53BDEB}
.q b{display:block;color:var(--brand-700);font-size:13px;font-weight:600}
.b.in .q b{color:#0288A8}
.q span{display:block;color:var(--text-2);font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Al deslizar el mensaje aparece la flecha de responder. */
.b{transition:transform .12s ease-out}
.b.arrastre{transition:none}
.b .sw{position:absolute;left:-34px;top:50%;margin-top:-11px;opacity:0;
  color:var(--text-2);transition:opacity .1s}
.b.marcado .sw{opacity:1}
/* Resalte del mensaje al que se salta desde una cita. */
@keyframes destello{0%,100%{background-color:transparent}
  30%{background-color:rgba(7,193,96,.22)}}
.b.destello{animation:destello 1.1s}