:root{
  --brand:#004C54;
  --accent:#9ACD32;
  --bg:#f4f7f5;
  --card:#ffffff;
  --text:#0b1520;
  --muted:#6b7280;
  --stroke:#e5e7eb;
  --fs-12:clamp(.72rem,.65rem + .2vw,.78rem);
  --fs-14:clamp(.82rem,.78rem + .2vw,.9rem);
  --fs-16:clamp(.95rem,.9rem + .4vw,1rem);
  --fs-18:clamp(1.05rem,1rem + .5vw,1.125rem);
  --fs-20:clamp(1.15rem,1.08rem + .6vw,1.25rem);
  --sp-2:.25rem;--sp-4:.5rem;--sp-6:.75rem;--sp-8:1rem;
  --sp-10:1.25rem;--sp-12:1.5rem;--sp-16:2rem;
  --radius-10:10px;--radius-12:12px;--radius-14:14px;--radius-16:16px;
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --app-max:420px;
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e1719;
    --card:linear-gradient(160deg,#0f1f22 0%,#1a2d30 100%);
    --text:#f7faf9;
    --muted:#a3b0b6;
    --stroke:#1d2a2e;
    --shadow-sm:0 2px 10px rgba(0,0,0,.45);
    --shadow-md:0 10px 30px rgba(0,0,0,.55);
    --accent:linear-gradient(135deg,#a6e34d 0%,#9ACD32 100%);
  }
}

*{box-sizing:border-box}
html,body{block-size:100%}
body{
  margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--text);accent-color:var(--brand);
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}

