/* ========================================================================== White Cloud — Design System (scoped) Tokens are global; component styles only apply inside `.wc-scope` so they don't leak into legacy Metronic pages. Dark mode: responds to existing `[data-bs-theme="dark"]` on . ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap'); /* ---------- Tokens (light) ---------------------------------------------- */ :root { --wc-gray-0: #FFFFFF; --wc-gray-50: #F9F9F9; --wc-gray-100: #F1F1F4; --wc-gray-150: #E7E8EE; --wc-gray-200: #DBDFE9; --wc-gray-300: #CDD2DE; --wc-gray-400: #B5B5C3; --wc-gray-500: #99A1B7; --wc-gray-600: #78829D; --wc-gray-700: #4B5675; --wc-gray-800: #252F4A; --wc-gray-900: #071437; --wc-brand-50: #E9F3FF; --wc-brand-100: #D1E6FF; --wc-brand-200: #A6CCFF; --wc-brand-400: #4DA0FF; --wc-brand-500: #1B84FF; --wc-brand-600: #056EE9; --wc-brand-700: #0057BD; --wc-brand-fg: #FFFFFF; --wc-success-50: #DFFFEA; --wc-success-500: #17C653; --wc-success-700: #04B440; --wc-warning-50: #FFF8DD; --wc-warning-500: #F6C000; --wc-warning-700: #B68A00; --wc-danger-50: #FFEEF3; --wc-danger-500: #F8285A; --wc-danger-700: #D81A48; --wc-info-50: #E9F3FF; --wc-info-500: #1B84FF; --wc-info-700: #056EE9; --wc-neutral-50: #F1F1F4; --wc-neutral-500: #78829D; --wc-neutral-700: #4B5675; --wc-bg-page: var(--wc-gray-50); --wc-bg-surface: var(--wc-gray-0); --wc-bg-sunken: var(--wc-gray-100); --wc-bg-hover: var(--wc-gray-100); --wc-bg-selected: var(--wc-brand-50); --wc-border: var(--wc-gray-200); --wc-border-strong: var(--wc-gray-300); --wc-text-strong: var(--wc-gray-900); --wc-text: var(--wc-gray-800); --wc-text-secondary: var(--wc-gray-600); --wc-text-muted: var(--wc-gray-500); --wc-text-disabled: var(--wc-gray-400); --wc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --wc-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --wc-fs-display: 22px; --wc-fs-h1: 18px; --wc-fs-h2: 16px; --wc-fs-body: 14px; --wc-fs-body-sm: 13px; --wc-fs-caption: 12px; --wc-fs-mono: 13px; --wc-lh-tight: 1.25; --wc-lh-snug: 1.4; --wc-lh-normal: 1.55; --wc-fw-regular: 400; --wc-fw-medium: 500; --wc-fw-semibold: 600; --wc-space-1: 4px; --wc-space-2: 8px; --wc-space-3: 12px; --wc-space-4: 16px; --wc-space-5: 20px; --wc-space-6: 24px; --wc-space-8: 32px; --wc-page-gutter: var(--wc-space-4); /* 16px móvil; sube en tablet/desktop */ --wc-radius-xs: 3px; --wc-radius-sm: 5px; --wc-radius-md: 7px; --wc-radius-lg: 10px; --wc-radius-pill: 999px; --wc-shadow-xs: 0 1px 0 rgba(7, 20, 55, 0.04); --wc-shadow-sm: 0 1px 2px rgba(7, 20, 55, 0.06), 0 1px 3px rgba(7, 20, 55, 0.04); --wc-shadow-md: 0 4px 8px rgba(7, 20, 55, 0.06), 0 2px 4px rgba(7, 20, 55, 0.04); --wc-shadow-focus: 0 0 0 3px rgba(27, 132, 255, 0.18); --wc-control-h: 36px; --wc-control-h-sm: 28px; --wc-table-cell-py: 12px; --wc-table-cell-px: 16px; --wc-ease: cubic-bezier(0.2, 0, 0, 1); --wc-dur-fast: 120ms; } /* ---------- Tokens (dark) — hooks into Metronic's existing toggle ------- */ [data-bs-theme="dark"] { --wc-gray-0: #0B1020; --wc-gray-50: #0F1530; --wc-gray-100: #182143; --wc-gray-150: #1F2A52; --wc-gray-200: #2A355F; --wc-gray-300: #38446F; --wc-gray-400: #5A6691; --wc-gray-500: #8590B4; --wc-gray-600: #A6AECB; --wc-gray-700: #C5CAE0; --wc-gray-800: #E4E7F2; --wc-gray-900: #F2F4FB; --wc-brand-50: #14254A; --wc-brand-100: #1B315F; --wc-brand-500: #4DA0FF; --wc-brand-600: #6FB4FF; --wc-brand-700: #9DCBFF; --wc-brand-fg: #07142A; --wc-success-50: #0E2E1F; --wc-success-500: #2BD66E; --wc-success-700: #6EEAA4; --wc-warning-50: #2E2410; --wc-warning-500: #FFD23F; --wc-warning-700: #FFE084; --wc-danger-50: #321524; --wc-danger-500: #FF5F84; --wc-danger-700: #FF8FAB; --wc-info-50: #14254A; --wc-info-500: #4DA0FF; --wc-info-700: #9DCBFF; --wc-neutral-50: #182143; --wc-neutral-500: #8590B4; --wc-neutral-700: #A6AECB; --wc-bg-page: #0B1020; --wc-bg-surface: #131A36; --wc-bg-sunken: #182143; --wc-bg-hover: #1F2A52; --wc-bg-selected: #1B315F; --wc-border: #2A355F; --wc-border-strong: #38446F; --wc-text-strong: #F2F4FB; --wc-text: #E4E7F2; --wc-text-secondary: #A6AECB; --wc-text-muted: #8590B4; --wc-text-disabled: #5A6691; --wc-shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.3); --wc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); --wc-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); --wc-shadow-focus: 0 0 0 3px rgba(77, 160, 255, 0.32); } /* ---------- Responsive page gutter (mobile-first) ----------------------- */ /* Breakpoints del DS: 640 móvil · 768 tablet · 1024 desktop */ @media (min-width: 768px) { :root { --wc-page-gutter: var(--wc-space-6); } } /* 24px */ @media (min-width: 1024px) { :root { --wc-page-gutter: var(--wc-space-8); } } /* 32px */ /* ========================================================================== Scoped components — only inside .wc-scope wrapper ========================================================================== */ .wc-scope { font-family: var(--wc-font-sans); font-size: var(--wc-fs-body); line-height: var(--wc-lh-normal); color: var(--wc-text); font-feature-settings: 'cv11', 'ss01', 'ss03'; } .wc-scope .wc-num, .wc-scope [data-num] { font-variant-numeric: tabular-nums; } .wc-scope .wc-mono { font-family: var(--wc-font-mono); font-variant-numeric: tabular-nums; } /* ---------- Card -------------------------------------------------------- */ .wc-scope .wc-card { background: var(--wc-bg-surface); border: 1px solid var(--wc-border); border-radius: var(--wc-radius-lg); box-shadow: var(--wc-shadow-xs); overflow: hidden; } /* Padding modifier for content cards — cards that hold text/forms directly (dashboard tiles, login/form cards, KB groups). Structural cards that wrap a header/body or a .wc-table-wrap stay flush and must NOT use this. */ .wc-scope .wc-card--pad, .wc-scope .wc-login-card, .wc-scope .wc-caso-card, .wc-scope .wc-desarrollo-card, .wc-scope .wc-invite-card, .wc-scope .wc-dash-card, .wc-scope .wc-dash-movs, .wc-scope .wc-kb-grupo, .wc-scope .wc-kb-articulo, .wc-scope .wc-caso-thread, .wc-scope .wc-caso-reply { padding: var(--wc-space-5); } .wc-scope .wc-card__header { padding: var(--wc-space-3) var(--wc-space-5); border-bottom: 1px solid var(--wc-border); display: flex; align-items: center; justify-content: space-between; gap: var(--wc-space-3); flex-wrap: wrap; } .wc-scope .wc-card__title { font-size: var(--wc-fs-h2); font-weight: var(--wc-fw-semibold); color: var(--wc-text-strong); margin: 0; } /* ---------- Toolbar (filter + search bar) ------------------------------- */ .wc-scope .wc-toolbar { display: flex; align-items: center; gap: var(--wc-space-2); padding: var(--wc-space-3) var(--wc-space-4); border-bottom: 1px solid var(--wc-border); background: var(--wc-bg-surface); flex-wrap: wrap; } .wc-scope .wc-toolbar__left, .wc-scope .wc-toolbar__right { display: flex; align-items: center; gap: var(--wc-space-2); flex-wrap: wrap; } .wc-scope .wc-toolbar__right { margin-left: auto; } /* ---------- Search input (with icon) ------------------------------------ */ .wc-scope .wc-search { position: relative; display: inline-block; min-width: 280px; flex: 1 1 280px; max-width: 420px; } .wc-scope .wc-search input { width: 100%; height: var(--wc-control-h); padding: 0 var(--wc-space-3) 0 36px; background: var(--wc-bg-surface); border: 1px solid var(--wc-border); border-radius: var(--wc-radius-md); font-family: inherit; font-size: var(--wc-fs-body); color: var(--wc-text); transition: border-color var(--wc-dur-fast) var(--wc-ease), box-shadow var(--wc-dur-fast) var(--wc-ease); } .wc-scope .wc-search input::placeholder { color: var(--wc-text-muted); } .wc-scope .wc-search input:hover { border-color: var(--wc-border-strong); } .wc-scope .wc-search input:focus { outline: none; border-color: var(--wc-brand-500); box-shadow: var(--wc-shadow-focus); } .wc-scope .wc-search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--wc-text-muted); pointer-events: none; width: 16px; height: 16px; } /* ---------- Buttons ----------------------------------------------------- */ .wc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--wc-space-2); height: var(--wc-control-h); padding: 0 var(--wc-space-4); border-radius: var(--wc-radius-md); border: 1px solid transparent; background: transparent; font-family: inherit; font-size: var(--wc-fs-body-sm); font-weight: var(--wc-fw-medium); line-height: 1; white-space: nowrap; cursor: pointer; transition: background var(--wc-dur-fast) var(--wc-ease), border-color var(--wc-dur-fast) var(--wc-ease), color var(--wc-dur-fast) var(--wc-ease), box-shadow var(--wc-dur-fast) var(--wc-ease); text-decoration: none; user-select: none; } .wc-btn:focus-visible { outline: none; box-shadow: var(--wc-shadow-focus); } .wc-btn:disabled { opacity: 0.5; cursor: not-allowed; } .wc-btn--sm { height: var(--wc-control-h-sm); padding: 0 var(--wc-space-3); font-size: var(--wc-fs-caption); } .wc-btn--primary { background: var(--wc-brand-500); color: var(--wc-brand-fg); border-color: var(--wc-brand-500); box-shadow: var(--wc-shadow-xs); } .wc-btn--primary:hover:not(:disabled) { background: var(--wc-brand-600); border-color: var(--wc-brand-600); color: var(--wc-brand-fg); } .wc-btn--primary:active:not(:disabled) { background: var(--wc-brand-700); border-color: var(--wc-brand-700); } .wc-btn--secondary { background: var(--wc-bg-surface); color: var(--wc-text); border-color: var(--wc-border); box-shadow: var(--wc-shadow-xs); } .wc-btn--secondary:hover:not(:disabled) { background: var(--wc-bg-hover); border-color: var(--wc-border-strong); color: var(--wc-text); } .wc-btn--ghost { background: transparent; color: var(--wc-text-secondary); } .wc-btn--ghost:hover:not(:disabled) { background: var(--wc-bg-hover); color: var(--wc-text); } .wc-btn--success { background: var(--wc-success-500); color: #fff; border-color: var(--wc-success-500); } .wc-btn--success:hover:not(:disabled) { background: var(--wc-success-700); border-color: var(--wc-success-700); } .wc-btn--info { background: var(--wc-info-500); color: #fff; border-color: var(--wc-info-500); } .wc-btn--info:hover:not(:disabled) { background: var(--wc-info-700); border-color: var(--wc-info-700); } /* ---------- Filter chip / select inline -------------------------------- */ .wc-scope .wc-filter { display: inline-flex; align-items: center; gap: 6px; height: var(--wc-control-h); padding: 0 12px; background: var(--wc-bg-surface); border: 1px solid var(--wc-border); border-radius: var(--wc-radius-md); font-size: var(--wc-fs-body-sm); color: var(--wc-text); } .wc-scope .wc-filter label { font-size: var(--wc-fs-caption); color: var(--wc-text-muted); font-weight: var(--wc-fw-medium); margin: 0; } .wc-scope .wc-filter select, .wc-scope .wc-filter input { border: 0; background: transparent; color: var(--wc-text); font-family: inherit; font-size: var(--wc-fs-body-sm); padding: 0; outline: none; appearance: none; } /* ---------- Advanced search panel (expands inline) --------------------- */ .wc-scope .wc-advanced { border-bottom: 1px solid var(--wc-border); background: var(--wc-bg-sunken); padding: var(--wc-space-4) var(--wc-space-5); display: none; } .wc-scope .wc-advanced.is-open { display: block; } .wc-scope .wc-advanced .form-group.row { align-items: center; margin-bottom: var(--wc-space-2); } .wc-scope .wc-advanced .form-control, .wc-scope .wc-advanced select.form-control, .wc-scope .wc-advanced input.form-control { height: var(--wc-control-h-sm); border: 1px solid var(--wc-border); border-radius: var(--wc-radius-sm); background: var(--wc-bg-surface); color: var(--wc-text); font-size: var(--wc-fs-body-sm); padding: 4px 8px; box-shadow: none; } .wc-scope .wc-advanced .form-control:focus { border-color: var(--wc-brand-500); box-shadow: var(--wc-shadow-focus); } .wc-scope .wc-advanced .col-form-label { color: var(--wc-text-secondary); font-size: var(--wc-fs-body-sm); font-weight: var(--wc-fw-medium); padding-top: 0; padding-bottom: 0; } .wc-scope .wc-advanced__actions { display: flex; gap: var(--wc-space-2); justify-content: flex-end; margin-top: var(--wc-space-3); } /* ---------- Table ------------------------------------------------------- */ .wc-scope .wc-table-wrap { background: var(--wc-bg-surface); overflow-x: auto; } .wc-scope table.wc-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--wc-fs-body-sm); margin: 0; } .wc-scope .wc-table thead th { background: var(--wc-bg-sunken); text-align: left; font-size: var(--wc-fs-caption); font-weight: var(--wc-fw-medium); color: var(--wc-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; padding: 10px var(--wc-table-cell-px); border-bottom: 1px solid var(--wc-border); border-top: 0; white-space: nowrap; vertical-align: middle; } .wc-scope .wc-table tbody td { padding: var(--wc-table-cell-py) var(--wc-table-cell-px); border-bottom: 1px solid var(--wc-border); border-top: 0; color: var(--wc-text); vertical-align: middle; background: var(--wc-bg-surface); } .wc-scope .wc-table tbody tr:last-child td { border-bottom: 0; } .wc-scope .wc-table tbody tr:hover td { background: var(--wc-bg-hover); } .wc-scope .wc-table tbody tr.wc-selected td, .wc-scope .wc-table tbody tr.selected td { background: var(--wc-bg-selected); } .wc-scope .wc-table .wc-num-cell { text-align: right; font-variant-numeric: tabular-nums; } .wc-scope .wc-table .wc-mono-cell { font-family: var(--wc-font-mono); font-size: var(--wc-fs-mono); } /* DataTables compatibility — let DT (1.x .sorting / 2.x .dt-orderable-*) render its default sort indicator. We just keep the cursor + position so the cell still feels clickable inside the WC styling. */ .wc-scope table.wc-table.dataTable thead .sorting, .wc-scope table.wc-table.dataTable thead .sorting_asc, .wc-scope table.wc-table.dataTable thead .sorting_desc, .wc-scope .wc-table thead th.dt-orderable-asc, .wc-scope .wc-table thead th.dt-orderable-desc { cursor: pointer; position: relative; } /* DataTables built-in length / search / pagination panel Selectors cover both DataTables 1.x (.dataTables_*) and 2.x (.dt-*) class names since the project uses DT 2.x but rules need to be defensive. */ .wc-scope .dataTables_wrapper, .wc-scope .dt-container { padding: 0; } .wc-scope .dataTables_wrapper .dataTables_length, .wc-scope .dataTables_wrapper .dataTables_filter, .wc-scope .dataTables_wrapper .dataTables_info, .wc-scope .dataTables_wrapper .dataTables_paginate, .wc-scope .dt-container .dt-length, .wc-scope .dt-container .dt-search, .wc-scope .dt-container .dt-info, .wc-scope .dt-container .dt-paging { font-size: var(--wc-fs-body-sm); color: var(--wc-text-secondary); padding: 10px var(--wc-space-4); } /* hide built-in search — we render our own global search in the toolbar */ .wc-scope .dataTables_wrapper .dataTables_filter, .wc-scope .dt-container .dt-search { display: none; } .wc-scope .dataTables_wrapper .dataTables_length select, .wc-scope .dataTables_wrapper .dataTables_filter input, .wc-scope .dt-container .dt-length select, .wc-scope .dt-container .dt-search input { height: var(--wc-control-h-sm); padding: 0 8px; border: 1px solid var(--wc-border); border-radius: var(--wc-radius-sm); background: var(--wc-bg-surface); color: var(--wc-text); font-size: var(--wc-fs-body-sm); } /* Pagination — DataTables 2.x with Bootstrap 5 nests an inside each
  • . Both elements were getting their own background/border, producing a visible "double box" on hover and active. Neutralise the
  • chrome and put all WC styling on the inner so there's a single visual button. */ .wc-scope .dataTables_wrapper .dataTables_paginate ul.pagination, .wc-scope .dt-container .dt-paging ul.pagination { display: inline-flex; margin: 0; padding: 0; gap: 2px; list-style: none; } .wc-scope .dataTables_wrapper .dataTables_paginate .paginate_button, .wc-scope .dt-container .dt-paging .dt-paging-button, .wc-scope .dt-container .dt-paging li.page-item { list-style: none; background: transparent !important; border: 0 !important; margin: 0 !important; padding: 0 !important; } .wc-scope .dataTables_wrapper .dataTables_paginate .paginate_button > a, .wc-scope .dt-container .dt-paging .dt-paging-button > a, .wc-scope .dt-container .dt-paging li.page-item > a.page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid transparent !important; border-radius: var(--wc-radius-sm) !important; background: transparent !important; color: var(--wc-text-secondary) !important; font-size: var(--wc-fs-body-sm); cursor: pointer; text-decoration: none; box-shadow: none !important; transition: background var(--wc-dur-fast) var(--wc-ease), color var(--wc-dur-fast) var(--wc-ease), border-color var(--wc-dur-fast) var(--wc-ease); } .wc-scope .dataTables_wrapper .dataTables_paginate .paginate_button > a:hover, .wc-scope .dt-container .dt-paging .dt-paging-button > a:hover, .wc-scope .dt-container .dt-paging li.page-item > a.page-link:hover { background: var(--wc-bg-hover) !important; color: var(--wc-text) !important; border-color: var(--wc-border) !important; } .wc-scope .dataTables_wrapper .dataTables_paginate .paginate_button.current > a, .wc-scope .dataTables_wrapper .dataTables_paginate .paginate_button.current > a:hover, .wc-scope .dt-container .dt-paging .dt-paging-button.current > a, .wc-scope .dt-container .dt-paging .dt-paging-button.active > a, .wc-scope .dt-container .dt-paging li.page-item.active > a.page-link, .wc-scope .dt-container .dt-paging li.page-item.active > a.page-link:hover { background: var(--wc-brand-500) !important; color: var(--wc-brand-fg) !important; border-color: var(--wc-brand-500) !important; } .wc-scope .dataTables_wrapper .dataTables_paginate .paginate_button.disabled > a, .wc-scope .dataTables_wrapper .dataTables_paginate .paginate_button.disabled > a:hover, .wc-scope .dt-container .dt-paging .dt-paging-button.disabled > a, .wc-scope .dt-container .dt-paging .dt-paging-button.disabled > a:hover, .wc-scope .dt-container .dt-paging li.page-item.disabled > a.page-link, .wc-scope .dt-container .dt-paging li.page-item.disabled > a.page-link:hover { color: var(--wc-text-disabled) !important; background: transparent !important; border-color: transparent !important; cursor: not-allowed; } .wc-scope .dataTables_wrapper .row, .wc-scope .dt-container .row, .wc-scope .dt-container .dt-layout-row { margin: 0; border-top: 1px solid var(--wc-border); } .wc-scope .dataTables_wrapper .row:first-child, .wc-scope .dt-container .row:first-child, .wc-scope .dt-container .dt-layout-row:first-child { border-top: 0; } /* ---------- Badges (status pills) -------------------------------------- */ .wc-scope .wc-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; height: 22px; border-radius: var(--wc-radius-pill); font-size: var(--wc-fs-caption); font-weight: var(--wc-fw-medium); white-space: nowrap; line-height: 1; } .wc-scope .wc-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; flex-shrink: 0; } .wc-scope .wc-badge--success { background: var(--wc-success-50) !important; color: var(--wc-success-700) !important; } .wc-scope .wc-badge--warning { background: var(--wc-warning-50) !important; color: var(--wc-warning-700) !important; } .wc-scope .wc-badge--danger { background: var(--wc-danger-50) !important; color: var(--wc-danger-700) !important; } .wc-scope .wc-badge--info { background: var(--wc-info-50) !important; color: var(--wc-info-700) !important; } .wc-scope .wc-badge--neutral { background: var(--wc-neutral-50) !important; color: var(--wc-neutral-700) !important; } /* ---------- Modal compat (Bootstrap modals retain look but get tokens) -- */ .wc-scope .modal-content { border-radius: var(--wc-radius-lg); border-color: var(--wc-border); background: var(--wc-bg-surface); color: var(--wc-text); } .wc-scope .modal-header, .wc-scope .modal-footer { border-color: var(--wc-border); } /* Table sizing strategy: - height auto + max-height none + overflow visible → the scrollBody grows with its content. With pageLength 5/10, the table is short and the card hugs it; with 40 rows it grows past the viewport and the BROWSER scrolls the PAGE (no internal table scroll). - overflow MUST be visible on BOTH axes — per CSS spec, when one axis is non-visible the other "visible" is computed to "auto", which would re-enable internal scroll. - dataTables_scroll / dt-container also need overflow visible so the body's natural overflow can bubble up to the page. - No min-height: empty / sparse tables stay compact. */ .wc-scope .dataTables_scrollBody, .wc-scope .dt-scroll-body { height: auto !important; max-height: none !important; overflow: visible !important; } .wc-scope .dataTables_scroll, .wc-scope .dataTables_wrapper, .wc-scope .dt-scroll, .wc-scope .dt-container { overflow: visible !important; } .wc-scope#wc_soporte_root .wc-table-wrap { overflow: visible; } /* ========================================================================== Status tabs (filter by estado, with counts) ========================================================================== */ .wc-scope .wc-tabs { display: inline-flex; background: var(--wc-bg-sunken); border-radius: var(--wc-radius-md); padding: 3px; gap: 2px; flex-wrap: wrap; } .wc-scope .wc-tabs__btn { height: 28px; padding: 0 12px; background: transparent; border: 0; font-family: inherit; font-size: var(--wc-fs-body-sm); font-weight: var(--wc-fw-medium); color: var(--wc-text-secondary); border-radius: var(--wc-radius-sm); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background var(--wc-dur-fast) var(--wc-ease), color var(--wc-dur-fast) var(--wc-ease); } .wc-scope .wc-tabs__btn:hover { color: var(--wc-text); } .wc-scope .wc-tabs__btn[aria-selected="true"] { background: var(--wc-bg-surface); color: var(--wc-text-strong); box-shadow: var(--wc-shadow-xs); } .wc-scope .wc-tabs__count { background: var(--wc-gray-200); color: var(--wc-text-secondary); font-size: 11px; padding: 1px 6px; border-radius: var(--wc-radius-pill); font-variant-numeric: tabular-nums; min-width: 20px; text-align: center; } .wc-scope .wc-tabs__btn[aria-selected="true"] .wc-tabs__count { background: var(--wc-brand-50); color: var(--wc-brand-700); } /* ========================================================================== Dropdown menu (columns toggle, etc.) ========================================================================== */ .wc-scope .wc-dropdown { position: relative; display: inline-block; } .wc-scope .wc-dropdown__menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; max-height: 360px; overflow-y: auto; background: var(--wc-bg-surface); border: 1px solid var(--wc-border); border-radius: var(--wc-radius-md); box-shadow: var(--wc-shadow-md); padding: 6px; z-index: 50; display: none; } .wc-scope .wc-dropdown.is-open .wc-dropdown__menu { display: block; } .wc-scope .wc-dropdown__title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wc-text-muted); padding: 8px 10px 6px; font-weight: var(--wc-fw-medium); } .wc-scope .wc-dropdown__item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--wc-radius-sm); cursor: pointer; font-size: var(--wc-fs-body-sm); color: var(--wc-text); user-select: none; } .wc-scope .wc-dropdown__item:hover { background: var(--wc-bg-hover); } .wc-scope .wc-dropdown__item input[type="checkbox"] { appearance: none; width: 14px; height: 14px; border: 1px solid var(--wc-border-strong); border-radius: 3px; background: var(--wc-bg-surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin: 0; } .wc-scope .wc-dropdown__item input[type="checkbox"]:checked { background: var(--wc-brand-500); border-color: var(--wc-brand-500); } .wc-scope .wc-dropdown__item input[type="checkbox"]:checked::after { content: ''; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); } .wc-scope .wc-dropdown__divider { height: 1px; background: var(--wc-border); margin: 6px 0; } /* ========================================================================== Bulk action bar (appears on selection) ========================================================================== */ .wc-scope .wc-bulk-bar { display: none; align-items: center; justify-content: space-between; gap: var(--wc-space-3); padding: 10px var(--wc-space-4); background: var(--wc-brand-50); border-bottom: 1px solid var(--wc-border); color: var(--wc-brand-700); font-size: var(--wc-fs-body-sm); } .wc-scope .wc-bulk-bar.is-visible { display: flex; } .wc-scope .wc-bulk-bar__count { font-weight: var(--wc-fw-semibold); } .wc-scope .wc-bulk-bar__actions { display: flex; gap: var(--wc-space-2); } /* ========================================================================== Footer + pager ========================================================================== */ .wc-scope .wc-table-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--wc-space-3); padding: var(--wc-space-3) var(--wc-space-4); border-top: 1px solid var(--wc-border); background: var(--wc-bg-surface); font-size: var(--wc-fs-body-sm); color: var(--wc-text-secondary); flex-wrap: wrap; } .wc-scope .wc-table-footer .wc-strong { color: var(--wc-text-strong); font-weight: var(--wc-fw-medium); font-variant-numeric: tabular-nums; } .wc-scope .wc-pager { display: inline-flex; gap: 4px; align-items: center; } .wc-scope .wc-pager .wc-btn { height: 30px; min-width: 30px; padding: 0 8px; font-size: var(--wc-fs-body-sm); } .wc-scope .wc-pager .wc-btn[aria-current="page"] { background: var(--wc-bg-sunken); color: var(--wc-text-strong); border-color: var(--wc-border); } /* ========================================================================== Drawer (slide-in panel) + tile grid for record fields ========================================================================== */ .wc-scope .wc-drawer-scrim { position: fixed; inset: 0; background: rgba(7, 20, 55, 0.32); backdrop-filter: blur(1px); z-index: 1040; display: none; } .wc-scope .wc-drawer-scrim.is-open { display: block; } .wc-scope .wc-drawer { position: fixed; top: 0; bottom: 0; right: 0; width: 540px; max-width: 100vw; background: var(--wc-bg-surface); border-left: 1px solid var(--wc-border); box-shadow: -16px 0 40px -12px rgba(7, 20, 55, 0.18); z-index: 1050; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 220ms var(--wc-ease); } .wc-scope .wc-drawer.is-open { transform: translateX(0); } .wc-scope .wc-drawer__header { padding: 18px 22px 14px; border-bottom: 1px solid var(--wc-border); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--wc-space-3); } .wc-scope .wc-drawer__title { font-size: var(--wc-fs-h1); font-weight: var(--wc-fw-semibold); color: var(--wc-text-strong); margin: 0; } .wc-scope .wc-drawer__sub { font-size: var(--wc-fs-caption); color: var(--wc-text-muted); margin-top: 4px; display: flex; align-items: center; gap: var(--wc-space-2); flex-wrap: wrap; } .wc-scope .wc-drawer__close { width: 30px; height: 30px; border-radius: var(--wc-radius-sm); border: 1px solid var(--wc-border); background: var(--wc-bg-surface); color: var(--wc-text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .wc-scope .wc-drawer__close:hover { background: var(--wc-bg-hover); color: var(--wc-text); } .wc-scope .wc-drawer__body { padding: 20px 22px; overflow-y: auto; flex: 1; } .wc-scope .wc-drawer__footer { padding: 12px 22px; border-top: 1px solid var(--wc-border); background: var(--wc-bg-page); display: flex; justify-content: flex-end; gap: var(--wc-space-2); } /* Tile grid for record fields (Analytics-style) */ .wc-scope .wc-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--wc-space-3); } .wc-scope .wc-tile { background: var(--wc-bg-page); border: 1px solid var(--wc-border); border-radius: var(--wc-radius-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .wc-scope .wc-tile--full { grid-column: 1 / -1; } .wc-scope .wc-tile__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wc-text-muted); font-weight: var(--wc-fw-medium); } .wc-scope .wc-tile__value { font-size: var(--wc-fs-body); color: var(--wc-text-strong); font-weight: var(--wc-fw-medium); word-break: break-word; line-height: 1.45; } .wc-scope .wc-tile__value--mono { font-family: var(--wc-font-mono); font-size: var(--wc-fs-mono); font-variant-numeric: tabular-nums; } .wc-scope .wc-tile__value--muted { color: var(--wc-text-muted); font-weight: var(--wc-fw-regular); } .wc-scope .wc-tile__value--long { white-space: pre-wrap; font-size: var(--wc-fs-body-sm); font-weight: var(--wc-fw-regular); color: var(--wc-text); line-height: var(--wc-lh-normal); } .wc-scope .wc-drawer__section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wc-text-muted); font-weight: var(--wc-fw-medium); margin: 0 0 10px; } .wc-scope .wc-drawer__section + .wc-drawer__section { margin-top: 22px; } .wc-scope .wc-drawer__loading { padding: 48px 0; text-align: center; color: var(--wc-text-muted); font-size: var(--wc-fs-body-sm); } /* Status badge mapping for soporte estado values Matches the design system "STATUS BADGES · TRIP LIFECYCLE": En curso = info · Asignado = neutral · Pendiente = warning · Completado = success · Cancelado = danger */ .wc-scope .wc-badge--estado-asignacion { background: var(--wc-warning-50) !important; color: var(--wc-warning-700) !important; } .wc-scope .wc-badge--estado-asignado { background: var(--wc-neutral-50) !important; color: var(--wc-neutral-700) !important; } .wc-scope .wc-badge--estado-curso { background: var(--wc-info-50) !important; color: var(--wc-info-700) !important; } .wc-scope .wc-badge--estado-finalizado { background: var(--wc-success-50) !important; color: var(--wc-success-700) !important; } .wc-scope .wc-badge--estado-cancelado { background: var(--wc-danger-50) !important; color: var(--wc-danger-700) !important; } /* Style the estado wrapping in the table itself (cell can be plain text from server-side DataTable; the JS hooks paint it as a badge after each draw) */ .wc-scope .wc-table td .wc-badge { vertical-align: middle; } /* Row clickable affordance */ .wc-scope .wc-table tbody tr { cursor: pointer; } .wc-scope .wc-table tbody tr td:first-child, .wc-scope .wc-table thead th:first-child { width: 40px; text-align: center; cursor: default; } /* ========================================================================== Date filter dropdown (presets + custom range) ========================================================================== */ .wc-scope .wc-date-menu { min-width: 260px; padding: 6px; } .wc-scope .wc-date-menu .wc-dropdown__title { padding: 8px 10px 6px; } .wc-scope .wc-preset { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: var(--wc-radius-sm); cursor: pointer; font-size: var(--wc-fs-body-sm); color: var(--wc-text); user-select: none; } .wc-scope .wc-preset:hover { background: var(--wc-bg-hover); } .wc-scope .wc-preset.is-active { background: var(--wc-bg-selected); color: var(--wc-brand-700); font-weight: var(--wc-fw-medium); } .wc-scope .wc-preset__check { width: 14px; height: 14px; color: var(--wc-brand-500); display: none; flex-shrink: 0; } .wc-scope .wc-preset.is-active .wc-preset__check { display: inline-block; } .wc-scope .wc-date-range { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 10px 4px; } .wc-scope .wc-date-range__field { display: flex; flex-direction: column; gap: 4px; } .wc-scope .wc-date-range__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wc-text-muted); font-weight: var(--wc-fw-medium); } .wc-scope .wc-date-range input[type="date"] { height: var(--wc-control-h-sm); padding: 0 8px; border: 1px solid var(--wc-border); border-radius: var(--wc-radius-sm); background: var(--wc-bg-surface); color: var(--wc-text); font-family: inherit; font-size: var(--wc-fs-body-sm); font-variant-numeric: tabular-nums; color-scheme: light; } [data-bs-theme="dark"] .wc-scope .wc-date-range input[type="date"] { color-scheme: dark; } .wc-scope .wc-date-range input[type="date"]:focus { outline: none; border-color: var(--wc-brand-500); box-shadow: var(--wc-shadow-focus); } .wc-scope .wc-date-actions { display: flex; justify-content: flex-end; gap: 6px; padding: 4px 10px 6px; } /* ========================================================================== Unified page shell — page-head pattern from template Section 07. Use as the OUTER wrapper for any soporte view (Lista, Kanban, Analytics, New record). Sets the bg-page background, padding, and gives every view the same vertical rhythm. ========================================================================== */ .wc-scope.wc-page { background: var(--wc-bg-page); padding: var(--wc-space-6) var(--wc-page-gutter) var(--wc-space-8); min-height: calc(100vh - 110px); display: flex; flex-direction: column; } .wc-scope .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .wc-scope .page-head__crumb { font-size: var(--wc-fs-caption); color: var(--wc-text-secondary); margin-bottom: 6px; } .wc-scope .page-head__crumb a { color: var(--wc-text-secondary); text-decoration: none; } .wc-scope .page-head__crumb a:hover { color: var(--wc-text); } .wc-scope .page-head__crumb .sep { color: var(--wc-text-disabled); margin: 0 6px; } .wc-scope .page-head__crumb strong { color: var(--wc-text-strong); font-weight: var(--wc-fw-medium); } .wc-scope .page-head__title { font-size: 22px; font-weight: var(--wc-fw-semibold); color: var(--wc-gray-900); letter-spacing: -0.01em; margin: 0; line-height: 1.2; } .wc-scope .page-head__sub { font-size: var(--wc-fs-body-sm); color: var(--wc-text-secondary); margin: 4px 0 0; } .wc-scope .page-head__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .wc-scope .component-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .wc-scope .component-row + .component-row { margin-top: 16px; } /* The wc-card inside a wc-page should fill remaining vertical space */ .wc-scope.wc-page > .wc-card { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } /* ========================================================================== Form components (driver-registration pattern) ========================================================================== */ .wc-scope .wc-form { display: flex; flex-direction: column; } .wc-scope .wc-form-section { display: grid; grid-template-columns: 280px 1fr; gap: 48px; padding: 28px 0; border-top: 1px solid var(--wc-border); } .wc-scope .wc-form-section:first-child { border-top: 0; padding-top: 0; } .wc-scope .wc-form-section__head h3 { font-size: var(--wc-fs-h2); font-weight: var(--wc-fw-semibold); color: var(--wc-text-strong); margin: 0 0 4px; } .wc-scope .wc-form-section__head p { font-size: var(--wc-fs-body-sm); color: var(--wc-text-secondary); margin: 0; } .wc-scope .wc-form-section__head .wc-caption { display: block; margin-top: 8px; } .wc-scope .wc-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .wc-scope .wc-form-grid--3 { grid-template-columns: repeat(3, 1fr); } .wc-scope .wc-field { display: flex; flex-direction: column; gap: 6px; } .wc-scope .wc-field--full { grid-column: 1 / -1; } .wc-scope .wc-field__label { font-size: var(--wc-fs-body-sm); font-weight: var(--wc-fw-medium); color: var(--wc-text); } .wc-scope .wc-field__hint { font-size: var(--wc-fs-caption); color: var(--wc-text-muted); } .wc-scope .wc-field__error { font-size: var(--wc-fs-caption); color: var(--wc-danger-700); display: flex; align-items: center; gap: 4px; } .wc-scope .wc-field__req { color: var(--wc-danger-500); margin-left: 2px; } .wc-scope .wc-input, .wc-scope .wc-select, .wc-scope .wc-textarea { width: 100%; height: var(--wc-control-h); padding: 0 var(--wc-space-3); background: var(--wc-bg-surface); border: 1px solid var(--wc-border); border-radius: var(--wc-radius-md); font-family: inherit; font-size: var(--wc-fs-body); color: var(--wc-text); transition: border-color var(--wc-dur-fast) var(--wc-ease), box-shadow var(--wc-dur-fast) var(--wc-ease); } .wc-scope .wc-input::placeholder, .wc-scope .wc-textarea::placeholder { color: var(--wc-text-muted); } .wc-scope .wc-input:hover, .wc-scope .wc-select:hover, .wc-scope .wc-textarea:hover { border-color: var(--wc-border-strong); } .wc-scope .wc-input:focus, .wc-scope .wc-select:focus, .wc-scope .wc-textarea:focus { outline: none; border-color: var(--wc-brand-500); box-shadow: var(--wc-shadow-focus); } .wc-scope .wc-textarea { height: auto; min-height: 80px; padding: 10px var(--wc-space-3); resize: vertical; line-height: var(--wc-lh-normal); } .wc-scope .wc-select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2378829D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } .wc-scope .wc-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 0 0; border-top: 1px solid var(--wc-border); margin-top: 8px; } /* ========================================================================== Bootstrap form adapter — re-skin the auto-generated CRUD form ({detail}) so it inherits the WC look without changing the server-side generator. ========================================================================== */ .wc-scope .form-group.row { margin-left: 0; margin-right: 0; margin-bottom: 16px; align-items: center; } .wc-scope label.col-form-label { font-size: var(--wc-fs-body-sm); font-weight: var(--wc-fw-medium); color: var(--wc-text); } .wc-scope .form-control, .wc-scope select.form-control, .wc-scope input.form-control, .wc-scope textarea.form-control { height: var(--wc-control-h); padding: 0 var(--wc-space-3); background: var(--wc-bg-surface); border: 1px solid var(--wc-border); border-radius: var(--wc-radius-md); font-family: inherit; font-size: var(--wc-fs-body); color: var(--wc-text); box-shadow: none; transition: border-color var(--wc-dur-fast) var(--wc-ease), box-shadow var(--wc-dur-fast) var(--wc-ease); } .wc-scope textarea.form-control { height: auto; min-height: 80px; padding: 10px var(--wc-space-3); resize: vertical; line-height: var(--wc-lh-normal); } .wc-scope .form-control:focus { border-color: var(--wc-brand-500); box-shadow: var(--wc-shadow-focus); outline: none; } .wc-scope .form-control:hover:not(:focus) { border-color: var(--wc-border-strong); } /* ========================================================================== Quick filter row — visible dropdowns for known-value fields, sits below the main toolbar in the list view. Wired by list-wc.js to the searchForm hidden inputs that DataTable already serializes on each draw. ========================================================================== */ .wc-scope .wc-filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 12px; padding: 12px var(--wc-space-4); border-bottom: 1px solid var(--wc-border); background: var(--wc-bg-surface); } .wc-scope .wc-filter-row__cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .wc-scope .wc-filter-row__cell--actions { justify-content: flex-end; } .wc-scope .wc-filter-row__cell--actions .wc-btn { align-self: flex-start; } .wc-scope .wc-filter-row__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wc-text-muted); font-weight: var(--wc-fw-medium); } .wc-scope .wc-filter-row .wc-select { height: var(--wc-control-h-sm); font-size: var(--wc-fs-body-sm); padding-right: 28px; } /* ========================================================================== Detail view — re-skin the auto-generated detail table ({detail} is a stream of labelvalue...) into a clean definition-list look. Each label cell has a wrapping it; value cells are bare. Inline width="10%/15%/etc" attributes get overridden so cells adapt to their content. ========================================================================== */ .wc-scope .wc-detail-table { width: 100%; border-collapse: collapse; table-layout: auto; } .wc-scope .wc-detail-table td { padding: 12px 16px 12px 0; vertical-align: top; font-size: var(--wc-fs-body-sm); line-height: var(--wc-lh-snug); color: var(--wc-text); border-bottom: 1px solid var(--wc-border); width: auto !important; } .wc-scope .wc-detail-table tr:last-child td { border-bottom: 0; } .wc-scope .wc-detail-table td b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wc-text-muted); font-weight: var(--wc-fw-medium); font-style: normal; white-space: nowrap; margin-bottom: 4px; } /* Modern browsers: value cells (no ) get the strong text color */ .wc-scope .wc-detail-table td:not(:has(b)) { color: var(--wc-text-strong); font-weight: var(--wc-fw-medium); } /* ========================================================================== Related modules adapter — {relatedModules} renders Bootstrap cards (.card.card-custom) with their own DataTables. Re-skin them to look like wc-cards inline so they sit naturally under the detail block. ========================================================================== */ .wc-scope .wc-related-modules .card.card-custom { background: var(--wc-bg-surface); border: 1px solid var(--wc-border); border-radius: var(--wc-radius-lg); box-shadow: var(--wc-shadow-xs); margin: 0; overflow: hidden; } .wc-scope .wc-related-modules .card.card-custom > .card-header { padding: 14px 20px; border-bottom: 1px solid var(--wc-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .wc-scope .wc-related-modules .card.card-custom .card-label, .wc-scope .wc-related-modules .card.card-custom .card-title h3 { font-size: var(--wc-fs-h2); font-weight: var(--wc-fw-semibold); color: var(--wc-text-strong); margin: 0; } .wc-scope .wc-related-modules .card.card-custom > .card-body { padding: 8px 20px 16px; } /* Re-skin legacy btn-primary buttons inside related toolbars to wc-btn look */ .wc-scope .wc-related-modules .card-toolbar .btn-primary { height: var(--wc-control-h-sm); padding: 0 12px; border-radius: var(--wc-radius-md); background: var(--wc-brand-500); border: 1px solid var(--wc-brand-500); color: var(--wc-brand-fg); font-size: var(--wc-fs-body-sm); font-weight: var(--wc-fw-medium); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; box-shadow: var(--wc-shadow-xs); } .wc-scope .wc-related-modules .card-toolbar .btn-primary:hover { background: var(--wc-brand-600); border-color: var(--wc-brand-600); } /* ========================================================================== Related modules — collapsible by default. Header is clickable; body collapses when the related list is empty (or the user toggles it). A count badge in the title shows how many items each related module has; dashed border when 0, filled sunken pill when >0. ========================================================================== */ .wc-scope .wc-related-modules .card.card-custom > .card-header { cursor: pointer; user-select: none; } .wc-scope .wc-related-modules .card.card-custom > .card-header:hover { background: var(--wc-bg-hover); } .wc-scope .wc-related-modules .card.card-custom > .card-body { display: none; } .wc-scope .wc-related-modules .card.card-custom.is-expanded > .card-body { display: block; } .wc-scope .wc-related-modules .card.card-custom:not(.is-expanded) { box-shadow: none; } .wc-scope .wc-related-modules .wc-related__count { display: none; margin-left: 10px; padding: 2px 10px; border-radius: var(--wc-radius-pill); background: var(--wc-bg-sunken); color: var(--wc-text-secondary); font-size: 11px; font-weight: var(--wc-fw-medium); font-variant-numeric: tabular-nums; vertical-align: middle; line-height: 1.4; } .wc-scope .wc-related-modules .wc-related__count.is-loaded { display: inline-block; } .wc-scope .wc-related-modules .wc-related__count.is-empty { background: transparent; border: 1px dashed var(--wc-border-strong); color: var(--wc-text-muted); } .wc-scope .wc-related-modules .wc-related__chevron { display: inline-block; margin-left: 8px; width: 0; height: 0; vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--wc-text-muted); transition: opacity 150ms ease; } .wc-scope .wc-related-modules .card.card-custom:not(.is-expanded) .wc-related__chevron { border-top: 0; border-bottom: 0; border-left: 5px solid var(--wc-text-muted); border-right: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; } /* ========================================================================== Responsive — anti-desborde base + forms en 1 columna (mobile-first) ========================================================================== */ .wc-scope img, .wc-scope table, .wc-scope pre, .wc-scope video { max-width: 100%; height: auto; } .wc-scope pre { overflow-x: auto; } @media (max-width: 767px) { .wc-scope .wc-form-section { grid-template-columns: 1fr; gap: var(--wc-space-4); padding: var(--wc-space-5) 0; } .wc-scope .wc-form-grid, .wc-scope .wc-form-grid--3 { grid-template-columns: 1fr; } .wc-scope .wc-form-actions { flex-direction: column-reverse; align-items: stretch; gap: var(--wc-space-2); } .wc-scope .wc-form-actions .wc-btn { width: 100%; } }