/* =====================================================================
   login.css — Pantalla de acceso de TEO-CALLY.

   Mobile-first: las reglas base son las de móvil (una columna) y al
   final, en un solo media query, se reacomoda a dos columnas para
   escritorio. Es el mismo HTML en ambos casos.

   Índice:
     1. Paleta propia del login y base de la página
     2. Rejilla: 1 columna (móvil) por defecto
     3. Columna de marca (solo el logo, sin imagen de fondo)
     4. Columna del formulario
     5. Campos de entrada
     6. Botón "Entrar" (dorado metálico)
    6b. Celulares bajos (<640px de alto): aprieta espacios para que
        todo quepa sin scroll
    6c. Celular acostado: dos columnas, como en escritorio
     7. Escritorio (>=768px): dos columnas
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. PALETA PROPIA
   El login usa un negro más profundo y contrastado que el panel
   interno, así que declara sus propios tonos en vez de reusar los de
   tema.css (que comparte con el panel y no conviene mover).
   --------------------------------------------------------------------- */
/* ALTURA EN EL CELULAR: 100vh miente en los navegadores móviles --
   mide la pantalla COMO SI la barra de direcciones estuviera oculta,
   así que la página siempre queda unos 60-100px más alta que lo que
   de verdad se ve, y aparece scroll aunque el diseño quepa. 100dvh
   ("dynamic viewport height") sí mide el área visible de verdad y se
   reajusta cuando la barra aparece o desaparece. Se declara después
   de 100vh a propósito: los navegadores que no conozcan dvh se quedan
   con la primera y todo sigue funcionando. */
.login{
  --negro-puro: #000000;
  --texto-claro: #ffffff;
  --texto-gris: #808080;       /* etiquetas y placeholders: bajo contraste a propósito */
  --borde-campo: #2a2a2a;      /* borde fino, casi invisible sobre el negro */
  --fondo-campo: #0a0a0a;      /* apenas por encima del negro puro */
  /* Dorados tomados del PNG del logo (los tres tonos más presentes en
     la imagen), para que el botón no desentone con la marca: son un
     dorado champagne, más apagado que un dorado genérico. */
  --oro-sombra: #a08040;       /* sombra: los trazos más oscuros del emblema */
  --oro-base: #e0c080;         /* el tono dominante del logo */
  --oro-brillo: #f0d8a0;       /* el reflejo más claro */
  --oro-texto: #3a2a00;        /* texto DENTRO del botón dorado: oscuro, para que se lea */

  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--negro-puro);
  color: var(--texto-claro);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------
   2. REJILLA
   Móvil: una columna, la marca arriba y el formulario abajo.
   (En escritorio se convierte en dos columnas, sección 7.)
   El fondo es el negro sólido que ya pone .login (sección 1): no hay
   capa de imagen ni degradado detrás.
   --------------------------------------------------------------------- */
.login-grid{
  min-height: 100vh;
  min-height: 100dvh; /* ver la nota de altura en la sección 1 */
  display: grid;
  grid-template-rows: auto 1fr;
}

/* ---------------------------------------------------------------------
   3. COLUMNA DE MARCA
   Solo el logo sobre el negro de la página: sin imagen de fondo ni
   degradados, para que toda la pantalla sea un negro uniforme.
   --------------------------------------------------------------------- */
.login-marca{
  display: flex;
  align-items: center;
  justify-content: center;
  /* El padding superior baja el logo desde el borde de la pantalla;
     como la rejilla es de dos filas, todo lo de abajo (título, campos
     y botón) se recorre con él. El inferior es el aire que separa el
     logo del "¡Bienvenido!". En escritorio ambos se reemplazan por uno
     parejo (sección 7).

     Van en clamp() y no fijos porque estaban medidos para un celular
     alto (812px): en uno de 667 sumaban 146px de puro aire y la
     pantalla terminaba con scroll. Con clamp el valor se calcula sobre
     el alto DISPONIBLE -- en un celular alto se mantienen casi iguales
     a los 90/56 originales, y en uno bajo se encogen solos hasta el
     mínimo, que es lo que hace que todo quepa de una sola vista. */
  padding: clamp(26px, 11vh, 90px) 24px clamp(16px, 6.8vh, 56px);
}

