/* ══════════════════════════════════════════════════════════
   painel.css — Essência Íntima MiniERP (painel Flask mobile)

   Reaproveita os mesmos tokens de cor/tipografia e o mesmo
   padrão de header + nav + hamburger do storefront
   (essencia_intima.html), pra dar continuidade visual entre
   loja e painel. Ver comentário equivalente no storefront
   sobre --escuro-1/--escuro-2 (fundos sempre-escuros) e
   --escala-fonte (mobile vs desktop).
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   Tokens semânticos — reescritos em 19/08/2026 pra suportar
   temas plugáveis (ver /static/css/temas/*.css). Cada tema
   redefine este mesmo conjunto de variáveis; painel.css nunca
   mais referencia cor "de marca" nenhuma diretamente — só estes
   nomes semânticos. Os valores abaixo são o tema padrão (Miltra
   Original), usados quando nenhum tema de empresa está carregado
   ainda (ex: tela de /login).
   ══════════════════════════════════════════════════════════ */
:root {
  /* Marca */
  --cor-primaria: #16241c;
  --cor-secundaria: #c76b3d;

  /* Base */
  --bg: #f4efe4;
  --surface: #ffffff;
  --surface-alt: #ece5d4;

  /* Texto */
  --texto: #1c2a20;
  --texto-suave: #5c6b5f;
  --texto-invertido: #f4efe4;

  /* Bordas e estados */
  --borda: #d8cdb0;
  --destaque: #c76b3d;
  --sucesso: #4c7a5a;
  --erro: #a4442f;
  --aviso: #b8863a;

  /* Componentes */
  --botao-bg: #16241c;
  --botao-texto: #f4efe4;
  --botao-bg-hover: #223629;

  --card-radius: 14px;
  --input-radius: 10px;

  /* Tipografia */
  --fonte-display: Georgia, 'Times New Roman', serif;
  --fonte-corpo: -apple-system, 'Segoe UI', sans-serif;

  /* Layout (não fazem parte de tema — fixos) */
  --gap: clamp(1rem, 3vw, 2rem);

  /* 19/08/2026 — paleta da marca Miltra, usada SÓ nos elementos
     .login-* (tela de login). Escopo isolado de propósito: a tela
     de login nunca troca de tema (é sempre a marca da plataforma,
     não da empresa logada). */
  --miltra-verde:     #16302b;
  --miltra-terracota: #c1622f;
  --miltra-sage:      #a8c3b4;
  --miltra-creme:     #f3ecdd;
}

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

body {
  font-family: var(--fonte-corpo);
  font-weight: 300;
  color: var(--texto);
  background: var(--bg);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

/* ─── HEADER (mesmo padrão do storefront) ────────────────── */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Fundo claro (mesmo tom do storefront/catálogo), não a cor de
     marca — a cor de marca escura ficava sem contraste legível
     com os itens do menu. Ver comentário original abaixo. */
  background: var(--bg);
  border-bottom: 1px solid var(--borda);
}

.header-inner {
  max-width: 1280px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem var(--gap);
  gap: 1rem;
}

.logo {
  font-family: var(--fonte-display);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--texto);
  line-height: 1.15;
}
.logo span {
  display: block;
  font-size: .62rem;
  letter-spacing: .2em;
  color: var(--destaque);
  font-family: var(--fonte-corpo);
  font-weight: 400;
  text-transform: uppercase;
}

.logo-miltra {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-img {
  height: 32px;      /* controla o tamanho da logo — ajuste esse valor */
  width: auto;
  display: block;
}

.logo-subtitulo {
  font-family: var(--fonte-corpo);
  font-size: .62rem;
  letter-spacing: .2em;
  color: var(--destaque);
  font-weight: 400;
  text-transform: uppercase;
}

/* ─── NAV (desktop: linha horizontal / mobile: painel aberto pelo hamburger) */
nav#menu-nav {
  display: flex;
  align-items: center;
  gap: .2rem;
  flex-wrap: wrap;
}

nav .nav-item > a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .8rem;
  font-size: .85rem;
  letter-spacing: .03em;
  color: var(--texto);
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
nav .nav-item > a svg { width: 16px; height: 16px; flex-shrink: 0; }
nav .nav-item > a:hover { background: var(--surface-alt); color: var(--texto); }
nav .nav-item.active > a { background: var(--surface-alt); color: var(--texto); }

.header-icons { display: flex; align-items: center; gap: .3rem; }
.icon-btn {
  background: none; border: none; cursor: pointer;
  padding: .5rem; border-radius: 999px; color: var(--texto);
  display: flex; align-items: center; justify-content: center;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: var(--surface-alt); }

/* 20/08/2026 — sem empresa logada (tela de /login, ou telas de
   admin de plataforma) o header NÃO segue o tema da empresa: fica
   sempre com a marca Miltra. Usa --cor-primaria (não --miltra-verde)
   porque é essa a cor realmente "assada" no fundo de miltra-logo.png
   — --miltra-verde é um verde próximo mas não idêntico, e a
   diferença ficava visível como um retângulo mais claro/escuro ao
   redor da logo. body.tema-plataforma é aplicado pelo base.html
   quando não há empresa_tema (ver comentário do link #tema-css). */
body.tema-plataforma header {
  background: var(--cor-primaria);
  border-bottom: 1px solid rgba(0,0,0,.15);
}
body.tema-plataforma nav .nav-item > a,
body.tema-plataforma .icon-btn { color: var(--miltra-creme); }
body.tema-plataforma nav .nav-item > a:hover,
body.tema-plataforma nav .nav-item.active > a { background: var(--miltra-terracota); color: var(--miltra-creme); }
body.tema-plataforma .icon-btn:hover { background: rgba(243,236,221,.12); }
body.tema-plataforma .hamburger span { background: var(--miltra-creme); }

/* ─── HAMBURGER ───────────────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: .4rem;
}
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--texto); transition: .2s; }
.hamburger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px) {
  nav#menu-nav { display: none; }
  .hamburger { display: flex; }

  nav#menu-nav.mobile-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    background: var(--surface);
    border-top: 1px solid var(--borda);
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
    padding: .5rem 0 1rem;
    gap: 0;
    z-index: 200;
  }
  nav#menu-nav.mobile-open .nav-item { width: 100%; }
  nav#menu-nav.mobile-open .nav-item > a {
    width: 100%;
    border-radius: 0;
    padding: .9rem var(--gap);
  }
  nav#menu-nav.mobile-open .nav-item.active > a { background: var(--surface-alt); color: var(--texto); }
}

/* ─── CONTEÚDO ────────────────────────────────────────────── */
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.4rem var(--gap) 3rem;
}

.page-header { margin-bottom: 1.4rem; }
.page-header h1 {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--texto);
}
.page-header p { color: var(--texto-suave); font-size: .9rem; margin-top: .2rem; }

/* Grade de atalhos do dashboard */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .9rem;
}
.shortcut-card {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 1.1rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  transition: border-color .15s, transform .15s;
}
.shortcut-card:hover { border-color: var(--destaque); transform: translateY(-2px); }
.shortcut-card .icon-wrap {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--surface-alt);
  display: flex; align-items: center; justify-content: center;
  color: var(--destaque);
}
.shortcut-card .icon-wrap svg { width: 20px; height: 20px; }
.shortcut-card span { font-size: .85rem; color: var(--texto); }

