/* =========================================================
   CREDIT LINES • CONTROLES
   BEM + Poppins + layout responsive
   Archivo: assets/credit_lines.css
   ========================================================= */

/* Fuente general (títulos y subtítulos) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* -----------------------------
   Reset muy ligero
----------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --cl-bg: #ffffff;
  --cl-border: #eeeeee;
  --cl-border-strong: #e0e0e0;
  --cl-shadow: 0 1px 2px rgba(0,0,0,0.05);
  --cl-text: #222;
  --cl-text-soft: #5d5d5d;
  --cl-accent: #f5f7fb;
}

/* -----------------------------
   Tipografía base
----------------------------- */
body, .cl-controls, .cl-card {
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--cl-text);
}

/* =========================================================
   CONTENEDOR PRINCIPAL (Bloque)
   .cl-controls
========================================================= */
.cl-controls {
  width: 100%;
  max-width: 100%;
  margin-bottom: 10px;
  padding-right: 6px;
}

/* Título del panel (Elemento) */
.cl-controls__title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
  color: var(--cl-text);
}

/* Grid de cards (Elemento) — controla el gap entre columnas/filas */
.cl-controls__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(320px, 1fr));
  gap: 12px;              /* 👈 Ajusta aquí el espacio entre las 3 columnas principales */
  align-items: flex-start;
}

/* Responsive: 2 columnas y luego 1 */
@media (max-width: 1400px) {
  .cl-controls__grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 10px;
  }
}
@media (max-width: 880px) {
  .cl-controls__grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* =========================================================
   CARD (Bloque)
   .cl-card
========================================================= */
.cl-card {
  display: block;
  width: 100%;
  background: var(--cl-bg);
  border: 1px solid var(--cl-border);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--cl-shadow);
  break-inside: avoid;   /* Evita cortes feos si el contenedor externo usa multi-column */
}

/* Título de la card (Elemento) */
.cl-card__title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--cl-text);
}

/* Checklist (Elemento) — estilos base (el modifier lo sobreescribe) */
.cl-card__checklist {
  font-size: 12.5px;
  line-height: 1.15;
  word-break: break-word;
  /* Si tuvieras un alto fijo, quítalo: dejamos crecer la card para evitar scrolls internos */
  /* max-height: 260px; */
  /* overflow-y: auto; */
}

/* ✅ Modifier para balancear las opciones en 2 columnas y eliminar huecos */
.cl-card__checklist--balanced {
  column-count: 2;      /* Fuerza dos columnas dentro de la card */
  column-gap: 12px;     /* Espacio entre columnas dentro de la card */
}

/* Cada ítem de checkbox (label) no debe partirse entre columnas */
.cl-card__checklist--balanced .dash-checkbox-label {
  break-inside: avoid;
  display: inline-flex;    /* Alinea el cuadrito con el texto */
  align-items: center;
  gap: 6px;                /* Espacio entre el cuadrito y el texto */
  width: 100%;
  margin: 0 0 6px 0;       /* Separación vertical entre ítems */
  color: var(--cl-text-soft);
}

/* Opcional: realce al pasar el mouse (mejora UX) */
.cl-card__checklist--balanced .dash-checkbox-label:hover {
  color: var(--cl-text);
}

/* Ajustes visuales del checkbox nativo de Dash */
.cl-card__checklist--balanced input[type="checkbox"] {
  transform: translateY(0.5px);
}

/* =========================================================
   BOTÓN DESCARGA (opcional, si lo usas)
========================================================= */
.cl-download__bar {
  margin: 8px 0 10px 0;
}

.cl-download__button {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--cl-border-strong);
  background: #fafafa;
  cursor: pointer;
  font-weight: 600;
  transition: background .15s ease, transform .02s linear;
}

.cl-download__button:hover {
  background: var(--cl-accent);
}

.cl-download__button:active {
  transform: translateY(1px);
}

/* =========================================================
   UTILIDADES (por si quieres usarlas)
========================================================= */
.u-mb-0  { margin-bottom: 0 !important; }
.u-mb-4  { margin-bottom: 4px !important; }
.u-mb-6  { margin-bottom: 6px !important; }
.u-mb-8  { margin-bottom: 8px !important; }
.u-mb-10 { margin-bottom: 10px !important; }

/* Si deseas mostrar una leve separación entre cards cuando hay mucho contenido */
/* .cl-card + .cl-card {
  /* margin-top: 2px;  <- normalmente no hace falta porque el grid maneja el gap */
} */

/* =========================================================
   NOTAS
   - El “hueco” que veías se elimina gracias a column-count (balanceo).
   - Controla el gap entre las TRES columnas principales desde:
       .cl-controls__grid { gap: 12px; }
   - Controla el espacio entre columnas DENTRO de cada card desde:
       .cl-card__checklist--balanced { column-gap: 12px; }
   - Si prefieres scroll interno de card, vuelve a activar max-height/overflow en .cl-card__checklist
========================================================= */