:root{
  --brand:#0f4c81;      /* azul institucional */
  --brand-dark:#083b63; /* azul oscuro panel */
  --ink:#0b2f44;
  --bg:#f3f5f7;
  --border:#e4e8ee;
  --muted:#677789;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 16px;
}

/* Botón volver */
.btn-back{
  position:fixed; right:18px; top:18px;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--brand-dark); color:#fff; text-decoration:none;
  padding:8px 14px; border-radius:10px; font-weight:700; font-size:13px;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}
.btn-back .icon{display:inline-flex}

/* ===== Contenedor principal ===== */
.container{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  position:relative; overflow:hidden;
  width: 980px; max-width:100%;
  min-height:540px;
  box-shadow:0 18px 30px rgba(15,34,58,.08);
}

/* Formularios base */
.form-container{position:absolute; top:0; height:100%; transition:all .6s ease-in-out}
.sign-in-container{left:0; width:50%; z-index:2}
.sign-up-container{left:0; width:50%; opacity:0; z-index:1}

.container.right-panel-active .sign-in-container{transform:translateX(100%)}
.container.right-panel-active .sign-up-container{
  transform:translateX(100%); opacity:1; z-index:5; animation:show .6s
}
@keyframes show{0%,49.99%{opacity:0;z-index:1}50%,100%{opacity:1;z-index:5}}

.form{
  background:#fff;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  padding:36px 44px; height:100%; text-align:left;
}

/* Scroll “invisible” en formularios largos */
.scroll-invisible{overflow-y:auto; -ms-overflow-style:none; scrollbar-width:none}
.scroll-invisible::-webkit-scrollbar{width:0; height:0}

