/* Entrar y contraseña: una caja centrada sobre el color de la marca. */
body.pagina-acceso { background: var(--marca); min-height: 100vh; }
.acceso { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px 16px; }
.acceso-marca img { height: 29px; width: auto; display: block; }
.acceso-caja { width: min(420px, 100%); background: var(--papel); border-radius: 12px; box-shadow: var(--sombra-alta); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.acceso-caja h1 { font-size: 20px; color: var(--marca); }
.acceso-caja .nota { margin: 0; font-size: 13px; }
.acceso-caja label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--texto); }
.acceso-caja label small { font-weight: 400; color: var(--suave); font-size: 12px; }
.acceso-caja input { padding: 9px 10px; border: 1px solid var(--borde-fuerte); border-radius: 6px; font-weight: 400; background: var(--papel); }
.acceso-caja .btn { padding: 10px 14px; text-align: center; text-decoration: none; }
.acceso-caja .btn-link { align-self: center; }
.acceso-error { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--error-suave); border: 1px solid #f5c2bd; color: var(--error); font-size: 13px; }
.acceso-ok { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--ok-suave); border: 1px solid #b7e0c8; color: var(--ok); font-size: 13px; }

.acceso-mostrar { flex-direction: row; align-items: center; gap: 8px; color: var(--suave); font-size: 13px; cursor: pointer; }
.acceso-mostrar input { width: 18px; height: 18px; margin: 0; accent-color: var(--accion); }