/* Estado vazio (telas de negócio ainda não implementadas) */
.empty-state {
  background: var(--surface);
  border: 1px dashed var(--borda);
  border-radius: 16px;
  padding: 2.4rem 1.4rem;
  text-align: center;
  color: var(--texto-suave);
}
.empty-state svg { width: 40px; height: 40px; color: var(--destaque); margin-bottom: .8rem; }
.empty-state h2 {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--texto);
  margin-bottom: .3rem;
}

footer {
  text-align: center;
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--texto-suave);
  padding: 1.4rem var(--gap) 2rem;
}

/* ─── LOGIN ───────────────────────────────────────────────── */
.login-container {
  min-height: calc(100vh - 140px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem var(--gap);
  background: linear-gradient(180deg, var(--miltra-creme) 0%, var(--bg) 100%);
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--miltra-sage);
  border-radius: 16px;
  padding: 2.2rem 1.8rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(22,48,43,.10);
}

.login-titulo {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 1.9rem;
  color: var(--texto);
  letter-spacing: .02em;
}

.login-subtitulo {
  font-size: .68rem;
  letter-spacing: .2em;
  color: var(--destaque);
  text-transform: uppercase;
  margin-top: .3rem;
  margin-bottom: 1.8rem;
}

/* 19/08/2026 — marca Miltra fixa no login (substitui login-titulo/
   login-subtitulo, mantidas acima sem uso por segurança). O PNG do
   logo já vem com fundo verde-escuro aplicado; o card de login
   continua claro (var(--surface)) para não alterar o restante do
   layout — o logo aparece como um "selo" sobre o card. */
.login-logo {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 1.1rem;
  border-radius: 14px;
  object-fit: contain;
}

.login-slogan {
  font-family: var(--fonte-corpo);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--texto-suave);
  margin-bottom: 1.8rem;
}

.login-erro {
  background: color-mix(in srgb, var(--erro) 12%, var(--surface));
  border: 1px solid var(--erro);
  color: var(--erro);
  font-size: .82rem;
  border-radius: 10px;
  padding: .7rem .9rem;
  margin-bottom: 1.2rem;
  text-align: left;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

.login-form label {
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--texto-suave);
  margin-bottom: -.55rem;
}

.login-form input {
  font-family: var(--fonte-corpo);
  font-size: .95rem;
  padding: .75rem .9rem;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--bg);
  color: var(--texto);
  outline: none;
  transition: border-color .15s;
}
.login-form input:focus { border-color: var(--miltra-terracota); }

.login-botao {
  margin-top: .4rem;
  font-family: var(--fonte-corpo);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--surface);
  background: var(--miltra-verde);
  border: none;
  border-radius: 999px;
  padding: .8rem 1rem;
  cursor: pointer;
  transition: background .15s;
}
.login-botao:hover { background: var(--miltra-terracota); }

/* ══════════════════════════════════════════════════════════
   FASE 2 — Fornecedores (14/08/2026)
   Mesma linguagem visual do resto do painel: cards brancos,
   borda var(--borda), cantos 10-16px, acento --rose/--dourado.
   ══════════════════════════════════════════════════════════ */

/* ─── FLASH MESSAGES ──────────────────────────────────────── */
.flash-wrap { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.2rem; }
.flash {
  font-size: .85rem;
  border-radius: 10px;
  padding: .75rem .95rem;
  border: 1px solid transparent;
}
.flash-erro { background: color-mix(in srgb, var(--erro) 12%, var(--surface)); border-color: var(--erro); color: var(--erro); }
.flash-sucesso { background: color-mix(in srgb, var(--sucesso) 12%, var(--surface)); border-color: var(--sucesso); color: var(--sucesso); }

/* .alerta-erro — gap pré-existente: usada em modulo_fornecedores_lista.html
   e modulo_produtos_lista.html pra sinalizar falha da API na própria lista
   (fora do fluxo de .flash-wrap, que é só pós-redirect), mas nunca tinha
   sido definida. Mesmo visual de .flash-erro. */
.alerta-erro {
  background: color-mix(in srgb, var(--erro) 12%, var(--surface));
  border: 1px solid var(--erro);
  color: var(--erro);
  font-size: .85rem;
  border-radius: 10px;
  padding: .75rem .95rem;
  margin-bottom: 1rem;
}

/* ─── BOTÕES ──────────────────────────────────────────────── */
.btn-primario, .btn-secundario {
  display: inline-block;
  font-family: var(--fonte-corpo);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .03em;
  border-radius: 999px;
  padding: .7rem 1.2rem;
  cursor: pointer;
  border: none;
  transition: background .15s, opacity .15s;
  text-align: center;
}
.btn-primario {
  color: var(--surface);
  background: var(--texto);
  margin-bottom: 1.4rem;
}
.btn-primario:hover { background: var(--texto-suave); }
.btn-secundario {
  color: var(--texto);
  background: var(--surface-alt);
}
.btn-secundario:hover { opacity: .85; }

.vazio {
  color: var(--texto-suave);
  font-size: .9rem;
  padding: 1rem 0;
}

.aviso {
  background: var(--surface-alt);
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  font-size: .82rem;
  border-radius: 10px;
  padding: .8rem .95rem;
  margin: 1rem 0;
}

/* ─── FILTRO (lista de fornecedores) ──────────────────────── */
.filtro-form {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1rem;
}
.filtro-form input[type="text"],
.filtro-form select {
  font-family: var(--fonte-corpo);
  font-size: .9rem;
  padding: .65rem .9rem;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--surface);
  color: var(--texto);
  outline: none;
}
.filtro-form input[type="text"] { flex: 1 1 220px; }
.filtro-form input:focus, .filtro-form select:focus { border-color: var(--destaque); }

/* ─── LISTA DE FORNECEDORES ───────────────────────────────── */
.lista-fornecedores {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.item-fornecedor {
  display: flex;
  align-items: center;
  gap: .7rem;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: .9rem 1.1rem;
  transition: border-color .15s, transform .15s;
}
.item-fornecedor:hover { border-color: var(--destaque); transform: translateY(-1px); }
.item-fornecedor-nome { flex: 1; font-size: .92rem; color: var(--texto); }
.item-fornecedor-tipo {
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--destaque);
}

.status-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.status-dot.ativo { background: var(--sucesso); }
.status-dot.inativo { background: var(--texto-suave); }

/* ─── FORMULÁRIOS (novo / editar fornecedor) ──────────────── */
.form-fornecedor, .form-unidade {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 1.3rem 1.2rem;
  margin-bottom: 1.4rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .9rem;
  margin-bottom: .9rem;
}

.form-fornecedor label, .form-unidade label, details.form-unidade-nova label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--texto-suave);
}

.campo-full { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; }

.campo-checkbox {
  flex-direction: row !important;
  align-items: center;
  gap: .5rem !important;
  justify-content: flex-start;
}

