/* ============================================
   Tema iShoot — design system "Professional Creative" (Stitch)
   Pele compartilhada pelo painel da Iza (admin.html) e pelo portal
   do parceiro (parceiro.html). Carregar DEPOIS de base.css/admin.css
   (as redefinições daqui vencem por ordem).

   As páginas PÚBLICAS de cliente (orçamento, contrato, entrega…)
   NÃO carregam este arquivo de propósito — seguem com a identidade
   "Iza Gonçalves Fotografia" (marrom/creme) do base.css.

   Fontes: cada página que usa este tema carrega Plus Jakarta Sans +
   Inter (Google Fonts, display=swap); sem rede, cai no Segoe.
   Os nomes "--marrom" são a variável de marca do projeto (base.css);
   renomear exigiria reescrever o base — por isso ficam.
   ============================================ */
:root {
  /* ── Paleta do PAINEL e do PORTAL ──
     Quente, da mesma família que a cliente vê no orçamento e no contrato.
     A regra que organiza tudo: COR DE AÇÃO ≠ COR DE TEXTO. Quando o botão
     principal é preto (a cor do conteúdo), ele compete com a informação e a
     tela fica pesada — foi o que aconteceu na versão anterior desta pele.

     Cor tem significado e são poucas:
       --acao      terracota → clicar (botão principal, aba ativa, link)
       --verde                → confirmar/aceitar/validar
       --vermelho             → excluir/cancelar/destruir
       --ambar                → atenção/pendência
     O resto é papel e tinta. */
  --acao:           #8a5a34;
  --acao-escura:    #6f4728;
  --acao-fundo:     #f4ece3;

  --tinta:          #241d15;   /* títulos e texto forte */
  --tinta-2:        #463c31;   /* texto normal */
  --tinta-3:        #6b5b4a;
  --linha:          #e6dfd3;
  --linha-forte:    #d5c9b7;
  --superficie:     #ffffff;
  --superficie-2:   #f1ece3;
  --realce:         #efe9df;

  --verde:          #2e7d4f;
  --verde-escuro:   #24623e;
  --verde-fundo:    #eaf4ee;
  --verde-borda:    #bfdecb;
  --vermelho:       #b3432b;
  --vermelho-escuro:#8f3421;
  --vermelho-fundo: #fbeeea;
  --vermelho-borda: #eed0c7;
  --ambar:          #84640e;
  --ambar-fundo:    #fbf3df;
  --ambar-borda:    #e8d9a8;

  /* Nomes herdados do base.css: admin.css e as telas usam estes em dezenas
     de lugares. Ficam como apelidos, para não ter de varrer o painel todo. */
  --marrom:         var(--acao);
  --marrom-escuro:  var(--tinta);
  --dourado:        var(--ambar);
  --creme:          #f7f4ef;
  --areia:          var(--superficie-2);
  --borda:          var(--linha);
  --texto:          var(--tinta-2);
  --texto-suave:    #79694f;
  --sombra:         0 1px 2px rgba(36, 29, 21, .04), 0 4px 16px rgba(36, 29, 21, .06);
  --raio:           12px;
  --ishoot-1:       var(--acao);
  --ishoot-2:       var(--acao);
  --ishoot-indigo:  var(--tinta);
}

/* Tipografia: Inter no corpo, Plus Jakarta Sans nos títulos
   (vence os pontos onde base.css/admin.css usam Georgia) */
body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; }
h1, h2, h3,
.topo-mobile .titulo,
.cartao-numero .num,
.meta-titulo, .meta-pct,
.previsto-titulo, .previsto-valor,
.agenda-mes {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  letter-spacing: -.01em;
}
h1, h2, h3 { color: var(--marrom-escuro); }

/* Cartões: borda slate fina, sombra suave "iluminada de cima" */
.cartao { box-shadow: var(--sombra); }
a.cartao-numero:hover { box-shadow: 0 8px 24px rgba(36, 29, 21, .12); }
.cartao-numero .rotulo { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; }
.cartao-numero .num { color: var(--ishoot-1); }
.cartao-numero .num.moeda { color: var(--marrom-escuro); }

/* Campos: foco com anel roxo (o base.css usa um marrom hardcoded) */
input:focus, select:focus, textarea:focus {
  border-color: var(--ishoot-1);
  box-shadow: 0 0 0 3px rgba(36, 29, 21, .15);
}

/* Login: cartão premium com brilho de marca no topo */
#tela-login { background: var(--creme); }
#tela-login .cartao {
  border-radius: 16px;
  border-top: 4px solid transparent;
  border-image: linear-gradient(100deg, var(--ishoot-1), var(--ishoot-2)) 1;
  box-shadow: 0 20px 40px rgba(36, 29, 21, .12);
}

/* Navegação lateral: item ativo vira pílula em gradiente de marca */
.lateral-nav a { border-radius: 10px; }
.lateral-nav a.ativa {
  background: linear-gradient(100deg, var(--ishoot-1), var(--ishoot-2));
  color: #fff;
}
.nav-grupo-titulo { color: var(--texto-suave); }

