@layer components {

  /* ============ Barra institucional superior ============ */
  .barra-institucional {
    background: var(--riaej-azul-900);
    color: var(--riaej-azul-100);
    font-size: var(--texto-xs);
    padding-block: var(--esp-2);
  }
  .barra-institucional a { color: var(--riaej-azul-100); text-decoration: none; }
  .barra-institucional a:hover { color: #fff; text-decoration: underline; }
  .barra-institucional__secretaria { display: inline-flex; align-items: center; gap: var(--esp-2); }

  /* ============ Cabecera ============ */
  .cabecera {
    position: sticky; top: 0; z-index: var(--z-cabecera);
    background: color-mix(in srgb, var(--color-fondo) 88%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-block-end: 1px solid var(--color-borde);
    transition: box-shadow var(--trans-media), background var(--trans-media);
  }
  .cabecera[data-desplazada="true"] { box-shadow: var(--sombra-sm); }
  .cabecera__interior {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--esp-6); min-height: 4.75rem;
  }
  .marca { display: flex; align-items: center; gap: var(--esp-3); text-decoration: none; }
  .marca__logo { width: 3.25rem; height: auto; flex: none; }
  .marca__texto { display: flex; flex-direction: column; line-height: 1.15; }
  .marca__sigla {
    font-family: var(--fuente-display);
    font-size: var(--texto-xl); font-weight: var(--peso-bold);
    color: var(--color-texto-marca); letter-spacing: -0.01em;
  }
  .marca__nombre {
    font-size: var(--texto-2xs); color: var(--color-texto-tenue);
    letter-spacing: var(--tracking-etiqueta); text-transform: uppercase;
  }

  /* ============ Navegación principal ============ */
  .nav { display: none; }
  @media (width >= 64rem) { .nav { display: block; } }
  .nav__lista { display: flex; align-items: center; gap: var(--esp-1); list-style: none; padding: 0; }
  .nav__enlace {
    display: inline-flex; align-items: center; gap: var(--esp-2);
    padding: var(--esp-2) var(--esp-3);
    font-size: var(--texto-sm); font-weight: var(--peso-medio);
    color: var(--color-texto-suave); text-decoration: none;
    border-radius: var(--radio-md);
    transition: background var(--trans-rapida), color var(--trans-rapida);
  }
  .nav__enlace:hover, .nav__enlace[aria-expanded="true"] {
    background: var(--riaej-azul-50); color: var(--color-texto-marca);
  }
  .nav__enlace[aria-current="page"] { color: var(--color-texto-marca); font-weight: var(--peso-semi); }
  .nav__item { position: relative; }
  .nav__submenu {
    position: absolute; inset-inline-start: 0; top: calc(100% + 0.5rem);
    min-width: 17rem; padding: var(--esp-2);
    background: var(--color-fondo-elevado);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-lg);
    list-style: none; z-index: var(--z-menu);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--trans-media), transform var(--trans-media), visibility var(--trans-media);
  }
  .nav__item[data-abierto="true"] > .nav__submenu { opacity: 1; visibility: visible; transform: none; }
  .nav__submenu a {
    display: block; padding: var(--esp-2) var(--esp-3);
    font-size: var(--texto-sm); color: var(--color-texto-suave);
    text-decoration: none; border-radius: var(--radio-sm);
  }
  .nav__submenu a:hover { background: var(--riaej-azul-50); color: var(--color-texto-marca); }

  /* ============ Botones ============ */
  .boton {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
    padding: 0.7rem 1.35rem;
    font-size: var(--texto-sm); font-weight: var(--peso-semi);
    line-height: 1; text-decoration: none; white-space: nowrap;
    border: 1px solid transparent; border-radius: var(--radio-md);
    cursor: pointer;
    transition: background var(--trans-rapida), color var(--trans-rapida),
                border-color var(--trans-rapida), transform var(--trans-rapida),
                box-shadow var(--trans-rapida);
  }
  .boton:active { transform: translateY(1px); }
  .boton--primario { background: var(--riaej-azul-600); color: #fff; }
  .boton--primario:hover { background: var(--riaej-azul-700); color: #fff; box-shadow: var(--sombra-md); }
  .boton--secundario {
    background: transparent; color: var(--color-texto-marca);
    border-color: var(--color-borde-fuerte);
  }
  .boton--secundario:hover { border-color: var(--riaej-azul-600); background: var(--riaej-azul-50); }
  .boton--inverso { background: #fff; color: var(--riaej-azul-700); }
  .boton--inverso:hover { background: var(--riaej-azul-50); color: var(--riaej-azul-800); }
  .boton--fantasma-inverso { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
  .boton--fantasma-inverso:hover { background: rgba(255,255,255,0.12); color: #fff; }
  .boton--grande { padding: 0.95rem 1.85rem; font-size: var(--texto-base); }

  /* Botón hamburguesa */
  .hamburguesa {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; padding: 0;
    background: transparent; border: 1px solid var(--color-borde); border-radius: var(--radio-md);
    cursor: pointer;
  }
  @media (width >= 64rem) { .hamburguesa { display: none; } }

  /* Boton de icono generico (conmutador de tema, etc.): clase PROPIA,
     separada de .hamburguesa a proposito -- fix critico UX/UI #8 /
     Desarrollo #12. El original reutilizaba .hamburguesa para el
     conmutador de tema, que por tanto quedaba invisible en escritorio. */
  .boton-icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: var(--radio-md);
    border: 1px solid var(--color-borde); background: var(--color-fondo-elevado);
    color: var(--color-texto); cursor: pointer;
    transition: border-color var(--trans-rapida), background var(--trans-rapida);
  }
  .boton-icono:hover { border-color: var(--riaej-azul-300); }
  .boton-icono[aria-pressed="true"] { background: var(--color-fondo-marca-sutil); border-color: var(--riaej-azul-400); }

  /* ============ Héroe ============ */
  .heroe {
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, var(--riaej-azul-900) 0%, var(--riaej-azul-700) 48%, var(--riaej-azul-600) 100%);
    color: #fff;
    padding-block: clamp(3.5rem, 2rem + 8vw, 7.5rem);
    isolation: isolate;
  }
  /* Retícula del globo terráqueo del logotipo, reinterpretada como textura */
  .heroe::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image:
      radial-gradient(circle at 78% 22%, rgba(255,255,255,0.14), transparent 46%),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 84px),
      repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 84px);
    mask-image: radial-gradient(ellipse at 72% 34%, #000 12%, transparent 74%);
  }
  .heroe__etiqueta {
    display: inline-flex; align-items: center; gap: var(--esp-2);
    padding: 0.4rem 0.9rem; margin-block-end: var(--esp-6);
    font-size: var(--texto-xs); font-weight: var(--peso-semi);
    letter-spacing: var(--tracking-etiqueta); text-transform: uppercase;
    background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.22);
    border-radius: var(--radio-pill); color: #fff;
  }
  .heroe__titulo { color: #fff; font-size: var(--texto-5xl); max-width: 18ch; }
  .heroe__entrada {
    margin-block-start: var(--esp-6); max-width: 56ch;
    font-size: var(--texto-lg); color: var(--riaej-azul-100);
  }
  .heroe__acciones { margin-block-start: var(--esp-10); display: flex; flex-wrap: wrap; gap: var(--esp-4); }

  /* ============ Cifras ============ */
  .cifras {
    display: grid; gap: var(--esp-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    margin-block-start: var(--esp-16);
    padding-block-start: var(--esp-8);
    border-block-start: 1px solid rgba(255,255,255,0.18);
  }
  .cifra__valor {
    font-family: var(--fuente-display);
    font-size: var(--texto-3xl); font-weight: var(--peso-bold);
    color: #fff; line-height: 1;
  }
  .cifra__etiqueta {
    margin-block-start: var(--esp-2);
    font-size: var(--texto-xs); text-transform: uppercase;
    letter-spacing: var(--tracking-etiqueta); color: var(--riaej-azul-200);
  }

  /* ============ Encabezado de sección ============ */
  .encabezado-seccion { margin-block-end: var(--esp-10); max-width: 60ch; }
  .encabezado-seccion__sobretitulo {
    display: block; margin-block-end: var(--esp-3);
    font-size: var(--texto-xs); font-weight: var(--peso-bold);
    letter-spacing: var(--tracking-etiqueta); text-transform: uppercase;
    color: var(--color-texto-marca);
  }
  .encabezado-seccion__sobretitulo::before {
    content: ""; display: inline-block;
    width: 1.75rem; height: 2px; margin-inline-end: var(--esp-3);
    vertical-align: middle; background: var(--riaej-azul-600);
  }
  .encabezado-seccion p { margin-block-start: var(--esp-3); color: var(--color-texto-suave); }

  /* ============ Tarjetas ============ */
  .tarjeta {
    display: flex; flex-direction: column;
    background: var(--color-fondo-elevado);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    overflow: hidden;
    transition: transform var(--trans-media), box-shadow var(--trans-media), border-color var(--trans-media);
  }
  .tarjeta:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-lg);
    border-color: var(--riaej-azul-200);
  }
  .tarjeta__medio { aspect-ratio: 16 / 9; background: var(--riaej-gris-100); overflow: hidden; }
  .tarjeta__medio img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--trans-lenta); }
  .tarjeta:hover .tarjeta__medio img { transform: scale(1.04); }
  .tarjeta__cuerpo { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-6); flex: 1; }
  .tarjeta__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3);
    font-size: var(--texto-xs); color: var(--color-texto-tenue);
  }
  .tarjeta__titulo { font-size: var(--texto-lg); }
  .tarjeta__titulo a { color: inherit; text-decoration: none; }
  .tarjeta__titulo a::after { content: ""; position: absolute; inset: 0; } /* área de clic completa */
  .tarjeta { position: relative; }
  .tarjeta__resumen { font-size: var(--texto-sm); color: var(--color-texto-suave); }
  .tarjeta__pie { margin-block-start: auto; padding-block-start: var(--esp-2); }

  /* ============ Etiquetas / píldoras ============ */
  .etiqueta {
    display: inline-flex; align-items: center; gap: var(--esp-1);
    padding: 0.25rem 0.65rem;
    font-size: var(--texto-2xs); font-weight: var(--peso-semi);
    letter-spacing: 0.03em; text-transform: uppercase;
    background: var(--riaej-azul-50); color: var(--color-texto-marca);
    border-radius: var(--radio-pill);
  }
  .etiqueta--gris { background: var(--riaej-gris-100); color: var(--color-texto-suave); }

  /* ============ Actividad / calendario ============ */
  .actividad {
    position: relative; /* fix critico Arquitectura/Desarrollo #1: sin esto, cualquier
       enlace de stretched-link dentro de .actividad mide la ventana entera */
    display: grid; grid-template-columns: auto 1fr; gap: var(--esp-5);
    align-items: start; padding: var(--esp-5);
    border: 1px solid var(--color-borde); border-radius: var(--radio-lg);
    background: var(--color-fondo-elevado);
    transition: border-color var(--trans-media), box-shadow var(--trans-media);
  }
  .actividad:hover { border-color: var(--riaej-azul-300); box-shadow: var(--sombra-sm); }
  .actividad__fecha {
    display: grid; place-items: center; gap: 2px;
    min-width: 4.25rem; padding: var(--esp-3);
    background: var(--riaej-azul-600); color: #fff;
    border-radius: var(--radio-md); line-height: 1;
  }
  .actividad__dia { font-family: var(--fuente-display); font-size: var(--texto-2xl); font-weight: var(--peso-bold); }
  .actividad__mes { font-size: var(--texto-2xs); text-transform: uppercase; letter-spacing: var(--tracking-etiqueta); }

  /* ============ Miembros ============ */
  .miembro {
    display: grid; place-items: center; gap: var(--esp-3);
    padding: var(--esp-5) var(--esp-4); text-align: center;
    background: var(--color-fondo-elevado);
    border: 1px solid var(--color-borde); border-radius: var(--radio-lg);
    text-decoration: none; color: var(--color-texto-suave);
    transition: border-color var(--trans-media), transform var(--trans-media), box-shadow var(--trans-media);
  }
  .miembro:hover { border-color: var(--riaej-azul-300); transform: translateY(-3px); box-shadow: var(--sombra-md); color: var(--color-texto-marca); }
  .miembro__bandera { font-size: 1.75rem; line-height: 1; }
  .miembro__sigla { font-size: var(--texto-sm); font-weight: var(--peso-semi); }
  .miembro__pais { font-size: var(--texto-2xs); color: var(--color-texto-tenue); }

  /* ============ Accesos destacados ============ */
  .acceso {
    position: relative; display: flex; flex-direction: column; gap: var(--esp-4);
    padding: var(--esp-8);
    border-radius: var(--radio-lg);
    background: var(--color-fondo-elevado);
    border: 1px solid var(--color-borde);
    text-decoration: none; color: inherit; overflow: hidden;
    transition: transform var(--trans-media), box-shadow var(--trans-media);
  }
  .acceso::after {
    content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
    height: 3px; background: var(--riaej-azul-600);
    transform: scaleX(0); transform-origin: left; transition: transform var(--trans-media);
  }
  .acceso:hover { transform: translateY(-4px); box-shadow: var(--sombra-lg); }
  .acceso:hover::after { transform: scaleX(1); }
  .acceso__icono {
    display: grid; place-items: center; width: 3rem; height: 3rem;
    border-radius: var(--radio-md);
    background: var(--riaej-azul-50); color: var(--riaej-azul-600);
  }
  .acceso__titulo { font-size: var(--texto-lg); }
  .acceso__texto { font-size: var(--texto-sm); color: var(--color-texto-suave); }

  /* ============ Buscador ============ */
  .buscador { position: relative; display: flex; }
  .buscador input {
    width: 100%; padding: 0.7rem 1rem 0.7rem 2.6rem;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-pill);
    font-size: var(--texto-sm);
    transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
  }
  .buscador input:focus { border-color: var(--riaej-azul-500); box-shadow: var(--sombra-foco); }
  /* fix critico UX/UI #3: se retiro `outline: none` -- el anillo de foco
     visible de :focus-visible (base.css) debe seguir viéndose; la sombra
     de arriba es refuerzo visual, no sustituto (no llega a 3:1 por si sola) */
  .buscador__icono {
    position: absolute; inset-inline-start: 0.9rem; inset-block-start: 50%;
    transform: translateY(-50%); color: var(--color-texto-tenue); pointer-events: none;
  }

  /* ============ Pie de página ============ */
  .pie {
    background: var(--riaej-azul-950); color: var(--riaej-azul-100);
    padding-block: var(--esp-16) var(--esp-8);
    font-size: var(--texto-sm);
  }
  .pie h3 {
    font-family: var(--fuente-ui);
    font-size: var(--texto-xs); font-weight: var(--peso-bold);
    letter-spacing: var(--tracking-etiqueta); text-transform: uppercase;
    color: #fff; margin-block-end: var(--esp-4);
  }
  .pie ul { list-style: none; padding: 0; display: grid; gap: var(--esp-2); }
  .pie a { color: var(--riaej-azul-200); text-decoration: none; }
  .pie a:hover { color: #fff; text-decoration: underline; }
  .pie__legal {
    display: flex; flex-wrap: wrap; gap: var(--esp-4); justify-content: space-between;
    margin-block-start: var(--esp-12); padding-block-start: var(--esp-6);
    border-block-start: 1px solid rgba(255,255,255,0.14);
    font-size: var(--texto-xs); color: var(--riaej-azul-300);
  }

  /* ============ Aviso de cookies (RGPD) ============ */
  .cookies {
    position: fixed; inset-block-end: var(--esp-4); inset-inline: var(--esp-4);
    max-width: 34rem; margin-inline: auto; z-index: var(--z-brindis);
    padding: var(--esp-6);
    background: var(--color-fondo-elevado);
    border: 1px solid var(--color-borde); border-radius: var(--radio-lg);
    box-shadow: var(--sombra-lg);
  }
  .cookies[hidden] { display: none; }
}
/** RIAEJ — Componentes de páginas interiores */