.form-fornecedor input[type="text"],
.form-fornecedor input[type="email"],
.form-fornecedor input[type="date"],
.form-fornecedor input[type="datetime-local"],
.form-fornecedor input[type="number"],
.form-fornecedor select,
.form-fornecedor textarea,
.form-unidade input[type="text"],
details.form-unidade-nova input[type="text"] {
  font-family: var(--fonte-corpo);
  font-size: .9rem;
  padding: .65rem .85rem;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--bg);
  color: var(--texto);
  outline: none;
}
.form-fornecedor input:focus, .form-fornecedor select:focus, .form-fornecedor textarea:focus,
.form-unidade input:focus, details.form-unidade-nova input:focus { border-color: var(--destaque); }
.form-fornecedor textarea { resize: vertical; }

.secao-titulo {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--texto);
  margin: 1.6rem 0 .2rem;
}
.secao-legenda { font-size: .8rem; color: var(--texto-suave); margin-bottom: .9rem; }

/* ─── MÉTRICAS ────────────────────────────────────────────── */
.metricas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .8rem;
  margin: 1.4rem 0;
}
.metrica-card {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 1rem .8rem;
  text-align: center;
}
.metrica-valor {
  display: block;
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--texto);
}
.metrica-label {
  display: block;
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--destaque);
  margin-top: .2rem;
}

/* ─── UNIDADES DO FORNECEDOR ──────────────────────────────── */
.lista-unidades {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin-bottom: 1.2rem;
}
.form-unidade-linha {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .8rem;
  font-size: .92rem;
  color: var(--texto);
}

details.form-unidade-nova {
  background: var(--surface);
  border: 1px dashed var(--borda);
  border-radius: 14px;
  padding: 1rem 1.2rem;
}
details.form-unidade-nova summary {
  cursor: pointer;
  font-size: .88rem;
  color: var(--destaque);
  letter-spacing: .02em;
}
details.form-unidade-nova form { margin-top: 1rem; display: flex; flex-direction: column; gap: .9rem; }

/* ══════════════════════════════════════════════════════════
   FASE 3 — Unidades (14/08/2026)
   Visão agregada (lista) + seletor de fornecedor (vincular).
   Reaproveita .lista-unidades / .form-unidade / .status-dot já
   definidos acima na Fase 2 — só o card expansível da lista
   agregada e o seletor de fornecedor são novos aqui.
   ══════════════════════════════════════════════════════════ */

/* ─── CARD EXPANSÍVEL (visão agregada por unidade) ────────── */
details.unidade-card {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: .9rem 1.1rem;
  margin-bottom: .6rem;
}
details.unidade-card summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  list-style: none;
}
details.unidade-card summary::-webkit-details-marker { display: none; }
.unidade-card-nome { font-size: .95rem; color: var(--texto); }
details.unidade-card .contagem {
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--destaque);
  white-space: nowrap;
}
.unidade-vinculo-linha {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 0 0;
  font-size: .88rem;
  color: var(--texto-suave);
  border-top: 1px solid var(--borda);
  margin-top: .55rem;
}
.unidade-vinculo-linha:first-of-type { border-top: none; margin-top: .7rem; padding-top: 0; }

/* ─── SELETOR DE FORNECEDOR (tela de vincular) ────────────── */
.seletor-fornecedor { margin-bottom: 1.2rem; }
.seletor-fornecedor label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--texto-suave);
  max-width: 320px;
}
.seletor-fornecedor select {
  font-family: var(--fonte-corpo);
  font-size: .9rem;
  padding: .65rem .9rem;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--bg);
  color: var(--texto);
  outline: none;
}
.seletor-fornecedor select:focus { border-color: var(--destaque); }

/* ══════════════════════════════════════════════════════════
   FASE 4 — Produtos (14/08/2026)
   Mesma linguagem visual das fases anteriores: cards brancos,
   borda var(--borda), cantos 10-14px, acento --rose/--dourado.
   Reaproveita .filtro-form, .form-fornecedor, .form-grid,
   .campo-full, .secao-titulo, .secao-legenda, .vazio já
   definidos acima — só o que é específico de Produtos entra aqui.
   ══════════════════════════════════════════════════════════ */

/* ─── LISTA DE PRODUTOS ───────────────────────────────────── */
.lista-produtos {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.item-produto {
  display: grid;
  grid-template-columns: 16px 1fr 2fr 1fr 1fr;
  align-items: center;
  gap: .8rem;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: .8rem 1.1rem;
  transition: border-color .15s, transform .15s;
}
.item-produto:hover { border-color: var(--destaque); transform: translateY(-1px); }
.item-produto-ref { font-size: .92rem; font-weight: 500; color: var(--texto); }
.item-produto-nome,
.item-produto-fornecedor,
.item-produto-categoria {
  font-size: .82rem;
  color: var(--texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.swatch-mini {
  width: 13px; height: 13px; border-radius: 4px;
  border: 1px solid var(--borda);
  flex-shrink: 0;
}
.swatch-mini.swatch-vazia { background: transparent; border-style: dashed; }

/* ─── CHECKLIST DE CORES (paleta) ─────────────────────────── */
.grid-paleta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .7rem;
  margin: .9rem 0 1.6rem;
}
.paleta-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--texto);
  cursor: pointer;
}
.swatch {
  width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--borda);
  flex-shrink: 0;
}

/* ─── MATRIZ COR x TAMANHO ─────────────────────────────────── */
.tabela-matriz {
  border-collapse: collapse;
  margin: .9rem 0 1.6rem;
  width: 100%;
  max-width: 520px;
}
.tabela-matriz th,
.tabela-matriz td {
  border: 1px solid var(--borda);
  padding: .55rem .7rem;
  text-align: center;
  font-size: .85rem;
  color: var(--texto-suave);
}
.tabela-matriz th {
  font-weight: 500;
  color: var(--destaque);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tabela-matriz th:first-child,
.tabela-matriz td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--texto);
}

/* ─── ITENS DE PAGAMENTO (Pagamentos > Novo/Editar) ───────────
   Mesmo padrão visual de .tabela-matriz, mas alinhada à esquerda
   (linhas de item, não matriz cor×tamanho) e com célula de ação
   (botão remover) sem padding lateral grande. ─── */
