/* ImportaNota base.css — tema compartilhado para páginas novas.
   Contém tokens (paleta, fontes), reset, tipografia utilitária e
   componentes de UI reutilizáveis (sidebar, header, botões, modais,
   inputs, tabs, callouts). Tema único do projeto. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

html { scrollbar-gutter: stable }

:root {
  /* ──────────────────────────────────────────────────────────────────────
   * Design system ImportaNota — tokens de cor baseados na marca (logo):
   *   verde  #2BB673  → primária (ações, sucesso, accent, foco)
   *   navy   #14365C  → chrome (sidebar, superfícies escuras, texto)
   *   âmbar  #F5A623  → secundária (avisos, destaques)
   * Nomes de escala (navy e emerald) mantidos por compatibilidade.
   * ────────────────────────────────────────────────────────────────────── */

  /* Azul-marinho da marca (#14365C) — chrome: sidebar, superfícies escuras,
   * texto primário, bordas de estrutura. (Escala renomeada de "navy".) */
  --navy-900:#0e2742;--navy:#14365c;
  --navy-800:#14365c;
  --navy-700:#1c4470;
  --navy-600:#2a5685;
  --navy-500:#4a6e96;
  --navy-400:#7b95b4;
  --navy-300:#aabdd3;
  --navy-200:#d4deea;
  --navy-100:#e8eef5;
  --navy-50:#f4f7fb;

  /* Verde da marca (#2BB673) — cor primária: ações, sucesso, accent, foco.
   * (Escala renomeada de "emerald".) Use --emerald-600 em botão/fundo (texto
   * branco passa AA) e --emerald-700 em link/texto sobre fundo claro. */
  --emerald-900:#0e4d33;
  --emerald-800:#136340;
  --emerald-700:#197f4f;
  --emerald-600:#1e9e63;
  --emerald-500:#2bb673; /* brand — verde ImportaNota */
  --emerald-400:#5cc991;
  --emerald-300:#88d8b0;
  --emerald-200:#b6e8cf;
  --emerald-100:#d2f4e2;
  --emerald-50:#ecfbf3;

  /* Aliases antigos. */
  --em-600:var(--emerald-600);--em-500:#5cc991;--em-50:var(--emerald-50);

  /* Neutrals (paleta do protótipo: --neutral-*). Mantém também os
   * apelidos --n-* usados em CSS antigo deste repo. */
  --neutral-0:#ffffff;
  --neutral-50:#fafafa;
  --neutral-100:#f5f5f5;
  --neutral-200:#e5e7eb;
  --neutral-300:#d1d5db;
  --neutral-400:#9ca3af;
  --neutral-500:#6b7280;
  --neutral-600:#4b5563;
  --neutral-700:#374151;
  --neutral-800:#1f2937;
  --neutral-900:#111827;
  --n-900:var(--neutral-900);--n-800:var(--neutral-800);--n-700:var(--neutral-700);
  --n-600:var(--neutral-600);--n-500:var(--neutral-500);--n-400:var(--neutral-400);
  --n-300:var(--neutral-300);--n-200:var(--neutral-200);--n-100:var(--neutral-100);--n-50:var(--neutral-50);

  /* Surfaces / text / border tokens semânticos. */
  --background:#ffffff;
  --foreground:#0e2742;
  --surface:#ffffff;
  --surface-muted:#eef2f7;
  --surface-subtle:#fafafa;
  --surface-dark:#0e2742;
  --surface-brand:#1e9e63;   /* verde da marca (cor primária) */
  --surface-accent:#f5a623;  /* âmbar da marca (secundária/destaque) */
  --text-primary:#0e2742;
  --text-secondary:#4b5563;
  --text-muted:#5a7596;
  --border:#dbe4ee;
  --border-strong:#c2d0e1;
  --divider:#dbe4ee;
  --ring:#1e9e63;            /* foco em verde */

  /* Âmbar da marca (#F5A623) — alimenta avisos e destaques. */
  --amber-600:#db9112;--amber-500:#f5a623;--amber-100:#fdecc8;
  --warn-bg:#fef6e7;--warn-bd:#fbd38d;--warn-tx:#92400e;--warn-ic:#f5a623;
  --err-bg:#fef2f2;--err-bd:#fca5a5;--err-tx:#7f1d1d;--err-ic:#ef4444;
  /* alias legado (era roxo da marca antiga) → agora aponta p/ o chrome navy */
  --brand-purple:#1c4470;
  --sidebar-w:220px;

  /* Classificação de risco (Crítico / Alto / Moderado / Baixo) —
   * chart "Riscos mapeados" da ClosedView e qualquer visual que
   * agrupe perigos por nível do produto P×S.
   * Paleta de faixas da metodologia (tom MID), igual ao gráfico de
   * severidade do Painel (.ep-sevbar) e às bordas dos badges de faixa.
   * --risco-alerta: amarelo distinto p/ alertas de risco-prioritário
   * (M04 §4.5.3) — fora das 4 severidades e da contagem total.
   * ver docs/calculos-e-indices.md §6.3 */
  --risco-critico:#E59191;   --risco-critico-hover:#dc8080;
  --risco-alto:#EFBCA0;      --risco-alto-hover:#e6a988;
  --risco-moderado:#FADFA6;  --risco-moderado-hover:#f5d289;
  --risco-baixo:#D3EAB0;     --risco-baixo-hover:#c2de96;
  --risco-alerta:#FCD34D;    --risco-alerta-hover:#f5c52a;
}

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

