/* acceso.css — la tarjeta del /acceso (login sólo-SSO de Google). Fuente única (U8).
   Extraída del bloque idéntico de deposito.css, design.css y rrhh.css (calcos declarados del
   /acceso del LIMS). Va con templates/_shared/_acceso_google.html.

   Qué cambia una app, en su hoja y sin repetir el bloque:
     --acceso-ancho   ancho máximo de la tarjeta. Default 360px (cashflow: 380px).

   Absorbe una diferencia: el hover del botón de Google anima con tokens (--dur-base) y no con
   .18s literal (deposito y rrhh). Incluye también lo opcional del LIMS/CRM (.acceso-alt,
   .acceso-form, .acceso-sep) para el código de emergencia. */
body.acceso {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    background: var(--bg);
    color: var(--fg);
}
.acceso-card {
    width: 100%;
    max-width: var(--acceso-ancho, 360px);
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-card);
    text-align: center;
}
.acceso-card > * + * { margin-top: var(--space-3); }
.acceso-card__brand { margin: 0; font-weight: 700; font-size: var(--text-xl); letter-spacing: -0.02em; }
.acceso-card__brand em, .acceso-card__brand .accent { font-style: normal; color: var(--accent); }
.acceso-card__sub { margin: 0; color: var(--fg-muted); font-size: var(--text-sm); }
.acceso-card .banner { text-align: left; }
.acceso-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    background: var(--bg-soft);
    color: var(--fg);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}
.acceso-google:hover { background: var(--bg-card); border-color: var(--border-hover); color: var(--fg); }
.acceso-google:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acceso-google svg { flex: none; }
.acceso-card__pie { margin: var(--space-4) 0 0; color: var(--fg-muted); font-size: var(--text-xs); }

/* Opcional: salida de emergencia con código (LIMS, CRM, MRP, costeador), plegada para que no
   compita con el camino real. */
.acceso-alt { margin: var(--space-4) 0 0; }
.acceso-alt > summary { cursor: pointer; color: var(--fg-faint); font-size: var(--text-xs); list-style: none; }
.acceso-alt > summary::-webkit-details-marker { display: none; }
.acceso-alt > summary:hover { color: var(--fg-muted); }
.acceso-alt .acceso-form { margin-top: var(--space-3); }
.acceso-form { display: flex; flex-direction: column; gap: var(--space-3); }
.acceso-sep { margin: var(--space-4) 0 0; color: var(--fg-faint); font-size: var(--text-xs); }