/* GENERADO por prototipo/herramientas/portal_cascaron.py
   Cascaron del rediseno del Portal de Padres ASFG (encabezado, menu, pie) para
   el portal real. Los valores son los del prototipo aprobado (css/tokens.css,
   css/base.css y css/componentes.css); las clases llevan prefijo rd- para no
   chocar con w3.css ni con las clases de las paginas. ASCII a proposito: el
   portal es Windows-1252 y una hoja en UTF-8 sin declarar rompe los acentos. */
:root {
  --rd-azul: #1D365D; --rd-rojo: #F02B3C; --rd-rojo-banda: #E22D31;
  --rd-azul-oscuro: #12233F; --rd-azul-superficie: #EAF0F7; --rd-azul-borde: #C6D3E3;
  --rd-texto: #1F2A37; --rd-texto-suave: #4A5565; --rd-fondo: #FFFFFF; --rd-fondo-pagina: #F4F6F9;
  --rd-fuente: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rd-t-xs: 0.875rem; --rd-t-s: 0.9375rem; --rd-t-m: 1rem;
  --rd-e1: 4px; --rd-e2: 8px; --rd-e3: 12px; --rd-e4: 16px; --rd-e5: 24px;
  --rd-r-s: 6px; --rd-foco: 3px solid var(--rd-rojo); --rd-ancho-max: 1200px;
  --rd-t-l: 1.125rem; --rd-t-xl: 1.375rem; --rd-t-xxl: 1.75rem; --rd-t-xxxl: 2rem;
  --rd-e6: 32px; --rd-e7: 48px; --rd-e8: 64px; --rd-r-m: 10px;
  --rd-sombra: 0 1px 2px rgba(29,54,93,.06), 0 4px 12px rgba(29,54,93,.08);
}

/* ---- Pagina: fondo, letra y los estilos que el encabezado viejo definia ----
   El encabezado de antes traia en su <style> las clases c3-azul, c3-carmesi y
   asfg, que 48, 29 y 43 paginas usan en su contenido. Se conservan con el color
   del rediseno, y el fondo de la pagina deja de ser azul marino. */
