/* ============================================================
   Entrar — la única pantalla sin rail.
   Sin colores propios: todo sale de tokens.css, así que el tema
   oscuro funciona sin tocar nada aquí.
   ============================================================ */

/* El escritorio: crema con rombos, como el tapete de una agenda de papel.
   Los rombos son --cream-deep sobre --cream, así que cambian con el tema. */
/* El papel de la pantalla de entrar: un color liso, el mismo que el borde de
   la ilustración, para que ésta se funda sin que se note el recorte. Sale de
   tokens.css (--papel), así que el tema oscuro cambia solo. */
.sesion-body {
  min-height: 100dvh;
  background-color: var(--papel);
}

.sesion {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  /* El gutter de 16px es el mismo que el resto de la aplicación: en un
     teléfono de 375px la tarjeta no toca los bordes. */
  padding: 24px clamp(16px, 5.6vw, 86px);
}

.sesion-card {
  width: 100%;
  max-width: 380px;
  padding: 26px 24px 20px;
  border-radius: 14px;
  box-shadow: var(--sh-lg);
}

/* ============================================================
   Entrar: la agenda a la izquierda, el formulario a la derecha.
   Las medidas salen de la composición aprobada (1536 de ancho) y se
   escalan con la ventana: el aire entre las dos mitades es el mismo en una
   laptop que en un monitor grande.
   ============================================================ */
.entrar {
  width: 100%;
  max-width: 1480px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.entrar-lado { display: none; }

.entrar-card {
  max-width: 584px;
  padding: 44px clamp(24px, 4.4vw, 67px) 34px;
  background: var(--papel-hoja);
  border-radius: 16px;
}

.entrar-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 500;
  color: var(--green-ink);
}
.entrar-marca .entrar-logo { display: block; width: 156px; height: auto; }

/* El texto del logotipo es azul marino: sobre la tarjeta oscura no se leería. Hay
   una variante con el texto en crema y el CSS enseña una u otra según el tema. */
.entrar-marca .entrar-logo-oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .entrar-marca .entrar-logo-claro { display: none; }
  :root:not([data-theme="light"]) .entrar-marca .entrar-logo-oscuro { display: block; }
}
:root[data-theme="dark"] .entrar-marca .entrar-logo-claro { display: none; }
:root[data-theme="dark"] .entrar-marca .entrar-logo-oscuro { display: block; }

.entrar-filete {
  display: block;
  width: 72px;
  height: 2px;
  background: var(--mustard);
}
.entrar-filete-centro { margin: 16px auto 26px; }

.entrar-titulo {
  margin: 0;
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(36px, 3.3vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--green-ink);
}

.entrar-sub {
  margin: 12px 0 34px;
  text-align: center;
  font-size: 17px;
  color: var(--ink-soft);
}

.entrar-card .sesion-form { gap: 22px; }
.entrar-card .field label { font-size: 15px; font-weight: 400; color: var(--ink); text-transform: none; letter-spacing: 0; }

.input-icono { position: relative; }
.input-icono .input {
  width: 100%;
  min-height: 52px;
  padding: 12px 46px 12px 48px;
  font-size: 16px;
  background: var(--papel-campo);
  border-radius: 10px;
}
.input-icono .ii {
  position: absolute;
  left: 16px;
  top: 50%;
  translate: 0 -50%;
  color: var(--ink);
  pointer-events: none;
}

.ojo {
  position: absolute;
  right: 8px;
  top: 50%;
  translate: 0 -50%;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.ojo:hover { background: var(--cream-deep); }
.ojo[aria-pressed="true"] { color: var(--green-ink); }

.field:has(.olvido) { display: flex; flex-direction: column; }
.olvido {
  align-self: flex-end;

  /* El relleno llega hasta 24px de alto porque es un objetivo táctil
     (WCAG 2.5.8, ADR-020): con 2px medía 21 y en un teléfono se falla. El
     margen baja lo mismo que sube el relleno, así que **no se mueve de sitio**
     ni cambia de aspecto — lo que crece es la zona que acepta el dedo. */
  margin-top: 8px;
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--terracotta-ink);
  cursor: pointer;
}
.olvido:hover { text-decoration: underline; }
.olvido-ayuda {
  margin: 6px 0 0;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--mustard-soft);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
}

.recordarme {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
}
.recordarme input { width: 20px; height: 20px; accent-color: var(--green); }

.entrar-card .sesion-enviar {
  gap: 12px;
  min-height: 60px;
  font-size: 18px;
  font-weight: 500;
  border-radius: 10px;
}

.entrar-linea {
  margin: 34px 0 26px;
  border: 0;
  border-top: 1px solid var(--border);
}

.entrar-acceso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--ink-soft);
}
.entrar-acceso p { margin: 0; font-size: 13px; line-height: 1.45; }
.entrar-acceso strong { font-weight: 500; }
.entrar-card .sesion-pie { margin-top: 14px; font-size: 12.5px; }

@media (min-width: 960px) {
  .entrar {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
    justify-items: stretch;
  }
  .entrar-card { justify-self: end; width: 100%; }
  .entrar-lado { position: relative; display: block; padding-left: clamp(0px, 4vw, 60px); }

  /* La ilustración lleva los bordes difuminados: se funde con el papel. */
  .entrar-dibujo { display: block; width: 100%; max-width: 660px; height: auto; margin: 0 0 4px -6px; }
  .entrar-rama {
    position: fixed;
    top: 0;
    left: 0;
    width: clamp(110px, 11.4vw, 175px);
    height: auto;
    pointer-events: none;
  }
  .entrar-lema {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(44px, 4.3vw, 66px);
    font-weight: 500;
    line-height: 1.05;
    color: var(--green-ink);
  }
  .entrar-lema-sub { margin: 14px 0 28px; font-size: clamp(17px, 1.6vw, 24px); color: var(--ink-soft); }
  .entrar-lado .entrar-filete { width: 96px; }
}

