/* =============================================================
   MEDDIA · TOKENS GLOBALES
   Variables del sistema de diseño. Importar este archivo PRIMERO,
   antes de cualquier otro CSS.

   Recomendación de ubicación en Blazor:
   /Client/wwwroot/css/meddia-tokens.css
============================================================= */

:root {
  /* ===== Paleta Meddia ===== */
  --pink: #E91E80;
  --pink-hover: #C91870;
  --pink-soft: #FDE7F3;
  --pink-tint: #FFF4FA;

  /* ===== Tinta (texto y jerarquía) ===== */
  --ink: #111827;
  --ink-soft: #374151;
  --ink-muted: #6B7280;
  --ink-faint: #9CA3AF;

  /* ===== Fondos ===== */
  --bg: #F5F5F7;
  --bg-card: #FFFFFF;
  --bg-soft: #EFEFF2;

  /* ===== Líneas y bordes ===== */
  --line: #E5E7EB;
  --line-soft: #F3F4F6;

  /* ===== Estados semánticos ===== */
  --green: #16A34A;
  --green-soft: #DCFCE7;
  --green-ink: #166534;

  --orange: #EA580C;
  --orange-soft: #FFEDD5;
  --orange-ink: #9A3412;

  --blue: #2563EB;
  --blue-soft: #DBEAFE;
  --blue-ink: #1E40AF;

  --purple-soft: #F5F3FF;
  --purple-ink: #6D28D9;

  /* ===== Geometría ===== */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;

  /* ===== Sombras ===== */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow:    0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.06);
  --shadow-lg: 0 8px 24px rgba(17, 24, 39, 0.06);
}

/* NOTA: este archivo se enlaza globalmente (index.html), así que a propósito
   NO trae el reset `* {...}` / `body {...}` del mockup original — rompería el
   resto de la SPA (Dashboard, Connect, etc. comparten el mismo <body>).
   Cada página/componente de Monitorear declara su propio scope en su .razor.css,
   igual que hace el módulo IaReputation con sus clases `.rr-*`. */

/* ===== Utility de fuente display ===== */
.display { font-family: 'Poppins', sans-serif; }

/* ===== Integración de Monitorear con el shell del dashboard =====
   .main__contenido trae padding 2.2rem y fondo #f7f7fa propios; las páginas
   Monitorear son full-bleed (el gris --bg llega a los bordes y cada página
   maneja su propio padding vía .page, igual que en los mockups).
   Mismo patrón que dashboard.css usa con :has(.dashboard-v2-template). */
.dashboard .main:has(.monitorear-page) {
  display: flex;
  flex-direction: column;
}
.dashboard .main__contenido:has(> .monitorear-page) {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  background: var(--bg) !important;
}
.dashboard .main__contenido > .monitorear-page {
  flex: 1;
  width: 100%;
}