body { font-family: var(--rd-fuente); font-size: var(--rd-t-s); line-height: 1.5; color: var(--rd-texto); margin: 0; }
body.c3-azul { background-color: var(--rd-fondo-pagina) !important; color: var(--rd-texto) !important; }
.c3-azul { color: #fff !important; background-color: var(--rd-azul) !important; }
.c3-carmesi { color: #fff !important; background-color: var(--rd-azul) !important; }
/* El w3.css del portal (personalizado) pinta .asfg y .asfglarge con !important:
   sin !important aqui, el boton se quedaba gris (medido en la maqueta, 6-oct).
   El ancho NO se toca: las paginas acomodan sus botones con el de 218 px. */
.asfg, .asfglarge, .asfg2, .asfg_cl, .asfg_azobs { background: var(--rd-azul) !important; color: #fff !important;
  border: 0 !important; border-radius: var(--rd-r-s) !important; box-shadow: none !important; text-shadow: none !important;
  font-family: var(--rd-fuente) !important; font-size: var(--rd-t-s) !important; font-weight: 600 !important;
  padding: 10px 18px; min-height: 44px; text-decoration: none; vertical-align: middle; cursor: pointer; }
.asfg:hover, .asfg:active, .asfglarge:hover, .asfg2:hover, .asfg_cl:hover, .asfg_azobs:hover {
  background: var(--rd-azul-oscuro) !important; color: #fff !important; }

/* ---- Cascaron ---- */
.rd-barra-pegada, .rd-barra-pegada *, .rd-pie, .rd-pie * { box-sizing: border-box; }
.rd-barra-pegada { position: sticky; top: 0; z-index: 50; font-family: var(--rd-fuente); }
.rd-barra-pegada ul, .rd-barra-pegada li { margin: 0; padding: 0; list-style: none; }
.rd-barra-pegada :focus-visible { outline: var(--rd-foco); outline-offset: 2px; }
/* Saltar al contenido (prototipo .saltar): fuera de la vista hasta que recibe el foco con el teclado; el destino
   (main o .rd-contenido con tabindex=-1) no pinta contorno al recibir el foco. */
.rd-saltar { position: absolute; left: 0; top: 0; transform: translateY(-200%); z-index: 100; background: var(--rd-fondo); color: var(--rd-azul); padding: var(--rd-e3) var(--rd-e4); font-family: var(--rd-fuente); font-size: var(--rd-t-s); font-weight: 700; text-decoration: none; border-radius: 0 0 var(--rd-r-s) 0; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.rd-saltar:focus { transform: none; outline: var(--rd-foco); outline-offset: 2px; }
main:focus, .rd-contenido:focus { outline: none; }
.rd-nav :focus-visible, .rd-pie :focus-visible { outline-color: var(--rd-fondo); }
.rd-icono { width: 24px; height: 24px; flex: 0 0 auto; display: block; }
.rd-contenedor { width: 100%; max-width: var(--rd-ancho-max); margin: 0 auto; padding: 0 var(--rd-e4); }
@media (min-width: 768px) { .rd-contenedor { padding: 0 var(--rd-e5); } }

.rd-cabecera { background: var(--rd-fondo); border-bottom: 1px solid var(--rd-azul-borde); }
.rd-cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--rd-e3); min-height: 64px; padding-top: var(--rd-e2); padding-bottom: var(--rd-e2); }
.rd-marca { display: flex; align-items: center; gap: var(--rd-e3); text-decoration: none; min-width: 0; min-height: 44px; }
.rd-marca__logo { width: 48px; height: 48px; display: block; }
.rd-marca__texto { display: flex; flex-direction: column; min-width: 0; }
.rd-marca__colegio, .rd-marca__abrev, .rd-marca__portal { overflow: hidden; text-overflow: ellipsis; }
.rd-marca__colegio { font-size: var(--rd-t-s); font-weight: 600; color: var(--rd-azul); line-height: 1.2; }
.rd-marca__abrev { display: none; font-size: var(--rd-t-m); font-weight: 700; color: var(--rd-azul); line-height: 1.2; letter-spacing: .04em; }
.rd-marca__portal { font-size: var(--rd-t-xs); color: var(--rd-texto-suave); line-height: 1.2; margin-top: 2px; white-space: nowrap; }
.rd-cabecera__acciones { display: flex; align-items: center; gap: var(--rd-e2); flex: 0 0 auto; }
.rd-idiomas { display: flex; gap: var(--rd-e1); }
.rd-idioma { display: inline-flex; align-items: center; gap: var(--rd-e2); border: 1px solid transparent; background: transparent; color: var(--rd-texto-suave); border-radius: var(--rd-r-s); padding: 6px 8px; font: inherit; font-size: var(--rd-t-xs); font-weight: 600; min-height: 44px; min-width: 44px; justify-content: center; cursor: pointer; }
.rd-idioma--activo { background: var(--rd-azul-superficie); color: var(--rd-azul); border-color: var(--rd-azul-borde); }
.rd-idioma:hover { color: var(--rd-azul); }
.rd-bandera { width: 20px; height: 14px; border-radius: 2px; flex: 0 0 auto; display: block; }
.rd-acciones { display: flex; align-items: center; gap: var(--rd-e1); }
.rd-accion { position: relative; }
.rd-accion__boton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 6px; border: 1px solid transparent; border-radius: var(--rd-r-s); background: transparent; color: var(--rd-texto-suave); text-decoration: none; cursor: pointer; font: inherit; }
.rd-accion__boton .rd-icono { width: 22px; height: 22px; }
.rd-accion__boton:hover { color: var(--rd-azul); background: var(--rd-azul-superficie); }
.rd-accion__boton[aria-expanded="true"] { color: var(--rd-azul); background: var(--rd-azul-superficie); border-color: var(--rd-azul-borde); }
.rd-accion__menu { display: none; position: absolute; top: 100%; right: 0; z-index: 30; min-width: 210px; margin-top: 4px; background: var(--rd-fondo); border: 1px solid var(--rd-azul-borde); border-radius: var(--rd-r-s); box-shadow: 0 8px 16px rgba(0,0,0,.18); padding: var(--rd-e1) 0; }
.rd-accion__boton[aria-expanded="true"] + .rd-accion__menu { display: block; }
.rd-accion__opcion { display: block; padding: 12px 14px; color: var(--rd-texto); text-decoration: none; font-size: var(--rd-t-s); font-weight: 600; white-space: nowrap; }
.rd-accion__opcion:hover { background: var(--rd-azul-superficie); color: var(--rd-azul); }
@media (max-width: 479px) {
  .rd-accion { position: static; }
  .rd-cabecera__acciones { position: relative; }
  .rd-accion__menu { right: 0; left: auto; max-width: calc(100vw - var(--rd-e5)); }
}
.rd-menu-boton { display: inline-flex; align-items: center; gap: var(--rd-e2); background: var(--rd-azul); color: var(--rd-fondo); border: 0; border-radius: var(--rd-r-s); padding: 8px 12px; font: inherit; font-size: var(--rd-t-xs); font-weight: 600; min-height: 44px; min-width: 44px; justify-content: center; cursor: pointer; }
@media (max-width: 1023px) {
  .rd-idioma span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rd-idioma { padding: 6px; }
}
@media (max-width: 479px) {
  .rd-marca__colegio { display: none; }
  .rd-marca__abrev { display: block; }
  .rd-marca__logo { width: 34px; height: 34px; }
  .rd-marca { gap: var(--rd-e2); }
  .rd-cabecera__fila { gap: var(--rd-e3); }
}
@media (max-width: 359px) {
  .rd-marca__logo { width: 28px; height: 28px; }
  .rd-marca { gap: var(--rd-e1); }
}
@media (max-width: 519px) {
  .rd-marca__portal { display: none; }
  .rd-cabecera__acciones { gap: var(--rd-e2); }
  .rd-acciones { gap: 0; }
  .rd-menu-boton span { display: none; }
  .rd-menu-boton { padding: 8px 10px; }
  .rd-idioma--activo { display: none; }
}
@media (min-width: 768px) {
  .rd-marca__logo { width: 56px; height: 56px; }
  .rd-marca__colegio { font-size: var(--rd-t-m); }
  .rd-cabecera__fila { min-height: 80px; }
}
@media (min-width: 1024px) { .rd-menu-boton { display: none; } }

.rd-nav { background: var(--rd-azul); display: none; }
.rd-nav--abierto { display: block; }
.rd-nav__lista { display: flex; flex-direction: column; padding-top: var(--rd-e1); padding-bottom: var(--rd-e1); }
.rd-nav__enlace { display: block; color: var(--rd-fondo); text-decoration: none; font-size: var(--rd-t-s); font-weight: 600; padding: 12px 8px; border-bottom: 1px solid rgba(255,255,255,.12); text-transform: uppercase; letter-spacing: .02em; }
.rd-nav__enlace:hover { background: var(--rd-azul-oscuro); color: var(--rd-fondo); }
.rd-nav__enlace--activo { font-weight: 700; background: var(--rd-azul-oscuro); }
@media (min-width: 1024px) {
  .rd-nav { display: block; }
  .rd-nav__lista { max-width: none; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 0 var(--rd-e1); padding: 0 var(--rd-e4); }
  .rd-nav__enlace { padding: 14px 7px; font-size: var(--rd-t-xs); border-bottom: 3px solid transparent; white-space: nowrap; }
  .rd-nav__enlace:hover { background: transparent; border-bottom-color: rgba(255,255,255,.4); }
  .rd-nav__enlace--activo { background: transparent; border-bottom-color: var(--rd-rojo); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .rd-nav__lista { padding: 0 var(--rd-e2); }
  .rd-nav__enlace { padding: 14px 5px; font-size: 12.5px; letter-spacing: 0; }
}
.rd-nav__desplegar { -webkit-appearance: none; appearance: none; border-radius: 0; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); color: var(--rd-fondo); font: inherit; font-size: var(--rd-t-s); font-weight: 600; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--rd-e2); cursor: pointer; }
.rd-nav__desplegar .rd-icono { flex: 0 0 auto; width: 16px; height: 16px; transition: transform .15s ease; }
.rd-nav__desplegar[aria-expanded="true"] .rd-icono { transform: rotate(180deg); }
.rd-nav__submenu { display: none; }
.rd-nav__desplegar[aria-expanded="true"] + .rd-nav__submenu { display: block; }
.rd-nav__enlace--hijo { padding-left: 32px; font-weight: 400; }
@media (min-width: 1024px) {
  .rd-nav__grupo { position: relative; }
  .rd-nav__desplegar { width: auto; justify-content: center; gap: 3px; border-bottom: 3px solid transparent; padding: 14px 7px; font-size: var(--rd-t-xs); white-space: nowrap; }
  .rd-nav__desplegar:hover { border-bottom-color: rgba(255,255,255,.4); }
  .rd-nav__desplegar.rd-nav__enlace--activo { border-bottom-color: var(--rd-rojo); }
  .rd-nav__submenu { position: absolute; top: 100%; left: 0; z-index: 20; min-width: 210px; background: var(--rd-azul-oscuro); box-shadow: 0 8px 16px rgba(0,0,0,.28); border-radius: 0 0 var(--rd-r-s) var(--rd-r-s); padding: var(--rd-e1) 0; }
  .rd-nav__enlace--hijo { padding: 12px 14px; border-bottom: 0; white-space: nowrap; }
  .rd-nav__enlace--hijo:hover { background: var(--rd-azul); }
}
@media (min-width: 1024px) and (max-width: 1279px) { .rd-nav__desplegar { padding: 14px 5px; } }

