/* ─────────────────────────────────────────────────────────────────────────────
   apple.css — camada visual compartilhada inspirada no Apple Human Interface Guidelines.

   Carregado pelo header.php DEPOIS do <style> dele (sobrescreve a base) e ANTES do
   <style> de cada página (a página continua mandando no que é só dela). Mantém as
   cores do logo Innovasell e superfícies claras do DESIGN.md:

   - Deferência: o dado é o protagonista. Navbar/toolbar translúcidas ("material"),
     bordas trocadas por espaço + sombra de 1px, só UMA ação preenchida por área.
   - Roxo indica ação/interatividade; verde do logo pontua conteúdo e identidade.
     Controles segmentados mantêm "thumb" branco.
   - Alvos de toque ≥ 36px (44px em tela de toque), anel de foco visível, números
     tabulares, contraste AA do texto secundário.
   - Movimento curto e com propósito; respeita reduzir movimento/transparência.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    /* Amostras sRGB do logo: roxo #8e4393, verde escuro #4d9a34,
       verde claro #74b735. Tons de interface derivados, não cores oficiais. */
    --brand: #8e4393;
    --brand-hover: #6f2e75;
    --brand-soft: #fbf3fc;
    --brand-green: #4d9a34;
    --brand-green-light: #74b735;
    --brand-green-strong: #34762b;
    --bg-color: #fffdf8;
    --panel-color: #ffffff;
    --surface-green: #f4faef;
    --surface-purple: #fbf5fc;
    --border-color: #e9e4df;
    --text-primary: #28212b;
    --text-secondary: #625a66;
    --text-tertiary: #746b77;
    --header-grad-from: #552259;
    --header-grad-to: #8e4393;
    --separator: rgba(66, 39, 61, .12);
    --fill-hover: #f8f3f7;
    --fill-pressed: #f1e8f1;
    --fill-segment: #f6f0f5;
    --focus-ring: 0 0 0 3px rgba(142, 67, 147, .35);
    --header-action-bg: #57265c;
    --header-action-hover: #481c4d;
    --header-primary-hover: #5c2462;

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --shadow-1: 0 1px 3px rgba(66, 39, 61, .05), 0 0 0 1px rgba(66, 39, 61, .06);
    --shadow-2: 0 6px 20px rgba(66, 39, 61, .09), 0 0 0 1px rgba(66, 39, 61, .05);
    --shadow-3: 0 24px 60px rgba(66, 39, 61, .25), 0 0 0 1px rgba(66, 39, 61, .06);

    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --dur-fast: 120ms;
    --dur: 200ms;

    --control-h: 36px;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── Navbar: material translúcido ─────────────────────────────────────────── */
