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

/* Fuente general (títulos y subtítulos) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&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: var(--font-family, "Sora", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, 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 */
} */

/* =========================================================
   Credit Lines Filter – checklist styling (design-system match)
   Used by .credit-lines-filter-checklist (dcc.Checklist wrapper)
========================================================= */
.credit-lines-filter-checklist {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
}

.credit-lines-filter-checklist .dash-checkbox-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  font-family: var(--font-family, 'Sora', sans-serif) !important;
  font-size: 14px !important;
  color: hsl(var(--foreground, 222 47% 11%)) !important;
  margin: 0 !important;
  padding: 0 !important;
  break-inside: avoid !important;
}

.credit-lines-filter-checklist input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  border: 1px solid hsl(var(--accent-brand, 23 90% 54%)) !important;
  background-color: transparent !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 150ms ease, border-color 150ms ease !important;
}

.credit-lines-filter-checklist input[type="checkbox"]:checked {
  background-color: hsl(var(--accent-brand, 23 90% 54%)) !important;
  border-color: hsl(var(--accent-brand, 23 90% 54%)) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-size: 12px 12px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.credit-lines-filter-checklist .dash-checkbox-label:hover {
  color: hsl(var(--foreground, 222 47% 11%)) !important;
}

/* =========================================================
   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
========================================================= */