/* Adaptaciones compartidas. La vista de escritorio conserva su distribución. */
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #2d6fc0; outline-offset: 3px; }

@media screen and (max-width: 900px) {
  .quick-links { flex-wrap: wrap; }
  .glass-container, .main-col, .side-col, .glass-field { min-width: 0; }
  .modal-box, .detail-box, .labels-modal-box {
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-wrap: anywhere;
  }
}

@media screen and (max-width: 768px) {
  html { scroll-padding-top: 12px; }
  body.glass { min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }
  .glass-blob { display: none; }
  .glass-titlebar {
    padding: 14px max(14px, env(safe-area-inset-right)) 14px max(14px, env(safe-area-inset-left));
    flex-wrap: wrap;
    gap: 14px;
  }
  .glass-brand { flex-wrap: wrap; gap: 8px; }
  .glass-brand .glass-tagline { flex-basis: 100%; border: 0; padding: 0; margin: 0; }
  .glass-titlebar > div:last-child:not(.glass-brand) { flex-wrap: wrap; width: 100%; }
  .glass-titlebar > div:last-child:not(.glass-brand) > button { flex: 1; }
  .glass-container { padding: 16px 12px; width: 100%; }
  .panel-section, .section { padding: 16px 12px; margin-bottom: 16px; }
  .panel-section h2 { font-size: 17px; }
  button, a, input, select, textarea { touch-action: manipulation; }
  button, .glass-button, .glass-pill, .nav-link, .pbtn, .filter-btn,
  .session-actions button, .row-actions .glass-button, .vendor-export {
    min-height: 44px;
    height: auto;
    font-size: 14px;
    white-space: normal;
    padding: 10px 14px;
  }
  input:not([type=checkbox]):not([type=radio]), select, textarea,
  .glass-field input, .glass-field select {
    min-height: 46px;
    max-width: 100%;
    font-size: 16px !important;
  }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
  .glass-field label { font-size: 13px; }
  .glass-field { min-width: 0; }
  .invite-form, .new-logistics-form, .etiqueta-grid { grid-template-columns: minmax(0, 1fr); }
  .invite-form > *, .new-logistics-form > * { min-width: 0; width: 100%; }
  .quick-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .quick-links a, .quick-links button { width: 100%; }
  .quick-links a { text-decoration: none; }
  .filter-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .filter-row > *, .filter-row .glass-field { width: 100%; }
  .view-tabs, .labels-actions, .row-actions { flex-wrap: wrap; }
  .view-tabs > *, .labels-actions > * { flex: 1 1 auto; }
  .section-toggle { min-height: 44px; gap: 12px; }
  .credentials-display .row { flex-direction: column; gap: 4px; }
  .credentials-display { overflow-wrap: anywhere; }
  .modal-overlay, .detail-overlay { padding: 12px; }
  .modal-box, .detail-box, .labels-modal-box { width: 100%; padding: 20px 16px; }
  .glass-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .glass-metric { padding: 14px 8px; }
  .glass-metric .value { font-size: 26px; }
  .main-col { width: 100%; }
  .side-col { flex-direction: column; }
  .side-widget { min-width: 0; width: 100%; }

  /* Cada fila conserva sus encabezados como etiquetas visibles. */
  .mobile-table, .mobile-table tbody { display: block; width: 100%; }
  .mobile-table thead { display: block; }
  .mobile-table thead tr { display: block; }
  .mobile-table thead th { display: none; }
  .mobile-table thead th:has(input[type=checkbox]) { display: flex; width: auto !important; align-items: center; gap: 10px; }
  .mobile-table thead th:has(input[type=checkbox])::after { content: 'Seleccionar todo'; }
  .mobile-table tbody tr {
    display: block;
    margin: 0 0 12px;
    padding: 8px 12px;
    border: 1px solid rgba(26,61,107,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.75);
  }
  .mobile-table tbody td {
    display: block;
    width: 100%;
    padding: 10px 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
    font-size: 14px;
    border-bottom: 1px solid rgba(26,61,107,.08);
  }
  .mobile-table tbody td:last-child { border-bottom: 0; }
  .mobile-table tbody td[data-label]:not([colspan])::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--glass-text-muted);
    margin-bottom: 5px;
  }
  .mobile-table tbody td[colspan] { text-align: center; }

  body[data-page=stats] header { padding: 14px; gap: 12px; }
  body[data-page=stats] header nav { width: 100%; margin-left: 0; flex-wrap: wrap; }
  body[data-page=stats] header nav a { flex: 1; text-align: center; min-height: 44px; padding: 12px; }
  body[data-page=stats] .filters-bar { padding: 16px 12px; }
  body[data-page=stats] .filters-bar > * { max-width: 100%; }
  body[data-page=stats] .period-btns { width: 100%; flex-wrap: wrap; }
  body[data-page=stats] .period-btns button { flex: 1; }
  body[data-page=stats] main { padding: 0 12px 20px; }
  body[data-page=stats] .chart-wrap { height: 230px; }

  body.glass[data-page=map] { height: auto; min-height: 100dvh; overflow: visible; }
  body[data-page=map] header { flex-wrap: wrap; padding: 12px; gap: 10px; }
  body[data-page=map] header > div:first-child { width: 100%; flex-wrap: wrap; }
  body[data-page=map] .live-dot { width: 100%; }
  body[data-page=map] .nav-link { flex: 1; text-align: center; display: grid; place-items: center; }
  body[data-page=map] .kpis { display: flex; width: 100%; margin: 0; gap: 8px; }
  body[data-page=map] .kpi { flex: 1; min-width: 0; padding: 10px 4px; }
  body[data-page=map] .content { display: flex; flex-direction: column; flex: none; }
  body[data-page=map] #map { flex: none; height: 52dvh; min-height: 280px; width: 100%; }
  body[data-page=map] aside { display: flex; width: 100%; min-width: 0; border-left: 0; }
  body[data-page=map] .shipment-list { overflow: visible; }
  body[data-page=map] .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; }
  body[data-page=map] .leaflet-popup-content { max-width: 65vw; overflow-wrap: anywhere; }

  body[data-page=scanner] header { padding: 14px; }
  body[data-page=scanner] .session-actions { flex-wrap: wrap; padding-left: 12px !important; padding-right: 12px !important; }
  body[data-page=scanner] .scanner-wrap { margin: 12px; }
  body[data-page=scanner] #camera-status { color: #e4edf8; }
  body[data-page=scanner] #camera-label { color: #e4edf8; }
  body[data-page=scanner] #reader video { max-height: 55dvh; object-fit: cover; }
  body[data-page=scanner] .manual { padding: 0 12px 16px; }
  body[data-page=scanner] .manual input { min-width: 0; width: 100%; }
  body[data-page=scanner] .scan-item { gap: 10px; flex-wrap: wrap; }
  body[data-page=scanner] .scan-item .addr { max-width: 100%; white-space: normal; }

  body[data-page=login] { overflow: auto; min-height: 100dvh; height: auto; padding: 24px 16px; }
  body[data-page=login] .login-stage { margin: auto 0; min-width: 0; }
  body[data-page=login] .role-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page=login] .role-pill { font-size: 14px; padding: 10px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}