/* DM Sans self-hospedada (era Google Fonts via CDN — dependência síncrona de rede no , sinalizada em 19/06 e no achado de performance de 23/07). Arquivos baixados de fonts.gstatic.com/s/dmsans/v17, servidos localmente. */ @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/dm-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/dm-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --sidebar-w: 248px; --radius-sm: 12px; --radius: 18px; --radius-lg: 26px; --shadow-sm: 0 10px 30px rgba(43, 56, 30, 0.07); --shadow-md: 0 18px 45px rgba(43, 56, 30, 0.1); --bg: #f7f4ec; --bg-elevated: rgba(255, 252, 246, 0.78); --card: #fffdf8; --card-strong: #ffffff; --surface-soft: #f1ece0; --surface-muted: #ebe4d6; --text: #25301f; --text-soft: #5f6d56; --text-muted: #798470; --border: rgba(97, 112, 76, 0.16); --border-strong: rgba(82, 96, 62, 0.24); --olive-900: #24301d; --olive-800: #314127; --olive-700: #405430; --olive-600: #56703d; --olive-500: #6f8e4d; --sage-100: #edf2e3; --sage-200: #dbe7c9; --sand-300: #dfc597; --sand-400: #cea56a; --sand-500: #b78643; --red: #b74e43; --red-soft: #f8e2dc; --amber: #bb8a39; --amber-soft: #f8efd9; --blue-soft: #dfeaf2; } html { scroll-behavior: smooth; } body { font-family: "DM Sans", sans-serif; background: radial-gradient(circle at top left, rgba(190, 169, 120, 0.18), transparent 28%), radial-gradient(circle at top right, rgba(98, 124, 68, 0.16), transparent 24%), linear-gradient(180deg, #fbf8f1 0%, var(--bg) 42%, #f2ede1 100%); color: var(--text); display: flex; min-height: 100vh; font-size: 14px; line-height: 1.45; text-rendering: optimizeLegibility; } a { color: inherit; } strong { font-weight: 700; } .sidebar { width: var(--sidebar-w); background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 22%), linear-gradient(180deg, var(--olive-900) 0%, #202b19 100%); color: #f8f6f0; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100vh; z-index: 100; overflow-y: auto; border-right: 1px solid rgba(234, 230, 219, 0.08); box-shadow: 24px 0 50px rgba(22, 28, 16, 0.18); } .sidebar-logo { padding: 28px 22px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: flex-start; gap: 12px; } .logo-img { max-width: 100%; width: auto; max-height: 58px; object-fit: contain; padding: 5px 7px; background: rgba(255, 252, 246, 0.98); border: 1px solid rgba(223, 197, 151, 0.18); border-radius: 12px; box-shadow: 0 4px 14px rgba(20, 28, 14, 0.12); } .sidebar-brand { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sidebar-brand strong { font-size: 15px; line-height: 1.1; color: #fffdf8; letter-spacing: -0.02em; } .sidebar-brand span { font-size: 11px; line-height: 1.2; color: rgba(247, 244, 234, 0.7); } .sidebar-nav { flex: 1; padding: 18px 14px; } /* Cabeçalho de grupo no menu (Início / Vendas / Estoque / Compras / Cadastros) */ .nav-section { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(247, 244, 234, 0.4); padding: 16px 14px 6px; user-select: none; } .nav-section.first { padding-top: 2px; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 6px; color: rgba(247, 244, 234, 0.72); text-decoration: none; font-size: 13px; font-weight: 500; border: 1px solid transparent; border-radius: 14px; transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .nav-item:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(223, 197, 151, 0.18); color: #fffdf8; transform: translateX(2px); } .nav-item.active { background: linear-gradient(135deg, rgba(223, 197, 151, 0.16), rgba(255, 255, 255, 0.08)); border-color: rgba(223, 197, 151, 0.28); color: #fffef9; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } .nav-icon { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: rgba(255, 255, 255, 0.055); color: var(--sand-300); border: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; } .nav-icon svg { width: 15px; height: 15px; } .main-content { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; } .topbar { background: rgba(251, 248, 241, 0.78); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(97, 112, 76, 0.12); padding: 18px 32px; display: flex; justify-content: space-between; align-items: center; gap: 20px; position: sticky; top: 0; z-index: 50; } .topbar-title { font-size: 24px; font-weight: 700; color: var(--olive-900); letter-spacing: -0.03em; line-height: 1.1; overflow-wrap: anywhere; } .topbar-meta { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(97, 112, 76, 0.14); color: var(--text-soft); font-size: 12px; box-shadow: var(--shadow-sm); } .page-body { padding: 28px 32px 36px; flex: 1; } input, select, button, textarea { font: inherit; } p, td, th, label, span, strong, a, h1, h2, h3 { overflow-wrap: anywhere; } .btn-primary, .btn-secondary, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid transparent; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease; } .btn-primary { background: linear-gradient(135deg, var(--olive-700), var(--olive-600)); color: #fffdf8; box-shadow: 0 10px 22px rgba(64, 84, 48, 0.18); } .btn-primary:hover, .btn-secondary:hover, .btn:hover { transform: translateY(-1px); } .btn-secondary { background: rgba(255, 255, 255, 0.72); color: var(--text); border-color: rgba(97, 112, 76, 0.14); } .btn { background: linear-gradient(135deg, var(--olive-700), var(--olive-600)); color: #fffdf8; box-shadow: 0 10px 22px rgba(64, 84, 48, 0.18); } .link-btn { background: none; border: none; padding: 0; margin: 0; color: var(--olive-700, #405430); font-size: 0.78rem; font-weight: 600; text-decoration: underline; cursor: pointer; list-style: none; } summary.link-btn { display: list-item; } summary.link-btn::-webkit-details-marker { display: none; } .btn-primary:disabled, .btn-secondary:disabled, .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .input-shell, .select-shell { min-height: 42px; padding: 10px 13px; border: 1px solid rgba(97, 112, 76, 0.14); border-radius: 12px; font-size: 13px; background: rgba(255, 255, 255, 0.84); color: var(--text); outline: none; transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; } .input-shell:focus, .select-shell:focus { border-color: rgba(86, 112, 61, 0.34); box-shadow: 0 0 0 4px rgba(111, 142, 77, 0.12); background: #fff; } .cards-row { display: grid; gap: 18px; margin-bottom: 28px; } .cards-row.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cards-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards-row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card, .section { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 252, 246, 0.92)); border: 1px solid rgba(97, 112, 76, 0.12); box-shadow: var(--shadow-sm); } .card { border-radius: var(--radius); padding: 22px; overflow: hidden; } .card-link { display: block; text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease; } .card-link:hover { box-shadow: var(--shadow-md, var(--shadow-sm)); transform: translateY(-1px); } .card-link.active { border-color: var(--olive-600); box-shadow: 0 0 0 2px var(--olive-600) inset; } .card::before, .section::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--olive-600), var(--sand-400)); opacity: 0.9; } .card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; } .card-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; } .card-value { font-size: clamp(26px, 2vw, 34px); font-weight: 700; color: var(--text); line-height: 1.05; letter-spacing: -0.04em; } .card-sub { font-size: 12px; color: var(--text-soft); margin-top: 8px; } .card-value.green { color: var(--olive-700); } .card-value.red { color: var(--red); } .card-value.gold { color: var(--sand-500); } .card-icon { width: 40px; height: 40px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55); } .card-icon.green-bg { background: linear-gradient(135deg, #eef4e6, #dce8cb); color: var(--olive-700); } .card-icon.gold-bg { background: linear-gradient(135deg, #fbf1df, #efd5a7); color: var(--sand-500); } .section { border-radius: var(--radius-lg); margin-bottom: 22px; overflow: hidden; } .section-head { padding: 18px 22px 14px; border-bottom: 1px solid rgba(97, 112, 76, 0.1); background: linear-gradient(180deg, rgba(247, 244, 236, 0.85), rgba(255, 255, 255, 0.58)); } .section-head h2 { font-size: 17px; font-weight: 700; color: var(--olive-900); letter-spacing: -0.02em; } .section-head p { font-size: 12px; color: var(--text-soft); margin-top: 4px; } .section-body { padding: 20px 22px 22px; } .table-wrap { overflow-x: auto; /* Tabelas grandes (Ruptura, Sugestão de Compra etc.) paravam de crescer só na largura — em telas com centenas de linhas, a altura da página ficava enorme. Trava numa altura razoável com scroll vertical próprio, em vez de crescer sem limite; cabeçalho fixo (abaixo) pra não perder o contexto das colunas ao rolar. */ max-height: 70vh; overflow-y: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; } thead th { background: #ebe4d6; padding: 12px 14px; text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); border-bottom: 1px solid rgba(97, 112, 76, 0.12); white-space: nowrap; position: sticky; top: 0; z-index: 2; } tbody tr { border-bottom: 1px solid rgba(97, 112, 76, 0.08); transition: background 0.16s ease, transform 0.16s ease; } tbody tr:hover { background: rgba(241, 236, 224, 0.44); } tbody tr:last-child { border-bottom: none; } tbody td { padding: 12px 14px; color: var(--text); vertical-align: middle; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } td.center, th.center { text-align: center; } .badge { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; } .badge-a { background: #fbf1dd; color: #8e5f1f; border-color: rgba(183, 134, 67, 0.18); } .badge-b { background: var(--blue-soft); color: #35586c; border-color: rgba(53, 88, 108, 0.14); } .badge-c { background: #ede9de; color: #6d705f; border-color: rgba(109, 112, 95, 0.12); } .badge-ruptura { background: var(--red-soft); color: var(--red); border-color: rgba(183, 78, 67, 0.18); } .badge-urgente { background: #fae7cf; color: #9a6522; border-color: rgba(154, 101, 34, 0.16); } .badge-atencao { background: #e6f0db; color: var(--olive-700); border-color: rgba(86, 112, 61, 0.16); } /* Vendabilidade (score 0-100, separado de ruptura/pedido — ver data/metricas.py). */ .badge-vend-alta { background: var(--sage-200); color: var(--olive-700); border-color: rgba(86, 112, 61, 0.2); } .badge-vend-boa { background: var(--sage-100); color: var(--olive-600); border-color: rgba(86, 112, 61, 0.14); } .badge-vend-media { background: var(--amber-soft); color: var(--amber); border-color: rgba(187, 138, 57, 0.2); } .badge-vend-baixa { background: #f3e6d3; color: #9a6522; border-color: rgba(154, 101, 34, 0.16); } .badge-vend-muito_baixa { background: var(--red-soft); color: var(--red); border-color: rgba(183, 78, 67, 0.18); } .badge-vend-sem-dado { background: var(--surface-muted); color: var(--text-muted); border-color: var(--border); } .badge-mensal, .badge-q2 { background: #ebe5db; color: #5e6653; border-color: rgba(94, 102, 83, 0.12); } .badge-semanal, .badge-q1 { background: #e6efe0; color: var(--olive-700); border-color: rgba(86, 112, 61, 0.16); } .filter-bar { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; align-items: center; } .filter-bar label { font-size: 12px; color: var(--text-soft); font-weight: 600; } .filter-bar select, .filter-bar input { padding: 10px 13px; border: 1px solid rgba(97, 112, 76, 0.14); border-radius: 12px; font-size: 13px; background: rgba(255, 255, 255, 0.8); color: var(--text); outline: none; transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; } .filter-bar select:focus, .filter-bar input:focus { border-color: rgba(86, 112, 61, 0.34); box-shadow: 0 0 0 4px rgba(111, 142, 77, 0.12); background: #fff; } .bar-chart { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; } .bar-row { display: flex; align-items: center; gap: 12px; } .bar-label { width: 112px; font-size: 12px; color: var(--text-soft); text-align: right; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-track { flex: 1; height: 24px; background: linear-gradient(180deg, rgba(235, 228, 214, 0.42), rgba(235, 228, 214, 0.78)); border-radius: 999px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 999px; display: flex; align-items: center; padding-left: 10px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08); } .bar-fill.green { background: linear-gradient(90deg, var(--olive-600), var(--olive-500)); } .bar-fill.gold { background: linear-gradient(90deg, var(--sand-500), var(--sand-400)); } .bar-fill.red { background: linear-gradient(90deg, #c15b4c, #d97c68); } .bar-fill span { font-size: 11px; color: #fffdf8; font-weight: 700; white-space: nowrap; } .bar-val { width: 88px; font-size: 12px; font-weight: 700; color: var(--text); } .abc-layout { align-items: stretch; } .sales-layout { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(280px, 0.9fr); gap: 18px; align-items: stretch; } .sales-main-panel, .sales-side-panel { min-width: 0; } .sales-body { padding-top: 18px; padding-bottom: 18px; } .sales-side-panel { display: grid; gap: 12px; } .sales-side-card { padding: 16px; border-radius: 18px; background: rgba(247, 244, 236, 0.72); border: 1px solid rgba(97, 112, 76, 0.1); display: flex; flex-direction: column; gap: 6px; } .sales-side-value { font-size: 24px; font-weight: 700; color: var(--text); letter-spacing: -0.03em; } .sales-side-sub { font-size: 12px; color: var(--text-soft); } .sales-side-note { font-size: 12px; color: var(--text-soft); line-height: 1.55; } .sales-chart-wrap { padding: 18px 16px 8px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(247, 244, 236, 0.7)); border: 1px solid rgba(97, 112, 76, 0.1); overflow-x: auto; } .sales-chart-wrap.compact { height: 100%; } .chartjs-wrap { height: 100%; min-height: 380px; padding: 12px 14px 10px; overflow: hidden; } .chartjs-wrap canvas { width: 100% !important; height: 100% !important; display: block; } .stock-bars { display: grid; gap: 14px; } .stock-bar-card { padding: 16px; border-radius: 18px; background: rgba(247, 244, 236, 0.72); border: 1px solid rgba(97, 112, 76, 0.1); } .stock-bar-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; } .stock-bar-group { display: grid; gap: 8px; margin-bottom: 12px; } .stock-bar-group:last-child { margin-bottom: 0; } .stock-bar-label { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: var(--text-soft); } .stock-bar-label strong { color: var(--text); font-size: 12px; } .stock-bar-track { height: 12px; border-radius: 999px; background: rgba(223, 213, 195, 0.72); overflow: hidden; } .stock-bar-fill { height: 100%; border-radius: 999px; } .stock-bar-fill.green { background: linear-gradient(90deg, var(--olive-600), var(--olive-500)); } .stock-bar-fill.gold { background: linear-gradient(90deg, var(--sand-500), var(--sand-400)); } .stat-row { display: flex; gap: 24px; flex-wrap: wrap; } .stat-item { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; min-width: 132px; border-radius: 16px; background: rgba(247, 244, 236, 0.72); border: 1px solid rgba(97, 112, 76, 0.1); } .stat-item .val { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; } .stat-item .lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .forn-group { margin-bottom: 20px; } .forn-group-header { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: linear-gradient(180deg, rgba(247, 244, 236, 0.9), rgba(235, 228, 214, 0.5)); border-radius: 16px; margin-bottom: 10px; border: 1px solid rgba(97, 112, 76, 0.12); } .forn-group-name { font-size: 13px; font-weight: 700; color: var(--text); } .forn-group-meta { font-size: 11px; color: var(--text-soft); margin-left: auto; } .alert-strip { padding: 14px 16px; border-radius: 16px; font-size: 13px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; border: 1px solid transparent; } .alert-strip.red { background: linear-gradient(180deg, #fbefeb, #f8e2dc); color: #8f3f37; border-color: rgba(183, 78, 67, 0.18); } .alert-strip.amber { background: linear-gradient(180deg, #fbf4e4, #f8efd9); color: #876223; border-color: rgba(187, 138, 57, 0.18); } .alert-strip.green { background: linear-gradient(180deg, #eff5e7, #e6f0db); color: var(--olive-700); border-color: rgba(86, 112, 61, 0.18); } .page-tab { padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-soft); cursor: pointer; text-decoration: none; border: 1px solid rgba(97, 112, 76, 0.12); background: rgba(255, 255, 255, 0.62); transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease; } .page-tab:hover { background: rgba(241, 236, 224, 0.82); color: var(--text); border-color: rgba(97, 112, 76, 0.18); transform: translateY(-1px); } .page-tab.active { background: linear-gradient(135deg, var(--olive-700), var(--olive-600)); color: #fffdf8; border-color: transparent; box-shadow: 0 10px 24px rgba(64, 84, 48, 0.18); } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .text-red { color: var(--red); } .text-green { color: var(--olive-700); } .text-gold { color: var(--sand-500); } .text-muted { color: var(--text-muted); } .fw-600 { font-weight: 600; } .mt-4 { margin-top: 4px; } .mb-16 { margin-bottom: 16px; } .cob-bar { display: flex; align-items: center; gap: 8px; } .cob-track { width: 86px; height: 9px; background: rgba(235, 228, 214, 0.84); border-radius: 999px; overflow: hidden; } .cob-fill { height: 100%; border-radius: 999px; } .cob-fill.ok { background: linear-gradient(90deg, var(--olive-600), var(--olive-500)); } .cob-fill.warn { background: linear-gradient(90deg, var(--sand-500), var(--sand-400)); } .cob-fill.danger { background: linear-gradient(90deg, #c15b4c, #d97c68); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(117, 123, 104, 0.5); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: rgba(86, 112, 61, 0.72); } @media (max-width: 1200px) { .cards-row.cols-4, .cards-row.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { body { display: block; } .sidebar { position: relative; width: 100%; height: auto; box-shadow: none; border-right: none; border-bottom: 1px solid rgba(234, 230, 219, 0.08); } .main-content { margin-left: 0; } .topbar { padding: 18px 18px 16px; flex-direction: column; align-items: flex-start; } .page-body { padding: 20px 18px 28px; } .grid-2, .grid-3, .cards-row.cols-4, .cards-row.cols-3, .cards-row.cols-2 { grid-template-columns: 1fr; } .bar-row { flex-wrap: wrap; } .bar-label, .bar-val { width: 100%; text-align: left; } .stock-bar-head, .stock-bar-label { flex-direction: column; align-items: flex-start; } .sales-layout { grid-template-columns: 1fr; } .chartjs-wrap { min-height: 340px; } .stat-row { gap: 12px; } .stat-item { min-width: calc(50% - 6px); } } @media (max-width: 560px) { .sidebar-logo { padding-left: 18px; padding-right: 18px; } .sidebar-nav { padding-left: 10px; padding-right: 10px; } .topbar-title { font-size: 20px; } .topbar-meta { width: 100%; justify-content: center; text-align: center; line-height: 1.35; white-space: normal; } .card, .section-body { padding-left: 16px; padding-right: 16px; } .section-head { padding-left: 16px; padding-right: 16px; } .stat-item { min-width: 100%; } } /* ── Sub-abas dentro de uma mesma tela (hubs consolidados em 28/07) ────────── Troca 100% no navegador (sem reload) — todos os dados das sub-abas já vêm renderizados na mesma resposta; só mostra/esconde. O filtro de loja/período continua sendo um reload normal (precisa buscar dado novo do servidor). */ .subtabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .subtab-btn { appearance: none; background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 16px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-soft); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .subtab-btn:hover { color: var(--olive-700, #405430); } .subtab-btn.active { color: var(--olive-700, #405430); border-bottom-color: var(--olive-600, #56703d); } .subtab-btn .subtab-count { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--surface-muted, #ebe4d6); color: var(--text-soft); font-size: 11px; font-weight: 700; } .subtab-btn.active .subtab-count { background: var(--sage-200, #dbe7c9); color: var(--olive-800, #314127); } .subtab-panel[hidden] { display: none; } /* ── Ações destrutivas (Excluir/Remover/Descontinuar/Revogar) ────────────── */ .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(183, 78, 67, 0.28); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; background: var(--red-soft, #f8e2dc); color: var(--red, #b74e43); transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; } .btn-danger:hover { transform: translateY(-1px); background: #f3d2ca; } .btn-danger:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } /* ── Foco de teclado — navegação sem mouse precisa ver onde está ─────────── */ .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn:focus-visible, .btn-danger:focus-visible, .link-btn:focus-visible, .page-tab:focus-visible, .subtab-btn:focus-visible, .nav-item:focus-visible { outline: 2px solid var(--olive-700, #405430); outline-offset: 2px; } /* ── Modal de confirmação/prompt (substitui confirm()/prompt() nativos do navegador — mesma linguagem visual do resto do app). Ver base.html, funções appConfirm()/appPrompt(). ────────────────────────────────────── */ .app-modal-overlay { position: fixed; inset: 0; background: rgba(36, 48, 29, 0.42); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; } .app-modal { background: #fffdf8; border-radius: 18px; border: 1px solid var(--border, rgba(97, 112, 76, 0.16)); box-shadow: 0 24px 60px rgba(36, 48, 29, 0.28); padding: 22px 24px; max-width: 420px; width: 100%; } .app-modal-msg { font-size: 14px; font-weight: 600; color: var(--olive-900, #24301d); margin: 0 0 14px; line-height: 1.5; } .app-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; } .app-modal-input { width: 100%; }