/* ==========================================================================
   ÓNIX · NOTIFICACIONES (dropdown + panel)
   Requiere: onx-layout.css (tokens + estilos base)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botón de notificaciones + indicador de no leídas
   -------------------------------------------------------------------------- */
.btn-icon.notif-btn { position: relative; }

.btn-icon.notif-btn .notif-dot {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #E11D48;
  box-shadow: 0 0 0 2px var(--surface, #fff);
  display: none;
}

.btn-icon.notif-btn.has-unread .notif-dot { display: block; }

/* --------------------------------------------------------------------------
   Dropdown (lista rápida)
   -------------------------------------------------------------------------- */
.notif-wrap { position: relative; display: inline-block; }

.notif-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 340px;
  max-width: min(92vw, 340px);
  background: var(--surface);
  color: var(--texto);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 1050;
  transform-origin: top right;

  opacity: 0;
  transform: translateY(-6px) scale(.985);
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .18s ease,
    transform .22s cubic-bezier(.2,.9,.2,1),
    visibility 0s linear .22s;
  will-change: opacity, transform;
}

/* estado abierto */
.notif-dropdown.open{
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity .18s ease,
    transform .22s cubic-bezier(.2,.9,.2,1),
    visibility 0s;
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .notif-dropdown{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

.notif-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}

/* Layout del header del dropdown:
   - Por defecto: título a la izquierda y contador a la derecha (inline)
   - Con ".has-viewall": contador debajo del título (stacked) para dar espacio al botón */
.notif-head-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  line-height: 1.15;
}

.notif-head-left strong {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.notif-head-count {
  display: inline-flex;
  margin: 0 0 0 auto;
  font-weight: 700;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* Cuando existe el botón "Ver todas", el contador baja debajo del título */
.notif-head.has-viewall .notif-head-left {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  width: 100%;
  flex: 1 1 auto;
}

.notif-head.has-viewall .notif-head-count { margin-left: 0; }

/* Botón "Ver todas" dentro del header del dropdown */
#notif-dropdown .notif-viewall {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-left: 8px;
}

.notif-list { max-height: 360px; overflow: auto; }

.notif-item,
.notif-empty {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
}

.notif-item {
  transition: background .24s ease, color .24s ease;
  will-change: background, color;
}

.notif-item .notif-msg,
.notif-item .notif-time {
  transition: color .24s ease;
}

.notif-item:hover { background: var(--link-activo-bg); }

.notif-list .notif-item:hover,
.notif-list .notif-item:focus-visible {
  color: var(--texto);
  background: var(--link-activo-bg);
  text-decoration: none;
  outline: none;
}

.notif-list .notif-item:hover .notif-msg,
.notif-list .notif-item:focus-visible .notif-msg {
  color: var(--link-activo);
}

.notif-list .notif-item:hover .notif-time,
.notif-list .notif-item:focus-visible .notif-time {
  color: var(--muted);
}

.notif-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primario);
  margin-top: 6px;
  flex: 0 0 auto;
}

.notif-body { display: grid; gap: 3px; min-width: 0; }

.notif-msg {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}

.notif-time { font-size: 11px; color: var(--muted); }

.notif-empty { color: var(--muted); }

.notif-foot {
  border-top: 1px solid var(--line);
  padding: 8px 12px;
  display: flex;
  justify-content: flex-end;
}

.notif-foot .notif-all {
  font-weight: 700;
  font-size: 13px;
  color: var(--link-activo);
  text-decoration: none;
}

.notif-foot .notif-all:hover { text-decoration: none; }

/* Variante "link button" para acciones del footer */
.notif-all { background-color: var(--surface); border: none; }

/* --------------------------------------------------------------------------
   Panel "Ver todas" (drawer derecho)
   -------------------------------------------------------------------------- */
.notif-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1045;
}

.notif-panel {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  width: min(440px, 92vw);
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform .22s ease;
}

body.notif-panel-open .notif-panel { transform: translateX(0); }

.notif-panel[hidden],
.notif-panel-backdrop[hidden] {
  display: none !important;
}

