@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root{
  --primario:#1E656D;
  --secundario:#50A7A7;
  --terciario:#82D8C6;
  --fondo:#E6F7F7;
  --texto:#102A2D;
}

/* ===== GLOBALES ===== */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Montserrat',sans-serif;}

body{
  font-family:'Poppins','Segoe UI','Helvetica Neue',sans-serif;
  background-color:var(--fondo);
  background:linear-gradient(to right,var(--fondo),var(--terciario));
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  height:100vh;
}
body::before{
  content:'';position:fixed;inset:0;width:100%;height:100%;
  background:linear-gradient(135deg,rgba(30,101,109,.4) 0%,rgba(82,167,167,.4) 50%,rgba(130,216,198,.4) 100%);
  z-index:-2;animation:gradientShift 15s ease infinite;background-size:200% 200%;
}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

#bg-video{position:fixed;top:0;left:0;min-width:100%;min-height:100%;object-fit:cover;z-index:-1;filter:brightness(.6)}

/* ===== CONTAINER ===== */
.container{
  background:#fff;border-radius:30px;box-shadow:0 5px 15px rgba(0,0,0,.35);
  position:relative;overflow:hidden;width:768px;max-width:100%;
  min-height:520px;height:auto;
}
.container p{font-size:14px;line-height:20px;letter-spacing:.3px;margin:10px 0}
.container span{font-size:12px}
.container a{color:var(--texto);font-size:13px;text-decoration:none;margin:15px 0 10px;cursor:pointer}
.container button{
  background:linear-gradient(135deg,var(--primario) 0%,var(--secundario) 100%);
  color:#fff;font-size:12px;padding:10px 45px;border:1px solid transparent;border-radius:8px;
  font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-top:10px;cursor:pointer;
  transition:all .3s ease;min-height:40px;width:auto;min-width:120px;position:relative;overflow:hidden;
}
.container button:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.15);background:linear-gradient(135deg,#144a52 0%,#3d8e8e 100%)}
.container button:active{transform:translateY(1px);box-shadow:0 2px 4px rgba(0,0,0,.1)}
.container button:disabled{opacity:.7;cursor:not-allowed;transform:none!important}
@keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(4);opacity:0}}
.container button::after{content:'';position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgba(255,255,255,.5);opacity:0;border-radius:100%;transform:scale(1) translate(-50%,-50%)}
.container button:focus:not(:active)::after{animation:ripple .6s ease-out}
.container button.loading{color:transparent}
.container button.loading::after{
  content:'';position:absolute;width:20px;height:20px;top:50%;left:50%;margin:-10px 0 0 -10px;
  border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.container button.hidden{background:transparent;border-color:#FFF}

.container form{
  background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;
  padding:20px 40px;height:100%;min-height:520px;overflow-y:auto;
}

.container input,.container select{
  background:#eee;border:none;margin:2px 0;padding:10px 15px;font-size:13px;border-radius:8px;width:100%;
  outline:none;transition:all .3s ease;border:1px solid transparent;
}
.container input:focus,.container select:focus{border-color:var(--primario);box-shadow:0 0 0 2px rgba(30,101,109,.2);transform:scale(1.02)}

/* ===== INPUTS CON ICONO OJO ===== */
.form-container form .form-group{position:relative;width:100%}
.form-container form .form-group input{
  width:100%;
  padding:10px 40px 10px 10px;
  padding-right:42px!important; /* deja espacio para el ojo */
  box-sizing:border-box;
}
/* Evitar que se deforme el input con ojo al hacer focus */
.form-container form .form-group input:focus{
  transform:none!important;
}
.form-container form .form-group i.toggle-password{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  z-index:2;
  width:1.25rem;
  height:1.25rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  color:#6c757d;
}

/* ===== CHECKBOX POLÍTICAS ===== */
.form-check{
  display:flex!important;align-items:flex-start!important;justify-content:flex-start!important;
  margin:8px 0 15px!important;padding:0!important;width:100%!important;gap:8px!important;
}
.form-check-input{
  width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important;margin:0!important;padding:0!important;
  flex-shrink:0!important;background:#fff!important;border:2px solid var(--primario)!important;border-radius:3px!important;cursor:pointer!important;
}
.form-check-input:checked{background:var(--primario)!important;border-color:var(--primario)!important}
.form-check-label{font-size:.75rem!important;line-height:1.3!important;color:var(--texto)!important;margin:0!important;padding:0!important;flex:1!important;cursor:pointer!important}
.form-check-label a{
  font-size:.75rem!important;color:var(--primario)!important;text-decoration:underline!important;font-weight:500!important;
}

/* ===== OCULTAR SUGERENCIAS ===== */
.password-suggestions,.password-hints,.password-tips,.strength-suggestions,[class*="suggestion"],[class*="hint"],[class*="tip"]{
  display:none!important;visibility:hidden!important;opacity:0!important;height:0!important;overflow:hidden!important;
}
.password-strength-meter{display:block!important;visibility:visible!important;opacity:1!important;margin:5px 0!important}

/* Estados de validación del registro */
.password-mismatch{border-color:#dc3545!important;box-shadow:0 0 0 .2rem rgba(220,53,69,.25)!important;background:#fff5f5!important}
.password-match{border-color:#28a745!important;box-shadow:0 0 0 .2rem rgba(40,167,69,.25)!important;background:#f8fff8!important}

/* Indicador coincidencia */
#password-match-indicator{
  width:100%;text-align:center;padding:5px 0;margin:0 0 8px 0;font-size:12px;display:flex;align-items:center;justify-content:center;gap:5px;
}
#password-match-indicator i{font-size:14px}

/* Error general registro */
#form-error-message{
  margin:8px 0!important;padding:8px 12px!important;font-size:12px!important;line-height:1.3!important;border-radius:6px!important;width:100%!important;text-align:center!important;
}
#form-error-message.show-error{display:block!important;visibility:visible!important;opacity:1!important;transform:translateY(0)!important;animation:slideDown .3s ease-out!important}
#form-error-message.hide-error{display:none!important;visibility:hidden!important;opacity:0!important}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
#form-error-message.password-error{background:#f8d7da!important;color:#721c24!important;border:1px solid #f5c6cb!important;display:block!important}

.container input.invalid{border-color:#ff3860;animation:shake .5s ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

.container select{cursor:pointer}

/* ===== LAYOUT FORM ===== */
.form-container{position:absolute;top:0;height:100%;transition:all .6s cubic-bezier(.68,-.55,.265,1.55)}
.sign-in{left:0;width:50%;z-index:2}
.container.active .sign-in{transform:translateX(100%)}
.sign-up{left:0;width:50%;opacity:0;z-index:1}
.container.active .sign-up{transform:translateX(100%);opacity:1;z-index:5;animation:move .6s}
@keyframes move{0%,49.99%{opacity:0;z-index:1}50%,100%{opacity:1;z-index:5}}

/* ===== TOGGLE PANEL ===== */
.toggle-container{
  position:absolute;top:0;left:50%;width:50%;height:100%;overflow:hidden;
  transition:all .6s ease-in-out;border-radius:150px 0 0 100px;z-index:1000;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.toggle img{display:block;height:4rem;margin-bottom:8px;animation:float 3s ease-in-out infinite}
.container.active .toggle-container{transform:translateX(-100%);border-radius:0 150px 100px 0}
.toggle{
  background:linear-gradient(to right,var(--secundario),var(--primario));color:#fff;position:relative;left:-100%;
  height:100%;width:200%;transform:translateX(0);transition:all .6s ease-in-out;
}
.container.active .toggle{transform:translateX(50%)}
.toggle-panel{
  position:absolute;width:50%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;
  padding:0 25px;text-align:center;top:0;transform:translateX(0);transition:all .6s ease-in-out;
}
.toggle-panel h1{font-size:24px;margin-bottom:10px}
.toggle-panel p{font-size:13px;margin:8px 0 15px}
.toggle-left{transform:translateX(-200%)}
.container.active .toggle-left{transform:translateX(0)}
.toggle-right{right:0;transform:translateX(0)}
.container.active .toggle-right{transform:translateX(200%)}

/* Mensajes */
.messages-container{position:fixed;top:20px;right:20px;z-index:9999;max-width:400px;width:auto}
.alert-custom{margin-bottom:10px;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.error_message{color:#a42834;border:none;margin:6px 0;padding:8px 10px;font-size:12px;border-radius:8px;width:100%;text-align:center;text-transform:uppercase;font-weight:bold}
.success_message{color:#28a745;background:#d4edda;border:1px solid #c3e6cb;padding:8px 10px;border-radius:6px;margin:6px 0;text-align:center;font-weight:500;font-size:12px}

/* Efecto ripple (botones) ya activado por .container button */

/* Registro: espaciado */
.sign-up form{justify-content:flex-start;padding-top:15px}
.sign-up form h1{margin-bottom:8px;font-size:26px}
.sign-up form span{margin-bottom:10px}

/* Scroll barras finas */
.container form{scrollbar-width:thin;scrollbar-color:var(--primario) transparent}
.container form::-webkit-scrollbar{width:4px}
.container form::-webkit-scrollbar-track{background:transparent}
.container form::-webkit-scrollbar-thumb{background-color:var(--primario);border-radius:2px}

/* ===== RESPONSIVE ===== */
@media screen and (max-width:768px){
  .container{width:90%;min-height:85vh;max-height:90vh}
  .form-container{padding:0 20px}
  .toggle img{height:3rem}
  .container form{padding:15px 20px;min-height:auto}
  .container button{min-height:38px;min-width:110px;font-size:11px;padding:8px 35px}
}

@media screen and (max-width:650px){
  body{padding:10px}
  .container{width:100%;min-height:90vh;max-height:95vh;margin:0;border-radius:20px}
  .form-container{width:100%;left:0;top:30%;height:70%}
  .sign-in,.sign-up{width:100%}
  .container.active .sign-in{transform:translateY(100%)}
  .container.active .sign-up{transform:translateY(-30%)}

  .toggle-container{top:0;left:0;width:100%;height:30%;border-radius:0 0 20px 20px}
  .container.active .toggle-container{transform:translateY(70vh);border-radius:20px 20px 0 0}
  .toggle{width:100%;height:200%;left:0;top:-100%;border-radius:0}
  .container.active .toggle{transform:translateY(50%)}
  .toggle-panel{width:100%;height:43%;padding:10px}
  .toggle-panel h1{font-size:20px}
  .toggle-panel p{font-size:12px;margin:5px 0 10px}
  .toggle-left{top:0;transform:translateY(-200%)}
  .container.active .toggle-left{transform:translateY(0)}
  .toggle-right{top:50%;right:auto;transform:translateY(0)}
  .container.active .toggle-right{transform:translateY(100%)}

  .container form{padding:10px 20px;gap:1px}
  .container input,.container select{padding:8px 12px;margin:4px 0;font-size:12px}

  .container button{min-height:36px!important;min-width:100px!important;font-size:10px!important;padding:8px 25px!important;margin:8px 0!important}
  .sign-up form h1{font-size:22px;margin-bottom:5px}
  #password-match-indicator{font-size:11px;margin:3px 0 5px 0}
  #form-error-message{font-size:11px!important;padding:6px 10px!important;margin:5px 0!important}

  .form-check-input{width:14px!important;height:14px!important;min-width:14px!important;min-height:14px!important}
  .form-check-label,.form-check-label a{font-size:.7rem!important}
}

@media screen and (max-width:400px){
  .container{min-height:95vh;max-height:100vh;border-radius:15px}
  .form-container{padding:0 15px;top:25%;height:75%}
  .toggle-container{height:25%}
  .toggle-container h1{font-size:18px}
  .toggle-panel{padding:8px}
  .toggle img{height:2.5rem}
  .container p{font-size:12px}
  .container button{min-height:34px!important;min-width:90px!important;font-size:9px!important;padding:6px 20px!important;margin:6px 0!important}
  .container.active .toggle-container{transform:translateY(75vh)}
  .container form{padding:8px 15px}
  .container input,.container select{padding:7px 10px;font-size:11px}
  .sign-up form h1{font-size:20px;margin-bottom:3px}
  .form-check-input{width:12px!important;height:12px!important;min-width:12px!important;min-height:12px!important}
  .form-check-label,.form-check-label a{font-size:.65rem!important}
  .form-check{margin:6px 0 10px 0!important}
}

/* Registro: pequeños ajustes */
.sign-up .position-relative{margin-bottom:4px!important}
.sign-up .position-relative:last-of-type{margin-bottom:8px!important}
.sign-up select[name="role_id"]{margin:8px 0 10px}

/* ===== FIXES ESPECÍFICOS MODAL RESET ===== */
#resetPasswordModal ul.small{padding-left:0!important;margin-left:0!important}
#resetPasswordModal ul.small li{
  list-style:none!important;display:flex!important;align-items:center!important;gap:.25rem!important;
  color:#6c757d!important;
}
#resetPasswordModal li.text-success,
#resetPasswordModal li.text-success *{color:#198754!important}
#resetPasswordModal li.text-danger,
#resetPasswordModal li.text-danger *{color:#dc3545!important}

#resetPasswordModal .progress{background:#e9ecef!important;height:8px!important}
#resetPasswordModal #strength-fill{width:0%;transition:width .25s ease,background-color .25s ease!important}

/* Inputs del modal con ojo */
#resetPasswordModal .position-relative .form-control{
  padding-right:42px!important;
  box-sizing: border-box;
}
#resetPasswordModal .position-relative .toggle-password{
  position: absolute;      /* <-- la clave para que no se desplace */
  right:12px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  z-index:2;
  width:1.25rem;
  height:1.25rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  color:#6c757d;
}