/* Hub de AgioTech Smart Ops (/hub/). Va después de /comun/tokens.css, base.css, carga.css y cabecera.css.
   Aquí solo queda lo que es de esta pantalla (clases .ag-hub-): el saludo, la cuadrícula y las tarjetas.
   Página, cabecera fija, pantalla de carga, botones, esqueletos, avisos, estados, giro, iconos y texto
   solo para lectores salen de la capa común (.ag-pagina, .ag-cabecera-hueco, .ag-carga, .ag-boton,
   .ag-hueso, .ag-aviso, .ag-estado, .ag-giro, .ag-icono, .ag-oculto).

   El color de cada órgano NO es de esta hoja: el icono es .ag-organo-icono (comun/tokens.css, el mismo
   del conmutador, la entrada y accesos) y la tarjeta, con data-organo, recibe --ag-organo-tono para su
   halo y su borde. El contador es .ag-contador y el rol, .ag-rol (también de tokens.css).

   Reglas (comun/PULIDO-UX.md):
   - Espacios solo de la escala común --ag-e-1..8 (4 a 64 px) y margen de página --ag-margen.
   - Lo visible es el estilo base: las animaciones solo desplazan (transform), nunca ocultan,
     así que si el navegador las pausa todo se ve igual. prefers-reduced-motion las quita. */

/* ---------- Página ---------- */

.ag-hub {
  --ag-hub-hueco: var(--ag-e-4);     /* entre tarjetas */
  --ag-hub-relleno: var(--ag-e-4);   /* dentro de cada tarjeta */
  --ag-hub-dur: 200ms;               /* transiciones entre estados: 150 a 250 ms */
  --ag-hub-curva: cubic-bezier(.2, .7, .2, 1);

  background-image:
    radial-gradient(1100px 420px at 8% -120px, color-mix(in srgb, var(--ag-acento) 13%, transparent), transparent 72%),
    radial-gradient(900px 380px at 100% -160px, color-mix(in srgb, var(--ag-organo-academia) 9%, transparent), transparent 70%);
  background-repeat: no-repeat;
}
@media (min-width: 768px) { .ag-hub { --ag-hub-hueco: var(--ag-e-5); --ag-hub-relleno: var(--ag-e-5); } }

/* El ancho y los márgenes laterales son de .ag-pagina; aquí, el aire de arriba y de abajo. */
.ag-hub-principal {
  position: relative;
  flex: 1 0 auto;
  padding-top: var(--ag-e-6);
  padding-bottom: var(--ag-e-7);
}
@media (min-width: 768px) { .ag-hub-principal { padding-top: var(--ag-e-7); padding-bottom: var(--ag-e-8); } }
@media (min-width: 1024px) { .ag-hub-principal { padding-top: var(--ag-e-8); } }

/* La cabecera fija no tapa la tarjeta que recibe el foco (títulos y anclas: .ag-pagina). */
.ag-hub-tarjeta { scroll-margin-top: calc(var(--ag-cabecera-alto) + var(--ag-e-4)); }

/* Pantalla de carga común, encima del contenido: deja ver el fondo del hub y, mientras está a la
   vista, lo de debajo ocupa su sitio pero no se ve ni se enfoca (al llegar los datos no salta nada). */
.ag-hub-principal > .ag-carga--encima { background: transparent; }
.ag-hub-principal > .ag-carga:not([hidden]) ~ * { visibility: hidden; }

/* ---------- Aviso «sin permiso» (nginx manda ?motivo=sin-permiso&organo=…): .ag-aviso--alerta ---------- */

.ag-hub-motivo {
  max-width: 760px;
  margin-bottom: var(--ag-e-6);
  box-shadow: var(--ag-sombra);
}

/* ---------- Saludo ---------- */

.ag-hub-saludo { margin: 0 0 var(--ag-e-6); }
@media (min-width: 768px) { .ag-hub-saludo { margin-bottom: var(--ag-e-7); } }

.ag-hub-saludo__fecha {
  margin: 0 0 var(--ag-e-2);
  min-height: 21px;
  color: var(--ag-texto-suave);
  font-size: 14px;
  font-weight: 700;
}

