/* ===========================
   NOTIFAST
   =========================== */

.notifbar-wrapper {
  margin-top: 12px;
}

.notifbar {
  width: 100%;
  background: var(--panel);
  border-top: 1px solid var(--panel-surf-border);
  border-bottom: 1px solid var(--panel-surf-border);
  box-shadow: var(--panel-surf-shadow);
  overflow: hidden;
}

/* ===========================
   MAIN AREA
   =========================== */

.notifbar-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  user-select: none;
}

.notifbar-main.is-clickable {
  cursor: pointer;
}

.notifbar-main.is-clickable:hover {
  background: var(--hover);
}

.notifbar-main.is-clickable:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.notifbar-pill {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  color: var(--text);
}

.notifbar-pill--tip {
  background: rgba(0, 209, 255, 0.12);
  color: var(--brand, #00d1ff);
}

.notifbar-pill--law {
  background: rgba(250, 204, 21, 0.22);
  color: #e6b800;
}

.notifbar-pill i {
  font-size: 14px;
}

.notifbar-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  color: var(--muted, #9fb0d0);
}

.notifbar-text strong {
  color: var(--text-strong, #f5f7ff);
  margin-right: 4px;
}

.notifbar-text-inner {
  display: inline;
}

#notifMessage {
  display: inline;
}

.notifbar-more {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand, #00d1ff);
  text-decoration: underline;
  white-space: nowrap;
  display: none;
}

.notifbar-main.is-clickable .notifbar-more {
  display: inline;
}

.notifbar-main.is-clickable:hover .notifbar-more {
  text-decoration: none;
}

/* ===========================
   NAV CELLS
   =========================== */

.notif-nav {
  border: none;
  background: transparent;
  color: var(--muted, #9fb0d0);
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.notif-nav i {
  font-size: 14px;
  line-height: 1;
}

.notif-nav:hover {
  background: var(--hover);
  color: var(--text);
}

.notif-nav:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}


/* ===========================
   DESKTOP
   Texto centrado + flechas juntas a la derecha
   =========================== */

@media (min-width: 821px) {

  .notifbar {
    display: flex;
    align-items: stretch;
    justify-content: center;
  }

  /* texto */
  .notifbar-main {
    flex: 0 1 clamp(680px, 72vw, 1220px);
    max-width: 1220px;
  }

  /* contenedor de flechas */
  .notif-nav--prev,
  .notif-nav--next {
    flex: 0 0 52px;
    min-width: 52px;
    min-height: 100%;
  }

  /* mover ambas flechas al final */
  .notif-nav--prev {
    order: 2;
  }

  .notif-nav--next {
    order: 3;
  }

}

/* ===========================
   MOBILE
   L | C | R
   =========================== */

@media (max-width: 820px) {
  .notifbar {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    grid-template-rows: 1fr;
    align-items: stretch;
  }

  .notif-nav--prev {
    grid-column: 1;
    grid-row: 1;
  }

  .notifbar-main {
    grid-column: 2;
    grid-row: 1;
    padding: 10px 8px;
  }

  .notif-nav--next {
    grid-column: 3;
    grid-row: 1;
  }

  .notif-nav {
    min-width: 52px;
    min-height: 100%;
  }

  .notifbar-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .notifbar-more {
    display: none !important;
  }
}

/* ===========================
   ANIMATIONS
   =========================== */

.notif-slide-out-next {
  animation: notifSlideOutNext 0.22s ease forwards;
}
.notif-slide-in-next {
  animation: notifSlideInNext 0.22s ease forwards;
}
.notif-slide-out-prev {
  animation: notifSlideOutPrev 0.22s ease forwards;
}
.notif-slide-in-prev {
  animation: notifSlideInPrev 0.22s ease forwards;
}

@keyframes notifSlideOutNext {
  to {
    transform: translateX(-16px);
    opacity: 0;
  }
}
@keyframes notifSlideInNext {
  from {
    transform: translateX(16px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes notifSlideOutPrev {
  to {
    transform: translateX(16px);
    opacity: 0;
  }
}
@keyframes notifSlideInPrev {
  from {
    transform: translateX(-16px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}