/* ===== JHS Joyería — formularios, avisos, pantallas de acceso y error (requiere tokens.css) ===== */
/* ===== Formularios ===== */
.campo { display: grid; gap: .45rem; }
.campo label, .campo .campo-label { font: 600 .7rem/1.3 var(--f-etiqueta); letter-spacing: .2em; text-transform: uppercase; color: var(--oro-claro); }
.input { width: 100%; min-height: 48px; padding: .8rem 1rem; border-radius: var(--radio-sm); border: 1px solid rgba(217, 177, 92, .35); background: rgba(26, 11, 14, .45); color: var(--crema); transition: border-color var(--t), box-shadow var(--t); }
.input::placeholder { color: rgba(247, 242, 232, .45); }
.input:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(217, 177, 92, .22); }
.input[aria-invalid="true"] { border-color: var(--error); }
.campo-error { color: #FFB4B4; font-size: .82rem; }
.campo-ayuda { color: rgba(247, 242, 232, .72); font-size: .8rem; }
.check { display: flex; gap: .75rem; align-items: flex-start; font-size: .88rem; line-height: 1.5; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin-top: .1rem; accent-color: var(--oro); }
.clave { position: relative; }
.clave .input { padding-right: 3.2rem; }
.clave-ver { position: absolute; right: .4rem; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--oro-claro); cursor: pointer; display: grid; place-items: center; }
.clave-ver svg { width: 20px; height: 20px; }
.codigo-input { font: 500 1.6rem/1 var(--f-texto); letter-spacing: .5em; text-align: center; }

/* ===== Avisos ===== */
.avisos { display: grid; gap: .6rem; }
.aviso { padding: .85rem 1.1rem; border-radius: var(--radio-sm); border: 1px solid; font-size: .9rem; animation: aparecer 400ms var(--ease); }
.aviso-success { border-color: rgba(62, 142, 94, .7); background: rgba(62, 142, 94, .16); }
.aviso-error { border-color: rgba(224, 122, 122, .7); background: rgba(158, 42, 42, .22); }
.aviso-info { border-color: rgba(217, 177, 92, .5); background: rgba(217, 177, 92, .1); }
@keyframes aparecer { from { opacity: 0; transform: translateY(-6px); } }

/* ===== Pantallas de acceso (ingresar, registro, 2FA) ===== */
.acceso { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 2.5rem 1rem; background: var(--fondo-vino); }
.acceso-tarjeta { width: min(460px, 100%); padding: 2.6rem 2.2rem; border-radius: var(--radio); background: rgba(42, 9, 16, .72); border: var(--linea-oro); box-shadow: var(--sombra); backdrop-filter: blur(6px); animation: subir 600ms var(--ease); }
.acceso-tarjeta.ancha { width: min(560px, 100%); }
.acceso-logo { display: block; width: 150px; margin: 0 auto 1.4rem; }
.acceso-logo img { width: 100%; height: auto; }
.acceso h1 { font-size: clamp(1.9rem, 5vw, 2.3rem); text-align: center; margin-bottom: .4rem; }
.acceso-intro { text-align: center; color: rgba(247, 242, 232, .82); font-size: .92rem; margin-bottom: 1.8rem; }
.acceso-form { display: grid; gap: 1.1rem; }
.acceso-pie { margin-top: 1.6rem; padding-top: 1.2rem; border-top: var(--linea-oro); text-align: center; font-size: .88rem; display: grid; gap: .5rem; }
.qr { width: 210px; margin: 0 auto; padding: 12px; border-radius: var(--radio-sm); background: #fff; }
.secreto { font: 600 1rem/1.4 ui-monospace, Consolas, monospace; letter-spacing: .12em; text-align: center; word-break: break-all; color: var(--oro-claro); background: rgba(26, 11, 14, .5); padding: .8rem; border-radius: var(--radio-sm); }
.codigos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: 1rem; border-radius: var(--radio-sm); background: rgba(26, 11, 14, .55); border: var(--linea-oro); font: 600 1rem/1.4 ui-monospace, Consolas, monospace; letter-spacing: .1em; text-align: center; }
.pasos { display: grid; gap: .7rem; padding-left: 1.3rem; font-size: .9rem; color: rgba(247, 242, 232, .88); }
@keyframes subir { from { opacity: 0; transform: translateY(20px); } }

/* ===== Página de error ===== */
.error-pagina { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 2rem 1rem; background: var(--fondo-vino); }
.error-colibri { width: min(280px, 70vw); margin: 0 auto 1.5rem; animation: flotar 5s ease-in-out infinite; }
.error-codigo { font: 300 clamp(4rem, 14vw, 7rem)/1 var(--f-titulo); }
.error-pagina h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: .4rem 0 .8rem; }
.error-pagina p { max-width: 460px; margin: 0 auto 2rem; color: rgba(247, 242, 232, .85); }
@keyframes flotar { 50% { transform: translateY(-6px); } }


/* Las casillas (autorización de datos, etc.) usan texto normal, no estilo de etiqueta. */
.campo label.check { font: 400 .88rem/1.55 var(--f-texto); letter-spacing: normal; text-transform: none; color: var(--crema); }
.error-pagina .error-codigo { display: inline-block; margin: 0; color: transparent; }
.acceso-motivo { margin: 0 0 1rem; padding: .75rem .9rem; border: 1px solid rgba(217, 177, 92, .45); border-radius: 10px; background: rgba(217, 177, 92, .1); font-size: .88rem; text-align: center; }
/* Transición suave entre páginas (igual que la tienda): ambas páginas deben activarla o el navegador la
   cancela con un error en la consola al pasar de la tienda a Ingresar / Registro y viceversa. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }