/* ============================================================
   Ferramenta 5W2H — Unika Magazine
   Mesmos tokens das calculadoras (calc-margem.css).
   ============================================================ */
.unika-5w2h{--uc-bg:#FFFFFF;--uc-surface:#F8F8F7;--uc-ink:#0A0A0A;--uc-ink-600:#3D3D3A;--uc-ink-400:#7A7A75;--uc-ink-300:#A3A39E;--uc-ink-200:#C9C9C5;--uc-ink-100:#E4E4E1;--uc-accent:#FF4A17;--uc-accent-hover:#D93400;--uc-accent-press:#A82700;--uc-ok:#3FB27F;--uc-warn:#FFB36B;--uc-sans:"Archivo",Helvetica,Arial,sans-serif;--uc-serif:"Newsreader",Georgia,serif;--uc-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-family:var(--uc-sans);color:var(--uc-ink);max-width:1240px;margin:0 auto}
.unika-5w2h *,.unika-5w2h *::before,.unika-5w2h *::after{box-sizing:border-box}
.unika-5w2h .u5w__sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.u5w__offscreen{position:fixed;left:-9999px;top:0;opacity:0}

/* Sem JavaScript: o modelo estático aparece; com JS ele some */
.unika-5w2h.is-ready .u5w__nojs{display:none}
.u5w__nojs{font-family:var(--uc-serif);font-size:16px;line-height:1.6;color:var(--uc-ink-600)}
.u5w__nojs table{width:100%;border-collapse:collapse;margin-top:12px;font-family:var(--uc-sans);font-size:14px}
.u5w__nojs th,.u5w__nojs td{border:1px solid var(--uc-ink-100);padding:10px;text-align:left;vertical-align:top}

/* ---------- grade principal ---------- */
.u5w__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:32px;align-items:start}
@media(max-width:900px){.u5w__grid{grid-template-columns:minmax(0,1fr);gap:24px}}

.u5w__eyebrow{font-size:12px;font-weight:600;line-height:1.2;letter-spacing:.09em;text-transform:uppercase;color:var(--uc-ink-400);margin:0}

/* ---------- formulário ---------- */
.u5w__form{display:grid;gap:24px;align-content:start;min-inline-size:0}
.u5w__field{display:grid;gap:6px;align-content:start;min-inline-size:0}
.u5w__label{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:15px;font-weight:500;line-height:1.35;color:var(--uc-ink)}
.u5w__w{font-family:var(--uc-mono);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--uc-accent)}
.u5w__q{font-family:var(--uc-serif);font-size:14px;font-weight:400;color:var(--uc-ink-400);flex-basis:100%}
.u5w__hint{font-family:var(--uc-serif);font-size:14px;line-height:1.5;color:var(--uc-ink-400);margin:0}
.u5w__input{width:100%;min-width:0;font-family:var(--uc-sans);font-size:16px;line-height:1.4;color:var(--uc-ink);background:var(--uc-bg);border:1px solid var(--uc-ink-200);border-radius:4px;padding:11px 12px;margin:0;min-height:44px}
.u5w__input:focus{outline:0;border-color:var(--uc-accent);box-shadow:0 0 0 2px rgba(255,74,23,.22)}
.u5w__textarea{resize:vertical;min-height:64px}
.u5w__field--title .u5w__input{font-size:18px;font-weight:600}
.u5w__inputwrap{display:flex;align-items:stretch;border:1px solid var(--uc-ink-200);border-radius:4px;background:var(--uc-bg)}
.u5w__inputwrap:focus-within{border-color:var(--uc-accent);box-shadow:0 0 0 2px rgba(255,74,23,.22)}
.u5w__inputwrap .u5w__input{border:0;box-shadow:none!important;font-family:var(--uc-mono);font-variant-numeric:tabular-nums}
.u5w__prefix{display:flex;align-items:center;padding:0 12px;font-family:var(--uc-mono);font-size:14px;color:var(--uc-ink-400);border-right:1px solid var(--uc-ink-100)}
.u5w__input--money{-moz-appearance:textfield;appearance:textfield}
.u5w__input--money::-webkit-outer-spin-button,.u5w__input--money::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.u5w__select{appearance:auto}

