/* ========================================================================= MultiCompra — Estilos base Soporta light/dark via [data-theme="dark"] en (Decisión 24). Sistema semántico de colores de decisión en planilla (Decisión 23): - Fondo → estado de la decisión (no / central / comprar / pendiente) - Borde lat. → marca de edición manual (ámbar) PLACEHOLDER: paleta de marca provisoria, se refina en sesión aparte. ========================================================================= */ /* ========================================================================= :root — tokens LIGHT (default) ========================================================================= */ :root { /* ---------- Superficies ---------- */ --bg: #f8fafc; /* fondo general de la app */ --bg-elev: #ffffff; /* cards, header, sidebar, tabla */ --bg-elev-2: #f1f5f9; /* zonas secundarias: filter-bar, thead */ --bg-elev-3: #eef2f6; /* encabezado agrupador de planilla */ --border: #e2e8f0; --border-strong: #cbd5e1; /* ---------- Texto ---------- */ --text: #1e293b; /* cuerpo */ --text-strong: #0f172a; /* títulos, números */ --text-muted: #64748b; --text-subtle: #94a3b8; /* ---------- Marca / primario (PLACEHOLDERS) ---------- */ --primary: #0f766e; --primary-hover: #115e59; --primary-soft: #ccfbf1; --primary-on: #ffffff; /* texto sobre fondo primary */ --accent: #2563eb; --accent-soft: #dbeafe; /* ---------- Semánticas de decisión en planilla (Decisión 23) ---------- FONDO = estado de la decisión (tenue, legible) BORDE = color fuerte, usable en chip/íconos sobre el fondo */ /* Verde — decidido OK, no requiere compra */ --decision-no-bg: #dcfce7; --decision-no-border: #16a34a; --decision-no-text: #166534; /* Azul — decidido: repone desde central */ --decision-central-bg: #dbeafe; --decision-central-border: #2563eb; --decision-central-text: #1e40af; /* Gris — default/inactivo (comprar sin cambios, etc.) */ --decision-comprar-bg: transparent; --decision-comprar-border: #94a3b8; --decision-comprar-text: #334155; /* Rojo — pendiente / crítico / "central insuficiente" */ --decision-pendiente-bg: #fee2e2; --decision-pendiente-border: #dc2626; --decision-pendiente-text: #991b1b; /* Ámbar — marca lateral de edición manual (NO fondo) */ --edit-mark: #f59e0b; /* ---------- Semánticas globales (toast / badges / alertas) ---------- */ --success: #16a34a; --success-soft: #dcfce7; --success-text: #166534; --warning: #f59e0b; --warning-soft: #fef3c7; --warning-text: #b45309; --danger: #dc2626; --danger-soft: #fee2e2; --danger-text: #991b1b; --info: #0891b2; --info-soft: #cffafe; --info-text: #155e75; /* ---------- Alias legacy (compat con CSS existente) ---------- */ --color-primary: var(--primary); --color-primary-hover: var(--primary-hover); --color-primary-light: var(--primary-soft); --color-accent: var(--accent); --color-accent-light: var(--accent-soft); --color-success: var(--success); --color-success-light: var(--success-soft); --color-warning: var(--warning); --color-warning-light: var(--warning-soft); --color-danger: var(--danger); --color-danger-light: var(--danger-soft); --color-info: var(--info); --color-info-light: var(--info-soft); /* Grises — mapeados a tokens para que dark mode funcione */ --color-gray-50: var(--bg); --color-gray-100: var(--bg-elev-2); --color-gray-200: var(--border); --color-gray-300: var(--border-strong); --color-gray-400: var(--text-subtle); --color-gray-500: var(--text-muted); --color-gray-600: #475569; --color-gray-700: #334155; --color-gray-800: var(--text); --color-gray-900: var(--text-strong); /* ---------- Tipografía ---------- */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', Monaco, monospace; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --lh-tight: 1.2; --lh-base: 1.45; /* ---------- Espaciado ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* ---------- Radii ---------- */ --radius-sm: 3px; --radius: 6px; --radius-lg: 10px; --radius-pill: 999px; /* ---------- Sombras ---------- */ --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); /* ---------- Layout ---------- */ --header-h: 48px; --sidebar-w: 220px; --sidebar-w-dense: 200px; --sidebar-w-collapsed: 56px; --footer-h: 56px; --panel-w: 320px; /* ---------- Focus ring ---------- */ --focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.25); /* ---------- Transiciones ---------- */ --t-fast: 120ms ease; --t-base: 180ms ease; --t-theme: 150ms ease; } /* ========================================================================= [data-theme="dark"] — tokens DARK Dark queda "funcional": contraste AA, sin negros puros ni textos ilegibles. La paleta marca sigue siendo placeholder. ========================================================================= */ [data-theme="dark"] { --bg: #0f172a; --bg-elev: #1e293b; --bg-elev-2: #273346; --bg-elev-3: #2f3b52; --border: #334155; --border-strong: #475569; --text: #e2e8f0; --text-strong: #f8fafc; --text-muted: #94a3b8; --text-subtle: #64748b; --primary: #2dd4bf; --primary-hover: #5eead4; --primary-soft: #134e4a; --primary-on: #042f2e; --accent: #60a5fa; --accent-soft: #1e3a8a; /* Semánticas decisión — versiones oscuras con fondos saturados-bajos */ --decision-no-bg: #14532d; --decision-no-border: #4ade80; --decision-no-text: #bbf7d0; --decision-central-bg: #1e3a8a; --decision-central-border: #60a5fa; --decision-central-text: #bfdbfe; --decision-comprar-bg: transparent; --decision-comprar-border: #64748b; --decision-comprar-text: #cbd5e1; --decision-pendiente-bg: #7f1d1d; --decision-pendiente-border: #f87171; --decision-pendiente-text: #fecaca; --edit-mark: #fbbf24; --success: #4ade80; --success-soft: #14532d; --success-text: #bbf7d0; --warning: #fbbf24; --warning-soft: #78350f; --warning-text: #fde68a; --danger: #f87171; --danger-soft: #7f1d1d; --danger-text: #fecaca; --info: #22d3ee; --info-soft: #164e63; --info-text: #a5f3fc; /* Alias legacy en dark */ --color-primary: var(--primary); --color-primary-hover: var(--primary-hover); --color-primary-light: var(--primary-soft); --color-accent: var(--accent); --color-accent-light: var(--accent-soft); --color-success: var(--success); --color-success-light: var(--success-soft); --color-warning: var(--warning); --color-warning-light: var(--warning-soft); --color-danger: var(--danger); --color-danger-light: var(--danger-soft); --color-info: var(--info); --color-info-light: var(--info-soft); --color-gray-50: var(--bg); --color-gray-100: var(--bg-elev-2); --color-gray-200: var(--border); --color-gray-300: var(--border-strong); --color-gray-400: var(--text-subtle); --color-gray-500: var(--text-muted); --color-gray-600: #94a3b8; --color-gray-700: #cbd5e1; --color-gray-800: var(--text); --color-gray-900: var(--text-strong); --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.35); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow: 0 4px 12px rgba(0, 0, 0, 0.55); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.65); --focus-ring: 0 0 0 3px rgba(45, 212, 191, 0.35); } /* ========================================================================= Reset básico ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; transition: background-color var(--t-theme), color var(--t-theme); } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; color: var(--text-strong); } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; cursor: pointer; } input, button, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } img, svg { display: block; max-width: 100%; } /* Transición suave de tema en elementos estructurales, evitando la tabla grande para no lagear en planillas de 300 filas. */ .app-header, .app-sidebar, .app-panel, .app-main, .screen-subheader, .filter-bar, .screen-footer, .bulk-bar, .btn, .chip, .input, .select, .badge { transition: background-color var(--t-theme), border-color var(--t-theme), color var(--t-theme); } /* ========================================================================= Utilidades ========================================================================= */ .stack-1 > * + * { margin-top: var(--sp-1); } .stack-2 > * + * { margin-top: var(--sp-2); } .stack-3 > * + * { margin-top: var(--sp-3); } .stack-4 > * + * { margin-top: var(--sp-4); } .row { display: flex; align-items: center; } .row-2 { display: flex; align-items: center; gap: var(--sp-2); } .row-3 { display: flex; align-items: center; gap: var(--sp-3); } .row-4 { display: flex; align-items: center; gap: var(--sp-4); } .grow { flex: 1 1 auto; } .text-xs { font-size: var(--fs-xs); } .text-sm { font-size: var(--fs-sm); } .text-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .text-muted { color: var(--text-muted); } .text-right { text-align: right; } /* ========================================================================= Botones ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 32px; padding: 0 var(--sp-3); border: 1px solid transparent; border-radius: var(--radius); font-size: var(--fs-base); font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; background: var(--bg-elev-2); color: var(--text); border-color: var(--border-strong); } .btn:hover { background: var(--border); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--success); color: var(--bg); border-color: var(--success); } .btn-primary:hover:not(:disabled) { filter: brightness(0.95); } .btn-secondary { background: var(--bg-elev); color: var(--text); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--bg-elev-2); } .btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; } .btn-ghost:hover { background: var(--bg-elev-2); color: var(--text-strong); } .btn-danger { background: var(--bg-elev); color: var(--danger); border-color: var(--border-strong); } .btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); } .btn-sm { height: 26px; padding: 0 var(--sp-2); font-size: var(--fs-sm); } .btn-icon { width: 32px; padding: 0; justify-content: center; } .btn-icon.btn-sm { width: 26px; } /* Toggle de tema en header */ .theme-toggle { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .theme-toggle:hover { background: var(--bg-elev-2); color: var(--text-strong); } .theme-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline; } [data-theme="dark"] .theme-toggle .icon-sun { display: inline; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ========================================================================= Inputs ========================================================================= */ .input, .select { height: 32px; padding: 0 var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-elev); color: var(--text-strong); font-size: var(--fs-base); transition: border-color var(--t-fast), box-shadow var(--t-fast); width: 100%; } .input:focus, .select:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); } .input-sm { height: 26px; padding: 0 var(--sp-2); font-size: var(--fs-sm); } .input-search { background: var(--bg-elev-2); border-color: transparent; } .input-search:focus { background: var(--bg-elev); } /* ========================================================================= Badges de estado (OP / OC / Compra) ========================================================================= */ .badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.4; white-space: nowrap; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Estados de OP */ .badge-borrador { background: var(--bg-elev-2); color: var(--text-muted); } .badge-enviada { background: var(--info-soft); color: var(--info-text); } .badge-en-oc { background: var(--primary-soft); color: var(--primary); } .badge-devuelta { background: var(--warning-soft); color: var(--warning-text); } .badge-cerrada { background: var(--success-soft); color: var(--success-text); } .badge-anulada { background: var(--bg-elev-2); color: var(--text-subtle); } /* Estados de OC */ .badge-abierta { background: var(--warning-soft); color: var(--warning-text); } .badge-enviada-proveedor { background: var(--info-soft); color: var(--info-text); } .badge-parcial { background: var(--warning-soft); color: var(--warning-text); } .badge-cerrada-con-faltante{ background: var(--danger-soft); color: var(--danger-text); } /* Estados de Compra */ .badge-precargada { background: var(--bg-elev-2); color: var(--text-muted); } .badge-en-verificacion{ background: var(--warning-soft); color: var(--warning-text); } .badge-confirmada { background: var(--success-soft); color: var(--success-text); } /* ========================================================================= Tabla base + editable ========================================================================= */ .table-wrap { position: relative; overflow: auto; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); } .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); } .table thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-elev-2); color: var(--text-muted); text-align: left; font-weight: 600; font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); white-space: nowrap; } .table tbody td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); } .table tbody tr:hover td { background: var(--bg-elev-2); } .table .col-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .table input[type="number"] { width: 72px; height: 26px; padding: 0 var(--sp-2); text-align: right; font-family: var(--font-mono); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-elev); color: var(--text-strong); } .table input[type="number"]:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); } .table input[type="number"]:disabled { background: var(--bg-elev-2); color: var(--text-muted); cursor: not-allowed; } /* Columnas sticky izquierda */ .table .sticky-col { position: sticky; background: var(--bg-elev); z-index: 1; } .table thead .sticky-col { z-index: 3; background: var(--bg-elev-2); } .table .sticky-col-1 { left: 0; width: 36px; } .table .sticky-col-2 { left: 36px; width: 140px; } .table .sticky-col-3 { left: 176px; min-width: 240px; box-shadow: 2px 0 0 var(--border); } /* ========================================================================= SISTEMA SEMÁNTICO DE COLORES EN FILAS (Decisión 23) Regla: fondo = estado de decisión borde izq = edición manual (ámbar) ========================================================================= */ /* Fondos por decisión — se aplican a con clase row--decision-* */ .table tr.row--decision-no > td, .table tr.row--decision-no .sticky-col { background: var(--decision-no-bg) !important; } .table tr.row--decision-central > td, .table tr.row--decision-central .sticky-col { background: var(--decision-central-bg) !important; } .table tr.row--decision-comprar > td, .table tr.row--decision-comprar .sticky-col { /* gris neutro: hereda el fondo normal de la fila */ } .table tr.row--decision-pendiente > td, .table tr.row--decision-pendiente .sticky-col { background: var(--decision-pendiente-bg) !important; } /* Marca de edición manual: borde lateral izquierdo ámbar de 3px Implementado con box-shadow inset en la PRIMERA celda sticky para que funcione con border-collapse: separate y no rompa el sticky. */ .table tr.row--edited > td:first-child, .table tr.row--edited .sticky-col-1 { box-shadow: inset 3px 0 0 0 var(--edit-mark); } /* Stock central crítico */ .cell-stock-crit { color: var(--danger); font-weight: 600; } /* Ícono de refuerzo al lado del selector de decisión (daltonismo) */ .decision-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex-shrink: 0; } .decision-icon svg { width: 12px; height: 12px; } /* Toggle switch inline (sin cambios funcionales, solo tokens) */ .switch { position: relative; display: inline-block; width: 32px; height: 18px; } .switch input { opacity: 0; width: 0; height: 0; } .switch-slider { position: absolute; inset: 0; background: var(--border-strong); border-radius: var(--radius-pill); transition: background var(--t-fast); cursor: pointer; } .switch-slider::before { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; background: var(--bg-elev); border-radius: 50%; transition: transform var(--t-fast); box-shadow: var(--shadow-xs); } .switch input:checked + .switch-slider { background: var(--accent); } .switch input:checked + .switch-slider::before { transform: translateX(14px); } /* ========================================================================= Chips / filtros ========================================================================= */ .chip { display: inline-flex; align-items: center; gap: var(--sp-2); height: 26px; padding: 0 var(--sp-3); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: var(--fs-sm); color: var(--text); cursor: pointer; transition: all var(--t-fast); } .chip:hover { background: var(--bg-elev-2); } .chip.chip-active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); } .chip-timestamp { background: var(--bg-elev-2); border-color: var(--border); color: var(--text-muted); cursor: default; font-family: var(--font-mono); font-size: var(--fs-xs); } /* ========================================================================= Layout principal (app shell) ========================================================================= */ .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--header-h) 1fr; grid-template-areas: "header header" "sidebar main"; height: 100vh; } .app.sidebar-collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; } .app.panel-open { grid-template-columns: var(--sidebar-w) 1fr var(--panel-w); grid-template-areas: "header header header" "sidebar main panel"; } .app.sidebar-collapsed.panel-open { grid-template-columns: var(--sidebar-w-collapsed) 1fr var(--panel-w); } /* ---------- Header ---------- */ .app-header { grid-area: header; display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-4); background: var(--bg-elev); border-bottom: 1px solid var(--border); height: var(--header-h); } .logo { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; color: var(--primary); font-size: var(--fs-md); } .breadcrumbs { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); } .breadcrumbs a { color: var(--text); } .breadcrumbs .sep { color: var(--text-subtle); } .breadcrumbs .current { color: var(--text-strong); font-weight: 500; } .header-search { max-width: 320px; flex: 1 1 320px; } .user-chip { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-pill); cursor: pointer; color: var(--text); } .user-chip:hover { background: var(--bg-elev-2); } .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: var(--primary-on); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 600; } /* ---------- Sidebar ---------- */ .app-sidebar { grid-area: sidebar; background: var(--bg-elev); border-right: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; } .nav { padding: var(--sp-2); display: flex; flex-direction: column; gap: 2px; } .nav-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); color: var(--text); font-size: var(--fs-base); font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; } .nav-item:hover { background: var(--bg-elev-2); text-decoration: none; } .nav-item.active { background: var(--primary-soft); color: var(--primary); } .nav-item-icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: inherit; } .nav-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; } .nav-item-count { font-size: var(--fs-xs); background: var(--bg-elev-2); color: var(--text); padding: 1px var(--sp-2); border-radius: var(--radius-pill); font-weight: 600; } .nav-item.active .nav-item-count { background: var(--primary); color: var(--primary-on); } .app.sidebar-collapsed .nav-item-label, .app.sidebar-collapsed .nav-item-count, .app.sidebar-collapsed .logo-text { display: none; } .app.sidebar-collapsed .nav-item { justify-content: center; padding: var(--sp-2); } /* Tooltip para nav-item cuando el sidebar está colapsado */ .app.sidebar-collapsed .nav-item { position: relative; } .app.sidebar-collapsed .nav-item[data-label]:hover::after { content: attr(data-label); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: var(--text-strong); color: var(--bg); padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--fs-xs); white-space: nowrap; z-index: 20; pointer-events: none; box-shadow: var(--shadow); } .app.page-dense.sidebar-forced-open { grid-template-columns: var(--sidebar-w-dense) 1fr; } .app.page-dense.sidebar-forced-open.panel-open { grid-template-columns: var(--sidebar-w-dense) 1fr var(--panel-w); } /* Pantalla densa: sidebar arranca colapsado por defecto (Decisión 22) */ .app.page-dense:not(.sidebar-forced-open) { grid-template-columns: var(--sidebar-w-collapsed) 1fr; } .app.page-dense:not(.sidebar-forced-open).panel-open { grid-template-columns: var(--sidebar-w-collapsed) 1fr var(--panel-w); } .app.page-dense:not(.sidebar-forced-open) .nav-item-label, .app.page-dense:not(.sidebar-forced-open) .nav-item-count, .app.page-dense:not(.sidebar-forced-open) .logo-text { display: none; } .app.page-dense:not(.sidebar-forced-open) .nav-item { justify-content: center; padding: var(--sp-2); position: relative; } .app.page-dense:not(.sidebar-forced-open) .nav-item[data-label]:hover::after { content: attr(data-label); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: var(--text-strong); color: var(--bg); padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--fs-xs); white-space: nowrap; z-index: 20; pointer-events: none; box-shadow: var(--shadow); } /* ---------- Main ---------- */ .app-main { grid-area: main; overflow: hidden; display: flex; flex-direction: column; min-width: 0; } /* ---------- Panel auditoría ---------- */ .app-panel { grid-area: panel; background: var(--bg-elev); border-left: 1px solid var(--border); overflow-y: auto; display: none; } .app.panel-open .app-panel { display: block; } .panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-elev); } .panel-section { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); } .panel-section h4 { font-size: var(--fs-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: var(--sp-2); } /* ========================================================================= Sub-header, filter-bar, footer ========================================================================= */ .screen-subheader { background: var(--bg-elev); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .screen-title { font-size: var(--fs-xl); font-weight: 600; color: var(--text-strong); } .screen-title-mono { font-family: var(--font-mono); color: var(--text-strong); } .meta-item { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--text-muted); } .meta-item strong { color: var(--text-strong); font-weight: 600; } .filter-bar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); background: var(--bg-elev-2); border-bottom: 1px solid var(--border); flex-wrap: wrap; } .filter-bar .input-search { max-width: 260px; } .table-area { flex: 1; overflow: auto; padding: var(--sp-3) var(--sp-4); min-height: 0; } .screen-footer { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--bg-elev); border-top: 1px solid var(--border); min-height: var(--footer-h); box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.04); z-index: 5; } [data-theme="dark"] .screen-footer { box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.35); } .footer-counter { font-size: var(--fs-sm); color: var(--text-muted); } .footer-counter strong { color: var(--text-strong); } .footer-total { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-lg); font-weight: 700; color: var(--text-strong); } /* ========================================================================= Helpers ========================================================================= */ .divider-v { width: 1px; height: 20px; background: var(--border); margin: 0 var(--sp-1); } .audit-row { display: flex; justify-content: space-between; padding: var(--sp-1) 0; font-size: var(--fs-sm); } .audit-row .audit-local { color: var(--text); } .audit-row .audit-qty { font-family: var(--font-mono); color: var(--text-strong); } .kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 10px; background: var(--bg-elev); color: var(--text-muted); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .cell-center { text-align: center; }