/* ==========================================================================
   Arandu — sistema de diseño
   Material Design 3 con CSS moderno. Sin librería de componentes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tipografía — UNA sola familia, variable, self-hosted.
   83 KB el subset latino (con acentos y ñ) para todo el rango 400-700.
   Self-hosted y no desde el CDN de Google: es un tercero que recibiría la IP
   de cada visitante, y eso es un párrafo más en la política de privacidad.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fuentes/google-sans-flex-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fuentes/google-sans-flex-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Tokens — esquema tonal MD3 derivado de las semillas del proyecto.
   Verde selva #2E6F4E · ámbar #C77800 · superficie apenas cálida #FBF9F6.
   -------------------------------------------------------------------------- */

:root {
  /* Color — claro */
  --primario: #2e6f4e;
  --sobre-primario: #ffffff;
  --primario-contenedor: #b1f1c7;
  --sobre-primario-contenedor: #00210f;

  --secundario: #4f6354;
  --sobre-secundario: #ffffff;
  --secundario-contenedor: #d2e8d5;
  --sobre-secundario-contenedor: #0d1f13;

  /* El ámbar se usa con avaricia: destacados y chips de categoría, nada más. */
  --terciario: #8a5100;
  --sobre-terciario: #ffffff;
  --terciario-contenedor: #ffdcbb;
  --sobre-terciario-contenedor: #2c1600;
  --acento: #c77800;

  --error: #ba1a1a;
  --sobre-error: #ffffff;
  --error-contenedor: #ffdad6;
  --sobre-error-contenedor: #410002;

  --superficie: #fbf9f6;
  --sobre-superficie: #1b1c1a;
  --superficie-contenedor-baja: #f6f2ed;
  --superficie-contenedor: #f2eee9;
  --superficie-contenedor-alta: #ece8e3;
  --sobre-superficie-variante: #414942;
  --contorno: #717971;
  --contorno-variante: #c1c9c0;

  /* Escala tipográfica */
  --fuente: 'Google Sans Flex', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-display: 2rem;
  --t-titulo-g: 1.375rem;
  --t-titulo: 1.0625rem;
  --t-cuerpo: 1rem;
  --t-cuerpo-ch: 0.875rem;
  --t-etiqueta: 0.8125rem;

  /* Espaciado — escala de 4 */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;

  /* Formas */
  --r-ch: 8px;
  --r-md: 12px;
  --r-gr: 16px;
  --r-xg: 28px;
  --r-completo: 999px;

  --sombra-1: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.08);
  --sombra-2: 0 2px 6px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.06);

  --ancho-max: 1180px;
  color-scheme: light dark;
}

/* Modo oscuro: mismos roles, otros tonos del mismo esquema.
   Sólo se redefinen los tokens, nunca las reglas. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --primario: #95d5ab;
    --sobre-primario: #003920;
    --primario-contenedor: #14532f;
    --sobre-primario-contenedor: #b1f1c7;

    --secundario: #b6ccb9;
    --sobre-secundario: #223527;
    --secundario-contenedor: #384b3d;
    --sobre-secundario-contenedor: #d2e8d5;

    --terciario: #ffb951;
    --sobre-terciario: #482900;
    --terciario-contenedor: #683c00;
    --sobre-terciario-contenedor: #ffdcbb;
    --acento: #ffb951;

    --error: #ffb4ab;
    --sobre-error: #690005;
    --error-contenedor: #93000a;
    --sobre-error-contenedor: #ffdad6;

    --superficie: #12140f;
    --sobre-superficie: #e2e3dd;
    --superficie-contenedor-baja: #1a1c18;
    --superficie-contenedor: #1e201c;
    --superficie-contenedor-alta: #282b26;
    --sobre-superficie-variante: #c1c9c0;
    --contorno: #8b938a;
    --contorno-variante: #414942;
  }
}

:root[data-tema='oscuro'] {
  --primario: #95d5ab;
  --sobre-primario: #003920;
  --primario-contenedor: #14532f;
  --sobre-primario-contenedor: #b1f1c7;
  --secundario: #b6ccb9;
  --sobre-secundario: #223527;
  --secundario-contenedor: #384b3d;
  --sobre-secundario-contenedor: #d2e8d5;
  --terciario: #ffb951;
  --sobre-terciario: #482900;
  --terciario-contenedor: #683c00;
  --sobre-terciario-contenedor: #ffdcbb;
  --acento: #ffb951;
  --error: #ffb4ab;
  --sobre-error: #690005;
  --error-contenedor: #93000a;
  --sobre-error-contenedor: #ffdad6;
  --superficie: #12140f;
  --sobre-superficie: #e2e3dd;
  --superficie-contenedor-baja: #1a1c18;
  --superficie-contenedor: #1e201c;
  --superficie-contenedor-alta: #282b26;
  --sobre-superficie-variante: #c1c9c0;
  --contorno: #8b938a;
  --contorno-variante: #414942;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--t-cuerpo);
  line-height: 1.5;
  color: var(--sobre-superficie);
  background: var(--superficie);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-titulo-g); }
h3 { font-size: var(--t-titulo); }

p { margin: 0 0 var(--e3); }

a {
  color: var(--primario);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
}

/* El foco tiene que verse siempre: es lo único que tiene quien navega con teclado. */
:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
  border-radius: var(--r-ch);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* [hidden] llega de la hoja de usuario del navegador, que pierde contra
   cualquier clase del proyecto: un elemento con display propio quedaría a la
   vista igual. Acá gana siempre. */