/* Ícones SVG da navegação (no lugar dos emojis) */
.ic svg { display: block; margin: 0 auto; }
.lateral-nav a .ic svg { width: 19px; height: 19px; }
.barra-inferior .ic svg { width: 23px; height: 23px; }

/* Barra inferior: rótulos CAPS curtinhos e indicador na borda de cima */
.barra-inferior a, .barra-inferior button {
  text-transform: uppercase;
  font-size: 10px !important;
  letter-spacing: .03em;
  border-top: 2px solid transparent;
}
.barra-inferior a.ativa, .barra-inferior button.ativa {
  border-top-color: var(--ishoot-1);
}

/* Véus (modal, gaveta) com tinta índigo em vez do marrom do painel */
.modal-fundo, .lateral-fundo { background: rgba(36, 29, 21, .45); }

/* ── Módulos do CRM na lateral ── */
.nav-crm-modulo { position: relative; }
.nav-lock { margin-left: auto; font-size: 11px; line-height: 1; opacity: .58; filter: grayscale(1); }
#portal.crm-liberado .nav-lock { display: none; }
#portal.crm-bloqueado .nav-crm-modulo:not(.ativa) { color: #8a7b68; }
#portal.crm-bloqueado .nav-crm-modulo:not(.ativa) .ic { opacity: .72; }
.lateral-nav a.ativa .nav-lock { opacity: .9; filter: grayscale(1) brightness(4); }
.crm-chamada {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  border-color: rgba(36, 29, 21, .24);
  background: linear-gradient(115deg, #fff, #f1ece3);
  transition: transform .15s, box-shadow .15s;
}
.crm-chamada:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(36, 29, 21, .1); }
.crm-chamada-icone { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #efe9df; font-size: 20px; flex: 0 0 auto; }
.crm-chamada strong, .crm-chamada small { display: block; }
.crm-chamada small { margin-top: 4px; color: var(--texto-suave); line-height: 1.4; }
.crm-chamada-seta { margin-left: auto; color: var(--ishoot-1); font-size: 28px; }
.crm-cabecalho { align-items: center; }
.crm-cabecalho h2 { margin: 2px 0 0; }
.crm-sobretitulo { color: var(--ishoot-1); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.crm-status { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--borda); border-radius: 999px; background: #fff; color: var(--texto-suave); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.crm-hero { display: flex; align-items: center; gap: 22px; overflow: hidden; position: relative; padding: 26px; border-color: rgba(36, 29, 21, .22); background: radial-gradient(circle at 94% 10%, rgba(36, 29, 21, .2), transparent 34%), linear-gradient(125deg, #fff 35%, #f1ece3); }
.crm-hero-cadeado { display: grid; place-items: center; width: 76px; height: 76px; flex: 0 0 auto; border-radius: 22px; background: linear-gradient(145deg, var(--ishoot-1), var(--ishoot-2)); box-shadow: 0 12px 30px rgba(36, 29, 21, .25); font-size: 34px; }
.crm-hero h3 { margin: 4px 0 8px; font-size: clamp(21px, 3vw, 30px); }
.crm-hero p { max-width: 720px; margin: 0 0 14px; color: var(--texto-suave); line-height: 1.6; }
.crm-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.crm-modulo { display: flex; align-items: center; gap: 12px; min-height: 86px; margin: 0; padding: 15px; position: relative; }
.crm-modulo.bloqueado { background: #f7f4ef; }
.crm-modulo-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ishoot-1); background: #efe9df; flex: 0 0 auto; }
.crm-modulo-icone svg { width: 23px; height: 23px; }
.crm-modulo-texto strong, .crm-modulo-texto small { display: block; }
.crm-modulo-texto small { margin-top: 4px; color: var(--texto-suave); line-height: 1.35; }
.crm-modulo-lock { margin-left: auto; filter: grayscale(1); opacity: .55; font-size: 14px; }
.crm-aviso { display: flex; gap: 8px 18px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 14px; text-align: center; }
.crm-aviso span { color: var(--texto-suave); }

/* ── CRM funcional ── */
.crm-status-liberado { color: #166534; border-color: #bfdecb; background: #eaf4ee; }
.crm-boas-vindas, .crm-titulo-linha, .linha-entre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.crm-boas-vindas { background: linear-gradient(120deg,#fff,#f1ece3); border-color: rgba(36, 29, 21, .2); }
.crm-boas-vindas h3, .crm-titulo-linha h3 { margin: 3px 0; }
.crm-titulo-linha { margin: 4px 0 14px; }
.crm-titulo-linha p { margin: 4px 0 0; }
.grade-2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.acoes { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.crm-pacote.inativo { opacity: .64; }
.crm-pacote h3 { margin: 0; }
.crm-preco { display: block; color: var(--ishoot-1); font-family: 'Plus Jakarta Sans',sans-serif; font-size: 23px; margin: 12px 0 4px; }
.crm-mes-nav { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.crm-mes-nav::first-letter { text-transform: uppercase; }
.crm-agenda-topo { align-items: center; }
#crm-calendario .cal-dia, #pt-calendario-rede .cal-dia { min-height: 104px; }
#crm-calendario .cal-dia.hoje, #pt-calendario-rede .cal-dia.hoje { border-color: var(--ishoot-1); box-shadow: inset 0 0 0 1px var(--ishoot-1); }
#crm-calendario .cal-dia.hoje .num, #pt-calendario-rede .cal-dia.hoje .num { color: var(--ishoot-1); }
#crm-calendario .cal-chip, #pt-calendario-rede .cal-chip { font-weight: 600; }
.cal-chip.rede-bloqueio { background: #fbeeea; color: var(--vermelho); }
.impersonacao-aviso {
  position: sticky;
  top: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 22px;
  border-bottom: 1px solid #e8d9a8;
  background: #fbf3df;
  color: #9a7412;
  box-shadow: 0 3px 12px rgba(81, 65, 11, .09);
}
.impersonacao-aviso[hidden] { display: none; }
.impersonacao-aviso strong, .impersonacao-aviso span { display: block; }
.impersonacao-aviso span { margin-top: 2px; font-size: 12px; line-height: 1.4; }
.impersonacao-aviso .btn { flex: 0 0 auto; background: #9a7412; border-color: #9a7412; }
.crm-item-editor { display: grid; grid-template-columns: 1.1fr 2fr 76px 110px 38px; gap: 7px; align-items: end; margin: 7px 0; }
.crm-item-editor input, .crm-item-editor select { margin: 0; min-width: 0; }

@media (max-width: 700px) {
  .impersonacao-aviso { align-items: flex-start; padding: 9px 12px; }
  .impersonacao-aviso .btn { padding: 7px 9px; font-size: 11px; }
  .grade-2 { grid-template-columns: 1fr; gap: 4px; }
  .crm-boas-vindas, .crm-titulo-linha { align-items: flex-start; flex-direction: column; }
  .crm-boas-vindas .btn, .crm-titulo-linha > .btn { width: 100%; }
  .crm-agenda-topo { align-items: stretch; }
  .crm-agenda-topo .agenda-nav, .crm-agenda-topo > .btn { width: 100%; }
  #crm-calendario .cal-dia, #pt-calendario-rede .cal-dia { min-height: 58px; }
  .crm-item-editor { grid-template-columns: 1fr 70px 100px 38px; }
  .crm-item-editor [data-pacote] { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .crm-hero { align-items: flex-start; padding: 20px; }
  .crm-hero-cadeado { width: 52px; height: 52px; border-radius: 15px; font-size: 24px; }
  .crm-grade { grid-template-columns: 1fr; }
  .crm-modulo { min-height: 76px; }
  .crm-status { font-size: 9px; }
}
/* Contrato da rede e entrega RAW no portal */
.contrato-rede-texto {
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 58vh; overflow: auto;
  background: #f7f4ef; border: 1px solid var(--borda, #e6dfd3); border-radius: 10px;
  padding: 16px; font: 14px/1.6 Inter, system-ui, sans-serif;
}
.aceite-contrato {
  display: flex; align-items: flex-start; gap: 14px; padding: 17px 18px;
  border: 2px solid #d5c9b7; border-radius: 14px;
  background: linear-gradient(120deg, #f7f4ef, #f1ece3);
  box-shadow: 0 6px 20px rgba(36, 29, 21, .09); cursor: pointer;
}
.aceite-contrato.marcado { border-color: var(--ishoot-1); background: #efe9df; }
.aceite-contrato input[type="checkbox"] {
  appearance: auto; width: 28px; height: 28px; min-width: 28px; margin: 1px 0 0;
  accent-color: var(--ishoot-1); cursor: pointer;
}
.aceite-contrato label, label.aceite-contrato { margin: 0; cursor: pointer; font-weight: 400; }
.aceite-contrato label span, .aceite-contrato > span { display: block; color: var(--texto); line-height: 1.5; }
.aceite-contrato strong { display: block; margin-bottom: 4px; color: var(--ishoot-1); font-size: 15px; }
.aceite-termo { align-items: center; }
.aceite-termo > span { flex: 1; }
.assinatura-canvas {
  display: block; width: 100%; height: 170px; box-sizing: border-box;
  background: #fff; border: 1px solid var(--borda, #d5c9b7); border-radius: 10px;
  touch-action: none; margin: 6px 0 10px;
}
.entrega-raw { border-top: 1px solid var(--borda, #e6dfd3); padding-top: 14px; }
/* ── Central de notificações: compartilhada por Iza e parceiros ── */
.notificacoes-botao {
  position: relative; width: 42px; height: 42px; flex: 0 0 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--borda, #e6dfd3); border-radius: 12px;
  background: #fff; color: var(--ishoot-1, #241d15); cursor: pointer;
}
.notificacoes-botao svg { width: 21px; height: 21px; }
.notificacoes-botao.tem-nao-lidas { background: #f1ece3; border-color: #d5c9b7; }
.notificacoes-badge {
  position: absolute; top: -5px; right: -6px; min-width: 19px; height: 19px;
  padding: 0 5px; border: 2px solid #fff; border-radius: 10px;
  background: #b3432b; color: #fff; font: 700 10px/15px Inter, sans-serif;
}
.notificacoes-lateral { position: relative; width: 36px; height: 34px; padding: 7px !important; display: flex !important; align-items: center; justify-content: center; }
.notificacoes-lateral-icone { position: relative; display: inline-flex; }
.notificacoes-lateral-icone > svg { width: 17px; height: 17px; }
.notificacoes-lateral .notificacoes-badge { top: -8px; right: -10px; border-color: #241d15; }
.parceiro-topo-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.parceiro-notificacoes-slot { display: inline-flex; }
.parceiro-topo-btn {
  min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 12px; border: 1px solid var(--borda, #e6dfd3); border-radius: 12px;
  background: #fff; color: #463c31; font: 700 12px Inter, sans-serif; cursor: pointer;
}
.parceiro-topo-btn:hover { border-color: #d5c9b7; background: #f1ece3; color: #241d15; }
.parceiro-topo-btn svg { width: 19px; height: 19px; }
.parceiro-topo-sair:hover { border-color: #eed0c7; background: #fbeeea; color: #b3432b; }
.notificacoes-fundo { position: fixed; inset: 0; z-index: 9200; background: rgba(36, 29, 21, .28); }
.notificacoes-painel {
  position: fixed; z-index: 9201; top: 70px; right: 18px;
  width: min(410px, calc(100vw - 30px)); max-height: min(680px, calc(100vh - 90px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid #e6dfd3; border-radius: 18px;
  box-shadow: 0 22px 65px rgba(36, 29, 21, .24);
}
.notificacoes-painel[hidden], .notificacoes-fundo[hidden] { display: none !important; }
.notificacoes-topo { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 18px 12px; }
.notificacoes-topo strong { display: block; font: 800 18px/1.2 'Plus Jakarta Sans', sans-serif; color: #241d15; }
.notificacoes-topo small { display: block; margin-top: 4px; color: #8a7b68; font-size: 12px; }
.notificacoes-topo button { border: 0; background: transparent; color: #8a7b68; font-size: 28px; line-height: 24px; cursor: pointer; }
.notificacoes-marcar { align-self: flex-end; margin: 0 18px 8px; padding: 3px 0; border: 0; background: transparent; color: #241d15; font-weight: 700; cursor: pointer; }
.notificacoes-admin-acoes { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 18px 9px; }
.notificacoes-compor, .notificacoes-controle-botao { padding: 8px 11px; border: 0; border-radius: 9px; background: #efe9df; color: #241d15; font: 700 12px Inter, sans-serif; cursor: pointer; }
.notificacoes-controle-botao { background: #efe9df; color: #463c31; }
.notificacoes-compositor { margin: 0 12px 12px; padding: 13px; border: 1px solid #e6dfd3; border-radius: 13px; background: #f7f4ef; }
.notificacoes-compositor[hidden] { display: none !important; }
.notificacoes-compositor > strong { display: block; margin-bottom: 9px; color: #241d15; }
.notificacoes-compositor label { display: block; margin: 8px 0 4px; color: #8a7b68; font-size: 11px; font-weight: 700; }
.notificacoes-compositor input[type="text"], .notificacoes-compositor input:not([type]), .notificacoes-compositor textarea, .notificacoes-compositor select { width: 100%; margin: 0; padding: 9px 10px; border: 1px solid #e6dfd3; border-radius: 9px; background: #fff; font: 12px/1.4 Inter, sans-serif; box-sizing: border-box; }
.notificacoes-destinatarios { max-height: 145px; overflow-y: auto; padding: 5px; border: 1px solid #e6dfd3; border-radius: 9px; background: #fff; }
.notificacoes-destinatario { display: flex !important; align-items: center; gap: 8px; margin: 0 !important; padding: 7px 6px; border-radius: 7px; cursor: pointer; }
.notificacoes-destinatario:hover { background: #f1ece3; }
.notificacoes-destinatario input { width: 17px; height: 17px; margin: 0; accent-color: #241d15; }
.notificacoes-destinatario span { min-width: 0; }
.notificacoes-destinatario strong, .notificacoes-destinatario small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notificacoes-destinatario small { margin-top: 2px; color: #9c8e7c; font-weight: 500; }
.notificacoes-compositor-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; margin-top: 11px; }
.notificacoes-compositor-acoes button { padding: 8px 11px; border: 0; border-radius: 8px; font-weight: 700; cursor: pointer; }
.notificacoes-compositor-acoes button[type="submit"] { background: #241d15; color: #fff; }
.notificacoes-compositor-acoes .notificacoes-simular { flex: 1 0 100%; margin-right: auto; background: #efe9df; color: #463c31; }
.notificacoes-controle { min-height: 0; overflow-y: auto; padding: 0 12px 14px; }
.notificacoes-controle[hidden], .notificacoes-lista[hidden] { display: none !important; }
.notificacoes-controle-filtro { position: sticky; z-index: 2; top: 0; display: flex; align-items: flex-end; gap: 8px; padding: 9px; border: 1px solid #e6dfd3; border-radius: 11px; background: #f7f4ef; }
.notificacoes-controle-filtro label { flex: 1; color: #8a7b68; font-size: 11px; font-weight: 800; }
.notificacoes-controle-filtro input { display: block; width: 100%; margin-top: 4px; padding: 7px 8px; border: 1px solid #e6dfd3; border-radius: 8px; background: #fff; box-sizing: border-box; }
.notificacoes-controle-filtro button, .notificacoes-enviar-job { padding: 8px 10px; border: 0; border-radius: 8px; background: #241d15; color: #fff; font-weight: 800; cursor: pointer; }
.notificacoes-controle-filtro button:disabled, .notificacoes-enviar-job:disabled { opacity: .55; cursor: wait; }
.notificacoes-controle-legenda { margin: 9px 3px 10px; color: #9c8e7c; font-size: 11px; line-height: 1.45; }
.notificacoes-controle-aviso { margin-bottom: 9px; padding: 9px; border-radius: 9px; background: #fbf3df; color: #9a7412; font-size: 11px; line-height: 1.4; }
.notificacoes-job { margin-bottom: 11px; padding: 12px; border: 1px solid #e6dfd3; border-radius: 13px; background: #fff; box-shadow: 0 5px 18px rgba(36, 29, 21, .06); }
.notificacoes-job > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.notificacoes-job > header div { min-width: 0; }
.notificacoes-job > header strong, .notificacoes-job > header small, .notificacoes-job-fotografo strong, .notificacoes-job-fotografo small { display: block; }
.notificacoes-job > header strong { color: #241d15; font-size: 13px; }
.notificacoes-job > header small { margin-top: 3px; color: #8a7b68; font-size: 10px; line-height: 1.35; }
.notificacoes-job > header > span { flex: 0 0 auto; color: #9c8e7c; font-size: 10px; }
.notificacoes-job-fotografo { margin: 10px 0 8px; padding-top: 8px; border-top: 1px solid #e6dfd3; }
.notificacoes-job-fotografo strong { color: #463c31; font-size: 12px; }
.notificacoes-job-fotografo small { margin-top: 2px; color: #9c8e7c; font-size: 10px; }
.notificacoes-status-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.notificacoes-status { display: inline-flex; padding: 5px 7px; border-radius: 999px; background: #f1ece3; color: #8a7b68; font-size: 9px; font-weight: 800; line-height: 1.2; }
.notificacoes-status.ok { background: #eaf4ee; color: #166534; }
.notificacoes-status.atencao { background: #fbf3df; color: #9a7412; }
.notificacoes-previa { margin: 10px 0; padding: 10px; border-radius: 10px; background: #f1ece3; }
.notificacoes-previa small, .notificacoes-previa strong, .notificacoes-previa em { display: block; }
.notificacoes-previa small { margin-bottom: 4px; color: #9c8e7c; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.notificacoes-previa strong { color: #241d15; font-size: 11px; }
.notificacoes-previa p { margin: 4px 0; color: #8a7b68; font-size: 10px; line-height: 1.45; }
.notificacoes-previa em { color: #9c8e7c; font-size: 9px; font-style: normal; }
.notificacoes-enviar-job { width: 100%; }
.notificacoes-lista { overflow-y: auto; padding: 0 10px 12px; overscroll-behavior: contain; }
.notificacoes-grupo { padding: 10px 8px 6px; color: #9c8e7c; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.notificacao-item { position: relative; width: 100%; display: grid; grid-template-columns: 42px 1fr 8px; gap: 10px; padding: 12px 10px; border: 0; border-radius: 13px; background: transparent; color: #463c31; text-align: left; cursor: pointer; }
.notificacao-item:hover { background: #f1ece3; }
.notificacao-item.nao-lida { background: #f1ece3; }
.notificacao-icone { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #fff; font-size: 21px; box-shadow: inset 0 0 0 1px #e6dfd3; }
.notificacao-texto { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.notificacao-texto strong { color: #241d15; font-size: 13px; line-height: 1.35; }
.notificacao-texto > span { color: #8a7b68; font-size: 12px; line-height: 1.45; }
.notificacao-texto small { color: #9c8e7c; font-size: 10px; }
.notificacao-item i { align-self: center; width: 7px; height: 7px; border-radius: 50%; background: #241d15; }
.notificacoes-vazio { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #9c8e7c; font-size: 13px; text-align: center; }
.notificacoes-vazio span { font-size: 28px; }
@media (max-width: 700px) {
  .notificacoes-painel { top: 58px; right: 8px; width: calc(100vw - 16px); max-height: calc(100vh - 76px); border-radius: 16px; }
  .topo-mobile .notificacoes-botao { width: 38px; height: 38px; flex-basis: 38px; border: 0; background: transparent; }
}

/* ═══════════════════════════════════════════
   BOTÕES — um padrão só para o painel e o portal

   Antes cada botão tinha a altura do próprio texto: `inline-block` com
   padding vertical faz um botão de uma linha e um de duas linhas saírem com
   alturas diferentes, e lado a lado eles ficam desencontrados. Aqui todos
   viram caixas de altura fixa com o conteúdo centralizado por flex — é o que
   resolve, de uma vez, "desalinhado", "tamanhos diferentes" e "texto torto
   dentro do botão".

   A cor diz o que o botão FAZ, e só isso:
     .btn            preto   → ação comum (gerar, abrir, + novo, ver PDF)
     .btn-verde      verde   → CONFIRMAR de verdade: aceitar, assinar,
                               validar, registrar pagamento
     .btn-secundario branco  → cancelar, fechar, voltar, ver, editar
     .btn-perigo     vermelho→ excluir, cancelar contrato/job, remover
     .btn-whatsapp   contorno verde → mandar mensagem

   Verde é o recurso mais escasso daqui. Quando TODO botão é verde, verde
   deixa de significar "confirmar" e a linha de ações vira uma parede — foi
   o que aconteceu na primeira versão desta pele.
   ═══════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 16px;
  /* Borda transparente em TODAS as variantes: quem tem borda visível
     (.btn-secundario) precisa ocupar exatamente a mesma caixa, senão volta a
     desalinhar por 2px em relação ao vizinho. */
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background: var(--acao);
  color: #fff;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}

/* Rótulos longos ("Revisar contrato e convidar") não podem cortar nem
   estourar o cartão: quebram em duas linhas e o botão cresce junto. */
.btn.btn-quebra, .modal-acoes .btn, [data-acoes] .btn { white-space: normal; }

.btn:hover { background: var(--acao-escura); filter: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(138, 90, 52, .30); }

/* Fundo CINZA, não branco. Botão branco sobre cartão branco vira um contorno
   fininho boiando: parece campo desabilitado, não botão em que se clica. */
.btn-secundario {
  background: var(--superficie-2);
  color: var(--tinta-2);
  border-color: var(--linha-forte);
}
.btn-secundario:hover { background: #e8e1d6; border-color: var(--tinta-3); color: var(--tinta); }
.btn-secundario:active { background: #ded5c7; }

.btn-perigo { background: var(--vermelho); color: #fff; }
.btn-perigo:hover { background: var(--vermelho-escuro); }

/* Confirmação: é aqui que o verde vive. */
.btn-verde { background: var(--verde); color: #fff; }
.btn-verde:hover { background: var(--verde-escuro); }

/* WhatsApp em CONTORNO, não preenchido: numa linha com 4 ou 5 ações ele era
   mais um bloco de cor sólida disputando atenção. O 💬 já identifica. */
.btn-whatsapp { background: var(--verde-fundo); color: var(--verde-escuro); border-color: var(--verde-borda); }
.btn-whatsapp:hover { background: #dcede3; border-color: var(--verde); }

/* Apelido de .btn, mantido porque algumas telas já usam o nome. */
.btn-tinta { background: var(--acao); color: #fff; }
.btn-tinta:hover { background: var(--acao-escura); }

/* ── Tamanhos: três, e só três ── */
.btn-pequeno { min-height: 32px; padding: 5px 11px; font-size: 12.5px; border-radius: 8px; gap: 5px; }
.btn-grande  { min-height: 48px; padding: 12px 26px; font-size: 15px; border-radius: 12px; }

/* ── Estados ── */
.btn:disabled, .btn[disabled], .btn.desabilitado {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn:disabled:hover { background: var(--acao); }
.btn-verde:disabled:hover { background: var(--verde); }
.btn-secundario:disabled:hover { background: var(--superficie-2); }
.btn-whatsapp:disabled:hover { background: var(--verde-fundo); }
.btn-perigo:disabled:hover { background: var(--vermelho); }

/* Carregando: o botão fica ocupado, mostra o giro e trava o clique.
   Ligado por UI.ocupar() (js/api.js). O texto continua sendo trocado pela
   tela — o giro é o sinal de que ALGO está acontecendo agora. */
.btn[aria-busy="true"] {
  cursor: wait;
  opacity: .75;
}
.btn[aria-busy="true"]::before {
  content: '';
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-girando .6s linear infinite;
}
@keyframes btn-girando { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy="true"]::before { animation-duration: 2.4s; }
}

/* ── Grupos de botões: mesmo espaçamento em qualquer tela ── */
.modal-acoes,
.acoes,
.cabecalho-aba .linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.modal-acoes { justify-content: flex-end; margin-top: 22px; }

/* ── Botão nunca encosta no vizinho ──
   Só uma parte dos grupos tem container com `gap`; no resto do painel os
   botões são irmãos soltos, e aí a folga é só o espaço em branco do código —
   4px quando há quebra de linha no fonte e ZERO quando não há. Era isso que
   deixava vários botões grudados.

   A margem abaixo garante o mínimo em qualquer lugar. Nos containers que já
   usam `gap` ela é zerada, senão os dois espaçamentos somariam. */
.btn { margin: 0 6px 6px 0; }

.modal-acoes > .btn,
.acoes > .btn,
.acoes-empilhadas > .btn,
.orc-acoes > .btn,
.agenda-nav > .btn,
.cabecalho-aba .linha > .btn,
.linha > .btn,
.opcoes-pagamento > .btn { margin: 0; }

/* ATENÇÃO: `[data-acoes]` é um <td>. Transformá-lo em flex container tira
   dele o comportamento de célula — a linha da tabela perde o alinhamento e a
   borda inferior para no meio. Por isso aqui é espaçamento por margem, não
   flex. (No celular, admin.css já converte a tabela em cartões e aí o flex
   é aplicado de propósito.) */
td[data-acoes] { text-align: right; white-space: normal; }
td[data-acoes] > .btn { margin: 0 0 6px 6px; }
td[data-acoes] > .btn:first-child { margin-left: 0; }
/* A última linha de botões da célula não precisa empurrar a borda inferior. */
td[data-acoes] > .btn:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  /* Dedo grande, tela pequena: a linha de ações vira uma pilha de botões
     largos em vez de cinco botõezinhos espremidos que quebram o cartão. */
  .modal-acoes { flex-direction: column-reverse; align-items: stretch; }
  .modal-acoes .btn, .modal-acoes a.btn { width: 100%; }
  #conteudo .tabela td[data-acoes] .btn { flex: 1 1 46%; min-width: 0; }
  .btn { min-height: 44px; }
  .btn-pequeno { min-height: 36px; }
}

/* ── Cartões e tabelas: mesma borda, mesmo raio, mesmo respiro ── */
.cartao { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
.tabela th { border-bottom: 1px solid var(--linha); color: var(--texto-suave); }
.tabela td { border-bottom: 1px solid var(--linha); }
.tabela tr:hover td { background: var(--realce); }

/* ── Badges: etiqueta, NÃO botão ──
   Badge com borda, cantos de pílula e CAIXA ALTA fica com o mesmo peso visual
   de um botão — e numa lista onde os dois convivem (a equipe do job), a tela
   vira um amontoado de retângulos coloridos em que não se sabe o que clicar.
   Etiqueta é fundo suave, sem borda, texto pequeno e em caixa normal.

   Nada de CAIXA ALTA: os rótulos aqui são frases inteiras ("Aguardando
   ciência dos dados"), e frase em maiúscula é mais difícil de ler e ocupa
   muito mais espaço — era o que fazia a badge quebrar em duas linhas. */
.badge {
  border: 0;
  padding: 2px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: baseline;
}
.badge::first-letter { text-transform: uppercase; }
.badge-cinza    { background: var(--superficie-2);   color: var(--texto-suave); }
.badge-azul     { background: var(--superficie-2);   color: var(--tinta-2); }
.badge-verde    { background: var(--verde-fundo);    color: var(--verde-escuro); }
.badge-vermelho { background: var(--vermelho-fundo); color: var(--vermelho); }
.badge-dourado  { background: var(--ambar-fundo);    color: var(--ambar); }

/* ── Caixa de aviso/explicação ──
   O itálico em bloco inteiro cansa a leitura, e `pre-wrap` fazia a INDENTAÇÃO
   DO CÓDIGO virar espaço na tela (o texto aparecia deslocado para a direita,
   sem motivo). `pre-line` mantém as quebras de linha que vêm dos DADOS e
   descarta os espaços do fonte. */
.ficha-sobre {
  font-style: normal;
  white-space: pre-line;
  border-left: 3px solid var(--linha-forte);
  background: var(--superficie-2);
  color: var(--tinta-2);
  border-radius: 0 8px 8px 0;
}
.ficha-sobre strong { color: var(--tinta); }

/* ── Ações empilhadas numa célula: todas com a MESMA largura ──
   Botões um sob o outro com larguras diferentes deixam a borda direita
   serrilhada. Quem usa isso marca a lista com .acoes-empilhadas. */
.acoes-empilhadas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  /* A célula de ações é larga; sem teto, o botão esticava por quase meia
     tela e ficava com cara de banner, não de botão. */
  min-width: 190px;
  max-width: 250px;
  margin-left: auto;
}
.acoes-empilhadas > .btn { width: 100%; margin: 0; }


/* ── Formulários: foco neutro (o anel roxo saiu junto com o tema) ── */
input:focus, select:focus, textarea:focus {
  border-color: var(--acao);
  box-shadow: 0 0 0 3px rgba(138, 90, 52, .16);
}
label { color: var(--texto-suave); }

/* ── Links: sem roxo, mas ainda reconhecíveis como link ── */
#conteudo a:not(.btn):not(.cartao-numero):not(.notificacao-item) {
  color: var(--acao);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#conteudo a:not(.btn):hover { color: var(--acao-escura); }

/* Cartão-número é um cartão clicável, não um link de texto: sublinhado nele
   fica com cara de erro. Várias telas resolviam isso com style inline em cada
   <a> — e quem esquecia (o CRM do fotógrafo esquecia) ficava com o número
   sublinhado. A regra mora aqui, uma vez só. */
#conteudo a.cartao-numero,
#conteudo a.cartao-numero:hover,
a.cartao-numero { text-decoration: none; }
#conteudo a.cartao-numero .num,
#conteudo a.cartao-numero .rotulo { text-decoration: none; }

/* ── Meta: a conta por trás do número ──
   O percentual sozinho esconde de onde ele veio. Estas duas linhas dizem
   quanto entrou, quanto já saiu para a equipe e quanto ainda vai sair. */
.meta-conta, .meta-aviso {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--texto-suave);
}
.meta-aviso {
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--ambar-fundo);
  color: var(--ambar);
}
.meta-aviso strong { color: var(--ambar); }

/* ── Ficha do fotógrafo na equipe do job ──
   Antes: nome, valor e quatro etiquetas coloridas coladas com <br>. Cada
   etiqueta tinha o peso visual de um botão, então a coluna virava um
   amontoado de retângulos e não dava para bater o olho e ver o que faltava.

   Agora: nome em destaque, UMA linha de resumo e uma lista de status com
   ponto colorido — a cor fica no ponto, o texto fica legível. */
.membro-nome {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--tinta);
  line-height: 1.3;
}
.membro-resumo {
  margin-top: 2px;
  font-size: 13px;
  color: var(--texto-suave);
}
.membro-resumo strong { color: var(--tinta); }

.lista-status {
  list-style: none;
  margin: 9px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lista-status li {
  position: relative;
  padding-left: 17px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--texto-suave);
}
.lista-status li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .42em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--linha-forte);
}
.lista-status .st-ok        { color: var(--tinta-2); }
.lista-status .st-ok::before       { background: var(--verde); }
.lista-status .st-pendente::before { background: var(--ambar); }
.lista-status .st-neutro::before   { background: var(--linha-forte); }
.lista-status .st-problema         { color: var(--vermelho); }
.lista-status .st-problema::before { background: var(--vermelho); }

/* Botão que vive dentro de um status ("Gerar termo") é um complemento da
   linha, não um bloco à parte. */
.lista-status .btn { margin: 4px 0 0; }
.lista-status details { margin-top: 4px; }
.lista-status summary { cursor: pointer; }

/* ── Cartão de job: faixa do dia à esquerda ──
   O cartão agora é uma grade DIA | CONTEÚDO. A coluna de dias fica alinhada
   entre todos os cartões, então dá para correr o olho pela lateral e ver a
   distribuição do mês sem ler nenhum título. */
.job-card {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
  align-items: stretch;
}
.job-card:hover { border-color: var(--tinta-3); }

.job-dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 14px 6px;
  background: var(--superficie-2);
  border-right: 1px solid var(--linha);
}
.job-dia-num {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  color: var(--tinta);
}
.job-dia-sem {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
}
/* O dia de hoje se destaca sem virar mais uma cor na paleta. */
.job-dia-hoje { background: var(--acao); border-right-color: var(--acao); }
.job-dia-hoje .job-dia-num, .job-dia-hoje .job-dia-sem { color: #fff; }
.job-dia-vazio .job-dia-num { color: var(--texto-suave); font-size: 19px; }

.job-card-corpo {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 16px;
  min-width: 0;
}
.job-card-titulo { color: var(--tinta); overflow-wrap: anywhere; }
.job-valores { border-top: 1px solid var(--linha); gap: 6px; }
.job-valores .val { font-size: 14px; }
.job-valores .rot { font-size: 10px; letter-spacing: .03em; }
/* O cartão precisa de mais largura mínima agora que perdeu 62px para o dia. */
.jobs-lista { grid-template-columns: repeat(auto-fill, minmax(336px, 1fr)); }
.job-card-rodape { border-top: 1px solid var(--linha); padding-top: 9px; }
.job-equipe-ok    { color: var(--verde); font-weight: 700; }
.job-equipe-falta { color: var(--ambar); font-weight: 700; }

/* Navegação de mês: mesmo componente em Jobs, Financeiro, Agenda, Início e
   CRM do fotógrafo.

   `text-transform: capitalize` (admin.css) maiúsculiza TODA palavra, e em
   português o mês vem "agosto de 2026" → virava "Agosto De 2026" nas cinco
   telas. Só a primeira letra deve subir. */
.agenda-mes {
  min-width: 168px;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  color: var(--tinta);
  text-transform: none;
}
.agenda-mes::first-letter { text-transform: uppercase; }

@media (max-width: 620px) {
  .job-card { grid-template-columns: 52px 1fr; }
  .job-dia-num { font-size: 20px; }
  .job-card-corpo { padding: 12px 13px; }
  .agenda-mes { min-width: 0; flex: 1; }
}

/* Mês por extenso ("agosto de 2026"): só a primeira letra sobe. O
   `text-transform: capitalize` que fazia "Agosto De 2026" foi removido da
   origem, em admin.css — aqui fica só o que o tema acrescenta. */
.agenda-mes { text-transform: none; }
.agenda-mes::first-letter { text-transform: uppercase; }