/*
 * Aportar un nombre geográfico (/aportar).
 *
 * Aquí no se viene a mirar sino a hacer una cosa concreta y algo laboriosa, así
 * que manda la legibilidad del formulario: una columna, medida de lectura, y
 * los campos agrupados por la pregunta que responden —cómo se llama, dónde
 * está, de dónde lo sabe—. Nada compite con eso; no hay mapa a pantalla completa
 * ni cifras grandes, que son de las otras páginas.
 *
 * No declara ni un token: los toma todos de tokens.css.
 */

/* ── La escala tipográfica ────────────────────────────────────────────────
   Medido: con el banner ya unificado, /aportar seguía enseñándolo más pequeño
   que las otras tres —40 px de título frente a 43,45—. No era el banner: era que
   aquí el elemento raíz medía 16 px y en las demás 17,38.

   Esta línea está escrita tres veces en el sitio, idéntica, en entidades.css,
   nombres.css y ficha.css. /aportar no carga ninguna de las tres, así que se
   quedaba fuera de la escala sin que nada lo dijera. Es la misma duplicación que
   tenía el banner antes de subir a base.css, y con el mismo síntoma: una página
   nueva que no sepa del reparto nace distinta.

   Va una cuarta copia y no una línea en tokens.css a propósito: tokens.css lo
   carga también la portada, que está compuesta a 16 px de raíz —su propio
   comentario explica que por eso mide en px y no en rem—, y subirla ahí le
   cambiaría la tipografía entera a una página que nadie ha pedido tocar.

   PENDIENTE, y es decisión de quien lleve el sitio: o sube a tokens.css y la
   portada se recompone para la escala fluida, o baja a una hoja compartida que
   carguen solo las secciones. Hoy son cuatro copias y la cuarta la pongo yo
   sabiendo lo que es. */
html { font-size: clamp(16px, 0.85rem + 0.42vmin, 22px); }

/* Igual que en entidades y nombres: un display puesto en la clase gana al que el
   navegador aplica por el atributo hidden. Aquí mordía de verdad: a partir de
   68rem .formulario es grid, y el formulario se veía entero —con su «Firma» y
   su «Salir»— debajo de la tarjeta de acceso, sin que nadie hubiera entrado.
   Medido el 2026-09-02 a 1280 px. La hamburguesa queda fuera para que la
   consulta de medios de base.css pueda encenderla en el teléfono. */
[hidden]:not(.hamburguesa) { display: none !important; }

/* ── Entrada ──────────────────────────────────────────────────────────────
   Este banner era «más bajo que el de las otras secciones» para que el
   formulario empezara antes. Ese era el cuarto tamaño distinto del sitio.

   Se va al estándar de base.css y el sitio lo devuelve la barra de sección, que
   además aquí viene bien de propio: el formulario es largo, y a media página uno
   ya no ve el título que dice qué está rellenando. */

/* Una columna en pantalla estrecha; en cuanto hay sitio, dos. Ver más abajo. */
.aportar { max-width: 42rem; padding-block: 1.25rem 2.5rem; }

/* ── Acceso ───────────────────────────────────────────────────────────────
   Lo primero que hay que resolver, así que ocupa la página entera y no una
   esquina. Con el porqué a la vista: pedir que alguien se identifique sin decir
   para qué es la manera más rápida de que se vaya. */
.acceso { padding: 1.75rem 1.5rem 2rem; border: var(--trazo);
          border-radius: var(--radio-lg); background: var(--papel-2); }
.acceso__titulo { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.acceso__dice { max-width: 48ch; margin: 0.625rem 0 0;
                font-size: 0.9375rem; line-height: 1.5; color: var(--tinta); }
.acceso__dice--menudo { font-size: 0.8125rem; color: var(--tinta-suave); }
.acceso .boton { margin-top: 1.25rem; }
.acceso__marca { width: 1.125rem; height: 1.125rem; margin-right: 0.5rem;
                 vertical-align: -0.1875rem; }
.acceso__fallo { margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--color-error); }

/* La casilla de autorización. En cuerpo de 14 px y no en el menudo de 13: es lo
   que la persona firma, y tiene que poder leerse. accent-color pone la marca en
   cobalto sin redibujar la casilla, y la casilla y el texto se pulsan por igual. */
.consentir { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: 1.25rem; }
.consentir__casilla { flex: none; width: 1.125rem; height: 1.125rem; margin: 0.2rem 0 0;
                      accent-color: var(--color-cobalto); cursor: pointer; }
.consentir__texto { font-size: 0.875rem; line-height: 1.5; color: var(--tinta); cursor: pointer; }
.consentir__texto a { color: var(--color-enlace); text-underline-offset: 0.15em; }
/* Apagado hasta que la casilla lo enciende. not-allowed y no progress: aquí no
   se está esperando nada, falta algo. */