.marca-logo{
  width: 200px;
  max-width: 66%;
  height: auto;
  /* Tope por altura para pantallas bajas: el logo es lo más alto de
     esta mitad, así que también tiene que ceder cuando hay poco. */
  max-height: 20vh;
  object-fit: contain;
}

/* ---------------------------------------------------------------------
   4. COLUMNA DEL FORMULARIO
   --------------------------------------------------------------------- */
.login-panel{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Mismo criterio que .login-marca: el respiro de abajo se encoge en
     pantallas bajas en vez de empujar el botón fuera de la vista. */
  padding: 8px 24px clamp(18px, 5.5vh, 48px);
}

/* max-width para que los campos no se estiren de borde a borde en
   pantallas anchas: se ve más cuidado y se lee mejor. */
.login-caja{
  width: 100%;
  max-width: 380px;
}

.login-titulo{
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 2.5px; /* espaciado generoso, como pide el diseño */
  color: var(--texto-claro);
}
.login-subtitulo{
  /* Se encoge igual que los demás espaciados en pantallas bajas. */
  margin: 0 0 clamp(14px, 3.6vh, 30px);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--texto-gris);
}

/* ---------------------------------------------------------------------
   5. CAMPOS
   Rectangulares, esquinas apenas redondeadas, fondo casi negro y borde
   fino gris. El ícono va dentro de la misma caja, a la izquierda.
   --------------------------------------------------------------------- */
.campo-etiqueta{
  display: block;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--texto-gris);
}

.campo{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 13px 15px;
  background: var(--fondo-campo);
  border: 1px solid var(--borde-campo);
  border-radius: 6px;
  transition: border-color .2s ease;
}
/* Enfoque: el borde se aclara. Se aplica al contenedor (:focus-within)
   y no al <input>, porque el borde visible lo dibuja la caja. */
.campo:focus-within{ border-color: rgba(255,255,255,0.55); }

.campo-icono{
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--texto-gris);
}

.campo input{
  flex: 1;
  min-width: 0; /* sin esto el input desborda la caja en pantallas angostas */
  background: none;
  border: none;
  outline: none;
  color: var(--texto-claro);
  font-family: inherit;
  font-size: 14.5px;
}
.campo input::placeholder{ color: var(--texto-gris); }

/* Chrome pinta de azul claro el fondo de los campos que autocompleta
   (usuario/contraseña guardados), lo que rompe el look oscuro. No se
   puede cambiar con "background": hay que taparlo con una sombra
   interior y forzar el color del texto. */
.campo input:-webkit-autofill,
.campo input:-webkit-autofill:hover,
.campo input:-webkit-autofill:focus{
  -webkit-box-shadow: 0 0 0 1000px var(--fondo-campo) inset;
  -webkit-text-fill-color: var(--texto-claro);
  caret-color: var(--oro-brillo);
}

/* Mensaje de error. Reserva su altura siempre (aunque esté vacío) para
   que el botón de abajo no brinque cuando aparece el texto. */
.login-alerta{
  min-height: 18px;
  margin: -4px 0 14px;
  font-size: 12.5px;
  color: #ff8a80;
}

/* ---------------------------------------------------------------------
   6. BOTÓN "ENTRAR"
   Degradado dorado metálico con texto oscuro encima: así el contraste
   alcanza para leerse bien (texto claro sobre dorado no lo lograría).
   --------------------------------------------------------------------- */
.btn-entrar{
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 6px;
  /* Barrido metálico: sombra -> base -> reflejo angosto -> base ->
     sombra. La franja de brillo es estrecha a propósito; un degradado
     ancho y parejo se ve plano, como pintura, no como metal. */
  background: linear-gradient(135deg,
    var(--oro-sombra) 0%,
    var(--oro-base) 30%,
    var(--oro-brillo) 47%,
    var(--oro-base) 64%,
    var(--oro-sombra) 100%);
  background-size: 200% 100%;
  background-position: 0% 0%;
  color: var(--oro-texto);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: background-position .45s ease, box-shadow .25s ease;
}
/* Hover: el degradado se recorre, simulando un reflejo que barre el
   metal, más un halo dorado tenue. */