.tabela-itens {
  border-collapse: collapse;
  margin: .9rem 0 .5rem;
  width: 100%;
}
.tabela-itens th,
.tabela-itens td {
  border: 1px solid var(--borda);
  padding: .55rem .7rem;
  text-align: left;
  font-size: .85rem;
  color: var(--texto-suave);
}
.tabela-itens th {
  font-weight: 500;
  color: var(--destaque);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tabela-itens select,
.tabela-itens input { width: 100%; box-sizing: border-box; }
.tabela-itens td:last-child { text-align: center; padding: .55rem .3rem; }

/* ══════════════════════════════════════════════════════════
   FASE 4b — Cadastro individual + Paleta de cores (14/08/2026)
   ══════════════════════════════════════════════════════════ */

.acoes-produtos {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin-bottom: 1.4rem;
}
.acoes-produtos .btn-primario,
.acoes-produtos .btn-secundario { margin-bottom: 0; }

/* ─── LISTA DA PALETA ──────────────────────────────────────── */
.lista-paleta {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.6rem;
}
.paleta-linha {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: .7rem 1rem;
}
.paleta-linha-nome { flex: 1; font-size: .9rem; color: var(--texto); }
.paleta-linha-hex {
  font-size: .78rem;
  color: var(--texto-suave);
  letter-spacing: .02em;
}
.paleta-linha form { margin: 0; }
.btn-remover {
  padding: .45rem .8rem;
  font-size: .78rem;
}

.form-paleta-nova { margin-bottom: 0; }
.form-fornecedor input[type="color"] {
  padding: .3rem;
  height: 42px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--bg);
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════
   FASE 5 — Orçamento (15/08/2026)
   Mesma linguagem visual das fases anteriores: cards brancos,
   borda var(--borda), cantos 10-14px, acento --rose/--dourado.
   Reaproveita .page-header, .filtro-form, .acoes-produtos,
   .btn-primario/.btn-secundario, .form-fornecedor, .form-grid,
   .campo-full, .vazio, .alerta-erro já definidos acima — só o
   que é específico de Orçamento entra aqui.
   ══════════════════════════════════════════════════════════ */

/* ─── LISTA DE ORÇAMENTOS ─────────────────────────────────── */
.lista-orcamentos {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.item-orcamento {
  display: block;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: .9rem 1.1rem;
  transition: border-color .15s, transform .15s;
}
.item-orcamento:hover { border-color: var(--destaque); transform: translateY(-1px); }

.item-orcamento-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  margin-bottom: .35rem;
}
.item-orcamento-topo strong {
  font-size: .95rem;
  font-weight: 500;
  color: var(--texto);
}
.item-orcamento-origem {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-suave);
  white-space: nowrap;
}

.item-orcamento-linha {
  font-size: .85rem;
  color: var(--texto-suave);
}
.item-orcamento-secundario {
  font-size: .78rem;
  color: var(--destaque);
  margin-top: .3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Origem do orçamento reaproveita .status-dot (base já definida
   na Fase 2); só entram aqui as cores por origem. */
.status-dot.status-instagram { background: var(--aviso); }
.status-dot.status-whatsapp  { background: var(--sucesso); }
.status-dot.status-loja      { background: var(--destaque); }

/* ══════════════════════════════════════════════════════════
   FASE 8 — Estoque (15/08/2026)
   Reaproveita .filtro-form (fornecedor/status/busca) e
   .secao-legenda (linha de total) já existentes. Linha única por
   SKU (mesmo layout de .item-produto: dot | referência | descrição
   | tamanho | preço, truncando o que não couber) — cada linha é um
   link pra tela de detalhe (ajuste pedido em 15/08/2026, antes era
   um card com 3 linhas).
   ══════════════════════════════════════════════════════════ */
.lista-estoque {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.item-estoque {
  display: grid;
  grid-template-columns: 10px auto 1fr auto auto;
  align-items: center;
  gap: .8rem;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: .9rem 1.1rem;
  transition: border-color .15s, transform .15s;
}
.item-estoque:hover { border-color: var(--destaque); transform: translateY(-1px); }
.item-estoque-ref { font-size: .95rem; font-weight: 600; color: var(--texto); white-space: nowrap; }
.item-estoque-descricao {
  font-size: .85rem;
  color: var(--texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-estoque-tamanho { font-size: .82rem; color: var(--texto-suave); white-space: nowrap; }
.item-estoque-preco {
  font-size: .85rem;
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 78px;
}

.status-dot.status-disponivel { background: var(--sucesso); }
.status-dot.status-critico    { background: var(--aviso); }
/* .status-dot.status-esgotado já existe (Fase 6, var(--erro)) */

/* ─── DETALHE DO ITEM ──────────────────────────────────────── */
.item-estoque-detalhe-status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 1rem;
}

/* ─── FORM (novo / editar orçamento) ──────────────────────── */
/* .form-fornecedor / .form-grid / .campo-full já cobrem os
   campos padrão do form; abaixo só o que é específico. */

.link-voltar {
  display: inline-block;
  font-size: .82rem;
  color: var(--destaque);
  margin-bottom: 1rem;
}
.link-voltar:hover { color: var(--texto); }

.widget-buscar-peca {
  background: var(--surface-alt);
  border: 1px dashed var(--borda);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.2rem;
}
.widget-titulo {
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--texto);
  margin-bottom: .9rem;
}

/* ─ linha de topo: "onde está" (radio) + fornecedor lado a lado ─ */
.widget-linha-topo {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-bottom: .9rem;
}
.widget-radio-grupo { flex: 1 1 260px; }
.widget-rotulo {
  display: block;
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--texto-suave);
  margin-bottom: .5rem;
}
.widget-radios {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.2rem;
}
.widget-buscar-peca .widget-radios label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  color: var(--texto);
  cursor: pointer;
}
.widget-radios input[type="radio"] {
  accent-color: var(--erro);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.widget-fornecedor {
  flex: 0 1 200px;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--texto-suave);
}
.widget-fornecedor select {
  font-family: var(--fonte-corpo);
  font-size: .88rem;
  padding: .6rem .8rem;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--bg);
  color: var(--texto);
  outline: none;
}
.widget-fornecedor select:focus { border-color: var(--destaque); }

/* ─ campo de busca por referência (texto livre) ─ */
.widget-campo-busca {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--texto-suave);
  margin-bottom: .9rem;
}
.widget-campo-busca input[type="text"] {
  font-family: var(--fonte-corpo);
  font-size: .9rem;
  padding: .65rem .85rem;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--bg);
  color: var(--texto);
  outline: none;
}
.widget-campo-busca input:focus { border-color: var(--destaque); }

/* .aviso já é creme/nude — dentro do widget (que também é creme),
   troca pra branco só aqui pra não sumir contra o próprio fundo. */
.widget-buscar-peca .aviso { background: var(--surface); margin: 0 0 .9rem; }

/* ─ resultados ─ */
#bp_resultados { display: flex; flex-direction: column; gap: .5rem; }
.bp_resultado_item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem .7rem;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: .6rem .8rem;
  font-size: .85rem;
  color: var(--texto);
}
.bp_resultado_item span { flex: 1 1 200px; }
.bp_resultado_item .btn-secundario {
  padding: .45rem .8rem;
  font-size: .78rem;
  margin-bottom: 0;
  flex-shrink: 0;
  width: 100%;
}
@media (min-width: 480px) {
  .bp_resultado_item .btn-secundario { width: auto; }
}

.form-excluir { margin-top: -.6rem; margin-bottom: 1.4rem; }
.btn-perigo {
  display: inline-block;
  font-family: var(--fonte-corpo);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .03em;
  border-radius: 999px;
  padding: .7rem 1.2rem;
  cursor: pointer;
  border: 1px solid var(--erro);
  background: transparent;
  color: var(--erro);
  transition: background .15s, color .15s;
}
.btn-perigo:hover { background: var(--erro); color: var(--surface); }

/* ══════════════════════════════════════════════════════════
   FASE 6 — Catálogo Fornecedor (15/08/2026)
   3 páginas (Flask não tem tabs nativas) — nav-abas no topo pra
   simular a navegação por aba do Streamlit original. Reaproveita
   .metricas-grid/.metrica-card, .item-produto/.lista-produtos,
   .form-fornecedor/.form-grid/.campo-full, details.unidade-card
   (accordion, Fase 3) como base — só o que é específico daqui
   entra abaixo.
   ══════════════════════════════════════════════════════════ */

