/* ═══ Avisos globales del sitio (R-46) ═════════════════════════════════
   Se carga en TODAS las páginas (legacy y v2), después de base.css. Los
   pintan js/v2/notices.js (estado del sitio, API caída, reclamo respondido,
   popup promo) y js/apertura.js (franja de las páginas de rescate).
   Los avisos flotantes (toast) son de base.css §14 y ui.js.
   Mobile-first: lo de afuera de los @media es el celular de 390 px.

   Colores según la tabla de la rareza (D-16):
     azul    aviso del staff (ControlPanel)
     naranja lo tuyo pendiente o que te bloquea (reclamo respondido, apertura)
     rojo    algo anda mal (API caída) */

/* ══ 1. Franja arriba de la página ══════════════════════════════════════
   Va antes de .page-wrapper: queda arriba del header y se va al bajar.
   <aside class="site-notice site-notice--attention" aria-label="…">
     <strong class="site-notice__title">…</strong><span>…</span>
     <a class="button button--secondary button--small" href="…">…</a>
   </aside> */
.site-notice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);
  padding: var(--space-xs) var(--page-gutter);
  border-top: var(--accent-border-width) solid var(--color-data);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  line-height: var(--line-height-compact);
  text-align: center;
}
.site-notice__title {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}
/* Lo tuyo pendiente: reclamo con respuesta, la apertura que esperás */
.site-notice--attention {
  border-top-color: var(--color-attention);
  border-bottom-color: var(--color-attention-border);
  background: var(--color-attention-surface);
}
.site-notice--attention .site-notice__title { color: var(--color-attention); }
/* Algo anda mal: no se puede contactar al servidor */
.site-notice--danger {
  border-top-color: var(--color-danger);
  border-bottom-color: var(--color-danger-border);
  background: var(--color-danger-surface);
}
.site-notice--danger .site-notice__title { color: var(--color-danger); }
/* Cuenta regresiva de la franja de apertura (naranja: lo que esperás) */
.site-notice__timer {
  color: var(--color-attention);
  font-family: var(--font-display);
  font-size: var(--font-size-heading-sm);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-none);
  font-variant-numeric: tabular-nums;
}

/* ══ 2. Pantalla completa que no se cierra ══════════════════════════════
   Aviso "overlay" del ControlPanel y cartel de API caída. Es un <dialog>
   abierto con showModal(): queda en la capa superior del navegador y deja
   inerte lo de atrás. Sin [open] el navegador lo oculta solo (por eso el
   display va recién con [open]).
   <dialog class="site-overlay site-overlay--danger" aria-labelledby="…">
     <div class="site-overlay__panel">…</div>
   </dialog> */
.site-overlay {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: var(--space-xl) var(--page-gutter);
  border: 0;
  background: var(--color-bg);
  color: var(--color-text);
  overflow-y: auto;
}
.site-overlay[open] {
  display: grid;
  place-items: center;
}
.site-overlay::backdrop { background: var(--color-bg); }

.site-overlay__panel {
  width: 100%;
  max-width: var(--modal-max-width);
  padding: var(--space-lg) var(--space-md);
  border: 1px solid var(--color-border-strong);
  border-top: var(--accent-border-width) solid var(--color-data);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
}
.site-overlay--danger .site-overlay__panel { border-top-color: var(--color-danger); }

.site-overlay__icon {
  margin-bottom: var(--space-sm);
  color: var(--color-danger);
}
.site-overlay__eyebrow {
  margin-bottom: var(--space-2xs);
  color: var(--color-data);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}
.site-overlay__title {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--font-size-heading-lg);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-heading);
  overflow-wrap: anywhere;
}
.site-overlay--danger .site-overlay__title { color: var(--color-danger); }
.site-overlay__message {
  margin-top: var(--space-xs);
  color: var(--color-text-muted);
}
.site-overlay__meta {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
/* Una o dos acciones: con una sola ocupa todo el ancho */
.site-overlay__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

@media (min-width: 900px) {
  .site-overlay__panel { padding: var(--space-xl); }
}

/* ══ 3. Popup promocional ═══════════════════════════════════════════════
   Compone el diálogo modal de base.css §13 (ui.js lo maneja: Escape, click
   afuera y "Cerrar"). Acá solo lo propio de la promo. */
.promo-dialog__header { margin-bottom: var(--space-xs); }
.promo-dialog__eyebrow {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}
/* Sin bajada, la X igual va a la derecha */
.promo-dialog__close { margin-left: auto; }
.promo-dialog__image {
  width: 100%;
  height: auto;
  margin-bottom: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
/* El dato que vende la promo (el bonus, el precio): dorado = lo valioso */
.promo-dialog__highlight {
  margin-top: var(--space-2xs);
  color: var(--color-valuable);
  font-family: var(--font-display);
  font-size: var(--font-size-heading-md);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-heading);
}
/* El botón va siempre separado de lo de arriba, haya descripción o no */
.promo-dialog .dialog__body { margin-bottom: 0; }
.promo-dialog .button--block { margin-top: var(--space-md); }