/* ============================================================================
   TORITO CHAT · chatbot de voz flotante con candado legal + Retell
   citas.crececontoro.com · Marca Toro Taxes.
   ----------------------------------------------------------------------------
   - Reutiliza las CAPAS y ANIMACIONES del avatar (.torito-stage, .t-layer,
     .t-ojos, is-talking, is-blinking, keyframes) definidas en torito-avatar.css.
   - Todo lo NUEVO usa el prefijo .tchat- para no chocar con el formulario (#app).
   - No modifica el logo ni los colores de marca.
   ========================================================================== */

.tchat-root{
  /* Colores: hereda del sitio si existen; respaldo de marca Toro. */
  --tc-toro:#FF0009;
  --tc-toro-dark:#BB0007;
  --tc-toro-press:#750004;
  --tc-ink:#14161B;
  --tc-ink-soft:#5A6275;
  --tc-bg:#FFFFFF;
  --tc-soft:#F4F5F7;
  --tc-line:#E7E9EE;
  --tc-ok:#1B9E55;
  font-family:'Mont', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color:var(--tc-ink);
}

/* ---------- Backdrop (scrim) ---------- */
.tchat-backdrop{
  position:fixed; inset:0; z-index:9998;
  background:rgba(12,13,16,.38);
  opacity:0; visibility:hidden;
  transition:opacity .22s ease, visibility .22s ease;
  -webkit-backdrop-filter:blur(1px); backdrop-filter:blur(1px);
}
.tchat-root[data-open="true"] .tchat-backdrop{ opacity:1; visibility:visible; }

/* ============================================================================
   FAB (botón flotante)
   ========================================================================== */
.tchat-fab{
  position:fixed; z-index:9999;
  right:max(18px, env(safe-area-inset-right));
  bottom:max(18px, env(safe-area-inset-bottom));
  width:66px; height:66px; border-radius:50%;
  border:3px solid #fff; padding:0; margin:0;
  background:#fff center/cover no-repeat;
  background-image:var(--tc-face, none);
  cursor:pointer;
  box-shadow:0 10px 26px rgba(20,22,27,.28), 0 2px 6px rgba(20,22,27,.16);
  transition:transform .18s cubic-bezier(.2,.9,.2,1.2), box-shadow .18s ease;
  display:grid; place-items:center;
}
.tchat-fab:hover{ transform:translateY(-2px) scale(1.04); }
.tchat-fab:active{ transform:scale(.96); }
.tchat-fab:focus-visible{ outline:3px solid var(--tc-toro); outline-offset:3px; }
.tchat-root[data-open="true"] .tchat-fab{ transform:scale(.6); opacity:0; pointer-events:none; }

/* Anillo de atención (pulso) sobre el FAB */
.tchat-fab::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:3px solid var(--tc-toro);
  animation:tc-pulse 2.6s ease-out infinite;
  pointer-events:none;
}
/* Punto/insignia "hablemos" */
.tchat-fab .tchat-fab-badge{
  position:absolute; top:-3px; right:-3px;
  min-width:20px; height:20px; padding:0 5px; border-radius:999px;
  background:var(--tc-toro); color:#fff; font-size:12px; font-weight:800;
  display:grid; place-items:center; box-shadow:0 3px 8px rgba(0,0,0,.25);
  border:2px solid #fff;
}