[hidden] {
  display: none !important;
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Estructura
   -------------------------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--e4);
}

.encabezado {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--superficie);
  border-bottom: 1px solid var(--contorno-variante);
}

.encabezado-fila {
  display: flex;
  align-items: center;
  gap: var(--e4);
  min-height: 64px;
}

.marca {
  display: inline-flex;
  align-items: baseline;
  gap: var(--e2);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sobre-superficie);
  text-decoration: none;
}

.marca span {
  font-size: var(--t-etiqueta);
  font-weight: 500;
  color: var(--sobre-superficie-variante);
}

.pie {
  margin-top: var(--e7);
  padding-block: var(--e5);
  border-top: 1px solid var(--contorno-variante);
  color: var(--sobre-superficie-variante);
  font-size: var(--t-cuerpo-ch);
}

/* --------------------------------------------------------------------------
   Componentes
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  border: 1px solid var(--contorno-variante);
  border-radius: var(--r-ch);
  background: transparent;
  color: var(--sobre-superficie-variante);
  font: inherit;
  font-size: var(--t-etiqueta);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.chip:hover {
  background: var(--superficie-contenedor-alta);
}

.chip[aria-pressed='true'],
.chip.activo {
  background: var(--secundario-contenedor);
  border-color: transparent;
  color: var(--sobre-secundario-contenedor);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 44px;
  padding: var(--e3) var(--e5);
  border: none;
  border-radius: var(--r-completo);
  background: var(--primario);
  color: var(--sobre-primario);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.boton-contorno {
  background: transparent;
  color: var(--primario);
  border: 1px solid var(--contorno);
}

.tarjeta {
  background: var(--superficie-contenedor-baja);
  border: 1px solid var(--contorno-variante);
  border-radius: var(--r-gr);
  padding: var(--e4);
}

/* El dato monoespaciado de la card: la distancia, o la zona si el curso es de
   la localidad elegida. Siempre en el mismo lugar y con los dígitos de ancho
   fijo, que es lo que hace que la grilla se lea de un vistazo. */
.dato {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-size: var(--t-etiqueta);
  color: var(--sobre-superficie-variante);
  white-space: nowrap;
}

.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--e4);
}

.aviso {
  padding: var(--e4);
  border-radius: var(--r-md);
  background: var(--superficie-contenedor);
  border: 1px solid var(--contorno-variante);
}

.aviso-error {
  background: var(--error-contenedor);
  border-color: transparent;
  color: var(--sobre-error-contenedor);
}

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */

.columna-angosta {
  max-width: 34rem;
  margin-inline: auto;
  padding-block: var(--e6) var(--e7);
}

.entrada {
  color: var(--sobre-superficie-variante);
  margin-bottom: var(--e5);
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}

.campo label {
  font-size: var(--t-cuerpo-ch);
  font-weight: 600;
}

.req {
  color: var(--error);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--e3);
  border: 1px solid var(--contorno);
  border-radius: var(--r-ch);
  background: var(--superficie);
  color: var(--sobre-superficie);
  font: inherit;
  /* 16px o iOS hace zoom solo al enfocar y deja la pantalla corrida. No es
     tipografía: es que el formulario se pueda usar en un teléfono. */
  font-size: max(16px, var(--t-cuerpo));
}

.campo textarea {
  min-height: 7rem;
  resize: vertical;
  line-height: 1.5;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--primario);
  outline: 1px solid var(--primario);
}

.campo [aria-invalid='true'] {
  border-color: var(--error);
}

.ayuda {
  margin: 0;
  font-size: var(--t-etiqueta);
  color: var(--sobre-superficie-variante);
}

.error-campo {
  margin: 0;
  font-size: var(--t-etiqueta);
  font-weight: 600;
  color: var(--error);
}

.grupo {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  margin: 0;
  padding: var(--e4);
  border: 1px solid var(--contorno-variante);
  border-radius: var(--r-md);
}

.grupo legend {
  padding-inline: var(--e2);
  font-size: var(--t-cuerpo-ch);
  font-weight: 600;
}

.boton-ancho {
  width: 100%;
  min-height: 52px;
}

.aviso-exito {
  background: var(--primario-contenedor);
  border-color: transparent;
  color: var(--sobre-primario-contenedor);
}

/* El honeypot se saca de la pantalla, NO con display:none — que es lo primero
   que un bot mira para saltearlo. Va con aria-hidden y tabindex -1 para que no
   lo alcance ni un lector de pantalla ni el tabulador. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* LAS DOS ACCIONES VAN JUNTAS Y EL MARGEN AUTO ES DEL GRUPO, no de cada
   botón: con el auto en los dos, el segundo también se empuja y quedan
   separados por todo el ancho que sobre en vez de uno al lado del otro. */
