/* ═══════════════════════════════════════════════════════════════════════════
       DOCERIA LUMIAR — Design System v2
       Base escura quente (tons de "chocolate/pedra") + accent dourado da marca.
       Escala de espacamento 4px · raios 7/10/14/18 · sombras em camadas.
       ═══════════════════════════════════════════════════════════════════════════ */

    :root {
      /* Superfícies (do fundo para cima) */
      --bg:          #0a0a0a;
      --sidebar-bg:  #0c0c0c;
      --surface:     #131313;
      --surface2:    #181818;
      --surface3:    #212121;
      --elevated:    #1a1a1a;

      /* Bordas — hairlines neutras */
      --border:      rgba(255, 255, 255, .07);
      --border2:     rgba(255, 255, 255, .11);
      --border3:     rgba(255, 255, 255, .18);

      /* Tinta — 4 níveis de hierarquia */
      --text:        #f4f3f1;
      --text-dim:    #c6c3be;
      --muted:       #8a877f;
      --faint:       #585650;

      /* Marca — uma cor só: o marrom/clay do logo */
      --accent:        #c58461;
      --accent-strong: #d5966f;
      --accent-dim:    #a5623f;
      --accent-bg:     rgba(197, 132, 97, .12);
      --accent-ring:   rgba(197, 132, 97, .30);

      /* Semânticas — calmas, só o essencial */
      --green:    #5fb98c;
      --green-bg: rgba(95, 185, 140, .10);
      --red:      #d9705a;
      --red-bg:   rgba(217, 112, 90, .10);
      --amber:    #c9954e;
      --amber-bg: rgba(201, 149, 78, .10);
      --indigo:   #9a94ad;
      --indigo-bg:rgba(154, 148, 173, .10);

      /* Raios */
      --r-sm: 7px;
      --r-md: 10px;
      --r-lg: 14px;
      --r-xl: 18px;

      /* Sombras em camadas */
      --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
      --shadow-md: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
      --shadow-lg: 0 0 0 1px rgba(236,217,189,.05), 0 4px 12px rgba(0,0,0,.4), 0 24px 64px -12px rgba(0,0,0,.65);

      /* Controles */
      --ctl-h: 36px;

      /* Tipografia — escala fechada (DESIGN.md §2). 6 degraus, nada fora daqui. */
      --fs-xs:      .75rem;   /* 12px — rotulo MAIUSCULO, badge, legenda */
      --fs-sm:      .875rem;  /* 14px — corpo secundario, celula de tabela */
      --fs-md:      1rem;     /* 16px — corpo */
      --fs-lg:      1.125rem; /* 18px — titulo de card, valor destacado */
      --fs-xl:      1.5rem;   /* 24px — valor de KPI */
      --fs-display: 2rem;     /* 32px — numero heroi, um por tela */

      /* Movimento — 3 durações, 1 easing (DESIGN.md §5) */
      --mo-fast: 120ms;
      --mo-base: 180ms;
      --mo-slow: 280ms;
      --ease:    cubic-bezier(.4, 0, .2, 1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { color-scheme: dark; }

    body {
      font-family: var(--font-body);
      background: var(--bg); color: var(--text);
      min-height: 100vh; font-size: var(--fs-md); line-height: 1.55;
      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }

    ::selection { background: rgba(224,148,72,.30); color: #fff; }

    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
      background: var(--surface3); border-radius: 8px;
      border: 3px solid transparent; background-clip: padding-box;
    }
    ::-webkit-scrollbar-thumb:hover { background: rgba(236,217,189,.25); background-clip: padding-box; border: 3px solid transparent; }

    /* Foco visível consistente (acessibilidade) */
    :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
    input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline-offset: 0; }

    input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }

    /* Números sempre tabulares onde há valores */
    .card-value, .card-val, .card-sm-value, .cat-pago, .cat-pend,
    .pend-tot, .pend-card2-total, .mes-val, .dc-val, .form-total,
    table.tbl td, table.rel td, .tbl-footer, .usr-table td, .prod-table td {
      font-variant-numeric: tabular-nums;
    }

    /* ── Login (split-screen: painel de marca + formulário) ───────────────────────── */
    #login-screen {
      display: flex; align-items: center; justify-content: center;
      min-height: 100vh; padding: 24px; background: var(--bg);
    }
    .login-card {
      position: relative; overflow: hidden;
      display: grid; grid-template-columns: 1.05fr 1fr;
      width: 100%; max-width: 880px; min-height: 520px;
      background: var(--surface); border: 1px solid var(--border2);
      border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
    }
    /* painel de marca (esquerda) */
    .login-brand {
      position: relative; overflow: hidden;
      display: flex; flex-direction: column; justify-content: space-between;
      padding: 48px 32px;
      background:
        radial-gradient(520px 420px at 16% 10%, rgba(197,132,97,.16), transparent 60%),
        linear-gradient(160deg, #17110d, #0b0b0b 72%);
      border-right: 1px solid var(--border2);
    }
    .login-brand::before, .login-brand::after {
      content: ''; position: absolute; border: 1px solid rgba(197,132,97,.14);
      border-radius: 50%; pointer-events: none;
    }
    .login-brand::before { width: 360px; height: 360px; left: -130px; bottom: -160px; }
    .login-brand::after  { width: 210px; height: 210px; left: -55px; bottom: -85px; border-color: rgba(197,132,97,.22); }
    .login-brand-logo img { width: 132px; height: auto; display: block; filter: none; }
    .login-brand-body { position: relative; z-index: 1; }
    .login-brand-eyebrow {
      font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
      color: var(--accent-strong); margin-bottom: 12px;
    }
    .login-brand-body h1 {
      font-size: var(--fs-display); font-weight: 700; line-height: 1.16; color: var(--text);
      letter-spacing: -.02em; margin: 0 0 12px;
    }
    .login-brand-body p { font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); max-width: 30ch; }
    .login-brand-foot {
      position: relative; z-index: 1; font-size: var(--fs-xs); font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
    }
    /* painel do formulário (direita) */
    .login-form { display: flex; flex-direction: column; justify-content: center; padding: 48px 48px; }
    .login-title { font-size: var(--fs-xl); font-weight: 700; color: var(--text); letter-spacing: -.02em; margin: 0 0 4px; }
    .login-sub { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 24px; }
    .login-field { margin-bottom: 16px; }
    .login-field label {
      display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
      text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px;
    }
    .login-input { position: relative; }
    .login-input svg {
      position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
      width: 17px; height: 17px; color: var(--faint); pointer-events: none;
      transition: color .15s;
    }
    .login-input:focus-within svg { color: var(--accent); }
    .login-field input {
      width: 100%; background: var(--surface2); border: 1px solid var(--border2);
      color: var(--text); padding: 12px 12px 12px 48px; border-radius: var(--r-md);
      font-size: var(--fs-md); font-family: inherit; outline: none;
      transition: border-color .15s, box-shadow .15s, background .15s;
    }
    .login-field input:hover { border-color: var(--border3); }
    .login-field input:focus {
      border-color: var(--accent); background: var(--surface);
      box-shadow: 0 0 0 3px var(--accent-ring);
    }
    .login-field input::placeholder { color: var(--faint); }
    .login-btn {
      width: 100%; padding: 12px; margin-top: 8px;
      background: var(--accent); color: #160e09;
      border: none; border-radius: var(--r-md); font-size: var(--fs-sm);
      font-weight: 700; font-family: inherit; cursor: pointer;
      letter-spacing: .06em; text-transform: uppercase;
      transition: background .15s, transform .1s;
    }
    .login-btn:hover { background: var(--accent-strong); }
    .login-btn:active { transform: translateY(1px); }
    .login-erro { font-size: var(--fs-sm); font-weight: 500; color: var(--red); text-align: center; margin-top: 12px; min-height: 18px; }
    .login-hint { font-size: var(--fs-sm); color: var(--faint); text-align: center; margin-top: 12px; line-height: 1.5; }
    @media (max-width: 720px) {
      .login-card { grid-template-columns: 1fr; max-width: 400px; min-height: 0; }
      .login-brand { display: none; }
      .login-form { padding: 32px 32px; }
    }

    /* ── App shell ──────────────────────────────────────────────────────────────── */
    #app { display: none; }

    /* ── Sidebar ────────────────────────────────────────────────────────────────── */
    .sidebar {
      position: fixed; top: 0; left: 0; bottom: 0; width: 260px; z-index: 40;
      background: linear-gradient(180deg, #131009, transparent 220px), var(--sidebar-bg);
      border-right: 1px solid var(--border);
      display: flex; flex-direction: column;
      overflow-y: auto; overflow-x: hidden;
      scrollbar-width: thin;
    }
    .sidebar::-webkit-scrollbar { width: 5px; }
    .sidebar::-webkit-scrollbar-thumb { border: none; background: var(--surface3); }
    .sidebar-header {
      padding: 24px 16px 24px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      border-bottom: 1px solid var(--border);
    }
    .sidebar-logo { width: 168px; height: auto; display: block; filter: brightness(1.8) drop-shadow(0 2px 12px rgba(224,148,72,.14)); }
    .sidebar-nav {
      flex: 1; padding: 12px 12px 12px;
      display: flex; flex-direction: column; gap: 4px;
    }
    .sidebar-section-label {
      font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em;
      text-transform: uppercase; color: var(--faint);
      padding: 16px 12px 4px; user-select: none;
    }
    .sidebar-nav > .sidebar-section-label:first-child { padding-top: 4px; }
    .tab {
      position: relative;
      display: flex; align-items: center; gap: 12px;
      padding: 8px 12px; border-radius: var(--r-md);
      font-size: var(--fs-sm); font-weight: 700;
      color: var(--text-dim); cursor: pointer;
      user-select: none; white-space: nowrap;
      border: none; background: transparent;
      transition: background .15s, color .15s;
    }
    .tab svg { flex-shrink: 0; width: 17px; height: 17px; opacity: .85; color: var(--muted); transition: opacity .15s, color .15s; }
    .tab:hover { color: var(--text); background: rgba(236,217,189,.05); }
    .tab:hover svg { opacity: 1; color: var(--text-dim); }
    .tab.active {
      color: var(--accent-strong);
      background: linear-gradient(90deg, rgba(224,148,72,.16), rgba(224,148,72,.05) 85%);
    }
    .tab.active::before {
      content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
      border-radius: 3px; background: var(--accent);
    }
    .tab.active svg { opacity: 1; color: var(--accent); }
    .sidebar-divider { height: 1px; background: var(--border); margin: 12px 14px; }
    .sidebar-bottom {
      padding: 12px 16px 16px; flex-shrink: 0;
      border-top: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 8px;
      background: rgba(0,0,0,.18);
    }
    .sidebar-meta { display: flex; flex-direction: column; gap: 4px; }
    .badge-mes {
      background: var(--accent-bg); border: 1px solid rgba(224,148,72,.28);
      color: var(--accent-strong); border-radius: var(--r-sm); padding: 4px 12px;
      font-size: var(--fs-sm); font-weight: 700; display: inline-block; text-align: center;
      letter-spacing: .01em;
    }
    .update-info { font-size: var(--fs-xs); color: var(--faint); padding: 0 4px; }
    .sidebar-user-info {
      font-size: var(--fs-sm); font-weight: 700; color: var(--text-dim);
      padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
    }
    .logout-btn {
      width: 100%; text-align: center;
      background: transparent; border: 1px solid var(--border2);
      color: var(--muted); border-radius: var(--r-sm); padding: 8px 12px;
      font-size: var(--fs-sm); font-weight: 700; font-family: inherit; cursor: pointer;
      transition: color .15s, background .15s, border-color .15s;
    }
    .logout-btn:hover { color: var(--red); background: var(--red-bg); border-color: rgba(242,125,114,.3); }

    /* ── App body / main ────────────────────────────────────────────────────────── */
    .app-body {
      margin-left: 260px; min-height: 100vh;
      background: radial-gradient(1100px 500px at 80% -8%, rgba(224,148,72,.045), transparent 60%);
    }
    main { max-width: 1480px; margin: 0 auto; padding: 32px 48px 48px; }
    .tab-content { display: none; }
    .tab-content.active { display: block; animation: tabIn .22s ease; }
    @keyframes tabIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

    /* ── Cabeçalho de página ────────────────────────────────────────────────────── */
    .page-head {
      display: flex; align-items: flex-end; justify-content: space-between;
      gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
      padding-bottom: 16px; border-bottom: 1px solid var(--border);
    }
    .page-title {
      font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.025em;
      color: var(--text); line-height: 1.2;
    }
    .page-title::before {
      content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 3px;
      background: var(--accent); margin-right: 11px; vertical-align: 2px;
      box-shadow: 0 0 12px rgba(224,148,72,.55);
    }
    .page-desc { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; max-width: 640px; }

    /* ── KPI Cards ──────────────────────────────────────────────────────────────── */
    .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
    .cards-inicio { grid-template-columns: repeat(5, 1fr); }
    @media (max-width: 1100px) { .cards, .cards-inicio { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 440px)  { .cards, .cards-inicio { grid-template-columns: 1fr; } }

    .card {
      position: relative; overflow: hidden;
      background: linear-gradient(180deg, var(--surface2), var(--surface) 80%);
      border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 16px 24px 16px;
      box-shadow: var(--shadow-sm);
      transition: border-color .2s, transform .2s, box-shadow .2s;
    }
    .card:hover { border-color: var(--border2); transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, var(--border3), transparent 60%);
      opacity: .6;
    }
    .card.green::before { background: linear-gradient(90deg, var(--green), transparent 75%); opacity: .8; }
    .card.red::before   { background: linear-gradient(90deg, var(--red), transparent 75%); opacity: .8; }
    .card.brown::before { background: linear-gradient(90deg, var(--accent), transparent 75%); opacity: .9; }

    .card-label {
      font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
      text-transform: uppercase; letter-spacing: .09em; margin-bottom: 12px;
    }
    .card-value, .card-val {
      font-size: var(--fs-display); font-weight: 800; color: var(--text);
      line-height: 1.05; letter-spacing: -.03em;
    }
    .card.green .card-value { color: var(--green); }
    .card.red   .card-value { color: var(--red); }
    .card.brown .card-value { color: var(--accent-strong); }
    .card-val.neg { color: var(--red); }
    .card-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 8px; }

    /* ── Cards SM ───────────────────────────────────────────────────────────────── */
    .cards-sm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
    @media (max-width: 720px) { .cards-sm { grid-template-columns: 1fr 1fr; } }
    .card-sm {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-md); padding: 16px 16px;
      display: flex; flex-direction: column; gap: 4px;
      transition: border-color .2s;
    }
    .card-sm:hover { border-color: var(--border2); }
    .card-sm-label {
      font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
      text-transform: uppercase; letter-spacing: .08em;
    }
    .card-sm-value { font-size: var(--fs-lg); font-weight: 700; color: var(--text); letter-spacing: -.02em; }

    /* ── Grids ──────────────────────────────────────────────────────────────────── */
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
    @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
    .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
    @media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }

    /* ── Section (card de conteúdo) ─────────────────────────────────────────────── */
    .section {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 24px 24px; margin-bottom: 16px;
      box-shadow: var(--shadow-sm);
    }
    .section-title {
      font-size: var(--fs-md); font-weight: 700; color: var(--text);
      letter-spacing: -.015em; margin-bottom: 16px;
      display: flex; align-items: center; gap: 8px;
    }
    .section-title::before {
      content: ''; width: 3px; height: 15px; border-radius: 3px;
      background: var(--accent); flex-shrink: 0; opacity: .9;
    }

    /* ── Categoria rows (Início) ────────────────────────────────────────────────── */
    .cat-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--border); }
    .cat-row:last-of-type { border-bottom: none; }
    .cat-name { font-size: var(--fs-md); font-weight: 700; color: var(--text-dim); }
    .cat-r    { text-align: right; }
    .cat-pago { font-size: var(--fs-md); font-weight: 700; color: var(--green); }
    .cat-pend { font-size: var(--fs-xs); color: var(--red); margin-top: 4px; }
    .cat-un   { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }

    /* ── Pendentes preview (Início) ─────────────────────────────────────────────── */
    .pend-preview { display: flex; flex-direction: column; gap: 8px; }
    .pend-item {
      padding: 12px 12px; border-radius: var(--r-md);
      background: var(--surface2); border: 1px solid var(--border);
      border-left: 3px solid var(--red);
      transition: border-color .15s;
    }
    .pend-item:hover { border-color: var(--border2); border-left-color: var(--red); }
    .pend-hd   { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
    .pend-nome { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
    .pend-tot  { font-size: var(--fs-sm); font-weight: 700; color: var(--red); }
    .pend-itens{ display: flex; flex-wrap: wrap; gap: 4px; }
    .pill {
      background: var(--surface3); border: 1px solid var(--border);
      border-radius: 999px; padding: 4px 8px; font-size: var(--fs-xs); color: var(--text-dim);
    }

    /* ── Pendentes — cards grandes ──────────────────────────────────────────────── */
    /* linha de indicadores (topo da aba Pedidos) */
    .ped-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
    .ped-stat {
      background: var(--surface); border: 1px solid var(--border2); border-radius: var(--r-md);
      padding: 12px 16px; display: flex; flex-direction: column; gap: 4px;
    }
    .ped-stat-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
    .ped-stat-val { font-size: var(--fs-xl); font-weight: 700; color: var(--text); letter-spacing: -.02em; line-height: 1; }
    .ped-stat-val.red { color: var(--red); }
    .ped-stat-val.green { color: var(--green); }
    @media (max-width: 720px) { .ped-stats { grid-template-columns: 1fr; } }

    /* subnav Pedidos | Clientes */
    .ped-subnav { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--border2);
      border-radius: var(--r-md); padding: 4px; margin-bottom: 16px; }
    .ped-pill { display: inline-flex; align-items: center; gap: 8px; border: none; background: transparent;
      color: var(--muted); font-family: inherit; font-size: var(--fs-sm); font-weight: 700; padding: 8px 16px;
      border-radius: calc(var(--r-md) - 3px); cursor: pointer; transition: background .15s, color .15s; }
    .ped-pill:hover { color: var(--text); }
    .ped-pill.active { background: var(--accent-bg); color: var(--accent); }
    .ped-pill .badge-notif { margin-left: 0; }
    .ped-pane { display: none; }
    .ped-pane.show { display: block; }

    /* grade de cards de pendência */
    .pend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
    .pend-card2 {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-md); padding: 16px 16px;
      display: flex; flex-direction: column;
      transition: border-color .15s, box-shadow .15s, transform .12s;
    }
    .pend-card2:hover { border-color: var(--border2); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
    .pend-card2-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; }
    .pend-card2-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .pend-av {
      width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
      background: var(--accent-bg); color: var(--accent); display: grid; place-items: center;
      font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase;
    }
    .pend-card2-nome { font-size: var(--fs-md); font-weight: 700; color: var(--text); letter-spacing: -.01em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pend-card2-total { font-size: var(--fs-md); font-weight: 700; color: var(--red); flex-shrink: 0; }
    .pend-card2-itens { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
    .pend-itm {
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: var(--r-sm); padding: 4px 8px; font-size: var(--fs-sm); color: var(--text-dim);
    }
    .pend-card2-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .pend-select {
      background: var(--surface2); border: 1px solid var(--border2);
      color: var(--text); padding: 8px 8px; border-radius: var(--r-sm);
      font-size: var(--fs-sm); font-family: inherit; outline: none;
      flex: 1; min-width: 140px; max-width: 220px;
      transition: border-color .15s, box-shadow .15s; cursor: pointer;
    }
    .pend-select:hover { border-color: var(--border3); }
    .pend-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
    .pend-select option { background: var(--surface2); }

    /* ── Diário semanal ─────────────────────────────────────────────────────────── */
    .diario-sem { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-bottom: 12px; }
    .diario-sem-hd {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 16px; background: var(--surface2); cursor: pointer; gap: 8px;
      transition: background .15s;
    }
    .diario-sem-hd:hover { background: var(--surface3); }
    .diario-sem-titulo { font-weight: 700; font-size: var(--fs-md); letter-spacing: -.01em; }
    .diario-sem-badge {
      font-size: var(--fs-xs); font-weight: 700; padding: 4px 8px; border-radius: 999px;
      background: var(--surface3); color: var(--muted); border: 1px solid var(--border);
    }
    .diario-sem-badge.analisado { background: var(--accent-bg); color: var(--accent-strong); border-color: rgba(224,148,72,.25); }
    .diario-sem-body { padding: 16px; display: none; border-top: 1px solid var(--border); }
    .diario-sem-body.open { display: block; }
    .diario-nota { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 12px; margin-bottom: 8px; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-dim); }
    .diario-nota-dt { font-size: var(--fs-xs); color: var(--accent); margin-bottom: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
    .diario-analise {
      background: linear-gradient(180deg, rgba(224,148,72,.06), transparent), var(--surface2);
      border: 1px solid rgba(224,148,72,.22); border-radius: var(--r-md);
      padding: 12px 16px; margin-top: 12px; font-size: var(--fs-sm); line-height: 1.65; white-space: pre-wrap;
      color: var(--text-dim);
    }

    /* ── Botões ─────────────────────────────────────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 4px;
      padding: 8px 16px; border-radius: var(--r-sm); border: 1px solid transparent;
      font-size: var(--fs-sm); font-weight: 700; font-family: inherit; line-height: 1.2;
      cursor: pointer; white-space: nowrap; user-select: none;
      transition: filter .15s, background .15s, border-color .15s, color .15s, transform .08s;
      letter-spacing: .01em;
    }
    .btn:active { transform: translateY(1px); }
    .btn:disabled { opacity: .4; cursor: not-allowed; }
    .btn-brown {
      background: linear-gradient(180deg, var(--accent-strong), var(--accent) 45%, #d3843a);
      color: #251503; font-weight: 700;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 4px rgba(0,0,0,.3);
    }
    .btn-brown:hover { filter: brightness(1.08); }
    .btn-red { background: var(--red-bg); color: var(--red); border-color: rgba(242,125,114,.25); }
    .btn-red:hover { background: rgba(242,125,114,.18); border-color: rgba(242,125,114,.4); }
    .btn-ghost { background: transparent; border-color: var(--border2); color: var(--text-dim); }
    .btn-ghost:hover { background: var(--surface2); border-color: var(--border3); color: var(--text); }
    .btn-ico { background: none; border: none; cursor: pointer; border-radius: 6px; transition: color .15s, background .15s; }
    .btn-ico:hover { background: var(--surface3); color: var(--text) !important; }

    /* ── Formulários ────────────────────────────────────────────────────────────── */
    .form-grid { display: flex; flex-direction: column; gap: 16px; }
    .form-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .form-label {
      font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
      text-transform: uppercase; letter-spacing: .07em; display: block; margin-bottom: 8px;
    }
    .form-input {
      width: 100%; background: var(--surface2); border: 1px solid var(--border2); color: var(--text);
      padding: 8px 12px; border-radius: var(--r-sm); font-size: var(--fs-md); font-family: inherit; outline: none;
      transition: border-color .15s, box-shadow .15s, background .15s;
    }
    .form-input:hover { border-color: var(--border3); }
    .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
    .form-input::placeholder { color: var(--faint); }
    .form-input option { background: var(--surface2); }
    textarea.form-input { resize: vertical; min-height: 70px; line-height: 1.55; }

    .form-select {
      width: 100%; color: var(--text); background-color: var(--surface2);
      border: 1px solid var(--border2); height: var(--ctl-h);
      padding: 0 32px 0 12px; border-radius: var(--r-sm); font-size: var(--fs-sm);
      font-family: inherit; outline: none; cursor: pointer;
      appearance: none; -webkit-appearance: none; -moz-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e09448' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 11px center; background-size: 13px;
      transition: border-color .15s, box-shadow .15s;
    }
    .form-select:hover  { border-color: var(--border3); }
    .form-select:focus  { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
    .form-select option { background: var(--surface2); color: var(--text); }

    .task-card {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--accent-bg); border: 1px solid rgba(224,148,72,.3);
      border-radius: var(--r-md); padding: 8px 8px 8px 12px;
    }
    .task-card-nome { font-weight: 700; font-size: var(--fs-sm); color: var(--text); }
    .task-card-meta {
      font-size: var(--fs-xs); font-weight: 700; color: var(--accent-strong);
      background: rgba(224,148,72,.14); border-radius: 5px; padding: 4px 8px; white-space: nowrap;
    }
    .task-card-del  { background: none; border: none; color: var(--muted); cursor: pointer; font-size: var(--fs-md); line-height: 1; padding: 0 4px; transition: color .15s; }
    .task-card-del:hover { color: var(--red); }
    .form-total {
      background: var(--accent-bg); border: 1px solid rgba(224,148,72,.25);
      padding: 8px 12px; border-radius: var(--r-sm);
      font-size: var(--fs-md); font-weight: 700; color: var(--accent-strong);
    }

    /* ── Filtros / toolbars ─────────────────────────────────────────────────────── */
    .filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
    .filtros select, .filtros input {
      background: var(--surface2); border: 1px solid var(--border2); color: var(--text);
      padding: 0 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-family: inherit;
      outline: none; height: var(--ctl-h); transition: border-color .15s, box-shadow .15s;
    }
    .filtros select { cursor: pointer; }
    .filtros select:hover, .filtros input:hover { border-color: var(--border3); }
    .filtros select:focus, .filtros input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
    .filtros input { width: 200px; }
    .filtros input::placeholder { color: var(--faint); }
    .filtros select option { background: var(--surface2); }

    /* ── Tabelas ────────────────────────────────────────────────────────────────── */
    .tbl-wrap {
      overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md);
      background: rgba(0,0,0,.12);
    }
    table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
    table.tbl thead th {
      background: var(--surface2); color: var(--muted);
      font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
      padding: 12px 12px; text-align: left; border-bottom: 1px solid var(--border2); white-space: nowrap;
      position: sticky; top: 0; z-index: 1;
    }
    table.tbl thead th:first-child { padding-left: 16px; }
    table.tbl tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
    table.tbl tbody tr:last-child { border-bottom: none; }
    table.tbl tbody tr:hover { background: rgba(236,217,189,.035); }
    table.tbl tbody td { padding: 12px 12px; white-space: nowrap; color: var(--text-dim); }
    table.tbl tbody td:first-child { padding-left: 16px; }
    table.tbl td.dim   { color: var(--muted); }
    table.tbl td.num   { color: var(--text); }
    table.tbl td.pos   { color: var(--green); font-weight: 700; }
    table.tbl td.neg   { color: var(--red); }
    table.tbl td.brown { color: var(--accent-strong); font-weight: 700; }
    table.tbl tfoot td { padding: 12px 12px; border-top: 1px solid var(--border2); background: var(--surface2); }

    /* ── Badges ─────────────────────────────────────────────────────────────────── */
    .badge {
      display: inline-flex; align-items: center; gap: 4px;
      border-radius: 999px; padding: 4px 8px;
      font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
      line-height: 1.4;
    }
    .badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
    .badge-pago      { background: var(--green-bg); color: var(--green); border: 1px solid rgba(76,201,126,.22); }
    .badge-pendente  { background: var(--red-bg);   color: var(--red);   border: 1px solid rgba(242,125,114,.22); }
    .badge-st        { min-width: 92px; justify-content: center; }
    .badge-cancelado { background: rgba(154,145,132,.08); color: var(--muted); border: 1px solid var(--border2); }
    .badge-fixo      { background: var(--indigo-bg); color: var(--indigo); border: 1px solid rgba(140,150,245,.22); }
    .badge-variavel  { background: var(--accent-bg); color: var(--accent-strong); border: 1px solid rgba(224,148,72,.25); }
    .badge-urgente   { background: rgba(242,125,114,.13); color: var(--red);   border: 1px solid rgba(242,125,114,.3); }
    .badge-alta      { background: rgba(251,146,60,.11);  color: #f9a45c;      border: 1px solid rgba(251,146,60,.28); }
    .badge-media     { background: var(--indigo-bg);      color: var(--indigo); border: 1px solid rgba(140,150,245,.22); }
    .badge-baixa     { background: rgba(154,145,132,.08); color: var(--muted);  border: 1px solid var(--border2); }
    .badge-andamento { background: var(--amber-bg);       color: var(--amber);  border: 1px solid rgba(226,181,62,.25); }

    .dem-atrasada td { color: var(--red) !important; }
    .dem-atrasada .badge { opacity: .9; }
    .dem-concluida td { color: var(--green); }
    .dem-concluida td strong { color: var(--green); }
    .dem-concluida td.dim { color: var(--green); opacity: .65; }

    .prog-bar-wrap { height: 6px; background: var(--surface3); border-radius: 4px; margin-top: 8px; overflow: hidden; }
    .prog-bar { height: 100%; background: linear-gradient(90deg, var(--green), #6ee7a0); border-radius: 4px; transition: width .4s ease; }

    /* ── View toggle ────────────────────────────────────────────────────────────── */
    .view-toggle {
      display: flex; gap: 4px; background: var(--surface2);
      border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px;
    }
    .view-toggle-btn {
      padding: 4px 12px; border-radius: 5px; font-size: var(--fs-sm); font-weight: 700;
      cursor: pointer; border: none; background: transparent; color: var(--muted);
      font-family: inherit; transition: all .15s;
    }
    .view-toggle-btn:hover { color: var(--text-dim); }
    .view-toggle-btn.active { background: var(--surface3); color: var(--text); box-shadow: var(--shadow-sm); }

    /* ── Calendário ─────────────────────────────────────────────────────────────── */
    .cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    .cal-nav {
      background: transparent; border: 1px solid var(--border2); color: var(--text-dim);
      border-radius: var(--r-sm); width: 32px; height: 32px; cursor: pointer; font-size: var(--fs-md);
      transition: background .15s, border-color .15s;
    }
    .cal-nav:hover { background: var(--surface3); border-color: var(--border3); }
    .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
    .cal-dow  { text-align: center; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 4px 4px; }
    .cal-day  {
      min-height: 80px; padding: 4px; border-radius: var(--r-sm);
      border: 1px solid var(--border); background: var(--surface2); overflow: hidden;
      transition: border-color .15s;
    }
    .cal-day:hover { border-color: var(--border2); }
    .cal-day-empty { background: transparent; border-color: transparent; min-height: 80px; }
    .cal-today { border-color: var(--accent) !important; background: linear-gradient(180deg, rgba(224,148,72,.08), transparent), var(--surface2); }
    .cal-day-num { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); display: block; margin-bottom: 4px; }
    .cal-today .cal-day-num { color: var(--accent-strong); }
    .cal-pill {
      font-size: var(--fs-xs); padding: 4px 4px; border-radius: 4px; margin-bottom: 4px;
      cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      font-weight: 700; line-height: 1.5;
    }
    .cal-pill:hover { filter: brightness(1.25); }
    .cal-pill-urgente { background: rgba(242,125,114,.16); color: var(--red); }
    .cal-pill-alta    { background: rgba(251,146,60,.14);  color: #f9a45c; }
    .cal-pill-media   { background: var(--indigo-bg);      color: var(--indigo); }
    .cal-pill-baixa   { background: rgba(154,145,132,.1);  color: var(--muted); }
    .cal-pill-done    { background: var(--green-bg);       color: var(--green); }
    .cal-mais { font-size: var(--fs-xs); color: var(--faint); padding: 1px 4px; }
    .cal-pill[draggable=true] { cursor: grab; }
    .cal-pill[draggable=true]:active { cursor: grabbing; }
    .cal-day.cal-drop-hover { outline: 2px dashed var(--accent); outline-offset: -2px; background: rgba(224,148,72,.08); }

    /* ── Log / atividade ────────────────────────────────────────────────────────── */
    .log-wrap { max-height: 240px; overflow-y: auto; padding-right: 4px; }
    .log-item { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border); }
    .log-item:last-child { border-bottom: none; }
    .log-dot  { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 4px; box-shadow: 0 0 0 3px rgba(224,148,72,.12); }
    .log-ts   { font-size: var(--fs-xs); color: var(--faint); flex-shrink: 0; white-space: nowrap; min-width: 110px; padding-top: 1px; }
    .log-txt  { font-size: var(--fs-sm); color: var(--text-dim); }
    .log-arrow { color: var(--faint); margin: 0 4px; }
    .log-nota { background: var(--surface2); border-left: 2px solid var(--accent); border-radius: 6px; padding: 8px 8px; }

    .det-status-btn {
      padding: 8px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 700;
      cursor: pointer; border: 1px solid var(--border2); background: transparent; color: var(--text-dim);
      font-family: inherit; transition: all .15s;
    }
    .det-status-btn:hover { border-color: var(--border3); color: var(--text); background: var(--surface2); }
    .det-status-btn.active-pendente  { background: var(--red-bg);   color: var(--red);   border-color: rgba(242,125,114,.35); }
    .det-status-btn.active-andamento { background: var(--amber-bg); color: var(--amber); border-color: rgba(226,181,62,.35); }
    .det-status-btn.active-concluida { background: var(--green-bg); color: var(--green); border-color: rgba(76,201,126,.35); }
    .det-status-btn.active-cancelada { background: rgba(154,145,132,.1); color: var(--muted); border-color: var(--border3); }

    .sla-chip { font-size: var(--fs-xs); padding: 4px 8px; border-radius: 999px; font-weight: 700; white-space: nowrap; letter-spacing: .03em; }
    .sla-ok       { background: var(--green-bg); color: var(--green); }
    .sla-atrasada { background: var(--red-bg);   color: var(--red); }
    .sla-hoje     { background: var(--amber-bg); color: var(--amber); }
    .sla-emdia    { background: var(--surface3); color: var(--text-dim); }
    .sla-neutra   { background: rgba(154,145,132,.1); color: var(--muted); }

    .proto-tag {
      font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: var(--fs-xs); font-weight: 700;
      color: var(--accent-strong); background: var(--accent-bg); border: 1px solid rgba(224,148,72,.2);
      padding: 4px 8px; border-radius: 5px; white-space: nowrap;
    }
    .tbl tbody tr.dem-row { cursor: pointer; }
    .tbl tbody tr.dem-row:hover td { background: rgba(236,217,189,.045); }

    /* ── Responsável (avatar) ─────────────────────────────────────────────────────── */
    .resp-cell { display: inline-flex; align-items: center; gap: 8px; }
    .avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-bg); color: var(--accent-strong);
      display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; flex: none; }
    .avatar.none { background: rgba(255,255,255,.05); color: var(--muted); }

    /* ── Recorrentes ──────────────────────────────────────────────────────────────── */
    .rec-row { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 16px; align-items: center;
      padding: 16px 4px; border-bottom: 1px solid var(--border); }
    .rec-row:last-child { border-bottom: 0; }
    .rec-row.pausada { opacity: .55; }
    .rec-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .rec-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-bg); color: var(--accent-strong);
      display: grid; place-items: center; flex: none; }
    .rec-t { font-weight: 700; }
    .rec-meta { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }
    .rec-hora { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
    .dias-chips { display: flex; gap: 4px; }
    .dia-chip { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: var(--fs-xs);
      font-weight: 700; background: rgba(255,255,255,.04); color: var(--muted); border: 1px solid var(--border); }
    .dia-chip.on { background: var(--accent); color: #1a0f08; border-color: var(--accent); }
    /* seletor de dias no modal (clicável) */
    .dias-sel { display: flex; gap: 4px; }
    .dias-sel .dia-chip { width: 34px; height: 34px; cursor: pointer; font-size: var(--fs-sm); user-select: none; }
    .switch-rec { width: 40px; height: 22px; border-radius: 20px; background: var(--accent); position: relative; cursor: pointer; flex: none; border: 0; padding: 0; }
    .switch-rec::after { content: ""; position: absolute; top: 2px; left: 20px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .15s; }
    .switch-rec.off { background: rgba(255,255,255,.08); }
    .switch-rec.off::after { left: 2px; background: var(--muted); }
    .rec-note { font-size: var(--fs-sm); color: var(--muted); background: var(--accent-bg); border: 1px solid rgba(224,148,72,.2);
      border-radius: 9px; padding: 8px 12px; }
    @media (max-width: 720px) { .rec-row { grid-template-columns: 1fr; gap: 8px; } }

    .tbl-footer { font-size: var(--fs-sm); color: var(--muted); margin-top: 12px; padding: 0 4px; }
    .tbl-footer b { color: var(--text-dim); font-weight: 700; }

    /* ── Relatório / cabeçalhos com select ──────────────────────────────────────── */
    .rel-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
    .rel-hd select, .page-head select {
      background: var(--surface2); border: 1px solid var(--border2); color: var(--text);
      padding: 0 12px; height: var(--ctl-h); border-radius: var(--r-sm); font-size: var(--fs-sm);
      font-family: inherit; outline: none; cursor: pointer;
      transition: border-color .15s, box-shadow .15s;
    }
    .rel-hd select:hover, .page-head select:hover { border-color: var(--border3); }
    .rel-hd select:focus, .page-head select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
    .rel-hd select option, .page-head select option { background: var(--surface2); }

    /* ── Subnavegação (pílulas) ─────────────────────────────────────────────────── */
    .fin-subnav { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
    .fin-pill {
      background: transparent; color: var(--muted); border: 1px solid var(--border2);
      border-radius: 999px; padding: 8px 16px; font-size: var(--fs-sm); font-weight: 700;
      cursor: pointer; font-family: inherit;
      transition: color .15s, background .15s, border-color .15s;
    }
    .fin-pill:hover { color: var(--text); border-color: var(--border3); background: var(--surface2); }
    .fin-pill.active {
      background: linear-gradient(180deg, var(--accent-strong), var(--accent));
      color: #251503; border-color: transparent; font-weight: 700;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 6px rgba(224,148,72,.25);
    }

    /* ── Cofre ──────────────────────────────────────────────────────────────────── */
    .cofre-seal {
      display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
      background: transparent; border: none; color: var(--text-dim); border-radius: var(--r-md);
      padding: 8px 12px; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; font-family: inherit;
      transition: background .15s, color .15s;
    }
    .cofre-seal svg { width: 17px; height: 17px; color: var(--muted); }
    .cofre-seal:hover { background: rgba(236,217,189,.05); color: var(--text); }
    .cofre-seal.aberto { color: var(--accent-strong); }
    .cofre-seal.aberto svg { color: var(--accent); }
    .borrado { filter: blur(7px); pointer-events: none; user-select: none; }

    /* ── Skeleton / barras ──────────────────────────────────────────────────────── */
    .fin-skeleton > div {
      height: 14px; border-radius: 6px; margin: 12px 0;
      background: linear-gradient(90deg, var(--surface3) 25%, rgba(236,217,189,.09) 42%, var(--surface3) 60%);
      background-size: 220% 100%; animation: shimmer 1.4s ease-in-out infinite;
    }
    @keyframes shimmer { from { background-position: 130% 0; } to { background-position: -80% 0; } }
    .est-bar-wrap { height: 8px; background: var(--surface3); border-radius: 5px; overflow: hidden; max-width: 220px; }
    .est-bar { height: 100%; border-radius: 5px; transition: width .25s ease; }

    /* ── Tabela de relatório ────────────────────────────────────────────────────── */
    table.rel { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
    table.rel thead th {
      background: var(--surface2); color: var(--muted);
      font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
      padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border2);
    }
    table.rel tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-dim); }
    table.rel tbody tr:hover td { background: rgba(236,217,189,.03); }
    table.rel tbody tr:last-child td {
      border-bottom: none; font-weight: 700; color: var(--text);
      background: var(--surface2); border-top: 1px solid var(--border2);
    }
    table.rel .pos { color: var(--green); }
    table.rel .neg { color: var(--red); }

    /* ── Config ─────────────────────────────────────────────────────────────────── */
    .cfg-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 24px 24px; max-width: 440px;
      box-shadow: var(--shadow-sm);
    }
    .cfg-card h2 { font-size: var(--fs-md); font-weight: 700; letter-spacing: -.015em; margin-bottom: 8px; }
    .cfg-card p  { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 16px; line-height: 1.65; max-width: 720px; }
    .mes-label { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
    .mes-val   { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em; color: var(--text); margin-bottom: 16px; }

    /* ── Roles ──────────────────────────────────────────────────────────────────── */
    body.role-viewer .editor-plus,
    body.role-viewer .admin-only { display: none !important; }
    body.role-editor .admin-only { display: none !important; }
    body.role-viewer #nav-config-divider,
    body.role-editor #nav-config-divider { display: none !important; }

    /* ── Usuários ───────────────────────────────────────────────────────────────── */
    .usr-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-bottom: 16px; }
    .usr-table th {
      background: var(--surface2); color: var(--muted);
      font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
      padding: 12px 12px; text-align: left; border-bottom: 1px solid var(--border2);
    }
    .usr-table td { padding: 12px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-dim); }
    .usr-table tr:last-child td { border-bottom: none; }
    .usr-table tr:hover td { background: rgba(236,217,189,.03); }
    .badge-role { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .03em; }
    .badge-role.admin  { background: var(--accent-bg); color: var(--accent-strong); border: 1px solid rgba(224,148,72,.25); }
    .badge-role.editor { background: var(--green-bg); color: var(--green); border: 1px solid rgba(76,201,126,.2); }
    .badge-role.viewer { background: var(--surface3); color: var(--muted); border: 1px solid var(--border2); }
    .badge-ativo   { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 6px; box-shadow: 0 0 0 3px var(--green-bg); }
    .badge-inativo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-right: 6px; box-shadow: 0 0 0 3px var(--red-bg); }

    /* ── Badge de notificação (nav) ─────────────────────────────────────────────── */
    .badge-notif {
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--red); color: #fff; font-size: var(--fs-xs); font-weight: 700;
      min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
      margin-left: auto; line-height: 1; flex-shrink: 0;
      box-shadow: 0 0 0 3px rgba(242,125,114,.15);
    }

    /* ── Cadastros pendentes ────────────────────────────────────────────────────── */
    .pend-reg-card {
      background: var(--surface); border: 1px solid rgba(242,125,114,.22);
      border-left: 3px solid var(--red);
      border-radius: var(--r-md); padding: 12px 16px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; margin-bottom: 8px;
    }
    .pend-reg-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .pend-reg-tg   { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
    .pend-reg-data { font-size: var(--fs-sm); color: var(--muted); }

    /* ── Toast ──────────────────────────────────────────────────────────────────── */
    #toast {
      position: fixed; bottom: 22px; right: 22px;
      padding: 12px 16px; border-radius: var(--r-md);
      font-size: var(--fs-sm); font-weight: 700;
      box-shadow: var(--shadow-lg);
      opacity: 0; transform: translateY(10px) scale(.97);
      transition: opacity .22s ease, transform .22s ease;
      pointer-events: none; z-index: 200; max-width: 320px;
      border: 1px solid var(--border2);
    }
    #toast.show    { opacity: 1; transform: translateY(0) scale(1); }
    #toast.success { background: var(--elevated); color: var(--green); border-color: rgba(76,201,126,.3); border-left: 3px solid var(--green); }
    #toast.error   { background: var(--elevated); color: var(--red); border-color: rgba(242,125,114,.3); border-left: 3px solid var(--red); }
    #toast.warning { background: var(--elevated); color: var(--amber); border-color: rgba(226,181,62,.3); border-left: 3px solid var(--amber); }

    /* ── Modal ──────────────────────────────────────────────────────────────────── */
    .modal-bg {
      display: none; position: fixed; inset: 0; background: rgba(8,6,4,.7);
      z-index: 100; align-items: center; justify-content: center; padding: 16px;
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }
    .modal-bg.open { display: flex; }
    .modal {
      background: var(--elevated); border: 1px solid var(--border2);
      border-radius: var(--r-xl); padding: 24px 24px 24px; width: 100%; max-width: 420px;
      max-height: calc(100vh - 48px); overflow-y: auto;
      box-shadow: var(--shadow-lg);
      animation: modalIn .18s ease;
    }
    @keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
    .modal h3 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.015em; margin-bottom: 8px; }
    .modal p  { font-size: var(--fs-sm); color: var(--text-dim); margin-bottom: 16px; line-height: 1.6; }
    .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }

    /* ── Produtos ───────────────────────────────────────────────────────────────── */
    .prod-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-bottom: 16px; }
    .prod-table th {
      background: var(--surface2); color: var(--muted);
      font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
      padding: 12px 12px; text-align: left; border-bottom: 1px solid var(--border2);
    }
    .prod-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-dim); }
    .prod-table tr:last-child td { border-bottom: none; }
    .prod-table tr:hover td { background: rgba(236,217,189,.03); }
    .prod-input {
      background: var(--surface2); border: 1px solid var(--border2); color: var(--text);
      padding: 8px 8px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-family: inherit;
      outline: none; width: 100%; transition: border-color .15s, box-shadow .15s;
    }
    .prod-input:hover { border-color: var(--border3); }
    .prod-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
    .prod-actions-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

    /* ── Combobox cliente (Novo Pedido) ─────────────────────────────────────────── */
    .nf-combo { position: relative; }
    .nf-combo-list {
      position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 200;
      background: var(--elevated); border: 1px solid var(--border2);
      border-radius: var(--r-md); max-height: 220px; overflow-y: auto;
      display: none; box-shadow: var(--shadow-lg); padding: 4px;
    }
    .nf-combo-list.open { display: block; }
    .nf-combo-item {
      padding: 8px 12px; font-size: var(--fs-md); cursor: pointer; border-radius: 6px;
      color: var(--text-dim);
      transition: background .1s, color .1s;
    }
    .nf-combo-item:hover { background: var(--accent-bg); color: var(--text); }

    /* ── Linhas de produto (Novo Pedido) ────────────────────────────────────────── */
    .nf-prod-linha {
      display: grid; grid-template-columns: 1fr 68px 120px 36px;
      gap: 8px; align-items: center; margin-bottom: 8px;
    }
    .nf-rem-btn {
      background: transparent; border: 1px solid var(--border2);
      color: var(--muted); border-radius: var(--r-sm); padding: 0;
      height: 36px; width: 36px; cursor: pointer; font-size: var(--fs-lg);
      display: flex; align-items: center; justify-content: center;
      transition: color .15s, border-color .15s, background .15s;
    }
    .nf-rem-btn:hover { color: var(--red); border-color: rgba(242,125,114,.4); background: var(--red-bg); }

    /* ── Estados vazios / carregando ────────────────────────────────────────────── */
    .empty {
      text-align: center; color: var(--muted); font-size: var(--fs-sm); padding: 48px 16px;
      border: 1px dashed var(--border2); border-radius: var(--r-md);
      background: rgba(236,217,189,.015);
    }
    .empty::before {
      content: '◇'; display: block; font-size: var(--fs-xl); color: var(--faint); margin-bottom: 8px;
    }
    .loading { text-align: center; color: var(--muted); padding: 48px 16px; font-size: var(--fs-sm); }
    .loading::before {
      content: ''; display: block; width: 22px; height: 22px; margin: 0 auto 12px;
      border-radius: 50%; border: 2px solid var(--surface3); border-top-color: var(--accent);
      animation: spin .7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    td.loading::before, td.empty::before { display: none; }
    td.empty { border: none; background: transparent; }

    .scroll  { overflow-y: auto; }

    /* ── ApexCharts — polimento visual (só CSS) ─────────────────────────────────── */
    .apexcharts-canvas { font-family: var(--font-body) !important; }
    .apexcharts-gridline { stroke: rgba(236,217,189,.07); }
    .apexcharts-tooltip.apexcharts-theme-dark {
      background: var(--elevated) !important; border: 1px solid var(--border2) !important;
      border-radius: 8px !important; box-shadow: var(--shadow-lg) !important;
    }
    .apexcharts-tooltip-title {
      background: var(--surface3) !important; border-bottom: 1px solid var(--border) !important;
      font-family: var(--font-title) !important; font-weight: 700 !important;
    }
    .apexcharts-legend-text { color: var(--text-dim) !important; }
    .apexcharts-xaxis-label, .apexcharts-yaxis-label { fill: var(--muted) !important; }
    .apexcharts-menu {
      background: var(--elevated) !important; border: 1px solid var(--border2) !important;
      border-radius: 8px !important;
    }
    .apexcharts-menu-item:hover { background: var(--surface3) !important; }

    /* ── Mobile ─────────────────────────────────────────────────────────────────── */
    @media (max-width: 800px) {
      .sidebar {
        position: relative; width: 100%; height: auto;
        flex-direction: row; flex-wrap: wrap;
        border-right: none; border-bottom: 1px solid var(--border);
        overflow: visible; background: var(--sidebar-bg);
      }
      .sidebar-header { padding: 8px 12px; border-bottom: none; border-right: 1px solid var(--border); flex-shrink: 0; }
      .sidebar-logo { height: 26px; width: auto; }
      .sidebar-nav { flex-direction: row; align-items: center; flex: 1; padding: 4px; overflow-x: auto; scrollbar-width: none; gap: 4px; }
      .sidebar-nav::-webkit-scrollbar { display: none; }
      .sidebar-section-label { display: none; }
      .sidebar-divider { display: none; }
      .tab { font-size: var(--fs-sm); padding: 8px 12px; border-radius: var(--r-sm); }
      .tab.active::before { display: none; }
      .tab.active { background: var(--accent-bg); }
      .cofre-seal { width: auto; padding: 8px 12px; }
      .sidebar-bottom {
        flex-direction: row; align-items: center; padding: 4px 12px;
        border-top: none; border-left: 1px solid var(--border);
        gap: 8px; flex-wrap: nowrap; flex-shrink: 0; background: transparent;
      }
      .sidebar-meta { flex-direction: row; align-items: center; gap: 8px; }
      .sidebar-bottom .update-info { display: none; }
      .logout-btn { width: auto; }
      .app-body { margin-left: 0; }
      main { padding: 16px 12px 48px; }
      .page-head { margin-bottom: 16px; padding-bottom: 12px; }
      .page-title { font-size: var(--fs-lg); }
      .cards { grid-template-columns: 1fr 1fr; gap: 8px; }
      .card { padding: 16px 16px 12px; }
      .card-value, .card-val { font-size: var(--fs-xl); }
      .section { padding: 16px 16px; }
      .filtros input { width: 100%; }
      .form-row { grid-template-columns: 1fr; }
      .nf-prod-linha { grid-template-columns: 1fr 56px 96px 36px; }
    }
    @media (max-width: 640px) {
      .modal { min-width: 0 !important; max-width: 100% !important; }
      .cal-day, .cal-day-empty { min-height: 58px; }
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       AJUSTES v4 — preto clean · rail de icones · MAIUSCULAS · sem brilho · +espaco
       (bloco no fim: sobrepoe o design system acima, sem editar cada regra)
       ═══════════════════════════════════════════════════════════════════════════ */
    body { font-size: var(--fs-md); }
    ::selection { background: var(--accent-ring); color: #fff; }

    /* — Sidebar VERTICAL colapsável: aberto = ícone+nome · fechado = só ícone c/ marcador — */
    .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; height: 100vh; z-index: 40;
      flex-direction: column; align-items: stretch; gap: 0; padding: 0;
      background: var(--sidebar-bg); border-right: 1px solid var(--border); border-bottom: none;
      overflow-y: auto; overflow-x: hidden; transition: width .18s ease; }
    .app-body { margin-left: 240px; background: var(--bg); transition: margin-left .18s ease; }
    #app.nav-collapsed .sidebar { width: 76px; }
    #app.nav-collapsed .app-body { margin-left: 76px; }

    .sidebar-header { display: flex; align-items: center; gap: 8px; padding: 16px 16px;
      border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .sidebar-logo { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: block;
      filter: none; flex-shrink: 0; }
    .nav-toggle { margin-left: auto; width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
      background: var(--surface2); border: 1px solid var(--border2); color: var(--text-dim); cursor: pointer;
      display: grid; place-items: center; }
    .nav-toggle svg { width: 15px; height: 15px; transition: transform .18s; }
    #app.nav-collapsed .nav-toggle svg { transform: rotate(180deg); }
    #app.nav-collapsed .sidebar-header { justify-content: center; padding: 16px 0; }
    #app.nav-collapsed .nav-toggle { position: absolute; top: 14px; right: 8px; margin: 0; width: 20px; height: 20px; }

    .sidebar-nav { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 16px 12px; }
    .sidebar-section-label { display: block; margin: 16px 12px 6px; font-size: var(--fs-xs); font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
    .sidebar-nav > .sidebar-section-label:first-child { margin-top: 4px; }
    #app.nav-collapsed .sidebar-section-label { display: none; }
    .sidebar-divider { display: block; width: auto; height: 1px; margin: 10px 12px; background: var(--border); }
    /* empurra Configurações + Cofre pro rodapé do rail (estilo Grafana) */
    #nav-config-divider { margin-top: auto; }

    .tab { position: relative; justify-content: flex-start; gap: 12px; font-size: var(--fs-md); font-weight: 700;
      padding: 8px 12px; width: auto; height: auto; border-radius: 10px; white-space: nowrap; }
    .tab svg { width: 20px !important; height: 20px !important; flex-shrink: 0; opacity: 1; }
    .tab .badge-notif { font-size: var(--fs-xs); margin-left: auto; }
    .tab.active { background: var(--accent-bg); color: var(--accent); }
    .tab.active::before { content: ''; display: block; position: absolute; left: 0; top: 8px; bottom: 8px;
      width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
    .cofre-seal { position: relative; justify-content: flex-start; gap: 12px; font-size: var(--fs-md);
      padding: 8px 12px; width: auto; height: auto; }
    .cofre-seal svg { width: 20px !important; height: 20px !important; }
    /* colapsado: rail arejado estilo Grafana — ícones centralizados, bem espaçados */
    #app.nav-collapsed .sidebar-nav { gap: 8px; padding: 16px 0; }
    #app.nav-collapsed .tab, #app.nav-collapsed .cofre-seal { justify-content: center; gap: 0; font-size: 0; padding: 12px 0; margin: 0 12px; border-radius: 12px; }
    #app.nav-collapsed .sidebar-divider { margin: 6px 16px; }
    #app.nav-collapsed .tab .badge-notif { position: absolute; top: 3px; right: 10px; margin: 0; }

    /* rodapé: mês / usuário / sair */
    .nav-right { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 8px;
      padding: 12px; border-top: 1px solid var(--border); }
    .nav-right .badge-mes { font-size: var(--fs-sm); font-weight: 700; padding: 4px 8px; text-align: center; line-height: 1.3;
      background: var(--surface); border: 1px solid var(--border2); color: var(--text-dim); border-radius: var(--r-md); }
    .nav-right .topbar-user { font-size: var(--fs-sm); font-weight: 700; color: var(--text-dim); text-align: center;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .nav-right .update-info { display: none; }
    .nav-right .logout-btn { width: 100%; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; padding: 8px; }
    #app.nav-collapsed .nav-right .topbar-user,
    #app.nav-collapsed .nav-right .badge-mes { display: none; }
    #app.nav-collapsed .nav-right .logout-btn { font-size: 0; padding: 8px 0; }
    #app.nav-collapsed .nav-right .logout-btn::after { content: '\21B2'; font-size: var(--fs-md); }

    main { padding: 32px 48px 48px; max-width: 1560px; }

    /* — COR: financeiro verde/vermelho · dados, contagens e nomes em branco — */
    .card .card-value, .card-val { color: var(--text) !important; }
    .card.green .card-value { color: var(--green) !important; }
    .card.red .card-value   { color: var(--red)   !important; }
    .card.brown .card-value { color: var(--text)  !important; }
    #c-descontos { color: var(--red)   !important; }
    .card-val.neg { color: var(--red)  !important; }

    /* — KPI estilo proposta: rótulo + ícone no topo — */
    .kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .kpi-top .card-label { margin-bottom: 0; }
    .kpi-ico { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
      background: var(--accent-bg); border: 1px solid var(--border2); color: var(--accent);
      display: grid; place-items: center; }
    .kpi-ico svg { width: 19px; height: 19px; }
    #tab-inicio .cards .card-value { font-size: var(--fs-display); }
    #tab-inicio .grid-2 .section { padding: 24px 24px; }

    /* — Tratamento MAIÚSCULO nos títulos (rótulos já eram) — */
    .page-title, .section-title, .card-value { letter-spacing: .01em; }
    .page-title { text-transform: uppercase; letter-spacing: .02em; font-size: var(--fs-xl); }
    .section-title { text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-sm); }

    /* — Letras maiores nos números — */
    .card-value, .card-val { font-size: var(--fs-display); }
    .card-label { font-size: var(--fs-xs); }
    .card-sm-value { font-size: var(--fs-xl); }

    /* — Sem brilho / gradiente (clean) — */
    .page-title::before { box-shadow: none; width: 9px; height: 9px; }
    .card { background: var(--surface); }
    .card::before { display: none; }
    .card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border2); }
    #login-screen { background: var(--bg); }
    .login-btn, .btn-brown { background: var(--accent); color: #160e09;
      box-shadow: none; }
    .login-btn:hover, .btn-brown:hover { background: var(--accent-strong); filter: none; }
    .form-total, .task-card { background: var(--accent-bg); }
    .diario-analise { background: var(--surface2); }
    .diario-sem-badge.analisado { background: var(--accent-bg); }
    .cal-today { background: var(--surface2); }
    .prog-bar { background: var(--green); }

    /* — Cartões e seções: mais respiro — */
    .card { padding: 24px 24px; }
    .section { padding: 24px 24px; }
    main { padding: 32px 32px 48px; max-width: 1560px; }

    /* ═══════════════════════════════════════════════════════════════════════════
       AJUSTES v5 — limpeza: sem enfeites, caixa normal, badges lisos
       ═════════════════════════════════════════════════════════════════════════ */

    /* — Fora os adornos decorativos (bolinha do título, traço da seção, ponto do badge) — */
    .page-title::before,
    .section-title::before,
    .badge::before { content: none; display: none; }
    .section-title { gap: 0; }

    /* — Caixa normal (só a 1ª maiúscula), sem letter-spacing esticado — */
    .page-title       { text-transform: none; letter-spacing: -.02em; font-size: var(--fs-xl); font-weight: 700; }
    .section-title    { text-transform: none; letter-spacing: -.01em; font-size: var(--fs-md); font-weight: 700; }
    .card-label,
    .card-sm-label,
    .ped-stat-label   { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: var(--fs-sm); color: var(--muted); }
    table.tbl thead th { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: var(--fs-sm); }
    .sidebar-section-label { text-transform: none; letter-spacing: .01em; font-weight: 700; font-size: var(--fs-xs); }
    .nav-right .logout-btn { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); }
    .form-label       { text-transform: none; letter-spacing: 0; font-weight: 700; }

    /* — Badges de status: pílula lisa, sem ponto, sem CAIXA ALTA — */
    .badge {
      gap: 0; border-radius: 7px; padding: 4px 8px;
      font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0;
      text-transform: capitalize;
    }
    .badge-st { min-width: 0; }
    .badge-pago      { background: var(--green-bg); color: var(--green); border-color: transparent; }
    .badge-pendente  { background: var(--red-bg);   color: var(--red);   border-color: transparent; }
    .badge-cancelado, .badge-fixo, .badge-variavel, .badge-urgente,
    .badge-alta, .badge-media, .badge-baixa, .badge-andamento { border-color: transparent; }

    /* — Dado é dado: total do pedido em branco, como os demais valores — */
    table.tbl td.brown { color: var(--text); font-weight: 700; }

    /* ═══════════════════════════════════════════════════════════════════════════
       AJUSTES v6 — tipografia Gilroy/Outfit
       · sem italico em lugar nenhum (dashboard: italico atrapalha leitura em tabela)
       · escala equilibrada: corpo confortavel, titulo e numero com peso
       ═════════════════════════════════════════════════════════════════════════ */

    body, button, input, select, textarea { font-style: normal; }

    /* corpo — um degrau acima do padrão original, sem exagero */
    .page-desc             { font-size: var(--fs-md); }
    .card-sub              { font-size: var(--fs-sm); }
    .card-label,
    .card-sm-label,
    .ped-stat-label        { font-size: var(--fs-sm); }
    .cat-name              { font-size: var(--fs-md); }
    .btn                   { font-size: var(--fs-sm); }
    .filtros select,
    .filtros input         { font-size: var(--fs-sm); }
    table.tbl              { font-size: var(--fs-md); }
    table.tbl thead th     { font-size: var(--fs-sm); }
    .empty, .loading       { font-size: var(--fs-md); }
    .pend-itm              { font-size: var(--fs-sm); }
    .form-label            { font-size: var(--fs-sm); }
    .tab, .cofre-seal      { font-size: var(--fs-md); }
    .sidebar-section-label { font-size: var(--fs-sm); }
    .ped-pill              { font-size: var(--fs-md); }
    .pend-card2-nome       { font-size: var(--fs-md); }

    /* títulos e números: o peso faz a hierarquia */
    h1, h2, h3, h4, .page-title, .section-title { font-weight: 700; }
    .page-title            { font-size: var(--fs-xl); }
    .section-title         { font-size: var(--fs-md); }
    .card-value, .card-val, .card-sm-value, .ped-stat-val,
    .pend-card2-total, .cat-pago,
    table.tbl td.num, table.tbl td.pos, table.tbl td.neg,
    table.tbl td.brown     { font-weight: 700; }

    /* — SIDEBAR: nunca em itálico — */
    .sidebar, .sidebar *   { font-style: normal !important; }

    /* — Coluna Status: centralizada e com largura fixa (Pago e Pendente ocupam o mesmo espaço) — */
    table.tbl thead th.c,
    table.tbl tbody td.c   { text-align: center; }
    .badge-st {
      min-width: 96px; justify-content: center;
      font-size: var(--fs-sm); padding: 4px 8px;
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       AJUSTES v7 — tres familias por papel + rail de icones
       ═════════════════════════════════════════════════════════════════════════ */
    :root {
      --font-title: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;   /* titulos */
      --font-body:  'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;/* textos  */
      --font-num:   'Sora', -apple-system, sans-serif;                        /* numeros = mesma dos titulos */
      --rail: 88px;
    }

    /* TÍTULOS — Sora */
    h1, h2, h3, h4,
    .page-title, .section-title,
    .login-title, .login-brand-body h1,
    .modal-titulo, .modal-title {
      font-family: var(--font-title); font-weight: 700; letter-spacing: -.02em;
    }

    /* NÚMEROS — figuras tabulares (colunas alinham sozinhas, sem virar mono) */
    .card-value, .card-val, .card-sm-value, .ped-stat-val,
    .pend-card2-total, .cat-pago, .cat-pend, .cat-un,
    .badge-mes, .form-total, .mes-val,
    table.tbl td.num, table.tbl td.dim,
    table.tbl td.pos, table.tbl td.neg, table.tbl td.brown {
      font-family: var(--font-num);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      font-feature-settings: 'tnum' 1;
      letter-spacing: -.01em;
    }

    /* — Escala harmônica: o número não pode gritar mais alto que o título — */
    .page-title                              { font-size: var(--fs-xl); }
    .card-value, .card-val,
    #tab-inicio .cards .card-value           { font-size: var(--fs-xl); font-weight: 700; }
    .card-sm-value                           { font-size: var(--fs-lg); font-weight: 700; }
    .ped-stat-val                            { font-size: var(--fs-lg); font-weight: 700; }
    .pend-card2-total                        { font-weight: 700; }

    /* — RAIL: só ícones, sem toggle em cima da logo — */
    .nav-toggle { display: none !important; }

    .sidebar,
    #app.nav-collapsed .sidebar { width: var(--rail); }
    .app-body,
    #app.nav-collapsed .app-body { margin-left: var(--rail); }

    .sidebar-header,
    #app.nav-collapsed .sidebar-header {
      justify-content: center; padding: 16px 0 16px; position: relative;
    }
    .sidebar-logo { width: 46px; height: 46px; }

    .sidebar-nav,
    #app.nav-collapsed .sidebar-nav {
      gap: 8px; padding: 16px 0; align-items: center;
    }
    .sidebar-section-label { display: none !important; }

    .sidebar-divider,
    #app.nav-collapsed .sidebar-divider {
      width: 34px; height: 1px; margin: 10px auto; background: var(--border2); opacity: .7;
    }
    #nav-config-divider { margin-top: auto !important; }

    .tab, .cofre-seal,
    #app.nav-collapsed .tab, #app.nav-collapsed .cofre-seal {
      position: relative; width: 50px; height: 50px; padding: 0; margin: 0;
      display: grid; place-items: center; place-content: center; gap: 0; font-size: 0;
      justify-content: center; align-content: center;  /* anula o flex-start herdado */
      border-radius: 14px; color: var(--muted); background: transparent;
      transition: background .15s, color .15s;
    }
    .tab svg, .cofre-seal svg {
      width: 23px !important; height: 23px !important; opacity: 1; color: inherit;
    }
    .tab:hover, .cofre-seal:hover { background: var(--surface2); color: var(--text); }
    .tab.active { background: var(--accent-bg); color: var(--accent); }
    .tab.active::before {
      content: ''; position: absolute; left: -18px; top: 50%; transform: translateY(-50%);
      width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--accent);
    }
    .cofre-seal.aberto { color: var(--accent); background: var(--accent-bg); }

    /* tooltip do ícone (o nome só aparece no hover) */
    .tab[data-tip]::after, .cofre-seal[data-tip]::after, .logout-btn[data-tip]::after {
      content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%;
      transform: translateY(-50%); white-space: nowrap;
      background: var(--elevated); color: var(--text);
      border: 1px solid var(--border2); border-radius: 8px;
      padding: 4px 8px; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700;
      box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
      transition: opacity .13s; z-index: 60;
    }
    .tab[data-tip]:hover::after, .cofre-seal[data-tip]:hover::after,
    .logout-btn[data-tip]:hover::after { opacity: 1; }

    /* rodapé do rail: só o botão de sair, como ícone */
    .nav-right,
    #app.nav-collapsed .nav-right {
      margin-top: 0; padding: 12px 0 16px; align-items: center;
      border-top: 1px solid var(--border);
    }
    .nav-right .badge-mes,
    .nav-right .topbar-user,
    .nav-right .update-info,
    #app.nav-collapsed .nav-right .badge-mes,
    #app.nav-collapsed .nav-right .topbar-user { display: none !important; }
    .nav-right .logout-btn,
    #app.nav-collapsed .nav-right .logout-btn {
      position: relative; width: 44px; height: 44px; padding: 0; font-size: 0;
      display: grid; place-items: center; border-radius: 12px;
      background: transparent; border: 1px solid var(--border2); color: var(--muted);
    }
    .nav-right .logout-btn::after,
    #app.nav-collapsed .nav-right .logout-btn::after {
      content: attr(data-tip); font-size: var(--fs-sm);   /* anula a seta '↵' do CSS antigo */
    }
    .nav-right .logout-btn svg { width: 19px; height: 19px; }
    .nav-right .logout-btn:hover { background: var(--surface2); color: var(--red); border-color: var(--border3); }
    /* ═══════════════════════════════════════════════════════════════════════════
       SISTEMA VISUAL v5 — flat & espacoso (referencias Linear / Vercel / Stripe)
       So CSS de componentes compartilhados: levanta TODAS as abas de forma
       consistente, sem tocar em markup/ids/JS.
       ═══════════════════════════════════════════════════════════════════════════ */
    :root {
      --surface:  #121110;
      --surface2: #171512;
      --surface3: #201d19;
      --border:   rgba(255,255,255,.055);
      --border2:  rgba(255,255,255,.10);
      --r-md: 11px; --r-lg: 16px; --r-xl: 20px;
    }
    /* Fundo mais limpo, mais respiro na área de conteúdo */
    .app-body { background: radial-gradient(1200px 560px at 82% -10%, rgba(197,132,97,.05), transparent 62%); }
    main { padding: 32px 48px 48px; }

    /* Cabeçalho: título maior, sem a "barrinha"/dot de accent, mais ar */
    .page-head { margin-bottom: 32px; padding-bottom: 24px; }
    .page-title { font-size: var(--fs-display); font-weight: 700; letter-spacing: -.025em; }
    .page-title::before { display: none; }
    .page-desc { font-size: var(--fs-md); margin-top: 8px; line-height: 1.55; }

    /* KPI cards: planos (sem gradiente, sem hover-lift, sem hairline colorida no topo),
       hierarquia de rotulo mais fina e mais espacada, valor com peso contido */
    .cards, .cards-inicio { gap: 16px; margin-bottom: 24px; }
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 24px 24px 24px;
      box-shadow: none;
      transition: border-color .18s ease, background .18s ease;
    }
    .card:hover { transform: none; box-shadow: none; border-color: var(--border2); background: var(--surface2); }
    .card::before { display: none; }
    .card-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .13em; margin-bottom: 16px; color: var(--muted); }
    .card-value, .card-val { font-size: var(--fs-display); font-weight: 700; letter-spacing: -.03em; }
    .card-sub { font-size: var(--fs-sm); margin-top: 12px; }

    /* Painel de conteúdo (section): plano, mais generoso */
    .section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 24px 32px;
      box-shadow: none;
      margin-bottom: 24px;
    }
    .section-title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; margin-bottom: 16px; }
    .section-title::before { display: none; }

    /* Tabela: micro-headers em caixa alta espaçada, linhas com mais ar, divisórias hairline */
    table.tbl { font-size: var(--fs-sm); }
    table.tbl thead th {
      font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
      color: var(--faint); padding: 4px 12px 16px; border-bottom: 1px solid var(--border);
    }
    table.tbl tbody tr { border-bottom: 1px solid var(--border); }
    table.tbl tbody td { padding: 16px 12px; }
    table.tbl tbody tr:hover { background: rgba(197,132,97,.045); }
    .tbl-footer { margin-top: 16px; }

    /* Toggle segmentado (Tabela/Calendário/Recorrentes, subnavs) */
    .view-toggle { background: rgba(0,0,0,.28); border: 1px solid var(--border); border-radius: 11px; padding: 4px; gap: 4px; }
    .view-toggle-btn { border-radius: 8px; padding: 8px 16px; font-weight: 700; color: var(--muted); }
    .view-toggle-btn.active { background: var(--surface3); color: var(--text); box-shadow: inset 0 0 0 1px var(--border2); }

    /* Botões e campos: cantos coerentes, planos */
    .btn { border-radius: 10px; font-weight: 700; }
    .form-select, .form-input { border-radius: 10px; }
    .ped-stat, .card-sm { box-shadow: none; }

    /* Ações de adicionar e filtros no estilo do sidebar: limpos, sem "+"/"▾",
       destacam ao passar o mouse (como um item sendo selecionado). */
    .btn.btn-add {
      background: transparent; border: 1px solid transparent; color: var(--text-dim);
      box-shadow: none; font-weight: 700;
    }
    .btn.btn-add:hover { background: var(--accent-bg); color: var(--accent-strong); border-color: transparent; filter: none; }
    .btn.btn-add:active { transform: none; }

    .sel-flat {
      background-image: none !important; padding-right: 12px!important;
      background-color: transparent !important; border-color: transparent !important;
      color: var(--text-dim) !important; font-weight: 700;
    }
    .sel-flat:hover  { background-color: var(--accent-bg) !important; color: var(--accent-strong) !important; border-color: transparent !important; }
    .sel-flat:focus  { box-shadow: none !important; border-color: transparent !important; }

    /* Tabelas "abertas" em toda a dash: a seção que contém uma tabela perde a caixa,
       e o wrapper da tabela perde borda/fundo — fica so com as divisorias das linhas.
       (Paineis de grafico nao tem <table>, entao continuam em card.) */
    .section:has(table) { background: transparent; border: none; box-shadow: none; padding: 0; }
    .tbl-wrap { border: none !important; background: transparent !important; border-radius: 0 !important; }

    /* Filtros em .filtros (Pedidos etc.) no mesmo estilo limpo dos filtros da Demandas */
    .filtros select {
      appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: none;
      background-color: transparent; border-color: transparent; color: var(--text-dim); font-weight: 700; padding-right: 12px;
    }
    .filtros select:hover { background-color: var(--accent-bg); color: var(--accent-strong); border-color: transparent; }
    .filtros select:focus { box-shadow: none; border-color: transparent; }

    /* ── Lista de opções dos <select> ───────────────────────────────────────────
       O popup nativo do <select> e desenhado pelo sistema operacional: retangulo
       de cantos vivos, azul do SO — destoa de tudo. Aqui ele e substituido por
       uma lista propria, com os mesmos raios/borda/hover do resto da dash
       (mesmo padrao do combobox de cliente, .nf-combo-list). */
    .sel-pop {
      position: fixed; z-index: 300;
      background: var(--elevated); border: 1px solid var(--border2);
      border-radius: var(--r-md); box-shadow: var(--shadow-lg);
      padding: 4px; max-height: 288px; overflow-y: auto; overscroll-behavior: contain;
      animation: selPopIn .12s ease-out;
    }
    @keyframes selPopIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
    .sel-pop-item {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 12px; border-radius: 6px; cursor: pointer;
      font-size: var(--fs-md); color: var(--text-dim); white-space: nowrap;
      transition: background .1s, color .1s;
    }
    .sel-pop-item::before {
      content: ''; flex: none; width: 5px; height: 5px;
      border-radius: 50%; background: transparent;
    }
    .sel-pop-item.is-sel { color: var(--text); font-weight: 700; }
    .sel-pop-item.is-sel::before { background: var(--accent); }
    .sel-pop-item.is-active { background: var(--accent-bg); color: var(--accent-strong); }
    .sel-pop-item.is-dis { opacity: .45; cursor: default; background: transparent; color: var(--text-dim); }

    /* Enquanto a lista está aberta, o gatilho fica marcado como um item ativo */
    select.sel-open {
      border-color: var(--accent) !important;
      background-color: var(--accent-bg) !important;
      color: var(--accent-strong) !important;
      box-shadow: none !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       ABA PRODUTOS — visao de custos, cartoes e painel do produto
       · mesma regua de todo o resto: --surface / --border / --r-lg, padding 22/24
       · monocromatico: um acento (clay) variando opacidade; verde/vermelho so em risco
       ═════════════════════════════════════════════════════════════════════════ */

    /* KPI com linha de contexto embaixo do número */
    .kpi-ctx {
      margin-top: 8px; font-size: var(--fs-sm); color: var(--muted);
      display: flex; align-items: center; gap: 4px;
    }
    .kpi-ctx b { color: var(--text-dim); font-weight: 700; }
    .kpi-ctx.pos b { color: var(--green); }
    .kpi-ctx.neg b { color: var(--red); }

    /* Faixa de painéis (gráficos) — mesmo cartão do resto, altura casada */
    .pc-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
    .pc-panel {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 24px 24px; min-width: 0;
    }
    .pc-panel-head { margin-bottom: 4px; }
    .pc-panel-title {
      font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase;
      color: var(--muted); font-weight: 700;
    }
    .pc-panel-sub { font-size: var(--fs-sm); color: var(--faint); margin-top: 4px; }

    /* Grid de cartões de produto */
    .pc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .pc-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 24px 24px;
      cursor: pointer; transition: border-color .15s, transform .15s, background .15s;
      display: flex; flex-direction: column; gap: 16px; text-align: left; min-width: 0;
    }
    .pc-card:hover { border-color: var(--border3); background: var(--surface2); transform: translateY(-2px); }
    .pc-card:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
    .pc-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .pc-card-nome {
      font-family: var(--font-title); font-size: var(--fs-lg); font-weight: 700;
      color: var(--text); line-height: 1.3;
    }
    .pc-card-rende { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }

    /* Anel de margem — conic-gradient, sem biblioteca */
    .pc-ring {
      position: relative; flex: none; width: 62px; height: 62px; border-radius: 50%;
      background: conic-gradient(var(--accent) calc(var(--p) * 3.6deg), rgba(255,255,255,.07) 0);
    }
    .pc-ring.risco { background: conic-gradient(var(--red) calc(var(--p) * 3.6deg), rgba(255,255,255,.07) 0); }
    .pc-ring i {
      position: absolute; inset: 5px; border-radius: 50%; background: var(--surface);
      display: grid; place-items: center; font-style: normal;
      font-family: var(--font-num); font-size: var(--fs-sm); font-weight: 700; color: var(--text);
    }
    .pc-card:hover .pc-ring i { background: var(--surface2); }

    /* Linhas de valor dentro do cartão */
    .pc-card-linhas { display: grid; gap: 8px; }
    .pc-card-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
    .pc-card-linha span { font-size: var(--fs-sm); color: var(--muted); }
    .pc-card-linha b { font-family: var(--font-num); font-size: var(--fs-md); font-weight: 700; color: var(--text-dim); }
    .pc-card-linha.forte b { font-size: var(--fs-lg); color: var(--text); }

    /* Barra custo x preço */
    .pc-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; display: flex; }
    .pc-bar-custo { background: var(--accent-dim); }
    .pc-bar-lucro { background: var(--accent); }
    .pc-bar-legenda { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--faint); margin-top: 8px; }

    .pc-card-alerta {
      font-size: var(--fs-sm); color: var(--red); display: flex; align-items: center; gap: 4px;
    }

    /* Lista "peso no custo" — barra atrás do nome */
    .pc-peso { display: grid; gap: 12px; }
    .pc-peso-item { display: grid; grid-template-columns: minmax(140px, 220px) 1fr 62px; align-items: center; gap: 16px; }
    .pc-peso-nome { font-size: var(--fs-sm); color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pc-peso-trilho { height: 7px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
    .pc-peso-fill { height: 100%; background: var(--accent); border-radius: 4px; }
    .pc-peso-pct { font-family: var(--font-num); font-size: var(--fs-sm); font-weight: 700; color: var(--text); text-align: right; }

    /* Painel do produto (modal largo) */
    .modal.modal-wide { min-width: min(920px, 94vw); max-width: min(920px, 94vw); max-height: 92vh; overflow-y: auto; }
    .pm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
    .pm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
    .pm-kpi { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 16px; }
    .pm-kpi-lbl { font-size: var(--fs-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
    .pm-kpi-val { font-family: var(--font-num); font-size: var(--fs-xl); font-weight: 700; color: var(--text); margin-top: 8px; }
    .pm-kpi-val.neg { color: var(--red); }
    .pm-secao { margin-bottom: 24px; }
    .pm-secao-titulo {
      font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase;
      color: var(--muted); font-weight: 700; margin-bottom: 4px;
    }
    .pm-secao-sub { font-size: var(--fs-sm); color: var(--faint); margin-bottom: 12px; }
    .pm-campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .pm-casc { display: grid; gap: 0; max-width: 100%; }
    .pm-casc-linha { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: var(--fs-sm); color: var(--text-dim); }
    .pm-casc-linha .pct { color: var(--faint); font-size: var(--fs-sm); min-width: 48px; text-align: right; }
    .pm-casc-linha.total { font-size: var(--fs-md); font-weight: 700; color: var(--text); border-top: 1px solid var(--border); }
    .pm-aviso { margin-top: 16px; padding: 12px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); background: var(--red-bg); color: var(--red); }

    @media (max-width: 1180px) {
      .pc-charts, .pc-grid { grid-template-columns: repeat(2, 1fr); }
      .pm-kpis, .pm-campos { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 760px) {
      .pc-charts, .pc-grid { grid-template-columns: 1fr; }
    }

    /* Cartão de item (ingrediente / equipamento): só o essencial na face,
       o resto abre no clique. Mesma regua do .pc-card. */
    .ic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .ic-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 16px 24px;
      cursor: pointer; transition: border-color .15s, transform .15s, background .15s;
      display: flex; flex-direction: column; gap: 16px; text-align: left; min-width: 0;
    }
    .ic-card:hover { border-color: var(--border3); background: var(--surface2); transform: translateY(-2px); }
    .ic-card:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
    .ic-card-nome {
      font-family: var(--font-title); font-size: var(--fs-md); font-weight: 700; color: var(--text);
      line-height: 1.35; overflow-wrap: anywhere;
    }
    .ic-card-val { font-family: var(--font-num); font-size: var(--fs-xl); font-weight: 700; color: var(--text); }
    .ic-card-un { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }
    .ic-card-val.vazio { color: var(--faint); }

    /* Cartão de LOTE de produção — a face responde "quanto me custou a unidade".
       O resto (ingredientes usados, sobra, desvio detalhado) abre no clique. */
    .lote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .lote-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 16px 24px;
      cursor: pointer; transition: border-color .15s, transform .15s, background .15s;
      display: flex; flex-direction: column; gap: 16px; text-align: left; min-width: 0;
    }
    .lote-card:hover { border-color: var(--border3); background: var(--surface2); transform: translateY(-2px); }
    .lote-card:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
    .lote-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .lote-prod { font-family: var(--font-title); font-size: var(--fs-md); font-weight: 700; color: var(--text); line-height: 1.3; }
    .lote-data { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }
    .lote-custos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .lote-custo-lbl { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
    .lote-custo-val { font-family: var(--font-num); font-size: var(--fs-xl); font-weight: 700; color: var(--text); margin-top: 4px; }
    .lote-custo-val.dim { font-size: var(--fs-lg); color: var(--text-dim); }
    .lote-custo-val.vazio { color: var(--faint); }
    .lote-rodape {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      font-size: var(--fs-sm); color: var(--muted); border-top: 1px solid var(--border); padding-top: 12px;
    }
    /* Desvio contra a ficha: acima da receita é vermelho, abaixo é verde. */
    .lote-desvio { font-family: var(--font-num); font-weight: 700; font-size: var(--fs-sm); }
    .lote-desvio.acima { color: var(--red); }
    .lote-desvio.abaixo { color: var(--green); }
    .lote-desvio.neutro { color: var(--muted); }

    /* Escolha do jeito de registrar a fornada. Duas opções lado a lado, com a
       consequencia escrita em cada uma — a diferenca real e o estoque. */
    .lote-modo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
    .lote-modo-op {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
      padding: 12px 16px; text-align: left; cursor: pointer; display: block;
      transition: border-color .15s, background .15s; font: inherit;
    }
    .lote-modo-op:hover { border-color: var(--border3); }
    .lote-modo-op.active { border-color: var(--accent); background: var(--accent-bg); }
    .lote-modo-op b { display: block; font-size: var(--fs-md); color: var(--text); font-weight: 700; }
    .lote-modo-op span { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; line-height: 1.5; }
    @media (max-width: 620px) { .lote-modo { grid-template-columns: 1fr; } }

    /* Estoque agrupado por produto: o subtítulo é o produto, os cartões são os
       ingredientes dele. Ingrediente compartilhado repete de secao, com o MESMO saldo. */
    .es-grupo { margin-bottom: 32px; }
    .es-grupo-head {
      display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
      flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
    }
    .es-grupo-nome { font-family: var(--font-title); font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
    .es-grupo-meta { font-size: var(--fs-sm); color: var(--muted); }
    .es-chip {
      display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 700;
      color: var(--accent); background: var(--accent-bg); border-radius: 999px; padding: 4px 8px; margin-top: 8px;
    }
    .es-gasto { font-size: var(--fs-sm); color: var(--faint); margin-top: 8px; }

    @media (max-width: 1180px) { .lote-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 760px)  { .lote-grid { grid-template-columns: 1fr; } }

    /* ── Ponto: a tela das funcionárias. Alvo grande, pouca informação, zero jargão ── */
    .pt-quem {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 16px 24px; margin-bottom: 16px;
    }
    .pt-quem .form-select { max-width: 260px; height: 42px; font-size: var(--fs-md); }

    /* Cartão de tarefa: o contrato do trabalho na face. Toque grande de propósito. */
    .tk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .tk-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 16px 24px;
      cursor: pointer; transition: border-color .15s, transform .15s, background .15s;
      display: flex; flex-direction: column; gap: 12px; text-align: left; min-width: 0;
    }
    .tk-card:hover { border-color: var(--accent); background: var(--surface2); transform: translateY(-2px); }
    .tk-card:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
    .tk-nome { font-family: var(--font-title); font-size: var(--fs-lg); font-weight: 700; color: var(--text); line-height: 1.3; }
    .tk-obs { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
    .tk-linhas { display: grid; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; }
    .tk-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
    .tk-linha span { font-size: var(--fs-sm); color: var(--muted); }
    .tk-linha b { font-family: var(--font-num); font-size: var(--fs-md); font-weight: 700; color: var(--text-dim); }
    .tk-linha.forte b { color: var(--accent); font-size: var(--fs-lg); }
    .tk-acao { font-size: var(--fs-sm); font-weight: 700; color: var(--accent); }

    /* (O bloco "em andamento" e o cronometro sairam em 18/08/2026: a aba deixou
       de ser ponto de registro de jornada — ver PONTO v20 no fim do arquivo.) */

    /* Linha do que foi registrado */
    .pt-reg {
      display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
      padding: 12px 0; border-bottom: 1px solid var(--border);
    }
    .pt-reg:last-child { border-bottom: none; }
    .pt-reg-nome { font-weight: 700; font-size: var(--fs-md); color: var(--text); }
    .pt-reg-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }
    .pt-selo { font-size: var(--fs-sm); font-weight: 700; border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
    .pt-selo.ok   { color: var(--green); background: rgba(95,185,140,.12); }
    .pt-selo.meio { color: var(--amber); background: var(--amber-bg); }

    @media (max-width: 1180px) { .tk-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 760px)  { .tk-grid { grid-template-columns: 1fr; } .pt-quem .form-select { max-width: 100%; } }

    /* Ficha de leitura dentro do modal — rótulo em cima, valor embaixo */
    .det-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0 4px; }
    .det-item { min-width: 0; }
    .det-lbl { font-size: var(--fs-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
    .det-val { font-family: var(--font-num); font-size: var(--fs-lg); font-weight: 700; color: var(--text); margin-top: 8px; overflow-wrap: anywhere; }
    .det-val.txt { font-family: var(--font-body); font-size: var(--fs-md); font-weight: 700; color: var(--text-dim); }
    .det-val.destaque { color: var(--accent); font-size: var(--fs-lg); }

    @media (max-width: 1180px) { .ic-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 900px)  { .ic-grid { grid-template-columns: repeat(2, 1fr); } .det-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px)  { .ic-grid { grid-template-columns: 1fr; } }

    /* ═══════════════════════════════════════════════════════════════════════════
       CAIXINHAS — para onde vai o dinheiro do mes
       · a CASCATA responde "de onde saiu"; os CARTOES respondem "quanto separar"
       · uma coluna, um dado: o cartao mostra o valor do mes grande e o acumulado
       ═════════════════════════════════════════════════════════════════════════ */

    /* Cascata: cada linha é um degrau entre o faturamento e a sobra */
    .kx-casc { display: grid; gap: 4px; }
    .kx-linha {
      display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
      padding: 8px 0; border-bottom: 1px solid var(--border);
    }
    .kx-linha:last-child { border-bottom: none; }
    .kx-linha-lbl { font-size: var(--fs-md); color: var(--text-dim); display: flex; align-items: baseline; gap: 8px; }
    .kx-linha-val { font-family: var(--font-num); font-size: var(--fs-md); font-weight: 700; color: var(--text); white-space: nowrap; }
    .kx-linha.sub { padding: 4px 0 4px 16px; border-bottom: none; }
    .kx-linha.sub .kx-linha-lbl { font-size: var(--fs-sm); color: var(--muted); }
    .kx-linha.sub .kx-linha-val { font-size: var(--fs-sm); font-weight: 700; color: var(--text-dim); }
    .kx-linha.total { border-top: 1px solid var(--border2); border-bottom: none; padding-top: 12px; margin-top: 4px; }
    .kx-linha.total .kx-linha-lbl { font-size: var(--fs-md); font-weight: 700; color: var(--text); }
    .kx-linha.total .kx-linha-val { font-size: var(--fs-lg); font-weight: 700; }
    .kx-linha-val.neg { color: var(--red); }
    .kx-linha-val.pos { color: var(--green); }
    .kx-pct {
      font-family: var(--font-num); font-size: var(--fs-xs); color: var(--faint);
      background: rgba(255,255,255,.05); border-radius: 999px; padding: 4px 8px;
    }

    /* Cartão de caixinha */
    .kx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .kx-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 16px 24px;
      cursor: pointer; transition: border-color .15s, transform .15s, background .15s;
      display: flex; flex-direction: column; gap: 16px; text-align: left; min-width: 0;
    }
    .kx-card:hover { border-color: var(--border3); background: var(--surface2); transform: translateY(-2px); }
    .kx-card:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
    .kx-card.zerada { opacity: .55; }
    .kx-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
    .kx-card-nome {
      font-family: var(--font-title); font-size: var(--fs-md); font-weight: 700; color: var(--text);
      line-height: 1.35; overflow-wrap: anywhere;
    }
    .kx-card-val { font-family: var(--font-num); font-size: var(--fs-xl); font-weight: 700; color: var(--text); }
    .kx-card-val.vazio { color: var(--faint); }
    .kx-card-lbl { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
    .kx-card-saldo {
      display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
      border-top: 1px solid var(--border); padding-top: 12px; font-size: var(--fs-sm); color: var(--muted);
      margin-top: auto; /* nome em duas linhas nao pode desalinhar o rodape da fileira */
    }
    .kx-card-saldo b { font-family: var(--font-num); font-size: var(--fs-md); font-weight: 700; color: var(--text-dim); }

    /* Selo do tipo de caixinha — diz DE ONDE o dinheiro vem */
    .kx-tag {
      font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
      border-radius: 999px; padding: 4px 8px; white-space: nowrap; flex: none;
      color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid var(--border);
    }
    .kx-tag.custo { color: var(--accent-strong); background: var(--accent-bg); border-color: rgba(224,148,72,.25); }
    .kx-tag.pct   { color: var(--green); background: rgba(95,185,140,.1); border-color: rgba(95,185,140,.22); }

    /* Barra de meta — quanto do alvo já está guardado */
    .kx-meta { display: grid; gap: 4px; }
    .kx-meta-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
    .kx-meta-topo b { font-family: var(--font-num); color: var(--text-dim); font-weight: 700; }
    .kx-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
    .kx-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s; }
    .kx-bar i.cheia { background: var(--green); }

    /* Aviso — o que a conta descobriu e ele precisa saber */
    .kx-aviso {
      display: flex; gap: 8px; align-items: flex-start;
      background: var(--accent-bg); border: 1px solid rgba(224,148,72,.2);
      border-radius: var(--r-md); padding: 12px 12px; font-size: var(--fs-sm);
      color: var(--text-dim); line-height: 1.5;
    }
    .kx-aviso + .kx-aviso { margin-top: 8px; }
    /* A linha de conferencia fecha a cascata: prova que nenhum real sumiu. */
    .kx-conf {
      margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border2);
      font-size: var(--fs-sm); color: var(--muted); line-height: 1.5;
    }
    .kx-conf b { color: var(--text-dim); }
    .kx-aviso s { color: var(--accent-strong); text-decoration: none; flex: none; font-weight: 700; }

    /* Faixa de estado do mês (destinado / em aberto) */
    .kx-estado {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 16px 16px; margin-bottom: 16px;
    }
    .kx-estado-txt { font-size: var(--fs-sm); color: var(--text-dim); flex: 1; min-width: 200px; }
    .kx-estado-txt b { color: var(--text); }
    .kx-selo { font-size: var(--fs-sm); font-weight: 700; border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
    .kx-selo.aberto { color: var(--accent-strong); background: var(--accent-bg); }
    .kx-selo.fechado { color: var(--green); background: rgba(95,185,140,.12); }

    /* Linhas do modal de configuração */
    .kx-cfg-linha {
      display: grid; grid-template-columns: minmax(0,1.35fr) 210px 112px 112px 36px; gap: 8px; align-items: center;
    }
    .kx-cfg-head {
      font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
      color: var(--muted); font-weight: 700; padding-bottom: 4px;
    }

    /* Extrato de movimentos */
    .kx-mov { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
    .kx-mov:last-child { border-bottom: none; }
    .kx-mov-txt { font-size: var(--fs-sm); color: var(--text-dim); min-width: 0; }
    .kx-mov-sub { font-size: var(--fs-sm); color: var(--faint); margin-top: 4px; }
    .kx-mov-val { font-family: var(--font-num); font-size: var(--fs-md); font-weight: 700; white-space: nowrap; }
    .kx-mov-val.entrada { color: var(--green); }
    .kx-mov-val.saida { color: var(--red); }

    @media (max-width: 1180px) { .kx-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 900px)  { .kx-grid { grid-template-columns: repeat(2, 1fr); }
      .kx-cfg-linha { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 560px)  { .kx-grid { grid-template-columns: 1fr; } }

    /* ═══════════════════════════════════════════════════════════════════════════
       BARRA DE FILTROS (.filtros-bar)
       Antes os filtros eram texto solto sobre o card: sem moldura, sem alinhamento
       e com o mesmo peso visual dos dados — "perdidos no meio da informacao".
       Agora sao uma faixa propria, com o mesmo entorno que o <select> ja ganhava
       ao abrir a lista (borda + fundo), so que permanente.
       ═════════════════════════════════════════════════════════════════════════ */
    .filtros-bar {
      display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: var(--r-md); padding: 8px 12px; margin-bottom: 16px;
    }
    .filtros-tag {
      font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      color: var(--faint); padding: 0 8px 0 4px; white-space: nowrap;
      font-family: var(--font-title);
    }
    .filtros-sep { width: 1px; height: 22px; background: var(--border2); margin: 0 4px; flex: none; }

    /* Cada controle é um campo de verdade: mesma altura, mesma borda, mesmo raio */
    .filtros-bar select,
    .filtros-bar input[type="text"] {
      height: 38px; border-radius: 8px;
      font-size: var(--fs-md); font-weight: 700; font-family: inherit;
      background-color: var(--surface3); border: 1px solid var(--border2);
      color: var(--text-dim);
      padding: 0 12px; outline: none;
      transition: background-color .15s, border-color .15s, color .15s;
    }
    /* seta discreta, para o campo se ler como uma escolha e não como um rótulo */
    .filtros-bar select {
      appearance: none; -webkit-appearance: none; -moz-appearance: none;
      padding-right: 32px; cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a877f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 11px center; background-size: 11px;
    }
    .filtros-bar select:hover,
    .filtros-bar input[type="text"]:hover {
      background-color: var(--elevated); border-color: var(--border3); color: var(--text);
    }
    .filtros-bar input[type="text"]:focus {
      border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 3px var(--accent-ring);
    }
    .filtros-bar select:focus { border-color: var(--border3); box-shadow: none; }
    .filtros-bar select.sel-open {
      border-color: var(--accent) !important;
      background-color: var(--accent-bg) !important;
      color: var(--accent-strong) !important;
    }
    .filtros-bar input::placeholder { color: var(--faint); font-weight: 500; }

    /* Busca com lupa — o campo de texto se distingue dos seletores */
    .filtro-busca { position: relative; display: flex; align-items: center; min-width: 0; }
    .filtro-busca svg {
      position: absolute; left: 12px; width: 15px; height: 15px;
      color: var(--muted); pointer-events: none;
    }
    .filtro-busca input[type="text"] { padding-left: 32px; width: 230px; }
    /* barra que só tem a busca (Clientes): o campo ocupa mais espaço p/ não ficar oco */
    .filtros-bar > .filtro-busca:last-child input[type="text"] { width: 320px; }

    /* "Limpar" encosta na direita: ação, não filtro */
    .filtros-bar .filtros-limpar {
      margin-left: auto; height: 38px; padding: 0 12px; border-radius: 8px;
      background: transparent; border: 1px solid transparent; color: var(--muted);
      font-size: var(--fs-sm); font-weight: 700;
    }
    .filtros-bar .filtros-limpar:hover {
      background: var(--accent-bg); color: var(--accent-strong); border-color: transparent; filter: none;
    }

    @media (max-width: 900px) {
      .filtros-bar { gap: 8px; }
      .filtros-sep { display: none; }
      .filtro-busca { flex: 1 1 100%; }
      .filtro-busca input[type="text"] { width: 100%; }
      .filtros-bar .filtros-limpar { margin-left: 0; }
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       DEMANDAS — cartoes, calendario e painel
       · mesma regua dos cartoes de ingrediente (.ic-card): nome em cima,
         numero grande embaixo, contexto em uma linha
       · monocromatico: o clay do acento manda; prioridade e um ponto, nao um fundo
       ═════════════════════════════════════════════════════════════════════════ */

    .dem-card {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
      padding: 16px; min-height: 152px; text-align: left; min-width: 0;
      display: flex; flex-direction: column; gap: 12px; cursor: pointer;
      transition: border-color .15s, transform .15s, background .15s;
    }
    .dem-card:hover { border-color: var(--border3); background: var(--surface2); transform: translateY(-2px); }
    .dem-card:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
    .dem-card-top { display: flex; align-items: center; gap: 8px; }
    .dem-card-proto {
      font-family: var(--font-num); font-size: var(--fs-xs); font-weight: 700;
      letter-spacing: .06em; color: var(--faint);
    }
    .dem-card-tit {
      font-family: var(--font-title); font-size: var(--fs-md); font-weight: 700; color: var(--text);
      line-height: 1.35; overflow-wrap: anywhere;
    }
    .dem-card-prazo { margin-top: auto; }
    .dem-card-data { font-family: var(--font-num); font-size: var(--fs-xl); font-weight: 700; color: var(--text); }
    .dem-card-data.sem { color: var(--faint); font-size: var(--fs-lg); }
    .dem-card-data.venc { color: var(--red); }
    .dem-card-data.feito { color: var(--muted); }
    .dem-card-sla { margin-top: 8px; }
    .dem-card.feita { opacity: .62; }
    .dem-card.feita .dem-card-tit { color: var(--text-dim); }

    /* ponto de prioridade — mesma linguagem no cartão e no calendário */
    .cal-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; display: inline-block; }
    .cal-dot-urgente { background: var(--red); }
    .cal-dot-alta    { background: var(--amber); }
    .cal-dot-media   { background: var(--accent); }
    .cal-dot-baixa   { background: var(--faint); }
    .cal-dot-done    { background: var(--green); }

    /* ── Calendário ─────────────────────────────────────────────────────────── */
    .cal-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
    .cal-mes { font-family: var(--font-title); font-size: var(--fs-xl); font-weight: 700; color: var(--text); }
    .cal-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }
    .cal-ctrls { display: flex; align-items: center; gap: 4px; }
    .cal-nav {
      width: 36px; height: 36px; border-radius: 9px; font-size: var(--fs-lg); line-height: 1;
      background: var(--surface2); border: 1px solid var(--border2); color: var(--text-dim);
      cursor: pointer; transition: background .15s, color .15s, border-color .15s;
    }
    .cal-nav:hover { background: var(--surface3); border-color: var(--border3); color: var(--text); }
    .cal-hoje {
      height: 36px; padding: 0 16px; border-radius: 9px; font-family: inherit;
      font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
      background: var(--surface2); border: 1px solid var(--border2); color: var(--text-dim);
      transition: background .15s, color .15s, border-color .15s;
    }
    .cal-hoje:hover { background: var(--accent-bg); border-color: transparent; color: var(--accent-strong); }

    .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
    .cal-dow {
      text-align: left; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      color: var(--faint); padding: 0 4px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
    }
    .cal-day {
      min-height: 118px; background: var(--surface2); border: 1px solid var(--border);
      border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 4px;
      transition: border-color .15s, background .15s;
    }
    .cal-day:hover { border-color: var(--border2); }
    .cal-day-num {
      font-family: var(--font-num); font-size: var(--fs-sm); font-weight: 700; color: var(--muted);
      width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
      border-radius: 50%; margin-bottom: 4px;
    }
    .cal-day-out { background: transparent; border-color: transparent; }
    .cal-day-out .cal-day-num { color: var(--faint); opacity: .6; }
    .cal-today { border-color: var(--border2) !important; background: var(--surface2); }
    .cal-today .cal-day-num { background: var(--accent); color: #16110e; }
    .cal-pill {
      display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 7px;
      font-size: var(--fs-sm); font-weight: 700; color: var(--text-dim); background: var(--surface3);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
      border: 1px solid transparent; transition: background .12s, color .12s, border-color .12s;
    }
    .cal-pill:hover { background: var(--accent-bg); color: var(--accent-strong); border-color: transparent; filter: none; }
    .cal-pill span { overflow: hidden; text-overflow: ellipsis; }
    .cal-pill.cal-pill-done { color: var(--muted); text-decoration: none; opacity: .75; }
    .cal-mais { font-size: var(--fs-xs); color: var(--faint); padding: 4px 4px; font-weight: 700; }
    .cal-day.cal-drop-hover { border-color: var(--accent) !important; background: var(--accent-bg); }
    .cal-rodape {
      display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
      margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border);
    }
    .cal-legenda { display: flex; gap: 16px; flex-wrap: wrap; }
    .cal-leg { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); font-weight: 700; }
    .cal-dica { font-size: var(--fs-sm); color: var(--faint); }

    /* ── Lembretes recorrentes: bloco compacto dentro da sub-aba Demandas ───── */
    .rec-box { margin-top: 16px; }
    .rec-box-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
    .rec-box-sub { font-size: var(--fs-sm); color: var(--muted); max-width: 72ch; }

    /* ── Painel: cartões de gráfico ─────────────────────────────────────────── */
    .dem-grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: stretch; }
    .chart-card { display: flex; flex-direction: column; }
    .chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
    .chart-hint { font-size: var(--fs-sm); color: var(--faint); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    /* altura fixa: com ou sem dados, os painéis de uma linha ficam do mesmo tamanho */
    .chart-slot { flex: 1; min-height: 260px; display: flex; align-items: center; justify-content: center; }
    .chart-slot .empty { padding: 0; }

    /* ── Registro de chamados em cartões (nada de linha solta) ──────────────── */
    .reg-mes {
      display: flex; align-items: center; gap: 8px; margin: 22px 0 12px;
      font-size: var(--fs-sm); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
    }
    .reg-mes:first-child { margin-top: 0; }
    .reg-mes::after { content: ''; flex: 1; height: 1px; background: var(--border); }
    .reg-mes b { font-family: var(--font-num); color: var(--muted); letter-spacing: 0; }
    .reg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .reg-card {
      background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-md);
      padding: 16px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; min-width: 0;
      transition: border-color .15s, background .15s;
    }
    .reg-card:hover { border-color: var(--border3); background: var(--elevated); }
    .reg-top { display: flex; align-items: center; gap: 8px; }
    .reg-id { font-family: var(--font-num); font-size: var(--fs-sm); font-weight: 700; color: var(--faint); }
    .reg-top .badge { margin-left: auto; }
    .reg-tit { font-size: var(--fs-md); font-weight: 700; color: var(--text); line-height: 1.35; overflow-wrap: anywhere; }
    .reg-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); margin-top: auto; }
    .reg-meta .sep { color: var(--faint); }
    .reg-prazo { margin-left: auto; font-family: var(--font-num); font-weight: 700; color: var(--text-dim); }
    .reg-prazo.venc { color: var(--red); }

    /* Taxa de resolução não é dinheiro: entra no clay da marca, não no verde */
    #dem-prog { background: var(--accent); }

    /* Vazio é vazio: sem moldura tracejada, sem losango, sem fundo */
    .empty { border: none; background: transparent; color: var(--faint); }
    .empty::before { content: none; }

    @media (max-width: 1180px) { .reg-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 900px)  {
      .dem-grid-2, .reg-grid { grid-template-columns: 1fr; }
      .cal-day { min-height: 84px; padding: 4px; }
      .cal-pill { font-size: var(--fs-xs); padding: 4px 4px; }
    }

/* ═══════════════════════════════════════════════════════════════════════════
   ATALHO — card/grafico que leva para a aba correspondente.
   O que e clicavel precisa parecer clicavel: borda que acende + seta no canto.
   Marcacao: class="ir" data-ir="<aba>" (o listener e delegado, nao precisa de JS).
   ═══════════════════════════════════════════════════════════════════════════ */
.ir {
  position: relative;
  cursor: pointer;
  transition: border-color var(--mo-fast, 120ms) ease, transform var(--mo-fast, 120ms) ease;
}
.ir:hover { border-color: var(--border3); transform: translateY(-2px); }
.ir:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ir::after {
  content: "↗";
  position: absolute; top: 12px; right: 12px;
  font-size: var(--fs-xs); line-height: 1; color: var(--muted);
  opacity: 0; transition: opacity var(--mo-fast, 120ms) ease;
  pointer-events: none;
}
.ir:hover::after, .ir:focus-visible::after { opacity: .75; }
/* Nos KPIs o canto direito já tem o ícone do card — a seta desce para não colidir. */
.card.ir::after { top: auto; bottom: 12px; }

@media (prefers-reduced-motion: reduce) {
  .ir, .ir::after { transition: none; }
  .ir:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONFIGURACOES — cabecalho de card padronizado, lista de usuarios e chips
   de estado. Um card, uma responsabilidade; o estado e lido antes do texto.
   ═══════════════════════════════════════════════════════════════════════════ */

.cfg-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cfg-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cfg-title svg { color: var(--muted); flex: none; }
.cfg-title h2 { margin: 0; }
.cfg-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cfg-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px;
  border-radius: 999px; background: var(--surface2); border: 1px solid var(--border2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .03em; color: var(--muted);
  white-space: nowrap;
}
.cfg-chip .pt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.cfg-chip.ok     { color: var(--green); background: var(--green-bg); border-color: rgba(95,185,140,.25); }
.cfg-chip.alerta { color: var(--red);   background: var(--red-bg);   border-color: rgba(217,112,90,.25); }
.cfg-chip.aviso  { color: var(--amber); background: var(--amber-bg); border-color: rgba(201,149,78,.25); }

/* Fatos do card: rótulo em cima, valor embaixo — um dado por coluna. */
.cfg-fatos { display: flex; gap: 48px; flex-wrap: wrap; }
.cfg-fato-lbl { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.cfg-fato-val { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.015em; color: var(--text); }
.cfg-fato-val.destaque { color: var(--accent); }

/* Lista de usuários — substitui a tabela: mesmas colunas, mais legível. */
.usr-lista { display: flex; flex-direction: column; }
.usr-cab, .usr-row {
  display: grid; grid-template-columns: 40px minmax(140px,1.4fr) minmax(110px,1fr) 108px 116px 40px;
  gap: 16px; align-items: center;
}
.usr-cab {
  font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 0 12px 12px; border-bottom: 1px solid var(--border2);
}
.usr-row {
  padding: 12px; border-bottom: 1px solid var(--border);
  transition: background var(--mo-fast, 120ms) ease;
}
.usr-row:last-child { border-bottom: none; }
.usr-row:hover { background: var(--surface2); }
.usr-mono {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-bg); border: 1px solid var(--accent-ring);
  color: var(--accent-strong); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em;
}
.usr-nome { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.usr-nome .eu { color: var(--faint); font-weight: 400; }
.usr-user { font-size: var(--fs-sm); color: var(--muted); }
.usr-acao { text-align: right; }

@media (max-width: 900px) {
  .usr-cab { display: none; }
  .usr-row { grid-template-columns: 32px 1fr auto; grid-auto-rows: min-content; row-gap: 4px; }
  .usr-row .usr-user { grid-column: 2 / -1; }
  .cfg-fatos { gap: 24px; }
}

/* Em Configurações as ações são o ponto do card, não um detalhe de canto:
   ganham contorno para parecerem clicaveis. Escopo local — o .btn-add
   transparente das outras abas continua como esta. */
.cfg-card .btn-add {
  border-color: var(--border2);
  color: var(--text);
}
.cfg-card .btn-add:hover { border-color: var(--border3); background: var(--surface2); }

/* ═══════════════════════════════════════════════════════════════════════════
   MARCA v9 — o tema sai do logo

   As cores nao sao escolhidas: sao AMOSTRADAS de `public/logo.png`. A arte tem
   praticamente dois tons — o chocolate do circulo (`#381010`, ~75% dos pixels) e
   o tan do wordmark (`#e0a068`, ~12%). Entao o chocolate vira a base da interface
   e o tan vira o acento. Nada de preto neutro: o fundo e o marrom do logo levado
   ao escuro, e a escada inteira mora na mesma matiz (~12°).

   Isso substitui a base preta + acento clay. Continua valendo o de sempre:
   nenhum card muda de lugar, muda so o acabamento.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Escada de superfícies, toda na matiz do chocolate do logo. Cada degrau tem
     que ser visivel — o erro anterior foi fundo e card a 8 pontos de distancia. */
  --bg:         #140b09;
  --sidebar-bg: #1a0f0c;
  --surface:    #211310;
  --surface2:   #2c1a15;
  --surface3:   #3a241c;
  --elevated:   #26150f;

  /* Bordas puxadas do tan, não do branco: em base quente, fio branco fica sujo. */
  --border:    rgba(224,164,104,.15);
  --border2:   rgba(224,164,104,.26);
  --border3:   rgba(224,164,104,.38);

  /* Tinta quente — branco puro sobre chocolate vibra. */
  --text:      #f7ece2;
  --text-dim:  #dcc9b8;
  --muted:     #ab9282;
  --faint:     #7d6656;

  /* Acento = o tan do wordmark, direto do logo. */
  --accent:        #e0a468;
  --accent-strong: #f0bb85;
  --accent-dim:    #b87c46;
  --accent-bg:     rgba(224,164,104,.15);
  --accent-ring:   rgba(224,164,104,.36);

  /* Semânticas aquecidas pra assentar no chocolate. O âmbar foi empurrado pro
     dourado (#f0c258) porque no tom antigo ele se confundia com o tan do acento. */
  --green:     #5fc98e;  --green-bg: rgba(95,201,142,.14);
  --red:       #e5705f;  --red-bg:   rgba(229,112,95,.14);
  --amber:     #f0c258;  --amber-bg: rgba(240,194,88,.14);

  /* O número herói sobe um degrau: é ele que a pessoa vem ler. */
  --fs-display: 2.25rem;
}

/* O brilho do fundo também vem do tan. */
.app-body { background: radial-gradient(1200px 560px at 82% -10%, rgba(224,164,104,.055), transparent 62%); }

/* ── Cartão: volta a ser um objeto sobre o fundo ───────────────────────────── */
/* Em tela escura sombra quase não aparece; o que faz o card "subir" é o fio de
   luz na aresta de cima — aqui um fio quente, pra nao esbranquicar o marrom. */
.card, .section, .card-sm, .ped-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(247,236,226,.05), 0 1px 2px rgba(0,0,0,.45);
}
.card:hover { background: var(--surface2); border-color: var(--border2); }

/* Card DENTRO de card não pode ter a mesma cor do pai — senão some. Sobe um
   degrau na escada. (E o caso dos KPIs de Fluxo de Caixa, Custos e margem, etc.) */
.section .card-sm, .section .ped-stat, .section .card,
.cfg-card .card-sm, .pc-panel .ped-stat {
  background: var(--surface2);
  border-color: var(--border2);
  box-shadow: none;
}

/* Rótulo legível, número dominante. */
.card-label, .card-sm-label {
  color: var(--text-dim); font-weight: 700; letter-spacing: .1em;
}
.card-value, .card-val { font-weight: 800; letter-spacing: -.035em; }
.card-sub { color: var(--muted); }

/* Ícone do KPI assume a cor do que o cartão mede — verde entra, vermelho falta. */
.kpi-ico { border-color: var(--border2); }
.card.green .kpi-ico { background: var(--green-bg); color: var(--green); border-color: rgba(95,201,142,.32); }
.card.red   .kpi-ico { background: var(--red-bg);   color: var(--red);   border-color: rgba(229,112,95,.32); }

/* Rail: um degrau acima do fundo, pra se declarar como faixa própria. */
.sidebar { background: var(--sidebar-bg); border-right-color: var(--border2); }

/* ── Títulos: a página volta a ter hierarquia ──────────────────────────────── */
.page-title   { font-weight: 800; }
.page-desc    { color: var(--muted); }
.section-title{ font-weight: 700; }
/* Subtítulo de painel era quase invisível em --faint. */
.chart-hint, .pc-panel-sub, .pm-secao-sub, .pc-bar-legenda { color: var(--muted); }

/* ── Tabela: cabeçalho e divisória que se enxergam ─────────────────────────── */
table.tbl thead th { color: var(--muted); border-bottom-color: var(--border2); }
table.tbl tbody tr { border-bottom-color: var(--border); }
table.tbl tbody tr:hover { background: rgba(224,164,104,.07); }

/* ── Trilhos e barras: o trilho tem que aparecer pra barra dizer alguma coisa ── */
.pc-bar, .kx-bar, .pc-peso-trilho { background: rgba(247,236,226,.11); }
.prog-bar-wrap { background: rgba(247,236,226,.11); }

/* Custo x lucro na mesma régua do gráfico "Custo x Preço": sai é vermelho,
   fica e verde. Antes eram dois tons do mesmo clay — a barra nao informava nada. */
.pc-bar-custo { background: var(--red); }
.pc-bar-lucro { background: var(--green); }

/* ═══════════════════════════════════════════════════════════════════════════
   CALMA v10 — mesmo tema, tom baixo

   O fundo ficou (ele aprovou: "a cor do fundo esta boa e equilibrada"). O que
   estava exagerado era o acento: o tan cru do logo e saturacao 66% / luz 64% —
   grita. Aqui ele desce para 30% / 54%, e a paleta de dados desce junto.

   O criterio nao foi gosto: cada cor foi calculada mantendo (a) contraste ≥ 4,8
   contra o cartao e (b) distancia perceptual ΔE ≥ 20 entre TODOS os pares —
   calmo sem voltar a ser indistinguivel, que era o problema original.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Acento: mesma matiz do logo (30°), saturação e luz derrubadas. */
  --accent:        #ad8a67;
  --accent-strong: #c2a082;
  --accent-dim:    #7f6349;
  --accent-bg:     rgba(173,138,103,.16);
  --accent-ring:   rgba(173,138,103,.38);

  /* Bordas seguem o acento, um pouco mais claras pra não sumirem no tom baixo. */
  --border:    rgba(196,161,132,.16);
  --border2:   rgba(196,161,132,.28);
  --border3:   rgba(196,161,132,.40);

  /* Semânticas na mesma régua calma. Verde 6,8:1 e vermelho 5,1:1 de contraste —
     ainda passam em AA como texto de KPI. */
  --green:     #6cac8e;  --green-bg: rgba(108,172,142,.15);
  --red:       #bf7469;  --red-bg:   rgba(191,116,105,.15);
  --amber:     #cebf82;  --amber-bg: rgba(206,191,130,.15);
}

