/* Capa común del acceso unificado (/entrar/, /hub/, /accesos/). Requiere /comun/tokens.css.
   Una sola definición de lo que antes repetía cada pieza: página, botones, campos, esqueletos,
   giro, texto solo para lectores, enlace de salto, avisos, estados, isotipo e iconos.
   Lo que también dibuja la cabecera (icono de órgano, contador, avatar, píldora de rol y botón
   cerrar) está en comun/tokens.css, porque la cabecera no carga esta hoja.

   Reglas:
   - Todas las clases empiezan por .ag- y ninguna toca etiquetas sueltas (no hay reinicio global).
   - Espacios solo de la escala --ag-e-1..8. Ningún texto por debajo de 12 px.
   - Lo visible es el estilo base: las animaciones solo adornan (si el navegador las pausa,
     todo se ve igual) y prefers-reduced-motion las quita.
   - Claro y oscuro salen de los tokens. Contraste AA: el texto va sobre superficie o sobre
     un fondo «suave»; --ag-marca, --ag-rojo, --ag-verde y --ag-ambar sirven como tinta.
   La cabecera (comun/cabecera.css) NO depende de esta hoja: también se carga dentro de
   Riesgo operativo y Rutas inteligentes, que no traen base.css. */

:where([class^="ag-"], [class*=" ag-"]),
:where([class^="ag-"], [class*=" ag-"])::before,
:where([class^="ag-"], [class*=" ag-"])::after { box-sizing: border-box; }
[hidden]:where([class^="ag-"], [class*=" ag-"]) { display: none !important; }

/* ---------- Cuerpo y página ---------- */

/* <body class="ag-cuerpo">: fuente, colores y alto mínimo. Cada pieza añade su fondo si quiere. */
.ag-cuerpo {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--ag-fuente);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ag-texto);
  background-color: var(--ag-fondo);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Contenido centrado: 1200 px como máximo y margen 16 / 24 / 40 px (cortes en 768 y 1024). */
.ag-pagina {
  width: 100%;
  max-width: calc(var(--ag-ancho-contenido) + 2 * var(--ag-margen));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ag-margen);
  padding-right: var(--ag-margen);
}
/* Lo que se enfoca o se alcanza con un ancla no queda bajo la cabecera fija. */
.ag-pagina :where(h1, h2, h3, [id]) { scroll-margin-top: calc(var(--ag-cabecera-alto) + var(--ag-e-4)); }

/* Hueco de la cabecera: <div id="cabecera" class="ag-cabecera-hueco"></div>. Reserva el alto y el
   fondo antes de montarla (nada salta) y es quien queda fijo arriba. z-index 300: sus paneles
   pintan por encima de barras flotantes (60) y avisos emergentes (200) de la página. */
.ag-cabecera-hueco {
  position: sticky; top: 0; z-index: 300;
  flex: 0 0 auto;
  min-height: var(--ag-cabecera-alto);
  background: var(--ag-superficie);
  border-bottom: 1px solid var(--ag-borde);
}
.ag-cabecera-hueco:has(> .ag-cabecera) { border-bottom: 0; }

/* ---------- Solo lectores de pantalla y enlace de salto ---------- */

.ag-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* <a class="ag-saltar" href="#principal">Saltar al contenido</a>: primer elemento del <body>. */
.ag-saltar {
  position: absolute; left: var(--ag-e-4); top: -64px; z-index: 400;
  padding: var(--ag-e-3) var(--ag-e-4);
  border-radius: var(--ag-r-s);
  background: var(--ag-superficie); color: var(--ag-marca);
  font-family: var(--ag-fuente); font-size: 15px; font-weight: 750; text-decoration: none;
  box-shadow: var(--ag-sombra-alta);
  transition: top var(--ag-transicion);
}
.ag-saltar:focus { top: var(--ag-e-3); outline: none; box-shadow: var(--ag-foco), var(--ag-sombra-alta); }

/* ---------- Iconos (comun/iconos.mjs) ---------- */