.encabezado-acciones {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-left: auto;
}

.encabezado-accion {
  min-height: 40px;
  padding-inline: var(--e4);
  font-size: var(--t-cuerpo-ch);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Panel de administración
   Se ve distinto del sitio a propósito: quien está acá adentro toma decisiones
   sobre lo que ve todo el mundo, y confundir las dos pantallas es lo que hace
   que alguien crea que está mirando el sitio público.
   -------------------------------------------------------------------------- */

.es-panel {
  background: var(--superficie-contenedor);
}

.panel-barra {
  background: var(--sobre-primario-contenedor);
  color: var(--primario-contenedor);
  margin-bottom: var(--e5);
}

.panel-barra .marca,
.panel-barra .marca span,
.panel-barra .dato {
  color: var(--primario-contenedor);
}

.panel-barra .chip {
  border-color: currentColor;
  color: inherit;
}

.panel-usuario {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-left: auto;
}

.contador {
  display: inline-block;
  min-width: 1.75rem;
  padding: 0 var(--e2);
  border-radius: var(--r-completo);
  background: var(--acento);
  color: #fff;
  font-size: var(--t-cuerpo-ch);
  font-variant-numeric: tabular-nums;
  text-align: center;
  vertical-align: middle;
}

.ficha-solicitud {
  background: var(--superficie);
  margin-bottom: var(--e4);
}

.ficha-solicitud-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e4);
  margin-bottom: var(--e3);
}

.ficha-solicitud h2 {
  margin-bottom: var(--e1);
}

.presentacion {
  padding: var(--e3);
  border-left: 3px solid var(--contorno-variante);
  background: var(--superficie-contenedor-baja);
  white-space: pre-line;
}

.ficha-solicitud-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  margin-top: var(--e4);
}

.rechazo {
  display: flex;
  flex: 1 1 18rem;
  gap: var(--e2);
}

.rechazo input {
  flex: 1;
  min-height: 44px;
  padding: var(--e2) var(--e3);
  border: 1px solid var(--contorno);
  border-radius: var(--r-ch);
  background: var(--superficie);
  color: var(--sobre-superficie);
  font: inherit;
  font-size: max(16px, var(--t-cuerpo-ch));
}

/* La tabla scrollea sola a lo ancho: el <main> nunca puede scrollear en
   horizontal, que es lo que rompe la lectura en un teléfono. */
.tabla-envoltura {
  overflow-x: auto;
  border: 1px solid var(--contorno-variante);
  border-radius: var(--r-md);
  background: var(--superficie);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-cuerpo-ch);
}

.tabla th,
.tabla td {
  padding: var(--e3);
  text-align: left;
  border-bottom: 1px solid var(--contorno-variante);
}

.tabla th {
  font-size: var(--t-etiqueta);
  color: var(--sobre-superficie-variante);
}

.tabla tbody tr:last-child td {
  border-bottom: none;
}

.etiqueta {
  display: inline-block;
  padding: 2px var(--e2);
  border-radius: var(--r-ch);
  font-size: var(--t-etiqueta);
  font-weight: 600;
}

.etiqueta-si {
  background: var(--primario-contenedor);
  color: var(--sobre-primario-contenedor);
}

.etiqueta-no {
  background: var(--error-contenedor);
  color: var(--sobre-error-contenedor);
}

/* Los cuatro casilleros del código. Grandes y separados: se leen del mail y se
   tipean de a un dígito, muchas veces con el teléfono en la otra mano. */
.codigo {
  display: flex;
  justify-content: center;
  gap: var(--e3);
  margin-block: var(--e2) var(--e4);
}

.codigo-digito {
  width: 3.5rem;
  height: 4rem;
  padding: 0;
  border: 2px solid var(--contorno);
  border-radius: var(--r-md);
  background: var(--superficie);
  color: var(--sobre-superficie);
  font-family: inherit;
  /* Grande a propósito: es el único dato de la pantalla y se compara de un
     vistazo contra el mail. Y por encima de 16px, así iOS no hace zoom solo. */
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: center;
}

.codigo-digito:focus {
  border-color: var(--primario);
  outline: 2px solid var(--primario);
  outline-offset: 1px;
}

.panel-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Panel del disertante
   -------------------------------------------------------------------------- */

.flex-fila {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
}

.curso-fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
  margin-bottom: var(--e3);
}

.curso-fila-datos {
  flex: 1 1 18rem;
}

/* EL `nowrap` DE `.dato` ES PARA LA DISTANCIA DE UNA CARD, que es el elemento
   distintivo del sitio y no se puede partir en dos renglones. Acá la misma clase
   envuelve una oración con tres datos —«Gastronomía y repostería · Eldorado · se
   muestra hasta el 14/10/2026»— que en un teléfono no entra en un renglón: sin
   esto se sale por el borde derecho de la tarjeta, cortada, y se ve como si la
   pantalla estuviera rota. No hay ninguna regla mal escrita que lo explique, así
   que sólo se ve mirando o midiendo.

   (Se probó además con `min-width: 0` en el contenedor, que es el arreglo de
   manual para un ítem de flex que no se achica. Acá NO HACE NADA: con el texto
   envolviendo, el ancho mínimo del contenido es una palabra. Se sacó en vez de
   dejarlo puesto «por las dudas» — una regla que nadie puede explicar es la que
   nadie se anima a tocar después.) */