.app-body { background: radial-gradient(1200px 560px at 82% -10%, rgba(173,138,103,.05), transparent 62%); }
.card.green .kpi-ico { border-color: rgba(108,172,142,.32); }
.card.red   .kpi-ico { border-color: rgba(191,116,105,.32); }
table.tbl tbody tr:hover { background: rgba(173,138,103,.06); }

/* ── Rail: mais largo, logo grande, sem réguas ─────────────────────────────── */
:root { --rail: 128px; }

/* A logo é o dono do topo do rail. O PNG tem cantos pretos fora do círculo, então
   `cover` + raio 50% recorta exatamente o circulo da marca. */
.sidebar-header, #app.nav-collapsed .sidebar-header {
  padding: 22px 0 18px; border-bottom: none;
}
.sidebar-logo {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  filter: none; box-shadow: 0 0 0 1px var(--border);
}

/* As divisórias saem de vista, mas o #nav-config-divider CONTINUA no fluxo: é o
   `margin-top:auto` dele que empurra Configuracoes e Cofre pro rodape do rail. */
.sidebar-divider, #app.nav-collapsed .sidebar-divider {
  background: transparent; height: 0; margin: 4px auto;
}
#nav-config-divider { margin-top: auto !important; }

/* Ícones acompanham a largura nova, senão o rail vira uma coluna vazia. */
.tab, .cofre-seal,
#app.nav-collapsed .tab, #app.nav-collapsed .cofre-seal {
  width: 60px; height: 56px; border-radius: 16px;
}
.tab svg, .cofre-seal svg { width: 25px !important; height: 25px !important; }
.sidebar-nav, #app.nav-collapsed .sidebar-nav { gap: 10px; }

