/* ═══════════════════════════════════════════════════════════════
   CONVERSACIÓN DE ACOMPAÑAMIENTO

   Móvil: la pantalla entera es la conversación. Nada decorativo.
   Escritorio: dos áreas de una misma publicación — a la izquierda
   el pliego editorial, a la derecha el hilo sobre papel claro.

   Nunca hay laterales negros ni una caja flotando en el vacío:
   la rejilla ocupa el ancho y las dos áreas tienen contenido.
   ═══════════════════════════════════════════════════════════════ */

/* `hidden` por encima de cualquier regla nuestra con `display`.
   Sin esto, `.escribiendo` (flex) y `.ayuda` (flex) se dibujan
   aunque lleven el atributo puesto. */
[hidden]{ display:none !important }


.chat-body{
  background:var(--cream);
  color:var(--black);
  min-height:100dvh;
  overflow:hidden;
}

.chat{
  /* --alto-visible lo actualiza chat.js con visualViewport: es lo
     único que refleja bien la pantalla con el teclado abierto.
     100dvh es el respaldo cuando la API no existe. */
  height:var(--alto-visible, 100dvh);
  display:grid;
  grid-template-columns:1fr;          /* móvil: solo la conversación */
}

/* ═══════════════════════════════════════════════════════════════
   ZONA EDITORIAL — oculta en móvil
   ═══════════════════════════════════════════════════════════════ */

.marco{ display:none }

@media (min-width:960px){
  .chat{
    grid-template-columns:minmax(300px, .68fr) minmax(0, 1.32fr);
    max-width:1440px; margin-inline:auto;
  }

  .marco{
    position:relative;
    display:flex; flex-direction:column; justify-content:space-between;
    padding:clamp(32px, 3.4vw, 56px) clamp(28px, 2.8vw, 48px);
    background:
      radial-gradient(ellipse 110% 80% at 8% 6%, rgba(255,136,176,.26) 0%, transparent 62%),
      radial-gradient(ellipse 90% 70% at 96% 96%, rgba(255,214,9,.12) 0%, transparent 60%),
      var(--cream);
    border-right:1px solid var(--rule-soft);
    overflow:hidden;
  }

  /* El isotipo enorme, al fondo. */
  .marco__agua{
    position:absolute; z-index:0; pointer-events:none;
    left:-16%; bottom:-14%;
    width:min(46vw, 440px); aspect-ratio:1;
    opacity:.05;
  }

  .marco__inner{ position:relative; z-index:2; margin-block:auto }

  .marco__titulo{
    font-size:clamp(1.75rem, 2.2vw, 2.5rem);
    line-height:1.08; letter-spacing:-.03em;
    margin-top:var(--s4); max-width:14ch;
  }
  .marco__titulo em{ font-style:normal; color:var(--red) }

  .marco__lead{
    margin-top:clamp(20px, 2.4vw, 32px);
    max-width:32ch; font-size:.95rem;
    line-height:1.7; color:var(--muted); text-wrap:pretty;
  }
  .marco__nota{
    margin-top:var(--s5);
    padding-left:var(--s4);
    border-left:2px solid var(--pink);
  }

  .marco__pie{
    position:relative; z-index:2;
    font-size:.78rem; line-height:1.7; color:var(--subtle); max-width:36ch;
  }
  .marco__pie a{ color:inherit; border-bottom:1px solid var(--rule) }
  .marco__pie a:hover{ color:var(--black) }
}

/* ═══════════════════════════════════════════════════════════════
   PANEL DE CONVERSACIÓN
   ═══════════════════════════════════════════════════════════════ */

.panel{
  display:flex; flex-direction:column;
  min-height:0;                       /* deja encoger al hilo, no a la barra */
  height:100%;
  background:var(--cream);
}
@media (min-width:960px){
  .panel{ background:var(--paper) }
}

