/* ============================================================================ view-acceso.css — la lámina de ACCESO y la lámina de ESTADO (404/403/500…). Todo lo genérico vive en app.css; aquí sólo lo que estas dos necesitan. Tesis aplicada al acceso: es la primera impresión del producto y su único trabajo son dos campos y un botón. Se entra por una hoja tranquila —marca, una línea de qué es esto, el formulario— y no por una hoja de especificaciones. QUÉ SE FUE EN ESTA TANDA (y por qué el archivo mide la mitad) · El filo azul de 2 px como adorno. Estaba en el sello de la marca (era el emblema), en el resumen de error del formulario y en el bloque de demasiados intentos. Esa marca significa UNA cosa en todo el producto —un mensaje sin leer, dentro del registro— y con cinco significados no significa ninguno. El sello se dice ahora con la caja y la letra; el error, con el color semántico que ya tenía. · La cinta de fecha y hora, el expediente del servicio y la ficha del estado, con sus reglas propias. · Doscientas líneas de piezas que ninguna plantilla dibuja: el selector de ámbito, el separador con rótulo, la llave de seguridad con su latido, el bloque de intentos, el andamio de demostración y la transición entre las tres pantallas del prototipo. Ninguna de las tres pantallas existe: hay una. ========================================================================= */ /* ========================================================================== 1. LÁMINA — el armazón de la página -------------------------------------------------------------------------- El centrado se hace con `margin: auto` DENTRO de un flex: si sobra espacio centra; si falta, los márgenes automáticos valen 0 y la página se desplaza con normalidad. Nunca hay contenido inalcanzable (el defecto que la versión en producción tiene en teléfono acostado: pierde ~141 px por lado). ========================================================================== */ .acceso { display: flex; min-height: 100dvh; /* El andamio del prototipo es fijo abajo: se le reserva sitio. */ padding: var(--e-8) var(--e-6) calc(var(--e-16) + var(--e-4)); } .lamina { margin: auto; width: min(60rem, 100%); display: grid; /* El aire es el material: entre bloques mayores, --aire-bloque. */ gap: var(--aire-bloque); grid-template-columns: minmax(0, 1fr); grid-template-areas: "marca" "tarjeta" "pie"; align-content: start; } .lamina__marca { grid-area: marca; max-width: 34rem; } .lamina__tarjeta { grid-area: tarjeta; } .lamina__pie { grid-area: pie; max-width: 34rem; } @media (min-width: 64rem) { .lamina { grid-template-columns: minmax(0, 1fr) 24rem; grid-template-rows: auto 1fr; grid-template-areas: "marca tarjeta" "pie tarjeta"; gap: var(--aire-tema) var(--e-16); } /* La tarjeta se ciñe a su contenido: cada pantalla tiene su propio alto. */ .lamina__tarjeta { align-self: start; } } /* La lámina de un estado (404, 403, 500…) no tiene formulario: una sola columna, más estrecha, y las salidas debajo del texto. Va DESPUÉS de la consulta de arriba para ganarle sin subir la especificidad. */ .lamina--sola { width: min(40rem, 100%); grid-template-columns: minmax(0, 1fr); grid-template-areas: "marca" "pie"; gap: var(--aire-bloque); } /* ========================================================================== 2. MARCA — un solo logotipo para todo el sistema Es el mismo bloque tipográfico de la barra de la aplicación (.barra__logo) sobre un sello cuadrado. El distintivo del producto y el de la marca son la misma pieza. En la lámina de estado el sello lleva el símbolo del estado. ========================================================================== */ .marca { display: flex; align-items: center; gap: var(--e-4); } .marca__sello { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; flex: 0 0 auto; background: var(--superficie-1); border: 1px solid var(--regla-media); border-radius: var(--radio-2); color: var(--txt-1); font-size: var(--txt-lg); font-weight: var(--peso-semi); letter-spacing: -0.02em; line-height: 1; } .marca__sello svg { color: var(--txt-2); } .marca__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .marca .barra__logo { font-size: var(--txt-lg); } /* .barra__sufijo se oculta en móvil cuando vive dentro de la barra de la aplicación; aquí es la firma institucional y debe verse siempre. */ .marca .barra__sufijo { display: block; } /* La jerarquía la hace el tipo, no una barra de color al filo. */ .lamina__titulo { margin-block-start: var(--e-8); font-size: var(--txt-xl); font-weight: var(--peso-semi); letter-spacing: -0.015em; color: var(--txt-1); } .lamina__entrada { margin-block-start: var(--e-3); max-width: 46ch; font-size: var(--txt-md); line-height: var(--interlinea-prosa); color: var(--txt-2); } .legal { max-width: 52ch; font-size: var(--txt-2xs); color: var(--txt-3); } /* ========================================================================== 3. TARJETA — el comprobante Es CONTENEDOR DE CONSULTA: lo de dentro se adapta al ancho de la tarjeta, no al de la ventana. En una lámina de dos columnas la ventana no dice nada útil sobre este bloque. Sin sombra: no flota, se apoya. ========================================================================== */ .tarjeta { container-type: inline-size; container-name: acceso; background: var(--superficie-1); border: 1px solid var(--regla-fina); border-radius: var(--radio-3); } .tarjeta__cuerpo { padding: var(--panel-relleno); } /* ========================================================================== 4. FORMULARIO ========================================================================== */ .forma { display: flex; flex-direction: column; gap: var(--e-4); } .forma__campos { display: flex; flex-direction: column; gap: var(--e-5); min-inline-size: 0; } /* (La regla `[hidden] { display: none !important }` vive en app.css §1 y gana a cualquier componente con display propio: las repeticiones locales que había aquí se retiraron en la integración del 2026-08-09.) */ /* Campo con botón dentro (mostrar contraseña). */ .campo__envoltura { position: relative; display: flex; min-width: 0; } .campo__envoltura .campo__control { flex: 1 1 auto; padding-inline-end: 2.75rem; } .campo__boton { position: absolute; inset-inline-end: 2px; inset-block: 2px; display: grid; place-items: center; inline-size: 2.25rem; padding: 0; background: none; border: 0; border-radius: var(--radio-1); color: var(--txt-3); cursor: pointer; transition: color var(--dur-1) var(--curva-estandar), background var(--dur-1) var(--curva-estandar); } .campo__boton:hover { color: var(--txt-1); background: var(--hover-fila); } .forma__recordar { display: flex; align-items: center; gap: var(--e-3); font-size: var(--txt-2xs); color: var(--txt-2); cursor: pointer; } /* En el acceso la casilla no compite con nada: siempre visible. */ .forma__recordar .casilla { opacity: 1; } /* ========================================================================== 5. SALIDAS DE UN ESTADO La primaria primero; las alternativas bajan solas cuando no caben. Vivían en un