.rd-pie { background: var(--rd-azul-oscuro); color: var(--rd-fondo); font-family: var(--rd-fuente); font-size: var(--rd-t-xs); margin-top: var(--rd-e5); }
/* La pagina entera como el prototipo (base.css: body en columna de al menos 100vh y el
   pie con margin-top auto). Daniel, 12-oct: "el footer tiene que ser lo mas bajo de la
   pantalla"; y el fondo gris del prototipo tambien en las paginas que conservan su
   <body> viejo (Aspirantes, Inscripciones, Eventos: salian en blanco). El pie vive en
   tres lugares segun la pagina: hijo del body, dentro de un div hijo del body, o dentro
   del <form> que envuelve toda la pagina (ese form se vuelve columna y crece). */
body:has(.rd-barra-pegada) { background: var(--rd-fondo-pagina) !important; margin: 0; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; }
body:has(.rd-barra-pegada) > form:has(.rd-pie) { flex: 1 0 auto; display: flex; flex-direction: column; }
body:has(.rd-barra-pegada) > .rd-pie, body:has(.rd-barra-pegada) > :has(> .rd-pie),
body:has(.rd-barra-pegada) > form > .rd-pie, body:has(.rd-barra-pegada) > form > :has(> .rd-pie) { margin-top: auto; }
.rd-pie__fila { display: flex; flex-direction: column; gap: var(--rd-e2); padding-top: var(--rd-e4); padding-bottom: var(--rd-e4); text-align: center; }
.rd-pie__texto { margin: 0; max-width: none; opacity: .92; font-weight: 400; }
.rd-pie__enlace { color: var(--rd-fondo); white-space: nowrap; display: inline-block; padding: 12px 0; }
/* El subrayado se declara: paginas viejas como Consulta_Aspirantes.asp traen
   a { text-decoration: none } y dejaban el pie sin ligas visibles (12-oct). */
.rd-pie a { color: var(--rd-fondo); text-decoration: underline; text-underline-offset: 2px; }
.rd-pie a:hover { color: var(--rd-fondo); text-decoration-thickness: 2px; }
/* Un telefono no se parte en dos renglones (en la maqueta del 6-oct quedaba
   "55 6481" arriba y "8152" abajo). */
.rd-pie a[href^="tel:"] { white-space: nowrap; }
.rd-pie__copyright { border-top: 1px solid rgba(255,255,255,.15); margin-top: var(--rd-e3); padding-top: var(--rd-e3); padding-bottom: var(--rd-e4); text-align: center; opacity: .8; font-size: var(--rd-t-xs); }
@media (min-width: 768px) { .rd-pie__fila { flex-direction: row; justify-content: space-between; text-align: left; align-items: center; } }
@media print { .rd-barra-pegada, .rd-pie { display: none !important; } }

/* ---- Paginas redisenadas por dentro (Centro de Ayuda, Buzon, Inicio...) ----
   Lo de css/componentes.css del prototipo que esas paginas usan, con prefijo
   rd- y acotado a .rd-contenido para no tocar las paginas viejas. */
/* La letra tambien en el body: las paginas que conservan su cabeza vieja (Facturas)
   cargan w3.css, que pide "Helvetica Neue" a un archivo que no existe (12-oct: 404). */
body.rd-pagina { background: var(--rd-fondo-pagina); margin: 0; font-family: var(--rd-fuente); }
.rd-contenido { padding: var(--rd-e5) 0 var(--rd-e7); font-family: var(--rd-fuente); font-size: var(--rd-t-m); line-height: 1.5; color: var(--rd-texto); }
.rd-contenido *, .rd-contenido *::before, .rd-contenido *::after { box-sizing: border-box; }
.rd-contenido h1, .rd-contenido h2, .rd-contenido h3 { font-family: var(--rd-fuente); color: var(--rd-azul); line-height: 1.25; margin: 0 0 var(--rd-e3); }
.rd-contenido h1 { font-size: var(--rd-t-xxl); font-weight: 700; margin-top: var(--rd-e2); text-wrap: balance; }
.rd-contenido h2 { font-size: var(--rd-t-xl); font-weight: 700; text-wrap: balance; }
.rd-contenido h3 { font-size: var(--rd-t-l); font-weight: 600; }
.rd-contenido p { margin: 0 0 var(--rd-e3); max-width: none; }
/* Correo de Tere del 29-sep (en el prototipo desde el 1-oct, componentes.css): los textos
   de la pagina a todo lo ancho y justificados desde tableta; en celular, a la izquierda. */
