/* ============================================================
   APEX NOTIFICATIONS — la hoja (Fase 8)

   TODA regla de este archivo empieza por `.nt-`, y hay una prueba que
   lo comprueba. Es la misma garantía que `.al-` le da a Alertas,
   `.cal-` al Calendario y `.mkw-` a Markets: sin ella, una hoja
   cargada tarde puede tocar cualquier pantalla del producto.

   La campana vive en el cromo (sidebar y topbar móvil) y por eso es
   el único trozo de esta hoja que se pinta fuera de `#view-
   notifications`. Sigue llevando el prefijo, así que sigue sin poder
   tocar nada que no sea suyo.

   Ni un color escrito a mano. El punto de «sin leer» y la insignia de
   la campana usan `--blue` —el carmesí de marca— en DOSIS mínima: un
   punto de 7 px y una insignia de dos cifras. Nunca como relleno de
   una fila: un aviso no leído no es una alarma.
   ============================================================ */
/* ============================================================
   UNA MEDIDA

   Sin tope de ancho, la fila saltaba del titular del aviso a su papelera
   a más de mil píxeles y el estado vacío estiraba su caja sobre
   trescientos de nada. Es la misma decisión que ya tomaron las tres
   superficies de inversión (920 px), y se aplica a los bloques de
   primer nivel porque `#notificationsArea` es un id y TODA regla de
   esta hoja tiene que empezar por `.nt-`.
   ============================================================ */
.nt-summary, .nt-note, .nt-state, .nt-group, .nt-empty, .nt-list.is-loading{
  max-width:920px;
}

.nt-summary{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-4); flex-wrap:wrap; margin:0 0 var(--space-5);
}
.nt-count{ margin:0; font-size:var(--text-body-sm-size); color:var(--muted); }
.nt-count strong{
  color:var(--text); font-family:var(--font-num); font-variant-numeric:tabular-nums;
}
.nt-note{
  margin:calc(var(--space-4) * -1) 0 var(--space-5);
  font-size:var(--text-caption-size); color:var(--muted2);
}

.nt-state{
  margin:0 0 12px; padding:10px 12px;
  background:var(--surface2); border-radius:var(--r-sm);
  font-size:var(--text-body-sm-size); color:var(--muted);
}
.nt-state.is-down{ color:var(--text); }

/* ============================================================
   LOS TRAMOS — «Hoy», «Ayer», «Antes»

   Un epígrafe con filete, igual que los grupos de Alertas: lo que
   separa un tramo del siguiente es el aire y una línea de 1 px, no
   una tarjeta. Es la regla de elevación del sistema — apoyado lleva
   borde, no sombra.
   ============================================================ */
.nt-group{ margin:0 0 var(--space-6); }
.nt-group-h{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3);
  margin:0 0 4px; padding:0 0 8px; border-bottom:1px solid var(--border);
  font-size:var(--text-body-size); font-weight:700; letter-spacing:-0.01em; color:var(--text);
}
.nt-group-n{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:var(--text-caption-size); font-weight:600; color:var(--muted2);
}

.nt-list{ list-style:none; margin:0; padding:0; }

/* LA FILA. Una rejilla de dos columnas: el punto de estado y el
   cuerpo. El punto ocupa su columna SIEMPRE, también cuando está
   apagado — si no, las filas leídas y las no leídas alinearían su
   texto en sitios distintos y la lista se leería como si tuviera dos
   sangrías. Es el mismo motivo por el que una celda del calendario
   pinta su contenedor de puntos vacío. */
.nt-item{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-3);
  align-items:start; padding:14px 0;
  border-bottom:1px solid var(--border-soft);
}
.nt-item:last-child{ border-bottom:0; }

.nt-dot{
  width:7px; height:7px; border-radius:50%;
  background:transparent; margin-top:7px;
}
.nt-item.is-unread .nt-dot{ background:var(--blue); }

.nt-body{ min-width:0; }

.nt-kind{
  margin:0 0 2px; font-size:var(--text-caption-size); font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--muted2);
}
.nt-title{
  margin:0 0 4px; font-size:var(--text-body-size); font-weight:600;
  line-height:1.35; color:var(--text);
}
/* EL PESO ES LA SEÑAL, no un fondo de color. Una fila no leída pesa
   más; una leída se apaga. Las dos siguen siendo legibles. */
.nt-item.is-unread .nt-title{ font-weight:700; }
.nt-item:not(.is-unread) .nt-title{ color:var(--muted); font-weight:500; }

.nt-line{
  margin:0 0 3px; font-size:var(--text-body-sm-size); color:var(--muted);
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
}
.nt-meta{
  margin:0; font-size:var(--text-caption-size); color:var(--muted2);
}

.nt-acts{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2);
  margin-top:10px;
}

/* EL VACÍO. Con contorno porque se puede pulsar: un estado vacío sin
   caja se lee como texto perdido en la página. */
.nt-empty{
  padding:var(--space-6); border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface);
}
.nt-h{ margin:0 0 6px; font-size:var(--text-h3-size); font-weight:700; color:var(--text); }
.nt-sub{
  margin:0 0 var(--space-5); max-width:56ch;
  font-size:var(--text-body-sm-size); line-height:1.6; color:var(--muted);
}
.nt-empty-acts{ display:flex; flex-wrap:wrap; gap:var(--space-3); }

.nt-skel{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--space-4);
  padding:15px 0; border-bottom:1px solid var(--border-soft);
}
.nt-skel span{ height:12px; border-radius:6px; }
.nt-skel-a{ width:52%; }
.nt-skel-b{ width:38%; justify-self:end; }
.nt-list.is-loading{ pointer-events:none; }

/* ============================================================
   LA CAMPANA — el cromo

   Compone `ui-icon-btn` del sistema de diseño: esta hoja solo aporta
   lo que es suyo, que es la posición de la insignia. No redefine ni
   su relleno ni su tinta — la regla de composición que
   `tests/design-system.mjs` comprueba.
   ============================================================ */
.nt-bell{ position:relative; }
.nt-badge{
  position:absolute; top:-2px; right:-2px;
  min-width:15px; height:15px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; background:var(--blue-fill); color:#fff;
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:11px; font-weight:700; line-height:1;
  pointer-events:none;
}
/* `hidden` solo aporta el `display:none` del navegador, y esta hoja le
   da a la insignia un `display:flex` propio: sin esta regla el
   contador se quedaría pintado vacío. Es la trampa que este proyecto
   ya pagó con el «Cargando reseñas reales…» de la portada. */
.nt-badge[hidden]{ display:none; }

@media (max-width:640px){
  .nt-summary{ gap:var(--space-3); }
  .nt-item{ padding:13px 0; }
  /* Las acciones pasan a fila desplazable en vez de envolverse en tres
     líneas: a 390 px una fila con cuatro botones envueltos ocupa más
     que el propio aviso. */
  .nt-acts{ gap:6px; }
}