/* ─── NAV DE "ABAS" (link cruzado entre as 3 páginas) ─────── */
.nav-abas {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  border-bottom: 1px solid var(--borda);
  margin: 1rem 0 1.4rem;
  padding-bottom: 0;
}
.nav-aba {
  font-family: var(--fonte-corpo);
  font-size: .85rem;
  color: var(--texto-suave);
  padding: .6rem 1rem;
  border-radius: 10px 10px 0 0;
  border: 1px solid transparent;
}
.nav-aba:hover { color: var(--destaque); }
.nav-aba-ativa {
  color: var(--texto);
  font-weight: 500;
  background: var(--surface);
  border-color: var(--borda);
  border-bottom-color: var(--surface);
  margin-bottom: -1px;
}

/* ─── status-dot: esgotado (aba Catálogo) ─────────────────── */
.status-dot.status-esgotado { background: var(--erro); }

/* ─── ACCORDION POR REFERÊNCIA (aba Gerenciar Disponibilidade) ─
   Mesmo visual de details.unidade-card (Fase 3), com corpo maior. */
details.referencia-card {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: .9rem 1.1rem;
  margin-bottom: .7rem;
}
details.referencia-card summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  list-style: none;
}
details.referencia-card summary::-webkit-details-marker { display: none; }
.referencia-card-titulo { font-size: .92rem; color: var(--texto); }
details.referencia-card .contagem {
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--destaque);
  white-space: nowrap;
}

.referencia-card-corpo {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--borda);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.referencia-card-corpo label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--texto-suave);
}
.referencia-card-corpo textarea,
.referencia-card-corpo input[type="number"] {
  font-family: var(--fonte-corpo);
  font-size: .88rem;
  padding: .6rem .8rem;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--bg);
  color: var(--texto);
  outline: none;
}
.referencia-card-corpo textarea:focus,
.referencia-card-corpo input:focus { border-color: var(--destaque); }

.rc-unidade-bloco {
  background: var(--surface-alt);
  border-radius: 10px;
  padding: .8rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.rc-unidade-titulo { font-size: .8rem; color: var(--texto); font-weight: 500; }

.rc-tamanhos {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.rc-tamanho-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  color: var(--texto);
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: .4rem .7rem;
  cursor: pointer;
}
.rc-tamanho-check input[type="checkbox"] {
  accent-color: var(--destaque);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.rc-preco { max-width: 260px; }

.rc-rodape {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.rc-status { font-size: .82rem; color: var(--texto-suave); }
.rc-status-ok { color: var(--sucesso); }
.rc-status-erro { color: var(--erro); }

/* ─── Página de DETALHE de uma referência (15/08/2026) ────────
   Cada linha da lista agora abre aqui (link, como em Produtos) —
   mostra os tamanhos/unidades agrupados + botão "+ Orçamento".
   Reaproveita .form-fornecedor/.aviso/.metricas-grid. */
.cf-detalhe-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.cf-detalhe-titulo h2 { font-size: 1.3rem; color: var(--texto); margin: 0 0 .3rem; }
.cf-detalhe-titulo p { font-size: .88rem; color: var(--texto-suave); margin: 0; }

.cf-detalhe-detalhes {
  background: var(--surface-alt);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  font-size: .88rem;
  color: var(--texto);
  white-space: pre-wrap;
  margin-bottom: 1.2rem;
}

.cf-tabela-unidade { margin-bottom: 1.2rem; }
.cf-tabela-unidade-titulo {
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--destaque);
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.cf-tabela {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.cf-tabela-linha {
  display: grid;
  grid-template-columns: 16px 1fr 1fr;
  align-items: center;
  gap: .8rem;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: .6rem .9rem;
  font-size: .85rem;
  color: var(--texto);
}

/* ══════════════════════════════════════════════════════════
   FASE 7 — Clientes (15/08/2026)
   Lista com cards expansíveis, reaproveitando details.unidade-card
   (Fase 3) como referência de base (summary em flex, marcador nativo
   escondido) — mas com classe própria porque o summary aqui tem uma
   linha de informação secundária (telefone/última compra) que o card
   de unidade não tem.

   O form de edição embutido usa .form-cliente-inline (novo) em vez de
   .form-fornecedor: .form-fornecedor tem borda/padding própria, o que
   geraria caixa-dentro-de-caixa aninhado dentro de details.cliente-card
   (que já tem borda). .form-cliente-inline só estiliza input/select/
   label, sem wrapper visual — o details.cliente-card já é o wrapper.
   ══════════════════════════════════════════════════════════ */

.lista-clientes { display: flex; flex-direction: column; gap: .6rem; }

details.cliente-card {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: .9rem 1.1rem;
}
details.cliente-card summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .7rem;
  list-style: none;
  flex-wrap: wrap;
}
details.cliente-card summary::-webkit-details-marker { display: none; }
.cliente-card-nome { font-size: .95rem; color: var(--texto); flex-shrink: 0; }
.cliente-card-info {
  font-size: .78rem;
  color: var(--texto-suave);
  flex: 1 1 220px;
}

.form-cliente-inline { margin-top: 1rem; display: flex; flex-direction: column; gap: .9rem; }
.form-cliente-inline label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--texto-suave);
}
.form-cliente-inline input[type="text"],
.form-cliente-inline select {
  font-family: var(--fonte-corpo);
  font-size: .9rem;
  padding: .65rem .85rem;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--bg);
  color: var(--texto);
  outline: none;
}
.form-cliente-inline input:focus, .form-cliente-inline select:focus { border-color: var(--destaque); }

/* ══════════════════════════════════════════════════════════
   FASE 9 — Compras (15/08/2026)
   Lista reaproveita .item-produto/.lista-produtos (Fase 4) sem
   nenhuma alteração — os 4 status (Pendente/Confirmado/Recebido/
   Cancelado) já mapeiam pros status-dot existentes (.status-critico,
   .status-loja, .status-disponivel, .status-esgotado). Cabeçalho do
   detalhe reaproveita .cf-detalhe-cabecalho/.cf-tabela (Fase 6) como
   wrapper — só a linha de item ganhou uma variante de grid própria
   (.cp-tabela-linha, 5 colunas, porque aqui tem quantidade e total
   separados do preço unitário, diferente do .cf-tabela-linha de 3
   colunas do Catálogo Fornecedor). Form de Nova Compra reaproveita
   .form-fornecedor/.form-grid/.campo-full — só a grade de tamanhos×
   quantidade e os widgets de sugestão/vínculo com venda são novos.
   ══════════════════════════════════════════════════════════ */

/* ─── Ações de status no cabeçalho do detalhe ─────────────── */
.cp-acoes-status {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}
.cp-acoes-status form { margin: 0; }
.cp-acoes-status .btn-primario,
.cp-acoes-status .btn-perigo { margin-bottom: 0; }