@media (min-width: 960px) and (max-height: 760px) {
  .entrar-dibujo { max-width: 500px; }
}

/* Con el tema oscuro la ilustración (pintada sobre papel claro) no se funde
   con el fondo: se queda como una lámina con las esquinas redondeadas. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .entrar-dibujo,
  :root:not([data-theme="light"]) .entrar-rama { border-radius: 22px; -webkit-mask: none; mask: none; opacity: .92; }
}
:root[data-theme="dark"] .entrar-dibujo,
:root[data-theme="dark"] .entrar-rama { border-radius: 22px; opacity: .92; }

@media (prefers-reduced-motion: no-preference) {
  .entrar-card { animation: entrar-sube .5s ease-out both; }
}
@keyframes entrar-sube {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}

.sesion-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.sesion-logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--green);
  color: var(--on-green);
  flex-shrink: 0;
}

.sesion-hand {
  font-family: "Caveat", cursive;
  font-size: 19px;
  line-height: 1;
  color: var(--ink-muted);
  margin: 0 0 2px;
}

.sesion-titulo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.sesion-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* El aviso va arriba del formulario y no al lado del campo: el mensaje es el
   mismo para correo que no existe y para contraseña equivocada, así que
   colgarlo de uno de los dos sería mentir sobre cuál falló. */
.sesion-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--terracotta-soft);
  border: 1px solid var(--terracotta);
  /* -ink es el par legible de -soft, igual que green-ink y mustard-ink: en
     tema oscuro los dos se invierten juntos y el contraste se mantiene. */
  color: var(--terracotta-ink);
  font-size: 13px;
  line-height: 1.4;
}

/* Lo contrario del error: algo salió bien y hay que decirlo («cambiaste tu
   contraseña», «te hemos escrito»). Mismos pares -soft/-ink que el error. */
.sesion-aviso {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--green-soft);
  border: 1px solid var(--green);
  color: var(--green-ink);
  font-size: 13px;
  line-height: 1.4;
}

.sesion-enviar {
  margin-top: 4px;
  justify-content: center;
  padding: 11px 14px;
}

.sesion-pie {
  margin: 18px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.sesion-nota {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ============================================================
   Soporte: el panel, y el aviso de estar dentro de un centro.
   ============================================================ */

.panel-body { min-height: 100dvh; background: var(--cream); }

.panel { max-width: 1100px; margin: 0 auto; padding: 20px 16px 40px; }

.panel-cinta {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; font-size: 12px; font-weight: 700;
  background: var(--slate-soft, var(--surface-sunk)); color: var(--ink-soft);
  border-bottom: 1px solid var(--border);
}

/* El aviso de suplantacion. Terracota y arriba del todo: tiene que costar
   ignorarlo, porque el peor fallo posible es olvidarse de que se esta dentro
   de datos ajenos (ADR-017 §7). */
.suplantando {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 14px;
  background: var(--terracotta); color: var(--on-terracotta);
  font-size: 12.5px; line-height: 1.35;
}
.suplantando strong { font-weight: 800; }
.suplantando-texto { flex: 1; min-width: 220px; }
.suplantando-reloj {
  font-weight: 800; white-space: nowrap;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--scrim-soft);
}
.suplantando-salir { display: contents; }
.suplantando-salir .btn {
  background: var(--on-terracotta); color: var(--terracotta-deep);
  border-color: transparent; white-space: nowrap;
}

/* El armazon empieza debajo del aviso, no detras. */
.shell-con-aviso { min-height: calc(100dvh - 40px); }

/* «Instalar la app» en la pantalla de entrar: un enlace que es un botón. */
.sesion-instalar {
  appearance: none; background: none; border: 0; padding: 4px 2px; cursor: pointer;
  font: inherit; color: var(--green-ink); text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; gap: 6px;
}
.sesion-instalar[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  /* La flecha de descarga baja y vuelve, al pasar y dos veces al aparecer. */
  .sesion-instalar:is(:hover, :focus-visible) svg { animation: flecha-baja .7s ease-in-out; }
  .sesion-instalar.pwa-llama svg { animation: flecha-baja .9s 1.2s ease-in-out 2; }

  /* «Ingresar»: la flecha se adelanta al apuntar. Es lo que invita a pulsar. */
  .entrar-card .sesion-enviar svg { transition: translate .18s ease; }
  .entrar-card .sesion-enviar:is(:hover, :focus-visible) svg { translate: 4px 0; }

  /* La palabra del logotipo sube un poco después de la tarjeta, y la sonrisa lo
     hace al final: la primera cosa que se ve tiene que ser quien eres. */
  .entrar-marca img.entrar-logo { animation: entrar-sube .6s .15s ease-out both; }
}

/* Con el logotipo animado (logo-animado.js) el vídeo ocupa el sitio de la imagen,
   que sigue en el HTML por si el vídeo falla. Hereda el cambio de tema: el vídeo
   lleva las mismas clases claro/oscuro. */
.entrar-marca.con-video img.entrar-logo { display: none !important; }
.sesion-instalar:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }