/* CATASTRO — hoja de estilo del registro público.
 *
 * ESCALA, subida el 14/8/2026 (sustituye a la de la maqueta v2 del 11/8):
 * título 32px, encabezados de sección 19px en caja normal, cuerpo 17px,
 * valores de lista 18px, etiquetas 15px, bloque de fuente 16px, sello de tipo
 * de entidad 14px. La versalita en mono queda SOLO para ese sello —CAFÉ, LOTE,
 * FINCA—, que es lo único que se lee como marca y no como texto. Aplicarla
 * también a los encabezados de sección los convertía en rótulos de formulario.
 *
 * Los tamaños que la regla no nombra suben en proporción (factor 17/15), con
 * tres excepciones deliberadas: la etiqueta de dato va a 15 y no a 16, el
 * bloque de fuente a 16 y no a 17, y el encabezado de sección a 19 y no a 18.
 * Están fijados uno a uno en `reglas-capa-publica.md` y aquí se implementan;
 * la plantilla no los inventa.
 *
 * El verde se reserva a «verificado» y no se usa para ninguna otra cosa: en
 * cuanto pinta un enlace o un botón deja de significar algo. Hoy no lo usa
 * nada, porque no hay ninguna cuenta verificada.
 *
 * PALETA D1, adjudicada el 14/8/2026 por delegación de Luis. El marrón es
 * color de ENLACE y del sello de tipo de entidad, y de nada más: las etiquetas
 * de campo van en el gris secundario, nunca en marrón.
 */

/* --- Tipografía autoalojada -------------------------------------------
 * Sin llamadas a Google Fonts ni a ningún CDN: el sitio no carga nada de
 * terceros, que es la misma razón por la que no lleva analítica ajena.
 * Si los ficheros no están, el fallback de sistema mantiene la página legible.
 */
@font-face {
	font-family: 'IBM Plex Sans';
	src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Sans';
	src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--marron: #4E3B2C;
	--tinta:  #1C1917;
	--papel:  #FBFAF8;
	--verde:  #275A42;

	/* D1 sustituye tres rgba derivadas de la tinta y el marrón viejos por los
	 * valores sólidos de la paleta: el gris secundario es el de las etiquetas,
	 * el tostado es el borde y el papel-sombra es el fondo de realce. Sólidos y
	 * no transparencias porque la paleta declara siete valores y una rgba sobre
	 * papel nuevo daría un octavo color que nadie ha adjudicado. */
	--tinta-suave: #6E6259;
	--linea:       #DAD4CC;
	--realce:      #F3F0EB;

	/* DOS PARADAS MÁS EN LA RAMPA DEL MARRÓN, adjudicadas por Luis el
	 * 15/8/2026 con la enmienda que hace del marrón sólido una superficie de
	 * acción primaria. **Son estados de esa superficie, no colores que
	 * decoren**: sin ellas un botón primario no tendría hover, y la enmienda
	 * dice que todo sólido pulsable tiene que tenerlo.
	 *
	 * SÍ AMPLÍAN LA PALETA —de siete a nueve— y por eso están en los cuatro
	 * ficheros: `identidad/tokens.css` (fuente de verdad, como
	 * `--ct-marca-oscuro` y `--ct-marca-suave`), `identidad.md`, aquí y
	 * `functions.php`. Se llaman `--marron-*` y no `--marca-*` porque en ESTE
	 * fichero el token de marca se llama `--marron` desde el principio, y dos
	 * convenciones dentro de un mismo archivo se cruzan más tarde o más
	 * temprano. La correspondencia queda escrita en esta nota. */
	--marron-oscuro: #3B2C20;
	--marron-suave:  #EDE5DC;

	/* ── EL MAPA DE SITUACIÓN DE LA FINCA (30/8/2026) ──────────────────
	   Los cuatro colores viven aquí y NO en el plugin, que los recibe como
	   `var(--…)` con respaldo: el tema decide qué color es una silueta y cuál
	   un punto. Salen de la paleta que ya existe —papel, línea, tinta— para
	   que el mapa **no parezca pegado** de otro sitio. El punto es el único
	   acento, y es el que hay que ver. */
	--c-mapa-relleno:     #EDE9E2;
	--c-mapa-borde:       #C4BCB0;
	--c-mapa-punto:       #8A3324;
	--c-mapa-punto-borde: #FBFAF8;

	/* `--cifra-fondo` Y `--cifra-texto` SE RETIRAN EL 27/8/2026, con la enmienda
	 * que invierte las tarjetas de recuento. Eran dos valores acotados a ese
	 * componente —#6B4A2F y #F4EFE7, deliberadamente fuera de la paleta D1— y al
	 * pasar las cifras a `--realce` / `--marron` / `--tinta-suave` no los usa
	 * nadie. Un token sin uso es un color que alguien reintroduce dentro de seis
	 * meses creyendo que la paleta tiene nueve valores y no siete más dos
	 * estados. Si la inversión se revierte, se recuperan de este mismo commit.
	 *
	 * Lo que NO se retira son `--marron-oscuro` y `--marron-suave`, de arriba:
	 * son estados de la superficie de acción y siguen pintando el hover del
	 * primario y del secundario. */

	--sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	/* DOS MEDIDAS Y NO UNA, adjudicado el 14/8/2026: la medida que hace
	 * legible un párrafo hace ridículo un directorio. El contenedor es donde
	 * cabe el sitio; la de lectura es donde cabe una frase. Nada se acota dos
	 * veces: un bloque que ya está a medida de lectura no hereda además un
	 * contenedor estrecho. */
	--ancho: 1200px;          /* contenedor de sitio */
	--ancho-lectura: 70ch;    /* SOLO prosa */
	--ancho-ficha: 900px;     /* ficha de entidad, dentro del contenedor */
	--pad: 32px;
}

@media (max-width: 48rem) {
	:root { --pad: 20px; }
}

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

body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.65;
	-webkit-text-size-adjust: 100%;
}

a { color: var(--marron); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 { font-weight: 600; line-height: 1.25; margin: 0; }

.c-saltar { position: absolute; left: -9999px; }
.c-saltar:focus {
	left: 1rem; top: 1rem;
	background: var(--papel);
	padding: 0.5rem 0.75rem;
	z-index: 10;
}

.c-sitio,
.c-contenido,
.c-pie {
	max-width: var(--ancho);
	margin-inline: auto;
	padding-inline: var(--pad);
}

/* CABECERA EN UNA LÍNEA: nombre a la izquierda; secciones, idioma y buscador a
 * la derecha. Iba apilada dentro de la columna estrecha, y era lo primero que
 * se veía del sitio. En móvil se parte sola. */
.c-sitio {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	padding-block: 1.5rem;
}
.c-sitio__marca { margin-right: auto; }
.c-sitio .c-nav { margin-top: 0; }
.c-sitio .c-buscador { margin-top: 0; flex: 0 1 20rem; }
.c-sitio .c-buscador__campo { font-size: 15px; }
/* EL NOMBRE DEL SITIO SUBE DE 15 A 19 px (27/8/2026, ~25%). Mismo mono y mismo
 * `letter-spacing`: lo que cambia es el cuerpo y nada más. Iba al mismo tamaño
 * que los cuatro enlaces de sección que tiene al lado, así que el nombre del
 * registro pesaba lo mismo que «Fincas» — la cabecera se leía como cinco
 * elementos comparables. */
.c-sitio__marca {
	margin: 0;
	font-family: var(--mono);
	font-size: 19px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.c-sitio__marca a { color: var(--tinta); text-decoration: none; }

/* --- Etiqueta de tipo de entidad ---------------------------------------
 * El único sitio donde el mono en versalitas está permitido.
 */
.c-cabecera__tipo,
.c-tarjeta__tipo,
.c-resultado__tipo {
	font-family: var(--mono);
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--marron);
}

/* --- Cabecera de la ficha --------------------------------------------- */
/* La ficha deja de estar encajonada, sin rediseñar su estructura: 900px
 * dentro del contenedor. El ARCHIVO DE TÉRMINO se queda a ancho completo a
 * propósito — es un directorio, no una ficha que se lea seguida, y es
 * exactamente la distinción que motivó tener dos medidas. */
.c-ficha { max-width: var(--ancho-ficha); margin-inline: auto; }
.c-ficha--termino { max-width: none; }

.c-cabecera { padding-block: 2.75rem 2.75rem; border-bottom: 1px solid var(--linea); }

.c-cabecera__tipo { display: block; margin: 0 0 0.75rem; }

.c-cabecera__titulo {
	font-size: clamp(30px, 26px + 1.2vw, 32px);
	line-height: 1.2;
	margin-bottom: 0.75rem;
}

.c-cabecera__linea { margin: 0 0 1.75rem; font-size: 17px; color: var(--tinta-suave); }
.c-sep, .c-geo__sep { color: var(--tinta-suave); padding-inline: 0.2em; }

.c-cabecera__acciones { margin: 0 0 1.75rem; }

/* Los dos contenedores son `<div>` desde el 15/8/2026 y no `<p>`: llevan
 * `<form>` dentro, y un formulario dentro de un párrafo es marcado inválido que
 * el navegador arregla PARTIENDO el párrafo. Ver `single-cafe.php`. */

/* Cuando la ficha no tiene línea de geografía —La Dinastía, La Rosa y La Casita
 * no declaran ni municipio ni país— el botón queda a los 0,75rem del título en
 * vez de a los 1,75rem que deja la línea, y la cabecera se lee apretada. El
 * selector de adyacencia completa la diferencia solo en ese caso: con línea, esta
 * regla no aplica y el espaciado sellado no se toca. */
.c-cabecera__titulo + .c-cabecera__acciones { margin-top: 1rem; }

/* --- LOS TRES NIVELES DE ACCIÓN ---------------------------------------
 * Adjudicados por Luis el 15/8/2026 con la enmienda que hace del marrón sólido
 * una superficie de acción primaria (`reglas-capa-publica.md`, junto a la regla
 * que enmienda).
 *
 * LO QUE DISTINGUE UNA ACCIÓN DE UN BLOQUE DE DATO NO ES EL COLOR SINO LA
 * AFORDANCIA — radio, cursor y hover—, y de ahí sale la regla que gobierna todo
 * lo de abajo: **todo sólido pulsable tiene hover; ningún sólido no pulsable lo
 * tiene.** Las tarjetas de recuento de la portada son marrón sólido y NO llevan
 * hover ni `cursor: pointer`: esa ausencia es lo que dice que son dato. Añadirles
 * un hover «para que queden vivas» rompería la distinción entera.
 *
 * UNO PRIMARIO POR VISTA. Si dos cosas de una pantalla son primarias, ninguna lo
 * es. Hoy son dos en todo el sitio: «Apuntar en mi cuaderno» en la ficha de Café
 * con sesión, y «Buscar» en la portada.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * POR QUÉ LA BASE NORMALIZA TANTO: `<a>` Y `<button>` NO SE PINTAN IGUAL
 * ─────────────────────────────────────────────────────────────────────────
 * En la ficha de Café los dos botones estaban uno al lado del otro y **el
 * primero salía subrayado y el segundo no**: «Apuntar» es un `<a>` y heredaba el
 * subrayado de enlace, «Compartir» es un `<button>` y no. Nadie lo escribió; lo
 * puso el navegador. Lo mismo pasa con `font`, `line-height` y `box-sizing`, que
 * un botón trae de la interfaz del sistema y un enlace no. **Por eso las cinco
 * propiedades se declaran aquí y no se dan por heredadas**: dos elementos que
 * significan lo mismo tienen que verse igual, y el marcado que toque usar en
 * cada sitio lo decide lo que hace el control, no su aspecto.
 *
 * `.c-boton` SE CONSERVA COMO EL SECUNDARIO y no se renombra en las plantillas:
 * es la caja que ya llevan el alta, el aviso, la colección, el cuaderno y los
 * seis «Compartir». Renombrar veinte call sites para no cambiar nada de lo que
 * se ve sería un diff grande con riesgo y sin beneficio.
 */
.c-accion,
.c-boton {
	display: inline-block;
	box-sizing: border-box;
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	padding: 0.45rem 0.95rem;
	border: 1px solid transparent;
	border-radius: 8px;
	background: none;
	cursor: pointer;
}

/* El subrayado se retira también en hover: `a:hover` engorda el subrayado en
 * todo el sitio, y sin esta línea el primario recuperaría uno al pasar por
 * encima —que es la mitad del defecto, arreglada solo en reposo—. */
.c-accion:hover,
.c-boton:hover { text-decoration: none; }

/* Foco visible: a estas cajas se llega con el teclado, y el `outline` que el
 * navegador quita al dar `border-radius` no lo repone nadie. */
.c-accion:focus-visible,
.c-boton:focus-visible { outline: 2px solid var(--marron); outline-offset: 2px; }

/* PRIMARIO — sólido. La única superficie de acción del sitio. */
.c-accion--primaria {
	color: var(--papel);
	background: var(--marron);
	border-color: var(--marron);
}
.c-accion--primaria:hover { background: var(--marron-oscuro); border-color: var(--marron-oscuro); }

/* SECUNDARIO — contorno. Es lo que `.c-boton` ya era, con el borde y el texto
 * de la paleta en vez del marrón sobre marrón: al lado de un sólido marrón, un
 * contorno marrón compite con él y los dos pierden. */
.c-accion--secundaria,
.c-boton {
	color: var(--tinta);
	background: var(--papel);
	border-color: var(--linea);
}
.c-accion--secundaria:hover,
.c-boton:hover { background: var(--marron-suave); }

/* TERCIARIO — enlace de texto, sin caja. Es lo que «Corregir o reclamar esta
 * ficha» ya hacía: la clase existe para nombrar el nivel, no para cambiarlo. */
.c-accion--terciaria,
.c-accion-aviso {
	display: inline;
	box-sizing: content-box;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--marron);
	text-decoration: underline;
}
.c-accion--terciaria:hover,
.c-accion-aviso:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* --- Bloque de fuente -------------------------------------------------- */
/* El bloque se leía pequeño y se saltaba de un vistazo (Luis, 11/8/2026). Es
 * la frase que dice de dónde sale todo lo demás: si no se lee, la ficha parece
 * afirmarse a sí misma. Cuerpo 16px, interlineado alto y color casi de texto
 * normal, no de nota al pie. Un punto por debajo del cuerpo y no dos: sigue
 * leyéndose como texto, no como pie de página. */
.c-fuente {
	background: var(--realce);
	border-left: 3px solid var(--marron);
	padding: 1.25rem 1.4rem;
	font-size: 16px;
}
.c-fuente__linea { margin: 0; color: var(--tinta); line-height: 1.65; }
.c-fuente__linea + .c-fuente__linea { margin-top: 0.5rem; }
.c-fuente__linea--copia { color: var(--tinta-suave); }
/* .c-fuente__nota se retira con la regla del 11/8/2026: el bloque de fuente se
 * COMPONE desde datos estructurados y no transcribe texto libre de procedencia,
 * así que no hay nota que pintar. Se borra la clase en vez de dejarla huérfana:
 * un estilo sin uso es una invitación a volver a usarlo. */

/* --- Secciones ---------------------------------------------------------
 * Márgenes generosos: cada sección responde una pregunta distinta y el aire
 * entre ellas es lo que impide leerlas como una sola tabla larga.
 */
.c-seccion { padding-block: 3.25rem; border-bottom: 1px solid var(--linea); }
.c-seccion:last-child { border-bottom: 0; }

.c-seccion__titulo {
	font-size: 19px;
	font-weight: 600;
	color: var(--tinta);
	margin-bottom: 1.5rem;
}

/* --- Lista de datos ---------------------------------------------------- */
.c-datos { margin: 0; }

/* Escala subida el 11/8/2026: la lista es lo que el visitante viene a leer,
 * así que no puede componerse como una tabla de anexo. */
.c-datos__fila {
	display: grid;
	grid-template-columns: minmax(10rem, 30%) 1fr;
	gap: 0.5rem 1.75rem;
	padding-block: 1.15rem;
	border-bottom: 1px solid var(--linea);
}
.c-datos__fila:last-child { border-bottom: 0; }

.c-datos__etiqueta {
	margin: 0;
	color: var(--tinta-suave);
	font-size: 15px;
	line-height: 1.6;
}
.c-datos__valor { margin: 0; font-size: 18px; line-height: 1.5; }
.c-datos__matiz { color: var(--tinta-suave); }

@media (max-width: 34rem) {
	.c-datos__fila { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* --- Marca «Dato corregido» -------------------------------------------- */
.c-correccion { display: inline-block; margin-left: 0.45rem; }

.c-correccion__marca {
	display: inline-block;
	font-size: 12px;
	font-family: var(--mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--marron);
	border: 1px solid var(--marron);
	border-radius: 2px;
	padding: 0.05rem 0.4rem;
	cursor: pointer;
	list-style: none;
}
.c-correccion__marca::-webkit-details-marker { display: none; }

.c-correccion__texto {
	margin: 0.55rem 0 0;
	padding: 0.7rem 0.9rem;
	background: var(--realce);
	border-left: 2px solid var(--marron);
	font-size: 16px;
	color: var(--tinta-suave);
}

.c-campo__fuente {
	margin: 0.4rem 0 0;
	font-size: 16px;
	color: var(--tinta-suave);
}

/* --- Tarjetas de navegación --------------------------------------------
 * Compactas a propósito: son un índice hacia otras fichas, no un resumen de
 * ellas. Los campos que declaran ya están en la lista de arriba.
 */
.c-tarjetas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0.85rem;
}

/* El fondo era `rgba(255,255,255,0.45)` y pasa a `--realce` el 14/8/2026, con
 * D1. Sobre el papel crema viejo esa transparencia aclaraba de forma visible;
 * sobre `#FBFAF8` no hace nada, y una transparencia inerte no es neutral: el
 * día que alguien toque el papel reaparece como un octavo color que nadie
 * adjudicó. Al pasar el fondo base a realce, el hover se INVIERTE y aclara a
 * papel — antes aclaraba a realce, que ahora es el reposo. */
.c-tarjeta {
	display: block;
	border: 1px solid var(--linea);
	border-radius: 3px;
	padding: 0.9rem 1rem;
	background: var(--realce);
	text-decoration: none;
	color: var(--tinta);
}
.c-tarjeta:hover { border-color: var(--marron); background: var(--papel); }

/* Tarjeta que NO es enlace: origen Organización y zona regional, mientras la
 * plantilla de Organización y los archivos de término no existan. Tiene que
 * dejar de PARECER pulsable — el marrón del nombre es el color de enlace del
 * sitio, así que una tarjeta muerta pintada igual promete una página que no
 * hay. Se retira este modificador, en un solo sitio, el día que enlacen. */
.c-tarjeta--sin-enlace { cursor: default; }
.c-tarjeta--sin-enlace:hover {
	border-color: var(--linea);
	background: var(--realce);
}
.c-tarjeta--sin-enlace .c-tarjeta__nombre { color: var(--tinta); }

.c-tarjeta__tipo { display: block; margin-bottom: 0.35rem; }

.c-tarjeta__nombre {
	display: block;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--marron);
}

.c-tarjeta__pie {
	display: block;
	margin-top: 0.3rem;
	font-size: 15px;
	color: var(--tinta-suave);
}

.c-origen__regional { margin: 1.25rem 0 0; font-size: 17px; }
.c-origen__aviso { display: block; margin-top: 0.25rem; font-size: 15px; color: var(--tinta-suave); }

/* --- Catas -------------------------------------------------------------
 * Tarjetas apiladas, nunca una tabla comparativa: dos catas no son dos
 * columnas del mismo dato, y una rejilla las invitaría a leerse así.
 */
.c-catas { display: flex; flex-direction: column; gap: 1rem; }

.c-cata {
	border: 1px solid var(--linea);
	border-radius: 3px;
	padding: 1.1rem 1.2rem;
	background: var(--realce);
}

.c-cata__firma { margin: 0 0 0.25rem; font-weight: 600; font-size: 17px; }
.c-cata__rol { font-weight: 400; color: var(--tinta-suave); }
.c-cata__producto,
.c-cata__fecha { margin: 0 0 0.25rem; font-size: 15px; color: var(--tinta-suave); }

.c-cata__puntaje {
	margin: 0.8rem 0 0.5rem;
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
}
.c-cata__numero {
	font-family: var(--mono);
	font-size: 44px;
	line-height: 1;
	color: var(--marron);
}
.c-cata__escala { font-size: 15px; color: var(--tinta-suave); }

.c-cata__descriptores { margin: 0; font-size: 17px; }

.c-catas__pie {
	margin: 1.25rem 0 0;
	font-size: 15px;
	color: var(--tinta-suave);
}

/* --- Prosa --------------------------------------------------------------
 * La medida de lectura vive AQUÍ y no en el contenedor, que es lo que permite
 * que una ficha sea ancha y su prosa no. */
.c-prosa { max-width: var(--ancho-lectura); }
.c-prosa p { margin: 0 0 1rem; }
.c-prosa p:last-child { margin-bottom: 0; }

/* --- Pie ----------------------------------------------------------------
 * PRIMERA Y ÚNICA EXCEPCIÓN A LA ESCALA, adjudicada por Luis el 14/8/2026, y
 * su ámbito es SOLO el pie: 14px con interlineado holgado. El pie es texto de
 * SERVICIO y no de lectura —licencia y obligaciones legales—, y a cuerpo 17 le
 * roba peso a lo que sí se lee. El interlineado sube para compensar: más
 * pequeño no puede significar más apretado.
 */
.c-pie { padding-block: 2.5rem 3.5rem; }
/* LA FIRMA DEL PIE, con el tratamiento del documento: negrita, color de marca y
 * un punto de espaciado. **Es marca y no texto**, que es justo lo que la
 * distingue del «citando CATASTRO» de la frase de abajo — aquello la nombra,
 * esto la firma. El punto medio separa marca y dominio como en el PDF. */
.c-pie__marca {
	margin: 0 0 0.4rem;
	font-size: 15px;
	font-weight: bold;
	color: var(--marron);
	letter-spacing: 0.02em;
}

.c-pie__licencia { margin: 0; font-size: 14px; line-height: 1.8; color: var(--tinta-suave); }

/* Páginas estáticas: el trío legal. Medida de línea corta a propósito — son
   textos que se leen enteros, no fichas que se escanean.
 *
 * LA MEDIDA VA EN `ch` Y NO EN `rem`, cambiado el 14/8/2026: `ch` es la unidad
 * que mide CARACTERES, así que la línea conserva sus ~70 aunque el cuerpo
 * cambie; los 34rem anteriores daban unos 58 a cuerpo 17 y habrían dado otra
 * cosa a cualquier otro.
 *
 * EL CUERPO SE QUEDA EN 17px, y es adjudicación: en un documento legal reducir
 * el cuerpo es hacer la letra pequeña, y este es el único sitio del sitio donde
 * el tamaño tiene consecuencia jurídica. Lo que se ajusta es la medida de línea
 * y el interlineado, que es lo que hace legible un texto largo. */
.c-pagina { max-width: var(--ancho-lectura); }
/* Ya está a medida de lectura por su contenedor: no se acota otra vez. */
.c-prosa--pagina { max-width: none; line-height: 1.8; }
.c-prosa--pagina h2, .c-prosa--pagina h3 { margin: 2rem 0 0.5rem; }
.c-prosa--pagina ul, .c-prosa--pagina ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.c-prosa--pagina li { margin-bottom: 0.35rem; }
.c-prosa--pagina hr { border: 0; border-top: 1px solid var(--linea); margin: 1.5rem 0; }

/* Los tres legales, en una fila que se parte sola en móvil. Mismo cuerpo que la
   línea de licencia: son obligación y no navegación, y no compiten con ella. */
.c-pie__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.75rem; }
.c-pie__legal a { font-size: 14px; line-height: 1.8; color: var(--tinta-suave); }

/* Reservado: hoy no lo pinta nada, porque no hay ninguna cuenta verificada. */
.c-verificado { color: var(--verde); }

.c-generico { padding-block: 2.5rem; }

/* Cafés de esta finca — la sección longitudinal, y por eso una LISTA y no
 * tarjetas: las tarjetas de «de dónde viene» son navegación de la cadena de un
 * café concreto, mientras esto es una serie que crece con los años. Sin números
 * y sin nada que se lea como orden de mérito: la lista es el hecho, su longitud
 * no es una afirmación.
 */
.c-lista-cafes { margin: 0; padding: 0; list-style: none; }

.c-lista-cafes__item {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--linea);
}

.c-lista-cafes__item:last-child { border-bottom: 0; }

/* 18px, la misma medida que un valor de la lista de datos: lo que hay aquí son
 * datos del registro, no titulares. */
.c-lista-cafes__nombre { font-size: 18px; }

.c-lista-cafes__tostador {
	display: block;
	margin-top: 0.15rem;
	font-size: 16px;
	color: var(--tinta-suave);
}

/* --- Archivo de término ------------------------------------------------
 * La tarjeta de hijo no lleva etiqueta de tipo —un municipio dentro de un
 * departamento no necesita que se le diga que es un lugar—, así que el nombre
 * carga solo con la altura de la tarjeta. */
.c-ficha--termino .c-seccion--hijos .c-tarjeta__nombre,
.c-ficha--termino .c-seccion--fichas .c-tarjeta__nombre { margin: 0; }

/* Término del vocabulario que todavía no usa ninguna ficha. Una línea, en el
 * cuerpo del texto y no como aviso: no es un error del lector ni del registro. */
.c-vacio { margin: 0; font-size: 17px; color: var(--tinta); }

/* --- Búsqueda ----------------------------------------------------------
 * El campo va en la cabecera del sitio, así que sale en las siete vistas: es
 * lo que pide «accesible desde cualquier vista», y la cabecera es el único
 * sitio que literalmente lo es.
 */
.c-buscador { margin-top: 1rem; }

/* La etiqueta se lee con lector de pantalla y no ocupa sitio en la cabecera,
 * donde el campo ya se explica solo. No se usa `display:none`, que la habría
 * quitado también del lector. */
.c-buscador__etiqueta {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap;
}

.c-buscador__fila { display: flex; gap: 0.5rem; }

.c-buscador__campo {
	flex: 1 1 auto;
	min-width: 0;
	font: inherit;
	font-size: 17px;
	color: var(--tinta);
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: 2px;
	padding: 0.4rem 0.7rem;
}
.c-buscador__campo:focus { outline: 2px solid var(--marron); outline-offset: 1px; }
.c-buscador__enviar { flex: 0 0 auto; }

.c-busqueda { padding-block: 2.75rem; }
.c-busqueda__cabecera { margin-bottom: 2.5rem; }
.c-busqueda__cabecera .c-buscador { margin-top: 1.5rem; }

/* Ni el estado sin término ni el de cero coincidencias son errores, así que
 * ninguno se pinta como aviso: cuerpo normal, color de texto. */
.c-busqueda__vacia { margin: 0; font-size: 17px; color: var(--tinta); }

.c-busqueda__recuento { margin: 0 0 1rem; font-size: 17px; color: var(--tinta-suave); }

/* --- Acotación por tipo ------------------------------------------------
 * Encima de los resultados y no en un formulario previo: se busca primero y se
 * acota después. La cifra de cada tipo es la respuesta a lo que el visitante
 * acaba de preguntar, no una medida de importancia.
 */
.c-facetas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }

.c-faceta {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	font-size: 15px;
	text-decoration: none;
	color: var(--marron);
	background: var(--realce);
	border: 1px solid var(--linea);
	border-radius: 2px;
	padding: 0.3rem 0.7rem;
}
.c-faceta:hover { border-color: var(--marron); background: var(--papel); }

/* La acotación activa se marca con relleno, no solo con color: quien no
 * distinga el marrón del gris tiene que poder ver cuál está puesta. */
.c-faceta--activa {
	background: var(--marron);
	border-color: var(--marron);
	color: var(--papel);
}
.c-faceta--activa:hover { background: var(--marron); color: var(--papel); }

.c-faceta__cuenta { font-family: var(--mono); font-size: 14px; }
.c-faceta .c-faceta__cuenta { color: var(--tinta-suave); }
.c-faceta--activa .c-faceta__cuenta { color: var(--papel); }

/* --- Filtrado por vocabulario (17/8/2026) -------------------------------
 * UNA FILA DE DESPLEGABLES QUE SE AJUSTA, y no una barra lateral: la acotación
 * viene DESPUÉS de buscar, así que vive junto a las facetas de tipo y no en una
 * columna que estaría vacía mientras no hay búsqueda. Los seis filtros no aparecen
 * nunca todos a la vez —solo los que el resultado tiene—, de modo que la fila mide
 * lo que haga falta.
 *
 * `align-items: end` alinea los desplegables entre sí aunque una etiqueta ocupe dos
 * líneas: sin eso, «Preparación» al lado de «País» dejaría sus dos cajas a distinta
 * altura. */
