/**
 * Dacomsa — modo táctil (shop floor / pantalla touch)
 * Objetivo: targets ≥ 48px, tipografía legible a distancia, gaps generosos.
 * Cargar después del CSS inline de cada pantalla.
 */
:root {
  --titlebar-h: 48px;
  --status-h: 44px;
  --sidebar-w: 272px;
  --input-h: 48px;
  --btn-h: 48px;
  --btn-sm-h: 44px;
  --row-h: 52px;
  --check-col: 56px;
  --radius: 8px;
  --touch-target: 48px;
  --font-ui-size: 15px;
  --font-label: 14px;
  --font-meta: 13px;
}

/* —— App shell (.window) —— */
html.touch-ui .window {
  width: min(100vw, 1440px);
  height: min(100vh, 920px);
}

html.touch-ui html,
html.touch-ui body,
html.touch-ui .window {
  font-size: var(--font-ui-size);
}

html.touch-ui .titlebar {
  height: var(--titlebar-h);
  padding: 0 16px 0 20px;
}

html.touch-ui .titlebar-brand {
  font-size: var(--font-label);
  gap: 12px;
}

html.touch-ui .titlebar-icon {
  width: 20px;
  height: 20px;
}

html.touch-ui .win-btn {
  width: 52px;
  height: var(--titlebar-h);
  font-size: 13px;
}

/* —— Sidebar —— */
html.touch-ui .sidebar-label {
  padding: 14px 16px 8px;
  font-size: var(--font-meta);
}

html.touch-ui .sidebar-item,
html.touch-ui .sidebar-item.nav-link {
  min-height: var(--touch-target);
  padding: 12px 16px;
  font-size: var(--font-label);
  gap: 10px;
}

html.touch-ui .sidebar-label-nested {
  padding: 12px 16px 6px;
  font-size: var(--font-label);
}

html.touch-ui .sidebar-subitem {
  min-height: 44px;
  padding: 10px 12px;
  font-size: var(--font-meta);
  display: flex;
  align-items: center;
}

html.touch-ui .sidebar-hint {
  padding: 14px 16px;
  font-size: var(--font-meta);
  line-height: 1.45;
}

/* —— Contenido principal —— */
html.touch-ui .main-scroll {
  padding: 20px 24px 24px;
}

html.touch-ui .section-title {
  font-size: 17px;
}

html.touch-ui .section-desc,
html.touch-ui .list-hint {
  font-size: var(--font-meta);
}

html.touch-ui .search-row {
  gap: 14px;
  margin-bottom: 18px;
}

html.touch-ui .field label {
  font-size: var(--font-meta);
  margin-bottom: 6px;
}

html.touch-ui .field select,
html.touch-ui .field input[type="text"],
html.touch-ui .field input[type="number"],
html.touch-ui .field input[type="password"] {
  height: var(--input-h);
  padding: 0 14px;
  font-size: var(--font-ui-size);
  border-radius: var(--radius);
}

html.touch-ui .field-search input {
  font-size: 16px;
}

/* —— Botones —— */
html.touch-ui .btn {
  height: var(--btn-h);
  padding: 0 20px;
  font-size: var(--font-label);
  border-radius: var(--radius);
  min-width: var(--touch-target);
}

html.touch-ui .btn-sm {
  height: var(--btn-sm-h);
  padding: 0 16px;
  font-size: var(--font-meta);
  min-width: var(--btn-sm-h);
}

html.touch-ui .btn-ghost {
  min-height: var(--btn-sm-h);
  padding: 0 12px;
  font-size: var(--font-meta);
}

html.touch-ui .toolbar {
  gap: 14px;
  margin-bottom: 14px;
}

html.touch-ui .toolbar-actions {
  gap: 10px;
}

/* —— Listados —— */
html.touch-ui .results-header {
  padding: 12px 16px;
  font-size: var(--font-meta);
}

html.touch-ui .result-row {
  min-height: var(--row-h);
  padding: 10px 16px;
}

html.touch-ui .result-name {
  font-size: var(--font-label);
}

html.touch-ui .result-path,
html.touch-ui .result-part,
html.touch-ui .result-desc,
html.touch-ui .mono {
  font-size: var(--font-meta);
}

html.touch-ui .row-actions {
  gap: 8px;
}

html.touch-ui .empty-results {
  padding: 32px 20px;
  font-size: var(--font-ui-size);
}

/* Columna check en explorador / tablas */
html.touch-ui .list-with-check.results-header,
html.touch-ui .list-with-check.result-row {
  grid-template-columns: var(--check-col) 160px 1fr 140px;
}

html.touch-ui .col-check,
html.touch-ui .check-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--row-h);
}

html.touch-ui input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
  cursor: pointer;
}

html.touch-ui .checkbox-row {
  min-height: var(--touch-target);
  font-size: var(--font-label);
  gap: 12px;
}

html.touch-ui .checkbox-row input[type="checkbox"] {
  flex-shrink: 0;
}

/* —— Status strip —— */
html.touch-ui .status-strip {
  height: auto;
  min-height: var(--status-h);
  padding: 8px 20px;
  font-size: var(--font-meta);
  gap: 18px;
  flex-wrap: wrap;
}

