/* ═══════════════════════════════════════════════════════════════════════════
c-acceso.css · LA PUERTA DE CADA ÉPOCA
Contrato: design-system/08-contrato-segunda-tirada.md §2 (marcado) + §3 (reglas)
Doctrina de vida: 07-contrato-vida-y-armazon.md §0 (MATERIA)
QUÉ ES
La caja de entrar. Entrar en la academia no es rellenar dos casillas: es
CRUZAR UN UMBRAL. Por eso el componente no es un panel con campos dentro —
es una PUERTA, y cada época tiene la suya:
1 · Cueva la boca de la cueva, con la hoguera dentro
2 · Piedra el dintel: pórtico de jambas talladas y antorchas
3 · Papel la llave y la cerradura: la ficha de acceso del taller
4 · Hierro la compuerta: marco remachado de escotilla
5 · Cabina la esclusa de luz: el filo recorre el perímetro
LA IDEA ÚNICA (doctrina §0.5: una idea por época, como máximo)
`:focus-within` = ALGUIEN ESTÁ ENTRANDO. La puerta lo nota y te recibe. Es
un solo fenómeno por época, y siempre el mismo verbo: la puerta se ABRE.
`.is-error` = la puerta te RECHAZA.
LO QUE ESTE FICHERO **NO** HACE
No viste los campos. `.c-campo` ya sangra tinta, ya se aviva y ya se enciende
(`vida/vida-campo.css`), y `.c-boton` ya tiene su chispa. Aquí se compone: se
colocan, se les da un sitio y se les enciende el MARCO. Ni una regla cambia
el aspecto de una pieza validada (contrato 08 §3).
Única excepción declarada y necesaria: la época 3 (§4.0), donde la hoja crema
es un CONTEXTO DE LUZ invertido y por tanto redeclara tokens `--e-*` en su
propio ámbito. No se toca ni un selector ajeno: se les cambia la luz de la
habitación, no la piel.
AUTOCONTENIDO
Estructura solo con `var(--e-*)`. Pieles y vida bajo `html[data-epoca="N"]`.
Ornamentos SVG propios, en `data:`, con prefijo `--ac-`: este fichero no
depende de ningún `--e1-*`…`--e5-*` ajeno (el Papel se está rehaciendo).
Cero JS, cero recursos remotos, cero fuentes nuevas.
MARCADO (contrato 08 §2, congelado)
═══════════════════════════════════════════════════════════════════════════ */
/* El ángulo de la esclusa (época 5). Se registra para poder ANIMARLO: sin
`@property` un `` en un `conic-gradient` no interpola y el trazo daría
un salto. Si el motor no lo soporta, el valor inicial sigue siendo válido y
el filo simplemente no viaja: la puerta se enciende igual. */
@property --ac-ang{
syntax: "";
inherits: false;
initial-value: 0deg;
}
/* ═══════════════════════════════════════════════════════════════════════════
1 · ESTRUCTURA — la geometría de la puerta. Ni un color a mano.
═══════════════════════════════════════════════════════════════════════════ */
.c-acceso{
/* — el tiempo, ley §0.3: entra en `--e-vel`, sale en `--e-vel × 3.5` — */
--ac-in: var(--e-vel);
--ac-out: calc(var(--e-vel) * 3.5);
/* — la respiración interna de la puerta —
NO se usa `--e-gap` en crudo: `--e-aire` recorre 12→40px y cuatro huecos
en crudo abrían un 22% de diferencia de alto entre la Cueva y la Cabina,
por encima del ±20% del contrato. Con este factor (·.12) la horquilla
medida cae a +15,4%. Mismo truco que base.css §1.2. */
--ac-gap: calc(9px + var(--e-aire) * .12);
--ac-pad: var(--e-pad-caja);
/* La puerta no es más ancha que un hombro: una columna de entrar. */
--ac-ancho: 27rem;
position: relative;
isolation: isolate; /* los ganchos ::before/::after de §1.1 */
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--ac-gap);
width: 100%;
max-width: var(--ac-ancho);
min-width: 0;
margin-inline: auto;
padding: var(--ac-pad);
border: var(--e-grosor) solid var(--e-linea);
border-radius: var(--e-radio);
background: var(--e-sup);
color: var(--e-tinta);
font-family: var(--e-cuerpo);
}
/* 1.1 · Los dos ganchos de la puerta. `::before` = MATERIA (el umbral: roca,
piedra, fibra, chapa, cristal) y `::after` = LUZ (lo que se enciende cuando
entras). Misma gramática que base.css §11, pero declarada aquí porque
`.c-acceso` no está en su lista de ganchos. Ninguno de los dos aporta caja:
son capas absolutas, y por eso el ornamento NUNCA dispara la geometría. */
.c-acceso::before,
.c-acceso::after{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
}
.c-acceso::before{ z-index: -1; } /* encima del fondo, debajo de los campos */
.c-acceso::after { z-index: -1; } /* la luz del umbral baña, no tapa */
.c-acceso__titulo{
margin: 0;
font-family: var(--e-display);
font-weight: var(--e-peso-display);
font-size: clamp(21px, .9rem + 1.4vw, 27px);
line-height: 1.14;
letter-spacing: var(--e-tracking);
color: var(--e-tinta);
}
/* 1.2 · EL MECANISMO. Las épocas que tienen cierre visible (la cerradura del
Papel, el volante del Hierro) lo cuelgan de los pseudos del título, pero
ANCLADO AL CANTO DE LA PUERTA — `.c-acceso` es el ancestro posicionado más
cercano, así que `position:absolute` resuelve contra la puerta, no contra el
renglón. Consecuencia buscada: el ornamento vive en el margen y no empuja ni
un píxel de la caja (regla del ±20% medida contra un form desnudo). */
.c-acceso__titulo::before,
.c-acceso__titulo::after{
content: none; /* solo existe donde la época lo enciende */
position: absolute;
pointer-events: none;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
z-index: 2;
}
/* 1.3 · Las piezas prestadas. Solo COLOCACIÓN: ni un color, ni un borde, ni una
sombra suya se toca aquí. El botón ocupa el ancho porque una puerta tiene una
hoja, no un pomo en una esquina. (`c-boton--bloque` es del contrato 08 §2 y
lo declarará su dueño; esta regla es local a la puerta y no lo suplanta.) */
.c-acceso .c-boton{
width: 100%;
margin-top: calc(var(--ac-gap) * .3);
}
.c-acceso__ayuda{
margin: 0;
font-family: var(--e-cuerpo);
font-size: 13px;
line-height: 1.45;
text-align: center;
color: var(--e-tinta-2);
}
.c-acceso__ayuda a{
color: inherit;
text-decoration-line: underline;
text-decoration-thickness: from-font;
text-underline-offset: .22em;
transition: color var(--ac-out) var(--e-curva);
}
.c-acceso__ayuda a:hover{
color: var(--e-tinta);
transition-duration: var(--ac-in);
}
.c-acceso__ayuda a:focus-visible{ outline-color: var(--e-acento); }
/* 1.4 · LA PUERTA RECHAZA — `.is-error`
─────────────────────────────────────────────────────────────────────────
Contrato de la clase: la pone el servidor en el `