/* ============================================================
   D'ALENÇON LANCASTER — PORTAL DEL CLIENTE
   Misma identidad visual que admin.dalenconlancaster.com
   ============================================================ */

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

:root{
    --dl-blue-900:#042C53;--dl-blue-800:#0C447C;--dl-blue-600:#185FA5;
    --dl-blue-400:#378ADD;--dl-blue-100:#B5D4F4;--dl-blue-50:#E6F1FB;
    --dl-gray-900:#1a1a1a;--dl-gray-700:#3a3a3a;--dl-gray-500:#6b6b6b;
    --dl-gray-400:#9a9a9a;--dl-gray-300:#c4c4c4;--dl-gray-200:#e0e0de;
    --dl-gray-100:#f5f5f3;--dl-gray-50:#fafaf9;--dl-white:#ffffff;
    --dl-danger:#c0392b;--dl-success:#1f7a4d;--dl-info:#185FA5;
    --font-serif:'Cormorant Garamond',Georgia,serif;
    --font-sans:'Lato',system-ui,sans-serif;
    --ease:cubic-bezier(0.4,0,0.2,1);--t-fast:0.18s;--t-base:0.28s;
}

html{font-size:clamp(15px,1vw,17px);-webkit-text-size-adjust:100%;}

/* El atributo HTML [hidden] debe ganar SIEMPRE a cualquier display:
   flex/grid/etc. Sin esto, los campos ocultos del representante se
   verían en persona física (display:flex de .dla-form__field pisa
   al hidden, que tiene prioridad muy baja por defecto). */
[hidden]{display:none !important;}

body{
    font-family:var(--font-sans);color:var(--dl-gray-900);line-height:1.6;
    min-height:100vh;min-height:100dvh;overflow-x:hidden;
}

/* ===== Fondo azul degradado ===== */
.dla-portal{
    position:relative;min-height:100vh;min-height:100dvh;
    padding:clamp(1.5rem,4vw,3rem) clamp(1.25rem,4vw,2rem);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:1.5rem;
    background:linear-gradient(135deg,var(--dl-blue-900) 0%,var(--dl-blue-600) 100%);
}

.dla-portal__monogram{
    position:absolute;bottom:clamp(1rem,4vw,3.5rem);right:clamp(1.5rem,5vw,4rem);
    font-family:var(--font-serif);font-weight:500;
    font-size:clamp(8rem,22vw,22rem);line-height:0.85;letter-spacing:-0.02em;
    color:rgba(255,255,255,0.08);pointer-events:none;user-select:none;z-index:0;
}

.dla-portal__bg-line{
    position:absolute;width:clamp(80px,10vw,140px);height:1px;
    pointer-events:none;z-index:1;
    top:clamp(1.5rem,4vw,3rem);right:clamp(1.5rem,4vw,3rem);
    background:linear-gradient(90deg,rgba(255,255,255,0.4) 0%,transparent 100%);
}

/* ===== Tarjeta central ===== */
.dla-card{
    position:relative;z-index:2;width:100%;max-width:540px;
    background:var(--dl-white);border-radius:14px;overflow:hidden;
    box-shadow:0 24px 60px rgba(4,44,83,0.32),0 8px 20px rgba(4,44,83,0.18),
               0 2px 6px rgba(4,44,83,0.08);
}

.dla-card__topbar{
    height:3px;
    background:linear-gradient(90deg,var(--dl-blue-900) 0%,var(--dl-blue-600) 50%,var(--dl-blue-400) 100%);
}

.dla-card__inner{
    padding:clamp(1.75rem,4vw,2.4rem) clamp(1.5rem,5vw,2.5rem) clamp(1.25rem,3vw,1.75rem);
}

/* ===== Marca ===== */
.dla-card__brand{display:flex;align-items:center;gap:0.85rem;margin-bottom:1.5rem;}
.dla-card__logo{display:flex;align-items:center;justify-content:center;flex-shrink:0;
    text-decoration:none;transition:transform var(--t-fast) var(--ease);}