.c-filtros {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.c-filtros__campo { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; }
.c-filtros__etiqueta { font-size: 14px; color: var(--tinta-suave); }
.c-filtros__select { font: inherit; font-size: 15px; padding: 0.3rem 0.4rem; border: 1px solid var(--linea); border-radius: 2px; background: var(--papel); color: var(--tinta); }
.c-filtros__select:focus-visible { outline: 2px solid var(--marron); outline-offset: 1px; }
.c-filtros__enviar { margin: 0; }

/* En estrecho cada filtro ocupa el ancho: dos desplegables por línea en un móvil
 * dejan los dos demasiado cortos para leer «Bourbon Rosado» dentro. */
@media (max-width: 40em) {
	.c-filtros { flex-direction: column; align-items: stretch; gap: 0.75rem; }
	.c-filtros__select { width: 100%; }
	.c-filtros__enviar .c-boton { width: 100%; }
}

/* LAS ACOTACIONES PUESTAS, con la familia de `.c-faceta` porque hacen lo mismo
 * —acotar— y una forma nueva para la misma función serían dos convenciones. Lo que
 * cambia es el sentido del gesto: la faceta PONE y esto QUITA, así que lleva la × y
 * no lleva recuento. */
.c-filtros-activos {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 0 2rem;
	font-size: 15px;
}

.c-filtros-activos__rotulo { color: var(--tinta-suave); }

.c-filtro-activo {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	font-size: 15px;
	text-decoration: none;
	color: var(--marron);
	background: var(--realce);
	border: 1px solid var(--linea);
	border-radius: 2px;
	padding: 0.3rem 0.7rem;
}

.c-filtro-activo:hover { border-color: var(--marron); background: var(--papel); }
.c-filtro-activo__quitar { font-family: var(--mono); color: var(--tinta-suave); }
.c-filtro-activo:hover .c-filtro-activo__quitar { color: var(--marron); }

/* La cobertura declarada del país. En gris de metadato y al final de la línea: es
 * una advertencia sobre el alcance del filtro, no un error ni una acotación más. */
.c-filtros-activos__nota { color: var(--tinta-suave); font-size: 15px; }

/* --- Resultados --------------------------------------------------------
 * Un resultado es NAVEGACIÓN, no una ficha: etiqueta de tipo y nombre, y ni un
 * dato del registro más — cada valor lo pinta la entidad que lo declara. Sin
 * bloque de fuente por la misma razón.
 */
.c-resultados { margin: 0; padding: 0; list-style: none; }

.c-resultado {
	padding: 1.15rem 0;
	border-bottom: 1px solid var(--linea);
}
.c-resultado:last-child { border-bottom: 0; }

.c-resultado__tipo { margin: 0 0 0.3rem; }

.c-resultado__nombre {
	display: block;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
}

/* --- Paginación --------------------------------------------------------
 * Con enlaces impresos, que es lo que le faltaba al índice viejo: un corte sin
 * «siguiente» enseña diez de sesenta y siete y no ofrece camino al resto.
 */
.c-paginacion {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 2.5rem;
}

.c-paginacion .page-numbers {
	display: inline-block;
	font-size: 15px;
	text-decoration: none;
	color: var(--marron);
	border: 1px solid var(--linea);
	border-radius: 2px;
	padding: 0.3rem 0.7rem;
}
.c-paginacion a.page-numbers:hover { border-color: var(--marron); background: var(--realce); }

.c-paginacion .page-numbers.current {
	background: var(--marron);
	border-color: var(--marron);
	color: var(--papel);
}
.c-paginacion .page-numbers.dots { border-color: transparent; color: var(--tinta-suave); }

/* --- Navegación de cabecera --------------------------------------------
 * Cinco puertas de entrada y el selector de idioma —**eran cuatro hasta el
 * 3/9/2026, cuando entró «Mapas»**—. Sigue sin ser un menú: no hay submenús, ni
 * secciones, ni árbol. Un archivo se busca o se recorre por los enlaces de sus
 * fichas; esto abre las tres entidades que se buscan por nombre, el mapa y la
 * licencia. «Lotes» no está a propósito.
 *
 * **NO HAY MENÚ MÓVIL Y NO HACE FALTA**: `flex-wrap` parte la fila sola, así que
 * una puerta más envuelve y no rompe nada. Es lo que permite añadir una sin
 * tocar CSS.
 */
.c-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6rem 1.1rem;
	margin-top: 0.9rem;
}

.c-nav__enlace { font-size: 15px; }

/* --- Control de idioma -------------------------------------------------
 * CONTROL SEGMENTADO, adjudicado el 14/8/2026, y corrige un fallo de
 * percepción: antes el idioma actual iba en gris apagado y el otro en marrón
 * de enlace, así que lo resaltado era el idioma que NO se estaba leyendo. El
 * marcado ya era correcto —`<span>` con `aria-current`, y el actual nunca es
 * un enlace a sí mismo—; lo que mentía era el color.
 *
 * Ahora el actual lleva el relleno y el peso, y el otro se queda plano en
 * color de enlace: el énfasis dice DÓNDE ESTÁS y el color dice A DÓNDE PUEDES
 * IR. Los tres colores son de D1 y no hay ninguno nuevo.
 *
 * Sin banderas: una bandera nombra un país, y aquí los países son entidades
 * del registro con ficha propia.
 */
.c-idioma {
	display: inline-flex;
	margin-left: auto;
	border: 0.5px solid var(--linea);
	border-radius: 8px;
	overflow: hidden;
	font-size: 15px;
	white-space: nowrap;
}

.c-idioma__op {
	padding: 0.25rem 0.7rem;
	text-decoration: none;
	color: var(--marron);
	background: transparent;
}

/* El separador es el borde del segundo, no un carácter: así no se lee como
 * texto ni lo anuncia un lector de pantalla. */
.c-idioma__op + .c-idioma__op { border-left: 0.5px solid var(--linea); }

/* RETOQUE DEL 15/8/2026, adjudicado por Luis: SUBE LA INTENSIDAD DEL ESTADO
 * ACTIVO, que a `--realce` #F3F0EB apenas se despegaba del papel #FBFAF8 —dos
 * valores separados por muy poco, así que el relleno que tenía que decir «estás
 * aquí» casi no se veía—. Pasa a `--marron-suave` #EDE5DC y de peso 500 a 600.
 *
 * LA REGLA DEL 14/8 NO SE TOCA: el énfasis dice DÓNDE ESTÁS y el color dice A
 * DÓNDE PUEDES IR. Lo único que cambia es cuánto énfasis hace falta para que se
 * lea; el reparto de significados es el mismo.
 *
 * NI HOVER NI `cursor: pointer` EN EL ACTIVO, y por eso el `:not()` de abajo no
 * es una comodidad de selector sino la regla escrita: **es estado, no acción**.
 * Coincide con la enmienda del mismo día —todo sólido pulsable tiene hover,
 * ninguno no pulsable lo tiene— y con el marcado, que ya lo decía: el activo es
 * un `<span>` y no un enlace a sí mismo. Ninguno de los dos declara `cursor`, de
 * modo que cada elemento se queda con el suyo: flecha en el `<span>`, mano en el
 * `<a>`. **Es el navegador diciendo la verdad sin que nadie se la dicte.**
 */
.c-idioma__op--activo {
	background: var(--marron-suave);
	color: var(--tinta);
	font-weight: 600;
}

/* EL HOVER DEL INACTIVO SE QUEDA EN `--realce` Y NO PASA A `--marron-suave`,
 * aunque ahora sean colores distintos y antes coincidieran. La razón es de
 * significado: si al pasar por encima del idioma que NO estás leyendo se pintara
 * exactamente igual que el activo, el control diría por un momento que ya estás
 * ahí. **El hover tiene que insinuar el destino, no fingir que se ha llegado.** */
.c-idioma__op:not(.c-idioma__op--activo):hover { background: var(--realce); }

@media (max-width: 34rem) {
	.c-idioma { margin-left: 0; }
}

/* --- Índices de los seis tipos -----------------------------------------
 * Sin recuentos: el permiso que tiene la búsqueda no llega aquí, porque un
 * índice no responde a ninguna pregunta del visitante.
 *
 * Cada entrada es NAVEGACIÓN: el nombre enlazado y nada más. Sin etiqueta de
 * tipo —la dice el h1, y repetirla cincuenta veces sería ruido con aspecto de
 * información—, sin bloque de fuente y sin datos del registro.
 */
.c-indice { padding-block: 2.75rem; }
.c-indice__cabecera { margin-bottom: 2rem; }

/* COLUMNAS CON FLUJO VERTICAL, como el índice de un libro: `columns` llena la
 * primera de arriba abajo antes de pasar a la siguiente, así que el orden
 * alfabético se sigue leyendo hacia abajo. Una rejilla lo habría repartido en
 * zigzag, y una lista alfabética leída en zigzag es peor que una columna
 * larga. `break-inside` impide que un nombre se parta entre columnas. */
.c-indice__lista { margin: 0; padding: 0; list-style: none; }

@media (min-width: 40rem) { .c-indice__lista { columns: 2; column-gap: 3rem; } }
@media (min-width: 64rem) { .c-indice__lista { columns: 3; } }

.c-indice__item { break-inside: avoid; }

.c-indice__item {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--linea);
}
.c-indice__item:last-child { border-bottom: 0; }

.c-indice__nombre { font-size: 18px; line-height: 1.35; }

/* --- Portada -----------------------------------------------------------
 * No usa el loop principal: compone sus propias consultas. La rota —la que
 * pedía `post`, un tipo que este sitio no tiene— simplemente no se lee.
 */
.c-portada { padding-block: 3rem 2rem; }

/* El titular no hereda la medida de la prosa y no se parte a mitad de frase:
 * `text-wrap: balance` reparte las líneas por sentido y no por hueco. */
/* EL HUECO HASTA EL BUSCADOR SE CONTROLA AQUÍ Y NO EN `.c-portada__mas`, y la
 * razón es el colapso de márgenes: el margen inferior del enlace atraviesa a su
 * padre y se funde con éste, así que escribirlo abajo no habría hecho nada
 * visible. **Es el número que se toca para separar el bloque de texto de la
 * entrada principal** (27/8/2026: de 3rem a 3.5rem, medido en captura). */
.c-portada__intro { margin-bottom: 3.5rem; text-align: center; max-width: 46rem; margin-inline: auto; }

.c-portada__titular {
	font-size: clamp(30px, 26px + 1.2vw, 32px);
	line-height: 1.2;
	font-weight: 600;
	margin: 0 0 1rem;
	text-wrap: balance;
}

/* Una sola frase, con medida corta: es lo único que un desconocido lee entero
 * antes de decidir si esto le sirve. */
.c-portada__frase {
	margin-inline: auto;
	max-width: 46ch;
	font-size: 18px;
	line-height: 1.6;
	color: var(--tinta-suave);
}

/* La búsqueda es la entrada principal —un archivo se busca—, así que ocupa
 * sitio en vez de esconderse en una esquina. */
/* El buscador de la portada es el grande y el que manda; el de cabecera no se
 * pinta aquí, para que no haya dos campos compitiendo en la misma pantalla. */
.c-portada__buscar { margin-bottom: 3rem; max-width: 780px; margin-inline: auto; }
.c-portada__ejemplos { text-align: center; }

/* --- El buscador de portada (27/8/2026) --------------------------------
 * VARIANTE, NO SEGUNDO FORMULARIO: el marcado sale de `searchform.php` igual
 * que en la cabecera, y todo lo que sigue cuelga de la clase modificadora que
 * `front-page.php` pide. Si algún día hay que cambiar el campo, se cambia una
 * vez.
 *
 * POR QUÉ EL CAMPO CRECE, y es la medición que ordenó el retoque: en la
 * primera vista el dato pasivo —las tres cifras, en marrón sólido— era lo más
 * saturado de la pantalla, y la entrada principal adjudicada el 14/8 era lo más
 * pálido. La jerarquía estaba invertida. Aquí el campo gana cuerpo, borde y la
 * única sombra del sitio; las cifras, enfrente, la sueltan.
 */
.c-buscador--portada { position: relative; margin-top: 1.75rem; }

/* LA LEYENDA SALE DEL ESCONDITE, y es el MISMO `<label>` que en la cabecera se
 * lee solo con lector de pantalla: aquí se revierte el ocultamiento en lugar de
 * pintar un rótulo aparte, de modo que lo que se ve y lo que se anuncia no
 * pueden discrepar.
 *
 * Monta sobre el borde superior y lo recorta con fondo papel. Reutiliza la seña
 * del sello de tipo de entidad —mono, versalitas, 14 px, 0.14em—, que es la
 * única excepción de la escala del 14/8: el mono en versalitas nombra, y esto
 * nombra el campo. **En el HTML va en caja normal**; las versalitas las pone el
 * `text-transform`, así que un lector de pantalla lee «Buscar en el registro» y
 * no letra a letra. */
/* EL `left` ESTÁ CUADRADO CONTRA EL PLACEHOLDER Y NO ELEGIDO A OJO: el texto de
 * la leyenda arranca en `left` + sus 0.5rem de recorte, y el del campo en los
 * 2 px de borde + los 5 de holgura + los 0.85rem de su padding. Con 0.8rem los
 * dos caen en ~20,8 px del borde exterior. A 1.1rem la leyenda iba 5 px a la
 * derecha del texto que nombra, y a este tamaño se nota. */
.c-buscador--portada .c-buscador__etiqueta {
	position: absolute;
	top: 0;
	left: 0.8rem;
	z-index: 1;
	transform: translateY(-50%);
	width: auto;
	height: auto;
	margin: 0;
	padding: 0 0.5rem;
	overflow: visible;
	clip-path: none;
	background: var(--papel);
	font-family: var(--mono);
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--marron);
}

/* EL BORDE ES UNO SOLO Y ES DEL CONTENEDOR: campo y botón viven dentro. Un
 * campo con su borde al lado de un botón con el suyo son dos cajas; esto es una
 * sola, que es lo que hace que el botón se lea como parte de la búsqueda y no
 * como lo siguiente que hay en la página.
 *
 * 2 px EN TINTA Y NO EN `--linea`: el borde de línea es el del resto del sitio
 * y aquí lo que se busca es lo contrario, que este campo no se parezca a los
 * demás. */
.c-buscador--portada .c-buscador__fila {
	gap: 0;
	align-items: stretch;
	min-height: 64px;
	padding: 5px;
	background: var(--papel);
	border: 2px solid var(--tinta);
	border-radius: 6px;
	/* única sombra del sitio — regla del 27/8 en reglas-capa-publica.md */
	box-shadow: 0 2px 12px rgba(28, 25, 23, .10);
}

/* EL FOCO SE MUEVE AL CONTENEDOR, y tenía que moverse: el `outline` del campo
 * quedaba dentro de la caja, dibujando un rectángulo suelto en mitad del
 * buscador. Con `:focus-within` la caja entera responde, que es además lo que
 * se ve —el campo y el botón son una pieza—. **No se retira el foco, se
 * traslada**: quitarlo dejaría la entrada principal del sitio sin señal de
 * teclado. */
.c-buscador--portada .c-buscador__fila:focus-within {
	outline: 2px solid var(--marron);
	outline-offset: 2px;
}

.c-buscador--portada .c-buscador__campo {
	font-size: 20px;
	padding: 0 0.85rem;
	background: transparent;
	border: 0;
	border-radius: 0;
}
.c-buscador--portada .c-buscador__campo:focus { outline: none; }

/* El botón se pega a la derecha, dentro del borde. Radio interior coherente:
 * 6 px de fuera menos los 5 de holgura darían 1, que se lee como esquina viva;
 * 4 px conserva la familia del primario sin desalinearse del contenedor. */
.c-buscador--portada .c-buscador__enviar {
	border-radius: 4px;
	padding-inline: 1.4rem;
	font-size: 17px;
}

/* En pantalla estrecha el botón debajo, y el campo entero: a 390 px el par
 * campo-botón en una fila deja al campo sin sitio para escribir. */
@media (max-width: 30em) {
	.c-buscador--portada .c-buscador__fila { flex-wrap: wrap; gap: 5px; }
	.c-buscador--portada .c-buscador__campo { flex: 1 0 100%; min-height: 48px; }
	.c-buscador--portada .c-buscador__enviar { flex: 1 0 100%; }
}

/* LOS CUATRO TÉRMINOS RESPIRAN MÁS, y es proporción y no tamaño nuevo: con el
 * campo a 64 px la separación de 0.9rem los dejaba pegados al borde inferior,
 * como si fueran parte del buscador. Siguen a 15 px. */
.c-portada__ejemplos {
	margin: 1.75rem 0 0;
	font-size: 15px;
	color: var(--tinta-suave);
}
/* --- Las tres cifras, EN TARJETAS (14/8/2026) ---------------------------
 * Único sitio del registro donde se pinta un recuento, y solo de ámbito
 * registro: describen el archivo, no a ninguno de sus sujetos. Se calculan en
 * vivo, así que lo que aquí se lee es verdad hoy.
 *
 * MISMO TRATAMIENTO QUE `.c-tarjeta` —borde de línea, radio 3, fondo de
 * realce—, y la misma rejilla `auto-fit` que los seis índices de abajo. Iban
 * como tres párrafos sueltos entre dos filetes, y en la pantalla real quedaban
 * flotando: la portada tenía tarjetas justo debajo, así que las cifras parecían
 * lo único sin terminar. Se unifica el vocabulario en vez de inventar uno.
 *
 * SE COPIA EL TRATAMIENTO Y NO LA CLASE, y la diferencia importa: `.c-tarjeta`
 * es un ENLACE —tiene `hover` que cambia el borde y el fondo— y una cifra no
 * lleva a ningún sitio. Un bloque que reacciona al ratón sin ser pulsable
 * promete algo que no cumple.
 *
 * Y NADA MÁS DE LA MAQUETA: ni porcentajes ni insignias. Un porcentaje sobre
 * estos números diría «el registro está al 40% de algo», que es una meta que
 * nadie ha fijado; una insignia es un juicio, y el registro documenta, no
 * califica (§4).
 */
/* TRES TARJETAS, EN MARRÓN MEDIO (14/8/2026, tercera forma y la que queda).
 * La banda de una sola pieza se probó y se descartó: se revierte a tres cajas
 * separadas, con el fondo de vuelta en cada una y no en el contenedor.
 *
 * `repeat(3, 1fr)` SE CONSERVA DE LA BANDA aunque el resto se revierta, porque
 * era lo único que la banda hacía mejor: con `auto-fit` las columnas se
 * estiraban en proporción al contenido y «2.804» ocupaba mucho más que «15».
 * Tres cifras del mismo archivo se leen mejor en cajas del mismo tamaño.
 *
 * ALTURA MEDIDA sobre la captura y no estimada del CSS: la banda dio 52 px y
 * las cajas oscuras 94; ésta se sitúa en medio.
 */
.c-cifras {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.85rem;
	margin: 0 0 3rem;
	padding: 0;
	border: 0;
}

@media (max-width: 34em) {
	.c-cifras { grid-template-columns: 1fr; }
}

/* INVERTIDAS EL 27/8/2026, aprobado por Luis, y DEROGA el fondo oscuro que el
 * 14/8 adjudicó aquí mismo. La enmienda entera está en
 * `reglas-capa-publica.md`, bajo la del marrón sólido del 15/8; lo que hay que
 * saber leyendo este fichero:
 *
 * MEDIDO EN PANTALLA, no discutido: el dato pasivo era lo más saturado de la
 * primera vista y el buscador —la entrada principal adjudicada el 14/8— lo más
 * pálido. Tres cajas de marrón sólido gritaban «cuánto hay» encima de un campo
 * de búsqueda con un filete de 1 px. La jerarquía estaba invertida y esto la
 * endereza por los dos lados a la vez: el campo sube, las cifras bajan.
 *
 * NO CONTRADICE LA ENMIENDA DEL 15/8, LA REFUERZA. Aquélla hizo del marrón
 * sólido una superficie de ACCIÓN PRIMARIA; un bloque de dato pintado con ese
 * mismo pigmento era la excepción que le quitaba filo. Al soltarlo quedan menos
 * superficies sólidas que no son acción, y «sólido marrón = acción primaria»
 * gana nitidez — hoy la única de la portada es el botón «Buscar».
 *
 * LO QUE NO CAMBIA, y es la mitad de la enmienda del 15/8 que sigue entera:
 * SIN `hover`, SIN `cursor: pointer` y sin borde que reaccione. Una cifra no
 * lleva a ningún sitio. Ahora comparte fondo y borde con `.c-tarjeta`, que SÍ
 * es un enlace, así que la ausencia de reacción es lo único que las separa —y
 * por eso importa aquí más que cuando eran oscuras, no menos.
 *
 * VERDE NO, Y SIGUE SIN SER CUESTIÓN DE GUSTO: `--verde` está reservado a
 * «verificado» y hoy no lo usa nada porque no hay ninguna cuenta verificada.
 * Pintar de verde un recuento diría que esas cifras están verificadas, que es
 * una afirmación falsa sobre el registro (§4).
 *
 * LA CIFRA EN MARRÓN ROZA «el marrón es color de enlace», y va así POR FIRMA
 * EXPRESA DE LUIS en la enmienda del 27/8, no por descuido. Lo que sostiene la
 * excepción es que aquella regla protege las ETIQUETAS DE CAMPO —texto que
 * invita a pulsar y detrás no tiene nada—, y una cifra de cuatro dígitos en
 * mono no se lee como enlace: no está subrayada, no está en línea de texto y no
 * tiene forma de palabra. **Si en pantalla real invita al clic, se revisa**, y
 * la salida es bajarla a tinta, nunca añadirle un `hover` que la explique.
 *
 * CONTRASTE MEDIDO (WCAG 2.1, AA texto normal = 4,5:1) sobre `--realce`
 * #F3F0EB: cifra en `--marron` 9,30:1 y etiqueta en `--tinta-suave` 5,20:1.
 * La etiqueta va a 12 px, así que se le exige el umbral de texto normal y no el
 * de texto grande: pasa AA con margen y sin apoyarse en el tamaño. */
.c-cifra {
	margin: 0;
	padding: 0.7rem 1rem;
	border: 1px solid var(--linea);
	border-radius: 3px;
	background: var(--realce);
}

/* LA CIFRA MANDA Y LA CAJA NO. Sigue en mono, que es lo que hace que 420 y
 * 2.804 se lean como cifras y no como palabras. 30 px y no los 28 de la caja
 * oscura: al perder el sólido pierde el peso que le daba el fondo, y el cuerpo
 * es lo único que se sube a cambio. */
.c-cifra__numero {
	display: block;
	font-family: var(--mono);
	font-size: 30px;
	line-height: 1.05;
	color: var(--marron);
}

/* LA CEJILLA SE CONSERVA DE LA BANDA, y es una desviación deliberada de
 * «volver a la v0.10.0»: allí la etiqueta era texto normal de 15 px en un color
 * más apagado que la cifra, y **la jerarquía la hacía el color**. Sobre este
 * fondo el color apagado no llega a AA, así que los dos textos son ahora el
 * mismo papel — y si además compartieran tipografía, solo los separaría el
 * tamaño. Mono, versalita y espaciada es lo que devuelve la distinción que el
 * color ya no puede dar.
 *
 * Se queda DEBAJO y no encima, a diferencia de las tarjetas de «Recorrer el
 * registro»: subirla exigiría `order` en flex, que desincroniza el orden visual
 * del orden del documento y hace que un lector de pantalla lea la tarjeta en un
 * orden distinto del que se ve.
 *
 * AL INVERTIRSE LA TARJETA (27/8/2026) VUELVE AL GRIS SECUNDARIO, que es donde
 * la regla de la paleta la quiere: sobre el fondo oscuro no llegaba a AA y por
 * eso iba en papel puro, con el mismo color que la cifra. Sobre `--realce` sí
 * llega —5,20:1—, así que la jerarquía la vuelve a hacer el color y no solo el
 * cuerpo. La versalita en mono se conserva de todas formas: distingue la
 * etiqueta de la cifra aunque los dos textos fueran del mismo gris. */
.c-cifra__etiqueta {
	display: block;
	margin-top: 0.15rem;
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tinta-suave);
}

.c-portada__indices { margin-bottom: 3rem; }

/* --- A quién sirve -----------------------------------------------------
 * Texto, no llamada a la acción: no hay alta a la que llevar, y un botón que
 * no lleva a ningún sitio es peor que ningún botón. Misma razón que mantiene
 * «Entrar» apagado en la cabecera.
 */
.c-publico {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 2rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--linea);
}

.c-publico__titulo { font-size: 19px; font-weight: 600; margin: 0 0 0.5rem; }
.c-publico__texto { margin: 0; font-size: 17px; color: var(--tinta-suave); max-width: 46ch; }

/* --- Página no encontrada ----------------------------------------------
 * Hasta hoy un 404 y la portada eran indistinguibles: los dos caían en
 * index.php y los dos decían «No hay nada aquí.»
 */
.c-error { padding-block: 3rem 2rem; }
.c-error__texto { margin: 0 0 2rem; font-size: 17px; color: var(--tinta-suave); max-width: 52ch; }
.c-error__indices { margin-top: 3rem; }

/* --- Formulario de aviso (RGPD / DSA) ----------------------------------
 * Un solo formulario con una primera pregunta que enruta. Medida de línea
 * corta como las páginas legales: se lee entero, no se escanea.
 */
.c-aviso { padding-block: 1rem 2rem; }
.c-aviso__intro { margin: 0 0 2rem; font-size: 17px; color: var(--tinta-suave); }

.c-aviso__grupo { border: 0; margin: 0 0 1.75rem; padding: 0; }
/* LA ETIQUETA DE CAMPO ES TEXTO, NO METADATO (23/8/2026). Iba en gris suave y
 * sin peso, que es la receta de un dato secundario; pero **es la pregunta que
 * hay que contestar**, y quien copia de una página la lee tantas veces como
 * campos tiene el formulario. Peso 600 y `--tinta`.
 *
 * SE QUEDA EN 15px A PROPÓSITO: lo que la separa del título de bloque es que
 * él subió a 16, no que ella baje. **Dos escalones contiguos de la misma escala
 * bastan para ordenar una pantalla; alejarlos más haría gritar al título.**
 *
 * EL COMPONENTE ES COMPARTIDO Y EL CAMBIO LO SIGUE. Lo usan el aviso, el alta,
 * `/vincular/`, el cuaderno, las compras y `/encontrar/`, **y eso es deliberado
 * desde que se escribió** —«duplicar estilos sería duplicar la decisión»—: una
 * etiqueta de campo se lee igual en todas, así que acotar esto al formulario de
 * café habría creado la divergencia que el componente existe para evitar. */
.c-aviso__etiqueta {
	display: block;
	margin-bottom: 0.6rem;
	font-size: 15px;
	font-weight: 600;
	color: var(--tinta);
}

/* Las dos puertas, con área de pulsación generosa: es la decisión que más
 * pesa del formulario y la toma alguien que no conoce la diferencia entre los
 * dos trámites. */
.c-aviso__opcion {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
	padding: 0.7rem 0.9rem;
	margin-bottom: 0.5rem;
	border: 1px solid var(--linea);
	border-radius: 2px;
	background: var(--realce);
	cursor: pointer;
	font-size: 17px;
}
.c-aviso__opcion:hover { border-color: var(--marron); background: var(--papel); }
.c-aviso__opcion:focus-within { outline: 2px solid var(--marron); outline-offset: 1px; }

/* La página desde la que se pulsó, a la vista: quien avisa tiene que poder
 * comprobar que hablamos de la misma. */
.c-aviso__pagina {
	margin: 0 0 1.75rem;
	padding: 0.7rem 0.9rem;
	border-left: 3px solid var(--marron);
	background: var(--realce);
}
.c-aviso__url { font-family: var(--mono); font-size: 14px; word-break: break-all; }

.c-aviso__campo { margin: 0 0 1.5rem; }

.c-aviso__input {
	display: block;
	width: 100%;
	font: inherit;
	font-size: 17px;
	color: var(--tinta);
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: 2px;
	padding: 0.5rem 0.7rem;
}
.c-aviso__input:focus { outline: 2px solid var(--marron); outline-offset: 1px; }

/* Trampa para robots: fuera de la vista sin `display:none`, que algunos
 * rellenadores automáticos detectan, y fuera del teclado y del lector. */
