/* Legalitical — tema de login Keycloak (premium, split-screen navy + dorado) */
:root{
  --bg:#0e2032; --bg2:#0b1a29; --surface:#14304a; --gold:#c9a227; --gold2:#e3c45a;
  --text:#eaf0f6; --muted:#93a6b8; --border:rgba(255,255,255,.10);
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
.lk-body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--text);}
.lk-split{display:flex;min-height:100vh;}

/* ── Panel izquierdo (marca / derecho) ── */
.lk-left{
  flex:1.1;position:relative;color:var(--text);
  background:radial-gradient(900px 500px at 30% -10%,rgba(201,162,39,.16),transparent 60%),
             linear-gradient(160deg,#0e2434 0%,#0a1726 100%);
  border-right:1px solid var(--border);display:flex;align-items:center;overflow:hidden;
}
.lk-graph{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.6;}
.lk-left__inner{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:4rem 3.5rem;}
.lk-brand{display:flex;align-items:center;gap:.55rem;font-size:1.3rem;font-weight:600;color:var(--gold);}
.lk-brand span{color:var(--text);}
.lk-brand__svg{width:1.5em;height:1.5em;color:var(--gold);}
.lk-eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:2.5px;font-size:.72rem;margin:2.5rem 0 1rem;}
.lk-title{font-family:var(--serif);font-weight:600;font-size:2.6rem;line-height:1.15;margin:0 0 1.2rem;}
.lk-title em{color:var(--gold2);font-style:italic;}
.lk-sub{color:var(--muted);font-size:1.05rem;line-height:1.6;margin:0 0 2rem;max-width:440px;}
.lk-feats{list-style:none;padding:0;margin:0 0 2.5rem;display:grid;gap:.7rem;}
.lk-feats li{position:relative;padding-left:1.6rem;color:var(--text);font-size:.95rem;}
.lk-feats li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:700;}
.lk-stats{display:flex;gap:2.5rem;border-top:1px solid var(--border);padding-top:1.5rem;}
.lk-stats strong{display:block;font-size:1.5rem;color:var(--gold2);font-family:var(--serif);}
.lk-stats span{font-size:.8rem;color:var(--muted);}

/* ── Panel derecho (formulario) ── */
.lk-right{flex:.9;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:2rem;}
.lk-card{width:100%;max-width:400px;}
.lk-card__brand{display:flex;align-items:center;gap:.4rem;font-weight:600;color:var(--gold);font-size:1.1rem;margin-bottom:1.5rem;}
.lk-card__brand span:last-child{color:var(--text);}
.lk-card__svg{width:1.3em;height:1.3em;color:var(--gold);}
/* ocultar el toggle de visibilidad de contraseña (sin ícono sin PatternFly) */
[data-password-toggle],.kc-form-password-visibility-button,button[aria-label="Show password"],button[aria-label="Hide password"]{display:none !important;}
.lk-card__title,#kc-page-title{font-family:var(--serif);font-weight:600;font-size:1.6rem;margin:0 0 1.5rem;color:var(--text);}

/* Campos del formulario de Keycloak */
.lk-card label,.control-label,#kc-form-login label{display:block;font-size:.85rem;color:var(--muted);margin:.9rem 0 .4rem;}
.lk-card input[type=text],.lk-card input[type=email],.lk-card input[type=password],.form-control,#username,#password{
  width:100%;padding:.7rem .85rem;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-size:.98rem;outline:none;transition:border-color .15s;
}
.lk-card input:focus,.form-control:focus,#username:focus,#password:focus{border-color:var(--gold);}
.lk-card input::placeholder{color:#5e7488;}

/* Botón ingresar */
#kc-login,.btn,input[type=submit]{
  width:100%;margin-top:1.5rem;padding:.75rem 1rem;border:none;border-radius:8px;cursor:pointer;
  background:var(--gold);color:#1a1407;font-weight:700;font-size:1rem;transition:background .15s,transform .15s;
}
#kc-login:hover,.btn:hover{background:var(--gold2);transform:translateY(-1px);}

/* Opciones (recordar / olvidé) */
#kc-form-options,.checkbox{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-top:1rem;font-size:.88rem;color:var(--muted);}
#kc-form-options label{display:inline-flex;align-items:center;gap:.4rem;margin:0;}
#kc-form-options input[type=checkbox]{width:auto;}
a{color:var(--gold2);text-decoration:none;}
a:hover{text-decoration:underline;}

/* Alertas / errores */
.lk-alert{border-radius:8px;padding:.7rem .9rem;margin-bottom:1rem;font-size:.9rem;}
.lk-alert--error{background:rgba(192,57,43,.15);border:1px solid #c0392b;color:#f3b4ad;}
.lk-alert--success{background:rgba(39,174,96,.15);border:1px solid #27ae60;color:#a9e3c2;}
.lk-alert--warning{background:rgba(201,162,39,.15);border:1px solid var(--gold);color:var(--gold2);}
#input-error,.kc-feedback-text,.ftl-error{color:#f3b4ad;font-size:.82rem;}

/* Proveedores sociales (Google IdP, futuro) */
#kc-social-providers{margin-top:1.5rem;}
#kc-social-providers ul{list-style:none;padding:0;margin:.5rem 0 0;display:grid;gap:.6rem;}
#kc-social-providers a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem;border:1px solid var(--border);border-radius:8px;color:var(--text);background:var(--surface);}
#kc-social-providers a:hover{border-color:var(--gold);text-decoration:none;}

.lk-note{margin-top:1.5rem;padding:.6rem .8rem;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.03);color:var(--muted);font-size:.78rem;line-height:1.45;text-align:center;}
.lk-note strong{color:var(--gold2);}
.lk-foot{margin-top:1.25rem;text-align:center;color:var(--muted);font-size:.78rem;line-height:1.6;}
.lk-foot strong{color:var(--gold2);font-weight:600;}
.lk-info{margin-top:1.25rem;font-size:.9rem;color:var(--muted);text-align:center;}

/* Entrada con reveal (se activa cuando el JS añade .lk-ready) */
.lk-left__inner > *{opacity:0;transform:translateY(14px);}
.lk-ready .lk-left__inner > *{animation:lkUp .6s cubic-bezier(.22,1,.36,1) forwards;}
.lk-ready .lk-left__inner > *:nth-child(1){animation-delay:.05s}
.lk-ready .lk-left__inner > *:nth-child(2){animation-delay:.12s}
.lk-ready .lk-left__inner > *:nth-child(3){animation-delay:.19s}
.lk-ready .lk-left__inner > *:nth-child(4){animation-delay:.26s}
.lk-ready .lk-left__inner > *:nth-child(5){animation-delay:.33s}
.lk-ready .lk-left__inner > *:nth-child(6){animation-delay:.40s}
@keyframes lkUp{to{opacity:1;transform:none}}
.lk-card{animation:lkUp .6s cubic-bezier(.22,1,.36,1) both;animation-delay:.15s;}
@media (prefers-reduced-motion: reduce){
  .lk-left__inner > *{opacity:1;transform:none;animation:none;}
  .lk-card{animation:none;}
}

/* Responsive: ocultar panel izquierdo en pantallas pequeñas */
@media (max-width:920px){
  .lk-left{display:none;}
  .lk-right{flex:1;}
}