.dla-card__logo:hover{transform:scale(1.05);}
.dla-card__isotipo{width:clamp(42px,4vw,52px);height:clamp(42px,4vw,52px);object-fit:contain;}
.dla-card__brand-text{display:flex;flex-direction:column;gap:0.12em;
    padding-left:0.85rem;border-left:1px solid var(--dl-gray-200);line-height:1.2;}
.dla-card__brand-name{font-family:var(--font-serif);
    font-size:clamp(1.05rem,1.3vw,1.25rem);font-weight:500;
    color:var(--dl-gray-900);letter-spacing:0.01em;}
.dla-card__brand-tagline{font-family:var(--font-sans);
    font-size:clamp(0.58rem,0.68vw,0.7rem);font-weight:400;
    color:var(--dl-blue-600);letter-spacing:0.18em;text-transform:uppercase;}

/* ===== Título ===== */
.dla-card__intro{margin-bottom:1.5rem;}
.dla-card__title{font-family:var(--font-serif);
    font-size:clamp(1.65rem,2.4vw,2rem);font-weight:400;color:var(--dl-gray-900);
    line-height:1.15;letter-spacing:0.01em;margin-bottom:0.4rem;}
.dla-card__subtitle{font-family:var(--font-sans);
    font-size:clamp(0.82rem,0.92vw,0.9rem);font-weight:300;
    color:var(--dl-gray-500);line-height:1.55;}

/* ===== Mensajes ===== */
.dla-msg{display:flex;align-items:flex-start;gap:0.65rem;
    padding:0.8em 0.95em;border-radius:7px;margin-bottom:1.2rem;
    font-size:0.83rem;font-weight:400;line-height:1.5;}
.dla-msg--success{background:#e8f5ed;border:1px solid #b8dbc6;color:var(--dl-success);}
.dla-msg--error{background:#fdecea;border:1px solid #f5c2bc;color:var(--dl-danger);}
.dla-msg--info{background:var(--dl-blue-50);border:1px solid var(--dl-blue-100);color:var(--dl-blue-800);}

/* ===== Formulario ===== */
.dla-form{display:flex;flex-direction:column;gap:1.1rem;}
.dla-form__field{display:flex;flex-direction:column;gap:0.4rem;min-width:0;}
.dla-form__label{font-size:0.66rem;font-weight:700;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--dl-gray-700);}
.dla-form__label span{color:var(--dl-blue-600);margin-left:0.15em;}

.dla-form__input{font-family:var(--font-sans);
    font-size:clamp(0.85rem,0.92vw,0.92rem);font-weight:300;
    color:var(--dl-gray-900);background:var(--dl-white);
    border:1px solid var(--dl-gray-200);border-radius:7px;
    padding:0.8em 0.9em;line-height:1.45;width:100%;
    transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);}
.dla-form__input::placeholder{color:var(--dl-gray-300);font-weight:300;}
.dla-form__input:hover{border-color:var(--dl-gray-300);}
.dla-form__input:focus{border-color:var(--dl-blue-600);
    box-shadow:0 0 0 3px rgba(24,95,165,0.12);outline:none;}

.dla-form__hint{font-size:0.72rem;font-weight:300;color:var(--dl-gray-500);line-height:1.5;}
.dla-form__hint strong{color:var(--dl-blue-600);font-weight:700;}

/* ===== Botón ===== */
.dla-form__submit{display:inline-flex;align-items:center;justify-content:center;
    gap:0.55rem;font-family:var(--font-sans);font-size:0.78rem;font-weight:700;
    letter-spacing:0.16em;text-transform:uppercase;color:var(--dl-white);
    background:var(--dl-blue-600);padding:0.95em 1.5em;border-radius:7px;
    border:none;cursor:pointer;margin-top:0.4rem;width:100%;
    transition:background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
               transform var(--t-fast) var(--ease);}
.dla-form__submit:hover{background:var(--dl-blue-800);
    box-shadow:0 6px 18px rgba(24,95,165,0.28);transform:translateY(-1px);}
