/* Uniendo Nodos (tema) — retoques de componente.
   Un tema aporta tokens; aquí solo va lo que NO es expresable como token.

   OJO CON EL ORDEN: `templates/element/head.php` pinta theme.css y
   overrides.css ANTES de alumneflex-ui.css. Con la misma especificidad ganaría
   la capa común, así que aquí se antepone `:root` para subir un punto y ganar. */

/* --- La esquina abierta de los botones --------------------------------------
   Viene de uniendonodos.com: sus botones de acción llevan 8px 32px 8px 8px, con
   la esquina superior derecha mucho más abierta. Casa con la guía, cuyo
   imagotipo y cuyas franjas acaban siempre en un corte en ángulo. No cabe en
   --radius-control (ver tokens/radius.css), así que se pone sobre la variable
   del propio botón.

   En los botones de 40 px de la plataforma 32 px se comería el lado entero, así
   que la esquina escala con la altura. Los botones fantasma, los de solo icono
   y los de peligro se quedan simétricos: no son llamadas a la acción y en una
   fila de iconos la esquina parecería un error. */
:root .btn-brand, :root .btn-ink, :root .btn-outline-brand,
:root .btn-primary, :root .btn-secondary, :root .btn-outline-primary {
  --bs-btn-border-radius: 8px 24px 8px 8px;
}
:root .btn-lg:is(.btn-brand, .btn-ink, .btn-outline-brand, .btn-primary, .btn-secondary, .btn-outline-primary) {
  --bs-btn-border-radius: 8px 32px 8px 8px;
}
:root .btn-sm:is(.btn-brand, .btn-ink, .btn-outline-brand, .btn-primary, .btn-secondary, .btn-outline-primary) {
  --bs-btn-border-radius: 6px 16px 6px 6px;
}

/* --- Títulos en mayúsculas --------------------------------------------------
   La guía: «Títulos — Didact Gothic mayúsculas; subtítulos — Didact Gothic
   minúsculas». Aquí son títulos el de cada página, el del panel de bienvenida,
   el de la tarjeta de acceso y el de la portada de la ficha del catálogo; el
   resto de h2-h4 hacen de subtítulo y se quedan como se escriben.
   Didact Gothic tiene un solo corte: el 600 que pide la capa común lo resuelve
   el rango de peso del @font-face (tokens/fonts.css) y se pinta tal cual. */
:root .af-page-head h1, :root .af-hero-title,
:root .af-auth-title, :root .af-catalog-hero-title {
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}

/* --- Botones en SemiBold ----------------------------------------------------
   K2D SemiBold es el peso de etiqueta de la guía. Bootstrap pone los botones en
   el peso normal del cuerpo. */
:root .btn { --bs-btn-font-weight: var(--weight-semibold); }

/* --- Titular de página en gris ----------------------------------------------
   La guía rotula sus títulos en gris, no en negro. En oscuro el token vuelve a
   la tinta clara. */
:root .af-page-head h1,
:root .af-catalog-hero-title { color: var(--un-heading-ink); }

/* --- Logotipo de la barra lateral -------------------------------------------
   El lockup es de 3,2:1 y a los 42 px de tope de la capa común se pinta a
   42 × 133. Un 50 % más ancho son 200 px, justo el hueco útil de la barra
   (248 menos los 16 + 8 de relleno a cada lado): 63 px de alto. `height` y
   `max-height` van juntos porque el tope de la capa común limitaría al alto.
   En el panel móvil, mismo +50 %: de 24 a 36 px. */
:root .af-sidebar-logo img { height: 63px; max-height: 63px; }
:root .af-offcanvas-logo img { height: 36px; max-height: 36px; }

/* --- Tablas dentro de un panel ----------------------------------------------
   La capa común redondea la cabecera de la tabla (y su envoltorio, que la
   recorta) con --radius-card, y el panel que la contiene con --radius-panel.
   Aquí son 8 y 16 px: la cabecera, con fondo, asomaba por fuera de la curva
   del panel y se comía su filo superior. Dentro de un panel ambos siguen el
   radio del panel, menos el píxel de su borde. */
:root .af-panel .af-table-wrap { border-radius: calc(var(--radius-panel) - 1px); }
:root .af-panel .af-table th:first-child { border-top-left-radius: calc(var(--radius-panel) - 1px); }
:root .af-panel .af-table th:last-child { border-top-right-radius: calc(var(--radius-panel) - 1px); }

