/* Pantalla de login de Mateo: diseño «Interfaz login Mateo AI.png» (Tomás, 2026-10-09, en docs/diseno/). Pensada
   primero para el celular (la maqueta es de 940x1672) y centrada en pantallas grandes.
   De atrás hacia adelante:
     1. el fondo negro verdoso con una luz suave en el centro
     2. las ondas verdes finas de las esquinas (SVG en el HTML)
     3. la "M" de red neuronal grande, los dos campos con ícono, el botón "Ingresar", "¿Olvidaste tu contraseña?"
     4. "By Al Toque Company" abajo. */
:root {
  --login-bg: var(--mateo-bg, #030807);
  --login-text: #eef6f1;
  --login-placeholder: #9aa9a4;
  --login-borde: rgba(150, 175, 168, .32);     /* campo en reposo: gris fino */
  --login-neon: #5cf2bd;                       /* campo activo y botón: verde agua neón de la maqueta */
  --login-neon-luz: rgba(92, 242, 189, .38);
  --login-boton: #6ef0c4;
  --login-boton-texto: #05140e;
  --login-error: #ff7b86;
}

* { box-sizing: border-box; }

html, body.login-body {
  margin: 0;
  min-height: 100%;
  background: var(--login-bg);
  color: var(--login-text);
  font-family: "Segoe UI Variable Text", "Segoe UI", "Roboto", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.login-body {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* 1. luz verde muy suave detrás del logo y de los campos, que se apaga hacia los bordes */
  background:
    radial-gradient(ellipse 70% 45% at 50% 30%, rgba(22, 70, 50, .45), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 70%, rgba(10, 40, 30, .35), transparent 75%),
    linear-gradient(180deg, #04100c 0%, #030807 55%, #020504 100%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- 2. ondas de las esquinas ---------- */
.ondas { position: fixed; pointer-events: none; z-index: 0; }
.ondas-arriba { top: 0; left: 0; width: min(46vw, 360px); height: min(46vw, 360px); opacity: .8; }
.ondas-abajo { right: 0; bottom: 0; width: min(62vw, 460px); height: min(80vw, 600px); opacity: .7; }

/* ---------- 3. el contenido ---------- */
.login-page {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 24px max(20px, 10.5vw) 8px;  /* en el celular los campos ocupan ~ el 79 % del ancho, como en la maqueta */
}

.login-card {
  width: min(100%, 380px);
  display: flex; flex-direction: column; align-items: stretch;
}

.login-logo {
  display: block;
  width: 100%; height: auto;
  margin: 0 auto 40px;
  filter: drop-shadow(0 0 18px rgba(34, 229, 138, .35));
}

.campo {
  position: relative;
  display: flex; align-items: center;
  height: 56px;
  margin-bottom: 18px;
  border: 1.5px solid var(--login-borde);
  border-radius: 12px;
  background: rgba(5, 14, 11, .72);
  transition: border-color .2s, box-shadow .2s;
}
/* El campo donde se está escribiendo se enciende en verde neón, como "Email" en la maqueta. */
.campo:focus-within {
  border-color: var(--login-neon);
  box-shadow: 0 0 0 1px rgba(92, 242, 189, .25), 0 0 18px var(--login-neon-luz), inset 0 0 12px rgba(92, 242, 189, .08);
}

.campo-icono {
  flex: none;
  width: 22px; height: 22px;
  margin: 0 14px 0 18px;
  fill: none; stroke: #c9d6d1; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

.login-input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: transparent;
  color: var(--login-text);
  font: inherit; font-size: 1.12rem;
  padding: 0 12px 0 0;
}
.login-input::placeholder { color: var(--login-placeholder); opacity: 1; }
/* El autocompletar del navegador no pinta el campo de amarillo. */
.login-input:-webkit-autofill {
  -webkit-text-fill-color: var(--login-text);
  -webkit-box-shadow: 0 0 0 40px #06110d inset;
  caret-color: var(--login-text);
}

.login-ojo {
  flex: none;
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-right: 6px;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
}
.login-ojo svg { width: 24px; height: 24px; fill: none; stroke: #c9d6d1; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.login-ojo:hover svg, .login-ojo:focus-visible svg { stroke: var(--login-neon); }
.login-ojo:focus-visible { outline: 2px solid var(--login-neon); outline-offset: -2px; }
.login-ojo .ojo-tachado { display: none; }
.login-ojo[aria-pressed="true"] .ojo-abierto { display: none; }
.login-ojo[aria-pressed="true"] .ojo-tachado { display: block; }

.login-error {
  min-height: 1.2em;
  margin: -8px 0 8px;
  color: var(--login-error);
  font-size: .95rem; text-align: center;
}

.login-boton {
  height: 56px;
  border: 0; border-radius: 12px;
  background: var(--login-boton);
  color: var(--login-boton-texto);
  font: inherit; font-size: 1.15rem; font-weight: 700; letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(92, 242, 189, .45), 0 0 2px rgba(150, 255, 215, .9);
  transition: transform .15s, box-shadow .2s, background .2s;
}
.login-boton:hover { background: #86f6d0; box-shadow: 0 0 30px rgba(92, 242, 189, .6), 0 0 2px rgba(150, 255, 215, .9); }
.login-boton:active { transform: translateY(1px); }
.login-boton:focus-visible { outline: 2px solid #eafff6; outline-offset: 3px; }

.login-olvido {
  align-self: center;
  margin-top: 26px; padding: 6px 8px;
  color: #a7b5b0; font-size: 1.02rem; text-decoration: none;
}
.login-olvido:hover, .login-olvido:focus-visible { color: var(--login-neon); text-decoration: underline; }

/* Mientras se valida la contraseña: el botón espera y los campos se atenúan. */
.login-card.is-busy .login-boton { cursor: progress; opacity: .75; }
.login-card.is-busy .login-input { opacity: .6; }

/* ---------- 4. pie ---------- */
.login-footer {
  position: relative; z-index: 1;
  margin: 0; padding: 28px 16px calc(28px + env(safe-area-inset-bottom));
  text-align: center;
  color: #e3ece8; font-size: 1rem; letter-spacing: .02em;
}

/* Solo para lectores de pantalla: los títulos y etiquetas que el diseño no muestra. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Pantallas bajitas (celular acostado, notebooks chicas): la "M" se achica para que todo entre sin desplazarse. */
@media (max-height: 700px) {
  .login-logo { width: min(60%, 260px); margin-bottom: 24px; }
  .campo { margin-bottom: 14px; }
  .login-olvido { margin-top: 14px; }
  .login-footer { padding-top: 12px; padding-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .campo, .login-boton { transition: none; }
}

/* PC y pantallas apaisadas grandes (Tomás, 2026-10-09: "en la pc también tiene que quedar bien dimensionado"): todo
   crece con la ALTURA de la pantalla, así en Full HD ocupa lo mismo a la vista que en una notebook de 768 px. En el
   celular no cambia nada (ahí manda el ancho, arriba). */
@media (min-width: 900px) and (min-height: 600px) {
  .login-card { width: clamp(380px, 46vh, 640px); }
  .login-logo { margin-bottom: clamp(32px, 4vh, 52px); }
  .campo { height: clamp(54px, 6vh, 76px); margin-bottom: clamp(16px, 1.9vh, 22px); border-radius: clamp(12px, 1.3vh, 16px); }
  .login-input { font-size: clamp(1.05rem, 1.75vh, 1.35rem); }
  .campo-icono { width: clamp(22px, 2.4vh, 28px); height: clamp(22px, 2.4vh, 28px); margin-left: clamp(18px, 2vh, 24px); }
  .login-ojo svg { width: clamp(24px, 2.6vh, 30px); height: clamp(24px, 2.6vh, 30px); }
  .login-boton { height: clamp(54px, 6vh, 76px); font-size: clamp(1.1rem, 1.85vh, 1.4rem); border-radius: clamp(12px, 1.3vh, 16px); }
  .login-olvido { font-size: clamp(1rem, 1.6vh, 1.25rem); margin-top: clamp(20px, 2.6vh, 32px); }
  .login-error { font-size: clamp(.95rem, 1.5vh, 1.15rem); }
  .login-footer { font-size: clamp(1rem, 1.6vh, 1.2rem); }
  .ondas-arriba { width: clamp(300px, 40vh, 520px); height: clamp(300px, 40vh, 520px); }
  .ondas-abajo { width: clamp(380px, 46vh, 620px); height: clamp(500px, 62vh, 820px); }
}