@media (min-width: 768px) { .rd-contenido .rd-contenedor > p, .rd-contenido .rd-contenedor > section > p { text-align: justify; } }
.rd-contenido a { color: var(--rd-azul); text-decoration: underline; text-underline-offset: 2px; }
.rd-contenido a:hover { color: var(--rd-azul-oscuro); }
.rd-contenido :focus-visible { outline: var(--rd-foco); outline-offset: 2px; }
.rd-contenido img { display: block; max-width: 100%; }
@media (min-width: 768px) {
  .rd-contenido { padding: var(--rd-e6) 0 var(--rd-e8); }
  .rd-contenido h1 { font-size: var(--rd-t-xxxl); }
}
.rd-boton { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: var(--rd-e2); min-height: 44px; padding: 10px 18px; border-radius: var(--rd-r-s); font-size: var(--rd-t-s); font-weight: 600; text-decoration: none !important; border: 1px solid transparent; font-family: var(--rd-fuente); cursor: pointer; }
.rd-boton--primario { background: var(--rd-azul); color: var(--rd-fondo) !important; }
.rd-boton--primario:hover { background: var(--rd-azul-oscuro); color: var(--rd-fondo) !important; }
.rd-boton--secundario { background: var(--rd-fondo); color: var(--rd-azul) !important; border-color: var(--rd-azul); }
.rd-boton--secundario:hover { background: var(--rd-azul-superficie); }
.rd-tarjeta { background: var(--rd-fondo); border: 1px solid var(--rd-azul-borde); border-radius: var(--rd-r-m); padding: var(--rd-e4); box-shadow: var(--rd-sombra); }
.rd-panel { background: var(--rd-fondo); border: 1px solid var(--rd-azul-borde); border-radius: var(--rd-r-m); overflow: hidden; }
.rd-panel__cabecera { background: var(--rd-azul-superficie); padding: var(--rd-e3) var(--rd-e4); border-bottom: 1px solid var(--rd-azul-borde); }
.rd-panel__cabecera h2, .rd-panel__cabecera h3 { margin: 0; }
.rd-panel__cuerpo { padding: var(--rd-e4); }
@media (min-width: 768px) { .rd-tarjeta, .rd-panel__cuerpo { padding: var(--rd-e5); } .rd-panel__cabecera { padding: var(--rd-e4) var(--rd-e5); } }
.rd-acordeon { border-top: 1px solid var(--rd-azul-borde); }
.rd-acordeon summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--rd-e3); padding: var(--rd-e3) 0; font-weight: 600; color: var(--rd-azul); font-size: var(--rd-t-m); }
.rd-acordeon summary::-webkit-details-marker { display: none; }
.rd-acordeon summary .rd-icono { transition: transform .2s; }
.rd-acordeon[open] summary .rd-icono { transform: rotate(180deg); }
.rd-acordeon__respuesta { padding: 0 0 var(--rd-e4); font-size: var(--rd-t-s); }
@media (min-width: 768px) { .rd-acordeon__respuesta p { text-align: justify; } }
/* Con .rd-contenido delante: la regla general de parrafos (0,1,1) le quitaba el
   margen negativo (medido en la maqueta del 6-oct: 8 px de mas bajo el titulo). */
.rd-contenido .rd-ayuda__subtitulo { color: var(--rd-texto-suave); font-weight: 600; margin-top: calc(-1 * var(--rd-e2)); }
.rd-ayuda { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rd-e4); margin-top: var(--rd-e4); }
.rd-ayuda__grupos { display: flex; flex-direction: column; gap: var(--rd-e4); }
.rd-ayuda .rd-panel__cuerpo { padding-top: 0; padding-bottom: 0; }
.rd-ayuda .rd-acordeon:first-child { border-top: 0; }
.rd-ayuda .rd-acordeon:last-child summary { padding-bottom: var(--rd-e4); }
.rd-contacto { align-self: start; }
.rd-contacto h2 { font-size: var(--rd-t-l); }
.rd-contacto__lista { margin: 0; }
.rd-contacto__lista dt { font-size: var(--rd-t-xs); font-weight: 600; color: var(--rd-texto-suave); margin-top: var(--rd-e3); }
.rd-contacto__lista dd { margin: 2px 0 0; font-size: var(--rd-t-s); overflow-wrap: anywhere; }
@media (min-width: 768px) { .rd-ayuda { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--rd-e5); } }
.rd-contacto__buzon { border-top: 1px solid var(--rd-azul-borde); margin-top: var(--rd-e4); padding-top: var(--rd-e4); display: flex; align-items: center; gap: var(--rd-e3); }
.rd-contacto__buzon-icono { width: 36px; height: 36px; flex: 0 0 auto; }
.rd-contacto__buzon .rd-boton { padding: 10px 14px; white-space: nowrap; }
/* Buzon: el formulario de Google de ASFG en un marco que se adapta. En el portal
   de antes media 1000 x 1779 px fijos y en un celular no cabia. Alto fijo y no en
   vh: el formulario se desplaza por dentro (prototipo, componentes.css). */
.rd-buzon__marco { border: 1px solid var(--rd-azul-borde); border-radius: var(--rd-r-m); background: var(--rd-fondo); overflow: hidden; box-shadow: var(--rd-sombra); }
.rd-buzon__forma { display: block; width: 100%; border: 0; height: 560px; }
@media (min-width: 768px) { .rd-buzon__forma { height: 720px; } }
/* Inicio: la franja de ASFG rehecha en codigo y los accesos rapidos (prototipo,
   componentes.css, con sus medidas tomadas de banner-diverso.jpg). Las fotos se
   recortaron con herramientas/recortar_banner.py para que las siglas de las
   playeras no asomen bajo la franja (Julio, 2-oct; Daniel, 5-oct-2026). */
.rd-banner { position: relative; height: 200px; border-radius: var(--rd-r-m); overflow: hidden; margin-bottom: var(--rd-e5);
  background: var(--rd-azul) url("../../imagenes/rediseno/banner-movil.jpg") center/cover no-repeat; container-type: size; }
.rd-banner__texto { position: absolute; left: 0; right: 0; top: 77.5%; height: 11.1%; color: var(--rd-fondo); padding: 0;
  display: flex; align-items: center; justify-content: flex-end; }
.rd-banner__pieza { position: absolute; top: 0; bottom: 0; transform: skewX(20.9deg); }
.rd-banner__pieza--bloque { left: -6%; width: 16.6%; background: var(--rd-azul); }
.rd-banner__pieza--raya { left: 11.6%; width: 1.5%; background: var(--rd-azul); }
.rd-banner__pieza--banda { left: 14.1%; right: -6%; background: var(--rd-rojo-banda); }
.rd-contenido .rd-banner__titulo { position: relative; z-index: 1; margin: 0 4.8% 0 0; color: var(--rd-fondo);
  font-size: clamp(12px, 1.9vw, 28px); line-height: 1; white-space: nowrap; font-weight: 700; }
