/*! PTRC Logística · © 2026 Trazza SpA. Todos los derechos reservados. Software propietario. Su uso se rige por la licencia del producto (/LICENSE.txt). Queda prohibida su copia, modificación, ingeniería inversa o distribución sin autorización escrita del titular. */
/* ════════════════════════════════════════════════════════════════════════
   PTRC — Capa de mejoras DESKTOP (responsive)
   Solo aplica en pantallas grandes (≥980px). En móvil (<980px) NO cambia nada:
   todas las reglas viven dentro de @media, así la experiencia celular queda igual.
   Cargar DESPUÉS del <style> inline del módulo (antes de </head>).
   ════════════════════════════════════════════════════════════════════════ */

@media (min-width: 980px){
  /* Algunos módulos (ej. Fotos, Cambio de Turno) ponen max-width:480 en
     "html,body" (no solo en body). Si solo ensanchamos body, el <html> sigue
     topado en 480 y atrapa todo en esa columna. Liberar html es imprescindible
     para que el ancho de escritorio funcione en esos módulos. (No-op donde html
     no tiene max-width.) */
  html{ max-width: none !important; }

  /* Ensanchar el contenedor central: de la columna móvil (480px) a un ancho
     cómodo de escritorio. El login (#loginScreen tiene su propio max-width) y
     los drawers no se ven afectados. */
  body{ max-width: 1160px !important; }

  /* Listas de tarjetas → 2 columnas. Convención: contenedores cuyo id termina
     en "List"/"list"/"Cards". Cubre logList, histList, expList, intList,
     noteList, tripList, actList, incList, oilList, batchList, sondajeCards, etc. */
  [id$="List"], [id$="list"], [id$="Cards"]{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
  }
  /* Estados vacíos, botones "ver más" y separadores ocupan toda la fila. */
  [id$="List"] > .empty,  [id$="list"] > .empty,  [id$="Cards"] > .empty,
  [id$="List"] > button,  [id$="list"] > button,
  [id$="List"] > .chips-empty, [id$="Cards"] > .chips-empty,
  [id$="List"] > h2, [id$="List"] > h3{
    grid-column: 1 / -1;
  }
  /* Las tarjetas dentro de una grilla no necesitan su margin-bottom (el gap ya
     separa). Evita doble espaciado. */
  [id$="List"] > * , [id$="Cards"] > *{ margin-bottom: 0 !important; }

  /* Listas dentro de un cajón (.drawer): el panel lateral mide 460 px y nunca cabe en 2-3 columnas.
     La Biblioteca HSEC (#libList) caía en la regla genérica y las tarjetas se pisaban (12-09).
     Más específico que [id$=…] → gana; a ≥1500 px la regla de 3 columnas no aplica (ya no es grid). */
  .drawer .doc-list, .drawer #libList{
    display: flex !important;
    flex-direction: column;
    gap: 8px;
  }

  /* Hub: grilla de módulos a 3 columnas en desktop. */
  .module-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }

  /* Tablas anchas (Roster gantt, billing) aprovechan el espacio extra. */
  table{ width: 100%; }

  /* Más aire en el contenido principal. */
  .view, main, .main{ }
}

