:root{
  --bg:#ffffff; --text:#1f2937; --muted:#6b7280; --line:#e5e7eb;
  --primary:#0d6efd; --success:#22c55e; --danger:#ef4444;
  --card:#f8fafc;
}

/* ========= Base ========= */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; padding:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.45;
  display:flex; flex-direction:column; justify-content:flex-start;
}

/* ========= Container principal ========= */
#simulador-container{ max-width:1200px; margin:0 auto; padding:20px; flex:1 }

/* ========= Tipografia / notas ========= */
h1{ font-size:2rem; margin:0 0 18px }
a{ color:var(--primary); text-decoration:none }
a:hover{ text-decoration:underline }
.sim-note{ margin:-6px 0 14px; color:var(--muted); font-weight:600; font-size:.95rem }
.confirm-note{ margin:4px 0 10px; color:#475569; font-weight:600; font-size:.95rem }

/* ========= Formulário ========= */
.form-grid{
  display:grid; grid-template-columns:1.1fr 1.1fr .9fr .7fr;
  gap:16px 20px; align-items:end; max-width:1100px; margin-bottom:14px;
}
.field{ display:flex; flex-direction:column; min-width:0 }
label{ font-weight:700; margin-bottom:6px }
.form-control{
  width:100%; font-size:1rem; padding:.65rem .9rem;
  border:1px solid var(--line); border-radius:10px; background:#fff;
  transition:border-color .15s, box-shadow .15s; outline:none;
}
.form-control:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(13,110,253,.15) }
.field--sm .form-control{ max-width:220px }

/* Select com setinha discreta */
select.form-control{ -webkit-appearance:none; -moz-appearance:none; appearance:none; background:#fff }
.field select.form-control{
  background-image:linear-gradient(45deg,transparent 50%,#9aa3aa 50%),
                    linear-gradient(135deg,#9aa3aa 50%,transparent 50%),
                    linear-gradient(to right,#e5e7eb,#e5e7eb);
  background-position:calc(100% - 20px) calc(50% - 3px),
                       calc(100% - 15px) calc(50% - 3px),
                       calc(100% - 2.2rem) 50%;
  background-size:6px 6px,6px 6px,1px 60%; background-repeat:no-repeat;
  padding-right:2.6rem;
}

/* Percentual financiado (disabled) */
.pct-field .form-control[disabled]{ background:var(--card); color:#111827; font-weight:800; text-align:center }

/* ========= Bancos (grade) ========= */
.section-title{ font-weight:800; margin:14px 0 8px }
.bancos{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.banco-label{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:10px; padding:14px 12px 12px;
  border:1px solid var(--line); border-radius:12px; background:#fff;
  height:100%;
}

/* Logo nos cards de seleção de bancos */
.banco-logo-wrap{
  height:46px; min-height:46px; width:100%;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px; padding:6px 10px; /* sem background p/ não aparecer listra */
}
.banco-logo{
  height:40px !important; width:auto !important; max-width:160px;
  display:block !important; object-fit:contain;
  filter:drop-shadow(0 0 .6px rgba(0,0,0,.45));
}
.bank-logo-fallback{
  display:inline-flex; align-items:center; justify-content:center;
  height:34px; min-width:56px; padding:0 8px; font-weight:800; font-size:.9rem;
  color:#0f172a; background:#e2e8f0; border-radius:6px;
}

/* Texto / checkbox */
.banco-detalhes{ font-size:.85rem; color:#555; line-height:1.35; margin:0 }
.banco-check{ margin-top:auto; display:flex; align-items:center; justify-content:center; line-height:1 }
.banco-check input{ width:20px; height:20px; cursor:pointer; margin:0 }

/* Estados */
.banco-label.disabled{ opacity:.6; pointer-events:none }
.banco-label:has(.banco-check input:checked){
  box-shadow:0 0 0 3px rgba(13,110,253,.15); border-color:var(--primary);
}

/* ========= Mensagens ========= */
#mensagens{ margin:8px 0 0; font-weight:700 }
#mensagens .erro{ color:#b91c1c }
#mensagens .info{ color:#334155 }

/* ========= Botões ========= */
button,#btnCalcular,#btnCompartilhar,#btnSalvarPdf{
  -webkit-appearance:none; appearance:none; border:0; border-radius:16px;
  padding:.9rem 1.8rem; font-weight:700; line-height:1; display:inline-block;
}
#btnCalcular{
  display:block; margin:12px auto 22px; font-size:1.35rem; padding:1.15rem 2.4rem;
  border-radius:18px; background:#0d6efd; color:#fff; box-shadow:0 6px 18px rgba(13,110,253,.20);
}
#btnCalcular:hover{ filter:brightness(.95) }
#btnCalcular:focus{ outline:none; box-shadow:0 0 0 4px rgba(13,110,253,.25) }
#btnCompartilhar{ background:#22c55e; color:#fff } #btnCompartilhar:hover{ filter:brightness(.95) }
#btnSalvarPdf{ background:#ef4444; color:#fff } #btnSalvarPdf:hover{ background:#dc2626 }
#acoes{ display:flex; gap:14px; flex-wrap:wrap; margin:20px 0 }

/* ========= Cards (resumo) ========= */
#cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:14px; max-width:1100px; margin:10px 0 18px;
}
.card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; box-shadow:0 2px 6px rgba(0,0,0,.05) }
.card p{ margin:.25rem 0 }
.bank-header{ display:flex; align-items:center; gap:10px; margin-bottom:6px }
.bank-name{ font-weight:800; line-height:1 }
/* logo pequena nos cards */
.bank-header .bank-logo{ height:44px !important; width:auto !important; max-width:140px; display:inline-block !important; object-fit:contain }

/* ========= Tabelas ========= */
#tabelas{
  width: 100%;
  max-width: 1100px;      /* <<< fixo em px resolve o “encolhimento” */
  margin: 20px auto 0;    /* centraliza */
  padding-top: 16px;
  border-top: 2px solid #e5e7eb;
}

/* cada seção ocupa 100% do container; quem rola é o wrapper */
#tabelas .table-section{
  width: 100%;
  margin: 22px 0;
  overflow: visible;
}

/* wrapper com rolagem horizontal */
#tabelas .table-scroll{
  display: block;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}