.dla-form__submit:active{transform:translateY(0);box-shadow:0 2px 8px rgba(24,95,165,0.18);}
.dla-form__submit--ghost{background:transparent;color:var(--dl-blue-600);
    border:1px solid var(--dl-gray-200);}
.dla-form__submit--ghost:hover{background:var(--dl-blue-50);
    border-color:var(--dl-blue-600);color:var(--dl-blue-800);box-shadow:none;}

/* ===== Código 2FA / campos especiales ===== */
.dla-code-input{width:100%;max-width:320px;margin:0 auto;display:block;
    font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
    font-size:clamp(1.5rem,4vw,2.1rem);font-weight:700;text-align:center;
    letter-spacing:0.4em;padding:0.55em 0.4em 0.55em 0.7em;
    background:var(--dl-white);border:1px solid var(--dl-gray-200);
    border-radius:9px;color:var(--dl-gray-900);line-height:1.1;
    transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);}
.dla-code-input:focus{border-color:var(--dl-blue-600);
    box-shadow:0 0 0 3px rgba(24,95,165,0.12);outline:none;}

/* Caja del secreto TOTP / códigos de recuperación */
.dla-secret-box{background:var(--dl-blue-50);border:1px solid var(--dl-blue-100);
    border-radius:9px;padding:1rem;font-family:ui-monospace,Menlo,Consolas,monospace;
    font-size:1.05rem;text-align:center;letter-spacing:3px;
    color:var(--dl-blue-900);word-break:break-all;margin:0.8rem 0;}
.dla-codes-box{background:var(--dl-blue-50);border:1px solid var(--dl-blue-100);
    border-radius:9px;padding:1rem;font-family:ui-monospace,Menlo,Consolas,monospace;
    font-size:1rem;line-height:1.9;text-align:center;letter-spacing:1px;
    color:var(--dl-blue-900);margin:0.5rem 0;}

.dla-steps{font-size:0.9rem;line-height:1.7;padding-left:1.2rem;
    color:var(--dl-gray-700);margin:0.5rem 0;}
.dla-steps li{margin-bottom:0.3rem;}
.dla-steps strong{color:var(--dl-blue-800);}

.dla-captcha{background:var(--dl-gray-50);border:1px solid var(--dl-gray-200);
    border-radius:7px;padding:0.85rem;margin-top:0.3rem;
    display:flex;align-items:center;gap:0.85rem;}
.dla-captcha__q{font-size:1.1rem;font-weight:700;color:var(--dl-blue-900);
    font-family:ui-monospace,Menlo,Consolas,monospace;white-space:nowrap;}
.dla-captcha .dla-form__input{margin:0;}

details summary{cursor:pointer;color:var(--dl-blue-600);font-size:0.85rem;
    font-weight:400;padding:0.4rem 0;}
details summary:hover{color:var(--dl-blue-800);}

/* ===== Enlaces ===== */
.dla-links{margin-top:1.3rem;text-align:center;font-size:0.85rem;}
.dla-links a{color:var(--dl-blue-600);text-decoration:none;
    transition:color var(--t-fast) var(--ease);}
.dla-links a:hover{color:var(--dl-blue-800);text-decoration:underline;}
.dla-links a + a{margin-top:0.5rem;display:inline-block;}

/* ===== Pie de tarjeta ===== */
.dla-card__footer{border-top:1px solid var(--dl-gray-200);
    padding:0.85rem clamp(1.5rem,5vw,2.5rem);background:var(--dl-gray-50);
    text-align:center;}
.dla-card__security{display:inline-flex;align-items:center;gap:0.5rem;
    font-size:0.7rem;font-weight:300;color:var(--dl-gray-500);line-height:1.4;}
.dla-card__security svg{width:13px;height:13px;flex-shrink:0;color:var(--dl-blue-600);}

/* ===== Responsive ===== */
@media (max-width:480px){
    .dla-portal{padding:1rem;}
    .dla-card__inner{padding:1.5rem 1.25rem 1rem;}
    .dla-card__footer{padding:0.75rem 1.25rem;}
    .dla-portal__bg-line{display:none;}
    .dla-portal__monogram{bottom:0.5rem;right:1rem;font-size:7rem;opacity:0.7;}
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important;}
}

