/*
 * 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:248px}

  /* ===== Menú lateral (la misma <nav class="tabbar">) ===== */
  body.has-tabbar{padding-left:calc(var(--side-w) + var(--sal))}
  .tabbar{top:0;right:auto;width:calc(var(--side-w) + var(--sal));height:auto;display:flex;flex-direction:column;align-items:stretch;gap:2px;
    padding:calc(var(--sat) + 18px) 14px calc(var(--sab) + 18px) calc(var(--sal) + 14px);overflow-y:auto;
    background:var(--surface);border-top:0;border-right:1px solid var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}
  .tb-brand{order:0;display:flex;align-items:center;gap:10px;padding:2px 10px 18px}
  .tb-brand img{width:32px;height:32px;object-fit:contain}
  .tb-brand .wordmark{font-size:22px}
  .tabbar .tab-new{order:1}
  .tabbar [data-tab="home"]{order:2}
  .tabbar [data-tab="op"]{order:3}
  .tabbar [data-sub="op"]{order:4}
  .tabbar [data-tab="admin"]{order:5}
  .tabbar [data-sub="admin"]{order:6}
  .tabbar [data-tab="settings"]{order:7;margin-top:auto}
  /* Secciones: ícono y nombre en renglón; la activa con fondo (no solo color) */
  .tabbar a,.tabbar button{flex-direction:row;justify-content:flex-start;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--r-sm);
    font-size:var(--fs-subhead);font-weight:500;color:var(--ink-2);letter-spacing:0}
  .tabbar a>.ic{width:22px;height:22px;padding:0;border-radius:0;background:none!important}
  .tabbar a:hover{background:var(--fill)}
  .tabbar a.on{background:var(--blue-t);color:var(--tint);font-weight:600}
  .tabbar a:active,.tabbar button:active{opacity:1}
  .tabbar .tl-l{display:inline}.tabbar .tl-s{display:none}
  /* «Nuevo»: botón principal arriba del menú */
  .tabbar .tab-new{justify-content:center;gap:8px;margin:0 0 16px;border-radius:var(--r-sm);background:var(--cta);color:var(--on-color)!important;font-weight:600}
  .tabbar .tab-new:hover{background:var(--cta-d)}
  .tabbar .tab-new .tab-plus{width:auto;height:auto;margin:0;background:none;border-radius:0}
  .tabbar .tab-new .tab-plus .ic{width:20px;height:20px}
  /* Módulos de cada sección */
  .tb-sub{display:flex;flex-direction:column;gap:1px;margin:0 0 8px}
  .tb-sub a{min-height:40px;padding-left:46px;font-size:var(--fs-subhead);font-weight:500;color:var(--muted)}
  .tb-sub a.on{background:none;color:var(--tint);font-weight:600}
  .tb-copy{order:8;display:block;margin:10px 12px 0;font-size:var(--fs-caption);line-height:1.4;color:var(--muted)}

  /* ===== 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}
  .home-top .brandline,.home-top .band{display:none}
  .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 ===== */
  /* Inicio: divisiones a todo lo ancho; recientes y unidades en operación lado a lado */
  .home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-items:start}
  .home>*{grid-column:1/-1}
  .home>.home-recent{grid-column:1}
  .home>.lg-home{grid-column:2}
  /* 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))}
}