/*
 * Capa responsive global del proyecto Simulador de Cortes.
 * No modifica cálculos, formularios, rutas, sesiones ni JavaScript funcional.
 * Solo corrige adaptación visual y desbordamientos entre resoluciones.
 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  width: 100%;
  max-width: 100%;
}
body {
  overflow-x: hidden;
}
*, *::before, *::after {
  min-width: 0;
}
img, picture, video, iframe, canvas, svg {
  max-width: 100%;
}
img, video {
  height: auto;
}
iframe {
  border: 0;
}
input, select, textarea, button {
  max-width: 100%;
}
textarea {
  resize: vertical;
}
pre, code, .keybox, .mono {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Los contenedores flex/grid no deben forzar el ancho de pantalla. */
:is(header, main, section, article, aside, nav, footer, div, form) > * {
  min-width: 0;
}

/* Tablas: conservan columnas y pasan a desplazamiento horizontal cuando no caben. */
.table-wrap,
.table-responsive,
.ranking-wrap,
.hist-wrap,
.stats-table-wrap,
.audit,
[class*="table-wrap"],
[class*="table-container"] {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

/* Gráficos y bloques estadísticos. */
.chart-container,
.chart-wrap,
.chart-box,
.graph,
.graph-wrap,
[class*="chart-"],
[class*="graph-"] {
  max-width: 100%;
}
canvas {
  width: 100% !important;
}

/* Enlaces y textos largos (email, códigos, estados, etc.). */
a, p, span, td, th, label, .hint, .muted, .sub, .note {
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .wrap, .sc-wrap, .container, .content, .main {
    max-width: 100% !important;
  }

  /* Evita que grids de muchas columnas queden comprimidos en tablets. */
  .stats-grid,
  .summary-grid,
  .cut-grid,
  .cuts,
  .cortes-grid,
  .mini-status-grid,
  .stats-live-grid,
  .grid-prov,
  .prov-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body {
    min-width: 0;
  }

  .wrap, .sc-wrap, .container, .content, .main {
    width: 100% !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }

  .card, .sc-card, .panel, .box {
    max-width: 100%;
  }

  /* Formularios táctiles: evita zoom automático de Safari iOS. */
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  button, .btn, a.btn, [role="button"] {
    max-width: 100%;
    white-space: normal;
  }

  /* Toolbars y navegaciones se reordenan sin perder acciones. */
  .toolbar,
  .top,
  .top-nav-actions,
  .actions,
  .pager,
  .mode-tabs,
  .stats-tabs,
  .sc-nav,
  .sc-header,
  .head {
    flex-wrap: wrap !important;
  }

  .toolbar > div,
  .actions > *,
  .top-nav-actions > * {
    min-width: 0;
  }

  /* Grids principales pasan a una columna en móvil. */
  .stats-grid,
  .summary-grid,
  .cut-grid,
  .cuts,
  .cortes-grid,
  .turno-grid,
  .partes-grid,
  .widget-form-grid,
  .mini-status-grid,
  .stats-live-grid,
  .grid-prov,
  .prov-grid,
  .grid.three,
  .preset,
  .settings,
  .auth-shell {
    grid-template-columns: 1fr !important;
  }

  /* Tablas grandes: desplazamiento dentro de la propia tabla si no existe wrapper. */
  table {
    max-width: 100%;
  }
  body > table,
  main > table,
  section > table,
  article > table,
  .card > table,
  .sc-card > table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .history-popover {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    left: 8px !important;
    right: 8px !important;
    max-height: calc(100dvh - 16px) !important;
  }

  .history-popover table {
    display: table;
  }

  .admin-row {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .wrap, .sc-wrap, .container, .content, .main {
    padding-left: max(8px, env(safe-area-inset-left)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
  }

  .card, .sc-card, .panel {
    border-radius: 14px !important;
  }

  .stats-grid,
  .summary-grid,
  .cut-grid,
  .cuts,
  .cortes-grid,
  .mini-status-grid,
  .stats-live-grid,
  .grid-prov,
  .prov-grid {
    grid-template-columns: 1fr !important;
  }

  .pager a, .pager button, .page-btn {
    flex: 1 1 auto;
  }
}

/* Soporte de pantallas muy anchas sin estirar líneas de lectura en exceso. */
@media (min-width: 1800px) {
  .wrap, .sc-wrap, .container, .main {
    margin-left: auto;
    margin-right: auto;
  }
}

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

/* ================================================================
 * Auditoría responsive v2 · 24/08/2026
 * Refuerzos específicos tras revisar todas las plantillas visuales.
 * ================================================================ */

/* Un contenedor común para tablas que no traen wrapper propio. Se añade
   únicamente desde responsive-ui.js y no altera los datos ni el marcado útil. */
.sc-auto-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  border-radius: inherit;
}
.sc-auto-table-wrap > table {
  margin: 0;
}

/* Los wrappers existentes deben ser el límite del desbordamiento, nunca la página. */
.table-wrap,
.table-responsive,
.ranking-wrap,
.hist-wrap,
.stats-table-wrap,
.mp-table-wrap,
.gc-step-scroll,
.gc-table-wrap,
.audit,
.results-table-wrap,
[class*="table-wrap"],
[class*="table-container"] {
  width: 100%;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

/* Evita que una tabla ancha cambie el ancho de su card/grid padre. */
:is(.card,.sc-card,.mp-card,.gc-card,.panel,.box,.analysis-section,.mv321-card) {
  min-width: 0;
}
:is(.card,.sc-card,.mp-card,.gc-card,.panel,.box,.analysis-section,.mv321-card) > :is(.table-wrap,.table-responsive,.ranking-wrap,.hist-wrap,.stats-table-wrap,.mp-table-wrap,.sc-auto-table-wrap,[class*="table-wrap"]) {
  min-width: 0;
  max-width: 100%;
}

/* Barras y navegaciones: nunca fuerzan ancho extra. */
:is(.sc-header,.head,.top,.mp-head-inner,.mp-header,.extra-nav,.admss-extra-nav,.mode-tabs,.stats-tabs,.toolbar,.controls,.actions,.pager,.gc-source,.gc-cut-head,.gc-filter-grid,.legal-top-in,.site-footer-inner) {
  min-width: 0;
  max-width: 100%;
}
:is(.sc-header,.head,.top,.mp-head-inner,.extra-nav,.admss-extra-nav,.mode-tabs,.stats-tabs,.toolbar,.actions,.pager,.gc-source,.gc-cut-head) > * {
  min-width: 0;
}

/* Sidebar / barra móvil común de los tres simuladores principales. */
.scu-mobilebar {
  padding-left: max(9px, env(safe-area-inset-left)) !important;
  padding-right: max(9px, env(safe-area-inset-right)) !important;
  max-width: 100vw;
}
.scu-mobile-title,
.scu-brand-copy,
.scu-process,
.scu-link span {
  min-width: 0;
}

/* Botón global de tema: solo aparece en páginas que no tienen selector propio. */
.sc-global-theme-toggle {
  position: fixed;
  z-index: 2600;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--border, #dce3ed);
  border-radius: 999px;
  background: var(--card, #fff);
  color: var(--navy, #1a2e5a);
  box-shadow: 0 9px 28px rgba(17,34,61,.14);
  font: 800 .76rem 'DM Sans', system-ui, sans-serif;
  cursor: pointer;
}
.sc-global-theme-toggle i { font-size: .95rem; }

/* Fallback de modo oscuro para las pocas páginas auxiliares que usan colores
   fijos en vez de variables. Las páginas principales conservan su tema propio. */
html[data-theme="dark"] body {
  color-scheme: dark;
}
html[data-theme="dark"] body:not(.scu-has-sidebar) {
  --bg:#071323;
  --off:#071323;
  --white:#111c2f;
  --card:#111c2f;
  --text:#eaf0ff;
  --muted:#aab7ce;
  --border:#263854;
  --line:#263854;
}
html[data-theme="dark"] body:not(.scu-has-sidebar) :is(.card,.panel,.box,.login-card,.summary-box,.cut-box,.stat,.review,.vote-list,.admin-row,.settings) {
  border-color: var(--border, #263854) !important;
}
html[data-theme="dark"] body:not(.scu-has-sidebar) :is(.card,.panel,.box,.login-card,.summary-box,.cut-box,.review,.vote-list) {
  background: var(--card, #111c2f) !important;
  color: var(--text, #eaf0ff) !important;
}
html[data-theme="dark"] body:not(.scu-has-sidebar) :is(input,select,textarea) {
  background: #0d192a !important;
  color: #eaf0ff !important;
  border-color: #30445f !important;
}
html[data-theme="dark"] body:not(.scu-has-sidebar) :is(.muted,.hint,.sub,.meta) {
  color: #aab7ce !important;
}
html[data-theme="dark"] body:not(.scu-has-sidebar) .sc-global-theme-toggle {
  background:#111c2f;
  border-color:#30445f;
  color:#eaf0ff;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  /* Las barras antiguas siguen siendo accesibles aunque haya muchas acciones. */
  .sc-header,
  .head,
  .top,
  .mp-head-inner {
    flex-wrap: wrap !important;
  }

  .head h1,
  .mp-header h1,
  .top h1 {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Navegaciones secundarias: mejor desplazamiento horizontal que botones
     comprimidos o saltos imprevisibles. */
  .extra-nav,
  .admss-extra-nav,
  .mode-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }
  .extra-nav > *,
  .admss-extra-nav > *,
  .mode-tabs > * {
    flex: 0 0 auto !important;
    white-space: nowrap;
  }

  /* Toolbars de filtros y paginación. */
  .toolbar:not([style*="display:grid"]),
  .actions,
  .pager {
    align-items: stretch !important;
  }
  .toolbar > div {
    flex: 1 1 280px;
  }

  /* Grids estadísticos específicos que existían con 3–5 columnas. */
  .mp-grid,
  .mv321-cuts,
  .mv321-data,
  .gc-live,
  .score,
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---------- Móvil ---------- */
@media (max-width: 600px) {
  html, body { max-width: 100%; }

  /* Cards con un margen útil constante incluso en 320/360 px. */
  .wrap,
  .sc-wrap,
  .mp-wrap,
  .gc-wrap,
  main.wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: max(9px, env(safe-area-inset-left)) !important;
    padding-right: max(9px, env(safe-area-inset-right)) !important;
  }

  .card,
  .sc-card,
  .mp-card,
  .gc-card,
  .analysis-section,
  .mv321-card {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  /* Cabeceras antiguas: título en línea propia y acciones usables. */
  .head,
  .mp-head-inner,
  .top {
    align-items: stretch !important;
  }
  .head h1,
  .mp-header h1,
  .top h1 {
    width: 100% !important;
    flex: 1 0 100% !important;
    order: -1;
    margin-right: 0 !important;
  }
  .head > a,
  .head > button,
  .head > .theme-toggle,
  .mp-nav .mp-btn {
    flex: 1 1 140px;
    width: auto !important;
    min-width: 0;
    text-align: center;
    justify-content: center;
  }

  /* Filtros y acciones: una columna real cuando el espacio es pequeño. */
  .controls,
  .gc-filter-grid,
  .gc-estimate-strip,
  .settings,
  .preset,
  .auth-shell,
  .form-grid-2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .toolbar > div {
    width: 100%;
    flex: 1 1 100%;
  }
  .toolbar > div > :is(input,select,button,.btn) {
    flex: 1 1 150px;
  }

  /* Estadística: una sola columna en teléfonos estrechos. */
  .stats,
  .stats-grid,
  .summary-grid,
  .cut-grid,
  .cuts,
  .cortes-grid,
  .partes-grid,
  .prov-grid,
  .grid-prov,
  .turno-grid,
  .mini-status-grid,
  .stats-live-grid,
  .mp-grid,
  .mp-grid.two,
  .mp-grid.three,
  .mv321-cuts,
  .mv321-data,
  .gc-live,
  .score,
  .stat-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Pestañas estadísticas: botones completos en vez de apretados. */
  .stats-tabs {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 7px !important;
  }
  .stats-tabs > * { width: 100%; justify-content: center; }

  /* Navegación de páginas: evita que Anterior/Siguiente salgan del viewport. */
  .pager > *,
  .page-btn {
    flex: 1 1 auto !important;
    min-width: 0;
    text-align: center;
  }

  /* Popovers / diálogos históricos dentro del viewport. */
  .history-popover {
    width: calc(100vw - 14px) !important;
    max-width: calc(100vw - 14px) !important;
    max-height: calc(100dvh - 14px) !important;
    left: 7px !important;
    right: 7px !important;
  }

  /* Botón de tema auxiliar más compacto. */
  .sc-global-theme-toggle {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
  }
  .sc-global-theme-toggle span { display:none; }
}

@media (max-width: 380px) {
  .wrap,
  .sc-wrap,
  .mp-wrap,
  .gc-wrap,
  main.wrap {
    padding-left: max(7px, env(safe-area-inset-left)) !important;
    padding-right: max(7px, env(safe-area-inset-right)) !important;
  }
  .card,
  .sc-card,
  .mp-card,
  .gc-card,
  .analysis-section,
  .mv321-card {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Ajustes finales detectados en las cabeceras antiguas y en los formularios de acceso. */
html[data-theme="dark"] body:not(.scu-has-sidebar) {
  background: var(--off, #071323) !important;
  color: var(--text, #eaf0ff) !important;
}
html[data-theme="dark"] body:not(.scu-has-sidebar) :is(.auth-card,.form-entry-box,.mini-note) {
  background:#111c2f !important;
  border-color:#30445f !important;
  color:#eaf0ff !important;
}
html[data-theme="dark"] body:not(.scu-has-sidebar) :is(.auth-card h2,.auth-card h3,.form-entry-box h3) {
  color:#dbe7ff !important;
}
html[data-theme="dark"] body:not(.scu-has-sidebar) :is(.top .pill,.top a.pill) {
  background:#111c2f !important;
  border-color:#30445f !important;
  color:#dbe7ff !important;
}

@media (max-width: 600px) {
  /* Cabecera de los simuladores heredados (General / Auxiliar CAM):
     primera fila Volver + tema, después título y cuerpo. */
  .sc-header {
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 8px 10px !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }
  .sc-header .back {
    grid-column: 1;
    grid-row: 1;
    width: auto !important;
    white-space: nowrap;
  }
  .sc-header .theme-toggle {
    grid-column: 3;
    grid-row: 1;
    width: auto !important;
    justify-self: end;
    white-space: nowrap;
  }
  .sc-header h1 {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100% !important;
    margin: 2px 0 0 !important;
    order: initial !important;
  }
  .sc-header .badge-cuerpo {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    max-width: 100% !important;
    white-space: normal !important;
  }
}