/** * BARMO Estoque — design manual escopado (Fase 3) * ESCOPO: somente páginas com class="barmo-estoque" no . * Tema claro — NÃO carrega tokens/shell/components globais dark. */ .barmo-estoque { --est-brand: #102a43; --est-brand-2: #1e5b8c; --est-accent: #d9a441; --est-paper: #ffffff; --est-ink: #1a2b3c; --est-muted: #5c6f88; --est-border: #e2e8f0; --est-surface: #f4f7fa; --est-ok: #0d7a4a; --est-warn: #b8860b; --est-danger: #c0392b; --est-shadow-soft: 0 10px 28px rgba(16, 42, 67, 0.07); --est-shadow: 0 18px 50px rgba(16, 42, 67, 0.1); --est-radius-lg: 18px; --est-radius-md: 14px; } /* ── Zone A: Header / title / top actions ── */ .barmo-estoque .page header { border-bottom-color: var(--est-border); } .barmo-estoque .page header h1 { color: var(--est-brand); letter-spacing: -0.035em; } .barmo-estoque .page header .subtitle { color: var(--est-muted); } .barmo-estoque .page .action-group { background: rgba(232, 243, 255, 0.65); border: 1px solid var(--est-border); } .barmo-estoque .page .files-group { border-left-color: var(--est-border); } .barmo-estoque .page .files-menu { border-color: var(--est-border); box-shadow: 0 20px 54px rgba(16, 42, 67, 0.16); } .barmo-estoque .page .btn-primary, .barmo-estoque .page header button:not(.secondary):not(.ghost):not(.danger) { background: linear-gradient(180deg, #173b5d, var(--est-brand)); } .barmo-estoque .page .btn-secondary, .barmo-estoque .page header button.secondary { background: linear-gradient(180deg, #f4d27a, var(--est-accent)); color: #2f2300; } .barmo-estoque .page button.ghost, .barmo-estoque .page .btn-soft { background: #e8f3ff; color: var(--est-brand); border-color: #cfe1f3; box-shadow: none; } .barmo-estoque .page button.ghost:hover, .barmo-estoque .page .btn-soft:hover { background: #eef6ff; border-color: #b8d2ec; } .barmo-estoque .page button:focus-visible, .barmo-estoque .page .btn:focus-visible, .barmo-estoque .page input:focus-visible, .barmo-estoque .page select:focus-visible, .barmo-estoque .page textarea:focus-visible { outline: 3px solid rgba(30, 91, 140, 0.22); outline-offset: 2px; } /* Section titles (h2) */ .barmo-estoque .page h2 { border-left-color: var(--est-accent); color: var(--est-brand); } .barmo-estoque .page h3 { color: var(--est-brand); } /* ── Zone B: KPI / summary cards ── */ .barmo-estoque .page .cards { gap: 16px; } .barmo-estoque .page .card { border-color: var(--est-border); border-radius: var(--est-radius-lg); box-shadow: var(--est-shadow-soft); } .barmo-estoque .page .card .label { color: var(--est-muted); } .barmo-estoque .page .card .value { color: var(--est-brand); } .barmo-estoque .page .mini-card { border-color: var(--est-border); border-radius: var(--est-radius-md); box-shadow: 0 6px 16px rgba(16, 42, 67, 0.05); } .barmo-estoque .page .mini-card .label { color: var(--est-muted); } .barmo-estoque .page .mini-card .value { color: var(--est-brand); } .barmo-estoque .page .box { border-color: var(--est-border); border-radius: var(--est-radius-lg); box-shadow: var(--est-shadow-soft); } /* ── Zone C: Filters / search / tabs ── */ .barmo-estoque .page .nav { border-color: var(--est-border); background: #eef4fa; } .barmo-estoque .page .nav button { color: var(--est-brand); } .barmo-estoque .page .nav button.active { background: var(--est-brand); color: #fff; } .barmo-estoque .page .estoque-filtros { gap: 8px; padding: 4px 0; } .barmo-estoque .page .estoque-filtros .filter-btn { border: 1px solid var(--est-border); background: var(--est-paper); color: var(--est-brand); box-shadow: none; } .barmo-estoque .page .estoque-filtros .filter-btn:hover { background: #f6faff; border-color: #c7d6e5; transform: none; } .barmo-estoque .page .estoque-filtros .filter-btn.active { background: var(--est-brand); color: #fff; border-color: var(--est-brand); } .barmo-estoque .page .ops-filter-group { border-color: var(--est-border); background: #f4f8fc; } .barmo-estoque .page .period-btn { color: var(--est-brand); } .barmo-estoque .page .period-btn.active { background: var(--est-brand); color: #fff; } .barmo-estoque .page .subtabs button { border: 1px solid var(--est-border); background: var(--est-paper); color: var(--est-brand); box-shadow: none; } .barmo-estoque .page .subtabs button.active { background: var(--est-brand); color: #fff; border-color: var(--est-brand); } .barmo-estoque .page .filters-grid label, .barmo-estoque .page .ops-field label, .barmo-estoque .page .calendar-field label { color: var(--est-muted); } .barmo-estoque .page .filters-grid input, .barmo-estoque .page .filters-grid select, .barmo-estoque .page .timeline-filters input, .barmo-estoque .page .timeline-filters select { border-color: var(--est-border); } .barmo-estoque .page .filters-grid input:focus, .barmo-estoque .page .filters-grid select:focus, .barmo-estoque .page .timeline-filters input:focus, .barmo-estoque .page .timeline-filters select:focus { border-color: var(--est-brand-2); box-shadow: 0 0 0 4px rgba(30, 91, 140, 0.1); } /* ── Zone D: Main stock tables (Cap. 20) ── */ .barmo-estoque .page .table-wrap { border-color: var(--est-border); border-radius: var(--est-radius-md); box-shadow: 0 8px 22px rgba(16, 42, 67, 0.05); } .barmo-estoque .page .stock-table th, .barmo-estoque .page .dashboard-table th { background: linear-gradient(180deg, #173b5d, var(--est-brand)); color: #fff; letter-spacing: 0.04em; } .barmo-estoque .page .stock-table tbody tr:nth-child(even) td, .barmo-estoque .page .dashboard-table tbody tr:nth-child(even) td { background: #f8fafc; } .barmo-estoque .page .stock-table tbody tr:hover td, .barmo-estoque .page .dashboard-table tbody tr:hover td { background: #f1f7ff; } .barmo-estoque .page .stock-table th, .barmo-estoque .page .stock-table td { padding: 10px 12px; border-color: #e2e8f0; } .barmo-estoque .page #estoque-table th { background: linear-gradient(180deg, #173b5d, var(--est-brand)); } .barmo-estoque .page #estoque-table tbody tr:hover td { background-image: linear-gradient(0deg, rgba(241, 247, 255, 0.6), rgba(241, 247, 255, 0.6)); } .barmo-estoque .page .stock-table th.product-sticky, .barmo-estoque .page .dashboard-table th.product-sticky { background: var(--est-brand) !important; } .barmo-estoque .page .product-name { color: var(--est-ink); } /* ── Zone E: Validation banners ── */ .barmo-estoque .page .validation-banner { background: #fff4d6; border-color: #efd184; color: #684600; } .barmo-estoque .page .validation-banner.active { display: block; } /* ── Zone F: Modals (JS-created) ── */ .barmo-estoque .modal { background: rgba(16, 42, 67, 0.52); } .barmo-estoque .modal-card { border-color: var(--est-border); border-radius: 22px; box-shadow: 0 30px 90px rgba(16, 42, 67, 0.28); } .barmo-estoque .modal-header { border-bottom-color: var(--est-border); } .barmo-estoque .modal-header h2, .barmo-estoque .modal-header h3 { color: var(--est-brand); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .barmo-estoque .page .card, .barmo-estoque .page button, .barmo-estoque .page .btn, .barmo-estoque .page .timeline-item, .barmo-estoque .page #estoque-table tbody tr { transition: none; } }