button,



input,



select,



textarea {



  font-family: var(--font-family);



  font-size: var(--fs-base);



  color: var(--text);



}







/* =========================================



   1) BASE



   ========================================= */



* { box-sizing: border-box; }



html, body { height: 100%; }



body {



  margin: 0;



  font-family: var(--font-family);



  font-size: var(--fs-base);



  line-height: 1.5;



  color: var(--text);



  background: var(--bg-page);



}







/* =========================================



   2) WRAPPER GENERAL



   ========================================= */



.login-wrapper {



  min-height: 100dvh;                   /* 100% de viewport */



  display: grid;



  place-items: center;                  /* centra horizontal y vertical */



  padding: var(--space-4);



}







/* =========================================



   3) BLOQUE PRINCIPAL LOGIN



   ========================================= */



.login-box {



  width: 100%;



  max-width: var(--container-max);



  min-height: 70dvh;



  display: grid;



  grid-template-columns: var(--col-left) var(--col-right);



  border-radius: var(--radius-lg);



  box-shadow: var(--shadow-panel);



  overflow: hidden;



  background: transparent;



}







/* =========================================



   4) PANEL IZQUIERDO (LOGIN)



   ========================================= */



.login-user {



  background: var(--surface);



  display: flex;



  flex-direction: column;



  justify-content: space-between; /* login arriba, copy abajo */



  padding: clamp(var(--space-4), 4vw, 56px);



}







/* Parte superior (logo, título, formulario) */



.login-user__top { display: grid; gap: var(--space-3); }







/* Marca */



.brand {



  display: flex;



  align-items: center;



  justify-content: flex-start;



  gap: var(--space-2);



  margin-bottom: var(--space-4);



  justify-self: start;        /* ✅ anula el stretch del grid SOLO para .brand */



  inline-size: max-content;   /* ✅ hace que ocupe solo su contenido */



}







.brand__logo {



  inline-size: 42px;



  block-size: 42px;



  border-radius: 10px;



}







.brand__name {



  height: 24px;



  width: auto;



  display: block;



}











/* Títulos y subtítulo */



.login-title {



  font-size: var(--fs-h1);



  margin: 0 0 var(--space-3);



}



.login-subtext {



  color: var(--text-muted);



  margin-bottom: var(--space-4);



}



.login-subtext a {



  color: var(--link);



  text-decoration: none;



}



.login-subtext a:hover {



  color: var(--link-hover);



  text-decoration: underline;



}







/* =========================================



   5) FORMULARIO (solo lo específico de la vista)



   ========================================= */







/* margen vertical entre grupos (si usas .form-group aquí) */



.form-group { margin-bottom: var(--space-3); }







/* última fila del formulario con más aire (p.ej. antes del botón) */



.form-group:last-child { margin-top: var(--space-4); }







/* Fila auxiliar (checkbox + link) */



.form-row {



  display: flex;



  justify-content: space-between;



  align-items: center;



  gap: var(--space-2);



  margin-top: var(--space-2);



}



.helper-link { font-size: var(--fs-small); color: var(--link); text-decoration: none; }



.helper-link:hover { color: var(--link-hover); text-decoration: underline; }



input[type="checkbox"] { accent-color: var(--brand); }







/* Botón del ojo (el wrapper y padding-right del input ya están en forms.css) */



.toggle-password{



  position: absolute;



  top: 50%;



  right: 12px;



  transform: translateY(-50%);



  display: inline-grid;



  place-items: center;



  width: 28px;



  height: 28px;



  border: none;



  background: transparent;



  cursor: pointer;



  opacity: .7;



  transition: opacity .2s ease;



}



.toggle-password:hover { opacity: 1; }



.icon-eye{ width: 20px; height: 20px; }



/* Ojo tachado cuando la contraseña es visible */



.toggle-password.show .icon-eye{ content: url("media/icons/eye-off.svg"); }







/* =============== */











/* Fila auxiliar (checkbox + link) */



.form-row {



  display: flex;



  justify-content: space-between;



  align-items: center;



  gap: var(--space-2);



  margin-top: var(--space-2);



}



.helper-link {



  font-size: var(--fs-small);



  color: var(--link);



  text-decoration: none;



}



.helper-link:hover {



  color: var(--link-hover);



  text-decoration: underline;



}



input[type="checkbox"] { accent-color: var(--brand); }







/* =========================================



   6) FOOTER INFERIOR (COPYRIGHT)



   ========================================= */



.login-user__bottom {



  text-align: center;



  margin-top: auto;



  padding-top: var(--space-3);



  padding-bottom: var(--space-2);



  border-top: 1px dashed var(--border);



  color: var(--text-muted);



  font-size: var(--fs-small);



}







/* =========================================



   7) PANEL DERECHO (BANNER)



   ========================================= */



.login-banner {



  position: relative;



  background: var(--brand);



}



.login-banner > img,



.login-banner > video,



.login-banner > a,



.login-banner > a > img {



  position: absolute;



  inset: 0;



  width: 100%;



  height: 100%;



  object-fit: cover;



}











/* =========================================



   8) RESPONSIVE



   ========================================= */