/* O marcador da aba ativa fica colado na borda do rail: (largura do botão − rail)/2. */
.tab.active::before { left: calc((60px - var(--rail)) / 2); height: 24px; }

/* O rail mais largo tirou 40px da área de conteúdo e o contexto do KPI passou a
   quebrar no meio do numero ("▲ 1.8 / p.p."). O valor e sua unidade andam juntos. */
.kpi-ctx b { white-space: nowrap; }
/* ... mas a LINHA inteira precisa poder descer. Sem isto, "8 ingredientes · 1
   embalagem · 2 descartaveis" estourava a largura do cartao e o ultimo item era
   cortado no meio da palavra. */
.kpi-ctx { flex-wrap: wrap; row-gap: 2px; }

/* O bloco do rail vive fora de media query (ele sobrepõe a topbar de <=800px por
   ordem no arquivo). Em tela estreita 128px comeria a area de leitura. */
@media (max-width: 720px) {
  :root { --rail: 84px; }
  .sidebar-logo { width: 56px; height: 56px; }
  .tab, .cofre-seal,
  #app.nav-collapsed .tab, #app.nav-collapsed .cofre-seal { width: 52px; height: 50px; }
  .tab.active::before { left: calc((52px - var(--rail)) / 2); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEUTRO v12 — fora o marrom

   O tema amostrado do logo (v9/v10/v11) pintou a interface INTEIRA de chocolate:
   fundo, cartao, borda e acento todos na mesma matiz quente. Sem nenhum tom frio
   ou neutro pra descansar, o olho nao tem onde pousar — dai "doi a vista".

   Aqui a marca volta a ser marca (fica no logo) e a interface volta a ser neutra:
   escada de cinza-grafite, um pouco acima do preto puro (`#0e0f10` em vez de
   `#0a0a0a`), bordas em branco transparente e cor so onde ela SIGNIFICA algo —
   entrou/saiu/pendente. E mesmo essa cor entra clara e dessaturada.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Escada neutra. Cada degrau separado o bastante pra card e fundo não colarem. */
  --bg:         #0e0f10;
  --sidebar-bg: #121314;
  --surface:    #191b1e;
  --surface2:   #202225;
  --surface3:   #2a2d31;
  --elevated:   #1c1e21;

  /* Borda em branco transparente: some sozinha quando o fundo muda de degrau. */
  --border:    rgba(255,255,255,.08);
  --border2:   rgba(255,255,255,.13);
  --border3:   rgba(255,255,255,.21);

  /* Tinta neutra fria — sem o creme quente do tema anterior. */
  --text:      #eef0f2;
  --text-dim:  #c6cad0;
  --muted:     #8f959d;
  --faint:     #696f78;

  /* Acento: areia clara e dessaturada. Ainda conversa com o logo, mas entra como
     tom claro sobre o cinza, nao como bloco de terracota. */
  --accent:        #cfc6ba;
  --accent-strong: #e6e0d7;
  --accent-dim:    #9a9186;
  --accent-bg:     rgba(207,198,186,.10);
  --accent-ring:   rgba(207,198,186,.28);

  /* Semânticas claras: legíveis no cinza sem virar néon. */
  --green:     #84c9a6;  --green-bg: rgba(132,201,166,.13);
  --red:       #e0938a;  --red-bg:   rgba(224,147,138,.13);
  /* "Âmbar" virou marrom claro a pedido dele: o amarelo era a única cor que não
     tinha parentesco com nada na tela. Fica mais escuro que o neutro da serie
     principal (#c9c3bb) de proposito — vizinhos num donut precisam de distancia
     de LUZ, nao so de matiz, senao viram uma mancha so. */
  --amber:     #b99372;  --amber-bg: rgba(185,147,114,.14);
}

/* Sem o brilho quente atrás do conteúdo — era ele que deixava a tela toda âmbar. */
.app-body { background: none; }

/* O fio de luz no topo do cartão volta a ser branco (era creme). */
.card, .section, .card-sm, .ped-stat {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.4);
}
.card.green .kpi-ico { border-color: rgba(132,201,166,.30); }
.card.red   .kpi-ico { border-color: rgba(224,147,138,.30); }
table.tbl tbody tr:hover { background: rgba(255,255,255,.035); }
.pc-bar, .kx-bar, .pc-peso-trilho, .prog-bar-wrap { background: rgba(255,255,255,.09); }

