/**
 * Escuelas.
 *
 * La estructura del chrome —cabecera, menu lateral y pie— no se toca: es la de
 * la plataforma. Lo unico que cambia dentro de una escuela son los colores, que
 * llegan como variables CSS en el <body class="en-escuela"> y define el
 * administrador desde el editor.
 *
 * Cada superficie tiene su par fondo/texto porque el contraste se decide de a
 * dos. Lo derivado —hover, item activo, bordes— sale del propio par con capas
 * translucidas, de modo que funciona igual sobre fondo claro que oscuro y el
 * administrador no tiene que elegir quince colores.
 *
 * Los valores de respaldo replican el aspecto de la plataforma, asi que una
 * escuela sin paleta se ve como el resto del sitio.
 */

/* ===============================================================
   Barra lateral
   =============================================================== */

body.en-escuela .sidebar,
body.en-escuela .sidebar.sidebar-white,
body.en-escuela .sidebar.sidebar-default,
body.en-escuela .sidebar.bg-primary-500,
body.en-escuela .sidebar.bg-neutral-100 {
    background-color: var(--esc-sidebar-fondo, #fff) !important;
}

body.en-escuela .sidebar .nav-link,
body.en-escuela .sidebar .item-name,
body.en-escuela .sidebar .nav-link i,
body.en-escuela .sidebar .nav-link svg {
    color: var(--esc-sidebar-texto, #3b4054);
}

body.en-escuela .sidebar .nav-link svg {
    fill: currentColor;
}

/* Salvo los que son dibujos de línea. La regla de arriba existe para los íconos
   que traen un fill propio y tienen que seguir el color del texto; aplicada a un
   fill="none" stroke="currentColor" rellena el interior de los trazos y el
   candado de "Actualizar contraseña" se convierte en una caja sólida. */
body.en-escuela .sidebar .nav-link svg[fill="none"] {
    fill: none;
}

/* El hover y el activo se derivan del texto: una capa translucida del propio
   color funciona tanto sobre fondo claro como oscuro */
body.en-escuela .sidebar .nav-link:hover {
    background: color-mix(in srgb, var(--esc-sidebar-texto, #3b4054) 8%, transparent);
}

/* El item activo: pastilla llena con su propio par

   Dos intentos fallidos antes de este, y los dos por la misma razon.

   El primero dejaba el color del texto a hope-ui —.sidebar-base .nav-item
   .nav-link.active { color: var(--bs-primary) }, que es (0,4,0)— y el fondo a
   esta hoja. Dos fuentes sin relacion: cambiar una rompia el par.

   El segundo saco los dos de --esc-sidebar-texto: el fondo a un 14% y el texto
   entero. Funciona con un par extremo, pero es la misma variable haciendo de
   fondo y de letra, asi que con un par intermedio los dos tonos se acercan
   hasta confundirse. Dos cosas que deben contrastar no pueden salir del mismo
   valor.

   Ahora el fondo es el color principal —la marca diciendo "estas aca"— y el
   texto lo elige escuela_texto_sobre() midiendo el contraste real contra blanco
   y contra casi negro. Eso no se puede hacer en CSS: no hay funcion que mida
   contraste, y cualquier valor fijo falla para la mitad de las paletas
   posibles. Se resuelve en PHP, donde si se puede medir. */

body.en-escuela .sidebar .nav-link.active,
body.en-escuela .sidebar .nav-link.active .item-name,
body.en-escuela .sidebar .nav-link.active i,
body.en-escuela .sidebar .nav-link.active svg {
    color: var(--esc-menu-activo-texto, #fff) !important;
}

body.en-escuela .sidebar .nav-link.active svg {
    fill: currentColor;
}

body.en-escuela .sidebar .nav-link.active {
    background: var(--esc-menu-activo-fondo, var(--brand-principal-default, #3771ff));
    border-left: 3px solid var(--brand-secundario-default, #1b7f5a);
    font-weight: 600;
}

body.en-escuela .sidebar .sidebar-header,
body.en-escuela .escuela-menu-marca,
body.en-escuela .escuela-menu-separador {
    border-color: color-mix(in srgb, var(--esc-sidebar-texto, #3b4054) 15%, transparent);
}

body.en-escuela .sidebar .submenu,
body.en-escuela .sidebar .submenu .list-group-item {
    background: transparent;
}

body.en-escuela .sidebar .submenu .nav-link {
    color: color-mix(in srgb, var(--esc-sidebar-texto, #3b4054) 75%, transparent);
}

/* Sin color-mix se pierde el matiz del hover, no la legibilidad. El item
   activo queda fuera a proposito: ya no usa color-mix, su fondo es el color
   principal y pisarlo con gris le quitaria el contraste medido. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    body.en-escuela .sidebar .nav-link:hover {
        background: rgba(128, 128, 128, .12);
    }
}

/* Iconos y texto

   .item-name trae margin-left: 1rem, pensado para los SVG de 22px de la
   plataforma. Los iconos de Bootstrap son mas angostos, asi que ese hueco queda
   exagerado. Se le da ancho fijo al icono para que todos los items alineen su
   texto en la misma columna, y se ajusta la separacion. */

body.en-escuela .sidebar .nav-link > .icon {
    width: 1.5rem;
    flex: 0 0 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.en-escuela .sidebar .nav-link > .icon .bi {
    font-size: 1.1rem;
    line-height: 1;
}

body.en-escuela .sidebar .nav-link .item-name {
    margin-left: .65rem;
}

/* Botones de plegar

   Hay dos y viven en contextos distintos, asi que cada uno toma el par de su
   propia superficie:

   - templates/left_menu: el de "Ocultar menu", dentro del menu lateral
   - templates/header_:   el hamburger, dentro de la barra superior

   .sidebar-toggle es un circulo de 26px con fondo azul fijo (#3a57e8) y
   color: #fff. Sobre un fondo oscuro ese azul casi no se distingue, y el rotulo
   "Ocultar menu" no cabe en 26px: desborda sobre la superficie de atras. Por eso
   el circulo se pinta con el color de texto de su superficie —queda siempre en
   contraste— y el rotulo con el mismo color que el resto del texto. */

/* --- El del menu lateral --- */

body.en-escuela .sidebar .sidebar-toggle,
body.en-escuela .sidebar-header .sidebar-toggle {
    background: var(--esc-sidebar-texto, #3b4054) !important;
    display: inline-flex;
    align-items: center;
    width: auto;
    min-width: 26px;
    height: auto;
    min-height: 26px;
    line-height: 1;
    padding: .3rem .6rem .3rem .3rem;
    border-radius: 1rem;
    gap: .4rem;
}

body.en-escuela .sidebar .sidebar-toggle .icon,
body.en-escuela .sidebar .sidebar-toggle .icon svg,
body.en-escuela .sidebar .sidebar-toggle .item-name,
body.en-escuela .sidebar-header .sidebar-toggle .icon,
body.en-escuela .sidebar-header .sidebar-toggle .icon svg,
body.en-escuela .sidebar-header .sidebar-toggle .item-name {
    color: var(--esc-sidebar-fondo, #fff) !important;
    stroke: var(--esc-sidebar-fondo, #fff);
    margin-left: 0;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: .78rem;
}

/* --- El de la barra superior --- */

body.en-escuela .iq-navbar .sidebar-toggle,
body.en-escuela .navbar .sidebar-toggle {
    background: var(--esc-header-texto, #3b4054) !important;
}

body.en-escuela .iq-navbar .sidebar-toggle .icon svg,
body.en-escuela .iq-navbar .sidebar-toggle svg,
body.en-escuela .navbar .sidebar-toggle svg {
    color: var(--esc-header-fondo, #fff) !important;
    fill: var(--esc-header-fondo, #fff);
}

/* Menu plegado

   hope-ui colapsa el texto con
   .sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item .nav-link span
   pero la marca de la escuela son <span> sueltos dentro del <li>, no dentro de
   un .nav-link, asi que esa regla no los alcanza y el nombre desbordaba la
   franja de 4.8rem.

   Se repite la misma condicion, incluido el :not(.sidebar-hover:hover): cuando
   el menu se despliega al pasar el mouse, el nombre tiene que volver junto con
   el resto del texto. Con una condicion propia y distinta, la marca se
   comportaria al reves que todo lo demas.

   El logo se queda y se centra, que es lo que hace la propia plataforma con
   .navbar-brand .logo-title. Sin logo no queda nada visible: agregar una
   inicial inventada seria decorar un espacio de 4.8rem que ya tiene los iconos
   del menu para orientar. */

.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .escuela-menu-nombre,
.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .escuela-menu-bajada {
    display: none;
}

.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .escuela-menu-marca {
    align-items: center;
    padding: .75rem .5rem;
}

.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .escuela-menu-logo {
    max-width: 2.4rem;
    max-height: 2.4rem;
    margin-bottom: 0;
    object-position: center;
}

/* Sin logo el bloque queda vacio al plegarse: se quita tambien el borde y el
   hueco, o sobraria una linea suelta bajo la cabecera.

   La condicion la marca el servidor con una clase y no :has(), que no llega a
   los navegadores mas viejos: el dato ya se conoce al renderizar, no hace falta
   deducirlo del DOM. */
.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .escuela-menu-marca-sin-logo {
    padding: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

/* Marca de la escuela dentro del menu */

/* La marca va centrada y con aire a los lados.

   El relleno horizontal es mayor que el vertical a proposito: el menu mide
   16.2rem y sin ese margen el nombre toca los bordes, sobre todo cuando es
   largo y parte en dos lineas. Con el aire, el texto queda dentro de una
   columna mas angosta que la franja y se lee como un bloque, no como una linea
   estirada de borde a borde. */

.escuela-menu-marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .2rem;
    padding: 1.15rem 1.75rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.escuela-menu-logo {
    max-width: 100%;
    max-height: 46px;
    object-fit: contain;
    object-position: center;
    margin-bottom: .5rem;
}

body.en-escuela .escuela-menu-nombre {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--esc-sidebar-texto, #3b4054);

    /* Un nombre largo parte en dos lineas centradas en vez de desbordar */
    overflow-wrap: anywhere;
}

body.en-escuela .escuela-menu-bajada {
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--esc-sidebar-texto, #3b4054) 60%, transparent);
}

body.en-escuela .escuela-menu-inactivo,
body.en-escuela .escuela-menu-inactivo .item-name,
body.en-escuela .escuela-menu-inactivo i {
    color: color-mix(in srgb, var(--esc-sidebar-texto, #3b4054) 40%, transparent);
    cursor: not-allowed;
}

.escuela-menu-separador {
    border-top: 1px solid rgba(0, 0, 0, .08);
}

/* ===============================================================
   Cabecera
   =============================================================== */

/* Las clases de utilidad de la plataforma ganan con !important

   ConfiguracionTemplate genera Colores_de_Fondo.css con el color literal y
   !important:

       .bg-primary-500 { background-color: #3771ff !important; }

   No es un var(), asi que redefinir la variable en el <body> no lo toca, y
   !important le gana a cualquier regla sin el por especifica que sea. Dos
   superficies del chrome las llevan puestas en el marcado:

   - templates/header_:105  <nav class="... iq-navbar bg-primary-500">
   - templates/pie_:147     <footer class="bg-secondary-500">

   Se responde con !important sobre un selector mas especifico, que ademas
   carga despues. Solo aca: en el resto del archivo no hace falta.

   La alternativa de fondo es que el generador emita
   var(--bg-primary-500, #3771ff) en lugar del literal, y entonces la variable
   del <body> alcanzaria sola. Es un cambio en el chrome de toda la plataforma,
   fuera del alcance de esta rama. */

body.en-escuela .iq-navbar,
body.en-escuela .iq-navbar.bg-primary-500,
body.en-escuela .iq-navbar.bg-primary-600,
body.en-escuela .iq-navbar.bg-primary-700 {
    background-color: var(--esc-header-fondo, #fff) !important;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}

body.en-escuela .iq-navbar,
body.en-escuela .iq-navbar .nav-link,
body.en-escuela .iq-navbar .navbar-nav .nav-link,
body.en-escuela .iq-navbar i,
body.en-escuela .iq-navbar svg {
    color: var(--esc-header-texto, #3b4054);
}

body.en-escuela .iq-navbar svg {
    fill: currentColor;
}

/* Los desplegables de la barra superior traen su PROPIA superficie clara

   La barra se pinta con el color principal de la escuela, que puede ser
   oscuro. Pero el menú de perfil y el de notificaciones cuelgan de esa barra y
   son paneles blancos que no cambian con la paleta, así que heredaban el
   texto de la barra: con --esc-header-texto blanco, los íconos de Mi perfil y
   Actualizar contraseña desaparecían.

   Esto se probó primero tomando --esc-sidebar-texto en vez de un color fijo,
   asumiendo que esa variable siempre es un texto oscuro pensado para fondo
   claro. Es falso: --esc-sidebar-texto es el par de --esc-sidebar-fondo, y si
   el administrador elige una barra lateral oscura ese texto pasa a blanco
   tambien, y el desplegable vuelve a quedar blanco sobre blanco. El panel no
   comparte fondo con la barra lateral ni con la superior, así que no puede
   tomar prestado el texto de ninguna de las dos: usa --esc-texto-neutro, fijo
   e independiente de la paleta. */
body.en-escuela .iq-navbar .dropdown-menu,
body.en-escuela .iq-navbar .dropdown-menu .nav-link,
body.en-escuela .iq-navbar .dropdown-menu .profile-menu-item,
body.en-escuela .iq-navbar .dropdown-menu .profile-menu-label,
body.en-escuela .iq-navbar .dropdown-menu i,
body.en-escuela .iq-navbar .dropdown-menu svg {
    color: var(--esc-texto-neutro, #3b4054);
}

/* El hover del menu de perfil, que se aplicaba sin verse

   main.css lo resuelve con --neutral-color300 (#e0e0e0) sobre un panel
   blanco: la regla funciona, pero son doce puntos de luminancia y en pantalla
   no se percibe que el elemento este resaltado.

   Se reemplaza por el color de la escuela al 12%, que da un salto visible y
   ademas le dice a la persona en que escuela esta. La barra de la izquierda
   sostiene el foco cuando el tinte no alcanza -pantallas con poco contraste,
   o una paleta muy clara- y aparece tambien en :focus, para que se vea igual
   llegando con el teclado.

   Queda acotado a body.en-escuela: fuera de una escuela no hay color de
   marca del que tomarlo, y el hover palido del resto de la plataforma es un
   asunto aparte. */
body.en-escuela .iq-navbar .dropdown-menu .profile-menu-item:hover,
body.en-escuela .iq-navbar .dropdown-menu .profile-menu-item:focus,
body.en-escuela .iq-navbar .dropdown-menu .profile-menu-item.is-active {
    background: color-mix(in srgb, var(--brand-principal-default, #3771ff) 12%, transparent);
    box-shadow: inset 3px 0 0 0 var(--brand-principal-default, #3771ff);
}

/* Y el fill vuelve a lo que declara cada SVG.

   El selector de atributo es la única forma de distinguirlos en CSS: los íconos
   del menú de perfil son dibujos de línea —fill="none" stroke="currentColor"—, y
   rellenarlos los convierte en manchas sólidas. Los que sí traen un fill propio
   quedan intactos, que es por lo que la regla de arriba existe. */
body.en-escuela .iq-navbar .dropdown-menu svg[fill="none"] {
    fill: none;
}

/* Los blancos fijos de la barra, que la paleta no alcanzaba

   El chrome lo comparte toda la plataforma, donde la barra siempre es azul
   oscuro y el blanco es correcto. Por eso el nombre, el cargo y el buscador
   llevan `text-white` en el marcado, que en Bootstrap 5 es `color: #fff
   !important`: le gana a --esc-header-texto por mucha especificidad que se le
   ponga. Sacarlo del HTML arreglaría la escuela y rompería el resto del sitio,
   asi que se lo pisa aca, acotado a body.en-escuela.

   Elegir una cabecera clara dejaba el nombre y el cargo en blanco sobre
   blanco. */
body.en-escuela .iq-navbar .text-white {
    color: var(--esc-header-texto, #3b4054) !important;
}

/* Salvo dentro de los paneles desplegables: sus encabezados se apoyan en
   bg-primary, que no cambia con la paleta, y ahi el blanco sigue siendo el
   color correcto. */
body.en-escuela .iq-navbar .dropdown-menu .text-white,
body.en-escuela .iq-navbar .sub-drop .text-white {
    color: #fff !important;
}

/* El buscador es bg-transparent, asi que toma el fondo de la barra. El texto
   ya lo resuelve la regla de arriba; el marcador de posicion tiene color
   propio y hay que bajarle la opacidad en vez de fijarle un gris, para que
   funcione igual sobre cabecera clara y oscura. */
/* El !important no es decorativo: main.css:4333 declara
   `.header_search::placeholder { color: white !important }` y
   `.header_search:focus { color: white }`, pensados para una barra que
   siempre era azul oscuro. Sobre cabecera clara el marcador de posicion
   quedaba blanco sobre blanco, y al hacer clic en el campo tambien se perdia
   lo que se escribia. */
body.en-escuela .iq-navbar .header_search::placeholder {
    color: var(--esc-header-texto, #3b4054) !important;
    opacity: 0.65;
}

body.en-escuela .iq-navbar .header_search:focus {
    color: var(--esc-header-texto, #3b4054) !important;
}

/* El recuadro del buscador viene con `border: 1px solid rgba(255,255,255,.7)`
   escrito en el atributo style del contenedor, asi que solo se le puede ganar
   con !important. Sobre cabecera clara era un borde blanco sobre blanco: el
   campo desaparecia entero, porque ademas el fondo es transparente.

   currentColor lo ata al texto de la barra, que ya sigue la paleta. La
   segunda declaracion lo suaviza al 65% para no perder el aire que tenia el
   blanco translucido; los navegadores que no entiendan color-mix se quedan
   con la primera, que ya es correcta. */
body.en-escuela .iq-navbar .search-input {
    border-color: currentColor !important;
    border-color: color-mix(in srgb, currentColor 65%, transparent) !important;
}

/* Un fill en el <path> le gana al `fill: currentColor` que se le pone al
   <svg>, porque son elementos distintos. El icono de idiomas trae
   fill="white" en su path y era el unico que no seguia la paleta. Es el
   problema espejo del svg[fill="none"] de arriba. */
body.en-escuela .iq-navbar [fill="white"] {
    fill: currentColor;
}

/* ===============================================================
   Pie
   =============================================================== */

body.en-escuela footer,
body.en-escuela .footer,
body.en-escuela footer.bg-secondary-500,
body.en-escuela footer.bg-secondary-600,
body.en-escuela footer.bg-secondary-700 {
    background-color: var(--esc-footer-fondo, #fff) !important;
    color: var(--esc-footer-texto, #6c757d);
}

body.en-escuela footer a,
body.en-escuela .footer a {
    color: var(--esc-footer-texto, #6c757d);
}

/* ===============================================================
   Pagina
   =============================================================== */

/* El fondo hay que pintarlo en el <main>, no solo en el <body>

   templates/discovery/css/main.css:722 declara

       main, div.page-wraper { background-color: var(--neutral-color100); }

   y ese selector 'main' alcanza al <main class="main-content"> que abre el
   chrome, o sea al elemento que cubre toda el area de contenido. Pintar solo
   el <body> no se ve nunca: queda detras de esa capa opaca.

   Se pintan los dos. El <body> importa igual para el rebote del scroll en
   movil, donde se asoma por encima o por debajo del main. */

body.en-escuela,
body.en-escuela .main-content {
    background-color: var(--esc-pagina-fondo, #f5f6fa);
}

/* El borde de las tarjetas en un solo lugar.

   Estaba repetido como rgba(0, 0, 0, .08) en cuatro reglas y quedaba mas suave
   que en el boceto: sobre fondo claro apenas se distingue el canto de la
   tarjeta. Se sube y se tiñe de azul en vez de negro puro, que es lo que hace
   que un borde gris no se vea sucio. */

body.en-escuela {
    --esc-borde: rgba(15, 23, 42, .18);

    /* Texto neutro para superficies que NO son la barra lateral.
       No se puede resolver leyendo --esc-sidebar-texto: esa variable es el par
       de --esc-sidebar-fondo, y el administrador elige las dos juntas para que
       contrasten ENTRE SI. Si la barra lateral queda oscura, su texto es
       blanco, y ese blanco es correcto ahi pero invisible en cualquier otra
       superficie clara que lo tome prestado —el desplegable de perfil, la
       leyenda de certificados, la miga de pan sobre el hero— porque esas
       superficies no cambian de color con la paleta: siguen siendo claras
       pase lo que pase. Se fija un valor propio, igual al que --esc-sidebar-
       texto tenia antes como respaldo, para no depender de una variable que
       responde a un contraste distinto. */
    --esc-texto-neutro: #3b4054;
}

/* El contenedor de toda pantalla de escuela

   Antes cada vista abria con col-11 col-sm-11 col-md-11 dentro de un .row. Eso
   fija el ancho en 91,67% desde el breakpoint mas chico, de modo que en un
   telefono se pierde un 8% de pantalla, y sin mx-auto el hueco se va entero a
   la derecha: el contenido queda descentrado.

   Aca el ancho lo decide el propio contenedor y el espaciado escala por
   breakpoint. Las vistas solo declaran .escuela-scope y no repiten clases de
   grilla, asi que una pantalla nueva nace responsive sin acordarse de nada.

   El aire de arriba separa del borde de la barra superior, que no es fija:
   va en el flujo, asi que este padding es toda la separacion que hay. */

/* El pie, al fondo

   templates/header_ abre <main class="main-content"> y templates/pie_ lo cierra
   despues del <footer>, asi que el pie es el ultimo hijo de ese main. Con poco
   contenido quedaba flotando a media pagina.

   hope-ui resolvia esto con .main-content .content-inner { min-height:
   calc(100vh - 6.6rem) }, pero ese 6.6rem supone una barra superior de ~106px y
   este proyecto la redefine en templates/header_ a 56, 48 o 40px segun el ancho.
   El numero de hope-ui nunca fue el correcto aca.

   En vez de estirar el contenido, se hace columna el propio main y se empuja el
   pie con margin-top: auto. Asi el pie baja aunque el contenido sea corto, y no
   se infla un contenedor vacio.

   dvh en lugar de vh donde exista: en un movil, 100vh incluye la barra de
   direcciones y deja el pie fuera de la pantalla al abrir. */

body.en-escuela .main-content {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
}

body.en-escuela .main-content > footer {
    margin-top: auto;
}

/* El banner de las pantallas de la plataforma, dentro de una escuela

   El hero trae su propio fondo oscuro y todo su texto en blanco. Adentro de la
   escuela eso pisa la marca con una franja que no le pertenece, así que el fondo
   se suelta y el contenido se repinta con los colores de la escuela.

   Cada selector lleva su propio body.en-escuela: sin repetirlo, la coma corta la
   herencia y la regla se aplica en toda la plataforma. */
body.en-escuela main,
body.en-escuela div.page-wraper,
body.en-escuela .hero-banner-container,
body.en-escuela .hero-banner-container::before {
    background-color: transparent;
    background: transparent;
}

body.en-escuela .hero-banner-container .hero-title,
body.en-escuela .hero-banner-container .hero-subtitle {
    color: var(--brand-principal-default, #3771ff);
}

/* Y la miga, que sin esto queda blanca sobre claro.

   No va con el color de marca como el título: es navegación secundaria y en el
   color principal competiría con el título que tiene justo debajo. El fondo
   de este bloque es transparente (ver arriba), así que en los hechos se lee
   sobre --esc-pagina-fondo, que la escuela puede aclarar u oscurecer pero no
   es el mismo par que la barra lateral. Por eso la tinta es --esc-texto-
   neutro y no --esc-sidebar-texto: tomar la de la barra lateral funciona
   mientras esa barra sea clara, y deja la miga blanca sobre claro en cuanto el
   administrador elige una barra lateral oscura. */
body.en-escuela .hero-banner-container .hero-breadcrumb a {
    color: var(--esc-texto-neutro, #3b4054);
}

body.en-escuela .hero-banner-container .hero-breadcrumb .separator {
    color: color-mix(in srgb, var(--esc-texto-neutro, #3b4054) 45%, transparent);
}

/* El último tramo es el único que no es un enlace, y trae text-white de
   Bootstrap escrito en el marcado. Esa utilidad declara !important, así que es
   el único caso del bloque que necesita responderle con lo mismo. */
body.en-escuela .hero-banner-container .hero-breadcrumb .text-white {
    color: var(--esc-texto-neutro, #3b4054) !important;
}

/* .back-btn-hero se deja como está a propósito: trae su propio fondo en
   --bs-primary, que la paleta de la escuela ya redefine, así que la flecha
   blanca conserva su contraste sin tocarle nada. */

@media (max-width: 768px) {
    body.en-escuela .main-content {
        min-height: calc(100vh - 48px);
    }
}

@media (max-width: 576px) {
    body.en-escuela .main-content {
        min-height: calc(100vh - 40px);
    }
}

@supports (height: 100dvh) {
    body.en-escuela .main-content {
        min-height: calc(100dvh - 56px);
    }

    @media (max-width: 768px) {
        body.en-escuela .main-content {
            min-height: calc(100dvh - 48px);
        }
    }

    @media (max-width: 576px) {
        body.en-escuela .main-content {
            min-height: calc(100dvh - 40px);
        }
    }
}

body.en-escuela .escuela-scope {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-top: 6.5rem;
    padding-bottom: 3rem;
    padding-inline: 1.5rem;
    background: transparent;

    /* Crece para llenar el main y dejar el pie abajo, pero no se encoge */
    flex: 1 0 auto;

    /* Lo que no entra scrollea en su propio contenedor, no en la pagina */
    overflow-x: hidden;
}

body.en-escuela .escuela-scope .table-responsive,
body.en-escuela .escuela-scope pre {
    overflow-x: auto;
}

/* El aire de arriba SUBE en pantalla chica, no baja

   Esto estaba al reves y era la razon por la que el encabezado quedaba tapado.

   templates/header_ abre el <main> con un <div class="position-relative
   iq-banner"> VACIO. Vacio pero sin la clase .hide, asi que hope-ui lo trata
   como un banner presente y compensa su alto en el hermano siguiente:

       .iq-banner:not(.hide) + .content-inner { margin-top: -3rem !important }
       @media (max-width: 991.98px) { ... margin-top: 1em !important }
       @media (max-width: 767.98px) { ... margin-top: 4em !important }

   Fijate en la direccion: hope-ui PIDE MAS aire cuanto mas angosta la pantalla
   —de -3rem a 4em— porque abajo de 1200px muestra el .sidebar-toggle y le corre
   el .navbar-brand 2rem, y la barra superior crece de alto.

   Pero .escuela-scope no es .content-inner, asi que nada de eso le llega, y su
   padding escalaba justo al contrario: 6.5 -> 3.5 -> 2.5rem. Menos aire donde
   la barra ocupa mas. De ahi que las letras no se vieran.

   No se renombra la clase a .content-inner a proposito: esa regla trae
   !important y padding: 0 en los dos ejes, asi que heredarla obligaria a
   pelearle el espaciado propio de la escuela con mas !important. Se resuelve
   escalando este padding en el mismo sentido que hope-ui. */

@media (max-width: 991.98px) {
    body.en-escuela .escuela-scope {
        padding-top: 5rem;
        padding-bottom: 2.5rem;
    }
}

@media (max-width: 575.98px) {
    body.en-escuela .escuela-scope {
        padding-top: 4.5rem;
        padding-bottom: 2rem;
        padding-inline: 1rem;
    }
}

/* ===============================================================
   Contenido: aqui vive la identidad de la escuela
   =============================================================== */

.escuela-rotulo {
    color: var(--brand-secundario-default, #1b7f5a);
    font-weight: 700;
    letter-spacing: .08em;
    font-size: .78rem;
}

.escuela-titulo,
.seccion-titulo,
.malla-nombre,
.saber-nombre {
    color: var(--brand-principal-default, #3771ff);
    font-weight: 700;
}

/* El numeral y el titulo son una sola linea de texto

   Estaban en dos tamaños distintos —el numeral en .8rem y el titulo en el de un
   h5— y se leian como dos cosas separadas en vez de como "01 Ruta del metodo".
   El numeral hereda el tamaño del titulo y solo cambia el color.

   La malla va a continuacion, en la misma linea: el slot lo nombra la plantilla
   y se repite entre escuelas, la malla es lo que el usuario cursa. En pantalla
   angosta baja sola, porque el contenedor envuelve. */

/* El titulo puede encogerse para dejarle sitio a la linea

   Sin min-width: 0 un elemento flex no baja de su ancho de contenido, asi que
   con un titulo largo la linea se quedaba sin espacio y el porcentaje se caia a
   otro renglon. */

.seccion-titulo {
    min-width: 0;
}

/* El nombre de la malla no redefine nada: hereda la fuente, el tamaño, el peso
   y las mayusculas del titulo, porque juntos son una sola frase
   —"01 Ruta del metodo · Plan de Formacion 2025"— y no un titulo con una
   aclaracion debajo. */

.seccion-malla {
    color: inherit;
}

/* El separador si necesita verse: es lo unico que distingue el nombre del slot
   del nombre de la malla, ahora que se pintan igual. Va en el color de acento y
   con peso, no en el gris del borde, donde practicamente desaparecia. */
.seccion-malla::before {
    content: "·";
    margin: 0 .5rem;
    font-weight: 700;
    color: var(--brand-secundario-default, #1b7f5a);
}

/* La linea que une el encabezado con su contador

   Ocupa el hueco entre el titulo y el porcentaje: los ata como una sola lectura
   de izquierda a derecha. Es un elemento propio y no un <hr>, que trae margenes
   y un borde que hay que anular, y que ademas semanticamente separa contenido
   en vez de unirlo. Aca no separa nada: es decoracion, y por eso lleva
   aria-hidden en el marcado.

   min-width evita que desaparezca del todo cuando el titulo es largo, y
   flex-shrink deja que se encoja antes de empujar al porcentaje a otra linea. */

.seccion-linea {
    flex: 1 1 auto;
    min-width: 1.5rem;
    height: 2px;
    background: var(--esc-borde, rgba(15, 23, 42, .18));
}

/* La descripcion que el administrador le escribe a la seccion

   Va bajo el encabezado y no dentro de el: el titulo, la linea y el contador
   son una sola fila con align-items centrado, y meter dos renglones ahi
   descuadra la linea. Aparte, el margen negativo recupera el mb-3 del
   encabezado, que sobra cuando hay un parrafo en el medio.

   El ancho maximo no es decorativo: un parrafo que cruza 1400 px obliga al ojo
   a saltar de punta a punta y se pierde el renglon. */

.seccion-subtitulo {
    max-width: 64ch;
    margin: -.5rem 0 1.25rem;
    color: #6c757d;
    font-size: .9rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.seccion-numeral {
    color: var(--brand-secundario-default, #1b7f5a);
    font-weight: 700;
    letter-spacing: .08em;
    font-size: inherit;
    line-height: inherit;
}

.hero-panel {
    background: var(--brand-principal-default, #3771ff);
    color: #fff;
}

/* Con imagen de fondo

   El degradado del velo llega en el atributo style, porque el archivo cambia
   por seccion. Aca solo se define como se encuadra: cover y centrada, para que
   la foto llene el panel sin deformarse sea cual sea su proporcion.

   El minimo de alto evita que un panel con pocas tarjetas deje la imagen
   aplastada en una franja. */

.hero-panel-con-fondo {
    min-height: 16rem;
    background-color: var(--brand-principal-default, #3771ff);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Sobre una foto el texto necesita despegarse del fondo */
.hero-panel-con-fondo .hero-titulo,
.hero-panel-con-fondo .hero-rotulo,
.hero-panel-con-fondo .hero-numeral {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

@media (max-width: 575.98px) {
    .hero-panel-con-fondo {
        min-height: 12rem;
    }
}

.hero-rotulo {
    color: rgba(255, 255, 255, .65);
    font-size: .78rem;
    letter-spacing: .08em;
}

/* El numeral hereda el tamaño del rotulo y solo cambia el enfasis

   Los dos estan en la misma linea —"01 Ruta del metodo"— desde que el numeral
   entro al <p> en secciones/hero.php. Antes eran hermanos, con el mismo tamaño
   y el mismo color: el parrafo empujaba al span a su propio renglon y quedaban
   pegados, sin nada que dijera cual es el numero y cual el nombre.

   Lo que los distingue es el peso y la opacidad, no el tamaño. .seccion-numeral
   toma la misma decision resolviendola por color —acento contra principal—, y
   aca eso no sirve: sobre el panel todo el texto es blanco.

   font-size: inherit y no un valor propio, por lo mismo que documenta
   .seccion-numeral: dentro del parrafo hereda del parrafo, pero si alguien lo
   vuelve a sacar afuera heredaria del contenedor flex y se despegarian otra vez. */
.hero-numeral {
    color: #fff;
    font-weight: 700;
    font-size: inherit;
    letter-spacing: .08em;
}

.hero-titulo {
    color: #fff;
}

/* Sobre el fondo del panel el gris de .seccion-subtitulo desaparece: aca el
   texto es blanco atenuado, como el rotulo y el numeral. */

.hero-subtitulo {
    margin-bottom: .75rem;
    color: rgba(255, 255, 255, .8);
    font-size: .85rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.hero-panel-con-fondo .hero-subtitulo {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* Mas aire entre el texto y las tarjetas cuando dejan de estar lado a lado

   El breakpoint es 992 y no 576 porque las columnas son col-lg-3 y col-lg-9:
   se apilan abajo de lg, no en el ultimo tramo.

   Y sube de 1.5 a 2rem porque un hueco que separa bien en horizontal se siente
   mas chico en vertical: apiladas, el texto y la primera tarjeta se leen como un
   mismo bloque. --bs-gutter-y en vez de un margen propio, asi Bootstrap sigue
   repartiendo el hueco con su compensacion de margen negativo en el .row. */
@media (max-width: 991.98px) {
    .escuela-hero .row {
        --bs-gutter-y: 2rem;
    }
}

/* La tarjeta del hero es blanca como las demas

   Antes se pintaba con el color secundario y texto blanco. Ese bloque quedo
   huerfano cuando .malla-card/.saber-card/.hero-card paso a declarar
   background: #fff: la regla posterior gana el fondo pero NO el color, asi que
   la tarjeta quedaba blanca con texto blanco. El titulo se seguia viendo porque
   los encabezados traen su propio color; la descripcion desaparecia.

   Ahora que estas tarjetas llevan portada, blanco es ademas lo coherente con el
   resto de las secciones. */

.hero-card {
    color: inherit;
}

.hero-card p,
.hero-card small {
    color: #6c757d;
}

/* Dos destinos en una tarjeta

   La tarjeta lleva al contenido y "Ver detalle" a la ficha de la malla. Un <a>
   no puede contener otro <a>, asi que el principal se extiende sobre toda la
   superficie con .stretched-link —que se posiciona contra el ancestro
   posicionado mas cercano, de ahi el position: relative de .malla-card— y el
   secundario se levanta por encima con z-index. */

.malla-card-acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .75rem;
}

.malla-card-accion {
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--brand-principal-default, #3771ff);
}

.malla-card-accion-inerte {
    color: #9aa2ad;
    font-weight: 500;
}

.malla-card-detalle {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    padding: .2rem .55rem;
    border: 1px solid var(--esc-borde, rgba(15, 23, 42, .18));
    border-radius: 2rem;
    font-size: .72rem;
    font-weight: 600;
    text-decoration: none;
    color: #626b74;
    background: #fff;
}

.malla-card-detalle:hover,
.malla-card-detalle:focus-visible {
    border-color: var(--brand-principal-default, #3771ff);
    color: var(--brand-principal-default, #3771ff);
}

.malla-card,
.saber-card,
.hero-card {
    position: relative;
    display: block;
    border: 1px solid var(--esc-borde, rgba(15, 23, 42, .18));
    border-radius: .5rem;
    background: #fff;
    transition: transform .15s ease, box-shadow .15s ease;
}

.malla-card:hover,
.saber-card:hover,
.hero-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
}

.malla-card-bloqueada,
.saber-card-bloqueada,
.hero-card-bloqueada {
    opacity: .55;
    cursor: not-allowed;
}

.malla-card-bloqueada:hover,
.saber-card-bloqueada:hover,
.hero-card-bloqueada:hover {
    transform: none;
    box-shadow: none;
}

/* Portada de la tarjeta de malla

   El bloque llevaba background: var(--esc-pagina-fondo) y ninguna imagen: era
   una banda del color de fondo de la pagina sobre cada tarjeta, que con un
   color fuerte se comia la tarjeta entera.

   Ahora la imagen se recorta con object-fit y el distintivo se posiciona
   encima. La proporcion es fija para que una fila de tarjetas alinee sus
   titulos aunque las fotos vengan en formatos distintos. */

.malla-card-imagen {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: .5rem .5rem 0 0;
    background: color-mix(in srgb, var(--brand-principal-default, #3771ff) 8%, #fff);
}

.malla-card-imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sin imagen: un icono de marca, no una banda de color. La carpeta datos/ se
   replica desde produccion y puede venir incompleta, asi que este es un estado
   normal y no una excepcion. */
.malla-card-imagen-vacia {
    display: flex;
    align-items: center;
    justify-content: center;
}

.malla-card-imagen-vacia .bi {
    font-size: 2rem;
    color: color-mix(in srgb, var(--brand-principal-default, #3771ff) 35%, transparent);
}

/* El distintivo va sobre la imagen, arriba a la derecha.
   Las dos franjas comparten la regla: hero y grid pintan la misma clase de
   tarjeta con otro nombre, y un badge sin anclar cae dentro del flujo y
   empuja la imagen. */
.malla-card-imagen .badge,
.hero-card-imagen .badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 1;
}

/* El badge de aprobacion va del lado contrario al de avance.

   Aprobacion a la izquierda, avance a la derecha, en las tres vistas de
   seccion. El ojo aprende el lugar y no hay que leer para saber cual es cual;
   y la posicion no se mueve cuando el texto cambia de largo, que es lo que
   pasaria si los dos compartieran la misma esquina.

   El de avance se queda donde estaba el badge unico: quien ya conoce la
   pantalla no reaprende nada.

   La tarjeta mas angosta de la grilla es minmax(13rem, 1fr) -unos 280px en un
   telefono- y los dos entran con aire. El texto mas largo es el de aprobacion,
   y por eso lleva su propio max-width: si alguien renombra el estado a algo de
   veinte caracteres en am_parametros, se recorta en vez de cruzarse con el de
   avance. */
.malla-card-imagen .badge-aprobacion,
.hero-card-imagen .badge-aprobacion {
    right: auto;
    left: .5rem;
    max-width: calc(50% - .75rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Los tres estados de aprobacion.

   Aprobado toma el secundario de la escuela y no un verde fijo: es el color con
   que la marca ya senala lo conseguido -.cert-emitido y .logros-finalizado
   hacen lo mismo- asi que un modulo aprobado se lee del mismo tono que un
   certificado emitido.

   No aprobado va en ambar y no en rojo. El rojo en una tarjeta de aprendizaje
   se lee como error del sistema o como reproche; esto es una condicion que no
   se cumplio y que en muchos casos se puede volver a intentar.

   Sin evaluar es gris y nace inactivo en am_parametros: por defecto no se
   dibuja. Existe para la instalacion que prefiera ver siempre un badge. */
.badge-aprobado {
    background: color-mix(in srgb, var(--brand-secundario-default, #1b7f5a) 14%, #fff);
    color: color-mix(in srgb, var(--brand-secundario-default, #1b7f5a) 85%, #000);
}

.badge-no-aprobado {
    background: #fff3e0;
    color: #8a5200;
}

.badge-sin-evaluar {
    background: #f1f3f5;
    color: #6c757d;
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .malla-card-imagen {
        background: #eef1f6;
    }

    .malla-card-imagen-vacia .bi {
        color: #b6bfcc;
    }
}

/* Reserva de la tarjeta de saber: la inicial, cuando no hay ni imagen propia
   ni la de la plataforma en disco */
.saber-inicial {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    color: color-mix(in srgb, var(--brand-principal-default, #3771ff) 45%, transparent);
}

/* Portada de la tarjeta del hero

   Va sin relleno propio para que la imagen llegue al borde; el texto lo lleva
   .hero-card-cuerpo. La proporcion es mas apaisada que en las otras secciones
   porque estas tarjetas son mas anchas que altas. */

.hero-card-imagen {
    position: relative;   /* ancla del badge */
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    border-radius: .375rem .375rem 0 0;
}

.hero-card-imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Reparto de los dos colores de marca

   El primario dice DONDE ESTAS: identidad, navegacion, lo activo, lo que se
   puede abrir. El secundario dice QUE LOGRASTE: progreso, completado, logro.

   No es decoracion. Con dos colores sin trabajo asignado, en tres pantallas
   nadie sabe por que una cosa es de un color y la de al lado de otro. Con el
   reparto, el usuario aprende a leer la pantalla sin que se lo expliquen. */

.escuela-scope .progress-bar {
    background: var(--brand-secundario-default, #1b7f5a);
}

/* La grilla de tarjetas de una seccion

   Antes cada parcial usaba clases de columna de Bootstrap y los tres se
   comportaban distinto al crecer el numero de items:

     hero          col-md-4  ->  3 por fila, envuelve
     saberes_malla col-lg    ->  NO envuelve: reparte la fila en partes iguales
     grid_mallas   col-xl-3  ->  4 por fila, envuelve

   El del medio se rompia. col-lg sin numero es flex: 1 0 0%, o sea que todos
   los items entran en una sola linea y se comprimen: con 6 saberes cada
   tarjeta queda en 16,7% del ancho y con 12 en 8,3%. Medido, no estimado.
   Y "Plan de Formacion 2025" ya tiene 6.

   Con auto-fill el numero de columnas sale del ancho disponible y de un ancho
   minimo por tarjeta, no de un breakpoint elegido a dedo. Se adapta a
   cualquier cantidad de items sin que nadie tenga que volver a acertar el
   numero, y por debajo del minimo cae a una sola columna sin media queries.

   El minimo cambia por seccion porque cambia el contenedor: el hero vive
   dentro de una columna de 9/12 y las otras dos ocupan el ancho completo. */

.escuela-grilla {
    display: grid;
    gap: 1rem;
    align-items: stretch;
}

.escuela-grilla-hero {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

.escuela-grilla-saberes {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.escuela-grilla-mallas {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

/* En pantalla chica una sola columna: dos tarjetas de 8rem no se leen */
@media (max-width: 575.98px) {
    .escuela-grilla {
        grid-template-columns: 1fr;
        gap: .75rem;
    }
}

/* Los hijos directos son los envoltorios de cada tarjeta. Se estiran para que
   .h-100 de adentro tenga contra que medirse. */
.escuela-grilla > * {
    min-width: 0;
    display: flex;
}

.escuela-grilla > * > * {
    width: 100%;
}

/* Descripciones a dos lineas

   Una descripcion larga estira su tarjeta y desalinea toda la fila. Se recorta
   a dos lineas con puntos suspensivos y el texto completo queda en el tooltip.

   line-clamp necesita las tres declaraciones -webkit-: siguen siendo la unica
   forma soportada en todos los navegadores actuales, aunque el prefijo mienta
   sobre el motor. min-height reserva las dos lineas para que una descripcion de
   una sola no suba el resto del contenido respecto a sus vecinas.

   El tooltip lo pone public/js/escuelas.js, y SOLO cuando el texto de verdad no
   entra: repetir en un tooltip lo que ya se lee entero es ruido. */

.escuela-descripcion {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.4em);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* El cursor avisa que hay algo mas que leer */
.escuela-descripcion[title] {
    cursor: help;
}

/* Ficha de la malla desde el encabezado

   En hero y saberes_malla todas las tarjetas salen de la misma malla, asi que
   el enlace a su ficha va una vez en el encabezado. En grid_mallas cada tarjeta
   es una malla distinta y por eso alli el enlace vive en la tarjeta. */

.seccion-detalle {
    flex: 0 0 auto;
    padding: .2rem .6rem;
    border: 1px solid var(--esc-borde, rgba(15, 23, 42, .18));
    border-radius: 2rem;
    font-size: .72rem;
    font-weight: 600;
    text-decoration: none;
    color: #626b74;
    background: #fff;
}

.seccion-detalle:hover,
.seccion-detalle:focus-visible {
    border-color: var(--brand-principal-default, #3771ff);
    color: var(--brand-principal-default, #3771ff);
}

/* Dentro del panel del hero el fondo es oscuro, asi que el enlace va claro */
.hero-detalle {
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    color: rgba(255, 255, 255, .85);
}

.hero-detalle:hover,
.hero-detalle:focus-visible {
    color: #fff;
    text-decoration: underline;
}

/* Ver mas

   Lo crea el JavaScript, no la plantilla: sin JavaScript se ven todas las
   tarjetas y este boton no existe. Renderizarlo en PHP dejaria un boton muerto
   y contenido inalcanzable. */

.escuela-vermas {
    display: block;
    width: 100%;
    margin-top: 1rem;
    padding: .6rem;
    border: 1px dashed var(--esc-borde, rgba(15, 23, 42, .18));
    border-radius: .5rem;
    background: transparent;
    font-size: .82rem;
    font-weight: 600;
    color: var(--brand-principal-default, #3771ff);
}

.escuela-vermas:hover,
.escuela-vermas:focus-visible {
    border-style: solid;
    background: color-mix(in srgb, var(--brand-principal-default, #3771ff) 6%, transparent);
}

/* Seccion sin contenido

   Solo la ve quien administra: al estudiante la seccion no le llega. El aviso
   es de trabajo pendiente, no un error, asi que va en tono neutro y no en rojo. */

.seccion-vacia {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px dashed var(--esc-borde, rgba(15, 23, 42, .18));
    border-radius: .6rem;
    background: #fff;
}

.seccion-vacia-icono {
    flex: 0 0 auto;
    font-size: 1.5rem;
    color: color-mix(in srgb, var(--brand-principal-default, #3771ff) 40%, transparent);
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .seccion-vacia-icono {
        color: #b6bfcc;
    }
}

/* Estados de las tarjetas */

/* Los cuatro estados de un contenido

   Antes "Por iniciar" y "Bloqueado" eran dos grises separados por un 5% de
   luminosidad. Son estados opuestos —uno dice que se puede empezar y el otro
   que no— y se veian practicamente iguales, asi que el badge no comunicaba
   nada.

   Ahora cada uno tiene su color y su forma. Tres van suaves (fondo teñido y
   texto del mismo tono a plena intensidad) y solo "En curso" va solido: es lo
   unico que pide atencion ahora mismo, y si todo grita, nada grita. */

.escuela-scope .badge-completado,
.escuela-scope .badge-enprogreso,
.escuela-scope .badge-pendiente,
.escuela-scope .badge-bloqueado,
.badge-completado,
.badge-enprogreso,
.badge-pendiente,
.badge-bloqueado {
    display: inline-flex;
    align-items: center;
    padding: .3rem .65rem;
    border: 1px solid transparent;
    border-radius: 2rem;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

/* Logrado: el color del logro, en version suave como en el boceto */
.badge-completado {
    background: color-mix(in srgb, var(--brand-secundario-default, #1b7f5a) 13%, #fff);
    border-color: color-mix(in srgb, var(--brand-secundario-default, #1b7f5a) 28%, transparent);
    /* El texto va bold a 11px y sobre un tinte claro necesita 4.5:1. La
       proporcion no es al ojo: medida sobre seis secundarios distintos
       —oscuro, medio, claro, pastel, amarillo y magenta— el 78% dejaba el
       peor caso en 2.70:1 y el 50% apenas en 4.59:1. Al 42% el peor sube a
       6.04:1 y el tono sigue reconociendose. */
    color: color-mix(in srgb, var(--brand-secundario-default, #1b7f5a) 42%, #000);
}

/* En curso: el unico solido. Es donde el usuario tiene que volver */
.badge-enprogreso {
    background: #f0ad4e;
    border-color: #f0ad4e;
    color: #4a3208;
}

/* Por iniciar: disponible y sin empezar. Rojo suave, que invita a arrancar sin
   parecer un error */
.badge-pendiente {
    background: color-mix(in srgb, var(--error-color100, #d9534f) 10%, #fff);
    border-color: color-mix(in srgb, var(--error-color100, #d9534f) 40%, transparent);
    /* --error-color100 es #f44336 y a 11px bold no llega a 4.5:1 sobre el
       tinte. Se usa el rojo oscuro de la misma familia, que ya define la
       plataforma. */
    color: var(--error-color-active, #b71c1c);
}

/* Bloqueado: inerte a proposito. No hay nada que hacer aca todavia */
.badge-bloqueado {
    background: #f1f3f5;
    border-color: rgba(15, 23, 42, .09);
    /* Apagado, pero legible: #9aa2ad daba 2.32:1 sobre este fondo y el texto
       de un estado sigue siendo informacion, no adorno */
    color: #626b74;
}

/* Navegadores sin color-mix: se pierde el tinte, no la distincion */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .badge-completado {
        background: #e8f3ee;
        border-color: #bcdccd;
        color: #0b3325;
    }

    .badge-pendiente {
        background: #fdeceb;
        border-color: #f0b7b5;
        color: #c9302c;
    }
}

/* ===============================================================
   Inicio de la escuela
   =============================================================== */

.inicio-marca-completas {
    display: inline-flex;
    align-items: center;
    padding: .4rem .9rem;
    border-radius: 2rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--brand-secundario-default, #1b7f5a);
    background: color-mix(in srgb, var(--brand-secundario-default, #1b7f5a) 12%, transparent);
}

/* Indicadores

   El destacado invierte el par: fondo de marca y texto claro. Es el unico que
   se pinta lleno, para que la vista tenga un solo punto de entrada y no cuatro
   bloques compitiendo. */

.inicio-indicador {
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--esc-borde, rgba(15, 23, 42, .18));
    border-radius: .6rem;
    background: #fff;
}

/* Se destaca porque la seccion esta completa, asi que le toca el color del
   logro y no el de la identidad */
.inicio-indicador-destacado {
    background: var(--brand-secundario-default, #1b7f5a);
    border-color: transparent;
}

.inicio-indicador-rotulo {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    color: var(--brand-secundario-default, #1b7f5a);
}

.inicio-indicador-valor {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--brand-principal-default, #3771ff);
}

.inicio-indicador-detalle {
    font-size: .78rem;
    color: #6c757d;
}

.inicio-indicador-destacado .inicio-indicador-rotulo,
.inicio-indicador-destacado .inicio-indicador-valor {
    color: #fff;
}

.inicio-indicador-destacado .inicio-indicador-detalle {
    color: rgba(255, 255, 255, .75);
}

/* Continua donde quedaste */

.inicio-continuar {
    padding: 1.25rem;
    border: 1px solid var(--esc-borde, rgba(15, 23, 42, .18));
    border-radius: .6rem;
    background: #fff;
}

/* Tres piezas: inicial, cuerpo y boton.

   En ancho van en una fila. Cuando el cuerpo no llega a su minimo, el boton
   baja solo y se estira a todo el ancho: un boton angosto pegado al borde
   derecho es dificil de acertar con el pulgar. */

.inicio-continuar-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.inicio-continuar-cuerpo {
    flex: 1 1 14rem;
    min-width: 0;
}

.inicio-continuar-barra {
    height: .4rem;
}

.inicio-continuar-boton {
    padding-inline: 1.5rem;
}

.inicio-continuar-inicial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: .5rem;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    background: var(--brand-principal-default, #3771ff);
}

@media (max-width: 575.98px) {
    .inicio-continuar {
        padding: 1rem;
    }

    .inicio-continuar-inicial {
        width: 3.25rem;
        height: 3.25rem;
        font-size: 1.4rem;
    }

    .inicio-continuar-boton {
        width: 100%;
    }
}

.inicio-continuar-seccion {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--brand-secundario-default, #1b7f5a);
}

.inicio-enlace {
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--brand-principal-default, #3771ff);
}

.inicio-enlace:hover {
    text-decoration: underline;
}

/* Resumen por seccion */

/* Sin overflow: hidden a proposito.

   Lo tenia, y era para que la franja de arriba no se saliera por la esquina
   redondeada. Pero el globo con el nombre del paso -.inicio-paso-nombre en
   :hover- se abre HACIA ARRIBA desde una ficha que esta pegada al borde de la
   tarjeta, asi que el mismo recorte le cortaba la mitad; y a la primera ficha
   de la fila tambien el costado, porque el globo se centra con translateX.

   La franja resuelve su esquina sola con su propio border-radius, que es donde
   corresponde: el que necesita el redondeo es el que lo pide, no todos los
   descendientes de la tarjeta. */
.inicio-seccion {
    position: relative;
    padding: 1.25rem;
    border: 1px solid var(--esc-borde, rgba(15, 23, 42, .18));
    border-radius: .6rem;
    background: #fff;
}

/* Franja superior: al terminar la seccion se ve de un vistazo cual cerraste,
   sin tener que leer el contador */
.inicio-seccion-completa::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--brand-secundario-default, #1b7f5a);
    border-radius: .6rem .6rem 0 0;
}

.inicio-seccion-completa .inicio-seccion-conteo {
    color: var(--brand-secundario-default, #1b7f5a);
    font-weight: 700;
}

/* En el resumen del inicio las tarjetas van de a dos por fila y tienen que
   quedar parejas: se recorta a dos renglones en vez de dejar que una
   descripcion larga estire su columna. El title lo pone escuelas.js, y solo
   cuando el texto no entra. */

.inicio-seccion-subtitulo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: -.5rem;
    margin-bottom: 1rem;
    color: #6c757d;
    font-size: .85rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.inicio-seccion-conteo {
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
    color: #6c757d;
}

/* Pasos

   En pantalla ancha son fichas en fila: se ve de un vistazo cuantos faltan.
   Por debajo de sm eso deja de funcionar —cinco letras sueltas sin contexto—
   asi que las fichas se convierten en filas con el nombre completo. Es el
   mismo marcado; solo cambia la direccion. */

.inicio-pasos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.inicio-paso {
    display: flex;
    min-width: 3.25rem;
    border-radius: .4rem;
    background: color-mix(in srgb, var(--brand-principal-default, #3771ff) 8%, transparent);
}

/* El <a> es el que lleva el relleno, no el <li>: asi la ficha entera es zona
   clicable y no solo las letras. Cuando el paso esta bloqueado no hay <a> y el
   mismo relleno lo pone .inicio-paso-inerte, para que ambos midan igual. */

.inicio-paso > a,
.inicio-paso > .inicio-paso-inerte {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .6rem .4rem .4rem;
    border-radius: inherit;
    color: inherit;
    text-decoration: none;
}

.inicio-paso-enlace {
    transition: transform .12s ease, box-shadow .12s ease;
}

.inicio-paso-enlace:hover,
.inicio-paso-enlace:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 .25rem .6rem rgba(0, 0, 0, .12);
}

.inicio-paso-enlace:focus-visible {
    outline: 2px solid var(--brand-principal-default, #3771ff);
    outline-offset: 2px;
}

.inicio-paso-letra {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    color: var(--brand-principal-default, #3771ff);
}

/* El nombre existe siempre en el DOM, para el lector de pantalla; en ancho
   se oculta a la vista porque la ficha ya es legible por posicion */
.inicio-paso-nombre {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Al pasar el cursor, ese mismo nombre se convierte en el globo.

   Se revela el elemento que ya esta en el DOM en vez de agregar un title o un
   tooltip de Bootstrap: un title duplicaria el texto —y el lector de pantalla
   lo leeria dos veces— y el layout de escuela no inicializa los de Bootstrap.
   Ademas responde a :focus-visible, asi que tambien aparece con teclado, cosa
   que un title no hace. */
/* El paso que se esta mirando se levanta sobre las tarjetas vecinas: sin esto
   el globo de la columna izquierda queda por debajo de la de la derecha, que
   viene despues en el documento. */
.inicio-paso > a,
.inicio-paso > .inicio-paso-inerte {
    position: relative;
}

.inicio-paso > a:hover,
.inicio-paso > a:focus-visible,
.inicio-paso > .inicio-paso-inerte:hover {
    z-index: 10;
}

.inicio-paso > a:hover .inicio-paso-nombre,
.inicio-paso > a:focus-visible .inicio-paso-nombre,
.inicio-paso > .inicio-paso-inerte:hover .inicio-paso-nombre {
    position: absolute;
    bottom: calc(100% + .35rem);
    left: 50%;
    z-index: 20;
    width: max-content;
    max-width: 14rem;
    height: auto;
    padding: .35rem .55rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    font-size: .75rem;
    line-height: 1.25;
    text-align: center;
    color: #fff;
    background: rgba(33, 37, 41, .95);
    border-radius: .35rem;
    box-shadow: 0 .25rem .6rem rgba(0, 0, 0, .2);
    transform: translateX(-50%);
    pointer-events: none;
}

/* La flechita, del mismo color que el globo */
.inicio-paso > a:hover .inicio-paso-nombre::after,
.inicio-paso > a:focus-visible .inicio-paso-nombre::after,
.inicio-paso > .inicio-paso-inerte:hover .inicio-paso-nombre::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: .3rem solid transparent;
    border-top-color: rgba(33, 37, 41, .95);
    transform: translateX(-50%);
}

.inicio-paso-marca {
    font-size: .7rem;
    line-height: 1;
    min-height: .7rem;
    color: var(--brand-secundario-default, #1b7f5a);
}

.inicio-paso-completado {
    background: color-mix(in srgb, var(--brand-secundario-default, #1b7f5a) 14%, transparent);
}

.inicio-paso-completado .inicio-paso-letra {
    color: var(--brand-secundario-default, #1b7f5a);
}

.inicio-paso-bloqueado {
    background: #f1f3f5;
    cursor: not-allowed;
}

.inicio-paso-bloqueado .inicio-paso-letra,
.inicio-paso-bloqueado .inicio-paso-nombre,
.inicio-paso-bloqueado .inicio-paso-marca {
    color: #adb5bd;
}

@media (max-width: 575.98px) {
    .inicio-pasos {
        gap: .4rem;
    }

    .inicio-paso {
        width: 100%;
        min-width: 0;
    }

    /* El contenedor flex es el hijo, no el <li>: la direccion se cambia ahi */
    .inicio-paso > a,
    .inicio-paso > .inicio-paso-inerte {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: .6rem;
        padding: .55rem .75rem;
    }

    .inicio-paso-letra {
        flex: 0 0 1.5rem;
        text-align: center;
    }

    /* Deja de estar oculto: en este ancho es la unica pista de que es cada paso */
    .inicio-paso-nombre {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: hidden;
        clip: auto;
        flex: 1 1 auto;
        min-width: 0;
        font-size: .88rem;
        text-overflow: ellipsis;
    }

    .inicio-paso-marca {
        flex: 0 0 auto;
    }
}

/* Lista de mallas */

.inicio-lista li {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.inicio-lista li:last-child {
    border-bottom: 0;
}

/* Igual que en los pasos: el relleno vive en la fila, no en el <li>, para que
   toda la linea responda al clic. La version sin enlace usa la misma clase y
   por eso ocupa exactamente lo mismo. */

.inicio-lista-fila {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .5rem;
    margin-inline: -.5rem;
    border-radius: .35rem;
    color: inherit;
    text-decoration: none;
}

.inicio-lista-enlace {
    transition: background .12s ease;
}

.inicio-lista-enlace:hover,
.inicio-lista-enlace:focus-visible {
    background: color-mix(in srgb, var(--brand-principal-default, #3771ff) 7%, transparent);
    color: inherit;
}

.inicio-lista-enlace:focus-visible {
    outline: 2px solid var(--brand-principal-default, #3771ff);
    outline-offset: -2px;
}

/* Sin enlace no hay nada que pulsar: el estado ya lo dice el badge */
.inicio-lista li > span.inicio-lista-fila {
    cursor: default;
    opacity: .65;
}

.inicio-lista-punto {
    flex: 0 0 auto;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: #dee2e6;
}

.inicio-lista-punto-completado {
    background: var(--brand-secundario-default, #1b7f5a);
}

/* Escalas

   El titulo y la cifra del indicador estan pensados para escritorio. clamp()
   los baja de forma continua en vez de saltar en un breakpoint, que es donde
   suelen aparecer los desbordes intermedios. */

body.en-escuela .escuela-titulo {
    font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

body.en-escuela .escuela-titulo.h4 {
    font-size: clamp(1.1rem, .95rem + .8vw, 1.5rem);
}

.inicio-indicador-valor {
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
}

@media (max-width: 575.98px) {
    .inicio-indicador {
        padding: .85rem .9rem;
    }

    .inicio-indicador-rotulo {
        font-size: .62rem;
    }

    .inicio-indicador-detalle {
        font-size: .72rem;
    }

    .inicio-seccion {
        padding: 1rem;
    }
}

/* ===============================================================
   Logros y retos
   =============================================================== */

.logros-saldo {
    padding: 1.25rem;
    border-radius: .6rem;
    background: var(--esc-menu-activo-fondo, var(--brand-principal-default, #3771ff));
    color: var(--esc-menu-activo-texto, #fff);
}

/* El par lo calcula el servidor midiendo contraste, igual que el item activo
   del menu: un fondo de marca con texto fijo falla para media paleta */
.logros-saldo .inicio-indicador-rotulo,
.logros-saldo p {
    color: inherit;
}

.logros-saldo-valor {
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    font-weight: 800;
    line-height: 1;
}

.logros-canje {
    padding: 1.25rem;
    border: 1px solid var(--esc-borde, rgba(15, 23, 42, .18));
    border-radius: .6rem;
    background: #fff;
}

/* Selector de malla

   Cada boton lleva la posicion del usuario a la vista: es el dato que hace que
   la comparacion importe. Sin el, elegir una malla es a ciegas. */

.logros-mallas {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.logros-malla {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    padding: .6rem .9rem;
    border: 1px solid var(--esc-borde, rgba(15, 23, 42, .18));
    border-radius: .5rem;
    background: #fff;
    text-align: left;
}

.logros-malla-nombre {
    font-size: .85rem;
    font-weight: 600;
    color: var(--brand-principal-default, #3771ff);
}

.logros-malla-posicion {
    font-size: .72rem;
    color: #626b74;
}

.logros-malla.activa {
    border-color: var(--brand-principal-default, #3771ff);
    background: color-mix(in srgb, var(--brand-principal-default, #3771ff) 8%, #fff);
}

.logros-malla:hover:not(.activa),
.logros-malla:focus-visible:not(.activa) {
    border-color: var(--brand-secundario-default, #1b7f5a);
}

/* Mientras llega la tabla nueva se atenua la vieja, en vez de vaciarla: un
   hueco en blanco parece un error */
.logros-tabla.cargando {
    opacity: .5;
    pointer-events: none;
}

.logros-fila-propia {
    background: color-mix(in srgb, var(--brand-secundario-default, #1b7f5a) 10%, transparent);
    font-weight: 600;
}

/* Insignias */

.logros-grupo {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--brand-secundario-default, #1b7f5a);
}

.logros-insignia {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1rem;
    border: 1px solid var(--esc-borde, rgba(15, 23, 42, .18));
    border-radius: .6rem;
    background: #fff;
}

.logros-insignia-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 1.35rem;
    color: #fff;
    background: #ced4da;
}

.logros-insignia-titulo {
    font-weight: 700;
    color: var(--brand-principal-default, #3771ff);
}

/* La pendiente se muestra igual, atenuada: una insignia que no se sabe como
   conseguir no motiva a nadie, y esconderla la vuelve invisible */
.logros-insignia-pendiente {
    border-style: dashed;
}

.logros-insignia-pendiente .logros-insignia-titulo {
    color: #626b74;
}

.min-w-0 {
    min-width: 0;
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .logros-malla.activa {
        background: #eef2f8;
    }

    .logros-fila-propia {
        background: #e8f3ee;
    }
}

/* Corte del ranking

   Separa el top de la fila propia cuando el usuario esta mas abajo. Sin la
   marca, el puesto 47 pegado al 10 se lee como si fueran consecutivos. */

.logros-corte td {
    padding: .25rem;
    color: var(--esc-borde, rgba(15, 23, 42, .18));
    letter-spacing: .3rem;
}

.logros-pie {
    margin-top: .75rem;
    font-size: .78rem;
    color: #626b74;
}

/* Marca de malla completada en el ranking */
.logros-finalizado {
    color: var(--brand-secundario-default, #1b7f5a);
}

/* ==========================================================================
   Ayuda por pantalla
   ========================================================================== */

/* El disparador acompaña al título sin competir con él: circular, del color
   de la escuela y en un tono suave, para que se lea como una afordancia y no
   como una acción principal. */
.escuela-ayuda-boton {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1.5px solid color-mix(in srgb, var(--brand-secundario-default, #1a1c23) 35%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-secundario-default, #1a1c23) 8%, transparent);
    color: var(--brand-secundario-default, #1a1c23);
    font-size: 1.1rem;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, transform .15s ease;
}

/* Al pasar el cursor se rellena y el ícono pasa a blanco: el contraste sube en
   vez de quedarse en un cambio de fondo que casi no se nota. */
.escuela-ayuda-boton:hover,
.escuela-ayuda-boton:focus-visible {
    border-color: var(--brand-secundario-default, #1a1c23);
    background: var(--brand-secundario-default, #1a1c23);
    color: #fff;
}

.escuela-ayuda-boton:focus-visible {
    outline: 2px solid var(--brand-secundario-default, #1a1c23);
    outline-offset: 2px;
}

.escuela-ayuda-boton:active {
    transform: scale(.94);
}

/* El encabezado con el botón de ayuda a la derecha

   .escuela-encabezado no tenía estilo propio: la fila la armaban las utilidades
   de Bootstrap del marcado. Alcanzaba en las pantallas cuyo encabezado son dos
   líneas de texto, pero no en Inicio ni en "Mi malla curricular", que además
   traen el texto libre del hero: el botón se bajaba a la línea siguiente y
   quedaba pegado al borde izquierdo.

   flex-basis: 0 es la pieza que resuelve, y no min-width: 0 como parecía.
   min-width controla cuánto puede ENCOGERSE un ítem, pero el algoritmo de
   envoltura decide con el flex base size, que con `basis: auto` es el ancho
   preferido del contenido: el hero pedía la fila entera y el botón no cabía.
   Con base 0 el título no reserva nada y el reparto empieza de cero, así que
   todo entra en una línea.

   .flex-grow-1 de Bootstrap solo declara flex-grow con !important y no toca
   flex-basis, así que esto no pelea con el marcado. */
.escuela-encabezado > :first-child {
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
}

/* Y lo que va al lado del título no se encoge: en Inicio ese hueco lleva la
   marca de secciones completas junto al botón, y sin esto el texto se parte
   letra por letra antes de que el título ceda una sola.

   Los dos casos se nombran uno por uno en vez de resolverlo con
   :not(:first-child), y hay una razón concreta: escuelas/_ayuda deja DOS hijos
   en el <header>, el botón y su panel offcanvas. Al panel las propiedades de
   flex le resbalan porque es position: fixed, pero justify-content NO —el
   offcanvas de Bootstrap es un flex en columna— así que una regla por posición
   le empujaría todo el contenido al fondo del panel. */
.escuela-encabezado-acciones,
.escuela-encabezado > .escuela-ayuda-boton {
    flex-shrink: 0;
}

/* Tooltip propio, en CSS y no con el de Bootstrap.

   Razón concreta: el layout del estudiante NO inicializa los tooltips de
   Bootstrap —son opt-in y ningún script del front los engancha—, así que un
   data-bs-toggle="tooltip" acá no mostraría nada. Y montar la inicialización
   para todo el front por un botón no se justifica.

   Tampoco se usa `title`: el nativo tarda cerca de un segundo en aparecer, no se
   puede estilizar y en un móvil no existe. El texto accesible sigue viviendo en
   el <span class="visually-hidden"> del botón, así que esto es decoración: por
   eso lleva aria-hidden y no reemplaza a nada que lea un lector de pantalla. */
.escuela-ayuda-globo {
    position: absolute;

    /* Debajo del botón y alineado a su borde derecho, siempre — no al costado.

       Dos razones, las dos medidas:

       1. `body.en-escuela .escuela-scope` tiene overflow-x: hidden, así que
          cualquier absoluto que se salga por un lado queda recortado. El botón
          vive en el extremo derecho del encabezado: un globo hacia la izquierda
          entra, pero uno hacia la derecha desaparece, y en un encabezado angosto
          el cálculo cambia de pantalla a pantalla.
       2. Colgando hacia abajo no hay eje horizontal que desbordar: el globo nace
          pegado al borde derecho del botón y crece hacia dentro. */
    top: calc(100% + .5rem);
    right: 0;

    /* Por encima del contenido de la página pero por debajo de los diálogos de
       Bootstrap, que arrancan en 1055: un tooltip no puede taparle un modal. */
    z-index: 1040;

    /* Ancho holgado: con 14rem las frases de tres o cuatro palabras cortaban en
       cada línea y el globo se leía apretado. */
    max-width: 20rem;
    width: max-content;
    padding: .5rem .75rem;
    border-radius: .375rem;
    background: var(--brand-secundario-default, #1a1c23);
    color: #fff;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s ease;
}

/* La flechita, del mismo color que el globo y apuntando al botón */
.escuela-ayuda-globo::after {
    content: '';
    position: absolute;
    bottom: 100%;
    right: .8rem;
    border: .3rem solid transparent;
    border-bottom-color: var(--brand-secundario-default, #1a1c23);
}

.escuela-ayuda-boton:hover .escuela-ayuda-globo,
.escuela-ayuda-boton:focus-visible .escuela-ayuda-globo {
    opacity: 1;
    visibility: visible;
}

/* En pantalla chica el reparto en una linea deja de servir

   flex-basis: 0 resuelve el escritorio, pero en un telefono trabaja en contra:
   fuerza el encabezado a UNA linea siempre, y como lo de la derecha no se
   encoge, el titulo queda en la columna que sobra. En Inicio eso son unos 230px
   de marca y boton contra 100px de titulo: el saludo se parte en cuatro lineas
   de una palabra.

   Aca la fila de acciones toma linea propia y se va ARRIBA, no abajo. Arriba
   por dos razones: el boton de ayuda es la afordancia de la pantalla y detras
   del texto libre del hero —que el admin puede hacer tan largo como quiera—
   nadie lo encuentra; y asi el encabezado replica el patron de barra superior
   que ya trae cualquier telefono, con la accion en el extremo derecho.

   El titulo pasa a flex-basis: 100% para que reclame el ancho completo. Con
   basis: 0 seguiria repartiendo contra un hermano que ya no esta en su linea. */
@media (max-width: 575.98px) {
    .escuela-encabezado > :first-child {
        flex-basis: 100%;
    }

    /* Las cinco pantallas donde el boton viaja solo: se va arriba y se pega al
       borde derecho. margin-left: auto y no justify-content, porque acá el
       elemento ES el boton y no un contenedor: justify-content le correria el
       icono adentro del circulo. */
    .escuela-encabezado > .escuela-ayuda-boton {
        order: -1;
        margin-left: auto;
    }

    /* Y en Inicio, donde el boton viaja acompañado de la marca de secciones
       completas, la fila entera toma linea propia alineada a la derecha.

       Se permite envolver: la marca mas el boton entran en 328px, pero un
       idioma mas largo —"sections completed"— no tiene por que desbordar el
       scope, que lleva overflow-x: hidden y lo cortaria sin dejar rastro. */
    .escuela-encabezado-acciones {
        order: -1;
        flex-basis: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    /* Un punto menos de diametro: en la linea propia el boton ya no compite con
       el titulo, y 2.5rem al lado de un texto de .78rem se lee desproporcionado. */
    .escuela-ayuda-boton {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1rem;
    }

    /* Y el globo se limita al ancho de la pantalla.

       Las 20rem de escritorio son 320px. Con el boton pegado al borde derecho el
       globo crece hacia la izquierda, y en un telefono de 320px el area util es
       288px: se saldria por la izquierda, donde .escuela-scope tiene
       overflow-x: hidden y lo cortaria sin dejar rastro.

       El 2rem que se descuenta es el padding-inline de este mismo breakpoint,
       1rem por lado. */
    .escuela-ayuda-globo {
        max-width: min(20rem, calc(100vw - 2rem));
    }
}

/* El panel de ayuda del estudiante

   Esta regla existia y la reescritura del bloque del boton se la llevo. Lo que
   se perdio fue el ANCHO: sin ella el panel toma los 400px de .offcanvas-end, y
   en un telefono de 360px se sale de la pantalla. De ahi que el contenido se
   viera cortado.

   min(30rem, 100vw) resuelve las dos puntas: 30rem donde hay lugar, y el ancho
   de la pantalla cuando no, porque 400px sobre 360 dejaria el texto en una
   columna de dos palabras.

   El scroll lo trae .offcanvas-body de hope-ui, que ya declara overflow-y: auto
   sobre un .offcanvas en columna flexible. Las dos reglas de abajo lo hacen
   explicito en vez de confiar en eso: son el reparto que el panel necesita
   —cabecera fija, cuerpo que rueda— y asi no se rompe si el tema cambia. */
.escuela-ayuda {
    width: min(30rem, 100vw);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.escuela-ayuda .escuela-ayuda-cabecera {
    flex: 0 0 auto;
}

.escuela-ayuda .escuela-ayuda-cuerpo {
    flex: 1 1 auto;
    overflow-y: auto;

    /* El pie del ultimo bloque queda pegado al borde inferior cuando el
       contenido llena el panel: un poco de aire evita que se lea cortado. */
    padding-bottom: 2rem;
}

.escuela-ayuda-cabecera {
    align-items: flex-start;
    gap: .75rem;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--esc-borde, rgba(15, 23, 42, .18));
    background: color-mix(in srgb, var(--brand-principal-default, #3771ff) 6%, transparent);
}

.escuela-ayuda-titulo {
    display: flex;
    align-items: center;
    margin: 0;
    color: var(--brand-principal-default, #3771ff);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
}

.escuela-ayuda-cuerpo {
    padding: 1.25rem;
}

.escuela-ayuda-intro {
    margin-bottom: 1.5rem;
    color: var(--neutral-color600, #5b6a7d);
    font-size: .9375rem;
    line-height: 1.6;
}

.escuela-ayuda-bloque + .escuela-ayuda-bloque {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--esc-borde, rgba(15, 23, 42, .18)) 55%, transparent);
}

.escuela-ayuda-bloque-titulo {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin-bottom: .5rem;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.4;
}

.escuela-ayuda-icono {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .5rem;
    background: color-mix(in srgb, var(--brand-principal-default, #3771ff) 12%, transparent);
    color: var(--brand-principal-default, #3771ff);
    font-size: .875rem;
}

.escuela-ayuda-texto {
    margin: 0;
    padding-left: 2.375rem;
    color: var(--neutral-color600, #5b6a7d);
    font-size: .875rem;
    line-height: 1.65;
}

.escuela-ayuda-lista {
    margin: .625rem 0 0;
    padding-left: 3.5rem;
    color: var(--neutral-color600, #5b6a7d);
    font-size: .875rem;
    line-height: 1.65;
}

.escuela-ayuda-lista li + li {
    margin-top: .375rem;
}

.escuela-ayuda-lista strong {
    color: var(--neutral-color800, #232d42);
}

.escuela-ayuda-pie {
    margin: 1.75rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--esc-borde, rgba(15, 23, 42, .18));
    color: var(--neutral-color500, #8a92a6);
    font-size: .8125rem;
    line-height: 1.55;
}

/* Las dos medidas de una malla: recorrido y aprobado */
.malla-medidas {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    color: var(--neutral-color500, #8a92a6);
    font-size: .75rem;
    line-height: 1.4;
}

.malla-medidas span {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}

/* Filtros del catálogo de premios
   (views/escuelas/premios.php)

   El patrón responsive es el que ya usan cursos/cursos y
   saberes_gestion/generica/*: la barra a la vista en escritorio y, por debajo de
   912px, un botón Filtros que abre un panel lateral. Las clases del panel
   —.mobile-controls, .modal-overlay, .filters-modal— vienen de
   templates/discovery/css/main.css con su breakpoint incluido, así que acá solo
   va lo que falta: esconder la barra en el mismo punto en que aparece el botón.

   912px no es un breakpoint de Bootstrap; es el que ya trae main.css para este
   patrón. Usar otro dejaría un tramo con la barra y el botón a la vez, o con
   ninguno de los dos. */
@media (max-width: 912px) {
    .escuela-filtros-barra {
        display: none;
    }
}

/* Dentro del panel los controles son el mismo nodo que en la barra, y el panel
   mide 350px: las columnas de Bootstrap quedarían en dos por fila y cada control
   a la mitad de un teléfono. Se apilan todas.

   Va por .filters-modal-content y no por el id de cada vista: el componente
   escuelas/_filtros_movil.php lo usan tres pantallas y cada una nombra su
   contenedor distinto, así que atarlo a un id dejaba a las otras dos en dos
   columnas. */
.filters-modal-content [class*="col-"] {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

/* Y el margen inferior sobra: adentro del panel no hay nada debajo. */
.filters-modal-content > .row,
.filters-modal-content > form {
    margin-bottom: 0 !important;
}

/* El QR se acota para que no crezca con el modal. La librería lo devuelve con
   width:100% y en una tablet quedaba más grande que la pantalla del teléfono que
   lo va a escanear, que es al revés de lo útil. */
.codigo-qr {
    max-width: 15rem;
}

.codigo-qr img {
    width: 100%;
    height: auto;
    display: block;
}

/* El panel de filtros con pie fijo (escuelas/_filtros_movil.php)

   .filters-modal viene de main.css con height:100vh y overflow-y:auto, así que
   el pie se iría con el scroll y quedaría al final del contenido en vez de a la
   vista. Se pasa a columna flexible: el scroll baja al contenido y el pie se
   queda abajo, que es donde la mano llega en un teléfono. */
.escuela-filtros-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.escuela-filtros-panel .filters-modal-content {
    flex: 1 1 auto;
    overflow-y: auto;
}

.escuela-filtros-pie {
    flex: 0 0 auto;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(15, 23, 42, .12);
    background: #fff;
}

/* El contador de filtros aplicados, en el botón que abre el panel. Cerrado el
   panel es la única señal de que la lista está recortada. */
.escuela-filtros-boton .badge {
    margin-left: .35rem;
    padding: .25rem .45rem;
    font-size: .7rem;
    line-height: 1;
}

/* Rótulos del menú que no entran en su renglón

   El sidebar mide 16.2rem y, descontando el ícono, quedan unos veinte
   caracteres. Los rótulos actuales entran; esto es la red para los que agreguen
   después, o para una traducción más larga.

   .item-name de hope-ui no trae nowrap, así que por defecto el texto se parte en
   dos líneas. Eso no pierde información pero rompe el ritmo vertical del menú:
   con siete ítems, uno de doble alto desordena el recorrido del ojo. Se fuerza
   una línea y lo que sobra se recorta. */
body.en-escuela .sidebar .nav-link .item-name {
    margin-left: .65rem;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* El globo del rótulo recortado

   position: fixed y no absolute, y esa es la pieza que hace que funcione:
   .sidebar-body tiene overflow: hidden, así que un absolute dentro del menú se
   recorta justo en el borde por donde el globo tendría que salir. Un fixed no lo
   recorta ningún ancestro, pero necesita coordenadas de viewport, así que las
   pone el JS con getBoundingClientRect.

   Vive fuera del <aside> por la misma razón. */
.escuela-menu-globo {
    position: fixed;
    z-index: 1045;
    display: none;
    max-width: 18rem;
    padding: .4rem .65rem;
    border-radius: .375rem;
    background: var(--esc-sidebar-texto, #3b4054);
    color: var(--esc-sidebar-fondo, #fff);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: normal;
    pointer-events: none;
    box-shadow: 0 .25rem .75rem rgba(15, 23, 42, .18);
}

.escuela-menu-globo.visible {
    display: block;
}

/* La flechita apunta al ítem, a la izquierda */
.escuela-menu-globo::before {
    content: '';
    position: absolute;
    top: .55rem;
    right: 100%;
    border: .3rem solid transparent;
    border-right-color: var(--esc-sidebar-texto, #3b4054);
}


/* ==========================================================================
   Certificados de la escuela
   ========================================================================== */

/* Los tres estados, en un solo lugar

   Son tinta de texto y no fondos: la insignia de estado vive dentro de una
   tarjeta blanca y a la derecha de un nombre, y tres pastillas de color
   compitiendo con el boton Descargar convierten la lista en un semaforo. El
   color lo lleva el icono y el peso lo lleva la palabra.

   Disponible usa el secundario de la escuela y no un verde fijo: es el color
   que la marca ya usa para lo conseguido —.logros-finalizado hace lo mismo—,
   asi que un certificado emitido se lee del mismo tono que una malla
   terminada. Los otros dos no se tiñen de marca a proposito: no son logros. */
.cert-emitido {
    color: var(--brand-secundario-default, #1b7f5a);
}

.cert-proceso {
    color: #b26a00;
}

/* Distinto de .cert-proceso a proposito: los dos son "todavia no", pero solo
   este pide algo de la persona. Mismo tono de la marca que usa un modulo en
   curso, para que se lea como avance y no como problema. */
.cert-incompleto {
    color: var(--brand-principal-default, #3771ff);
}

/* Los dos requisitos de la regla que no son contenido.

   Ambar y no rojo: no son un error de la persona, son una condicion que
   todavia no se cumple. El rojo en una lista de logros se lee como reprobado.

   La asistencia va mas apagada que la nota a proposito: la nota se puede
   subir, la asistencia no. Un color que llama a la accion sobre algo que no
   tiene accion posible es una promesa falsa. */
.cert-falta-nota {
    color: #b26a00;
}

.cert-falta-asist {
    color: #8a6d3b;
}

/* La linea con los numeros del requisito.

   Sin fondo de tarjeta: es el detalle de la insignia que esta justo arriba, no
   otro bloque. Y con el mismo sangrado que la lista de recursos pendientes,
   para que las tres formas de "esto es lo que falta" se lean parejas. */
.cert-requisito {
    margin-top: .625rem;
    padding-left: 1rem;
    border-left: 2px solid color-mix(in srgb, #b26a00 35%, transparent);
    color: #6c757d;
    font-size: .8125rem;
}

.cert-sin-regla {
    color: #6c757d;
}

/* La sesion cerro y este certificado no va a salir.

   Gris y no rojo, por lo mismo que .cert-falta-asist esta apagado: el rojo
   dice "reprobaste" y no es eso: puede haber cumplido todo y no haber llegado
   a tiempo, o faltarle una asistencia que ya no puede dar. Es el fin de un
   plazo, no una calificacion.

   Mas oscuro que .cert-sin-regla porque este SI es informacion sobre la
   persona —le paso algo— mientras que sin regla es informacion sobre la malla,
   que no le concierne. */
.cert-cerrado {
    color: #495057;
}

/* La insignia que reemplaza al boton cuando no hay nada que descargar

   No es un boton deshabilitado: uno invita a apretarlo y no explica nada. Esto
   es texto con su icono, y lo que dice —En proceso o Sin certificado— es
   justamente la explicacion. */
.cert-insignia {
    display: inline-flex;
    align-items: center;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}

/* La fecha y la accion, juntas

   La fecha va pegada al boton y no en una columna propia. En una tabla la
   columna funciona porque el encabezado la nombra; aca no hay encabezado, y una
   fecha suelta en el medio de la fila no dice de que es. */
.cert-accion {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.cert-fecha {
    white-space: nowrap;
}

/* En la fila de un modulo la accion se aprieta

   El modulo es una linea dentro de la tarjeta de su ruta, no otra tarjeta: con
   el mismo hueco y la misma fecha que arriba, las dos filas pesan igual y se
   pierde de quien cuelga cual. */
.cert-accion-compacta {
    gap: .5rem;
}

.cert-accion-compacta .cert-fecha {
    font-size: .75rem;
}

/* La lista y la tarjeta, que ademas son ganchos del JavaScript de filtrado
   (querySelectorAll('.cert-ruta')): renombrarlas rompe el filtro, no el estilo.

   Lo unico que hace falta declarar es quitarle el margen al ultimo, que en el
   marcado viene del mb-3 de Bootstrap y sobra justo antes del pie. */
.cert-lista > :last-child {
    margin-bottom: 0;
}

/* Cuando el filtro esconde una tarjeta con [hidden], la utilidad de Bootstrap
   no alcanza: .card trae display: flex y gana por especificidad. */
.cert-ruta[hidden] {
    display: none;
}

/* Los datos de la ruta separados por un punto medio

   Con ::before en cada hermano y no con un separador escrito en el marcado: los
   tres datos son opcionales —duracion, nota y cantidad de modulos— y un
   separador puesto a mano quedaria colgando cuando el de al lado no existe. */
.cert-ruta-datos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.cert-ruta-datos > span + span::before {
    content: "·";
    margin: 0 .5rem;
    color: color-mix(in srgb, var(--esc-texto-neutro, #3b4054) 45%, transparent);
}

.cert-ruta-nombre {
    color: var(--brand-principal-default, #3771ff);
    font-weight: 700;
}

/* La ruta que el filtro no eligio pero que sigue a la vista

   Pasa cuando se busca el nombre de un modulo: la ruta no coincide, pero se
   deja como contexto porque un modulo suelto, sin el nombre de su ruta, no se
   ubica. Atenuada y no escondida, para que se lea como encabezado y no como
   otro resultado. */
.cert-ruta-atenuada > .card-body > .d-flex {
    opacity: .55;
}

/* Los modulos, colgados de su ruta

   La linea a la izquierda es lo que dice "esto pertenece a lo de arriba" sin
   necesidad de sangrar el texto ni repetir el nombre de la ruta en cada fila. */
.cert-modulos {
    border-left: 2px solid var(--esc-borde, rgba(15, 23, 42, .18));
    padding-left: 1rem;
    margin-left: .25rem;
}

.cert-modulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: .625rem 0;
}

.cert-modulo + .cert-modulo {
    border-top: 1px solid color-mix(in srgb, var(--esc-borde, rgba(15, 23, 42, .18)) 55%, transparent);
}

/* El numero del modulo es su secuencia en la malla, no un contador de la
   pantalla: si el filtro esconde el segundo, el tercero sigue diciendo 3. */
.cert-modulo-orden {
    display: inline-block;
    min-width: 1.5rem;
    color: var(--brand-secundario-default, #1b7f5a);
    font-weight: 700;
    font-size: .8125rem;
}

.cert-modulo-nombre {
    font-size: .9375rem;
}

/* La leyenda de los tres estados

   Se queda con la lista y no se fue al panel de ayuda porque traduce lo que la
   lista esta mostrando en ese momento: no es ayuda, es parte de la lista. Por
   eso tampoco lleva fondo de tarjeta, que la separaria de lo que explica. */
.cert-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1.25rem;
    font-size: .8125rem;
    color: #6c757d;
}

.cert-leyenda-item {
    display: flex;
    align-items: baseline;
    gap: .375rem;
}

/* Neutro y no --esc-sidebar-texto: esta leyenda vive en una tarjeta clara de
   la pagina, no en la barra lateral. Prestarle el texto de la barra funciona
   solo mientras esa barra sea clara; con una barra lateral oscura su texto
   pasa a blanco y la palabra se pierde sobre la tarjeta. */
.cert-leyenda-item strong {
    color: var(--esc-texto-neutro, #3b4054);
}

@media (max-width: 575.98px) {
    /* La accion baja a su propia linea y se pega a la izquierda, alineada con
       el nombre. A la derecha del nombre no queda ancho para una fecha mas un
       boton sin que el nombre se parta en columnas de una palabra. */
    .cert-accion {
        flex-basis: 100%;
        justify-content: flex-start;
    }

    .cert-modulos {
        padding-left: .625rem;
    }

    /* La leyenda en una columna: tres items en fila con su texto completo se
       parten en seis lineas desordenadas y dejan de leerse como una lista. */
    .cert-leyenda {
        flex-direction: column;
        gap: .5rem;
    }
}


/* Lo que falta para el certificado

   Va colgado debajo del nombre, con la misma linea a la izquierda que los
   modulos: dice "esto pertenece a lo de arriba" sin repetir de que ruta es.
   No lleva fondo de tarjeta a proposito -no es otro bloque, es el detalle del
   estado que esta justo arriba. */
.cert-pendientes {
    margin-top: .625rem;
    padding-left: 1rem;
    border-left: 2px solid color-mix(in srgb, var(--brand-principal-default, #3771ff) 35%, transparent);
}

/* El resumen es el disparador del <details>

   Se le quita el marcador nativo -el triangulito del navegador, que cambia de
   forma y de color en cada uno- y se pone un chevron propio que gira al abrir.
   list-style y ::-webkit-details-marker: hacen falta los dos, porque Safari
   ignora el primero. */
.cert-pendientes-resumen {
    display: flex;
    align-items: center;
    gap: .375rem;
    cursor: pointer;
    color: var(--brand-principal-default, #3771ff);
    font-size: .8125rem;
    font-weight: 600;
    list-style: none;
}

.cert-pendientes-resumen::-webkit-details-marker {
    display: none;
}

.cert-pendientes-resumen::before {
    content: "›";
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    transition: transform .15s ease;
}

.cert-pendientes[open] > .cert-pendientes-resumen::before {
    transform: rotate(90deg);
}

.cert-pendientes-resumen:hover {
    text-decoration: underline;
}

/* El foco se ve: es un control, y con teclado hay que saber donde esta */
.cert-pendientes-resumen:focus-visible {
    outline: 2px solid var(--brand-principal-default, #3771ff);
    outline-offset: 2px;
    border-radius: .25rem;
}

.cert-pendientes-lista {
    margin-top: .375rem;
}

.cert-pendientes-lista {
    font-size: .8125rem;
}

.cert-pendientes-lista li {
    padding: .125rem 0;
}

/* El nombre del recurso es lo que la persona vino a buscar: va con peso. El
   modulo, que solo lo ubica, va atenuado y detras de un punto medio. */
.cert-pendiente-nombre {
    font-weight: 600;
}

.cert-pendiente-donde {
    color: #6c757d;
}

/* Una fila que apunta a un recurso que ya no existe.

   Se muestra en vez de esconderse porque bloquea el certificado de verdad: el
   emisor la cuenta. En cursiva y atenuada para que se lea como lo que es —algo
   roto del lado de la configuracion, no una tarea de la persona— pero sin
   pintarla de rojo, que sugeriria que hizo algo mal. */
.cert-pendiente-colgado {
    color: #6c757d;
    font-style: italic;
    font-weight: 400;
}

.cert-pendiente-donde::before {
    content: "·";
    margin: 0 .375rem;
}

.cert-pendientes-mas {
    margin-top: .25rem;
    color: #6c757d;
    font-size: .75rem;
    font-style: italic;
}