/* ============================================================================
   NOTIFICACIONES — la CAJA de la campana
   ============================================================================

   La campana y su badge ya vivían en `ds/header.css` desde 2026-07-27; lo que
   faltaba era esto: el contenido de la caja. Se queda **mudado** de `main.css`
   (bloque "NOTIFICATIONS", líneas 850-962), no duplicado — main.css está en este
   mismo repo, así que mover es seguro y es lo que ya se hizo con los controles a
   pelo y con `.text-red`.

   POR QUÉ AHORA: el front nuevo NO importa `main.css` (es el CSS legacy del
   dashboard PHP, y hay una prueba que lo verifica). Mientras estas reglas
   vivieran allá, la campana de React podía pedir los datos y pintar las filas, y
   la caja salía SIN NINGÚN ESTILO: sin ancho, sin scroll, sin separadores y sin
   el atenuado de "ya leída". Es el mismo modo de fallo que ya nos costó
   `.screen-reader-text`, `.text-red`, `.help` y `.no_post` — una regla varada
   fuera del DS.

   ── ⚠ LOS DOS ALIAS QUE HABÍA QUE RESOLVER AL MUDAR ────────────────────────

   El bloque original usaba `--info-600` y `--error-600`, y **esos dos tokens los
   declara `main.css`, no el DS**:

       main.css:42   --error-600: var(--red-600);
       main.css:45   --info-600:  var(--blue-600);

   Copiarlos tal cual habría dejado tres declaraciones apuntando a una variable
   que en el front no existe, y una `color:` que no resuelve **no cae al valor
   heredado: se cae entera, en silencio**. El enlace de "Ver más" y el botón de
   "Marcar todas" habrían salido del color del texto en vez de azules, y el error
   de carga gris en vez de rojo — sin un solo aviso en consola. Es exactamente lo
   que ya pasó al mudar `.text-red` con `--error-500`, y por eso aquí se escriben
   los PRIMITIVOS. El valor es el mismo (#1570EF y #C0362D): no mueve un píxel en
   el dashboard de PHP.

   ── DE QUIÉN ES CADA COSA ──────────────────────────────────────────────────

   El shell de la caja (fondo, sombra, pico, volteo hacia arriba) NO está aquí:
   es `.bubble.bubble--box` de `ds/bubble.css`. Aquí solo el ancho, la lista y las
   filas. El ancho va por la VARIABLE del componente y no por `width` porque
   `.notifications_box` (0,1,0) EMPATA con `.bubble--box` (0,1,0) y perdería por
   orden de carga — está anotado también en bubble.css.
   ========================================================================== */

.notifications_box {
  --bubble-box-width: 360px;
  max-width: 92vw;
}

.notifications_box > .notifications_list {
  max-height: 340px;
  overflow-y: auto;
}

.notifications_box > .notifications_mark_all {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-top: 1px solid var(--neutral-200);
  background: var(--neutral-100);
  color: var(--blue-600); /* era --info-600 (alias de main.css) */
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  border-radius: 0 0 5px 5px;
}

.notifications_box > .notifications_mark_all:hover {
  background: var(--neutral-150);
}

/* ---- Filas ---------------------------------------------------------------
   Emparentadas con `dash_card`/`dash_tag` de la tarjeta de caducidad. */

.notification_row {
  padding: 12px 16px;
  border-bottom: 1px solid var(--neutral-100);
  font-size: 13px;
  text-transform: none;
  cursor: pointer;
  transition: background 0.2s;
}

.notification_row:last-child {
  border-bottom: none;
}

.notification_row:hover {
  background: var(--neutral-100);
}

/* Leída = atenuada. Es la única señal de "ya la viste" que tiene la lista, así
   que no es decoración: sin ella, marcar una no se nota. */
.notification_row.is_read {
  opacity: 0.6;
}

.notification_row_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.notification_title {
  font-weight: 600;
  color: var(--neutral-500);
}

.notification_body {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-primary);
}

.notification_row_foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.notification_date {
  font-size: 11px;
  color: var(--neutral-300);
}

.notification_cta {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-600); /* era --info-600 (alias de main.css) */
  text-decoration: none;
}

.notification_cta:hover {
  text-decoration: underline;
}

/* ---- Estados de la lista -------------------------------------------------- */

.notifications_empty,
.notifications_loading,
.notifications_error {
  padding: 20px 16px;
  text-align: center;
  font-size: 13px;
  text-transform: none;
  color: var(--neutral-300);
  cursor: default;
}

.notifications_error {
  color: var(--red-600); /* era --error-600 (alias de main.css) */
}