/* a tabela precisa “sobrar” largura para surgir a barra */
#tabelas .table-scroll > table{
  width: max-content;   /* não 100% */
  min-width: 100%;     /* ajuste conforme colunas */
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

/* título com logo pequena */
.table-title{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; margin-bottom:6px }
.table-title .bank-logo{ height:20px !important; width:auto !important; max-width:140px; display:inline-block !important; object-fit:contain }
.table-title h2{ margin:0; overflow-wrap:anywhere }


#tabelas th, #tabelas td{
  padding:.6rem .7rem; text-align:right; border-bottom:1px solid var(--line);
}
#tabelas th{ background:#f3f4f6; font-weight:800 }
#tabelas td:first-child, #tabelas th:first-child{ text-align:center }
#tabelas tr:last-child td{ border-bottom:none }

/* ========= PDF (compactar apenas durante exportação) ========= */
.pdf-table{ font-size:.7rem; line-height:1.1 }
.pdf-table th, .pdf-table td{ padding: 2px 4px }

/* ========= Footer ========= */
.footer-copy{
  text-align:center; font-size:.9rem; color:#6b7280; padding:16px 10px; margin-top:30px;
  border-top:1px solid #e5e7eb; background:#f9fafb; width:100%;
}

/* ========= Voltar ao topo ========= */
.btn-voltar-topo{
  position:fixed; right:16px; bottom:calc(env(safe-area-inset-bottom,0) + 16px); z-index:999;
  width:48px; height:48px; background:#b0b9bd; color:#fff; border:0; border-radius:16px;
  box-shadow:0 3px 10px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center;
  font-size:18px; text-decoration:none !important;
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .2s, transform .2s, background .2s;
}
.btn-voltar-topo:hover{ background:#0d6efd }
.btn-voltar-topo.show{ opacity:1; pointer-events:auto; transform:translateY(0) }

/* ========= Responsivo ========= */
@media (min-width:1200px){
  .bancos{ grid-template-columns:repeat(4,1fr) }
  /* opcional: limitar largura da seção de tabelas em telas muito largas */
  #tabelas .table-section{ max-width:1100px; margin-left:auto; margin-right:auto }
}
@media (max-width:992px){
  .form-grid{ grid-template-columns:1fr 1fr }
  .bancos{ grid-template-columns:repeat(3,1fr) }
  #cards{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:900px){
  .bancos{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:768px){
  .form-grid{ grid-template-columns:1fr 1fr; gap:12px 14px }
  .form-control{ font-size:16px; padding:.6rem .85rem }
  .bancos{ grid-template-columns:repeat(2,1fr); gap:10px }
  #btnCalcular{ width:100% }
}
@media (max-width:560px){
  .form-grid{ grid-template-columns:1fr; gap:10px 0 }
  #btnCalcular,#btnCompartilhar,#btnSalvarPdf{ width:100%; text-align:center }
  .bancos{ grid-template-columns:1fr }
  .banco-label{ padding:10px 12px }
  #cards{ grid-template-columns:1fr }
  #simulador-container{ padding:12px }
  #acoes{ flex-direction:column }
  .btn-voltar-topo{ right:12px; bottom:calc(env(safe-area-inset-bottom,0) + 12px) }
  /* se a tabela ainda ficar apertada, aumente este min-width */
  #tabelas{ max-width: 350px; padding: 0 12px 0 12px; }  /* ocupa a tela toda */
  #tabelas .table-scroll > table{ min-width: 900px; }
}