/* ============================================================
   fm-pessoas — Navy Editorial (tokens do portal.css de produção,
   fonte canônica: brand-spec-fm.md). Componentes prefixados p-.
   ============================================================ */
:root{
  --fm-navy-950: oklch(0.23 0.048 253);
  --fm-navy-900: oklch(0.28 0.055 253);
  --fm-navy:     oklch(0.34 0.062 253);   /* ~#1F3B5B */
  --fm-navy-600: oklch(0.46 0.075 253);
  --fm-navy-line:oklch(0.36 0.05 253);
  --fm-gold:   oklch(0.73 0.125 92);      /* ~#C9A227 */
  --fm-gold-d: oklch(0.58 0.11 92);
  --fm-bg:    oklch(0.966 0.005 253);
  --fm-paper: #fff;
  --fm-line:  oklch(0.905 0.008 253);
  --fm-ink:   oklch(0.26 0.022 253);
  --fm-mut:   oklch(0.47 0.02 253);
  --fm-red:   oklch(0.5 0.13 15);
  --fm-amber: oklch(0.66 0.14 60);
  --fm-green: oklch(0.52 0.1 155);
  --fm-red-bg:   oklch(0.96 0.018 15);
  --fm-green-bg: oklch(0.96 0.02 155);
  --fm-amber-bg: oklch(0.97 0.03 90);
  --fm-sans:  "IBM Plex Sans", system-ui, "Segoe UI", Arial, sans-serif;
  --fm-serif: "IBM Plex Serif", Georgia, serif;
  --fm-mono:  "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--fm-bg);color:var(--fm-ink);
  font:400 14px/1.5 var(--fm-sans)}
a{color:var(--fm-navy-600)}
h1,h2,h3{font-family:var(--fm-serif);color:var(--fm-navy);margin:0 0 8px;
  text-wrap:balance}
h1{font-size:28px;font-weight:700}
h2{font-size:20px;font-weight:600}
h3{font-size:16px;font-weight:600}

/* ---------- topbar ---------- */
.p-top{background:var(--fm-navy-950);color:#fff;
  border-bottom:1px solid var(--fm-navy-line)}
.p-top-in{max-width:1080px;margin:0 auto;padding:0 16px;
  display:flex;align-items:center;gap:20px;min-height:56px;flex-wrap:wrap}