@layer components {

  /* ============ Cabecera de página interior ============ */
  .cabecera-pagina {
    position: relative;
    background: linear-gradient(150deg, var(--riaej-azul-900) 0%, var(--riaej-azul-700) 100%);
    color: #fff;
    padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
    isolation: isolate;
  }
  .cabecera-pagina::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image:
      repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 70px),
      repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 70px);
    mask-image: radial-gradient(ellipse at 85% 30%, #000 5%, transparent 65%);
  }
  .cabecera-pagina h1 { color: #fff; font-size: var(--texto-4xl); max-width: 20ch; }
  .cabecera-pagina__entrada {
    margin-block-start: var(--esp-4); max-width: 62ch;
    color: var(--riaej-azul-100); font-size: var(--texto-lg);
  }

  /* ============ Migas de pan ============ */
  .migas { font-size: var(--texto-xs); margin-block-end: var(--esp-5); }
  .migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); list-style: none; padding: 0; }
  .migas a { color: var(--riaej-azul-200); text-decoration: none; }
  .migas a:hover { color: #fff; text-decoration: underline; }
  .migas li:not(:last-child)::after { content: "/"; margin-inline-start: var(--esp-2); color: var(--riaej-azul-400); }
  .migas [aria-current="page"] { color: #fff; font-weight: var(--peso-medio); }

  /* ============ Índice lateral pegajoso ============ */
  .indice { position: sticky; top: 7rem; align-self: start; }
  .indice h2 {
    font-family: var(--fuente-ui); font-size: var(--texto-xs); font-weight: var(--peso-bold);
    letter-spacing: var(--tracking-etiqueta); text-transform: uppercase;
    color: var(--color-texto-tenue); margin-block-end: var(--esp-3);
  }
  .indice ul { list-style: none; padding: 0; display: grid; gap: var(--esp-1); }
  .indice a {
    display: block; padding: var(--esp-2) var(--esp-3);
    font-size: var(--texto-sm); color: var(--color-texto-suave);
    text-decoration: none; border-inline-start: 2px solid var(--color-borde);
  }
  .indice a:hover { border-color: var(--riaej-azul-500); background: var(--riaej-azul-50); color: var(--color-texto-marca); }

  /* ============ Prosa institucional ============ */
  .prosa h2 { font-size: var(--texto-2xl); }
  .prosa ol, .prosa ul { padding-inline-start: 1.25rem; display: grid; gap: var(--esp-2); }
  .prosa blockquote {
    margin-block: var(--esp-6); padding: var(--esp-5) var(--esp-6);
    border-inline-start: 3px solid var(--riaej-azul-600);
    background: var(--color-fondo-sutil); border-radius: 0 var(--radio-md) var(--radio-md) 0;
    font-size: var(--texto-lg); color: var(--color-texto-suave);
  }
  .prosa strong { color: var(--color-texto); font-weight: var(--peso-semi); }

  /* ============ Lista numerada destacada ============ */
  .lista-numerada { list-style: none; padding: 0; display: grid; gap: var(--esp-4); counter-reset: n; }
  .lista-numerada li {
    counter-increment: n;
    display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--esp-4);
    align-items: start; padding: var(--esp-4) var(--esp-5);
    background: var(--color-fondo-elevado);
    border: 1px solid var(--color-borde); border-radius: var(--radio-md);
  }
  .lista-numerada li::before {
    content: counter(n, decimal-leading-zero);
    display: grid; place-items: center;
    width: 2.25rem; height: 2.25rem;
    font-family: var(--fuente-display); font-size: var(--texto-sm); font-weight: var(--peso-bold);
    color: var(--riaej-azul-700); background: var(--riaej-azul-50);
    border-radius: var(--radio-sm);
  }

  /* ============ Acordeón (preguntas frecuentes) ============ */
  .acordeon { display: grid; gap: var(--esp-3); }
  .acordeon details {
    border: 1px solid var(--color-borde); border-radius: var(--radio-md);
    background: var(--color-fondo-elevado); overflow: hidden;
  }
  .acordeon details[open] { border-color: var(--riaej-azul-300); box-shadow: var(--sombra-sm); }
  .acordeon summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4);
    padding: var(--esp-4) var(--esp-5);
    font-weight: var(--peso-semi); cursor: pointer; list-style: none;
    transition: background var(--trans-rapida);
  }
  .acordeon summary::-webkit-details-marker { display: none; }
  .acordeon summary:hover { background: var(--riaej-azul-50); }
  .acordeon summary::after {
    content: ""; flex: none; width: 10px; height: 10px;
    border-right: 2px solid var(--riaej-azul-600); border-bottom: 2px solid var(--riaej-azul-600);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--trans-media);
  }
  .acordeon details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .acordeon__cuerpo { padding: 0 var(--esp-5) var(--esp-5); color: var(--color-texto-suave); }
  .acordeon__cuerpo > * + * { margin-block-start: var(--esp-3); }

  /* ============ Banderas ============ */
  /* Pedido de diseño (correo Pura Hernández, ENJ, 11 ago 2026): "que las
     banderas se ajusten a una forma redonda". El sprite trae símbolos con
     proporción 3:2 (viewBox 60x40); para que se vean como un círculo sin
     franjas en blanco arriba/abajo, cada <symbol> del sprite ahora declara
     preserveAspectRatio="xMidYMid slice" (recorta los lados, cubre el
     círculo por completo) y aquí el contenedor pasa de rectángulo
     redondeado a círculo perfecto (ancho = alto, border-radius: 50%). */
  .bandera {
    display: block; width: 1.75rem; height: 1.75rem; flex: none;
    border-radius: 50%; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0,43,78,.14), var(--sombra-xs);
  }
  .bandera--grande { width: 2.75rem; height: 2.75rem; }

  /* ============ Grupo de país (miembros) ============ */
  .pais { margin-block-end: var(--esp-10); scroll-margin-top: 7rem; }
  .pais__cabecera {
    display: flex; align-items: center; gap: var(--esp-4);
    padding-block-end: var(--esp-4); margin-block-end: var(--esp-5);
    border-block-end: 2px solid var(--color-borde);
  }
  .pais__nombre { font-size: var(--texto-xl); margin: 0; }
  .pais__cuenta {
    margin-inline-start: auto; font-size: var(--texto-xs);
    color: var(--color-texto-tenue); letter-spacing: var(--tracking-etiqueta); text-transform: uppercase;
  }
  .institucion {
    position: relative; display: flex; align-items: flex-start; gap: var(--esp-4);
    padding: var(--esp-5); height: 100%;
    background: var(--color-fondo-elevado);
    border: 1px solid var(--color-borde); border-radius: var(--radio-lg);
    text-decoration: none; color: inherit;
    transition: border-color var(--trans-media), box-shadow var(--trans-media), transform var(--trans-media);
  }
  .institucion:hover { border-color: var(--riaej-azul-300); box-shadow: var(--sombra-md); transform: translateY(-2px); }
  .institucion__nombre { font-size: var(--texto-base); font-weight: var(--peso-semi); line-height: 1.35; color: var(--color-texto); }
  .institucion__meta { margin-block-start: var(--esp-2); font-size: var(--texto-xs); color: var(--color-texto-tenue); overflow-wrap: anywhere; }
  .institucion--secretaria { border-color: var(--riaej-azul-500); background: var(--riaej-azul-50); }

  /* Índice de países en píldoras */
  .indice-paises { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-block-end: var(--esp-10); }
  .indice-paises a {
    display: inline-flex; align-items: center; gap: var(--esp-2);
    padding: 0.4rem 0.75rem;
    font-size: var(--texto-xs); font-weight: var(--peso-medio);
    color: var(--color-texto-suave); text-decoration: none;
    background: var(--color-fondo-elevado);
    border: 1px solid var(--color-borde); border-radius: var(--radio-pill);
    transition: border-color var(--trans-rapida), color var(--trans-rapida);
  }
  .indice-paises a:hover { border-color: var(--riaej-azul-400); color: var(--color-texto-marca); }
  .indice-paises .bandera { width: 1.25rem; height: 1.25rem; }

  /* ============ Filtros ============ */
  .filtros {
    display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: end;
    padding: var(--esp-5); margin-block-end: var(--esp-8);
    background: var(--color-fondo-sutil);
    border: 1px solid var(--color-borde); border-radius: var(--radio-lg);
  }
  .campo { display: grid; gap: var(--esp-2); min-width: 0; flex: 1 1 12rem; }
  .campo label { font-size: var(--texto-xs); font-weight: var(--peso-semi); color: var(--color-texto-suave); }
  .campo select, .campo input, .campo textarea {
    width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
    padding: 0.6rem 0.85rem;
    background: var(--color-fondo); color: var(--color-texto);
    border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-md);
    font-size: var(--texto-sm);
    transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
  }
  .campo select:focus, .campo input:focus, .campo textarea:focus {
    /* fix critico UX/UI #3: outline:none eliminado, ver nota en .buscador input:focus */
    border-color: var(--riaej-azul-500); box-shadow: var(--sombra-foco);
  }
  .campo textarea { min-height: 8rem; resize: vertical; }
  .campo__ayuda { font-size: var(--texto-xs); color: var(--color-texto-tenue); }

  /* ============ Tabla de datos ============ */
  .tabla-envoltorio { overflow-x: auto; border: 1px solid var(--color-borde); border-radius: var(--radio-lg); }
  .tabla { width: 100%; border-collapse: collapse; font-size: var(--texto-sm); }
  .tabla th {
    position: sticky; top: 0; z-index: 1;
    padding: var(--esp-3) var(--esp-4); text-align: left;
    font-size: var(--texto-xs); font-weight: var(--peso-bold);
    letter-spacing: var(--tracking-etiqueta); text-transform: uppercase;
    color: var(--color-texto-suave);
    background: var(--color-fondo-sutil);
    border-block-end: 1px solid var(--color-borde);
    white-space: nowrap;
  }
  .tabla td { padding: var(--esp-4); border-block-end: 1px solid var(--color-borde); vertical-align: top; }
  .tabla tbody tr:last-child td { border-block-end: 0; }
  .tabla tbody tr:hover { background: var(--riaej-azul-50); }
  .tabla__titulo { font-weight: var(--peso-semi); color: var(--color-texto); }
  .tabla__titulo a { color: inherit; text-decoration: none; }
  .tabla__titulo a:hover { color: var(--color-texto-marca); text-decoration: underline; }

  /* ============ Documento descargable ============ */
  .documento {
    display: flex; align-items: center; gap: var(--esp-4);
    padding: var(--esp-4) var(--esp-5);
    background: var(--color-fondo-elevado);
    border: 1px solid var(--color-borde); border-radius: var(--radio-md);
    text-decoration: none; color: inherit;
    transition: border-color var(--trans-media), box-shadow var(--trans-media);
  }
  .documento:hover { border-color: var(--riaej-azul-400); box-shadow: var(--sombra-sm); }
  .documento__icono {
    display: grid; place-items: center; flex: none;
    width: 2.5rem; height: 2.5rem;
    background: var(--riaej-azul-50); color: var(--riaej-azul-700);
    border-radius: var(--radio-sm);
    font-size: var(--texto-2xs); font-weight: var(--peso-bold); letter-spacing: .04em;
  }
  .documento__nombre { font-weight: var(--peso-medio); font-size: var(--texto-sm); }
  .documento__meta { font-size: var(--texto-xs); color: var(--color-texto-tenue); }
  .documento__accion { margin-inline-start: auto; color: var(--riaej-azul-600); flex: none; }

  /* ============ Paginación ============ */
  .paginacion { display: flex; flex-wrap: wrap; gap: var(--esp-2); justify-content: center; margin-block-start: var(--esp-10); }
  .paginacion a, .paginacion span {
    display: grid; place-items: center;
    min-width: 2.5rem; height: 2.5rem; padding-inline: var(--esp-3);
    font-size: var(--texto-sm); text-decoration: none;
    border: 1px solid var(--color-borde); border-radius: var(--radio-md);
    color: var(--color-texto-suave);
    transition: border-color var(--trans-rapida), background var(--trans-rapida);
  }
  .paginacion a:hover { border-color: var(--riaej-azul-400); background: var(--riaej-azul-50); color: var(--color-texto-marca); }
  .paginacion [aria-current="page"] { background: var(--riaej-azul-600); border-color: var(--riaej-azul-600); color: #fff; font-weight: var(--peso-semi); }

  /* ============ Eje temático ============ */
  .eje {
    position: relative; display: flex; flex-direction: column; gap: var(--esp-3);
    padding: var(--esp-6); height: 100%;
    background: var(--color-fondo-elevado);
    border: 1px solid var(--color-borde); border-radius: var(--radio-lg);
    text-decoration: none; color: inherit;
    transition: transform var(--trans-media), box-shadow var(--trans-media), border-color var(--trans-media);
  }
  .eje:hover { transform: translateY(-4px); box-shadow: var(--sombra-lg); border-color: var(--riaej-azul-300); }
  .eje__numero {
    font-family: var(--fuente-display); font-size: var(--texto-2xl); font-weight: var(--peso-bold);
    color: var(--riaej-azul-200); line-height: 1;
  }
  .eje__titulo { font-size: var(--texto-lg); }
  .eje__texto { font-size: var(--texto-sm); color: var(--color-texto-suave); }

  /* ============ Ficha de datos ============ */
  .ficha {
    display: grid; gap: var(--esp-4);
    padding: var(--esp-6);
    background: var(--color-fondo-sutil);
    border: 1px solid var(--color-borde); border-radius: var(--radio-lg);
  }
  .ficha dl { display: grid; gap: var(--esp-3); margin: 0; }
  .ficha dt {
    font-size: var(--texto-2xs); font-weight: var(--peso-bold);
    letter-spacing: var(--tracking-etiqueta); text-transform: uppercase;
    color: var(--color-texto-tenue);
  }
  .ficha dd { margin: 0; font-size: var(--texto-sm); }

  /* ============ Aviso ============ */
  .aviso {
    display: flex; gap: var(--esp-4); align-items: flex-start;
    padding: var(--esp-5);
    background: var(--riaej-azul-50);
    border: 1px solid var(--riaej-azul-200);
    border-inline-start: 3px solid var(--riaej-azul-600);
    border-radius: var(--radio-md);
    font-size: var(--texto-sm); color: var(--color-texto-suave);
  }
  .aviso__icono { flex: none; color: var(--riaej-azul-600); }

  /* ============ Línea de tiempo (estructura) ============ */
  .organo {
    position: relative; padding-inline-start: var(--esp-10); padding-block-end: var(--esp-8);
    border-inline-start: 2px solid var(--color-borde);
  }
  .organo:last-child { border-color: transparent; padding-block-end: 0; }
  .organo::before {
    content: ""; position: absolute; inset-inline-start: -0.5rem; inset-block-start: 0.35rem;
    width: 0.9rem; height: 0.9rem; border-radius: 50%;
    background: var(--riaej-azul-600); box-shadow: 0 0 0 4px var(--color-fondo);
  }
  .organo__letra {
    display: inline-block; margin-block-end: var(--esp-2);
    font-size: var(--texto-2xs); font-weight: var(--peso-bold);
    letter-spacing: var(--tracking-etiqueta); text-transform: uppercase;
    color: var(--color-texto-marca);
  }
  .organo h3 { margin-block-end: var(--esp-3); }
  .organo p { color: var(--color-texto-suave); max-width: 68ch; }

  /* ============ Nota al pie de sección ============ */
  .nota-fuente {
    margin-block-start: var(--esp-8); padding-block-start: var(--esp-4);
    border-block-start: 1px solid var(--color-borde);
    font-size: var(--texto-xs); color: var(--color-texto-tenue);
  }

  /* ============ Menú móvil ============ */
  .menu-movil {
    position: fixed; inset: 4.75rem 0 0; z-index: var(--z-menu);
    padding: var(--esp-6) var(--canal) var(--esp-16);
    background: var(--color-fondo); overflow-y: auto;
  }
  .menu-movil[hidden] { display: none; }
  .menu-movil ul { list-style: none; padding: 0; display: grid; gap: var(--esp-1); }
  .menu-movil > ul > li > a {
    display: block; padding: var(--esp-3) 0;
    font-size: var(--texto-lg); font-weight: var(--peso-semi);
    color: var(--color-texto); text-decoration: none;
    border-block-end: 1px solid var(--color-borde);
  }
  .menu-movil ul ul { padding-inline-start: var(--esp-4); padding-block: var(--esp-2); }
  .menu-movil ul ul a { display: block; padding: var(--esp-2) 0; font-size: var(--texto-sm); color: var(--color-texto-suave); text-decoration: none; }
  /* Fix crítico (ver navegacion.js más arriba): .nav__submenu está pensado
     como panel flotante de escritorio (position:absolute + opacity). Reusar
     esa misma clase dentro de #menu-movil sin este override lo deja
     posicionado de forma absoluta sobre el panel táctil -- visualmente
     invisible o descolocado según el alto del contenido. Aquí se convierte
     en un desplegable en flujo normal, como el resto del menú móvil. */
  .menu-movil .nav__submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; border: 0; box-shadow: none; background: transparent;
    padding: 0; max-height: 0; overflow: hidden; transition: max-height var(--trans-media);
  }
  .menu-movil .nav__item--con-hijos[data-abierto="true"] > .nav__submenu { max-height: 30rem; }
  @media (width >= 64rem) { .menu-movil { display: none !important; } }
}