.c-aviso__trampa {
	position: absolute;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* EL BOTÓN POR DEFECTO DEL FORMULARIO DE «Nuevo café», que no se pinta y no se
 * tabula: existe solo para ser **el primer `submit` en orden de árbol**, que es
 * lo que decide qué envía Enter. Su porqué entero está donde se imprime, en
 * `page-cuenta.php`. Fuera de pantalla y NUNCA `display: none` ni `hidden`: lo
 * que no puede perder es su condición de botón de envío. */
.c-aviso__submit-defecto {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.c-aviso__enviar { margin: 1.75rem 0 1rem; }
.c-aviso__legal { margin: 0; font-size: 14px; line-height: 1.7; color: var(--tinta-suave); }

/* Ni el error ni la confirmación gritan: el primero explica qué hacer y el
 * segundo dice solo lo que el correo ya promete. */
.c-aviso__error {
	margin: 0 0 1.75rem;
	padding: 0.8rem 1rem;
	border-left: 3px solid var(--marron);
	background: var(--realce);
	font-size: 17px;
}
.c-aviso__ok { margin: 0 0 0.75rem; font-size: 18px; }
.c-aviso__ok-nota { margin: 0; font-size: 15px; color: var(--tinta-suave); }

/* El enlace de aviso de las fichas: al lado de «Compartir», en texto y no en
 * botón — es una salida que casi nadie usa y no compite con la principal. */
.c-accion-aviso { margin-left: 1rem; font-size: 15px; }

/* Enlace al texto largo, bajo la frase de portada. Discreto a propósito: la
 * entrada principal es la búsqueda, no la explicación.
 *
 * RITMO AJUSTADO EL 27/8/2026, y es lo único que cambia: EL ENLACE NO SE MUEVE
 * DE SITIO EN EL HTML. Iba a 1.25rem de la frase y a poco más del buscador, así
 * que flotaba entre los dos y se leía como un tercer elemento suelto —cuando lo
 * que es, es el remate del párrafo que tiene encima—. Se pega a la frase (0.5rem)
 * y el hueco grande pasa abajo, donde separa el bloque de texto de la entrada
 * principal.
 *
 * El cuerpo ya estaba en 15 px, el de etiqueta, y ahí se queda. Sigue siendo
 * TERCIARIO por herencia y no por clase: subrayado, marrón y sin caja son el
 * `a` de la hoja, que es exactamente lo que `.c-accion--terciaria` declara. */
.c-portada__mas { margin: 0.5rem 0 0; font-size: 15px; }

/* --- Alta de cuenta ----------------------------------------------------
 * Reutiliza los componentes del formulario de aviso: es el mismo tipo de
 * pantalla y duplicar estilos sería duplicar la decisión.
 */
.c-alta { padding-block: 1rem 2rem; }
.c-alta__pista { display: block; margin-top: 0.35rem; font-size: 14px; color: var(--tinta-suave); }
.c-alta__acepto { margin: 1.75rem 0; }
.c-alta__acepto .c-aviso__opcion { align-items: flex-start; font-size: 16px; }
.c-alta__entrar { margin-top: 1.5rem; }

/* --- Área de cliente ---------------------------------------------------
 * «CUATRO REGLAS Y NINGUNA CAJA» — DEROGADO EL 17/8/2026, y con su razón: decía
 * que encajonar la pantalla la haría «parecer un panel con secciones que hoy no
 * existen». Hoy existen SIETE —apuntes, deseos, proponer, propuestas,
 * suscripción, entidades y ajustes—, así que la pantalla ya ERA un panel y lo
 * único que faltaba era decirlo. Sin separación, siete secciones seguidas se
 * leen como una lista larga en la que cada titular parece el pie de la anterior.
 *
 * EL ANCHO NO ES EL DE LA PROSA, y es la única regla que discute a `.c-pagina`.
 * 70ch (~550 px) es la medida de un texto para leer de corrido; aquí hay una
 * tarjeta de dos columnas con una foto de 320 px, y dentro de 550 px al texto le
 * quedarían ~200: más estrecho que la imagen que lo acompaña. Se sube a 800 px
 * —320 de foto + 1,5rem de aire + unos 45ch de texto, que es lo que hace falta
 * para que la columna derecha se lea— y la medida de lectura se conserva donde
 * de verdad hay prosa. Va con las DOS clases y no solo con `.c-cuenta` para no
 * depender de quién esté más abajo en el fichero.
 */
.c-cuenta.c-pagina { max-width: 800px; }

/* SIN FILETE BAJO EL H1 DEL ÁREA (17/8/2026). El `border-bottom` es de
 * `.c-cabecera`, que lo lleva en TODAS las páginas y ahí está bien: en una ficha
 * separa el nombre de la entidad de sus datos. Aquí sobra, porque debajo viene un
 * saludo y no un bloque de datos, y el resultado eran dos filetes casi seguidos
 * —el del h1 y el de la primera sección— con tres líneas de texto en medio. Se
 * retira SOLO en esta pantalla y no en la regla global: quitarlo de `.c-cabecera`
 * cambiaría las seis plantillas de entidad para arreglar una cuenta.
 *
 * El primer filete de la página pasa a ser el de «Tus últimos apuntes». */
.c-cuenta .c-cabecera { border-bottom: 0; padding-bottom: 1.5rem; }
.c-cuenta__saludo { margin: 0; font-size: 19px; }
.c-cuenta__correo { margin: 0.2rem 0 0; font-size: 15px; color: var(--tinta-suave); }

/* LA FILA DE PESTAÑAS DEL ÁREA (21/8/2026).
 *
 * UN FILETE COMÚN Y NADA MÁS. Sin cajas, sin fondo y sin color por estado: el
 * color aquí diría algo del contenido de cada pestaña, y lo único que esta fila
 * tiene que decir es dónde está uno. La marca de la activa es la MISMA línea que
 * ya separa las secciones —`--linea` para el filete, tinta plena para la marca—,
 * así que la pieza no inventa ninguna forma nueva.
 *
 * `flex-wrap` Y NUNCA SCROLL HORIZONTAL. En un móvil estrecho, y con las tres
 * pestañas de tostador puestas, la fila envuelve a un segundo renglón: se ven
 * todas. Una fila con desplazamiento lateral esconde las últimas detrás de un
 * gesto que nadie descubre, y las últimas son justo las que se han pagado.
 *
 * 44 px DE ALTO MÍNIMO, la misma regla móvil-primero que el type-ahead midió
 * para sus opciones: una pestaña es un blanco que se toca con el pulgar. */
.c-pestanas {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	margin: 1.75rem 0 0;
	border-bottom: 1px solid var(--linea);
}

/* SIN FILETE BAJO EL H1 DE LA COLECCIÓN (21/8/2026), y es la misma decisión que
 * `.c-cuenta` tomó el 17/8 por la misma razón, traída aquí por la fila.
 *
 * `.c-cabecera` lleva `border-bottom` en todas las páginas y en una ficha está
 * bien. Con la fila de pestañas debajo, el resultado eran **dos filetes casi
 * seguidos con las pestañas en medio**, que se leen como una caja — justo la
 * forma que la fila se diseñó para no tener. El filete de la fila lo sustituye.
 *
 * Y `padding-bottom: 0` PARA QUE EL HUECO LO PONGA LA FILA Y NO LOS DOS. Aquí la
 * línea de «N cafés · P países · F fincas» va DENTRO de la cabecera —en
 * `/cuenta/` el saludo y el correo van fuera—, así que conservando el relleno se
 * sumaban 1,5rem + 1,75rem y la fila quedaba al doble de distancia que en la
 * cuenta. Con esto las dos pantallas separan igual. */
.c-coleccion .c-cabecera { border-bottom: 0; padding-bottom: 0; }

/* ─── «NUEVO CAFÉ»: LA LISTA DE BORRADORES (21/8/2026) ────────────────────
 *
 * MISMA FORMA QUE LAS COMPRAS Y LAS PROPUESTAS, y no es pereza: en esta pantalla
 * una lista de filas con acciones al final ya significa algo, y una forma nueva
 * sería una convención más que aprender. Sitios fijos —nombre a la izquierda,
 * fecha a la derecha, acciones cruzando— para poder recorrerla con la vista.
 *
 * SIN COLOR POR ESTADO: todas las filas son borradores, así que no hay estado
 * que distinguir; y el día que lo hubiera, seguiría sin pintarse en color. */
.c-borradores__lista { list-style: none; margin: 1rem 0 0; padding: 0; }

.c-borradores__fila {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.35rem 1rem;
	align-items: baseline;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--linea);
}

.c-borradores__fila:last-child { border-bottom: 0; }
.c-borradores__nombre { font-size: 17px; }
.c-borradores__fecha { font-size: 15px; color: var(--tinta-suave); text-align: right; }
/* LA FILA DE ACCIONES ENVUELVE SIN DEJAR PUNTOS COLGANDO (28/8/2026, visto por
 * Luis en navegador).
 *
 * **LA CAUSA NO ERA DE LA HOJA Y ESTÁ ARREGLADA EN `page-cuenta.php`**: la fila
 * era un `<p>` con un `<form>` dentro, **el parser cerraba el párrafo al llegar
 * al form**, y todo lo posterior pasaba a ser hijo directo del `<li>`, que es
 * grid. Medido en el DOM del navegador y no en el HTML servido, que **parecía
 * correcto**. Con la fila ya en un `<div>`, lo que queda aquí es la
 * presentación, que también hacía falta.
 *
 * **FLEX CON `wrap` Y `gap`, Y LOS SEPARADORES FUERA.** Seis acciones no caben
 * en la columna: el hueco lo pone el `gap`, que **no se queda colgando al
 * envolver** porque no es un carácter, sino espacio entre elementos que existen.
 * Los `·` se ocultan **solo dentro de esta fila** y siguen intactos en el resto
 * del sitio.
 *
 * SE OCULTAN Y NO SE BORRAN DEL MARCADO, y hay dos razones. La primera es que
 * **el marcado lo comparten dos listas y varias guardas de nivel** —cada acción
 * trae o no su separador según quién mire—, así que quitarlos sería tocar seis
 * condiciones para un arreglo que es de presentación. La segunda es que un `·`
 * leído en voz alta **no dice nada**: `display: none` lo saca también del árbol
 * de accesibilidad, que es donde mejor está.
 *
 * `align-items: baseline` PORQUE UNO DE LOS ÍTEMS ES UN `<button>`: sin eso, su
 * caja lo alinea por el borde y el texto del botón queda un pelo más alto que el
 * de los enlaces de al lado. */
.c-borradores__acciones {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 15px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.9rem;
}

.c-borradores__acciones > .c-sep { display: none; }

/* «Publicar» ES UN FORMULARIO Y NO UN ENLACE —escribe, y un GET que escribe lo
 * dispara cualquier prefetch—, así que su `<form>` tiene que caber en la fila de
 * acciones como uno más. `display: contents` es lo que hace que el botón sea
 * hermano de los enlaces en vez de un bloque propio: es la misma línea que ya
 * usa el formulario de exportar en los ajustes de la cuenta. */
.c-borradores__publicar { display: contents; }

/* El formulario de «Nuevo café» conserva la medida de lectura del resto de
 * formularios de esta pantalla: un campo de 800 px no se rellena mejor. */
.c-borradores__form { max-width: 70ch; }

/* EL AVISO DEL BORRADOR AJENO NECESITA SU AIRE, y no lo tenía: `c-cuenta__estado`
 * lleva `margin-bottom: 0` porque en su sitio de origen le sigue otra cosa que ya
 * abre hueco, y aquí le sigue un `<fieldset>` con `margin-top: 0`. **Medido en el
 * DOM: 0,0 px entre los dos** — la advertencia quedaba pegada al primer título de
 * bloque y se leía como parte de él.
 *
 * ACOTADO A ESTE FORMULARIO, que es donde se midió el defecto. La clase la usan
 * varias pantallas y no consta que allí sobre espacio; cambiarla entera sería
 * arreglar a ciegas cinco sitios para ver bien uno. */
.c-borradores__form .c-cuenta__estado { margin-bottom: 1.5rem; }

/* EL BORDE TRANSPARENTE SE RESERVA EN LAS INACTIVAS, y no es adorno: sin él, la
 * pestaña que pasa a activa crecería 2 px y la fila entera daría un salto al
 * cambiar de sección. Reservado, lo único que cambia es el color.
 *
 * `margin-bottom: -1px` ES LO QUE HACE QUE LA MARCA PISE EL FILETE en vez de
 * quedar flotando encima de él con un pelo de papel en medio. */
.c-pestanas__enlace {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	font-size: 16px;
	color: var(--tinta-suave);
	text-decoration: none;
}

.c-pestanas__enlace:hover,
.c-pestanas__enlace:focus-visible { color: var(--tinta); }

.c-pestanas__enlace:focus-visible { outline: 2px solid var(--marron); outline-offset: 2px; }

/* La activa: tinta plena, semibold y la marca. Sigue siendo un enlace —lleva
 * `aria-current="page"` en el marcado— para no perder una parada del tabulador
 * justo donde está quien navega con teclado. */
.c-pestanas__enlace--activa {
	border-bottom-color: var(--tinta);
	color: var(--tinta);
	font-weight: 600;
}
.c-cuenta__estado { margin: 1.25rem 0 0; color: var(--tinta-suave); font-size: 16px; max-width: 70ch; }
.c-cuenta__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0 0; }

/* El formulario conserva la medida de lectura: un campo de texto de 800 px de
 * ancho no se rellena mejor, y las etiquetas quedarían a media pantalla de su
 * casilla. Lo que se ensanchó es la LISTA, no lo que se escribe. */
.c-cuaderno__form { max-width: 70ch; }

/* LA BANDERA DE ORIGEN (31/8/2026), delante del nombre de la ficha en las diez
 * superficies de la capa privada que lo pintan. La emite `catastro_bandera_html()`
 * desde `catastro_theme_ficha_enlace()`, que es el único sitio.
 *
 * NINGÚN COLOR NUEVO: `--linea` ES `#DAD4CC`, el mismo filete de todo el sitio.
 * Se escribe con la variable y no con el literal por lo de siempre — el día que
 * el filete cambie de tono, esto no se queda atrás sin que nadie lo note.
 *
 * `outline` Y NO `border`, y es la diferencia que importa aquí: un borde se suma
 * al ancho de la caja y movería el texto medio píxel a la derecha en las filas
 * con bandera y no en las demás; el contorno se dibuja fuera y no ocupa sitio.
 * Hace falta porque **las banderas con el borde blanco** —Japón, y de los nuestros
 * Indonesia y Perú por su franja— se derramarían sobre el papel sin él.
 *
 * 24×18, ADJUDICADO POR LUIS EL 31/8/2026 SOBRE EL RÁSTER REAL. **El límite no
 * depende del tamaño y sigue entero**: no es portadora única del dato.
 *
 * Una versión anterior de este comentario firmaba esa adjudicación ANTES de que
 * existiera —«tras la pasada de Luis»— y describía cómo se veía a 16×12. **No
 * había ocurrido**: lo que se vio a ese tamaño fue la caja vacía del recurso que
 * aún no existía. Queda anotado porque es más fácil de lo que parece firmar una
 * decisión que nadie ha tomado.
 *
 * EL `vertical-align` SE MIDIÓ EN LA PÁGINA SERVIDA Y NO SE CALCULÓ: -4.5px.
 *
 * Lo que hay que conseguir es que **el centro de la bandera caiga en el centro de
 * la x-height del texto**. Con -2px puestos a ojo, el centro quedaba **2,5 px por
 * encima** — medido en `/cuenta/?seccion=compras` localizando la línea base con un
 * `inline-block` de altura cero (que se apoya exactamente en ella) y la x-height
 * con las métricas del glifo que el navegador está usando de verdad. **Ni la caja
 * de línea ni el `font-size` sirven para esto**: el primer intento midió el alto
 * del renglón —22 px— y lo tomó por la altura de la x, que son 9.
 *
 * UN VALOR EN PÍXELES Y NO EN `em`, y es una consecuencia de la geometría: **la
 * bandera mide 18 px pase lo que pase con el texto**, así que el desplazamiento
 * ideal no es proporcional al cuerpo sino `x-height/2 - 9`. En el rango real de
 * las cuatro listas —15 px en las entregas, 19 px en el título del cuaderno— eso
 * va de -5.0 a -4.0, así que **-4.5 queda a menos de medio píxel del ideal en
 * todas**. Un valor en `em` acertaría en una y fallaría más en las otras. */
.c-bandera {
	vertical-align: -4.5px;
	margin-right: 0.5em;
	outline: 0.5px solid var(--linea);
}

/* SEPARADOR ENTRE SECCIONES, y el hueco vive en la SECCIÓN y nunca en el `<h2>`
 * —la regla que dejó escrita `.c-propuestas` el 16/8—: un margen puesto en el
 * título separa de lo que hay arriba HOY, no de lo que haya arriba mañana.
 *
 * LA PRIMERA NO LLEVA FILETE porque no separa de nada: encima solo está el
 * saludo. Y `.c-cuenta__reclamo` tampoco, porque ya se separa por su fondo —dos
 * marcas de separación en el mismo borde se leen como un error de maquetación—. */
.c-cuenta__seccion { margin-top: 2.5rem; }

/* EL FILETE LO LLEVA LA SECCIÓN QUE TIENE OTRA ANTES, y se pide con el hermano
 * general y no con `:first-of-type`. Aquélla fue el primer intento y falló de
 * una forma medible: `:first-of-type` mira el TIPO de elemento —el primer
 * `<section>` del área—, y con el formulario de apunte abierto el primer
 * `<section>` es él, que no lleva esta clase. Resultado: «Tus últimos apuntes»
 * salía sin filete en `/cuenta/` y con filete en `/cuenta/?apuntar=…`, la misma
 * sección con dos aspectos según la vista. Con `~` la regla dice lo que se
 * quería decir —«sepárate de la sección que tienes encima»— y no depende de qué
 * elementos haya en medio ni de cuál sea el primero. */
.c-cuenta__seccion ~ .c-cuenta__seccion {
	padding-top: 2rem;
	border-top: 1px solid var(--linea);
}

/* CABECERA DE SECCIÓN: el titular a la izquierda y una acción opcional a la
 * derecha. `baseline` y no `center`, para que el enlace se apoye en la misma
 * línea del texto del título en vez de flotar a su altura media; y `wrap`,
 * porque en móvil la acción baja y no se comprime contra el titular. */
.c-seccion__cabecera {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
}

/* El hueco bajo la cabecera lo pone ELLA y no el `<h2>`, que dentro de una
 * cabecera flex ya no lo necesita. Sin esta línea, en móvil —donde el nombre del
 * café es el primer elemento del apunte— quedaba pegado al titular de la sección
 * y los dos se leían como un titular a dos renglones. */
.c-seccion__cabecera { margin-bottom: 1rem; }
.c-seccion__cabecera .c-seccion__titulo { margin-bottom: 0; }
.c-seccion__accion { font-size: 15px; }

/* Los ajustes de la cuenta no son una sección de datos: no llevan lista debajo,
 * solo tres botones, así que su hueco interior es menor. */
.c-cuenta__ajustes .c-cuenta__acciones { margin-top: 1.25rem; }

/* La tarjeta de «proponer un café» (Luis, 16/8/2026).
 *
 * `--marron-suave` es el mismo relleno que marca el idioma activo en la
 * cabecera, y el radio 8px el de la caja de idioma y los botones: la tarjeta no
 * inventa una forma nueva, usa la que el sitio ya tiene para «esto es una zona
 * y no un párrafo». Sin borde: el fondo ya la separa del papel, y un contorno
 * encima competiría con el botón que lleva dentro.
 *
 * EL TÍTULO NO ES `.c-seccion__titulo`. Aquélla encabeza secciones de datos
 * —«Tus últimos apuntes», «Tus propuestas»— y esto no es una sección de datos
 * sino un ofrecimiento; con el mismo peso y tamaño se leería como una lista más
 * que además está vacía. */
.c-cuenta__reclamo {
	margin: 2.5rem 0 0;
	padding: 1.5rem;
	background: var(--marron-suave);
	border-radius: 8px;
}

.c-cuenta__reclamo-titulo {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--tinta);
}

.c-cuenta__reclamo-texto {
	margin: 0.4rem 0 0;
	font-size: 16px;
	color: var(--tinta-suave);
}

.c-cuenta__reclamo-accion { margin: 1.25rem 0 0; }

/* --- Tus propuestas -----------------------------------------------------
 * La sección no tenía UNA SOLA REGLA hasta el 16/8/2026, y se notaba en dos
 * sitios: la lista salía con las viñetas y el sangrado del navegador —el tema
 * no resetea `ul` en global, cada lista lo hace por su clase— y el encabezado
 * quedaba pegado a la tarjeta de proponer, que es la que tiene justo encima.
 *
 * 2.5rem ES EL HUECO DEL ÁREA y no una medida nueva: el mismo de `.c-cuaderno`,
 * `.c-cuaderno__form`, `.c-deseos` y `.c-cuenta__reclamo`. Va en la SECCIÓN y
 * nunca en el `<h2>`, y eso es lo que hace que el hueco siga ahí el día que la
 * tarjeta no se pinte —una cuenta sin `catastro_proponer` no la ve— o que
 * cambie de vecino: un margen puesto en el título separa de lo que hay arriba
 * hoy, no de lo que haya arriba mañana.
 *
 * EL ESTADO ES METADATO Y SE PINTA COMO TAL: 15px y `--tinta-suave`, los mismos
 * de `.c-deseos__meta` y `.c-cuaderno__cabeza`. No se inventa un color, porque
 * esta pantalla ya tiene una respuesta a «esto es contexto, no el dato». Sin
 * subrayado y sin fondo: no es un estado que se pulse ni una alarma, es la
 * respuesta a «¿ya está?».
 */
.c-propuestas { margin-top: 2.5rem; }
.c-propuestas__lista { list-style: none; margin: 1rem 0 0; padding: 0; }

/* UNA FILA CON TRES SITIOS FIJOS (17/8/2026): el título a la izquierda, y la
 * fecha y el estado alineados a la derecha, cada uno en su columna. Antes iban
 * los tres seguidos en línea, así que el estado empezaba en un punto distinto en
 * cada fila —donde acabara el título— y no se podía recorrer la columna con la
 * vista para ver qué falta por revisar.
 *
 * EL FILETE ENTRE FILAS y no el margen: son diecisiete líneas de texto parecido,
 * y lo que las separa tiene que verse sin contar. El último sin borde, para que
 * la lista no parezca cortada a media fila. */
.c-propuestas__item {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 1rem;
	align-items: baseline;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--linea);
}

.c-propuestas__item:last-child { border-bottom: 0; }

@media (max-width: 34em) {
	.c-propuestas__item { grid-template-columns: 1fr; gap: 0.15rem; }
}
/* Fecha y estado, el mismo gris de metadato y el mismo cuerpo: ninguna de las dos
 * es el dato de la fila, que es el nombre. Sin color por estado — una insignia
 * verde o ámbar convertiría «en revisión» en un juicio sobre la propuesta. */
.c-propuestas__estado,
.c-propuestas__fecha { font-size: 15px; color: var(--tinta-suave); }
.c-propuestas__estado { text-align: right; }

/* --- Catas de cadena (18/8/2026) ----------------------------------------
 * La forma de `.c-propuestas__item` y no una caja nueva: es la misma clase de
 * lista —una fila por cosa, con sus metadatos alineados a la derecha— y dos
 * patrones para lo mismo se separan con el tiempo. Lo que cambia es que aquí
 * una fila puede llevar dos líneas más —los ejes y las acciones—, así que la
 * rejilla es de dos columnas y esas dos ocupan el ancho entero.
 *
 * SIN COLOR POR DECISIÓN, igual que las propuestas: un verde o un rojo
 * convertiría un apunte de trabajo en un semáforo.
 */
.c-cadena { margin-top: 2.5rem; }
.c-cadena__lista { list-style: none; margin: 1rem 0 0; padding: 0; }

.c-cadena__fila {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.35rem 1rem;
	align-items: baseline;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--linea);
}

.c-cadena__fila:last-child { border-bottom: 0; }

/* La línea de acciones cruza la rejilla entera: partida en columnas cabría en
 * un canalón de dos centímetros. Acompañaba aquí a `.c-cadena__ejes`, retirada
 * el 27/8/2026 con la enumeración de ejes de la lista. */
.c-cadena__acciones { grid-column: 1 / -1; margin: 0; }

.c-cadena__que { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }

/* LA ETAPA DEJA DE COMPETIR CON EL TÍTULO DE SU BLOQUE (23/8/2026): peso
 * corriente del cuerpo, no el fuerte. **Sigue siendo lo primero de su línea**,
 * que es lo que la identifica dentro del bloque; lo que suelta es el peso, que
 * ahora lo lleva el lote. El elemento pasó de `strong` a `span` en el mismo
 * cambio — el énfasis y la negrita se mueven juntos. */
.c-cadena__etapa { font-size: 17px; font-weight: 400; }

/* --- La lista agrupada por lote (23/8/2026) ------------------------------
 *
 * `.c-cadena__lote` SE RETIRA en vez de quedarse por si acaso: el nombre del
 * lote ya no vive en la fila sino en la cabecera de su bloque, y una regla que
 * no pinta nada es una regla que el día que alguien reutilice la clase pintará
 * algo que nadie pidió.
 *
 * EL BLOQUE NO LLEVA CAJA, NI BORDE, NI FONDO: lo que separa un lote del
 * siguiente es el aire y el nombre, como en Compras. Una tarjeta por lote
 * convertiría una lista de trabajo en una cuadrícula de fichas, y lo que se
 * hace aquí es recorrer.
 */
/* ─────────────────────────────────────────────────────────────────────────
 * EL FILETE SEPARA ENTRE BLOQUES, Y SOLO CUANDO HAY ALGO QUE SEPARAR
 * ─────────────────────────────────────────────────────────────────────────
 * (23/8/2026, tras verlo en navegador real.) Estaba **bajo la cabecera de cada
 * bloque**, así que con UN SOLO lote quedaban dos filetes casi seguidos —el de
 * la fila de pestañas y éste— con una línea de texto en medio: **el mismo
 * defecto que se corrigió bajo el H1 del área el 21/8**.
 *
 * Puesto como `border-top` del hermano, **el selector hace de contador**: con un
 * lote no hay hermano y no se pinta nada; con dos o más aparece ENTRE ellos y
 * **nunca sobre el primero ni bajo el último**. Sin contar en PHP y sin una
 * clase que la plantilla tenga que acordarse de poner.
 *
 * `--linea`, la de siempre. Ni color nuevo ni variable nueva: un filete que
 * separa dos cosas del mismo rango es el filete que el tema ya tiene.
 */
.c-cadena__grupo + .c-cadena__grupo {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--linea);
}

.c-cadena__grupo-cab {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	padding-bottom: 0.35rem;
}

/* ─────────────────────────────────────────────────────────────────────────
 * EL TÍTULO DEL LOTE MANDA (23/8/2026)
 * ─────────────────────────────────────────────────────────────────────────
 * **El bloque existe para que mande el lote, y se leía al revés**: la etapa iba
 * en negrita y el título no, de modo que **el contenedor pesaba menos que su
 * contenido**. El peso fuerte pasa aquí y la etapa lo suelta.
 *
 * Y PIERDE EL SUBRAYADO PERMANENTE, que es la otra mitad: había **tres
 * subrayados en cinco líneas** —título, «Editar» y «Borrar»— y el que menos
 * peso tenía era el que debía destacar. Quitado el de arriba, los dos de abajo
 * vuelven a ser lo que son: acciones pequeñas.
 *
 * **SIGUE SIENDO UN ENLACE Y SE VE QUE LO ES.** Conserva el color de enlace del
 * tema —no se pinta como texto muerto— y **el subrayado vuelve en `:hover` Y en
 * `:focus-visible`**. Lo segundo no es adorno: **un enlace que solo se distingue
 * con el ratón deja fuera a quien navega con tabulador.** El `outline` es el
 * mismo que el tema da a todo lo enfocable.
 */
.c-cadena__grupo-titulo { margin: 0; font-size: 17px; font-weight: 600; }

.c-cadena__grupo-titulo a { text-decoration: none; }

.c-cadena__grupo-titulo a:hover,
.c-cadena__grupo-titulo a:focus-visible { text-decoration: underline; }

.c-cadena__grupo-titulo a:focus-visible { outline: 2px solid var(--marron); outline-offset: 2px; }

/* LA DERIVA, EN GRIS DE METADATO Y NUNCA EN COLOR. Un verde para lo que sube y
 * un rojo para lo que baja convertirían una diferencia entre dos mediciones en
 * un juicio sobre el lote — la misma decisión que dejó la lista sin semáforo. */