.rd-contenido .rd-banner__titulo { font-size: 7.05cqh; }
.rd-contenido .rd-accesos__titulo { font-size: var(--rd-t-l); color: var(--rd-texto-suave); font-weight: 600; margin-top: var(--rd-e5); }
.rd-accesos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rd-e4); margin: 0; padding: 0; list-style: none; }
.rd-acceso-rapido { display: flex; flex-direction: column; gap: var(--rd-e3); }
.rd-contenido .rd-acceso-rapido p { margin: 0; font-size: var(--rd-t-s); }
.rd-acceso-rapido .rd-boton { align-self: stretch; margin-top: auto; }
.rd-acceso-rapido__icono { width: 56px; height: 56px; flex: 0 0 auto; }
.rd-nota { margin-top: var(--rd-e5); }
/* La nota de bienvenida viene de la base con su propio HTML: cada vineta (<img> de 25 px) va
   junto a su texto. La regla general de imagenes (display: block) la subia a un renglon solo. */
.rd-contenido .rd-nota img { display: inline-block; vertical-align: -7px; margin-right: 6px; }
@media (min-width: 768px) {
  .rd-banner { height: auto; aspect-ratio: 2400 / 545; background-image: url("../../imagenes/rediseno/banner-asfg.jpg"); }
  .rd-accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) { .rd-accesos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Entrada de Reinscripciones (reinscripciones.html: .reins__grafico, .reins__accesos, .reins__nota). Tere, 15-oct: "Los
   botones no estan del ancho de la imagen": con la rejilla de 4 del Inicio, tres tarjetas ocupaban 860 de 1152 px. */
.rd-contenido .rd-reins__grafico { margin: var(--rd-e5) 0; overflow-x: auto; text-align: center; }
.rd-contenido .rd-reins__grafico img { width: 100%; height: auto; border-radius: var(--rd-r-m); border: 1px solid var(--rd-azul-borde); }
.rd-accesos.rd-reins__accesos { margin: var(--rd-e5) 0; }
@media (min-width: 768px) { .rd-accesos.rd-reins__accesos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rd-contenido .rd-reins__nota { color: var(--rd-texto-suave); font-size: var(--rd-t-s); }

/* ---- Homologacion LIGERA del contenido de las paginas que todavia no se
   redisenan por dentro ----
   Medido el 6-oct-2026 en las 16 paginas principales de los papas: usan sobre
   todo clases de acomodo de w3.css, 297 campos, 18 tablas y 134 estilos en
   linea. Sin poder verlas corriendo, aqui solo va letra, color de bordes y
   esquinas: nada de tamanos ni acomodo que pueda desarmar una tabla. */
input, select, textarea, button { font-family: var(--rd-fuente); }
h2, h3, h4, h5, h6 { font-family: var(--rd-fuente); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"],
input[type="date"], select, textarea { border: 1px solid var(--rd-azul-borde); border-radius: var(--rd-r-s); background-color: var(--rd-fondo); }
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="tel"]:focus, input[type="date"]:focus, select:focus, textarea:focus { outline: var(--rd-foco); outline-offset: 1px; }
.w3-border { border-color: var(--rd-azul-borde) !important; }
.w3-round { border-radius: var(--rd-r-s) !important; }
.w3-card, .w3-card-2, .w3-card-4 { box-shadow: var(--rd-sombra) !important; }

/* ---- Pantalla de entrar (default.asp), como index.html del prototipo ----
   Escudo grande y tarjeta, sin foto ni barra de encabezado (lamina 2 de la
   presentacion de ASFG, junta del 14-sep-2026). El fondo va con !important
   porque Resolucion() de scripts/ajax.js le pone al body un fondo en linea al
   cargar. Todo acotado a .rd-acceso: las paginas viejas no lo ven. */
body.rd-pagina-acceso { background: var(--rd-fondo) !important; margin: 0; }
.rd-acceso { display: grid; grid-template-rows: auto 1fr; font-family: var(--rd-fuente); font-size: var(--rd-t-m); line-height: 1.5; color: var(--rd-texto); }
.rd-acceso *, .rd-acceso *::before, .rd-acceso *::after { box-sizing: border-box; }
.rd-acceso__escudo { display: flex; align-items: center; justify-content: center; padding: var(--rd-e6) var(--rd-e4) 0; }
.rd-acceso__escudo img { width: 132px; height: auto; }
.rd-acceso__panel { display: flex; align-items: flex-start; justify-content: center; padding: var(--rd-e5) var(--rd-e4) var(--rd-e7); }
.rd-acceso__tarjeta { width: 100%; max-width: 440px; }
/* Los idiomas bajan de renglon si no caben junto al titulo (en tableta el
   titulo se partia en tres lineas). */
.rd-acceso__cabeza { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--rd-e2) var(--rd-e3); margin-bottom: var(--rd-e4); }
.rd-acceso__tarjeta h1 { font-size: var(--rd-t-xxl); line-height: 1.2; color: var(--rd-azul); margin: 0; white-space: nowrap; }
@media (min-width: 1024px) { .rd-acceso__tarjeta { max-width: 520px; } }
.rd-acceso__campo { margin: 0 0 var(--rd-e3); }
/* El texto va dentro del campo, como en la maqueta; la etiqueta sigue en el
   HTML para el lector de pantalla. */
.rd-campo__entrada { display: block; width: 100%; min-height: 44px; border: 1px solid var(--rd-azul-borde); border-radius: var(--rd-r-s); padding: 0 12px; font: inherit; color: var(--rd-texto); background: var(--rd-fondo); }
.rd-campo__entrada:focus { border-color: var(--rd-azul); outline: var(--rd-foco); outline-offset: 1px; }
.rd-campo__entrada::placeholder { color: var(--rd-texto-suave); opacity: 1; }
.rd-boton--bloque { display: flex; width: 100%; border: 1px solid transparent; cursor: pointer; font-family: inherit; }
.rd-acceso__ayuda { font-size: var(--rd-t-s); margin: var(--rd-e4) 0 0; }
.rd-acceso__ayuda a, .rd-acceso__soporte a { color: var(--rd-azul); }
/* Debajo del olvide mi contrasena, mas discreto: es la salida de emergencia. */
.rd-acceso__soporte { margin: var(--rd-e3) 0 0; font-size: var(--rd-t-xs); color: var(--rd-texto-suave); text-align: center; }
.rd-oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Los idiomas de la tarjeta se ven completos (bandera y nombre) en todos los
   anchos: las reglas de celular de .rd-idioma son para el encabezado. */
.rd-acceso .rd-idioma span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.rd-acceso .rd-idioma, .rd-acceso .rd-idioma--activo { display: inline-flex; padding: 6px 8px; text-decoration: none; }
@media (min-width: 768px) {
  .rd-acceso { grid-template-rows: none; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 40px); min-height: calc(100svh - 40px); }
  .rd-acceso__escudo { padding: var(--rd-e7) var(--rd-e6); }
  /* Tere, 14-sep-2026: en laptop el escudo se veia chico; el mismo peso que el
     recuadro o un poco mas. El tope por alto lo mantiene dentro de una laptop. */
  .rd-acceso__escudo img { width: min(540px, 90%, 70vh); }
  .rd-acceso__panel { align-items: center; padding: var(--rd-e7) var(--rd-e6); }
}
/* ---- Recuperar contrasena (recup_usuario.asp), como recuperar.html ----
   default.asp la abre en una ventana FIJA de 800 x 350 que no se agranda (esa
   medida esta en su logica, que no se toca): el mismo diseno, compacto, para que
   quepa sin desplazarse. */
