/*
 * Computadora (≥1024 px): menú lateral en lugar de la barra inferior y contenido más ancho en columnas.
 * En celular y tableta no cambia nada: todas las reglas están dentro de esta consulta.
 *   .page        pantallas de detalle y formularios: hasta 960 px (lectura cómoda)
 *   .page.wide   tableros y listas (Inicio, Operación, Administración, Logística, Taller, Combustible): hasta 1200 px
 */
@media (min-width:1024px){
  :root{--side-w:240px}

  /* Menú lateral, barra superior y tablero de Inicio: shell.css */

  /* ===== Marco de las pantallas ===== */
  body.has-tabbar .page{max-width:960px;padding:calc(var(--sat) + 28px) 40px calc(var(--sab) + 48px)}
  body.has-tabbar .page.wide{max-width:1200px}
  .toast-host{left:calc(var(--side-w) + var(--sal) + 12px)}
  body.has-tabbar .actionbar{left:calc(var(--side-w) + var(--sal))}
  .mon{left:calc(var(--side-w) + var(--sal));bottom:0;padding-left:0}
  /* Filtros: con espacio de sobra se acomodan en varios renglones en vez de desplazarse de lado */
  .filters{flex-wrap:wrap;overflow:visible;margin:0 0 14px;padding:0}

  /* ===== Columnas por pantalla ===== */
  /* Operación y Administración: módulos en dos columnas */
  .hub .mod-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Logística: accesos lado a lado, botón principal a su medida y tarjetas en tres columnas */
  .lg-entries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 14px}
  .lg-entries>a{margin:0}
  .lg-page>.lg-new{width:fit-content;min-width:300px;padding:0 28px}
  .lg-page .lg-cards{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
  /* Taller: indicadores en una fila y secciones en dos columnas */
  .mt-acts{max-width:640px}
  .mt-cols{columns:2;column-gap:28px}
  .mt-cols>.mt-sec{break-inside:avoid}
}
/* Pantallas amplias: los 6 indicadores de Taller en una sola fila */
@media (min-width:1200px){
  .mt-page:not(.mt-order) .mt-tiles{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* ===== Acceso en computadora (≥1024 px): dos paneles =====
 * Izquierda, sobre el fondo de la app: marca, bienvenida, aviso de acceso restringido y versión.
 * Derecha, sobre el azul corporativo (--login-grad) con borde ondulado y un motivo sutil de camiones, contenedores,
 * ubicaciones y documentos: el formulario en una tarjeta (sigue el tema claro u oscuro) con campos tipo píldora e ícono.
 * En celular y tableta no cambia nada (screens.css). */
@media (min-width:1024px){
  .login-in{display:grid;grid-template-columns:minmax(420px,42%) 1fr;max-width:none;min-height:100%;margin:0;padding:0}
  .login-side{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
    padding:calc(var(--sat) + 48px) clamp(40px,5vw,88px) calc(var(--sab) + 32px) calc(var(--sal) + clamp(40px,5vw,88px))}
  .login-hero{display:contents}   /* en teléfono es el encabezado azul (screens.css) */
  .login-side .login-brand{margin:0}
  .login-side .login-logo{width:min(300px,100%)}
  .login-hello{display:block;margin:auto 0;padding:48px 0}
  .lh-t{margin:0;font-size:clamp(34px,3.2vw,46px);line-height:1.1;font-weight:800;letter-spacing:-.025em;color:var(--tint);text-wrap:balance}
  .lh-s{margin:16px 0 0;max-width:32ch;font-size:var(--fs-title3);line-height:1.45;color:var(--ink-2);text-wrap:pretty}
  .login-side .login-notice{margin:0;max-width:520px}
  .login-side .login-foot{margin:24px 0 0;text-align:left}
  .login-side .login-foot .legal-copy{display:block;text-align:left}

  .login-main{position:relative;display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;
    padding:calc(var(--sat) + 48px) calc(var(--sar) + 64px) calc(var(--sab) + 48px) 136px;
    background:url(../assets/brand/login-pattern.svg) 0 0/240px 240px repeat,var(--login-grad)}
  /* Borde ondulado: el fondo de la app entra en el panel azul */
  .login-main::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:104px;background:var(--canvas);
    -webkit-mask:url(../assets/brand/login-wave.svg) 0 0/100% 100% no-repeat;mask:url(../assets/brand/login-wave.svg) 0 0/100% 100% no-repeat;pointer-events:none}
  .login-card{display:block;position:relative;z-index:1;width:100%;max-width:460px;padding:44px 44px 30px;border-radius:24px;
    background:var(--surface);border:1px solid var(--line);box-shadow:0 24px 60px rgba(8,16,44,.35)}
  .login-card .login-title{text-align:center;font-size:var(--fs-title2)}
  .login-card .login-sub{text-align:center;margin-bottom:26px}
  .login-card .login-terms{margin-top:18px}
  /* Campos tipo píldora; con ícono al inicio (correo y contraseña) */
  .login-card .in{border-radius:var(--r-pill);min-height:52px;padding-left:20px;padding-right:20px}
  .login-card .in-w .in{padding-right:56px}
  .login-card .in-lead{display:grid;position:absolute;left:16px;top:0;bottom:0;z-index:1;place-items:center;color:var(--muted);pointer-events:none}
  .login-card .in-lead .ic{width:20px;height:20px}
  .login-card .in-lead + .in{padding-left:48px}
  .login-card .in-w:focus-within .in-lead{color:var(--tint)}
  .login-card .in-act{right:4px;top:4px;bottom:4px;border-radius:var(--r-pill)}
  .login-card .login-code{padding-left:calc(20px + .4em)}
  .login-card .btn-primary{border-radius:var(--r-pill);min-height:52px}
  .login-card .btn-primary:hover{background:var(--cta-d)}
}

/* ===== Acceso en computadora con mouse: fondo que sigue al cursor y brillo en «Bienvenido de nuevo» =====
 * gate.js (followCursor) pone «.lit» y la posición del cursor (--mx, --my) en el panel bajo el mouse. En el panel azul
 * una luz suave revela con más fuerza el motivo de camiones; a la izquierda, un halo tenue del color de la marca.
 * El título tiene un destello que lo cruza de vez en cuando y brilla al pasar el cursor. Nada de esto en teléfono,
 * tableta, pantallas táctiles ni con «reducir movimiento». */
@media (min-width:1024px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .login-side,.login-main{isolation:isolate}
  .login-side{position:relative}
  .login-side::before,.login-main::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .45s ease}
  .login-side::before{background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--tint) 18%,transparent),transparent 70%)}
  .login-main::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 70%),
      url(../assets/brand/login-pattern.svg) 0 0/240px 240px repeat;
    -webkit-mask:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),#000 0,#000 30%,transparent 100%);
    mask:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),#000 0,#000 30%,transparent 100%)}
  .login-side.lit::before,.login-main.lit::after{opacity:1}

  .lh-t{background:linear-gradient(100deg,var(--tint) 0 42%,color-mix(in srgb,var(--tint) 30%,#fff) 50%,var(--tint) 58% 100%) 100% 0/250% 100% no-repeat;
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
    animation:lh-shine 7s ease-in-out .8s infinite;transition:filter .35s ease}
  .login-hello:hover .lh-t{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--tint) 45%,transparent))}
}
@keyframes lh-shine{0%{background-position:100% 0}30%,100%{background-position:0 0}}