/* Hereda paleta desde styles_index.css */
:root{
  --primary: #01CE00;
  --white:   #FFFFFF;
  --gray-600:#868686;
  --gray-500:#B1B1B0;
  --text-1:  #1C1C1C;
  --bg:      #F7F9F8;
  --ring:    #01CE00;
  --shadow:  0 10px 25px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
}

/* Contenedor de autenticación */
.auth{
  min-height: calc(100dvh - 64px);
  display:grid; place-items:center;
  padding: clamp(1rem, 4vw, 2rem);
}

.auth__card{
  width: min(460px, 100%);
  background: var(--white);
  border: 1px solid #EDEDED;
  border-radius: 16px;
  padding: clamp(1rem, 4vw, 1.5rem);
  box-shadow: var(--shadow);
}

.auth__title{
  margin:0 0 .25rem 0;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 800;
}
.auth__subtitle{
  margin:.1rem 0 1rem 0;
  color: var(--gray-600);
}

.auth__footnote{
  margin: 1rem 0 0 0;
  color: var(--gray-600);
  text-align:center;
  font-size:.9rem;
}

/* Campos */
.field{ display:block; margin-bottom: .9rem; }
.field__label{ display:block; font-weight:600; margin-bottom:.35rem; }
.field__control{
  position:relative; display:flex; align-items:center; gap:.5rem;
  border:1px solid #E5E5E5; border-radius:12px; background:#fff;
  padding:.6rem .7rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field__control:focus-within{
  border-color: rgba(1,206,0,.55);
  box-shadow: 0 0 0 4px rgba(1,206,0,.12);
}
.field__icon{
  color:#017e00; opacity:.9; font-size:1rem;
}
.field__control input{
  border:0; outline:0; font-size:1rem; flex:1 1 auto; background:transparent;
  padding:.1rem;
}
.field__suffix{
  border:0; background:transparent; cursor:pointer; padding:.25rem; border-radius:8px;
}
.field__suffix:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

.hint{
  display:block; margin-top:.35rem; color:#9a2b2b; font-weight:600;
}

/* Botón primario */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1rem; border-radius:12px; font-weight:700;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  will-change: transform;
}
.btn--block{ width:100%; }
.btn--primary{
  background: var(--primary); color:#003c00;
  box-shadow: 0 6px 16px rgba(1,206,0,.35);
}
.btn--primary:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.btn--primary:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

/* Alertas */
.alert{
  display:flex; align-items:flex-start; gap:.6rem; border-radius:12px; padding:.7rem .9rem; margin:.5rem 0 1rem;
  border:1px solid transparent; font-weight:600;
}
.alert--danger{
  background: #FFF5F5; color:#8b1e1e; border-color:#ffd9d9;
}

/* Accesibilidad / Motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; }
}