:root {
  --color-primario: #0F2A44;
  --color-primario-oscuro: #0A1F33;
  --color-primario-claro: rgba(15, 42, 68, 0.1);
  --color-secundario: #D4A437;
  --color-terciario: #E6C067;
  --color-texto: #333;
  --color-texto-secundario: #666;
  --color-fondo: #f8f9fa;
  --color-borde: #ecf0f1;
  --sombra-suave: 0 4px 6px rgba(0, 0, 0, 0.05);
  --sombra-media: 0 10px 15px rgba(0, 0, 0, 0.1);
  --sombra-intensa: 0 20px 25px rgba(0, 0, 0, 0.15);
}

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

body{
  background:linear-gradient(135deg,var(--color-primario-oscuro) 0%,var(--color-primario) 100%);
  font-family:"Source Sans Pro",sans-serif;
  min-height:100vh;
  overflow-x:hidden;
}

.login-container{
  display:flex;
  width:100%;
  min-height:100vh;
}

.login-left{
  flex:1.5;
  background:linear-gradient(135deg,rgba(15,42,68,0.9),rgba(10,31,51,0.9)),url("../logo/logo_pared.jpg") center/cover;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border-right:3px solid var(--color-secundario);
}

.login-left-content{
  text-align:center;
  color:white;
  padding:2rem;
  max-width:80%;
}

.login-left h2{
  font-size:2.5rem;
  margin-bottom:1.5rem;
  font-weight:700;
}

.login-left h2 span{
  color:var(--color-secundario);
}

.login-left p{
  font-size:1.2rem;
  line-height:1.6;
}

.login-right{
  flex:1;
  background:var(--color-fondo);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:40px;
}

.login-form-container{
  width:100%;
  max-width:450px;
  animation:fadeIn .8s ease-out;
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

.circular-logo{
  width:160px;
  height:160px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--color-primario),var(--color-primario-oscuro));
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 40px;
  border:5px solid var(--color-secundario);
  box-shadow:var(--sombra-media);
}

.circular-logo img{
  width:65%;
  filter:brightness(0) invert(1);
}

.login-title{
  text-align:center;
  margin-bottom:40px;
}

.section-title{
  font-size:2.2rem;
  color:var(--color-primario);
  font-weight:bold;
  margin-bottom:15px;
}

.welcome-text{
  text-align:center;
  margin-bottom:30px;
  color:var(--color-texto-secundario);
  font-size:1.1rem;
}

.form-group{
  margin-bottom:30px;
  position:relative;
}

.form-control{
  background:white;
  border:2px solid var(--color-borde);
  border-radius:10px;
  padding:18px 50px 18px 20px;
  width:100%;
  font-size:1rem;
  transition:.3s;
}

.form-control:focus{
  border-color:var(--color-primario);
  box-shadow:0 0 0 3px var(--color-primario-claro);
  outline:none;
}

.input-group{
  position:relative;
}

.input-group-text{
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:var(--color-texto-secundario);
}

.btn-custom{
  background:linear-gradient(to right,var(--color-primario),var(--color-primario-oscuro));
  color:white;
  border:none;
  border-radius:10px;
  padding:18px;
  width:100%;
  font-weight:bold;
  font-size:1.1rem;
  margin-top:15px;
  cursor:pointer;
  border-bottom:3px solid var(--color-secundario);
}

.btn-custom:hover{
  background:linear-gradient(to right,var(--color-primario-oscuro),#05121f);
  transform:translateY(-2px);
}

.form-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:20px;
}

.remember-me{
  display:flex;
  align-items:center;
}

.remember-me input{
  margin-right:8px;
}

.forgot-password a{
  color:var(--color-primario);
  text-decoration:none;
  font-size:.9rem;
}

.copyright{
  text-align:center;
  color:var(--color-texto-secundario);
  font-size:.9rem;
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid var(--color-borde);
}

/* -------- FEATURES -------- */

.features-list{
  margin-top:30px;
  text-align:left;
}

.features-list ul{
  list-style:none;
}

.features-list li{
  margin-bottom:15px;
  color:#ecf0f1;
  display:flex;
  gap:10px;
  align-items:center;
}

.features-list i{
  color:var(--color-secundario);
}

/* -------- RESPONSIVE -------- */

@media (max-width:991px){

.login-container{
  flex-direction:column;
}

.login-left{
  display:none;
}

.login-right{
  flex:1;
  width:100%;
  min-height:100vh;
  padding:30px 20px;
  background:linear-gradient(135deg,var(--color-primario),var(--color-primario-oscuro));
  overflow-y:auto;
}

.login-form-container{
  max-width:400px;
  margin:auto;
  background:white;
  padding:30px;
  border-radius:20px;
  box-shadow:var(--sombra-intensa);
}

.section-title{
  font-size:1.8rem;
}

.circular-logo{
  width:120px;
  height:120px;
}

}

@media (max-width:576px){

.login-form-container{
  padding:25px 15px;
}

.section-title{
  font-size:1.5rem;
}

.form-footer{
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}

.form-control{
  font-size:16px;
  height:50px;
}

}

/* -------- MODAL FIX MOBILE -------- */

.modal{
  overflow-y:auto !important;
}

.modal-dialog{
  margin:15px;
}

.modal-content{
  border-radius:15px;
  max-height:calc(100vh - 30px);
}

.modal-body{
  max-height:calc(100vh - 150px);
  overflow-y:auto;
}

/* evitar zoom iPhone */
input,
select,
textarea{
  font-size:16px !important;
}

/* -------- MODAL XL - TOTALMENTE RESPONSIVO -------- */
/* CENTRAR MODAL PERFECTAMENTE */
#modal_cambiar_password_primer_inicio .modal-dialog{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  margin:auto;
}

/* HACERLO MÁS GRANDE - AHORA USA modal-xl DE BOOTSTRAP */
#modal_cambiar_password_primer_inicio .modal-content{
  width:100%;
  border-radius:18px;
  box-shadow:0 20px 40px rgba(0,0,0,0.25);
}

/* INPUTS MÁS GRANDES */
#modal_cambiar_password_primer_inicio input{
  height:48px;
  font-size:15px;
}

/* BOTÓN MÁS GRANDE */
#modal_cambiar_password_primer_inicio .modal-footer .btn{
  height:50px;
  font-size:16px;
}

/* RESPONSIVE PARA MÓVILES */
@media (max-width:768px){
  #modal_cambiar_password_primer_inicio .modal-dialog{
    max-width:95%;
    margin:10px auto;
  }
  
  #modal_cambiar_password_primer_inicio .modal-body{
    max-height:65vh;
  }
}

/* Ajuste para que las columnas se apilen correctamente en tablets */
@media (max-width: 992px) {
  #modal_cambiar_password_primer_inicio .col-md-5,
  #modal_cambiar_password_primer_inicio .col-md-7 {
    width: 100%;
    margin-bottom: 15px;
  }
}