:root{
  --teal-700:#2f8f83;
  --teal-600:#3ea59a;
  --teal-100:#e8f5f3;
  --sky-100:#eaf4fb;
  --indigo-100:#ecebfd;
  --amber-100:#fff4df;
  --card-border:#e9ecef;
  --text-700:#344054;
  --text-500:#667085;
}

.modal-teal-header{
  background: linear-gradient(180deg,var(--teal-600),var(--teal-700));
  padding: 14px 18px;
}
.modal-teal-header .period-select{
  min-width: 120px;
  border: 0;
  box-shadow: none;
}

.section-title{
  color: var(--text-500);
  letter-spacing:.2px;
  margin-bottom: .5rem;
}

.flat-card{
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: #fff;
}

.kpi-card{
  display:flex;
  gap:12px;
  align-items:center;
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:12px;
  background:#fff;
  margin-bottom:10px;
}
.kpi-icon{
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:#147; font-size:18px;
}
.bg-soft-teal{ background: var(--teal-100); color: var(--teal-700); }
.bg-soft-blue{ background: var(--sky-100); color:#2b6cb0; }
.bg-soft-indigo{ background: var(--indigo-100); color:#4338ca; }
.bg-soft-amber{ background: var(--amber-100); color:#b45309; }

.kpi-body{ flex:1; }
.kpi-title{ font-size:.9rem; color:var(--text-500); }
.kpi-value{ font-weight:700; color:var(--text-700); }
.kpi-subvalue{ font-size:.9rem; color:var(--text-700); }
.kpi-pill{
  background:#f1f5f9; color:#0f172a; padding:.15rem .5rem;
  border-radius:999px; font-size:.75rem; font-weight:600;
}

.saldo-card{
  background:#fff9eb;
  border:1px solid #ffe4b5;
  border-radius:12px;
  padding:16px;
}
.saldo-value{
  font-size:1.6rem; font-weight:800; color:#8a6d3b;
}

.pay-card{
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:12px;
  background:#fff;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
}
.pay-card i{ font-size:18px; color:var(--teal-700); }

.btn-teal{
  background: var(--teal-700);
  border-color: var(--teal-700);
  color:#fff;
}
.btn-teal:hover{ filter: brightness(.95); color:#fff; }

.modal-footer.modal-footer-tools{
  background:#fafafa;
  border-top:1px solid var(--card-border);
}

.input-group-lg > .form-control,
.form-control.form-control-lg{
  border-radius:10px;
}

/* Mejoras pequeñas */
.form-select.form-select-sm{
  border-radius:8px;
}
.rounded-4{ border-radius:1rem!important; }

/* Ajusta los IDs/clases si difieren en tu HTML */
#modalCierreCaja .chart-holder { /* wrapper del <canvas> */
  position: relative;
  height: 260px;        /* altura fija evita “crecimiento” infinito */
  min-height: 260px;
  overflow: hidden;
}
#modalCierreCaja canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;  /* el canvas se adapta al contenedor fijo */
}