/* ============================================================ acceso.css — Pantalla de entrada (/entrar) El acceso arma su propio y no pasa por layouts/portada, así que hasta ahora vestía con estilos.css, la hoja de carta náutica que comparte con el libreto de Sleeping Gods. Al adoptar el sistema nuevo se separan: el acceso pasa a apoyarse en los tokens de portada.css —igual que notes.css, ludoteca.css y config.css— y estilos.css queda sirviendo únicamente al libreto, que conserva su estética a propósito. Por eso la vista carga las DOS hojas: portada.css por los tokens y ésta por lo suyo. No se declara ni un color acá. ============================================================ */ body { /* Único color fuera de la paleta: el error de credenciales. Igual que en la ludoteca y en config, el acento no sirve para avisar de un problema. */ --alerta: #e0645a; margin: 0; background: var(--bg); color: var(--tx); font: 400 15px/1.62 var(--fuente); -webkit-font-smoothing: antialiased; } :root[data-tema="claro"] body { --alerta: #c2453c; } .acceso { position: relative; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; } /* El mismo halo del acento que la portada, para que entrar y estar dentro se sientan la misma aplicación. */ .acceso::before { content: ""; position: fixed; inset: 0 0 auto; height: 520px; pointer-events: none; background: radial-gradient(760px 320px at 50% -8%, rgba(58, 214, 230, .10), transparent 70%); } :root[data-tema="claro"] .acceso::before { background: radial-gradient(760px 320px at 50% -8%, rgba(14, 116, 144, .08), transparent 70%); } .acceso-caja { position: relative; width: 100%; max-width: 360px; padding: 30px 26px 26px; border: 1px solid var(--borde); border-radius: var(--r); background: var(--sup); } /* Marca sobre el título: el mismo glifo y el mismo corte que la barra de la aplicación, para que la puerta se reconozca antes de leer nada. */ .acceso-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font-family: var(--fuente-t); font-size: 18px; font-weight: 700; letter-spacing: -.015em; } .acceso-marca span { display: grid; place-items: center; width: 27px; height: 27px; border: 1.6px solid var(--ac); border-radius: 2px; color: var(--ac); flex: none; } .acceso-marca svg { display: block; width: 15px; height: 15px; } .acceso-caja h1 { margin: 0 0 24px; font-family: var(--fuente-t); font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1.06; } .acceso-campo { display: block; margin-bottom: 16px; } .acceso-campo span { display: block; margin-bottom: 7px; color: var(--tx-3); font-family: var(--fuente-m); font-size: 10.5px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; } .acceso-campo input { width: 100%; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--r); background: var(--bg); color: var(--tx); font: inherit; font-size: 15px; transition: border-color .18s ease; } .acceso-campo input:hover { border-color: var(--borde-2); } .acceso-campo input:focus { border-color: var(--ac); outline: 0; } .acceso-campo input:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; } .acceso-error { margin: 0 0 14px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--alerta) 40%, var(--borde)); border-left-width: 2px; border-left-color: var(--alerta); border-radius: var(--r); background: color-mix(in srgb, var(--alerta) 8%, transparent); color: var(--alerta); font-size: 13.5px; } .acceso-recordar { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; color: var(--tx-2); font-size: 13.5px; cursor: pointer; } .acceso-recordar input { accent-color: var(--ac); margin: 0; } .acceso .boton { width: 100%; padding: 12px 16px; border: 1px solid var(--ac); border-radius: var(--r); background: var(--ac); color: var(--ac-tinta); font-family: var(--fuente-m); font-size: 12px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; transition: transform .14s var(--ease), background-color .18s ease; } .acceso .boton:hover { background: color-mix(in srgb, var(--ac) 88%, var(--tx)); } .acceso .boton:active { transform: scale(.98); } .acceso .boton:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; } .acceso.temblor .acceso-caja { animation: temblor .3s; } @keyframes temblor { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } } @media (prefers-reduced-motion: reduce) { .acceso.temblor .acceso-caja { animation: none; } .acceso .boton, .acceso-campo input { transition: none; } .acceso .boton:active { transform: none; } }