/* Sistema visual transversal inspirado en SAP S/4HANA Fiori Horizon.
   Solo modifica presentación: rutas, permisos, validaciones y procesos permanecen intactos. */
:root {
  --sap-shell: #ffffff;
  --sap-canvas: #f5f6f7;
  --sap-surface: #ffffff;
  --sap-surface-alt: #f7f7f7;
  --sap-border: #d5dadd;
  --sap-border-strong: #89919a;
  --sap-text: #1d2d3e;
  --sap-muted: #556b82;
  --sap-blue: #0a6ed1;
  --sap-blue-hover: #0854a0;
  --sap-blue-soft: #eaf3fc;
  --sap-green: #256f3a;
  --sap-green-soft: #f1fdf6;
  --sap-orange: #e76500;
  --sap-orange-soft: #fff8d6;
  --sap-red: #aa0808;
  --sap-red-soft: #fff1f0;
  --sap-shadow: 0 1px 3px rgba(34, 53, 72, 0.1);
}

html body #appView.app {
  font-family: "72", "Segoe UI", Arial, sans-serif;
  color: var(--sap-text);
  background: var(--sap-canvas);
}

html body #appView.app .content {
  background: var(--sap-canvas);
}

/* Shell bar */
html body #appView.app .topbar {
  min-height: 64px;
  color: var(--sap-text);
  background: var(--sap-shell);
  border-bottom: 1px solid var(--sap-border);
  box-shadow: 0 2px 8px rgba(34, 53, 72, 0.1);
}

html body #appView.app .topbar .page-icon {
  color: var(--sap-blue);
  background: var(--sap-blue-soft);
  border: 1px solid #91c8f6;
  border-radius: 8px;
}

html body #appView.app .topbar h2 {
  color: var(--sap-text);
  font-size: 22px;
  font-weight: 700;
}

html body #appView.app .topbar p,
html body #appView.app .topbar .breadcrumb {
  color: var(--sap-muted);
}

html body #appView.app .topbar .module-badge,
html body #appView.app .topbar .environment-badge {
  border-color: #b8e0c4;
  background: #f1fdf6;
  color: var(--sap-green);
}

/* Superficies y encabezados */
html body #appView.app .content .panel,
html body #appView.app .content .inner-panel,
html body #appView.app .content .issue-panel,
html body #appView.app .content .transfer-builder,
html body #appView.app .content .transfer-detail-card,
html body #appView.app .content .approval-card,
html body #appView.app .content #entryPtForm,
html body #appView.app .content #wasteForm,
html body #appView.app .content #qualityForm {
  border: 1px solid var(--sap-border);
  border-radius: 8px;
  background: var(--sap-surface);
  box-shadow: var(--sap-shadow);
}

html body #appView.app .content .panel {
  padding: 18px 20px;
}

html body #appView.app .content .panel-head,
html body #appView.app .content .automatic-receipt-heading,
html body #appView.app .content .investigation-heading,
html body #appView.app .content .transfer-builder-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e9eb;
}

html body #appView.app .content .panel-head h3,
html body #appView.app .content .panel > h3,
html body #appView.app .content .issue-panel h3,
html body #appView.app .content #entryPtForm h3,
html body #appView.app .content #wasteForm h3,
html body #appView.app .content #qualityForm h3,
html body #appView.app .content .automatic-receipt-heading h3,
html body #appView.app .content .investigation-heading h3 {
  color: var(--sap-text);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}

html body #appView.app .content .panel-head h3::after,
html body #appView.app .content .panel > h3::after,
html body #appView.app .content .issue-panel h3::after,
html body #appView.app .content #entryPtForm h3::after,
html body #appView.app .content #wasteForm h3::after,
html body #appView.app .content #qualityForm h3::after {
  display: none;
}

html body #appView.app .content .panel-head p,
html body #appView.app .content .automatic-receipt-heading p,
html body #appView.app .content .investigation-heading p,
html body #appView.app .content .muted {
  color: var(--sap-muted);
}

/* Campos y barras de filtro */
html body #appView.app .content label {
  color: #354a5f;
  font-size: 12px;
  font-weight: 700;
}

html body #appView.app .content input:not([type="checkbox"]):not([type="radio"]),
html body #appView.app .content select,
html body #appView.app .content textarea {
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--sap-border-strong);
  border-radius: 4px;
  background: #fff;
  color: var(--sap-text);
  font-size: 14px;
  font-weight: 400;
  box-shadow: none;
}

html body #appView.app .content input:not([type="checkbox"]):not([type="radio"]):hover,
html body #appView.app .content select:hover,
html body #appView.app .content textarea:hover {
  border-color: #5b738b;
}

html body #appView.app .content input:not([type="checkbox"]):not([type="radio"]):focus,
html body #appView.app .content select:focus,
html body #appView.app .content textarea:focus {
  border-color: var(--sap-blue);
  outline: 1px solid var(--sap-blue);
  box-shadow: none;
}