.ag-hub-saludo__titulo {
  margin: 0;
  max-width: 100%;
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.ag-hub-saludo__titulo:focus { outline: none; }
/* El nombre salta de línea entero; si ni así cabe (un nombre de 40 letras en 360 px), «…» y el
   nombre completo al pasar el cursor. Nunca se parte a mitad de palabra. */
.ag-hub-saludo__nombre {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  /* Aire para que el recorte no corte las letras que bajan (g, j, p), sin subir el nombre de su renglón. */
  padding-bottom: .08em;
  margin-bottom: -.08em;
}

/* El rol es una .ag-rol ag-rol--grande (tokens.css); aquí solo su sitio y su punto. */
.ag-hub-saludo__rol { margin: var(--ag-e-4) 0 0; overflow-wrap: normal; }
.ag-hub-saludo__rol-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-hub-saludo__punto {
  width: 8px; height: 8px; flex: 0 0 8px;
  border-radius: 50%;
  background: var(--ag-acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ag-acento) 22%, transparent);
}

/* ---------- Sección y cuadrícula ---------- */

.ag-hub-seccion__cabeza {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
  gap: var(--ag-e-1) var(--ag-e-4);
  margin: 0 0 var(--ag-e-4);
}
.ag-hub-seccion__titulo { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.ag-hub-seccion__resumen { margin: 0; color: var(--ag-texto-suave); font-size: 14px; font-weight: 600; }

/* Reparto según cuántas tarjetas hay (data-cantidad, lo pone hub.mjs con distribucion()):
   una / dos   se agrandan, nunca tarjetas diminutas perdidas;
   tres        en una fila desde tableta;
   cuatro      en una fila si caben, si no 2×2 (nunca 3+1);
   muchas      rejilla automática. En móvil, siempre una columna. */
.ag-hub-cuadricula {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ag-hub-hueco);
}
@media (min-width: 560px) {
  .ag-hub-cuadricula[data-cantidad="dos"],
  .ag-hub-cuadricula[data-cantidad="cuatro"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-hub-cuadricula[data-cantidad="dos"] { max-width: 880px; }
  .ag-hub-cuadricula[data-cantidad="una"] { max-width: 640px; }
  .ag-hub-cuadricula[data-cantidad="muchas"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 256px), 1fr)); }
}
@media (min-width: 760px) {
  .ag-hub-cuadricula[data-cantidad="tres"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .ag-hub-cuadricula[data-cantidad="cuatro"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ag-hub-tarjeta-item { display: flex; min-width: 0; }

/* ---------- Tarjeta ---------- */

.ag-hub-tarjeta,
.ag-hub-esqueleto-tarjeta {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; gap: var(--ag-e-4);
  min-width: 0;
  min-height: 232px;
  padding: var(--ag-hub-relleno);
  border: 1px solid var(--ag-borde);
  border-radius: var(--ag-r-l);
  background: var(--ag-superficie);
  box-shadow: var(--ag-sombra);
}
.ag-hub-tarjeta {
  isolation: isolate;
  overflow: hidden;
  color: var(--ag-texto);
  text-decoration: none;
  transition: transform var(--ag-hub-dur) var(--ag-hub-curva), box-shadow var(--ag-hub-dur) ease,
    border-color var(--ag-hub-dur) ease, opacity var(--ag-hub-dur) ease;
}
/* Halo del tono en la esquina: identifica el órgano sin cargar la tarjeta. */
.ag-hub-tarjeta::before {
  content: "";
  position: absolute; z-index: -1;
  inset: 0;
  background: radial-gradient(340px 220px at 100% 0, color-mix(in srgb, var(--ag-organo-tono) 13%, transparent), transparent 70%);
}
.ag-hub-tarjeta:focus-visible {
  outline: none;
  border-color: var(--ag-marca);
  box-shadow: var(--ag-foco), var(--ag-sombra-alta);
}
@media (hover: hover) {
  .ag-hub-tarjeta:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--ag-organo-tono) 45%, var(--ag-borde));
    box-shadow: var(--ag-sombra-alta);
  }
}
.ag-hub-tarjeta:active { transform: translateY(-1px); }