/* Estética del drawer */
.notif-panel {
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  overflow: hidden;
}

/* Header del panel (sticky) */
.notif-panel-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, var(--link-activo-bg));
  backdrop-filter: blur(6px);
}

.notif-panel-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.notif-panel-title strong {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .2px;
}

.notif-panel-count {
  font-weight: 700;
  color: var(--muted);
  font-size: 12px;
}

/* Botón cerrar */
.notif-panel-close {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.notif-panel-close:hover,
.notif-panel-close:focus-visible {
  background: var(--link-activo-bg);
  color: var(--link-activo);
  outline: none;
}

.notif-panel-close:active { transform: scale(.98); }

/* Cuerpo del panel */
.notif-panel-body {
  padding: 8px 0;
  flex: 1 1 auto;
  min-height: 0;
}

/* Ajuste de espaciado para items dentro del panel */
#notif-panel .notif-item { padding: 12px 16px; }
#notif-panel .notif-bullet { margin-top: 7px; }

/* Footer del panel */
.notif-panel-foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-top: 1px solid var(--line);
  padding: 10px 16px;
  background: color-mix(in srgb, var(--surface) 92%, var(--link-activo-bg));
}

/* Acción principal del panel (estilo link) */
.notif-panel-foot .notif-all {
  font-weight: 800;
  font-size: 13px;
  color: var(--link-activo);
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 12px;
  transition: background .18s ease, transform .18s ease;
}

.notif-panel-foot .notif-all:hover,
.notif-panel-foot .notif-all:focus-visible {
  background: var(--link-activo-bg);
  outline: none;
}

.notif-panel-foot .notif-all:active { transform: scale(.98); }

/* --------------------------------------------------------------------------
   Compatibilidad con helpers de scroll:
   En algunas vistas, onx-scroll-y limita la altura (ej. 70vh). Para el panel,
   el body debe ocupar el espacio disponible y el footer quedarse al fondo.
   -------------------------------------------------------------------------- */
#notif-panel .notif-panel-body {
  max-height: none !important;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  padding-right: 6px;
  overscroll-behavior: contain;
}

#notif-panel .notif-panel-foot {
  margin-top: auto;
  position: relative;
}

/* --------------------------------------------------------------------------
   Transiciones de apertura/cierre del panel y el backdrop
   -------------------------------------------------------------------------- */
.notif-panel {
  will-change: transform, opacity;
  opacity: 1;
  transform: translateX(105%) scale(.985);
  transition:
    transform .26s cubic-bezier(.2,.9,.2,1),
    opacity .20s ease;
}

body.notif-panel-open .notif-panel {
  transform: translateX(0) scale(1);
  opacity: 1;
}

.notif-panel-backdrop {
  opacity: 0;
  transition: opacity .22s ease;
  will-change: opacity;
}

body.notif-panel-open .notif-panel-backdrop { opacity: 1; }

/* --------------------------------------------------------------------------
   Animación escalonada (stagger) para items
   Requiere clases en <body>: .notif-panel-opening, .notif-dd-opening
   -------------------------------------------------------------------------- */
#notif-panel .notif-item,
#notif-dropdown .notif-item {
  opacity: 1;
  transform: none;
}

body.notif-panel-opening #notif-panel .notif-item {
  opacity: 0;
  transform: translateX(10px);
  animation: onx-notif-in .34s cubic-bezier(.2,.9,.2,1) forwards;
  animation-delay: calc(var(--stagger-i, 0) * 32ms);
}

body.notif-dd-opening #notif-dropdown .notif-item {
  opacity: 0;
  transform: translateY(-4px);
  animation: onx-notif-dd-in .24s ease forwards;
  animation-delay: calc(var(--stagger-i, 0) * 22ms);
}

@keyframes onx-notif-in {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes onx-notif-dd-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .notif-panel,
  .notif-panel-backdrop { transition: none !important; }

  body.notif-panel-opening #notif-panel .notif-item,
  body.notif-dd-opening #notif-dropdown .notif-item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}