/* ---------- Teaser (burbuja invitación de una sola vez) ---------- */
.tchat-teaser{
  position:fixed; z-index:9999;
  right:max(96px, calc(env(safe-area-inset-right) + 96px));
  bottom:max(30px, calc(env(safe-area-inset-bottom) + 30px));
  max-width:min(250px, 64vw);
  background:#fff; color:var(--tc-ink);
  border:1px solid var(--tc-line); border-radius:16px 16px 4px 16px;
  box-shadow:0 12px 30px rgba(20,22,27,.18);
  padding:11px 34px 11px 14px;
  font-size:14px; line-height:1.4;
  opacity:0; transform:translateY(8px) scale(.96); transform-origin:bottom right;
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.9,.2,1.1);
  pointer-events:none;
}
.tchat-root[data-teaser="on"] .tchat-teaser{ opacity:1; transform:none; pointer-events:auto; }
.tchat-root[data-open="true"] .tchat-teaser{ opacity:0; visibility:hidden; }
.tchat-teaser b{ color:var(--tc-toro-dark); }
.tchat-teaser-x{
  position:absolute; top:4px; right:4px; width:26px; height:26px;  /* ≥24px (WCAG 2.5.8) */
  border:0; background:none; color:var(--tc-ink-soft); font-size:16px;
  cursor:pointer; border-radius:50%; line-height:1;
}
.tchat-teaser-x:hover{ color:var(--tc-toro-dark); }

/* ============================================================================
   Panel
   ========================================================================== */
.tchat-panel{
  position:fixed; z-index:10000;
  right:max(18px, env(safe-area-inset-right));
  bottom:max(18px, env(safe-area-inset-bottom));
  width:374px; max-width:calc(100vw - 28px);
  max-height:min(86vh, 660px);
  background:var(--tc-bg);
  border:1px solid var(--tc-line);
  border-radius:22px;
  box-shadow:0 26px 60px rgba(20,22,27,.30), 0 6px 18px rgba(20,22,27,.14);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; visibility:hidden;
  transform:translateY(16px) scale(.97); transform-origin:bottom right;
  /* visibility conmuta DISCRETA (0s), diferida al cerrar para conservar el fundido.
     Al abrir es visible de inmediato → el panel es enfocable sin esperar la transición. */
  transition:opacity .24s ease, transform .26s cubic-bezier(.2,.9,.2,1.08), visibility 0s linear .24s;
}
.tchat-root[data-open="true"] .tchat-panel{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .24s ease, transform .26s cubic-bezier(.2,.9,.2,1.08), visibility 0s linear 0s;
}

/* ---------- Header ---------- */
.tchat-head{
  display:flex; align-items:center; gap:11px;
  padding:13px 14px;
  background:#0E0F12;
  color:#fff;
  border-bottom:3px solid var(--tc-toro);
  flex:none;
}
.tchat-head-face{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:#fff center/cover no-repeat; background-image:var(--tc-face, none);
  border:2px solid var(--tc-toro);
}
.tchat-head-titles{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.tchat-head-titles .tc-name{ font-weight:800; font-size:15.5px; }
.tchat-head-titles .tc-name .k{ color:var(--tc-toro); }
.tchat-head-titles .tc-sub{ font-size:11.5px; color:#B7BCC6; font-weight:600; }
.tchat-x{
  margin-left:auto; width:34px; height:34px; flex:none;
  border:0; border-radius:50%; background:rgba(255,255,255,.10); color:#fff;
  font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center;
  transition:background .15s ease, color .15s ease;  /* nunca 'all': transicionar visibility rompe el foco */
}
.tchat-x:hover{ background:var(--tc-toro); }
.tchat-x:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ---------- Cuerpo (scroll) ---------- */
.tchat-body{
  padding:16px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:14px;
}

/* ---------- Escenario del avatar ---------- */
.tchat-stagewrap{
  position:relative; width:138px; aspect-ratio:925/960;
  margin:2px auto 0; flex:none;
}
/* halo "escuchando" detrás del avatar */
.tchat-stagewrap::before{
  content:""; position:absolute; inset:8% 12%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,0,9,.18), rgba(255,0,9,0));
  opacity:0; transform:scale(.8); transition:opacity .3s ease, transform .3s ease;
}
.tchat-panel[data-status="listening"] .tchat-stagewrap::before,
.tchat-panel[data-status="speaking"]  .tchat-stagewrap::before{ opacity:1; transform:scale(1); }
.tchat-panel[data-status="speaking"]  .tchat-stagewrap::before{ animation:tc-halo 1.1s ease-in-out infinite; }