.c-cadena__deriva {
	margin: 0;
	font-size: 15px;
	color: var(--tinta-suave);
	font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────────
 * EL DESGLOSE POR ATRIBUTO (27/8/2026)
 * ─────────────────────────────────────────────────────────────────────────
 * PLEGADO EN LA LISTA Y DESPLEGADO EN LA VISTA DE UNA CATA, y las dos salen de
 * la misma decisión: la lista se RECORRE —seis ejes abiertos en cada lote la
 * convertirían en algo que hay que atravesar— y la vista de una cata es donde
 * ese detalle ES la página.
 *
 * EL `<summary>` ES LA LÍNEA DE DERIVA Y NO UN RÓTULO NUEVO. Un «Ver desglose»
 * encima de la deriva habría añadido una línea a una pantalla que se recorre, y
 * la deriva ya dice exactamente entre qué dos etapas es lo que hay dentro.
 *
 * SIN COLOR SEMÁNTICO, igual que la deriva de arriba: **el signo dice la
 * dirección**. Un verde para lo que sube diría además que está verificado —el
 * verde está reservado a eso— y, peor, afirmaría que subir es bueno.
 */
/* `min-width: 0` PORQUE ESTO ES UN HIJO DE UN FLEX, y sin él un texto largo
 * —la deriva nombra dos etapas y las del trayecto nuevo son largas— desborda la
 * caja en vez de encogerla. */
.c-cadena__desglose { min-width: 0; }

.c-cadena__desglose > summary {
	cursor: pointer;
	list-style: none;
}

/* La flecha propia, porque `list-style: none` quita la del navegador. Sin
 * `::-webkit-details-marker` no desaparecía en WebKit.
 *
 * DELANTE Y NO DETRÁS, Y LO DECIDIÓ LA CAPTURA: la cabecera del bloque es un
 * flex con `space-between`, así que la deriva va pegada al borde derecho — y una
 * flecha detrás del texto quedaba **flotando contra el borde de la página**.
 * Delante es además donde la pone cualquier navegador cuando no se le quita. */
.c-cadena__desglose > summary::-webkit-details-marker { display: none; }

.c-cadena__desglose > summary::before {
	content: '›';
	display: inline-block;
	margin-right: 0.4rem;
	transition: transform 0.12s ease;
}

.c-cadena__desglose[open] > summary::before { transform: rotate(90deg); }

.c-cadena__desglose > summary:focus-visible { outline: 2px solid var(--marron); outline-offset: 2px; }

/* La lista de diferencias. `tabular-nums` como la deriva: los deltas se leen en
 * columna y con cifras de ancho variable dejan de alinearse. */
.c-cadena__difs {
	margin: 0.4rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	color: var(--tinta-suave);
	font-variant-numeric: tabular-nums;
}

.c-cadena__dif { margin: 0.1rem 0; }

/* El nombre del eje es lo que se busca al recorrer la lista, así que lleva el
 * color de texto; el delta y el tramo se quedan en el gris de metadato. */
.c-cadena__dif-eje { color: var(--tinta); }

.c-cadena__dif--total .c-cadena__dif-eje { font-weight: 600; }

/* El bloque de la vista de una cata: mismo vocabulario, sin caja nueva. */
.c-cadena__cambio { margin: 0 0 1.5rem; }
.c-cadena__cambio-titulo { margin: 0; font-size: 17px; font-weight: 600; }
.c-cadena__cambio-par { margin: 0.15rem 0 0; font-size: 15px; color: var(--tinta-suave); }

/* El recuento de la cabecera, igual que el de Compras. */
.c-cadena__cuenta { font-size: 15px; color: var(--tinta-suave); }

/* La referencia de muestra es lo más privado de la fila y lo menos importante
 * para recorrerla: metadato, y en cursiva para que no se confunda con el nombre
 * del lote, que sí es un nombre propio del registro. */
.c-cadena__ref { font-size: 15px; color: var(--tinta-suave); font-style: italic; }

.c-cadena__meta { font-size: 15px; color: var(--tinta-suave); text-align: right; }
.c-cadena__acciones { font-size: 15px; }

@media (max-width: 34em) {
	.c-cadena__fila { grid-template-columns: 1fr; }
	.c-cadena__meta { text-align: left; }
}

/* --- Compras (18/8/2026) -------------------------------------------------
 *
 * PREFIJO PROPIO `c-compras` Y SIN TOCAR NI UNA REGLA DE `c-cadena`, aunque las
 * dos listas se parezcan: son dos piezas y compartir clases haría que retocar el
 * espaciado de una moviera la otra sin que nadie lo pidiera. Lo que sí se
 * comparte es la FORMA —fila con rejilla de dos columnas, metadatos a la
 * derecha, acciones cruzando el ancho—, porque es la misma clase de lista y dos
 * formas distintas para lo mismo se leen como dos cosas distintas.
 *
 * SIN COLOR EN NINGUNA CIFRA. El total va en negrita porque es lo que se busca
 * al recorrer la lista, no porque sea bueno ni malo: un precio con color sería
 * un juicio sobre una compra que ya está hecha.
 */
.c-compras { margin-top: 2.5rem; }
.c-compras__lista { list-style: none; margin: 1rem 0 0; padding: 0; }

.c-compras__fila {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.35rem 1rem;
	align-items: baseline;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--linea);
}

.c-compras__fila:last-child { border-bottom: 0; }

/* La línea de acciones cruza la rejilla entera, como en las catas. */
/* AIRE ALREDEDOR DE LAS ACCIONES (31/8/2026, adjudicado por Luis sobre el ráster).
 *
 * Medido antes de proponerlo: **«Registrar entrega» y «Editar · Borrar» estaban a
 * 4 px**, y el bloque entero no tenía margen superior — dos filas de acción
 * distintas pegadas entre sí y pegadas a la línea de datos del contrato.
 *
 * SOLO MÁRGENES: no se toca el hover ni la afordancia de ninguno de los dos, que
 * es lo que distingue un ajuste de aire de un rediseño de los controles. */
.c-compras__acciones { grid-column: 1 / -1; margin: 0.75rem 0 0; }
.c-compras__acciones + .c-compras__acciones { margin-top: 0.5rem; }

.c-compras__que { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.c-compras__lote { font-size: 17px; }

/* El proveedor es contexto del lote, no un titular: mismo cuerpo que el resto de
 * metadatos. Enlazado cuando es una Organización del registro, en llano cuando
 * es el texto de la factura — y el estilo no los distingue, porque lo que los
 * distingue ya es que uno se puede pulsar. */
.c-compras__prov { font-size: 15px; color: var(--tinta-suave); }

/* La referencia es lo más privado de la fila y lo menos importante para
 * recorrerla: cursiva, como la referencia de muestra de las catas. */
.c-compras__ref { font-size: 15px; color: var(--tinta-suave); font-style: italic; }

.c-compras__meta { font-size: 15px; color: var(--tinta-suave); text-align: right; }
.c-compras__total { color: var(--tinta); }
.c-compras__acciones { font-size: 15px; }

/* El recuento de la cabecera. NUNCA UN IMPORTE: una cifra de gasto acumulado es
 * una función del paquete personal y no se regala aquí. */
.c-compras__cuenta { font-size: 15px; color: var(--tinta-suave); }

/* ─── LAS DOS MODALIDADES (21/8/2026) ─────────────────────────────────────
 *
 * SIN COLOR POR ESTADO Y SIN CAJAS, como toda esta pantalla: lo que separa un
 * contrato de una entrega es **su sitio en la lista** —la entrega va dentro de
 * su contrato— y un rótulo en gris de metadato. Un verde de «completo» o un
 * ámbar de «pendiente» convertirían una cuenta en un juicio sobre el proveedor.
 */

/* La pregunta previa: dos puertas con su línea debajo. Sin viñetas y con aire
 * entre ellas, porque son dos decisiones y no una lista de opciones. */
.c-compras__modos { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.c-compras__modos > li + li { margin-top: 1.5rem; }
.c-compras__modos .c-alta__pista { display: block; margin-top: 0.4rem; max-width: 60ch; }

/* EL RÓTULO «Contrato» ES LO ÚNICO QUE MARCA LA FILA MADRE, y va arriba del
 * todo, cruzando la rejilla: puesto al lado del lote competiría con el nombre
 * del lote, que es el titular de la fila. Versalitas y gris de metadato — dice
 * qué clase de fila es, no qué importancia tiene. */
/* Desde el 26/8/2026 vive DENTRO de `.c-compras__que`, en la misma línea que el
 * lote: el resumen son tres renglones y una cuarta línea solo para la palabra
 * «Contrato» gastaba uno en decir lo que el sitio en la lista ya dice. Por eso
 * no lleva `grid-column`: aquí es un hijo flexible más. */
.c-compras__marca {
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tinta-suave);
}

/* LA LÍNEA DERIVADA DEL CONTRATO: lo entregado y, si el contrato declara peso
 * nominal, lo pendiente. Cruza la rejilla y va bajo las cifras del contrato,
 * porque habla de todas sus entregas y no de la fila de arriba. */
.c-compras__balance {
	grid-column: 1 / -1;
	margin: 0.15rem 0 0;
	font-size: 15px;
	color: var(--tinta-suave);
}

/* LAS ENTREGAS, DENTRO DE SU CONTRATO. La sangría y el filete de la izquierda
 * son lo que dice «esto cuelga de lo de arriba» sin necesidad de una caja: es la
 * misma línea `--linea` que ya separa las filas, girada. */
.c-compras__entregas {
	grid-column: 1 / -1;
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0 0 0 1rem;
	border-left: 2px solid var(--linea);
}

/* Una entrega dentro de un contrato es un dato de segundo plano: el titular de
 * ese grupo es el contrato. Filete más suave y sin el de la última, que ya lo
 * cierra el borde izquierdo. */
.c-compras__fila--entrega { padding: 0.5rem 0; font-size: 15px; }
.c-compras__fila--entrega:last-child { border-bottom: 0; }
.c-compras__fila--entrega .c-compras__lote { font-size: 15px; }

/* DESDE EL 26/8/2026 LA FILA HIJA NO TRAE `.c-compras__que`: el lote, el
 * proveedor y la referencia ya los dice su contrato, tres líneas más arriba. Lo
 * que queda es la línea de cifras, y **tiene que ocupar la fila y leerse desde
 * la izquierda**: con la rejilla de dos columnas heredada caería en la primera y
 * `text-align: right` la dejaría flotando contra un vacío. */
.c-compras__fila--entrega { grid-template-columns: 1fr; }
.c-compras__fila--entrega > .c-compras__meta { text-align: left; }

/* ─── EL CONTRATO ES UN `<details>` NATIVO (21/8/2026) ────────────────────
 *
 * CERRADO POR DEFECTO, ASÍ QUE EL RESUMEN LLEVA TODO LO QUE HAY QUE VER: el
 * `<summary>` toma la rejilla que antes tenía la fila, más la línea derivada de
 * entregado y pendiente. Lo que se pliega es el detalle de cada entrega.
 *
 * `display: grid` EN EL `<summary>` RETIRA EL TRIÁNGULO DEL NAVEGADOR, así que
 * se dibuja uno: `list-style: none` y `::-webkit-details-marker` cubren las dos
 * familias, y el signo lo pone un `::before` que es **el primer elemento de la
 * rejilla**. Sin él, un bloque plegable no anuncia que lo es. */
.c-compras__item { list-style: none; }
.c-compras__contrato { border-bottom: 1px solid var(--linea); }
.c-compras__item:last-child .c-compras__contrato { border-bottom: 0; }

/* DOS COLUMNAS Y TRES FILAS DESDE EL 26/8/2026: el signo, y a su derecha las
 * tres líneas del resumen —lo que es, lo pactado, lo ocurrido—. Antes eran tres
 * columnas porque «lo pactado» compartía renglón con el lote y se leía a la
 * derecha; con tres cifras dentro no cabía, y una cifra que se corta no informa
 * de nada. **La tercera columna se retira entera**: un `auto` de más no da error
 * y no se ve leyendo el CSS. */
/* LA COLUMNA DEL MARCADOR VA FIJA Y NO `auto` (27/8/2026), Y LA RAZÓN ES QUE ▸ Y
 * ▾ NO MIDEN LO MISMO. Con `auto` la columna vale lo que avance el glifo, así que
 * **el título se corre a un lado y a otro cada vez que alguien pliega o
 * despliega**. Medido a 13 px daba la casualidad de que coincidían y no se
 * notaba; al crecer el signo deja de ser casualidad. `0.8rem` cabe el mayor de
 * los dos con holgura. */
.c-compras__resumen {
	grid-template-columns: 0.8rem 1fr;
	border-bottom: 0;
	cursor: pointer;
	list-style: none;
}

.c-compras__resumen::-webkit-details-marker { display: none; }

/* EL TAMAÑO DEL TRIÁNGULO ES REGLA Y NO CAPRICHO (27/8/2026). **El `<summary>`
 * entero es zona de clic**, así que el marcador no es un objetivo que haya que
 * acertar: es **la única señal de que el bloque se abre**, porque `display: grid`
 * retira el triángulo del navegador. A 13 px medía **7 px en render** y se leía
 * como una mota. **Objetivo 9–11 px de alto medidos sobre captura a 1×**; 19 px
 * de cuerpo da 10 px clavados en los dos estados.
 *
 * ALINEADO CON L1 Y NO CENTRADO SOBRE LAS TRES LÍNEAS: `grid-row: 1` en vez de
 * `1 / span 3`. El signo pertenece al renglón del título —es lo que se mira al
 * decidir si abrir—, y centrado sobre el bloque entero quedaba flotando frente a
 * la línea de cifras. `line-height: 1` es lo que lo coloca dentro de su caja;
 * con la caja heredada el glifo caía 1,5 px por debajo y **no hay `padding-top`
 * negativo con el que subirlo**. Medido: centro del signo a 0,5 px por encima
 * del centro de L1. */
.c-compras__resumen::before {
	content: '\25B8';
	grid-row: 1;
	align-self: center;
	color: var(--tinta-suave);
	font-size: 19px;
	line-height: 1;
}

.c-compras__contrato[open] > .c-compras__resumen::before { content: '\25BE'; }

/* LAS TRES LÍNEAS, UNA DEBAJO DE OTRA Y TODAS A LA IZQUIERDA. El signo ocupa la
 * primera columna y las tres se apilan en la segunda. **`text-align: left` no es
 * cosmético**: `.c-compras__meta` lo trae a la derecha de la fila suelta, donde
 * comparte renglón con el lote; aquí es un renglón entero y una línea de tres
 * cifras alineada a la derecha se leería como una columna de números que no es. */
.c-compras__resumen > .c-compras__que,
.c-compras__resumen > .c-compras__meta,
.c-compras__resumen > .c-compras__balance {
	grid-column: 2;
	text-align: left;
}

/* Lo desplegado se sangra bajo el signo, que es lo que dice a qué pertenece. */
.c-compras__dentro { padding: 0 0 0.75rem 1.4rem; }
/* EL AIRE DEL 31/8 TAMBIÉN AQUÍ, Y ESTA ES LA REGLA QUE MANDA EN EL CONTRATO
 * DESPLEGADO. La de arriba —`.c-compras__acciones` a secas— es menos específica
 * y **no llegaba a este caso**, que es justamente el que se midió: la prueba en
 * navegador salió bien solo porque llevaba `!important`, y el CSS desplegado sin
 * él no cambiaba nada. Se descubrió comparando las reglas que el navegador dice
 * que aplican, no releyendo la hoja. */
.c-compras__dentro > .c-compras__acciones { margin: 0.75rem 0 0; }
.c-compras__dentro > .c-compras__acciones + .c-compras__acciones { margin-top: 0.5rem; }

/* POR QUÉ NO HAY «pendientes» EN UN CONTRATO SIN NOMINAL (27/8/2026). **NO ES UN
 * AVISO Y NO SE PINTA COMO TAL**: ni caja, ni icono, ni color de alerta — un
 * contrato firmado solo en sacos es legítimo y puede quedarse así para siempre.
 * Lo que dice es una condición del contrato, no un error de quien lo apuntó, así
 * que va en el mismo gris de metadato y el mismo cuerpo que `.c-compras__balance`,
 * que es la línea cuya ausencia explica. `max-width` porque es una frase y no una
 * fila de cifras: una línea de texto que cruza la pantalla entera se lee peor. */
/* EL MARGEN INFERIOR ES 0.75rem Y NO 0.5rem, Y SE MIDIÓ ANTES DE ELEGIRLO: en un
 * contrato con nominal el hueco entre L3 y «Registrar entrega» es de **12 px**, y
 * con 0.5rem la nota dejaba 8 px debajo — el bloque respiraba distinto según el
 * contrato tuviera peso de saco o no. Con 0.75rem los dos huecos valen 12 px y
 * **lo único que cambia en el bloque es que hay una línea más**. */
.c-compras__sin-nominal {
	margin: 0 0 0.75rem;
	max-width: 60ch;
	font-size: 15px;
	color: var(--tinta-suave);
}

/* EL AÑO. Encabezado de agrupación y no de sección: por eso NO usa
 * `.c-seccion__titulo`, que encabeza bloques de datos. Versalitas y gris de
 * metadato — dice de cuándo es lo que viene debajo, no qué importancia tiene. */
.c-compras__anio {
	margin: 1.75rem 0 0.25rem;
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--tinta-suave);
	font-weight: 600;
}

.c-compras__anio:first-of-type { margin-top: 1rem; }

@media (max-width: 34em) {
	/* El resumen ya es de dos columnas en cualquier ancho desde el 26/8/2026, así
	 * que aquí solo queda estrechar la sangría de lo desplegado. */
	.c-compras__dentro { padding-left: 0.9rem; }
}

@media (max-width: 34em) {
	.c-compras__fila { grid-template-columns: 1fr; }
	.c-compras__meta { text-align: left; }
	/* En móvil la sangría de las entregas se estrecha: un tercio de una pantalla
	 * de 320 px gastado en margen deja el nombre del lote sin sitio. */
	.c-compras__entregas { padding-left: 0.6rem; }
}

/* Los trece ejes del formulario, en la rejilla de los seis del cuaderno: dos o
 * tres columnas según quepa, nunca una fila de trece — una fila de campos con
 * su etiqueta encima se lee como una tabla, y esto es un cuestionario. */
.c-cadena__form-ejes,
.c-cuaderno__atributos-rejilla {
	display: grid;
	gap: 0.75rem 1rem;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

/* --- Reclamación de fichas ----------------------------------------------
 * «Tus entidades» en el área de cuenta: misma forma que «Tus propuestas»,
 * porque es la misma clase de lista —una fila por trámite, con su estado en
 * gris detrás— y darle una forma propia haría parecer que son cosas distintas.
 *
 * LA LÍNEA DE LA FICHA PÚBLICA NO LLEVA COLOR, NI FONDO, NI ICONO, y eso es la
 * decisión y no una falta de acabado: cualquiera de las tres cosas la
 * convertiría en una insignia, y una insignia es un juicio (§4). Se compone
 * como el resto del texto de cabecera y pesa lo que pesa una frase.
 */
.c-vinculos { margin-top: 2.5rem; }
.c-vinculos__lista { list-style: none; margin: 1rem 0 0; padding: 0; }
.c-vinculos__item { margin-bottom: 0.5rem; }
.c-vinculos__item:last-child { margin-bottom: 0; }
.c-vinculos__meta { font-size: 15px; color: var(--tinta-suave); }

/* LA PROPAGACIÓN PRODUCTOR → FINCA (29/8/2026). Cuelga DENTRO de la fila de su
 * Productor y se sangra para decirlo: lo que hay aquí no es otra entidad de la
 * cuenta, es lo que el registro atribuye a la de arriba. El filete a la
 * izquierda es el mismo recurso con que Compras sangra las entregas dentro de su
 * contrato — **no se inventa una forma nueva para una relación que el sitio ya
 * sabe dibujar**. */
.c-propagar {
	margin: 0.5rem 0 0 0.25rem;
	padding-left: 0.85rem;
	border-left: 2px solid var(--linea);
}

/* NO ES `.c-seccion__titulo`, que encabeza secciones de datos: esto rotula una
 * sub-lista dentro de una fila. Gris de metadato, como la línea del rol y el
 * estado que tiene justo encima. */
.c-propagar__titulo {
	margin: 0 0 0.35rem;
	font-size: 15px;
	color: var(--tinta-suave);
}

.c-propagar__lista { list-style: none; margin: 0; padding: 0; }

/* CADA FINCA EN UNA LÍNEA, con su nombre y su acción o su explicación al lado.
 * `wrap` para que en móvil la línea de la finca reclamada baje entera en vez de
 * partirse a media frase, y el hueco lo pone el `gap` y nunca un carácter — la
 * decisión de la fila de acciones de «Mis cafés» del 28/8. */
/* `align-items: center` Y NO `baseline` DESDE EL 29/8: con el botón en
 * secundario la fila mezcla texto suelto con una caja que tiene borde y relleno,
 * y alinear por la línea base deja la caja montada sobre el texto de al lado.
 * Con `center` los tres elementos —nombre, botón o línea— comparten eje. */
.c-propagar__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.c-propagar__item:last-child { margin-bottom: 0; }

/* EL FORMULARIO NO OCUPA LÍNEA PROPIA: `display: contents` lo hace transparente
 * al `flex` del `<li>`, así que su botón se coloca al lado del nombre. Es el
 * mismo recurso que el `<form>` de exportar en la fila de acciones de la cuenta,
 * y por la misma razón. */
.c-propagar__form { display: contents; }

/* GRIS DE METADATO Y SIN COLOR DE ALARMA: una finca reclamada por otra cuenta no
 * es un fallo de nadie ni un aviso, es el estado de esa ficha. El rojo del tema
 * tiene un solo uso —lo que borra sin papelera— y ampliarlo se lo quitaría. */
.c-propagar__ajena { font-size: 15px; color: var(--tinta-suave); }

.c-reclamada { margin: 0.75rem 0 0; font-size: 15px; color: var(--tinta-suave); }

/* EN FICHA RECLAMADA, QUIEN HABLA VA PRIMERO (29/8/2026, adjudicado por Luis).
 *
 * **LAS DOS LÍNEAS SE INTERCAMBIAN EL PESO, Y NINGUNA CAMBIA SU TEXTO.** La de
 * reclamación se lleva **exactamente** lo que `.c-fuente` tenía —el realce, el
 * borde marrón, el relleno y el cuerpo de 16 con su interlineado—; el bloque de
 * fuente baja **exactamente** a lo que tenía `.c-reclamada`: gris, 15, sin caja.
 * Están copiados a propósito de sus dos vecinos de arriba: **el peso que hoy
 * dice «esto es lo primero» es el que tiene que decirlo, y no uno nuevo**.
 *
 * **EL MOTIVO ES DE ORDEN DE LOS HECHOS, NO DE ESTÉTICA**: tras la reclamación
 * habla el sujeto y la transcripción de la que salió la ficha es historial. La
 * cabecera decía lo contrario. Con la foto ya subida entre la fuente y los datos,
 * esto es lo que faltaba para que una ficha reclamada **se vea distinta** (16/8)
 * por lo que afirma y no por una línea gris al final de un bloque.
 *
 * **Y NO DICE «VERIFICADA»**: quién ha reclamado la ficha es un hecho; que sus
 * campos estén mantenidos, no. Eso lo dice la banda del 22/8, dato a dato. */
/* AJUSTE DEL 29/8/2026, VISTO EN EL RÁSTER REAL Y NO EN EL CÓDIGO: LA CAJA SE
 * QUEDA, PIERDE EL FILETE Y SE AJUSTA A SU CONTENIDO.
 *
 * Al heredar el bloque de fuente entero, la caja heredó **dos cosas que no le
 * tocaban**. La primera, el relleno vertical de `1.25rem`, pensado para un texto
 * de dos o tres líneas: sobre **una línea corta** se lee como **caja medio
 * vacía**. La segunda, y es la de fondo, **el filete marrón, que es la marca del
 * bloque de fuente** — dejarlo ahí señalaba «esto es la transcripción» encima de
 * lo único de la cabecera que ya no lo es.
 *
 * **SE ELIGIÓ ENTRE DOS SALIDAS Y SE MIDIERON LAS DOS POR RÁSTER**: sin caja, o
 * con caja y sin filete. **Gana la caja**, y el motivo es el encargo de la pieza:
 * la línea sube «con el peso visual que tenía el bloque de fuente», **y ese peso
 * ES la caja**. Sin ella la reclamación quedaba en tinta de párrafo a un punto de
 * la fuente que va debajo, **las dos se leían como un mismo bloque de dos
 * líneas**, y la inversión dejaba de notarse — que es exactamente lo que la pieza
 * venía a arreglar.
 *
 * **LA DISTINCIÓN ENTRE FICHAS LA HACE EL FILETE**: caja con filete es
 * transcripción, caja sin filete es reclamación. Dentro de una misma ficha no hay
 * ambigüedad posible, porque en la reclamada la fuente ya no lleva caja. */
.c-reclamada--principal {
	margin: 0.75rem 0 0;
	background: var(--realce);
	padding: 0.75rem 1.4rem;
	font-size: 16px;
	color: var(--tinta);
	line-height: 1.65;
}

/* EL REBAJE VA EN UN ENVOLTORIO Y ALCANZA A TODO LO QUE EL BLOQUE CONTENGA,
 * incluida la línea «Ficha aportada por …» — que **no se toca**: viaja dentro
 * del bloque y baja con él, con su texto y su sitio intactos. */
.c-cabecera__secundaria { margin-top: 0.9rem; }
.c-cabecera__secundaria .c-fuente {
	background: none;
	border-left: 0;
	padding: 0;
	font-size: 15px;
}
.c-cabecera__secundaria .c-fuente__linea { color: var(--tinta-suave); }

/* --- Proponer un café ---------------------------------------------------
 * Una regla. La introducción explica qué es esto y avisa de que hace falta
 * fuente, y sin margen inferior quedaba pegada a «Nombre del café», leyéndose
 * como el rótulo de ese campo en vez de como el texto de la página.
 *
 * 1.5rem es EL MISMO HUECO QUE SEPARA LOS GRUPOS DE CAMPO —el margen de
 * `.c-aviso__campo`— y no una medida elegida aparte: la introducción es un
 * bloque más de la columna, así que respira como los demás. Si aquel margen
 * cambia algún día, éste debería cambiar con él.
 */
.c-proponer__intro { margin-bottom: 1.5rem; }

/* Los seis bloques del formulario (Luis, 16/8/2026).
 *
 * `fieldset` TRAE ESTILOS DEL NAVEGADOR QUE HAY QUE RETIRAR —borde, padding,
 * min-width— y por eso se resetea en vez de heredar: el elemento se usa por lo
 * que SIGNIFICA para quien navega con lector de pantalla, no por su marco. Sin
 * el `min-width: 0`, un `fieldset` se niega a encogerse por debajo del ancho de
 * su contenido y rompe la columna en pantallas estrechas; es una rareza suya y
 * no del resto del formulario.
 *
 * EL TÍTULO ES DISCRETO A PROPÓSITO: 600 y un cuerpo pequeño, sin línea ni
 * fondo. Es una señal de dónde estás, no un encabezado de sección de ficha —si
 * pesara como `.c-seccion__titulo` competiría con las etiquetas de los campos,
 * que es lo que de verdad hay que leer aquí. */
.c-proponer__bloque {
	border: 0;
	padding: 0;
	margin: 0 0 2.5rem;
	min-width: 0;
}

/* EL TÍTULO DE BLOQUE MANDA SOBRE LA ETIQUETA DE CAMPO, Y HASTA EL 23/8/2026
 * PINTABA LO CONTRARIO (Luis, mirando las dos puertas). A 14px, peso 600 y gris
 * de metadato quedaba **más pequeño y más apagado que la `label` de 15px que
 * cuelga de él**: la jerarquía de la pantalla decía que «EL CAFÉ» importa menos
 * que «Nombre del café». No era un problema de peso, era de orden.
 *
 * TRES CAMBIOS, y los tres son la misma decisión: **16px —un paso por encima de
 * la etiqueta, no por debajo—, peso 700 y `--tinta`**, el color de texto normal
 * en vez del gris. Los dos tamaños ya existen en la escala del tema; no se
 * inventa ninguno.
 *
 * Y EL `letter-spacing` SUBE CON EL PESO, de 0.04em a 0.07em. Una versalita
 * gana cuerpo al pasar a 700 y **la mayúscula se apelmaza justo cuando más se
 * lee**: el espaciado no es adorno aquí, es lo que la hace legible. */
.c-proponer__bloque-titulo {
	padding: 0;
	margin-bottom: 1rem;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--tinta);
}

/* La línea que explica un bloque, cuando lo lleva. Sube el margen del título:
 * con el 1rem del `legend` quedaría más lejos de su propia explicación que de
 * los campos. */
.c-proponer__bloque-titulo:has( + .c-proponer__bloque-pista ) { margin-bottom: 0.3rem; }
.c-proponer__bloque-pista { margin: 0 0 1rem; font-size: 15px; color: var(--tinta-suave); }

/* --- El lector de páginas de `/proponer-cafe/` (25/8/2026) ---------------
 *
 * NADA DE ESTO EXISTE SIN JAVASCRIPT: el botón y las notas los crea el script,
 * y la casilla de confirmación viene con `hidden`. Las reglas están aquí
 * igualmente porque **una hoja de estilo no puede depender de que algo se haya
 * pintado**, y porque así se leen juntas las cinco piezas de la pantalla.
 *
 * EL BOTÓN VA DEBAJO DE LA CASILLA Y NO A SU LADO. Al lado obligaría a acortar
 * el campo de la dirección, que es **el campo más largo del formulario y el
 * único de esta pantalla**; y una URL que no cabe en su casilla es una URL que
 * no se puede comprobar de un vistazo. */
.c-proponer__leer { display: inline-block; margin-top: 0.6rem; }

/* --- El escáner de QR (25/8/2026) --------------------------------------
 * **Nada de esto existe sin JavaScript**: el botón, el estado y el visor los
 * crea el script. El botón va JUNTO al de leer y con el mismo peso: son dos
 * formas de rellenar la misma casilla, y una de las dos no es la principal.
 * El vídeo se acota en alto para que el formulario no dé un salto de pantalla
 * al abrirse la cámara. */
.c-proponer__qr { display: inline-block; margin: 0.6rem 0 0 0.5rem; }
.c-proponer__qr-estado { display: block; margin-top: 0.5rem; }
.c-proponer__qr-caja { position: relative; margin-top: 0.6rem; max-width: 420px; }
.c-proponer__qr-caja video { display: block; width: 100%; max-height: 60vh; border-radius: 4px; background: var(--tinta); }
.c-proponer__qr-cancelar { margin-top: 0.4rem; }
.c-proponer__leer-estado { display: block; margin-top: 0.5rem; }

/* EL RESUMEN DE LA LECTURA. Cada línea en su renglón, y **ni un color de
 * validación**: el recuento va en tinta normal y las otras dos en el gris de
 * metadato, que es la jerarquía de lo que importa. La lista de lo que la página
 * no publica **no es una advertencia** — es un dato sobre la tienda—, así que no
 * lleva el rojo del error ni el ámbar del aviso. */
.c-proponer__resumen-cuenta,
.c-proponer__resumen-sin,
.c-proponer__resumen-confirmar { display: block; }
.c-proponer__resumen-cuenta { color: var(--tinta); font-weight: 600; }
.c-proponer__resumen-sin,
.c-proponer__resumen-confirmar { margin-top: 0.3rem; }
.c-proponer__resumen-confirmar { font-style: italic; }
/* La línea que avisa de la sustitución de la dirección: **es lo único del
 * resumen que habla de algo que hemos cambiado nosotros**, así que va la última
 * y en el mismo gris — no es una advertencia, es una cuenta de lo hecho. */