.ag-hub-tarjeta__cabeza,
.ag-hub-esqueleto-tarjeta__cabeza {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ag-e-3);
}
.ag-hub-tarjeta__cuerpo,
.ag-hub-esqueleto-tarjeta__cuerpo { display: flex; flex-direction: column; gap: var(--ag-e-2); min-width: 0; }

/* Icono del órgano: cajaOrgano(t, {tamano: 'grande'}) → .ag-organo-icono de 56 px (tokens.css).
   Aquí solo su movimiento al pasar el cursor. */
.ag-hub-tarjeta__icono { transition: transform var(--ag-hub-dur) var(--ag-hub-curva); }
@media (hover: hover) {
  .ag-hub-tarjeta:hover .ag-hub-tarjeta__icono { transform: scale(1.05) rotate(-3deg); }
}

/* Contador de avisos: .ag-contador ag-contador--aro (tokens.css), el mismo de la campana. Lo llena
   pintarAvisosEnTarjetas y queda oculto mientras no haya un número real. */

.ag-hub-tarjeta__nombre {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  overflow-wrap: break-word;
}
.ag-hub-tarjeta__descripcion {
  color: var(--ag-texto-suave);
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* Tarjeta «incierta»: la puerta no respondió; se dice y el órgano lo comprueba al abrir. */
.ag-hub-tarjeta__nota {
  display: flex; align-items: flex-start; gap: var(--ag-e-2);
  margin-top: var(--ag-e-1);
  padding: var(--ag-e-2) var(--ag-e-3);
  border-radius: var(--ag-r-control);
  background: var(--ag-superficie-suave);
  border: 1px solid var(--ag-borde-suave);
  color: var(--ag-texto-suave);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.ag-hub-tarjeta__nota > .ag-icono { color: var(--ag-ambar); margin-top: 2px; }

.ag-hub-tarjeta__pie {
  position: relative;
  display: flex; align-items: center;
  min-height: 24px;
  margin-top: auto;
  color: var(--ag-marca);
  font-size: 15px;
  font-weight: 800;
}
.ag-hub-tarjeta__abrir,
.ag-hub-tarjeta__abriendo { display: inline-flex; align-items: center; gap: var(--ag-e-2); }
.ag-hub-tarjeta__abriendo { position: absolute; inset: 0 auto 0 0; visibility: hidden; }
.ag-hub-tarjeta__abrir > .ag-icono { transition: transform var(--ag-hub-dur) var(--ag-hub-curva); }
@media (hover: hover) {
  .ag-hub-tarjeta:hover .ag-hub-tarjeta__abrir > .ag-icono { transform: translateX(4px); }
}
.ag-hub-tarjeta:focus-visible .ag-hub-tarjeta__abrir > .ag-icono { transform: translateX(4px); }

/* Una sola tarjeta desde tableta: horizontal y amplia (icono, texto, «Abrir»). */
@media (min-width: 560px) {
  .ag-hub-cuadricula[data-cantidad="una"] .ag-hub-tarjeta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "cabeza cuerpo" "cabeza pie";
    column-gap: var(--ag-e-5);
    min-height: 0;
  }
  .ag-hub-cuadricula[data-cantidad="una"] .ag-hub-tarjeta__cabeza { grid-area: cabeza; }
  .ag-hub-cuadricula[data-cantidad="una"] .ag-hub-tarjeta__cuerpo { grid-area: cuerpo; }
  .ag-hub-cuadricula[data-cantidad="una"] .ag-hub-tarjeta__pie { grid-area: pie; margin-top: var(--ag-e-2); }
  .ag-hub-cuadricula[data-cantidad="una"] .ag-hub-tarjeta__nombre { font-size: 22px; }
  .ag-hub-cuadricula[data-cantidad="una"] .ag-hub-tarjeta__avisos { position: absolute; top: var(--ag-hub-relleno); right: var(--ag-hub-relleno); }
  .ag-hub-cuadricula[data-cantidad="dos"] .ag-hub-tarjeta__nombre { font-size: 21px; }
}

/* «Abriendo…»: la tarjeta pulsada lo dice en el sitio de «Abrir» (con .ag-giro); las demás se atenúan. */
.ag-hub-cuadricula--abriendo .ag-hub-tarjeta:not(.ag-hub-tarjeta--abriendo) { opacity: .5; pointer-events: none; }
.ag-hub-tarjeta--abriendo { border-color: color-mix(in srgb, var(--ag-organo-tono) 55%, var(--ag-borde)); cursor: progress; }
.ag-hub-tarjeta--abriendo .ag-hub-tarjeta__abrir { visibility: hidden; }
.ag-hub-tarjeta--abriendo .ag-hub-tarjeta__abriendo { visibility: visible; }

/* ---------- Esqueletos: .ag-hueso con el tamaño del contenido real ---------- */

.ag-hub-hueso--fecha { width: 180px; max-width: 60%; height: 14px; margin-top: 4px; }
.ag-hub-hueso--titulo { display: inline-block; width: 420px; max-width: 85%; height: .9em; border-radius: var(--ag-r-control); }
.ag-hub-hueso--icono { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 17px; }   /* = .ag-organo-icono--grande */
.ag-hub-hueso--nombre { width: 62%; height: 20px; margin: 4px 0; }
.ag-hub-hueso--texto { width: 92%; height: 14px; }
.ag-hub-hueso--texto-corto { width: 70%; height: 14px; }
.ag-hub-hueso--pie { width: 64px; height: 16px; margin-top: auto; }

/* ---------- Vacío y error: .ag-estado--tarjeta ---------- */

/* El cierre de sesión que no salió, junto a los botones: .ag-aviso--error con su «Reintentar». */
.ag-hub-cierre {
  flex-wrap: wrap; align-items: center;
  width: 100%;
  margin-top: var(--ag-e-4);
  text-align: left;
}
.ag-hub-cierre > .ag-aviso__cuerpo { flex: 1 1 200px; }
.ag-hub-cierre > .ag-boton { margin-left: auto; }

/* ---------- Pie ---------- */

.ag-hub-pie {
  flex: 0 0 auto;
  padding: var(--ag-e-5) var(--ag-margen) var(--ag-e-6);
  text-align: center;
  color: var(--ag-texto-suave);
  font-size: 13px;
  font-weight: 600;
}
.ag-hub-pie p { margin: 0; }

/* ---------- Movimiento: solo adorna, nunca oculta ---------- */

@keyframes ag-hub-subir { from { transform: translateY(8px); } to { transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* Entrada: solo desplazamiento de 8 px, 240 ms, retrasos de 40 ms (120 ms como mucho). */
  .ag-hub-saludo--listo > *,
  .ag-hub-motivo:not([hidden]),
  .ag-hub-tarjeta-item,
  .ag-hub-estado:not([hidden]) { animation: ag-hub-subir 240ms var(--ag-hub-curva) backwards; }
  .ag-hub-saludo--listo > :nth-child(2),
  .ag-hub-tarjeta-item:nth-child(2) { animation-delay: 40ms; }
  .ag-hub-saludo--listo > :nth-child(3),
  .ag-hub-tarjeta-item:nth-child(3) { animation-delay: 80ms; }
  .ag-hub-tarjeta-item:nth-child(n+4) { animation-delay: 120ms; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-hub-tarjeta,
  .ag-hub-tarjeta__icono,
  .ag-hub-tarjeta__abrir > .ag-icono { transition: none; }
  .ag-hub-tarjeta:hover,
  .ag-hub-tarjeta:active,
  .ag-hub-tarjeta:hover .ag-hub-tarjeta__icono,
  .ag-hub-tarjeta:hover .ag-hub-tarjeta__abrir > .ag-icono { transform: none; }
}

/* ---------- Móvil ---------- */

@media (max-width: 559px) {
  .ag-hub-tarjeta,
  .ag-hub-esqueleto-tarjeta { min-height: 0; gap: var(--ag-e-3); }
  .ag-hub-tarjeta__pie { min-height: 44px; }   /* área táctil cómoda del «Abrir» */
}

/* ---------- Alto contraste del sistema ---------- */

@media (forced-colors: active) {
  .ag-hub-tarjeta, .ag-hub-esqueleto-tarjeta { border: 1px solid CanvasText; }
  .ag-hub-tarjeta:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
}