@media (max-width: 992px) {



  .login-box {



    grid-template-columns: 1fr 1fr; /* dos columnas iguales en tablet */



    min-height: 72dvh;



  }



  .login-user { padding: clamp(var(--space-3), 5vw, 40px); }



}







@media (max-width: 768px) {



  .login-wrapper { padding: var(--space-3); }



  .login-box {



    grid-template-columns: 1fr; /* apila en móvil */



    min-height: auto;



    border-radius: var(--radius-lg);



  }



  .login-banner {



    display: none; /* oculta banner */



  }



  .brand { margin-bottom: var(--space-3); }



}







/* =========================================



   9) VARIANTE SIN BANNER (RESET / CREATE)



   ========================================= */



.login-box--single {



  grid-template-columns: 1fr;   /* una sola columna */



  max-width: 560px;             /* más estrecho */



  min-height: auto;             /* alto según contenido */



}







.login-box--single .form-group:last-child {



  margin-top: var(--space-3);



}











/* Avisos (reutilizable) */



.alert{



  display: block;



  padding: 10px 12px;



  border: 1px solid transparent;



  border-radius: var(--radius-md);



  font-size: var(--fs-small);



  margin: 0 0 var(--space-3);   /* deja aire debajo del aviso */



}







.alert-danger{



  color: var(--danger);



}







.alert-success{



  color: var(--success);



}







/* =========================================


   BOTONES LOGIN


   ========================================= */


.btn-primary {


  width: 100%;


  display: inline-flex;


  justify-content: center;


  align-items: center;


  gap: 10px;


  padding: 12px 16px;


  border: 0;


  border-radius: var(--radius-md);


  background: var(--brand);


  color: #fff;


  font-weight: 600;


  cursor: pointer;


  box-shadow: var(--shadow-cta);


  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);


}


.btn-primary:hover {


  background: var(--brand-hover);


}


.btn-primary:active {


  transform: translateY(1px) scale(.99);


}


.btn-primary:disabled {


  opacity: .6;


  cursor: not-allowed;


  box-shadow: none;


}


a.btn-primary {


  text-decoration: none;


  color: #fff;


}


a.btn-primary:hover {


  background: var(--brand-hover);


  text-decoration: none;


  opacity: 0.95;


}

/* ============ WIZARD ============ */



/* PARA CREATE-ACOUNT PASO A PASO*/







/* Barras de progreso (debajo) */



.wizard-progress {



  display: grid;



  grid-template-columns: repeat(4, 1fr);



  gap: var(--space-2);



  margin-bottom: var(--space-3); /* 🔹 un poco menos que antes */



  width: 100%;



}







.wizard-progress .step{



  height: 8px;



  border-radius: 999px;



  background: var(--progress-track);



}



.wizard-progress .step.is-active,



.wizard-progress .step.is-complete{



  background: var(--progress-active);



}











/* Caja del wizard (sin banner) */



.login-box--wizard{



  grid-template-columns: 1fr;



  max-width: 720px;



  min-height: auto;



}







/* Secciones dentro del paso General */



.section-title{



  margin: var(--space-3) 0 var(--space-2);



  font-weight: 600;



}







/* Acciones */



.actions{



  display:flex; gap: var(--space-2); justify-content:flex-end; margin-top: var(--space-3);



}







/* bloque "saltar para más tarde" */



.skip-link{



  text-align: center;



  font-size: var(--fs-small);



  margin-top: var(--space-3);           /* separación por defecto */



}







/* versión con MÁS separación (para pasos 2 y 3) */



.skip-link.skip-link--lg{



  margin-top: 0;                     /* sube/baja a tu gusto (44–56px) */



}







/* aspecto del enlace y del botón-link unificados */



.skip-link a,



.skip-link .linklike{



  color: var(--link);



  text-decoration: underline;



  cursor: pointer;



}







/* botón-link que envía el formulario con action=skip */



.linklike{



  background: none;



  border: 0;



  padding: var(--space-5);



  font: inherit;                        /* misma fuente que el resto */



}







/* hover */



.skip-link a:hover,



.skip-link .linklike:hover{



  color: var(--link-hover);



}











/* Flechas de navegación en la cabecera de marca */



.brand{



  display:flex; align-items:center; justify-content:space-between; gap: var(--space-2);



  margin-bottom: var(--space-4);



}



/* Contenedor (puedes dejarlo tal cual si ya lo tienes) */



.brand-controls{ display:flex; align-items:center; gap: var(--space-2); }







/* Botón minimalista sin fondo ni borde; solo opacidad */



.nav-arrow{



  all: unset;                   /* limpia estilos nativos */



  display: inline-grid;



  place-items: center;



  cursor: pointer;



  opacity: .8;                  /* estado normal */



  transition: opacity var(--transition);



}



.nav-arrow:hover{ opacity: 1; } /* hover */



.nav-arrow[disabled]{           /* disabled */



  opacity: .4;



  pointer-events: none;



  cursor: default;



}







/* Icono 18x18 fijo */



.nav-arrow img{



  width: 25px;



  height: 25px;



  display: block;



}







/* Utilidad de ocultación robusta */



.hidden{



  display: none !important;



}