/* ═══════════════════════════════════════════════════════════════════════════
c-formulario.css · EL PEGAMENTO DE LOS FORMULARIOS LARGOS
Contrato: design-system/10-contrato-tercera-tirada.md (marcado, pieza 9)
Doctrina de vida: 07-contrato-vida-y-armazon.md §0 (MATERIA)
QUÉ ES
No es una puerta como `.c-acceso` ni una ficha como `.c-precio`: es el
ARMAZÓN que ordena muchos `.c-campo` cuando uno solo no basta — alta,
perfil, testimonio, legal. `.c-formulario` apila secciones; `__fila`
pone 1-2 campos codo con codo; `__acciones` alinea los botones al final.
Ni un campo, ni un botón: esos ya existen y aquí solo se COLOCAN
(regla 08 §3 / R5 de la skill: compone, no redibuja).
LA TESIS EN UNA FRASE
Esto es layout puro, casi sin esencia — la inventario 06 lo dice explícito
(«Esencia por época: No»): el carácter ya le llega gratis, heredado de los
`--e-*` que consumen sus hijos (`.c-campo`, `.c-boton`) y de la propia
apertura de `--e-aire` en la escala comprimida (§1.2 de base.css). Un
fichero que inventara una piel aquí estaría redibujando lo que el sistema
ya resuelve por herencia.
LA IDEA POR ÉPOCA
`.c-formulario` / `__fila` / `__acciones` NO llevan piel: la misma regla
sirve en las cinco (geometría por tokens, el carácter ya viaja con
`--e-aire`/`--e-grosor`/`--e-linea`). La ÚNICA esencia de este fichero vive
en la pieza opcional `__separador` — el filo que parte un formulario largo
en secciones — y ahí sí hay una idea distinta por mundo, la del material
que YA usa el sistema para dividir (DESIGN-SYSTEM §4.4, epoca-1..5.css):
1 · Cueva el trazo no es una regla: es pigmento dado a golpes, roto
2 · Piedra el surco tallado — corte oscuro arriba, bisel claro debajo
3 · Papel el renglón del copista — una veta de tinta, no un borde
4 · Hierro el hilo de latón — filete metálico con su sombra remachada
5 · Cabina el hairline — 1px de cristal, la materia que menos se nota
POR QUÉ `currentColor` Y NO UN TOKEN DE ÉPOCA
`__separador` no sabe si va a caer sobre el taller o sobre una hoja de la
época 3 (§4.4 del manual: dos direcciones de contraste a la vez). En vez de
leer un `--e3-*` ajeno — lo que ataría este fichero al protocolo de
contexto de una época que no es la suya — se apoya en `currentColor`: el
color de texto YA resuelto por quien lo contiene (`--e3-texto` dentro de
una hoja, `--e-tinta` sobre el taller, y así en las otras cuatro) se
hereda solo. Autocontenido de verdad: cero lectura de tokens ajenos a los
18 obligatorios + `--e-grosor`/`--e-radio`, en cualquier época, en
cualquier contexto.
CLASES DE ESTADO
Ninguna. `__fila` y `__acciones` son estructura fija; `__separador` no
reacciona a nada (no es interactivo). Los estados de error/foco/éxito son
de sus hijos (`.c-campo--error`, `.c-boton:focus-visible`, `.c-aviso`) —
este fichero no los toca.
PSEUDOS
Ninguno. No hay materia propia que pintar en `::before`/`::after`: es
pegamento, no una superficie. `__separador` se resuelve con `border`/
`box-shadow` sobre el propio elemento (funciona igual de bien en un
``, que no admite pseudos — la misma trampa que ya documentó
`base.css §11.1` para ``).
ESCOTILLA (no rompe el marcado congelado, igual que `.c-visor__slot`,
DESIGN-SYSTEM §7.4): `` entre dos
`__fila` o dos bloques de campos, para formularios de más de una sección.
TRAMPAS QUE ESTE FICHERO EVITA A PROPÓSITO
· Redeclarar `--e-aire` en crudo para el gap: repite el error §4.6 del
manual (un panel casi se triplica entre Cueva y Cabina). Usa la MISMA
fórmula comprimida que `--e-pad-corto` de base.css — `9px + aire·.12` —,
declarada en un token propio (mismo truco que `--ac-gap` de c-acceso):
así el fichero sigue autocontenido y no depende de que base.css no
cambie el nombre de su derivada.
· Una rejilla `1fr 1fr` fija deja un hueco vacío cuando la página solo
mete un `.c-campo` en la fila. `:only-child` lo estira a las dos
columnas — sin eso, un formulario con filas de 1 y de 2 campos se ve
descuadrado entre sí.
FIX 2026-08-13 · LA CAJA DE ÁREA CERO (é2 y é3 eran invisibles)
Bug real, medido: las pieles de Piedra y Papel ponían `height:0; border:0`
y pintaban SOLO con `box-shadow`. Una `box-shadow` es una copia del propio
border-box, desplazada/difuminada — si ese border-box tiene área cero, la
copia también la tiene, se desplace lo que se desplace. Delta de brillo
medido sobre el fondo ANTES del fix (banco de pruebas, 3 X × ventana Y
exacta por época, luminancia perceptual 0-255): é1 61,2 · **é2 2,9** ·
**é3 12,0** · é4 87,9 · é5 27,7 — los 3 sanos ya pintaban con `border-top`
o con su propia `height` real (nunca dependieron del truco de sombra), los
otros dos eran casi ruido.
Fix: se le da a la caja la altura real que su propia sombra ya asumía —
`height: var(--e-grosor)` en Piedra (coincide con el primer desplazamiento
de su `box-shadow`, así las dos bandas —corte oscuro / bisel claro— quedan
pegadas sin hueco) y `height: max(1px, calc(var(--e-grosor) * .5))` en
Papel (mismo idioma que ya usa `c-tabla.css` para el filo entre renglones;
en é3 da 1px exacto — de paso, el desplazamiento de la sombra deja de ser
un `1px` literal y pasa a ser el mismo token, R1). Cero cambio de idea:
junta tallada y veta de tinta siguen siendo lo que la cabecera de arriba
documenta, solo que ahora existen. Delta DESPUÉS del fix: é1 61,2 (sin
cambio, 0 diff de píxel) · **é2 43,1** · **é3 51,7** · é4 87,9 (sin
cambio) · é5 27,7 (sin cambio) — verificado también con diff de píxel
exacto entre captura rota y arreglada: é1/é4/é5 a 0 píxeles cambiados
(é1 con 3/255 de ruido de redondeo, dentro de tolerancia), é2/é3 con miles
de píxeles cambiados en la franja del separador. 390px sin desbordes en
las 5. Banco de pruebas efímero (scratchpad de sesión, no vive en el repo).
═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
1 · ESTRUCTURA — solo var(--e-*). Ni un color, ni un radio, ni una
duración a mano (la única fórmula fija es el término suelo del gap
comprimido, calcado de base.css §1.2, no un literal de estilo).
═══════════════════════════════════════════════════════════════════════════ */
.c-formulario{
/* la respiración interna, en la escala COMPRIMIDA — nunca `--e-aire` en
crudo aquí dentro: eso es lo que separa formularios ENTRE SÍ y lo pone
la página (§1.2 de base.css). */
--cf-gap: calc(9px + var(--e-aire) * .12);
display: flex;
flex-direction: column;
gap: var(--cf-gap);
width: 100%;
min-width: 0;
}
/* — LA FILA: 1 o 2 c-campo, codo con codo — */
.c-formulario__fila{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--cf-gap);
min-width: 0;
}
.c-formulario__fila > *{ min-width: 0; }
/* un solo campo en la fila ocupa las dos columnas: si no, deja un hueco
vacío a su lado y la fila se ve rota frente a sus hermanas de 2 campos */
.c-formulario__fila > *:only-child{ grid-column: 1 / -1; }
/* ≤640px: la fila colapsa a una columna. Es el único punto de quiebre del
fichero y va fijo (no depende de `--e-aire`): dos casillas de 44px de alto
mínimo (`--e-alto-ctrl`) codo con codo por debajo de 640px se aprietan
antes de que el dedo pueda apuntarlas con fiabilidad, en las cinco épocas
por igual — es un límite de uso, no de estilo. */
@media (max-width: 640px){
.c-formulario__fila{ grid-template-columns: minmax(0, 1fr); }
}
/* — LAS ACCIONES: los botones, alineados y sin desbordar — */
.c-formulario__acciones{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--cf-gap);
min-width: 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
2-6 · LAS 5 PIELES — `__fila` y `__acciones` no las necesitan: layout
puro, todo el carácter les llega por herencia de sus hijos y de
`--e-aire`. La única pieza con piel es `__separador`, y por eso las
cinco secciones viven juntas: no hay materia que separar por época en
nada más.
═══════════════════════════════════════════════════════════════════════════ */
/* — el separador en reposo, época-agnóstico: un hairline de emergencia
igual que el `:root` de emergencia de base.css §1, para que el fichero
no se vea desnudo si algún día se usa sin `data-epoca`. Reset de ``
completo: navegador no debe colar su borde/alto/color por defecto. */
.c-formulario__separador{
display: block;
width: 100%;
height: 0;
margin: 0;
margin-block: calc(var(--cf-gap, 9px) * .3);
border: 0;
border-top: var(--e-grosor) solid var(--e-linea);
background: none;
color: inherit; /* Firefox pinta el con `color`, no con `border-color` */
}
/* 1 · CUEVA — EL TRAZO ROTO
Nunca una regla continua: `epoca-1.css` ya lo dice de `.c-panel__cabecera`
(«las separaciones no son filetes: son trazos de pigmento»). Aquí, sin
una textura nueva, el mismo gesto se consigue con un guión repetido e
irregular en dos longitudes: parece dado a mano, no trazado con regla. */
html[data-epoca="1"] .c-formulario__separador{
height: 3px;
border: 0;
border-radius: var(--e-radio);
background: repeating-linear-gradient(90deg,
color-mix(in oklab, currentColor 42%, transparent) 0 7px,
transparent 7px 12px,
color-mix(in oklab, currentColor 30%, transparent) 12px 17px,
transparent 17px 24px);
}
/* 2 · PIEDRA — EL SURCO TALLADO
El mismo par de líneas que usa `epoca-2.css` en `.c-panel__cabecera`
(corte negro arriba, bisel claro justo debajo): un canal cortado en el
sillar, no una tinta puesta encima.
FIX 2026-08-13: una `box-shadow` sobre una caja de área cero no pinta
nada — el borde-caja copiado por la sombra hereda esa altura cero, se
desplace lo que se desplace (medido: delta de brillo 0,7/255). La caja
necesita altura real para que la sombra tenga algo que copiar; se le da
la del propio primer desplazamiento (`var(--e-grosor)`, ya un token) para
que las dos bandas de sombra queden pegadas una a la otra — el corte
oscuro y el bisel claro justo debajo, sin hueco entre ambos. */
html[data-epoca="2"] .c-formulario__separador{
height: var(--e-grosor);
border: 0;
box-shadow:
0 var(--e-grosor) 0 0 rgba(0, 0, 0, .55),
0 calc(var(--e-grosor) * 2) 0 0 color-mix(in oklab, currentColor 20%, transparent);
}
/* 3 · PAPEL — EL RENGLÓN DEL COPISTA
Una veta de tinta fina, del mismo grosor que `--e3-renglon` en
`vida-progreso`/`epoca-3.css`: no es un borde, es donde la pluma ya ha
pasado. `currentColor` resuelve solo la doble dirección de contraste del
Papel (§4.4): sobre el taller hereda `--e-tinta`, sobre una hoja hereda
`--e3-texto` porque `.c-panel` ya repinta `color` en su propio ámbito.
FIX 2026-08-13: mismo bug que la Piedra — caja de área cero, sombra
invisible (medido: delta de brillo 0,1/255). Altura real con el mismo
idioma que ya usa `c-tabla.css` para el filo fino entre renglones (`max(1px,
calc(var(--e-grosor) * .5))`, nunca por debajo de 1px): en la época 3
(`--e-grosor: 2px`) da 1px exacto — el mismo valor que ya llevaba el
desplazamiento de la sombra, ahora derivado de un token en vez de un
literal suelto (R1). Cero cambio de píxel, la caja ya tiene dónde pintar. */
html[data-epoca="3"] .c-formulario__separador{
height: max(1px, calc(var(--e-grosor) * .5));
border: 0;
box-shadow: 0 max(1px, calc(var(--e-grosor) * .5)) 0 0 color-mix(in oklab, currentColor 24%, transparent);
}
/* 4 · HIERRO — EL HILO DE LATÓN
El filete metálico que usa `epoca-4.css` en `.c-pie` (regla de latón +
sombra de remache debajo): la única piel de las cinco con un literal, y a
propósito — el latón es un color de MATERIAL, no de texto, y por eso no
puede salir de `currentColor` (que es tinta, no metal). El mismo tono que
ya usa `--ac-laton` en `c-acceso.css`: no se inventa una aleación nueva. */
html[data-epoca="4"] .c-formulario__separador{
height: 0;
border: 0;
border-top: 2px solid color-mix(in oklab, #C6A470 55%, transparent);
box-shadow: 0 1px 0 0 rgba(0, 0, 0, .40);
}
/* 5 · CABINA — EL HAIRLINE
Lo que menos se nota de las cinco: 1px de cristal, igual que
`--e5-linea-tenue` separa cabecera y pie del panel. Aquí no hay más
fenómeno que la propia línea. */
html[data-epoca="5"] .c-formulario__separador{
height: 0;
border: 0;
border-top: 1px solid color-mix(in oklab, currentColor 12%, transparent);
}
/* ═══════════════════════════════════════════════════════════════════════════
7 · LA VIDA — no hay. Ninguna pieza de este fichero es interactiva:
`__fila` y `__acciones` no reaccionan a nada por sí mismas (sus hijos ya
tienen su propia vida en `vida-campo.css`/`vida-boton.css`) y
`__separador` es un adorno estático, no un umbral que se cruza. Meterle
una transición sería una idea sin fenómeno detrás (doctrina MATERIA §1:
«si no puedes decir qué fenómeno físico es, no entra») — aquí no lo hay.
═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
8 · 390px — sin desbordes
`__fila` ya colapsa a 1 columna en 640px (por encima de cualquier móvil);
`__acciones` envuelve con `flex-wrap` en vez de desbordar; `min-width:0`
en toda pieza que entra en una rejilla o un flex evita que un valor largo
(un email, un nombre) empuje la caja fuera del marco.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 430px){
.c-formulario__acciones .c-boton{ flex: 1 1 auto; }
}
/* ═══════════════════════════════════════════════════════════════════════════
9 · REDUCED-MOTION — no aplica. Sin §7 no hay nada que congelar: no
existe una sola `transition` ni `animation` en todo el fichero, así que
`prefers-reduced-motion` no tiene ningún estado intermedio que evitar.
═══════════════════════════════════════════════════════════════════════════ */