/* Tokens del acceso unificado (entrada, hub, cabecera, accesos).
   Todo lleva prefijo --ag- para no pisar las variables de Academia, O6 y O7
   (--bg, --surface, --muted... existen en los tres con valores distintos).
   Base: la paleta de Academia AIU (contrastes AA ya medidos allí) y la escala
   de radios con nombre de O7. Tema: sistema por defecto; se fuerza con
   data-ag-tema="claro" | "oscuro" en <html>. Clave de almacenamiento: ag-tema. */

@font-face {
  font-family: "AG Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/comun/fuentes/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "AG Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/comun/fuentes/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ag-fuente: "AG Manrope", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;

  --ag-fondo: #eef3f6;
  --ag-superficie: #ffffff;
  --ag-superficie-suave: #f7fbfc;
  --ag-superficie-fuerte: #edf2f5;
  --ag-borde: #e1e9ee;
  --ag-borde-suave: #f2f7f9;
  --ag-texto: #22293a;
  --ag-texto-suave: #5c6779;
  --ag-apagado: #6b7484;

  /* --ag-marca sirve como TEXTO (4.7:1 sobre blanco); --ag-acento solo relleno. */
  --ag-marca: #00707d;
  --ag-marca-fuerte: #005c66;
  --ag-acento: #00a3b6;
  --ag-marca-suave: #e0f0f5;
  --ag-noche: #0d1635;
  --ag-noche-suave: #182348;
  --ag-noche-texto: #c9d8e4;

  --ag-verde: #19734b;  --ag-verde-suave: #eaf7f0;
  --ag-naranja: #c65b18; --ag-naranja-suave: #fff0e5;
  --ag-rojo: #b83242;   --ag-rojo-suave: #fae9eb;
  --ag-ambar: #8f5c07;  --ag-ambar-suave: #fff5db;

  /* Color de cada órgano (uno por clave del catálogo; lo demás usa «neutro»).
     -fondo y -tinta son el cuadro y el dibujo de .ag-organo-icono (tinta sobre fondo ≥ 4,5:1);
     el valor sin sufijo es el tono de acento (bordes, franjas, halos), nunca fondo de texto. */
  --ag-organo-academia: #6a4fd1; --ag-organo-academia-fondo: #6a4fd1; --ag-organo-academia-tinta: #ffffff;
  --ag-organo-riesgo: #c24a1e;   --ag-organo-riesgo-fondo: #c24a1e;   --ag-organo-riesgo-tinta: #ffffff;
  --ag-organo-rutas: #00808d;    --ag-organo-rutas-fondo: #00808d;    --ag-organo-rutas-tinta: #ffffff;
  --ag-organo-accesos: #2f6bd8;  --ag-organo-accesos-fondo: #2f6bd8;  --ag-organo-accesos-tinta: #ffffff;
  --ag-organo-neutro: #5c6779;   --ag-organo-neutro-fondo: #5c6779;   --ag-organo-neutro-tinta: #ffffff;

  --ag-r-s: 10px;
  --ag-r-m: 16px;
  --ag-r-l: 20px;
  --ag-r-pill: 999px;

  --ag-sombra: 0 1px 2px rgba(13, 22, 53, .06);
  --ag-sombra-alta: 0 12px 32px rgba(13, 22, 53, .12);
  --ag-sombra-marca: 0 8px 20px rgba(0, 163, 182, .35);

  /* Controles (botones y campos de comun/base.css): un solo radio y un solo alto. */
  --ag-r-control: 12px;
  --ag-alto-control: 44px;

  /* Escala única de espacios (PULIDO-UX §3): 4, 8, 12, 16, 24, 32, 48, 64 px. */
  --ag-e-1: 4px;  --ag-e-2: 8px;  --ag-e-3: 12px; --ag-e-4: 16px;
  --ag-e-5: 24px; --ag-e-6: 32px; --ag-e-7: 48px; --ag-e-8: 64px;

  /* Margen de página: 16 px en móvil, 24 px desde 768 px y 40 px desde 1024 px (ver abajo).
     Lo usan .ag-pagina (comun/base.css) y la cabecera, para que queden alineadas. */
  --ag-margen: 16px;
  --ag-ancho-contenido: 1200px;

  --ag-cabecera-alto: 64px;
  --ag-foco: 0 0 0 2px var(--ag-superficie), 0 0 0 4px var(--ag-marca);
  /* Foco de un campo de texto: va junto con border-color: var(--ag-marca). */
  --ag-foco-campo: 0 0 0 3px color-mix(in srgb, var(--ag-marca) 28%, transparent);
  --ag-transicion: 160ms ease;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-ag-tema="claro"]) {
    --ag-fondo: #101419;
    --ag-superficie: #171c22;
    --ag-superficie-suave: #1c2229;
    --ag-superficie-fuerte: #252c34;
    --ag-borde: #343c46;
    --ag-borde-suave: #2a3139;
    --ag-texto: #f0f3f6;
    --ag-texto-suave: #b2bdca;
    --ag-apagado: #8793a1;
    --ag-marca: #5ed3e0;
    --ag-marca-fuerte: #8fe3ec;
    --ag-marca-suave: #14262c;
    --ag-noche: #080e20;
    --ag-noche-suave: #131c3a;
    --ag-noche-texto: #d5e2ec;
    --ag-verde: #58bc87;  --ag-verde-suave: #1b2d24;
    --ag-naranja: #f39858; --ag-naranja-suave: #32251c;
    --ag-rojo: #f17380;   --ag-rojo-suave: #342126;
    --ag-ambar: #e7b650;  --ag-ambar-suave: #30291a;
    --ag-organo-academia: #c4b5fd; --ag-organo-academia-fondo: #2b2350; --ag-organo-academia-tinta: #c4b5fd;
    --ag-organo-riesgo: #ffab85;   --ag-organo-riesgo-fondo: #3a2117;   --ag-organo-riesgo-tinta: #ffab85;
    --ag-organo-rutas: #6fd6e0;    --ag-organo-rutas-fondo: #0f3036;    --ag-organo-rutas-tinta: #6fd6e0;
    --ag-organo-accesos: #a3c0ff;  --ag-organo-accesos-fondo: #172a4d;  --ag-organo-accesos-tinta: #a3c0ff;
    --ag-organo-neutro: #c6ced8;   --ag-organo-neutro-fondo: #252c34;   --ag-organo-neutro-tinta: #c6ced8;
    --ag-sombra: 0 2px 12px rgba(0, 0, 0, .28);
    --ag-sombra-alta: 0 16px 40px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

:root[data-ag-tema="oscuro"] {
  --ag-fondo: #101419;
  --ag-superficie: #171c22;
  --ag-superficie-suave: #1c2229;
  --ag-superficie-fuerte: #252c34;
  --ag-borde: #343c46;
  --ag-borde-suave: #2a3139;
  --ag-texto: #f0f3f6;
  --ag-texto-suave: #b2bdca;
  --ag-apagado: #8793a1;
  --ag-marca: #5ed3e0;
  --ag-marca-fuerte: #8fe3ec;
  --ag-marca-suave: #14262c;
  --ag-noche: #080e20;
  --ag-noche-suave: #131c3a;
  --ag-noche-texto: #d5e2ec;
  --ag-verde: #58bc87;  --ag-verde-suave: #1b2d24;
  --ag-naranja: #f39858; --ag-naranja-suave: #32251c;
  --ag-rojo: #f17380;   --ag-rojo-suave: #342126;
  --ag-ambar: #e7b650;  --ag-ambar-suave: #30291a;
  --ag-organo-academia: #c4b5fd; --ag-organo-academia-fondo: #2b2350; --ag-organo-academia-tinta: #c4b5fd;
  --ag-organo-riesgo: #ffab85;   --ag-organo-riesgo-fondo: #3a2117;   --ag-organo-riesgo-tinta: #ffab85;
  --ag-organo-rutas: #6fd6e0;    --ag-organo-rutas-fondo: #0f3036;    --ag-organo-rutas-tinta: #6fd6e0;
  --ag-organo-accesos: #a3c0ff;  --ag-organo-accesos-fondo: #172a4d;  --ag-organo-accesos-tinta: #a3c0ff;
  --ag-organo-neutro: #c6ced8;   --ag-organo-neutro-fondo: #252c34;   --ag-organo-neutro-tinta: #c6ced8;
  --ag-sombra: 0 2px 12px rgba(0, 0, 0, .28);
  --ag-sombra-alta: 0 16px 40px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

@media (min-width: 768px) { :root { --ag-margen: 24px; } }
@media (min-width: 1024px) { :root { --ag-margen: 40px; } }

@media (prefers-reduced-motion: reduce) {
  :root { --ag-transicion: 0ms; }
}

/* =====================================================================================
   Piezas compartidas: lo que se dibuja igual en la cabecera y en las páginas.
   Viven aquí, y no en base.css, porque la cabecera también se carga dentro de Riesgo
   operativo y Rutas inteligentes, que solo traen tokens.css y cabecera.css. Una sola
   definición para todo el producto; cada pieza solo las coloca (márgenes, posición).
   ===================================================================================== */

/* ---------- Icono de órgano en su cuadro de color ----------
   <span class="ag-organo-icono ag-organo-icono--medio ag-organo-icono--academia" aria-hidden="true"><svg>…</svg></span>
   Lo construye cajaOrgano(organo, {tamano}) de comun/iconos.mjs. Tamaños: --chico 32, --medio 40,
   --grande 56 px. Color: --academia, --riesgo, --rutas, --accesos; cualquier otra clave (o --neutro)
   usa el neutro. Un contenedor con data-organo="<clave>" recibe las mismas variables
   (--ag-organo-tono, -fondo, -tinta) para sus acentos: franjas, halos, bordes. */
.ag-organo-icono, [data-organo] {
  --ag-organo-tono: var(--ag-organo-neutro);
  --ag-organo-fondo: var(--ag-organo-neutro-fondo);
  --ag-organo-tinta: var(--ag-organo-neutro-tinta);
}
.ag-organo-icono--academia, [data-organo="academia"] {
  --ag-organo-tono: var(--ag-organo-academia);
  --ag-organo-fondo: var(--ag-organo-academia-fondo);
  --ag-organo-tinta: var(--ag-organo-academia-tinta);
}
.ag-organo-icono--riesgo, [data-organo="riesgo"] {
  --ag-organo-tono: var(--ag-organo-riesgo);
  --ag-organo-fondo: var(--ag-organo-riesgo-fondo);
  --ag-organo-tinta: var(--ag-organo-riesgo-tinta);
}
.ag-organo-icono--rutas, [data-organo="rutas"] {
  --ag-organo-tono: var(--ag-organo-rutas);
  --ag-organo-fondo: var(--ag-organo-rutas-fondo);
  --ag-organo-tinta: var(--ag-organo-rutas-tinta);
}
.ag-organo-icono--accesos, [data-organo="accesos"] {
  --ag-organo-tono: var(--ag-organo-accesos);
  --ag-organo-fondo: var(--ag-organo-accesos-fondo);
  --ag-organo-tinta: var(--ag-organo-accesos-tinta);
}
.ag-organo-icono {
  --ag-organo-lado: 40px;
  --ag-organo-dibujo: 22px;
  box-sizing: border-box;
  display: inline-grid; place-items: center;
  width: var(--ag-organo-lado); height: var(--ag-organo-lado); flex: 0 0 var(--ag-organo-lado);
  border-radius: calc(var(--ag-organo-lado) * .3);
  background-color: var(--ag-organo-fondo);
  /* Se oscurece hacia abajo: en claro y en oscuro solo sube el contraste de la tinta. */
  background-image: linear-gradient(145deg, transparent 0%, rgba(0, 0, 0, .18) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  color: var(--ag-organo-tinta);
}
.ag-organo-icono > svg {
  width: var(--ag-organo-dibujo); height: var(--ag-organo-dibujo); flex: none; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ag-organo-icono--chico { --ag-organo-lado: 32px; --ag-organo-dibujo: 18px; }
.ag-organo-icono--medio { --ag-organo-lado: 40px; --ag-organo-dibujo: 22px; }
.ag-organo-icono--grande {
  --ag-organo-lado: 56px; --ag-organo-dibujo: 30px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 22px -8px color-mix(in srgb, var(--ag-organo-tono) 60%, transparent);
}

/* ---------- Contador (insignia con número) ----------
   <span class="ag-contador">3</span>. El texto es «99+» por encima de 99 (textoContador de comun/ui.mjs).
   (base) avisos pendientes: rojo.  --fallo: no se pudo consultar (ámbar).  --marca: un recuento
   que no es un pendiente (filtros activos).  --aro: separado del fondo cuando va encima de un botón
   o una tarjeta. Tinta = superficie: blanco en claro y oscuro en oscuro (≥ 5,6:1 en los tres colores). */
.ag-contador {
  box-sizing: border-box;
  display: inline-grid; place-items: center;
  min-width: 24px; height: 24px; padding: 0 4px;
  border-radius: var(--ag-r-pill);
  background: var(--ag-rojo); color: var(--ag-superficie);
  font-family: var(--ag-fuente); font-size: 12px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ag-contador--fallo { background: var(--ag-ambar); }
.ag-contador--marca { background: var(--ag-marca); }
.ag-contador--aro { box-shadow: 0 0 0 2px var(--ag-superficie); }

/* ---------- Avatar con iniciales ----------
   <span class="ag-avatar" aria-hidden="true">LA</span> con iniciales() de comun/ui.mjs.
   Tamaños: (base) 36, --medio 48, --grande 56 px. Siempre marca con tinta superficie. */
.ag-avatar {
  --ag-avatar-lado: 36px;
  box-sizing: border-box;
  display: inline-grid; place-items: center;
  width: var(--ag-avatar-lado); height: var(--ag-avatar-lado); flex: 0 0 var(--ag-avatar-lado);
  border-radius: 50%;
  background: var(--ag-marca); color: var(--ag-superficie);
  font-family: var(--ag-fuente); font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: .02em;
}
.ag-avatar--medio { --ag-avatar-lado: 48px; font-size: 17px; }
.ag-avatar--grande { --ag-avatar-lado: 56px; font-size: 19px; }

/* ---------- Píldora de rol ----------
   <span class="ag-rol">Supervisor</span>. --grande: el rol principal en un saludo. --vacio: «Sin roles». */
.ag-rol {
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%; margin: 0; padding: 4px 12px;
  border: 1px solid color-mix(in srgb, var(--ag-marca) 28%, var(--ag-borde));
  border-radius: var(--ag-r-pill);
  background: var(--ag-marca-suave); color: var(--ag-marca);
  font-family: var(--ag-fuente); font-size: 12px; font-weight: 700; line-height: 1.4;
  overflow-wrap: anywhere;
}
.ag-rol--grande { padding: 8px 16px 8px 12px; font-size: 14px; line-height: 1.3; }
.ag-rol--vacio { border-color: transparent; background: var(--ag-superficie-fuerte); color: var(--ag-texto-suave); }

/* ---------- Botón cerrar (paneles, diálogos y avisos) ----------
   <button class="ag-cerrar" type="button" aria-label="Cerrar"><svg>…</svg></button>: 44 × 44, equis gris. */
.ag-cerrar {
  box-sizing: border-box;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; flex: 0 0 44px;
  margin: 0; padding: 0; border: 0;
  border-radius: var(--ag-r-control, 12px);
  background: transparent; color: var(--ag-texto-suave);
  font: inherit; cursor: pointer;
}
.ag-cerrar:hover { background: var(--ag-superficie-fuerte); color: var(--ag-texto); }
.ag-cerrar:focus-visible { outline: none; box-shadow: var(--ag-foco); }
.ag-cerrar > svg { width: 20px; height: 20px; }

@media (forced-colors: active) {
  .ag-organo-icono, .ag-contador, .ag-avatar, .ag-rol { border: 1px solid CanvasText; }
  .ag-cerrar:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}