.c-proponer__resumen-redirige { display: block; margin-top: 0.3rem; }

/* LA NOTA DE UN VALOR LEÍDO: GRIS DE METADATO Y UN FILETE A LA IZQUIERDA, SIN
 * UN SOLO COLOR DE VALIDACIÓN. **Ni verde, ni marca de comprobado, ni icono**:
 * lo que hay debajo de la casilla está PROPUESTO y no verificado, y el verde de
 * un formulario significa «esto está bien» en todas las pantallas del mundo. El
 * filete separa la nota del campo sin afirmar nada sobre ella. */
.c-proponer__leido {
	display: block;
	margin-top: 0.35rem;
	padding-left: 0.6rem;
	border-left: 2px solid var(--linea);
	font-size: 14px;
	color: var(--tinta-suave);
}

.c-proponer__leido strong { font-weight: 600; }

/* La marca de «confírmalo»: cursiva y el mismo gris. **Distinta del resto de la
 * nota y no más llamativa que ella** — pide una mirada, no una alarma. */
.c-proponer__leido-confirmar { font-style: italic; }

/* El aviso de que la página no menciona el café. **Es un aviso y no un error**:
 * no bloquea el envío y por eso no lleva el rojo de `.c-aviso__error`, que en
 * esta misma pantalla significa «esto no se ha guardado». */
.c-proponer__no-menciona { color: var(--tinta); font-weight: 600; }

/* La casilla de responsabilidad se retiró el 25/8/2026 (Luis): sus dos reglas
 * se van con ella. Un estilo huérfano es el que hace creer que el elemento sigue
 * existiendo en alguna rama que no se ha mirado. */

/* --- El cuaderno --------------------------------------------------------
 * Reutiliza los componentes del formulario de aviso, igual que el alta: es el
 * mismo tipo de pantalla y duplicar estilos sería duplicar la decisión.
 */
.c-cuaderno, .c-cuaderno__form { margin-top: 2.5rem; }
/* EL NOMBRE DEL CAFÉ ES EL SUJETO DE LA PANTALLA, no una línea de contexto: a
 * 18px normal competía con las etiquetas de los campos. 20px y 600 lo ponen un
 * escalón por debajo del título de sección y por encima de todo lo demás. */
.c-cuaderno__cafe { margin: 0.5rem 0 1rem; font-size: 20px; font-weight: 600; }

/* LA PROMESA DE PRIVACIDAD, con la forma de `.c-cuaderno__confirmar`: filete de
 * 3 px y fondo de realce. No inventa una forma para un aviso nuevo — en esta
 * pantalla esa ya significa «léeme», porque es la de la confirmación de borrado.
 * 16px y no 14: es la condición bajo la que alguien decide escribir, y en gris
 * de pista se leía como descargo de responsabilidad. */
.c-cuaderno__privado {
	margin: 0 0 1.75rem;
	padding: 0.75rem 1rem;
	background: var(--realce);
	border-left: 3px solid var(--marron);
	font-size: 16px;
}

/* Los seis atributos en rejilla que se pliega sola. En pantalla estrecha cae a
 * una columna sin media query: `auto-fit` con mínimo en `minmax` ya lo hace, y
 * una media query aquí sería una segunda regla que mantener.
 *
 * HOY NO LAS USA NADIE: los atributos salieron del formulario el 14/8/2026 y
 * vuelven con el radar. Se conservan por el mismo criterio que sus columnas
 * —ver `cuaderno-schema.php`—, y se anota aquí para que no parezcan un resto
 * de algo que se quitó a medias. */
.c-cuaderno__atributos { border: 0; padding: 0; margin: 0 0 1.5rem; }
.c-cuaderno__atributos legend { padding: 0; margin-bottom: 0.5rem; }
.c-cuaderno__atributo { display: block; }
.c-cuaderno__atributos > .c-cuaderno__atributo { margin-bottom: 0.75rem; }