.p-brand{text-decoration:none;color:#fff;flex:none}
.p-name{font-size:13.5px;color:oklch(0.78 0.03 253);line-height:1.2}
.p-name b{display:block;font-family:var(--fm-serif);font-weight:600;
  font-size:15.5px;color:#fff;letter-spacing:.01em}
.p-nav{display:flex;gap:2px;align-items:stretch;flex:1;min-width:0;overflow-x:auto}
.p-nav a{display:flex;align-items:center;padding:0 12px;min-height:56px;
  color:oklch(0.85 0.02 253);text-decoration:none;font-weight:500;font-size:13.5px;
  border-bottom:2px solid transparent;transition:color .15s var(--ease)}
.p-nav a:hover{color:#fff}
.p-nav a[aria-current=page]{color:#fff;border-bottom-color:var(--fm-gold)}
.p-user{display:flex;align-items:center;gap:12px;font-size:13px;
  color:oklch(0.85 0.02 253)}
.p-user a{color:var(--fm-gold);text-decoration:none;font-weight:500}
.p-user a:hover{text-decoration:underline}

/* ---------- layout ---------- */
.p-main{max-width:1080px;margin:0 auto;padding:24px 16px 56px}
.p-head{display:flex;align-items:end;justify-content:space-between;
  gap:16px;margin-bottom:20px;flex-wrap:wrap}
.p-head p{margin:0;color:var(--fm-mut)}
.p-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.p-cols{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start}
@media (max-width:760px){.p-cols{grid-template-columns:1fr}}

/* ---------- superfícies ---------- */
.p-card{background:var(--fm-paper);border:1px solid var(--fm-line);
  border-radius:8px;padding:16px}
.p-card + .p-card{margin-top:16px}

/* ---------- KPIs ---------- */
.p-kpi{background:var(--fm-paper);border:1px solid var(--fm-line);
  border-radius:8px;padding:14px 16px;text-decoration:none;display:block;
  color:inherit;transition:border-color .15s var(--ease)}
a.p-kpi:hover{border-color:var(--fm-navy-600)}
.p-kpi .n{font-family:var(--fm-mono);font-size:26px;font-weight:600;
  color:var(--fm-navy);font-variant-numeric:tabular-nums;line-height:1.15}
.p-kpi .l{font-size:13px;font-weight:500;color:var(--fm-mut);margin-top:2px}
.p-kpi .s{font-size:12px;color:var(--fm-mut);margin-top:6px}
.p-kpi.foco{border-color:var(--fm-gold);border-width:1.5px}
.p-kpi .n .alerta{color:var(--fm-red)}

/* ---------- tabela ---------- */
.p-tbl-wrap{overflow-x:auto}
table.p-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.p-tbl th{font-size:12px;font-weight:600;color:var(--fm-mut);text-align:left;
  padding:8px 10px;border-bottom:1px solid var(--fm-line);white-space:nowrap}
.p-tbl td{padding:9px 10px;border-bottom:1px solid var(--fm-line);vertical-align:top}
.p-tbl tr:last-child td{border-bottom:0}
.p-tbl tr:hover td{background:oklch(0.975 0.004 253)}
.p-tbl a{font-weight:500;text-decoration:none}
.p-tbl a:hover{text-decoration:underline}
.p-num{font-family:var(--fm-mono);font-variant-numeric:tabular-nums}

/* ---------- badges de estado ---------- */
.p-badge{display:inline-block;padding:1.5px 8px;border-radius:999px;
  font-size:11.5px;font-weight:600;line-height:1.6;white-space:nowrap}
.p-badge.ok{background:var(--fm-green-bg);color:var(--fm-green)}
.p-badge.aviso{background:var(--fm-amber-bg);color:oklch(0.5 0.12 60)}
.p-badge.erro{background:var(--fm-red-bg);color:var(--fm-red)}
.p-badge.neutro{background:oklch(0.945 0.008 253);color:var(--fm-mut)}
.p-badge.navy{background:oklch(0.93 0.02 253);color:var(--fm-navy)}

/* ---------- formulários ---------- */
.p-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px 16px}
.p-form .campo-l{grid-column:1/-1}
label.p-label{display:block;font-size:12.5px;font-weight:600;
  color:var(--fm-navy);margin-bottom:4px}
.p-input,.p-select,.p-textarea{width:100%;padding:8px 10px;font:inherit;
  color:var(--fm-ink);background:oklch(0.985 0.003 253);
  border:1px solid var(--fm-line);border-radius:6px;
  transition:border-color .15s var(--ease)}
.p-input:hover,.p-select:hover,.p-textarea:hover{border-color:oklch(0.8 0.015 253)}
.p-input:focus,.p-select:focus,.p-textarea:focus{outline:2px solid var(--fm-navy-600);
  outline-offset:-1px;border-color:var(--fm-navy-600)}
.p-input::placeholder,.p-textarea::placeholder{color:var(--fm-mut)}
.p-input:disabled{background:var(--fm-line);color:var(--fm-mut)}
.p-textarea{min-height:96px;resize:vertical}
.p-ajuda{font-size:12px;color:var(--fm-mut);margin-top:4px}

/* ---------- botões ---------- */
.p-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:36px;padding:0 16px;font:600 13.5px var(--fm-sans);cursor:pointer;
  border-radius:6px;border:1px solid transparent;text-decoration:none;
  transition:background-color .15s var(--ease),border-color .15s var(--ease)}
.p-btn-primario{background:var(--fm-navy);color:#fff}
.p-btn-primario:hover{background:var(--fm-navy-600)}
.p-btn-primario:focus-visible{outline:2px solid var(--fm-gold);outline-offset:2px}
.p-btn-sec{background:transparent;color:var(--fm-navy);border-color:var(--fm-line)}
.p-btn-sec:hover{border-color:var(--fm-navy-600);color:var(--fm-navy-600)}
.p-btn-perigo{background:transparent;color:var(--fm-red);border-color:var(--fm-line)}
.p-btn-perigo:hover{border-color:var(--fm-red)}
.p-btn:disabled{opacity:.55;cursor:not-allowed}

/* ---------- flash / vazio ---------- */
.p-flash{padding:10px 14px;border-radius:6px;margin-bottom:16px;font-weight:500}
.p-flash-ok{background:var(--fm-green-bg);color:var(--fm-green)}
.p-flash-erro{background:var(--fm-red-bg);color:var(--fm-red)}
.p-vazio{padding:28px 16px;text-align:center;color:var(--fm-mut)}
.p-vazio b{display:block;color:var(--fm-navy);font-weight:600;margin-bottom:4px}

/* ---------- checklist ---------- */
.p-check{list-style:none;margin:0;padding:0}
.p-check li{display:flex;gap:10px;padding:10px 4px;align-items:flex-start;
  border-bottom:1px solid var(--fm-line)}
.p-check li:last-child{border-bottom:0}
.p-check input[type=checkbox]{width:18px;height:18px;margin-top:2px;
  accent-color:var(--fm-navy);cursor:pointer}
.p-check .t{font-weight:500}
.p-check .d{font-size:12.5px;color:var(--fm-mut)}
.p-check .meta{font-size:12px;color:var(--fm-mut);margin-left:auto;
  white-space:nowrap;padding-top:2px}
.p-check li.feito .t{color:var(--fm-mut);text-decoration:line-through}

/* ---------- barra de progresso ---------- */
.p-prog{height:6px;background:var(--fm-line);border-radius:999px;overflow:hidden}
.p-prog>i{display:block;height:100%;background:var(--fm-green);
  border-radius:999px;transition:width .25s var(--ease)}
.p-prog.parcial>i{background:var(--fm-amber)}

/* ---------- clima (barras de média) ---------- */
.p-clima-q{margin-bottom:14px}
.p-clima-q .q{font-weight:500;margin-bottom:4px}
.p-clima-bar{display:flex;align-items:center;gap:10px}
.p-clima-bar .p-prog{flex:1}
.p-clima-bar .v{font-family:var(--fm-mono);font-variant-numeric:tabular-nums;
  font-weight:600;color:var(--fm-navy);min-width:44px;text-align:right}

/* ---------- login ---------- */
.p-login{max-width:360px;margin:9vh auto 0;padding:0 16px}
.p-login .p-card{padding:24px}
.p-login h1{font-size:22px}
.p-login .sub{color:var(--fm-mut);margin:0 0 18px}
.p-login .p-btn{width:100%;margin-top:14px}
.p-login .campo{margin-bottom:12px}

/* ---------- página pública do clima ---------- */
.p-publico{max-width:640px;margin:0 auto;padding:32px 16px 64px}
.p-publico .marca{font-family:var(--fm-serif);font-weight:600;
  color:var(--fm-navy);margin-bottom:24px}
.p-escala{display:flex;gap:6px;flex-wrap:wrap}
.p-escala label{flex:1;min-width:44px;min-height:44px;display:flex;
  align-items:center;justify-content:center;border:1px solid var(--fm-line);
  border-radius:6px;cursor:pointer;font-weight:600;background:var(--fm-paper);
  transition:border-color .15s var(--ease)}
.p-escala label:hover{border-color:var(--fm-navy-600)}
.p-escala input{position:absolute;opacity:0}
.p-escala input:checked+span{color:#fff}
.p-escala label:has(input:checked){background:var(--fm-navy);
  border-color:var(--fm-navy);color:#fff}
.p-escala label:has(input:focus-visible){outline:2px solid var(--fm-gold)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important;
    animation-duration:.01ms !important}
}