/* ============================================================================
   pages/familia/lista-utiles.css
   ----------------------------------------------------------------------------
   Firma visual: tabs por nivel + bloques con checklist marcable.
   ============================================================================ */

.cec-util-tabcontent {
  margin-top: 2rem;
}

.cec-util-block {
  background: #fff;
  border: var(--cec-border);
  border-radius: var(--cec-radius);
  padding: 1.5rem 1.5rem 1.25rem;
  height: 100%;
  box-shadow: var(--cec-shadow-sm);
}
.cec-util-block-title {
  color: var(--bs-primary);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid rgba(var(--bs-primary-rgb), 0.10);
}

.cec-util-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cec-util-list li {
  padding: 0.4rem 0;
  border-bottom: 1px dashed rgba(var(--bs-primary-rgb), 0.08);
}
.cec-util-list li:last-child { border-bottom: 0; }

.cec-util-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--bs-secondary);
  user-select: none;
  transition: color 0.2s ease;
}
.cec-util-item:hover { color: var(--bs-primary); }

.cec-util-check {
  flex-shrink: 0;
  margin-top: 0.25rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--bs-primary);
  cursor: pointer;
}
.cec-util-check:checked + ::after,
.cec-util-item:has(.cec-util-check:checked) {
  color: var(--bs-tertiary);
  text-decoration: line-through;
  text-decoration-color: var(--bs-tertiary);
}

.cec-util-note {
  margin-top: 1.75rem;
  background: rgba(var(--bs-primary-rgb), 0.04);
  border-left: 4px solid var(--bs-primary);
  border-radius: 0 var(--cec-radius) var(--cec-radius) 0;
  padding: 1rem 1.25rem;
  color: var(--bs-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
}
.cec-util-note p { margin: 0; }
.cec-util-note strong { color: var(--bs-primary); }