/* ── Cabecera compacta ─────────────────────────────────────── */
.panel__cab{
  flex:0 0 auto;
  display:flex; align-items:center; gap:var(--s4);
  padding:calc(var(--s3) + env(safe-area-inset-top)) var(--s5) var(--s3);
  border-bottom:1px solid var(--rule-soft);
}
.panel__sello{
  flex:0 0 auto;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--pink);
  text-decoration:none;
}
.panel__sello img{ width:18px; height:18px; opacity:.85 }
.panel__quien{ flex:1; min-width:0 }
.panel__nombre{
  font-family:'Libre', Georgia, serif; font-size:.94rem; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.panel__estado{
  font-size:.72rem; color:var(--subtle);
  display:flex; align-items:center; gap:.4rem;
}
.panel__punto{
  width:6px; height:6px; border-radius:50%;
  background:var(--red); animation:latido 2.6s infinite;
}
@keyframes latido{ 0%,100%{opacity:1} 50%{opacity:.28} }
.panel__salir{
  flex:0 0 auto;
  min-height:44px; display:inline-flex; align-items:center; padding-inline:var(--s2);
  font-size:var(--etiqueta); letter-spacing:.16em; text-transform:uppercase;
  color:var(--subtle); text-decoration:none;
}
.panel__salir:hover{ color:var(--red) }

.panel__nav{ flex:0 0 auto; display:flex; align-items:center; gap:2px }
.panel__nav a{
  min-height:40px; padding:10px 11px; display:inline-flex; align-items:center;
  border-radius:99px; color:var(--subtle); text-decoration:none;
  font-size:.62rem; font-weight:bold; letter-spacing:.08em; text-transform:uppercase;
  transition:color var(--t-control), background var(--t-control);
}
.panel__nav a:hover{ color:var(--black); background:var(--rosa-pálido) }
.panel__nav a:last-child{ color:var(--cream); background:var(--red-tinta) }
.panel__nav a:last-child:hover{ background:var(--black) }

/* ── El hilo ───────────────────────────────────────────────── */
.hilo{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:clamp(20px, 3.5vw, 32px) var(--s5) var(--s4);
  display:flex; flex-direction:column; gap:var(--s3);
  scroll-behavior:smooth;
}
.hilo:focus-visible{ outline:none }
@media (min-width:960px){
  /* Ancho de lectura: en una pantalla ancha, una conversación que
     ocupa 900 px se lee mal. Se contiene y se centra. */
  .hilo{
    padding-inline:clamp(28px, 3vw, 48px);
    align-items:center;
  }
  .hilo > *{ width:100%; max-width:660px }
  .burbuja--ella{ margin-right:auto }
  .burbuja--yo{ margin-left:auto }
}

.burbuja{
  width:fit-content;
  max-width:min(46ch, 86%);
  font-size:.98rem; line-height:1.6;
  animation:entra .34s var(--ease) both;
}
@keyframes entra{ from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none} }

.burbuja--ella{
  align-self:flex-start;
  background:#fff;
  border:1px solid var(--rule-soft);
  border-radius:16px 16px 16px 4px;
  padding:var(--s4) var(--s5);
  box-shadow:0 2px 10px rgba(21,23,20,.04);
}
.burbuja--yo{
  align-self:flex-end;
  background:var(--black); color:var(--cream);
  border-radius:16px 16px 4px 16px;
  padding:var(--s4) var(--s5);
}
.burbuja p + p{ margin-top:.72em }
.burbuja strong{ font-weight:600 }

/* Aviso del sistema: ni de ella ni nuestro. Se lee distinto. */
.burbuja--aviso{
  align-self:center; text-align:center;
  width:auto; max-width:38ch;
  font-size:var(--pequeno); line-height:1.65; color:var(--muted);
  border-top:1px solid var(--rule-soft);
  padding-top:var(--s4); margin-inline:auto;
}

.escribiendo{
  align-self:flex-start;
  display:flex; gap:5px;
  background:#fff; border:1px solid var(--rule-soft);
  border-radius:16px 16px 16px 4px;
  padding:var(--s4) var(--s5);
}
.escribiendo i{
  width:6px; height:6px; border-radius:50%;
  background:var(--pink); animation:rebota 1.3s infinite;
}
.escribiendo i:nth-child(2){ animation-delay:.16s }
.escribiendo i:nth-child(3){ animation-delay:.32s }
@keyframes rebota{ 0%,60%,100%{transform:none;opacity:.35} 30%{transform:translateY(-5px);opacity:1} }

