:root{
  --green:#0a8f3c;
  --yellow:#ffd85a;
  --text:#1b1b1b;
  --muted:#6b6b6b;
  --line:#d8d8d8;
  --card:#ffffff;
  --bg:#ffffff;
  --shadow:0 12px 30px rgba(0,0,0,.18);
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text);}
a{color:inherit}

.page{min-height:100vh}

.split{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1.2fr 1fr;
}

.leftArt{
  position:relative;
  background:#fff;
  overflow:hidden;
  border-right: 6px solid #111;
}

.logosTop{
  position:absolute; top:28px; left:0; right:0; height:52px;
  background:transparent;
}

.artTitle{
  position:absolute; top:120px; left:70px; right:40px;
}
.artTitle .t1{font-weight:800; color:var(--green); letter-spacing:.5px; font-size:44px; line-height:1}
.artTitle .t2{font-weight:900; color:var(--green); font-size:72px; line-height:1}
.artTitle .t3{margin-top:10px; font-weight:600; color:#222; font-size:24px}
.binoculars{
  position:absolute; left:60px; bottom:80px; width:520px; height:520px;
  background:transparent;
}
.ribbons{
  position:absolute; left:0; right:0; bottom:0; height:220px;
  background:transparent;
}

.rightForm{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 60px 70px;
  background: #f2f2f2;
}
.rightForm h1{margin:0 0 12px; color:var(--green); font-size:40px}
.rightForm .sub{margin:0 0 24px; color:var(--muted); font-size:18px}

.form{display:flex; flex-direction:column; gap:16px; max-width:420px;}
.field span{display:block; color:var(--muted); font-weight:600; margin-bottom:8px}
.field input,.field select{
  width:100%;
  border:none;
  border-bottom:2px solid #8b8b8b;
  background:transparent;
  padding: 10px 6px;
  font-size:18px;
  outline:none;
}
.field input:focus,.field select:focus{border-bottom-color:var(--green)}

.btn{
  border:none;
  cursor:pointer;
  font-weight:800;
  padding: 14px 22px;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
  text-decoration:none;
  display:inline-flex;
  justify-content:center;
  align-items:center;
}
.btn.primary{
  background: var(--yellow);
  color: var(--green);
  border: 3px solid #111;
   font-size: 17px;              /* texto del botón */
  font-weight: 800;
}
.links{margin-top:-6px}
.link{color:var(--green); text-decoration:underline; font-weight:700}
.link.strong{font-weight:900}

.footerLinks{
  margin-top: 22px;
  display:flex; gap:10px; align-items:center;
  color: #666;
}

.alert{
  background:#ffe3e3;
  border:1px solid #ffb3b3;
  color:#7a0b0b;
  padding:12px 14px;
  border-radius:12px;
  margin-bottom:14px;
  max-width:420px;
}
.ok{
  background:#e6ffed;
  border:1px solid #b8f5c8;
  color:#0b5a22;
  padding:12px 14px;
  border-radius:12px;
  margin-bottom:14px;
}

.secBox{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:#fff;
}
.secTitle{
  font-weight:900;
  color:#222;
  margin-bottom:10px;
}

.single{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:30px;
  background:#f2f2f2;
}
.card{
  width:min(560px, 100%);
  background:var(--card);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:26px;
}
.card h1{margin:0 0 10px; color:var(--green); font-size:32px}
.actions{margin-top:14px}

/* Modal */
.modalOverlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  justify-content:center;
  align-items:center;
  padding:18px;
  z-index:9999;
}
.modal{
  width:min(560px, 100%);
  background:#fff;
  border-radius:26px;
  box-shadow:var(--shadow);
  padding:22px 22px 18px;
  position:relative;
  text-align:center;
}
.modalClose{
  position:absolute; right:14px; top:10px;
  border:none; background:transparent;
  font-size:28px; cursor:pointer; color:#777;
}
.modalIcon{height:90px; background:transparent; margin-top:8px}
.modal h2{margin:10px 0 10px; color:var(--green); font-size:30px; line-height:1.15}
.modalText{margin:0 0 12px; color:#222; font-size:16px}
.modalList{
  text-align:left;
  margin: 0 auto 14px;
  width:min(460px, 100%);
  color:#222;
}
.modalList li{margin:8px 0}

/* Responsive (móvil = se parece a tus pantallas) */
@media (max-width: 980px){
  .split{grid-template-columns:1fr}
  .leftArt{display:none}
  .rightForm{
    min-height:100vh;
    padding: 50px 22px;
    background:##f6f8f7;
  }
  .rightForm h1{font-size:44px; text-align:center}
  .rightForm .sub{text-align:center}
  .form{max-width:520px; margin:0 auto}
}
/* ===== LOGIN IMAGEN FULL ===== */

/* ===== LOGIN IMAGEN FULL (DESKTOP) ===== */
/* ===== LOGIN IMAGEN FULL (DESKTOP) ===== */
.loginArt{
  background-image: url('/assets/img/imagen1.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 100vh;
}

/* ===== MÓVIL (PORTRAIT y general bajo 980px): 1 columna + imagen móvil arriba ===== */
@media (max-width: 980px){
  .split{
    grid-template-columns: 1fr;
  }

  .leftArt{
    display:block;
    border-right:none;
  }

  .loginArt{
    background-image: url('/assets/img/imagen1_movil.jpg');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    min-height: 45vh;
  }

  .rightForm{
    min-height: auto;
    padding: 36px 22px;
  }
}

/* ===== MÓVIL HORIZONTAL (LANDSCAPE): 2 columnas para que se vea correcto ===== */
@media (max-width: 980px) and (orientation: landscape){
  .split{
    grid-template-columns: 1.1fr 1fr;
    min-height: 100vh;
  }

  .loginArt{
    /* En horizontal se ve mejor la imagen grande */
    background-image: url('/assets/img/imagen1.jpg');
    min-height: 100vh;
  }

  .rightForm{
    padding: 24px 28px;
    justify-content: center;
  }

  .form{
    max-width: 380px;
  }
}
/* ===== AJUSTE LOGIN PC PARA CALCAR MOCK ===== */
@media (min-width: 981px){
  /* Columna derecha: centrado similar al diseño */
  .rightForm{
    background: transparent;
    align-items: center;         /* centra el contenido horizontal */
    padding: 0 70px;             /* menos “aire” vertical */
  }

  /* Bloque del form */
  .rightForm h1{
    width: 420px;
    text-align: left;
    font-size: 34px;
    margin: 0 0 18px;
  }

  .form{
    width: 420px;
    gap: 18px;
  }

  /* Labels: pequeños, cercanos al underline, estilo mock */
  .field span{
    font-size: 12px;
    font-weight: 600;
    color: #6f6f6f;
    margin-bottom: 6px;
  }

  /* Inputs: underline más fino, tipografía un poco más grande */
  .field input, .field select{
    border-bottom: 2px solid #8b8b8b;
    padding: 10px 6px 8px;
    font-size: 16px;
  }

  /* Botón: más angosto y centrado */
  .btn.primary{
    width: 280px;
    align-self: center;
    margin-top: 10px;
  }

  /* Links centrados con el botón */
  .links{
    width: 280px;
    align-self: center;
    text-align: center;
    margin-top: -6px;
  }

  .footerLinks{
    width: 310px;
    align-self: center;
    justify-content: center;
    text-align: center;
    margin-top: 34px;
  }

  /* Ajuste de tamaño de links para calcar mock */
  .link{
    font-size: 18px;
  }
  .footerLinks span{
    font-size: 18px;
  }
}
/* ===== FLOATING LABEL LOGIN ===== */

.field.floating{
  position: relative;
  width: 100%;
}

.field.floating input{
  width: 100%;
  border: none;
  border-bottom: 2px solid #8b8b8b;
  background: transparent;
  padding: 18px 6px 8px;
  font-size: 18px;
  outline: none;
}

.field.floating label{
  position: absolute;
  left: 6px;
  top: 18px;
  font-size: 18px;
  color: #6f6f6f;
  font-weight: 600;
  pointer-events: none;
  transition: all .2s ease;
}

/* Al hacer focus o cuando hay texto */
.field.floating input:focus + label,
.field.floating input:not(:placeholder-shown) + label{
  opacity: 0;
  transform: translateY(-6px);
}

/* Focus visual */
.field.floating input:focus{
  border-bottom-color: var(--green);
}

/* ===== AJUSTES LOGIN MÓVIL (PANTALLA 1) ===== */
@media (max-width: 980px){
  body{
    background-color: #f6f8f7;
  }
  /* 1) Subir y centrar el bloque */
  .rightForm{
    padding: 22px 18px;     /* menos aire */
    align-items: center;    /* centra todo */
    justify-content: flex-start;
  }

  .rightForm h1{
    width: 100%;
    text-align: center;
    margin: 8px 0 14px;     /* sube el título */
    font-size: 44px;        /* similar a la referencia */
  }

  /* El form centrado y con ancho controlado */
  .form{
    width: min(520px, 100%);
    margin: 0 auto;
    gap: 18px;
  }

  /* 2) Inputs: evitar salto de línea del label (ellipsis) */
  .field.floating label{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 12px);
    display: block;
    text-align: center;     /* la referencia lo ve centrado */
    left: 50%;
    transform: translateX(-50%);
  }

  .field.floating input{
    text-align: center;     /* la referencia alinea al centro */
  }

  /* 3) Botón: sin borde negro y centrado */
  .btn.primary{
    border: none !important;
    width: 280px;
    align-self: center;
  }

  /* 4) Olvidaste: centrado y sin negrita */
  .links{
    width: 280px;
    align-self: center;
    text-align: center;
    margin-top: -6px;
  }

  .links .link{
    font-weight: 400 !important;  /* quita negrita */
    text-decoration: underline;
  }

  /* Footer centrado como referencia */
  .footerLinks{
    width: 100%;
    justify-content: center;
    text-align: center;
    margin-top: 24px;
  }

  .footerLinks span{
    font-weight: 600;
    color: #777;
  }
}
/* ===== FORGOT (OLVIDASTE) ESTILO CONSISTENTE ===== */
.forgotPage{
  background: var(--bg);
}

.forgotCard{
  background: transparent;
  box-shadow: none;
  padding: 10px 0 0;
}

.forgotCard h1{
  color: var(--green);
  text-align: center;
  font-size: 44px;
  margin: 10px 0 18px;
}

/* Card contenedor simple */
.single .card{
  border-radius: 0;
}

/* Botón igual a pantalla 1 en móvil: sin borde negro */
@media (max-width: 980px){
  .forgotCard .btn.primary{
    border: none !important;
  }
}
/* ===== OLVIDASTE - LANDSCAPE (MÓVIL HORIZONTAL) ===== */
@media (max-width: 980px) and (orientation: landscape){
  .forgotPage{
    padding: 0;
  }

  .forgotCard{
    width: min(520px, 92vw);
    margin: 0 auto;
  }

  .forgotCard h1{
    font-size: 34px;
    margin: 18px 0 12px;
    text-align: center;
  }

  .forgotCard .form{
    width: 100%;
    max-width: 520px;
    gap: 14px;
  }

  /* El campo no tan alto en horizontal */
  .forgotCard .field.floating input{
    padding: 16px 6px 8px;
    font-size: 16px;
    text-align: center;
  }

  .forgotCard .field.floating label{
    top: 16px;
    font-size: 16px;
  }

  /* Botón alineado y sin sensación de “flotando” */
  .forgotCard .btn.primary{
    width: 280px;
    margin: 6px auto 0;
  }

  .forgotCard .links{
    width: 280px;
    margin: 0 auto;
    text-align: center;
  }
}