.curso-fila-datos .dato {
  white-space: normal;
}

.curso-fila-datos h2 {
  margin-block: var(--e2) var(--e1);
  font-size: var(--t-titulo);
}

/* Los formularios de una fila de acciones son cajas aparte dentro del flex:
   con display:contents el espacio entre botones queda parejo. */
.curso-fila-acciones {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
}

.curso-fila-acciones form {
  display: contents;
}

.etiqueta-espera {
  background: var(--terciario-contenedor);
  color: var(--sobre-terciario-contenedor);
}

.chip-peligro {
  border-color: var(--error);
  color: var(--error);
}

/* Dos columnas donde entren; en un teléfono, una sola. */
.campos-en-dos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--e4);
}

.seccion-formulario {
  margin-block: var(--e6) var(--e3);
  padding-bottom: var(--e2);
  border-bottom: 1px solid var(--contorno-variante);
  font-size: var(--t-titulo);
}


/* ============================================================================
   Diálogo — Material Design 3
   ==========================================================================*/

/* Va sobre <dialog> nativo, que trae gratis lo caro de hacer a mano: Escape
   cierra, el foco queda atrapado adentro, el resto de la página no se puede
   tabular, y el navegador lo pinta en su capa superior — sin pelear z-index
   con nada. Acá sólo se define cómo se ve. */
.dialogo {
  max-width: min(28rem, calc(100vw - 2 * var(--e5)));
  padding: var(--e5);
  border: 0;
  border-radius: var(--r-xg);
  background: var(--superficie-contenedor-alta);
  color: var(--sobre-superficie);
  box-shadow: var(--sombra-2);
}

.dialogo::backdrop {
  background: rgb(0 0 0 / 0.32);
}

.dialogo-titulo {
  margin: 0 0 var(--e3);
  font-size: var(--t-titulo-g);
}

.dialogo-texto {
  margin: 0;
  color: var(--sobre-superficie-variante);
}

.dialogo-acciones {
  display: flex;
  justify-content: flex-end;
  gap: var(--e2);
  margin-top: var(--e5);
}

/* El botón de texto de MD3: sin fondo ni borde, y el área tocable la da el
   relleno. En un teléfono, un botón de 32px de alto se falla al apretar. */
.boton-texto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: var(--e2) var(--e4);
  border: 0;
  border-radius: var(--r-completo);
  background: none;
  color: var(--primario);
  font: inherit;
  font-weight: 600;
  /* Se usa también como ENLACE, en el encabezado: sin esto sale subrayado y
     deja de leerse como un botón al lado del de registrarse. */
  text-decoration: none;
  cursor: pointer;
}

.boton-texto:hover {
  background: var(--superficie-contenedor-alta);
  background: color-mix(in srgb, var(--primario) 10%, transparent);
}

/* La acción destructiva va en el color de error y NO como botón lleno: un
   botón lleno es el que se aprieta sin leer, y este es justo el que hay que
   leer. Por lo mismo, el foco arranca en Cancelar. */
.boton-texto-peligro {
  color: var(--error);
}

.boton-texto-peligro:hover {
  background: var(--error-contenedor);
  background: color-mix(in srgb, var(--error) 10%, transparent);
}

/* ============================================================================
   Casilla de verificación
   ==========================================================================*/

.casilla {
  display: flex;
  gap: var(--e3);
  align-items: start;
  padding: var(--e3);
  border: 1px solid var(--contorno-variante);
  border-radius: var(--r-md);
  cursor: pointer;
}

.casilla:has(input:checked) {
  border-color: var(--primario);
  background: var(--superficie-contenedor-baja);
  background: color-mix(in srgb, var(--primario) 6%, transparent);
}

.casilla input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 2px;
  accent-color: var(--primario);
}

.casilla .ayuda {
  display: block;
  margin-top: var(--e1);
}

/* ============================================================================
   Grilla de fotos del curso
   ==========================================================================*/

.fotos-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--e3);
  margin: var(--e4) 0;
  padding: 0;
  list-style: none;
}

/* Cuadrada y de alto FIJO: lo que alinea una grilla es que la caja mida
   siempre lo mismo, con foto apaisada o vertical. */
.foto {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--superficie-contenedor);
  cursor: grab;
  touch-action: none;
}

.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Sin esto el navegador arranca SU propio arrastre de imagen y pelea con el
     de la grilla: la foto se despega y no cae en ningún lado. */
  -webkit-user-drag: none;
  user-select: none;
}

.foto-portada {
  position: absolute;
  inset: var(--e2) var(--e2) auto;
  width: fit-content;
  padding: 2px var(--e2);
  border-radius: var(--r-completo);
  background: var(--primario);
  color: var(--sobre-primario);
  font-size: var(--t-etiqueta);
  font-weight: 600;
}


/* Abajo a la izquierda, del lado opuesto al de borrar: son la acción buena y la
   destructiva, y a un dedo de distancia se confunden. */
