/* TOAST */
.toast { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--texto); color: white; padding: 11px 22px; border-radius: 30px; font-size: 13px; font-weight: 700; z-index: 999; opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; white-space: nowrap; box-shadow: 0 8px 28px rgba(0,0,0,0.25); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* BANNER OFFLINE */
#offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 9998; background: #7f1d1d; color: white; font-size: 13px; font-weight: 700; text-align: center; padding: 10px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; transform: translateY(-100%); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
#offline-banner.visible { transform: translateY(0); }
#offline-banner .offline-dot { width: 8px; height: 8px; border-radius: 50%; background: #fca5a5; flex-shrink: 0; animation: pulse-dot 1.2s infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
/* NOTIFICACIONES */
.notif-fab { position: fixed; right: 16px; bottom: 172px; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--verde); color: white; box-shadow: var(--sombra-lg); z-index: 850; display: none; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; }
.notif-fab:active { transform: scale(0.96); }
.notif-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 12px; background: var(--rojo); color: white; border: 2px solid white; font-size: 10px; font-weight: 900; display: none; align-items: center; justify-content: center; }
.notif-panel { position: fixed; inset: 0; z-index: 930; background: rgba(15,25,35,0.45); display: none; align-items: flex-end; }
.notif-panel.show { display: flex; }
#notif-panel { z-index: 10020; }
#notif-panel .notif-sheet { max-height: min(85vh, calc(100dvh - env(safe-area-inset-top) - 16px)); }
#notif-panel .notif-head { flex-shrink: 0; flex-wrap: wrap; gap: 10px; }
#notif-panel .notif-actions { flex-wrap: wrap; }
#notif-panel .notif-list { min-height: 0; overscroll-behavior: contain; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
#notif-panel .notif-txt { overflow-wrap: anywhere; }
.notif-sheet { width: 100%; max-height: 78vh; overflow: hidden; background: white; border-radius: 24px 24px 0 0; box-shadow: var(--sombra-lg); display: flex; flex-direction: column; }
.notif-head { padding: 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gris2); }
.notif-title { font-size: 17px; font-weight: 900; color: var(--texto); }
.notif-actions { display: flex; gap: 8px; align-items: center; }
.notif-close, .notif-clear { border: none; border-radius: 20px; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; }
.notif-close { width: 34px; height: 34px; border-radius: 50%; background: var(--gris); color: var(--texto); font-size: 18px; }
.notif-clear { background: var(--verde3); color: var(--verde2); padding: 8px 12px; font-size: 11px; }
.notif-list { overflow-y: auto; padding: 10px 14px 24px; }
.notif-item { background: var(--gris); border: 1px solid var(--gris2); border-radius: 16px; padding: 12px; margin-bottom: 10px; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.notif-item.unread { background: var(--verde3); border-color: var(--verde4); }
.notif-delete { width: 28px; height: 28px; border: none; border-radius: 50%; background: rgba(220,38,38,0.10); color: var(--rojo); font-size: 16px; font-weight: 900; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.notif-delete:active { transform: scale(.92); background: rgba(220,38,38,0.18); }
.notif-ico { width: 34px; height: 34px; border-radius: 12px; background: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }
.notif-txt { flex: 1; min-width: 0; }
.notif-txt strong { display: block; font-size: 13px; font-weight: 900; color: var(--texto); margin-bottom: 2px; }
.notif-txt span { display: block; font-size: 12px; color: var(--texto2); line-height: 1.35; }
.notif-time { font-size: 10px; color: var(--texto3); font-weight: 700; margin-top: 5px; }


/* Tarjetas de avisos compactas, conservando el mensaje completo. */
#notif-panel .notif-list{padding-left:10px;padding-right:10px}
#notif-panel .notif-item{padding:9px 10px;gap:8px;margin-bottom:7px;border-radius:12px}
#notif-panel .notif-ico{width:28px;height:28px;border-radius:9px;font-size:15px}
#notif-panel .notif-txt strong{font-size:12px;line-height:1.3;margin-bottom:2px}
#notif-panel .notif-txt span{font-size:11.5px;line-height:1.35}
#notif-panel .notif-time{font-size:9px;margin-top:3px}
#notif-panel .notif-delete{width:28px;height:28px;font-size:14px}