.rd-acceso--ventana { min-height: 0 !important; }
.rd-acceso--ventana .rd-acceso__escudo { padding: var(--rd-e3) var(--rd-e4) 0; }
.rd-acceso--ventana .rd-acceso__escudo img { width: min(200px, 60%, 55vh); }
.rd-acceso--ventana .rd-acceso__panel { padding: var(--rd-e3) var(--rd-e4) var(--rd-e4); align-items: center; }
.rd-acceso--ventana .rd-tarjeta { padding: var(--rd-e4); }
.rd-acceso--ventana .rd-acceso__tarjeta h1 { font-size: var(--rd-t-xl); }
.rd-acceso--ventana .rd-acceso__cabeza { margin-bottom: var(--rd-e2); }
.rd-acceso--ventana .rd-acceso__instruccion { margin: 0 0 var(--rd-e3); font-size: var(--rd-t-s); }
.rd-acceso--ventana .rd-acceso__nota { margin: var(--rd-e3) 0 0; font-size: var(--rd-t-xs); color: var(--rd-texto-suave); }
@media (min-width: 768px) {
  .rd-acceso--ventana { grid-template-columns: 2fr 3fr; }
  .rd-acceso--ventana .rd-acceso__escudo { padding: var(--rd-e4); }
}
/* ---- Aspirantes (Consulta_Aspirantes.asp), como aplicantes.html ----
   Tarjeta por aspirante con sus acciones reales (Estatus y Documentos abren abajo,
   en el marco de siempre), los 6 pasos con los dibujos de ASFG y las preguntas. */
.rd-instruccion { font-weight: 600; color: var(--rd-azul); }
.rd-alumnos { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--rd-e4); margin: var(--rd-e4) 0 var(--rd-e6); }
.rd-alumno { display: flex; flex-direction: column; gap: var(--rd-e3); }
/* Con .rd-contenido delante: .rd-contenido a (0,1,1) subrayaba nombre, grado y matricula. */
.rd-contenido .rd-alumno__cabeza { display: flex; gap: var(--rd-e3); align-items: center; text-decoration: none; color: inherit; }
.rd-alumno__cabeza:hover .rd-alumno__nombre { text-decoration: underline; }
.rd-alumno__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--rd-azul); color: #fff; font-weight: 700; display: grid; place-items: center; flex: 0 0 auto; }
/* El avatar de nino o nina del prototipo (cascaron.js, avatarAlumno): la imagen ya trae su circulo. */
.rd-alumno__avatar--imagen { background: transparent; object-fit: cover; }
.rd-alumno__datos { display: flex; flex-direction: column; min-width: 0; }
.rd-alumno__nombre { font-size: var(--rd-t-l); font-weight: 700; color: var(--rd-azul); overflow-wrap: anywhere; }
.rd-alumno__grado { font-size: var(--rd-t-s); }
.rd-alumno__id { font-size: var(--rd-t-xs); color: var(--rd-texto-suave); }
.rd-alumno__acciones { display: flex; flex-wrap: wrap; gap: var(--rd-e3); margin-top: auto; }
@media (min-width: 768px) { .rd-alumnos { grid-template-columns: repeat(2, 1fr); } }
/* Extended (Inscripcion_Talleres.asp) como extended.html: titulo, "Elige al alumno..." y las
   tarjetas de alumno; la elegida se marca con el azul del prototipo. El marco va debajo. */
.rd-ext { padding-bottom: var(--rd-e4); }
.rd-ext .rd-alumnos { margin-bottom: 0; }
.rd-ext__intro { color: var(--rd-texto-suave); }
.rd-alumno--elegido { border-color: var(--rd-azul); box-shadow: inset 0 0 0 1px var(--rd-azul), var(--rd-sombra); }
.rd-ext .rd-alumno__acciones .rd-boton { text-decoration: none; }
/* El marco de los pasos de Reinscripciones (actualiza.asp), alineado con el encabezado: el
   paso trae 16 px propios por lado, asi que el marco empieza 16 px antes que el contenido del
   encabezado (Daniel, 12-oct: "AQUI ESTA DESALINEADO"). Su alto lo pone MARCO_JS. */
.rd-marco-pasos { box-sizing: border-box; width: 100%; max-width: var(--rd-ancho-max); margin: 0 auto; padding: 0; }
.rd-marco-pasos iframe { display: block; width: 100%; min-height: 480px; border: 0; }
@media (min-width: 768px) { .rd-marco-pasos { padding: 0 8px; } }
.rd-aspirante-detalle { margin: 0 0 var(--rd-e6); }
/* El marco del alumno elegido (Estatus o Documentos), en tarjeta y a la altura de su
   pagina: la caja de proporcion fija de antes (padding-top 42.25 %) cortaba la carta,
   en celular la tapaba la seccion de los 6 pasos. La altura la pone el script de la
   pagina; sin script, el marco queda de 480 px y rueda por dentro, como antes. */
.rd-aspirante-detalle > .w3-col { float: none; width: 100%; padding-top: 0 !important; box-sizing: border-box;
  background: var(--rd-fondo); border: 1px solid var(--rd-azul-borde); border-radius: var(--rd-r-m);
  box-shadow: var(--rd-sombra); overflow: hidden; }