.foto-portada-boton {
  position: absolute;
  bottom: var(--e2);
  left: var(--e2);
  min-height: 32px;
  padding: 0 var(--e2);
  border: 0;
  border-radius: var(--r-completo);
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  font: inherit;
  font-size: var(--t-etiqueta);
  cursor: pointer;
}

.foto-portada-boton:hover {
  background: var(--primario);
  color: var(--sobre-primario);
}

.foto-hueco .foto-portada-boton {
  visibility: hidden;
}

.foto-borrar {
  position: absolute;
  right: var(--e2);
  bottom: var(--e2);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--r-completo);
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.foto-borrar:hover {
  background: var(--error);
}

/* La que está viajando: atenuada y con la rueda. Todavía no tiene id, así que
   tampoco se puede borrar ni mover. */
.foto-subiendo img {
  opacity: 0.4;
}

.foto-subiendo::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid var(--contorno-variante);
  border-top-color: var(--primario);
  border-radius: var(--r-completo);
  animation: girar 0.8s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

/* El HUECO donde va a caer. Sin esta marca, arrastrar es adivinar dónde
   suelta — que es la mitad de lo que hace usable un reordenamiento. */
.foto-hueco {
  border: 2px dashed var(--primario);
  background: var(--superficie-contenedor-alta);
  background: color-mix(in srgb, var(--primario) 8%, var(--superficie-contenedor));
}

.foto-hueco img,
.foto-hueco .foto-portada,
.foto-hueco .foto-borrar {
  visibility: hidden;
}

.foto-arrastrando {
  cursor: grabbing;
  box-shadow: var(--sombra-2);
  opacity: 0.9;
}

.fotos-agregar {
  display: flex;
  gap: var(--e3);
  align-items: center;
  flex-wrap: wrap;
}

/* ============================================================================
   Galería de la ficha
   ==========================================================================*/

.galeria {
  margin: var(--e5) 0;
}

/* Alto acotado y `contain`: la foto viene como la sacó quien publica, y
   recortarla con `cover` le come el producto justo en la que se ve grande. */
.galeria-grande {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: var(--r-gr);
  background: var(--superficie-contenedor);
}

/* Scrollea a lo ancho y no se apila: apiladas, cinco miniaturas empujan la
   descripción abajo del pliegue, que es lo que se vino a leer. */
.galeria-tiras {
  display: flex;
  gap: var(--e2);
  overflow-x: auto;
  margin-top: var(--e2);
  padding-bottom: var(--e1);
  scrollbar-width: thin;
}

.galeria-mini {
  flex: 0 0 4.5rem;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--r-ch);
  opacity: 0.65;
  transition: opacity 0.15s;
}

.galeria-mini img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galeria-mini:hover,
.galeria-mini.activa {
  opacity: 1;
}

.galeria-mini.activa {
  border-color: var(--primario);
}

/* ============================================================================
   Ficha pública del curso
   ==========================================================================*/

.ficha {
  max-width: 56rem;
  margin-inline: auto;
  /* El hueco de la barra fija de abajo lo da la ficha y no el body: puesto en
     el body, el espacio queda DESPUÉS del pie, o sea abajo de todo, y no
     separa nada de nada. */
  padding-bottom: 7rem;
}

.migas {
  margin-block: var(--e5) var(--e2);
  color: var(--sobre-superficie-variante);
  font-size: var(--t-cuerpo-ch);
}

.ficha-titulo {
  margin: 0 0 var(--e3);
  font-size: var(--t-display);
  line-height: 1.15;
}

.ficha-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: 0;
}

.chip-destacado {
  border-color: var(--terciario);
  background: var(--terciario-contenedor);
  color: var(--sobre-terciario-contenedor);
  font-weight: 600;
}

.chip-chico {
  padding: 1px var(--e2);
  font-size: var(--t-etiqueta);
}

.ficha-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e5);
}

/* Los datos van al costado sólo cuando hay lugar. En un teléfono van abajo de
   la descripción: primero se lee de qué se trata y después cuánto sale. */
@media (min-width: 48rem) {
  .ficha-cuerpo {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
  }
}

.ficha-columna h2 {
  margin-block: var(--e5) var(--e2);
  font-size: var(--t-titulo);
}

.ficha-datos {
  padding: var(--e4);
  border-radius: var(--r-gr);
  background: var(--superficie-contenedor);
}

.ficha-datos dl {
  margin: 0;
}

.ficha-datos dt {
  margin-top: var(--e3);
  color: var(--sobre-superficie-variante);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ficha-datos dt:first-child {
  margin-top: 0;
}

.ficha-datos dd {
  margin: var(--e1) 0 0;
}

.ficha-precio {
  font-size: var(--t-titulo-g);
  font-weight: 600;
}

/* Fija abajo: escribirle a quien dicta es lo único que esta pantalla existe
   para que pase, y en una ficha larga el botón queda a tres pantallas de
   scroll. */
.ficha-accion {
  position: fixed;
  inset: auto 0 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--e3) var(--e4) var(--e4);
  border-top: 1px solid var(--contorno-variante);
  background: var(--superficie);
}