@layer components {
  /* ============ Logotipos institucionales ============ */
  .logo-inst {
    display: grid; place-items: center;
    background: #fff; border-radius: var(--radio-sm);
    overflow: hidden; flex: none;
  }
  .logo-inst img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .logo-inst--sm { width: 100%; height: 2.75rem; padding: 0.15rem; }
  .logo-inst--md { width: 4.5rem; height: 3.25rem; padding: 0.25rem; border: 1px solid var(--color-borde); }
  .logo-inst--lg { width: 100%; max-width: 15rem; height: 8rem; padding: 0.75rem; border: 1px solid var(--color-borde); }
  .logo-inst--vacio { background: var(--riaej-azul-50); color: var(--riaej-azul-600); }

  /* Tarjeta compacta de la portada */
  .miembro { padding: var(--esp-4) var(--esp-3); gap: var(--esp-2); }
  .miembro__sigla {
    font-size: var(--texto-xs); font-weight: var(--peso-semi);
    line-height: 1.3; text-wrap: balance; color: var(--color-texto);
  }
  .miembro__pais {
    display: inline-flex; align-items: center; gap: var(--esp-2);
    font-size: var(--texto-2xs); color: var(--color-texto-tenue);
  }
  .miembro__pais .bandera { width: 1.1rem; height: 1.1rem; }

  /* ============ Ficha de institución ============ */
  .inst-cabecera {
    display: grid; gap: var(--esp-6); align-items: center;
    grid-template-columns: 1fr;
  }
  @media (width >= 48rem) { .inst-cabecera { grid-template-columns: auto 1fr; } }
  .inst-datos { display: grid; gap: 0; }
  .inst-datos > div {
    display: grid; gap: var(--esp-1); padding-block: var(--esp-3);
    border-block-end: 1px solid var(--color-borde);
  }
  .inst-datos > div:last-child { border-block-end: 0; }
  .inst-datos dt {
    font-size: var(--texto-2xs); font-weight: var(--peso-bold);
    letter-spacing: var(--tracking-etiqueta); text-transform: uppercase;
    color: var(--color-texto-tenue);
  }
  .inst-datos dd { margin: 0; font-size: var(--texto-sm); word-break: break-word; }

  .persona { display: flex; gap: var(--esp-5); align-items: flex-start; }
  .persona__foto {
    width: 7rem; height: 7rem; flex: none;
    border-radius: var(--radio-lg); object-fit: cover;
    background: var(--riaej-gris-100);
  }
  .persona__cargo {
    font-size: var(--texto-2xs); letter-spacing: var(--tracking-etiqueta);
    text-transform: uppercase; color: var(--color-texto-marca);
    font-weight: var(--peso-bold);
  }


}

@layer components {
  /* ============ Logotipo sin recuadro ============ */
  .logo-libre {
    display: block;
    height: var(--alto, 2.6rem);
    width: auto; max-width: 100%;
    object-fit: contain; object-position: center;
    margin-inline: auto;
  }
  .logo-libre--bandera { display: grid; place-items: center; }

  .miembro {
    align-content: start;
    grid-template-rows: var(--alto-logo, 2.6rem) auto auto auto;
  }
  .miembro__url {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: var(--texto-2xs); color: var(--color-texto-marca);
    font-weight: var(--peso-medio); word-break: break-all;
  }
  .miembro:hover .miembro__url { text-decoration: underline; }

  /* En el directorio, el logotipo va a la izquierda del texto */
  .institucion .logo-libre { margin-inline: 0; flex: none; width: 4.5rem; }
}

/* El prototipo unificado muestra una vista cada vez */
.vista[hidden] { display: none; }