.acceso .boton[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ── El aviso de cookies ──────────────────────────────────────────────────
   Lo pinta cookies.js, y solo en esta página, que es la única que deja algo en
   el navegador. Fijo abajo y centrado, sobre la tinta profunda del pie, con los
   dos botones del sistema que viven sobre fondo oscuro (acento y contorno).
   Entra desde abajo una vez, con la curva de salida del sistema; quien pidió
   menos movimiento lo ve aparecer sin más. */
.cookies { position: fixed; inset-inline: var(--sangria); bottom: var(--esp-4); z-index: 90;
           max-width: 46rem; margin-inline: auto; padding: var(--esp-4) var(--esp-6);
           display: flex; flex-wrap: wrap; gap: var(--esp-4) var(--esp-6);
           align-items: center; justify-content: space-between;
           background: var(--color-fondo-hondo); color: var(--color-texto-claro);
           border-radius: var(--radio-lg); box-shadow: var(--sombra-tarjeta);
           opacity: 0; transform: translateY(1rem);
           transition: opacity var(--dur-media) var(--curva-salida),
                       transform var(--dur-media) var(--curva-salida); }
.cookies--puesta { opacity: 1; transform: none; }
/* Sobre tinta el anillo cobalto no se ve; el amarillo sí. */
.cookies :focus-visible { outline-color: var(--color-foco); }
.cookies__dice { margin: 0; flex: 1 1 22rem; font-size: 0.875rem; line-height: 1.5;
                 color: var(--crema-90); }
.cookies__dice a { color: inherit; text-underline-offset: 0.15em; }
.cookies__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
@media (prefers-reduced-motion: reduce) {
  .cookies { transition: none; transform: none; }
}

/* ── Quién firma ──────────────────────────────────────────────────────────
   Una franja discreta y no una tarjeta: es un recordatorio, no un asunto. Pero
   está, porque un formulario que se envía en nombre de alguien tiene que decir
   en nombre de quién. */
.quien { display: flex; align-items: center; justify-content: space-between;
         gap: 0.75rem; flex-wrap: wrap;
         padding: 0.5rem 0.75rem; margin-bottom: 1.5rem;
         border-radius: var(--radio-md); background: var(--papel-2); }
.quien__dice { margin: 0; font-size: 0.8125rem; color: var(--tinta-suave); }
.quien__dice b { color: var(--tinta); }
.quien__salir { padding: 0.25rem 0.5rem; border: 0; border-radius: var(--radio-sm);
                background: transparent; cursor: pointer;
                font: inherit; font-size: 0.8125rem; color: var(--color-cobalto);
                text-decoration: underline; text-underline-offset: 0.125rem; }
.quien__salir:hover { background: var(--papel-3); }

/* ── Bloques ──────────────────────────────────────────────────────────────
   <fieldset> de verdad y no un <div> con un título: el lector de pantalla
   anuncia la pregunta del grupo al entrar en cada campo, que es exactamente lo
   que hace falta cuando el campo se llama «Longitud».

   Sin caja ni borde: el hilo vertical basta para separar y no mete tres cajas
   anidadas en una página que ya vive dentro de una. */
.bloque { padding: 0; margin: 0 0 1.625rem; border: 0; }
.bloque__titulo { padding: 0; margin-bottom: 0.75rem;
                  font-family: var(--fuente-titular); font-size: 1.0625rem;
                  font-weight: var(--peso-fuerte); color: var(--tinta); }

/* ── Campos ───────────────────────────────────────────────────────────────
   La etiqueta encima y no al lado: al lado obliga a decidir un ancho para todas
   y en español las etiquetas no miden lo mismo. Y la ayuda debajo del control,
   no debajo de la etiqueta: se lee cuando ya se sabe qué se está rellenando. */
.campo { margin-bottom: 0.875rem; }
.campo__nombre { display: block; margin-bottom: 0.25rem;
                 font-size: 0.8125rem; font-weight: var(--peso-medio); color: var(--tinta); }
.campo__obligatorio { color: var(--color-error); }
.campo__control { width: 100%; min-height: 2.625rem; padding: 0.5rem 0.75rem;
                  border: 1.5px solid var(--color-borde-firme); border-radius: 0.625rem;
                  background: var(--papel); font: inherit; font-size: 0.9375rem;
                  color: var(--tinta); }
.campo__control--area { min-height: 6rem; line-height: 1.45; resize: vertical; }
/* El selector de archivo lo dibuja el navegador y no se puede rehacer entero;
   lo que sí se puede es que su caja pertenezca al mismo sistema que las demás. */
.campo__control--archivo { padding: 0.4375rem 0.5rem; font-size: 0.8125rem; }
.campo__control:focus-visible { outline: 2px solid var(--color-foco); outline-offset: 1px;
                                border-color: var(--color-cobalto); }
.campo__control[aria-invalid="true"] { border-color: var(--color-error); }

.campo__ayuda { margin: 0.3125rem 0 0; font-size: 0.8125rem; line-height: 1.4;
                color: var(--tinta-suave); text-wrap: pretty; }
.campo__fallo { margin: 0.3125rem 0 0; font-size: 0.8125rem; line-height: 1.4;
                font-weight: var(--peso-medio); color: var(--color-error); }

/* Dos y tres por renglón cuando lo que va dentro es corto y se lee junto: el
   departamento con su municipio, la longitud con su latitud. Por debajo de 34rem
   se apilan, que es cuando el campo dejaría de admitir lo que se escribe. */
.campo--par, .campo--terna { display: grid; gap: 0.75rem 1rem; }
@media (min-width: 34rem) {
  .campo--par { grid-template-columns: 1fr 1fr; }
  .campo--terna { grid-template-columns: 1fr 1fr 1.2fr; }
}
/* La ayuda y el fallo de un grupo cruzan las columnas: hablan del conjunto. */
.campo--par > .campo__ayuda, .campo--par > .campo__fallo,
.campo--terna > .campo__ayuda, .campo--terna > .campo__fallo { grid-column: 1 / -1; margin-top: 0; }

/* ── El punto en el mapa ──────────────────────────────────────────────────
   Alto fijo y no proporcional a la pantalla: en un formulario el mapa es un
   campo más, y un campo que ocupa media pantalla empuja el resto fuera de la
   vista y hace perder el hilo de lo que se estaba rellenando. */
.punto { height: 20rem; margin-top: 0.5rem;
         border: 1.5px solid var(--color-borde-firme); border-radius: 0.625rem;
         overflow: hidden; background: var(--papel-2); }
@media (max-width: 34rem) { .punto { height: 15rem; } }
.punto:focus-visible { outline: 2px solid var(--color-foco); outline-offset: 1px; }
.punto__aviso { margin: 0.375rem 0 0; font-size: 0.8125rem; line-height: 1.4;
                color: var(--tinta-suave); }

/* ── Enviar ───────────────────────────────────────────────────────────────
   Con lo que va a pasar dicho antes del botón, no después: quien lo lee después
   ya lo ha pulsado. */
.enviar { padding-top: 0.5rem; border-top: var(--trazo); }
.enviar__nota { max-width: 48ch; margin: 1rem 0 0;
                font-size: 0.8125rem; line-height: 1.45; color: var(--tinta-suave); }
.enviar .boton { margin-top: 0.875rem; }
.enviar .boton[disabled] { opacity: 0.55; cursor: progress; }
.enviar__fallo { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.45;
                 color: var(--color-error); }

/* ── Dos columnas cuando hay sitio ────────────────────────────────────────
   En una pantalla de escritorio, una sola columna de 42rem deja dos tercios del
   ancho en blanco y empuja el formulario a tres pantallas de alto. Con dos, las
   secciones se reparten: a la izquierda lo que se escribe —cómo se llama y qué
   es—, a la derecha dónde está, que es la que lleva el mapa.

   El reparto es por secciones y no por campos: los <fieldset> siguen enteros,
   así que un lector de pantalla sigue anunciando la pregunta del grupo, y nadie
   tiene que saltar de columna en mitad de una idea.

   Y el mapa gana lo que gana la columna: pasa de 20rem a la altura de su bloque,
   que es donde de verdad se puede señalar un punto con precisión. */
@media (min-width: 68rem) {
  .aportar { max-width: 74rem; }
  .formulario { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                gap: 0 3rem; align-items: start; }
  .quien, .enviar { grid-column: 1 / -1; }
  /* La derecha, de arriba abajo: el mapa se queda a la vista mientras se
     rellenan los campos de la izquierda. */
  .bloque--donde { grid-column: 2; grid-row: 2 / span 2; align-self: stretch; }
  .bloque--nombre, .bloque--que { grid-column: 1; }
  .punto { height: 26rem; }
}
/* Más ancho todavía: la caja de acceso no crece con la página. Un botón y tres
   frases en 74rem de ancho se leen mal, y lo que se pide ahí es una decisión. */
@media (min-width: 68rem) { .acceso { max-width: 44rem; } }

/* ── Recibido ─────────────────────────────────────────────────────────────
   Verde y no cobalto: el cobalto es de la marca y está en todas partes; aquí
   hace falta un color que diga «esto salió bien» y no se confunda con otro
   panel más del sitio. */
.gracias { padding: 1.75rem 1.5rem 2rem;
           border: 1.5px solid var(--verde-medio); border-radius: var(--radio-lg);
           background: var(--papel-2); }
.gracias:focus-visible { outline: 2px solid var(--color-foco); outline-offset: 2px; }
.gracias__titulo { margin: 0; font-size: 1.25rem; line-height: 1.2; color: var(--verde-hondo); }
.gracias__dice { max-width: 50ch; margin: 0.625rem 0 0;
                 font-size: 0.9375rem; line-height: 1.5; }
.gracias__dice b { font-variant-numeric: tabular-nums; }
/* El aporte entró pero un adjunto no: es un fallo dentro de un acierto, y se
   pinta como fallo para que no pase por una línea más del agradecimiento. */
.gracias__adjuntos { color: var(--color-error); }
.gracias__acciones { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.25rem; }