/* O rail tinha um degradê quente no topo, de antes do tema do logo. */
.sidebar { background: var(--sidebar-bg); }

/* ── Tooltip do rail: apagada, não escondida ──────────────────────────────────
   O nome do icone era um `::after` posicionado FORA do botao (`left: 100% + 12px`),
   contando com `opacity:0` pra sumir. So que o `.sidebar` tem overflow, entao o
   balao nascia recortado pela borda do rail: sobrava um caco de letra ("Pe" de
   Pedidos) boiando ao lado do icone. Como o rail e so de simbolos por decisao,
   o conteudo sai de vez — nao ha mais texto nenhum pra vazar. */
.tab[data-tip]::after,
.cofre-seal[data-tip]::after,
.logout-btn[data-tip]::after,
.nav-right .logout-btn::after,
#app.nav-collapsed .nav-right .logout-btn::after {
  content: none !important;
  display: none !important;
}

/* ── Logo do rail: só a arte, sem coroa ───────────────────────────────────────
   O anel escuro em volta nao era decoracao: `logo.png` e uma ELIPSE de chocolate
   dentro de um retangulo preto, e a elipse ocupa ~84% da largura contra ~96% da
   altura. Recortar em `border-radius:50%` num quadrado deixa o preto do PNG
   sobrando nas laterais — a coroa. Aqui o corte e um circulo de 42% do lado
   (= os mesmos 84%), que cai dentro da elipse e nao pega preto nenhum; a caixa
   cresce na mesma proporcao pra arte continuar do tamanho que estava.
   O `box-shadow` de 1px tambem sai: era o segundo fio em volta. */
