/* Fixes responsive aplicados sobre todas las páginas del portal */

/* === NAV: scroll horizontal en mobile en vez de quebrar === */
@media (max-width: 1100px){
  .nav{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* Sticky right side: el .right queda fuera del scroll */
  }
  .nav .right{
    position: sticky;
    right: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 12%, #fff 100%);
    padding-left: 18px !important;
    flex-shrink: 0;
  }
  .nav-links{
    flex-shrink: 0;
  }
  .nav-group::before{
    /* Reducir tamaño de labels en mobile para no desbordar */
    font-size: 7.5px !important;
    letter-spacing: .18em !important;
  }
}

/* === MOBILE PHONE: aún más compacto === */
@media (max-width: 640px){
  .nav{
    height: 52px;
    padding: 0 14px !important;
    gap: 12px !important;
  }
  .brand{
    font-size: 15px !important;
  }
  .brand small{
    display: none;  /* ocultar "Atlas · Crillón" en phone */
  }
  .nav-links{
    margin-left: 6px !important;
  }
  .nav-links a{
    padding: 6px 10px !important;
    font-size: 11.5px !important;
  }
  .nav-group{
    padding: 0 2px !important;
  }
  .nav-group::before{
    top: -10px !important;
    left: 6px !important;
  }
  .nav-group a{
    font-size: 11px !important;
    padding: 6px 8px !important;
  }
  .page-head{
    padding: 24px 18px 18px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  h1{
    font-size: 28px !important;
  }
  .lead, .copy p{
    font-size: 12.5px !important;
  }
  /* Tablas con scroll horizontal */
  .table-wrap, .wrap{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  table{
    font-size: 12px !important;
  }
  /* Filters sticky no romper */
  .filters{
    padding: 10px 14px !important;
    overflow-x: auto;
  }
  .search{
    flex: 1 1 100%;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  /* Mini KPIs: 2 cols en mobile */
  .mini-kpis, .summary-grid, .summary{
    grid-template-columns: repeat(2,1fr) !important;
  }
  /* Modal: full-width */
  .modal{
    padding: 20px 18px !important;
    max-width: 100% !important;
  }
  .modal h3{
    font-size: 20px !important;
  }
  .modal .row, .modal .row2{
    grid-template-columns: 1fr !important;
  }
  /* Cards en lista de scraps */
  .scrap-card, .scrap-head{
    padding: 14px !important;
  }
  .scrap-head{
    grid-template-columns: 1fr !important;
  }
  /* Nav del topbar: hide labels */
  .nav-group::before{
    display: none !important;  /* en phone los labels arriba se rompen */
  }
}

/* === TABLET (640-1100): comprimir nav links horizontales ===
   NOTA: estas reglas eran para el nav superior horizontal. Con el sidebar lateral
   sobrescriben con !important el padding de los items y cortan visualmente la
   primera letra de cada label. Las restringimos al nav superior si existe. */
@media (min-width: 641px) and (max-width: 1100px){
  header.topbar .nav-links a,
  body > nav.nav:not([style*="position: fixed"]) .nav-links a{
    font-size: 11.5px !important;
    padding: 6px 10px !important;
  }
  header.topbar .nav-group a,
  body > nav.nav:not([style*="position: fixed"]) .nav-group a{
    font-size: 11px !important;
    padding: 6px 8px !important;
  }
}

/* === SIDEBAR LATERAL: forzar padding correcto ===
   Sobrescribe cualquier regla que pueda haber reducido el padding-left de los
   items del sidebar (especialmente _responsive.css de tablet). */
nav.nav .nav-group-items a{
  padding: 8px 18px 8px 32px !important;
  font-size: 13px !important;
}
nav.nav .nav-links > a{
  padding: 10px 18px !important;
  font-size: 13px !important;
}

/* === Print fixes === */
@media print{
  .nav, .filters, .progress-panel, .modal-bg, .svc-warn{
    display: none !important;
  }
  .page-head{
    border-bottom: 2px solid #000 !important;
  }
  body{
    color: #000 !important;
  }
  table{
    page-break-inside: avoid;
  }
}