html body #appView.app .content input[readonly],
html body #appView.app .content input:disabled,
html body #appView.app .content select:disabled,
html body #appView.app .content textarea:disabled {
  border-color: #d5dadd;
  background: #f2f2f2;
  color: #5b738b;
  opacity: 1;
}

html body #appView.app .content .filters,
html body #appView.app .content .filter-grid,
html body #appView.app .content .transfer-filters,
html body #appView.app .content .quality-filters,
html body #appView.app .content .audit-filters {
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--sap-border);
  border-radius: 6px;
  background: var(--sap-surface-alt);
}

html body #appView.app .content .check-row {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--sap-border);
  border-radius: 4px;
  background: #fff;
}

html body #appView.app .content input[type="checkbox"],
html body #appView.app .content input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--sap-blue);
}

/* Acciones */
html body #appView.app .content button[type="submit"],
html body #appView.app .content .small-button:not(.secondary-button):not(.danger-button),
html body #appView.app .content .primary-button,
html body #appView.app .content .transfer-touch-action {
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid var(--sap-blue);
  border-radius: 4px;
  background: var(--sap-blue);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
  transform: none;
}

html body #appView.app .content button[type="submit"]:hover,
html body #appView.app .content .small-button:not(.secondary-button):not(.danger-button):hover,
html body #appView.app .content .primary-button:hover,
html body #appView.app .content .transfer-touch-action:hover {
  border-color: var(--sap-blue-hover);
  background: var(--sap-blue-hover);
  color: #fff;
  transform: none;
}

html body #appView.app .content .secondary-button,
html body #appView.app .content button.secondary-button,
html body #appView.app .content .row-action,
html body #appView.app .content .scan-button {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--sap-blue);
  border-radius: 4px;
  background: #fff;
  color: var(--sap-blue);
  font-weight: 700;
  box-shadow: none;
  transform: none;
}

html body #appView.app .content .secondary-button:hover,
html body #appView.app .content button.secondary-button:hover,
html body #appView.app .content .row-action:hover,
html body #appView.app .content .scan-button:hover {
  background: var(--sap-blue-soft);
  color: var(--sap-blue-hover);
  transform: none;
}

html body #appView.app .content .danger-button,
html body #appView.app .content .row-action.danger,
html body #appView.app .content .row-action.danger-action {
  border-color: #ffb3b3;
  background: #fff;
  color: var(--sap-red);
}

html body #appView.app .content button:disabled,
html body #appView.app .content .small-button:disabled,
html body #appView.app .content .row-action:disabled {
  border-color: #d5dadd;
  background: #f2f2f2;
  color: #89919a;
  opacity: 1;
  cursor: not-allowed;
}

/* Pestañas */
html body #appView.app .content .tab-buttons,
html body #appView.app .content .config-tabs,
html body #appView.app .content .authorization-tabs {
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--sap-border);
}

html body #appView.app .content .tab-buttons button,
html body #appView.app .content .config-tabs button,
html body #appView.app .content .authorization-tabs button {
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--sap-muted);
  font-weight: 700;
  box-shadow: none;
}

html body #appView.app .content .tab-buttons button:hover,
html body #appView.app .content .config-tabs button:hover,
html body #appView.app .content .authorization-tabs button:hover {
  background: var(--sap-blue-soft);
  color: var(--sap-blue-hover);
}

html body #appView.app .content .tab-buttons button.active,
html body #appView.app .content .config-tabs button.active,
html body #appView.app .content .authorization-tabs button.active {
  border-bottom-color: var(--sap-blue);
  background: transparent;
  color: var(--sap-blue);
}

/* Tablas Fiori responsive y densas */
html body #appView.app .content .table-wrap,
html body #appView.app .content .table-scroll {
  overflow: auto;
  border: 1px solid var(--sap-border);
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
  scrollbar-color: #89919a transparent;
}

html body #appView.app .content table {
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  color: var(--sap-text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

html body #appView.app .content thead th {
  height: 42px;
  padding: 9px 10px;
  border-bottom: 1px solid #89919a;
  background: var(--sap-surface-alt);
  color: #354a5f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  vertical-align: middle;
}

html body #appView.app .content tbody td {
  padding: 10px;
  border-bottom: 1px solid #e5e9eb;
  background: #fff;
  color: var(--sap-text);
  line-height: 1.3;
  vertical-align: middle;
}

html body #appView.app .content tbody tr:nth-child(even) td {
  background: #fff;
}

html body #appView.app .content tbody tr:hover td {
  background: #edf5fc;
  box-shadow: none;
}

html body #appView.app .content tbody tr.selected-row td,
html body #appView.app .content tbody tr.is-selected td {
  background: var(--sap-blue-soft);
}

html body #appView.app .content .pagination-bar {
  min-height: 48px;
  margin-top: 0;
  padding: 8px 0;
  color: var(--sap-muted);
}

