/* APS Mobile – v2025-10-20 (compacto) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ========== 1) Tokens ========= */
:root{
  --bg:#F7F8FC; --fg:#1D2330; --muted:#8A94A6; --card:#FFFFFF; --line:#E8EBF0;
  --ipojuca-azul:#004b8e; --ipojuca-amarelo:#f7b500;
  --a:#0073e6; --b:#28a745; --c:#ffc107; --d:#dc3545;
}
body.dark-theme{ --bg:#121212; --fg:#FFFFFF; --muted:#8A94A6; --card:#1E1E1E; --line:#2C2C2C; }

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; height:100%;
  background:var(--bg) url('background.webp'); color:var(--fg);
  font-family:'Poppins',sans-serif; font-size:15px; line-height:1.5;
  transition:background-color .3s,color .3s;
}

/* ========== 2) Desktop shell ========= */
@media (min-width:800px){
  body{ display:flex; justify-content:center; align-items:center; padding:20px; }
  #splash-screen,#app-wrapper{
    max-width:800px; width:100%; height:95vh; max-height:1200px;
    background-image:url('background.webp'); border-radius:24px;
    box-shadow:0 20px 50px rgba(0,0,0,.1); overflow:hidden; position:relative;
  }
  html{ font-size:18px; }
}

/* ========== 3) Splash ========= */
#splash-screen{ display:flex; flex-direction:column; justify-content:center; align-items:center; height:100%; text-align:center; padding:20px; background:var(--bg); }
.splash-content{ flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; margin-top:24vh; }
.splash-logo{ width:95%; max-width:400px; height:auto; margin-bottom:10vh; }
.splash-button{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  font-weight:700; font-size:1.2rem; color:#fff; border:none; border-radius:16px; padding:18px 45px;
  background:linear-gradient(90deg, var(--ipojuca-azul) 0%, #006acb 100%);
  box-shadow:0 5px 15px rgba(0,75,142,.3); transition:all .3s ease;
}
.splash-button:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,75,142,.4); }
.update-info{ margin-top:15px; color:var(--muted); font-size:.9rem; }
.update-info span{ color:var(--ipojuca-azul); font-weight:600; }
.splash-footer{ color:var(--muted); font-size:.7rem; padding:20px 0; line-height:1.6; }
.splash-footer p{ margin:2px 0; }

/* ========== 4) Loader ========= */
.loader-overlay{ position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; justify-content:center; align-items:center; color:var(--fg); background:rgba(255,255,255,.7); backdrop-filter:blur(5px); }
body.dark-theme .loader-overlay{ background:rgba(0,0,0,.7); }

/* ========== 5) App Frame ========= */
#app-wrapper{ display:flex; flex-direction:column; height:100%; }
.topbar{ position:sticky; top:0; z-index:10; background:var(--card); padding:12px 16px; border-bottom:1px solid var(--line); transition:all .3s; }
.brand{ display:flex; align-items:center; gap:8px; }
.header-logo{ height:32px; }
.theme-button{
  margin-left:auto; background:var(--bg); border:1px solid var(--line); cursor:pointer; padding:6px;
  display:flex; align-items:center; justify-content:center; color:var(--muted); border-radius:50%; transition:all .2s;
}
#btn-sair{ margin-left:8px; }
.theme-button:hover{ color:var(--ipojuca-azul); border-color:var(--ipojuca-azul); }
.theme-button svg{ width:18px; height:18px; }
.theme-button .icon-sun{ display:none; } .theme-button .icon-moon{ display:block; }
body.dark-theme .theme-button .icon-sun{ display:block; } body.dark-theme .theme-button .icon-moon{ display:none; }

