/* 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.
   * ver docs/calculos-e-indices.md §6.3 */
  --risco-critico:#f8b1ab;   --risco-critico-hover:#f48278;
  --risco-alto:#f7948a;      --risco-alto-hover:#f06255;
  --risco-moderado:#f8d568;  --risco-moderado-hover:#f5c23a;
  --risco-baixo:#6ee7b7;     --risco-baixo-hover:#34d399;
}

*, *::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}
.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 .nav-item{justify-content:center;padding:12px 0;gap:0;cursor:pointer}
  body.sidebar-collapsed .nav-item-text{display:none}
  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 */
@media(min-width:769px){
  body.sidebar-collapsed .user-popup{left:calc(100% + 8px);right:auto;bottom:0;width:240px}
}

/* 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:900px;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}
}