/**
 * Login compartido — pantalla dividida (hero con foto + formulario).
 *
 * Nació en el portal de clientes y ahora es también el acceso de app. (plan-remodelacion-ui.md §4).
 * Mismo marcado en las dos apps; cambian los textos y las opciones de recuperación.
 *
 * Guía (03-patrones-pantallas): logo acotado, etiquetas visibles, errores claros asociados al
 * campo, recuperación real y compatible con gestores de contraseñas. El velo del hero es navy (el
 * naranja anterior no daba contraste con el texto blanco).
 *
 * Depende de dp-tokens.css y dp-logo.css. La foto se resuelve relativa a este archivo
 * (../img/login-bg.webp), así que sirve igual desde /shared/assets o desde el subdominio de estáticos.
 */

.dp-login {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 520px);
    min-height: 100vh;
    background: var(--dp-surface);
    color: var(--dp-ink);
    font-family: var(--dp-font-sans);
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.dp-login-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: var(--dp-navy-900) url('../img/login-bg.webp') center / cover no-repeat;
    color: var(--dp-ink-on-dark);
}

.dp-login-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--dp-navy-900) 90%, transparent) 0%,
        color-mix(in srgb, var(--dp-navy-900) 64%, transparent) 100%);
}

.dp-login-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--dp-space-8);
    min-height: 100%;
    padding: 64px;
}

.dp-login-message {
    max-width: 600px;
    margin-top: auto;
    margin-bottom: 48px;
}

.dp-login-title {
    margin: 0;
    color: var(--dp-ink-on-dark);
    font-size: clamp(32px, 3.4vw, 48px);
    font-weight: var(--dp-fw-bold);
    line-height: 1.12;
    letter-spacing: var(--dp-tracking-snug);
}

.dp-login-title span {
    display: block;
    color: var(--dp-orange-500);
}

.dp-login-line {
    width: 100px;
    height: 5px;
    margin: 24px 0;
    border-radius: var(--dp-radius-pill);
    background: var(--dp-orange-500);
}

.dp-login-message p:not(.dp-login-title) {
    max-width: 540px;
    margin: 0;
    color: var(--dp-ink-on-dark);
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.4;
}

/* ── Formulario ───────────────────────────────────────────────────────────── */
.dp-login-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px clamp(24px, 5vw, 64px);
    background: var(--dp-surface);
}

.dp-login-form-wrap {
    width: 100%;
    max-width: 400px;
    margin-inline: auto;
}

.dp-login-heading {
    margin-bottom: 24px;
}

.dp-login-heading h1 {
    margin: 0 0 6px;
    color: var(--dp-ink);
    font-size: 32px;
    font-weight: var(--dp-fw-bold);
    line-height: 1.2;
}

.dp-login-heading p {
    margin: 0;
    color: var(--dp-ink-muted);
    font-size: 16px;
}

.dp-login-alert {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: var(--dp-border-width) solid var(--dp-line);
    border-radius: var(--dp-radius-control);
    font-size: 14px;
    line-height: 1.45;
}

.dp-login-alert.is-danger,
.dp-login-alert.is-error { border-color: var(--dp-danger); background: var(--dp-danger-bg); color: var(--dp-danger); }
.dp-login-alert.is-success { border-color: var(--dp-success); background: var(--dp-success-bg); color: var(--dp-success); }
.dp-login-alert.is-warning { border-color: var(--dp-warning); background: var(--dp-warning-bg); color: var(--dp-warning); }
.dp-login-alert.is-info { border-color: var(--dp-info); background: var(--dp-info-bg); color: var(--dp-info); }

.dp-login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
}

.dp-login-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dp-login-field > label {
    color: var(--dp-ink);
    font-size: 14px;
    font-weight: var(--dp-fw-semibold);
}

.dp-login-input {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 6px 0 12px;
    border: var(--dp-border-width) solid var(--dp-field-border);
    border-radius: var(--dp-radius-control);
    background: var(--dp-surface);
}

.dp-login-input:focus-within {
    border-color: var(--dp-orange-600);
    box-shadow: 0 0 0 3px var(--dp-focus-ring);
}

.dp-login-input > svg {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: var(--dp-ink-muted);
}

.dp-login-input input {
    flex: 1;
    min-width: 0;
    min-height: 46px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: var(--dp-ink);
    font: inherit;
    font-size: 16px;
}

.dp-login-toggle {
    display: grid;
    flex: 0 0 40px;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--dp-radius-control);
    background: transparent;
    color: var(--dp-ink-muted);
    cursor: pointer;
}

.dp-login-toggle:hover { color: var(--dp-ink); }
.dp-login-toggle svg { width: 20px; height: 20px; }
.dp-login-toggle [hidden] { display: none; }

.dp-login-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    color: var(--dp-ink-muted);
    font-size: 14px;
}

.dp-login-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dp-ink);
    cursor: pointer;
}

.dp-login-check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--dp-action);
}

.dp-login-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--dp-link);
    font: inherit;
    font-size: 14px;
    font-weight: var(--dp-fw-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* Naranja oscuro: el blanco sobre el naranja de marca no alcanza 4,5:1 en texto de 16 px. */
.dp-login-submit {
    min-height: 48px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--dp-radius-control);
    background: var(--dp-orange-700);
    color: var(--dp-action-ink);
    font: inherit;
    font-size: 16px;
    font-weight: var(--dp-fw-semibold);
    cursor: pointer;
}

.dp-login-submit:hover { background: var(--dp-navy-700); }

.dp-login-foot {
    margin: 20px 0 0;
    color: var(--dp-ink-muted);
    font-size: 14px;
    line-height: 1.5;
}

.dp-login-foot a {
    color: var(--dp-link);
    font-weight: var(--dp-fw-semibold);
}

.dp-login :is(a, button, input):focus-visible {
    outline: var(--dp-focus-ring-width) solid var(--dp-orange-700);
    outline-offset: 2px;
}

.dp-login-input input:focus-visible {
    outline: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .dp-login { grid-template-columns: 1fr; }
    .dp-login-hero { min-height: 300px; }
    .dp-login-copy { padding: 32px; gap: var(--dp-space-6); }
    .dp-login-message { margin-bottom: 0; }
    .dp-login-panel { padding: 40px 24px; }
}

@media (max-width: 600px) {
    .dp-login-hero { min-height: 240px; }
    .dp-login-copy { padding: 24px 16px; }
    .dp-login-title { font-size: 28px; }
    .dp-login-message p:not(.dp-login-title) { font-size: 16px; }
    .dp-login-heading h1 { font-size: 28px; }
    .dp-login-options { flex-direction: column; align-items: flex-start; }
}