/* ============ EL WHATSAPP — la ventana verde genérica ============
   Forma de chat que cualquiera reconoce (fondo verde muy oscuro,
   burbuja verde para lo propio, clara para lo ajeno) SIN marcas ni
   logos de ninguna aplicación: es la forma, no la marca. El puesto
   vive dentro de la workbox oscura de la plaza, como un teléfono
   apoyado sobre la mesa. */
body{background:#050807}
[hidden]{display:none!important}

/* ---------- el teléfono de muestra ---------- */
.phone{margin-top:6px;border:1px solid rgba(255,255,255,.16);border-radius:20px;overflow:hidden;background:#0b141a;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.phone__bar{display:flex;align-items:center;gap:11px;background:#1f2c34;padding:12px 15px}
.phone__avatar{flex:none;width:38px;height:38px;border-radius:50%;background:#2a7d62;color:#eafff5;display:flex;align-items:center;justify-content:center;font:italic 400 19px var(--serif)}
.phone__who{display:flex;flex-direction:column}
.phone__who b{font:500 15.5px/1.2 var(--sans);color:#e9edef}
.phone__who small{font:400 12px/1.3 var(--sans);color:#8696a0}
.phone__body{padding:16px 13px 8px;min-height:230px;background:
  radial-gradient(ellipse 80% 50% at 50% 0%,rgba(42,125,98,.10),transparent 70%),#0b141a}
.wmsg{max-width:82%;margin:0 0 9px;padding:8px 11px 6px;border-radius:9px;font:400 15px/1.45 var(--sans);opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease;box-shadow:0 1px 1px rgba(0,0,0,.35)}
.wmsg.on{opacity:1;transform:none}
.wmsg small{display:block;margin-top:3px;font:400 10.5px/1 var(--sans);text-align:right;color:rgba(233,237,239,.55)}
.wmsg--them{background:#1f2c34;color:#e9edef;border-top-left-radius:2px}
.wmsg--me{margin-left:auto;background:#005c4b;color:#e7ffdb;border-top-right-radius:2px}
.wmsg--voice{display:flex;align-items:center;gap:9px}
.wmsg--voice .play{flex:none;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff}
.wmsg--voice .bars{flex:1;height:18px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 2px,transparent 2px,transparent 6px);border-radius:3px;opacity:.65}
.wmsg--voice .dur{font:400 11px var(--sans);color:rgba(233,237,239,.7)}
.wmsg--heard{border:1px dashed rgba(134,150,160,.5);background:rgba(31,44,52,.55);color:#aebac1;font-style:italic}
.wmsg--catalog{background:#182229;border:1px solid rgba(255,255,255,.09)}
.wmsg--catalog b{display:block;margin-bottom:6px;font:500 13px var(--sans);letter-spacing:.06em;color:#e9edef}
.wmsg--catalog ul{margin:0;padding-left:17px}
.wmsg--catalog li{margin:3px 0;font:400 14.5px/1.4 var(--sans);color:#d1d7db}
.typing{display:flex;gap:5px;align-items:center;margin:2px 0 10px;padding-left:4px}
.typing span{width:7px;height:7px;border-radius:50%;background:rgba(233,237,239,.5);animation:tp 1s ease-in-out infinite}
.typing span:nth-child(2){animation-delay:.18s}
.typing span:nth-child(3){animation-delay:.36s}
@keyframes tp{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.quickrow{display:flex;flex-wrap:wrap;gap:7px;padding:4px 13px 10px;background:#0b141a}
.qbtn{appearance:none;background:rgba(31,44,52,.9);border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#d1d7db;font:400 13.5px/1.25 var(--sans);padding:8px 13px;cursor:pointer;transition:border-color .3s,color .3s}
.qbtn:hover{border-color:#2a7d62;color:#eafff5}
.phone__input{display:flex;gap:8px;align-items:center;padding:10px 12px 12px;background:#0b141a}
.phone__input input{flex:1;min-width:0;background:#1f2c34;border:0;border-radius:999px;color:#e9edef;padding:12px 16px;font:400 15.5px/1.3 var(--sans);appearance:none;-webkit-appearance:none;color-scheme:dark}
.phone__input input:focus{outline:1px solid rgba(42,125,98,.8)}
.voicebtn,.sendbtn{appearance:none;flex:none;width:44px;height:44px;border-radius:50%;border:0;background:#00a884;color:#06281e;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s,transform .2s}
.voicebtn{background:#1f2c34;color:#e9edef;border:1px solid rgba(255,255,255,.14)}
.voicebtn:hover{background:#2a3942}
.voicebtn.rec{background:#a82a2a;color:#fff;animation:recPulse 1s ease-in-out infinite}
@keyframes recPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.sendbtn:hover{background:#06cf9c}
.phone__note{margin:0;padding:0 14px 12px;background:#0b141a;font:italic 400 12px/1.4 var(--serif);color:rgba(255,255,255,.38);text-align:center}
.lastnote{margin:18px 0 0;font:italic 400 14.5px/1.5 var(--serif);color:rgba(255,255,255,.5);text-align:center}

/* ---------- la puerta real y el cierre real (solo Imprenta) ---------- */
.realdoor{margin:26px 0 6px;border:1px solid rgba(42,125,98,.65);background:linear-gradient(180deg,rgba(42,125,98,.14),rgba(255,255,255,.02));padding:18px 20px}
.realdoor__line{margin:0;font:400 clamp(15.5px,2vw,17.5px)/1.6 var(--serif);color:rgba(255,250,238,.94)}
.realdoor__btn,.realclose__btn{display:block;margin-top:14px;text-align:center;text-decoration:none;background:#00a884;color:#06281e;font:500 16px/1.3 var(--sans);padding:14px 18px;border-radius:999px;transition:background .3s}
.realdoor__btn:hover,.realclose__btn:hover{background:#06cf9c}
.realclose{margin-top:24px;border:1px solid rgba(0,168,132,.7);background:linear-gradient(180deg,rgba(0,168,132,.13),rgba(255,255,255,.02));padding:18px 20px}
.realclose__line{margin:0;font:400 clamp(15.5px,2vw,17.5px)/1.6 var(--serif);color:rgba(255,250,238,.94)}

/* ---------- lo que el dueño NO tuvo que hacer ---------- */
.report{margin-top:24px;border:1px solid rgba(230,184,95,.42);background:linear-gradient(180deg,rgba(230,184,95,.07),rgba(255,255,255,.02));padding:18px 20px}
.report__label{margin:0;font:500 9.5px/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft)}
.report__body{margin:12px 0 0;font:400 clamp(15.5px,2vw,17.5px)/1.6 var(--serif);white-space:pre-line;color:rgba(255,250,238,.94)}

@media(prefers-reduced-motion:reduce){
  .typing span,.voicebtn.rec{animation:none}
  .wmsg{transition:none;opacity:1;transform:none}
}