/* Pantallas muy grandes → 3 columnas y contenedor más ancho. */
@media (min-width: 1500px){
  body{ max-width: 1320px !important; }
  [id$="List"], [id$="list"], [id$="Cards"]{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .module-grid{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   FASE 2 — Layout nativo de escritorio
   Aprovecha que los módulos comparten clases .drawer / .overlay / .bottom-nav.
   Solo desktop; móvil intacto.
   ════════════════════════════════════════════════════════════════════════ */

/* 2A · Drawers (detalle/formularios) → panel lateral DERECHO en vez de hoja inferior.
   El detalle abre al lado del contenido, no tapándolo. */
@media (min-width: 980px){
  .drawer{
    top: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    right: 0 !important;
    width: min(460px, 92vw) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    transform: translateX(100%) !important;       /* oculto a la derecha */
    box-shadow: -8px 0 30px rgba(0,0,0,.18);
    padding-bottom: 24px;
  }
  .drawer.open{ transform: translateX(0) !important; } /* entra desde la derecha */
  .drawer .d-handle{ display: none !important; }       /* el "tirador" no aplica en panel */
}

/* 2B · Barra inferior → riel lateral IZQUIERDO en pantallas grandes.
   Se activa a ≥1340px, donde el margen lateral del contenido (centrado a 1160)
   alcanza para un riel de ~74px sin solaparse. Bajo ese ancho, queda abajo. */
@media (min-width: 1340px){
  .bottom-nav{
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    transform: none !important;
    width: 74px !important;
    height: 100vh !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 2px;
    border-top: none !important;
    border-right: 1px solid var(--border, #E8DDD1) !important;
    background: var(--card, #fff);
    box-shadow: 2px 0 14px rgba(80,50,20,.05);
    padding: 18px 0 !important;
    z-index: 90;
    overflow-y: auto;
  }
  .bottom-nav > *{ flex: 0 0 auto !important; width: 100% !important; padding: 11px 0 !important; border-radius: 0 !important; }
  /* Indicador de pestaña activa (barra a la izquierda), si el módulo usa .active. */
  .bottom-nav > *.active{ box-shadow: inset 3px 0 0 var(--copper, var(--copper-d, currentColor)); background: var(--copper-xxl, rgba(120,80,40,.06)); }

  /* Ya no hay barra inferior: los FAB se acoplan abajo a la derecha (patrón
     de escritorio) en vez de flotar centrados a media altura. */
  .fab{ bottom: 24px !important; left: auto !important; right: 32px !important; transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   FASE B — Pulido genérico de escritorio
   Afecta a TODOS los módulos que cargan esta hoja. Todo vive bajo @media:
   en móvil (<980px) NO cambia absolutamente nada.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 980px){

  /* B1 · Paneles laterales (drawers): encabezado fijo al hacer scroll.
     El ancho del panel ya se fija en la Fase 2; aquí solo se mejora el uso. */
  .drawer .d-head, .drawer .form-head, .drawer .det-head, .drawer .modal-ttl{
    position: sticky; top: 0; z-index: 5;
    background: var(--card, #fff);
  }

  /* B2 · Modales: centrados y acotados (en escritorio no tiene sentido una hoja
     a todo lo ancho). Solo cambia el contenedor interno del modal. */
  .modal, .modal-card, .modal-content, .modal-inner{
    max-width: 580px !important;
    margin-left: auto !important; margin-right: auto !important;
  }
  .modal-overlay{ align-items: center !important; }

  /* B3 · Bloques de detalle / formularios FUERA de un panel: ancho de lectura
     cómodo y centrados (un campo de una columna a 1200px se ve mal). Dentro de
     un drawer NO se tocan: ya quedan acotados al ancho del panel. */
  .form-body, .sondaje-form, .det-body, .detail-body{
    max-width: 660px; margin-left: auto; margin-right: auto;
  }
  .drawer .form-body, .drawer .sondaje-form, .drawer .det-body, .drawer .detail-body{
    max-width: none; margin: 0;
  }

  /* B4 · Tablas anchas: nunca desbordan el contenido; scroll horizontal propio. */
  .table-wrap, .gantt-wrap, [class$="-table-wrap"], [class$="-scroll"]{ overflow-x: auto; }

  /* B5 · Foco visible por teclado (accesibilidad y navegación en escritorio). */
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
    outline: 2px solid var(--copper, var(--copper-d, #9C6B3C));
    outline-offset: 2px;
  }
}

/* B6 · Realce sutil al pasar el cursor sobre tarjetas — SOLO con mouse real
   (@hover:hover excluye táctiles, incl. tablets grandes). Sin transform, sin
   !important: si el módulo ya define su propio :hover, ese gana. */
@media (hover: hover) and (min-width: 980px){
  [class*="card"]:hover{ box-shadow: 0 6px 22px rgba(80,50,20,.12); }
}

/* ════════════════════════════════════════════════════════════════════════
   FASE C — Ajustes por módulo (quirks)
   Cada regla apunta a IDs/clases ÚNICOS de su módulo, así no afectan a otros.
   Todo bajo @media: el móvil (<980px) no cambia.
   ════════════════════════════════════════════════════════════════════════ */

/* ── ROSTER ─────────────────────────────────────────────────────────────
   El gantt usa celdas de ancho fijo (36px) dentro de .gantt-wrap (scroll
   propio). El table{width:100%} genérico estiraría/deformaría las celdas:
   se exime para que conserve su ancho natural y haga scroll horizontal. */
@media (min-width: 980px){
  .gantt-table{ width: auto !important; }
}
/* En modo escritorio con riel lateral ya NO hay barra inferior: las vistas
   absolutas (que reservaban 68px abajo) usan todo el alto, y los botones
   flotantes propios del roster bajan al borde. */
@media (min-width: 1340px){
  #todayView, #statsView, #ganttView{ bottom: 0 !important; }
  .gantt-wrap{ padding-bottom: 24px !important; }
  .gantt-legend-btn, #addPersonBtn{ bottom: 24px !important; }
}

/* ── GRILLAS con columnas FIJAS (no terminan en List/Cards) ──────────────
   Estos contenedores definen sus columnas a mano (2-3 fijas, pensadas para
   celular) y por su id ("…Grid") no los toma la regla genérica. En escritorio
   se les dan más columnas para aprovechar el ancho. IDs únicos por módulo. */
@media (min-width: 980px){
  #invGrid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }   /* Inventario */
  #tipoGrid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }  /* HSEC */
  #photoGrid{ grid-template-columns: repeat(5, 1fr) !important; }           /* Fotos */
}
@media (min-width: 1500px){
  #invGrid{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
  #photoGrid{ grid-template-columns: repeat(6, 1fr) !important; }
}

/* ── FORMULARIOS de una sola columna (vista principal, no panel) ─────────
   En escritorio se estiraban a todo el ancho del contenido. Se acotan a un
   ancho de lectura cómodo y centrado. IDs únicos por módulo; las otras vistas
   (historial/incidentes/etc.) no se tocan. */
@media (min-width: 980px){
  #inspView{ max-width: 760px; margin-left: auto; margin-right: auto; }   /* Inspección (checklist) */
  #viewNuevo{ max-width: 760px; margin-left: auto; margin-right: auto; }  /* Cambio de Turno (formulario) */
}

/* ── CEO / Management ───────────────────────────────────────────────────
   El dashboard es desktop-native (tiene su propio @media a ancho completo).
   La reconciliación se hace en ptrc-ceo.html: se quita el enlace a esta hoja
   para que NO le imponga el ancho 1160 ni el grid genérico. (Sin reglas aquí.) */

/* ════════════════════════════════════════════════════════════════════════
   FASE E — El riel (y el FAB) "abrazan" el contenido en pantallas anchas
   El contenido del módulo está centrado (max-width 1160 <1500 · 1320 ≥1500).
   Antes el riel quedaba pegado al borde izquierdo de la ventana y el FAB al
   borde derecho, dejando un hueco grande respecto al contenido en monitores
   1920+. Ahora ambos se ubican JUNTO al contenido:
     · riel:  borde derecho ~16px a la izquierda del contenido
              left = (margen izq. del contenido) − ancho_riel(74) − aire(16) = (100vw − cw)/2 − 90
     · FAB :  borde derecho ~24px dentro del contenido
              right = (margen der. del contenido) + 24 = (100vw − cw)/2 + 24
   Solo cambia la posición horizontal; el resto del layout no se toca. Móvil intacto.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1340px){
  .bottom-nav{ left: max(0px, calc((100vw - 1160px) / 2 - 90px)) !important; }
  .fab, #addPersonBtn{ right: max(24px, calc((100vw - 1160px) / 2 + 24px)) !important; }
}
@media (min-width: 1500px){
  .bottom-nav{ left: max(0px, calc((100vw - 1320px) / 2 - 90px)) !important; }
  .fab, #addPersonBtn{ right: max(24px, calc((100vw - 1320px) / 2 + 24px)) !important; }
}