@media (min-width: 34em) {
	.c-cuaderno__atributos {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 0.75rem 1rem;
	}
	.c-cuaderno__atributos legend { grid-column: 1 / -1; }
	.c-cuaderno__atributos > .c-cuaderno__atributo { margin-bottom: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * LA REJILLA DE ARRIBA ES PARA EL `<fieldset>` DEL CUADERNO, NO PARA UN
 * `<details>` (27/8/2026)
 * ─────────────────────────────────────────────────────────────────────────
 * **VISTO EN UNA CAPTURA Y EN NINGÚN OTRO SITIO**: la cata de cadena reutiliza
 * la clase sobre un `<details>`, y ahí el grid reparte en columnas al
 * `<summary>`, a la línea de ayuda y a la rejilla interior — con el resultado
 * de que el desplegable queda solo en una columna vacía de arriba abajo. En el
 * DOM no se ve nada raro y en el HTML servido tampoco: **la regla se aplica a
 * un elemento que no existía cuando se escribió**.
 *
 * SE ACOTA POR ETIQUETA Y NO SE TOCA LA DE ARRIBA: el cuaderno la usa sobre su
 * `<fieldset>` con `legend`, que es para lo que está y sigue igual. Dentro, la
 * rejilla propia —`.c-cuaderno__atributos-rejilla`— ya coloca las casillas.
 */
details.c-cuaderno__atributos { display: block; }

/* Y SU `[hidden]` DETRÁS, EN LA MISMA TANDA Y POR HABERLO ROTO AQUÍ MISMO: la
 * línea de arriba declara `display` sobre el `<details>`, así que **gana al
 * `display: none` del navegador exactamente igual que `.c-alta__pista`** — y
 * sin metodología elegida el bloque plegado «Puntuar por ejes» volvía a
 * asomar. Lo enseñó la captura sin JavaScript, dos minutos después de escribir
 * la regla que lo causó: **declarar `display` sobre un elemento que alguna vez
 * lleva `hidden` obliga siempre a escribir las dos líneas.** */
details.c-cuaderno__atributos[hidden] { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
 * LA CAJA DEL RADAR DE LA CATA DE CADENA: SITIO PARA LAS ETIQUETAS LARGAS
 * (27/8/2026)
 * ─────────────────────────────────────────────────────────────────────────
 * **VISTO AL RASTERIZARLO CON ONCE EJES**: «Taza limpia 10» se anclaba en el
 * vértice izquierdo y se extendía hacia fuera del `viewBox`, donde el SVG
 * recorta por defecto — la etiqueta salía sin su «T». Con diez ejes no pasa,
 * porque ninguno cae tan a la izquierda con un rótulo tan largo.
 *
 * SE ARREGLA EN LA CAJA Y NO EN LA PRIMITIVA, y es deliberado:
 * `catastro_theme_radar()` la comparten la Cata pública, el cuaderno y ésta,
 * así que mover ahí el `viewBox` o el anclaje cambiaría tres dibujos para
 * arreglar uno. Aquí el `overflow` deja que el texto se pinte fuera del
 * lienzo, y el hueco lateral es el sitio donde cabe.
 *
 * ESTA CLASE SOLO LA USA ESTA PANTALLA —un `grep` sobre las plantillas, una
 * aparición—, así que la regla no alcanza a ningún otro radar.
 */
.c-cuaderno__perfil-dibujo { padding-inline: 12%; }
.c-cuaderno__perfil-dibujo .c-radar { overflow: visible; }

/* ─────────────────────────────────────────────────────────────────────────
 * `hidden` NO OCULTA NADA QUE TENGA `display` DECLARADO (27/8/2026)
 * ─────────────────────────────────────────────────────────────────────────
 * `.c-alta__pista` declara `display: block`, que **gana al `display: none` de
 * la hoja del navegador**: el atributo estaba puesto, el DOM decía
 * `hidden=true` y la línea se veía igual en pantalla. Es la clase de fallo que
 * no deja rastro en ningún log y que solo enseña una captura.
 *
 * MISMO PATRÓN QUE `.c-typeahead__lista[hidden]`, que ya vivía unas líneas más
 * abajo por esta misma razón. **Acotado por clase y no un `[hidden]` global
 * con `!important`**: el proyecto no tiene ninguno y esto no es motivo para
 * estrenarlo.
 */
.c-alta__pista[hidden] { display: none; }

/* El puntaje no necesita el ancho de una nota. En móvil vuelve a ancho
 * completo como todo lo demás: un campo estrecho en una pantalla estrecha es
 * más difícil de tocar, no más ordenado. */
.c-aviso__input--corto { max-width: 8rem; }
@media (max-width: 34em) { .c-aviso__input--corto { max-width: none; } }

/* --- La tarjeta de un apunte: dos columnas ---------------------------------
 * LA FOTO A LA IZQUIERDA Y LO ESCRITO A LA DERECHA (17/8/2026). En una sola
 * columna la foto empujaba hacia abajo la fecha, la nota y el radar, y un apunte
 * entero no cabía en la pantalla de un portátil.
 *
 * LA COLUMNA DE LA FOTO SE RESERVA AUNQUE ESTÉ VACÍA —`320px` fijo y no
 * `auto`—, y es deliberado: con `auto` las tarjetas sin foto empezarían su texto
 * pegado al margen y las que la tienen 344 px más adentro, así que la lista
 * bailaría de una a otra. El hueco cuesta menos que ese salto.
 *
 * 52em Y NO 48: el punto de ruptura de la cabecera es 48em, pero aquí lo que
 * decide es si caben 320 px de foto MÁS una columna de texto legible, que es
 * cuenta propia y no la del menú. */
.c-cuaderno__grupo { margin-bottom: 2rem; }

@media (min-width: 52em) {
	.c-cuaderno__grupo {
		display: grid;
		grid-template-columns: 320px 1fr;
		grid-template-areas:
			"foto titulo"
			"foto cuerpo";
		gap: 0 1.5rem;
		align-items: start;
	}

	/* La foto ocupa las dos filas y el título encabeza la columna de texto. Con
	 * áreas y no con `order`: el `h3` es hermano de la foto para que en móvil el
	 * nombre vaya primero, y las áreas son lo que devuelve cada pieza a su sitio
	 * en escritorio sin volver a tocar el orden del documento. */
	.c-cuaderno__titulo { grid-area: titulo; }
	.c-cuaderno__media  { grid-area: foto; }

	/* LA COLUMNA DE TEXTO ES FLUJO NORMAL Y NO SE ESTIRA. `align-items: start` en
	 * el grid y `block` aquí: sin lo primero, la columna corta se estiraría a la
	 * altura de la otra y su contenido se repartiría por el hueco; sin lo segundo,
	 * bastaría con que alguien la convirtiera en grid o flex para que volviera a
	 * pasar. Lo que se ve cuando pasa es un vacío entre la nota y el radar. */
	.c-cuaderno__cuerpo { grid-area: cuerpo; display: block; }

	/* SIN NINGUNA FOTO EN LA LISTA, NO HAY COLUMNA (18/8/2026). La reserva de
	 * arriba existe para que la lista no baile entre tarjetas con foto y sin ella;
	 * cuando NINGUNA la tiene, no hay nada entre lo que saltar y el hueco de 320 px
	 * es un tercio de pantalla vacío al lado de todas. **La decisión la toma la
	 * lista entera y nunca la fila**: por fila volveríamos exactamente al salto que
	 * la regla del 17/8 vino a impedir. */
	.c-cuaderno--sin-fotos .c-cuaderno__grupo { display: block; }
}

.c-cuaderno__titulo { font-size: 19px; margin-bottom: 0.5rem; }

.c-cuaderno__apunte {
	border-left: 3px solid var(--linea);
	padding: 0.25rem 0 0.25rem 1rem;
	margin-bottom: 1.25rem;
}

.c-cuaderno__cabeza { margin: 0; font-size: 15px; color: var(--tinta-suave); }
.c-cuaderno__fecha { color: var(--tinta); }

/* LA VALORACIÓN ES LO QUE SE BUSCA AL REPASAR, así que sale del gris de metadato
 * en el que estaba junto a la fecha y el método. 17px sobre los 15 de la línea:
 * lo justo para que gane sin convertirse en un titular —el titular es el nombre
 * del café, y una nota personal no puede competir con él—. */
.c-cuaderno__valoracion { font-size: 17px; color: var(--tinta); }

.c-cuaderno__dato { margin: 0.35rem 0 0; font-size: 16px; }
.c-cuaderno__nota { margin: 0.6rem 0 0; }

/* El radar, atado a la izquierda de su columna y no centrado en el vacío. 320 px
 * es el ancho de la foto: las dos piezas gráficas del apunte miden lo mismo.
 *
 * EL `width: 100%` DEL `<svg>` ES LO QUE HACÍA FALTA (17/8/2026). Un SVG inline
 * sin `width` toma su tamaño INTRÍNSECO —300 px de la especificación, no el del
 * contenedor—, así que el dibujo salía más pequeño que su hueco y parecía flotar
 * en él. El tope lo pone el contenedor y el dibujo lo llena. */
.c-cuaderno__radar { width: 100%; max-width: 320px; margin: 1rem 0 0; overflow: hidden; }
.c-cuaderno__radar .c-radar { width: 100%; height: auto; display: block; }

/* EL VACÍO NO ERA DEL CONTENEDOR, ERA DE DENTRO DEL SVG, y esto es lo que lo
 * quita. El lienzo mide 330×330 y el dibujo con sus etiquetas ocupa de y=64 a
 * y=268: **el 38 % del alto es margen vacío**, repartido arriba y abajo, y eso es
 * lo que se veía como un hueco entre la nota, el radar y las acciones.
 *
 * SE RECORTA POR CSS Y NO TOCANDO EL `viewBox`, y la razón no es pereza: el SVG
 * del cuaderno está protegido por el md5 de referencia `2690d8a7…`, que es lo que
 * garantiza que esa pieza no ha cambiado desde el 17/8. Recortar el lienzo lo
 * cambiaría; recortar la VISTA no toca un byte del SVG.
 *
 * LOS PORCENTAJES DE `margin` SE CALCULAN SOBRE EL ANCHO, así que -15 % de 320 son
 * 48 px arriba y abajo. Medido contra el contenido real: a esa escala el dibujo va
 * de 62 a 259 px, y la ventana visible queda en 14…272. Sobran 14 px arriba y 13
 * abajo — hay holgura, no está al límite. Solo vertical: lateralmente «Retrogusto
 * 10» llega casi al borde del lienzo y ahí no hay nada que recortar. */
.c-cuaderno__radar .c-radar { margin-block: -15%; }

/* `margin-top` y NUNCA `margin-top: auto`: las acciones siguen al último
 * contenido de la columna, no se pegan al fondo. Con la foto más alta que el
 * texto —el caso corriente—, empujarlas abajo dejaría un vacío en medio de la
 * tarjeta que no separa nada. */
.c-cuaderno__acciones { margin: 1rem 0 0; font-size: 15px; display: flex; gap: 1rem; }

/* Las acciones, a la derecha de su columna en escritorio: es el borde por el que
 * termina de leerse la tarjeta. En estrecho se quedan a la izquierda, donde cae
 * el pulgar y donde empieza el texto. */
@media (min-width: 52em) {
	.c-cuaderno__acciones { justify-content: flex-end; }
}

/* «BORRAR» NO PUEDE TENER LA MISMA PINTA QUE «EDITAR». Al final de ese camino
 * hay un borrado sin papelera y, si es el último apunte del café, también su
 * foto. El tema no tenía color de aviso —lo comprobé antes de inventarlo—, así
 * que éste es el único de todo el fichero que no sale de la paleta: un rojo
 * apagado hacia el marrón, para que avise sin gritar en una página de notas
 * personales. Si algún día la paleta declara uno, esta línea se sustituye. */
.c-accion--peligro { color: #8a2b1a; }

/* --- La foto del apunte ---------------------------------------------------
 * EL RECORTE CUADRADO LO HACÍA `object-fit` Y NO EL FICHERO, y por eso se ha
 * podido RETIRAR con una línea el 17/8/2026: el WebP guardado conserva el
 * encuadre entero que subió su dueño —eso ya era así y no cambia—, y lo que se
 * recortaba era solo la vista. Un recorte grabado en el fichero no habría tenido
 * marcha atrás, porque el original no se guarda.
 *
 * SE RETIRA PORQUE UNA FOTO DE TAZA O DE SITIO SE DESTRUYE AL CUADRARLA: la
 * etiqueta de una bolsa aguanta el cuadrado, pero el modelo no obliga a
 * fotografiar etiquetas, y en un apunte vertical el cuadrado se come la mitad
 * de arriba o la de abajo sin avisar de qué falta.
 *
 * LA COLECCIÓN ES LA ÚNICA EXCEPCIÓN y sigue cuadrando, más abajo: allí la foto
 * es la entrada de un directorio compacto, donde lo que importa es reconocer la
 * fila de un golpe y que todas midan lo mismo.
 */
.c-cuaderno__foto { margin: 0.75rem 0 0; }

/* En la tarjeta la foto encabeza su columna, así que no lleva aire arriba: el
 * hueco lo pone ya el `gap` del grid. */
.c-cuaderno__media .c-cuaderno__foto { margin-top: 0; }

/* En la colección la foto va ARRIBA de su fila y con menos aire: la fila es
 * compacta —nombre, fecha y recuento— y la imagen la encabeza sin separarla de
 * lo que describe. */
.c-coleccion__item .c-cuaderno__foto { margin: 0 0 0.5rem; }

/* 320 px Y NO 160: a 160 la foto se leía como un icono al lado del texto, y lo
 * que hay dentro es la foto de un café que alguien quiso guardar. El FICHERO no
 * cambia —sigue siendo el de 400 px—; cambia a qué tamaño se pinta, que es una
 * decisión reversible con esta línea.
 *
 * ENCUADRE ENTERO CON ALTO ACOTADO (17/8/2026, segundo ajuste). Quitar el
 * recorte dejó la altura libre, y una foto vertical de móvil —tres a cuatro— se
 * estiraba a 427 px y empujaba el texto de la columna de al lado muy por debajo
 * de su propio título. `max-height` con `object-fit: contain` conserva la foto
 * COMPLETA y le pone techo: lo que sobra es fondo, no imagen cortada. El
 * `background` es lo que hace que ese sobrante se lea como marco y no como un
 * error de carga. */
.c-cuaderno__mini {
	width: 320px;
	max-width: 100%;
	max-height: 320px;
	height: auto;
	object-fit: contain;
	border-radius: 2px;
	display: block;
	background: var(--realce);
}

/* EN PANTALLA ESTRECHA MANDA EL ANCHO DISPONIBLE: 320 px en un móvil de 360
 * ocupan de borde a borde. Ya no hace falta `aspect-ratio`, que estaba ahí para
 * conservar el cuadrado que se ha retirado. */
@media (max-width: 26em) {
	.c-cuaderno__mini { width: 100%; }
}

/* LA EXCEPCIÓN: en la colección la miniatura sí es un cuadrado, y pequeño. Esa
 * pantalla es un directorio para buscar —una fila por café, con su nombre, su
 * fecha y su recuento—, y ahí una imagen de 320 px de alto variable rompería la
 * rejilla y obligaría a desplazarse para ver diez cafés. 96 px cuadrados es una
 * marca de reconocimiento, no una fotografía para mirar. */
.c-coleccion__item .c-cuaderno__mini {
	width: 96px;
	height: 96px;
	object-fit: cover;
}

/* La miniatura ES un enlace a la foto completa (ver `inc/cuaderno.php`). El
 * `block` evita el hueco que el navegador deja bajo una imagen en línea, y el
 * foco tiene que verse: se llega aquí con el teclado. */
.c-cuaderno__foto-enlace { display: block; width: max-content; max-width: 100%; }
.c-cuaderno__foto-enlace:focus-visible { outline: 2px solid var(--marron); outline-offset: 3px; }

/* La foto que ya tiene el apunte, dentro del formulario: la miniatura, la
 * casilla de quitarla y su pista, en columna. Mismo tamaño que en la tarjeta:
 * dos medidas distintas para la misma cosa solo se explican por descuido. */
.c-cuaderno__foto-actual { margin: 0 0 1.25rem; display: grid; gap: 0.5rem; justify-items: start; }
.c-aviso__casilla { display: flex; align-items: center; gap: 0.5rem; font-size: 15px; }

/* «Este café ya tiene foto»: afirmación, no etiqueta de campo. Va en el gris
 * secundario, que es el color de lo que informa sin pedir nada. */
.c-cuaderno__foto-estado { margin: 0; font-size: 15px; color: var(--tinta-suave); }

/* El desplegable de «Cambiarla». El `summary` es TERCIARIO —enlace de texto—
 * porque cambiar una foto que ya está es la acción menos frecuente de esta
 * pantalla; hacerla un botón la pondría al nivel de guardar el apunte.
 *
 * `list-style: none` más la regla de WebKit quitan el triangulito: el enlace ya
 * dice que se abre, y el marcador nativo lo pinta cada navegador a su manera. */
.c-cuaderno__cambiar { margin: 0; }
.c-cuaderno__cambiar-abrir {
	/* SIN DECLARAR `display`: se queda el `list-item` nativo del `<summary>`,
	 * con el que la caja del `<details>` cerrado mide exactamente lo que mide
	 * el summary. Con `inline` o `inline-block` sobran unos píxeles arriba
	 * —medido: details 28,0 contra summary 18,0— y no aportan nada aquí.
	 *
	 * QUE CONSTE, PORQUE ESTUVO ESCRITO AL REVÉS DURANTE UN RATO: cambiar el
	 * `display` del summary **NO rompe el plegado**. Se midió con los cuatro
	 * valores y el cuerpo sigue oculto en los cuatro. El marcador se quita con
	 * `list-style` y la regla de WebKit, que tampoco tocan el comportamiento. */
	list-style: none;
	color: var(--marron);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	font-size: 15px;
	cursor: pointer;
}
.c-cuaderno__cambiar-abrir::-webkit-details-marker { display: none; }
.c-cuaderno__cambiar-abrir:hover { text-decoration-thickness: 2px; }
.c-cuaderno__cambiar-abrir:focus-visible { outline: 2px solid var(--marron); outline-offset: 2px; }
.c-cuaderno__cambiar[open] .c-cuaderno__cambiar-abrir { margin-bottom: 0.75rem; }

.c-cuaderno__confirmar {
	margin-top: 2rem;
	padding: 1rem 1.2rem;
	border-left: 3px solid var(--marron);
	background: var(--realce);
}
.c-cuaderno__confirmar form { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }

/* El historial sobre la ficha del Café: mismo bloque, menos aire arriba, porque
 * ahí no abre la pantalla sino que la continúa. */
.c-cuaderno--ficha { margin: 2.5rem 0; }

/* --- Tu historial con este café, en la ficha (18/8/2026) -----------------
 *
 * LA FORMA ES LA DE «LÉEME» DEL SITIO —filete de 3 px y fondo de realce—, la
 * misma de la caja de privacidad del formulario y de la confirmación de
 * borrado. **Un bloque privado dentro de una página pública tiene que
 * distinguirse de un vistazo**, o alguien acabará creyendo que lo que escribió
 * está publicado. Y se reutiliza en vez de inventar una forma nueva, porque en
 * estas pantallas esa forma ya significa lo que hace falta que signifique.
 *
 * VA EL ÚLTIMO DE LA FICHA desde hoy, detrás de todo lo que el registro afirma:
 * la ficha es el registro, y lo de uno va después de lo de todos. Bajarlo no lo
 * esconde —está marcado y tiene su ancla—, pero deja de empujar hacia abajo el
 * dato público a quien llega desde una búsqueda. */
.c-historial--privado {
	margin: 2.5rem 0;
	padding: 1rem 1.25rem;
	background: var(--realce);
	border-left: 3px solid var(--marron);
	border-radius: 0 8px 8px 0;
}

/* La promesa, dicha UNA vez y en gris de metadato: no compite con el título y
 * se lee antes que las filas. */
.c-historial__aviso { margin: 0.15rem 0 1rem; font-size: 14px; color: var(--tinta-suave); }

.c-historial__lista { list-style: none; margin: 0; padding: 0; }

/* UNA LÍNEA POR APUNTE, y la línea es literal: `nowrap` con `ellipsis` sobre el
 * bloque de datos y «Editar» fuera de él, con `flex-shrink: 0`, para que lo que
 * se corte sea SIEMPRE el final de la línea —la nota, que va la última a
 * propósito— y nunca la acción.
 *
 * EL RECORTE LO HACE EL NAVEGADOR Y NO PHP: así el dato viaja entero al HTML,
 * se corta donde deja de caber y quien amplíe la ventana lee más sin recargar.
 * Un recorte por número de caracteres corta de más en pantalla ancha y se sale
 * igual en la estrecha. */
.c-historial__fila {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--linea);
}

.c-historial__fila:last-child { border-bottom: 0; }

.c-historial__linea {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 15px;
	color: var(--tinta-suave);
}

/* La valoración en tinta plena dentro de una línea gris: de los cuatro datos de
 * la fila, tres dicen cuándo y cómo y solo uno dice qué te pareció. */
.c-historial__linea strong { color: var(--tinta); }

.c-historial__editar { flex: 0 0 auto; font-size: 14px; }

/* «Ver en tu cuenta»: lo que paga el recorte de arriba. Aquí no están la foto,
 * el radar ni la receta entera, y este enlace dice dónde sí. */
.c-historial__ver { margin: 1rem 0 0; font-size: 14px; }

/* En una fila estrecha la casilla de comparar no debe encogerse ni partirse. */
.c-historial__fila .c-comparar__marca { flex: 0 0 auto; margin: 0; }

/* --- «Nuevo apunte» en la cuenta y en la colección (18/8/2026) -----------
 * Terciario y pegado al nombre del café, uno por café: es la puerta al gesto
 * más frecuente de estas dos pantallas —repetir un café que ya está apuntado—,
 * que hasta hoy obligaba a pasar por la ficha o a volver a teclear el nombre. */
/* LAS TRES ACCIONES DEL TÍTULO SE VISTEN IGUAL, y hasta el 20/8 no era así:
 * solo «Nuevo apunte» bajaba a 14px, mientras «Ficha en PDF» heredaba del `<h3>`
 * sus 19px en negrita. Con dos tamaños distintos y sin nada en medio, los dos
 * rótulos se leían como una frase —lo vio Luis en la pantalla, no en el código—.
 * El punto medio los separa y esta regla los iguala: hacía falta lo uno Y lo
 * otro, porque un separador entre dos tipografías distintas sigue pareciendo el
 * final de un título y el principio de otra cosa. */
.c-cuaderno__nuevo,
.c-cuaderno__pdf,
.c-cuaderno__marca,
.c-cuaderno__titulo .c-sep { font-size: 14px; font-weight: 400; }

/* Y NINGÚN RÓTULO SE PARTE POR DENTRO. Visto en el render del arreglo de
 * arriba, no razonado: con el título largo, «Ficha en PDF» quedaba cortado en
 * «Ficha en» / «PDF» al pasar de línea, que hace dudar de si son una acción o
 * dos. Envuelve la fila entera, no el rótulo. */
.c-cuaderno__nuevo,
.c-cuaderno__pdf,
.c-cuaderno__marca,
.c-cuaderno__accion { white-space: nowrap; }

/* EL PUNTO VIAJA CON LA ACCIÓN QUE INTRODUCE, no con la anterior. Visto también
 * en el render: al pasar de línea, el separador se quedaba solo al final de la
 * de arriba, colgando detrás de un rótulo al que no pertenece. Por eso cada
 * acción secundaria va envuelta con su punto en un mismo `nowrap`. */
.c-cuaderno__nuevo { margin-left: 0.75rem; }
.c-coleccion__nuevo { font-size: 15px; }

/* --- «Mi plantilla» (20/8/2026) ------------------------------------------
 * El logo se enseña sobre el crema del papel del documento y no sobre el fondo
 * de la pantalla: lo que hay que poder juzgar aquí es cómo va a salir impreso,
 * y un logo con fondo claro sobre un fondo blanco parecería otro. */
.c-plantilla__logo {
	margin: 0 0 1rem;
	padding: 0.75rem;
	background: #FBFAF8;
	display: inline-block;
}
.c-plantilla__logo img { display: block; height: 56px; width: auto; }

/* El botón de exportar es un formulario, así que hay que impedir que el <form>
 * rompa la fila de acciones de la cuenta. */
.c-cuenta__exportar { display: contents; }

/* --- La lista de deseos -------------------------------------------------
 * TARJETAS, el patrón de «De dónde viene»: borde, fondo de realce y radio. Se
 * reutiliza en vez de inventar una caja nueva porque es la misma cosa —un
 * enlace a una ficha con dos líneas de contexto—.
 *
 * El `<form>` de «Quitar» va a `display: contents` para que no rompa la caja:
 * es un elemento de bloque en medio de una tarjeta, y sin esto empujaría el
 * botón a un bloque propio con su propio margen.
 */
.c-deseos { margin-top: 2.5rem; }
.c-deseos__lista {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.c-deseos__item { display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start; }
.c-deseos__titulo { font-size: 18px; }
.c-deseos__meta { font-size: 15px; color: var(--tinta-suave); }
.c-deseos__item .c-deseo { display: contents; }
.c-deseos__item .c-accion--terciaria { margin-top: 0.35rem; font-size: 15px; }

/* TARJETA QUE NO ES UN ENLACE ENTERO, a diferencia de `.c-tarjeta` de la ficha:
 * dentro hay un botón, y un botón dentro de un `<a>` es marcado inválido. Así
 * que la caja no reacciona al pasar por encima —**no es pulsable, y lo que no se
 * pulsa no tiene hover**, la enmienda del 15/8— y lo pulsable de dentro sí. */
.c-tarjeta--estatica { cursor: default; }
.c-tarjeta--estatica:hover { border-color: var(--linea); background: var(--realce); }

/* --- Las dos filas de la cabecera de una ficha --------------------------
 * Arriba los botones —lo que se HACE con este café—, abajo los terciarios —lo
 * que se DICE de la ficha—. Separarlas es lo que hace legible la jerarquía: el
 * enlace de aviso iba al final de la fila de botones y quedaba a la altura de
 * uno sin serlo, que es media señal equivocada.
 */
.c-cabecera__acciones {
	display: flex;
	flex-wrap: wrap;          /* en móvil los tres botones bajan solos */
	align-items: center;
	gap: 0.6rem;
}
.c-cabecera__terciarios {
	margin: 0.75rem 0 1.75rem;
	font-size: 15px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem;
}
/* El aviso llevaba un margen para separarse de los botones cuando compartía
 * fila con ellos. Ya no la comparte. */
.c-cabecera__terciarios .c-accion-aviso { margin-left: 0; }

/* EL PAR «separador + enlace» ES UN SOLO ÍTEM FLEX (30/8/2026). Sin esto el
   `<span class="c-sep">` es un ítem por derecho propio en un contenedor
   `flex-wrap` y **se queda solo al final de la línea** cuando el enlace baja —
   medido tres veces en el ráster de móvil, con el HTML correcto las tres. */
.c-accion-par { display: inline-flex; align-items: baseline; }

.c-cabecera__acciones .c-deseo { display: inline-flex; align-items: center; }
.c-cabecera__terciarios .c-deseo { display: inline-flex; align-items: baseline; gap: 0.35rem; }

/* EL ESTADO NO ES PULSABLE Y NO LO PARECE: texto plano, color secundario, sin
 * caja, sin cursor y sin hover. Un estado con forma de botón promete una acción
 * que no existe. */
.c-deseo__estado { color: var(--tinta-suave); cursor: default; }

/* --- La colección -------------------------------------------------------
 * Una lista de cafés, no de apuntes. Sin tarjetas ni cajas: es un directorio
 * de lo que uno ha probado, y lo que se recorre con la vista se lee mejor en
 * filas que en rejilla.
 */
.c-cuaderno__mas { margin: 1.5rem 0 0; font-size: 15px; }

.c-coleccion__filtro {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0 1rem;
	margin: 2rem 0 1rem;
}
.c-coleccion__filtro .c-aviso__campo { margin-bottom: 1rem; flex: 1 1 14rem; }
.c-coleccion__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1rem; }

.c-coleccion__lista { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.c-coleccion__item { padding: 0.9rem 0; border-bottom: 1px solid var(--linea); }
.c-coleccion__item:first-child { border-top: 1px solid var(--linea); }
.c-coleccion__titulo { font-size: 18px; }
.c-coleccion__meta { margin: 0.2rem 0 0; font-size: 15px; color: var(--tinta-suave); }
.c-coleccion__volver { margin-top: 2.5rem; font-size: 15px; }

/* --- La colección como directorio (18/8/2026) ----------------------------
 *
 * LAS SEÑAS VAN ENTRE EL NOMBRE Y LA LÍNEA DEL ÚLTIMO APUNTE, y con más peso
 * que ésta: «Tostador · Origen» es lo que identifica el café dentro de la
 * lista, y la fecha con el método es lo que se hizo con él. **El orden vertical
 * es el orden de importancia**, y por eso las señas van en tinta plena y la
 * línea de abajo en gris, como el resto de metadatos del sitio.
 *
 * SIN COLOR EN LA VALORACIÓN. Un 8/10 en verde y un 4/10 en rojo convertirían
 * un cuaderno en un boletín de notas, y quien apunta un café flojo no necesita
 * que la pantalla se lo subraye. Misma regla que las decisiones de las catas y
 * los estados de las propuestas. */
.c-coleccion__senas { margin: 0.15rem 0 0; font-size: 15px; color: var(--tinta); }

/* La línea del mapa, bajo el título de la página: es la identidad de la
 * colección y no un resultado, así que se pinta sin filtro y con el cuerpo de
 * un metadato — un recuento en grande sería una puntuación de lo que alguien
 * lleva bebido. */
.c-coleccion__mapa { margin: 0.4rem 0 0; font-size: 15px; color: var(--tinta-suave); }

/* --- «Apunta un café que hayas probado» (18/8/2026) ----------------------
 *
 * MISMA FORMA QUE `.c-cuenta__reclamo` —fondo de marca suave, radio 8px, sin
 * borde— porque es la misma clase de pieza: un ofrecimiento y no una sección de
 * datos. **Dos formas distintas para lo mismo se leen como dos cosas
 * distintas**, y estas dos tarjetas comparten pantalla.
 *
 * VA LA PRIMERA Y POR ESO NO LLEVA EL MARGEN SUPERIOR DE AQUÉLLA: 2.5rem
 * separan de lo que hay encima, y encima solo está el párrafo de estado de la
 * cuenta. Un margen pensado para separar secciones de datos aquí abriría un
 * hueco donde no hay nada que separar. */
.c-cuenta__apuntar {
	margin: 1.5rem 0 0;
	padding: 1.5rem;
	background: var(--marron-suave);
	border-radius: 8px;
}

/* --- La vía de catar y la de anotar, dentro de su pestaña (23/8/2026) -----
 *
 * MISMA TARJETA QUE «Apunta un café» PERO SIN SU FONDO NI SU TÍTULO, y es
 * decisión: aquélla es **el reclamo de su pestaña** —lo que se va a hacer allí—
 * y ésta es **una herramienta encima de una lista que ya existe**. Con el fondo
 * marrón competiría con el título de la sección, que es lo que manda ahí.
 *
 * NI COLOR NI VARIABLE NUEVOS: solo el aire y el filete de siempre para
 * despegarla de la lista que viene debajo.
 */
.c-cuenta__catar {
	margin: 0 0 1.75rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--linea);
}

/* Su formulario no lleva el margen superior del de la tarjeta: allí separa del
 * párrafo de reclamo, y aquí no hay ninguno encima. */
.c-cuenta__catar .c-cuenta__apuntar-form { margin-top: 0; }

/* EL CAMPO Y EL BOTÓN EN UNA FILA QUE SE PARTE EN MÓVIL: `wrap` y un ancho
 * mínimo generoso para el campo, que es donde se escribe. Sin `min-width` el
 * flex lo encoge hasta dejarlo inservible en cuanto el botón crece al
 * traducirse. */
.c-cuenta__apuntar-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
}

/* La etiqueta existe para los lectores de pantalla y no se pinta: el
 * `placeholder` dice lo mismo a quien ve, y **un placeholder no es una
 * etiqueta** para quien no. Fuera de pantalla y no `display: none`, que la
 * quitaría también del árbol de accesibilidad. */
.c-cuenta__apuntar-etiqueta {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* EL RÓTULO VISIBLE DE LAS DOS PESTAÑAS GATADAS (26/8/2026).
 *
 * Solo en Compras y en Control de calidad, donde el buscador abre la pestaña sin
 * título ni párrafo encima que digan qué hace. El del cuaderno se queda oculto:
 * allí el reclamo ya lo cuenta, y repetirlo sería decirlo dos veces.
 *
 * `flex-basis: 100%` ES LO QUE LO PONE ENCIMA DEL CAMPO: el formulario es una
 * fila flexible con `wrap`, así que una etiqueta que no ocupe la fila entera se
 * sentaría a la izquierda del campo y lo empujaría. **Deshace las seis
 * declaraciones de la clase base, una a una** — un `position: static` suelto
 * dejaría el `clip-path` puesto y el rótulo seguiría sin verse. */
.c-cuenta__apuntar-etiqueta--visible {
	position: static;
	flex: 0 0 100%;
	width: auto;
	height: auto;
	margin-bottom: -0.25rem;
	overflow: visible;
	clip-path: none;
	white-space: normal;
	font-size: 0.9rem;
	color: var(--tinta-suave);
}

.c-cuenta__apuntar-campo {
	flex: 1 1 16rem;
	min-width: 0;
	padding: 0.6rem 0.75rem;
	font: inherit;
	color: var(--tinta);
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: 8px;
}

/* --- Type-ahead del selector de café (20/8/2026) -------------------------
 *
 * SIN UN COLOR NUEVO: papel de fondo, `--linea` para el borde y los separadores,
 * `--realce` para la opción activa y `--tinta-suave` para el nombre del
 * tostador, que es un metadato y va en el gris secundario como todos.
 *
 * LA CAJA LA CREA EL JAVASCRIPT, no la plantilla. Por eso `.c-typeahead` hereda
 * aquí el `flex` que el campo tenía como hijo del formulario: al envolverse, el
 * campo deja de ser elemento flexible y quien tiene que crecer es la caja. Sin
 * esto el campo se encogería a su ancho natural en cuanto apareciera el
 * envoltorio.
 *
 * NADA DEPENDE DE `hover`: la opción activa se marca con una clase que ponen
 * igual el teclado y el puntero. Un realce que solo existiera al pasar el ratón
 * dejaría a quien navega con flechas sin saber dónde está, y a quien usa el dedo
 * sin saberlo nunca. */
.c-typeahead {
	position: relative;
	flex: 1 1 16rem;
	min-width: 0;
}

.c-typeahead .c-cuenta__apuntar-campo {
	width: 100%;
	box-sizing: border-box;
}

/* Flotando sobre lo que haya debajo y pegada al campo: es la lista de ESE campo
 * y separarla lo convertiría en un panel suelto. `z-index` porque cae sobre la
 * lista de apuntes, que viene justo después en la página. */
.c-typeahead__lista {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 20;
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 21rem;
	overflow-y: auto;
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: 8px;
}

.c-typeahead__lista[hidden] { display: none; }

/* 44px DE ALTO MÍNIMO, que es el objetivo de toque por debajo del cual el dedo
 * empieza a fallar de opción. El requisito (iii) del type-ahead es móvil-primero
 * y ésta es la parte de él que se mide con una regla. */
.c-typeahead__op {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	min-height: 44px;
	padding: 0.55rem 0.75rem;
	box-sizing: border-box;
	font-size: 17px;
	line-height: 1.35;
	color: var(--tinta);
	cursor: pointer;
	border-top: 1px solid var(--linea);
}

.c-typeahead__op:first-child { border-top: 0; }

.c-typeahead__op--activa { background: var(--realce); }

.c-typeahead__meta { color: var(--tinta-suave); }

/* LA MARCA DEL FILTRO BLANDO —«de otro país», «sin país en su ficha»— se
 * distingue del contexto sin gritar: dice por qué ese candidato sigue en la
 * lista pese al país escrito, y es una advertencia, no un adorno. Cursiva y no
 * color propio: **el color solo no se ve en escala de grises ni con daltonismo**,
 * y esta distinción es justamente la que no puede perderse. */
.c-typeahead__marca { color: var(--tinta-suave); font-style: italic; }

/* --- «Apuntar» en un resultado de búsqueda (18/8/2026) -------------------
 * Terciario y a la derecha del nombre, en su propia línea cuando no cabe: en
 * una lista de resultados cada fila pesa lo mismo, y un botón sólido por fila
 * convertiría la lista en una rejilla de botones donde el nombre del café
 * dejaría de ser lo primero que se lee. */
.c-resultado__apuntar { margin-left: 0.75rem; font-size: 15px; }

/* La línea que guía cuando se llegó a la búsqueda desde «Apunta un café». */
.c-busqueda__guia { margin: 0 0 1rem; font-size: 16px; color: var(--tinta-suave); }

/* El recuento al pie de «Tus propuestas». Metadato, como el estado de cada
 * fila: dice cuántas hay, no cuántas debería haber. */
.c-propuestas__recuento { margin: 0.75rem 0 0; font-size: 15px; color: var(--tinta-suave); }

/* Lo de `wp-login.php` NO está aquí: vive en `assets/css/login.css`, que se
 * encola solo en esa pantalla. Son anulaciones de la hoja del núcleo, escritas
 * contra selectores que no son nuestros, y envejecen con WordPress y no con el
 * registro. De este fichero toman los tokens y las fuentes, y nada más. */

/* La puerta al final de la cabecera, separada de las cuatro secciones: no es
 * una sección más del registro sino la entrada al área de cliente. Los dos
 * enlaces de la puerta van en un grupo propio para que no se lean como dos
 * secciones nuevas; el grupo se separa de la fila, no cada enlace por su
 * cuenta, porque lo que está aparte es la puerta y no cada hoja de la puerta. */
.c-nav__puerta { display: inline-flex; gap: 1.1rem; }
.c-nav__entrar { font-size: 15px; }

/* --- Página de precios --------------------------------------------------
 * REJILLA FIJA DE CUATRO Y NO `auto-fit` (revisión de Luis, 16/8/2026). El
 * `auto-fit` con mínimo daba columnas de anchos distintos según cuántas
 * cupieran, y en una página de precios **el ancho desigual se lee como
 * jerarquía**: la columna más ancha parece la recomendada. Cuatro iguales,
 * dos por debajo de 900px y una en móvil, decididas a mano.
 *
 * `align-items: stretch` —el defecto de grid, escrito para que nadie lo quite—
 * más `flex-direction: column` en la tarjeta y `margin-top: auto` en su pie:
 * eso es lo que **alinea los cuatro botones a la misma altura** aunque una
 * columna tenga cinco viñetas y otra dos. Sin ello, cada botón queda donde
 * acaba su texto y las tarjetas parecen escalones.
 *
 * NINGUNA COLUMNA DESTACA. Sin borde de color, sin «el más popular», sin sombra
 * en la de en medio: **este sitio documenta y no empuja**, y una página de
 * precios que señala cuál elegir es la primera pieza que suena a otra cosa.
 *
 * EL PRECIO PESA MÁS QUE EL NOMBRE, y por tamaño y no por negrita: es el dato
 * que se viene a buscar. Una negrita más sobre un `600` que ya es semibold no
 * se distingue, y apilar recursos para el mismo énfasis es lo que convierte una
 * jerarquía en ruido.
 *
 * SIN UN SOLO COLOR NUEVO: `--marron-suave` es el fondo de la tarjeta de
 * proponer y de la caja de idioma, `--realce` el de los avisos. La paleta D1 no
 * crece por una pantalla.
 */
.c-precios__entrada { margin: 0.75rem 0 0; font-size: 18px; max-width: 46rem; }

/* ─────────────────────────────────────────────────────────────────────────
 * LA PROMESA, EN SU SITIO NUEVO (26/8/2026)
 * ─────────────────────────────────────────────────────────────────────────
 * Bajó de una caja destacada sobre las columnas **al pie de la columna que
 * protege**, y con ella baja su peso: **sin fondo, sin filete y en el cuerpo
 * pequeño de la tarjeta**. Una promesa en caja se lee como un reclamo; aquí, en
 * pequeño y justo debajo del botón, se lee como **la condición de la capa
 * gratis que es**.
 *
 * `margin-top: 0.75rem` Y NO `auto`: el `auto` es del bloque de acción, que es
 * quien empuja el botón al fondo de la tarjeta. Esto va **pegado debajo de él**
 * y no separado por el hueco que sobre.
 */
.c-precios__promesa {
	margin: 0.75rem 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--tinta-suave);
}

/* ─────────────────────────────────────────────────────────────────────────
 * TRES COLUMNAS DE VERDAD (26/8/2026)
 * ─────────────────────────────────────────────────────────────────────────
 * **Estaba en `repeat(4, 1fr)` con tres tarjetas dentro**, así que no solo
 * quedaban estrechas: **la cuarta pista se quedaba vacía** y el bloque entero
 * se apoyaba a la izquierda con un hueco a la derecha. Un `1fr` de más no da
 * error y no se ve leyendo el CSS — se ve mirando la página.
 *
 * LOS DOS CORTES SE QUEDAN COMO ESTABAN: a dos columnas por debajo de 56em y a
 * una por debajo de 34em. Con tres tarjetas el primero deja una sola abajo, y es
 * preferible a tres tiras estrechas en una tableta.
 */
/* LA REJILLA SE DIMENSIONA POR CUÁNTAS TARJETAS HAY (29/8/2026).
 *
 * Era `repeat(3, 1fr)` escrito a mano, con dos consultas de medios debajo para
 * bajar a dos y a una. **Al ocultarse «Equipo», dos tarjetas dejaban un tercio
 * de fila vacío y seguían tan estrechas como cuando eran tres** — el número de
 * columnas estaba escrito en el CSS y el de tarjetas lo decide una constante del
 * plugin, así que cambiar una no movía la otra.
 *
 * **ES EL MISMO ARREGLO QUE LA REJILLA DE FOTOS DE ESTA MISMA JORNADA, y por la
 * misma razón**: un número de columnas escrito a mano **es una segunda idea de
 * cuántos elementos hay**, y la que se queda vieja no da ningún error.
 *
 * **`auto-fit` HACE INNECESARIAS LAS DOS CONSULTAS DE MEDIOS**, que se retiran:
 * con `minmax(280px, 1fr)` la rejilla baja a dos y a una columna sola, por
 * ancho, y dejarlas habría sido una tercera fuente de verdad discutiendo con
 * ésta. **Tres tarjetas vuelven a tercios el día que la constante se reencienda**
 * — sin tocar nada. */
.c-precios__columnas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem;
	align-items: stretch;
}

.c-precios__col {
	display: flex;
	flex-direction: column;
	padding: 1.25rem;
	background: var(--marron-suave);
	border-radius: 8px;
}

.c-precios__nivel { font-size: 16px; font-weight: 600; margin: 0; color: var(--tinta-suave); }
.c-precios__importe { display: block; margin-top: 0.15rem; font-size: 26px; font-weight: 400; color: var(--tinta); line-height: 1.15; }
/* «más IVA»: dato del precio, no advertencia. Gris de metadato y peso normal —
   el `h2` que lo contiene es 600, y heredarlo lo pintaría como si gritara. */
.c-precios__iva { display: block; margin-top: 0.1rem; font-size: 13px; font-weight: 400; color: var(--tinta-suave); }
.c-precios__lema { margin: 0.6rem 0 0; font-size: 16px; }
.c-precios__texto { margin: 0.35rem 0 0; font-size: 15px; color: var(--tinta-suave); }
.c-precios__lista { margin: 0.75rem 0 0; padding-left: 1.1rem; font-size: 15px; }
.c-precios__lista li { margin-bottom: 0.35rem; }

/* EL PIE, SIEMPRE ABAJO: `auto` se come todo el hueco que sobre por encima. */
.c-precios__accion { margin: 1.25rem 0 0; padding-top: 0.25rem; margin-top: auto; }
.c-precios__pronto { font-size: 15px; color: var(--tinta-suave); font-style: italic; }
/* EL PRINCIPIO DE PRODUCTO: cierra la comparación, así que pesa MÁS que el pie
 * de cuota y MENOS que un titular. Mismo ancho de lectura que la entrada. */
.c-precios__principio { margin: 2.5rem 0 0; font-size: 17px; max-width: 46rem; }

/* `c-precios__pie` se retira con la línea de condiciones que subió bajo cada
   botón el 28/8/2026. La clase se queda por si vuelve un pie de página. */
.c-precios__pie { margin: 1rem 0 0; font-size: 15px; color: var(--tinta-suave); max-width: 46rem; }
/* Las condiciones: dato del trato, no reclamo. Gris de metadato y pequeñas,
   pegadas al botón — es lo que se lee justo antes de pulsar. */
.c-precios__condiciones { margin: 0.5rem 0 0; font-size: 13px; line-height: 1.45; color: var(--tinta-suave); }

/* La línea a precios del área de cuenta: terciaria y despegada de los botones,
 * porque no es una acción de la cuenta sino una salida hacia otra pantalla. */
.c-cuenta__precios { margin: 1rem 0 0; font-size: 15px; }

/* --- El radar del apunte -------------------------------------------------
 * `currentColor` en los anillos y las etiquetas: el SVG hereda el color del
 * texto que lo rodea, así que no hay un solo color escrito aquí que pueda
 * discrepar de la paleta. El polígono sí nombra `--marron`, que es el tono de
 * marca que ya usan los botones y el realce.
 *
 * `max-width: 100%` con `height: auto`: el `viewBox` hace el resto y el dibujo
 * encoge en móvil sin recortarse. Un SVG con medidas fijas y sin esto se sale
 * de la tarjeta en cuanto la pantalla baja de 320px.
 */
.c-cuaderno__radar { margin: 0.75rem 0 0; color: var(--tinta-suave); }

/* EL SVG NO LLEVA `width` NI `height` EN EL MARCADO, a propósito: los pone el
 * CSS, y así **el mismo dibujo mide 320 en el apunte y 160 en la colección sin
 * dos versiones del SVG**. Con atributos en el marcado habría que elegir uno de
 * los dos tamaños en PHP y sobrescribirlo aquí, que es la clase de valor que
 * acaba discrepando.
 *
 * `width: 100%` con tope: en una tarjeta estrecha encoge, y en una ancha no
 * crece más de la cuenta. El `viewBox` hace el resto — no hay recorte posible. */
.c-radar { display: block; width: 100%; height: auto; }
/* `.c-coleccion__radar` SE RETIRA EL 18/8/2026 con el radar de la colección.
 * Aquella pantalla es un directorio para buscar y no una rejilla de tarjetas
 * —adjudicado—, y a 160 px las etiquetas del dibujo eran ilegibles: agrandarlo
 * la habría acercado a la tarjeta que deliberadamente no es. El radar sigue en
 * el apunte, a 320. */
.c-cuaderno__radar .c-radar { max-width: 320px; }

/* EL RADAR DE LA CATA PÚBLICA — mismo dibujo, otro origen de dato.
 *
 * `c-radar--fuente` dibuja lo que una FUENTE publicó; `c-radar` a secas, en el
 * cuaderno, lo que una cuenta puntuó en privado. La distinción es de §9 y no
 * cosmética: son los dos números que nunca pueden mezclarse, y tener clase
 * propia permite comprobar en el HTML servido cuál se ha pintado.
 *
 * Más pequeño que el del apunte —260 frente a 320— porque aquí NO es el
 * protagonista: la tarjeta ya trae firma, producto, fecha y puntaje, y el radar
 * es la última línea de un bloque, no la pantalla entera. */
.c-cata__atributos { margin: 0.75rem 0 0; }
.c-cata__ejes { margin: 0 0 0.5rem; font-size: 15px; color: var(--tinta-suave); }
.c-cata__radar { margin: 0; max-width: 260px; }
.c-radar--fuente { max-width: 260px; }
.c-cata__escala-rotulo { margin: 0.25rem 0 0; font-size: 13px; color: var(--tinta-suave); }

/* El bloque plegado de los seis atributos. `summary` sin triangulito, como el
 * «Cambiarla» de la foto: el enlace ya se ve que se pulsa. */
/* --- La zona de atributos del formulario -----------------------------------
 * DEJA DE SER UN `<details>` SUELTO Y PASA A SER UNA SECCIÓN CON FONDO
 * (17/8/2026, tras la revisión visual). Con la explicación dentro del pliegue,
 * **quien no lo abría seguía sin saber que había un gráfico**: el texto estaba
 * escrito donde solo lo leía quien ya había decidido abrirlo. Ahora el título, la
 * explicación y una muestra del dibujo van FUERA, y los seis desplegables DENTRO.
 *
 * `--realce` y radio 8 px son los de `.c-cuenta__reclamo`: la zona no inventa una
 * forma nueva para decir «esto es un bloque y no un párrafo». */
.c-cuaderno__perfil {
	margin: 0 0 1.75rem;
	padding: 1.25rem;
	background: var(--realce);
	border-radius: 8px;
}

/* Texto a la izquierda y muestra a la derecha, en un ancho fijo: la muestra no
 * crece con el texto, porque es una referencia y no la ilustración de un
 * párrafo. */
.c-cuaderno__perfil-cabeza { display: grid; gap: 1.5rem; }

@media (min-width: 40em) {
	.c-cuaderno__perfil-cabeza { grid-template-columns: 1fr 200px; align-items: start; }
}

/* En estrecho la muestra baja y se centra: puesta a la izquierda dejaría un
 * hueco a su derecha que se lee como una columna vacía. */
@media (max-width: 40em) {
	.c-cuaderno__perfil-muestra { justify-self: center; max-width: 240px; }
}

.c-cuaderno__perfil-titulo { margin: 0; font-size: 17px; font-weight: 600; color: var(--tinta); }
.c-cuaderno__perfil-texto { margin: 0.35rem 0 0; font-size: 15px; color: var(--tinta-suave); }
.c-cuaderno__perfil-muestra { width: 100%; }
.c-cuaderno__perfil-muestra { overflow: hidden; }
.c-cuaderno__perfil-muestra .c-radar { width: 100%; height: auto; display: block; margin-block: -15%; }

/* El pliegue, debajo de la cabeza. El estilo de enlace que tenía el `summary`
 * se conserva: se llamaba `-abrir` cuando ERA el summary y ahora esa clase está
 * en el `<details>`, así que el selector baja un nivel. */
.c-cuaderno__perfil-abrir { margin-top: 1.25rem; }
.c-cuaderno__perfil-abrir > summary {
	list-style: none;
	cursor: pointer;
	font-size: 15px;
	color: var(--marron);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.c-cuaderno__perfil-abrir > summary::-webkit-details-marker { display: none; }
.c-cuaderno__perfil-abrir > summary:focus-visible { outline: 2px solid var(--marron); outline-offset: 2px; }
.c-cuaderno__perfil-abrir[open] > summary { margin-bottom: 1rem; }

/* DOS COLUMNAS DE TRES Y NO `auto-fit`: aquélla repartía los seis en una fila de
 * seis en cuanto había sitio, y seis desplegables en línea con su etiqueta encima
 * se leen como una tabla. Tres y tres es la forma de un cuestionario corto. */
.c-cuaderno__perfil-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }

@media (max-width: 34em) {
	.c-cuaderno__perfil-campos { grid-template-columns: 1fr; }
}

/* --- La muestra vacía del radar -------------------------------------------
 * ENSEÑA LA REJILLA Y ESCONDE LA FIGURA. Se dibuja con los seis ejes a 0, así
 * que el polígono sale degenerado en el centro; ocultarlo es lo que convierte el
 * dibujo en «la forma de lo que vas a obtener» sin afirmar ninguna puntuación.
 *
 * LOS SELECTORES VAN POR ATRIBUTO Y NO POR CLASE, y no es capricho: la primitiva
 * no pone clases dentro del SVG, y añadírselas cambiaría el fichero que el md5 de
 * referencia protege. El área es el único `polygon` con relleno —los cinco
 * anillos llevan `fill="none"`— y los vértices son los únicos `circle`. */
.c-radar--vacio { color: var(--tinta-suave); }
.c-radar--vacio polygon:not([fill="none"]) { opacity: 0; }
.c-radar--vacio circle { opacity: 0; }

/* Y EL NÚMERO DE CADA ETIQUETA TAMBIÉN SE VA, que era el defecto que se veía en
 * la primera captura: la muestra decía «Dulzor 0, Acidez 0…» y **afirmaba seis
 * ceros que nadie ha puntuado**, exactamente lo que esta pieza tenía que evitar.
 * El valor va en un `<tspan>` dentro de la etiqueta, así que se esconde sin tocar
 * el nombre del atributo — que es lo que la muestra sí debe decir. */
.c-radar--vacio text tspan { display: none; }

/* --- Comparar dos apuntes del mismo café (18/8/2026) ---------------------
 *
 * VIVE DENTRO DEL HISTORIAL, que ya es privado: no hay una superficie nueva que
 * proteger, solo una vista más de lo que su dueño ya está mirando.
 *
 * LA CAJA REPITE LA FORMA DE `.c-cuaderno__confirmar` —filete y fondo de
 * realce—, que en las pantallas de la cuenta ya significa «esto no es una fila
 * más de la lista». Un patrón nuevo sería una convención más que aprender.
 */
.c-comparar {
	margin: 0 0 2rem;
	padding: 1rem 1.25rem;
	background: var(--realce);
	border-left: 3px solid var(--marron);
	border-radius: 0 8px 8px 0;
}

/* LA TABLA SE DESPLAZA DENTRO DE SU CAJA Y NUNCA EMPUJA LA PÁGINA: es la regla
 * del sitio para contenido ancho. Con dos recetas largas, tres columnas no caben
 * en un móvil, y lo que no puede pasar es que la ficha entera se desplace en
 * horizontal por culpa de una tabla. */
.c-comparar__tabla { overflow-x: auto; }

.c-comparar table { width: 100%; border-collapse: collapse; }

/* La cabecera dice la fecha de cada columna: sin ella hay que leer la primera
 * fila para saber cuál es cuál cada vez que se baja la vista. */
.c-comparar thead th {
	text-align: left;
	font-size: 15px;
	padding: 0 0 0.5rem;
	border-bottom: 1px solid var(--linea);
}

/* La columna de etiquetas es metadato y la de datos es el dato: mismo criterio
 * que el resto de las fichas, donde el rótulo nunca compite con lo que rotula. */
.c-comparar tbody th {
	text-align: left;
	font-weight: 400;
	font-size: 15px;
	color: var(--tinta-suave);
	padding: 0.5rem 1rem 0.5rem 0;
	vertical-align: top;
	white-space: nowrap;
}

.c-comparar td {
	padding: 0.5rem 1rem 0.5rem 0;
	vertical-align: top;
	font-size: 16px;
}

.c-comparar tbody tr + tr th,
.c-comparar tbody tr + tr td { border-top: 1px solid var(--linea); }

/* LOS DOS RADARES, UNO AL LADO DEL OTRO EN ESCRITORIO Y UNO DEBAJO DEL OTRO EN
 * MÓVIL. `1fr 1fr` y no `auto`: las dos mitades tienen que medir lo mismo o el
 * que tenga más ejes saldría mayor, y **dos radares de distinto tamaño se leen
 * como dos escalas distintas**. */
.c-comparar__radares {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 1rem;
	/* CENTRADO VERTICAL, y no es estético: con `stretch` —el defecto— la columna
	 * del «sin perfil» estira su celda y el texto queda pegado ARRIBA, a la altura
	 * del borde superior del dibujo de al lado. Lo que se lee entonces es un
	 * rótulo suelto flotando sobre un vacío, en vez de la ausencia de un dibujo
	 * **donde el dibujo estaría**. Visto en la captura, no en el CSS. */
	align-items: center;
}

@media (max-width: 34em) {
	.c-comparar__radares { grid-template-columns: 1fr; }
}

.c-comparar__radar .c-radar { max-width: 260px; }

/* «sin perfil» EN EL HUECO DEL QUE NO LLEGA A TRES EJES. Aquí sí se dice, a
 * diferencia de la tarjeta suelta: al lado de un dibujo, un vacío se lee como
 * que ese apunte salió plano, y lo que pasa es que nadie lo puntuó. */
.c-comparar__sin-perfil {
	margin: 0;
	font-size: 15px;
	font-style: italic;
	color: var(--tinta-suave);
	/* Centrado en su mitad, como lo está el radar en la suya: descolgado a la
	 * izquierda parecería el pie de la columna de al lado. */
	text-align: center;
}

.c-comparar__pie { margin: 1rem 0 0; font-size: 14px; color: var(--tinta-suave); }

/* La línea que sale cuando no se marcaron dos. Ni error ni alarma: dice qué
 * hacer. */
.c-comparar__aviso { margin: 0 0 1.5rem; font-size: 15px; color: var(--tinta-suave); }

/* La casilla va sobre su tarjeta y en pequeño: es un control de servicio, no
 * parte del apunte. */
.c-comparar__marca {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.35rem;
	font-size: 14px;
	color: var(--tinta-suave);
	cursor: pointer;
}

.c-comparar__enviar { margin: 1.25rem 0 0; }

/* --- La tarjeta para compartir (18/8/2026) --------------------------------
 * El enlace va con «Editar» y «Borrar», así que hereda su tamaño; lo único
 * propio es que NO lleva el color de peligro —no destruye nada— y que en móvil
 * cabe en su línea, porque es el texto más largo de los tres. */
.c-accion--tarjeta { font-size: 15px; }

@media (max-width: 34em) {
	.c-cuaderno__acciones { flex-wrap: wrap; }
}

/* La línea que dice qué lleva la tarjeta: metadato bajo la lista, una sola vez
 * por pantalla. */
.c-cuaderno__tarjeta-nota {
	margin: 1.25rem 0 0;
	font-size: 14px;
	color: var(--tinta-suave);
}

/* --- LA PUERTA DEL SUJETO (21/8/2026) -------------------------------------
 * El bloque de la cabecera de Productores, Fincas y Tostadores: la invitación
 * puesta donde llega quien viene a buscarse.
 *
 * NO INVENTA UNA FORMA NUEVA. Es la de `.c-cuenta__reclamo` —fondo `marca-suave`
 * y radio 8px, la que en este sitio ya significa «esto es un ofrecimiento y no
 * un párrafo»—, con clase propia porque aquélla está nombrada para el área de
 * cuenta y esto es capa pública. Dos formas distintas para lo mismo se leen como
 * dos cosas distintas.
 *
 * SIN BORDE: el fondo ya la separa del papel, y un contorno competiría con el
 * botón que lleva dentro.
 */
.c-puerta {
	display: block;
	margin: 0 0 2.5rem;
	padding: 1.5rem;
	background: var(--marron-suave);
	border-radius: 8px;
}

/* El título NO es `.c-seccion__titulo`, que encabeza secciones de datos: esto
 * es un ofrecimiento, y con el mismo peso se leería como una sección más del
 * índice. Misma decisión que la tarjeta de proponer. */
.c-puerta__titulo {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--tinta);
}