.rd-aspirante-detalle iframe { position: static !important; display: block; width: 100% !important; height: 480px !important; border: 0; }
.rd-pasos { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--rd-e3); margin: var(--rd-e4) 0 var(--rd-e6); }
.rd-paso { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--rd-e3); background: var(--rd-fondo); border: 1px solid var(--rd-azul-borde); border-radius: var(--rd-r-m); padding: var(--rd-e3); position: relative; }
.rd-paso__numero { position: absolute; top: 8px; right: 8px; font-size: var(--rd-t-xs); font-weight: 700; color: var(--rd-azul); background: var(--rd-azul-superficie); border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; }
.rd-paso__icono { grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 50%; display: block; }
.rd-paso__titulo { grid-column: 2; margin: 0 0 var(--rd-e1); font-size: var(--rd-t-m); align-self: end; padding-right: 24px; }
.rd-paso__texto { grid-column: 2; margin: 0; font-size: var(--rd-t-xs); color: var(--rd-texto-suave); overflow-wrap: anywhere; }
/* Escritorio como el prototipo (componentes.css, .paso): tarjeta vertical, icono de 72 px
   arriba y centrado, numero arriba a la izquierda. Faltaba (Daniel, 12-oct: los pasos no
   se veian como en el prototipo). */
@media (min-width: 768px) {
  .rd-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rd-e4); }
  .rd-paso { grid-template-columns: 1fr; grid-template-rows: auto auto auto; align-content: start; text-align: center; justify-items: center;
    padding: var(--rd-e5) var(--rd-e4) var(--rd-e4); }
  .rd-paso__titulo, .rd-paso__texto { grid-column: auto; }
  .rd-paso__titulo { padding-right: 0; min-height: 2.5em; }
  .rd-paso__icono { grid-row: auto; margin-bottom: var(--rd-e2); width: 72px; height: 72px; }
  .rd-paso__numero { top: 10px; left: 10px; right: auto; }
}
.rd-vacio { text-align: center; padding: var(--rd-e6) var(--rd-e4); color: var(--rd-texto-suave); margin: 0 0 var(--rd-e6); }
.rd-vacio p { margin: 0 auto; }
.rd-vacio .rd-icono { display: block; width: 40px; height: 40px; margin: 0 auto var(--rd-e3); color: var(--rd-azul); }
/* ---- Colegiatura (tuition/tuition.asp), como colegiaturas.html ---- */
.rd-aviso { background: var(--rd-azul-superficie); border-radius: var(--rd-r-s); padding: var(--rd-e3) var(--rd-e4); font-size: var(--rd-t-s); }
.rd-aviso p:last-child { margin-bottom: 0; }
.rd-tabla-envoltura { overflow-x: auto; }
.rd-tabla { width: 100%; border-collapse: collapse; font-size: var(--rd-t-s); }
.rd-tabla th { text-align: left; background: var(--rd-azul-superficie); color: var(--rd-azul); font-size: var(--rd-t-xs); font-weight: 600; padding: 10px 12px; }
.rd-tabla td { padding: 12px; border-bottom: 1px solid var(--rd-azul-borde); vertical-align: middle; }
.rd-colegiaturas__manuales { display: flex; flex-wrap: wrap; gap: var(--rd-e3); margin: var(--rd-e4) 0 var(--rd-e5); }
.rd-colegiaturas__plan { margin-bottom: var(--rd-e5); }
.rd-colegiaturas__plan h2 { font-size: var(--rd-t-xl); }
/* Montos a la derecha y con cifras del mismo ancho: se comparan de un vistazo. */
.rd-colegiaturas__tabla th:not(:first-child), .rd-colegiaturas__monto { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* En celular cada renglon es una tarjeta, como .tabla-docs del prototipo: sin esto
   la columna "Pago anual" quedaba cortada en el borde (12-oct, WebKit 390). */
@media (max-width: 767px) {
  .rd-tabla--tarjetas thead { display: none; }
  .rd-tabla--tarjetas, .rd-tabla--tarjetas tbody, .rd-tabla--tarjetas tr, .rd-tabla--tarjetas td { display: block; width: 100%; }
  .rd-tabla--tarjetas tr { border: 1px solid var(--rd-azul-borde); border-radius: var(--rd-r-s); padding: var(--rd-e2) var(--rd-e3); margin-bottom: var(--rd-e3); background: var(--rd-fondo); box-sizing: border-box; }
  .rd-tabla--tarjetas td { border: 0; padding: 6px 0; display: flex; justify-content: space-between; align-items: center; gap: var(--rd-e3); flex-wrap: wrap; }
  .rd-tabla--tarjetas td:first-child { font-weight: 600; color: var(--rd-azul); }
  .rd-tabla--tarjetas td::before { content: attr(data-etiqueta); font-size: var(--rd-t-xs); font-weight: 600; color: var(--rd-texto-suave); flex: 0 0 auto; }
  .rd-tabla--tarjetas td:first-child::before { display: none; }
}
.rd-colegiaturas__nota { margin-bottom: var(--rd-e5); }
.rd-colegiaturas__nota p { margin: 0; }
.rd-colegiaturas__recuadro { margin-bottom: var(--rd-e5); }
.rd-colegiaturas__recuadro h2 { font-size: var(--rd-t-l); }
.rd-colegiaturas__recuadro p:last-child { margin-bottom: 0; }
.rd-colegiaturas__opciones { margin-bottom: var(--rd-e5); }
.rd-colegiaturas__lista { margin: 0; padding-left: 1.2em; list-style: disc; display: flex; flex-direction: column; gap: var(--rd-e2); }

/* Eventos (eventos.asp), como eventos.html: hoy ASFG no tiene eventos con venta en linea. */
.rd-eventos__intro { max-width: none; }
.rd-eventos__nota { max-width: none; color: var(--rd-texto-suave); font-size: var(--rd-t-s); margin-bottom: var(--rd-e5); }
.rd-faq { margin: 0 0 var(--rd-e6); }

/* Cambiar contrasena (cambiar_clave.asp), como contrasena.html: etiquetas a la
   vista sobre cada campo, como en el prototipo. Tambien en ventana fija (800 x 500). */
.rd-campo__etiqueta { display: block; margin: 0 0 var(--rd-e1); font-size: var(--rd-t-s); font-weight: 600; color: var(--rd-texto); }
/* ---- Formas del expediente (paso 1 por dentro, 19-oct-2026). Del prototipo, componentes.css: .campo*, .forma__grupo*,
   .forma__titulo, .opciones/.opcion, .expediente__aviso. Dos columnas desde 640 px, como alla. ---- */
.rd-forma__grupo { display: grid; gap: var(--rd-e4); grid-template-columns: 1fr; margin: 0 0 var(--rd-e4); }
@media (min-width: 640px) { .rd-forma__grupo--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rd-forma__titulo { font-size: var(--rd-t-m); font-weight: 700; color: var(--rd-azul); margin: var(--rd-e5) 0 var(--rd-e3); }
.rd-forma__grupo > .rd-forma__titulo, .rd-forma__grupo > .rd-campo--ancho { grid-column: 1 / -1; }
.rd-campo { display: flex; flex-direction: column; gap: var(--rd-e1); min-width: 0; }
.rd-campo > .rd-campo__etiqueta { margin: 0; }
.rd-campo__req { color: var(--rd-rojo); margin-left: 2px; }
.rd-campo__fijo { margin: 0; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: var(--rd-e2); font-size: var(--rd-t-s); color: var(--rd-texto); }
.rd-campo__nota { font-size: var(--rd-t-xs); color: var(--rd-texto-suave); }
.rd-campo__casilla, .rd-campo__opcion { display: flex; align-items: center; gap: var(--rd-e2); min-height: 44px; cursor: pointer; font-size: var(--rd-t-s); color: var(--rd-texto); }
.rd-campo__casilla input, .rd-campo__opcion input { width: 20px; height: 20px; accent-color: var(--rd-azul); flex: 0 0 auto; margin: 0; }
.rd-campo__opciones { display: flex; flex-wrap: wrap; gap: var(--rd-e4); }
.rd-campo__opciones--columna { flex-direction: column; gap: 0; }
.rd-campo__entrada--larga { min-height: 88px; padding: 10px 12px; resize: vertical; }
select.rd-campo__entrada { padding-right: 32px; }
.rd-opciones { display: grid; gap: var(--rd-e3); grid-template-columns: 1fr; margin: 0 0 var(--rd-e5); padding: 0; list-style: none; }
@media (min-width: 640px) { .rd-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rd-opcion { display: flex; align-items: center; gap: var(--rd-e3); padding: var(--rd-e3) var(--rd-e4); border: 1px solid var(--rd-azul-borde); border-radius: var(--rd-r-s); background: var(--rd-fondo); min-height: 44px; cursor: pointer; font-size: var(--rd-t-s); color: var(--rd-texto); }
.rd-opcion input { width: 20px; height: 20px; accent-color: var(--rd-azul); flex: 0 0 auto; margin: 0; }
.rd-expediente__aviso { font-size: var(--rd-t-s); color: var(--rd-texto-suave); margin: 0 0 var(--rd-e3); }
.rd-acceso--ventana .rd-acceso__regla { margin: 0 0 var(--rd-e3); font-size: var(--rd-t-xs); color: var(--rd-texto-suave); }

/* Facturas (facturas.asp), como facturas.html: el ciclo arriba y una tarjeta por alumno.
   Los textos son los de la base; la tabla, en celular, renglon por renglon como tarjeta. */
.rd-facturas__aviso { margin-bottom: var(--rd-e4); }
.rd-facturas__filtro { margin-bottom: var(--rd-e5); }
.rd-facturas__emitidos { margin: 0 0 var(--rd-e3); font-weight: 600; color: var(--rd-azul); }
.rd-facturas__elegir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--rd-e3); }
.rd-facturas__elegir .rd-campo__etiqueta { flex: 0 0 100%; margin: 0; }
.rd-facturas__elegir .rd-campo__entrada { width: auto; flex: 1 1 200px; max-width: 320px; }
.rd-facturas__alumno { margin-bottom: var(--rd-e5); }
.rd-facturas__alumno h2 { font-size: var(--rd-t-l); margin: 0 0 var(--rd-e3); }
.rd-facturas__tabla td { font-variant-numeric: tabular-nums; }
.rd-facturas__tabla img { display: inline-block; width: 25px; height: 25px; vertical-align: middle; }
.rd-facturas__sin { text-align: center; color: var(--rd-texto-suave); }
@media (max-width: 767px) {
  .rd-facturas__tabla.rd-tabla--tarjetas td:first-child::before { display: inline; }
  .rd-facturas__tabla.rd-tabla--tarjetas td.rd-facturas__sin { justify-content: center; }
  .rd-facturas__tabla.rd-tabla--tarjetas td.rd-facturas__sin::before { display: none; }
}

/* Datos fiscales (ActualizacionDatosFactura.asp), como facturacion.html. Las listas las
   escribe la logica de la pagina con su propio marcado (<p><a>, <a>...</br>): aqui solo
   se les da forma de opcion, sin tocarlas. La forma de datos va en el marco 'boleta'. */
.rd-facturacion__aviso { margin-bottom: var(--rd-e5); }
.rd-facturacion { display: grid; gap: var(--rd-e5); align-items: start; }
@media (min-width: 1024px) { .rd-facturacion { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.rd-facturacion__elegir h2 { font-size: var(--rd-t-l); margin: 0 0 var(--rd-e3); }
.rd-facturacion__subtitulo { margin-top: var(--rd-e5) !important; }
.rd-facturacion__alumnos p { margin: 0 0 var(--rd-e2); }
.rd-facturacion__alumnos a, .rd-facturacion__conceptos a { display: flex; align-items: center; min-height: 44px; padding: 10px var(--rd-e4); border: 1px solid var(--rd-azul-borde); border-radius: var(--rd-r-s); background: var(--rd-fondo); color: var(--rd-texto); font-weight: 600; text-decoration: none; box-shadow: none; }
.rd-facturacion__alumnos a:hover, .rd-facturacion__conceptos a:hover { background: var(--rd-azul-superficie); color: var(--rd-azul); }
.rd-facturacion__conceptos { display: flex; flex-direction: column; gap: var(--rd-e2); }
.rd-facturacion__conceptos br { display: none; }
.rd-facturacion__forma { padding: var(--rd-e2); }
.rd-facturacion__marco { display: block; width: 100%; min-height: 240px; border: 0; }
/* La pagina escribe una liga mas, sin texto, para un concepto que no tiene etiqueta: en la
   vista vieja no se veia; aqui seria un cuadro vacio. Las que si tienen etiqueta traen <br>. */
.rd-facturacion__conceptos a:not(:has(br)) { display: none; }