/* ENXPLAN: página do painel. Layout com classes pn-*; cores só pelos tokens --ex-*. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2")}
:root{--ex-logo-src:url(img/logo-enxplan.webp)}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;background-color:var(--ex-bg);background-image:var(--ex-brush);color:var(--ex-ink);font-family:var(--ex-font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background-color .3s var(--ex-ease)}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none!important}
.pn-wrap{max-width:1120px;margin:0 auto;container:panel / inline-size;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ---------- entrada ---------- */
.pn-login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:32px max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px))}
.pn-login-card{width:100%;max-width:400px;display:grid;gap:22px;padding:30px 26px 26px}
.pn-login-brand{display:grid;gap:12px;justify-items:center;text-align:center}
.pn-login-brand .ex-logo{height:26px}
.pn-login h1{font-size:10px}
.pn-login-txt{font-size:13.5px;color:var(--ex-ink-3);text-align:center;text-wrap:balance}
.pn-form{display:grid;gap:14px}
.pn-field{display:grid;gap:6px}
.pn-field label{font-size:12.5px;font-weight:600;color:var(--ex-ink-2)}
.pn-field input{width:100%;min-height:46px;padding:0 14px;border:0;border-radius:var(--ex-r-ctl);background:var(--ex-fill-2);color:var(--ex-ink);font:500 16px/1.2 var(--ex-font);box-shadow:inset 0 0 0 1px var(--ex-sep);transition:box-shadow .2s var(--ex-ease),background-color .2s var(--ex-ease)}
.pn-field input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--ex-focus);background:var(--ex-fill)}
.pn-check{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ex-ink-2);cursor:pointer}
.pn-check input{width:18px;height:18px;margin:0;accent-color:var(--ex-accent)}
.pn-login .ex-btn{width:100%;min-height:46px;font-size:14px}
.pn-login .ex-btn[disabled]{opacity:.6;cursor:progress}
.pn-msg{min-height:20px;font-size:13px;color:var(--ex-ink-2);text-align:center}
.pn-msg.erro{color:var(--ex-danger)}
.pn-login-foot{font-size:12px;color:var(--ex-ink-3);text-align:center}

/* ---------- estados vazios ---------- */
.pn-vazio{display:grid;gap:6px;padding:18px;border-radius:var(--ex-r-group);background:var(--ex-fill);font-size:13.5px;color:var(--ex-ink-2)}
.pn-vazio b{color:var(--ex-ink);font-weight:700}
.pn-cell.na{background:transparent;box-shadow:inset 0 0 0 1px var(--ex-sep)}
.pn-legend i.na{background:transparent;box-shadow:inset 0 0 0 1px var(--ex-sep-strong)}
.pn-foot-r{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.pn-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* ---------- painel (o que o cliente vê) ---------- */
.pn{display:grid;gap:36px;padding:28px 0 40px}
.pn-head{display:grid;gap:18px}
.pn-brand{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px}
.pn-brand-l{display:flex;flex-direction:column;gap:10px;min-width:0}
.pn-brand .ex-logo{height:20px}
.pn-meta{font-size:12.5px;color:var(--ex-ink-3)}
.pn-sec{display:grid;gap:14px}
.pn-sec-h{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;align-items:start}
.pn-sec-h>div{display:grid;gap:2px;min-width:0}
.pn-sec-h>.ex-tag{grid-column:2;justify-self:start}
.pn-sec-h h2{font-size:19px;font-weight:700;letter-spacing:-.015em;text-wrap:balance}
.pn-sec-h p{font-size:13.5px;color:var(--ex-ink-3)}
.pn-grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.pn-card-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:14px}
.pn-card-h h3{font-size:14px;font-weight:700}
.pn-card-h p{font-size:12.5px;color:var(--ex-ink-3)}
.pn-card-h>div:not(.ex-seg){display:grid;gap:2px;min-width:0}

/* número de abertura */
.pn-hero{display:grid;gap:22px;grid-template-columns:minmax(0,1fr);padding:22px 20px}
.pn-hero-t{display:grid;gap:10px;align-content:start}
.pn-hero-n{font-size:56px;line-height:1;font-weight:800;letter-spacing:-.035em}
.pn-hero-s{font-size:15px;color:var(--ex-ink-2);max-width:34ch;text-wrap:pretty}
.pn-delta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:12.5px;color:var(--ex-ink-3)}