.ag-icono, .ag-icono-organo {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ag-icono--s { width: 16px; height: 16px; }
.ag-icono--l { width: 24px; height: 24px; }
.ag-icono--xl { width: 32px; height: 32px; }
.ag-icono-organo { width: 24px; height: 24px; overflow: visible; }

/* ---------- Isotipo: UN solo recorte del logo horizontal (1628 × 372) ----------
   <span class="ag-isotipo"><img src="/comun/marca/agiotech-logo.png" alt="" width="1628" height="372"></span>
   El símbolo ocupa los primeros 278 × 280 px del logo, a 32 px del borde superior: la imagen se
   escala para que el símbolo mida el lado de la caja y se sube lo que sobra arriba.
   Tamaños: --s 32, (base) 40, --m 48, --l 64, --xl 72 px.
   --ficha: símbolo sobre ficha oscura con esquinas redondas y halo de marca (cabecera y cargas). */
.ag-isotipo {
  --ag-isotipo-lado: 40px;
  --ag-isotipo-escala: 1;
  display: block;
  width: var(--ag-isotipo-lado); height: var(--ag-isotipo-lado);
  flex: 0 0 var(--ag-isotipo-lado);
  overflow: hidden;
}
.ag-isotipo > img {
  display: block;
  width: auto; max-width: none;
  height: calc(var(--ag-isotipo-lado) * 1.3286 * var(--ag-isotipo-escala));
  margin-top: calc(var(--ag-isotipo-lado) * (1 - var(--ag-isotipo-escala)) / 2 - var(--ag-isotipo-lado) * .1143 * var(--ag-isotipo-escala));
  margin-left: calc(var(--ag-isotipo-lado) * (1 - var(--ag-isotipo-escala)) / 2);
}
.ag-isotipo--s { --ag-isotipo-lado: 32px; }
.ag-isotipo--m { --ag-isotipo-lado: 48px; }
.ag-isotipo--l { --ag-isotipo-lado: 64px; }
.ag-isotipo--xl { --ag-isotipo-lado: 72px; }
.ag-isotipo--ficha {
  --ag-isotipo-escala: .68;
  background: #383e4c;
  border-radius: calc(var(--ag-isotipo-lado) * .3);
  box-shadow: var(--ag-sombra-marca);
}

/* ---------- Giro ----------
   <span class="ag-giro" aria-hidden="true"></span>. Hereda el color del texto. */
.ag-giro {
  --ag-giro-lado: 16px;
  display: inline-block;
  width: var(--ag-giro-lado); height: var(--ag-giro-lado); flex: 0 0 var(--ag-giro-lado);
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: ag-gira 800ms linear infinite;
}
.ag-giro--l { --ag-giro-lado: 24px; border-width: 3px; }
@keyframes ag-gira { to { transform: rotate(360deg); } }

/* ---------- Botones ----------
   <button class="ag-boton ag-boton--primario" type="button">
     <svg class="ag-icono">…</svg><span class="ag-boton__texto">Guardar</span>
   </button>
   Sirve igual en <a>. Sin modificador se ve como --secundario.
   Ocupado: botonOcupado(boton, 'Guardando…') de comun/ui.mjs pone aria-busy="true"; el giro sale
   dentro (en el sitio del icono si lo hay) y el botón conserva su ancho. */
.ag-boton {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ag-e-2);
  min-height: var(--ag-alto-control); min-width: 0;
  margin: 0;
  padding: var(--ag-e-2) var(--ag-e-4);
  border: 1px solid var(--ag-borde);
  border-radius: var(--ag-r-control);
  background: var(--ag-superficie);
  color: var(--ag-texto);
  font-family: var(--ag-fuente); font-size: 15px; font-weight: 750; line-height: 1.2;
  text-align: center; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ag-transicion), border-color var(--ag-transicion), color var(--ag-transicion);
}
.ag-boton:hover { background: var(--ag-superficie-suave); border-color: color-mix(in srgb, var(--ag-texto) 25%, var(--ag-borde)); }
.ag-boton:focus-visible { outline: none; box-shadow: var(--ag-foco); }
.ag-boton__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.ag-boton--primario { background: var(--ag-marca); border-color: var(--ag-marca); color: var(--ag-superficie); }
.ag-boton--primario:hover { background: var(--ag-marca-fuerte); border-color: var(--ag-marca-fuerte); }
.ag-boton--secundario { background: var(--ag-superficie); border-color: var(--ag-borde); color: var(--ag-texto); }
.ag-boton--fantasma { background: transparent; border-color: transparent; color: var(--ag-marca); }
.ag-boton--fantasma:hover { background: var(--ag-marca-suave); border-color: transparent; }
.ag-boton--peligro { color: var(--ag-rojo); border-color: color-mix(in srgb, var(--ag-rojo) 40%, var(--ag-borde)); }
.ag-boton--peligro:hover { background: var(--ag-rojo-suave); border-color: var(--ag-rojo); }
/* Confirmación de algo que no se deshace: peligro relleno. */
.ag-boton--peligro.ag-boton--primario { background: var(--ag-rojo); border-color: var(--ag-rojo); color: var(--ag-superficie); }
.ag-boton--peligro.ag-boton--primario:hover { background: color-mix(in srgb, var(--ag-rojo) 85%, #000); border-color: var(--ag-rojo); }
.ag-boton--chico { min-height: 36px; padding: var(--ag-e-1) var(--ag-e-3); font-size: 13px; }
.ag-boton--ancho { display: flex; width: 100%; }
/* En móvil el botón chico también ofrece 44 px de área táctil. */
@media (pointer: coarse) { .ag-boton--chico { min-height: var(--ag-alto-control); } }

.ag-boton:disabled, .ag-boton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ag-boton[aria-busy="true"] { opacity: 1; cursor: progress; pointer-events: none; }
/* data-ag-pronto lo pone botonOcupado durante los primeros 150 ms: si la respuesta llega antes, nada parpadea. */
.ag-boton[aria-busy="true"]:not([data-ag-pronto])::before {
  content: "";
  width: 16px; height: 16px; flex: 0 0 16px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: ag-gira 800ms linear infinite;
}
.ag-boton[aria-busy="true"]:not([data-ag-pronto]) > :is(.ag-icono, .ag-giro) { display: none; }

/* Fila de botones de una pantalla, un estado o un diálogo. */
.ag-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ag-e-3); }
.ag-acciones--centro { justify-content: center; }
.ag-acciones--fin { justify-content: flex-end; }