/* ─── Linha de item na tabela de detalhe ──────────────────── */
/* Era CSS Grid (2fr auto auto auto auto) — quebrou em mobile: as
   4 colunas "auto" (tamanho/qtd/custo/total) já estouram a largura
   da tela sozinhas, e o 2fr da referência colapsa perto de zero,
   forçando o texto a quebrar letra a letra e as colunas de preço a
   se sobreporem. Troquei pro mesmo padrão flex-wrap de
   .bp_resultado_item (Orçamento) — cada campo tem largura mínima
   própria e só desce de linha quando precisa, sem colapsar coluna
   nenhuma. Correção 15/08/2026. */
.cp-tabela-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .3rem .9rem;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: .7rem .9rem;
  font-size: .85rem;
  color: var(--texto);
}
.cp-tabela-linha span:first-child {
  flex: 1 1 160px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-tabela-linha span:not(:first-child) {
  flex: 0 0 auto;
  color: var(--texto-suave);
  white-space: nowrap;
}

/* ─── Form "Receber" (nota fiscal, embutido no detalhe) ───── */
#cp_form_receber { margin-top: 1rem; }

/* ─── Grade de tamanhos × quantidade (Nova Compra) ────────── */
.cp-linha-item {
  display: grid;
  grid-template-columns: 48px 90px 1fr;
  align-items: center;
  gap: .8rem;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: .55rem .9rem;
  font-size: .85rem;
  color: var(--texto);
  transition: border-color .15s, background .15s;
}
.cp-item-tamanho { font-weight: 500; color: var(--texto); }
.cp-qtd {
  font-family: var(--fonte-corpo);
  font-size: .88rem;
  padding: .5rem .6rem;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--bg);
  color: var(--texto);
  outline: none;
  width: 100%;
}
.cp-qtd:focus { border-color: var(--destaque); }

/* Referência com tamanhos já vistos antes (sugestão da API) —
   realça a linha em vez de só listar num texto à parte. */
.cp-linha-sugerida {
  border-color: var(--aviso);
  background: var(--surface-alt);
}

.cp-item-venda-hint {
  font-size: .78rem;
  color: var(--destaque);
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.cp-venda-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  font-size: .76rem;
  color: var(--texto-suave);
}
.cp-venda-check input[type="checkbox"] {
  accent-color: var(--destaque);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.cp-hint {
  font-size: .8rem;
  color: var(--destaque);
  margin: -.4rem 0 .9rem;
}

@media (max-width: 480px) {
  .cp-linha-item { grid-template-columns: 40px 70px 1fr; padding: .5rem .7rem; }
}

/* ══════════════════════════════════════════════════════════
   AJUSTE 17/08/2026 — Compras (lista): pedido, fornecedor e
   valor na mesma linha, caixa mais baixa. Substitui o bloco
   .item-produto-compras/.ipc-* de 16/08/2026 (ficou órfão depois
   que a lista passou a reaproveitar .item-produto/.lista-produtos
   direto, no mesmo padrão do Catálogo Fornecedor).

   Reaproveita o nome da classe (o template já usa
   class="item-produto item-produto-compras") como MODIFICADOR em
   cima de .item-produto — não mexe no .item-produto genérico, que
   Produtos/Catálogo Referências também usam e cujo breakpoint
   mobile (força .item-produto-nome pra 100% de largura) existe de
   propósito pra descrição+localização longas do Catálogo
   Fornecedor. Em Compras o "nome" (fornecedor + contagem) é curto
   o bastante pra caber ao lado do valor, então aqui isso é
   sobrescrito.

   Só 4 campos agora (dot / pedido / fornecedor+contagem / valor) —
   "X pç" saiu de campo próprio e passou a fazer parte do texto de
   fornecedor+contagem, ver modulo_compras_lista.html. */
.item-produto.item-produto-compras {
  grid-template-columns: 14px auto 1fr auto;
  padding: .55rem .9rem;
}
.item-produto-compras .item-produto-categoria {
  font-weight: 500;
  color: var(--texto);
}

@media (max-width: 620px) {
  .item-produto.item-produto-compras {
    display: grid;
    grid-template-columns: 14px auto 1fr auto;
    flex-wrap: unset;
    padding: .55rem .9rem;
  }
  .item-produto-compras .item-produto-nome {
    flex: unset;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .item-produto-compras .item-produto-categoria {
    flex: unset;
    margin-left: 0;
    text-align: right;
    font-weight: 500;
    color: var(--texto);
  }
}
/* CORREÇÃO 16/08/2026: alinhado ao mesmo padrão da lista de
   Vendas — referência/tamanho/qtd/preço unitário juntos numa
   linha só (com "·" separando), e o total sozinho embaixo, maior
   e em negrito, em vez de tudo do mesmo tamanho lado a lado. */
.cp-item-card {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: .8rem 1.1rem;
  color: var(--texto);
}
.cp-item-card-desc {
  font-size: .92rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-item-card-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .4rem;
  font-size: .82rem;
  color: var(--texto-suave);
}
.cp-item-card-info span:not(.cp-item-card-total) { white-space: nowrap; }
.cp-item-card-info span:not(.cp-item-card-total):not(:first-child)::before {
  content: "· ";
}
.cp-item-card-total {
  flex: 1 1 100%;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--texto);
  margin-top: .15rem;
}

/* ══════════════════════════════════════════════════════════
   FASE 9 — Vendas (16/08/2026)
   Módulo criado sem nenhum CSS correspondente — as classes abaixo
   (lista, detalhe, formulário de Nova Venda) nunca tinham regra
   nenhuma, por isso tudo caía como texto corrido. Segue o mesmo
   padrão visual de .item-produto/.lista-produtos (Fase 4) pra
   lista, e de .cp-acoes-status/.form-fornecedor (Compras/Fase 9)
   pro detalhe e formulário — pra manter a mesma linguagem visual
   entre os três módulos de pedido (Orçamento/Compras/Vendas).
   ══════════════════════════════════════════════════════════ */

/* ─── Status (Pendente/Confirmado/Entregue/Cancelado) ─────── */
/* Mesmo mapeamento de cor já usado em Compras (crítico=dourado,
   loja=rose, disponível=sucesso, esgotado=erro), mas aqui o
   template monta a classe direto do status (status-{{ status|lower }}),
   sem passar por um mapeamento Jinja — por isso os 4 nomes abaixo
   são literais, não os genéricos .status-critico/.status-loja/etc. */
.status-dot.status-pendente   { background: var(--aviso); }
.status-dot.status-confirmado { background: var(--destaque); }
.status-dot.status-entregue   { background: var(--sucesso); }
.status-dot.status-cancelado  { background: var(--erro); }

.tag-pago {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--sucesso);
  border: 1px solid var(--sucesso);
  border-radius: 20px;
  padding: .1rem .5rem;
  margin-left: .4rem;
}

