/* ═══════════════════════════════════════════════════════════════════════════
   SWEET LITTLE TRAUMA — ENTRAR
   ───────────────────────────────────────────────────────────────────────────
   Estilo de la puerta. Todo sale de los tokens de app.css: no hay un solo
   color escrito a mano acá, así que cambiar --acento cambia también esta
   pantalla.

   La pantalla es angosta a propósito. Un formulario de dos campos estirado a
   lo ancho de un monitor se lee como un trámite; contenido se lee como una
   puerta.
   ═══════════════════════════════════════════════════════════════════════════ */

.pantalla-entrar .cuerpo {
  display: grid;
  place-items: center;
  min-height: calc(100svh - var(--barra));
  padding: clamp(28px, 6vh, 72px) 20px;
}

.entrar-caja { width: 100%; max-width: 430px; }

.entrar-marco {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--g7);
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 40px);
  background: var(--g2);
  /* Una sombra ancha y baja despega el panel del fondo sin que se note. */
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.entrar-kicker {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--acento);
}

.entrar-titulo {
  margin: 0 0 10px;
  font-size: clamp(28px, 4.2vw, 38px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.04;
  color: var(--tinta);
  text-wrap: balance;
}

/* La última palabra del título, destacada con el color, en la misma letra. */
.entrar-titulo em {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--acento);
}

.entrar-bajada {
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--tinta-dim);
}

/* ── Campos ──────────────────────────────────────────────────────────────── */

.entrar-form { display: flex; flex-direction: column; gap: 18px; }

.entrar-campo { position: relative; display: flex; flex-direction: column; gap: 7px; }

.entrar-etiqueta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-dim);
}

.entrar-opcional {
  font-style: normal;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--g10);
}

.entrar-campo input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--g7);
  border-radius: var(--r-md);
  padding: 0 14px;
  background: var(--g0);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  transition: border-color .18s ease, background .18s ease;
}

.entrar-campo.con-ojo input { padding-right: 46px; }

.entrar-campo input::placeholder { color: var(--g10); }

.entrar-campo input:focus {
  outline: none;
  border-color: var(--tinta-dim);
  background: var(--g1);
}

/* El foco visible por teclado tiene que verse aunque el borde ya cambie. */
.entrar-campo input:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.entrar-campo.con-error input { border-color: var(--acento); }

/* Chrome pinta de azul los campos autocompletados y se come el fondo oscuro.
   La sombra interior es la única forma de ganarle sin !important. */
.entrar-campo input:-webkit-autofill,
.entrar-campo input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tinta);
  box-shadow: inset 0 0 0 100px var(--g0);
}

/* ── Ver la contraseña ───────────────────────────────────────────────────── */

.entrar-ojo {
  position: absolute;
  right: 6px;
  bottom: 5px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--g10);
  cursor: pointer;
  transition: color .18s ease;
}

.entrar-ojo:hover { color: var(--tinta-dim); }
.entrar-ojo.abierto { color: var(--acento); }
.entrar-ojo:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Cuando hay ayuda o error debajo, el ojo se apoya en la altura del input y no
   en la del bloque entero. */
.entrar-campo.con-ojo:has(.entrar-ayuda:not([hidden])) .entrar-ojo,
.entrar-campo.con-ojo:has(.entrar-error:not([hidden])) .entrar-ojo {
  bottom: auto;
  top: 27px;
}

/* ── Mensajes ────────────────────────────────────────────────────────────── */

.entrar-ayuda {
  font-size: 12px;
  line-height: 1.5;
  color: var(--tinta-faint);
}

.entrar-error {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--acento);
}

.entrar-aviso {
  margin: 0;
  border: 1px solid var(--acento);
  border-radius: var(--r-md);
  padding: 11px 13px;
  background: var(--acento-soft);
  color: var(--tinta);
  font-size: 13px;
  line-height: 1.5;
}

/* ── Botón ───────────────────────────────────────────────────────────────── */

.entrar-enviar {
  min-height: 46px;
  margin-top: 2px;
  border-radius: var(--r-md);
  font-size: 13px;
  letter-spacing: .06em;
}