/* El botón CENTRADO: `.boton` es un flex EN LÍNEA, así que
   `margin-inline: auto` no lo movía —las márgenes automáticas sólo centran un
   elemento de bloque o un ítem de flex— y quedaba pegado al borde izquierdo de
   una barra que ocupa toda la ventana. Lo centra la barra, que ahora es flex. */
.ficha-accion-botones {
  display: flex;
  gap: var(--e2);
  width: min(30rem, 100%);
}

/* WHATSAPP SE LLEVA EL LUGAR Y COMPARTIR MIDE LO QUE DICE. Repartidos por igual
   quedan dos botones del mismo tamaño, y esta barra existe para UNA acción: la
   otra es un extra que no puede competir con ella por la atención. */
.ficha-accion-botones .boton {
  flex: 1 1 auto;
}

.ficha-accion .ficha-compartir {
  flex: 0 0 auto;
}

.ficha-accion .ayuda {
  max-width: 40rem;
  margin: var(--e2) auto 0;
  text-align: center;
}

/* Impresa va entera: una barra fija tapa el final de la hoja. */
@media print {
  .ficha-accion {
    position: static;
  }
}


/* ============================================================================
   La vitrina: filtros, grilla de cards y paginación
   ==========================================================================*/

.vitrina-titulo {
  margin-block: var(--e6) var(--e2);
  font-size: var(--t-display);
  line-height: 1.15;
}

.vitrina-bajada {
  margin-bottom: var(--e5);
  color: var(--sobre-superficie-variante);
}

.vitrina-filtros {
  display: grid;
  gap: var(--e3);
  margin-bottom: var(--e4);
}

/* El campo y el botón en una fila, y el campo se lleva lo que sobra: en un
   teléfono, un buscador angosto al lado de un botón ancho no se puede leer
   mientras se escribe.

   `flex-direction` VA EXPLÍCITO: `.campo` ya es un flex EN COLUMNA —para
   poner la etiqueta arriba del control— así que declarar sólo `display:flex`
   no cambia nada y el botón queda debajo del campo, a lo ancho. */
.campo-busqueda {
  display: flex;
  flex-direction: row;
  gap: var(--e2);
}

.campo-busqueda input {
  flex: 1;
  min-width: 0;
}

.vitrina-selects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--e3);
}

.vitrina-chips {
  margin-bottom: var(--e5);
}

/* El de «una sola clase» no es una categoría: es un filtro que se suma a la que
   esté puesta, así que se distingue del resto de la fila. */
.chip-filtro {
  border-style: dashed;
}

.chip-filtro.activo {
  border-style: solid;
}

/* ---------------------------------------------------------------- la grilla */

.vitrina-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--e4);
  margin-block: var(--e4) var(--e5);
}

.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--contorno-variante);
  border-radius: var(--r-gr);
  background: var(--superficie-contenedor-baja);
}

.card:hover {
  border-color: var(--primario);
  box-shadow: var(--sombra-1);
}

/* Alto FIJO por proporción: lo que alinea una grilla es que la caja mida
   siempre lo mismo, con foto apaisada, vertical o sin foto. */
.card-tapa {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--superficie-contenedor);
}

.card-tapa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Casi ningún curso recién cargado tiene foto, así que el hueco es el caso
   NORMAL: se ve como una decisión y no como una imagen que no cargó. */
.card-sin-foto {
  color: var(--primario);
  font-size: 2.5rem;
  opacity: 0.55;
}

.card-cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e4);
}

.card-encabezado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
  margin: 0;
}