/* cartões das ações */
.u5w__list{display:grid;gap:16px}
.u5w__card{margin:0;padding:0;border:1px solid var(--uc-ink-100);border-radius:8px;background:var(--uc-bg);min-inline-size:0}
.u5w__cardhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--uc-ink-100);background:var(--uc-surface);border-radius:8px 8px 0 0}
.u5w__cardtitle{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.u5w__cardtools{display:flex;gap:4px}
.u5w__icon{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--uc-mono);font-size:18px;line-height:1;color:var(--uc-ink-600);background:transparent;border:1px solid transparent;border-radius:4px;cursor:pointer}
.u5w__icon:hover:not(:disabled){border-color:var(--uc-ink-200);background:#fff}
.u5w__icon:focus-visible{outline:2px solid var(--uc-accent);outline-offset:1px}
.u5w__icon:disabled{opacity:.3;cursor:default}
.u5w__icon--del:hover:not(:disabled){color:var(--uc-accent-press);border-color:var(--uc-accent)}
.u5w__cardbody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:16px}
.u5w__field--oque,.u5w__field--porque,.u5w__field--como{grid-column:1/-1}
@media(max-width:560px){.u5w__cardbody{grid-template-columns:minmax(0,1fr)}}

.u5w__formactions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* botões */
.u5w__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--uc-sans);font-size:15px;font-weight:600;line-height:1.2;border:1px solid transparent;border-radius:4px;padding:13px 20px;min-height:44px;cursor:pointer;background:var(--uc-accent);color:#fff;transition:background-color .12s linear,border-color .12s linear,color .12s linear;text-align:center}
.u5w__btn:hover{background:var(--uc-accent-hover);color:#fff}
.u5w__btn:active{background:var(--uc-accent-press)}
.u5w__btn:focus-visible{outline:2px solid var(--uc-accent);outline-offset:2px}
.u5w__btn:disabled{opacity:.45;cursor:not-allowed}
.u5w__btn--line{background:var(--uc-bg);color:var(--uc-ink);border-color:var(--uc-ink)}
.u5w__btn--line:hover{background:var(--uc-ink);color:#fff}
.u5w__btn--quiet{background:transparent;color:var(--uc-ink-600);padding:13px 8px;text-decoration:underline;text-underline-offset:3px}
.u5w__btn--quiet:hover{background:transparent;color:var(--uc-ink)}

/* ---------- painel escuro ---------- */
.u5w__resultcol{position:sticky;top:96px;min-inline-size:0}
@media(max-width:900px){.u5w__resultcol{position:static}}
.u5w__panel{background:var(--uc-ink)!important;color:#fff!important;border-radius:8px;padding:28px}
.u5w__panel .u5w__eyebrow{color:var(--uc-ink-300)}
.u5w__big{font-size:64px;font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--uc-accent);margin:12px 0 0}
.u5w__note{font-family:var(--uc-serif);font-size:15px;line-height:1.5;color:var(--uc-ink-200);margin:8px 0 0}
.u5w__panel hr{border:0;border-top:1px solid #2A2A28;margin:20px 0}
.u5w__dl{display:grid;grid-template-columns:minmax(0,1fr) auto;margin:0;font-size:14px}
.u5w__dl dt{color:var(--uc-ink-300);padding:8px 0;border-top:1px solid #2A2A28}
.u5w__dl dd{font-family:var(--uc-mono);font-variant-numeric:tabular-nums;color:#fff;text-align:right;margin:0;padding:8px 0 8px 16px;border-top:1px solid #2A2A28;white-space:nowrap}
.u5w__dl dt:first-of-type,.u5w__dl dd:first-of-type{border-top:0}
.u5w__dl dd.is-strong{color:#FF9A75;font-weight:600}
.u5w__dl dd.is-warn{color:var(--uc-warn);font-weight:600}
.u5w__alerts{margin-top:16px}
.u5w__alerts:empty{display:none}
.u5w__eyebrow--warn{color:var(--uc-warn)!important;margin-bottom:8px}
.u5w__alertlist{margin:0;padding:0 0 0 18px;font-family:var(--uc-serif);font-size:14px;line-height:1.5;color:var(--uc-ink-100)}
.u5w__alertlist li+li{margin-top:6px}
.u5w__more{font-family:var(--uc-serif);font-size:13px;color:var(--uc-ink-300);margin:8px 0 0}
.u5w__ok{font-family:var(--uc-serif);font-size:14px;line-height:1.5;color:#8FE0B8;margin:0}
.u5w__actions{display:grid;gap:10px;margin-top:20px}
.u5w__panel .u5w__btn--ghost{background:transparent;color:#fff;border-color:#3D3D3A}
.u5w__panel .u5w__btn--ghost:hover:not(:disabled){background:#fff;color:var(--uc-ink);border-color:#fff}
.u5w__disclaimer{font-family:var(--uc-serif);font-size:13px;line-height:1.55;color:var(--uc-ink-300);margin:16px 0 0}

/* ---------- quadro final ---------- */
.u5w__board{margin-top:48px;border-top:2px solid var(--uc-ink);padding-top:24px}
.u5w__board[hidden]{display:none}
.u5w__boardtitle{font-size:28px;font-weight:700;line-height:1.15;letter-spacing:-.01em;margin:8px 0 4px}
.u5w__boardmeta{font-family:var(--uc-mono);font-size:13px;color:var(--uc-ink-400);margin:0 0 16px}
.u5w__tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.u5w__table{width:100%;min-width:900px;border-collapse:collapse;font-size:14px;line-height:1.45}
.u5w__table th{text-align:left;vertical-align:bottom;font-size:13px;font-weight:600;padding:10px;border-bottom:1px solid var(--uc-ink);white-space:nowrap}
.u5w__table th .u5w__w{display:block;margin-bottom:2px}
.u5w__table td{vertical-align:top;padding:10px;border-bottom:1px solid var(--uc-ink-100);font-family:var(--uc-serif);font-size:15px}
.u5w__table td.u5w__num{font-family:var(--uc-mono);color:var(--uc-ink-400)}
.u5w__table tr.is-done td{color:var(--uc-ink-400)}
.u5w__boardfoot{font-family:var(--uc-mono);font-size:12px;color:var(--uc-ink-400);margin:16px 0 0}

/* celular: tabela vira lista */
@media(max-width:700px){
  .u5w__table{min-width:0}
  .u5w__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .u5w__table tr{display:block;border:1px solid var(--uc-ink-100);border-radius:8px;padding:8px 12px;margin-bottom:12px}
  .u5w__table td{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;border:0;padding:6px 0}
  .u5w__table td::before{content:attr(data-label);font-family:var(--uc-sans);font-size:12px;font-weight:600;color:var(--uc-ink-400);text-transform:uppercase;letter-spacing:.04em}
}

/* ---------- impressão: só o quadro ---------- */
@media print{
  html.u5w-printing body>*:not(.u5w-print){display:none!important}
  html.u5w-printing .u5w-print{display:block!important;margin:0;padding:0}
  .u5w-print .u5w__board{display:block;margin:0;padding:0;border:0}
  .u5w-print .u5w__boardtitle{font-size:18pt}
  .u5w-print .u5w__boardmeta,.u5w-print .u5w__boardfoot{font-size:9pt}
  .u5w-print .u5w__tablewrap{overflow:visible}
  .u5w-print .u5w__table{min-width:0;width:100%;font-size:10pt}
  .u5w-print .u5w__table thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:table-header-group}
  .u5w-print .u5w__table th{white-space:normal;font-size:9pt}
  .u5w-print .u5w__table tr{display:table-row;border:0;padding:0;margin:0;break-inside:avoid;page-break-inside:avoid}
  .u5w-print .u5w__table td{display:table-cell;padding:6px;border-bottom:1px solid #999;font-size:10pt}
  .u5w-print .u5w__table td::before{content:none}
  @page{size:A4 landscape;margin:12mm}
}
.u5w-print{display:none}
@media(prefers-reduced-motion:reduce){.unika-5w2h *{transition:none!important}}

.unika-5w2h .u5w__resume{border:1px solid var(--uc-accent);background:#FFF4F0;border-radius:4px;padding:14px 16px;margin:0 0 20px}.unika-5w2h .u5w__resume[hidden]{display:none}.unika-5w2h .u5w__resumetxt{margin:0 0 10px;font-size:15px;line-height:1.45;color:var(--uc-ink)}.unika-5w2h .u5w__resumeactions{display:flex;flex-wrap:wrap;gap:8px}
@media print{.unika-5w2h .u5w__resume{display:none}}