.entrar-enviar:disabled { cursor: not-allowed; opacity: .55; }

/* ── Cambio de modo ──────────────────────────────────────────────────────── */

.entrar-cambio {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--g6);
  font-size: 13px;
  color: var(--tinta-dim);
}

.entrar-cambio-boton {
  border: 0;
  padding: 0;
  background: none;
  color: var(--tinta);
  font-family: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .18s ease;
}

.entrar-cambio-boton:hover { color: var(--acento); }
.entrar-cambio-boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* ── Sesión ya abierta ───────────────────────────────────────────────────── */

.entrar-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.entrar-acciones .boton-acento,
.entrar-acciones .boton-borde {
  min-height: 44px;
  border-radius: var(--r-md);
  padding-inline: 20px;
  display: inline-flex;
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  .entrar-campo input,
  .entrar-ojo,
  .entrar-cambio-boton { transition: none; }
}

/* ── Recuperar la contraseña ─────────────────────────────────────────────── */

/* «¿Olvidaste la contraseña?» va alineado a la derecha, debajo del campo, sin
   peso visual: es una salida de emergencia, no una acción que compita con
   entrar. Mismo subrayado que el pie para que se lea como enlace y no como
   otro botón más. */
/* Medido, no estimado. La primera versión era el texto MÁS CHICO de la
   pantalla —12,5 px contra los 13 y 14 de todo lo que la rodea— con un área
   táctil de 2.015 px², menos de la mitad del mínimo de 44×44 que necesita un
   dedo. El contraste estaba bien (12,34:1) y el problema no era ese: era que
   se leía como una nota al pie en la única pantalla donde alguien puede estar
   trabado afuera de su propia cuenta.

   Ahora mide lo mismo que sus vecinos y el área de toque llega a los 44 px de
   alto por el relleno vertical. El margen negativo se fue: apretaba el enlace
   contra el campo y lo hacía parecer parte del error. */
.entrar-olvide {
  align-self: flex-end;
  margin: -2px -10px 0 0;
  border: 0;
  padding: 13px 10px;
  background: none;
  color: var(--tinta-faint);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .18s ease;
}

.entrar-olvide:hover,
.entrar-olvide:focus-visible { color: var(--acento); }

/* ── Cuando alguien YA se trabó ──────────────────────────────────────────────
   El enlace de arriba está siempre. Este aparece solo cuando la contraseña
   falló, que es el momento exacto en que hace falta, pegado al aviso del error
   y con el tamaño de una acción y no de una aclaración.

   Es la diferencia entre tener la salida puesta y ponerla donde se la busca. */
.entrar-rescate {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -6px 0 0;
  flex-wrap: wrap;
}

.entrar-rescate span {
  color: var(--tinta-dim);
  font-size: 13px;
}

.entrar-rescate button {
  border: 1px solid var(--acento);
  border-radius: var(--r-pill);
  padding: 8px 15px;
  background: none;
  color: var(--acento);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.entrar-rescate button:hover { background: var(--acento); color: var(--g2); }

/* El acuse de que algo salió bien. Verde no hay en la paleta, así que se
   distingue del aviso de error por el borde tenue y el fondo apagado, no por
   el color: el aviso rojo sigue siendo el único que grita. */
.entrar-nota {
  margin: 0 0 18px;
  border: 1px solid var(--linea);
  border-left: 2px solid var(--tinta);
  border-radius: var(--r-md);
  padding: 10px 13px;
  background: var(--g2);
  color: var(--tinta);
  font-size: 13px;
  line-height: 1.5;
}

/* Código de confirmación: un único campo, compatible con autocompletado móvil. */
.entrar-codigo{font-size:1.5rem;letter-spacing:.35em;text-align:center;min-height:54px;width:100%;border:1px solid var(--linea,#6d8390);border-radius:10px;background:var(--g1,#203c48);color:var(--texto,#fff)}
.entrar-codigo:focus-visible{outline:2px solid var(--acento,var(--gr-rosa));outline-offset:3px}
.entrar-ayuda{font-size:.85rem;line-height:1.5;opacity:.8}