/* Inputs */
input, select{
  width:100%; background:#eef2f6; border:1px solid #e6ecf2;
  border-radius:8px; padding:12px 14px; margin:8px 0;
  font:600 14px/1 'Montserrat',sans-serif; color:#1e2a36;
  outline:none; transition:border-color .2s, background .2s;
}
input::placeholder{color:#9aa7b5; font-weight:600}
input:focus, select:focus{border-color:#c9d6e3; background:#f5f8fb}

/* Fila select + input */
.row{display:flex; gap:10px; width:100%}
.select-wrap{min-width:100px}
.grow{flex:1}

/* Textos y títulos */
.title{font-weight:800; font-size:34px; margin:8px 0 18px}
p{color:var(--muted); font-weight:600; font-size:14px; line-height:1.6; text-align:center; margin:12px 0 22px}
.link{color:var(--brand-dark); text-decoration:none; font-weight:700; font-size:13px; margin:8px 0 18px}
.link:hover{opacity:.85}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

/* Botones */
.btn-primary{
  border-radius:24px; border:1px solid #ffffff;
  background:var(--brand-dark); color:#fff;
  font-size:13px; font-weight:800; letter-spacing:.4px;
  padding:11px 26px; text-transform:uppercase;
  box-shadow:0 4px 14px rgba(8,59,99,.18);
  cursor:pointer; transition:transform .08s ease, opacity .2s;
}
.btn-primary:active{transform:scale(.97)}
.btn-primary:hover{opacity:.95}

.btn-ghost{
  border-radius:24px; border:1.5px solid #fff; background:transparent;
  color:#fff; font-weight:800; padding:10px 22px; text-transform:uppercase; cursor:pointer;
}
.btn-ghost:active{transform:scale(.97)}

/* Checkbox abogado */
.check{display:flex; align-items:center; gap:10px; width:100%; margin:8px 0 6px; color:#1e2a36; font-weight:700}
.check input{width:auto; margin:0}

/* Campo extra ocultable */
.hidden{display:none}

/* ===== Overlay (panel azul) ===== */
.overlay-container{
  position:absolute; top:0; left:50%; width:50%; height:100%; overflow:hidden;
  transition:transform .6s ease-in-out; z-index:100;
}
.container.right-panel-active .overlay-container{transform:translateX(-100%)}

.overlay{
  background:var(--brand-dark);
  color:#fff; position:relative; left:-100%; height:100%; width:200%;
  transform:translateX(0); transition:transform .6s ease-in-out;
}
.container.right-panel-active .overlay{transform:translateX(50%)}

/* columna izquierda/derecha */
.overlay-panel{
  position:absolute; top:0; height:100%; width:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 40px; text-align:center;
}
.overlay-left{transform:translateX(-20%)}
.container.right-panel-active .overlay-left{transform:translateX(0)}
.overlay-right{right:0; transform:translateX(0)}
.container.right-panel-active .overlay-right{transform:translateX(20%)}

/* decoración línea central */
.overlay::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:12px;
  transform:translateX(-50%); background:#083050;
}

/* Tipografía panel */
.hero{font-weight:800; font-size:36px; margin:0 0 12px}

/* Responsive */
@media (max-width: 960px){
  .container{min-height:560px}
}
@media (max-width: 760px){
  .container{width:100%; min-height:640px}
  .overlay::before{display:none}
}

/* ↓ Ajuste de altura del bloque "Inicia Sesión" */
.sign-in-container .form{
  padding-top: 96px;   /* antes era 36px; sube/baja este valor a tu gusto */
}

/* Opcional: en pantallas más pequeñas reduce un poco el empuje */
@media (max-width: 960px){
  .sign-in-container .form{ padding-top: 72px; }
}
@media (max-width: 760px){
  .sign-in-container .form{ padding-top: 56px; }
}

.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease; /* tiempo del efecto */
}

/* ====== Modal ====== */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal-backdrop.hidden{display:none}
.modal-card{background:#0f3e5b;color:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);width:min(520px,92%);padding:22px 22px 18px;position:relative}
.modal-close{position:absolute;right:10px;top:8px;background:transparent;border:0;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.modal-body{font-weight:800;font-size:18px;text-align:center;line-height:1.35;margin:16px 8px 18px}
.modal-btn{display:block;margin:0 auto;background:#0e3a57;border:2px solid #fff;color:#fff;border-radius:10px;padding:10px 22px;font-weight:700}
.modal-btn:hover{background:#124b74}

/* ====== Password (ojito) ====== */
.password-wrap{position:relative}
.password-wrap input{width:100%}
.pwd-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid #ccd7e2;background:#f3f6fa;cursor:pointer}
.pwd-toggle:before{content:"👁";display:block;text-align:center;line-height:32px}
.password-wrap.showing input{ -webkit-text-security:none; }

/* ====== Hint debajo del input ====== */
.input-hint{font-size:12px;color:#9aa8b6;margin-top:6px}
.input-hint.error{color:#d33}
.hidden{display:none}

/* Fade-out para transiciones */
body.fade-out{opacity:0;transition:opacity .4s ease}



/* --- inputs de línea completa --- */
.input-full {
  width: 100%;
}

/* contenedor del input con ojo (posición relativa para ubicar el ojo dentro) */
.input-eye {
  position: relative;
  width: 100%; /* mantiene el ancho completo del grid/columna */
}

/* el input en sí ocupa todo el ancho */
.input-eye input {
  width: 100%;
  padding-right: 42px; /* espacio para el botón ojo */
}

/* botón ojo posicionado dentro del campo, no reduce el ancho del input */
.eye-btn {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: #eef3f7 url("../img/eye.png") center/18px 18px no-repeat;
  cursor: pointer;
}


.eye-btn.is-on {
  background-image: url("../img/eye.png"); 
}

.text-hint { font-size: 13px; color: #6b7280; }
.text-error { color: #c0392b; }



/* Card central para forgot/verify/reset */
.auth-card{
  max-width: 560px;
  margin: 8vh auto;            /* sube la tarjeta */
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(2,24,44,.10);
  padding: 28px 28px 24px;
}
.auth-card h1{
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 16px;
  color: #083b5a;
}
.auth-card .input-full{ margin-bottom: 12px; }


/* ===========================
   LOGIN: Responsive móvil (solo <760px)
   No afecta desktop
=========================== */
@media (max-width: 760px){

  body{
    padding: 18px 12px;
    align-items: flex-start;
  }

  /* Botón volver: más pequeño y no tapa */
  .btn-back{
    right: 12px;
    top: 12px;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 12px;
    z-index: 2000;
  }

  /* Contenedor principal tipo card */
  .container{
    width: 100%;
    min-height: auto;
    border-radius: 14px;
    overflow: hidden;
  }

  /* Quitar el layout absoluto (2 columnas) y convertir a flujo normal */
  .form-container{
    position: relative;
    top: auto;
    height: auto;
    width: 100% !important;
    transform: none !important;
    transition: none !important;
  }

  /* Por defecto ocultamos registro y mostramos login */
  .sign-in-container{ display: block; }
  .sign-up-container{ display: none; opacity: 1; }

  /* Cuando se activa registro (clase right-panel-active), alternamos */
  .container.right-panel-active .sign-in-container{ display: none; }
  .container.right-panel-active .sign-up-container{ display: block; }

  /* El overlay NO debe existir en móvil (estorba) */
  .overlay-container{ display: none !important; }

  /* Formulario más compacto */
  .form{
    padding: 26px 18px;
    align-items: stretch;
  }

  .title{
    font-size: 26px;
    text-align: center;
    margin: 6px 0 14px;
  }

  /* Inputs más cómodos */
  input, select{
    font-size: 14px;
    padding: 12px 14px;
    border-radius: 10px;
  }

  .row{
    flex-direction: column;
    gap: 10px;
  }
  .select-wrap{ min-width: 100%; }

  /* En móvil no empujes el login hacia abajo */
  .sign-in-container .form{ padding-top: 26px !important; }

  /* Link centrado */
  .link{
    text-align: center;
    margin: 8px 0 14px;
  }

  /* Botón principal full width */
  .btn-primary{
    width: 100%;
    padding: 12px 18px;
    border-radius: 14px;
  }

  /* En móvil damos un “switch” simple con tus botones existentes (signIn/signUp)
     Lo hacemos con ::before en el container para que no tengas que tocar HTML */
  .container::before{
    content: "Selecciona una opción";
    display: block;
    padding: 14px 18px 0;
    font-weight: 800;
    color: #0b2f44;
    text-align: center;
  }

  /* deja un “espacio seguro” arriba para el botón VOLVER */
  body{ padding-top: 76px !important; }

  /* opcional: si quieres bajar solo la tarjeta y no todo */
  .container{ margin-top: 6px; }
}

@media (max-width: 760px){
  .mobile-tabs{
    display: flex;
    gap: 10px;
    padding: 14px 16px 0;
  }

  .tab-btn{
    flex: 1;
    border: 1px solid #d9e3ee;
    background: #f3f6fa;
    color: #0b2f44;
    font-weight: 800;
    padding: 12px 10px;
    border-radius: 14px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .3px;
  }

  .tab-btn.is-active{
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
  }
}

/* En desktop no se ven */
@media (min-width: 761px){
  .mobile-tabs{ display:none !important; }
}