/* --- El triángulo azul del panel de bienvenida ------------------------------
   El panel tinta (sombra profunda) lleva un triángulo de Azul Cloud cortado en
   la esquina superior derecha: el mismo corte en ángulo de las franjas.
   `isolation` crea el contexto de apilado para que el triángulo (z-index -1)
   quede por encima del fondo del panel y por debajo del texto; sin
   `overflow: hidden`, para no recortar desplegables, y con la esquina
   redondeada a mano para que siga el radio del panel. */
:root .af-panel-ink.af-hero { position: relative; isolation: isolate; }
:root .af-panel-ink.af-hero::after {
  content: ""; position: absolute; top: 0; right: 0; z-index: -1;
  width: 96px; height: 96px;
  background: var(--brand-primary); /* sigue a la «Marca rápida» de la cuenta */
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  border-top-right-radius: var(--radius-panel);
  pointer-events: none;
}
@media (max-width: 575.98px) {
  :root .af-panel-ink.af-hero::after { width: 64px; height: 64px; }
}

/* --- Pantalla de acceso sobre fondo claro -----------------------------------
   El fondo es la portada de la guía: blanco con las franjas escalonadas, naranja
   arriba a la izquierda y azul abajo a la derecha. La capa común da por hecho un
   telón oscuro (velo del escenario y pie en blanco quemado), así que todo lo de
   aquí va acotado a `.af-auth--image`, la clase que solo existe cuando el tema
   aporta imagen. Cuatro gestos:
     1. En pantallas anchas la tarjeta se va a la derecha y deja a la vista la
        esquina de las franjas, que es lo que se reconoce de la portada.
     2. Un lavado blanco bajo la tarjeta y el pie, que calma las franjas justo
        donde hay que leer.
     3. Tarjeta con filo, sombra propia y el degradado del isotipo arriba: sobre
        blanco, una tarjeta blanca necesita borde, no solo sombra.
     4. El pie pasa del blanco al gris sombra. */
@media (min-width: 992px) {
  :root .af-auth--image { justify-content: flex-end; padding-right: clamp(40px, 9vw, 168px); }
  :root .af-auth--image .af-auth-bgwrap::after {
    background: linear-gradient(90deg, transparent 0%, transparent 46%, rgba(255,255,255,.80) 70%, rgba(255,255,255,.92) 100%);
  }
}
/* Por debajo de 992 px la imagen se recorta por el centro y lo que queda son
   franjas horizontales detrás de la tarjeta: el lavado cubre toda la pantalla. */
@media (max-width: 991.98px) {
  :root .af-auth--image .af-auth-bgimg { object-position: 0% 50%; }
  :root .af-auth--image .af-auth-bgwrap::after { background: rgba(255,255,255,.80); }
}

:root .af-auth-card {
  position: relative;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 24px 64px rgba(18,22,23,.16), 0 2px 10px rgba(18,22,23,.08);
}
/* El filete superior. Una tira de 4 px con radio de 24 no puede seguir la
   curva (el radio no cabe en su alto y se aplasta) y además arrancaba por
   dentro del borde de 1 px, así que se veía como una línea recta con las
   puntas sueltas. Aquí es un anillo del tamaño exacto de la esquina superior
   de la tarjeta (`inset: -1px`, encima del borde), con solo el lado de arriba
   pintado y el interior vaciado con la máscara: el degradado sigue la curva y
   se adelgaza hasta cero en los costados. */
:root .af-auth-card::before {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: var(--radius-2xl);
  border-top: 4px solid transparent;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  background: var(--un-gradient-logo) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* El lockup es de 3,2:1: a los 36 px de la capa común se queda en 114 px de
   ancho y pierde presencia; a 52 px son 165. */
:root .af-auth-logo { height: 52px; }

/* El pie, sobre la imagen lavada. Los tres selectores de la capa común van en
   blanco quemado; aquí pasan a gris sombra con la misma escala de tres pesos.
   Medidos contra el punto más claro Y el más oscuro bajo el lavado (una franja
   de Azul Cloud al 80-92 % de blanco): el más exigente es el copyright a 12 px. */
:root .af-auth--image .af-auth-foot { color: var(--gray-700); }
:root .af-auth--image .af-auth-foot-copy { color: var(--gray-700); }
:root .af-auth--image .af-auth-foot a { color: var(--gray-800); }
:root .af-auth--image .af-auth-foot a:hover { color: var(--gray-900); }