/* TURISTECH · Centro de notificaciones — estilos premium (Fase 2.5A · Bloque D) */
.notif-dropdown { width: min(360px, calc(100vw - 24px)); }
.notif-tabs button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .2s, color .2s; }
.notif-tabs button:focus-visible, .nc-chip:focus-visible, .nc-act:focus-visible, .notif-item:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.nc-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: linear-gradient(135deg, var(--teal), var(--ocean)); color: #fff; font-size: .6rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }

/* categorías */
.nc-cats { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); -webkit-overflow-scrolling: touch; }
.nc-cats::-webkit-scrollbar { display: none; }
.nc-chip { flex: 0 0 auto; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--border); background: transparent; color: var(--muted); font: 700 .64rem 'Plus Jakarta Sans', sans-serif; cursor: pointer; white-space: nowrap; transition: all .2s; }
.nc-chip:hover { color: var(--teal); border-color: rgba(11,206,175,.4); }
.nc-chip.on { background: rgba(11,206,175,.14); color: var(--teal); border-color: rgba(11,206,175,.45); }

/* lista */
.notif-list { max-height: min(380px, 60vh); overscroll-behavior: contain; }
.nc-item { position: relative; animation: ncIn .32s cubic-bezier(.25,.8,.25,1) both; animation-delay: calc(var(--i, 0) * 35ms); transition: background .15s, opacity .2s, transform .2s, max-height .2s; max-height: 160px; }
.nc-item .notif-time::before { content: attr(data-cat-label) ' · ' attr(data-time); }
.nc-item .notif-time[data-time=""]::before { content: attr(data-cat-label); }
.nc-item.nc-leave { opacity: 0; transform: translateX(14px); max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
.nc-swap { animation: ncSwap .22s ease both; }

/* acciones por ítem */
.nc-item .notif-item-act { flex-direction: column; opacity: .0; transition: opacity .15s; }
.nc-item:hover .notif-item-act, .nc-item:focus-within .notif-item-act { opacity: 1; }
@media (hover: none) { .nc-item .notif-item-act { opacity: 1; } }
.nc-act { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; padding: 0; }
.nc-act:hover { color: var(--teal); border-color: rgba(11,206,175,.45); background: rgba(11,206,175,.1); transform: translateY(-1px); }
.nc-act[data-act="hide"]:hover { color: #ff7875; border-color: rgba(255,120,117,.45); background: rgba(255,77,79,.08); }

/* contador */
.notif-badge { min-width: 16px; width: auto; padding: 0 4px; }
.notif-badge.nc-bump { animation: ncBump .45s cubic-bezier(.34,1.56,.64,1); }

@keyframes ncIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ncSwap { from { opacity: .3; } to { opacity: 1; } }
@keyframes ncBump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .nc-item, .nc-swap, .notif-badge.nc-bump { animation: none !important; transition: none !important; } }

/* móvil: el panel se ancla a la pantalla (no al botón) para no salirse del viewport */
@media (max-width: 640px) {
  .notif-dropdown { position: fixed; top: 68px; left: 12px; right: 12px; width: auto; transform-origin: top center; }
  .notif-list { max-height: calc(100vh - 330px); }
}

/* ── Fase 2.5B · Bloque B — campana móvil ─────────────────────────────────
   Debajo de 900 px el header oculta .nav-actions completo. Aquí solo se muestra la campana
   (misma DOM, misma lógica que en desktop; nada duplicado) junto a la hamburguesa. */
@media (max-width: 900px) {
  #navActions { display: flex; margin-left: auto; margin-right: 6px; gap: 0; }
  #navActions > *:not(.notif-wrapper) { display: none !important; }
  #navActions .btn-notif { width: 44px; height: 44px; font-size: 1.1rem; }
  #navActions .notif-badge { top: 2px; right: 2px; }
}

/* ── Bloque E — estados vacíos, skeletons, animaciones ── */
.nc-empty { display: grid; justify-items: center; gap: 6px; padding: 34px 22px; text-align: center; animation: ncPop .35s cubic-bezier(.25,.8,.25,1) both; }
.nc-empty-ic { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 22px; color: var(--teal); background: linear-gradient(135deg, rgba(11,206,175,.14), rgba(10,109,228,.14)); margin-bottom: 6px; }
.nc-empty-t { font: 800 .9rem 'Plus Jakarta Sans', sans-serif; color: #e8f0fe; }
.nc-empty-s { font-size: .78rem; color: #9fb0d0; line-height: 1.5; max-width: 220px; }
.nc-skels { padding: 6px 0; }
.nc-skel { display: flex; gap: 11px; padding: 13px 16px; }
.nc-skel i { display: block; border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 75%); background-size: 200% 100%; animation: ncShimmer 1.3s linear infinite; }
.nc-sk-ic { width: 34px; height: 34px; border-radius: 10px !important; flex: none; }
.nc-sk-b { flex: 1; display: grid; gap: 8px; align-content: center; }
.nc-sk-l1 { height: 10px; width: 62%; } .nc-sk-l2 { height: 8px; width: 90%; }
/* contraste WCAG AA sobre el fondo #0c1b36 */
.nc-item .notif-time { color: #9fb0d0; }
.notif-dropdown .notif-msg { color: #a9b8d6; }
.notif-tabs button, .nc-chip { color: #a9b8d6; }
.notif-tabs button.on, .nc-chip.on { color: #4fe0d2; }
/* hover / focus / escala */
.nc-chip:active, .notif-tabs button:active, .nc-act:active { transform: scale(.94); }
.nc-item:hover .notif-icon { transform: scale(1.06); }
.notif-icon { transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.btn-notif { transition: transform .2s, background .2s; }
.btn-notif:hover { transform: translateY(-1px); }
.btn-notif:active { transform: scale(.92); }
.btn-notif:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.notif-dropdown.open { animation: ncDrop .22s cubic-bezier(.25,.8,.25,1) both; }
@keyframes ncDrop { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ncPop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ncShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .nc-empty, .nc-skel i, .notif-dropdown.open, .notif-icon, .btn-notif { animation: none !important; transition: none !important; } }
#navActions .btn-notif { background: rgba(15, 39, 71, .58); border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
nav.scrolled #navActions .btn-notif { background: var(--tt-surface-2, #eef3f9); border-color: var(--tt-line, #dbe4f0); }

/* Bloque F — contraste AA del contador (blanco sobre degradado oscurecido) */
.nc-count, .notif-badge { background: linear-gradient(135deg, #0A8378, #1B62C8); color: #fff; }

/* móvil: botones de acción con área táctil mayor (columna compacta a la derecha) */
@media (max-width: 640px) { .nc-act { width: 30px; height: 30px; } .nc-item .notif-item-act { gap: 3px; } }