/* ============ LA CHARLA · Pablo Yukich ============ */
:root{
  --bg:#F5F3EE;
  --ink:#15161A;
  --ink-txt:#F5F3EE;
  --blue:#2F5BFF;
  --blue-txt:#ffffff;
  --linea:rgba(21,22,26,.10);
  --muted:rgba(21,22,26,.68);
  --card:#ffffff;
  --barra-h:78px;
  --topbar-h:64px;
  font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (max-width:600px){ :root{ --barra-h:70px; --topbar-h:58px; } }

html,body{ background:var(--bg); color:var(--ink); }
body{
  min-height:100svh;
  padding-top:var(--topbar-h);
  padding-bottom:calc(var(--dock-h, 80px) + 40svh);
  font-size:16px;
  line-height:1.45;
}

/* ---------- topbar ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(14px,4vw,32px);
  background:rgba(245,243,238,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
}
.topbar-quien{ display:flex; align-items:center; gap:10px; min-width:0; }
.topbar-avatar-wrap{ position:relative; flex:0 0 auto; display:block; width:40px; height:40px; }
.topbar-avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; display:block; background:var(--ink); }
.topbar-datos{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.topbar-datos b{ font-size:14.5px; font-weight:700; letter-spacing:-0.01em; }
.topbar-datos em{ font-style:normal; font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:5px; font-weight:600; }
.dot-online{ width:7px; height:7px; border-radius:50%; background:#2fb35a; display:inline-block; box-shadow:0 0 0 3px rgba(47,179,90,.18); }
.topbar-acciones{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.btn-fantasma{
  font-size:12.5px; font-weight:700; padding:8px 15px; border-radius:100px;
  border:1.4px solid var(--ink); color:var(--ink); background:transparent;
  transition:background .18s,color .18s;
}
.btn-fantasma:hover{ background:var(--ink); color:var(--ink-txt); }
.btn-idioma{
  font-size:12px; font-weight:800; letter-spacing:.03em; width:34px; height:34px; border-radius:50%;
  border:1.4px solid var(--linea); background:var(--card);
}
.btn-icono{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  border:1.4px solid var(--linea); background:var(--card); color:var(--ink);
}
.btn-icono .cruz{ display:none; }
.btn-icono.apagado .ondas{ display:none; }
.btn-icono.apagado .cruz{ display:block; }
.btn-icono.apagado{ color:var(--muted); }
.btn-icono:hover{ background:var(--ink); color:var(--ink-txt); }
@media (max-width:480px){ .btn-fantasma{ padding:7px 12px; font-size:12px; } }

/* ---------- hilo ---------- */
.hilo{
  max-width:740px; margin:0 auto;
  padding:22px clamp(14px,4.2vw,26px) 10px;
}
.divisor-fecha{
  display:flex; justify-content:center; margin:4px 0 22px;
}
.divisor-fecha span{
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); background:rgba(21,22,26,.05); padding:6px 14px; border-radius:100px;
}

.turn{ scroll-margin-top:calc(var(--topbar-h) + 26px); padding-bottom:8px; }
.turn:target{ }

/* mensaje del visitante */
.msg.visitante{ display:flex; justify-content:flex-end; margin:18px 0 12px; }
.msg.visitante .bubble{
  background:var(--blue); color:var(--blue-txt); font-weight:600; font-size:15.5px;
  padding:12px 19px; border-radius:22px 22px 6px 22px; max-width:80%;
  box-shadow:0 3px 10px rgba(47,91,255,.18);
}

/* grupo de mensajes de Pablo */
.grupo-pablo{ display:flex; align-items:flex-start; gap:10px; margin-bottom:6px; }
.grupo-pablo .avatar{ position:sticky; top:calc(var(--topbar-h) + 12px); }
.avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex:0 0 auto; background:var(--ink); }
.burbujas{ display:flex; flex-direction:column; gap:7px; max-width:82%; min-width:0; }

.typing-bubble{
  background:var(--ink); border-radius:20px 20px 20px 6px; padding:15px 18px; width:fit-content;
}
.typing{ display:flex; gap:4px; }
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--ink-txt); opacity:.35; animation:parpadeo 1.1s infinite; }
.typing i:nth-child(2){ animation-delay:.18s; }
.typing i:nth-child(3){ animation-delay:.36s; }
@keyframes parpadeo{ 0%,75%,100%{ opacity:.28; transform:translateY(0); } 35%{ opacity:1; transform:translateY(-2px); } }

