/* ==========================================================================
   Las pantallas de antes de entrar (16/09/2026)
   --------------------------------------------------------------------------
   Acceso, contraseña olvidada, contraseña nueva y código. Van DESPUÉS de
   web.css y usan sus tokens (--carbon, --cobre, --tinta…), sus fuentes y sus
   botones. Aquí solo lo que es de un formulario.
   ========================================================================== */

.entrar{
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  background:radial-gradient(70% 45% at 50% 0%,rgba(201,139,98,.11),transparent 70%),var(--carbon);
}

.entrar-barra{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:68px;width:100%}
.entrar-volver{color:var(--tinta-baja);text-decoration:none;font-size:.92rem;transition:color .16s}
.entrar-volver:hover{color:var(--tinta)}

.entrar-main{flex:1;display:grid;place-items:center;padding:clamp(20px,5vw,56px) var(--gutter)}
.entrar-caja{width:100%;max-width:420px}
.entrar-caja h1{font-size:clamp(1.8rem,4.2vw,2.35rem);margin-bottom:.55rem}
.entrar-sub{color:var(--tinta-baja);margin-bottom:1.7rem;line-height:1.55}

/* ---------- el formulario ---------- */
.entrar-form{
  display:grid;gap:1.15rem;padding:clamp(1.4rem,4vw,2rem);
  background:var(--carbon-alto);border:1px solid var(--linea);border-radius:var(--r);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.entrar-campo{display:grid;gap:.42rem}
.entrar-campo label{font-size:.88rem;font-weight:500;color:var(--tinta-baja)}
.entrar-campo input{
  width:100%;font:inherit;font-size:1rem;color:var(--tinta);
  background:var(--carbon);border:1px solid var(--linea-fuerte);border-radius:10px;
  padding:.74rem .88rem;transition:border-color .15s,box-shadow .15s;
}
.entrar-campo input:hover{border-color:rgba(244,243,241,.32)}
.entrar-campo input:focus{outline:none;border-color:var(--cobre);box-shadow:0 0 0 3px rgba(201,139,98,.28)}
.entrar-campo input[aria-invalid="true"]{border-color:#F2836F}
/* El autocompletado del navegador pinta el campo de amarillo claro: sobre carbón no se lee. */
.entrar-campo input:-webkit-autofill{-webkit-text-fill-color:var(--tinta);caret-color:var(--tinta);
  box-shadow:0 0 0 100px var(--carbon) inset;transition:background-color 9999s}
.entrar-campo .error{color:#F2836F;font-size:.87rem;line-height:1.45}

.entrar-codigo{font-family:var(--mono);font-size:1.45rem !important;letter-spacing:.32em;text-align:center}

.entrar-casilla{display:flex;align-items:center;gap:.6rem;font-size:.93rem;color:var(--tinta-baja);cursor:pointer;width:fit-content}
.entrar-casilla input{width:18px;height:18px;margin:0;accent-color:var(--cobre)}

.entrar-boton{display:flex;width:100%;justify-content:center;font-size:1rem;padding:.86rem 1.2rem;margin-top:.2rem}
.entrar-boton:focus-visible{outline:2px solid var(--cobre-claro);outline-offset:3px}

/* ---------- avisos y enlaces debajo ---------- */
.entrar-aviso{
  margin-bottom:1.2rem;padding:.8rem 1rem;border-radius:10px;font-size:.93rem;line-height:1.5;
  color:var(--tinta);background:rgba(79,199,154,.08);border:1px solid rgba(79,199,154,.35);
}
.entrar-enlaces{margin-top:1.4rem;display:grid;gap:.55rem;justify-items:center;text-align:center;color:var(--tinta-baja);font-size:.92rem;line-height:1.5}
.entrar-enlaces a{color:var(--cobre-claro)}

.entrar-pie{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.4rem;padding:1.6rem var(--gutter);color:var(--tinta-tenue);font-size:.85rem}
.entrar-pie a{color:var(--tinta-baja);text-decoration:none}
.entrar-pie a:hover{color:var(--tinta)}

@media (max-width:520px){
  .entrar-volver{font-size:.86rem}
  .entrar-main{place-items:start center}
}