@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700&display=swap');

/* Reseteo base idéntico al de la app (styles/index.css, capa `reset`): la pantalla real depende de él. */
@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}
/**
 * SINTAX — namespace de tokens visuales, neutral y pequeño.
 *
 * @remarks
 * Deliberadamente sin fallback a tokens heredados (--westeer-*,
 * --text-primary de variables.css, etc.) — identidad mínima y aislada,
 * no un design system completo. Compartido entre el login SINTAX
 * (SintaxLoginPage) y el workspace SINTAX (Urban Network Workspace) —
 * único punto de verdad para ambos, no se duplica.
 *
 * Identidad: instrumento cartográfico de precisión, no dashboard SaaS
 * genérico. El acento es un teal/petróleo — vocabulario de planos técnicos
 * y relevamiento, no el azul de producto genérico. La red estructural en
 * el mapa es gris frío neutro; el color queda reservado casi enteramente
 * para estado de interacción (selección, hover, edición, alerta).
 */
:root {
  --sintax-surface: #ffffff;
  --sintax-surface-muted: #f4f5f7;
  --sintax-border: #e2e5ea;
  --sintax-text-primary: #14181d;
  --sintax-text-secondary: #656d78;

  --sintax-rail-bg: #14181d;
  --sintax-rail-text: #7d8794;
  --sintax-rail-active-bg: #232a33;
  --sintax-rail-active-text: #ffffff;

  --sintax-accent: #0b7285;
  --sintax-accent-soft: #e1f0f2;
  --sintax-accent-strong: #085e6d;
  --sintax-selected: #e1f0f2;
  --sintax-warning: #b45309;
  --sintax-warning-soft: #fdf2e3;
  --sintax-danger: #b42318;
  --sintax-danger-soft: #fdecea;

  /* Red estructural sobre basemap claro — gris frío, no compite con el acento */
  --sintax-network-base: #5b6b7a;

  --sintax-radius-sm: 4px;
  --sintax-radius-md: 8px;
  --sintax-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --sintax-font: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --sintax-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Pedido en vivo 2026-09-05 — tipografía del login, no del resto del
   shell (no se toca --sintax-font global). */

.sintax-login {
  --sintax-login-font: 'Fira Sans', var(--sintax-font);
  /* Mismo azul navy del isotipo (sintax-logo.svg) — pedido en vivo
     2026-09-05: "letras azules, más legibles" sobre la zona más clara
     del fondo (ver .sintax-login__content, corrido a la izquierda). */
  --sintax-login-blue: #1c3260;
  --sintax-login-blue-soft: rgba(28, 50, 96, 0.82);
}

/*
 * Fondo: foto aérea real (Bahía Blanca-style — territorio, río, ciudad)
 * pedida en vivo 2026-09-05, con un degradé de opacidad encima (oscurece
 * hacia abajo, para que el panel y el texto mantengan contraste sin
 * importar qué parte de la foto quede detrás). El panel de login flota
 * sobre ambos con efecto glassmorphism (blur + fondo translúcido) — mismo
 * pedido.
 */
.sintax-login {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--sintax-text-primary);
  /* ?v=2 — cache-busting: el archivo se reemplazó en el mismo path
     (2026-09-05) y el navegador seguía sirviendo la versión vieja
     cacheada pese a que el server ya tenía la nueva (verificado con
     curl+md5 — no era un problema de código). Subir este número en
     cualquier próximo reemplazo de la imagen en esta misma ruta. */
  background-image: url('/images/sintax-login-bg.jpg?v=2');
  background-size: cover;
  background-position: center;
  font-family: var(--sintax-login-font);
}

.sintax-login::before {
  content: '';
  position: absolute;
  inset: 0;
  /*
   * Pedido en vivo 2026-09-05 (v2 — "las letras se siguen perdiendo en el
   * fondo, expande el screen blanco hacia la derecha"): la franja clara
   * era angosta y de opacidad baja (0.15 máx) — el texto (que llega hasta
   * ~46% del ancho con las descripciones de los 3 bloques) se metía en
   * zona con detalle real de la foto (líneas de red, edificios) antes de
   * que el overlay blanco alcanzara a taparlo. Blanco más opaco (0.6) y
   * el punto donde empieza a apagarse corrido de 30%→50% — cubre todo el
   * ancho real del bloque de texto, no sólo su borde izquierdo.
   */
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.4) 32%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(20, 24, 29, 0.35) 68%,
    rgba(20, 24, 29, 0.55) 100%
  );
}

