:root{
  --mv-primary:      #3eb034;
  --mv-primary-dark: #007b3a;
  --mv-secondary:    #15053c;
  --mv-tint:         #EEF3EA;
  --mv-bg:           #F4F5F1;
  --mv-text:         #1E2420;
  --mv-text-muted:   #7A8177;
  --mv-border:       #E3E0D6;
  --mv-danger:       #C0392B;
}

/* ---------------------------------------------------------------------- */
/* Layout de pagina: panel visual (izq) + panel de formulario (der)        */
/* ---------------------------------------------------------------------- */
.mv-auth-page{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  font-family:'Manrope','Roboto',sans-serif;
  color:var(--mv-text);
}

.mv-auth-visual{
  position:relative;
  overflow:hidden;
  background:linear-gradient(150deg, var(--mv-primary) 0%, var(--mv-primary-dark) 100%);
  transition:background .35s ease;
}
.mv-auth-visual svg{ position:absolute; inset:0; width:100%; height:100%; }
.mv-auth-visual svg polygon,
.mv-auth-visual svg rect,
.mv-auth-visual svg line{ transition:fill .35s ease, stroke .35s ease; }

/* Tono claro (verde del isologo). Se activa con .mv-theme-light en .mv-auth-page.
   Al pisar las variables a nivel de .mv-auth-page, tambien cambian el boton
   "Iniciá Sesión", los links y el foco de los inputs del lado derecho —
   no solo el panel visual. */
.mv-auth-page.mv-theme-light{
  --mv-primary:      #15053c;
  --mv-primary-dark: #2a0e72;
  --mv-secondary:    #3eb034;
}

.mv-auth-formside{
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
}

@media (max-width: 900px){
  .mv-auth-page{ grid-template-columns:1fr; }
  .mv-auth-visual{ display:none; }
}

.mv-mobile-logo{ display:none; }
@media (max-width: 900px){
  .mv-mobile-logo{ display:block; margin-bottom:8px; }
  .mv-mobile-logo img{ margin:0 auto; }
}

/* ---------------------------------------------------------------------- */
/* Switch de tono (oscuro / claro) del panel izquierdo                     */
/* ---------------------------------------------------------------------- */
.mv-theme-switch{
  position:absolute;
  top:55px;
  left:20px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}
.mv-theme-switch-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.mv-theme-switch-track{
  position:relative;
  width:46px;
  height:25px;
  border-radius:999px;
  background:rgba(0,0,0,.28);
  border:1.5px solid rgba(255,255,255,.4);
  padding:2.5px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.25);
  transition:border-color .2s ease;
}
.mv-theme-switch-thumb{
  display:block;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#007b3a; /* verde oscuro: estado actual */
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  transition:transform .2s ease, background-color .2s ease;
}
.mv-theme-light .mv-theme-switch-track{
  border-color:rgba(255,255,255,.6);
}
.mv-theme-light .mv-theme-switch-thumb{
  transform:translateX(20px);
  background:#7CB342; /* verde claro: estado actual */
}

.mv-auth-visual-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:56px 48px 48px;
  text-align:center;
}
.mv-auth-logo-chip{
  background:#fff;
  border-radius:16px;
  padding:18px 28px;
  display:inline-flex;
  align-items:center;
  box-shadow:0 12px 32px rgba(0,0,0,.22);
  border-bottom:3px solid var(--mv-secondary);
}
.mv-auth-logo-chip img{ height:34px; display:block; }
.mv-auth-visual-copy{ max-width:380px; text-align:left;bottom: 75px;position: fixed; }
.mv-auth-visual-copy .eyebrow{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:rgba(255,255,255,.6); margin-bottom:12px;
}
.mv-auth-visual-copy .title{
  font-size:26px; font-weight:800; color:#fff; line-height:1.4;
}

.mv-auth-visual-copy .title span{
  font-size:16px; font-weight:600; color:#fff; line-height:1;opacity:0.5
}

/* ---------------------------------------------------------------------- */
/* Aviso de entorno (.floating-text ya viene inyectado desde PHP)          */
/* ---------------------------------------------------------------------- */
.floating-text{
  position:fixed;
  top:0; left:0; right:0;
  z-index:10000;
  background:var(--mv-primary-dark);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:8px 12px;
}

