/* [Pulso-Supabase] 🔔 Centro de notificaciones (avisos.js) */
.cf-btn-avisos { position: relative; }
.cf-avisos-n { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: linear-gradient(135deg, #f43f5e, #e11d48); color: #fff;
  font-size: 10.5px; font-weight: 900; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface, #181c2e); pointer-events: none; }
.cf-avisos-n[hidden] { display: none; }
html.cf-mov .cf-avisos-hay .cf-avisos-n { animation: cf-av-latir 2.4s ease-in-out infinite; }
@keyframes cf-av-latir { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.25); } 20% { transform: scale(1); } }
.cf-mbar-avisos { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--t1); cursor: pointer; }
.cf-avisos-svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cf-avisos { width: min(460px, calc(100vw - 24px)); max-height: min(86vh, 760px); overflow-y: auto; }
/* 📱 (tanda visual 22-oct) en el celular la hoja va de borde a borde como las demás: antes medía 100vw − 24 px pegada a la izquierda y las tarjetas se cortaban a la derecha */
@media (max-width: 700px) { .cf-avisos { width: auto; left: 0; right: 0; max-height: 88vh; overflow-x: hidden; } .cf-avisos-tabs button, .cf-avisos-cfg { min-height: 40px; } }
.cf-avisos-i, .cf-avisos-nov { overflow-wrap: anywhere; }
.cf-avisos-head { margin: 0 40px 10px 0; } .cf-avisos-head b { font-size: 18px; }
.cf-avisos-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: color-mix(in srgb, var(--t2) 10%, transparent); margin-bottom: 10px; }
.cf-avisos-tabs button { padding: 8px 6px; border: 0; border-radius: 9px; background: transparent; color: var(--t2); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.cf-avisos-tabs button.on { background: var(--surface); color: var(--t1); box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .4); }
.cf-avisos-tabs em { font-style: normal; display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 99px; background: #f43f5e; color: #fff; font-size: 11px; }
.cf-avisos-l { display: grid; gap: 6px; }
.cf-avisos-g { margin: 8px 2px 0; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--t2); }
.cf-avisos-i { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--t1); font: inherit; font-size: 13px; }
button.cf-avisos-i { cursor: pointer; } button.cf-avisos-i:hover { border-color: color-mix(in srgb, #a855f7 55%, var(--border)); }
.cf-avisos-i > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cf-avisos-i small { color: var(--t2); font-size: 12px; }
.cf-avisos-ico { flex: 0 0 auto; width: 26px; text-align: center; font-size: 16px; }
.cf-avisos-t { flex: 0 0 auto; color: var(--t2); font-size: 11.5px; white-space: nowrap; }
.cf-avisos-i.nuevo { border-color: color-mix(in srgb, #a855f7 50%, var(--border)); background: color-mix(in srgb, #a855f7 7%, var(--surface)); box-shadow: inset 3px 0 0 #a855f7; }
.cf-avisos-i.mal { box-shadow: inset 3px 0 0 var(--red); } .cf-avisos-i.ok { box-shadow: inset 3px 0 0 var(--green); }
.cf-avisos-nov b { font-size: 13.5px; }
.cf-avisos-vacio { padding: 28px 10px; text-align: center; color: var(--t2); }
/* ⚙️ prender y apagar alertas */
.cf-avisos-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cf-avisos-cfg { padding: 6px 11px; border-radius: 99px; border: 1px solid var(--border); background: transparent; color: var(--t2); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.cf-avisos-cfg:hover, .cf-avisos-cfg.on { border-color: #a855f7; color: var(--t1); background: color-mix(in srgb, #a855f7 12%, transparent); }
.cf-avisos-ayuda { margin: 0 0 10px; font-size: 13px; color: var(--t2); line-height: 1.45; }
.cf-avisos-pref { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--t1); font: inherit; cursor: pointer; }
.cf-avisos-pref span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cf-avisos-pref b { font-size: 13.5px; } .cf-avisos-pref small { color: var(--t2); font-size: 12px; }
.cf-avisos-pref .ae-sw { flex: 0 0 auto; width: 40px; height: 23px; border-radius: 99px; background: color-mix(in srgb, var(--t2) 30%, transparent); position: relative; transition: background .2s; }
.cf-avisos-pref .ae-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.cf-avisos-pref.on .ae-sw { background: linear-gradient(135deg, #f43f5e, #a855f7); } .cf-avisos-pref.on .ae-sw::after { transform: translateX(17px); }
.cf-avisos-off { display: block; width: 100%; margin: 0 0 8px; padding: 7px 10px; border-radius: 10px; border: 1px dashed var(--border); background: transparent; color: var(--t2); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.cf-avisos-off:hover { color: var(--t1); border-color: #a855f7; }
/* 📢 novedades: el super administrador decide si van a todos los negocios */
.cf-nov-pub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; font-size: 11.5px; font-weight: 700; color: #fbbf24; }
.cf-nov-pub.on { color: #4ade80; }
/* (tanda visual 22-oct) tema claro: el ámbar y el verde claros quedaban a ~1,5:1 sobre blanco */
:root[data-theme="light"] .cf-nov-pub { color: var(--amber); } :root[data-theme="light"] .cf-nov-pub.on { color: var(--green); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .cf-nov-pub { color: var(--amber); } :root:not([data-theme="dark"]) .cf-nov-pub.on { color: var(--green); } }
.cf-nov-pub button { padding: 4px 10px; border-radius: 99px; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); background: transparent; color: var(--t1); font: inherit; font-size: 11.5px; cursor: pointer; }
.cf-nov-pub .cf-nov-pub-b { border: 0; color: #fff; background: linear-gradient(135deg, #ec4899, #8b5cf6); }
.cf-nov-pub button:disabled { opacity: .5; cursor: wait; }

/* 🔔 (27-oct) avisos emergentes agrupados: «×3» cuando llegan varios parecidos seguidos */
.cf-toast-n { display: inline-block; margin-left: 2px; padding: 0 7px; border-radius: 99px; background: color-mix(in srgb, currentColor 18%, transparent); font-size: 12px; font-weight: 800; line-height: 1.6; font-variant-numeric: tabular-nums; vertical-align: 1px; }
html.cf-mov .cf-toast-n { animation: cf-toast-n .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes cf-toast-n { from { transform: scale(.6); opacity: 0; } }
/* 📱 dentro de Pulpo, debajo de su barra de arriba (o de la del chat abierto) en vez de taparla; avisos.js mide dónde termina */
@media (max-width: 759px) { html.pp-abierto #cf-toast.cf-toast { top: var(--cf-toast-top, calc(66px + env(safe-area-inset-top, 0px))); max-width: calc(100vw - 32px); } }
/* ↩️ con la barra de deshacer abierta, el aviso sale encima de ella (antes quedaba detrás) */
html:not(.pp-abierto):has(#cf-deshacer.cf-show) #cf-toast.cf-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }