:root {
  --cc-bg: #f6f8fb;
  --cc-ring-bg: #e9eef6;
  --cc-deposito: #8AD0F1;  /* color principal */
  --cc-primer:   #F6ABC7;  /* color secundario */
  --cc-comision: #78796D;  /* color neutral */
  --cc-text: #2b2d33;
  --cc-muted: #76809a;
}

.hz-contrato-calc.card { border-radius: 16px; overflow: hidden; }
.hz-contrato-calc .card-body { padding: 22px; background: #fff; }
.hz-cc-head { margin-bottom: 8px; }
.hz-cc-head .card-title { margin: 0 0 6px; }

.hz-cc-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 20px;
}
@media (max-width: 768px){
  .hz-cc-grid { grid-template-columns: 1fr; }
}

/* ====== Donut ====== */
.hz-cc-donut-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 16px;
  background: var(--cc-bg);
  border-radius: 14px;
  padding: 14px;
}
@media (max-width: 768px){
  .hz-cc-donut-card { grid-template-columns: 1fr; text-align: center; }
}

.hz-cc-donut-wrap { position: relative; width: 160px; height: 160px; margin: 0 auto; }
.hz-cc-donut { width: 160px; height: 160px; transform: rotate(-90deg); display: block; }
.hz-cc-donut-bg {
  fill: none;
  stroke: var(--cc-ring-bg);
  stroke-width: 18;
}
.seg { fill: none; stroke-width: 18; stroke-linecap: round; }

.seg-deposito { stroke: var(--cc-deposito); }
.seg-primer   { stroke: var(--cc-primer); }
.seg-comision { stroke: var(--cc-comision); }

.hz-cc-donut-center {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
}
.hz-cc-center-top { font-size: 12px; color: var(--cc-muted); margin-bottom: 2px; }
.hz-cc-center-money { font-size: 18px; font-weight: 700; color: var(--cc-text); }

/* ====== Leyenda ====== */
.hz-cc-legend { list-style: none; margin: 0; padding: 0; }
.hz-cc-legend li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 14px; color: var(--cc-text);
  padding: 6px 8px; border-radius: 10px;
}
.hz-cc-legend .amount { font-weight: 600; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.dot-deposito { background: var(--cc-deposito); }
.dot-primer   { background: var(--cc-primer); }
.dot-comision { background: var(--cc-comision); }

/* ====== Form ====== */
.hz-cc-form .form-group { margin-bottom: 14px; }
.hz-cc-form .input-group-text { min-width: 38px; justify-content: center; }
.hz-cc-form .btn { width: 100%; margin-top: 4px; }

.hz-contrato-calc__result p { margin: 6px 0; }
.hz-cc-note { color: var(--cc-muted); font-size: 12px; margin-top: 6px; }