/* ---------------------------------------------------------------------- */
/* Card de login                                                           */
/* ---------------------------------------------------------------------- */
.mv-auth-page .login-container{
  width:100%;
  max-width:400px;
}

.mv-auth-page .login-container .text-center img{
  display:block;
  margin:0 auto 20px;
}

.mv-auth-page .login-header{ text-align:center; margin-bottom:24px; }
.mv-auth-page .login-header h1{
  font-size:24px;
  font-weight:800;
  color:var(--mv-text);
  margin-bottom:4px;
  letter-spacing:-.01em;
}
.mv-auth-page .login-header p{
  font-size:13.5px;
  color:var(--mv-text-muted);
  margin:0;
}

/* ---------------------------------------------------------------------- */
/* Alertas / aviso de seguridad (ids/clases originales, solo restyle)      */
/* ---------------------------------------------------------------------- */
.mv-auth-page #alertMessage.alert{
  border-radius:10px;
  font-size:13px;
  padding:10px 14px;
  margin-bottom:14px;
}
.mv-auth-page #alertMessage.alert:empty{ display:none; }

.mv-auth-page .security-notice{
  background:var(--mv-tint);
  border:1px solid color-mix(in srgb, var(--mv-primary) 25%, transparent);
  border-radius:10px;
  padding:12px 14px;
  font-size:12.5px;
  color:var(--mv-text);
  margin-bottom:18px;
  display:none; /* oculto por defecto: el JS existente lo muestra tildando "Recordarme" */
}
.mv-auth-page .security-notice strong{ display:block; margin-bottom:4px; }
.mv-auth-page .clear-saved-btn{
  margin-top:8px;
  border:none;
  background:none;
  color:var(--mv-primary);
  font-weight:700;
  font-size:12px;
  text-decoration:underline;
  cursor:pointer;
  padding:0;
}

/* Estado visible del aviso de seguridad */
.mv-auth-page .security-notice.show{
  display:block;
  animation:mvFadeIn .25s ease;
}

/* Alertas generadas desde showAlert() */
.mv-auth-page #alertMessage.alert-success{
  background:#EAF7ED;
  border:1px solid #8ED3A3;
  color:#256B3F;
}

.mv-auth-page #alertMessage.alert-error{
  background:#FDECEC;
  border:1px solid #E7A3A3;
  color:#B3261E;
}

.mv-auth-page #alertMessage.show{
  display:block;
  animation:mvFadeIn .25s ease;
}
/* ---------------------------------------------------------------------- */
/* Formulario                                                               */
/* ---------------------------------------------------------------------- */
.mv-auth-page .form-group{ margin-bottom:18px; }
.mv-auth-page .form-group label{
  display:block;
  font-size:12.5px;
  font-weight:700;
  color:var(--mv-text);
  margin-bottom:7px;
}

.mv-auth-page .input-wrapper{ position:relative; }
.mv-auth-page .input-wrapper i{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--mv-text-muted);
  font-size:15px;
  transition:color .15s ease;
  pointer-events:none;
}
.mv-auth-page .input-wrapper:focus-within i{ color:var(--mv-primary); }

.mv-auth-page .form-control{
  width:100%;
  padding:13px 10px 13px 10px;
  border:1.5px solid var(--mv-border);
  border-radius:10px;
  font-size:14.5px;
  color:var(--mv-text);
  background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.mv-auth-page .form-control::placeholder{ color:#B7BBAE; }
.mv-auth-page .form-control:focus{
  outline:none;
  border-color:var(--mv-primary);
  box-shadow:0 0 0 4px var(--mv-tint);
}

.datepicker {
    padding: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 11px!important;
    direction: ltr;
	flex-wrap: nowrap!important;
}

/* Campos con error (utilizado por index.js) */
.mv-auth-page .form-control.invalid{
  border-color:var(--mv-danger);
  box-shadow:0 0 0 4px rgba(192,57,43,.12);
}

.mv-auth-page .form-control.invalid:focus{
  border-color:var(--mv-danger);
  box-shadow:0 0 0 4px rgba(192,57,43,.15);
}

.mv-auth-page .input-wrapper:has(.form-control.invalid) i{
  color:var(--mv-danger);
}

/* Mensajes de error */
.mv-auth-page .error{
  display:none;
  color:var(--mv-danger);
  font-size:12px;
  margin-top:6px;
  line-height:1.35;
}

.mv-auth-page .error{
  display:none;
  color:var(--mv-danger);
  font-size:12px;
  margin-top:6px;
}

.mv-auth-page .remember-forgot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:18px 0 22px;
  font-size:13px;
}
.mv-auth-page .remember-forgot label{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--mv-text-muted);
  cursor:pointer;
  font-weight:400;
}
.mv-auth-page .remember-forgot input[type="checkbox"]{
  width:16px; height:16px;
  accent-color:var(--mv-primary);
  cursor:pointer;
}
.mv-auth-page .remember-forgot a.text-success{
  color:var(--mv-primary) !important;
  font-weight:700;
  text-decoration:none;
  font-size:13px;
}
.mv-auth-page .remember-forgot a.text-success:hover{ text-decoration:underline; }

