/* ── Account design tokens ──────────────────── */
:root {
    --al-navy:   #282182;   /* Azul Osakidetza */
    --al-navy-dk:#3D35A0;   /* Azul Osakidetza intermedio */
    --al-cream:  #ECEEF5;   /* Azul BIO claro */
    --al-ivory:  #F6F7FB;   /* Fondo suave con matiz BIO */
    --al-brick:  #DC4A3B;   /* KEEP — validaciones y errores */
    --al-muted:  #6B7E8F;
    --al-border: #DADEE9;   /* Azul BIO borde */
    --al-text-on-light: #282182; /* Texto sobre fondo claro/blanco — independiente de Navy */
    --al-text-on-dark:  #FFFFFF; /* Texto sobre fondo de color (panel navy izquierdo) */
    --al-serif:  'DM Serif Display', Georgia, serif;
    --al-sans:   'Inter', ui-sans-serif, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

.al-shell {
    font-family: var(--al-sans);
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

/* ── Left panel ─────────────────────────────── */
.al-panel-left {
    background: var(--al-navy);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem 3.5rem;
    position: relative;
    overflow: hidden;
}

.al-panel-left::before {
    content: 'EUCT';
    position: absolute;
    right: -1rem;
    bottom: -1rem;
    font-family: var(--al-serif);
    font-size: 14rem;
    font-weight: 700;
    color: white;
    opacity: 0.03;
    line-height: 1;
    letter-spacing: -0.05em;
    pointer-events: none;
    user-select: none;
}

.al-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
}

.al-brand-mark {
    width: 0.3125rem;
    height: 1.25rem;
    background: rgba(255,255,255,0.45);
    border-radius: 1px;
    flex-shrink: 0;
}

.al-brand-name {
    font-family: var(--al-serif);
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    letter-spacing: -0.01em;
}

.al-panel-headline {
    position: relative;
    z-index: 1;
}

.al-eyebrow {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
}

.al-eyebrow::before {
    content: '';
    display: block;
    width: 1rem;
    height: 1px;
    background: rgba(255,255,255,0.35);
}

.al-headline {
    font-family: var(--al-serif);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--al-text-on-dark);
    margin-bottom: 1.25rem;
}

.al-headline em {
    font-style: italic;
    color: rgba(255,255,255,0.75);
}

.al-sub {
    font-size: 0.875rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.45);
    max-width: 36ch;
}

.al-panel-footer {
    font-size: 0.6875rem;
    color: rgba(255,255,255,0.2);
    letter-spacing: 0.04em;
}

/* ── Right panel ────────────────────────────── */
.al-panel-right {
    background: var(--al-cream);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 3.5rem;
}

.al-form-wrap {
    width: 100%;
    max-width: 22rem;
}

.al-form-title {
    font-family: var(--al-serif);
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--al-text-on-light);
    letter-spacing: -0.02em;
    margin-bottom: 0.375rem;
}

.al-form-sub {
    font-size: 0.8125rem;
    color: var(--al-muted);
    margin-bottom: 2rem;
}

/* ── Form fields ────────────────────────────── */
.al-field { margin-bottom: 1.125rem; }

.al-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--al-text-on-light);
    margin-bottom: 0.375rem;
    letter-spacing: 0.01em;
}

.al-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-family: var(--al-sans);
    font-size: 0.9375rem;
    color: var(--al-text-on-light);
    background: white;
    border: 1.5px solid var(--al-border);
    border-radius: 4px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.al-input:focus {
    outline: none;
    border-color: var(--al-navy);
    box-shadow: 0 0 0 3px rgba(40,33,130,0.10);
}

.al-input::placeholder { color: var(--al-muted); opacity: 0.6; }

.al-validation {
    font-size: 0.6875rem;
    color: var(--al-brick);
    margin-top: 0.25rem;
    display: block;
}

/* ── Error alert ────────────────────────────── */
.al-alert-error {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    background: rgba(200,69,42,0.07);
    border-left: 3px solid var(--al-brick);
    border-radius: 0 4px 4px 0;
    font-size: 0.8125rem;
    color: var(--al-brick);
    margin-bottom: 1.25rem;
}

/* ── Submit button ──────────────────────────── */
.al-btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1.75rem;
    padding: 0.75rem 1.25rem;
    font-family: var(--al-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: white;
    background: var(--al-navy);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.al-btn-submit:hover {
    background: var(--al-navy-dk);
    transform: translateY(-1px);
}

.al-btn-submit svg { transition: transform 0.2s; }
.al-btn-submit:hover svg { transform: translateX(3px); }

/* ── Back link ──────────────────────────────── */
.al-back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 1.75rem;
    font-size: 0.75rem;
    color: var(--al-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.al-back:hover { color: var(--al-text-on-light); }

/* ── Logo group (panel derecho) ─────────────── */
.al-logo-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.25rem;
    width: 100%;
    max-width: 22rem; /* se alinea con .al-form-wrap */
}

.al-logo-bio {
    height: 56px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.al-logo-sep {
    width: 1px;
    height: 2.75rem;
    background: var(--al-border);
    flex-shrink: 0;
}

.al-logo-partners {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.al-logo-partner {
    height: 38px;
    width: auto;
    display: block;
    opacity: 0.8;
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 700px) {
    .al-shell          { grid-template-columns: 1fr; }
    .al-panel-left     { display: none; }
    .al-panel-right    { padding: 2rem 1.5rem; }
}

/* A partir de 700px solo se muestra el panel derecho (izquierdo oculto). El número de
   logos es configurable por cliente (Logos), así que en vez de un tamaño fijo dejamos
   que la lista de partners pase a 2 filas (flex-wrap) cuando no caben en una sola. */
@media (max-width: 480px) {
    .al-panel-right    { padding: 1.5rem 1.25rem; }
    .al-logo-bio       { height: 44px; }
    .al-logo-partner   { height: 30px; }
    .al-logo-group     { gap: 0.75rem; flex-wrap: wrap; row-gap: 0.5rem; }
    .al-logo-partners  { gap: 0.75rem; flex-wrap: wrap; row-gap: 0.5rem; }
    .al-logo-sep       { height: 2.25rem; }
}

/* Móvil muy pequeño: si aun así no caben en 2 filas, scroll horizontal como último recurso
   (en vez de ocultar los logos configurados por el cliente). */
@media (max-width: 380px) {
    .al-panel-right    { padding: 1.5rem 1rem; }
    .al-logo-bio       { height: 36px; }
    .al-logo-partners  {
        max-width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none; /* Firefox */
    }
    .al-logo-partners::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge */
}