/* ===== Tokens base (mismos que register.css) ===== */

:root{
  --bg:#fff;
  --txt:#222;
  --muted:#666;
  --primary:#eb585a;
  --primary-hover:#d94749;
  --secondary:#f9eff0;
  --beis:#fdebd3;
  --white:#fff;
  --black:#000;
  --chip:#f5f5f5;
  --line:#eaeaea;
  --gt-green1:#0d898b;
  --gt-green2:#61bead;
  --gt-green3:#6fbc7e;
  --gt-green4:#c9daa4;
  --gt-blue1:#68abd9;
  --gt-blue2:#9ec4d8;
  --gt-yellow:#f2c747;
  --gt-salmon1:#eb9a7f;
  --gt-salmon2:#ebb57f;
}

/* ===== Reset base y tipografía (igual que register) ===== */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  height:100%;
  margin:0;
  padding:0;
}

body{
  font-family:'Poppins',sans-serif;
  font-weight:400;
  color:var(--txt);
  background:var(--bg);
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  scroll-behavior:smooth;
}

h1,h2,h3,h4,h5,h6{
  margin:0;
  font-weight:inherit;
  font-size:inherit;
}

/* Botones/enlaces accesibles */

button,
[role="button"],
a.button,
input[type="button"],
input[type="submit"]{
  -webkit-appearance:none;
  touch-action:manipulation;
}

button:focus,
a:focus{
  outline:none;
}

button:focus-visible,
a:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}

/* ===== Autofill (mismo tratamiento que en register) ===== */
/*
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--txt);
  caret-color: var(--txt);
  border-color: var(--primary);
  -webkit-box-shadow:
    0 0 0 1px color-mix(in oklab, var(--primary) 55%, transparent),
    0 0 0 1000px var(--bg) inset !important;
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--primary) 55%, transparent),
    0 0 0 1000px var(--bg) inset !important;
  background-color: var(--bg) !important;
}
*/

textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--bg) inset !important;
}

/* =========================================================
   LAYOUT LOGIN
   (respetando tus class: header, login-container, login-box...)
   ========================================================= */

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:absolute;
  inset-inline:0;
  top:0;
  height:80px;
  padding:25px 5%;
  background-color:#ffffff;
  background:linear-gradient(rgba(0,0,0,0.16),rgba(0,0,0,0.16)),
             url('https://www.gimnasiatotal.com/assets/img/header-background.jpeg')
             center/cover no-repeat;
  transition:height .3s ease-in-out;
}

.header-left{
  display:flex;
  align-items:center;
  gap:50px;
}

.logo{display:block;}

.logo a{
  color:var(--white);
  font-weight:600;
  font-size:20px;
  text-decoration:none;
  font-style:normal;
}

.logo span{
  color:var(--white);
  font-weight:600;
  font-style:normal;
}

.logo img{
  width:150px;
  height:auto;
  transition:width .3s ease-in-out;
}

.header-right{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  text-align:right;
}

/* Banda de intro (si la usas) */

.login-intro{
  display:block;
  width:100%;
  padding:40px 10% 50px;
  margin-top:120px;
  background-color:var(--primary);
}

.login-intro span{
  display:block;
  color:var(--white);
  font-size:30px;
  font-weight:400;
}

.login-intro p{
  display:block;
  color:var(--white);
  font-size:18px;
  font-weight:300;
}

/* Contenedor principal: centrado tipo register */

.login-container{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:40px 20px;
  background:var(--bg);
}

/* Caja login: estilo card similar al registro */

.login-box{
  width:100%;
  max-width:420px;
  background:#fff;
  border-radius:12px;
  padding:32px 28px 32px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
  text-align:left;
}

/* Logo centrado como en register_success */

.login-logo{
  display:block;
  text-align:center;
  margin-bottom:16px;
}

.login-logo a{
  color:#000;
  font-weight:600;
  font-size:20px;
  text-decoration:none;
}

.login-logo a img{
  width:200px;
  height:auto;
}

/* Título bienvenida con estilo del h1 de register */

.welcome-text{
  font-size:16px;
  font-weight:300;
  text-align:center;
  margin-bottom:20px;
  color:var(--primary);
}

/* Podrías reutilizar .muted de register para subtítulos */

.sub-text,
.register-text{
  margin:0 0 16px;
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
  text-align:center;
}

.sub-text a,
.register-text a{
  color:var(--primary);
  text-decoration:underline;
}

.sub-text a:hover,
.register-text a:hover{
  text-decoration:underline;
}

/* ===== Formulario ===== */

.login-form{
  display:flex;
  flex-direction:column;
}

/* Contenedor de etiquetas (izq campo, dcha error) */

.label-container{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.label-left{
  font-size:12px;
  color:#374151;
  font-weight:500;
  margin-right:auto;
  margin-bottom:6px;
}

.error-label-right{
  margin-left:auto;
  color:var(--primary);
  font-size:12px;
  margin-bottom:6px;
}

/* Inputs: mismo estilo que en register */

input[type="text"],
input[type="password"]{
  width:100%;
  padding:10px 14px;
  font-size:14px;
  font-weight:300;
  color:var(--txt);
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  outline:none;
  /*transition:border-color .15s ease, box-shadow .15s ease;*/
  font-family:'Poppins',sans-serif;
}

input[type="text"]:hover,
input[type="password"]:hover{
  border-color:var(--line);
}


input[type="text"]:focus,
input[type="password"]:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 0px color-mix(in oklab, var(--primary) 55%, transparent);
}