.sidebar-logo {
  width: 110px; height: 110px;
  border-radius: 0;
  clip-path: circle(42%);
  box-shadow: none;
}
@media (max-width: 720px) {
  .sidebar-logo { width: 67px; height: 67px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CLARO v14 — papel branco, tinta preta, marrom so onde ha dado

   Pedido dele depois de ver o v13 inteiro em chocolate: "ficou ruim porque esta
   tudo em cima de uma unica cor". Esta certo, e o diagnostico vale guardar: em
   qualquer versao anterior — preta, marrom ou arroxeada — a interface e o dado
   competiam pela mesma faixa de luz, entao nada se destacava de nada.

   Aqui a interface deixa de ter cor. Fundo claro, texto preto, borda cinza: e
   papel. A cor passa a ser um recurso ESCASSO, gasto so em duas coisas — o
   marrom da marca (que agora vive nos graficos e no acento) e os dois sinais que
   precisam ser lidos sem ler o numero (entrou/saiu). Sobre papel branco o marrom
   finalmente aparece como marrom, e nao como mais um tom do fundo.

   Inversao de duas convencoes do tema escuro, para quem for mexer depois:
   1. `--accent-strong` agora e MAIS ESCURO que `--accent` (no escuro era o
      contrario): "forte" quer dizer mais contraste, e sobre branco isso e escurecer.
   2. Todo `rgba(255,255,255,x)` usado como preenchimento vira `rgba` preto — no
      claro, branco translucido e invisivel.
   ═══════════════════════════════════════════════════════════════════════════ */

html { color-scheme: light; }

:root {
  /* Papel: a página é um cinza claro quente e o CARTÃO é branco puro — é essa
     diferenca que da o relevo. Card branco sobre fundo branco nao existe. */
  --bg:         #f2f0ec;
  --sidebar-bg: #ffffff;
  --surface:    #ffffff;
  --surface2:   #f7f5f2;
  --surface3:   #eae5df;
  --elevated:   #ffffff;

  /* Bordas: preto translúcido, levemente quente para não puxar azul. */
  --border:    rgba(38,28,22,.10);
  --border2:   rgba(38,28,22,.17);
  --border3:   rgba(38,28,22,.30);

  /* Tinta preta, em quatro degraus. */
  --text:      #1c1614;  /* preto — titulos e valores */
  --text-dim:  #4a413b;  /* corpo */
  --muted:     #786d64;  /* secundario */
  --faint:     #a1968c;  /* decorativo */

  /* Marrom da marca: escurecido para se ler sobre branco. O #b88b5e da paleta
     dele tem contraste 2,5:1 no claro — serve de preenchimento, nao de texto. */
  --accent:        #8b5e3c;
  --accent-strong: #6b4526;
  --accent-dim:    #b88b5e;
  --accent-bg:     rgba(139,94,60,.10);
  --accent-ring:   rgba(139,94,60,.26);

  /* Semânticas escurecidas: no claro, cor clara sobre branco não se lê. */
  --green:     #2f7d55;  --green-bg: rgba(47,125,85,.10);
  --red:       #b04a30;  --red-bg:   rgba(176,74,48,.10);
  --amber:     #97681f;  --amber-bg: rgba(151,104,31,.12);
  --indigo:    #6a6275;  --indigo-bg: rgba(106,98,117,.10);

  /* Sombra no claro é quase só um fio: as do escuro viravam borrão cinza. */
  --shadow-sm: 0 1px 2px rgba(28,22,20,.06);
  --shadow-md: 0 1px 2px rgba(28,22,20,.05), 0 6px 18px -6px rgba(28,22,20,.12);
  --shadow-lg: 0 0 0 1px rgba(28,22,20,.04), 0 4px 12px rgba(28,22,20,.08), 0 20px 48px -12px rgba(28,22,20,.16);
}

body { background: var(--bg); color: var(--text); }
.app-body { background: none; }

/* Trilhos e chips: todo preenchimento branco translúcido do tema escuro vira
   preto translucido, senao some no papel. */
.pc-bar, .kx-bar, .pc-peso-trilho, .prog-bar-wrap,
.avatar.none, .switch-rec.off, .kx-pct, .kx-tag, .dia-chip {
  background: rgba(28,22,20,.07);
}
.pc-ring       { background: conic-gradient(var(--accent) calc(var(--p) * 3.6deg), rgba(28,22,20,.09) 0); }
.pc-ring.risco { background: conic-gradient(var(--red)    calc(var(--p) * 3.6deg), rgba(28,22,20,.09) 0); }
table.tbl tbody tr:hover { background: rgba(28,22,20,.035); }
.card, .section, .card-sm, .ped-stat { box-shadow: var(--shadow-sm); }
.card.green .kpi-ico { border-color: rgba(47,125,85,.30); }
.card.red   .kpi-ico { border-color: rgba(176,74,48,.30); }

/* Botão cheio: marrom sólido com tinta clara. O inset branco do tema escuro
   ficava um risco esbranquicado no topo. */
.btn-brown, .login-btn { background: var(--accent); color: #fff8f0; box-shadow: none; }
.btn-brown:hover, .login-btn:hover { background: var(--accent-strong); }
.fin-pill.active { background: var(--accent); color: #fff8f0; border-color: transparent; box-shadow: none; }
.dia-chip.on, .cal-today .cal-day-num { background: var(--accent); color: #fff8f0; }
.btn { box-shadow: none; }

/* Rail e login perdem os degradês escuros herdados. */
.sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--border); }
.login-brand { background:
  radial-gradient(520px 420px at 16% 10%, rgba(139,94,60,.10), transparent 60%),
  linear-gradient(160deg, #f7f3ee, #ebe6df 72%); }

/* As duas cores que estavam fora da família. */
.badge-alta { background: var(--amber-bg); color: var(--amber); border-color: rgba(151,104,31,.28); }
.cal-pill-alta { background: var(--amber-bg); color: var(--amber); }
.prog-bar { background: linear-gradient(90deg, var(--accent-dim), var(--accent)); }

/* Os quatro seletores de mês do Financeiro nasceram sem classe e usavam o
   controle NATIVO do sistema. So `.rel-hd select` tinha acabamento. */
#kx-sel, #dre-sel, #pr-sel {
  background: var(--surface2); border: 1px solid var(--border2); color: var(--text);
  padding: 0 12px; height: var(--ctl-h); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-family: inherit; outline: none; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
#kx-sel:hover, #dre-sel:hover, #pr-sel:hover { border-color: var(--border3); }
#kx-sel:focus, #dre-sel:focus, #pr-sel:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
#kx-sel option, #dre-sel option, #pr-sel option { background: var(--surface); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════════════
   MODO ESCURO v15 — o tema deixa de ser fixo e vira escolha

   Ate aqui cada tema era um bloco novo sobrescrevendo o anterior, e o ultimo
   vencia para sempre: quem quisesse o outro tinha que mexer no CSS. Agora o
   CLARO v14 continua sendo o padrao (e ele que esta no `:root`, ninguem
   precisa escolher nada para ve-lo) e o escuro entra como uma CAMADA a mais,
   ligada por `data-theme="dark"` no `<html>`.

   O escuro nao e invencao nova: sao os valores do NEUTRO v12, que ele ja tinha
   aprovado ("esta ficando perfeito") antes de pedir o claro. Escada de
   cinza-grafite, borda em branco transparente, acento areia.

   Duas regras para quem for mexer depois:
   1. Token novo nasce nos DOIS lugares — no `:root` do v14 e aqui. Token que so
      existe no claro fica com valor de claro no escuro, e e assim que aparece
      um texto preto sobre fundo preto.
   2. O que o v14 escreveu com `rgba` PRETO de preenchimento precisa de gemeo
      branco aqui, senao some no grafite. E a mesma inversao do v14, ao contrario.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
  color-scheme: dark;

  /* Escada neutra e fria — cada degrau visível, senão card e fundo colam. */
  --bg:         #0e0f10;
  --sidebar-bg: #121314;
  --surface:    #191b1e;
  --surface2:   #202225;
  --surface3:   #2a2d31;
  --elevated:   #1c1e21;

  --border:    rgba(255,255,255,.08);
  --border2:   rgba(255,255,255,.13);
  --border3:   rgba(255,255,255,.21);

  --text:      #eef0f2;
  --text-dim:  #c6cad0;
  --muted:     #8f959d;
  --faint:     #696f78;

  /* Acento areia: no escuro "forte" quer dizer mais CLARO — o inverso do v14. */
  --accent:        #cfc6ba;
  --accent-strong: #e6e0d7;
  --accent-dim:    #9a9186;
  --accent-bg:     rgba(207,198,186,.10);
  --accent-ring:   rgba(207,198,186,.28);

  --green:     #84c9a6;  --green-bg:  rgba(132,201,166,.13);
  --red:       #e0938a;  --red-bg:    rgba(224,147,138,.13);
  --amber:     #b99372;  --amber-bg:  rgba(185,147,114,.14);
  --indigo:    #9aa8b8;  --indigo-bg: rgba(154,168,184,.13);

  /* No escuro a sombra quase não aparece; quem dá relevo é a borda. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg: 0 0 0 1px rgba(255,255,255,.05), 0 4px 12px rgba(0,0,0,.4), 0 24px 64px -12px rgba(0,0,0,.65);
}

/* Preenchimentos: todo `rgba` preto do v14 volta a ser branco translúcido. */
[data-theme="dark"] .pc-bar,
[data-theme="dark"] .kx-bar,
[data-theme="dark"] .pc-peso-trilho,
[data-theme="dark"] .prog-bar-wrap,
[data-theme="dark"] .avatar.none,
[data-theme="dark"] .switch-rec.off,
[data-theme="dark"] .kx-pct,
[data-theme="dark"] .kx-tag,
[data-theme="dark"] .dia-chip,

[data-theme="dark"] .pc-ring       { background: conic-gradient(var(--accent) calc(var(--p) * 3.6deg), rgba(255,255,255,.10) 0); }
[data-theme="dark"] .pc-ring.risco { background: conic-gradient(var(--red)    calc(var(--p) * 3.6deg), rgba(255,255,255,.10) 0); }
[data-theme="dark"] table.tbl tbody tr:hover { background: rgba(255,255,255,.035); }

/* O que faz o cartão subir no escuro é o fio de luz na aresta de cima. */
[data-theme="dark"] .card,
[data-theme="dark"] .section,
[data-theme="dark"] .card-sm,
[data-theme="dark"] .ped-stat {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.4);
}
[data-theme="dark"] .card.green .kpi-ico { border-color: rgba(132,201,166,.30); }
[data-theme="dark"] .card.red   .kpi-ico { border-color: rgba(224,147,138,.30); }

/* Acento cheio: no claro é marrom com tinta clara, no escuro é areia com tinta
   escura. A tinta acompanha o fundo, senao o botao primario fica ilegivel. */
[data-theme="dark"] .btn-brown,
[data-theme="dark"] .login-btn,
[data-theme="dark"] .fin-pill.active,
[data-theme="dark"] .dia-chip.on,
[data-theme="dark"] .cal-today .cal-day-num { background: var(--accent); color: #16181a; }
[data-theme="dark"] .btn-brown:hover,
[data-theme="dark"] .login-btn:hover { background: var(--accent-strong); }

[data-theme="dark"] .badge-alta   { border-color: rgba(185,147,114,.28); }

/* "Distribuição" na barra do Por unidade é o único segmento sem token próprio:
   ele e definido como preto translucido la em cima, e no grafite isso e um
   buraco no meio da barra. Aqui vira o branco translucido equivalente. */

[data-theme="dark"] .login-brand  { background:
  radial-gradient(520px 420px at 16% 10%, rgba(207,198,186,.06), transparent 60%),
  linear-gradient(160deg, #17191b, #101112 72%); }

/* ── Botão do tema: um ícone do rail, igual aos vizinhos ─────────────────────
   Primeira versao era uma caixa com borda e a palavra "ESCURO" no rodape, junto
   do "Sair" — e destoava: o rail e so simbolo, decisao dele em 13/07/2026.
   Agora ele mora dentro do `.sidebar-nav`, no grupo de baixo (Configuracoes →
   Cofre → Tema), com a MESMA geometria de `.tab` / `.cofre-seal`.

   Classe propria, e nao `.tab`, por um motivo concreto: o `trocarTab` casa
   `querySelectorAll('.tab')` com o array `ids` **por posicao**. Um `.tab` a mais
   no rail desalinharia todas as abas depois dele. (E o item 4 do checklist.)
   Tambem nao e `.cofre-seal`: `#cofre-seal` e o cadeado, e misturar os dois
   deixaria o estado `.aberto` do cofre pingando no botao do tema. */
.tema-seal {
  position: relative; width: 50px; height: 50px; padding: 0; margin: 0;
  display: grid; place-items: center; place-content: center;
  border: none; background: transparent; color: var(--muted);
  border-radius: 14px; font-size: 0; font-family: inherit; cursor: pointer;
  transition: background .15s, color .15s;
}
.tema-seal svg    { width: 23px; height: 23px; color: inherit; }
.tema-seal:hover  { background: var(--surface2); color: var(--text); }
.tema-seal:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
/* Sem tooltip, como o resto do rail: o `::after` nasce fora do botão e o
   `.sidebar` tem overflow — sobrava um caco de letra boiando ao lado do icone. */
.tema-seal[data-tip]::after { content: none !important; display: none !important; }

@media (max-width: 720px) { .tema-seal { width: 52px; height: 50px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   MATERIA-PRIMA (aba Produtos → Ingredientes) e FICHA DO PRODUTO
   ───────────────────────────────────────────────────────────────────────────
   Ingrediente e estoque viraram a MESMA tela: o cartao responde de fora as duas
   perguntas do dia a dia — "quanto custa" e "quanto eu tenho" — e o clique so
   aprofunda. O prefixo e `mp-`; `ic-`, `es-`, `pc-` e `lt-` ja estavam tomados.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Filtro por categoria ─────────────────────────────────────────────────── */
.mp-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.mp-cat {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); font-family: inherit; font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.mp-cat:hover  { color: var(--text); border-color: var(--border-strong, var(--border)); }
.mp-cat i {
  font-style: normal; font-family: var(--font-num);
  font-size: var(--fs-xs); font-weight: 700; color: var(--faint);
}
.mp-cat.active   { background: var(--accent); border-color: var(--accent); color: #fff8f0; }
.mp-cat.active i { color: rgba(255,255,255,.72); }
[data-theme="dark"] .mp-cat.active   { color: #16181a; }
[data-theme="dark"] .mp-cat.active i { color: rgba(0,0,0,.5); }
.mp-cat:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }

/* ── Grupos por categoria ─────────────────────────────────────────────────── */
.mp-grupo { margin-top: 28px; }
.mp-grupo:first-child { margin-top: 8px; }
.mp-grupo-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.mp-grupo-nome { font-size: var(--fs-md); font-weight: 700; letter-spacing: .01em; }
.mp-grupo-meta { font-size: var(--fs-sm); color: var(--muted); }

/* ── O cartão ─────────────────────────────────────────────────────────────── */
.mp-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}
.mp-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; text-align: left;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.mp-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm, 0 4px 14px rgba(0,0,0,.06)); }
.mp-card:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
/* A cor entra só onde significa: uma faixa fina à esquerda, não o cartão inteiro. */
.mp-card.alerta { box-shadow: inset 3px 0 0 var(--amber, #b99372); }
.mp-card.neg    { box-shadow: inset 3px 0 0 var(--red); }

.mp-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mp-card-nome { font-size: var(--fs-md); font-weight: 700; line-height: 1.3; min-width: 0; word-break: break-word; }

.mp-chip {
  flex-shrink: 0; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.mp-chip.alerta { background: color-mix(in srgb, var(--amber, #b99372) 18%, transparent); color: var(--amber, #b99372); }
.mp-chip.neg    { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); }

/* Os dois números da face, lado a lado e com o mesmo peso: custo e saldo. */
.mp-card-num { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mp-preco, .mp-saldo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-preco b, .mp-saldo b {
  font-family: var(--font-num); font-size: var(--fs-lg); font-weight: 700;
  line-height: 1.1; letter-spacing: -.01em;
}
.mp-preco b { color: var(--text); }
.mp-saldo   { text-align: right; }
.mp-preco b.vazio, .mp-saldo b.vazio { color: var(--faint); }
.mp-preco span, .mp-saldo span { font-size: var(--fs-xs); color: var(--muted); }

.mp-card-pe {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--muted);
}
.mp-card-pe span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-card-pe span:last-child { text-align: right; flex-shrink: 0; }

/* ── Lista de compras ─────────────────────────────────────────────────────── */
.mp-compra {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 16px;
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; margin-bottom: 8px;
  transition: border-color .15s, background .15s;
}
.mp-compra:hover { border-color: var(--accent); }
.mp-compra:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.mp-compra-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-compra-nome > span:first-child { font-weight: 700; }
.mp-compra-sub  { font-size: var(--fs-xs); color: var(--muted); }
.mp-compra-qtd  { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.mp-compra-qtd b { font-family: var(--font-num); color: var(--text); }
.mp-compra-val  { font-family: var(--font-num); font-weight: 700; white-space: nowrap; min-width: 84px; text-align: right; }

@media (max-width: 640px) {
  .mp-compra { grid-template-columns: 1fr auto; }
  .mp-compra-val { grid-column: 2; }
  .mp-compra-qtd { grid-column: 1 / -1; }
}

/* ═══ FICHA DO PRODUTO — duas listas no lugar da tabela de 6 colunas ════════ */
.pm-bloco { margin-bottom: 22px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.pm-bloco-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 14px 18px;
  background: var(--surface2, var(--surface)); border-bottom: 1px solid var(--border);
}
.pm-bloco-nome { font-size: var(--fs-md); font-weight: 700; }
.pm-bloco-sub  { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.pm-bloco-total {
  font-family: var(--font-num); font-size: var(--fs-md); font-weight: 700;
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2;
}
.pm-bloco-total span { font-family: var(--font); font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.pm-bloco-vazio { padding: 22px 18px; font-size: var(--fs-sm); color: var(--faint); text-align: center; }

.pm-item { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.pm-item:last-of-type { border-bottom: none; }
.pm-item.orfao { background: color-mix(in srgb, var(--red) 6%, transparent); }

.pm-item-l1 { display: flex; align-items: center; gap: 12px; }
.pm-item-nome { flex: 1; min-width: 0; }
.pm-item-sel  { width: 100%; max-width: 320px; }
.pm-item-sel.erro { border-color: var(--red); }
.pm-item-total { font-family: var(--font-num); font-size: var(--fs-md); font-weight: 700; white-space: nowrap; }
.pm-item-x {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
  border: none; background: transparent; color: var(--faint);
  cursor: pointer; font-family: inherit; font-size: var(--fs-sm);
  transition: background .15s, color .15s;
}
.pm-item-x:hover { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }

.pm-item-l2 {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 10px; padding-left: 2px;
}
.pm-item-campos { display: flex; align-items: center; gap: 6px; }
.pm-item-qtd { width: 84px; flex-shrink: 0; }
.pm-item-por { width: 132px; flex-shrink: 0; font-size: var(--fs-sm); padding-top: 6px; padding-bottom: 6px; }
.pm-item-un  {
  font-size: var(--fs-sm); color: var(--muted);
  min-width: 62px; flex-shrink: 0;   /* alinha o seletor de escala numa coluna so */
}
.pm-item-conta { flex: 1; min-width: 140px; font-size: var(--fs-xs); color: var(--faint); }

/* O peso do item é barra + número: a barra dá a comparação de relance, o número
   da o valor exato. So um dos dois deixaria uma das duas leituras no escuro. */
.pm-item-peso { display: flex; align-items: center; gap: 8px; width: 132px; flex-shrink: 0; }
.pm-item-peso u {
  flex: 1; height: 6px; border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  text-decoration: none;
}
.pm-item-peso i {
  display: block; height: 100%; border-radius: 3px;
  background: var(--accent); min-width: 2px; transition: width .2s;
}
.pm-item-peso span {
  font-family: var(--font-num); font-size: var(--fs-xs); color: var(--muted);
  margin-left: auto; white-space: nowrap;
}

.pm-add {
  display: block; width: 100%; padding: 12px;
  border: none; border-top: 1px dashed var(--border); background: transparent;
  color: var(--accent); font-family: inherit; font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.pm-add:hover { background: var(--surface2, transparent); }

@media (max-width: 640px) {
  .pm-item-l2 { gap: 10px; }
  .pm-item-peso { width: 100%; }
  .pm-item-sel { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AJUDA (?) v16 — a explicacao sai da tela e vai para dentro de um botao
   ───────────────────────────────────────────────────────────────────────────
   Texto explicativo e ruido: quem ja sabe usar a dash le a mesma frase todo
   dia. Em vez de apagar a explicacao (ela ajuda na primeira vez), ela passa a
   morar num `?` de 15px ao lado do titulo/rotulo e so aparece no clique.
   Um unico balao (#aj-pop) e reposicionado — nao ha um por texto.
   ═══════════════════════════════════════════════════════════════════════════ */
.aj {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; padding: 0; margin-left: 6px;
  border: 1px solid var(--border3); border-radius: 50%;
  /* `--muted` dava 4,42:1 no tema claro — abaixo do mínimo. O `?` agora carrega
     TODA a explicacao da dash: ele precisa ser discreto, mas nao invisivel. */
  background: transparent; color: var(--text-dim);
  font-family: inherit; font-size: 10px; font-weight: 700; line-height: 1;
  cursor: pointer; vertical-align: middle;
  transition: color .15s, border-color .15s, background .15s;
}
.aj:hover, .aj:focus-visible { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); outline: none; }
.aj.aberto { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
/* No título de página o `?` acompanha o tamanho do texto e desce um fio. */
h1 .aj, h2 .aj, .section-title .aj, .card-label .aj, .det-lbl .aj { position: relative; top: -1px; }
.form-label .aj { margin-left: 4px; }

#aj-pop {
  position: fixed; z-index: 3000; max-width: 300px;
  padding: 10px 12px; border: 1px solid var(--border2); border-radius: var(--r-md);
  background: var(--surface2); color: var(--text-dim);
  font-size: var(--fs-sm); line-height: 1.5; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .13s ease, transform .13s ease;
}
#aj-pop.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (max-width: 640px) { #aj-pop { max-width: min(300px, calc(100vw - 24px)); } }
/* Na lista de compras, o equivalente em fardos ("≈ 2 pacotes") anda junto da
   quantidade em unidades — e o numero que ele leva para o mercado. */
.mp-compra-fardo { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCAO POR FORNADA v17 — aberta pede acao, fechada conta historia
   ───────────────────────────────────────────────────────────────────────────
   A fornada ABERTA e a unica coisa da tela que exige alguma coisa dele, entao
   ela ganha faixa de cor a esquerda e o botao na propria face do cartao. A
   fechada e historico: mesma caixa, sem cor, sem botao.
   ═══════════════════════════════════════════════════════════════════════════ */
.lote-card { position: relative; }
.lote-card.aberta { box-shadow: inset 3px 0 0 var(--accent); }
.lt-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.lt-card-nome { font-weight: 700; font-size: var(--fs-md); line-height: 1.3; }
.lt-chip {
  flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 700; padding: 2px 7px;
  border-radius: 999px; background: var(--surface3); color: var(--muted); white-space: nowrap;
}
.lt-chip.aberta { background: var(--accent-bg); color: var(--accent); }
.lt-card-num { display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.lt-num { display: flex; flex-direction: column; gap: 1px; }
.lt-num b { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.lt-num b.neg { color: var(--red); }
.lt-num span { font-size: var(--fs-xs); color: var(--muted); }
.lt-card-pe {
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--muted);
}
.lt-card-btn { margin-top: 12px; width: 100%; font-size: var(--fs-sm); }
.lt-card-acoes { display: flex; gap: 8px; margin-top: 12px; }
.lt-card-acoes .btn { flex: 1; font-size: var(--fs-sm); }

/* O bloco de números que aparece ANTES de confirmar (abrir e fechar) e no
   detalhe. E sempre a mesma leitura: rotulo a esquerda, numero a direita. */
.lt-prev {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface2); padding: 12px 14px;
}
.lt-prev:empty { display: none; }
.lt-prev-l {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 5px 0; font-size: var(--fs-sm);
}
.lt-prev-l b { font-weight: 700; font-variant-numeric: tabular-nums; }
.lt-prev-l b.neg { color: var(--red); }
.lt-prev-l.sub { color: var(--muted); padding: 3px 0 3px 12px; font-size: var(--fs-xs); }
.lt-prev-l.sub span:last-child { font-variant-numeric: tabular-nums; }
.lt-prev-sep {
  margin: 10px 0 4px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.lt-prev-nota { margin-top: 10px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.lt-prev-aviso { font-size: var(--fs-sm); color: var(--red); line-height: 1.5; }
@media (max-width: 760px) { .lt-card-num { gap: 12px; } }

/* Disclosure do DRE: a linha principal fica, o detalhe abre no clique. */
.dre-mais {
  display: inline-flex; align-items: center; gap: 5px; margin: 2px 0 6px 14px; padding: 0;
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font-family: inherit; font-size: var(--fs-xs);
}
.dre-mais:hover { color: var(--accent); }
.dre-mais i {
  width: 0; height: 0; border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
  transition: transform .15s;
}
.dre-mais.aberto i { transform: rotate(90deg) translateX(-1px); }
.dre-zeradas {
  margin: 4px 0 4px 14px; font-size: var(--fs-xs); color: var(--faint); line-height: 1.6;
}
.dre-rodape {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.6;
}
/* Rodapé do modal do produto: nota curta, sem a caixa de aviso que competia
   com os numeros da ficha. */
.pm-rodape {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.6;
}
.pm-rodape a { color: var(--accent); font-weight: 700; text-decoration: none; }
.pm-rodape a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   DISPARO DE MENSAGEM v18
   ═══════════════════════════════════════════════════════════════════════════ */
.dsp-modos { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.dsp-modo {
  flex: 1; min-width: 160px; padding: 9px 12px; border: 1px solid var(--border2);
  border-radius: var(--r-md); background: var(--surface2); color: var(--text-dim);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.dsp-modo:hover { border-color: var(--border3); }
.dsp-modo.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.dsp-lista {
  max-height: 190px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface2); padding: 6px;
}
.dsp-item {
  display: flex; align-items: center; gap: 9px; padding: 6px 8px;
  border-radius: 7px; cursor: pointer; font-size: var(--fs-sm);
}
.dsp-item:hover { background: var(--surface3); }
.dsp-item input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; }
/* A prévia mostra o texto como o cliente vai ler — inclusive as quebras de linha. */
.dsp-preview {
  white-space: pre-wrap; word-break: break-word; margin-top: 6px; padding: 10px 12px;
  border-radius: var(--r-md); background: var(--surface3); color: var(--text-dim);
  font-size: var(--fs-sm); line-height: 1.55; max-height: 200px; overflow-y: auto;
}
#dsp-texto { resize: vertical; min-height: 120px; line-height: 1.55; }

/* ═══════════════════════════════════════════════════════════════════════════
   PADRAO v19 — um botao so, interface em negrito, select sem seta

   Tres pedidos dele (18/08/2026), todos sobre CONSISTENCIA:

   1. Botao e UM so. Primeiro ele pediu que "novo pedido" tivesse o mesmo
      entorno colorido de "registrar producao"; montei quatro niveis e ele
      respondeu: *"Por que as cores e as proporcoes dos botoes sao diferentes?
      Preciso que todos tenham o mesmo tamanho e cores, com os textos
      localizados ao centro."* Entao nao ha hierarquia visual de botao nesta
      dash — ha UMA aparencia (marrom cheio com tinta clara, o mesmo do antigo
      "Registrar producao"), UMA altura, UMA largura minima e texto centralizado. A importancia da acao vem de
      ONDE ela esta na tela, nao da cor dela.

      Unica excecao: `.btn-red`. Mesma geometria, mesmo tratamento, so a matiz
      muda — botao que apaga nao pode ser identico ao que salva.

      Isso revoga duas coisas: o `.btn-add` transparente (decisao dele de
      07/2026) e os 4 niveis que eu mesmo propus horas antes. Nao remontar
      hierarquia de botao sem ele pedir.

   2. "tudo aquilo que nao for texto esteja em negrito, como nos nomes dos
      clientes". A dash tinha 4 pesos concorrendo (500/600/650/750) sem regra:
      dois vizinhos separados por meio degrau nao leem como hierarquia, leem como
      desalinho. Agora sao DOIS pesos: 700 para interface (nome, numero, rotulo,
      celula, botao, aba, badge, campo) e 400 so para TEXTO CORRIDO — explicacao,
      dica, aviso, estado vazio. A hierarquia passa a vir de tamanho e cor, que e
      onde ela ja estava. Peso novo nasce 700; se for prosa, entra na lista de
      excecao aqui embaixo.

   3. "tudo que for botao e tenha mais de uma opcao nao tenha esse '^' de cabeca
      pra baixo; quando eu passar o mouse em cima faca com que as opcoes aparecam
      automaticamente". A seta sai de TODO select (a nativa tambem, via
      `appearance:none`) e a lista abre no hover — o JS esta no fim do
      `index.html`, no mesmo IIFE que ja trocava o popup do sistema.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Botoes ─ um so ────────────────────────────────────────── */

/* Cor: o marrom cheio de "Registrar producao", com tinta clara. Token proprio
   (e nao `--accent`) porque no tema escuro o acento vira uma areia clara — e
   letra branca sobre areia clara nao se le. No escuro o marrom so clareia o
   suficiente para descolar do fundo grafite. */
:root { --btn: #8b5e3c; --btn-hover: #6b4526; --btn-ink: #fff8f0; }
[data-theme="dark"] { --btn: #9c6b45; --btn-hover: #b07c53; }

/* Geometria identica para todo botao da dash: mesma altura, mesma largura
   minima, mesmo respiro, texto no centro. `min-width` e o que faz uma fileira
   de rotulos curtos ("Quitar", "Salvar") parar de virar degrau. */
.btn,
.btn.btn-brown, .btn.btn-add, .btn.btn-ghost, .btn.btn-red {
  height: 38px;
  min-width: 132px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--btn);
  color: var(--btn-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  box-shadow: none;
  filter: none;
}
.btn:hover,
.btn.btn-brown:hover, .btn.btn-add:hover, .btn.btn-ghost:hover {
  background: var(--btn-hover);
  border-color: transparent;
  color: var(--btn-ink);
  filter: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* Unica excecao de COR (geometria e tratamento sao os mesmos): apagar nao pode
   parecer salvar. */
.btn.btn-red,
[data-theme="dark"] .btn.btn-red {
  background: var(--red); color: var(--btn-ink); border-color: transparent;
}
.btn.btn-red:hover { background: color-mix(in srgb, var(--red) 78%, #000); color: var(--btn-ink); }

.cfg-card .btn-add, .cfg-card .btn-add:hover { color: var(--btn-ink); }

/* Botao sem rotulo (o "✕" que fecha um painel ou tira uma linha): mesma altura,
   mesma cor, so nao estica ate a largura minima — um X de 132px e uma mancha. */
.btn.btn-x { min-width: 38px; width: 38px; padding: 0; }

/* Botao de icone continua fora do canon: ele nao tem rotulo nem caixa, e um
   alvo de clique do tamanho do icone (lapis das tabelas). */
.btn-ico { height: auto; min-width: 0; padding: 4px; border: none; background: none; }

/* ── 2. Dois pesos ──────────────────────────────────────────────────────────── */

/* Interface: tudo que e dado, rotulo ou controle. */
.tab, .badge, [class*="badge-"], [class*="-pill"], [class*="-chip"], .chip,
table.tbl th, table.tbl td, table.rel th, table.rel td,
.usr-table td, .prod-table td, .tbl-footer,
.form-input, .form-select, .form-label, select, input, option,
.sel-pop-item, .pend-itm, .pend-select,
.modal-titulo, .modal-title, .section-title, .page-title,
.card-label, .card-value, .card-val, .card-sm-label, .card-sm-value {
  font-weight: 700;
}

/* Texto corrido: explicacao, dica, aviso, estado vazio, previa de mensagem.
   Se for frase para LER, entra aqui; se for dado para BATER O OLHO, fica em 700. */
.page-desc, .card-sub, .card-sm-sub, .empty, .loading,
.login-hint, .login-sub, .login-erro,
.cal-sub, .cal-legenda, .diario-nota,
.kx-aviso, .kx-conf, .kx-estado-txt, .kx-mov-sub, .kx-mov-txt,
.log-nota, .log-txt, .lt-prev-aviso, .lt-prev-nota,
.mp-compra-sub, .mp-compra-fardo,
.pc-bar-legenda, .pc-panel-sub, .pend-reg-info,
.pm-aviso, .pm-bloco-sub, .pm-secao-sub, .pm-rodape, .pm-bloco-vazio,
.pt-reg-sub, .rec-box-sub,
.sidebar-user-info, .tk-obs, .update-info,
.dsp-preview, .aj-balao, textarea, textarea.form-input {
  font-weight: 400;
}
/* O numero heroi continua um degrau acima de tudo. */
.card-value, .card-val { font-weight: 800; }

/* "Sombreado mais forte": o que e identidade ou valor vai para a tinta cheia.
   As colunas que sao contexto guardam a classe `.dim` e continuam apagadas. */
table.tbl tbody td { color: var(--text); }
table.tbl tbody td.dim { color: var(--muted); }
.pend-itm { color: var(--text); }

/* ── 3. Select sem seta ─────────────────────────────────────────────────────── */

/* `appearance:none` mata tambem a seta NATIVA (a dos selects que nunca tiveram
   background-image, como o `.pend-select`), senao o "^" sobrevive em metade da
   dash. Sem seta, o padding da direita volta a ser igual ao da esquerda. */
select,
.form-select,
.filtros-bar select,
.filtros select,
.pend-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: none !important;
}
.form-select, .filtros-bar select { padding-right: 12px; }

/* Sem a seta, o campo precisa dizer de outro jeito que e uma escolha: ele acende
   inteiro no hover, do mesmo jeito que acende com a lista aberta. */
.form-select:hover, .pend-select:hover, .filtros-bar select:hover {
  border-color: var(--accent);
  background-color: var(--accent-bg);
  color: var(--accent-strong);
  cursor: pointer;
}
.sel-pop-item { font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   PONTO v20 — tarefa, colaborador, e o valor que sai dos dois

   Pedido dele em 18/08/2026: *"na aba Equipe, pelo amor de Deus, esta muito
   fajuto e simples. Nao tem necessidade de uma sub aba so pra registrar
   colaboradores"* e *"eu gosto de simplicidade, menos texto, quero algo mais
   autoexplicativo"*.

   As quatro sub-abas viraram tres. Equipe e Pagamento se fundiram em
   **Colaboradores**, porque cadastrar um nome nao merecia tela propria e o
   quanto pagar so faz sentido colado em QUEM. O cartao responde as tres
   perguntas de fora (quem e, quanto fez, quanto recebe) e o clique abre o
   detalhe — o que ele chama de autoexplicativo e isso: nada de texto de apoio,
   a informacao na ordem em que a pergunta aparece.

   O contrato da tarefa passou a ser declarado como ele fala: "paga R$ X por
   hora e exige A unidades em B horas". O por-hora (`metaHora`) continua sendo a
   conta do backend, so que agora e DERIVADO — ninguem mais digita divisao.

   NAO E UM PONTO (mesmo dia, depois de ver a tela): *"eu nao preciso que o ponto
   funcione como um 'ponto' de fato, de registro, eu preciso apenas que os
   colaboradores registrem as tarefas"*. Saiu o cronometro inteiro — comecar/
   terminar tarefa, o painel "em andamento", o `.pt-cron` e o botao "Ja fiz". So
   existe UM caminho: **Registrar tarefa** (colaborador · tarefa · data e hora ·
   tempo aproximado · unidades). Os endpoints `/api/ponto/iniciar` e
   `/api/ponto/encerrar` foram removidos junto. **Nao ressuscitar o relogio.**
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cabecalho de secao: titulo a esquerda, acoes a direita, e uma so regra para
   toda a dash (antes era um `style=` com flex repetido em cada bloco). */
.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.sec-head .section-title { margin-bottom: 0; }
.sec-head-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Valor da hora padrao mora junto das tarefas: e o que vale pra tarefa sem
   valor proprio, entao e ali que ele significa alguma coisa. */
.pt-padrao { display: flex; align-items: center; gap: 8px; }
.pt-padrao .form-label { margin: 0; white-space: nowrap; }
.pt-padrao .form-input { width: 92px; height: 38px; }

/* "20  un  em  2  horas" — o minimo lido como uma frase, nao como quatro campos. */
.pt-min-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pt-min-row .form-input { width: 88px; height: 38px; }
.pt-min-row span { font-size: var(--fs-sm); color: var(--muted); font-weight: 400; }

/* ── Cartao do colaborador ────────────────────────────────────────────────── */
.cb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1100px) { .cb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .cb-grid { grid-template-columns: 1fr; } }

.cb-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px; cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.cb-card:hover { border-color: var(--accent); background: var(--surface2); transform: translateY(-2px); }
.cb-card:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

.cb-topo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cb-mono {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-bg); color: var(--accent-strong);
  border: 1px solid var(--accent-ring);
  font-family: var(--font-title); font-size: var(--fs-md); font-weight: 700;
}
.cb-nome {
  font-family: var(--font-title); font-size: var(--fs-lg); font-weight: 700;
  color: var(--text); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A funcao e identidade, nao prosa: fica em 700, so menor e mais apagada. */
.cb-funcao { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }

.cb-linhas { display: grid; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; }
.cb-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cb-linha span { font-size: var(--fs-sm); color: var(--muted); }
.cb-linha b { font-family: var(--font-num); font-size: var(--fs-md); color: var(--text-dim); }
.cb-linha.forte b { color: var(--accent); font-size: var(--fs-lg); }

/* Total do mes: o unico numero da tela que fala do negocio, nao de uma pessoa. */
.cb-total {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 12px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
}
.cb-total:empty { display: none; }
.cb-total span { font-size: var(--fs-sm); color: var(--muted); }
.cb-total b { font-family: var(--font-num); font-size: var(--fs-xl); color: var(--text); }

/* Somas dentro do colaborador, no fim da lista de tarefas. */
.cb-somas {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border2);
  display: grid; gap: 8px; max-width: 320px; margin-left: auto;
}
/* "18 un de 20" — o alvo anda junto do que foi feito, senao vira duas colunas. */
.cb-alvo { color: var(--muted); font-weight: 400; }

/* Dois campos lado a lado com rotulos de alturas diferentes: o rotulo que quebra
   em duas linhas empurra so o SEU campo pra baixo, e a linha fica torta. Com o
   conteudo ancorado no fim da celula, os campos alinham independente do rotulo. */
.form-row > div { display: flex; flex-direction: column; justify-content: flex-end; }

/* ── Veredito ─────────────────────────────────────────────────────────────────
   O bloco que responde antes de salvar: quanto tempo, quanto exigia, quanto
   produziu e quanto vale. E a mesma peca nos tres modais do Ponto. */
.vd {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 4px;
}
.vd-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0; }
.vd-linha span { font-size: var(--fs-sm); color: var(--muted); }
.vd-linha b { font-family: var(--font-num); font-size: var(--fs-md); color: var(--text); }
.vd-valor {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px;
}
.vd-valor span { font-size: var(--fs-sm); font-weight: 700; }
.vd-valor b { font-family: var(--font-num); font-size: var(--fs-lg); }
.vd-valor.ok   span, .vd-valor.ok   b { color: var(--green); }
.vd-valor.meio span, .vd-valor.meio b { color: var(--amber); }

/* ═══════════════════════════════════════════════════════════════════════════
   PADRAO v21 — tres marroms, uma fonte, um botao lateral (07/09/2026)

   Sete pedidos dele, todos sobre a mesma coisa: a dash tinha variacao demais
   para o tamanho do que ela mostra.

   1. "Padronize todos os botoes laterais que geram pop-up ... iguais aos
      'Todos os Status' e 'Calendario': em branco com fundo marrom quase
      transparente." → nasce o botao MACIO. Ele e o padrao de tudo que fica na
      LATERAL de um cabecalho ou de uma barra de filtro: abrir um pop-up, ir
      para outra tela, limpar um filtro. O marrom cheio fica reservado para o
      COMMIT (o botao que fecha um modal salvando, o que envia um formulario).
      Isso nao remonta a hierarquia de cor que o v19 derrubou — separa por
      POSICAO, que e onde ele mesmo colocou a diferenca.

   2. "Padronize todas as letras com a mesma fonte dos titulos e subtitulos."
      → Sora em tudo. Manrope sai da dash; `--font-body` e `--font-num` passam a
      apontar para a mesma familia dos titulos.

   3. "Padronize o tamanho de botoes que cumprem a mesma funcao." → uma altura
      (38px) e uma largura minima (132px) para botao com rotulo; botao de icone
      perde os dois e vale o tamanho do icone (item 7).

   4. "Tudo que estiver com maiusculo em todas as letras, remova." → nenhum
      `text-transform: uppercase` sobrevive. O rotulo pequeno continua pequeno e
      apagado; muda a caixa, nao o papel.

   5. "Somente tres tons de marrom, o mesmo vermelho e o mesmo verde." → tres
      tokens (`--m1` escuro, `--m2` medio, `--m3` claro) e um par semantico
      (`--verde`, `--vermelho`). TODO marrom da dash — acento, botao, borda de
      destaque, serie de grafico — sai de um desses tres. Cor nova nao entra sem
      passar por aqui.

   6. "Todos os graficos devem ter os mesmos tamanhos e proporcoes." → todo
      container de grafico e um `.chart-slot` de 300px. O JS tambem desenha em
      300 (VG_ALTURA), entao os dois lados falam o mesmo numero.

   7. "Botoes com icones devem ser reduzidos ao tamanho de seus icones." →
      `.btn-ico` e o alvo do icone mais um respiro de 6px, sem caixa nem largura
      minima.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 5. Tres marrons, um verde, um vermelho ────────────────────────────────── */
:root {
  --m1: #5f3d24;   /* escuro  — hover, tinta de marca, serie mais forte */
  --m2: #8b5e3c;   /* medio   — o marrom da dash: acento, botao, grafico */
  --m3: #c2a184;   /* claro   — borda, preenchimento, serie mais leve */
  --verde:    #2f7d55;
  --vermelho: #b04a30;

  /* Os tokens antigos passam a ser apelidos dos tres. Nada mais define marrom
     por conta propria: mexer aqui muda a dash inteira. */
  --accent:        var(--m2);
  --accent-strong: var(--m1);
  --accent-dim:    var(--m3);
  --accent-bg:     rgba(139, 94, 60, .10);
  --accent-ring:   rgba(139, 94, 60, .28);
  --btn:           var(--m2);
  --btn-hover:     var(--m1);
  --btn-ink:       #fff8f0;

  --green:  var(--verde);    --green-bg: rgba(47, 125, 85, .10);
  --red:    var(--vermelho); --red-bg:   rgba(176, 74, 48, .10);

  /* O macio: fundo marrom quase transparente, borda do mesmo marrom. */
  --soft-bg:       rgba(139, 94, 60, .09);
  --soft-bg-hover: rgba(139, 94, 60, .18);
  --soft-bd:       rgba(139, 94, 60, .22);
}

/* No escuro os tres marroms clareiam junto — sao os mesmos tres degraus, so que
   lidos sobre grafite. Sem isso o `--m1` vira um borrao preto no fundo preto. */
html[data-theme="dark"] {
  --m1: #d8b294;
  --m2: #b0805a;
  --m3: #7a5334;
  --verde:    #6cae87;
  --vermelho: #d2775f;

  --accent:        var(--m2);
  --accent-strong: var(--m1);
  --accent-dim:    var(--m3);
  --accent-bg:     rgba(176, 128, 90, .16);
  --accent-ring:   rgba(176, 128, 90, .34);
  --btn:           var(--m2);
  --btn-hover:     var(--m1);

  --green-bg: rgba(108, 174, 135, .14);
  --red-bg:   rgba(210, 119, 95, .14);

  --soft-bg:       rgba(176, 128, 90, .14);
  --soft-bg-hover: rgba(176, 128, 90, .26);
  --soft-bd:       rgba(176, 128, 90, .30);
}

/* O amber e o indigo eram a quarta e a quinta cor da dash. Viram marrom claro:
   "atencao" ja e dita pelo texto, nao precisava de matiz propria. */
:root, html[data-theme="dark"] {
  --amber: var(--m3);  --amber-bg: var(--soft-bg);
  --indigo: var(--m3); --indigo-bg: var(--soft-bg);
}

/* ── 2. Uma fonte so ───────────────────────────────────────────────────────── */
:root {
  --font-title: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:  var(--font-title);
  --font-num:   var(--font-title);
}
body, button, input, select, textarea, option, table, th, td,
.apexcharts-canvas, .apexcharts-canvas * {
  font-family: var(--font-title);
}
/* Sora e uma fonte larga: sem afrouxar a entrelinha a tabela fica apertada. */
body { line-height: 1.5; letter-spacing: -.005em; }

/* ── 4. Nada em caixa alta ─────────────────────────────────────────────────── */
/* Especificidade de uma classe: empata com os rotulos que tinham `uppercase` e
   ganha por vir depois. O `.badge` fica de fora — ele so capitaliza a inicial. */
/* `!important` porque os rotulos em caixa alta estavam espalhados por regras de
   especificidades diferentes (`table.tbl thead th`, `.filtros-tag`, `.cal-dow`…)
   e cacar uma por uma deixaria sempre uma para tras. O `.badge` fica de fora:
   ele so capitaliza a inicial. */
#app *:not(.badge), #login-screen * { text-transform: none !important; }
.badge { text-transform: capitalize; }
/* Sem a caixa alta, o entreletra largo vira buraco entre as letras. */
.filtros-tag, .card-label, .card-sm-label, .ped-stat-label, .form-label,
.cfg-fato-lbl, .det-lbl, .kx-card-lbl,
.lote-custo-lbl, .pm-kpi-lbl, .mes-label, .cal-dow, .sidebar-section-label {
  letter-spacing: 0;
}

/* ── 1 e 3. O botao ────────────────────────────────────────────────────────── */

/* Macio: tinta marrom sobre marrom quase transparente. Mesma geometria do botao
   cheio — o que muda e so o peso visual. Quem recebe a classe e todo botao que
   ABRE alguma coisa (pop-up, outra aba, outro painel) ou sai de um modal; o
   marrom cheio fica so em quem GRAVA. */
.btn.btn-soft {
  background: var(--soft-bg);
  border: 1px solid var(--soft-bd);
  color: var(--accent-strong);
  filter: none; box-shadow: none;
}
.btn.btn-soft:hover {
  background: var(--soft-bg-hover);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.btn.btn-soft:disabled:hover { background: var(--soft-bg); border-color: var(--soft-bd); }

/* Apagar e vermelho onde quer que esteja — a unica cor que sobrevive a
   padronizacao, porque apagar nao pode parecer salvar. */
.btn.btn-red, .btn.btn-red:hover { color: var(--btn-ink); background: var(--red); border-color: transparent; }
.btn.btn-red:hover { background: color-mix(in srgb, var(--red) 80%, #000); }

/* Largura minima nao vale quando os botoes dividem a largura de um cartao —
   dois botoes de 132px num cartao de 300px estouram a caixa. */
.lt-card-acoes .btn, .pend-card2-actions .btn { min-width: 0; }

/* ── 7. Botao de icone = tamanho do icone ──────────────────────────────────── */
.btn-ico {
  height: auto; width: auto; min-width: 0; padding: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: 8px;
  color: var(--muted); cursor: pointer;
  transition: color var(--mo-fast) var(--ease), background var(--mo-fast) var(--ease);
}
.btn-ico svg { display: block; width: 15px; height: 15px; }
.btn-ico:hover { background: var(--soft-bg); color: var(--accent-strong); }
.btn-ico-danger:hover { background: var(--red-bg); color: var(--red); }
.btn-ico:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
/* Duas acoes numa celula de tabela: juntas, centralizadas, sem esticar a linha. */
.row-acoes { display: inline-flex; align-items: center; gap: 2px; }

/* O "✕" que fecha um painel tambem e so o icone. */
.btn.btn-x {
  min-width: 0; width: 32px; height: 32px; padding: 0;
  background: none; border: none; color: var(--muted); font-size: var(--fs-md);
}
.btn.btn-x:hover { background: var(--soft-bg); color: var(--accent-strong); }

/* ── 6. Todo grafico do mesmo tamanho ──────────────────────────────────────── */
.chart-slot { display: block; min-height: 300px; }
.chart-slot .apexcharts-canvas { margin: 0 auto; }
/* O estado vazio ocupa a mesma altura do grafico — senao o painel sem dado
   encolhe e a grade de quatro paineis fica com degrau. */
.chart-slot > .empty { display: flex; align-items: center; justify-content: center; min-height: 300px; }
.vg-vazio { display: flex; align-items: center; justify-content: center;
  min-height: 300px; text-align: center; padding: 0 16px; }

/* Visao Geral: os quatro paineis do menu, dois a dois, todos do mesmo tamanho. */
.vg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vg-grid > .section { display: flex; flex-direction: column; margin-bottom: 0; }
.vg-grid > .section .chart-slot { flex: 1; }
@media (max-width: 1000px) { .vg-grid { grid-template-columns: 1fr; } }

/* O painel e clicavel inteiro: a etiqueta "Abrir" diz isso sem ocupar um botao. */
.vg-ir {
  font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
  padding: 3px 10px; border-radius: 999px;
  background: var(--soft-bg); border: 1px solid transparent;
  transition: color var(--mo-fast) var(--ease), background var(--mo-fast) var(--ease);
}
.section.ir { cursor: pointer; transition: border-color var(--mo-base) var(--ease), transform var(--mo-base) var(--ease); }
.section.ir:hover { border-color: var(--soft-bd); transform: translateY(-2px); }
.section.ir:hover .vg-ir { background: var(--soft-bg-hover); color: var(--accent-strong); }

/* ── Ponto de venda: a etiqueta do lugar onde a venda aconteceu ────────────── */
.tag-ponto {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 700;
  background: var(--soft-bg); color: var(--accent-strong);
  border: 1px solid var(--soft-bd); white-space: nowrap;
}
.tag-ponto::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}
/* Os tres pontos usam os tres marroms — a cor identifica o lugar sem legenda. */
.tag-ponto-escola   { color: var(--m1); }
.tag-ponto-trabalho { color: var(--m2); }
.tag-ponto-academia { color: var(--m3); }
html[data-theme="dark"] .tag-ponto-academia { color: var(--m1); }

/* ── Acabamento: o "mais moderno" que ele pediu ────────────────────────────── */
/* Cantos um degrau mais largos e sombra mais rasa: o cartao para de parecer uma
   caixa desenhada e passa a parecer uma superficie. */
:root { --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; }
.section, .card, .cfg-card {
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(28,22,20,.04);
  transition: border-color var(--mo-base) var(--ease), box-shadow var(--mo-base) var(--ease);
}
html[data-theme="dark"] .section,
html[data-theme="dark"] .card,
html[data-theme="dark"] .cfg-card { box-shadow: none; }

/* Cabecalho de tela: o titulo respira e a acao encosta na direita. */
.page-head { align-items: center; }
.page-title { letter-spacing: -.025em; }

/* Tabela: linha alta, divisoria fina, e a linha inteira acende sob o cursor. */
table.tbl tbody tr { transition: background var(--mo-fast) var(--ease); }
table.tbl tbody tr:hover { background: var(--soft-bg); }
table.tbl thead th { color: var(--muted); font-weight: 700; }

/* Sub-navegacao (Pedidos, Financeiro, Produtos): a pilula ativa e marrom cheio,
   as outras sao o mesmo macio dos botoes laterais — um vocabulario so. */
.fin-pill, .ped-pill {
  height: 34px; padding: 0 14px; border-radius: 999px;
  background: transparent; border: 1px solid transparent; color: var(--muted);
}
.fin-pill:hover, .ped-pill:hover { background: var(--soft-bg); color: var(--accent-strong); border-color: transparent; }
.fin-pill.active, .ped-pill.active {
  background: var(--soft-bg-hover); color: var(--accent-strong); border-color: var(--soft-bd);
}

/* Campo de formulario: mesma altura do botao, mesma borda do macio. */
.form-input, .form-select { border-radius: 10px; }
.form-input:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* Subtitulo do modal: a frase que diz de QUE registro se trata. */
.modal-sub { font-size: var(--fs-sm); color: var(--muted); font-weight: 400; margin: 0; }

/* Linha de total do relatorio: o unico degrau de peso da tabela. */
table.rel tr.rel-total td { border-top: 1px solid var(--border2); color: var(--text); font-weight: 800; }

/* ══ PRODUÇÃO ═════════════════════════════════════════════════════════════════
   Um cartão por colaboradora, e o cartão responde três perguntas na ordem em que
   ele pergunta: quem é, quanto saiu da meta, quanto ela tem a receber. A barra é
   a forma que dispensa o rótulo — verde quando bateu, acento enquanto não bate. */
.pr-pane { min-width: 0; }
.pr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pr-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px 24px;
  display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
.pr-card.bateu { border-color: rgba(95,185,140,.35); }
.pr-card.inativa { opacity: .55; }
.pr-card .btn { width: 100%; margin-top: auto; }

.pr-card-top { display: flex; align-items: center; gap: 12px; }
.pr-nome {
  font-family: var(--font-title); font-size: var(--fs-md); font-weight: 700;
  color: var(--text); line-height: 1.35; overflow-wrap: anywhere;
}
.pr-nome .eu { color: var(--faint); font-weight: 400; }
.pr-produto { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }

/* O número primário do cartão: o que saiu, com a meta em corpo menor ao lado. */
.pr-num { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.pr-num b { font-family: var(--font-num); font-size: var(--fs-display); font-weight: 700; color: var(--text); line-height: 1.1; }
.pr-num span { font-size: var(--fs-sm); color: var(--muted); }
.pr-estado { font-size: var(--fs-sm); color: var(--muted); margin-top: 6px; }
.pr-estado .pos { color: var(--green); font-weight: 700; }

.pr-pag { border-top: 1px solid var(--border); padding-top: 12px; display: grid; gap: 6px; }
.pr-pag-lin { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
.pr-pag-lin b { font-family: var(--font-num); font-weight: 700; color: var(--text-dim); }
.pr-pag-lin.total { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 2px; color: var(--text-dim); }
.pr-pag-lin.total b { font-size: var(--fs-md); color: var(--text); }

.pr-alerta {
  background: var(--red-bg); border: 1px solid rgba(214,106,90,.25);
  border-radius: var(--r-md); padding: 8px 12px;
  font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.5;
}

/* A prévia dentro do modal: responde "e depois de salvar?" antes de salvar. */
.pr-previa { display: grid; gap: 6px; margin-bottom: 16px; padding: 12px 16px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-md); }
.pr-previa:empty { display: none; }
.pr-previa-lin { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
.pr-previa-lin b { font-family: var(--font-num); font-weight: 700; color: var(--text); }

.pr-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* Estoque de produto pronto — a sobra da semana, que vende na semana seguinte. */
.pr-pronto { margin-top: 8px; }
.pr-pronto-lin {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-dim);
}
.pr-pronto-lin:last-child { border-bottom: none; }
.pr-pronto-lin b { font-family: var(--font-num); font-size: var(--fs-md); font-weight: 700; color: var(--text); }
.pr-pronto-lin b.neg { color: var(--red); }
.pr-pronto-lin s { grid-column: 1 / -1; text-decoration: none; font-size: var(--fs-xs); color: var(--muted); }

/* Lista de compras — a pergunta de toda segunda, respondida em tabela. */
.pr-metas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pr-meta-chip {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; font-size: var(--fs-sm); color: var(--muted);
  display: inline-flex; align-items: baseline; gap: 6px;
}
.pr-meta-chip b { color: var(--text-dim); font-weight: 700; }

.pr-compra-tab { margin-top: 8px; }
.pr-compra-cab, .pr-compra-lin {
  display: grid; grid-template-columns: minmax(160px,2fr) repeat(4, minmax(72px,1fr));
  gap: 12px; align-items: baseline;
}
.pr-compra-cab {
  font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
  padding-bottom: 10px; border-bottom: 1px solid var(--border2);
}
.pr-compra-lin {
  padding: 12px 0; border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text-dim);
}
.pr-compra-lin:last-child { border-bottom: none; }
.pr-compra-lin.ok { color: var(--muted); }
.pr-compra-lin b { font-family: var(--font-num); font-weight: 700; color: var(--text); }
.pr-compra-lin .neg { color: var(--red); }
.pr-compra-nome { color: var(--text); font-weight: 700; }
.pr-compra-nome s { display: block; text-decoration: none; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); margin-top: 2px; }

/* Vazio: o que é a tela, por que está vazia, e o botão que resolve. */
.pr-vazio { text-align: center; padding: 48px 24px; }
.pr-vazio-tit { font-family: var(--font-title); font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.pr-vazio-txt { font-size: var(--fs-sm); color: var(--muted); margin: 8px auto 20px; max-width: 46ch; line-height: 1.6; }

@media (max-width: 1180px) { .pr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .pr-grid, .pr-form-grid { grid-template-columns: 1fr; }
  .pr-compra-cab { display: none; }
  .pr-compra-lin { grid-template-columns: 1fr auto; row-gap: 2px; }
  .pr-compra-nome { grid-column: 1 / -1; }
}

/* ══ v23 — Balanco do mes, forma de pagamento e o combo de cliente ══════════ */

/* ── Combobox: quem ja comprou mas nao tem cadastro ────────────────────────── */
/* O nome sugere igual; a etiqueta so avisa que ali nao ha ficha de cliente —
   sem ela, um comprador avulso pareceria cadastrado. */
.nf-combo-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nf-combo-tag {
  flex: none; font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
  background: var(--soft-bg); border: 1px solid var(--soft-bd);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.nf-combo-item:hover .nf-combo-tag { color: var(--accent-strong); }

/* ── Forma de pagamento: a etiqueta colada no status ───────────────────────── */
/* "Pago" nao diz onde o dinheiro parou. Dinheiro tem que estar na gaveta, Pix
   esta na conta — sao conferencias diferentes. */
.tag-pag {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px;
  background: var(--soft-bg); border: 1px solid var(--soft-bd); color: var(--accent-strong);
}
.tag-pag-pix { color: var(--m2); }
.tag-pag-sem { color: var(--muted); font-weight: 400; font-style: italic; }
html[data-theme="dark"] .tag-pag-pix { color: var(--m1); }

/* ── Balanco do mes ────────────────────────────────────────────────────────── */
.bl-head-acoes { display: flex; align-items: center; gap: 8px; }
/* Um cartao por produto, mais o total: quantos sao depende do cardapio, entao a
   grade se acomoda em vez de fixar quatro colunas. */
.cards-balanco { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.bl-toggle { display: inline-flex; gap: 4px; }
.bl-pill {
  height: 32px; padding: 0 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 700;
  background: transparent; border: 1px solid transparent; color: var(--muted);
  transition: background var(--mo-fast) var(--ease), color var(--mo-fast) var(--ease);
}
.bl-pill:hover { background: var(--soft-bg); color: var(--accent-strong); }
.bl-pill.active { background: var(--soft-bg-hover); color: var(--accent-strong); border-color: var(--soft-bd); }
/* O grafico das semanas e a leitura principal da tela: mais alto que os
   paineis-indice da Visao Geral. */
.chart-slot-alto, .chart-slot-alto > .empty { min-height: 340px; }

/* O intervalo de dias fica abaixo do numero da semana, em letra pequena: e
   referencia, nao titulo. */
.bl-dias {
  display: block; font-size: var(--fs-xs); font-weight: 400;
  color: var(--muted); margin-top: 2px; letter-spacing: 0; text-transform: none;
}
table.tbl tfoot td {
  border-top: 1px solid var(--border2); background: var(--soft-bg);
  padding-top: 12px; padding-bottom: 12px;
}

/* ── Conferencia de caixa ──────────────────────────────────────────────────── */
.bl-caixa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.bl-caixa-item {
  padding: 14px 16px; border-radius: var(--r-md);
  background: var(--surface2); border: 1px solid var(--border);
}
/* O dinheiro em especie e o unico numero que exige alguem conferir a mao: e ele
   que ganha o destaque. */
.bl-caixa-item.destaque { border-color: var(--soft-bd); background: var(--soft-bg); }
.bl-caixa-item.alerta { border-color: var(--red); }
.bl-caixa-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bl-caixa-rot { font-size: var(--fs-sm); color: var(--muted); font-weight: 700; }
.bl-caixa-val { font-family: var(--font-num); font-size: var(--fs-lg); font-weight: 700; color: var(--text); white-space: nowrap; }
.bl-caixa-item.destaque .bl-caixa-val { color: var(--accent-strong); }
.bl-caixa-item.alerta .bl-caixa-val { color: var(--red); }
.bl-caixa-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }
.bl-caixa-aviso {
  margin-top: 12px; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--soft-bg); border: 1px solid var(--soft-bd);
  font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.5;
}

@media (max-width: 900px) {
  .bl-caixa-grid { grid-template-columns: 1fr; }
  /* No celular o titulo e as duas pilulas nao cabem lado a lado: em vez de
     quebrar a palavra no meio, a linha inteira desce. */
  .bl-pill { padding: 0 12px; font-size: var(--fs-xs); }
  .bl-head-acoes { width: 100%; }
  .bl-head-acoes select { width: 100%; }
}

/* A barra do Balanco tem um filtro so; a nota a direita diz o que a tela ja
   promete no titulo — que nada aqui acumula de um mes para o outro. */
.bl-filtro-nota { font-size: var(--fs-sm); color: var(--muted); display: inline-flex; align-items: center; gap: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   v24 — O PRIMEIRO OLHAR (14/09/2026)

   "A minha ideia principal nessa dash e que o primeiro contato com a interface
   grafica seja o mais clean possivel."

   Ele mesmo achou o contra-exemplo dentro da propria dash: filtrando por
   "pendente", a tela vira cartao e fica limpa; sem filtro, vira uma tabela de
   dez colunas. A diferenca nao era o filtro — era quanta coisa cada linha
   tentava dizer de uma vez.

   Entao a regra desta leva: a linha diz QUEM, O QUE, QUANTO e EM QUE PE. Todo o
   resto (local, valor unitario, desconto, forma de pagamento, mes) continua na
   dash, um clique abaixo. Nada foi removido; foi tirado do primeiro olhar.

   O mesmo corte vale para Clientes: ID privado, ID do Telegram e data de
   cadastro sao consulta, nao busca — viraram ficha, e o cartao ficou com nome,
   lugar e o que a pessoa comprou.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A linha do pedido ─────────────────────────────────────────────────────── */
.ped-lista { display: flex; flex-direction: column; }

.ped-linha {
  display: grid;
  grid-template-columns: 36px minmax(140px, 1fr) auto auto 28px;
  align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--mo-fast) var(--ease), border-color var(--mo-fast) var(--ease);
}
/* O fio entre linhas fica na LINHA, nao numa borda de tabela: assim ele some
   quando a linha esta aberta e o detalhe cola no seu proprio pedido. */
.ped-linha + .ped-det { margin-bottom: 0; }
.ped-lista > .ped-linha:not(:first-child) { box-shadow: inset 0 1px 0 var(--border); }
.ped-linha:hover { background: var(--soft-bg); }
.ped-linha:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ped-linha.aberta { background: var(--soft-bg); border-color: var(--soft-bd); box-shadow: none; }
.ped-linha.aberta + .ped-det { display: block; }

.ped-lin-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ped-lin-nome {
  font-size: var(--fs-md); font-weight: 700; color: var(--text); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Data e pedido na mesma linha, texto normal: "14/09/2026 · 2 Bombons fechados".
   A etiqueta numa coluna propria alinhava caixinhas de larguras diferentes e era
   ela que trazia a tabela de volta. */
.ped-lin-data {
  font-size: var(--fs-xs); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ped-lin-total { font-size: var(--fs-md); font-weight: 700; color: var(--accent-strong); white-space: nowrap; }
.ped-lin-seta { display: grid; place-items: center; color: var(--muted); }
.ped-lin-seta svg { width: 16px; height: 16px; transition: transform var(--mo-base) var(--ease); }
.ped-linha.aberta .ped-lin-seta svg { transform: rotate(180deg); }
.ped-linha.aberta .ped-lin-seta { color: var(--accent-strong); }

/* ── O detalhe, um clique abaixo ───────────────────────────────────────────── */
.ped-det {
  padding: 4px 14px 16px 64px;      /* alinhado com o nome, nao com o avatar */
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--soft-bg);
  animation: pedDetIn var(--mo-base) var(--ease);
}
@keyframes pedDetIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ped-det-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 20px;
}
.ped-det-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ped-det-lbl { font-size: var(--fs-xs); color: var(--muted); }
.ped-det-val { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.ped-det-val .tag-ponto, .ped-det-val .tag-pag { align-self: flex-start; }
.ped-det-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.ped-det-cancelar { color: var(--red); }
.ped-det-cancelar:hover { border-color: var(--red); }

@media (max-width: 760px) {
  /* No telefone a linha nao cabe deitada: ela dobra. Em cima quem e, embaixo
     quanto e em que pe — e o chip do produto sai, porque e a unica informacao
     da linha que o detalhe repete inteira. */
  .ped-linha {
    position: relative; padding-right: 34px;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-areas: "av id  id" ".  val badge";
    row-gap: 8px; column-gap: 12px;
  }
  .ped-linha > .pend-av { grid-area: av; }
  .ped-lin-id           { grid-area: id; }
  .ped-lin-total        { grid-area: val; justify-self: start; }
  .ped-linha .badge-st  { grid-area: badge; justify-self: end; }
  /* A seta sai da grade e vai para o canto. Dentro da grade ela dividia coluna
     com a etiqueta de status, e era a etiqueta — a mais larga das duas — que
     ditava a largura; o nome do cliente pagava a conta e virava "Eduardo …". */
  .ped-lin-seta { position: absolute; top: 14px; right: 10px; }
  /* A etiqueta de status dita a largura da terceira coluna, e cada pixel que ela
     toma sai do nome do cliente. No telefone ela fala mais baixo. */
  .ped-linha .badge-st { padding: 3px 9px; font-size: var(--fs-xs); }
  .ped-det { padding-left: 14px; }
}

/* ── O cartao do cliente ───────────────────────────────────────────────────── */
.cli-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cli-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px 16px; cursor: pointer;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color var(--mo-fast) var(--ease), box-shadow var(--mo-fast) var(--ease), transform var(--mo-fast) var(--ease);
}
.cli-card:hover { border-color: var(--soft-bd); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.cli-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cli-card-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cli-card-id { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; min-width: 0; }
.cli-card-nome {
  display: flex; align-items: center; gap: 6px; max-width: 100%;
  font-size: var(--fs-md); font-weight: 700; color: var(--text); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* "+2 nomes" — o sinal de que esta pessoa compra sob mais de uma grafia. */
.cli-card-apelidos {
  flex: none; font-size: var(--fs-xs); font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: var(--soft-bg); color: var(--accent-strong); border: 1px solid var(--soft-bd);
}
.cli-card-sem-ponto { font-size: var(--fs-xs); color: var(--faint); }
.cli-card-resumo { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.cli-card-metrica { font-size: var(--fs-sm); color: var(--muted); }
.cli-card-metrica b { color: var(--text); font-weight: 700; }
.cli-card-metrica.neg b { color: var(--red); }
.cli-card-metrica.dim { color: var(--faint); }

/* ── Ficha do cliente e nomes repetidos ────────────────────────────────────── */
.modal.modal-lg { max-width: min(680px, 94vw); }
.mfc-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.mfc-cab h3 { margin-bottom: 0; }
.mfc-apelidos { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.mfc-apelidos-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mfc-apelido {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 6px 4px 11px;
  font-size: var(--fs-sm); color: var(--text-dim);
}
.mfc-apelido-x {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  font-size: 15px; line-height: 1; padding: 2px 5px; border-radius: 50%;
  transition: color var(--mo-fast) var(--ease), background var(--mo-fast) var(--ease);
}
.mfc-apelido-x:hover { color: var(--red); background: var(--red-bg); }

/* ── Nomes repetidos: uma lista, uma barra ────────────────────────────────────
   A versao anterior repetia o mesmo par de botoes dentro de cada um dos 26
   grupos sugeridos. Agora a lista rola e a acao mora no pe, uma vez so. */
.vinc-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.vinc-busca { flex: 1; min-width: 180px; }
.vinc-pills { margin: 0; flex: none; }
.vinc-pills .fin-pill s { text-decoration: none; opacity: .6; font-size: var(--fs-xs); margin-left: 2px; }

.vinc-lista {
  max-height: 46vh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 4px; background: var(--surface);
}
.vinc-nome {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 8px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text);
  transition: background var(--mo-fast) var(--ease);
}
.vinc-nome:hover { background: var(--soft-bg); }
.vinc-nome input { accent-color: var(--m2); width: 15px; height: 15px; flex: none; cursor: pointer; }
.vinc-nome-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vinc-nome-ped { font-size: var(--fs-xs); color: var(--muted); flex: none; min-width: 22px; text-align: right; }
.vinc-tag {
  font-size: var(--fs-xs); font-weight: 700; color: var(--accent-strong);
  background: var(--soft-bg); border: 1px solid var(--soft-bd);
  border-radius: 999px; padding: 1px 8px; flex: none;
  max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vinc-tag-sem { color: var(--muted); background: var(--surface2); border-color: var(--border); }
.vinc-tag-ap { color: var(--m2); background: var(--soft-bg); border-color: var(--soft-bd); }

.vinc-barra {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); min-height: 42px;
}
.vinc-barra-dica { font-size: var(--fs-sm); color: var(--muted); }
.vinc-barra-n { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--text); flex: none; }
.vinc-barra-n s { text-decoration: none; font-weight: 400; font-size: var(--fs-xs); color: var(--amber); cursor: help; }
.vinc-limpar {
  border: 0; background: none; cursor: pointer; padding: 0;
  font: inherit; font-weight: 400; font-size: var(--fs-xs);
  color: var(--muted); text-decoration: underline;
}
.vinc-limpar:hover { color: var(--text); }
.vinc-barra .vinc-principal { flex: 1; min-width: 150px; max-width: 240px; }

/* ── Os quatro paineis da Visao Geral falam quatro formas ──────────────────────
   O v21 pediu que todo grafico tivesse o MESMO TAMANHO — e continua tendo, 300px
   de altura, quatro molduras iguais. O que mudou e a forma: barra deitada para
   comparar lugares, treemap para area de estoque, area polar para situacao e
   curva para o tempo. Tamanho igual, leitura diferente. */
.chart-slot .apexcharts-treemap-rect { stroke-linejoin: round; }
/* Lasca fina nao recebe rotulo (o JS devolve texto vazio), entao nada de texto
   girado e cortado dentro de um retangulo de 8px. */
.chart-slot .apexcharts-treemap-series text { pointer-events: none; }

/* ── O telefone: o rail e as margens estavam comendo a tela ──────────────────
   Na largura de um celular sobravam 144px de conteudo — 88px de rail, 96px de
   margem do `main` e 64px de padding da secao, em 390px de tela. Nao doia
   enquanto a lista era uma tabela, porque `.tbl-wrap` tem `overflow-x: auto` e
   a tabela rolava de lado. A lista nova nao rola: ela encolhe. E encolher ate
   144px apaga o nome do cliente.
   O bloco de 800px la em cima ja tentava resolver isso (`main` com 12px,
   `.app-body` sem margem), mas o rail do v21 veio depois na cascata e devolveu
   os 88px. Aqui o acerto vem por ultimo — e a conta fecha: 390 − 60 − 24 − 28 =
   278px para o conteudo, quase o dobro. */
@media (max-width: 800px) {
  :root { --rail: 60px; }
  .sidebar, #app.nav-collapsed .sidebar { width: var(--rail); }
  .app-body, #app.nav-collapsed .app-body { margin-left: var(--rail); }
  .sidebar-logo { width: 38px; height: 38px; }
  main, #app .app-body main { padding: 16px 12px 48px; }
  .section { padding: 16px 14px; }
  /* A barra de filtro cabia deitada no desktop; aqui ela empilha e cada campo
     ocupa a largura inteira, em vez de vazar para fora do cartao. */
  .filtros-bar { flex-direction: column; align-items: stretch; }
  .filtros-bar > select,
  .filtros-bar > .filtro-busca,
  .filtros-bar > .btn { width: 100%; max-width: none; min-width: 0; }
  .filtros-sep { display: none; }
  .ped-stats { gap: 8px; }
}

/* ── Configuracoes: os quatro cartoes em quadrado ────────────────────────────
   Empilhados, os quatro desciam a tela e cada um esticava um conteudo curto
   ("Bloqueado" + um botao) por toda a largura. Dois por linha ocupam a tela em
   vez de rolar por ela. A tabela de usuarios e a mais larga das quatro, entao
   ela atravessa as duas colunas. */
.cfg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.cfg-grid > .cfg-card { max-width: none; margin: 0; }
@media (max-width: 1000px) { .cfg-grid { grid-template-columns: 1fr; } }

/* O cadeado no lugar do "Desbloquear financeiro": o cartao ja diz do que se
   trata no titulo e o chip ja diz o estado — o botao so precisava da acao. */
.cfg-cadeado {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; min-width: 0; padding: 0; flex: none;
  border: 1px solid var(--soft-bd); border-radius: var(--r-md);
  background: var(--soft-bg); color: var(--accent-strong); cursor: pointer;
  transition: background var(--mo-fast) var(--ease), border-color var(--mo-fast) var(--ease), color var(--mo-fast) var(--ease);
}
.cfg-cadeado:hover { background: var(--soft-bg-hover); border-color: var(--accent); }
.cfg-cadeado.aberto { color: var(--green); border-color: var(--green-bg); background: var(--green-bg); }
.cfg-cadeado.aberto:hover { border-color: var(--green); }

/* ── Fechamento por produto: cartao no lugar da tabela ───────────────────────
   Sete colunas (produto + cinco semanas + total) para mostrar, num mes comum,
   tres numeros e quatro travessoes. A grade era maior que o dado. */
.bl-prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.bl-prod-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px 16px;
}
.bl-prod-card.total { background: var(--soft-bg); border-color: var(--soft-bd); }
.bl-prod-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.bl-prod-nome {
  font-size: var(--fs-md); font-weight: 700; color: var(--text); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bl-prod-total { font-size: var(--fs-lg); font-weight: 700; color: var(--accent-strong); flex: none; }
/* As semanas viram uma regua dentro do cartao: rotulo em cima, numero embaixo.
   Semana sem venda fica apagada em vez de sumir — o buraco tambem e leitura. */
.bl-sem-linha { display: flex; gap: 4px; }
.bl-sem {
  flex: 1; min-width: 0; text-align: center;
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 2px; border-radius: var(--r-sm); background: var(--surface2);
}
.bl-sem-n { font-size: var(--fs-xs); color: var(--muted); }
.bl-sem-v { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.bl-sem.vazia { background: transparent; }
.bl-sem.vazia .bl-sem-v { color: var(--faint); font-weight: 400; }

/* O cartao "sem forma marcada" leva ate os pedidos que faltam corrigir. */
.bl-caixa-ir { cursor: pointer; transition: border-color var(--mo-fast) var(--ease), transform var(--mo-fast) var(--ease); }
.bl-caixa-ir:hover { transform: translateY(-1px); border-color: var(--red); }
.bl-caixa-ir:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }


/* ══ v25 — CAIXINHAS COMO PORQUINHOS ═══════════════════════════════════════════
   A referencia e o porquinho do Inter: um cartao por caixinha, um numero grande
   que e QUANTO TEM ALI DENTRO, e uma linha dizendo quanto ela recebe por mes.
   Nada de tabela, nada de formulario com vinte campos — o que precisa ser dito
   cabe num cartao, e o resto fica no clique. */
:root {
  --fill:        #2b6c7a;
  --fill-strong: #1d4f5a;
  --fill-bg:     rgba(43,108,122,.09);
  --fill-bd:     rgba(43,108,122,.28);
  --fill-ring:   rgba(43,108,122,.24);
}
html[data-theme="dark"] {
  --fill:        #6fb3c2;
  --fill-strong: #93cbd7;
  --fill-bg:     rgba(111,179,194,.11);
  --fill-bd:     rgba(111,179,194,.26);
  --fill-ring:   rgba(111,179,194,.28);
}

.pq-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.pq-total { display: flex; flex-direction: column; gap: 2px; }
.pq-total-lbl { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.pq-total-val { font-family: var(--font-num); font-size: var(--fs-display); font-weight: 700; color: var(--text); line-height: 1.1; letter-spacing: -.02em; }
.pq-total-sub { font-size: var(--fs-sm); color: var(--muted); }
.pq-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.pq-secao { margin-bottom: 26px; }
.pq-secao-hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.pq-secao-nome { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.pq-secao-soma { font-family: var(--font-num); font-size: var(--fs-sm); font-weight: 700; color: var(--text-dim); }

.pq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 12px; }
.pq {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 20px 14px 16px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface);
  cursor: pointer; font: inherit; color: inherit;
  transition: transform var(--mo-fast) var(--ease), border-color var(--mo-fast) var(--ease), box-shadow var(--mo-fast) var(--ease);
}
.pq:hover { transform: translateY(-2px); border-color: var(--border3); box-shadow: var(--shadow-md); }
.pq:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.pq.off { opacity: .5; }

/* O anel: dois circulos concentricos, como o do app do banco. O de fora e so um
   halo apagado; o de dentro carrega o icone. */
.pq-anel {
  width: 74px; height: 74px; border-radius: 50%; margin-bottom: 6px;
  display: grid; place-items: center; flex: none;
  background: var(--accent-bg); border: 3px solid var(--accent-ring);
}
.pq-anel svg { width: 30px; height: 30px; stroke: var(--accent); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Caixinha que so paga conta (nao acumula) usa o tom neutro: o anel colorido
   fica para o dinheiro que de fato se junta ali dentro. */
.pq.passagem .pq-anel { background: var(--surface2); border-color: var(--border2); }
.pq.passagem .pq-anel svg { stroke: var(--muted); }

.pq-nome {
  font-size: var(--fs-sm); font-weight: 700; color: var(--text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pq-val { font-family: var(--font-num); font-size: var(--fs-xl); font-weight: 700; color: var(--text); line-height: 1.2; letter-spacing: -.02em; }
.pq-val.vazio { color: var(--faint); }
.pq-regra {
  font-size: var(--fs-xs); font-weight: 700; color: var(--accent);
  background: var(--accent-bg); border-radius: 999px; padding: 3px 10px; margin-top: 4px;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.pq-regra.vazia { color: var(--muted); background: var(--surface2); }
.pq-regra.pct { color: var(--fill); background: var(--fill-bg); }
.pq-mes { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.pq-mes b { font-family: var(--font-num); color: var(--text-dim); }
.pq-mes.falta { color: var(--red); }

/* A barrinha de meta fecha o cartao. So aparece quando ha meta — sem ela o
   cartao termina no valor, sem espaco morto embaixo. */
.pq-bar { width: 100%; height: 4px; border-radius: 999px; background: var(--surface3); overflow: hidden; margin-top: 8px; }
.pq-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.pq-bar i.cheia { background: var(--green); }
.pq-meta-txt { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }

/* ── O modal do porquinho: e aqui que a caixinha vira valor ou porcentagem ─── */
.pd-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.pd-cab .pq-anel { width: 58px; height: 58px; margin: 0; }
.pd-cab .pq-anel svg { width: 24px; height: 24px; }
.pd-tit { font-size: var(--fs-lg); font-weight: 700; color: var(--text); line-height: 1.3; }
.pd-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.pd-saldo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface2);
  border: 1px solid var(--border); margin-bottom: 18px;
}
.pd-saldo-lbl { font-size: var(--fs-sm); color: var(--muted); }
.pd-saldo-val { font-family: var(--font-num); font-size: var(--fs-xl); font-weight: 700; color: var(--text); }
.pd-como { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-bottom: 14px; }
.pd-opt {
  padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--border2);
  background: var(--surface); cursor: pointer; text-align: left; font: inherit;
  transition: border-color var(--mo-fast) var(--ease), background var(--mo-fast) var(--ease);
}
.pd-opt:hover { border-color: var(--border3); background: var(--surface2); }
.pd-opt.on { border-color: var(--accent); background: var(--accent-bg); }
.pd-opt b { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.pd-opt span { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; line-height: 1.45; }
.pd-campo { margin-bottom: 14px; }
.pd-campo label { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--text); margin-bottom: 6px; }
.pd-campo small { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 5px; line-height: 1.5; }
.pd-eco {
  font-size: var(--fs-sm); color: var(--accent-strong); font-weight: 700;
  padding: 10px 12px; border-radius: var(--r-md); background: var(--accent-bg); margin-bottom: 14px;
}
.pd-auto {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.55;
  padding: 12px 14px; border-radius: var(--r-md); background: var(--surface2);
  border: 1px solid var(--border); margin-bottom: 14px;
}
.pd-auto s { text-decoration: none; color: var(--accent); font-weight: 700; flex: none; }
.pd-movs { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }

/* ── Relatorio em grafico ──────────────────────────────────────────────────── */
.gr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.gr-painel {
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: 18px;
  min-width: 0;
}
.gr-painel.larga { grid-column: 1 / -1; }
.gr-tit { font-size: var(--fs-md); font-weight: 700; color: var(--text); margin-bottom: 2px; }
.gr-sub { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 10px; line-height: 1.5; }
.gr-slot { min-height: 260px; }

/* ── Calculo: a tela que ele nao precisa abrir ─────────────────────────────── */
.cl-aviso {
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.6;
  padding: 12px 14px; border-radius: var(--r-md); background: var(--surface2);
  border: 1px solid var(--border); margin-bottom: 18px;
}
.cl-bloco { margin-bottom: 26px; }
.cl-bloco > summary {
  cursor: pointer; list-style: none; padding: 12px 0;
  display: flex; align-items: center; gap: 9px;
  font-size: var(--fs-md); font-weight: 700; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.cl-bloco > summary::-webkit-details-marker { display: none; }
.cl-bloco > summary::before { content: '+'; color: var(--accent); font-size: var(--fs-lg); line-height: 1; width: 14px; }
.cl-bloco[open] > summary::before { content: '–'; }
.cl-corpo { padding-top: 16px; }

/* Calibragem: as poucas perguntas que so ele sabe responder. */
.cal-linha {
  display: grid; grid-template-columns: 1fr 130px 110px 120px; gap: 12px; align-items: end;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.cal-linha:last-of-type { border-bottom: none; }
.cal-nome { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.cal-nome small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.cal-mini { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 5px; display: block; }
.cal-saida { height: var(--ctl-h); display: flex; align-items: center; justify-content: flex-end; font-family: var(--font-num); font-weight: 700; color: var(--accent-strong); }
.cal-perguntas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
.cal-campo { display: flex; flex-direction: column; gap: 6px; }
.cal-campo label { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.cal-campo small { font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; }

/* A proposta, dentro do Calculo. */
.pp-casc { border: 1px solid var(--border2); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.pp-linha { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline; padding: 11px 16px; border-bottom: 1px solid var(--border); }
.pp-linha:last-child { border-bottom: none; }
.pp-lbl { font-size: var(--fs-sm); color: var(--text-dim); }
.pp-val { font-family: var(--font-num); font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.pp-linha.marco { background: var(--surface2); }
.pp-linha.marco .pp-lbl { font-weight: 700; color: var(--text); }
.pp-linha.marco .pp-val { color: var(--text); font-size: var(--fs-md); }
.pp-alerta {
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: var(--r-md);
  background: var(--amber-bg); border: 1px solid var(--border2);
  font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.6; margin-bottom: 14px;
}
.pp-alerta b { color: var(--text); }
.pp-alerta s { text-decoration: none; font-weight: 700; color: var(--amber); flex: none; }

@media (max-width: 900px) {
  .gr-grid { grid-template-columns: 1fr; }
  .cal-linha { grid-template-columns: 1fr 1fr; }
  .cal-perguntas { grid-template-columns: 1fr; }
  .pd-como { grid-auto-flow: row; grid-template-columns: 1fr; }
  .pq-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ══ A TELA DAS CAIXINHAS TEM TEMA PROPRIO ═════════════════════════════════════
   Preto com laranja, como o app do banco. A escolha nao e capricho: e a unica
   tela da dash onde o dinheiro ja esta separado e guardado, e ela precisa ser
   reconhecivel de longe — inclusive de relance, com o telefone na mao. O escopo
   e `#fin-caixinhas` e mais nada: o tema da dash continua mandando em todo o
   resto, no claro e no escuro. */
/* A tela toma a dash inteira: o preto sai do cartao e vira o fundo da pagina.
   O jeito de fazer isso sem reescrever regra por regra e remapear os TOKENS no
   <body> — o rail, o titulo, os botoes, as bordas e os modais continuam lendo
   `--bg`, `--surface` e `--accent` como sempre, so que agora eles valem preto e
   laranja. Sai da classe (trocar de pilula ou de aba) e a dash volta ao normal.
   O `body` esta abaixo do `html[data-theme]` na arvore, entao isto vence tanto
   o claro quanto o escuro sem precisar de `!important`. */
body.tela-caixinhas {
  color-scheme: dark;

  --bg:         #0d0d0f;
  --sidebar-bg: #0d0d0f;
  --surface:    #17171a;
  --surface2:   #1f1f23;
  --surface3:   #26262b;
  --elevated:   #17171a;

  --border:  rgba(255,255,255,.07);
  --border2: rgba(255,255,255,.14);
  --border3: rgba(255,255,255,.22);

  --text:     #f6f5f3;
  --text-dim: #d6d3ce;
  --muted:    #a8a49e;
  --faint:    #62605c;

  /* O laranja e o acento desta tela inteira, inclusive no botao que grava. */
  --m1: #ff9445;  --m2: #ff7a1a;  --m3: #c25c12;
  --accent:        #ff7a1a;
  --accent-strong: #ff9445;
  --accent-dim:    #c25c12;
  --accent-bg:     rgba(255,122,26,.13);
  --accent-ring:   rgba(255,122,26,.30);
  --btn:       #ff7a1a;
  --btn-hover: #ff9445;
  --btn-ink:   #1a0d03;

  --soft-bg:       rgba(255,122,26,.12);
  --soft-bg-hover: rgba(255,122,26,.22);
  --soft-bd:       rgba(255,122,26,.28);

  --verde: #4fd08a;  --green: #4fd08a;  --green-bg: rgba(79,208,138,.14);
  --vermelho: #e0938a; --red: #e0938a;  --red-bg:   rgba(224,147,138,.14);
  --amber: #ff9445;  --amber-bg: rgba(255,122,26,.13);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px -8px rgba(0,0,0,.7);
  --shadow-lg: 0 0 0 1px rgba(255,255,255,.05), 0 4px 12px rgba(0,0,0,.5), 0 24px 64px -12px rgba(0,0,0,.8);

  background: var(--bg);
}
/* Com a pagina ja preta, o cartao da tela nao precisa mais de fundo proprio —
   manter o `--pq-bg` aqui desenharia um retangulo quase preto sobre preto, com
   uma aresta visivel de nada. */
body.tela-caixinhas #fin-caixinhas { background: none; padding: 0; margin: 0; }
/* A barra e o titulo do Financeiro tambem pertencem a tela agora. */
body.tela-caixinhas .app-body { background: var(--bg); }

#fin-caixinhas {
  --pq-bg:      #0d0d0f;
  --pq-card:    #17171a;
  --pq-card-2:  #1f1f23;
  --pq-bd:      rgba(255,255,255,.07);
  --pq-bd-2:    rgba(255,255,255,.14);
  --pq-txt:     #f6f5f3;
  --pq-dim:     #a8a49e;
  --pq-faint:   #62605c;
  --pq-lar:     #ff7a1a;
  --pq-lar-2:   #ff9445;
  --pq-lar-bg:  rgba(255,122,26,.13);
  --pq-lar-ring:rgba(255,122,26,.30);
  --pq-verde:   #4fd08a;

  background: var(--pq-bg);
  border-radius: var(--r-xl);
  padding: 22px;
  margin: 0 -4px;
  color: var(--pq-txt);
}
#fin-caixinhas .pq-total-lbl { color: var(--pq-dim); }
#fin-caixinhas .pq-total-val { color: var(--pq-txt); }
#fin-caixinhas .pq-total-sub { color: var(--pq-faint); }
#fin-caixinhas .pq-secao-nome { color: var(--pq-dim); }
#fin-caixinhas .pq-secao-soma { color: var(--pq-lar); }

#fin-caixinhas .pq {
  background: var(--pq-card); border-color: var(--pq-bd); color: var(--pq-txt);
}
#fin-caixinhas .pq:hover { background: var(--pq-card-2); border-color: var(--pq-bd-2); box-shadow: 0 10px 30px -14px #000; }
#fin-caixinhas .pq:focus-visible { border-color: var(--pq-lar); box-shadow: 0 0 0 3px var(--pq-lar-ring); }
#fin-caixinhas .pq-nome { color: var(--pq-txt); }
#fin-caixinhas .pq-val { color: var(--pq-txt); }
#fin-caixinhas .pq-val.vazio { color: var(--pq-faint); }
#fin-caixinhas .pq-mes { color: var(--pq-faint); }
#fin-caixinhas .pq-mes b { color: var(--pq-dim); }
#fin-caixinhas .pq-mes.falta { color: #ff8a6b; }
#fin-caixinhas .pq-mes.falta b { color: #ff8a6b; }

/* O anel laranja e a assinatura da tela. Quem so paga conta fica no cinza: a
   cor marca o dinheiro que FICA guardado. */
#fin-caixinhas .pq-anel { background: var(--pq-lar-bg); border-color: var(--pq-lar-ring); }
#fin-caixinhas .pq-anel svg { stroke: var(--pq-lar); }
#fin-caixinhas .pq.passagem .pq-anel { background: rgba(255,255,255,.04); border-color: var(--pq-bd-2); }
#fin-caixinhas .pq.passagem .pq-anel svg { stroke: var(--pq-dim); }

#fin-caixinhas .pq-regra { color: var(--pq-lar); background: var(--pq-lar-bg); }
#fin-caixinhas .pq-regra.vazia { color: var(--pq-faint); background: rgba(255,255,255,.05); }
#fin-caixinhas .pq-regra.pct { color: var(--pq-lar-2); background: var(--pq-lar-bg); }
#fin-caixinhas .pq-bar { background: rgba(255,255,255,.08); }
#fin-caixinhas .pq-bar i { background: var(--pq-lar); }
#fin-caixinhas .pq-bar i.cheia { background: var(--pq-verde); }
#fin-caixinhas .pq-meta-txt { color: var(--pq-faint); }

/* Controles dentro da moldura preta: sem isso, um select claro no meio do preto
   estoura a tela inteira. */
#fin-caixinhas select, #fin-caixinhas .btn.btn-soft {
  background: var(--pq-card); border-color: var(--pq-bd-2); color: var(--pq-txt);
}
#fin-caixinhas select:hover, #fin-caixinhas .btn.btn-soft:hover { background: var(--pq-card-2); border-color: var(--pq-lar); }
#fin-caixinhas .btn.btn-brown {
  background: var(--pq-lar); border-color: var(--pq-lar); color: #17120c; font-weight: 700;
}
#fin-caixinhas .btn.btn-brown:hover { background: var(--pq-lar-2); border-color: var(--pq-lar-2); }
#fin-caixinhas .empty { color: var(--pq-faint); }

/* A pilula "Caixinhas" no menu acende laranja: e o aviso de que aquela tela e
   outro lugar antes mesmo do clique. */
.fin-pill[data-pane="caixinhas"].active {
  background: #17171a; border-color: #ff7a1a; color: #ff9445;
}

/* ── No tema escuro a tela se INVERTE: branco e laranja ──────────────────────
   O que esta tela faz nao e "ser preta" — e ser o oposto do resto da dash, para
   ninguem confundir o lugar onde o dinheiro ja esta guardado com o lugar onde
   ele ainda esta se mexendo. Com a dash clara, isso quer dizer preto; com a dash
   escura, quer dizer branco. O laranja e o unico que nao muda: ele e a marca.

   Duas inversoes que nao sao so trocar fundo por tinta:
   1. No preto, "laranja forte" e mais CLARO (#ff9445). No branco e mais ESCURO
      (#d4620c) — laranja puro sobre branco nao tem contraste para texto.
   2. Todo preenchimento `rgba` BRANCO do bloco de cima volta a ser preto aqui,
      senao ele soma com o fundo e o elemento desaparece. */
html[data-theme="dark"] body.tela-caixinhas {
  color-scheme: light;

  --bg:         #ffffff;
  --sidebar-bg: #ffffff;
  --surface:    #f6f6f7;
  --surface2:   #eeeef0;
  --surface3:   #e4e4e7;
  --elevated:   #ffffff;

  --border:  rgba(0,0,0,.09);
  --border2: rgba(0,0,0,.15);
  --border3: rgba(0,0,0,.24);

  --text:     #16161a;
  --text-dim: #3f3f46;
  --muted:    #71717a;
  --faint:    #a1a1aa;

  --m1: #d4620c;  --m2: #ff7a1a;  --m3: #ffb27a;
  --accent:        #ff7a1a;
  --accent-strong: #d4620c;
  --accent-dim:    #ffb27a;
  --accent-bg:     rgba(255,122,26,.10);
  --accent-ring:   rgba(255,122,26,.30);
  --btn:       #ff7a1a;
  --btn-hover: #e06a10;
  --btn-ink:   #17120c;

  --soft-bg:       rgba(255,122,26,.10);
  --soft-bg-hover: rgba(255,122,26,.18);
  --soft-bd:       rgba(255,122,26,.30);

  --verde: #1f8f5a;  --green: #1f8f5a;  --green-bg: rgba(31,143,90,.10);
  --vermelho: #c8341a; --red: #c8341a;  --red-bg:   rgba(200,52,26,.10);
  --amber: #d4620c;  --amber-bg: rgba(255,122,26,.10);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px -8px rgba(0,0,0,.12);
  --shadow-lg: 0 0 0 1px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.08), 0 24px 64px -12px rgba(0,0,0,.18);
}

html[data-theme="dark"] body.tela-caixinhas #fin-caixinhas {
  --pq-bg:      #ffffff;
  --pq-card:    #f6f6f7;
  --pq-card-2:  #eeeef0;
  --pq-bd:      rgba(0,0,0,.09);
  --pq-bd-2:    rgba(0,0,0,.16);
  --pq-txt:     #16161a;
  --pq-dim:     #71717a;
  --pq-faint:   #a1a1aa;
  --pq-lar:     #ff7a1a;
  --pq-lar-2:   #d4620c;
  --pq-lar-bg:  rgba(255,122,26,.11);
  --pq-lar-ring:rgba(255,122,26,.32);
  --pq-verde:   #1f8f5a;
}

/* Os preenchimentos brancos translucidos viram pretos translucidos. */
html[data-theme="dark"] body.tela-caixinhas #fin-caixinhas .pq.passagem .pq-anel { background: rgba(0,0,0,.04); }
html[data-theme="dark"] body.tela-caixinhas #fin-caixinhas .pq-regra.vazia { background: rgba(0,0,0,.05); }
html[data-theme="dark"] body.tela-caixinhas #fin-caixinhas .pq-bar { background: rgba(0,0,0,.09); }
html[data-theme="dark"] body.tela-caixinhas #fin-caixinhas .pq:hover { box-shadow: 0 10px 30px -14px rgba(0,0,0,.35); }

/* Texto laranja sobre branco precisa do laranja ESCURO — o puro fica em fundo,
   borda e barra, onde ninguem precisa ler. */
html[data-theme="dark"] body.tela-caixinhas #fin-caixinhas .pq-secao-soma,
html[data-theme="dark"] body.tela-caixinhas #fin-caixinhas .pq-regra { color: var(--pq-lar-2); }
html[data-theme="dark"] body.tela-caixinhas #fin-caixinhas .pq-mes.falta,
html[data-theme="dark"] body.tela-caixinhas #fin-caixinhas .pq-mes.falta b { color: #c8341a; }

html[data-theme="dark"] .fin-pill[data-pane="caixinhas"].active {
  background: #ffffff; border-color: #ff7a1a; color: #d4620c;
}

/* ══ CALCULO em cartoes, no padrao da aba Configuracoes ════════════════════════
   Quadrados lado a lado, um brief de uma linha, e a seta que abre o resto. A
   primeira olhada nao tem numero nenhum — so o nome do que esta ali dentro. */
.cl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.cl-card {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden;
}
.cl-card > summary {
  cursor: pointer; list-style: none; padding: 18px 20px;
  display: grid; grid-template-columns: 22px 1fr 20px; gap: 12px; align-items: start;
}
.cl-card > summary::-webkit-details-marker { display: none; }
.cl-card > summary:hover { background: var(--surface2); }
.cl-card > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cl-ico { color: var(--accent); display: grid; place-items: center; padding-top: 1px; }
.cl-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cl-card h3 { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--text); line-height: 1.3; }
.cl-brief { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; margin-top: 3px; }
.cl-seta {
  color: var(--muted); display: grid; place-items: center; padding-top: 3px;
  transition: transform var(--mo-base) var(--ease);
}
.cl-seta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cl-card[open] > summary { border-bottom: 1px solid var(--border); }
.cl-card[open] .cl-seta { transform: rotate(180deg); color: var(--accent); }
.cl-corpo { padding: 18px 20px 20px; }
/* Um cartao aberto ocupa a largura toda: o conteudo dele e tabela e cascata, que
   nao cabem em meia tela sem virar rolagem lateral. */
.cl-card[open] { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) { .cl-seta { transition: none; } }

/* O porquinho aberto continua na mesma tela — se o modal voltasse ao marrom
   claro, o clique pareceria ter saido do app do banco para outro lugar. */
#m-kx-det.pq-dark .modal, #m-kx-mov.pq-dark .modal {
  --surface:  #17171a;
  --surface2: #1f1f23;
  --surface3: #26262b;
  --elevated: #17171a;
  --border:   rgba(255,255,255,.08);
  --border2:  rgba(255,255,255,.15);
  --border3:  rgba(255,255,255,.26);
  --text:     #f6f5f3;
  --text-dim: #cdc9c3;
  --muted:    #a8a49e;
  --faint:    #62605c;
  --accent:        #ff7a1a;
  --accent-strong: #ff9445;
  --accent-bg:     rgba(255,122,26,.14);
  --accent-ring:   rgba(255,122,26,.30);
  --green: #4fd08a; --green-bg: rgba(79,208,138,.12);
  --red:   #ff8a6b; --red-bg:   rgba(255,138,107,.12);
  background: #17171a; color: var(--text);
  border: 1px solid rgba(255,255,255,.09);
}
#m-kx-det.pq-dark .pq-anel { background: var(--accent-bg); border-color: var(--accent-ring); }
#m-kx-det.pq-dark .pq-anel svg { stroke: var(--accent); }
#m-kx-det.pq-dark .btn-brown, #m-kx-mov.pq-dark .btn-brown {
  background: var(--accent); border-color: var(--accent); color: #17120c;
}
#m-kx-det.pq-dark .btn-brown:hover, #m-kx-mov.pq-dark .btn-brown:hover {
  background: var(--accent-strong); border-color: var(--accent-strong);
}
#m-kx-det.pq-dark .form-input, #m-kx-mov.pq-dark .form-input,
#m-kx-det.pq-dark .btn-soft, #m-kx-mov.pq-dark .btn-soft {
  background: var(--surface2); border-color: var(--border2); color: var(--text);
}
#m-kx-det.pq-dark .pd-opt.on { border-color: var(--accent); background: var(--accent-bg); }
#m-kx-det.pq-dark .kp-chk input { accent-color: var(--accent); }

/* ══ DRE MENSAL — o plano que a caixinha vai cobrar ════════════════════════════
   Uma tabela, nao um formulario: as duas colunas editaveis ficam DENTRO da linha,
   ao lado do numero real, porque a decisao ("0,5% cabe?") so faz sentido olhando
   o que o mes de verdade fez. Tirar os campos para um formulario a parte seria
   pedir que ele decorasse o numero e voltasse.                                  */
.dre-topo {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px;
}
.dre-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px;
}
/* O piso de faturamento e a resposta que a tela inteira existe para dar. */
.dre-tile.forte { border-color: var(--accent); background: var(--accent-bg); }
.dre-tile-lbl {
  font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
}
.dre-tile-val {
  font-family: var(--font-num); font-size: var(--fs-xl); font-weight: 700;
  color: var(--text); line-height: 1.15; letter-spacing: -.02em;
}
.dre-tile.forte .dre-tile-val { color: var(--accent-strong); }
.dre-tile-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }
.dre-tile-sub b { font-family: var(--font-num); color: var(--text-dim); }

/* A grade de cartoes, uma secao por grupo da cascata. A ordem das secoes E o
   argumento: quem aparece antes recebe antes quando o mes nao cobre tudo.       */
.dre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }

.dre-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 15px 12px; display: flex; flex-direction: column; gap: 9px;
}
.dre-card.lucro { border-color: var(--accent); background: var(--accent-bg); }
.dre-card-top { display: flex; align-items: flex-start; gap: 8px; }
.dre-card-nome {
  flex: 1; font-size: var(--fs-sm); font-weight: 700; color: var(--text); line-height: 1.35;
}
/* O apagar so aparece quando o ponteiro esta no cartao: ele nao pode competir com
   os dois campos, que sao o motivo de o cartao existir. */
.dre-x {
  opacity: 0; background: none; border: none; cursor: pointer; padding: 0 2px;
  color: var(--muted); font-size: 13px; line-height: 1; transition: opacity .12s, color .12s;
}
.dre-card:hover .dre-x, .dre-x:focus { opacity: 1; }
.dre-x:hover { color: var(--red); }

.dre-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dre-campos label { display: flex; flex-direction: column; gap: 4px; }
.dre-campos label span {
  font-size: var(--fs-xs); color: var(--muted); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dre-in {
  width: 100%; text-align: right; font-family: var(--font-num);
  background: var(--surface2); border: 1px solid var(--border2); border-radius: 9px;
  padding: 7px 9px; color: var(--text); font-size: var(--fs-sm); font-weight: 700;
}
.dre-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.dre-in::placeholder { color: var(--faint); font-weight: 400; }
/* Some as setinhas do input numerico: elas nao servem para um valor em reais e
   roubam metade da largura do campo. */
.dre-in::-webkit-outer-spin-button, .dre-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dre-in { -moz-appearance: textfield; }

/* A resposta da tela inteira, uma por cartao: o faturamento que faz esta linha
   caber no peso que ele escolheu. */
.dre-nec-linha { font-size: var(--fs-xs); color: var(--muted); }
.dre-nec-linha b, .dre-nec { font-family: var(--font-num); color: var(--accent); font-weight: 700; }
.dre-card-pe {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 9px; margin-top: auto;
}
.dre-real-linha { font-size: var(--fs-xs); color: var(--muted); }
.dre-real-linha b { font-family: var(--font-num); color: var(--text-dim); font-weight: 700; }
.dre-real-linha i { font-style: normal; font-family: var(--font-num); color: var(--muted); }
/* Linha que se mede sozinha: o plano dela serve para comparar, nao para mandar. */
.dre-auto {
  font-size: var(--fs-xs); font-weight: 700; color: var(--muted); background: var(--surface2);
  border-radius: 999px; padding: 2px 8px; margin-left: 6px; white-space: nowrap;
}

/* O "+" mora dentro do grupo: clicar nele ja escolheu onde a linha entra. */
.dre-novo {
  border: 1px dashed var(--border3); background: transparent; border-radius: 14px;
  min-height: 132px; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  color: var(--muted); font-size: var(--fs-xs); font-weight: 700;
  transition: border-color .12s, color .12s, background .12s;
}
.dre-novo:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.dre-novo-mais { font-size: 22px; line-height: 1; font-weight: 400; }

.dre-nova-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }

/* O status compara PESO com PESO. A cor e o dado. */
.dre-st {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700;
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.dre-st.bom     { color: var(--green); background: var(--green-bg); }
.dre-st.atencao { color: var(--amber); background: var(--amber-bg); }
.dre-st.ruim    { color: var(--red);   background: var(--red-bg); }
.dre-st.neutro  { color: var(--muted); background: var(--surface2); }

.dre-rodape { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.dre-dica { font-size: var(--fs-xs); color: var(--muted); }

/* No telefone a tabela rola na horizontal dentro do .tbl-wrap, e os tres cartoes
   do topo empilham — tres colunas de 100px nao cabem em 400px de tela. */
@media (max-width: 720px) {
  .dre-topo { grid-template-columns: 1fr; }
  .dre-grid { grid-template-columns: 1fr; }
  .dre-nova-dupla { grid-template-columns: 1fr; }
  /* No telefone o apagar nao tem hover para aparecer. */
  .dre-x { opacity: .6; }
}

/* O status tambem no porquinho: a tela que ele abre todo dia passa a dizer se a
   caixinha esta dentro do combinado, e nao so quanto entrou nela. */
.pq-st {
  font-size: var(--fs-xs); font-weight: 700; border-radius: 999px;
  padding: 2px 9px; margin-top: 6px; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.pq-st.bom     { color: var(--green); background: var(--green-bg); }
.pq-st.atencao { color: var(--amber); background: var(--amber-bg); }
.pq-st.ruim    { color: var(--red);   background: var(--red-bg); }
.pq-st.neutro  { display: none; }
/* Dentro da tela preta das Caixinhas as cores do tema geral sumiriam no fundo. */
#fin-caixinhas .pq-st.bom     { color: #6fd39c; background: rgba(111,211,156,.12); }
#fin-caixinhas .pq-st.atencao { color: #e7b45c; background: rgba(231,180,92,.12); }
#fin-caixinhas .pq-st.ruim    { color: #ff8a6b; background: rgba(255,138,107,.12); }
html[data-theme="dark"] body.tela-caixinhas #fin-caixinhas .pq-st.bom     { color: #2f8f5f; background: rgba(47,143,95,.12); }
html[data-theme="dark"] body.tela-caixinhas #fin-caixinhas .pq-st.atencao { color: #a8762a; background: rgba(168,118,42,.12); }
html[data-theme="dark"] body.tela-caixinhas #fin-caixinhas .pq-st.ruim    { color: #c8341a; background: rgba(200,52,26,.12); }

/* O "+" das caixinhas, igual ao do DRE: criar a caixinha e criar a linha do DRE
   sao a mesma acao, entao os dois botoes abrem o mesmo formulario. */
.pq-novo {
  border: 1px dashed var(--border3); background: transparent; border-radius: 16px;
  min-height: 150px; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  color: var(--muted); font-size: var(--fs-xs); font-weight: 700;
  transition: border-color .12s, color .12s, background .12s;
}
.pq-novo:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.pq-novo-mais { font-size: 22px; line-height: 1; font-weight: 400; }



/* A frase do grupo, logo abaixo do nome dele: o cabecalho da secao diz O QUE e o
   grupo, a frase diz por que ele existe. Ela e da cascata, nao do filtro — some
   junto com a secao, nunca sozinha. */
.mp-grupo-ajuda { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; margin: -4px 0 12px; }

/* Nas telas do Financeiro os grupos vem colados na barra de filtro, como na
   Materia-prima. */
#fin-dre .mp-grupo:first-child, #fin-caixinhas .mp-grupo:first-child { margin-top: 4px; }

/* ── A pilula virou simbolo ──────────────────────────────────────────────────
   Nove nomes escritos lado a lado eram nove palavras para ler antes de clicar em
   uma. O simbolo e o mesmo que esta no anel do cartao, entao o filtro se explica
   sozinho: clicou no simbolo, sobraram os cartoes que tem aquele anel. O nome
   continua no `title` e no aria-label, para o mouse e para o leitor de tela.   */
.mp-cat.ico { padding: 8px 11px; gap: 7px; }
.mp-cat.ico .tp-ico { display: flex; width: 17px; height: 17px; }
.mp-cat.ico .tp-ico svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* ── O cartao do DRE ganha o anel do grupo, como os porquinhos ─────────────── */
.dre-card { position: relative; align-items: center; text-align: center; padding-top: 16px; }
.dre-anel {
  width: 46px; height: 46px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center;
  border: 1.5px solid var(--border2); background: var(--surface2);
}
.dre-anel svg {
  width: 21px; height: 21px; fill: none; stroke: var(--muted);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
/* Guardado e crescimento acumulam saldo; os outros grupos sao passagem. O anel
   colorido marca essa diferenca aqui do mesmo jeito que marca nos porquinhos. */
.dre-card[data-id] .dre-anel { transition: border-color .12s; }
.dre-card.lucro .dre-anel { border-color: var(--accent); background: var(--accent-bg); }
.dre-card.lucro .dre-anel svg { stroke: var(--accent); }
.dre-card .dre-campos { width: 100%; }
.dre-card .dre-card-pe { width: 100%; justify-content: center; }
/* O apagar sai do fluxo: no cartao centralizado ele empurraria o nome para o lado. */
.dre-card .dre-x { position: absolute; top: 10px; right: 10px; }

/* O "+" tambem perdeu a palavra. O `title` diz em que grupo a linha vai nascer. */
.dre-novo, .pq-novo { font-size: 26px; }
.dre-novo-mais, .pq-novo-mais { font-size: 26px; }

/* No telefone, tres botoes no rodape do modal passavam da largura e o primeiro
   (o "Usar" da caixinha) saia cortado pela esquerda. Dividem a linha por igual. */
@media (max-width: 600px) {
  .modal-actions .btn { flex: 1 1 0; min-width: 0; }
}