/* ---------- Campos ----------
   <div class="ag-campo">
     <label class="ag-campo__etiqueta" for="correo">Correo</label>
     <input class="ag-campo__control" id="correo" aria-describedby="correo-ayuda correo-error">
     <p class="ag-campo__ayuda" id="correo-ayuda">Texto de apoyo.</p>
     <p class="ag-campo__error" id="correo-error" hidden></p>
   </div>
   El control solo (un buscador, un filtro) también vale: <input class="ag-campo__control">.
   Error: aria-invalid="true" en el control y el texto en .ag-campo__error. */
.ag-campo { display: flex; flex-direction: column; gap: var(--ag-e-2); min-width: 0; }
.ag-campo__etiqueta { font-size: 14px; font-weight: 700; color: var(--ag-texto); }
.ag-campo__control {
  width: 100%; min-width: 0;
  min-height: var(--ag-alto-control);
  margin: 0;
  padding: var(--ag-e-2) var(--ag-e-3);
  /* Borde con 3:1 frente al fondo (WCAG 1.4.11). 16 px: iOS no amplía la página al enfocar. */
  border: 1px solid var(--ag-apagado);
  border-radius: var(--ag-r-control);
  background: var(--ag-superficie);
  color: var(--ag-texto);
  font-family: var(--ag-fuente); font-size: 16px; line-height: 1.4;
  text-overflow: ellipsis;
  transition: border-color var(--ag-transicion), box-shadow var(--ag-transicion);
}
textarea.ag-campo__control { min-height: 88px; resize: vertical; }
.ag-campo__control::placeholder { color: var(--ag-apagado); opacity: 1; }
.ag-campo__control:hover { border-color: var(--ag-marca); }
.ag-campo__control:focus, .ag-campo__control:focus-visible { outline: none; border-color: var(--ag-marca); box-shadow: var(--ag-foco-campo); }
.ag-campo__control[aria-invalid="true"] { border-color: var(--ag-rojo); }
.ag-campo__control[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ag-rojo) 28%, transparent); }
.ag-campo__control:disabled { opacity: .6; cursor: not-allowed; }
.ag-campo__ayuda { margin: 0; font-size: 13px; color: var(--ag-texto-suave); }
.ag-campo__error { margin: 0; font-size: 14px; font-weight: 650; color: var(--ag-rojo); overflow-wrap: anywhere; }
.ag-campo__error:empty { display: none; }