/* Separación entre campos */

#nombre,
#email{
  margin-bottom:16px;
}

/* Campo contraseña con icono ojo */

.password-container{
  position:relative;
  display:flex;
  align-items:center;
}

.toggle-password{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  font-size:18px;
  color:var(--primary);
}

.toggle-password img{
  width:16px;
  height:16px;
  margin-top:7px;
  margin-right:5px;
  /*filter:invert(34%) sepia(66%) saturate(3300%) hue-rotate(338deg) brightness(96%) contrast(98%);*/
}

/* Checkbox custom (recordar usuario / legal) */

input[type="checkbox"]{
  appearance:none;
  width:14px;
  height:14px;
  background-color:#fff;
  border:1px solid #666;
  border-radius:2px;
  cursor:pointer;
  position:relative;
  display:inline-block;
  transition:background-color .2s ease,border-color .2s ease;
}

input[type="checkbox"]:checked::after{
  content:"✔";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-52%);
  color:#666;
  font-size:9px;
}

/* Hint textos */

.password-hint{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}

.forgot-password{
  font-size:12px;
  font-weight: 500;
  text-align:left;
  margin-top:18px;
}

.forgot-password a{
  color:var(--primary);
  text-decoration:none;
}

/* Error debajo de campos */

.login-err{
  min-height:15px;
  font-size:12px;
  color:#dc2626;
  text-align:left;
  margin-top:4px;
  margin-bottom:12px;
}

/* Footer del formulario: error + recordar usuario */

.login-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
}

.remember-me-container{
  display:flex;
  align-items:center;
  gap:10px;
}

.remember-me-container label{
  font-size:14px;
  color:var(--txt);
  cursor:pointer;
}

.error{
  margin-top:10px;
  font-size:12px;
  color:#dc2626;
  text-align:left;
}

/* ===== Botones (alineados con register.css) ===== */

.login-button{
  width:100%;
  padding:15px 50px;
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:10px;
  font-size:16px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  text-decoration:none;
  transition:background-color .15s ease;
}

.login-button:hover{
  background:var(--primary-hover);
}

/* Botón genérico .btn (por si lo usas) */

.btn-wrapper-sep{ margin-top:20px; }
.btn-wrapper{ text-align:center; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 50px;
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:10px;
  font-size:16px;
  cursor:pointer;
  transition:background-color .15s ease;
}

.btn:hover{
  background:var(--primary-hover);
}

#doRegister{
  margin-top:24px;
}

/* Texto legal / términos */

.terms-text{
  font-size:12px;
  color:var(--muted);
  text-align:left;
  margin-top:6px;
}

.terms-text a{
  color:var(--muted);
  text-decoration:none;
}

.terms-text a:hover{
  text-decoration:underline;
}

/* Utilidades */

.txtCentered{ text-align:center !important; }

/* ===== Aside login (si lo usas junto a login-box) ===== */

.login-aside{
  flex:0 1 620px;
  background:#f5f5f5;
}

.aside-title{
  font-size:20px;
  font-weight:400;
  color:var(--gt-green1);
}

.aside-card{
  margin-top:20px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:20px 24px;
}

.aside-list{
  margin:0;
  padding-left:20px;
  list-style:disc;
  color:#111827;
}

.aside-list li{
  margin:10px 0;
}

/* Separador "o" (para Google) */

.or{
  display:flex;
  align-items:center;
  gap:10px;
  margin:16px 0;
}

.or::before,
.or::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}

.or span{
  font-size:12px;
  color:var(--muted);
}

/* Botón Google */

.gbtn-wrap{ position:relative; width:100%; }

#googleOverlay{
  position:absolute;
  inset:0;
  z-index:10;
  opacity:0;
  pointer-events:auto;
}

.btn-google{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  padding:7px 50px;
  background:#fff;
  border:1px solid var(--primary);
  border-radius:40px;
  cursor:pointer;
  font-size:16px;
  font-weight:400;
  color:#111827;
  transition:border-color .15s ease, box-shadow .15s ease, transform .02s ease;
}

.btn-google:hover{
  border-color:var(--primary-hover);
}

.btn-google:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in oklab, var(--primary) 35%, transparent);
}

.btn-google:active{
  transform:translateY(1px);
}

.btn-google-ico svg{
  width:20px;
  height:20px;
  display:block;
}

/* Popup mensajes (igual que register) */

.popup-msg{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(.95);
  min-width:260px;
  max-width:90%;
  background:rgba(235,88,90,.95);
  color:#fff;
  font-size:15px;
  text-align:center;
  padding:14px 20px;
  border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  opacity:0;
  z-index:2000;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}

.popup-msg.show{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

/* ===== Responsive ===== */

@media (max-width:980px){
  .login-container{
    flex-direction:column;
    gap:24px;
    /*padding-top:100px;*/
  }
  .login-box,
  .login-aside{
    max-width:420px;
    margin:0 auto;
  }
}

@media (max-width:768px){
  main{ flex-direction:column; }
}

@media (max-width:600px){
  .login-container{
    width:100%;
    padding:24px 16px;
  }
  .login-box{
    padding:24px 20px 28px;
    box-shadow: none;
  }
}