.btn-entrar:hover{
  background-position: 100% 0%;
  box-shadow: 0 4px 18px rgba(224,192,128,0.28); /* halo del mismo dorado base del logo */
}
.btn-entrar:active{ box-shadow: none; }
/* Foco por teclado: anillo dorado visible (importante para poder
   navegar el formulario sin ratón). */
.btn-entrar:focus-visible{
  outline: 2px solid var(--oro-brillo);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------
   6b. CELULARES BAJOS (menos de 640px de alto útil)
   Es el caso real de un teléfono chico, o de uno normal con la barra
   de direcciones a la vista: ahí el clamp de arriba todavía deja
   demasiado aire y el botón "Entrar" se salía de la pantalla.

   Este bloque aprieta lo que puede ceder sin estorbar el uso: el aire
   alrededor del logo, el tamaño del logo y los espacios entre textos.
   Lo que NO se toca es la altura de los campos ni la del botón --
   son las zonas que se tocan con el dedo y encogerlas los volvería
   incómodos.

   Va acotado también por ancho (max-width: 767px) para que no se
   active en una computadora con la ventana baja, donde manda la
   sección 7.
   --------------------------------------------------------------------- */
@media (max-width: 767px) and (max-height: 640px){
  .login-marca{ padding: clamp(18px, 6vh, 40px) 24px clamp(12px, 3.5vh, 24px); }
  .marca-logo{ max-height: 16vh; }
  .login-titulo{ font-size: 24px; margin-bottom: 6px; }
  .login-subtitulo{ margin-bottom: clamp(10px, 2.5vh, 18px); }
  .campo-etiqueta{ margin-bottom: 6px; }
  .login-panel{ padding-bottom: clamp(10px, 3vh, 24px); }
  .login-alerta{ margin-bottom: 8px; }
}

/* ---------------------------------------------------------------------
   6c. CELULAR ACOSTADO (horizontal)
   Aquí no alcanza con apretar espacios: apilar el logo ARRIBA del
   formulario es lo que no cabe, porque en horizontal sobra ancho y
   falta alto. Se usa el mismo acomodo de dos columnas de escritorio
   -- logo a la izquierda, formulario a la derecha -- pero con
   medidas chicas. Así deja de haber scroll sin tener que esconder
   nada.
   --------------------------------------------------------------------- */
@media (max-width: 767px) and (orientation: landscape) and (max-height: 520px){
  .login-grid{
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
  }
  .login-marca{ padding: 14px 16px; }
  .marca-logo{ width: 190px; max-width: 82%; max-height: 62vh; }
  .login-panel{ align-items: center; padding: 14px 16px; }
  .login-titulo{ font-size: 22px; margin-bottom: 4px; }
  .login-subtitulo{ margin-bottom: 12px; }
}

/* ---------------------------------------------------------------------
   7. ESCRITORIO (>=768px): dos columnas
   La rejilla pasa de dos filas a dos columnas: marca a la izquierda
   (inmersión) y formulario a la derecha, centrado verticalmente.
   --------------------------------------------------------------------- */
@media (min-width: 768px){
  .login-grid{
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
  }

  .login-marca{
    height: 100%;
    padding: 40px;
  }
  /* En computadora el logo es lo único que ocupa la mitad izquierda de
     la pantalla, así que puede ser bastante más grande que en celular
     sin sentirse apretado. El max-width es lo que manda en las
     pantallas más angostas de este rango (a 768px la columna deja
     ~304px útiles, así que el ancho fijo ni alcanza a aplicarse). */
  .marca-logo{
    width: 380px;
    max-width: 82%;
    /* Se anula el tope por altura que la regla base pone para los
       celulares: en computadora sobra alto y ese límite estaba
       encogiendo el logo (a 900px de ventana lo dejaba en 180px de
       alto en vez de los 333 que le tocan). */
    max-height: none;
  }

  .login-panel{
    align-items: center; /* el formulario se centra a lo alto */
    padding: 40px;
  }
  .login-titulo{ font-size: 34px; }
}

/* Pantallas anchas: la columna de marca crece un poco más que la del
   formulario, que ya tiene su ancho tope y no gana nada estirándose. */
@media (min-width: 1200px){
  .login-grid{ grid-template-columns: 1.15fr 1fr; }
  .marca-logo{ width: 440px; }
}