/* ---------------------------------------------------------------------- */
/* Boton principal                                                          */
/* ---------------------------------------------------------------------- */
.mv-auth-page .btn-success{
  background:var(--mv-primary) !important;
  border-color:var(--mv-primary) !important;
  font-weight:700;
  font-size:14.5px;
  padding:13px;
  box-shadow:0 8px 20px -6px color-mix(in srgb, var(--mv-primary) 55%, transparent);
  transition:background .15s ease, transform .1s ease;
}
.mv-auth-page .btn-success:hover{
  background:var(--mv-primary-dark) !important;
  border-color:var(--mv-primary-dark) !important;
  transform:translateY(-1px);
}
.mv-auth-page .btn-rounded{ border-radius:21px !important; }

/* ---------------------------------------------------------------------- */
/* Loading                                                                   */
/* ---------------------------------------------------------------------- */
.mv-auth-page .loading{
  display:none;
  text-align:center;
  margin-top:14px;
}

.mv-auth-page .loading.active{
  display:block;
  animation:mvFadeIn .25s ease;
}
.mv-auth-page .spinner{
  width:22px; height:22px;
  border:2.5px solid var(--mv-tint);
  border-top-color:var(--mv-primary);
  border-radius:50%;
  margin:0 auto;
  animation:mv-spin .7s linear infinite;
}
@keyframes mv-spin{ to{ transform:rotate(360deg); } }

/* ---------------------------------------------------------------------- */
/* Divider + login social                                                   */
/* ---------------------------------------------------------------------- */
.mv-auth-page .divider{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  color:#B0AC9E;
}
.mv-auth-page .divider::before,
.mv-auth-page .divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--mv-border);
}

.mv-auth-page .social-login{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mv-auth-page .social-login .btn-outline-light{
  width:100%;
  border:1.5px solid var(--mv-border) !important;
  background:#fff !important;
  color:var(--mv-text) !important;
  font-size:13.5px;
  font-weight:700;
  padding:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  transition:border-color .15s ease, background .15s ease;
}
.mv-auth-page .social-login .btn-outline-light:hover{
  border-color:var(--mv-primary) !important;
  background:var(--mv-tint) !important;
}
.mv-auth-page .social-login .fa-google{ color:#DB4437; }
.mv-auth-page .social-login .fa-windows{ color:#2F5DAB; }

/* ---------------------------------------------------------------------- */
/* Link de registro                                                         */
/* ---------------------------------------------------------------------- */
.mv-auth-page .register-link{
  text-align:center;
  font-size:13.5px;
  color:var(--mv-text-muted);
  margin-top:22px;
}
.mv-auth-page .register-link a.text-success{
  color:var(--mv-primary) !important;
  font-weight:700;
  text-decoration:none;
}
.mv-auth-page .register-link a.text-success:hover{ text-decoration:underline; }

/* ---------------------------------------------------------------------- */
/* Responsive                                                                */
/* ---------------------------------------------------------------------- */
@media (max-width: 480px){
  .mv-auth-page .login-container{ padding:0 4px; }
}

/* Animación reutilizable */
@keyframes mvFadeIn{
  from{
    opacity:0;
    transform:translateY(-4px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}