html.touch-ui .status-pill {
  padding: 6px 14px;
  font-size: var(--font-meta);
  gap: 8px;
}

html.touch-ui .status-pill .led {
  width: 9px;
  height: 9px;
}

/* —— Modales —— */
html.touch-ui .modal-backdrop {
  padding: 16px;
}

html.touch-ui .modal {
  border-radius: 10px;
  max-width: min(720px, 96vw);
}

html.touch-ui .modal-head {
  padding: 16px 20px;
  font-size: 17px;
}

html.touch-ui .modal-scroll {
  padding: 16px 20px 20px;
}

html.touch-ui .modal-foot {
  padding: 14px 20px;
  gap: 12px;
}

html.touch-ui .modal-foot .btn {
  flex: 1;
  max-width: none;
}

html.touch-ui .modal-section-title {
  font-size: var(--font-label);
  margin-bottom: 10px;
}

html.touch-ui .panel-head {
  padding: 12px 16px;
  font-size: var(--font-label);
}

html.touch-ui .panel-body {
  padding: 14px 16px;
}

/* Tabs en modal (Sustratos) */
html.touch-ui .modal-tabs {
  gap: 0;
}

html.touch-ui .modal-tab {
  min-height: var(--touch-target);
  padding: 12px 20px;
  font-size: var(--font-label);
}

html.touch-ui .tab-panel {
  padding-top: 16px;
}

/* Combobox Select2-style */
html.touch-ui .combo-wrap input {
  height: var(--input-h) !important;
  font-size: var(--font-ui-size) !important;
  padding: 0 40px 0 14px !important;
}

html.touch-ui .combo-toggle {
  width: 44px;
  height: var(--input-h);
  font-size: 14px;
}

html.touch-ui .combo-option {
  min-height: var(--touch-target);
  padding: 10px 14px !important;
}

html.touch-ui .combo-option .combo-code {
  font-size: var(--font-meta);
}

html.touch-ui .combo-option .combo-desc {
  font-size: var(--font-meta);
}

/* Tabla partes asociadas */
html.touch-ui .parts-table th,
html.touch-ui .parts-table td {
  padding: 12px 14px;
  font-size: var(--font-label);
}

html.touch-ui .parts-table .check-col {
  width: var(--check-col);
}

html.touch-ui .assoc-table-wrap {
  grid-template-columns: 1fr var(--check-col) !important;
}

/* Detalle / alertas */
html.touch-ui .detail-table th,
html.touch-ui .detail-table td {
  padding: 10px 0;
  font-size: var(--font-label);
}

html.touch-ui .alert {
  padding: 14px 16px;
  font-size: var(--font-label);
}

html.touch-ui .print-state,
html.touch-ui .print-banner {
  padding: 14px 16px;
  font-size: var(--font-label);
}

html.touch-ui .toast {
  padding: 14px 22px;
  font-size: var(--font-label);
  bottom: 64px;
}

html.touch-ui .status-badge {
  padding: 4px 12px;
  font-size: 12px;
}

html.touch-ui .status-badge .led {
  width: 8px;
  height: 8px;
}

html.touch-ui .toggle {
  min-height: var(--touch-target);
  gap: 12px;
}

html.touch-ui .toggle input {
  width: 44px;
  height: 24px;
}

html.touch-ui .kbd-hint {
  font-size: 12px;
}

/* Barras de acción masiva / pie modal */
html.touch-ui .bulk-actions,
html.touch-ui .assoc-toolbar,
html.touch-ui .parts-toolbar,
html.touch-ui .list-actions {
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  display: flex;
}

html.touch-ui .bulk-actions .btn,
html.touch-ui .assoc-toolbar .btn,
html.touch-ui .parts-toolbar .btn,
html.touch-ui .list-actions .btn {
  flex: 1;
  min-width: 160px;
}

html.touch-ui .modal-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

html.touch-ui .modal-actions .btn {
  flex: 1;
  min-width: 160px;
}

/* Select2 listado en flujo (modal agregar partes) */
html.touch-ui .picker-list .picker-row {
  min-height: var(--touch-target);
  padding: 10px 14px;
}

html.touch-ui .picker-list {
  max-height: none;
}

html.touch-ui .nested-modal .modal {
  max-width: min(640px, 94vw);
}

/* —— Launcher (index.html) —— */
html.touch-ui .page {
  max-width: 1100px;
  padding: 40px 28px 72px;
}

html.touch-ui .header h1 {
  font-size: 32px;
}

html.touch-ui .header .lead {
  font-size: 17px;
}

html.touch-ui .cards {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

html.touch-ui .card {
  padding: 24px;
  min-height: 180px;
}

html.touch-ui .card h2 {
  font-size: 18px;
}

html.touch-ui .card p {
  font-size: 15px;
}

html.touch-ui .card-action {
  font-size: 15px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

html.touch-ui .panel-head,
html.touch-ui details summary {
  font-size: 15px;
  padding: 14px 18px;
  min-height: 48px;
}

html.touch-ui .steps li {
  padding: 14px 0;
  font-size: 15px;
}

html.touch-ui .changelog-list li {
  font-size: 14px;
  line-height: 1.5;
}