/* ═══════════════════════════════════════════════════════════════
   FICHA DE COMUNIDAD — una invitación, no un producto
   ═══════════════════════════════════════════════════════════════ */

.ficha{
  align-self:stretch;
  max-width:min(46ch, 100%);
  position:relative;
  background:
    radial-gradient(ellipse 120% 80% at 96% 2%, rgba(255,136,176,.24) 0%, transparent 60%),
    #fff;
  border:1px solid rgba(255,136,176,.5);
  border-radius:4px 14px 14px 4px;
  padding:var(--s6) var(--s5) var(--s5);
  animation:entra .4s var(--ease) both;
  box-shadow:var(--sombra);
}
/* Filo rojo a la izquierda: la señal de que esto es lo importante. */
.ficha::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--red); border-radius:4px 0 0 4px;
}
.ficha__etiqueta{
  font-size:var(--etiqueta); letter-spacing:.28em; text-transform:uppercase;
  color:var(--red-tinta); font-weight:bold; margin-bottom:var(--s3);
}
.ficha__nombre{
  font-family:'Libre', Georgia, serif; font-weight:700;
  font-size:1.3rem; line-height:1.2; letter-spacing:-.02em;
  margin-bottom:var(--s5);
}
.ficha__datos{ display:grid; gap:var(--s3); margin-bottom:var(--s6) }
.ficha__dato{
  font-size:var(--pequeno); line-height:1.6; color:var(--muted);
  display:grid; grid-template-columns:5.2rem 1fr; gap:var(--s3);
  align-items:baseline;
  padding-bottom:var(--s3);
  border-bottom:1px solid var(--rule-soft);
}
.ficha__dato:last-child{ border-bottom:0; padding-bottom:0 }
.ficha__etiqueta-dato{
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--subtle); font-weight:600;
}
.ficha__elegir{
  display:flex; align-items:center; justify-content:center; gap:var(--s2);
  width:100%; min-height:54px; padding:var(--s4) var(--s5);
  border:1px solid var(--red-tinta); border-radius:var(--radio);
  background:transparent; color:var(--red-tinta);
  font-family:inherit;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:bold;
  cursor:pointer; text-align:center;
  transition:background var(--t-control) var(--ease),
             color var(--t-control) var(--ease),
             transform var(--t-control) var(--ease);
}
.ficha__elegir:hover{ background:var(--red-tinta); color:var(--cream); transform:translateY(-1px) }
.ficha__elegir:focus-visible{ outline:3px solid var(--pink); outline-offset:3px }
.ficha__elegir[disabled]{ opacity:.4; cursor:default; transform:none }

/* ═══════════════════════════════════════════════════════════════
   EL PASO FINAL — la despedida y el contacto
   ═══════════════════════════════════════════════════════════════ */