.c-puerta__texto {
	margin: 0.4rem 0 0;
	font-size: 16px;
	color: var(--tinta-suave);
	max-width: 62ch;
}

/* DOS BOTONES CABEN AQUÍ DESDE EL 29/8/2026 —la puerta de Organización lleva
 * «Esta es nuestra ficha» y «No aparecemos»— y el hueco lo pone el `gap` y NO un
 * carácter ni un margen del enlace. Es la decisión que ya tomó la fila de
 * acciones de «Mis cafés» el 28/8, y por la misma razón: **el `gap` no se queda
 * colgando al final de una línea, porque no es un carácter**. Con `wrap`, en un
 * móvil estrecho los dos botones bajan a dos renglones enteros en vez de
 * recortarse.
 *
 * CON UNA SOLA ACCIÓN NO CAMBIA NADA, y era la condición: un contenedor flex con
 * un hijo lo coloca donde lo colocaba el flujo, y los tres índices que ya tenían
 * puerta salieron byte a byte iguales. */
.c-puerta__accion {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
}

/* El enlace de la portada, bajo «¿Produces café?». Terciario: el primario de esa
 * pantalla es la búsqueda. */
.c-publico__accion { margin: 0.75rem 0 0; font-size: 15px; }

/* --- El paso «Encuentra tu ficha» -----------------------------------------
 * Pantalla de la cuenta, así que hereda el ancho y las formas del área: el
 * formulario reutiliza `.c-aviso__*`, que es el mismo tipo de pantalla, y la
 * lista reutiliza `.c-resultados` de la búsqueda, que es exactamente lo que es.
 * Lo propio son cuatro reglas.
 */
.c-encontrar__intro { margin: 0 0 1.5rem; font-size: 17px; color: var(--tinta-suave); max-width: 62ch; }

.c-encontrar__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
	margin: 0 0 1.75rem;
}

/* La etiqueta ocupa su propia línea sobre el campo, como en el resto de
 * formularios del área; el campo crece y el botón se queda con lo suyo. */
.c-encontrar__form .c-aviso__etiqueta { flex-basis: 100%; margin: 0; }
.c-encontrar__form .c-aviso__input { flex: 1 1 16rem; }

.c-encontrar__lista { margin: 0 0 1.75rem; }

/* «Esta es mi ficha» va al final de la fila y en su propia línea en móvil: es
 * una acción sobre el resultado, y el nombre de la ficha sigue siendo lo
 * primero que se lee. */
.c-encontrar__mia { margin-top: 0.6rem; }
.c-encontrar__pedida { display: block; margin-top: 0.6rem; font-size: 15px; color: var(--tinta-suave); }

.c-encontrar__salida { margin: 0; }

/* El acuse del aterrizaje —«Tu cuenta está lista. Ahora, encuentra tu ficha.»—,
 * solo en el paso de la cuenta y solo cuando nadie ha buscado todavía. LLEVA LA
 * FORMA DE LA CAJA DE PRIVACIDAD DEL CUADERNO —filete de 3 px y fondo de
 * realce—, que en esta pantalla ya significa «léeme»: no se inventa una forma
 * nueva para una línea nueva. */
.c-encontrar__acuse {
	margin: 0 0 1.5rem;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--linea);
	background: var(--realce);
	font-size: 16px;
	color: var(--tinta);
}

/* --- El editor de la ficha propia (22/8/2026) -----------------------------
 * Reutiliza `.c-aviso__*` como el resto de formularios del área: no inventa
 * ninguna forma nueva. Lo propio son tres reglas.
 */

/* El nombre de la entidad es el sujeto del formulario y se pinta como tal, un
 * escalón por debajo del título de sección — la misma decisión que el nombre del
 * café en el formulario de apunte. */
.c-editar__sujeto {
	margin: 0 0 0.75rem;
	font-size: 20px;
	font-weight: 600;
	color: var(--tinta);
}

/* QUÉ PASA AL GUARDAR, CON LA FORMA QUE EN ESTA PANTALLA YA SIGNIFICA «LÉEME»:
 * filete de 3 px y fondo de realce, la misma de la caja de privacidad del
 * cuaderno y del acuse del paso. Aquí lo que avisa es que esto publica directo. */
.c-editar__aviso {
	margin: 0 0 1.5rem;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--linea);
	background: var(--realce);
	font-size: 16px;
	color: var(--tinta);
	max-width: 62ch;
}

.c-editar__salida { margin: 1.25rem 0 0; }

/* El enlace de cada fila de «Tus entidades». Terciario y al final de la línea:
 * la lista se lee por el nombre de la entidad, no por sus botones. */
.c-vinculos__editar { margin-left: 0.5rem; }

/* --- La página pública `/encuentra-tu-ficha/` -----------------------------
 * NO AÑADE NI UNA REGLA PROPIA, y eso es lo que dice que es el mismo bloque:
 * `.c-encontrar` es aquí el contenedor de la página en vez de una sección de la
 * cuenta, y las cinco reglas de arriba —intro, formulario, lista, acciones y
 * salida— valen igual porque **ninguna cuelga de `.c-cuenta`**. El ancho y las
 * formas los pone `.c-pagina`, como en `/registro/` y `/vincular/`, que son sus
 * hermanas: pantallas de trámite y no de datos. */

/* --- Incidencias de calidad (27/8/2026) --------------------------------
 * Cuelgan de una fila de Compras y se pintan debajo de sus acciones. **Sin
 * ninguna no hay lista**: lo corriente es que una compra no tenga incidencias, y
 * un «sin incidencias» en cada fila convertiría la lista en un parte de que todo
 * va bien.
 *
 * SIN COLOR DE ALARMA, y no es timidez: un rojo o un ámbar aquí pintaría de
 * juicio lo que es una anotación privada con fecha. **El rojo del tema tiene un
 * solo uso —`c-accion--peligro`, lo que borra sin papelera— y ampliarlo a «esto
 * salió mal» le quitaría ese significado.** El motivo se lee porque lo dice, no
 * porque esté pintado.
 *
 * SANGRADAS BAJO SU FILA, que es lo único que dice a qué pertenecen: sin sangría,
 * una incidencia y la compra siguiente se leen al mismo nivel.
 */
.c-incidencias {
	margin: 0.4rem 0 0;
	padding: 0 0 0 1rem;
	list-style: none;
	border-left: 2px solid var(--linea);
	font-size: 15px;
	color: var(--tinta-suave);
}

.c-incidencia { margin: 0.25rem 0; }

/* El motivo lleva el color de texto porque es lo que se busca al recorrer; la
 * fecha y la nota se quedan en el gris de metadato. */
.c-incidencia__motivo { color: var(--tinta); }

.c-incidencia__fecha::before,
.c-incidencia__nota::before { content: ' · '; }

/* El borrado es un `<form>` y no un enlace —sin confirmación, un GET que borra lo
 * dispara cualquier cosa que precargue—, así que hay que devolverle la línea que
 * un formulario en bloque le quita. */
.c-incidencia__acciones { white-space: nowrap; }
.c-incidencia__acciones::before { content: ' · '; }
.c-incidencia__borrar { display: inline; }

/* La segunda vía, bajo el desglose de la cata. Terciaria como el resto. */
.c-cadena__cambio-accion { margin: 0.5rem 0 0; font-size: 15px; }

/* --- «Necesitan atención» (27/8/2026) ----------------------------------
 * LO PRIMERO DE LA PESTAÑA, ANTES DEL BUSCADOR. Ese orden es la pieza: un campo
 * de búsqueda vacío arriba le pide a quien llega que sepa ya qué buscar.
 *
 * SIN CAJA DE COLOR Y SIN ICONO DE ALERTA. **Esto no es un aviso de que algo va
 * mal: es una lista de trabajo.** Un fondo ámbar convertiría «lleva 31 días sin
 * catar» en una incidencia, que es otra cosa y tiene su propio sitio. Lo que la
 * separa de la lista de abajo es el filete y el peso del título, no el color.
 */
.c-atencion {
	/* AIRE ARRIBA, y lo pidió la captura: el `h3` quedaba pegado al `h2` de la
	 * sección y los dos títulos se leían como uno partido en dos líneas.
	 *
	 * VA EN `padding` Y NO EN `margin`, y es la misma trampa que costó una vuelta
	 * en la portada esta misma mañana: **el margen superior de este bloque colapsa
	 * con el inferior de la cabecera**, así que subirlo a 1.25rem solo añadió los
	 * 4 px que le sacaba al de la cabecera. **El padding no colapsa y hace lo que
	 * dice.** */
	margin: 0 0 2rem;
	padding: 1.25rem 0 1.5rem;
	border-bottom: 1px solid var(--linea);
}

.c-atencion__titulo { margin: 0 0 0.75rem; font-size: 19px; font-weight: 600; }

.c-atencion__lista { margin: 0; padding: 0; list-style: none; }

/* Cada fila: lo que pasa a la izquierda, la acción a la derecha. Con la acción
 * debajo del texto habría que recorrer la lista dos veces —una para leer y otra
 * para pulsar—, y esta pantalla existe para no tener que hacer eso. */
.c-atencion__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem 1rem;
	padding: 0.6rem 0;
	border-top: 1px solid var(--linea);
}

.c-atencion__fila:first-child { border-top: 0; }

.c-atencion__que { min-width: 0; }

/* El nombre del lote manda y pierde el subrayado permanente, igual que el título
 * del bloque de abajo y por lo mismo: quitado el de arriba, la acción de la
 * derecha vuelve a ser lo que destaca. Vuelve en `:hover` Y en `:focus-visible`
 * —un enlace que solo se distingue con el ratón deja fuera al tabulador—. */
.c-atencion__lote { font-weight: 600; text-decoration: none; }
.c-atencion__lote:hover,
.c-atencion__lote:focus-visible { text-decoration: underline; }
.c-atencion__lote:focus-visible { outline: 2px solid var(--marron); outline-offset: 2px; }

/* El motivo, en el gris de metadato y en su propia línea: dice qué pasa, y qué
 * hacer lo dice el botón. */
.c-atencion__motivo { display: block; font-size: 15px; color: var(--tinta-suave); }

/* SECUNDARIA Y NO PRIMARIA, aunque sea la acción de su fila: con seis pendientes
 * habría seis sólidos marrones en una pantalla, y «si dos cosas de una pantalla
 * son primarias, ninguna lo es» se rompe igual con seis que con dos. */
.c-atencion__accion { flex: 0 0 auto; font-size: 15px; }

@media (max-width: 34em) {
	.c-atencion__fila { flex-direction: column; align-items: stretch; }
	.c-atencion__accion { align-self: flex-start; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * LA LISTA DE FOTOS DEL MATERIAL DE FICHA (27/8/2026)
 * ─────────────────────────────────────────────────────────────────────────
 * **Una foto por fila, con su miniatura a la izquierda y sus dos campos a la
 * derecha.** No es una rejilla de imágenes: lo que se hace aquí es escribir
 * pies y elegir posiciones, así que manda el formulario y la miniatura está
 * para saber de cuál se habla.
 *
 * `align-items: start` PORQUE LAS FILAS NO MIDEN LO MISMO: una con pie largo
 * crece, y centrada dejaría su miniatura flotando a media altura.
 *
 * EN MÓVIL SE APILA, como el resto de la pantalla: 120 px de miniatura al lado
 * de un campo de texto dejan el campo en dos palabras por línea.
 */
.c-material__fotos { list-style: none; margin: 0 0 1rem; padding: 0; }

.c-material__foto {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 0.75rem 1rem;
	align-items: start;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--linea);
}

.c-material__foto:last-child { border-bottom: 0; }
.c-material__foto-mini { width: 120px; height: auto; display: block; border-radius: 2px; }
.c-material__foto .c-aviso__campo { margin: 0; }
.c-material__foto .c-aviso__casilla { grid-column: 2; }

@media (max-width: 34em) {
	.c-material__foto { grid-template-columns: 1fr; }
	.c-material__foto .c-aviso__casilla { grid-column: 1; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * LA VISTA PREVIA DE LA DESCRIPCIÓN (27/8/2026)
 * ─────────────────────────────────────────────────────────────────────────
 * **COHERENTE CON EL DOCUMENTO, NO IDÉNTICA, y la diferencia es deliberada.**
 * Del papel se toma **el escalón que hay que reconocer** —subtítulo en el
 * marrón de la marca, negrita en negro— y nada más: las medidas del PDF están
 * calculadas para una hoja A4 en dompdf, y traerlas a una pantalla sería
 * copiar números que allí significan algo y aquí no. **La hoja del documento
 * no se toca desde aquí**; son dos hojas y dos medios.
 *
 * SIN RECUADRO NI FONDO: es la continuación del campo que hay encima, no una
 * tarjeta aparte. Un filete arriba basta para decir dónde empieza.
 *
 * `[hidden]` CON SU REGLA, como la línea de ejes y el plegable de la cata: los
 * elementos de aquí declaran `display`, que gana al del navegador — se cobró
 * dos veces esta misma semana.
 */
.c-prosa {
	margin: 0.75rem 0 1.25rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--linea);
	max-width: 60ch;
}

.c-prosa[hidden] { display: none; }

.c-prosa__ojal {
	margin: 0 0 0.4rem;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--tinta-suave);
}

/* MISMO `white-space` QUE EL PAPEL, y por la misma razón: las líneas en blanco
 * del texto son la separación de párrafo, y sin esto la vista previa mostraría
 * un solo bloque donde el PDF muestra tres. */
.c-prosa__cuerpo p { margin: 0 0 0.6rem; white-space: pre-wrap; line-height: 1.55; }
.c-prosa__cuerpo p:last-child { margin-bottom: 0; }
.c-prosa__cuerpo strong { font-weight: 700; color: var(--tinta); }

/* EL SUBTÍTULO, EN EL MARRÓN DE LA MARCA — el escalón que se reconoce del
 * documento. Aire arriba y poco abajo, para que quede pegado a lo que titula. */
.c-prosa__cuerpo .nota-subtit {
	margin: 1rem 0 0.25rem;
	font-weight: 700;
	color: var(--marron);
	white-space: normal;
}

/* ─────────────────────────────────────────────────────────────────────────
 * EL LECTOR DE DOCUMENTOS DE IMPORTADOR (28/8/2026)
 * ─────────────────────────────────────────────────────────────────────────
 * REUTILIZA `.c-cuenta__reclamo` PARA SU CAJA y `.c-proponer__leido` para la
 * marca de cada casilla: **es la misma cosa dicha por otra pieza** —«esto lo
 * propuso una máquina, compruébalo»— y dos formas de decirlo serían dos
 * convenciones que aprender en la misma pantalla. Lo único propio es lo que no
 * existía: la rejilla de las fotos y el dato de la cata. */
.c-doc__form { margin-top: 0.75rem; }

/* LA CATA DEL DOCUMENTO SE DISTINGUE DEL RESTO DEL FORMULARIO, y no por
 * decoración: **es lo único de esta pantalla que NO se adopta por defecto**, así
 * que tiene que leerse como un bloque aparte antes de que alguien marque nada. */
.c-doc__cata-dato { margin: 0.5rem 0; font-size: 15px; }
.c-doc__cata-ejes { display: block; margin-top: 0.25rem; color: var(--tinta-suave); }

.c-doc__fotos-lista {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* LA FOTO Y SU CASILLA VAN DENTRO DEL MISMO `<label>`, así que pulsar la imagen
 * marca la casilla — que es el gesto que alguien intenta primero. El ancho fijo
 * es lo que hace que tres fotos de proporciones distintas se lean como una fila
 * y no como tres cosas sueltas. */
.c-doc__foto { flex: 0 1 180px; }
.c-doc__foto label { display: block; cursor: pointer; }

.c-doc__foto-img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--linea);
	border-radius: 2px;
}

.c-doc__foto-casilla {
	display: block;
	margin-top: 0.35rem;
	font-size: 14px;
	color: var(--tinta-suave);
}

/* LA LÍNEA DE CONSECUENCIA DE LA ADOPCIÓN (28/8/2026).
 *
 * **NI ROJO NI ESTILO DE ERROR**: es información de lo que va a pasar, no un
 * fallo. Reutiliza `.c-cuenta__estado`, que es el realce sobrio de la casa, y lo
 * único propio es el aire: junto a una casilla necesita separarse de ella para
 * no leerse como parte de su etiqueta. */
.c-doc__consecuencia { display: block; margin-top: 0.4rem; }

/* El pie sugerido y su posición, bajo cada foto del documento. La casilla de
 * texto ocupa el ancho de la foto para que las tres columnas sigan alineadas. */
.c-doc__foto-pie { display: block; margin-top: 0.4rem; }
.c-doc__foto-pie .c-aviso__input { width: 100%; font-size: 14px; }
.c-doc__foto-pos { display: block; margin-top: 0.25rem; }

/* --- Fotos de entidad y retrato (29/8/2026) ---------------------------- */
/* EL BLOQUE DEL EDITOR. No inventa forma nueva: es una sección más de la
 * pantalla de cuenta, con su título en el escalón que ya usan las sub-secciones
 * y el aviso en gris de metadato. */
.c-entfotos { margin-top: 2rem; }

.c-entfotos__titulo {
	margin: 0 0 0.35rem;
	font-size: 17px;
	font-weight: 600;
	color: var(--tinta);
}

.c-entfotos__aviso,
.c-entfotos__tope {
	margin: 0 0 0.75rem;
	font-size: 15px;
	color: var(--tinta-suave);
}

.c-entfotos__lista { list-style: none; margin: 0 0 1rem; padding: 0; }

/* MINIATURA A LA IZQUIERDA Y SUS CAMPOS A LA DERECHA, con `align-items: start`
 * porque la columna de campos crece: centrarla dejaría la foto flotando a media
 * altura de un bloque que puede tener dos líneas o cuatro. En móvil apila. */