/* ─── Lista de Vendas ──────────────────────────────────────── */
.lista-vendas {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.item-venda {
  display: grid;
  grid-template-columns: 9px 1fr 2fr 1fr 1fr;
  align-items: center;
  gap: .8rem;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: .8rem 1.1rem;
  transition: border-color .15s, transform .15s;
}
.item-venda:hover { border-color: var(--destaque); transform: translateY(-1px); }
.item-venda-nr { font-size: .92rem; font-weight: 500; color: var(--texto); }
.item-venda-cliente,
.item-venda-data {
  font-size: .82rem;
  color: var(--texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-venda-total {
  font-size: .92rem;
  font-weight: 500;
  color: var(--texto);
  text-align: right;
}

@media (max-width: 620px) {
  /* CORREÇÃO 16/08/2026: o grid de 3 colunas não dava conta dos 5
     elementos do card (dot/nr/cliente/data/total) — sobrava item
     sem coluna definida e a data ("2026-07-28") ficava espremida,
     cortando pra "2.". Troca pra flex-wrap: dot + nr + cliente +
     data ficam juntos numa linha só (quebrando entre si só se não
     couber), e o total vai sozinho pra linha de baixo, em destaque. */
  .item-venda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .5rem;
  }
  .item-venda > .status-dot { flex: 0 0 auto; }
  .item-venda-nr { flex: 0 0 auto; }
  .item-venda-cliente {
    flex: 1 1 auto;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .item-venda-data {
    flex: 0 0 auto;
    white-space: normal;
  }
  .item-venda-data::before { content: "· "; }
  .item-venda-total {
    flex: 1 1 100%;
    text-align: left;
    font-size: 1.05rem;
    margin-top: .15rem;
  }
}

/* ─── Detalhe da Venda ─────────────────────────────────────── */
.venda-detalhe-status {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: var(--texto);
  margin: .3rem 0 .6rem;
}
.venda-detalhe-resumo {
  font-size: .85rem;
  color: var(--texto-suave);
  margin-bottom: 1.2rem;
}

.aviso-fornecedor {
  background: var(--surface-alt);
  border: 1px solid var(--aviso);
  border-radius: 10px;
  padding: .8rem 1rem;
  font-size: .82rem;
  color: var(--texto-suave);
  margin-bottom: 1.2rem;
}

.lista-itens-venda {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1.4rem;
}
.item-venda-linha {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: .8rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.item-venda-linha-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  font-size: .9rem;
  color: var(--texto);
}
.item-venda-linha-situacao {
  font-size: .8rem;
  color: var(--texto-suave);
}
.item-venda-linha-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  font-size: .82rem;
  color: var(--texto-suave);
}
.item-venda-linha-rodape form { margin: 0; }
.btn-remover {
  font-size: .74rem;
  padding: .35rem .7rem;
}

/* ─── Ações do pedido (confirmar/pago/entregar/cancelar) ──── */
.venda-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}
.venda-acoes form { margin: 0; }
.venda-acoes .btn-primario,
.venda-acoes .btn-secundario,
.venda-acoes .btn-perigo { margin-bottom: 0; }

.btn-desabilitado {
  font-size: .82rem;
  color: var(--texto-suave);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: .55rem 1.1rem;
  cursor: default;
}

/* ─── Form "Nova Venda" ────────────────────────────────────── */
.venda-pedido-aberto-aviso {
  display: none;
  background: var(--surface-alt);
  border: 1px solid var(--aviso);
  border-radius: 10px;
  padding: .7rem 1rem;
  font-size: .8rem;
  color: var(--texto-suave);
  margin-bottom: 1rem;
}

.venda-fonte-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: .4rem;
}
.venda-fonte-radio label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  color: var(--texto);
  cursor: pointer;
}
.venda-fonte-radio input[type="radio"] {
  accent-color: var(--destaque);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.venda-tamanhos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .7rem;
  margin: .6rem 0 1.2rem;
}
.venda-tamanho-card {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: .65rem .8rem;
  transition: border-color .15s;
}
.venda-tamanho-card label {
  font-size: .82rem;
  font-weight: 500;
  color: var(--texto);
}
.venda-tamanho-card .qtd-input,
.venda-tamanho-card .preco-input {
  font-family: var(--fonte-corpo);
  font-size: .85rem;
  padding: .45rem .6rem;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--bg);
  color: var(--texto);
  outline: none;
  width: 100%;
}
.venda-tamanho-card .qtd-input:focus,
.venda-tamanho-card .preco-input:focus { border-color: var(--destaque); }
.venda-tamanho-card .preco-input[readonly] {
  background: var(--surface-alt);
  color: var(--texto-suave);
}

.venda-mix-fornecedor {
  background: var(--surface-alt);
  border: 1px solid var(--aviso);
  border-radius: 10px;
  padding: .9rem 1rem;
  margin-bottom: 1.2rem;
}

.venda-resumo-total {
  font-size: .95rem;
  color: var(--texto);
  background: var(--surface-alt);
  border-radius: 10px;
  padding: .7rem 1rem;
  margin: .4rem 0 1.2rem;
}

/* ══════════════════════════════════════════════════════════
   CORREÇÃO 16/08/2026 — .item-produto sem breakpoint mobile
   Mesmo problema já documentado e corrigido em .cp-tabela-linha
   (Compras, 15/08/2026: "Era CSS Grid — quebrou em mobile"), mas
   nunca aplicado aqui: .item-produto usa grid fixo de 5 colunas
   (16px 1fr 2fr 1fr 1fr) sem breakpoint — numa tela de celular as
   5 colunas espremem e cada campo corta com "..." (visto em
   Catálogo Fornecedor, mas afeta qualquer lista que reaproveite
   .item-produto: Produtos, Catálogo Referências etc.).

   Abaixo de 620px, troca pra flex-wrap: dot + referência na
   primeira linha, nome/fornecedor (se houver) quebram pra linha
   própria sem cortar, e o(s) campo(s) finais (tamanho, preço)
   ficam juntos na última linha — o último campo (sempre o preço
   nos templates atuais) alinha à direita em negrito via :last-child,
   sem precisar de classe nova nem mexer nos templates.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  .item-produto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .6rem;
  }
  .item-produto > .status-dot { flex: 0 0 auto; }
  .item-produto-ref { flex: 0 1 auto; }
  .item-produto-nome,
  .item-produto-fornecedor {
    flex: 1 1 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .item-produto-categoria {
    flex: 0 1 auto;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .item-produto > *:last-child {
    margin-left: auto;
    text-align: right;
    font-weight: 500;
    color: var(--texto);
  }
}

/* ══════════════════════════════════════════════════════════
   FASE 13 — Financeiro (17/08/2026)
   Card expansível (mesmo padrão de details.unidade-card/
   referencia-card — Fases 3/6): summary com status + pedido +
   cliente + total; corpo só quando Pendente, com o form de baixa
   (forma de pagamento + frete). Reaproveita os status-dot que já
   existem: Pendente = .status-critico (dourado), Pago =
   .status-disponivel (sucesso). Cancelado usa .status-esgotado (erro).
   ══════════════════════════════════════════════════════════ */