.app{
  max-inline-size:var(--app-max);margin-inline:auto;min-block-size:100dvh;
  display:grid;grid-template-rows:auto 1fr auto;
  background:#fff;border-inline:1px solid var(--stroke);
}
@media (prefers-color-scheme:dark){.app{background:color-mix(in lab,#0f1f22 95%,black)}}
@media (min-width:480px){.app{border-radius:20px;overflow:clip}}

.content{padding:var(--sp-8) var(--sp-8) calc(74px + env(safe-area-inset-bottom));container-type:inline-size;container-name:cards}
.center{display:flex;flex-direction:column;align-items:center;text-align:center}

.topbar{
  position:sticky;inset-block-start:0;z-index:5;
  display:flex;align-items:center;gap:var(--sp-6);
  padding:var(--sp-8);background:var(--brand);color:#fff;
}
.topbar h1{margin:0 auto 0 0;font-size:var(--fs-20);font-weight:800;color:#fff}
.ghost{inline-size:24px;block-size:24px;opacity:0}

.menu-btn,.icon-btn,.back-btn{
  border:none;background:transparent;color:currentColor;font-size:1.3rem;cursor:pointer;
  padding:var(--sp-4) var(--sp-6);border-radius:var(--radius-10);
  transition:background .2s ease,transform .06s ease;-webkit-tap-highlight-color:transparent;
}
.menu-btn:active,.icon-btn:active,.back-btn:active{transform:scale(.98)}

.avatar{
  inline-size:clamp(84px,32vw,112px);aspect-ratio:1;border-radius:50%;overflow:clip;
  background:#eef3f1;box-shadow:var(--shadow-sm);
}
.avatar img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.avatar.lg{inline-size:clamp(128px,42vw,160px);border:8px solid #eef3f1;box-shadow:var(--shadow-md)}

.section-title{margin:var(--sp-10) 0 var(--sp-8);font-size:var(--fs-20);font-weight:800;color:var(--text)}

.profile-header .name{margin:.75rem 0 0;font-size:clamp(1.15rem,1rem + .8vw,1.35rem);font-weight:800}
.profile-header .role{color:var(--brand);margin:.2rem 0 0;font-weight:700}
.profile-header .uid{color:var(--brand);opacity:.9;margin:.15rem 0 0}

.map-card{border:1px solid var(--stroke);border-radius:var(--radius-16);overflow:clip;background:#eef3ee}
.map-card img{inline-size:100%;block-size:clamp(200px,40vw,260px);object-fit:cover;display:block}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-10)}
.cardless .info-block{border-block-start:1px solid var(--stroke);padding-block-start:.9rem}
.info-title{color:var(--brand);font-weight:700;margin:0 0 .25rem}
.info-text{color:#223}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8)}
@container cards (min-width:640px){.cards{grid-template-columns:repeat(4,1fr)}}

.card{
  background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius-16);
  padding:var(--sp-8);box-shadow:var(--shadow-md);transition:transform .2s ease,box-shadow .3s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.18)}

.info-card{display:flex;align-items:center;gap:.75rem}
.info-card i{font-size:1.5rem;color:var(--brand)}
.info-card .label{font-size:var(--fs-12);color:var(--muted)}
.info-card .value{font-size:var(--fs-16);font-weight:800;margin-top:.2rem}

.list-card{padding:0}
.list-item{
  display:flex;align-items:center;gap:.8rem;justify-content:space-between;
  padding:var(--sp-8);border-block-end:1px solid var(--stroke);
}
.list-item:last-child{border-block-end:none}
.list-item .thumb{
  inline-size:60px;block-size:60px;border-radius:var(--radius-12);overflow:clip;border:1px solid var(--stroke);background:#f3f5f4;
}
.list-item .thumb img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.item-info{flex:1;min-inline-size:0;display:flex;flex-direction:column}
.item-info .prod{font-weight:700;margin-bottom:.25rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-info .empresa{font-size:var(--fs-12);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{background:var(--accent);color:color-mix(in srgb,var(--brand) 65%,black);font-weight:800;padding:.35rem .7rem;border-radius:999px;font-size:var(--fs-12)}

.btn-flat{
  border:none;outline:none;cursor:pointer;padding:.9rem 1.15rem;border-radius:999px;
  background:var(--accent);color:var(--brand);font-weight:800;
  display:inline-flex;align-items:center;gap:.5rem;transition:transform .06s ease,filter .2s ease;
}
.btn-flat:is(:hover,:focus-visible){filter:brightness(1.08)}
.btn-flat:active{transform:scale(.97)}

.quotes-card{padding:0;background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius-16);overflow:hidden;box-shadow:var(--shadow-sm)}
.quotes-card .tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;padding:.6rem;border-block-end:1px solid var(--stroke)}
.tab-btn{
  border:none;background:#eef3f1;color:#073a3f;padding:.55rem .4rem;border-radius:var(--radius-12);
  font-weight:700;font-size:var(--fs-12);display:flex;align-items:center;justify-content:center;gap:.4rem;
  cursor:pointer;transition:filter .2s ease,transform .06s ease;
}
.tab-btn:hover{filter:brightness(1.05)}
.tab-btn:active{transform:scale(.98)}
.tab-btn.active{background:var(--brand);color:#fff;outline:2px solid color-mix(in srgb,var(--brand) 30%,transparent);outline-offset:2px}
.table-wrap{padding:.65rem .75rem .9rem}
.table{inline-size:100%;border-collapse:collapse;font-size:var(--fs-14)}
.table :where(th,td){text-align:left;padding:.6rem .4rem;border-block-end:1px solid var(--stroke)}
.table thead th{font-size:var(--fs-12);color:var(--muted);font-weight:700;text-transform:uppercase}
.table tbody tr:last-child td{border-block-end:none}
.foot-note{margin-top:.35rem;font-size:var(--fs-12);color:var(--muted)}

.tabbar{
  position:fixed;inset-inline:50% auto;translate:-50% 0;inset-block-end:0;
  inline-size:100%;max-inline-size:var(--app-max);
  background:linear-gradient(to top,rgba(255,255,255,.92),rgba(255,255,255,.88));
  -webkit-backdrop-filter:saturate(1.2) blur(10px);
  backdrop-filter:saturate(1.2) blur(10px);
  border-block-start:1px solid var(--stroke);
  box-shadow:0 -6px 20px rgba(0,0,0,.08);
  display:grid;grid-template-columns:repeat(5,1fr);
  padding:.25rem .25rem calc(env(safe-area-inset-bottom) + .25rem);z-index:30;
}
@media (prefers-color-scheme:dark){
  .tabbar{background:linear-gradient(to top,rgba(15,31,34,.96),rgba(26,45,48,.92));box-shadow:0 -4px 15px rgba(0,0,0,.5)}
}
.tab{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.25rem;min-block-size:58px;padding:.45rem .25rem;border-radius:var(--radius-12);
  color:var(--muted);text-decoration:none;font-size:var(--fs-12);
  -webkit-tap-highlight-color:transparent;transition:background .15s ease,color .15s ease,transform .06s ease;
}
.tab i{font-size:1.25rem;line-height:1}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover){.tab:hover{background:#f3f4f6;color:var(--brand)}}
.tab:active{transform:scale(.98)}
.tab.active{background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand);font-weight:700}
.tab.active::before{content:"";position:absolute;inset-block-start:0;inset-inline:20% 20%;block-size:3px;border-radius:3px;background:var(--brand)}
@media (max-width:340px){.tab span{display:none}}

.drawer{
  position:fixed;inset:0 auto 0 0;inline-size:min(78%,320px);
  background:var(--card);border-inline-end:1px solid var(--stroke);
  translate:-100% 0;transition:translate .25s ease;z-index:40;
  display:flex;flex-direction:column;box-shadow:var(--shadow-md);
}
.drawer.open{translate:0 0}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-8);border-block-end:1px solid var(--stroke)}
.drawer__head h2{margin:0;font-size:var(--fs-16);font-weight:800}
.drawer__nav{display:flex;flex-direction:column;padding:.5rem .5rem 1rem;gap:.25rem;overflow:auto;block-size:100%}
.drawer__link{display:flex;align-items:center;gap:.65rem;padding:.75rem .75rem;border-radius:var(--radius-12);color:#1f2937;text-decoration:none;transition:background .2s ease,color .2s ease}
.drawer__link i{inline-size:20px;text-align:center;color:var(--brand)}
.drawer__link:hover{background:#f3f7ef;color:var(--brand)}
.drawer__link[aria-current="page"]{background:var(--brand);color:#fff;font-weight:700}
.drawer hr{border:none;border-block-start:1px solid var(--stroke);margin:.6rem .5rem}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.15);backdrop-filter:blur(1px);z-index:35;opacity:0;transition:opacity .2s ease}
.backdrop.show{opacity:1}

.inv-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .2rem .75rem}
.inv-header h2{margin:0;font-size:var(--fs-20);font-weight:800}
.back-btn:hover{background:#eef3f1}

.search-input{
  display:flex;align-items:center;gap:.6rem;background:color-mix(in srgb,var(--accent) 14%,#fff);
  border:1px solid var(--stroke);padding:.85rem .9rem;border-radius:var(--radius-16);margin:.25rem 0 1rem;
}
.search-input i{color:var(--brand);font-size:1.1rem}
.search-input input{border:none;outline:none;background:transparent;inline-size:100%;font-size:var(--fs-16);color:#234}

.chips{display:flex;gap:.6rem;flex-wrap:wrap;margin:.25rem 0 1rem}
.chip{border:none;background:color-mix(in srgb,var(--accent) 14%,#fff);color:#123;font-weight:700;padding:.6rem .9rem;border-radius:14px;cursor:pointer;transition:filter .2s}
.chip:hover{filter:brightness(1.05)}
.chip.active{background:var(--brand);color:#fff}

.inv-list{display:flex;flex-direction:column;gap:.75rem}
.inv-item{display:flex;align-items:center;gap:.85rem;padding:.35rem .15rem;border-block-end:1px solid var(--stroke)}
.inv-item:last-child{border-block-end:none}
.thumb-lg{inline-size:clamp(60px,14vw,78px);block-size:clamp(60px,14vw,78px);border-radius:var(--radius-14);overflow:clip;border:1px solid var(--stroke);background:#f3f5f4}
.thumb-lg img{inline-size:100%;block-size:100%;object-fit:cover}
.inv-info{display:flex;flex-direction:column;gap:.25rem}
.inv-title{font-size:var(--fs-18);font-weight:800}
.inv-qty{color:var(--brand);font-weight:700}

.hidden{display:none}
.page-404{padding:2rem 1rem;text-align:center}
.page-404 .icon{font-size:4rem;color:var(--brand);margin-bottom:1rem}
.page-404 p{color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media (min-width:560px){
  .content{padding-inline:var(--sp-12)}
  .list-item .thumb{inline-size:70px;block-size:70px}
}

@media print{
  .tabbar,.drawer,.backdrop{display:none!important}
  .content{padding:var(--sp-8)}
}

/* Tarefas */
.tasks-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:.25rem .2rem .75rem;
}
.tasks-title{ margin:0; font-size:var(--fs-20); font-weight:800 }

.task-day-title{
  font-size:clamp(1.35rem, 1.1rem + 1vw, 1.6rem);
  font-weight:900; margin:1rem 0 .6rem; letter-spacing:-.02em;
}
.task-list{ display:flex; flex-direction:column; gap:.65rem }

.task-item{
  display:flex; align-items:center; gap:.9rem;
  padding:.35rem .15rem; border-radius:14px; cursor:pointer;
  user-select:none; -webkit-tap-highlight-color:transparent;
}
.task-item:hover{ background:color-mix(in srgb, var(--accent) 10%, #fff) }

.task-check{
  position:relative; inline-size:56px; block-size:56px;
  background:color-mix(in srgb, var(--accent) 16%, #fff);
  border-radius:12px; display:grid; place-items:center;
  border:1px solid var(--stroke);
}
.task-check input{ position:absolute; inset:0; opacity:0; pointer-events:auto; cursor:pointer }
.task-check .ring{
  inline-size:26px; block-size:26px; border-radius:50%;
  border:2px solid #0b1520; opacity:.8; background:#fff;
}
.task-check i{
  position:absolute; font-size:1.1rem; color:#fff;
  transform:scale(0); transition:transform .15s ease;
}

/* usa :has para aplicar estado concluído */
.task-item:has(input:checked) .ring{ background:var(--brand); border-color:var(--brand) }
.task-item:has(input:checked) .task-title{ text-decoration:line-through; color:var(--muted) }
.task-item:has(input:checked) .task-sub{ color:var(--muted) }
.task-item:has(input:checked) .task-check i{ transform:scale(1) }

.task-info{ display:flex; flex-direction:column }
.task-title{ font-size:clamp(1.05rem, 1rem + .6vw, 1.3rem); font-weight:800 }
.task-sub{ color:var(--brand); font-weight:700; margin-top:.15rem }

/* topo: reusa campos existentes */
.tasks-top .menu-btn,.tasks-top .icon-btn{ color:var(--text) }

/* ==================== FINANÇAS – Responsivo PRO ==================== */
/* Cole ao FINAL do seu app.css (substitui/aperfeiçoa as regras da tela) */

/* Raiz fluida para a tela de Finanças */
:root{
  --fin-gap: clamp(.5rem, 1.5vw, .9rem);
  --fin-pad: clamp(.6rem, 2vw, 1rem);
  --fin-font-title: clamp(1.1rem, 1rem + 1.2vw, 1.6rem);
  --fin-font-amt: clamp(1rem, .9rem + 1vw, 1.3rem);
}

/* Topo + seletor de mês */
.fin-top h2{ font-size: var(--fin-font-title); }

.month-chip{
  display:flex; align-items:center; gap:.45rem; font-weight:800;
  background:color-mix(in srgb, var(--accent) 16%, #fff);
  border:1px solid var(--stroke); padding:.45rem .65rem; border-radius:999px; cursor:pointer;
}
.month-chip input{ position:absolute; opacity:0; width:0; height:0 }
.month-chip span{ min-width:72px; text-align:center; font-size:clamp(.85rem,.8rem + .4vw,1rem) }
.month-chip i{ color:var(--brand) }

/* Resumo: 1→2→3 colunas conforme a largura */
.fin-summary{
  display:grid; gap:var(--fin-gap); margin:.5rem 0 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 380px){
  .fin-summary{ grid-template-columns: repeat(2, 1fr); }
}
@container cards (min-width: 640px){
  .fin-summary{ grid-template-columns: repeat(3, 1fr); }
}
.fin-sum{ display:flex; align-items:center; gap:.6rem; padding:var(--fin-pad); }
.fin-sum i{ color:var(--brand); font-size:clamp(1.05rem, .9rem + .7vw, 1.4rem); }
.fin-sum .label{ font-size:clamp(.8rem,.75rem + .3vw,.95rem); color:var(--muted) }
.fin-sum .value{ font-size:var(--fin-font-amt) }
.fin-sum.saldo.pos i{ color:#16a34a } .fin-sum.saldo.neg i{ color:#dc2626 }

/* Abas em pílula com rolagem horizontal quando apertado */
.fin-pills{
  display:flex; gap:.5rem; padding:.5rem .15rem .6rem;
  border-bottom:1px solid var(--stroke); overflow:auto; scrollbar-width:none;
}
.fin-pills::-webkit-scrollbar{ display:none; }
.pill{
  border:none; padding:.55rem .95rem; border-radius:999px; font-weight:800;
  background:#eef3f1; color:#073a3f; cursor:pointer;
  font-size:clamp(.9rem,.85rem + .4vw,1.05rem);
  transition:filter .2s ease, transform .06s ease;
  white-space:nowrap;
}
.pill.active{ background:var(--brand); color:#fff }
.pill:active{ transform:scale(.98) }

/* Cartão “visão” */
.fin-hero .row{
  display:flex; align-items:center; justify-content:space-between;
  padding:.5rem 0; border-bottom:1px dashed var(--stroke);
}
.fin-hero .row:last-child{ border-bottom:none }
.fin-hero .row strong{ font-size:var(--fin-font-amt) }
.fin-hero .row.total strong.pos{ color:#16a34a } .fin-hero .row.total strong.neg{ color:#dc2626 }

/* Listas de lançamentos: responsivas e legíveis */
.fin-list{ list-style:none; margin:0; padding:0; }
.fin-row{
  display:grid; align-items:center; gap:.75rem;
  grid-template-columns: 1fr auto 14px;
  padding: clamp(.75rem, .6rem + .7vw, 1.1rem) 0;
  border-bottom:1px solid var(--stroke);
}
.fin-row:last-child{ border-bottom:none }

.fin-info{ display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.fin-title{
  font-size: clamp(1rem, .95rem + .6vw, 1.25rem);
  font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.badge{
  display:inline-block; font-size:clamp(.7rem,.65rem + .3vw,.85rem); font-weight:800; color:var(--brand);
  background:color-mix(in srgb, var(--accent) 18%, #fff);
  border:1px solid var(--stroke); padding:.2rem .55rem; border-radius:999px;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.badge.alt{ color:#0b1520; background:#fff3f0; border-color:#ffe1d6 }
.fin-amt{ font-weight:900; font-size:var(--fin-font-amt); }
.fin-amt.neg{ color:#b91c1c }
.chevron{ color:var(--muted); font-size:.9rem }

/* Em telas largas (paisagem/tablet estreito), listas em 2 colunas */
@media (min-width: 640px){
  .fin-pane[data-pane="receitas"] .fin-list,
  .fin-pane[data-pane="despesas"] .fin-list{
    display:grid; grid-template-columns: 1fr 1fr; column-gap:1rem; row-gap:.25rem;
  }
  .fin-pane .fin-row{ padding:.9rem 0; }
}

/* Barra de total fixa adaptável */
.fin-totalbar{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom: calc(64px + env(safe-area-inset-bottom));
  inline-size:100%; max-inline-size:var(--app-max);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: .6rem 1rem;
  background: linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.88));
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  backdrop-filter: saturate(1.2) blur(8px);
  border-top:1px solid var(--stroke);
}
@media (prefers-color-scheme:dark){
  .fin-totalbar{
    background: linear-gradient(180deg,rgba(15,31,34,.96),rgba(26,45,48,.9));
    box-shadow: 0 -4px 12px rgba(0,0,0,.4);
  }
}
.fin-totalbar span{ font-weight:700; color:var(--muted); }
.fin-totalbar strong{ font-size: clamp(1.05rem, .95rem + .8vw, 1.4rem); }
.fin-totalbar strong.pos{ color:#16a34a } .fin-totalbar strong.neg{ color:#dc2626 }

/* FAB posicionado para não colidir com a totalbar/tabbar e responsivo */
.fin-fab{
  inline-size: clamp(56px, 6.5vw, 64px);
  block-size: clamp(56px, 6.5vw, 64px);
  right: calc(50% - min(50%, var(--app-max)/2) + 16px);
  bottom: calc(110px + env(safe-area-inset-bottom));
  border-radius: 18px;
  background:#46d642; color:#0b1520; border:none; cursor:pointer;
  display:grid; place-items:center; font-size:clamp(1.1rem,1rem + .4vw,1.3rem);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  transition: transform .06s ease, filter .2s ease;
}
.fin-fab:active{ transform: scale(.97) }

/* Modo escuro: toques sutis */
@media (prefers-color-scheme:dark){
  .pill{ background:#203436; color:#e8f3f1 }
  .pill.active{ background:var(--brand); color:#fff }
  .badge{ background:#173033; border-color:#1f3b3f; color:#cde6e3 }
  .badge.alt{ background:#3a2320; border-color:#5b3a35; color:#ffe6df }
}

/* Acessibilidade e movimento reduzido */
@media (prefers-reduced-motion:reduce){
  .fin-fab, .pill, .fin-totalbar{ transition:none }
}

/* Paisagem muito baixa (teclado/landscape): comprimir elementos */
@media (max-height: 540px){
  .fin-summary{ margin:.25rem 0 .5rem }
  .fin-totalbar{ padding:.5rem .9rem; bottom: calc(60px + env(safe-area-inset-bottom)) }
}

/* Safe-area extra grande (iPhone com notch): ajusta paddings */
@supports (padding:max(0px)){
  .fin-totalbar{ padding-inline: max(1rem, env(safe-area-inset-left)); }
}

/* ====== RELATÓRIOS — UI/UX PRO ====== */

/* Topo fixo com leve elevação */
.subtop{
  backdrop-filter: saturate(1.2) blur(6px);
  -webkit-backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--stroke);
}

/* Abas locais (somente nesta página) */
#repTabs{
  display: flex; gap: .8rem; padding: .55rem .15rem .7rem;
  border-bottom: 1px solid var(--stroke);
  overflow-x: auto; scrollbar-width: none;
}
#repTabs::-webkit-scrollbar{ display: none }
#repTabs .pill{
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  color: #073a3f;
  padding: .6rem 1rem;
  border-radius: 999px;
  font-weight: 800; white-space: nowrap;
  transition: filter .2s ease, transform .06s ease, background .2s ease, color .2s ease;
}
#repTabs .pill.active{
  background: var(--brand); color: #fff; border-color: transparent;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
#repTabs .pill:active{ transform: scale(.98) }

/* Cards com estética premium */
.rep-card{
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-md);
  padding: 1rem 1rem .85rem;
  margin: 1rem 0;
  transition: transform .2s ease, box-shadow .3s ease, border-color .2s ease;
}
.rep-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
  border-color: color-mix(in srgb, var(--brand) 20%, var(--stroke));
}

/* Título e KPIs */
.rep-subtitle{
  margin: .25rem 0 .85rem;
  font-weight: 800;
  font-size: clamp(1rem, .95rem + .6vw, 1.15rem);
  letter-spacing: -.01em;
}
.rep-kpi{
  display: flex; align-items: baseline; gap: 1rem;
  margin: .2rem 0 .6rem;
}
.rep-value{
  font-weight: 900;
  font-size: clamp(1.8rem, 1.3rem + 3.5vw, 2.7rem);
  line-height: 1;
}
.rep-delta{ font-weight: 800; color: var(--muted) }
.rep-delta.pos{ color:#178638 } .rep-delta.neg{ color:#b91c1c }

/* Área do gráfico */
.rep-chart-wrap{
  position: relative; inline-size: 100%;
  block-size: clamp(190px, 34vw, 240px);
  border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, rgba(0,76,84,.05), rgba(0,76,84,.02));
}
/* shimmer rápido enquanto carrega (quase imperceptível) */
.rep-chart-wrap::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.4) 35%, transparent 70%);
  transform: translateX(-100%); animation: repShimmer 1.2s ease infinite;
  pointer-events: none;
}
.rep-chart-wrap canvas{ position: relative; z-index:1 }
@keyframes repShimmer{ to{ transform: translateX(100%) } }

/* Eixo “falso” sob o gráfico para reforçar leitura */
.rep-axis{
  display: flex; justify-content: space-between; align-items: center;
  color: var(--brand); font-weight: 800;
  margin-top: .5rem; gap: .5rem;
  font-size: clamp(.78rem, .72rem + .3vw, .9rem);
}

/* Pane responsivo */
.rep-pane{ padding-bottom: .25rem }
.rep-placeholder{ color: var(--muted); margin: .5rem 0 0 }

/* Grid em telas maiores: 2 cards lado a lado quando couber */
@media (min-width: 640px){
  .rep-pane[data-pane="cultura"]{
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
    align-items: start;
  }
  .rep-pane[data-pane="cultura"] .rep-card:nth-child(3){
    grid-column: 1 / -1; /* o de linha ocupa toda a largura */
  }
}

/* Modo escuro refinado */
@media (prefers-color-scheme: dark){
  #repTabs .pill{ background:#203436; color:#e8f3f1; border-color:#1f3b3f }
  #repTabs .pill.active{ background:var(--brand); color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.45) }
  .rep-chart-wrap{ background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); }
  .rep-axis{ color: #9fd0c7 }
}

/* Acessibilidade e movimento reduzido */
@media (prefers-reduced-motion: reduce){
  .rep-card, #repTabs .pill, .rep-chart-wrap::before{ transition:none; animation:none }
}

/* Ajustes finos para telas muito baixas (paisagem/teclado aberto) */
@media (max-height: 560px){
  .rep-card{ margin: .6rem 0 }
  .rep-chart-wrap{ block-size: 180px }
}