/* ===== Pestañas (index) ===== */
.dla-tabs{display:flex;gap:0.5rem;margin-bottom:1.5rem;
    border-bottom:1px solid var(--dl-gray-200);}
.dla-tab{flex:1;background:none;border:none;cursor:pointer;
    font-family:var(--font-sans);font-size:0.72rem;font-weight:700;
    letter-spacing:0.12em;text-transform:uppercase;color:var(--dl-gray-500);
    padding:0.85rem 0.5rem;border-bottom:2px solid transparent;
    margin-bottom:-1px;transition:color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);}
.dla-tab:hover{color:var(--dl-blue-600);}
.dla-tab.is-active{color:var(--dl-blue-800);border-bottom-color:var(--dl-blue-600);}
.dla-tab:focus-visible{outline:2px solid var(--dl-blue-600);outline-offset:2px;}
.dla-tabpanel.is-hidden{display:none;}

/* ===== Formulario de registro: panel ancho, bajo y sin scroll de página =====

   Objetivo: que el formulario de EMPRESA (el largo) no obligue a
   desplazar la página. Se ensancha y reparte en varias columnas;
   si aun así no cabe en alto, el scroll ocurre DENTRO de la tarjeta
   y el fondo azul con el monograma "DL" se queda fijo y visible.
*/

/* La tarjeta se ensancha cuando la pestaña de registro está activa */
body.is-registro .dla-card{max-width:760px;}

/* Al mostrarse el formulario de EMPRESA, ensanchar más (cabe en 3 cols) */
body.is-registro.is-juridica .dla-card{max-width:980px;}

/* La tarjeta nunca más alta que la ventana: scroll interno, no de página.
   Así el fondo (monograma DL) queda quieto. */
body.is-registro .dla-card{
  /* Resta el padding vertical real del contenedor (.dla-portal usa
     hasta 3rem arriba + 3rem abajo) más un margen de respiro, para
     que la tarjeta nunca exceda el alto disponible y no haya scroll
     de página (solo, si acaso, scroll interno de la tarjeta). */
  max-height:calc(100dvh - 7rem);
  display:flex;flex-direction:column;
}
body.is-registro .dla-card__inner{
  overflow-y:auto;
  min-height:0;            /* permite que el área interna encoja y scrollee */
  -webkit-overflow-scrolling:touch;
}
/* Reducir el padding vertical del contenedor cuando hay registro:
   menos espacio desperdiciado arriba/abajo = más sitio para la
   tarjeta = menos (o ningún) scroll. */
body.is-registro .dla-portal{
  padding-top:1.25rem;
  padding-bottom:1.25rem;
  gap:0.75rem;
}

/* Rejilla del registro: 2 columnas (particular y empresa) en ≥620px */
@media (min-width:620px){
  #panel-registro .dla-form{
    display:grid;grid-template-columns:1fr 1fr;
    gap:1rem 1.3rem;align-items:start;
  }
  #panel-registro .dla-form > input[type="hidden"],
  #panel-registro .dla-form > .dla-form__submit{
    grid-column:1 / -1;
  }
  #panel-registro .dla-form__field--full{grid-column:1 / -1;}
}

/* Empresa en pantallas grandes: 3 columnas → el formulario largo
   se vuelve un panel ancho y bajo (4 filas en vez de 12). */
@media (min-width:980px){
  body.is-juridica #panel-registro .dla-form{
    grid-template-columns:1fr 1fr 1fr;
  }
}

/* Móvil/estrecho: 1 columna (responsive). El scroll interno de la
   tarjeta sigue manteniendo el fondo fijo. */
@media (max-width:619px){
  #panel-registro .dla-form{display:flex;flex-direction:column;gap:1rem;}
  body.is-registro .dla-card,
  body.is-registro.is-juridica .dla-card{max-width:540px;}
}