.c-entfotos__item {
	display: flex;
	flex-wrap: wrap;
	align-items: start;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

/* 96 px, LA MEDIDA DE LA COLECCIÓN Y POR SU MISMA RAZÓN: aquí la miniatura es
 * una marca de reconocimiento —«cuál de las tres estoy editando»— y no una
 * fotografía para mirar. `object-fit: cover` la cuadra, que es la excepción que
 * la regla del 17/8 ya concede a las listas. */
.c-entfotos__mini {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.c-entfotos__campos { flex: 1 1 16rem; }
.c-entfotos__quitar { display: block; margin-top: 0.4rem; }

/* LA SECCIÓN DE LA FICHA PÚBLICA. Rejilla que aprovecha el ancho, con la misma
 * forma que las listas de tarjetas de las fichas — `auto-fit` con mínimo, que es
 * lo que el tema ya usa desde el 14/8. */
.c-fotosficha__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* LA REJILLA SE DIMENSIONA POR NÚMERO DE FOTOS Y NO POR UN TOPE FIJO
	 * (29/8/2026, segunda corrección, tras la pasada de Luis: «móvil bien;
	 * escritorio, pequeña»).
	 *
	 * **El techo de 320 px era la respuesta equivocada a un problema real.** Lo
	 * puso el ráster de esa mañana: con `1fr`, una sola foto se estiraba a los 900
	 * px de la ficha y `object-fit: contain` **rellenaba los lados de gris**. El
	 * techo quitó la banda —y de paso dejó la foto a un tercio de lo que cabía—.
	 * **La banda no venía del ancho: venía de forzar una altura y encajar la imagen
	 * dentro.** Retirado eso, `1fr` vuelve a ser correcto.
	 *
	 * `minmax(280px, 1fr)`: **con tres fotos salen tres columnas iguales** dentro
	 * de los 900 de la ficha, con su hueco; **en móvil cae a una a todo el ancho**,
	 * que es lo que ya estaba aprobado. */
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem;
}

/* UNA SOLA FOTO NO OCUPA LA COLUMNA ENTERA: DOS TERCIOS.
 *
 * **`:only-child` y no una clase que la plantilla tenga que acordarse de poner**
 * — el CSS ya sabe contar hijos, y una clase condicional sería un segundo sitio
 * donde decidir lo mismo. A ancho completo, una foto sola se lee como una lámina
 * y empuja los datos; a dos tercios **sigue siendo la marca de la ficha** y deja
 * ver que debajo hay más.
 *
 * **Es el caso corriente y no el raro**: Tostador y Organización tienen tope de
 * UNA. En móvil no estorba, porque ahí la columna nunca llega a 600. */
.c-fotosficha__item:only-child { max-width: 600px; }

/* LA FOTO CONSERVA SU PROPORCIÓN Y NO TIENE ALTO FIJO (29/8/2026, segunda
 * corrección).
 *
 * **`height: auto` y ni `max-height` ni `object-fit`**, que es lo que retira la
 * banda gris de raíz: aquélla salía de **forzar una altura y encajar la imagen
 * dentro** —`contain` deja aire arriba y abajo, o a los lados, según la
 * proporción—. Sin caja que rellenar **no hay hueco que pintar**, así que la
 * regla del 17/8 se cumple mejor que antes: la foto no se recorta **y tampoco se
 * mete en un marco que no es el suyo**.
 *
 * **QUIEN DECIDE EL TAMAÑO ES LA CELDA**, y la celda la decide cuántas fotos hay.
 * Una vertical de móvil sale alta —es lo que es— y con una sola foto la acota los
 * 600 px de `:only-child`. */
.c-fotosficha__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* EL PIE PESA MENOS QUE EL TEXTO QUE LO RODEA, como el del documento: lo que
 * explica una figura no puede competir con ella. */
.c-fotosficha__pie {
	margin: 0.4rem 0 0;
	font-size: 15px;
	color: var(--tinta-suave);
}

/* EL RETRATO EN LA CABECERA DE UN PRODUCTOR. Redondo y pequeño: es la imagen de
 * una persona junto a su nombre, no una fotografía que se mire. */
.c-retrato__img {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: 50%;
	margin: 0 0 0.75rem;
}

/* ─────────────────────────────────────────────────────────────────────────
 * «MI RED» (29/8/2026)
 * ───────────────────────────────────────────────────────────────────────── */

/* LAS TRES CIFRAS SON LA CABECERA GRATIS, y se leen de un vistazo: número
 * grande, palabra pequeña. Es la misma forma que el desglose del documento. */
.c-mired__cifras {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.c-mired__cifra strong {
	display: block;
	font-size: 28px;
	line-height: 1.1;
}

.c-mired__cifra {
	font-size: 15px;
	color: var(--tinta-suave);
}

/* LA TABLA SE DESPLAZA DENTRO DE SU CAJA Y NUNCA LLEVA LA PÁGINA CON ELLA.
 * Nueve columnas no caben en un móvil y no van a caber: lo que no puede pasar
 * es que el cuerpo de la página se desplace en horizontal. */
/* ─────────────────────────────────────────────────────────────────────────
   «MI RED» USA EL ANCHO DE PÁGINA, NO LA COLUMNA DE TEXTO (30/8/2026, Luis)
   ─────────────────────────────────────────────────────────────────────────
   El área de cuenta mide 800 px porque **casi todo lo que hay dentro es texto
   para leer**, y una línea larga se lee mal. Una TABLA no es texto para leer:
   es una rejilla que se recorre, y encogerla obliga a desplazarla en horizontal
   —que es la forma de no leer una tabla—.

   **SE ENSANCHA SOLO ESTA SECCIÓN Y SOLO EN ESCRITORIO**, y **CRECE HACIA LA
   DERECHA, NO HACIA LOS DOS LADOS** — que es la corrección del 30/8 por la tarde
   y el motivo por el que este bloque está escrito así y no de la forma corta:

   `.c-cuenta.c-pagina` mide 800 px **pegada a la izquierda** de la caja de
   contenido de `.c-contenido`; NO lleva `margin-inline: auto`. Un margen negativo
   simétrico —`calc(50% - ancho / 2)`— centra el bloque **sobre su padre**, y un
   padre que no está centrado devuelve el bloque desplazado: medido a 1248 px de
   ventana, la sección empezaba en **−143 px**, o sea con la primera columna fuera
   de la pantalla y sin barra que la alcanzara, porque un desbordamiento hacia la
   izquierda **no genera desplazamiento horizontal**. Es la clase de defecto que
   no da error: la tabla estaba entera y bien formada, simplemente no se veía.

   Lo disponible es exactamente la caja de contenido de `.c-contenido` menos lo
   que ocupa `.c-cuenta`, y se toma **por la derecha, que es donde está el hueco**.
   El corte es `--ancho + 2 * --pad`: por encima de él `.c-contenido` mide siempre
   `--ancho`, así que la cuenta es exacta y la barra de desplazamiento no entra en
   ella. Por debajo no se ensancha nada —no hay hueco que ganar— y la sección usa
   el ancho de la columna, que nunca se sale. */
@media (min-width: 1264px) {   /* --ancho (1200) + 2 * --pad (32) */
	.c-mired {
		--c-mired-crece: calc(var(--ancho) - 2 * var(--pad) - 100%);

		width: calc(100% + var(--c-mired-crece));
		margin-right: calc(-1 * var(--c-mired-crece));
	}
}

/* ── LAS SUBPESTAÑAS ──────────────────────────────────────────────────────
   La activa lleva `aria-current` **y** marca visible: el `aria` solo lo oye
   quien usa un lector, y quien mira necesita ver qué pregunta está haciendo.
   Una escala por debajo de las pestañas de la cuenta, porque son subordinadas
   de ellas y no sus iguales. */
.c-mired__vistas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 1.25rem;
	border-bottom: 1px solid var(--linea);
}

.c-mired__vista {
	display: inline-block;
	padding: 0.45rem 0.9rem;
	font-size: 15px;
	color: var(--tinta-suave);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.c-mired__vista:hover { color: var(--tinta); }

.c-mired__vista--activa {
	color: var(--tinta);
	font-weight: 600;
	border-bottom-color: var(--marron);
}

/* ── LAS ACCIONES, BAJO EL NOMBRE ─────────────────────────────────────────
   Eran hasta cinco enlaces en su propia columna, y la columna crecía hasta
   empujar a las demás fuera de la pantalla. Debajo del nombre ocupan el ancho
   que la primera columna ya tiene y quedan pegadas a lo que gobiernan. */
.c-mired__nombre { display: block; }

.c-mired__acciones {
	display: block;
	margin-top: 0.35rem;
	font-size: 14px;
	font-weight: 400;
	line-height: var(--mired-acciones-alto);
}

.c-mired__acciones a { color: var(--tinta-suave); }
.c-mired__acciones a:hover { color: var(--tinta); }

/* «Retirar» no es una acción más: la única de la fila que quita algo que una
   ficha pública está diciendo. No se pinta en rojo —no es un error— pero sí en
   la tinta plena, para que no se lea como sus cuatro vecinas. */
.c-mired__retirar-enlace { color: var(--tinta); }

/* ─────────────────────────────────────────────────────────────────────────
   LA FORMA LA DECIDE EL ANCHO DEL CONTENEDOR, NO EL DE LA PANTALLA
   ─────────────────────────────────────────────────────────────────────────
   (30/8/2026, pasada de Luis a anchos intermedios.) **Se veía bien a 390 y a
   pantalla completa, y mal en medio**, y la causa es que dos cosas distintas
   decidían: el corte de forma miraba **la ventana** y el ancho disponible lo
   fijaba **el contenedor**, que además cambia de regla a los 900 px cuando la
   sección se ensancha. Medido a 760 px de ventana: la tabla ya estaba en forma
   de tabla, **necesitaba 707 px y solo tenía 673**, así que desbordaba 34 px y
   la columna «Último lote» quedaba cortada por el borde.

   **EL UMBRAL ESTÁ MEDIDO Y NO ESTIMADO: 707 px**, obtenido clonando la tabla
   en una probeta de 1 px y leyendo su `scrollWidth` — es lo que pide cuando no
   le sobra nada, con el `min-width` del nombre y la columna «Falta» en su peor
   caso real («país, región, coordenadas, foto»). Se redondea a **720** por el
   subpíxel y para que un nombre algo más largo no la rompa; la holgura va
   declarada, no escondida.

   **UN SOLO SITIO DECIDE, Y ES LA LISTA DE VARIABLES DE ABAJO.** Las reglas que
   pintan están escritas **una vez**; lo único que se repite en el respaldo son
   las seis declaraciones que dicen «ahora eres una tabla». Duplicar el bloque
   entero habría sido el segundo sitio capaz de discrepar. */
/* `overflow-x` SE QUEDA EN `auto` SIEMPRE, también en la forma apilada, y no es
   un descuido: la versión anterior lo pasaba a `visible` desde
   `@container mired (max-width: …)`, y **esa regla no se aplicaba nunca**. Un
   elemento no puede estilarse desde una consulta a su propio contenedor —dentro
   del bloque, `.c-mired__envoltorio` solo casaría con un envoltorio anidado, que
   no existe—. No se notaba porque en apilada no hay nada que desbordar, así que
   `auto` y `visible` se ven igual: un candado que no cerraba y no lo parecía. */
.c-mired__envoltorio {
	container-type: inline-size;
	container-name: mired;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* LOS VALORES POR DEFECTO SON LOS DE LA FORMA APILADA (móvil primero): si
   ninguna consulta se cumple —o el navegador no entiende ninguna de las dos—,
   lo que queda es la forma que funciona en cualquier ancho.

   **TODA diferencia entre las dos formas es una variable de esta lista**, y no
   una regla suelta bajo su propia consulta. Empezó siendo seis, y con seis el
   umbral acabó escrito en cuatro sitios —la cabecera, el relleno de la fila y
   el bloque `max-width` tenían cada uno el suyo—, que es exactamente el segundo
   sitio capaz de discrepar que este diseño existe para no tener. */
.c-mired__tabla {
	--mired-tabla: block;
	--mired-fila: block;
	--mired-celda: block;
	--mired-rotulo: inline;
	--mired-borde-fila: 1px solid var(--linea);
	--mired-borde-celda: 0;
	--mired-thead-pos: absolute;
	--mired-thead-tam: 1px;
	--mired-thead-ov: hidden;
	--mired-thead-clip: inset(50%);
	--mired-fila-pad: 1rem 0;
	--mired-celda-pad: 0.15rem 0;
	--mired-celda-espacio: normal;
	--mired-th-min: 0;
	--mired-th-cuerpo: 17px;
	--mired-th-margen: 0.4rem;
	--mired-acciones-alto: 2.2;

	display: var(--mired-tabla);
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

/* CUANDO EL CONTENEDOR TIENE SITIO, Y NO CUANDO LA VENTANA LO TENGA.

   **EL UMBRAL ESTÁ MEDIDO, NO ESTIMADO, Y EL CASO QUE MANDA ES EL INGLÉS.**
   Recorridos los anchos de 400 a 1200 px de dos en dos, con la forma de tabla
   forzada y en las cuatro combinaciones de idioma y vista, el mayor ancho al
   que alguna fila todavía se sale es **742 px, y solo en EN · Estado** —24 px
   de desborde—; en ES · Estado, ES · Revisión y EN · Revisión no se sale a
   ningún ancho. El umbral se calibra con ese peor caso y no con el cómodo:
   **760 px, por encima de los 744 que hacen falta**, con margen para que una
   etiqueta algo más larga no lo tumbe.

   Y el desborde **NO es monótono**, que es lo que tumbó la primera medición:
   con `white-space: nowrap`, a 560 px la tabla cabe comprimida y a 720 mide
   744. Buscar «el primer ancho que ya no desborda» subiendo devuelve 560, que
   es un mínimo falso. Lo que vale es **el mayor ancho que todavía desborda**. */
@container mired (min-width: 760px) {
	.c-mired__tabla {
		--mired-tabla: table;
		--mired-fila: table-row;
		--mired-celda: table-cell;
		--mired-rotulo: none;
		--mired-borde-fila: 0;
		--mired-borde-celda: 1px solid var(--linea);
		--mired-thead-pos: static;
		--mired-thead-tam: auto;
		--mired-thead-ov: visible;
		--mired-thead-clip: none;
		--mired-fila-pad: 0;
		--mired-celda-pad: 0.5rem 0.75rem;
		--mired-celda-espacio: nowrap;
		--mired-th-min: auto;
		--mired-th-cuerpo: inherit;
		--mired-th-margen: 0;
		--mired-acciones-alto: 1.9;
	}
}

/* EL RESPALDO, Y SOLO PARA QUIEN NO ENTIENDE `@container`. `@supports not` lo
   acota: donde las consultas de contenedor funcionan —que es la inmensa
   mayoría desde 2023— **este bloque no existe**, así que no puede pelearse con
   el de arriba. El umbral es el mismo 760 traducido a ventana: medido, el
   contenedor mide unos 79 px menos que el viewport en esa franja, así que hacen
   falta unos 840 px de ventana. **Es una aproximación y va dicho**; la buena es
   la de arriba, que mide lo que de verdad decide. */
@supports not (container-type: inline-size) {
	@media (min-width: 840px) {
		.c-mired__tabla {
			--mired-tabla: table;
			--mired-fila: table-row;
			--mired-celda: table-cell;
			--mired-rotulo: none;
			--mired-borde-fila: 0;
			--mired-borde-celda: 1px solid var(--linea);
			--mired-thead-pos: static;
			--mired-thead-tam: auto;
			--mired-thead-ov: visible;
			--mired-thead-clip: none;
			--mired-fila-pad: 0;
			--mired-celda-pad: 0.5rem 0.75rem;
			--mired-celda-espacio: nowrap;
			--mired-th-min: auto;
			--mired-th-cuerpo: inherit;
			--mired-th-margen: 0;
			--mired-acciones-alto: 1.9;
		}
	}
}

.c-mired__tabla tbody,
.c-mired__tabla thead { display: revert; }

.c-mired__tabla tr {
	display: var(--mired-fila);
	border-bottom: var(--mired-borde-fila);
}

.c-mired__tabla th,
.c-mired__tabla td {
	display: var(--mired-celda);
	padding: var(--mired-celda-pad);
	text-align: left;
	vertical-align: top;
	border-bottom: var(--mired-borde-celda);
	white-space: var(--mired-celda-espacio);
}

/* ─────────────────────────────────────────────────────────────────────────
   EL RÓTULO DE LA COLUMNA, Y POR QUÉ `attr()` NO VIAJA EN LA VARIABLE
   ─────────────────────────────────────────────────────────────────────────
   El primer intento puso `--mired-rotulo: attr(data-col) ': '` y **salió «: »
   a secas**: una custom property se resuelve **contra el elemento que la
   DECLARA** —aquí `.c-mired__tabla`, que no tiene `data-col`— y no contra el
   que la usa. **No da error: da una cadena vacía**, así que el rótulo
   desaparecía y quedaba el separador huérfano. Medido en el navegador; en el
   CSS no se ve.

   Así que el `attr()` se queda donde tiene que resolverse y **la variable solo
   hace de interruptor**, que es todo lo que necesitaba hacer. */
.c-mired__tabla td[data-col]::before {
	content: attr(data-col) ': ';
	display: var(--mired-rotulo);
	color: var(--tinta-suave);
	font-size: 13px;
}

/* EL NOMBRE SÍ PARTE, porque es lo único de la fila que puede ser largo y es
 * la columna por la que se busca. */
.c-mired__tabla tbody th {
	white-space: normal;
	min-width: 12rem;
	font-weight: 600;
}

.c-mired__tabla thead th {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tinta-suave);
}

.c-mired__intro,
.c-mired__vacia {
	color: var(--tinta-suave);
	max-width: 46rem;
}


/* ─────────────────────────────────────────────────────────────────────────
   EL MAPA DE SITUACIÓN, EN LA FILA DE GEOLOCALIZACIÓN (30/8/2026)
   ─────────────────────────────────────────────────────────────────────────
   ANCHO FIJO EN COLUMNA Y NO PORCENTUAL: la silueta tiene que medir lo mismo
   en un país ancho que en uno estrecho, porque **lo que se compara entre dos
   fichas es dónde cae el punto, no cómo de grande es el país**. Un ancho
   porcentual habría hecho que Colombia y Brasil salieran del mismo tamaño en
   pantalla, que es exactamente la lectura falsa.

   `height: auto` Y EL `viewBox` MANDA: el alto sale de la proporción real del
   país, así que Chile no se aplasta para caber en un cuadrado.
   ───────────────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────────
   LOS DOS BLOQUES SE ALINEAN A LA COLUMNA, NO ENTRE SÍ (30/8/2026, Luis)
   ─────────────────────────────────────────────────────────────────────────
   **El mapa mide 190 px y la columna de datos mide lo que mida.** Son dos
   anchos distintos y el que manda es el de la columna: el mapa se alinea a su
   borde izquierdo y **el bloque de coordenadas ocupa la columna entera**, no la
   sombra del mapa. Sin `display:block` explícito, el segundo es un `<span>` que
   fluye y **hereda cualquier alineación que le caiga encima**; con él, los dos
   empiezan en el mismo sitio y solo uno se estira.

   `text-align: left` NO ES REDUNDANTE aquí: la fila es una rejilla y el `<dd>`
   puede recibir alineación de fuera. Declarada, la columna de geolocalización
   se lee igual venga de donde venga. */
.c-mapa {
	display: block;
	margin: 0 0 10px;
	text-align: left;
}

.c-mapa__datos {
	display: block;
	width: 100%;
	text-align: left;
}

.c-mapa__svg {
	display: block;
	width: 190px;
	max-width: 100%;
	height: auto;
	/* TOPE DE ALTO PARA LOS PAÍSES MUY ALARGADOS. Argentina mide 2130 unidades
	   de alto por 1000 de ancho: sin esto, su silueta ocuparía media pantalla
	   en una fila que es una línea de datos. Con `object-fit` la proporción se
	   conserva y lo que se reduce es el ancho, no la forma. */
	max-height: 260px;
	object-fit: contain;
	object-position: left top;
}

/* EL CRÉDITO EN PEQUEÑO Y EN EL MISMO RENGLÓN QUE LAS COORDENADAS: es una
   nota de procedencia, no un pie de figura. Con el tamaño de la fila se
   leería como un dato más. */
/* CADA PAREJA «rótulo + número» ES INDIVISIBLE (30/8/2026). Un renglón que
   acaba en «Latitud» y otro que empieza por un número suelto se lee, en una
   línea que ya tiene dos números, como si hubiera un tercero. El «·» va DENTRO
   de la segunda pareja, así que el único corte posible queda entre parejas. */
.c-geo__par { white-space: nowrap; }

/* EL ENLACE NO SE PARTE POR LA MITAD. «Abrir en / OpenStreetMap» en dos
   renglones se lee como dos cosas; el ráster lo enseñó y el HTML no podía. */
.c-geo__osm { white-space: nowrap; }

.c-mapa__credito {
	font-size: 13px;
	color: var(--tinta-suave);
	/* NO SE PARTE: lleva su propio separador dentro, y partirlo dejaría el «·»
	   huérfano al final de la línea de arriba — que es lo que el ráster enseñó
	   y el HTML no. */
	white-space: nowrap;
}

@media (max-width: 640px) {
	/* EN MÓVIL EL MAPA CRECE, y no es una excepción caprichosa: ahí la fila
	   ocupa todo el ancho de la pantalla y 190px se quedan en una viñeta. */
	.c-mapa__svg { width: 240px; max-height: 320px; }
}


/* ─────────────────────────────────────────────────────────────────────────
   EN MÓVIL LA TABLA SE APILA, Y CADA DATO SIGUE DICIENDO DE QUÉ ES
   ─────────────────────────────────────────────────────────────────────────
   (30/8/2026.) Antes se desplazaba en horizontal dentro de su envoltorio, que
   **evitaba romper la página y no arreglaba la lectura**: hay que arrastrar
   para ver la cuarta columna y, al llegar, ya no se ve de qué fila era.

   **CADA CELDA PINTA SU RÓTULO DESDE `data-col`**, que el PHP escribe con el
   mismo literal traducido de su cabecera — un solo sitio, así que no pueden
   discrepar. Y el `<thead>` se oculta **accesiblemente y no con `display:none`**:
   sus cabeceras siguen siendo las de la tabla para quien navega con lector, y lo
   que sobra ahí es la fila visual, no la semántica. */
/* ─────────────────────────────────────────────────────────────────────────
   LO QUE LA FORMA APILADA NECESITA ADEMÁS DE `display: block`
   ─────────────────────────────────────────────────────────────────────────
   **Ya no lleva media query: cuelga de las mismas variables.** Antes esto era un
   `@media (max-width: 700px)` — el segundo sitio que decidía la forma, y el que
   discrepaba del ancho real del contenedor entre 700 y 790 px.

   EL `<thead>` SE OCULTA ACCESIBLEMENTE Y NO CON `display:none`: sus cabeceras
   siguen siendo las de la tabla para quien navega con lector, y lo que sobra en
   la forma apilada es la fila visual, no la semántica. Se recupera en cuanto la
   variable dice `table`. */
.c-mired__tabla thead {
	position: var(--mired-thead-pos);
	width: var(--mired-thead-tam);
	height: var(--mired-thead-tam);
	overflow: var(--mired-thead-ov);
	clip-path: var(--mired-thead-clip);
	white-space: nowrap;
}

/* Lo demás de la forma apilada se apaga solo cuando la celda vuelve a ser
   `table-cell`: son propiedades que en una tabla no pintan nada. */
.c-mired__tabla tbody tr { padding: var(--mired-fila-pad); }
.c-mired__tabla th,
.c-mired__tabla td { width: auto; }

.c-mired__tabla tbody th {
	min-width: var(--mired-th-min);
	font-size: var(--mired-th-cuerpo);
	margin-bottom: var(--mired-th-margen);
}

/* ─────────────────────────────────────────────────────────────────────────
   LA PANTALLA DEL ENLACE DE CONFIRMACIÓN (pieza 3, 30/8/2026)
   ─────────────────────────────────────────────────────────────────────────
   MÓVIL-PRIMERO DE VERDAD Y NO «RESPONSIVE»: se escribe para un teléfono en la
   mano de alguien que está en su finca, y lo de escritorio es el caso raro. Una
   columna, objetivos de 44 px, ningún `hover` como única señal —en una pantalla
   táctil no existe— y tamaños de texto que no obligan a acercarse.

   SIN NINGUNA REGLA NUEVA DE COLOR: usa la paleta que ya hay. Lo que cambia
   respecto al resto del sitio es la ESCALA, no el aspecto. */
.c-confirmar {
	max-width: 34rem;
	margin-inline: auto;
	padding: 0 var(--pad) 3rem;
}

.c-confirmar__titulo {
	font-size: 24px;
	line-height: 1.3;
	margin: 1.5rem 0 1rem;
}

.c-confirmar__parrafo {
	font-size: 17px;
	line-height: 1.6;
	color: var(--tinta-suave);
	margin: 0 0 1.25rem;
}

.c-confirmar__seccion {
	font-size: 19px;
	margin: 0 0 0.75rem;
}

/* EL AVISO DE «guardado» VA ARRIBA Y CON `role="status"`: quien acaba de subir
   una foto desde el móvil no ve el final de la página, así que la confirmación
   tiene que estar donde vuelve el navegador. */
.c-confirmar__aviso {
	padding: 0.75rem 1rem;
	margin: 1rem 0;
	background: var(--realce);
	border-left: 3px solid var(--verde);
	font-size: 16px;
}

.c-confirmar__form {
	margin: 0 0 2.5rem;
	padding: 0 0 1.5rem;
	border-bottom: 1px solid var(--linea);
}

.c-confirmar__form--final { border-bottom: 0; }

.c-confirmar__campo { margin: 0 0 1.25rem; }

/* EL RÓTULO ARRIBA Y EL VALOR DEBAJO, EN GRANDE. Lo que esta pantalla pide es
   MIRAR un dato, así que el dato es lo que pesa y el rótulo lo acompaña — al
   revés que en un formulario, donde manda la etiqueta porque el valor no
   existe todavía. */
.c-confirmar__rotulo {
	display: block;
	font-size: 14px;
	color: var(--tinta-suave);
	margin: 0 0 0.15rem;
}

.c-confirmar__valor {
	font-size: 19px;
	margin: 0 0 0.35rem;
}

/* «Corregir» ES UN `<details>` NATIVO. Se ve como una acción y no como un
   adorno: subrayado, 44 px de alto y sin depender de ningún script. */
.c-confirmar__corregir > summary {
	display: inline-block;
	min-height: 44px;
	line-height: 44px;
	font-size: 16px;
	color: var(--marron);
	text-decoration: underline;
	cursor: pointer;
}

.c-confirmar__corregir[open] > summary { margin-bottom: 0.5rem; }

.c-confirmar__input {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 0.6rem 0.75rem;
	font: inherit;
	font-size: 17px;   /* 17 y no 16: por debajo, iOS hace zoom al enfocar. */
	border: 1px solid var(--linea);
	border-radius: 4px;
	background: var(--papel);
}

select.c-confirmar__input { min-height: 8rem; }

/* LA CASILLA Y SU TEXTO SON UN SOLO OBJETIVO DE 44 px, porque en un móvil una
   casilla de 13 px sola es imposible de acertar. Y va SIN MARCAR siempre: una
   casilla premarcada no es una aceptación, es una suposición. */
.c-confirmar__acepto { margin: 1.25rem 0; }

.c-confirmar__opcion {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	min-height: 44px;
	font-size: 16px;
	line-height: 1.45;
	cursor: pointer;
}

.c-confirmar__opcion input {
	width: 24px;
	height: 24px;
	margin-top: 0.15rem;
	flex: none;
}

/* EL BOTÓN OCUPA EL ANCHO EN MÓVIL: es el final del tramo y no compite con
   nada, así que no hay razón para que haya que apuntarle. */
.c-confirmar__enviar { margin: 1.5rem 0 0; }

.c-confirmar__enviar .c-accion {
	display: block;
	width: 100%;
	min-height: 48px;
	text-align: center;
}

.c-confirmar__privacidad {
	font-size: 14px;
	line-height: 1.6;
	color: var(--tinta-suave);
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--linea);
}

@media (min-width: 720px) {
	/* En escritorio el botón deja de ocupar el ancho: ahí sí hay ratón y un
	   botón de 34rem de ancho se lee como un banner. */
	.c-confirmar__enviar .c-accion { display: inline-block; width: auto; }
}

/* EL DIFF DE LA INVITACIÓN, bajo el nombre en la vista «Revisión». Es lo único
   de esta pantalla que se LEE en vez de mirarse, así que no es una celda: es una
   lista con su propia tipografía. **No arbitra**: pone las dos versiones y una
   flecha. */
.c-mired__diff {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
}

.c-mired__diff-campo { color: var(--tinta-suave); }
.c-mired__diff-antes { text-decoration: line-through; color: var(--tinta-suave); }
.c-mired__diff-flecha { color: var(--tinta-suave); padding-inline: 0.2em; }
.c-mired__diff-ahora { font-weight: 600; }

/* Los botones de acción de invitación se ven como enlaces: son acciones
   terciarias en una celda, no botones de formulario, aunque POST exija que lo
   sean. La forma sigue a lo que hacen, no a su etiqueta HTML. */
.c-mired__inv-accion { display: inline; }

.c-mired__inv-boton {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--tinta-suave);
	text-decoration: underline;
	cursor: pointer;
}

.c-mired__inv-boton:hover { color: var(--tinta); }

/* El enlace recién creado: seleccionable de un toque y en monoespaciada, que es
   como se lee una credencial sin equivocarse de carácter. */
.c-mired__enlace input {
	font-family: var(--mono);
	font-size: 14px;
}

/* ─────────────────────────────────────────────────────────────────────────
   LA PÁGINA «MAPAS» (3/9/2026)
   ─────────────────────────────────────────────────────────────────────────
   LOS CUATRO TRAMOS SON EL MISMO COLOR A CUATRO INTENSIDADES, y no cuatro
   colores: una escala de un solo tono se lee como «más o menos» aunque no se
   distingan bien los pasos, mientras que cuatro tonos distintos se leen como
   cuatro categorías. Aquí la magnitud es ordenada, así que el color también.

   EL CONTEXTO ES EL MISMO GRIS DEL MAPA DE LA FICHA DE FINCA —`#e7e2d9` sobre
   borde `#b9b0a2`—, para que las dos piezas del sitio que dibujan un país se
   parezcan entre sí.

   Y EL COLOR NO ES EL ÚNICO CANAL: cada país con cafés lleva su `<title>` con
   las cifras y está además en la tabla, con los mismos números. */
/* ─────────────────────────────────────────────────────────────────────
   EL MAPA ROMPE LA COLUMNA Y OCUPA EL ANCHO DE LA VENTANA (Luis, 3/9/2026)
   ─────────────────────────────────────────────────────────────────────
   `margin-inline: calc(50% - 50vw)` es la sangría negativa exacta que lleva
   el bloque del centro de la columna a los bordes del viewport, sin
   posicionarlo ni sacarlo del flujo: lo que sigue debajo cae donde debe.

   EL `overflow-x: clip` DEL CONTENEDOR ES LA CONDICIÓN, NO UN ADORNO. `100vw`
   incluye el ancho de la barra de scroll vertical, así que sin él la página
   gana una barra HORIZONTAL de una decena de píxeles — un defecto que no da
   error, se ve poco en escritorio y en un móvil deja la página moviéndose de
   lado. `clip` y no `hidden`: `hidden` crea un contexto de scroll y rompería
   cualquier `position: sticky` de la página.

   EL MARGEN LATERAL MÍNIMO ES `clamp`: unos pocos píxeles en un móvil y algo
   más en una pantalla grande, sin que el mapa llegue a tocar el borde. */
/* EL RECORTE VA EN EL BODY Y SOLO EN ESTA PÁGINA. `100vw` incluye la barra de
   scroll vertical, así que sin él la página gana una barra HORIZONTAL de una
   decena de píxeles: no da error, se ve poco en escritorio y en un móvil deja
   la página moviéndose de lado.

   PRIMER INTENTO, ANOTADO PORQUE ENSEÑA DÓNDE VA: estaba en `.c-mundo`, el
   contenedor de la columna — y lo que hacía era **recortar el mapa a la
   columna**, exactamente lo contrario de lo pedido. El recorte tiene que estar
   en un ancestro que ocupe la ventana. */
/* Y VA EN EL ELEMENTO RAÍZ, NO SOLO EN EL BODY. **El `overflow` del `body` se
   PROPAGA al viewport cuando el `html` está en `visible`**, así que puesto solo
   ahí el body vuelve a `visible` y no recorta nada: medido, quedaba una barra
   horizontal de 7 px —la mitad de la barra vertical a cada lado—. `:has()` es
   lo que permite acotarlo a esta página sin tocar el `html` de todo el sitio. */
html:has( body.c-mundo-suelto ),
body.c-mundo-suelto { overflow-x: clip; }

.c-mundo__figura {
	margin: 1.6rem 0 1.2rem;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: clamp(6px, 1.2vw, 22px);
	box-sizing: border-box;
}

.c-mundo__svg {
	display: block;
	width: 100%;
	height: auto;
	background: transparent;
}

.c-mundo__pais {
	fill: var(--c-mapa-relleno, #e7e2d9);
	stroke: var(--c-mapa-borde, #b9b0a2);
	stroke-width: 0.6;
	stroke-linejoin: round;
}

.c-mundo__pais--t1 { fill: #e0bfb6; }
.c-mundo__pais--t2 { fill: #c99282; }
.c-mundo__pais--t3 { fill: #a85a44; }
.c-mundo__pais--t4 { fill: var(--c-mapa-punto, #8a3324); }

/* EL FOCO SE VE, y no es un detalle: sin JavaScript la única forma de recorrer
   el mapa con teclado es tabulando por los enlaces, y un foco invisible deja
   esa navegación a ciegas. */
.c-mundo__svg a:focus-visible .c-mundo__pais {
	stroke: #1c1a17;
	stroke-width: 1.6;
}

.c-mundo__leyenda {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em;
	margin-top: .7rem;
	font-size: 14px;
	color: #5d564c;
}

.c-mundo__clave { margin-right: .2em; }

.c-mundo__tramo {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	white-space: nowrap;
}

/* EL CUADRO DE COLOR VIAJA PEGADO A SU CIFRA, con `::before` y no como un
   elemento suelto: un cuadrito que se queda solo al final de una línea es el
   mismo defecto del «·» huérfano del 30/8, y la causa sería la misma. */
.c-mundo__tramo::before {
	content: "";
	width: 1em;
	height: 1em;
	border: 1px solid #b9b0a2;
	border-radius: 2px;
}

.c-mundo__tramo--t1::before { background: #e0bfb6; }
.c-mundo__tramo--t2::before { background: #c99282; }
.c-mundo__tramo--t3::before { background: #a85a44; }
.c-mundo__tramo--t4::before { background: #8a3324; }

.c-mundo__tabla {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1.8rem;
}

/* EL TÍTULO DE LA TABLA ES UN TÍTULO, Y HASTA HOY LO ERA POR ACCIDENTE.
 *
 * El `<caption>` llevaba `u-oculto`, una clase que **no existe en ninguna hoja
 * de este tema**: se pintaba visible porque nadie la había definido nunca, con
 * el tamaño y el centrado que `<caption>` trae de fábrica y **pegado a la
 * cabecera, con 0 px de aire medidos**. Que hiciera lo correcto era una
 * casualidad, y habría dejado de hacerlo el día que alguien definiera
 * `.u-oculto` en cualquier sitio.
 *
 * Ahora es una decisión: se le da el margen de `.c-seccion__titulo` —1.5rem,
 * el de los demás títulos de la ficha pública— y se alinea con la tabla, que
 * es donde están los títulos del resto del sitio. */
.c-mundo__tabla caption {
	text-align: left;
	font-size: 19px;
	font-weight: 600;
	color: var(--tinta);
	margin-bottom: 1.5rem;
}

.c-mundo__tabla th,
.c-mundo__tabla td {
	padding: .45em .6em;
	border-bottom: 1px solid #e5e0d6;
	text-align: left;
	font-weight: 400;
}

.c-mundo__tabla thead th { font-weight: 600; }
.c-mundo__num { text-align: right; font-variant-numeric: tabular-nums; }

.c-mundo__sin,
.c-mundo__fuente {
	margin-top: 1.1rem;
	font-size: 14px;
	color: #5d564c;
}