/* ladrilhos de número */
.pn-tiles{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.pn-tile{display:grid;gap:8px;align-content:start;grid-template-rows:auto auto 1fr auto;padding:16px}
.pn-tile-l{font-size:12.5px;font-weight:600;color:var(--ex-ink-3)}
.pn-tile-v{font-size:27px;line-height:1.1;font-weight:700;letter-spacing:-.025em}
.pn-tile-v small{font-size:14px;font-weight:600;letter-spacing:0;color:var(--ex-ink-3)}
.pn-tile .pn-delta{font-size:11.5px;flex-direction:column;align-items:flex-start;gap:5px}
.pn-spark{display:block;width:100%;height:30px;margin-top:2px}

/* gráficos */
.pn-chart{position:relative;min-width:0}
.pn-chart svg{display:block;width:100%;overflow:visible;touch-action:pan-y}
.pn-chart text{font-family:var(--ex-font);font-size:11px;fill:var(--ex-ink-3);font-variant-numeric:tabular-nums}
.pn-chart .end{font-size:12.5px;font-weight:700;fill:var(--ex-ink)}
.pn-grid-l{stroke:var(--ex-sep);stroke-width:1}
.pn-line{fill:none;stroke:var(--ex-data-1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.pn-area{fill:var(--ex-data-wash)}
.pn-dot{fill:var(--ex-data-1);stroke:var(--ex-card);stroke-width:2}
.pn-cross{stroke:var(--ex-ink-4);stroke-width:1}
.pn-ref{stroke:var(--ex-ink-4);stroke-width:1}
.pn-more{margin-top:12px;font-size:12.5px;color:var(--ex-ink-3)}
.pn-more summary{cursor:pointer;width:max-content;max-width:100%;padding:4px 0;font-weight:600;color:var(--ex-accent-ink)}
.pn-more .ex-table{margin-top:10px;font-size:12.5px}

.pn-pos{display:none}

/* indexação */
.pn-rows{display:grid;gap:14px}
.pn-row{display:grid;gap:7px}
.pn-row-t{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--ex-ink)}
.pn-row-t span:last-child{color:var(--ex-ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.pn-pend{display:grid;gap:0}
.pn-pend li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:11px 0;border-top:1px solid var(--ex-sep);font-size:13px}
.pn-pend li:first-child{border-top:0;padding-top:0}
.pn-pend .ex-mono{color:var(--ex-ink);overflow-wrap:anywhere;min-width:0}

/* IAs */
.pn-ai{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
.pn-ai-sum{display:grid;gap:18px;align-content:start}
.pn-ai-big{font-size:34px;line-height:1.05;font-weight:800;letter-spacing:-.03em}
.pn-ai-big small{font-size:15px;font-weight:600;letter-spacing:0;color:var(--ex-ink-3)}
.pn-ai-txt{font-size:13.5px;color:var(--ex-ink-2);max-width:40ch}
.pn-heat{--cell:30px;display:grid;grid-template-columns:minmax(0,1fr) repeat(4,var(--cell));gap:4px 4px;align-items:center}
.pn-heat-h{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ex-ink-3);text-align:center;padding-bottom:4px}
.pn-heat-h .full{display:none}
.pn-heat-g{grid-column:1 / -1;padding:12px 0 4px;font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ex-ink-3)}
.pn-heat-g:first-of-type{padding-top:0}
.pn-heat-q{font-size:13px;line-height:1.35;color:var(--ex-ink-2);padding:4px 10px 4px 0;text-wrap:pretty}
.pn-cell{display:grid;place-items:center;height:28px;border-radius:8px;background:var(--ex-fill);font:700 12px/1 var(--ex-font);font-variant-numeric:tabular-nums;color:transparent;transition:transform .2s var(--ex-spring)}
.pn-cell.on{background:var(--ex-data-1);color:var(--ex-on-data)}
.pn-cell:hover{transform:scale(1.08)}
.pn-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:12px;color:var(--ex-ink-3)}
.pn-legend span{display:inline-flex;align-items:center;gap:7px}
.pn-legend i{width:14px;height:14px;border-radius:4px;background:var(--ex-fill-2);flex:none}
.pn-legend i.on{background:var(--ex-data-1)}

/* trabalho feito */
.pn-log{display:grid;gap:22px}
.pn-log-m{display:grid;gap:4px}
.pn-log-mh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:8px}
.pn-log-mh h3{font-size:14px;font-weight:700}
.pn-log-mh span{font-size:12px;color:var(--ex-ink-3)}
.pn-log li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 10px;padding:11px 0;border-top:1px solid var(--ex-sep);font-size:13.5px;color:var(--ex-ink-2)}
.pn-log li time{font-family:var(--ex-mono);font-size:12px;color:var(--ex-ink-3);padding-top:2px}
.pn-log li div{display:grid;gap:6px;justify-items:start;min-width:0}
.pn-next{display:grid;gap:0}
.pn-next li{display:grid;gap:3px;padding:12px 0;border-top:1px solid var(--ex-sep);font-size:13.5px;color:var(--ex-ink-2)}
.pn-next li:first-child{border-top:0;padding-top:0}
.pn-next b{font-weight:600;color:var(--ex-ink)}
.pn-foot{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;padding-top:20px;border-top:1px solid var(--ex-sep);font-size:12px;color:var(--ex-ink-3)}

@container panel (min-width:720px){
  .pn{gap:48px;padding:44px 0 56px}
  .pn-sec-h{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
  .pn-sec-h>.ex-tag{grid-column:3}
  .pn-pos{display:table-cell}
  .pn-brand .ex-logo{height:24px}
  .pn-hero{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px;padding:30px 30px 26px;align-items:center}
  .pn-hero-n{font-size:68px}
  .pn-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pn-tile{padding:18px}
  .pn-tile-v{font-size:30px}
  .pn-grid.g-7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .pn-grid.g-5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .pn-grid.g-8-4{grid-template-columns:minmax(0,8fr) minmax(0,4fr);align-items:start}
  .pn-span{grid-column:1 / -1}
  .ex-card{padding:24px}
  .pn-ai{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px}
  .pn-heat{--cell:74px}
  .pn-heat-h .full{display:inline}
  .pn-heat-h .abbr{display:none}
  .pn-heat-h{font-size:10px;letter-spacing:.1em}
  .pn-pend{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
  .pn-pend li:nth-child(2){border-top:0;padding-top:0}
}