/*
 * Columna izquierda (texto de presentación) + panel de login — pedido en
 * vivo 2026-09-05 (v2, "se pierden en la imagen de fondo"): en vez de
 * repartir el espacio entre dos elementos flex (que atava la posición del
 * texto al ancho del panel y a la mitad del viewport), cada uno se
 * posiciona absoluto e independiente dentro de `.sintax-login__content`
 * (full-bleed sobre el fondo). El texto va anclado bien a la izquierda,
 * en la franja neblinosa/clara de la foto (ver el degradé de arriba) y
 * SIN entrar en la zona de la ciudad con las líneas de red superpuestas —
 * por eso el ancho máximo bajó (480px → 400px) y el offset es chico (6%),
 * no proporcional al panel.
 */
.sintax-login__content {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.sintax-login__intro {
  position: absolute;
  top: 50%;
  left: 6%;
  transform: translateY(-50%);
  max-width: 400px;
  color: var(--sintax-login-blue);
  /* Halo claro sutil — mantiene el texto legible incluso si una ventana
     angosta empuja el bloque hacia una zona de la foto con más detalle
     (líneas de red, edificios), sin necesitar un panel/fondo propio. */
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.7),
    0 0 20px rgba(255, 255, 255, 0.45);
}

.sintax-login__headline {
  margin: 0 0 16px;
  font-size: 38px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sintax-login-blue);
}

.sintax-login__intro-copy {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sintax-login-blue-soft);
  max-width: 440px;
}

.sintax-login__features {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sintax-login__feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sintax-login__feature-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(28, 50, 96, 0.35);
  background: rgba(255, 255, 255, 0.4);
  color: var(--sintax-login-blue);
}

.sintax-login__feature-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--sintax-login-blue);
}

.sintax-login__feature-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--sintax-login-blue-soft);
}

.sintax-login__footer-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(28, 50, 96, 0.55);
}

@media (max-width: 860px) {
  .sintax-login__intro {
    display: none;
  }

  .sintax-login__panel {
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/*
 * Pedido en vivo 2026-09-05: "más efecto glassmorphism" — blur más fuerte
 * (20px → 36px), fondo más translúcido (0.6 → 0.32 de opacidad) y un
 * highlight interno sutil (inset) que simula el borde de vidrio esmerilado
 * real, además del borde exterior ya existente.
 */
.sintax-login__panel {
  position: absolute;
  top: 50%;
  left: 62%;
  transform: translateY(-50%);
  z-index: 1;
  width: 100%;
  max-width: 360px;
  padding: 40px 32px;
  background: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(36px) saturate(160%);
  -webkit-backdrop-filter: blur(36px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-top: 3px solid var(--sintax-accent);
  border-radius: var(--sintax-radius-md);
  box-shadow:
    0 8px 32px rgba(20, 24, 29, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  text-align: center;
}

.sintax-login__logo {
  height: 44px;
  width: auto;
  display: block;
  margin: 0 auto 28px;
}

.sintax-login__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sintax-login__input-wrapper {
  position: relative;
}

.sintax-login__input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sintax-text-secondary);
  pointer-events: none;
}

.sintax-login__input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  font-size: 14px;
  font-family: var(--sintax-login-font);
  color: var(--sintax-text-primary);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--sintax-border);
  border-radius: var(--sintax-radius-sm);
  box-sizing: border-box;
}

.sintax-login__input:focus {
  outline: none;
  border-color: var(--sintax-accent);
}

.sintax-login__toggle-password {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  padding: 4px;
  background: none;
  border: none;
  color: var(--sintax-text-secondary);
  cursor: pointer;
}

.sintax-login__toggle-password:hover:not(:disabled) {
  color: var(--sintax-login-blue);
}

.sintax-login__submit {
  margin-top: 6px;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: var(--sintax-accent);
  border: none;
  border-radius: var(--sintax-radius-sm);
  cursor: pointer;
  transition: background 0.12s ease;
}

.sintax-login__submit:not(:disabled):hover {
  background: var(--sintax-accent-strong);
}

.sintax-login__submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.sintax-login__error {
  font-size: 12px;
  color: var(--sintax-danger);
  text-align: left;
}

/* --- Solo de esta entrada pública (no existe en la versión canónica): estado «acceso aún no habilitado» --- */
.sintax-login__input:disabled,
.sintax-login__toggle-password:disabled { cursor: not-allowed; }
.sintax-login__notice {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: var(--sintax-radius-sm);
  border: 1px solid var(--sintax-border);
  background: var(--sintax-accent-soft);
  color: var(--sintax-login-blue);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

/*
 * Corrección propia de esta entrada: en la versión canónica la regla `@media (max-width: 860px)` está declarada ANTES
 * que `.sintax-login__panel` y queda pisada por ella (mismo peso, gana la última), por lo que en pantallas angostas el
 * panel se desborda a la derecha. Se vuelve a declarar al final para que el panel quede centrado.
 */
@media (max-width: 860px) {
  .sintax-login__panel {
    left: 50%;
    transform: translate(-50%, -50%);
  }
}