/* ═══════════════════════════════════════════════════════════════════════════
   LA PANTALLA DE ENTRADA
   ═══════════════════════════════════════════════════════════════════════════
   Va encima de todo, tapando el programa entero. No es un cuadro flotante ni
   un cajón: es una puerta, y una puerta no deja ver lo que hay detrás.

   Usa los mismos colores, las mismas esquinas y el mismo compás de movimiento
   que el resto del programa. Lo único suyo es el tamaño: aquí solo hay una
   cosa que hacer, así que todo puede ser más grande y más tranquilo. */

.entrada {
  position: fixed;
  z-index: 200;                      /* por encima del cajón, que va en 100 */
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  background: var(--canvas);
  animation: entrada-aparece var(--dur-3) var(--ease-abrir) both;
}

@keyframes entrada-aparece { from { opacity: 0; } to { opacity: 1; } }

.entrada.cerrando { animation: entrada-aparece var(--dur-2) ease reverse both; }

/* Al arrancar entra de golpe: aparecer despacito dejaría ver la planilla por
   detrás durante la animación. Y mientras se decide si hay que ponerla, el
   programa no se enseña. */
.entrada.de-golpe { animation: none; }
html[data-puerta="pendiente"] #app { visibility: hidden; }

/* Un resplandor muy suave detrás de la tarjeta, del color de la casa. Es lo
   único decorativo de la pantalla, y sirve para que no se sienta un formulario
   colgado en el vacío. */
.entrada::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 45% at 50% 0%, color-mix(in srgb, var(--teal) 9%, transparent), transparent 70%);
  pointer-events: none;
}

.entrada-tarjeta {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 32px 30px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--e4);
}

.entrada-marca { display: flex; gap: 11px; align-items: center; margin-bottom: 22px; }
.entrada-marca .logo-vacio,
.entrada-marca img { width: 38px; height: 38px; border-radius: var(--r-sm); object-fit: cover; }
.entrada-marca .logo-vacio { aspect-ratio: auto; }
.entrada-marca .logo-vacio b { font-size: 13px; }
.entrada-marca .logo-vacio small { display: none; }
.entrada-marca > div b { font-size: 15px; font-weight: 650; }
.entrada-marca span { display: block; color: var(--muted); font-size: 11.5px; }

.entrada-tarjeta h1 { margin: 0 0 6px; font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.entrada-tarjeta > p { margin: 0 0 22px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

.entrada-campo { display: block; margin-bottom: 14px; }
.entrada-campo span { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.entrada-campo input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  /* 16 y no menos: por debajo, el iPhone acerca la pantalla de un tirón al
     tocar la casilla y ya no se vuelve a alejar solo. Estaba en 15 y lo cazó
     la medición antes de que Erick lo sufriera. */
  font-size: 16px;
}
.entrada-campo input:focus { border-color: var(--teal); outline: none; }

/* El ojito para ver lo que se escribe. Una contraseña larga escrita a ciegas
   en un teléfono se equivoca sola. */
.entrada-secreto { position: relative; }
.entrada-secreto input { padding-right: 46px; }
.entrada-secreto button {
  position: absolute;
  right: 4px;
  bottom: 3px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.entrada-secreto button svg { width: 18px; height: 18px; }

.entrada-tarjeta .button { width: 100%; justify-content: center; height: 46px; margin-top: 8px; font-size: 15px; }

.entrada-aviso {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--red) 9%, transparent);
  color: var(--red);
  font-size: 13px;
  line-height: 1.45;
}
.entrada-aviso svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }

/* "Esta es su planilla de verdad." No es un error —la pantalla está bien—,
   pero es lo más importante de la tarjeta, así que se separa del texto gris.
   Ámbar plano y no de vidrio: el vidrio estorba cuando adentro va texto. El
   tinte se toma de un ámbar que ya nace claro (#f9c157), porque el de la
   marca rebajado da mostaza; la letra va en --ink y el ícono en --orange,
   que son los que están hechos para eso y cambian solos con el tema. */
.entrada-tarjeta > .entrada-ojo {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 0 0 18px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, #f9c157 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #f9c157 42%, transparent);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}
.entrada-ojo svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--orange); }

.entrada-abajo { margin: 8px 0 -12px; text-align: center; }
/* Alto de dedo. Como enlace medía 22 px, y "Olvidé mi contraseña" es justo lo
   que se toca con prisa y nervios. El margen negativo de arriba devuelve el
   aire que agrega, para que la tarjeta no crezca. */
.entrada-abajo button {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.entrada-abajo button:hover { color: var(--teal); }

/* ── El código de rescate ────────────────────────────────────────────────
   Se enseña UNA vez. Tiene que verse como lo que es: un papel que hay que
   guardar, no un mensaje que se cierra sin leer. */
.entrada-tarjeta.ancha { max-width: 520px; }

.rescate-papel {
  margin: 0 0 18px;
  padding: 20px 18px;
  border: 2px dashed color-mix(in srgb, var(--teal) 42%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--teal) 5%, transparent);
  text-align: center;
}
.rescate-papel code {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: clamp(17px, 4.6vw, 22px);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.7;
  color: var(--ink);
  word-spacing: .2em;
  user-select: all;
}
.rescate-papel small { display: block; margin-top: 10px; color: var(--muted); font-size: 12px; text-wrap: balance; }

.rescate-lista { margin: 0 0 18px; padding-left: 20px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.rescate-lista li + li { margin-top: 5px; }
.rescate-lista b { color: var(--ink); font-weight: 600; }

.rescate-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rescate-botones .button { margin-top: 0; }

/* La casilla de "ya lo guardé": sin marcarla no se puede seguir. Es a
   propósito incómoda — es la única vez que ese código existe. */
.rescate-jura {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.45;
  cursor: pointer;
}
.rescate-jura input { flex: none; width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--teal); }

@media print {
  /* Solo cuando se imprime el código, y solo si lo pide la marca del <body>.
     La primera versión no pedía marca: al imprimir CUALQUIER cosa escondía
     todo lo que no fuera la puerta — el comprobante habría salido en blanco.
     Es la misma costumbre del resto de la casa. */
  body[data-imprimiendo="rescate"] > *:not(#raiz-de-la-entrada) { display: none !important; }
  body[data-imprimiendo="rescate"] .entrada { position: static; padding: 0; background: #fff; animation: none; }
  body[data-imprimiendo="rescate"] .entrada::before { display: none; }
  body[data-imprimiendo="rescate"] .entrada-tarjeta { max-width: none; border: 0; box-shadow: none; background: #fff; color: #101c42; }
  body[data-imprimiendo="rescate"] .rescate-papel code { color: #101c42; }
  body[data-imprimiendo="rescate"] :is(.entrada-marca, .rescate-botones, .rescate-jura, .entrada-abajo) { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .entrada, .entrada.cerrando { animation: none; }
}

html[data-movimiento="reducido"] .entrada,
html[data-movimiento="reducido"] .entrada.cerrando { animation: none; }