.card-categoria {
  overflow: hidden;
  color: var(--sobre-superficie-variante);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* LA DISTANCIA ES EL ELEMENTO DISTINTIVO DE ESTE DIRECTORIO.
   Monoespaciada, alineada a la derecha y SIEMPRE en el mismo lugar: es lo que
   permite compararla de un vistazo bajando por la grilla. Con una tipografía
   proporcional, «7,5 km» y «120 km» arrancan en píxeles distintos y la columna
   deja de leerse como una columna. */
.card-distancia {
  flex: none;
  color: var(--primario);
  font-size: var(--t-cuerpo-ch);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.card-titulo {
  margin: 0;
  font-size: var(--t-titulo);
  line-height: 1.25;
}

.card-titulo a {
  color: inherit;
  text-decoration: none;
}

.card-titulo a:hover {
  text-decoration: underline;
}

.card-lugar {
  margin: 0;
  color: var(--sobre-superficie-variante);
  font-size: var(--t-cuerpo-ch);
}

/* `margin-top: auto` empuja el pie al fondo: sin eso, una card con el título de
   un renglón deja el precio a otra altura que la de al lado, y la fila se lee
   como si estuviera desalineada. */
.card-pie {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: auto 0 0;
  padding-top: var(--e2);
}

.card-precio {
  font-weight: 600;
}

/* ---------------------------------------------------------- el vacío y el pie */

.vitrina-vacia {
  padding: var(--e7) var(--e4);
  border: 1px dashed var(--contorno-variante);
  border-radius: var(--r-gr);
  text-align: center;
}

.vitrina-vacia p:first-child {
  margin-bottom: var(--e4);
  color: var(--sobre-superficie-variante);
  font-size: var(--t-titulo);
}

.paginacion-total {
  margin-block: 0 var(--e3);
  color: var(--sobre-superficie-variante);
  font-size: var(--t-cuerpo-ch);
}

.paginacion {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: center;
  justify-content: center;
  margin-block: var(--e5);
}

.paginacion a,
.paginacion span {
  min-width: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 0 var(--e3);
  border: 1px solid var(--contorno-variante);
  border-radius: var(--r-completo);
  color: var(--primario);
  text-decoration: none;
}

.paginacion a:hover {
  border-color: var(--primario);
  background: var(--superficie-contenedor);
}

.paginacion .activo {
  border-color: var(--primario);
  background: var(--primario);
  color: var(--sobre-primario);
  font-weight: 600;
}

/* Apagado y NO ausente: si desapareciera, los números se correrían y la fila
   saltaría al pasar de página. */
.paginacion .deshabilitado {
  border-color: transparent;
  color: var(--contorno);
}

/* El salto no es un control: sin recuadro, para que no se lea como un botón
   roto en una fila donde todo lo demás con recuadro se puede tocar. */
.paginacion .paginacion-salto {
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--contorno);
}

/* Se lee con un lector de pantalla y no ocupa lugar: la etiqueta del buscador
   sobra al lado de un campo con lupa, pero un campo sin etiqueta queda mudo. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* El ícono de la categoría: hereda el color con `currentColor`, así el mismo
   dibujo sirve sobre el fondo claro de una card y sobre un chip activo. */
.icono {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.25em;
}

.card-sin-foto .icono {
  width: 3rem;
  height: 3rem;
}


/* En el TELÉFONO —que es el 90% del tráfico— los filtros no pueden comerse la
   primera pantalla: la gente entra a ver cursos, no a configurar una búsqueda.
   Medido a 390px sin esto: 780px de controles antes de la primera card, o sea
   dos pantallas de scroll para ver un curso. */
@media (max-width: 40rem) {
  /* Los dos selects entran en una fila: «Estoy en» y «Hasta» son cortos y
     apilados cuestan un renglón entero cada uno. */
  .vitrina-selects {
    grid-template-columns: 1fr 1fr;
  }

  /* Los chips SCROLLEAN a lo ancho en vez de envolver. Con doce categorías,
     envolver son cinco renglones; en una tira se ve el primero y medio del
     segundo, que es lo que dice que hay más sin tapar nada. */
  .vitrina-chips {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* El relleno lateral y el margen negativo hacen que la tira sangre hasta el
       borde de la pantalla: cortada contra el margen del contenido se lee como
       que la fila se terminó ahí. */
    margin-inline: calc(var(--e4) * -1);
    padding-inline: var(--e4);
    padding-bottom: var(--e2);
    scrollbar-width: none;
  }

  .vitrina-chips::-webkit-scrollbar {
    display: none;
  }

  .vitrina-chips .chip {
    flex: none;
  }

  .vitrina-titulo {
    margin-block: var(--e4) var(--e1);
    font-size: var(--t-titulo-g);
  }

  .vitrina-bajada {
    margin-bottom: var(--e3);
    font-size: var(--t-cuerpo-ch);
  }

  /* La barra de arriba SE DESBORDABA a 390px: «Arandu Eldorado» más
     «Registrate como disertante» —que va con `nowrap`, y tiene que ir— no
     entran en 358px de contenido. Lo que se achica es la marca, no el
     rótulo del botón: ese dice a dónde lleva, y acortarlo para que entre
     sería cambiar lo que promete. El «Eldorado» de al lado del logo es
     decorativo y el título de abajo ya nombra la localidad. */
  .marca {
    font-size: 1.25rem;
  }

  .marca span {
    display: none;
  }

  .encabezado-accion {
    padding-inline: var(--e3);
    font-size: var(--t-etiqueta);
  }

  /* La tapa más baja: en una sola columna, un 3:2 son 240px de imagen antes
     de llegar al título, y en la mayoría de las cards eso hoy es un ícono
     sobre un fondo liso. Acá no hace falta que todas midan igual —hay una
     por fila— así que se achica sin romper ninguna alineación. */
  .card-tapa {
    aspect-ratio: 2 / 1;
  }
}

/* ============================================================================
   Enlaces del pie de la vitrina
   ==========================================================================*/

/* Es la única vía por la que se llega a las pantallas de buscador: los chips de
   arriba van a la home con parámetros, así que sin esto existirían y no las
   enlazaría nadie. */
.enlaces-zona {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--e5);
  margin-block: var(--e7) var(--e5);
  padding-top: var(--e5);
  border-top: 1px solid var(--contorno-variante);
}

.enlaces-zona h2 {
  margin: 0 0 var(--e3);
  color: var(--sobre-superficie-variante);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.enlaces-zona ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.enlaces-zona li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  /* Alto de dedo: son enlaces en una lista y en un teléfono se tocan. */
  min-height: 36px;
  padding-block: var(--e1);
}


/* ============================================================================
   Legales, reporte y panel de reportes
   ==========================================================================*/

