/* ══════════════════════════════════════════════════════════════════════
   EL CHAT DEL SITIO · la burbuja
   Usa los colores del sitio (estilos.css). Se apoya encima de la
   botonera de WhatsApp, Llamar y Urgencias, sin taparla.
   ══════════════════════════════════════════════════════════════════════ */
.pc, .pc *{box-sizing:border-box}
.pc [hidden]{display:none !important}

/* El botón es dorado a propósito: todo lo que flota en el sitio es verde
   oscuro y un botón verde se perdía (pedido de Sil, 10/9). Dorado con
   letra verde hondo: contraste 7,6 a 1. */
.pc-lanzador{position:fixed;right:18px;bottom:84px;z-index:120;display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px 13px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.4);
  background:#D4AF6A;color:var(--verde-hondo);font:500 15.5px/1.2 var(--sans);letter-spacing:.01em;cursor:pointer;
  box-shadow:0 10px 28px rgba(8,42,32,.34);transition:background .16s,transform .16s}
.pc-lanzador:hover{background:#DDBC7E;transform:translateY(-1px)}
.pc-ico{width:20px;height:20px;flex:none}
.pc-punto{display:inline-block;width:9px;height:9px;border-radius:50%;background:#1F9D5A;
  box-shadow:0 0 0 3px rgba(8,42,32,.16);flex:none}
.pc-lanzador .pc-marca{position:absolute;top:-6px;right:-4px;min-width:20px;height:20px;border-radius:10px;
  background:#B3261E;color:#fff;font:600 11.5px/20px var(--sans);text-align:center;padding:0 6px}
body.sc-flota .pc-lanzador{bottom:142px}

.pc-globo{position:fixed;right:18px;bottom:138px;z-index:120;max-width:250px;text-align:left;
  background:#fff;color:var(--tinta);border:1px solid var(--linea);border-radius:14px 14px 4px 14px;
  padding:12px 14px;font:400 14.5px/1.45 var(--sans);box-shadow:0 12px 30px rgba(8,42,32,.18);cursor:pointer}
body.sc-flota .pc-globo{bottom:196px}

/* Adentro de la botonera: centrado justo arriba de «Primera entrevista sin
   cargo», en computadora y en celular. El chat.js lo mete ahí; si una
   página no tuviera botonera, queda flotando con las reglas de arriba.
   Fuera de .pc el [hidden] no tiene la regla general y el display le gana
   (ver la trampa de hidden contra display), por eso va escrito acá. */
.pc-lanzador[hidden],.pc-globo[hidden]{display:none !important}
/* «html body» adelante a propósito: tiene que pesar más que
   body.sc-flota .pc-lanzador (la de la portada, que también está dentro
   del bloque de celular más abajo). Con sólo «body» empatan, gana la que
   está más abajo en el archivo y su bottom lo empuja 132px hacia arriba. */
html body .botonera-esq .pc-lanzador{position:relative;inset:auto;align-self:center}
html body .botonera-esq .pc-globo{position:static;inset:auto;align-self:center;text-align:center;border-radius:14px}

.pc-panel{position:fixed;right:18px;bottom:84px;z-index:130;width:384px;max-width:calc(100vw - 24px);
  height:min(640px,calc(100vh - 110px));display:flex;flex-direction:column;background:#fff;color:var(--tinta);
  border:1px solid var(--linea);border-radius:18px;overflow:hidden;box-shadow:0 18px 50px rgba(8,42,32,.28);
  font-family:var(--sans);font-weight:400}
.pc-cab{background:var(--verde);color:var(--claro);padding:10px 10px 14px 18px;display:flex;flex-direction:column;gap:9px;flex:none}
.pc-cab-arriba{display:flex;align-items:center;gap:10px}
.pc-cab-tels{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-right:8px}
.pc-cab-col{display:flex;flex-direction:column;gap:3px;min-width:0;padding:8px 11px;border-radius:10px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13)}
.pc-cab-rot{font-size:12px;line-height:1.25;opacity:.9}
.pc-cab-urg .pc-cab-rot{color:#D4AF6A;opacity:1;font-weight:600;letter-spacing:.05em}
.pc-tel{color:var(--claro);text-decoration:none;font:500 16px/1.2 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.pc-tel:hover{text-decoration:underline}
.pc-tel:focus-visible{outline:3px solid var(--bronce);outline-offset:2px;border-radius:4px}
.pc-cab b{display:block;font:400 17.5px/1.2 var(--serif)}
.pc-cab small{display:flex;align-items:center;gap:7px;font-size:12.5px;opacity:.9;margin-top:3px}
.pc-cerrar{margin-left:auto;background:transparent;border:0;color:var(--claro);font-size:26px;line-height:1;
  width:40px;height:40px;border-radius:50%;cursor:pointer}
.pc-cerrar:hover{background:rgba(255,255,255,.12)}
.pc-prueba{background:#FFF4D6;color:#5A4200;font-size:12.5px;padding:7px 16px;border-bottom:1px solid #EAD9A6;flex:none}

.pc-hilo{flex:1;overflow-y:auto;padding:14px 12px 10px;display:flex;flex-direction:column;gap:8px;background:var(--papel)}
.pc-b{max-width:86%;padding:9px 12px;border-radius:14px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.pc-bot,.pc-silvana{background:#fff;border:1px solid var(--linea);border-top-left-radius:4px;align-self:flex-start}
.pc-quien{display:block;font-size:11.5px;font-weight:600;color:var(--bronce);letter-spacing:.02em;margin-bottom:2px}
.pc-persona{background:var(--verde);color:var(--claro);border-top-right-radius:4px;align-self:flex-end}
.pc-persona.pc-pend{opacity:.62}
.pc-persona.pc-mal{background:#fff;color:#8E2A20;border:1px solid #8E2A20;cursor:pointer}
.pc-reint{display:block;font-size:12px;margin-top:3px}

.pc-ops{display:flex;flex-direction:column;gap:6px;align-self:stretch;margin:2px 0 4px}
.pc-op{display:block;width:100%;text-align:left;text-decoration:none;border:1px solid var(--verde);color:var(--verde);
  background:#fff;border-radius:11px;padding:10px 12px;font:400 14.5px/1.3 var(--sans);cursor:pointer}
.pc-op:hover{background:var(--papel-2)}
.pc-op.pc-fuerte{background:var(--verde);color:var(--claro)}
.pc-op.pc-fuerte:hover{background:var(--verde-2)}
.pc-op.pc-wa{background:#1F7A4D;border-color:#1F7A4D;color:#fff}
.pc-op.pc-wa:hover{background:#18653F}
/* Colores por función, pedido de Sil (10/9): tanto verde y blanco mareaba.
   Rojo lo urgente, azul hablar con una persona, verde WhatsApp. Letra
   blanca: contraste de más de 6 a 1 en los dos. */
.pc-op.pc-rojo{background:#B3261E;border-color:#B3261E;color:#fff}
.pc-op.pc-rojo:hover{background:#961F19}
.pc-op.pc-azul{background:#1F5FA8;border-color:#1F5FA8;color:#fff}
.pc-op.pc-azul:hover{background:#194E8A}
.pc-op small{display:block;font-size:12.5px;opacity:.86;margin-top:2px}
.pc-usadas button.pc-op:disabled{opacity:.5;cursor:default;background:#fff;color:var(--verde)}

.pc-form{align-self:stretch;background:#fff;border:1px solid var(--linea);border-radius:12px;padding:12px;
  display:flex;flex-direction:column;gap:9px}
.pc-form label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--tinta-2)}
.pc-form input,.pc-form textarea{width:100%;font:400 15.5px/1.35 var(--sans);padding:9px 10px;color:var(--tinta);
  background:#fff;border:1px solid rgba(17,26,23,.28);border-radius:8px}
.pc-form textarea{min-height:66px;resize:vertical}
.pc-form .pc-nota{font-size:12px;color:var(--tinta-2);margin:0}
.pc-form .pc-error{font-size:13px;color:#8E2A20;margin:0}

.pc-entrada{border-top:1px solid var(--linea);background:#fff;padding:9px 10px;display:flex;gap:8px;align-items:flex-end;flex:none}
.pc-entrada textarea{flex:1;min-width:0;resize:none;max-height:110px;font:400 15.5px/1.35 var(--sans);padding:9px 13px;
  color:var(--tinta);background:var(--papel);border:1px solid var(--linea);border-radius:19px}
.pc-enviar{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:0;background:var(--verde);color:var(--claro);
  cursor:pointer;display:grid;place-items:center}
.pc-enviar:hover{background:var(--verde-2)}

.pc-lanzador:focus-visible,.pc-globo:focus-visible,.pc-cerrar:focus-visible,.pc-op:focus-visible,.pc-enviar:focus-visible{
  outline:3px solid var(--bronce);outline-offset:2px}
.pc-form input:focus,.pc-form textarea:focus,.pc-entrada textarea:focus{outline:2px solid var(--verde);outline-offset:0;border-color:var(--verde)}

@media (max-width:620px){
  .pc-lanzador{right:12px;bottom:74px;padding:10px 15px 10px 12px;font-size:14px}
  body.sc-flota .pc-lanzador{bottom:132px}
  .pc-globo{right:12px;bottom:124px;max-width:calc(100vw - 90px)}
  body.sc-flota .pc-globo{bottom:182px}
  .pc-panel{inset:0;width:auto;max-width:none;height:auto;border-radius:0;border:0}
  .pc-b{font-size:15px}
}
@media (prefers-reduced-motion:no-preference){
  .pc-panel{animation:pc-sube .18s ease-out}
  .pc-globo{animation:pc-sube .22s ease-out}
  @keyframes pc-sube{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
  /* un anillo dorado que se abre cada 4 segundos, para que el ojo lo encuentre */
  .pc-lanzador::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
    animation:pc-llama 4s ease-out 1.5s infinite}
  @keyframes pc-llama{0%{box-shadow:0 0 0 0 rgba(212,175,106,.75)}
    35%{box-shadow:0 0 0 16px rgba(212,175,106,0)}100%{box-shadow:0 0 0 0 rgba(212,175,106,0)}}
}