/* FLUIR 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 {
  /* Navy (paleta do protótipo — db/tokens.css). */
  --navy-900:#1e1a27;--navy:#1e1a27;
  --navy-800:#3d2f5c;
  --navy-700:#4b3b70;
  --navy-600:#6b5b8a;
  --navy-500:#9b8fb8;
  --navy-400:#b4acca;
  --navy-300:#cec8dd;
  --navy-200:#e8e5f0;
  --navy-100:#f2f0f6;
  --navy-50:#faf8fc;

  /* Emerald (accent). Escala do protótipo, com a exceção de --emerald-500:
   * páginas legadas (cmp-progress-fill--ok, ec-card-bar--success, etc.)
   * dependem do verde Tailwind default (#10b981). Mantido pra não regredir
   * o visual delas; páginas novas devem usar --emerald-600 (brand accent)
   * ou --emerald-700 (textos sobre fundo claro). */
  --emerald-900:#1a4f48;
  --emerald-700:#359e8e;
  --emerald-600:#42b6a4;
  --emerald-500:#10b981; /* legacy — protótipo usa #7dd3c8 */
  --emerald-400:#8cdad1;
  --emerald-300:#9ae1d9;
  --emerald-200:#a8e8e1;
  --emerald-100:#d7f5f1;
  --emerald-50:#e8faf7;

  /* Aliases antigos. */
  --em-600:var(--emerald-600);--em-500:#7dd3c8;--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:#1e1a27;
  --surface:#ffffff;
  --surface-muted:#f2f0f6;
  --surface-subtle:#fafafa;
  --surface-dark:#1e1a27;
  --surface-brand:#4b3b70;
  --surface-accent:#42b6a4;
  --text-primary:#1e1a27;
  --text-secondary:#4b5563;
  --text-muted:#9b8fb8;
  --border:#e8e5f0;
  --border-strong:#d1d5db;
  --divider:#e8e5f0;
  --ring:#4b3b70;

  --warn-bg:#fffbeb;--warn-bd:#fcd34d;--warn-tx:#92400e;--warn-ic:#f59e0b;
  --err-bg:#fef2f2;--err-bd:#fca5a5;--err-tx:#7f1d1d;--err-ic:#ef4444;
  --brand-purple:#8161ab;
  --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:#f8f7fb;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:var(--navy-900);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 rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:61px}
.sidebar-close{display:none;background:none;border:none;color:rgba(255,255,255,.55);cursor:pointer;padding:6px;border-radius:6px;align-items:center;justify-content:center;transition:background 150ms,color 150ms,transform 200ms}
.sidebar-close:hover{background:rgba(255,255,255,.08);color:#fff}
.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-section{padding:20px 16px 6px;font-size:10px;font-weight:700;color:rgba(255,255,255,.35);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 rgba(255,255,255,.06)}
.sidebar-empresa-single{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 4px;color:#fff;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden}
.sidebar-empresa-single .sidebar-empresa-icon{flex-shrink:0;color:rgba(255,255,255,.55)}
.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:rgba(255,255,255,.55);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:.7}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item:hover svg{opacity:1}
.nav-item--active{background:rgba(255,255,255,.1);color:#fff;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 rgba(255,255,255,.08);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:rgba(255,255,255,.06)}
.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--navy-700);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:#fff;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:rgba(255,255,255,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-email::before{content:attr(data-email)}
.user-chevron{color:rgba(255,255,255,.45);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{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:var(--navy-900);border:1px solid rgba(255,255,255,.1);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.25);padding:6px 0;z-index:50}
.user-popup.is-open{display:block}
.user-popup-hd{padding:12px 16px 10px;border-bottom:1px solid rgba(255,255,255,.08)}
.user-popup-name{font-size:13px;font-weight:700;color:#fff;line-height:1.3}
.user-popup-email{font-size:11px;color:rgba(255,255,255,.45);margin-top:2px}
.user-popup-list{list-style:none;padding:6px 0;margin:0}
.user-popup-list--divider{border-top:1px solid rgba(255,255,255,.08)}
.user-popup-item{display:flex;align-items:center;gap:10px;padding:10px 16px;min-height:40px;color:rgba(255,255,255,.75);font-size:13px;cursor:pointer;transition:background 150ms,color 150ms;text-decoration:none}
.user-popup-item:hover{background:rgba(255,255,255,.06);color:#fff}
.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}
.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(--navy-700);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(75,59,112,.1)}
.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(--navy-700);color:#fff;border-color:var(--navy-700)}
.btn--primary:hover:not(:disabled){background:var(--navy-900);border-color:var(--navy-900)}
.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(--navy-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(--navy-700)}
.tab-panel {display: none;}

/* CALLOUT */
.info-callout{background:#f0edf8;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(--navy-700);box-shadow:0 0 0 3px rgba(75,59,112,.1)}

/* 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){
  /* 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}
}