/* Módulo 10 — Deudas y Construcción. Vanilla, responsive, botones grandes. */
.dc-contenedor { max-width: 720px; margin: 0 auto; padding: 16px; font-family: system-ui, sans-serif; font-size: 17px; line-height: 1.45; color: #1a1a1a; }
.dc-contenedor h1 { font-size: 26px; }
.dc-contenedor h2 { font-size: 24px; margin-top: 8px; }
.dc-contenedor h3 { font-size: 20px; margin-top: 28px; }
.dc-contenedor h4 { font-size: 18px; margin-top: 24px; }
.dc-ayuda { color: #555; }
.dc-menu { display: flex; flex-direction: column; gap: 12px; }
.dc-subnav { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.dc-btn { min-height: 48px; padding: 12px 18px; font-size: 17px; border-radius: 10px; border: 1px solid #333; background: #fff; cursor: pointer; }
.dc-btn-grande { width: 100%; font-weight: 600; }
.dc-btn-volver { width: auto; align-self: flex-start; }
.dc-btn-peligro { border-color: #b3261e; color: #b3261e; }
.dc-panel { border: 1px solid #ccc; border-radius: 12px; padding: 16px; background: #f7f7f7; margin: 16px 0; }
.dc-panel p { margin: 8px 0; }
.dc-leyenda { color: #555; }
.dc-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.dc-item { border: 1px solid #ddd; border-radius: 12px; padding: 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dc-item > div { flex: 1 1 220px; }
.dc-item-pagado { opacity: 0.75; }
.dc-badge { background: #e8e8e8; border-radius: 20px; padding: 4px 12px; font-size: 14px; }
.dc-nota { color: #555; }
.dc-vacio { color: #555; font-style: italic; }
.dc-form { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; }
.dc-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.dc-form input, .dc-form select, .dc-form textarea { min-height: 48px; font-size: 17px; padding: 10px 12px; border-radius: 10px; border: 1px solid #888; width: 100%; box-sizing: border-box; }
.dc-form textarea { min-height: 72px; }
.dc-form-linea { flex-direction: column; }
.dc-totales-cat { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0; }
.dc-totales-cat span { background: #f0f0f0; border-radius: 20px; padding: 6px 12px; font-size: 15px; }
.dc-alerta { border: 2px solid #b3261e; background: #fdecea; border-radius: 12px; padding: 14px; font-weight: 600; margin: 12px 0; }
.dc-mensaje { background: #eef6ee; border-radius: 10px; padding: 12px; }
.dc-total-final { font-size: 20px; border-top: 2px solid #333; padding-top: 14px; margin-top: 28px; }
@media (max-width: 480px) {
  .dc-contenedor { padding: 12px; font-size: 16px; }
  .dc-btn { width: 100%; }
  .dc-btn-volver { width: 100%; }
}