.bloque{ display:none; }
.bloque.visto{ display:block; animation:aparecer .4s ease both; }
.bloque.chips.visto{ display:flex; }
.bubble.bloque{ width:fit-content; max-width:100%; }
.adjunto{ margin-top:4px; }
@keyframes aparecer{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.bubble{
  background:var(--ink); color:var(--ink-txt); font-size:15.5px;
  padding:12px 17px; border-radius:20px 20px 20px 6px; line-height:1.48;
}
.bubble b{ font-weight:700; }
.bubble.nota{ background:transparent; color:var(--muted); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:2px 2px 0; }

.caso-titulo{
  font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); margin:8px 0 -1px 2px;
}
.caso-titulo:first-child{ margin-top:2px; }
.bubble .de{ opacity:.6; font-weight:500; }
.caso-cliente{ opacity:.75; font-weight:600; text-transform:none; letter-spacing:0; }

/* piezas adjuntas, grandes, como en un chat */
.piezas{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; margin-top:2px; }
.pieza-box{
  background:var(--card); border-radius:18px; overflow:hidden; cursor:pointer;
  box-shadow:0 2px 10px rgba(21,22,26,.08); border:1px solid var(--linea);
  transition:transform .18s ease, box-shadow .18s ease;
  max-width:100%;
}
.pieza-box:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(21,22,26,.14); }
.pieza-box:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.pieza-media{ display:block; background:#eae7de; }
.pieza-media img, .pieza-media video{ width:100%; height:100%; }
.pieza-box figcaption{
  padding:9px 13px 11px; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted);
}

/* sobre mí */
.retrato-card{
  width:min(300px,68vw); border-radius:22px; overflow:hidden; margin:2px 0;
  box-shadow:0 2px 10px rgba(21,22,26,.1); border:1px solid var(--linea);
}
.retrato-card img{ display:block; width:100%; height:auto; }
.chips{ flex-wrap:wrap; gap:8px; margin-top:2px; }
.chip{
  font-size:12.5px; font-weight:700; padding:8px 14px; border-radius:100px;
  background:var(--card); color:var(--ink); border:1.4px solid var(--linea);
  box-shadow:0 1px 3px rgba(21,22,26,.06);
}

/* contacto */
.cta-contacto{
  margin-top:2px; font-size:14.5px; font-weight:800;
  padding:13px 24px; border-radius:100px; background:var(--blue); color:#fff;
  box-shadow:0 6px 16px rgba(47,91,255,.32); transition:transform .15s ease;
}
.cta-contacto:hover{ transform:translateY(-2px); }
.contacto-mini{ font-size:13px; color:var(--muted); margin-top:2px; }

.cierre{ text-align:center; font-size:13px; font-weight:600; color:var(--muted); margin:26px 0 6px; }

/* ---------- botonera: nunca más de tres opciones ---------- */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:9px;
  padding:14px clamp(12px,4vw,26px) calc(16px + env(safe-area-inset-bottom));
  background:rgba(245,243,238,.94); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--linea);
  transition:opacity .25s ease, transform .3s ease;
}
.dock.oculto{ opacity:0; transform:translateY(10px); pointer-events:none; }
.opcion{
  font-size:14.5px; font-weight:700; padding:12px 20px; border-radius:100px;
  border:1.5px solid var(--blue); color:var(--blue); background:var(--card);
  transition:background .18s,color .18s, transform .15s;
  animation:aparecer .4s ease both;
}
.opcion:nth-child(2){ animation-delay:.07s; }
.opcion:nth-child(3){ animation-delay:.14s; }
.opcion:hover{ background:var(--blue); color:#fff; transform:translateY(-2px); }
.opcion:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.opcion.fuerte{ background:var(--blue); color:#fff; }

/* ---------- responsive ---------- */
@media (max-width:600px){
  .burbujas, .msg.visitante .bubble{ max-width:88%; }
  .bubble{ font-size:14.8px; }
}

@media (prefers-reduced-motion: reduce){
  .typing i{ animation:none; opacity:.6; }
  .bloque.visto, .opcion{ animation:none; }
  .pieza-box{ transition:none; }
  .turn.flash{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* título para lectores de pantalla y buscadores */
.solo-lectores{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- ajustes de la auditoría (2/10) ---------- */
/* escritorio: la columna se ensancha para que las piezas se vean grandes; el texto sigue con ancho de lectura */
@media (min-width:700px){
  .hilo{ max-width:min(1340px, 94vw); }
  .burbujas{ max-width:calc(100% - 46px); }
  .bubble.bloque{ max-width:640px; }
  .msg.visitante .bubble{ max-width:520px; }
  .chips{ max-width:640px; }
  .pieza-box figcaption{ font-size:12px; }
}
/* celular: botonera más compacta */
@media (max-width:699px){
  .dock{ gap:7px; padding:10px 10px calc(11px + env(safe-area-inset-bottom)); }
  .opcion{ font-size:13.5px; padding:10px 15px; }
}
@media (max-width:699px) and (max-height:700px){
  .opcion{ font-size:13px; padding:8px 13px; }
  .dock{ gap:6px; padding-top:8px; }
}