/* ---------- Línea de estado ---------- */
.tchat-status{
  align-self:center; display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; color:var(--tc-ink-soft);
  background:var(--tc-soft); border-radius:999px; padding:6px 14px;
  min-height:30px;
}
.tchat-status .tc-dot{ width:9px; height:9px; border-radius:50%; background:var(--tc-ink-soft); flex:none; }
.tchat-panel[data-status="connecting"] .tchat-status .tc-dot{ background:#E0A100; animation:tc-blink-dot 1s steps(2) infinite; }
.tchat-panel[data-status="listening"]  .tchat-status{ color:#0F7A3D; background:rgba(27,158,85,.14); } /* verde más oscuro → AA */
.tchat-panel[data-status="listening"]  .tchat-status .tc-dot{ background:var(--tc-ok); animation:tc-breathe 1.6s ease-in-out infinite; }
.tchat-panel[data-status="speaking"]   .tchat-status{ color:var(--tc-toro-dark); background:#FFE5E6; }
.tchat-panel[data-status="speaking"]   .tchat-status .tc-dot{ background:var(--tc-toro); }
.tchat-panel[data-status="error"]      .tchat-status{ color:var(--tc-toro-dark); background:#FFE5E6; }

/* ============================================================================
   Pantallas (consent / live / handoff / done / error)
   ========================================================================== */
.tchat-screen{ display:none; flex-direction:column; gap:14px; }
.tchat-panel[data-screen="consent"] .tchat-screen--consent{ display:flex; }
.tchat-panel[data-screen="live"]    .tchat-screen--live{ display:flex; }
.tchat-panel[data-screen="handoff"] .tchat-screen--handoff{ display:flex; }
.tchat-panel[data-screen="done"]    .tchat-screen--done{ display:flex; }
.tchat-panel[data-screen="error"]   .tchat-screen--error{ display:flex; }

.tchat-h{ font-size:17px; font-weight:800; margin:0; text-align:center; color:var(--tc-ink); }
.tchat-p{ font-size:13.5px; line-height:1.55; color:var(--tc-ink-soft); margin:0; }

/* Texto legal del candado */
.tchat-legal{
  font-size:12.8px; line-height:1.55; color:var(--tc-ink-soft);
  background:var(--tc-soft); border-radius:14px; padding:13px 14px;
  border:1px solid var(--tc-line);
}
.tchat-legal a{ color:var(--tc-toro-dark); font-weight:700; text-underline-offset:2px; }

/* Casilla de consentimiento */
.tchat-check{
  display:flex; gap:11px; align-items:flex-start;
  border:1.6px solid var(--tc-line); border-radius:14px; padding:13px 14px;
  cursor:pointer; font-size:13px; line-height:1.5; color:var(--tc-ink);
  transition:border-color .15s ease, background .15s ease;
}
.tchat-check.is-sel{ border-color:var(--tc-toro); background:#FFE5E6; }
.tchat-check a{ color:var(--tc-toro-dark); font-weight:700; text-underline-offset:2px; }
.tchat-check input{ width:21px; height:21px; flex:none; margin-top:1px; accent-color:var(--tc-toro); cursor:pointer; }
.tchat-mic-note{
  display:flex; align-items:center; gap:8px;
  font-size:12.3px; color:var(--tc-ink-soft); justify-content:center; text-align:center;
}

/* ---------- Botones ---------- */
.tchat-actions{ display:flex; flex-direction:column; gap:9px; margin-top:2px; }
.tchat-btn{
  appearance:none; border:1.6px solid transparent; border-radius:13px;
  padding:13px 16px; font:inherit; font-weight:800; font-size:14.5px;
  cursor:pointer; text-align:center; line-height:1.2; width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  transition:transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.tchat-btn:active{ transform:translateY(1px); }
.tchat-btn:focus-visible{ outline:3px solid var(--tc-toro); outline-offset:2px; }
.tchat-btn[disabled]{ opacity:.5; cursor:not-allowed; }
/* Fondo en rojo OSCURO de marca (#BB0007 = 6.74:1 con texto blanco → cumple AA);
   el rojo brillante #FF0009 (4.0:1) queda solo como acento/borde, no como fondo de texto. */
.tchat-btn--primary{ background:var(--tc-toro-dark); color:#fff; }
.tchat-btn--primary:hover:not([disabled]){ background:var(--tc-toro-press); }
.tchat-btn--danger{ background:#fff; color:var(--tc-toro-dark); border-color:var(--tc-toro); }
.tchat-btn--danger:hover{ background:var(--tc-toro-dark); color:#fff; }
.tchat-btn--ghost{ background:transparent; color:var(--tc-ink-soft); border-color:transparent; font-weight:700; font-size:13.5px; padding:8px; }
.tchat-btn--ghost:hover{ color:var(--tc-toro-dark); }
.tchat-btn--soft{ background:var(--tc-soft); color:var(--tc-ink); border-color:var(--tc-line); }
.tchat-btn--soft:hover{ border-color:var(--tc-toro); color:var(--tc-toro-dark); }

/* ---------- Mini-formulario (handoff humano) ---------- */
.tchat-field{ display:flex; flex-direction:column; gap:5px; }
.tchat-field label{ font-size:12.5px; font-weight:700; color:var(--tc-ink); }
.tchat-field input,
.tchat-field select{
  width:100%; border:1.6px solid var(--tc-line); border-radius:12px;
  padding:12px 13px; font:inherit; font-size:15px; color:var(--tc-ink); background:#fff;
}
.tchat-field select{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%235A6275' d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:34px;
}
.tchat-field input:focus,
.tchat-field select:focus{ outline:none; border-color:var(--tc-toro); box-shadow:0 0 0 3px rgba(255,0,9,.12); }
.tchat-field.is-bad input{ border-color:var(--tc-toro); }
.tchat-field-err{ font-size:11.5px; color:var(--tc-toro-dark); font-weight:700; display:none; }
.tchat-field.is-bad .tchat-field-err{ display:block; }
.tchat-quick{ display:flex; gap:9px; }
.tchat-quick a{ flex:1; text-decoration:none; }

/* ---------- Done / éxito ---------- */
.tchat-done-ico{
  width:56px; height:56px; border-radius:50%; margin:4px auto 0;
  background:rgba(27,158,85,.12); color:var(--tc-ok);
  display:grid; place-items:center; font-size:30px; font-weight:900;
}

/* ---------- Footer mini-aviso ---------- */
.tchat-foot{
  font-size:11px; color:var(--tc-ink-soft); text-align:center;
  padding:0 4px 2px; line-height:1.4;
}

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width:560px){
  .tchat-panel{
    right:10px; left:10px; bottom:10px;
    width:auto; max-width:none; max-height:90vh; border-radius:20px;
  }
  .tchat-fab{ width:62px; height:62px; }
  .tchat-stagewrap{ width:120px; }
  .tchat-teaser{ right:84px; bottom:24px; }
}

/* Región solo para lectores de pantalla (anuncios de estado fiables) */
.tchat-sr{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ============================================================================
   Keyframes propios del chat
   ========================================================================== */
@keyframes tc-pulse{
  0%   { box-shadow:0 0 0 0 rgba(255,0,9,.45); }
  70%  { box-shadow:0 0 0 14px rgba(255,0,9,0); }
  100% { box-shadow:0 0 0 0 rgba(255,0,9,0); }
}
@keyframes tc-halo{ 0%,100%{ opacity:.65; } 50%{ opacity:1; } }
@keyframes tc-breathe{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.45); opacity:.6; } }
@keyframes tc-blink-dot{ 0%{ opacity:1; } 50%{ opacity:.25; } 100%{ opacity:1; } }

/* ============================================================================
   Accesibilidad: respeta reduce-motion (sin pulsos/halos intensos)
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .tchat-fab::after{ animation:none; }
  .tchat-stagewrap::before{ animation:none; }
  .tchat-status .tc-dot{ animation:none !important; }
  .tchat-panel,.tchat-teaser,.tchat-fab{ transition:opacity .2s ease; }
}