details.financeiro-card {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: .9rem 1.1rem;
  margin-bottom: .6rem;
}
details.financeiro-card summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .7rem;
  list-style: none;
}
details.financeiro-card summary::-webkit-details-marker { display: none; }
details.financeiro-card:not([open]) summary { cursor: default; }
.financeiro-card-nr { font-size: .9rem; font-weight: 500; color: var(--texto); white-space: nowrap; }
.financeiro-card-cliente {
  flex: 1 1 auto;
  font-size: .85rem;
  color: var(--texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.financeiro-card-total { font-size: .92rem; font-weight: 500; color: var(--texto); white-space: nowrap; }

.financeiro-card-corpo {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--borda);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.financeiro-card-corpo label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--texto-suave);
}
.financeiro-card-corpo select,
.financeiro-card-corpo input[type="number"] {
  font-family: var(--fonte-corpo);
  font-size: .88rem;
  padding: .6rem .8rem;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--bg);
  color: var(--texto);
  outline: none;
}
.financeiro-card-corpo select:focus,
.financeiro-card-corpo input:focus { border-color: var(--destaque); }

.financeiro-total-preview {
  background: var(--surface-alt);
  border-radius: 10px;
  padding: .6rem .9rem;
  font-size: .88rem;
  color: var(--texto);
}
.financeiro-total-preview strong { color: var(--destaque); }

.financeiro-card-info {
  font-size: .84rem;
  color: var(--texto-suave);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

/* ══════════════════════════════════════════════════════════
   AJUSTE 17/08/2026 — Agenda (Profissionais Liberais)
   O módulo inteiro nunca teve CSS (mesmo bug já visto em Vendas/
   Compras): .agenda-toolbar, .agenda-grade, .agenda-bloco etc. não
   existiam, então tudo caía em texto corrido no mobile (grade de
   colunas por profissional não cabe em tela pequena de qualquer
   forma). Trocado o layout de grade por: combo de profissional
   (reaproveita .seletor-fornecedor, já existente) + lista de cards
   por horário, no mesmo padrão visual de .item-estoque (Fase 8):
   dot de status | horário | paciente+procedimento | ação.
   ══════════════════════════════════════════════════════════ */

.agenda-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.2rem;
}
.agenda-toolbar .btn-secundario,
.agenda-toolbar .btn-primario { margin-bottom: 0; }

.agenda-data-form { margin: 0; }
.agenda-data-form input[type="date"] {
  font-family: var(--fonte-corpo);
  font-size: .9rem;
  padding: .65rem .9rem;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--surface);
  color: var(--texto);
  outline: none;
}
.agenda-data-form input[type="date"]:focus { border-color: var(--destaque); }

/* ─── LISTA DE AGENDAMENTOS (por profissional selecionado) ──── */
.lista-agendamentos {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1.2rem;
}
/* Mesmo padrão de grid de .item-estoque (Fase 8): dot | rótulo curto
   | conteúdo principal (1fr, trunca) | complemento | ação — tudo numa
   linha só, sem empilhar em coluna no mobile. */
.item-agendamento {
  display: grid;
  grid-template-columns: 10px auto 1fr auto auto;
  align-items: center;
  gap: .7rem;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: .9rem 1.1rem;
  transition: border-color .15s, transform .15s;
}
.item-agendamento:hover { border-color: var(--destaque); transform: translateY(-1px); }

.item-agendamento-hora {
  font-size: .92rem;
  font-weight: 600;
  color: var(--texto);
  white-space: nowrap;
}

.item-agendamento-paciente {
  font-size: .88rem;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.item-agendamento-paciente:hover { color: var(--destaque); }
.item-agendamento-paciente-vazio { color: var(--texto-suave); }

.item-agendamento-procedimento {
  font-size: .78rem;
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

.item-agendamento-tag {
  font-size: .64rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--destaque);
  border: 1px solid var(--destaque);
  border-radius: 20px;
  padding: .05rem .45rem;
  white-space: nowrap;
}

.item-agendamento-acoes { display: flex; align-items: center; }
.item-agendamento-acoes .btn-secundario {
  margin-bottom: 0;
  padding: .45rem .75rem;
  font-size: .74rem;
  white-space: nowrap;
}

/* ─── Slot livre (link direto pra Novo Agendamento) ────────── */
/* Mesma grade/linha única de .item-agendamento, mas o card inteiro é
   o link (por isso a regra em cima, não .btn-secundario) — borda
   tracejada segue o mesmo padrão já usado em .widget-buscar-peca e
   details.form-unidade-nova pra sinalizar "ainda não preenchido". */
a.item-agendamento.item-agendamento-livre {
  border-style: dashed;
  border-color: var(--borda);
  cursor: pointer;
}
a.item-agendamento.item-agendamento-livre:hover {
  border-color: var(--destaque);
  background: var(--surface-alt);
}
.status-dot.status-livre {
  background: transparent;
  border: 1.5px solid var(--destaque);
}
.item-agendamento-livre-label {
  color: var(--texto-suave);
  font-style: italic;
}
.item-agendamento-link-marcar {
  font-size: .78rem;
  color: var(--destaque);
  font-weight: 500;
  white-space: nowrap;
}
a.item-agendamento.item-agendamento-livre:hover .item-agendamento-link-marcar { color: var(--texto); }

.agenda-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.2rem;
  font-size: .8rem;
  color: var(--texto-suave);
  margin-top: .4rem;
}
.agenda-legenda span { display: inline-flex; align-items: center; gap: .4rem; }

@media (max-width: 480px) {
  /* Tela bem estreita: procedimento e ação encolhem primeiro,
     paciente continua com prioridade (é o dado mais importante),
     mas tudo permanece numa linha só — nada empilha em coluna. */
  .item-agendamento { gap: .5rem; padding: .8rem .85rem; }
  .item-agendamento-procedimento { max-width: 78px; }
  .item-agendamento-acoes .btn-secundario {
    padding: .4rem .55rem;
    font-size: 0;
  }
  .item-agendamento-acoes .btn-secundario::before {
    content: "✓";
    font-size: .85rem;
  }
}

/* ══════════════════════════════════════════════════════════
   CARD APARÊNCIAS — seletor de tema com preview em tempo real
   (tela de Configurações). Adicionado 19/08/2026 junto com a
   refatoração de painel.css pra tokens semânticos plugáveis.
   ══════════════════════════════════════════════════════════ */

.card-aparencias {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: var(--card-radius);
  padding: 1.2rem;
  margin: 1.4rem 0;
}

.card-aparencias-titulo {
  font-family: var(--fonte-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: .3rem;
}

.card-aparencias-desc {
  font-size: .82rem;
  color: var(--texto-suave);
  margin-bottom: 1rem;
}

.tema-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
}
@media (min-width: 640px) {
  .tema-grid { grid-template-columns: repeat(4, 1fr); }
}

.tema-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  background: var(--bg);
  border: 2px solid var(--borda);
  border-radius: var(--input-radius);
  padding: .8rem;
  cursor: pointer;
  font-family: var(--fonte-corpo);
  text-align: left;
  transition: border-color .15s, transform .1s;
}
.tema-card:hover { transform: translateY(-1px); }
.tema-card.selecionado { border-color: var(--destaque); }

.tema-swatches { display: flex; gap: .3rem; }
.tema-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.1);
}

.tema-nome {
  font-size: .82rem;
  font-weight: 500;
  color: var(--texto);
}

.tema-check {
  position: absolute;
  top: .5rem;
  right: .6rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--destaque);
  color: var(--texto-invertido);
  font-size: .68rem;
  display: none;
  align-items: center;
  justify-content: center;
}
.tema-card.selecionado .tema-check { display: flex; }