/* KCS shared phone/tablet layout. Desktop, printing and business data are untouched. */
@media screen and (max-width: 1023px) {
  html.kcs-nav-active { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html.kcs-nav-active body { min-width: 0 !important; max-width: calc(100% - var(--kcs-nav-width)) !important; }
  html.kcs-nav-active body :where(main, section, form, fieldset, header, .container, .container-fluid, .page, .page-content, .content, .main-content, .wrapper, .panel, .card, .modal-content, .modal-body, .modal-dialog, .modal-panel, .modal-card) {
    box-sizing: border-box; min-width: 0; max-width: 100%;
  }
  html.kcs-nav-active body :where(.container, .container-fluid, main#app_main, .page-content, .main-content) {
    width: 100%; padding-left: 12px; padding-right: 12px;
  }
  html.kcs-nav-active body :where(.container, .container-fluid) { margin-left: auto !important; margin-right: auto !important; }
  html.kcs-nav-active body .d-flex { flex-wrap: wrap; min-width: 0; }
  html.kcs-nav-active body :where(.nav-buttons, .top-options) { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 100%; }
  html.kcs-nav-active body :where(.btn-nav, .main103-button) { box-sizing: border-box; max-width: 100%; white-space: normal; overflow-wrap: break-word; }
  html.kcs-nav-active body .filters input { margin-right: 0; }
  html.kcs-nav-active body form label { white-space: normal; overflow-wrap: break-word; }
  html.kcs-nav-active body .ver-stock-dna-checkbox-label { min-height: 44px; height: auto; white-space: normal; }
  html.kcs-nav-active body .indicadores-section { flex-wrap: wrap; gap: 10px; }
  html.kcs-nav-active body :where(.page-loader, .loading-overlay) { box-sizing: border-box; left: var(--kcs-nav-width) !important; right: 0 !important; width: auto !important; max-width: calc(100vw - var(--kcs-nav-width)); padding: 12px; }
  html.kcs-nav-active body .page-loader-card { box-sizing: border-box; max-width: 100%; }
  html.kcs-nav-active body :where(h1, h2, h3, .title, .modal-title) { overflow-wrap: break-word; }
  html.kcs-nav-active body h1 { font-size: clamp(23px, 5.5vw, 30px); line-height: 1.2; }
  html.kcs-nav-active body :where(.header, .app-header, .page-header, .header-content, .header-container, .header-actions, .toolbar, .table-toolbar, .toolbar-left, .toolbar-right, .topbar, .topbar-actions, .right-bar, .actions, .form-actions, .f-actions, .modal-actions, .modal-footer, .button-group, .btn-container, .pagination, .search-row, .search-form, .toolbar-form, .row) {
    flex-wrap: wrap; min-width: 0; max-width: 100%; height: auto;
  }
  html.kcs-nav-active body :where(.form-grid, .filters-grid, .filter-grid, .vehicle-grid, .vehicle-select-grid, .search-options, .form-row, .m201-grid, .summary-grid) {
    grid-template-columns: minmax(0, 1fr); min-width: 0;
  }
  html.kcs-nav-active body :where(.field, .f-item, .filter-item, .form-group, .col, [class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"]) { min-width: 0; max-width: 100%; }
  html.kcs-nav-active body :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]), select, textarea, .form-control, .form-select) {
    box-sizing: border-box; min-width: 0 !important; max-width: 100% !important; font-size: 16px !important;
  }
  html.kcs-nav-active body :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]), select, .form-control, .form-select) { min-height: 44px; }
  html.kcs-nav-active body :where(button, .btn, .button, input[type=submit], input[type=button], .page-link) {
    min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: break-word; touch-action: manipulation;
  }
  html.kcs-nav-active body :where(img, video) { max-width: 100%; object-fit: contain; }
  html.kcs-nav-active body .select2-container { min-width: 0 !important; max-width: 100%; }
  html.kcs-nav-active body .select2-container--open:not(.select2) { width: 0 !important; max-width: none; }
  html.kcs-nav-active body .select2-dropdown { min-width: 0; max-width: calc(100vw - var(--kcs-nav-width) - 24px); }
  html.kcs-nav-active body .select2-selection--single { min-height: 44px; }
  html.kcs-nav-active body .select2-selection--single .select2-selection__rendered { line-height: 42px; font-size: 16px; }
  html.kcs-nav-active body .select2-selection--single .select2-selection__arrow { min-height: 42px; }
  html.kcs-nav-active body .select2-results__option { min-height: 44px; padding: 10px 12px; font-size: 16px; }
  html.kcs-nav-active body :where(.modal-content, .modal-dialog, .modal-panel, .modal-card, .image-modal-content, .contact-modal-content, .m201-modal__dialog) {
    min-width: 0 !important; max-width: 100% !important; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  html.kcs-nav-active body :where(.modal-body, .modal-content, .modal-panel) { overscroll-behavior-y: contain; }
  html.kcs-nav-active body :where(.modal-header, .modal-footer) { gap: 8px; }
  html.kcs-nav-active body .kcs-nav-offset-fixed { box-sizing: border-box; }
  html.kcs-nav-active body :where(.table-responsive, .table-wrapper, .table-wrap, .table-container, .table-scroll, #tableWrapper, .dataTables_wrapper, .dt-container, .kanban-board, .kanban, .super-kanban, .timeline-wrapper) {
    min-width: 0 !important; max-width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  /* Layout-only tags: no element is moved; IDs, forms and event listeners stay in place. */
  html.kcs-nav-active body .kcs-mobile-fit { box-sizing: border-box !important; min-width: 0 !important; max-width: 100% !important; }
  html.kcs-nav-active body .kcs-mobile-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html.kcs-nav-active body .kcs-mobile-grid > * { min-width: 0 !important; max-width: 100% !important; grid-column: auto !important; }
  html.kcs-nav-active body .kcs-mobile-wrap { flex-wrap: wrap !important; height: auto !important; }
  html.kcs-nav-active body .kcs-mobile-wrap > * { min-width: 0; max-width: 100%; }
  html.kcs-nav-active body .kcs-mobile-scroll-table { display: block; width: 100%; max-width: 100% !important; min-width: 0 !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html.kcs-nav-active body .kcs-mobile-scroll-region { min-width: 0 !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  html.kcs-nav-active body .kcs-mobile-scroll-region.kcs-mobile-overflow::before {
    content: 'Desliza la tabla para ver más columnas →'; display: block; position: sticky; left: 0; width: fit-content; max-width: 100%; box-sizing: border-box;
    padding: 8px 10px; font: 500 12px/1.5 system-ui, sans-serif; color: #2355a0; background: #eef4ff; white-space: normal;
  }
  html.kcs-nav-active body :where(.kcs-mobile-scroll-region, .kcs-mobile-scroll-table):focus-visible { outline: 2px solid #2b7cff; outline-offset: 2px; }
  html.kcs-nav-active body .fc .fc-toolbar { flex-wrap: wrap; gap: 10px; }
  html.kcs-nav-active body .fc .fc-toolbar-title { font-size: 20px; }
  html.kcs-nav-active body .fc .fc-view-harness { overflow-x: auto; }
  html.kcs-nav-active body :where(.calendar-wrapper, .main71-cal, .calendar-section) { max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html.kcs-nav-active body .layout-container { flex-wrap: wrap; }
  html.kcs-nav-active body :where(.layout-container > .sidebar, .layout-container > .calendar-section) { flex: 0 0 100%; width: 100%; }
  html.kcs-nav-active body .calendar-header { flex-wrap: wrap; }
  html.kcs-nav-active body :where(.calendar-container, .main71-grid) { min-width: 700px; }
  html.kcs-nav-active body .horizontal-row { flex-wrap: nowrap; gap: 12px; width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html.kcs-nav-active body .horizontal-row .state-wrapper { flex: 0 0 240px; min-width: 240px; }
  html.kcs-nav-active body .horizontal-row .arrow { flex-shrink: 0; }
  html.kcs-nav-active body .super-sidebar.kcs-nav-offset-fixed { max-width: calc(100vw - var(--kcs-nav-width) - 8px) !important; }
  html.kcs-nav-active body[data-cotizador-version] :where(.quote-heading, .compat-heading, .results-heading, .customer-bar) { flex-wrap: wrap; gap: 10px; }
  html.kcs-nav-active body[data-cotizador-version] .topbar .brand { min-width: 0; }
  html.kcs-nav-active body[data-cotizador-version] .quote-grid { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 600px) {
  html.kcs-nav-active body :where(.app-header, .page-header, .header-content) { align-items: flex-start; }
  html.kcs-nav-active body :where(.search-row, .form-row, .filters-grid) > * { width: 100%; }
  html.kcs-nav-active body :where(.container, .container-fluid) { margin-top: 12px; margin-bottom: 12px; }
  html.kcs-nav-active body :where(.col-sm-6, .col-md-4, .col-md-6, .col-lg-4, .col-lg-6) { flex: 0 0 100%; width: 100%; }
  html.kcs-nav-active body .select2.select2-container { width: 100% !important; }
}
/* Compatibilidad Avanzada v2: complete cards on phones, original table on desktop. */
@media screen and (max-width: 1023px) {
  html.kcs-compat-page body .side-filters { position: static; width: auto; margin: 12px; }
  html.kcs-compat-page body .side-card { display: grid; grid-template-columns: minmax(0,1fr); gap: 4px; padding: 12px; }
  html.kcs-compat-page body .side-card__title { margin-bottom: 6px; }
  html.kcs-compat-page body .switch { min-height: 44px; gap: 12px; }
  html.kcs-compat-page body .switch-text { overflow-wrap: normal; line-height: 1.3; }
  html.kcs-compat-page body .switch input:focus-visible + .switch-ui { outline: 3px solid #93c5fd; outline-offset: 3px; }
  html.kcs-compat-page body .app-header { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 18px; }
  html.kcs-compat-page body .title-wrap { display: block; }
  html.kcs-compat-page body h1 { display: block; line-height: 1.15; margin-bottom: 10px; font-size: clamp(23px,5.5vw,30px); }
  html.kcs-compat-page body h1 .ver { white-space: nowrap; font-size: 14px; }
  html.kcs-compat-page body .status { margin-top: 8px; line-height: 1.4; font-size: 14px; }
  html.kcs-compat-page body .right-bar { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
  html.kcs-compat-page body .right-bar .btn { width: 100%; }
  html.kcs-compat-page body .filters-grid { grid-template-columns: minmax(0,1fr); gap: 14px; }
  html.kcs-compat-page body .f-item { min-width: 0; }
  html.kcs-compat-page body .f-label { margin-bottom: 6px; font-size: 15px; }
  html.kcs-compat-page body .f-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
  html.kcs-compat-page body #tableWrapper { max-height: none; overflow: visible; border: 0; box-shadow: none; background: transparent; margin-top: 18px; }
  html.kcs-compat-page body #resultsTable { display: block; width: 100%; min-width: 0; }
  html.kcs-compat-page body #resultsTable > colgroup { display: none; }
  html.kcs-compat-page body #resultsTable > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  html.kcs-compat-page body #resultsTable > tbody { display: block; }
  html.kcs-compat-page body #resultsTable > tbody:empty::before { content: 'Selecciona marca, modelo y año para ver los productos.'; display: block; padding: 18px; font-size: 14px; line-height: 1.5; color: #475569; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; }
  html.kcs-compat-page body #resultsTable > tbody > tr { display: block; border: 1px solid #dce4f0; border-radius: 14px; margin: 12px 0; background: var(--card,#fff); overflow: hidden; }
  html.kcs-compat-page body #resultsTable > tbody > tr > td { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 8px; width: auto; padding: 10px 12px; text-align: left; overflow-wrap: break-word; }
  html.kcs-compat-page body #resultsTable > tbody > tr > td::before { content: attr(data-kcs-label); font-size: 13px; font-weight: 650; color: #53627b; align-self: center; }
  html.kcs-compat-page body #resultsTable > tbody > tr > td:first-child { background: #eef4ff; color: #16478f; font-weight: 800; }
  html.kcs-compat-page body #resultsTable > tbody > tr > td .btn { width: 100%; min-width: 0; padding: 8px; }
  html.kcs-compat-page body #resultsTable > tbody > tr.group-row { border: 0; margin-top: 18px; }
  html.kcs-compat-page body #resultsTable > tbody > tr.group-row > td { display: block; border: 0; padding: 10px 12px; font-size: 14px; }
  html.kcs-compat-page body #resultsTable > tbody > tr.group-row > td::before { content: none; }
  html.kcs-compat-page body .modal { padding: 8px; }
  html.kcs-compat-page body .modal-content { width: 100%; }
  html.kcs-compat-page body .modal-header { padding: 14px 54px 12px 12px; align-items: flex-start; }
  html.kcs-compat-page body .modal-close { top: 4px; right: 4px; width: 44px; height: 44px; }
  html.kcs-compat-page body .modal-header-icon { flex-shrink: 0; }
  html.kcs-compat-page body .modal-body { padding: 12px; max-height: 65vh; max-height: 65dvh; }
  html.kcs-compat-page body .sku-searchbar { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
  html.kcs-compat-page body .sku-searchbar input { width: 100%; }
  html.kcs-compat-page body :where(.sku-price, .sku-qty) { width: 100%; flex-wrap: wrap; }
  html.kcs-compat-page body .toast { left: calc(var(--kcs-nav-width) + (100vw - var(--kcs-nav-width))/2); max-width: calc(100vw - var(--kcs-nav-width) - 24px); }
}