/* Ancho de LECTURA y no de pantalla: un párrafo de 1200px no se lee, y estas dos
   pantallas existen para que alguien las lea de verdad. */
.legal {
  max-width: 42rem;
  margin-inline: auto;
  padding-bottom: var(--e7);
}

.legal h1 {
  margin-block: var(--e2) var(--e1);
  font-size: var(--t-display);
  line-height: 1.15;
}

.legal h2 {
  margin-block: var(--e6) var(--e2);
  font-size: var(--t-titulo-g);
}

.legal h3 {
  margin-block: var(--e4) var(--e2);
  font-size: var(--t-titulo);
}

.legal p,
.legal li {
  line-height: 1.65;
}

.legal ul {
  margin-block: var(--e2);
  padding-left: var(--e5);
}

.legal li {
  margin-bottom: var(--e2);
}

/* Las dos leyendas obligatorias van DISTINGUIDAS del resto: son texto de la ley,
   no nuestro, y mezclarlas con la prosa las hace parecer una explicación más. */
.legal-cita {
  margin: var(--e4) 0;
  padding: var(--e3) var(--e4);
  border-left: 3px solid var(--terciario);
  background: var(--superficie-contenedor);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.legal-cita p {
  margin: 0;
  font-size: var(--t-cuerpo-ch);
}

.legal-nota {
  margin-top: var(--e6);
  padding-top: var(--e4);
  border-top: 1px solid var(--contorno-variante);
  color: var(--sobre-superficie-variante);
  font-size: var(--t-cuerpo-ch);
}

.pie-legales {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

/* ---------------------------------------------------------------- reportar */

/* Discreto y al final, pero SIEMPRE presente: es lo único que tenemos para lo
   que salga mal, y esconderlo detrás de un menú es no tenerlo. */
.ficha-reportar {
  margin-top: var(--e6);
  text-align: center;
}

.ficha-reportar a {
  color: var(--sobre-superficie-variante);
  font-size: var(--t-cuerpo-ch);
}

/* La lista de motivos son casillas de radio, no un desplegable: con cinco
   opciones se leen todas de una, y en un teléfono un select obliga a abrir una
   ventana del sistema para elegir entre cinco renglones. */
fieldset.campo {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  border: 0;
  margin: 0;
  padding: 0;
}

fieldset.campo legend {
  margin-bottom: var(--e2);
  padding: 0;
  font-weight: 600;
}

/* ---------------------------------------------------------------- el panel */

.reporte {
  margin-bottom: var(--e5);
}

.reporte-cabecera {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--e3);
  margin-bottom: var(--e3);
}

.reporte-titulo {
  margin: 0 0 var(--e1);
  font-size: var(--t-titulo);
}

.reporte-lista {
  margin: 0 0 var(--e4);
  padding: 0;
  list-style: none;
}

.reporte-lista li {
  padding: var(--e3) 0;
  border-top: 1px solid var(--contorno-variante);
}

.reporte-comentario {
  margin: var(--e2) 0 0;
  padding: var(--e2) var(--e3);
  border-radius: var(--r-ch);
  background: var(--superficie-contenedor);
  white-space: pre-wrap;
}

.reporte-acciones {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--contorno-variante);
}

.panel-nav {
  display: flex;
  gap: var(--e4);
  margin-left: var(--e5);
}

.panel-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding-block: var(--e2);
  color: inherit;
  text-decoration: none;
}

.panel-nav a:hover {
  text-decoration: underline;
}

.tabla-simple p {
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--contorno-variante);
  font-size: var(--t-cuerpo-ch);
}

/* Los números del panel del disertante: cuánta gente miró su curso y cuántos le
   escribieron. Va abajo de los datos y ARRIBA de los botones, que es donde cae
   la vista cuando alguien entra a ver «cómo le está yendo». */
.curso-metricas {
  margin: var(--e2) 0 0;
  font-size: var(--t-cuerpo-ch);
  color: var(--sobre-superficie-variante);
}

.curso-metricas strong {
  color: var(--sobre-superficie);
}

/* El total entre paréntesis, un escalón más abajo que el período: son dos
   números en el mismo renglón y sin esto compiten por la misma atención. */
.curso-metricas .ayuda {
  display: inline;
  font-size: inherit;
}

/* El botón de compartir de la ficha: ícono y rótulo. */
.ficha-compartir {
  gap: var(--e2);
}

/* EN EL TELÉFONO QUEDA SÓLO EL ÍCONO. Con el rótulo puesto, en 390px se lleva
   el ancho que necesita «Escribile por WhatsApp» y el rótulo del botón
   principal se parte en dos renglones — o sea que el extra le arruina la
   lectura a la única acción para la que esta barra existe. El nombre no se
   pierde: está en el `aria-label`, que es lo que lee un lector de pantalla. */
@media (max-width: 26rem) {
  /* El par «Ingresar» + «Registrate como disertante» se sale del borde abajo
     de 380px — medido, no estimado. Se recorta la mitad del rótulo más largo,
     que al lado de «Ingresar» se sigue entendiendo, y no el botón entero. */
  .encabezado-accion-largo {
    display: none;
  }

  .ficha-compartir-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}