:root{
  --bg:#f5f7fa;
  --card:#ffffff;
  --accent:#0b72ff;
  --neutral:#333;
  --positive:#1a7a1a;
  --negative:#c62828;
  --muted:#6b7280;
}

*{box-sizing:border-box}

body{
  font-family: Arial, Helvetica, sans-serif;
  background:var(--bg);
  margin:0;
  padding: 20px;
  color:var(--neutral);
}

.captaLCalc{
  max-width:1000px;
  margin:40px 0 auto;
  background:var(--card);
  padding: 0;
  border-radius:10px;
  box-shadow:0 4px 14px rgba(10,20,40,0.06);
}

h1{
  margin-top:12px;
  text-align:center;
  font-size:22px;
  font-weight:800;
}

.inputs-row{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:14px;
}

.panel{
  flex:1;
  min-width:260px;
  background:#fbfdff;
  padding:14px;
  border-radius:8px;
  border:1px solid #e6eefc;
}

.panel h2{
  margin:0 0 8px 0;
  color:var(--accent);
  font-weight:800;
}

label{
  display:block;
  margin-top:10px;
  font-weight:700;
}

input[type=text], select{
  width:100%;
  padding:8px;
  border-radius:8px;
  border:1px solid #d0d7e8;
  font-size:14px;
}

.inline{
  display:flex;
  gap:8px;
  align-items:center;
}

.inline input{flex:1}

.actions{
  display:flex;
  justify-content:center;
  margin-top:14px;
}

button.primary{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:10px 18px;
  border-radius:8px;
  font-weight:800;
  cursor:pointer;
}

button.secondary{
  background:#1976d2;
  color:#fff;
  border:none;
  padding:8px 12px;
  border-radius:6px;
  cursor:pointer;
}

.resultado{
  margin-top:18px;
}

.hidden{display:none !important}

/* resultado grid */
.resultado-grid{
  display: grid;
  grid-template-areas:
    "central central"
    "alugar financiar";
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.resultado-central{
  grid-area: central;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.card.bloco:first-of-type{grid-area: alugar;}
.card.bloco:last-of-type{grid-area: financiar;}

.bigtitle{
  font-size:20px;
  font-weight:900;
  margin:0 0 10px 0;
}

.mensagemPrincipal{
  font-size:20px;
  font-weight:900;
}

.mensagemPrincipal .who{font-weight:900}
.mensagemPrincipal .value{
  display:block;
  font-size:22px;
  font-weight:900;
  margin-top:8px;
  color:var(--positive);
}

/* bloco lateral */
.bloco .blockTitle{
  text-align:center;
  font-weight:900;
  margin-bottom:8px;
}

.rowItem{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 0;
  border-top:1px solid #f1f5fb;
}
.rowItem:first-of-type{border-top:0}

.label{
  font-weight:800;
  color:var(--muted);
  font-size:14px;
}

.value{
  font-weight:900;
  font-size:16px;
}
.value.positive{color:var(--positive)}
.value.negative{color:var(--negative)}
.value.neutral{color:var(--neutral)}

/* tabela */
.tableArea{margin-top:18px}

.tableWrap{
  overflow:auto;
  border-radius:8px;
  border:1px solid #e6eefc;
}

table{
  width:100%;
  border-collapse:collapse;
}

th,td{
  padding:8px;
  border-bottom:1px solid #f1f5fb;
  text-align:center;
}

th{
  background:#f0f7ff;
  font-weight:800;
}

.tableActions{
  margin-top:8px;
  display:flex;
  justify-content:flex-end;
}

.texto-info{
  margin-top: 40px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.texto-info h2{
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 22px;
}

.texto-info h3{
  margin-top: 25px;
  margin-bottom: 8px;
  font-size: 20px;
}

.texto-info p{
  margin-bottom: 12px;
}

.texto-info ul{
  margin-bottom: 16px;
  padding-left: 25px;
}

.texto-info ul.pros li::marker{
  color: #28a745; /* verde */
  font-size: 1.4em;
}

.texto-info ul.cons li::marker{
  color: #dc3545; /* vermelho */
  font-size: 1.4em;
}

/* Ajustes específicos para telas grandes */
@media (min-width: 601px){
  .resultado{padding: 0 40px;}
  .resultado-grid{
    gap: 32px;
    position: relative;
  }
  .card.bloco{
    background: #ffffff;
    border: 1px solid #e6eefc;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(10, 20, 40, 0.05);
  }
}

/* Mobile: telas menores que 600px */
@media (max-width: 600px){
  .resultado-grid{
    grid-template-areas:
      "central"
      "alugar"
      "financiar";
    grid-template-columns: 1fr;
    gap: 12px;
    overflow-x: auto;
  }
  .resultado-central{
    text-align: center;
    justify-content: center;
    align-items: center;
  }
  .card.bloco{
    width: 100%;
  }
}

.value.neutral{
  white-space: normal;
  word-break: break-word;
}

body {
  padding-top: 120px; /* altura da topbar + margem de segurança */
}