/* Mobile app shell compartido para modulos del panel. */
@media (max-width: 768px) {
  :root {
    --mobile-bg: #071326;
    --mobile-surface: rgba(15, 23, 42, .76);
    --mobile-surface-strong: rgba(15, 23, 42, .92);
    --mobile-line: rgba(148, 163, 184, .22);
    --mobile-blue: #2b6cee;
    --mobile-cyan: #93c5fd;
    --mobile-muted: #94a3b8;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 18% 0%, rgba(43, 108, 238, .16), transparent 32%),
      var(--mobile-bg) !important;
  }

  body {
    margin: 0 !important;
    font-size: 16px;
  }

  *,
  *::before,
  *::after {
    min-width: 0;
    box-sizing: border-box;
  }

  .container,
  .layout-content-container,
  .main,
  main,
  .page,
  .content,
  .rp-shell,
  .page-objectives .container,
  .page-objectives .nav-header {
    width: min(100%, 460px) !important;
    max-width: 460px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  h1,
  h2,
  h3 {
    letter-spacing: 0;
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  header,
  .nav-header,
  .page-header,
  .topbar,
  .toolbar,
  .hero-bar {
    max-width: 100%;
  }

  .nav-header,
  .page-header,
  .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px !important;
    padding: max(8px, env(safe-area-inset-top)) 10px 10px !important;
    border: 1px solid var(--mobile-line) !important;
    border-top: 0 !important;
    border-radius: 0 0 20px 20px !important;
    background: var(--mobile-surface-strong) !important;
    box-shadow: 0 16px 36px rgba(2, 6, 23, .35);
    backdrop-filter: blur(16px);
  }

  .grid,
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-5,
  .grid-cols-6,
  .lg\:grid-cols-2,
  .lg\:grid-cols-3,
  .lg\:grid-cols-4,
  .xl\:grid-cols-4,
  .xl\:grid-cols-5,
  .xl\:grid-cols-6 {
    grid-template-columns: 1fr !important;
  }

  .toolbar,
  .actions,
  .filters,
  .button-row,
  .controls,
  .hero-actions,
  .row,
  .rows,
  .top {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  button,
  input,
  select,
  textarea,
  .btn,
  .btn-modern,
  .pill {
    max-width: 100%;
    border-radius: 14px !important;
    font-size: 16px;
  }

  button,
  .btn,
  .btn-modern,
  .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
  }

  input,
  select,
  textarea {
    width: 100%;
  }

  .card,
  .panel,
  .module-card,
  .card-modern,
  .section,
  .box,
  .tile,
  article {
    max-width: 100%;
    min-width: 0;
    border-radius: 18px !important;
  }

  .card,
  .panel,
  .card-modern,
  .section,
  .box,
  .tile {
    border: 1px solid var(--mobile-line);
    background: var(--mobile-surface);
  }

  .metric,
  .stat-card,
  .summary-card,
  .kpi-card,
  [class*="summary-card"],
  [class*="stat-card"],
  [class*="kpi"] {
    overflow: hidden;
  }

  .metric strong,
  .stat-card strong,
  .summary-card strong,
  .kpi-card strong,
  [class*="summary-card"] strong,
  [class*="stat-card"] strong,
  [class*="kpi"] strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(21px, 7vw, 30px);
    line-height: 1.05;
  }

  .chart-wrap,
  .chart-container,
  .chart-card,
  .graph-wrap,
  .graph-container,
  .graph-card,
  .canvas-wrap {
    max-width: 100%;
    overflow: hidden;
    border-radius: 18px;
  }

  canvas,
  svg {
    max-width: 100%;
  }

  .table-wrap {
    overflow: visible !important;
  }

  table {
    min-width: 0 !important;
    width: 100% !important;
  }

  table thead {
    display: none;
  }

  table,
  tbody,
  tr,
  td {
    display: block;
    width: 100%;
  }

  tbody {
    display: grid;
    gap: 10px;
  }

  tr {
    border: 1px solid var(--mobile-line) !important;
    border-radius: 16px;
    background: rgba(15, 23, 42, .54);
    overflow: hidden;
  }

  td {
    display: grid !important;
    grid-template-columns: minmax(104px, 42%) minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px !important;
    white-space: normal !important;
    text-align: right !important;
    border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
  }

  td:last-child {
    border-bottom: 0 !important;
  }

  td::before {
    content: attr(data-label);
    color: var(--mobile-cyan);
    font-size: 11px;
    font-weight: 900;
    text-align: left;
    text-transform: uppercase;
  }

  td:not([data-label])::before {
    content: "";
  }

  .modal,
  .dialog,
  [role="dialog"] > div,
  .overlay .modal {
    width: min(100%, 440px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    margin: 10px auto !important;
    overflow: auto;
    border-radius: 20px !important;
  }

  /* Paginas con Tailwind: filtros y tabs dejan de quedar apretados. */
  body > nav {
    width: min(100%, 460px) !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    padding: max(10px, env(safe-area-inset-top)) 10px 12px !important;
    border: 1px solid var(--mobile-line) !important;
    border-top: 0 !important;
    border-radius: 0 0 22px 22px !important;
    background: rgba(8, 17, 31, .96) !important;
    box-shadow: 0 18px 42px rgba(2, 6, 23, .36);
    backdrop-filter: blur(18px);
  }

  body > nav > div,
  body > nav .flex.flex-col {
    gap: 12px !important;
  }

  body > nav a span.text-lg,
  body > nav a span[class*="text-lg"] {
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem !important;
  }

  body > nav .flex.flex-wrap,
  body > nav [role="group"],
  body > nav [role="tablist"] {
    width: 100%;
  }

  body > nav .flex.flex-wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body > nav [role="tablist"] {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(90px, 1fr);
    overflow-x: auto !important;
    min-height: 48px;
    border-radius: 18px !important;
    -webkit-overflow-scrolling: touch;
  }

  body > nav [role="tablist"] button {
    min-height: 46px;
    white-space: nowrap;
  }

  body > nav select,
  body > nav input,
  body > nav .relative,
  body > nav [aria-haspopup="true"] {
    width: 100% !important;
  }

  body > nav input[type="date"] {
    min-width: 0;
    font-size: 14px;
  }

  body > nav button[id*="Export"],
  body > nav button[id*="Refresh"],
  body > nav #btnExportCsv,
  body > nav #btnRefresh {
    margin-left: 0 !important;
  }

  body > main {
    display: grid !important;
    gap: 14px !important;
    padding-top: 14px !important;
  }

  /* KPIs: dos columnas cuando tiene sentido, sin desbordar importes largos. */
  #kpiCards,
  .ss-kpi-grid,
  .summary-grid,
  .gnc-summary-grid,
  .gnc-detail-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #kpiCards > *,
  .ss-kpi-grid > *,
  .summary-grid > *,
  .gnc-summary-grid > *,
  .gnc-detail-grid > * {
    min-width: 0 !important;
    padding: 12px !important;
  }

  #kpiCards p[id],
  #kpiCards strong,
  .ss-kpi-grid strong,
  .summary-grid strong,
  .gnc-summary-card strong,
  .gnc-detail-card strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(20px, 8vw, 31px) !important;
    line-height: 1.05 !important;
  }

  #kpiCards > *:nth-last-child(1):nth-child(odd),
  .ss-kpi-grid > *:nth-last-child(1):nth-child(odd),
  .summary-grid > *:nth-last-child(1):nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* Graficos: tarjetas verticales, altura legible y sin scroll horizontal forzado. */
  .store-panel,
  .dispatch-chart-card,
  .ss-chart-wrap,
  .chart-wrap,
  .chart-card,
  .gnc-chart-card,
  .panel-chart,
  [id*="chartContainer"],
  [id*="ChartContainer"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 300px;
    overflow: hidden !important;
  }

  .store-panel canvas,
  .ss-chart-wrap canvas,
  .chart-wrap canvas,
  .chart-card canvas,
  .gnc-chart-card canvas,
  [id*="chartContainer"] canvas,
  [id*="ChartContainer"] canvas {
    width: 100% !important;
    height: 260px !important;
    max-height: 300px !important;
  }

  .store-panel .flex.justify-between,
  .ss-grid-2,
  .alerts-grid,
  .grid-cards,
  .gnc-report-modal-grid,
  .form-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .heat-grid,
  .ss-heat-grid {
    min-width: 680px;
  }

  .store-heatmap,
  .ss-heat-grid,
  #heatGrid,
  #ss-heat-grid {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Tienda, Productos Full y Parada: ranking como lista mobile. */
  .store-card,
  .pf-card,
  .ps-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px !important;
  }

  .pf-col-rubro,
  .ps-col-subrubro,
  .ps-col-importe {
    display: none !important;
  }

  .pf-rank-row,
  .ps-rank-row {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  .pf-rank-row td,
  .ps-rank-row td {
    border: 0 !important;
    padding: 3px 0 !important;
  }

  .pf-rank-row td::before,
  .ps-rank-row td::before {
    display: none;
  }

  /* Tablas comunes: tarjetas legibles, con separacion y labels automaticos. */
  .table-responsive,
  .table-wrap,
  .ss-table-wrap,
  .overflow-auto,
  .overflow-x-auto {
    max-width: 100% !important;
    overflow-x: visible !important;
  }

  .ss-table,
  .stats-table,
  .gnc-table,
  .table-stack,
  #tableContent table,
  #tableContainer table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  .ss-table tr,
  .stats-table tr,
  .gnc-table tr,
  .table-stack tr,
  #tableContent tr,
  #tableContainer tr {
    margin-bottom: 10px;
  }

  .ss-table td,
  .stats-table td,
  .gnc-table td,
  .table-stack td,
  #tableContent td,
  #tableContainer td {
    align-items: center;
    min-height: 42px;
    overflow-wrap: anywhere;
  }

  .ss-table td:first-child,
  .stats-table td:first-child,
  .gnc-table td:first-child,
  .table-stack td:first-child,
  #tableContent td:first-child,
  #tableContainer td:first-child {
    font-weight: 800;
    color: #f8fafc;
  }

  /* Objetivos / dashboard trimestral: resumen en cards y alertas apiladas. */
  .page-objectives,
  body:has(.summary-grid) {
    overflow-x: hidden;
  }

  .summary-grid,
  .alerts-grid,
  .grid-cards {
    width: 100% !important;
  }

  .station-hero,
  .station-selector,
  .target-card,
  .alert-card {
    max-width: 100% !important;
    overflow: hidden;
  }

  /* GNC, surtidores, tanques y formularios administrativos. */
  .gnc-shell,
  .gnc-page,
  .dispensers-shell,
  .tanks-shell,
  .admin-shell {
    width: min(100%, 460px) !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    padding: 10px !important;
  }

  .gnc-period-tabs,
  .status-tabs,
  .response-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .gnc-period-tabs button,
  .status-tabs button,
  .response-grid button {
    min-height: 44px;
  }

  /* Liquidacion y modales largos: acciones abajo y scroll interno. */
  .modal-content,
  .modal-panel,
  .drawer,
  .side-panel {
    width: calc(100vw - 20px) !important;
    max-width: 440px !important;
    max-height: calc(100dvh - 20px) !important;
    overflow: auto !important;
  }

  .modal-actions,
  .form-actions,
  .footer-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Ranking lubricantes: pista y paneles sin desbordar en celular. */
  .seller-pwa,
  .lubricantes-app,
  .lubricantes-panel,
  .track-shell,
  .track-stage,
  .race-track,
  .admin-track-config {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .track-stage img,
  .race-track img,
  .track-stage canvas,
  .race-track canvas {
    width: 100% !important;
    height: auto !important;
    max-height: 58dvh;
    object-fit: contain;
  }

  .ranking-list,
  .seller-ranking,
  .admin-ranking,
  .lubricantes-detail-modal {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Pantallas chicas extremas. */
  @media (max-width: 380px) {
    body > nav a span.text-lg,
    body > nav a span[class*="text-lg"] {
      max-width: 170px;
    }

    #kpiCards,
    .ss-kpi-grid,
    .summary-grid,
    .gnc-summary-grid,
    .gnc-detail-grid {
      grid-template-columns: 1fr !important;
    }

    body > nav [role="tablist"] {
      grid-auto-columns: minmax(82px, 1fr);
    }
  }
}