/* DSA Social — Mensajería: llamadas, chat (notas de voz, temporales, adjuntos), grupos, checks, y el mensajero con estados y botón flotante. Incluye también instalar app, registro en 3 pasos y verificación de página, que se agregaron en este mismo tramo.
   Paso 1 de la modularización: reglas movidas sin cambios y en el mismo orden. */
/* ---------- Llamadas de voz ---------- */
.callbox{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);background:rgba(20,18,19,.74)}
.cb-card{width:100%;max-width:340px;background:var(--surface);color:var(--text);border-radius:22px;padding:34px 22px 26px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.cb-ring{display:inline-flex;border-radius:50%;margin-bottom:14px}
.callbox.ringing .cb-ring{animation:cbp 1.6s ease-out infinite}
@keyframes cbp{0%{box-shadow:0 0 0 0 rgba(168,135,90,.55)}100%{box-shadow:0 0 0 20px rgba(168,135,90,0)}}
.cb-n{font-weight:700;font-size:20px;line-height:1.25}
.cb-s{color:var(--muted);margin-top:4px;min-height:21px;font-variant-numeric:tabular-nums}
.cb-row{display:flex;justify-content:center;gap:30px;margin-top:26px}
.cb-btn{background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text);font:inherit;font-size:13px;cursor:pointer}
.cb-btn svg.i{width:26px;height:26px;padding:17px;box-sizing:content-box;border-radius:50%;background:var(--hover);color:var(--text);border:1px solid var(--line)}
.cb-btn.no svg.i{background:#C62828;border-color:#C62828;color:#fff}
.cb-btn.yes svg.i{background:#1E7E4F;border-color:#1E7E4F;color:#fff}
.cb-btn.mute.on svg.i{background:var(--wine);border-color:var(--wine);color:#fff}
.m .mcall{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.m .mcall svg.i{width:16px;height:16px}
.m .mcall.miss{color:#C62828}
@media (prefers-reduced-motion:reduce){.callbox.ringing .cb-ring{animation:none}}

/* ---------- Chat: notas de voz, temporales y adjuntos ---------- */
.chat-f .micb{display:none}
@supports selector(:has(a)){.chat-f:has(#msgIn:placeholder-shown) .sendb.snd{display:none}.chat-f:has(#msgIn:placeholder-shown) .micb{display:flex}}
.recf{align-items:center;gap:10px}
.recx{background:none;border:0;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0}
.recx:hover{background:var(--hover)}
.recdot{width:10px;height:10px;border-radius:50%;background:#C62828;flex-shrink:0;animation:recb 1s ease-in-out infinite alternate}
@keyframes recb{from{opacity:1}to{opacity:.25}}
#recT{font-weight:700;font-variant-numeric:tabular-nums}
.rech{flex:1;min-width:0;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mvoice{display:flex;align-items:center;gap:10px;min-width:190px;padding:2px 0}
.vplay{width:36px;height:36px;border-radius:50%;border:0;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:rgba(127,127,127,.2);color:inherit;cursor:pointer}
.vplay svg.i{width:18px;height:18px}
.vplay .ipause,.mvoice.on .vplay .iplay{display:none}
.mvoice.on .vplay .ipause{display:inline}
.mvoice.load .vplay{opacity:.5}
.vbar{flex:1;height:4px;border-radius:2px;background:rgba(127,127,127,.3);overflow:hidden}
.vfill{display:block;height:100%;width:0;background:currentColor;transition:width .2s linear}
.vdur{font-size:12px;opacity:.8;font-variant-numeric:tabular-nums}
.mvence{font-size:12px;opacity:.8;margin-top:4px}
.mvence .lnk{font-size:12px;color:inherit;text-decoration:underline;background:none;border:0;padding:0;cursor:pointer}
.mexp{display:inline-flex;align-items:center;gap:6px;font-style:italic;opacity:.75}
.mexp svg.i{width:16px;height:16px}
.msys{align-self:center;max-width:88%;margin:4px auto;padding:6px 12px;border-radius:10px;background:var(--gold-soft);color:var(--text);font-size:12.5px;line-height:1.4;display:flex;gap:6px;align-items:flex-start;text-align:left}
.msys svg.i{width:14px;height:14px;color:var(--gold);margin-top:2px}
.ctmp svg.i{width:14px;height:14px;color:var(--gold);vertical-align:-2px}
.cs-h{font-weight:700;padding:4px 18px 2px}
.cs-p{color:var(--muted);font-size:13px;margin:0 18px 6px}
.csheet button.on{color:var(--wine-ink);font-weight:700}
.cs-v{margin-left:auto;color:var(--muted);font-size:13px}
@media (prefers-reduced-motion:reduce){.recdot{animation:none}.vfill{transition:none}}

/* ---------- Grupos ---------- */
.gav{background:var(--gold)!important;color:#fff;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-weight:700;flex-shrink:0}
.gnewb{padding:0 16px 10px}
.gnewb .btn{width:100%}
.gtag{background:var(--gold-soft);color:var(--text)}
.gfrom{font-size:12px;font-weight:700;color:var(--wine-ink);margin-bottom:2px}
.gmore{align-self:center;margin:2px 0 6px;font-size:13px}
.gstate{margin:auto;max-width:360px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text)}
.gstate svg.i{width:30px;height:30px;color:var(--gold)}
.gstate p{color:var(--muted);margin:0 0 8px}
.gform{gap:8px}
.gfin{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font:inherit}
.gpick{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:pointer}
/* Paso 11: solo el nombre ocupa el espacio; la foto (con franja verde o halo) mantiene su forma redonda */
.gpick>span:not(.av):not(.otw):not(.st-ring){flex:1;min-width:0}
.gpick .av,.gpick .otw{flex:0 0 auto}
.gpick.on{border-color:var(--wine-ink);background:var(--wine-soft)}
.gpick svg.i{color:var(--wine-ink)}
.gmem{display:flex;align-items:center;gap:12px;padding:8px 18px}
.gm-n{flex:1;min-width:0}
.gmem .lnk{font-size:13px}
.mgrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.gnum{width:90px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font:inherit}
.mgchk{display:flex;align-items:center;gap:8px;margin-top:10px}

/* ---------- Grupos: adjuntos ---------- */
@supports selector(:has(a)){.chat-f:has(#gIn:placeholder-shown) .sendb.snd{display:none}.chat-f:has(#gIn:placeholder-shown) .micb{display:flex}}
.gattb{background:none;border:0;cursor:pointer;color:inherit;padding:0}
.gattm{display:flex;gap:8px;padding:8px 12px 0}
.gattm button{display:flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:14px;cursor:pointer}
.gattm button:hover{background:var(--hover)}
.gattm svg.i{width:18px;height:18px;color:var(--wine-ink)}

/* ---------- Instalar app ---------- */
.instb{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;margin-right:6px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer;flex-shrink:0}
.instb:hover{background:var(--hover)}
.instb svg.i{width:18px;height:18px;color:var(--wine-ink)}
.instb[hidden]{display:none!important}
@media (max-width:820px){.instb{width:36px;padding:0;justify-content:center;margin-right:2px}.instb span{display:none}}
.pwah{display:flex;gap:14px;align-items:flex-start;padding:16px}
.pwah img{border-radius:14px;flex-shrink:0}
.pwah ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;line-height:1.45}

.pwamodal{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.6);display:flex;align-items:flex-start;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 60px) 12px 12px;cursor:pointer}
.pwabox{width:100%;max-width:420px;background:var(--surface);color:var(--text);border-radius:12px;overflow:hidden;cursor:auto}
.pwax{cursor:pointer;-webkit-tap-highlight-color:transparent}
/* Paso 11: título y X en una sola línea, con su margen */
.pwabox .mh{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.pwaf{display:flex;justify-content:flex-end;padding:10px 16px 14px;border-top:1px solid var(--line)}
.pwaok{background:#4E051A;color:#fff;border:1px solid #4E051A;border-radius:6px;padding:10px 22px;font:inherit;font-weight:700;font-size:15px}
.pwaok:active{background:#3A0413}

/* ---------- Modo oscuro: botón de enviar / micrófono visible ---------- */
[data-theme="dark"] .sendb{background:#4E051A;color:#fff}
[data-theme="dark"] .sendb:active{background:#3A0413}

.mtick{margin-left:5px;font-weight:600}

/* ---------- Verificación de página con pago o código ---------- */
.vpay{border:1px solid var(--line);border-radius:10px;padding:12px;margin:0 0 12px}
.vpay-h{font-size:15px;margin-bottom:10px}
.vpay-qr{display:flex;gap:12px;align-items:center}
.vpay-qr img{border-radius:8px;border:1px solid var(--line);background:#fff;flex-shrink:0}
.vpay-qr>div{flex:1;min-width:0}
.vpay-b{margin-top:10px}
.vpay-b summary{cursor:pointer;font-weight:600;font-size:13.5px}
.vpay-bank{margin-top:8px}
.vcode{border-top:1px dashed var(--line);margin-top:14px;padding-top:12px}
.vcode-row{display:flex;gap:8px}
.vcode-row input{flex:1;min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;text-transform:uppercase;letter-spacing:1px}
.vcnew{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 4px;padding:10px 12px;border-radius:8px;background:var(--gold-soft)}
.vcnew b,.vcc{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:1.5px;font-size:15px}

/* ---------- Barra de acciones de publicaciones (estilo LinkedIn) ---------- */
.pbar{display:flex;align-items:center;gap:4px;padding:6px 4px}
.pbar .rwrap{flex:0 0 auto}
.pbar .act{flex:0 0 auto;flex-direction:row;gap:6px;padding:8px 10px;font-size:15px;font-weight:500;border-radius:999px}
.pbar .act svg.i{width:22px;height:22px}
.pbar .act span:not(.re-e){font-variant-numeric:tabular-nums}
.pb-me{background:none;border:0;padding:2px 4px 2px 2px;display:inline-flex;align-items:center;cursor:pointer;flex-shrink:0}
.pb-sp{flex:1}
.pb-rx{background:none;border:0;padding:4px;display:inline-flex;cursor:pointer;flex-shrink:0}
.pb-rx .re{width:22px;height:22px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:13px;margin-left:-6px}
.pb-rx .re:first-child{margin-left:0}
@media (max-width:420px){.pbar .act{padding:8px 7px;font-size:14px}.pbar .act svg.i{width:20px;height:20px}}

/* Menú de compartir dentro de la pantalla y contador en color neutro (modo oscuro) */
.pbar .pmenu.shm{left:0;right:auto}
[data-theme="dark"] .pbar .act span:not(.re-e){color:var(--muted)}

/* Checks del chat */
.mtick .dbl{letter-spacing:-.38em;margin-right:.38em}
.mtick.rd{color:#53BDEB}
.m.me .mtick.rd{color:#7FD3F7}

/* Campo de mensaje como área de texto (evita la barra de autocompletar de Android) */
.chat-f textarea{flex:1;min-width:0;border:1px solid var(--line);border-radius:20px;padding:10px 14px;background:transparent;color:var(--text);font:inherit;font-size:16px;line-height:1.35;outline:none;resize:none;overflow-y:auto;max-height:120px;height:42px;box-sizing:border-box;display:block}

/* ---------- Registro en 3 pasos ---------- */
.rg-steps{display:flex;align-items:center;gap:6px;margin:4px 0 14px}
.rg-steps span{width:28px;height:4px;border-radius:2px;background:var(--line)}
.rg-steps span.on{background:#4E051A}
.rg-steps b{margin-left:8px;font-size:12.5px;color:var(--muted);font-weight:600}
.rg-h{font-size:18px;margin:0 0 12px}
.field select,.rg-other{width:100%;border:1px solid var(--line);border-radius:4px;padding:11px 12px;font:inherit;font-size:16px;color:var(--text);background:#fff;outline:none;box-sizing:border-box}
.rg-other{margin-top:8px}
.rg-occ{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rg-occ button{padding:12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);font:inherit;font-weight:600;cursor:pointer}
.rg-occ button.on{border-color:#4E051A;background:#F6ECEF;color:#4E051A}
.rg-chips{display:flex;flex-wrap:wrap;gap:8px;max-height:300px;overflow-y:auto;padding:2px}
.rg-chips button{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--text);font:inherit;font-size:14px;cursor:pointer}
.rg-chips button.on{background:#4E051A;border-color:#4E051A;color:#fff}
.rg-count{margin-top:8px;font-size:13px;color:var(--muted);font-weight:600}
.rg-count.ok{color:#1E7E4F}
.rg-nav{display:grid;grid-template-columns:1fr 2fr;gap:8px}

/* ===== Mensajero ===== */
.clist.wa{display:flex;flex-direction:column;position:relative;overflow:hidden;padding:0}
.wa-h{display:flex;align-items:center;gap:10px;padding:10px 12px;position:relative;border-bottom:1px solid var(--line)}
.wa-h h2{flex:1;margin:0;font-family:'Libre Baskerville',Georgia,serif;font-size:21px;color:#4E051A}
[data-theme="dark"] .wa-h h2{color:#F3C9D6}
.wa-back{display:none;background:none;border:0;padding:4px;color:var(--text);cursor:pointer}
.wa-me{background:none;border:0;padding:0;cursor:pointer;line-height:0}
.wa-dots{background:none;border:0;font-size:22px;line-height:1;padding:6px 8px;border-radius:50%;color:var(--text);cursor:pointer}
.wa-dots:hover{background:var(--hover)}
.wa-menu-bg{position:fixed;inset:0;z-index:40}
.wa-menu{position:absolute;right:10px;top:48px;z-index:41;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.18);min-width:210px;overflow:hidden}
.wa-menu button{display:block;width:100%;text-align:left;background:none;border:0;padding:12px 16px;font:inherit;font-size:14.5px;color:var(--text);cursor:pointer}
.wa-menu button:hover{background:var(--hover)}
.wa-body{flex:1;overflow-y:auto;padding:10px 0 84px;-webkit-overflow-scrolling:touch}
.wa .mfil button.on{background:rgba(155,22,64,.14);color:#7A1033;border-color:transparent}
[data-theme="dark"] .wa .mfil button.on{background:rgba(231,163,184,.18);color:#F3C9D6}
.wa .conv.unread .ctime{color:#9B1640;font-weight:700}
.wa-sec{padding:14px 16px 6px;font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.wa-row{display:flex;align-items:center;gap:12px;width:100%;padding:8px 16px;background:none;border:0;font:inherit;color:var(--text);text-align:left;cursor:pointer}
button.wa-row:hover,.wa-rowb:hover{background:var(--hover)}
.wa-rowb{display:flex;align-items:center;gap:12px;flex:1;min-width:0;background:none;border:0;padding:0;font:inherit;color:var(--text);text-align:left;cursor:pointer}
.wa-row .who{min-width:0;flex:1}.wa-row .n{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-row .last{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-miss{color:#C8102E!important}
.wa-ic{width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#4E051A;color:#fff;flex-shrink:0}
.wa-ic svg.i{width:22px;height:22px}
.wa-call{width:42px;height:42px;border-radius:50%;border:0;background:rgba(155,22,64,.1);color:#9B1640;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
[data-theme="dark"] .wa-call{background:rgba(231,163,184,.15);color:#E7A3B8}
.wa-fab{position:absolute;right:16px;bottom:78px;width:56px;height:56px;border-radius:16px;border:0;background:#4E051A;color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(78,5,26,.35);cursor:pointer;z-index:5}
.wa-fab svg.i{width:26px;height:26px}
[data-theme="dark"] .wa-fab{background:#9B1640}
.wa-tabs{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);background:var(--surface);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
.wa-tabs button{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;font:inherit;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;padding:2px 0}
.wa-ti{position:relative;display:inline-flex;align-items:center;justify-content:center;width:58px;height:30px;border-radius:15px}
.wa-ti svg.i{width:22px;height:22px}
.wa-tabs button.on{color:var(--text)}
.wa-tabs button.on .wa-ti{background:rgba(155,22,64,.16);color:#7A1033}
[data-theme="dark"] .wa-tabs button.on .wa-ti{background:rgba(231,163,184,.2);color:#F3C9D6}
.wa-b{position:absolute;top:-4px;right:4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#9B1640;color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:820px){
  body.msgmode .top, body.msgmode .bnav{display:none !important}
  body.msgmode .wrap{padding:0 !important}
  body.msgmode .msgbox{position:fixed;left:0;right:0;top:0;height:100dvh;z-index:45;border-radius:0;margin:0;border:0;padding-top:env(safe-area-inset-top,0px);box-sizing:border-box}
  .wa-back{display:inline-flex}
}

/* Mensajero: flecha atrás visible, etiquetas y botón Invitar */
.wa-back{width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;background:rgba(155,22,64,.1);color:#7A1033}
.wa-back svg.i{width:24px;height:24px}
[data-theme="dark"] .wa-back{background:rgba(231,163,184,.16);color:#F3C9D6}
.wa-tag{display:inline-block;vertical-align:middle;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.2px;background:rgba(155,22,64,.12);color:#7A1033}
.wa-tag.pg{background:rgba(20,164,77,.14);color:#0E7A39}
.wa-tag.cel{background:rgba(107,114,128,.16);color:#4B5563}
[data-theme="dark"] .wa-tag{background:rgba(231,163,184,.18);color:#F3C9D6}
[data-theme="dark"] .wa-tag.pg{background:rgba(34,197,94,.18);color:#86EFAC}
[data-theme="dark"] .wa-tag.cel{background:rgba(156,163,175,.2);color:#D1D5DB}
.wa-invb{border:1px solid #9B1640;color:#9B1640;background:transparent;border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;flex-shrink:0}
[data-theme="dark"] .wa-invb{border-color:#E7A3B8;color:#E7A3B8}
.wa-fabx{width:auto;padding:0 18px;gap:8px;font:inherit;font-weight:700;font-size:15px}
/* Botón flotante para abrir mensajes */
.msgfab{position:fixed;right:18px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:35;width:58px;height:58px;border-radius:50%;border:0;background:#4E051A;color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(78,5,26,.38);cursor:pointer}
.msgfab svg.i{width:28px;height:28px}
.msgfab-b{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#C8102E;color:#fff;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--surface)}
[data-theme="dark"] .msgfab{background:#9B1640}
@media (max-width:820px){ .msgfab{bottom:calc(76px + env(safe-area-inset-bottom,0px))} body.inchat .msgfab{display:none} }

/* Mensajes: solo por el botón flotante; cabecera del mensajero con logo */
#msgTop{display:none!important}
.wa-logo{cursor:default}
.wa-logo .p{color:var(--text)}
.wa-h{gap:10px}
.wa-h .wa-back{display:inline-flex;margin-right:-4px}

/* Botón flotante del mensajero: siempre por encima de las pestañas (también en iPhone) */
.wa-fab{bottom:calc(86px + env(safe-area-inset-bottom,0px))}

/* Contador por chat y botón flotante en vino */
.cside{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;align-self:flex-start;margin-top:2px}
.cun{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#9B1640;color:#fff;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.cun.mute{background:var(--line);color:var(--muted)}
[data-theme="dark"] .cun{background:#E7A3B8;color:#3A0413}
.msgfab-b{background:#9B1640!important;border-color:#fff!important}
[data-theme="dark"] .msgfab-b{background:#F3C9D6!important;color:#4E051A!important;border-color:#2A2627!important}
/* Novedades */
.st-ring{display:inline-flex;border-radius:50%;padding:2.5px;background:conic-gradient(#9B1640,#4E051A,#C9567A,#9B1640);flex-shrink:0;line-height:0}
.st-ring>.av,.st-ring>img{border:2.5px solid var(--surface);border-radius:50%}
.st-ring.seen{background:var(--line)}
[data-theme="dark"] .st-ring{background:conic-gradient(#E7A3B8,#9B1640,#F3C9D6,#E7A3B8)}
[data-theme="dark"] .st-ring.seen{background:#4A4446}
.pfph.st-ring{padding:4px;cursor:pointer}
.st-add{position:relative;display:inline-flex;line-height:0}
.st-plus{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:#9B1640;color:#fff;font-weight:700;font-size:16px;line-height:20px;text-align:center;border:2px solid var(--surface)}
.st-mine{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:4px}
label.wa-rowb{cursor:pointer}
label.wa-invb{display:inline-flex;align-items:center}
.st-pick{max-height:34vh;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:4px 10px;margin-top:6px}
.st-pick .av{vertical-align:middle;margin:0 4px}
.stview{position:fixed;inset:0;z-index:120;background:#000;color:#fff;display:flex;align-items:center;justify-content:center}
.stv-img{max-width:100%;max-height:100%;object-fit:contain}
.stv-bars{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));left:10px;right:10px;display:flex;gap:4px;z-index:2}
.stv-bars span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.stv-bars i{display:block;height:100%;background:#fff}
.stv-bars i.run{animation:stbar 8s linear forwards}
@keyframes stbar{from{width:0}to{width:100%}}
@media (prefers-reduced-motion:reduce){.stv-bars i.run{animation:none;width:100%}}
.stv-h{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));left:12px;right:8px;display:flex;align-items:center;gap:10px;z-index:2;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.stv-ic{background:rgba(0,0,0,.35);border:0;color:#fff;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.stv-t{position:absolute;left:0;right:0;bottom:calc(84px + env(safe-area-inset-bottom,0px));padding:12px 18px;text-align:center;font-size:16px;background:linear-gradient(transparent,rgba(0,0,0,.65))}
.stv-nav{position:absolute;top:80px;bottom:80px;width:35%;background:none;border:0;cursor:pointer;z-index:1}
.stv-nav.l{left:0}.stv-nav.r{right:0}
.stv-reply{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:2;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:10px 18px;font:inherit;font-weight:700;cursor:pointer}
.wa-tabs button{font-size:11px}
.wa-ti{width:50px}

/* Computadora: en Mensajes se oculta la tarjeta del perfil y la lista de chats es más ancha */
@media (min-width:821px){
  .wrap.msgs{grid-template-columns:minmax(0,1fr)}
  .wrap.msgs>#left{display:none}
  .wrap.msgs .msgbox{grid-template-columns:340px minmax(0,1fr)}
}
/* Filtros del mensajero: se deslizan sin mostrar barra */
.wa .mfil{scrollbar-width:none}
.wa .mfil::-webkit-scrollbar{display:none}

/* Computadora: Mensajes a todo lo ancho (sin la tarjeta del perfil) y lista de chats un poco más ancha */
@media (min-width:821px){
  .wrap.msgwide{grid-template-columns:minmax(0,1fr)}
  .wrap.msgwide #left,.wrap.msgwide #right{display:none}
  .wrap.msgwide .msgbox{grid-template-columns:340px minmax(0,1fr)}
}
.wa .mfil{scrollbar-width:none}
.wa .mfil::-webkit-scrollbar{display:none}

.msgfab[hidden]{display:none!important}

/* Cruz del "Mi estado" dibujada con dos barras: siempre centrada */
.st-plus{font-size:0;line-height:0;padding:0;box-sizing:border-box}
.st-plus::before,.st-plus::after{content:"";position:absolute;left:50%;top:50%;background:#fff;border-radius:1px;transform:translate(-50%,-50%)}
.st-plus::before{width:10px;height:2.2px}
.st-plus::after{width:2.2px;height:10px}

.ch-av.st-ring{padding:2px;cursor:pointer}
.ch-av.st-ring .avw{line-height:0}
.stv-up{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.55);padding:8px 14px;border-radius:999px;font-weight:700}

/* Perfil: con estado, el borde circular de la foto se pinta de vino (sin agregar otro círculo) */
.pfph.st-ring{background:none!important;padding:0!important;border-radius:50%}
.pfph.st-ring>.av{box-shadow:0 0 0 4px #9B1640!important}
[data-theme="dark"] .pfph.st-ring>.av{box-shadow:0 0 0 4px #C9567A!important}
.pfph.st-ring.seen>.av{box-shadow:0 0 0 3px var(--surface)!important}
.conv .st-ring{cursor:pointer}

/* ===== Paso 11: responder y reaccionar en el chat ===== */
#chatb .m{position:relative;touch-action:pan-y}
@media (hover:none){ #chatb .m{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} }
#chatb .m.msel{filter:brightness(.9)}
#chatb .m.flash{animation:mflash 1.3s ease}
@keyframes mflash{0%,45%{box-shadow:0 0 0 3px rgba(168,135,90,.75)}100%{box-shadow:0 0 0 0 rgba(168,135,90,0)}}
#chatb .m.swr::before{content:'↩';position:absolute;left:-34px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--hover);color:var(--text);display:flex;align-items:center;justify-content:center;font-size:15px}
.mrep{display:flex;flex-direction:column;gap:1px;border-left:3px solid #4E051A;background:rgba(0,0,0,.06);border-radius:6px;padding:5px 8px;margin:0 0 5px;font-size:12.5px;line-height:1.3;cursor:pointer;white-space:normal}
.m.me .mrep{background:rgba(255,255,255,.14);border-left-color:#A8875A}
.mrep b{font-size:12px}
.mrep span{opacity:.85;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
#chatb .m.hasrx{margin-bottom:14px}
.mrx{position:absolute;bottom:-16px;right:8px;display:inline-flex;align-items:center;gap:1px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:1px 6px;font-size:13px;line-height:18px;color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.14);cursor:pointer;white-space:nowrap}
.m.them .mrx{right:auto;left:8px}
.mrx span{font-size:11.5px;color:var(--muted);margin-left:3px}
.mpick{position:fixed;z-index:90;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.22);padding:6px;min-width:230px}
.mpick-rx{display:flex;gap:2px;justify-content:space-between}
.mpick-rx button{border:0;background:none;font-size:25px;width:44px;height:44px;border-radius:50%;cursor:pointer;transition:transform .12s ease;line-height:1}
.mpick-rx button:hover{transform:scale(1.15)}
.mpick-rx button.on{background:var(--wine-soft)}
.mpick-op{display:flex;border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
.mpick-op button{flex:1;border:0;background:none;padding:9px 8px;font:inherit;font-size:14px;font-weight:600;color:var(--text);border-radius:8px;cursor:pointer}
.mpick-op button:hover{background:var(--hover)}
.rbar{display:flex;align-items:center;gap:8px;margin:8px 12px 0;padding:7px 10px;border-left:3px solid #4E051A;background:var(--hover);border-radius:8px;flex-shrink:0}
.rbar + .chat-f{border-top:0}
.rbar-t{flex:1;min-width:0;display:flex;flex-direction:column;font-size:12.5px}
.rbar-t b{color:#4E051A;font-size:12.5px}
[data-theme="dark"] .rbar-t b{color:#F3C9D6}
.rbar-t span{color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rbar-x{border:0;background:none;color:var(--muted);font-size:22px;line-height:1;width:32px;height:32px;border-radius:50%;cursor:pointer}
/* Visor de imágenes del chat con zoom */
.lb.zoomable .lbw{touch-action:none;overflow:hidden}
.lb.zoomable #lbImg{will-change:transform;cursor:zoom-in;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.lb.zoomed #lbImg{cursor:grab}
/* ===== Paso 11: título de Estados ===== */
.st-title{padding:14px 16px 6px}
.st-title h2{margin:0;font-family:'Libre Baskerville',Georgia,serif;font-size:20px;color:#4E051A}
[data-theme="dark"] .st-title h2{color:#F3C9D6}
.st-title p{margin:3px 0 0;font-size:13px;color:var(--muted)}
/* ===== Paso 11: pausar estados manteniendo presionado ===== */
.stview{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.stv-img{-webkit-user-drag:none;pointer-events:none}
.stview.paused .stv-bars i.run{animation-play-state:paused}
/* ===== Paso 11: sin sombreado al tocar los costados del estado ===== */
.stv-nav{-webkit-tap-highlight-color:transparent;outline:none}
.stv-nav:active,.stv-nav:focus,.stv-nav:focus-visible,.stv-nav:hover{background:none !important;box-shadow:none !important;outline:none}
/* ===== Paso 11: con estado, el halo vino va completo por fuera y la franja de "busca empleo" /
   "#Contratando" pasa adentro de la foto, fina y suave, pegada al borde ===== */
.st-ring>.otw>.av,.st-ring>.otw>img{border:2.5px solid var(--surface);border-radius:50%}
.st-ring>.otw.org>.av{border-radius:6px}
.st-ring>.otw:not(.big)::after{inset:2.5px;border-width:2px;opacity:.8}
.st-ring>.otw.org.hire:not(.big)::after{inset:2.5px;border-width:2px;border-radius:5px;opacity:.8}
[data-theme="dark"] .st-ring>.otw:not(.big):not(.hire)::after{border-left-color:#3E9A60;border-bottom-color:#3E9A60}
.pfph.st-ring>.otw>.av{border:0;box-shadow:0 0 0 4px #9B1640!important}
[data-theme="dark"] .pfph.st-ring>.otw>.av{box-shadow:0 0 0 4px #C9567A!important}
.pfph.st-ring.seen>.otw>.av{box-shadow:0 0 0 3px var(--surface)!important}
/* ===== Paso 11: llamadas estilo WhatsApp (pantalla completa, aviso arriba y llamada minimizada) ===== */
.callbox.cb-full{padding:0;background:radial-gradient(120% 80% at 50% 35%,#3A0A1A 0%,#141213 62%);color:#fff;align-items:stretch;justify-content:stretch}
.cbf{display:flex;flex-direction:column;width:100%;height:100%;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px calc(env(safe-area-inset-bottom,0px) + 18px);box-sizing:border-box;max-width:560px;margin:0 auto}
.cbf-top{display:flex;align-items:flex-start;gap:8px}
.cbf-min,.cbf-sp{width:46px;height:46px;flex-shrink:0}
.cbf-min{border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.cbf-min svg.i{width:22px;height:22px}
.cbf-t{flex:1;min-width:0;text-align:center;padding-top:4px}
.callbox.cb-full .cb-n{color:#fff;font-size:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.callbox.cb-full .cb-s{color:rgba(255,255,255,.72);font-size:16px}
.cbf-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:0}
.cbf-mid .av{font-size:58px !important}
.cbf-brand{font-size:13px;color:rgba(255,255,255,.55);letter-spacing:.2px}
.cbf-pan{background:rgba(255,255,255,.08);border-radius:28px;padding:22px 14px 18px}
.cbf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 8px;justify-items:center}
.cbf-grid.two{grid-template-columns:1fr 1fr;row-gap:26px}
.callbox.cb-full .cb-btn{color:#fff;font-size:14px;gap:10px}
.callbox.cb-full .cb-btn svg.i{width:28px;height:28px;padding:20px;background:rgba(255,255,255,.14);border:0;color:#fff}
.callbox.cb-full .cb-btn.big svg.i{width:32px;height:32px;padding:22px}
.callbox.cb-full .cb-btn.no svg.i{background:#D32F3A}
.callbox.cb-full .cb-btn.yes svg.i{background:#1E7E4F}
.callbox.cb-full .cb-btn.mute.on svg.i{background:#fff;color:#141213}
.callbox.cb-banner,.callbox.cb-pill{inset:0 0 auto 0;background:none;padding:calc(env(safe-area-inset-top,0px) + 8px) 10px 0;align-items:flex-start;pointer-events:none;z-index:95}
.cbb,.cbp{pointer-events:auto}
.cbb{position:relative;width:100%;max-width:520px;display:flex;align-items:center;gap:12px;background:#141213;color:#fff;border-radius:30px;padding:12px 14px 16px;box-shadow:0 10px 30px rgba(0,0,0,.45);cursor:pointer;transition:transform .2s ease,opacity .2s ease;animation:cbin .25s ease;touch-action:none}
@keyframes cbin{from{transform:translateY(-120%)}to{transform:none}}
.cbb-t{flex:1;min-width:0;display:flex;flex-direction:column}
.cbb-t span{font-size:12.5px;color:rgba(255,255,255,.6)}
.cbb-t b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbb-b,.cbp-b{border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;flex-shrink:0}
.cbb-b{width:52px;height:52px}.cbb-b svg.i{width:24px;height:24px}
.cbb-b.no,.cbp-b.no{background:#D32F3A}.cbb-b.yes,.cbp-b.yes{background:#1E7E4F}
.cbb-grab{position:absolute;left:50%;bottom:6px;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:rgba(255,255,255,.35)}
.cbp{display:flex;align-items:center;gap:8px;max-width:330px;background:#141213;color:#fff;border-radius:24px;padding:6px 6px 6px 8px;box-shadow:0 6px 20px rgba(0,0,0,.35);cursor:pointer;border:1.5px solid #1E7E4F;animation:cbin .25s ease}
.cbp-n{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.cbp-s{font-size:13px;color:#7FD6A4;font-variant-numeric:tabular-nums;white-space:nowrap}
.cbp-b{width:34px;height:34px}.cbp-b svg.i{width:17px;height:17px}
.callbox.cb-pill.ringing .cbp{animation:cbpul 1.4s ease-in-out infinite}
@keyframes cbpul{0%,100%{box-shadow:0 0 0 0 rgba(30,126,79,.55)}50%{box-shadow:0 0 0 7px rgba(30,126,79,0)}}
@media (prefers-reduced-motion:reduce){.cbb,.cbp{animation:none !important}}
.callbox .cb-btn,.callbox .cbf-min,.callbox .cbb-b,.callbox .cbp-b{outline:none}
.cbb-t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ===== Paso 11: halo de estado no visto con energía fluyendo (luz clara que recorre el círculo sin parar) ===== */
@property --stA{syntax:'<angle>';inherits:false;initial-value:0deg}
.st-ring:not(.seen){position:relative}
.st-ring:not(.seen)::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:1;
  background:conic-gradient(from 0deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,0) 200deg,rgba(255,214,226,.35) 260deg,rgba(255,255,255,.95) 300deg,rgba(255,240,245,.55) 318deg,rgba(255,255,255,0) 340deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
  animation:stFlow 7s linear infinite;will-change:transform,opacity}
.pfph.st-ring:not(.seen)::before{inset:-4px;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4.5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 4.5px),#000 calc(100% - 4px))}
/* Una vuelta lenta de 3 s y luego 4 s de pausa antes de la siguiente */
/* Gira el brillo con transform (lo hace la tarjeta gráfica, sin redibujar la pantalla: más liviano) */
@keyframes stFlow{0%{transform:rotate(0deg);opacity:0}4%{opacity:1}39%{opacity:1}43%{transform:rotate(360deg);opacity:0}100%{transform:rotate(360deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.st-ring:not(.seen)::before{animation:none;opacity:.6}}
/* Paso 11: en el perfil grande, el contenedor del halo sube junto con la foto (antes la foto subía sola y el brillo quedaba desplazado) */
.pf-b .pfph.st-ring{margin-top:-70px;line-height:0;vertical-align:top}
.pf-b .pfph.st-ring>.av,.pf-b .pfph.st-ring>.otw.big{margin-top:0}
/* Paso 11: ver mensajes anteriores */
.mmore{text-align:center;margin:4px 0 10px}
.mmore-b{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:6px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
/* Paso 11: en la bandeja de la página, quién respondió (solo lo ven los administradores) */
.m .mby{display:block;font-size:11.5px;font-weight:700;opacity:.75;margin-bottom:3px}

/* Paso 12: ver conversaciones anteriores al final de la lista */
.chmore{display:block;width:calc(100% - 32px);margin:10px 16px 16px;padding:10px 12px;border:1px dashed var(--line);border-radius:10px;background:none;color:var(--wine-ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.chmore:active{background:var(--wine-soft)}

/* =================== Paso 12: Comunicados (difusión) =================== */
.m.mbc{max-width:min(420px,86%);padding:8px 10px 6px}
.mbc-l{font-size:12px;font-weight:700;color:var(--wine-ink);margin:0 0 6px}
.mbc-img{display:block;width:100%;max-height:420px;object-fit:cover;border-radius:10px;margin:0 0 8px}
.mbc-t{white-space:pre-wrap;word-break:break-word}
.mbc-a{display:block;margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--wine-soft);color:var(--wine-ink);font-weight:600;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbc-a:hover{text-decoration:underline}
#bcModal .mbox{max-height:calc(100vh - 90px);display:flex;flex-direction:column}
.bc-body{padding:4px 16px 10px;display:grid;gap:12px;overflow:auto}
.bc-lb{font-size:13px;font-weight:600;display:block}
.bc-lb select,.bc-in{display:block;width:100%;margin-top:4px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-weight:400}
.bc-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.bc-ck{display:inline-flex;align-items:center;gap:6px;font-weight:400;font-size:14px;margin-right:10px;cursor:pointer}
.bc-ck input{width:17px;height:17px;accent-color:var(--wine)}
.bc-ex{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
.bc-ex .bc-in{flex:1;min-width:200px;margin-top:0}
.bc-tag{display:inline-flex;align-items:center;gap:4px;background:var(--wine-soft);color:var(--wine-ink);border-radius:99px;padding:4px 6px 4px 10px;font-size:13px;font-weight:600}
.bc-tag button{border:0;background:none;color:inherit;font-size:16px;line-height:1;cursor:pointer;padding:0 4px}
.bc-sug{margin-top:6px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.bc-sug button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.bc-sug button+button{border-top:1px solid var(--line)}
.bc-sug button:hover{background:var(--wine-soft)}
.bc-sug span{display:flex;flex-direction:column;line-height:1.2}.bc-sug small{color:var(--muted);font-weight:400}
#bcModal textarea{width:100%;min-height:110px;border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;background:var(--surface);color:var(--text);resize:vertical}
.bc-prev{display:flex;flex-direction:column;gap:6px;align-items:flex-start}.bc-prev img{width:100%;max-height:220px;object-fit:cover;border-radius:10px}
.bc-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bc-it{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}.bc-it:first-of-type{border-top:0}
.bc-sn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-ent{padding:10px 0;border-top:1px solid var(--line)}.bc-ent:first-of-type{border-top:0}
.bc-adm{display:flex;margin:6px 0 0}

/* Paso 12: botón "Descargar app" más notorio + nubecita de 3 s (claro y oscuro) */
.instb{position:relative;background:var(--wine);border-color:var(--wine);color:#fff;box-shadow:0 2px 8px rgba(78,5,26,.25)}
.instb svg.i{color:#fff}
.instb:hover{background:#6A0B27;border-color:#6A0B27}
:root[data-theme="dark"] .instb{background:var(--wine-ink);border-color:var(--wine-ink);color:#1A0D11;box-shadow:none}
:root[data-theme="dark"] .instb svg.i{color:#1A0D11}
:root[data-theme="dark"] .instb:hover{background:#D896A9;border-color:#D896A9}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .instb{background:var(--wine-ink);border-color:var(--wine-ink);color:#1A0D11;box-shadow:none}:root:not([data-theme="light"]) .instb svg.i{color:#1A0D11}}
.instb::before{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px solid var(--wine-ink);opacity:0;pointer-events:none;animation:instPulse 2.4s ease-out 1.5s 3}
@keyframes instPulse{0%{opacity:.7;transform:scale(.92)}100%{opacity:0;transform:scale(1.25)}}
.instb-tip{position:absolute;top:calc(100% + 10px);right:0;z-index:60;padding:7px 12px;border-radius:10px;background:#1F1C1D;color:#fff;font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.22);opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.instb-tip::before{content:"";position:absolute;top:-6px;right:14px;border:6px solid transparent;border-top:0;border-bottom-color:#1F1C1D}
:root[data-theme="dark"] .instb-tip{background:#fff;color:#1F1C1D}
:root[data-theme="dark"] .instb-tip::before{border-bottom-color:#fff}
.instb.tipon .instb-tip{opacity:1;transform:none}
@media (hover:hover){.instb:hover .instb-tip{opacity:1;transform:none}}
@media (max-width:820px){.instb{width:36px;height:36px}.instb-tip{right:-6px}}
@media (prefers-reduced-motion:reduce){.instb::before{animation:none}.instb-tip{transition:none}}