html body #appView.app .content .pagination-bar button,
html body #appView.app .content .pagination-bar select {
  min-height: 34px;
  border: 1px solid var(--sap-border-strong);
  border-radius: 4px;
  background: #fff;
  color: var(--sap-blue);
  box-shadow: none;
}

/* Estados semánticos */
html body #appView.app .content .status-pill,
html body #appView.app .content .status-badge,
html body #appView.app .content .app-status,
html body #appView.app .content .app-status-badge,
html body #appView.app .content .yield-badge,
html body #appView.app .content .order-type-badge,
html body #appView.app .content .of-origin-badge {
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid #d5dadd;
  border-radius: 12px;
  background: #f7f7f7;
  color: #354a5f;
  font-size: 11px;
  font-weight: 700;
  box-shadow: none;
}

html body #appView.app .content .success,
html body #appView.app .content .status-pill.success,
html body #appView.app .content .status-badge.aprobado {
  border-color: #b8e0c4;
  background: var(--sap-green-soft);
  color: var(--sap-green);
}

html body #appView.app .content .warning,
html body #appView.app .content .status-pill.warning {
  border-color: #f3cc84;
  background: var(--sap-orange-soft);
  color: #8d2a00;
}

html body #appView.app .content .error,
html body #appView.app .content .status-pill.danger,
html body #appView.app .content .status-badge.rechazado {
  color: var(--sap-red);
}

/* Tarjetas y mensajes */
html body #appView.app .content .metrics,
html body #appView.app .content .summary-cards,
html body #appView.app .content .kpi-grid {
  gap: 12px;
}

html body #appView.app .content .metrics article,
html body #appView.app .content .summary-card,
html body #appView.app .content .kpi-card {
  border: 1px solid var(--sap-border);
  border-radius: 6px;
  background: #fff;
  box-shadow: var(--sap-shadow);
}

html body #appView.app .content .form-message:not(.hidden),
html body #appView.app .content .info-banner,
html body #appView.app .content .transfer-checkin-banner {
  padding: 10px 12px;
  border: 0;
  border-left: 3px solid var(--sap-blue);
  border-radius: 0 4px 4px 0;
  background: #f0f7ff;
  color: #354a5f;
}

html body #appView.app .content .empty-state {
  padding: 24px;
  color: var(--sap-muted);
  text-align: center;
}

html body #appView.app .content details {
  border-color: var(--sap-border);
  border-radius: 6px;
  background: #fff;
}

html body #appView.app .content details > summary {
  color: var(--sap-blue);
  font-weight: 700;
}

/* Combobox y diálogos */
html body #appView.app .content .search-results,
html body #appView.app .content .select-dropdown {
  border: 1px solid var(--sap-border-strong);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(34, 53, 72, 0.18);
}

html body #appView.app .content .search-results button:hover,
html body #appView.app .content .select-dropdown button:hover {
  background: var(--sap-blue-soft);
  color: var(--sap-text);
}

html body .app-modal,
html body .scanner-modal {
  background: rgba(29, 45, 62, 0.42);
  backdrop-filter: blur(2px);
}

html body .app-modal-panel,
html body .scanner-panel {
  border: 1px solid var(--sap-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(29, 45, 62, 0.28);
}

html body .toast {
  border: 1px solid #5b738b;
  border-radius: 6px;
  background: #1d2d3e;
  color: #fff;
  box-shadow: 0 8px 24px rgba(29, 45, 62, 0.24);
}

@media (max-width: 1180px) {
  html body #appView.app .topbar {
    min-height: 58px;
  }

  html body #appView.app .content .panel {
    padding: 16px;
  }

  html body #appView.app .content .filters,
  html body #appView.app .content .filter-grid,
  html body #appView.app .content .transfer-filters,
  html body #appView.app .content .quality-filters,
  html body #appView.app .content .audit-filters {
    padding: 12px;
  }
}

@media (max-width: 700px) {
  html body #appView.app .content {
    padding-right: 12px;
    padding-left: 12px;
  }

  html body #appView.app .content .panel {
    padding: 14px;
    border-radius: 6px;
  }

  html body #appView.app .content .panel-head,
  html body #appView.app .content .automatic-receipt-heading,
  html body #appView.app .content .investigation-heading {
    align-items: flex-start;
  }
}

@media (max-width: 430px) {
  html body #appView.app .topbar .page-heading,
  html body #appView.app .topbar .page-heading > div {
    min-width: 0;
    max-width: 100%;
  }

  html body #appView.app .topbar h2 {
    max-width: calc(100vw - 126px);
    overflow: hidden;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body #appView.app .topbar p {
    display: none;
  }

  html body .app-connectivity.is-floating {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
  }

  html body .app-connectivity.is-floating .app-connectivity-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  html body .toast {
    top: 72px;
    right: 12px;
    bottom: auto !important;
    left: 12px;
    width: auto;
    max-width: none;
  }

  html body:has(.toast:not(.hidden)) #appView.app .view.active-view {
    padding-top: 78px !important;
  }
}