/* User-agent stylesheet aplica fonte de sistema (Helvetica/Arial) em
 * <button>, <input>, <textarea> e <select>. Sem este reset, qualquer
 * controle customizado (que não passe por uma classe que defina
 * font-family explicitamente, tipo .btn) sai com fonte errada. */
button, input, textarea, select { font-family: inherit }

body { font-family: 'Montserrat', sans-serif; cursor: default }

/* TIPOGRAFIA UTILITÁRIA */
.font-light { font-weight: 100; letter-spacing: -.7px }
.font-normal { font-weight: 400; letter-spacing: -.5px }
.font-bold { font-weight: 900; letter-spacing: -.7px }

.body{font-family:'Montserrat',sans-serif;font-size:14px;line-height:1.5;color:var(--n-900);background:#f4f7fb;min-height:100vh;min-height:100svh;letter-spacing:-.1px;-webkit-font-smoothing:antialiased;display:flex;flex-direction:row}

/* SIDEBAR
   min-height:100svh em vez de top:0 + bottom:0 — assim a altura é fixa
   (= viewport com URL bar visível) e não tremula quando a chrome do iOS
   Safari aparece/some durante scroll. */
.sidebar{width:var(--sidebar-w);background:#fff;border-right:1px solid var(--border);position:fixed;top:0;left:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;z-index:40;overflow-y:auto;transition:width 200ms ease}
.sidebar-logo{padding:16px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:61px}
.sidebar-close{display:none;background:none;border:none;color:var(--n-400);cursor:pointer;padding:6px;border-radius:6px;align-items:center;justify-content:center;transition:background 150ms,color 150ms,transform 200ms}
.sidebar-close:hover{background:var(--n-100);color:var(--navy-900)}
.sidebar-backdrop{display:none;position:fixed;inset:0;min-height:100vh;min-height:100lvh;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:45}
.sidebar-backdrop.is-open{display:block}
.menu-btn{display:none;background:none;border:none;color:var(--navy-900);cursor:pointer;padding:6px;margin-right:4px;border-radius:6px;align-items:center;justify-content:center;transition:background 150ms}
.menu-btn:hover{background:var(--n-100)}
.sidebar-logo img{display:block;max-width:100%;height:28px;width:auto}
.sidebar-logo img.sidebar-symbol{display:none}
.sidebar-logo-text{font-weight:700;font-size:18px;color:var(--navy-900);letter-spacing:.3px;white-space:nowrap}
.sidebar-logo-symbol{display:none;font-weight:700;font-size:22px;color:var(--navy-900);line-height:1}
.sidebar-section{padding:20px 16px 6px;font-size:10px;font-weight:700;color:var(--n-400);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden}
/* SELETOR DE EMPRESA (sidebar, admin nível 50) — markup em incs/nav.inc.php.
   O dropdown reusa o componente .select (skin .select--sidebar). */
.sidebar-empresa{padding:12px 16px;border-bottom:1px solid var(--border)}
.sidebar-empresa-single{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 4px;color:var(--navy-900);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden}
.sidebar-empresa-single .sidebar-empresa-icon{flex-shrink:0;color:var(--n-400)}
.sidebar-empresa-single .sidebar-empresa-name{overflow:hidden;text-overflow:ellipsis}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 16px;min-height:40px;color:var(--navy-600);font-size:13px;font-weight:500;text-decoration:none;transition:background 150ms,color 150ms;cursor:pointer;border:none;background:none;width:100%;text-align:left;white-space:nowrap}
.nav-item svg{flex-shrink:0;opacity:.75}
.nav-item:hover{background:var(--n-100);color:var(--navy-900)}
.nav-item:hover svg{opacity:1}
.nav-item--active{background:var(--emerald-50);color:var(--emerald-700);font-weight:600}
.nav-item--active svg{opacity:1}
.sidebar-footer{margin-top:auto;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0));border-top:1px solid var(--border);position:relative}
.user{display:flex;align-items:center;gap:10px;cursor:pointer;border-radius:8px;padding:6px 8px;margin:-6px -8px;transition:background 150ms}
.user:hover{background:var(--n-100)}
.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--emerald-600);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.user-info{flex:1;min-width:0}
.user-name{font-size:12px;font-weight:600;color:var(--navy-900);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Email renderizado via pseudo-element (data-email) — iOS Safari/Chrome
   não auto-linkam conteúdo gerado por CSS, então o e-mail não vira mailto. */
.user-email{font-size:11px;color:var(--n-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-email::before{content:attr(data-email)}
.user-chevron{color:var(--n-400);flex-shrink:0}

/* SIDEBAR COLAPSADA (desktop) */
@media(min-width:769px){
  .sidebar-close{display:flex}
  body.sidebar-collapsed{--sidebar-w:80px}
  body.sidebar-collapsed .sidebar-logo img:not(.sidebar-symbol){display:none}
  body.sidebar-collapsed .sidebar-logo img.sidebar-symbol{display:block;height:56px;width:auto}
  body.sidebar-collapsed .sidebar-logo-text{display:none}
  body.sidebar-collapsed .sidebar-logo-symbol{display:block}
  body.sidebar-collapsed .sidebar-logo{justify-content:center;padding:12px 8px;min-height:auto;cursor:pointer}
  body.sidebar-collapsed .sidebar-close{display:none}
  body.sidebar-collapsed .sidebar-section{display:none}
  body.sidebar-collapsed .sidebar-empresa{display:none}
  /* overflow:visible no colapsado pra os tooltips dos itens saírem pro lado
     sem gerar rolagem horizontal (a .sidebar tem overflow-y:auto, que força
     overflow-x). Conteúdo do colapsado é curto, não precisa rolar. */
  body.sidebar-collapsed .sidebar{overflow:visible}
  body.sidebar-collapsed .nav-item{justify-content:center;padding:12px 0;gap:0;cursor:pointer;position:relative}
  /* Tooltip do item colapsado: reaproveita o rótulo (.nav-item-text) como
     pill escuro ao lado, aparecendo no hover (igual ao protótipo). */
  body.sidebar-collapsed .nav-item-text{
    display:block;position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
    background:var(--n-900);color:#fff;padding:6px 10px;border-radius:6px;
    font-size:12px;font-weight:500;line-height:1;white-space:nowrap;
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity 120ms ease;
    z-index:70;box-shadow:0 4px 14px rgba(0,0,0,.25)
  }
  body.sidebar-collapsed .nav-item:hover .nav-item-text{opacity:1;visibility:visible}
  body.sidebar-collapsed .sidebar-footer{padding:16px 10px}
  body.sidebar-collapsed .user-info,
  body.sidebar-collapsed .user-chevron{display:none}
  body.sidebar-collapsed .user{justify-content:center;gap:0}
}

/* POPUP DO USUÁRIO */
.user-popup{display:none;position:absolute;bottom:calc(100% + 8px);left:16px;right:16px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 32px rgba(14,39,66,.16);padding:6px 0;z-index:50}
.user-popup.is-open{display:block}
.user-popup-hd{padding:12px 16px 10px;border-bottom:1px solid var(--border)}
.user-popup-name{font-size:13px;font-weight:700;color:var(--navy-900);line-height:1.3}
.user-popup-email{font-size:11px;color:var(--n-500);margin-top:2px}
.user-popup-list{list-style:none;padding:6px 0;margin:0}
.user-popup-list--divider{border-top:1px solid var(--border)}
.user-popup-item{display:flex;align-items:center;gap:10px;padding:10px 16px;min-height:40px;color:var(--navy-700);font-size:13px;cursor:pointer;transition:background 150ms,color 150ms;text-decoration:none}
.user-popup-item:hover{background:var(--n-100);color:var(--navy-900)}
.user-popup-item svg{flex-shrink:0;opacity:.7}
.user-popup-item:hover svg{opacity:1}

/* Popup quando sidebar está colapsada — aparece ao lado, fora do fluxo.
   position:fixed (e não absolute) pra escapar do overflow-y:auto da
   .sidebar — senão o popup saindo pra direita força overflow-x e gera
   rolagem horizontal dentro da sidebar. Mesma abordagem do protótipo. */
@media(min-width:769px){
  body.sidebar-collapsed .user-popup{position:fixed;left:calc(var(--sidebar-w) + 8px);right:auto;bottom:16px;width:240px}
  /* Em demo, o banner fixo (.demo-banner, ~29px no rodapé, z-index alto)
     cobriria o pé do popup. Como .demo-banner é irmão da .sidebar e só
     existe em demo, sobe o popup pra clarar a barra. */
  body.sidebar-collapsed .demo-banner ~ .sidebar .user-popup{bottom:44px}
}

/* MAIN AREA */
.main-area{margin-left:var(--sidebar-w);width:calc(100% - var(--sidebar-w));flex:1;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;min-width:0}
.sheet-grab{width:36px;height:4px;border-radius:2px;background:var(--n-200);margin:4px auto 14px}
/* Safe-area (notch) — relevante no app instalado; insets valem 0 no browser. */
@supports (padding:max(0px)){
  .sidebar{padding-top:env(safe-area-inset-top,0)}
}
.wrap{max-width:992px;margin:0 auto;padding:0 24px;width:100%}
.main{flex:1;padding:28px 0 48px}

/* HEADER — full width, single row */
.header{background:#fff;border-bottom:1px solid var(--n-200);position:sticky;top:0;z-index:30}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;height:52px}
.header-left{display:flex;align-items:center;gap:8px;min-width:0}
.back-link{color:var(--n-500);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:6px}
.back-link svg{flex-shrink:0}
.back-link:hover{color:var(--n-700)}
.sep{color:var(--n-300);font-size:13px;flex-shrink:0}
.page-title{font-size:15px;font-weight:800;color:var(--navy-900);letter-spacing:-.4px;white-space:nowrap}
.page-title-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:4px 6px;margin:-4px -6px;border-radius:6px;cursor:pointer;font-family:inherit;color:inherit;min-width:0;transition:background 150ms}
.page-title-btn:hover{background:var(--n-100)}
.page-title-btn .page-title{overflow:hidden;text-overflow:ellipsis}
.page-title-pencil{color:var(--n-400);flex-shrink:0;transition:color 150ms}
.page-title-btn:hover .page-title-pencil{color:var(--navy-700)}
.page-title-input{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:800;color:var(--navy-900);letter-spacing:-.4px;border:1.5px solid var(--emerald-600);border-radius:6px;padding:3px 8px;outline:none;background:#fff;min-width:0;width:auto;max-width:100%;box-shadow:0 0 0 3px rgba(43,182,115,.2)}
.header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
/* Alvo de toque mínimo 40x40 para qualquer coisa clicável (acessibilidade). */
.btn--text{background:none;border:none;color:var(--n-700);font-size:13px;font-weight:600;letter-spacing:-.2px;cursor:pointer;padding:8px 12px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;white-space:nowrap;transition:color 150ms}
.btn--text:hover{color:var(--navy-900)}

/* BADGES */
.badge{display:inline-flex;align-items:center;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 9px;border-radius:10px;border:1px solid transparent;flex-shrink:0}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;letter-spacing:-.2px;line-height:1;padding:9px 18px;min-height:40px;border-radius:8px;border:1.5px solid transparent;cursor:pointer;transition:background 150ms,color 150ms,opacity 150ms;white-space:nowrap;text-decoration:none}
.btn--danger{background:var(--err-ic);color:#fff;border-color:var(--err-ic)}
.btn--danger:hover:not(:disabled){background:#dc2626;border-color:#dc2626}
.btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
.btn--primary{background:var(--emerald-600);color:#fff;border-color:var(--emerald-600)}
.btn--primary:hover:not(:disabled){background:var(--emerald-700);border-color:var(--emerald-700)}
.btn--outline{background:#fff;color:var(--n-700);border-color:var(--n-200)}
.btn--outline:hover:not(:disabled){background:var(--n-50);border-color:var(--n-300)}
.btn--ghost{background:transparent;color:var(--n-500);border-color:var(--n-200)}
.btn--ghost:hover:not(:disabled){background:var(--n-50);color:var(--n-700)}
.btn--sm{font-size:11px;padding:6px 12px}
.link{color:var(--emerald-700);text-decoration:underline;cursor:pointer}

/* SECTION HEADER */
.section-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.section-title{font-size:22px;font-weight:800;color:var(--navy-900);letter-spacing:-.6px}
.section-actions{display:flex;gap:8px;flex-shrink:0}

/* TABS */
.tabs{display:flex;border-bottom:2px solid var(--n-200);margin-bottom:20px}
.tab{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:500;color:var(--n-500);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;padding:10px 4px;margin-right:24px;cursor:pointer;letter-spacing:-.2px;transition:color 150ms}
.tab:hover{color:var(--navy-700)}
.tab--active{color:var(--navy-900);font-weight:600;border-bottom-color:var(--emerald-600)}
.tab-panel {display: none;}

/* CALLOUT */
.info-callout{background:#eef3f8;border-radius:10px;padding:16px 20px;margin-bottom:20px}
.info-callout ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.info-callout li{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--navy-900);line-height:1.5}
.info-callout li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--navy-700);flex-shrink:0;margin-top:6px}

/* INPUT */
.input{width:100%;padding:9px 12px;font-family:'Montserrat',sans-serif;font-size:13px;border:1.5px solid var(--n-200);border-radius:8px;background:#fff;color:var(--navy-900);outline:none;transition:border-color 150ms,box-shadow 150ms}
.input:focus{border-color:var(--emerald-600);box-shadow:0 0 0 3px rgba(43,182,115,.2)}

/* MODAL — componente em css/components/modal.css; cada template que usa
   .overlay/.modal carrega o componente via <link>. */

/* Classe que só aparece no mobile (pareia com .hide-mobile) */
.show-mobile{display:none}

/* RESPONSIVE */
@media(max-width:768px){
  /* No mobile a rolagem é da PÁGINA e a topbar/avatar vão edge-to-edge. O
     scrollbar-gutter:stable (desktop, evita salto ao aparecer a scrollbar da
     sidebar) reservaria ~15px à direita — some como faixa branca ao lado do
     avatar transbordante. No mobile não precisa: volta a auto. */
  /* Contém o transbordo horizontal no NÍVEL DA RAIZ (o avatar transbordante
     vaza ~13px além da viewport; o overflow-x:clip só no .body não segura e a
     página fica ARRASTÁVEL na PWA — topbar cortando à esquerda/direita). clip no
     html trava o pan e NÃO quebra o sticky da topbar nem o scroll vertical.
     Também é rede de segurança contra qualquer overflow horizontal no mobile. */
  html{scrollbar-gutter:auto;overflow-x:clip}
  /* Sidebar fora da tela por padrão no mobile; desliza pra dentro quando .is-open */
  .sidebar{transform:translateX(-100%);transition:transform 220ms ease;z-index:50}
  .sidebar.is-open{transform:translateX(0)}
  .sidebar-close{display:flex}
  .menu-btn{display:inline-flex}
  .main-area{margin-left:0;width:100%}

  /* Header compacto — sem breadcrumb, botão de ajuda só com ícone */
  .header-inner{padding:0 12px 0 16px;gap:8px}
  .back-link,.sep{display:none}
  .page-title{font-size:14px}
  .page-title-input{font-size:14px}
  .header-actions{gap:8px}
  /* Botão de ajuda no mobile vira quadrado 40x40 (só ícone). */
  #btn-ajuda{width:40px;padding:0}
  .btn--sm{padding:6px 8px}
  .hide-mobile{display:none!important}
  .show-mobile{display:inline-flex!important}

  /* Section header buttons compactos no mobile */
  .section-actions .btn{padding:7px 14px;font-size:12px}

  /* iOS Safari aplica auto-zoom ao focar campos com font-size < 16px.
     Forçamos 16px em mobile mantendo o user-scalable para acessibilidade. */
  input,select,textarea,.input,.page-title-input{font-size:16px!important}
}