/*
 * La pantalla de acceso. Es la misma que se diseñó y validó en
 * preview/login.html, con un solo cambio: donde iba el correo ahora va la
 * contraseña del equipo, que es la que ya usáis. El correo se pide dentro
 * del formulario, en el paso 1.
 *
 * Quien comprueba la contraseña sigue siendo WordPress: esto solo cambia el
 * aspecto de la puerta, no la cerradura.
 */

:root {
  --azul:       #2d7ce5;
  --azul-hondo: #1657b0;
  --marino:     #0e2a54;
  --tinta:      #16243a;
  --gris:       #33424f;   /* medido: 5,00:1 sobre el azul del degradado */
  --linea:      #d7e1ee;
  --alarma:     #9c0006;
  --verde:      #006100;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  color: var(--tinta);
  background: #fff;
  font-family: Figtree, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* El azul se apaga hacia la derecha y entra bastante en la zona de
   trabajo, en lugar de cortar con un canto duro. El degradado vive en
   la rejilla entera para poder pasar del ancho del panel. */
.puerta {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 100%;
  background-color: #fff;
  background-image: linear-gradient(
    to right,
    var(--azul) 0%,
    var(--azul) 34%,
    rgba(45,124,229,.42) 63%,
    rgba(45,124,229,0) 80%
  );
}

/* ---------- Panel de marca ---------- */

.panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vh, 46px);
  padding: 40px 36px 0;
}

/* El rótulo comparte eje con Lupita. */
.panel .rotulo { width: min(86%, 360px); flex-shrink: 0; }
.panel .rotulo img { display: block; width: 100%; }

/* Lupita apoya en el borde inferior del panel, sin aire debajo: una
   figura flotando con aire alrededor es lo que hace que una pantalla
   parezca de plantilla. */
/* El tope en vh evita que en pantallas bajas el conjunto se salga y
   aparezca barra de desplazamiento en una pantalla de dos campos. */
.pedestal {
  position: relative;
  width: min(94%, 460px, 55vh);
  margin-top: 0;
}

/* Sombra de contacto en azul, no en gris: la posa sobre el panel en
   vez de dejarla pegada como una calcomanía. */
.pedestal::before {
  content: "";
  position: absolute;
  left: 16%; right: 16%;
  bottom: 4px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(7,32,72,.34), rgba(7,32,72,0) 72%);
}

.lupita { position: relative; display: block; width: 100%; }

/* ---------- Lado de trabajo ---------- */

.trabajo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px clamp(28px, 6vw, 76px);
}

.dentro { width: 100%; max-width: 410px; }

h1 {
  margin: 0 0 8px;
  font-size: 1.95rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--marino);
}

.proposito {
  margin: 0 0 38px;
  color: var(--gris);
  font-size: 1rem;
}

label {
  display: block;
  margin-bottom: 9px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--marino);
}

.envoltura { position: relative; }

#acceso-pass {
  width: 100%;
  padding: 13px 44px 13px 14px;
  font: inherit;
  color: var(--tinta);
  background: #fff;
  border: 1.5px solid var(--linea);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
#acceso-pass::placeholder { color: #a3b2c4; }
#acceso-pass:focus-visible {
  outline: none;
  border-color: var(--azul-hondo);
  box-shadow: 0 0 0 3.5px rgba(45,124,229,.2);
}
#acceso-pass.falla { border-color: var(--alarma); }

/* El tick se dibuja dentro del campo que verifica. */
.tick {
  position: absolute;
  top: 50%; right: 15px;
  transform: translateY(-50%);
  width: 19px; height: 19px;
  fill: none;
  stroke: var(--verde);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset .4s cubic-bezier(.65,0,.35,1);
}
#acceso-pass:not(:placeholder-shown) ~ .tick { stroke-dashoffset: 0; }

.fallo {
  margin: 10px 0 0;
  font-size: .89rem;
  line-height: 1.45;
  color: var(--alarma);
}

.entrar {
  width: 100%;
  margin-top: 26px;
  padding: 14px;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  color: #fff;
  background: var(--azul-hondo);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
}
.entrar:hover { background: var(--marino); }
.entrar:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }

.nota {
  margin: 34px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--linea);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--gris);
}

/* ---------- Pantallas estrechas ---------- */

@media (max-width: 880px) {
  /* En vertical el azul se apaga hacia abajo, que es por donde ahora
     se encuentra con el blanco. */
  .puerta {
    grid-template-columns: 1fr;
    background-image: linear-gradient(
      to bottom,
      var(--azul) 0%,
      var(--azul) 17%,
      rgba(45,124,229,.42) 27%,
      rgba(45,124,229,0) 34%
    );
  }

  .panel {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 28px 0;
    min-height: 228px;
  }
  .panel .rotulo { width: 160px; margin-bottom: 34px; }

  .pedestal { width: 176px; margin-top: 0; align-self: flex-end; }
  .panel .rotulo { width: 190px; }
  .pedestal::before { height: 16px; bottom: 2px; }

  .trabajo { padding: 34px 28px 56px; }
  .dentro { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tick { transition: none; }
}