.navbar-custom {
    background-color: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 1px 0 var(--separator);
}
.navbar-custom .nav-link {
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.navbar-custom .dropdown-menu {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    padding: 6px;
}
.navbar-custom .dropdown-item { border-radius: var(--radius-sm); }
.bi-user-chip { display: inline-flex; align-items: center; gap: 6px; }
.bi-user-chip .bi-escopo-tag {
    font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
    color: var(--brand-hover); background: var(--brand-soft);
    padding: 2px 8px; border-radius: var(--radius-pill);
}

/* ── Faixa de título (page-header) ────────────────────────────────────────── */
.page-header {
    padding: 24px 32px 26px;
    margin-bottom: 24px;
    border-radius: 0 0 20px 20px;
    border-bottom: 3px solid var(--brand-green-light);
}
.page-header h1 { font-size: 1.5rem; letter-spacing: -.01em; }
.page-header .subtitle { font-size: .85rem; margin-top: 6px; }

.bi-container { padding-left: clamp(14px, 2.4vw, 28px); padding-right: clamp(14px, 2.4vw, 28px); }
.kpi-escopo i { color: var(--brand-green-strong); }

/* ── Superfícies ──────────────────────────────────────────────────────────── */
.panel, .secao {
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

/* ── Botões (HIG: filled / gray / plain) ──────────────────────────────────── */
.btn-bi {
    min-height: var(--control-h);
    padding: 0 14px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: var(--fill-segment);
    color: var(--text-primary);
    font-size: .84rem;
    justify-content: center;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn-bi:hover:not(:disabled) { background: var(--fill-pressed); color: var(--text-primary); }
.btn-bi:active:not(:disabled) { transform: scale(.98); }
.btn-bi:disabled { opacity: .5; cursor: not-allowed; }
.btn-bi-primary { background: var(--brand); color: #fff; }
.btn-bi-primary:hover:not(:disabled) { background: var(--brand-hover); color: #fff; }
.page-header-actions .btn-bi:not(.btn-bi-primary) {
    background: var(--header-action-bg); border-color: rgba(255, 255, 255, .55); color: #fff;
}
.page-header-actions .btn-bi:not(.btn-bi-primary):hover:not(:disabled) {
    background: var(--header-action-hover); border-color: #fff; color: #fff;
}
.page-header-actions .btn-bi-primary {
    background: var(--brand-hover); border-color: rgba(255, 255, 255, .55); color: #fff;
}
.page-header-actions .btn-bi-primary:hover:not(:disabled) {
    background: var(--header-primary-hover); border-color: #fff; color: #fff;
}
.btn-bi-danger { background: rgba(220, 38, 38, .08); color: var(--color-red); border-color: transparent; }
.btn-bi-danger:hover:not(:disabled) { background: rgba(220, 38, 38, .14); color: var(--color-red); }
/* Botão só com ícone (fechar modal etc.): quadrado, mesmo alvo mínimo. */
.btn-bi.btn-icone, .modal-header-bi .btn-bi { width: var(--control-h); padding: 0; border-radius: var(--radius-pill); }

/* ── Foco visível (teclado) ───────────────────────────────────────────────── */
:focus-visible { outline: none; }
a:focus-visible, button:focus-visible, [role="tab"]:focus-visible, summary:focus-visible,
.btn-bi:focus-visible, .modo-btn:focus-visible, [tabindex]:focus-visible {
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}
.filters input:focus, .filters select:focus, .table-search input:focus {
    outline: none; border-color: var(--brand); box-shadow: var(--focus-ring);
}

/* ── Barra de filtros = toolbar ───────────────────────────────────────────── */
.filters {
    gap: 14px 16px;
    padding: 14px 16px;
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}
.filters label { font-size: .68rem; font-weight: 600; letter-spacing: .04em; }
.filters select, .filters input[type="text"], .filters input[type="search"], .filters input[type="date"] {
    min-height: var(--control-h);
    border-radius: var(--radius-sm);
    border-color: rgba(15, 23, 42, .12);
    background-color: #fff;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.filters .chk-devolucoes { min-height: var(--control-h); border-radius: var(--radius-sm); border-color: rgba(15, 23, 42, .12); }
/* Ações que não são filtro (exportar, PDFs) vão para a borda direita da toolbar. */
.filters .filters-trailing { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Carteira travada do vendedor: no lugar do seletor de representante. */
.escopo-chip {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: var(--control-h); padding: 0 14px;
    border-radius: var(--radius-pill);
    background: var(--brand-soft); color: var(--brand-hover);
    font-size: .84rem; font-weight: 600; white-space: nowrap;
}
.escopo-chip i { font-size: .72rem; }

/* ── Controle segmentado (Budget / Fora do Budget, colunas, etc.) ─────────── */
.modo-switch, .visao-cols {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--fill-segment);
    border-radius: var(--radius-md);
}
.modo-switch .modo-btn, .visao-cols button {
    min-height: 32px; padding: 0 16px;
    display: inline-flex; align-items: center; gap: 7px;
    border: 0; border-radius: calc(var(--radius-md) - 2px);
    background: transparent; color: var(--text-secondary);
    font-weight: 600; font-size: .84rem; text-decoration: none; cursor: pointer;
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.modo-switch .modo-btn:hover, .visao-cols button:hover { color: var(--text-primary); }
.modo-switch .modo-btn.active, .visao-cols button.active {
    background: #fff; color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12), 0 0 0 .5px rgba(15, 23, 42, .06);
}

/* Dentro da toolbar de filtros, alinha pela base dos campos (que têm rótulo em cima). */
.filters .visao-cols, .filters .modo-switch { align-self: end; }

/* ── Tabelas ──────────────────────────────────────────────────────────────── */
table.bi-table { font-variant-numeric: tabular-nums; }
table.bi-table th, table.bi-table td { border-bottom-color: var(--separator); }
table.bi-table th { font-weight: 600; letter-spacing: .03em; }
table.bi-table tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
table.bi-table tbody tr:hover { background: var(--fill-hover); }
.table-search input {
    min-height: 34px; border-radius: var(--radius-sm);
    border-color: rgba(15, 23, 42, .12);
    padding-left: 32px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a97a8' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center;
}
.colfilter-menu { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.linha-total-geral { background: var(--surface-purple); }
.linha-total-secao { background: var(--fill-segment); }

/* ── Modais (drilldowns) = "sheet" ────────────────────────────────────────── */
.modal-overlay {
    background: rgba(15, 23, 42, .42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.modal-overlay.open { animation: bi-fade var(--dur) var(--ease-out); }
.modal-overlay.open .modal-box { animation: bi-sheet-in 260ms var(--ease-out); }
.modal-box { border-radius: 18px; box-shadow: var(--shadow-3); }
.modal-header-bi {
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom-color: var(--separator);
    z-index: 2;
}
.modal-header-bi h3 { font-size: 1.02rem; font-weight: 700; margin: 0; letter-spacing: -.005em; }
.modal-body-bi th, .modal-body-bi td { border-bottom-color: var(--separator); }
.modal-body-bi table { font-variant-numeric: tabular-nums; }
.modal-content { border: 0; border-radius: 18px; box-shadow: var(--shadow-3); }

@keyframes bi-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bi-sheet-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* ── Carregando: esqueleto em vez de "Carregando..." ──────────────────────── */
.bi-skeleton { display: grid; gap: 10px; padding: 6px 0; }
.bi-skeleton span {
    display: block; height: 14px; border-radius: 6px;
    background: linear-gradient(90deg, #f2eaf2 0%, #fffafc 40%, #f2eaf2 80%);
    background-size: 300% 100%;
    animation: bi-shimmer 1.2s linear infinite;
}
.bi-skeleton span:nth-child(3n+1) { width: 92%; }
.bi-skeleton span:nth-child(3n+2) { width: 78%; }
.bi-skeleton span:nth-child(3n) { width: 64%; }
@keyframes bi-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* ── Estado vazio ─────────────────────────────────────────────────────────── */
.empty-state h2 { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.empty-state p { max-width: 52ch; margin: 0 auto 18px; }

/* ── Toque: alvos de 44px (HIG) ───────────────────────────────────────────── */
@media (pointer: coarse) {
    :root { --control-h: 44px; }
    .modo-switch .modo-btn, .visao-cols button { min-height: 40px; }
}

/* ── Acessibilidade: movimento e transparência ────────────────────────────── */
@media (prefers-reduced-transparency: reduce) {
    .navbar-custom, .modal-header-bi { background-color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .modal-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(15, 23, 42, .6); }
}
@media (prefers-reduced-motion: reduce) {
    .modal-overlay.open, .modal-overlay.open .modal-box, .bi-skeleton span { animation: none !important; }
    .btn-bi:active:not(:disabled) { transform: none; }
}
@media (prefers-contrast: more) {
    :root { --text-secondary: #453748; --separator: rgba(66, 39, 61, .3); }
}

/* Portais Bootstrap migrados: opt-in para FAQ e Formularium. */
.design-portal {
    --navbar-h: 70px;
    --portal-warning-text: #92400e;
    --portal-warning-soft: #fffbeb;
    --portal-info-soft: #eff6ff;
    --portal-danger-soft: #fef2f2;
    --portal-material: rgba(255,255,255,.86);
    --portal-overlay: rgba(15,23,42,.42);
    color:var(--text-primary); background:var(--bg-color);
}
.portal-skip { position:fixed; top:8px; left:16px; transform:translateY(-200%); z-index:1100; padding:12px 16px; background:var(--panel-color); color:var(--brand-hover); border-radius:var(--radius-sm); }
.portal-skip:focus { transform:none; }
.portal-container, .design-portal main > .container, .design-portal main > .container-fluid {
    width:100%; max-width:1500px; margin:0 auto!important; padding:0 clamp(14px,2.4vw,28px) 24px!important;
}
.design-portal .navbar-custom .nav-link { min-height:var(--control-h); display:flex; align-items:center; }
.design-portal .navbar-brand img { height:40px; width:auto; }
.design-portal .text-muted { color:var(--text-secondary)!important; }
.design-portal .page-header { padding:24px 32px 26px; border-radius:0 0 20px 20px; margin-bottom:24px; box-shadow:none; }
.design-portal .page-header h1 { font-size:1.5rem; font-weight:700; letter-spacing:-.01em; }
.design-portal .page-header .subtitle { font-size:.85rem; }
.design-portal .card, .design-portal .filter-card, .design-portal .table-card,
.design-portal .kpi-card, .design-portal .faq-card, .design-portal .empty-state {
    background:var(--panel-color); border:0; border-radius:var(--radius-lg); box-shadow:var(--shadow-1)!important;
}
.design-portal .card-header { background:var(--panel-color); color:var(--text-primary); border-color:var(--separator); padding:16px; border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.design-portal .card-header h5 { font-size:1.1rem; font-weight:700; }
.design-portal .kpi-card { padding:16px; border-left:0; }
.design-portal .kpi-label, .design-portal .form-label { color:var(--text-secondary); font-size:.68rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.design-portal .kpi-value { font-size:1.6rem; font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.design-portal .kpi-icon { color:var(--text-secondary)!important; }
.design-portal .kpi-escopo { font-size:.78rem; font-weight:600; color:var(--text-secondary); margin-bottom:8px; }
.design-portal .btn-bi { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:var(--control-h); font-weight:600; line-height:1.3; text-decoration:none; }
.design-portal .btn-bi-secondary { background:var(--fill-segment); color:var(--text-primary); border-color:transparent; }
.design-portal .btn-bi-secondary:hover { background:var(--fill-pressed); }
.design-portal .btn-bi-primary { background:var(--brand-hover); color:var(--panel-color); }
.design-portal .btn-bi-primary:hover { background:var(--header-primary-hover); }
.design-portal .page-header-actions .btn-bi-secondary { background:var(--header-action-bg); color:var(--panel-color); border-color:rgba(255,255,255,.55); }
.design-portal .page-header-actions .btn-bi-secondary:hover { background:var(--header-action-hover); }
.design-portal .btn-bi.disabled { opacity:.5; pointer-events:none; }
.design-portal .form-control, .design-portal .form-select { min-height:var(--control-h); border-radius:var(--radius-sm); border-color:var(--border-color); }
.design-portal .form-control:focus, .design-portal .form-select:focus { border-color:var(--brand); box-shadow:var(--focus-ring); }
.portal-search { display:flex; flex-wrap:wrap; align-items:flex-end; background:var(--panel-color); }
.portal-search-field { flex:1 1 220px; min-width:0; }
.portal-search-query { flex-grow:2; }
.design-portal .table { --bs-table-bg:transparent; --bs-table-border-color:var(--separator); font-variant-numeric:tabular-nums; }
.design-portal .table thead th { background:var(--bg-color); color:var(--text-secondary); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.design-portal .table-responsive { max-width:100%; }
.formulas-portal .phase-card .table-responsive table { min-width:640px; table-layout:auto; }
.formulas-portal .phase-card td:first-child, .formulas-portal .phase-card td:nth-child(2) { min-width:180px; }
.formulas-portal .phase-card td:nth-child(3) { min-width:140px; }
.formulas-portal .phase-card .card-header { flex-wrap:wrap; gap:8px; }
.design-portal .table-responsive thead th { top:0; }
.design-portal .modal-header, .design-portal .modal-header-dark {
    background:var(--portal-material)!important; color:var(--text-primary)!important; border-color:var(--separator); border-radius:18px 18px 0 0;
}
.design-portal .modal-title { color:var(--text-primary)!important; font-size:1rem; font-weight:700; }
.design-portal .btn-close { filter:none!important; width:var(--control-h); height:var(--control-h); padding:0; background-color:var(--fill-segment); border-radius:var(--radius-pill); opacity:1; }
.design-portal .accordion-button:focus-visible { box-shadow:var(--focus-ring); }
.design-portal .modal-footer { gap:8px; }
.design-portal .modal-footer > [data-bs-dismiss="modal"]:first-child { margin-right:auto; }
.design-portal .modal-backdrop.show { background:var(--portal-overlay); backdrop-filter:blur(6px); opacity:1; }
.design-portal .nav-tabs, .design-portal .nav-pills:not(.navbar-nav) { background:var(--fill-segment); padding:4px; gap:4px; border:0; border-radius:var(--radius-md); }
.design-portal .nav-tabs .nav-link, .design-portal .nav-pills:not(.navbar-nav) .nav-link { border:0; min-height:var(--control-h); color:var(--text-secondary); border-radius:var(--radius-sm); }
.design-portal .nav-tabs .nav-link.active, .design-portal .nav-pills:not(.navbar-nav) .nav-link.active { background:var(--panel-color); color:var(--text-primary); box-shadow:var(--shadow-1); }
.design-portal .notif-dropdown { width:min(360px,calc(100vw - 32px)); }
.design-portal .btn-pendente-lab { animation:none; min-height:var(--control-h); }
.design-portal footer { background:var(--bg-color)!important; color:var(--text-secondary)!important; border-color:var(--separator); }
.portal-table-heading { padding:16px; background:var(--panel-color); border-bottom:1px solid var(--separator); }
.portal-table-heading h2 { font-size:1.1rem; font-weight:700; margin:0; }
.portal-table-heading p { color:var(--text-secondary); font-size:.78rem; margin:4px 0 0; }
.portal-suggest { position:relative; }
.portal-suggest-box { position:absolute; top:calc(100% + 4px); left:0; right:0; min-width:220px; max-height:280px; overflow-y:auto; z-index:1080; background:var(--panel-color); padding:8px; border-radius:var(--radius-md); box-shadow:var(--shadow-2); }
.portal-suggest-box button { width:100%; display:block; min-height:var(--control-h); padding:8px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--text-primary); text-align:left; font:inherit; font-size:.82rem; }
.portal-suggest-box button:hover, .portal-suggest-box button[aria-selected="true"] { background:var(--brand-soft); color:var(--brand-hover); }
.portal-suggest-box .sug-item-new { border:1px dashed var(--brand); color:var(--brand-hover); }
.portal-suggest-box .sug-status, .portal-suggest-box .sug-foot { padding:8px; color:var(--text-secondary); font-size:.75rem; }
@media (max-width:991.98px) {
    .design-portal .page-header { padding:24px 16px; }
    .design-portal .navbar-nav { align-items:stretch!important; }
    .design-portal .navbar-custom .nav-link { font-size:12px; }
}
@media (max-width:767.98px) {
    .design-portal .nav-tabs { flex-wrap:nowrap; overflow-x:auto; }
    .design-portal .nav-tabs .nav-link { white-space:nowrap; }
    .design-portal .kpi-card { min-width:0; }
    .design-portal .pagination-wrap { flex-wrap:wrap; gap:8px; }
}
@media (prefers-reduced-motion:reduce) {
    .design-portal *, .design-portal *::before, .design-portal *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
@media (prefers-reduced-transparency:reduce) {
    .design-portal .modal-header { background:var(--panel-color)!important; }
    .design-portal .modal-backdrop { backdrop-filter:none; }
}