.demo-banner{ background:var(--d); color:#fff; text-align:center; padding:4px; font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.demo-banner p{ margin:0; }

.container{ padding:16px; flex:1; overflow-y:auto; padding-bottom:170px; }
.tab-pane{ display:none; } .tab-pane.active{ display:block; animation:fadeIn .4s ease; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* ========== 6) Filtros ========= */
.filters-container{
  position:static; z-index:9;
  padding:14px 0; width:100%;
  background:linear-gradient(135deg, var(--ipojuca-azul) 0%, var(--ipojuca-amarelo) 150%);
  border-bottom:1px solid rgba(255,255,255,.25);
}
.filters{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 20px; }
.field{ display:flex; flex-direction:column; gap:5px; color:#fff; font-size:.8rem; font-weight:600; }
.field span{ text-shadow:1px 1px 2px rgba(0,0,0,.4); }
.field select{
  appearance:none; border-radius:8px; padding:10px;
  border:1px solid rgba(255,255,255,.3);
  outline:none; background:rgba(0,0,0,.2);
  color:#fff; font-weight:600; font-size:.9rem; transition:all .3s;
}
.field select:focus{ border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.3); }

@media (min-width:800px){
  #app-wrapper{ overflow:hidden; }
  .topbar{ border-bottom:none; padding:16px 20px; }
  .filters-container{ border-radius:0 0 0px 0px; padding:14px 20px; }
  .filters{ gap:14px; }
  .demo-banner{ margin:0; border-radius:0; padding:6px 20px; }
  .container{ padding:16px 20px 170px; }
}

/* Desktop: selects brancos */
@media (min-width:800px){
  .filters-container .field select{
    background:#fff !important; color:#111 !important;
    border:1px solid rgba(0,0,0,.25) !important; box-shadow:0 1px 0 rgba(0,0,0,.04) inset;
  }
  .filters-container .field select option{ background:#fff; color:#111; }
  .filters-container .field select:focus{ border-color:#111 !important; box-shadow:0 0 0 2px rgba(0,0,0,.15); }
}

/* ========== 7) Card “Sobre o indicador” (grid fixo) ========= */
.about{
  display:grid; column-gap:12px; align-items:start; color:var(--fg);
  grid-template-columns:24px 1fr; grid-template-rows:auto auto auto;
  grid-template-areas:"icon title" "icon sub" "icon serie";
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:12px 16px; margin-bottom:16px; transition:all .3s;
}
.about-icon{ grid-area:icon; width:20px; height:20px; color:var(--muted); align-self:start; }
#indicador-texto{ grid-area:title; margin:0; font-weight:700; text-align:left; }
.about-subtext{
  grid-area:sub; display:block; margin:2px 0 0 0; font-size:11px; line-height:1.3;
  color:#6b7280; white-space:pre-line;
}
body.dark-theme .about-subtext{ color:#9aa4b2; }
.series-info-inline{
  grid-area:serie; margin-top:6px;
  display:flex; align-items:center; gap:10px;
  background:rgba(0,0,0,.03); border:1px solid var(--line); border-left:4px solid; margin-left:-36px;
  border-radius:8px; padding:6px 10px; font-weight:600; font-size:.9rem;
}
.series-info-inline .status-icon{ width:16px; height:16px; flex:0 0 16px; }
.series-info-inline .series-label{ margin-right:4px; }
.series-info-inline.serie-a{ border-left-color:var(--a); color:var(--a); }
.series-info-inline.serie-b{ border-left-color:var(--b); color:var(--b); }
.series-info-inline.serie-c{ border-left-color:var(--c); color:var(--c); }
.series-info-inline.serie-d{ border-left-color:var(--d); color:var(--d); }

/* ========== 8) Lista ========= */
.item{ display:flex; align-items:center; gap:12px; padding:14px 10px; border-bottom:1px solid var(--line); cursor:pointer; }
.item:first-child{ border-top:1px solid var(--line); }
.item:active{ background:rgba(0,0,0,.02); }
.left{ flex:1; min-width:0; }
.title{ font-weight:600; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sub{ font-size:.85rem; color:var(--muted); }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; font-size:.8rem; }
.right{ text-align:right; min-width:80px; }
.value{ font-weight:700; font-size:1rem; display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.status-icon{ width:16px; height:16px; }
.var{ font-size:.8rem; font-weight:600; margin-top:4px; }
.var.pos{ color:#1f883d; } .var.neg{ color:#d1242f; } .var.neu{ color:var(--muted); }
body.dark-theme .var.pos{ color:#34d058; } body.dark-theme .var.neg{ color:#f85149; }
.progress-bar{ background-color:var(--line); border-radius:4px; height:4px; margin-top:6px; overflow:hidden; }
.progress-bar-fill{ height:100%; border-radius:4px; transition:width .5s ease-out; }
.progress-bar-fill.serie-a{ background-color:var(--a); }
.progress-bar-fill.serie-b{ background-color:var(--b); }
.progress-bar-fill.serie-c{ background-color:var(--c); }
.progress-bar-fill.serie-d{ background-color:var(--d); }
.value .serie-a{ color:var(--a); } .value .serie-b{ color:var(--b); } .value .serie-c{ color:var(--c); } .value .serie-d{ color:var(--d); }

/* ========== 9) Bottom Nav ========= */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:2;
  display:flex; justify-content:space-around; gap:8px;
  background:var(--card); border-top:1px solid var(--line);
  padding:12px 8px calc(12px + env(safe-area-inset-bottom)); margin-bottom:32px; transition:all .3s;
}
@media (min-width:800px){
  .bottom-nav{ max-width:800px; margin:0 auto; border-radius:0 0 24px 24px; bottom:12px; margin-bottom:20px; }
}
.nav-button{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid var(--line); border-bottom-width:4px; border-radius:12px;
  padding:6px 4px; cursor:pointer; color:var(--muted); text-align:center; transition:all .2s ease;
  background:linear-gradient(to bottom, var(--card) 0%, var(--line) 150%); box-shadow:0 2px 4px rgba(0,0,0,.04);
}
.nav-button.active{ transform:translateY(2px); box-shadow:inset 0 3px 5px rgba(0,0,0,.1); font-weight:700; background:var(--card); border:1px solid var(--line); padding-top:10px; padding-bottom:10px; }
.nav-icon{ margin-bottom:2px; }
.nav-concept{ font-size:.8rem; font-weight:500; line-height:1.2; }
.nav-count{ font-size:.8rem; font-weight:600; line-height:1; margin-top:4px; color:var(--fg); border-radius:6px; padding:2px 6px; }
.nav-button[data-tab="A"]{ border-bottom-color:var(--a); } .nav-button.active[data-tab="A"]{ color:var(--a); }
.nav-button[data-tab="B"]{ border-bottom-color:var(--b); } .nav-button.active[data-tab="B"]{ color:var(--b); }
.nav-button[data-tab="C"]{ border-bottom-color:var(--c); } .nav-button.active[data-tab="C"]{ color:var(--c); }
.nav-button[data-tab="D"]{ border-bottom-color:var(--d); } .nav-button.active[data-tab="D"]{ color:var(--d); }
body.dark-theme .nav-button{ background:linear-gradient(to bottom, var(--card) 0%, #111 200%); }
body.dark-theme .nav-button.active{ background:var(--card); }

/* ========== 10) Mini-legenda (1 linha, central) ========= */
.mini-legend{
  position:fixed; bottom:0; left:0; right:0; z-index:9;
  display:flex; align-items:center; justify-content:space-evenly; gap:12px;
  flex-wrap:nowrap; white-space:nowrap;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:#e9ecef; color:#444; border-top:1px solid var(--line);
  font-size:10px; line-height:1.2; font-weight:600;
}
body.dark-theme .mini-legend{ background:#161b22; color:var(--fg); }
.mini-legend .legend-lead{ display:inline-flex; align-items:center; gap:6px; margin-right:4px; font-weight:700; }
.mini-legend .legend-lead svg{ width:14px; height:14px; }
.legend-item{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.legend-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.legend-dot.a{ background:var(--a); } .legend-dot.b{ background:var(--b); }
.legend-dot.c{ background:var(--c); } .legend-dot.d{ background:var(--d); }
.legend-crit{ font-weight:700; margin-left:2px; }

@media (min-width:800px){
  .mini-legend{ left:50%; right:auto; width:100%; max-width:800px; transform:translateX(-50%); border-radius:0 0 24px 24px; padding-left:20px; padding-right:20px; }
}

/* ========== 11) Rótulos com ícone/caret ========= */
.label-with-caret,
.label-with-icon{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.label-icon{
  flex:0 0 auto;
  opacity:.95;
  color:#fff;
}
body.dark-theme .label-icon{ color:#fff; }

.blink-caret{
  display:inline-block;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-weight:700;
  transform:translateY(-1px);
  animation:caretBlink 1s steps(2,start) infinite;
}

@keyframes caretBlink{
  0%,49%{ opacity:1; }
  50%,100%{ opacity:0; }
}

/* === Fim === */