:root {
  --azul-principal: #0b2d5c;
  --azul-secundario: #0057b8;
  --verde-principal: #087a2f;
  --verde-secundario: #13a046;
  --cinza-texto: #333333;
  --cinza-claro: #f4f7fb;
  --branco: #ffffff;
  --borda: #d9e2ef;
  --sombra: 0 12px 30px rgba(11,45,92,.10);
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--cinza-claro);color:var(--cinza-texto)}
.page{max-width:1180px;margin:0 auto;padding:22px 18px}
.tabbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.tab,.action{border:1px solid var(--azul-secundario);border-radius:10px;padding:8px 12px;background:#fff;color:var(--azul-secundario);font-weight:800;cursor:pointer}
.tab.active{background:var(--azul-secundario);color:#fff}
.config-panel{background:#fff;border:1px solid var(--borda);border-radius:12px;padding:14px;margin-bottom:14px}
.config-panel h2{margin:0 0 10px;color:var(--azul-principal)}
.config-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.config-grid label{display:flex;flex-direction:column;font-size:13px;font-weight:700;color:#46608a;gap:4px}
.config-grid input{border:1px solid #bfd0ea;border-radius:8px;padding:8px}
#alerts{margin-top:10px;font-weight:700;color:#a10f0f}
.page-header{text-align:center;margin-bottom:20px}
.page-header h1{color:var(--azul-principal);font-size:clamp(20px,3.2vw,36px);line-height:1.05;margin:0;font-weight:900;white-space:nowrap}
.page-header p{margin:6px 0 0;font-size:clamp(13px,1.6vw,18px);font-style:italic;color:var(--azul-principal)}
.subtitle-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:8px}
.subtitle-row .line{width:90px;height:2px;background:var(--azul-secundario)}
.infographic-card{background:var(--branco);border:2px solid var(--azul-secundario);border-radius:16px;box-shadow:var(--sombra);padding:16px}
.flow-section{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:start}
.brand-logo img{width:180px;max-width:100%;height:auto}
.flow-content{display:flex;flex-direction:column;align-items:center}
.flow-step{width:min(100%,680px);min-height:78px;display:grid;grid-template-columns:62px 44px 1fr;gap:12px;align-items:center;border-radius:14px;border:2px solid;padding:10px 14px;background:#fff}
.flow-step.blue{border-color:var(--azul-secundario);background:#f9fbff}
.flow-step.green{border-color:var(--verde-principal);background:#f4fff7}
.icon-main,.icon-circle{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--azul-secundario);color:#fff;font-size:20px}
.green .icon-main,.green .icon-circle,.green-icon{background:var(--verde-principal)}
.step-number{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--azul-secundario);color:#fff;font-size:20px;font-weight:900}
.green-number{background:var(--verde-principal)}
.step-content strong{display:block;font-size:clamp(15px,1.4vw,22px);color:#111}
.step-content span{display:block;font-size:clamp(18px,2.2vw,30px);color:var(--azul-secundario);font-weight:900}
.green .step-content span{color:var(--verde-principal)}
.flow-arrow{font-size:28px;font-weight:900;line-height:1;margin:2px 0;color:var(--azul-secundario)}
.flow-arrow.green{color:var(--verde-principal)}
.aprovemat-result-card{width:min(100%,680px);display:grid;grid-template-columns:56px 150px 1fr;gap:12px;align-items:center;border-radius:14px;border:2px solid var(--verde-principal);background:#f4fff7;padding:10px 12px}
.aprovemat-logo-inside img{width:130px;max-width:100%;height:auto;object-fit:contain}
.aprovemat-result-text h2{margin:0;font-size:22px;color:var(--verde-principal);font-weight:900}
.aprovemat-result-text p{margin:4px 0;font-size:16px;font-weight:700}
.aprovemat-result-text h3{margin:0;font-size:20px;color:var(--verde-principal);font-weight:900}
.results-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:14px;margin-top:14px}
.table-card,.chart-card{border:2px solid var(--azul-secundario);border-radius:14px;overflow:hidden;background:#fff}
.card-header{padding:10px;font-size:15px;font-weight:800;color:#fff;text-align:center}
.card-header.blue{background:var(--azul-secundario)}
.card-header.green{background:var(--verde-principal)}
table{width:100%;border-collapse:collapse}
.table-wrapper{overflow-x:auto}
th,td{padding:9px 8px;border:1px solid var(--borda);text-align:center;font-size:13px}
th{color:var(--azul-principal);background:#f5f9ff;font-weight:900}
td.money{color:var(--verde-principal);font-weight:900;font-size:16px}
.chart-body{padding:10px;height:220px;max-height:220px}
.chart-body canvas{width:100%!important;height:100%!important}
.footer-note{margin-top:14px;border:2px solid var(--azul-secundario);border-radius:12px;background:#f5f9ff;display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;padding:10px 12px}
.note-icon{width:34px;height:34px;border-radius:50%;background:var(--azul-principal);color:#fff;display:grid;place-items:center;font-weight:900;font-size:16px}
.footer-note p{margin:0;font-size:13px;font-weight:700}
.split-flow{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.split-card{display:grid;grid-template-columns:50px 1fr;gap:10px;align-items:center;border-radius:12px;padding:10px;border:2px solid;background:#fff}
.aprovemat-card{border-color:var(--azul-secundario);background:#f6fbff}
.associacao-card{border-color:var(--verde-principal);background:#f4fff7}
.split-card strong{display:block;font-size:15px;color:var(--azul-principal)}
.associacao-card strong{color:var(--verde-principal)}
.split-card p{margin:2px 0;font-size:13px;font-weight:700}
.split-card h3{margin:0;font-size:16px;color:var(--verde-principal)}
.money-divider{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin:14px 0}
.money-divider span{height:3px;background:var(--azul-principal)}
.money-icon{width:30px;height:30px;border-radius:50%;background:var(--azul-principal);color:#fff;display:grid;place-items:center;font-size:16px;font-weight:900}
@media (max-width:900px){.flow-section{grid-template-columns:1fr}.brand-logo{text-align:center}.results-grid{grid-template-columns:1fr}.config-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.page-header h1{white-space:normal}.page{padding:14px 10px}.infographic-card{padding:14px}.flow-step{grid-template-columns:1fr;text-align:center;justify-items:center}.split-flow{grid-template-columns:1fr}.split-card{grid-template-columns:1fr;text-align:center;justify-items:center}.footer-note{grid-template-columns:1fr;text-align:center;justify-items:center}.table-wrapper{overflow-x:auto}table{min-width:520px}.config-grid{grid-template-columns:1fr}}
@media print{.tabbar,.config-panel{display:none!important}}

.config-panel{display:none!important;}


.editable-inline{cursor:text; border-bottom:1px dotted #0b43b5; display:inline-block; min-width:12px}
.inline-editor{font:inherit; color:inherit; border:1px solid #0b43b5; border-radius:4px; padding:1px 4px; width:min(280px, 90vw); background:#fff}


/* Fix association flow readability */
#view-associacao .flow-step{grid-template-columns:62px 1fr !important;}
#view-associacao .step-content strong{font-size:clamp(22px,2vw,30px)!important;line-height:1.15!important;}
#view-associacao .step-content span{font-size:clamp(34px,3vw,44px)!important;line-height:1.1!important;}
#view-associacao .brand-logo{display:flex;justify-content:center;}
#view-associacao .brand-logo img{width:170px!important;height:auto;object-fit:contain;}
#view-associacao .flow-section{grid-template-columns:220px 1fr!important;align-items:start!important;}
#view-associacao .flow-content{align-items:stretch!important;}
#view-associacao .flow-step{width:100%!important;max-width:none!important;}
@media (max-width:900px){
  #view-associacao .flow-section{grid-template-columns:1fr!important;}
  #view-associacao .brand-logo{justify-content:flex-start!important;}
}


/* Arrow centering fixes */
.flow-content .flow-arrow {
  width: 100%;
  text-align: center;
  align-self: center;
}
#view-associacao .flow-content .flow-arrow {
  width: 100%;
  text-align: center;
}



/* KPI button effects (strong visual) */
.aprovemat-result-card,
.split-card {
  position: relative;
  cursor: pointer;
  transition: transform .10s ease, box-shadow .10s ease, border-color .10s ease, background-color .10s ease, filter .10s ease;
}

/* blue KPI */
.aprovemat-card,
.split-card.aprovemat-card {
  border-color: #0b43b5 !important;
}
.aprovemat-card:hover,
.split-card.aprovemat-card:hover {
  transform: translateY(-2px) scale(1.012);
  border-color: #0a58e0 !important;
  background: linear-gradient(180deg, #f8fbff 0%, #eaf3ff 100%) !important;
  box-shadow: 0 0 0 2px rgba(10,88,224,.25), 0 10px 22px rgba(11,67,181,.24);
}

/* green KPI */
.associacao-card,
.aprovemat-result-card {
  border-color: #0b8a44 !important;
}
.associacao-card:hover,
.aprovemat-result-card:hover {
  transform: translateY(-2px) scale(1.012);
  border-color: #14a34f !important;
  background: linear-gradient(180deg, #f3fff8 0%, #e4f9ee 100%) !important;
  box-shadow: 0 0 0 2px rgba(20,163,79,.25), 0 10px 22px rgba(8,122,47,.24);
}

.aprovemat-result-card:active,
.split-card:active {
  transform: translateY(0) scale(1);
  box-shadow: 0 0 0 1px rgba(11,45,92,.22), 0 3px 10px rgba(11,45,92,.16);
}

.aprovemat-result-card:hover .step-label,
.split-card:hover strong {
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* Explicit KPI effects for all KPI buttons */
.kpi-btn{
  cursor:pointer;
  transition:transform .10s ease, box-shadow .10s ease, border-color .10s ease, background-color .10s ease;
}
.kpi-btn:hover{
  transform:translateY(-2px) scale(1.01);
}
.kpi-btn:active{
  transform:translateY(0) scale(1);
}

.kpi-blue:hover{
  border-color:#0a58e0 !important;
  background:linear-gradient(180deg,#f8fbff 0%,#eaf3ff 100%) !important;
  box-shadow:0 0 0 2px rgba(10,88,224,.25),0 10px 22px rgba(11,67,181,.24) !important;
}

.kpi-green:hover{
  border-color:#14a34f !important;
  background:linear-gradient(180deg,#f3fff8 0%,#e4f9ee 100%) !important;
  box-shadow:0 0 0 2px rgba(20,163,79,.25),0 10px 22px rgba(8,122,47,.24) !important;
}


/* Explicit hover effects for ALL marked blocks */
.fx-block,
.kpi-btn{
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease, filter .12s ease;
}
.fx-block:hover,
.kpi-btn:hover{
  transform:translateY(-2px) scale(1.008);
}
.fx-block:active,
.kpi-btn:active{
  transform:translateY(0) scale(1);
}

.fx-blue:hover{
  border-color:#0a58e0 !important;
  background:linear-gradient(180deg,#f8fbff 0%,#eaf3ff 100%) !important;
  box-shadow:0 0 0 2px rgba(10,88,224,.22), 0 10px 22px rgba(11,67,181,.22) !important;
}

.fx-green:hover{
  border-color:#14a34f !important;
  background:linear-gradient(180deg,#f3fff8 0%,#e4f9ee 100%) !important;
  box-shadow:0 0 0 2px rgba(20,163,79,.22), 0 10px 22px rgba(8,122,47,.22) !important;
}

/* keep KPI-specific differentiation too */
.kpi-blue:hover{
  border-color:#0a58e0 !important;
  background:linear-gradient(180deg,#f8fbff 0%,#eaf3ff 100%) !important;
  box-shadow:0 0 0 2px rgba(10,88,224,.25),0 10px 22px rgba(11,67,181,.24) !important;
}
.kpi-green:hover{
  border-color:#14a34f !important;
  background:linear-gradient(180deg,#f3fff8 0%,#e4f9ee 100%) !important;
  box-shadow:0 0 0 2px rgba(20,163,79,.25),0 10px 22px rgba(8,122,47,.24) !important;
}


/* Mobile fixes: KPI with logo + table fit */
@media (max-width: 640px){
  .aprovemat-result-card{
    grid-template-columns: 44px 84px 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
    align-items: center !important;
  }
  .aprovemat-logo-inside img{
    width: 78px !important;
    max-width: 78px !important;
  }
  .aprovemat-result-text h2{font-size: 14px !important; line-height: 1.1 !important;}
  .aprovemat-result-text p{font-size: 11px !important; line-height: 1.15 !important; margin: 2px 0 !important;}
  .aprovemat-result-text h3{font-size: 11px !important; line-height: 1.15 !important;}

  .table-wrapper{overflow-x: hidden !important;}
  table{
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed !important;
  }
  th, td{
    font-size: 10px !important;
    padding: 6px 4px !important;
    word-break: break-word;
  }
  .card-header{font-size: 12px !important; padding: 8px !important;}
}