@import url("base.css");

body { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
       background: var(--color-fondo); padding: var(--espacio-3); }
.tarjeta { background: #fff; padding: 28px var(--espacio-4); border: 1px solid var(--color-borde); border-top: 6px solid var(--color-primario);
           border-radius: var(--radio); width: 100%; max-width: 24rem; }
h1 { margin: 0; font-size: 1.6rem; }
.sub { margin: 4px 0 var(--espacio-3); color: var(--color-suave); }
.indicacion { margin: 0 0 var(--espacio-2); font-weight: 600; font-size: 1.1rem; }
label { display: block; margin: var(--espacio-3) 0 6px; font-weight: 600; }
input[type=text], input[type=password] { width: 100%; min-height: var(--alto-control); padding: 0 12px; font-size: 1rem;
       border: 2px solid var(--color-borde); border-radius: var(--radio); background: #fff; color: var(--color-texto); }
.campo-clave { display: flex; gap: var(--espacio-2); }
.campo-clave input { flex: 1; min-width: 0; }
.campo-clave .boton { padding: 0 14px; }
form .boton-principal { width: 100%; margin-top: var(--espacio-4); }
.ayuda { margin: 20px 0 0; font-size: .9rem; color: var(--color-suave); }