/* ═══════════════════════════════════════════════════════════
   Nimboo Cloud — La pantalla de acceso

   Diseño aprobado en Process/preview-todos-roles.html.

   Vive en su propia hoja y no dentro de login.html porque son
   DOS puertas con la misma cara: la de casa, con contraseña, y
   la del cliente, con enlace. La primera vez le hice al cliente
   una pantalla aparte y quedo otra cosa: llegaba de un correo de
   Nimboo a algo que no se parecia a Nimboo, con el logotipo de
   otro tamaño. Adriano lo dijo el 11 agosto 2026.

   Compartiendo la hoja no se pueden volver a separar.
   ═══════════════════════════════════════════════════════════ */

/* ─── Pantalla de acceso ───────────────────────────────
   Diseño aprobado en Process/preview-todos-roles.html */

body { background: var(--white); }

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
  position: relative;
  overflow-x: hidden;
  background: var(--fondo-puerta);
}

/* Todo lo que va sobre el cielo tiene que ir por encima. */
.login-wrap { position: relative; z-index: 1; }


/* 420, que es el de siempre.

   Lo baje a 360 el 11 agosto 2026 razonando que un correo son
   treinta caracteres y la raya sobraba. Adriano lo vio y dijo
   que asi se veia muy estrecho, y prefiere el de antes.

   Anotado para no repetirlo: la medida no la manda el largo del
   dato, la manda la composicion. A 420 la raya acompaña el ancho
   del titulo y del logotipo; a 360 se despega de los dos y la
   pantalla se ve angosta aunque cada campo, por separado, este
   mejor proporcionado. */
.login-wrap {
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 1;
  animation: fade-in-up var(--d-slower);
}

.login-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.login-hero {
  text-align: center;
  margin-bottom: 24px;
}

.login-hero-kicker {
  margin-bottom: 12px;
  justify-content: center;
}

.login-hero h1 {
  font-family: var(--display);
  font-weight: var(--w-bold);
  font-size: clamp(21px, 2.6vw, 25px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--black);
}

.login-hero h1 em {
  font-style: normal;
  font-weight: var(--w-bold);
  color: var(--cloud-deep);
}

/* ─── Sin tarjeta ─────────────────────────────────────────
   Era un recuadro blanco con un resplandor azul debajo, y el
   resplandor existia para despegarlo de las nubes. Adriano
   propuso el 11 agosto 2026 quitar los dos y dejar el contenido
   sobre el cielo, como quedo la pantalla de crear contraseña.

   Funciona porque el difuminado que hacia falta YA estaba: el
   cielo se lava por el centro (.cielo::after) justo para que las
   nubes no le pasen por detras al contenido. Esa mancha suave
   que se degrada hacia el fondo animado es exactamente lo que el
   pedia; solo estaba tapada por la tarjeta.

   Se queda el aire, que es lo unico que la tarjeta aportaba de
   verdad: sin el, los campos se pegan a los bordes de la
   pantalla en un telefono. */
.login-card {
  padding: 4px 8px;
}

.login-card-label {
  text-align: center;
  margin-bottom: 28px;
  font-size: 10px;
  font-weight: var(--w-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cloud-deep);
}

.login-form-group { margin-bottom: 16px; }

.input-row-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.input-row-label .input-label { margin-bottom: 0; }

.forgot-link {
  font-size: 11px;
  color: var(--ink-60);
  border-bottom: 1px solid transparent;
  transition: all var(--d-base);
  cursor: pointer;
  background: none;
  padding: 0;
}

.forgot-link:hover {
  color: var(--cloud-deep);
  border-bottom-color: var(--cloud);
}

.login-alert {
  margin-bottom: 20px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
  background: var(--red-pale);
  color: var(--red);
  animation: fade-in var(--d-fast);
}

.login-alert.is-info {
  background: var(--cloud-mist);
  color: var(--cloud-deeper);
}

.login-submit { margin-top: 24px; }

.login-foot {
  text-align: center;
  margin-top: 24px;
  font-size: 11px;
  color: var(--ink-40);
  letter-spacing: 0.06em;
}

.login-foot a { color: var(--cloud-deep); }

@media (max-width: 520px) {
  .login-brand { margin-bottom: 36px; }
  .login-hero { margin-bottom: 32px; }
  .login-card { padding: 28px 22px; }
}
  

/* ─── Lo que solo usa la puerta del cliente ──────────────── */

.login-titulo {
  font-family: var(--display);
  font-size: 19px;
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
  color: var(--black);
  text-align: center;
  margin-bottom: 8px;
}

.login-nota {
  margin-top: 14px;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--ink-60);
}

.login-nota.es-centrada { text-align: center; margin-bottom: 18px; }

.login-exito,
.login-cargando {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.login-exito svg {
  width: 46px;
  height: 46px;
  color: var(--cloud);
}

/* ═══════════════════════════════════════════════════════════
   El campo de linea

   Sin recuadro: un icono, el texto y una raya debajo. Adriano lo
   pidio el 11 agosto 2026 con una referencia, y la razon es
   buena: sobre un fondo vivo, un recuadro relleno vuelve a ser
   una caja opaca, o sea lo mismo que acabamos de quitar. La raya
   deja pasar el cielo.

   La raya no cambia de grosor al enfocar, se pinta encima otra
   del azul de la marca que crece de izquierda a derecha. Cambiar
   el grosor mueve el texto un pixel, y ese salto se nota mas de
   lo que parece cuando se esta escribiendo.
   ═══════════════════════════════════════════════════════════ */

.linea {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--ink-20);
  transition: border-color var(--d-base);
}

.linea::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--cloud);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base);
}

.linea:focus-within::after { transform: scaleX(1); }

.linea-icono {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--ink-40);
  transition: color var(--d-base);
}

.linea:focus-within .linea-icono { color: var(--cloud-deep); }

.linea input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--display);
  font-size: var(--t-base);
  color: var(--black);
}

.linea input:focus { outline: none; }
.linea input::placeholder { color: var(--ink-40); }

/* El autocompletado de Chrome pinta su fondo tambien aqui, y en
   un campo sin recuadro se ve peor todavia: un rectangulo azul
   flotando sobre el cielo. Se tapa con el color del fondo. */
.linea input:-webkit-autofill,
.linea input:-webkit-autofill:hover,
.linea input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--fondo-puerta) inset !important;
  box-shadow: 0 0 0 1000px var(--fondo-puerta) inset !important;
  -webkit-text-fill-color: var(--black) !important;
}


/* ═══════════════════════════════════════════════════════════
   El interruptor de las puertas

   Muy discreto a proposito: quien entra viene a entrar, no a
   configurar. Vive en una esquina, casi transparente, y solo se
   despierta al pasarle el mouse cerca.

   Cambia el sol por la luna segun lo que este puesto, porque
   aqui SI conviene: en el pie de la barra lateral el boton
   siempre hace lo mismo, pero este dice ademas si lo que ves lo
   decidio el reloj o lo decidiste tu.
   ═══════════════════════════════════════════════════════════ */

.tema-puerta {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-40);
  opacity: .35;
  cursor: pointer;
  transition: opacity var(--d-base), color var(--d-base), background var(--d-base);
}

.tema-puerta:hover,
.tema-puerta:focus-visible {
  opacity: 1;
  color: var(--cloud-deep);
  background: var(--cloud-mist);
  outline: none;
}

.tema-puerta svg { width: 16px; height: 16px; }