/* ═══════════════════════════════════════════════════════════════════════════════════════════
 * CFBC · TOKENS DE DISEÑO · LA ÚNICA FUENTE
 *
 * 🔴 POR QUÉ EXISTE ESTE ARCHIVO.
 *
 * El 11-ago-2026 medí dónde vivían los colores del sistema. Estaban repartidos en **siete
 * ficheros** —tres hojas CSS y cuatro clases PHP— bajo **tres sistemas de nombres en paralelo**
 * (`--csl-*`, `--cfbc-*`, `--cf-*`) más un juego de alias de una letra (`--v`, `--m`, `--b`). Y
 * había **dos verdes de marca distintos** según el subsistema que te tocara: `#0E3B2E` en lo
 * público y el admin, `#14452F` en el Portal y la agenda.
 *
 * Ninguno de los dos era el del diseño. Cambiar un color obligaba a tocar siete sitios, y por eso
 * ya habían empezado a separarse: la deriva no fue un descuido, fue la consecuencia aritmética de
 * tener siete originales.
 *
 * ── DE DÓNDE SALE CADA NÚMERO ─────────────────────────────────────────────────────────────
 *
 * Las tres familias tienen procedencias distintas y conviene no mezclarlas:
 *
 *   MARCA        MEDIDA EN EL LOGO OFICIAL, píxel a píxel (`logo-color.png`, 887×434, biblioteca
 *                de medios id 953). No copiada de un documento: el `CFBC_PRODUCT_DESIGN_SYSTEM`
 *                declara que «el asset oficial del logo es autoridad de marca, no una recreación»
 *                y pide «verificar los tokens contra el logo antes de cerrar el CSS». Se hizo, y
 *                los valores del documento resultaron ser aproximaciones desaturadas:
 *
 *                    púrpura   documento #642C87   →   MEDIDO #600E86   (25.007 px)
 *                    verde     documento #679540   →   MEDIDO #55932C   (19.998 px)
 *                    tinta            —            →   MEDIDO #090909   (42.130 px)
 *
 *   SUPERFICIE   De la LÁMINA del sistema de diseño (`..._VFINAL_CAFATI_MOCKUP.png`, §2 «Paleta
 *                semántica»), no del `.md` que la acompaña. Los dos se contradicen —el `.md` dice
 *                verde `#023E32` y marfil `#FBF9F5`; la lámina dice `#0F3D34` y `#F7F4EE`— y manda
 *                la lámina por dos razones: enseña los swatches JUNTO AL LOGO, que es el criterio
 *                que el propio `.md` fija, y sus valores están a un pelo de lo que el código ya
 *                tenía, o sea menos repintado y menos riesgo.
 *
 *   ESTADO       De la lámina §2, bloque «Estados». Son semánticos y **no decorativos**: el
 *                documento es explícito en que el ámbar significa «pendiente / requiere atención»
 *                y no es un acento de marca. Eso obliga a retirar el dorado que hoy se usa como
 *                acento por todo el sistema — el acento identitario es el PÚRPURA del logo.
 *
 * ── LA REGLA ──────────────────────────────────────────────────────────────────────────────
 *
 * **Ningún otro archivo declara un color de marca.** Los alias de compatibilidad de abajo existen
 * para que las tres hojas antiguas sigan funcionando sin reescribirlas de golpe, pero apuntan
 * aquí: hay un solo original y seis reflejos. El banco lo censa — si aparece un hex nuevo fuera de
 * este archivo, el caso se pone rojo y nombra el fichero.
 * ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root {

	/* ── 1 · MARCA · medido en el logo ─────────────────────────────────────────────────────
	 * Uso CONTROLADO. Estos tres no visten interfaz: identifican. El púrpura es el acento de
	 * expertise y especialidad; el verde del logotipo es del logotipo. Pintar botones con ellos
	 * es exactamente lo que el sistema de diseño prohíbe. */
	--cafati-purpura:        #642C87;
	--cafati-purpura-suave:  #F1EAF5;
	--cafati-logo-verde:     #679540;
	--cafati-logo-tinta:     #090909;

	/* ── 2 · SUPERFICIE · de la lámina ─────────────────────────────────────────────────────
	 * El verde profundo conserva peso PORQUE no se usa en todas partes. La lámina fija la
	 * distribución: 70 % marfil/blanco/menta · 20 % verde · 5 % púrpura · 5 % estados. */
	--cafati-verde:          #023E32;   /* acción, confirmado, disponible, avance */
	--cafati-verde-suave:    #06533E;
	--cafati-verde-accion:   #0B6B57;   /* [guía v2 §3.1] confirmar, disponibilidad, avance */   /* hover y segundo plano de la acción */
	--cafati-menta:          #DCEFE8;   /* calma, superficies positivas, info suave */
	--cafati-menta-tenue:    #F0F7F3;
	--cafati-marfil:         #FBF9F5;   /* el fondo de casi todo */
	--cafati-papel:          #FFFFFF;
	--cafati-grafito:        #1B2521;   /* el texto */
	/* ⚠️ [mb1.464] NO SE TOCA. Lo oscureci un 6 % para que cuadrara la bandeja y el banco de
	   tokens lo caza: este valor esta fijado a la guia v2 §3.1. Cambiar la paleta documentada
	   para que pase un layout mio es aflojar el guardian, no arreglar nada.
	   Lo que si aparecio al medirlo: este gris sobre una patita densa da 3,83 —ya no cumplia
	   AA en produccion, sin bandeja ninguna—. Por eso el texto que se apoya en la textura usa
	   `--cafati-verde-accion`, que la aguanta. */
	--cafati-texto-tenue:    #65716B;
	--cafati-linea:          #DDE4DF;

	/* ── 3 · ESTADO · semántico, nunca decorativo ──────────────────────────────────────────
	 * «Los colores significan algo. No se utilizan simplemente para decorar.» */
	--cafati-exito:          #2E7D52;
	--cafati-info:           #1F6AB1;
	--cafati-atencion:       #D28C2D;   /* pendiente · riesgo · requiere atención. NO es marca. */
	--cafati-problema:       #C85A49;
	--cafati-neutro:         #8A9390;

	/* ── 3b · LOS MISMOS TRES ESTADOS, PERO PARA TEXTO ─────────────────────────────────────
	 * La guía v2 no se contradice; dos de sus reglas multiplicadas sí producen un imposible.
	 * §3.2 fija los tres de arriba y §12 exige AA. Sobre marfil `#FBF9F5` dan **2,65 · 3,98 ·
	 * 3,00**: el ámbar no alcanza ni el mínimo de texto grande. Nadie lo ve leyendo el
	 * documento — hay que calcularlo.
	 *
	 * Los de arriba se quedan como están y siguen siendo los de la marca: BORDE, ICONO y FONDO.
	 * Estos tres son su forma legible, y NO son colores nuevos: es el mismo tono multiplicado
	 * en sus tres canales, lo que conserva matiz y saturación exactos y solo baja la
	 * luminosidad. Se tomó el PRIMERO que cumple, o sea el más vivo posible, con margen a 4.6
	 * para no depender del redondeo — terracota justo cumplía 4,50 y eso es demasiado justo.
	 *
	 *   ámbar     #996621 → 4,67 sobre marfil · 4,91 sobre papel
	 *   terracota #B65242 → 4,67 sobre marfil · 4,91 sobre papel
	 *   neutro    #6C7370 → 4,62 sobre marfil · 4,86 sobre papel
	 *
	 * ⚠️ SOBRE MENTA `#DCEFE8` LOS TRES CAEN A ~4,10 y vuelven a incumplir. Su sitio es el
	 * marfil y el papel. El gate del generador mide cada par fondo+texto, así que si alguien
	 * los pone sobre menta, sale en rojo — no depende de que se lea este comentario. */
	--cafati-atencion-texto: #996621;
	--cafati-problema-texto: #B65242;
	--cafati-neutro-texto:   #6C7370;

	/* ── 3c · RECONOCIMIENTO · [mb1.475] ───────────────────────────────────────────────────
	 * La estrella de una reseña. Existe como token PROPIO por una razón concreta: el reflejo
	 * era pintarla con `--cafati-atencion`, y §3 dice que ese ámbar significa «pendiente ·
	 * requiere atención». Una estrella de valoración en el ámbar de las alertas convierte una
	 * credencial en una advertencia — el mismo error que la guía prohíbe explícitamente.
	 *
	 * Es un oro MÁS CLARO y menos saturado que el ámbar (luz 95% vs 82%, sat 59% vs 79%), así
	 * que a simple vista no se confunden. Sobre el verde profundo da **7,19** (AA de sobra); el
	 * ámbar de alerta daba 4,33, que ni siquiera alcanza para texto normal.
	 *
	 * [mb1.479] AHORA SON DOS NOMBRES PARA UN COLOR, y no es ceremonia: `--cafati-distincion` es
	 * EL COLOR y `--cafati-estrella` es UN USO suyo. Sin separarlos, el día que alguien quiera otra
	 * estrella
	 * cambiaría de paso el filo de las tarjetas de especie y el ✓ de lo elegido, que no tienen nada
	 * que ver. Es el mismo patrón que `--cfbc-riesgo: var(--cafati-atencion)` de más abajo.
	 *
	 * 🔴 SE LLAMA POR LO QUE SIGNIFICA, NO POR SU TONO. `--cafati-oro` fue mi primer nombre y el
	 * caso 5.1 lo tumbó con razón: un token que se llama por su color se acaba usando por su
	 * color, y entonces cambiarlo cambia el sentido de todo lo que lo tocaba. Por eso el ámbar se
	 * llama `atencion`. Aquí lo que significa es DISTINCIÓN: una nota de 4,9 lo es, y el filo de
	 * la tarjeta elegida marca la distinguida.
	 *
	 * 🔴 REGLA DE USO: es SIEMPRE UN FILO — un hilo, un anillo, un glifo pequeño. Nunca un
	 * relleno. Un oro que baña una superficie no se lee caro, se lee barato; eso es justo lo que
	 * Dirección señaló en el verde que inundaba las tarjetas. Y nunca texto sobre claro: sobre
	 * marfil da 1,6. Sobre el verde profundo da 7,19, y ahí sí. */
	--cafati-distincion:     #F2C063;
	--cafati-estrella:       var(--cafati-distincion);

	/* ── 4 · GEOMETRÍA ─────────────────────────────────────────────────────────────────────
	 * Cuatro radios, los de la lámina. El `.md` decía tres (8/14/22) y vuelve a mandar la
	 * lámina, por coherencia con la fuente que sí se puede mirar.
	 *
	 * La densidad cambia por actor —el tutor con más aire, coordinación más compacta— pero **los
	 * radios no**: un radio por módulo es cómo se pierde la unidad. */
	/* 🔴 [mb1.441] AQUI ME EQUIVOQUE Y EL BANCO LO CAZO. Cambie los radios a 6/12/16/24 leyendo
	   el MOCKUP canonico, sin ver que la guia v2 §4 dice 8/14/22 — y este proyecto ya resolvio
	   ese conflicto: cuando la imagen contradice al sistema escrito, MANDA EL SISTEMA. Una
	   imagen se dibuja una vez; el DS es lo que se mantiene. Revertido. */
	--cafati-r-xs:  8px;
	--cafati-r-sm:  8px;
	--cafati-r-md: 14px;
	--cafati-r-lg: 22px;
	/* [mb1.441] Superficies de marca. El purpura del logo casi no se usaba fuera del sello de
	   validacion; estos lo traen a los fondos sin que compita con el verde de accion. */
	--cafati-purpura-tenue:    #FAF6FC;
	/* [mb1.464] LA BANDEJA. Purpura de marca al 6 % sobre marfil, servida al 86 % de opacidad
	   para que la textura de patitas cruce atenuada (1,037 frente a 1,263 fuera de ella).
	   NO es glassmorphism: no hay `backdrop-filter`, hay un color con alfa. */
	--cafati-bandeja:          rgba(242, 237, 238, .86);
	/* [mb1.453] Los dos hondos existen por una sola razon: llevar TEXTO BLANCO encima y llegar
	   a AA. El verde del logo da 3,53 con blanco y la terracota 4,19; ninguno pasa. Bajados,
	   dan 4,60 y 4,56 sin dejar de ser el mismo color. */
	--cafati-logo-verde-hondo: #598037;
	--cafati-problema-hondo:   #BE5645;
	/* 🔴 [mb1.453] Aqui vivian --cafati-degradado-marca y --cafati-degradado-calido. §13 no
	   quiere degradados, y ademas no los consumia ninguna hoja: naci muerto y prohibido. */
	/* 🔴 [mb1.491] EL ANILLO DE FOCO ES PÚRPURA, y es una decisión de marca, no de gusto.
	 * Dirección: «el color de relleno yo lo usaría como un morado tenue para seguir la línea de
	 * la marca» · «más femenino» — y §8.0b de la skill ya lo pedía. El púrpura es EL acento de
	 * marca (§1 de aquí arriba) y el foco lo lleva a cada interacción sin pesar en reposo.
	 *
	 * ⚠️ NO SE DEBILITA NADA. Sobre el papel de la página el verde al 22% daba **1,39** y este
	 * púrpura al 26% da **1,57**: cambia el tono, no la visibilidad. Y el radio baja de 4 a 3px
	 * porque un halo ancho es lo que hacía pesado el conjunto; la densidad lo compensa.
	 *
	 * ⚠️ SOLO AFECTA AL MUNDO DEL TUTOR: los seis sitios que lo usan viven en `cfbc.css`. El
	 * portal veterinario y el panel no lo tocan y siguen en verde, que es su registro. */
	/* [mb1.493] Direccion: «el morado mas tenue». Baja de 26% a 20%, que sigue por encima del
	 * 1,39 que daba el verde anterior — mas tenue sin caer por debajo de lo que ya habia. */
	--cafati-anillo-foco:      0 0 0 3px color-mix(in srgb, var(--cafati-purpura) 20%, transparent);

	/* ── 4b · EL ANCHO DE LA TARJETA · en PÍXELES, y el motivo importa ─────────────────────
	 *
	 * 🔴 [0.4.0-mb1.10] AQUÍ HABÍA UN `34rem`, Y EN PRODUCCIÓN VALÍA 340 px, NO 544.
	 *
	 * El tema declara `html { font-size: 10px }` —el truco viejo de «1rem = 10px» para hacer
	 * cuentas mentales—, así que dentro del sitio un `rem` mide diez píxeles y no dieciséis. La
	 * tarjeta de la pantalla de estado salió a 340 px de ancho: los dos campos del formulario, que
	 * a partir de 768 px van uno al lado del otro, se apilaron, y la tarjeta quedó como una
	 * columna estrecha en medio de una pantalla de 1536.
	 *
	 * Y lo peor no es el ancho: la pantalla de CALIFICACIÓN se sirve sin el tema, así que ahí el
	 * `rem` valía 16 px y la misma tarjeta medía 544. **Las dos pantallas que existen para
	 * parecerse tenían anchos distintos**, y la causa era una unidad relativa a algo que no
	 * controlamos.
	 *
	 * La regla que sale de esto: **una superficie que se pinta dentro de un tema ajeno no puede
	 * medirse en `rem`.** El `rem` es relativo a la raíz, y la raíz es del tema. Los píxeles no le
	 * piden permiso a nadie. (En `cfbc-admin.css` sí quedan `rem`, y ahí está bien: wp-admin no
	 * toca el tamaño de la raíz y el panel debe escalar con las preferencias de WordPress.) */
	--cafati-caja: 544px;

	/* ── 5 · ESPACIADO · base 8 ────────────────────────────────────────────────────────────
	 * La densidad cambia por actor. Los tokens no. */
	--cafati-e-1:  4px;
	--cafati-e-2:  8px;
	--cafati-e-3: 16px;
	--cafati-e-4: 24px;
	--cafati-e-5: 32px;
	--cafati-e-6: 48px;
	--cafati-e-7: 64px;

	/* ── 6 · TIPOGRAFÍA ────────────────────────────────────────────────────────────────────
	 * Dos familias con roles separados, y la separación importa:
	 *
	 *   Inter     interfaz operativa — navegación, botones, formularios, tablas, métricas,
	 *             Portal Veterinario y Coordinación.
	 *   Fraunces  capa editorial — titulares de marketing, citas, mensajes de marca. **Nunca**
	 *             en tablas, formularios ni flujos operacionales densos.
	 *
	 * 🔴 NO SE CARGA NINGUNA FUENTE EXTERNA DESDE AQUÍ, y es deliberado. Añadir una petición a un
	 * servidor de terceros en cada visita de un sitio en producción es una decisión de
	 * rendimiento y de privacidad, no de estilo, y no se toma de refilón dentro de un archivo de
	 * tokens. Mientras tanto la pila de reserva es de fuentes del sistema y se ve bien: el día que
	 * se decida servir Inter y Fraunces —autoalojadas, que es lo que corresponde— basta añadir el
	 * `@font-face` y estas variables ya apuntan a ellas.
	 *
	 * Los números tabulares sí se activan ya: en tablas de horas y de dinero, que una columna no
	 * cuadre porque el «1» es más estrecho que el «8» es un defecto de lectura, no un detalle. */
	--cafati-fuente:     Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	                     "Helvetica Neue", Arial, sans-serif;
	--cafati-fuente-ed:  Fraunces, Georgia, "Times New Roman", serif;
	--cafati-tabular:    "tnum" 1, "lnum" 1;

	/* ── 7 · SOMBRAS · muy poco ────────────────────────────────────────────────────────────
	 * Solo elevación de acción, modal y superficie flotante independiente. La jerarquía la hacen
	 * la tipografía, el espacio, las líneas y la agrupación — no las cajas dentro de cajas. */
	/* ══ [mb1.720] LA PALETA DE «SU PÁGINA» ══════════════════════════════════════════════════
	 *
	 * Tres tonos nuevos de morado y tres de oro. Los morados existen para poder usar el color de
	 * marca como SUPERFICIE y no solo como sello: uno hondo para texto y degradados, uno medio
	 * para el segundo tramo del degradado, y una línea para contornear lo que va en morado suave.
	 *
	 * `--cafati-purpura-hondo` da 11,6 con papel y `--cafati-purpura` 9,0: los dos llevan texto.
	 * `--cafati-purpura-media` da 5,9 — suficiente para texto grande y para ser el extremo claro
	 * de un degradado que lleva blanco encima, no para prosa.
	 *
	 * 🔴 Y NO ENTRA NINGÚN TONO NUEVO PARA LA DISTINCIÓN. Mi primera versión añadió tres —fondo,
	 * línea y un dorado hondo— y `--cafati-distincion` ya existía desde mb1.479 con su regla
	 * escrita tres párrafos más arriba: *es SIEMPRE UN FILO, nunca un relleno*. Le había puesto un
	 * fondo dorado al sello de validación, que es exactamente lo que esa regla prohíbe y lo que
	 * Dirección señaló hoy del verde: un color que INUNDA no se lee caro. */
	--cafati-purpura-hondo:  #4A1F65;
	--cafati-purpura-media:  #7E43A3;
	--cafati-purpura-linea:  #E4D6EC;

	/* Los degradados de la ficha. Se declaran aquí y no en la hoja para que la página no pueda
	   inventarse ninguno: un degradado suelto es un color literal con más pasos. */
	--cafati-p9-corona:  linear-gradient(180deg, var(--cafati-purpura-suave) 0%, var(--cafati-papel) 100%);
	--cafati-p9-elegido: linear-gradient(135deg, var(--cafati-purpura-hondo) 0%, var(--cafati-purpura-media) 100%);
	--cafati-p9-accion:  linear-gradient(135deg, var(--cafati-verde) 0%, var(--cafati-verde-accion) 100%);
	--cafati-p9-regla:   linear-gradient(90deg, var(--cafati-purpura-linea) 0%, transparent 100%);

	/* Elevación con COLOR, no gris: una sombra neutra sobre una superficie de marca la apaga. */
	--cafati-sombra-morada: 0 6px 18px rgba(100, 44, 135, .18);
	--cafati-sombra-verde:  0 6px 18px rgba(2, 62, 50, .22);

	--cafati-sombra-sm: 0 1px 2px rgba(27, 37, 33, .05);
	--cafati-sombra-md: 0 2px 4px rgba(27, 37, 33, .06), 0 8px 24px rgba(27, 37, 33, .07);
	--cafati-sombra-lg: 0 8px 16px rgba(27, 37, 33, .08), 0 24px 48px rgba(27, 37, 33, .10);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
 * ALIAS DE COMPATIBILIDAD
 *
 * Las tres hojas antiguas siguen nombrando sus variables como siempre; lo que cambia es que ya no
 * las DECLARAN, las reciben. Se migra así y no reescribiendo las tres de golpe porque un cambio
 * visual grande y un cambio estructural grande en el mismo despliegue son imposibles de separar
 * cuando algo sale mal — y hoy ya van dos veces que una corrección rompe lo de al lado.
 *
 * 🔴 AQUÍ ES DONDE LOS DOS VERDES SE VUELVEN UNO. `--csl-verde` valía `#0E3B2E` y `--cfbc-verde`
 * `#14452F`; ahora los dos son `--cafati-verde`. Es un cambio VISIBLE y es el que se buscaba: la
 * unificación es el objetivo, no un efecto colateral.
 *
 * El dorado (`--csl-dorado`, `--cfbc-bronce`) se mapea al ÁMBAR DE ESTADO por ahora, para no dejar
 * ninguna referencia rota. No es su destino: donde hoy hace de acento de marca tiene que pasar a
 * púrpura, y eso es trabajo de pantalla en pantalla, no de un alias.
 * ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root {
	/* Familia `--csl-*` (público y admin) */
	--csl-verde:     var(--cafati-verde);
	--csl-verde-2:   var(--cafati-verde-suave);
	--csl-tinta:     var(--cafati-grafito);
	--csl-crema:     var(--cafati-marfil);
	--csl-blanco:    var(--cafati-papel);
	--csl-gris-1:    var(--cafati-texto-tenue);
	--csl-gris-2:    var(--cafati-linea);
	--csl-exito:     var(--cafati-exito);
	--csl-alerta:    var(--cafati-atencion);
	--csl-coral:     var(--cafati-problema);
	--csl-rojo-osc:  var(--cafati-problema);
	--csl-dorado:    var(--cafati-atencion);   /* provisional · ver el recuadro */

	/* Familia `--cfbc-*` (Portal Veterinario) */
	--cfbc-verde:        var(--cafati-verde);
	--cfbc-verde-claro:  var(--cafati-verde-suave);
	--cfbc-marfil:       var(--cafati-marfil);
	--cfbc-papel:        var(--cafati-papel);
	--cfbc-texto:        var(--cafati-grafito);
	--cfbc-tenue:        var(--cafati-texto-tenue);
	--cfbc-linea:        var(--cafati-linea);
	/* [mb1.663] El morado de marca, que el agendador necesita para el estado «estás encima»:
	 * es el único color que puede significarlo sin pisar al verde, que aquí significa ELEGIDO.
	 * ⚠️ Se declara porque se usa: un `var()` sin declarar no falla, **descarta la regla entera
	 * en silencio** — el rollover no se vería y la hoja no se quejaría. */
	--cfbc-purpura:      var(--cafati-purpura);
	--cfbc-ok:           var(--cafati-exito);
	--cfbc-riesgo:       var(--cafati-atencion);
	--cfbc-accion:       var(--cafati-problema);
	--cfbc-bronce:       var(--cafati-atencion);   /* provisional · ver el recuadro */
	/* 🔴 No es color, pero se declaraba junto a los colores y se fue con ellos. La tenía tres
	 * usos vivos en el Portal, así que borrarla habría dejado tres sombras sin definir —el
	 * navegador no avisa: simplemente no dibuja—. Lo cazó un barrido de «variables usadas y no
	 * declaradas» que ahora es un caso del banco, porque esto va a volver a pasar. */
	--cfbc-sombra:       var(--cafati-sombra-sm);

	/* Familia `--cf-*` (agenda y disponibilidad, incrustadas en PHP) */
	--cf-verde:   var(--cafati-verde);
	--cf-marfil:  var(--cafati-marfil);
	--cf-txt:     var(--cafati-grafito);
	--cf-linea:   var(--cafati-linea);
	--cf-ok:      var(--cafati-exito);
	--cf-ambar:   var(--cafati-atencion);
	--cf-rojo:    var(--cafati-problema);
	--cf-bronce:  var(--cafati-atencion);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
 * EL MARCO DE APLICACIÓN · lo que hace que dos pantallas parezcan el mismo producto
 *
 * Vive aquí, junto a los tokens, porque lo comparten superficies de tres archivos distintos: la
 * pantalla de calificación, la página de estado del tutor y lo que venga del frontend. Si cada una
 * se dibujara su propia tarjeta, en tres semanas habría tres tarjetas distintas — exactamente lo
 * que pasó con la paleta, que acabó en siete ficheros con dos verdes.
 *
 * Nace de una observación de Rodolfo mirando la página de estado: «tiene pinta de ser una entrada
 * y no una página». La página estaba bien —es una `page`, contenido limpio, plantilla correcta—;
 * lo que faltaba era esto. Sin marco, un formulario en una plantilla sin cabecera **es** el cuerpo
 * de un artículo, y se lee como tal.
 * ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* 🔴 [0.4.0-mb1.12] `box-sizing` SE DECLARA. Estaba llegando gratis, y no de donde yo creía.
 *
 * La tarjeta de la pantalla de estado medía 544 px clavados y la de calificación 586 —los mismos
 * 544 más el relleno y el borde—. La diferencia: dentro del sitio, el TEMA declara un
 * `* { box-sizing: border-box }` global y mi tarjeta lo aprovechaba sin saberlo; fuera del tema no
 * hay quien lo declare y la tarjeta vuelve a `content-box`.
 *
 * O sea que el ancho de una superficie nuestra dependía de un reset ajeno. Es el mismo error que
 * el `rem`, con otra propiedad: **heredar del entorno lo que debería traer el marco.** */
.cfbc-app, .cfbc-app *, .cfbc-app__caja { box-sizing: border-box; }

.cfbc-app {
	min-height: 100vh;
	padding: 24px 16px 48px;
	background: var(--cafati-marfil);
	color: var(--cafati-grafito);
	font-family: var(--cafati-fuente);
	line-height: 1.55;
	-webkit-text-size-adjust: 100%;
}

.cfbc-app__caja {
	max-width: var(--cafati-caja, 544px);
	margin: 0 auto;
	background: var(--cafati-papel);
	border: 1px solid var(--cafati-linea);
	border-radius: var(--cafati-r-md);
	padding: 24px 20px 28px;
	box-shadow: var(--cafati-sombra-md);
}

.cfbc-app__marca  { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.cfbc-app__logo   {
	display: grid; place-items: center;
	width: 34px; height: 34px;
	border: 2px solid var(--cafati-purpura);
	border-radius: var(--cafati-r-xs);
	color: var(--cafati-verde);
	font-weight: 700; font-size: 18px;
}
/* Cuando hay logo de sitio, el recuadro sobra: la imagen ya trae su propia forma y su color, y
 * meterla en un marco morado la convierte en un sello. Se conserva el alto para que las dos
 * variantes ocupen exactamente lo mismo y la tarjeta no cambie de altura según haya logo o no. */
/* 🔴 [mb1.77] EL SELECTOR LLEVA EL PADRE, Y NO ES ESTILO: ES LO QUE HACE QUE GANE.
 *
 * Con `.cfbc-app__logo--img` a secas —especificidad (0,1,0)— esta regla la pisaba
 * `.cfbc-scope img{max-width:100%;height:auto}` de `cfbc.css`, que es (0,1,1). Durante mucho tiempo
 * no se notó porque `.cfbc-scope` no era antepasado de esta tarjeta; al servir «Estado de tu
 * reserva» con documento propio, el `<body>` PASÓ a ser `.cfbc-scope` y el logo saltó de 34 px de
 * alto a 246: ocupaba la tarjeta entera.
 *
 * Lo encontró el recorrido en producción, no la suite. Y el arreglo ya estaba escrito tres bloques
 * más abajo: el logo de la cabecera usa `.cfbc-nav__marca .cfbc-nav__logo--img` por este MISMO
 * motivo. Aquí faltaba el mismo cuidado. */
.cfbc-app__marca .cfbc-app__logo--img {
	/* `max-width` acota el hueco: un logo muy apaisado —o uno que no carga— no puede
	 * empujar el nombre fuera de la tarjeta. */
	width: auto; height: 34px; max-width: 160px;
	border: 0; border-radius: 0;
	object-fit: contain;
}
.cfbc-app__nombre { color: var(--cafati-verde); font-weight: 700; letter-spacing: .01em; }

/* 🔴 [0.4.0-mb1.10] LA FAMILIA Y EL PESO SE DECLARAN, NO SE HEREDAN.
 *
 * `.cfbc-app` pone la fuente y los hijos la heredan… salvo los que el tema ataca por etiqueta. El
 * tema define `h1 { font-family: Hind; font-weight: 200 }`, y un selector de etiqueta le gana a la
 * herencia siempre —la herencia solo actúa donde NADA declara la propiedad—. Resultado medido en
 * producción: el título salía en Hind de peso 200, fino y de otra familia, mientras la pantalla de
 * calificación —servida sin tema— lo pintaba en la pila del sistema en negrita. Otra vez dos
 * pantallas distintas donde tenía que haber una.
 *
 * Lo mismo con los campos: el tema declara `input { font-family: Arial }` y ganaba por lo mismo. */
.cfbc-app__h1 {
	margin: 0 0 16px;
	font-family: var(--cafati-fuente);
	font-size: 25px; font-weight: 700; line-height: 1.2;
	color: var(--cafati-verde);
}
.cfbc-app input, .cfbc-app select, .cfbc-app textarea, .cfbc-app button {
	font-family: var(--cafati-fuente);
}

/* Dentro del marco, el ámbito público pierde su ancho y su relleno: ya se los pone la caja. */
.cfbc-app .cfbc-scope { max-width: none; padding: 0; margin: 0; }

@media (max-width: 380px) {
	.cfbc-app        { padding: 16px 12px 40px; }
	.cfbc-app__caja  { padding: 18px 16px 22px; }
	.cfbc-app__h1    { font-size: 22px; }
}

/* Contraste alto: se sube el contraste de las líneas y del texto tenue, que son lo primero que
 * desaparece. Se hereda el criterio del Portal, que ya lo tenía bien resuelto. */
@media (prefers-contrast: more) {
	:root {
		--cafati-linea:       #9A9284;
		--cafati-texto-tenue: #4A453C;
	}
}