.enlace{
  align-self:stretch;
  max-width:min(46ch, 100%);
  position:relative;
  padding:var(--s6) var(--s5);
  background:
    radial-gradient(ellipse 90% 70% at 12% 96%, rgba(193,255,26,.14) 0%, transparent 60%),
    linear-gradient(168deg, var(--green-dark) 0%, var(--verde-hondo) 100%);
  color:var(--cream);
  border-radius:4px 14px 14px 4px;
  box-shadow:var(--sombra);
  animation:entra .4s var(--ease) both;
}
.enlace__titulo{
  font-family:'Libre', Georgia, serif; font-weight:700;
  font-size:1.35rem; line-height:1.2; letter-spacing:-.02em;
  margin-bottom:var(--s3);
}
.enlace__texto{
  font-size:var(--pequeno); line-height:1.75;
  color:rgba(244,243,234,.82);
  margin-bottom:var(--s5);
}
.enlace__wa{
  display:flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:56px; padding:var(--s4) var(--s5);
  border-radius:var(--radio);
  background:var(--cream); color:var(--black);
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:bold;
  text-decoration:none; text-align:center;
  transition:background var(--t-control) var(--ease), transform var(--t-control) var(--ease);
}
.enlace__wa:hover{ background:#fff; transform:translateY(-2px) }
.enlace__wa:focus-visible{ outline:3px solid var(--pink); outline-offset:3px }

@media (max-width:400px){
  .ficha__dato{ grid-template-columns:1fr; gap:2px }
  .ficha__elegir,.enlace__wa{ letter-spacing:.08em; font-size:.74rem }
}

/* ═══ Derivación a una persona ═══════════════════════════════ */
.ayuda{ flex:0 0 auto; padding:0 var(--s5) var(--s3) }
@media (min-width:960px){ .ayuda{ padding-inline:clamp(36px, 3.6vw, 64px) } }
.ayuda__wa{
  display:flex; align-items:center; justify-content:center;
  min-height:48px; padding:var(--s3) var(--s5);
  border:1px solid var(--rule); border-radius:var(--radio);
  font-size:var(--pequeno); color:var(--black); text-decoration:none;
  transition:background var(--t-control) var(--ease);
}
.ayuda__wa:hover{ background:#fff }

/* ═══ Barra de escritura ═════════════════════════════════════ */
.barra{
  flex:0 0 auto;
  display:flex; gap:var(--s3); align-items:flex-end;
  padding:var(--s3) var(--s5) calc(var(--s3) + env(safe-area-inset-bottom));
  border-top:1px solid var(--rule-soft);
  background:var(--cream);
}
@media (min-width:960px){
  .barra{ padding-inline:clamp(36px, 3.6vw, 64px); background:var(--paper) }
}
.barra textarea{
  flex:1;
  font:inherit;
  font-size:16px;                     /* 16px evita el zoom automático en iOS */
  line-height:1.5; color:var(--black);
  background:#fff;
  border:1px solid var(--rule-soft); border-radius:22px;
  padding:12px var(--s5);
  resize:none; max-height:132px;
  -webkit-appearance:none;
  transition:border-color var(--t-control) var(--ease);
}
.barra textarea::placeholder{ color:var(--subtle) }
.barra textarea:focus{ outline:none; border-color:var(--pink) }
.barra textarea:focus-visible{ outline:2px solid var(--pink); outline-offset:1px }

.barra__enviar{
  flex:0 0 46px; height:46px;
  border:0; border-radius:50%;
  background:var(--red-tinta); color:var(--cream);
  font-size:1.15rem;
  display:grid; place-items:center; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--t-control) var(--ease),
             background var(--t-control) var(--ease),
             opacity var(--t-control);
}
.barra__enviar:hover{ background:var(--black) }
.barra__enviar:active{ transform:scale(.93) }
.barra__enviar[disabled]{ opacity:.4; cursor:default }

/* ═══ Móvil ══════════════════════════════════════════════════ */
@media (max-width:719px){
  .hilo{ padding:var(--s5) var(--s4) var(--s3); gap:var(--s3) }
  .barra,.panel__cab,.ayuda{ padding-inline:var(--s4) }
  .burbuja{ max-width:88%; font-size:.95rem }
  .burbuja--ella,.burbuja--yo{ padding:var(--s3) var(--s4) }
  .panel__cab{ padding-block:var(--s3) }
  .panel__sello{ width:30px; height:30px }
  .panel__sello img{ width:16px; height:16px }
  .ficha{ max-width:100%; padding:var(--s5) var(--s4) }
  .ficha__nombre{ font-size:1.15rem }
  .enlace{ max-width:100%; padding:var(--s5) var(--s4) }
  .enlace__titulo{ font-size:1.2rem }
  .panel__nav a{ padding-inline:9px; font-size:.58rem }
  .panel__nav a:first-child{ display:none }
  .panel__quien{ display:none }
}

/* Pantallas muy estrechas: 320 px */
@media (max-width:359px){
  .hilo,.barra,.panel__cab,.ayuda{ padding-inline:var(--s3) }
  .burbuja{ font-size:.92rem; max-width:92% }
  .panel__salir{ font-size:.62rem; letter-spacing:.1em }
  .panel__nav a:nth-child(2){ display:none }
}

/* Pantalla baja o apaisada, con el teclado abierto */
@media (max-height:520px){
  .panel__cab{ padding-block:var(--s2) }
  .hilo{ padding-block:var(--s3) }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .burbuja,.ficha{ opacity:1 !important; transform:none !important }
  .hilo{ scroll-behavior:auto }
  .panel__punto,.escribiendo i{ animation:none !important }
}