/* ---------- Esqueletos ----------
   <span class="ag-hueso ag-hueso--linea"></span> dentro de un contenedor con aria-hidden="true"
   (o aria-busy en la región). Se ve sin animación; el brillo solo adorna. Cada pieza le da el
   ancho y el alto de su contenido real; aquí van las formas comunes. */
.ag-hueso {
  display: block;
  border-radius: 8px;
  background-color: var(--ag-superficie-fuerte);
  background-image: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--ag-superficie) 65%, transparent) 50%, transparent 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: 150% 0;
  animation: ag-brillo 1.4s ease-in-out infinite;
}
.ag-hueso--linea { height: 12px; width: 85%; }
.ag-hueso--corta { width: 45%; }
.ag-hueso--titulo { height: 20px; width: 60%; }
.ag-hueso--circulo { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; }
.ag-hueso--icono { width: 48px; height: 48px; flex: 0 0 48px; border-radius: var(--ag-r-control); }
.ag-hueso--bloque { height: 64px; border-radius: var(--ag-r-m); }
@keyframes ag-brillo { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* ---------- Avisos en línea ----------
   <div class="ag-aviso ag-aviso--info" role="status">
     <svg class="ag-icono">…</svg>
     <div class="ag-aviso__cuerpo"><strong class="ag-aviso__titulo">Título</strong><span>Texto.</span></div>
     <button class="ag-cerrar ag-aviso__cerrar" type="button" aria-label="Cerrar aviso">…</button>   (opcional)
   </div>
   --info (marca), --exito (verde), --error (rojo, con role="alert"), --alerta (ámbar). */
.ag-aviso {
  display: flex; align-items: flex-start; gap: var(--ag-e-3);
  margin: 0;
  padding: var(--ag-e-3) var(--ag-e-4);
  border: 1px solid transparent;
  border-radius: var(--ag-r-control);
  background: var(--ag-marca-suave);
  color: var(--ag-texto);
  font-family: var(--ag-fuente); font-size: 14px; line-height: 1.45;
}
.ag-aviso > .ag-icono { margin-top: 1px; color: var(--ag-marca); }
.ag-aviso__cuerpo { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ag-aviso__cuerpo > :where(p) { margin: 0; }
.ag-aviso__titulo { display: block; margin-bottom: var(--ag-e-1); font-weight: 800; color: var(--ag-marca); }
/* El botón es .ag-cerrar (comun/tokens.css, el mismo de paneles y diálogos); aquí solo su sitio. */
.ag-aviso__cerrar { margin: calc(-1 * var(--ag-e-2)) calc(-1 * var(--ag-e-2)) calc(-1 * var(--ag-e-2)) 0; }
.ag-aviso--info { background: var(--ag-marca-suave); }
.ag-aviso--exito { background: var(--ag-verde-suave); }
.ag-aviso--exito > .ag-icono, .ag-aviso--exito .ag-aviso__titulo { color: var(--ag-verde); }
.ag-aviso--error { background: var(--ag-rojo-suave); }
.ag-aviso--error > .ag-icono, .ag-aviso--error .ag-aviso__titulo { color: var(--ag-rojo); }
.ag-aviso--alerta { background: var(--ag-ambar-suave); }
.ag-aviso--alerta > .ag-icono, .ag-aviso--alerta .ag-aviso__titulo { color: var(--ag-ambar); }

/* ---------- Estados de pantalla: vacío, error, sin permiso, tardanza ----------
   <section class="ag-estado ag-estado--error" aria-labelledby="estado-titulo">
     <span class="ag-estado__icono" aria-hidden="true"><svg class="ag-icono ag-icono--xl">…</svg></span>
     <h2 class="ag-estado__titulo" id="estado-titulo" tabindex="-1">No pudimos comprobar tu sesión</h2>
     <p class="ag-estado__texto">Qué pasó y qué hacer.</p>
     <div class="ag-estado__acciones">…botones .ag-boton: siempre al menos una salida…</div>
   </section>
   (base) y --vacio: icono de marca.  --error y --sin-permiso: icono ámbar.  --exito: verde.
   --tarjeta: sobre superficie con borde (pantalla completa de bloqueo).  --compacto: dentro de un panel. */
.ag-estado {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 560px;
  margin: 0 auto;
  padding: var(--ag-e-6) var(--ag-e-4);
  text-align: center;
  font-family: var(--ag-fuente);
  color: var(--ag-texto);
}
.ag-estado__icono {
  width: 64px; height: 64px; flex: 0 0 64px;
  display: grid; place-items: center;
  margin-bottom: var(--ag-e-4);
  border-radius: var(--ag-r-l);
  background: var(--ag-marca-suave); color: var(--ag-marca);
}
.ag-estado__icono > svg { width: 32px; height: 32px; }
.ag-estado__titulo { margin: 0 0 var(--ag-e-2); font-size: 20px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.ag-estado__titulo:focus { outline: none; }
.ag-estado__texto { margin: 0; max-width: 46ch; color: var(--ag-texto-suave); font-size: 15px; }
.ag-estado__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ag-e-3); margin-top: var(--ag-e-5); }
.ag-estado--error .ag-estado__icono, .ag-estado--sin-permiso .ag-estado__icono { background: var(--ag-ambar-suave); color: var(--ag-ambar); }
.ag-estado--exito .ag-estado__icono { background: var(--ag-verde-suave); color: var(--ag-verde); }
.ag-estado--tarjeta {
  padding: var(--ag-e-6) var(--ag-e-5);
  border: 1px solid var(--ag-borde); border-radius: var(--ag-r-l);
  background: var(--ag-superficie); box-shadow: var(--ag-sombra);
}
.ag-estado--vacio.ag-estado--tarjeta { border-style: dashed; box-shadow: none; }
.ag-estado--compacto { padding: var(--ag-e-5) var(--ag-e-4); }
.ag-estado--compacto .ag-estado__icono { width: 48px; height: 48px; flex-basis: 48px; border-radius: var(--ag-r-m); margin-bottom: var(--ag-e-3); }
.ag-estado--compacto .ag-estado__icono > svg { width: 24px; height: 24px; }
.ag-estado--compacto .ag-estado__titulo { font-size: 16px; }
.ag-estado--compacto .ag-estado__texto { font-size: 14px; }
.ag-estado--compacto .ag-estado__acciones { margin-top: var(--ag-e-4); }

@media (max-width: 559px) {
  .ag-estado--tarjeta { padding: var(--ag-e-5) var(--ag-e-4); }
  .ag-estado__acciones { flex-direction: column; align-items: stretch; width: 100%; }
}

/* ---------- Movimiento y alto contraste ---------- */

@media (prefers-reduced-motion: reduce) {
  .ag-giro, .ag-hueso, .ag-boton[aria-busy="true"]::before { animation: none; }
  .ag-saltar, .ag-boton, .ag-campo__control { transition: none; }
}

@media (forced-colors: active) {
  .ag-boton, .ag-campo__control, .ag-aviso, .ag-estado--tarjeta, .ag-hueso { border: 1px solid CanvasText; }
  .ag-boton:focus-visible, .ag-campo__control:focus, .ag-saltar:focus { outline: 2px solid Highlight; outline-offset: 2px; }
  .ag-isotipo--ficha { border: 1px solid CanvasText; }
}