/* Estilos para los enlaces de menú de ACC Checklist */
.acc-checklist-menu-link {
  display: block;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  padding: 1em 1.3333em !important;
  cursor: pointer;
}

.acc-checklist-menu-link:hover {
  opacity: 0.9;
}


.acc-checklist-counter {
  margin-left: 0.5em;
  font-weight: bold;
}

/* Estilos para checklist completa - aplicar al <li> */
li.menu-item.acc-checklist-complete,
li.menu-item.acc-checklist-complete.is-active {
  /* El color de fondo se calcula dinámicamente con JavaScript */
  border-radius: 0;
  min-height: 43px;
}

li.menu-item.acc-checklist-complete a,
li.menu-item.acc-checklist-complete a.is-active,
li.menu-item.acc-checklist-complete.is-active a {
  color: white !important;
  padding: 1em 1.3333em !important;
  cursor: pointer;
  background-color: transparent !important;
}

/* Estilos para checklist incompleta - aplicar al <li> */
li.menu-item.acc-checklist-incomplete,
li.menu-item.acc-checklist-incomplete.is-active {
  /* El color de fondo se calcula dinámicamente con JavaScript */
  border-radius: 0;
}

li.menu-item.acc-checklist-incomplete a,
li.menu-item.acc-checklist-incomplete a.is-active,
li.menu-item.acc-checklist-incomplete.is-active a {
  color: white !important;
  padding: 1em 1.3333em !important;
  cursor: pointer;
  background-color: transparent !important;
}

/* Asegurar que el texto y contador sean blancos */
.acc-checklist-menu-link {
  color: white !important;
}

.acc-checklist-menu-link .acc-checklist-counter {
  color: white !important;
}

/* Estilos para checkboxes deshabilitados cuando cuestionario_mandado no está marcado */
.acc-checklist-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.acc-checklist-disabled input[type="checkbox"] {
  cursor: not-allowed;
}

/* Estilos para botones deshabilitados */
.acc-checklist-button-disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}

.acc-checklist-button-disabled:hover {
  opacity: 0.5;
}

/* Estilos para inputs deshabilitados */
.acc-checklist-input-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #f5f5f5;
}

/* Layout en dos columnas para campos condicionales (SI/NO). */
.acc-checklist-dependent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.acc-checklist-grid-full {
  grid-column: 1 / -1;
}

.acc-checklist-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 768px) {
  .acc-checklist-dependent-grid {
    grid-template-columns: 1fr;
  }
  .acc-checklist-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Checkboxes de maquetador estilo botones toggle. */
.acc-maquetador-toggle-checkboxes .form-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.acc-maquetador-toggle-checkboxes .form-type-checkbox {
  position: relative;
  margin: 0 !important;
}

.acc-maquetador-toggle-checkboxes .form-type-checkbox > input.form-checkbox,
.acc-maquetador-toggle-checkboxes input[type="checkbox"] {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.acc-maquetador-toggle-checkboxes .form-type-checkbox > label.option,
.acc-maquetador-toggle-checkboxes label.option {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #8f99a6;
  border-radius: 8px;
  background: #f7f9fb;
  cursor: pointer;
  transition: all 0.15s ease;
}

.acc-maquetador-toggle-checkboxes label.option::before,
.acc-maquetador-toggle-checkboxes label.option::after {
  display: none !important;
  content: none !important;
}

.acc-maquetador-toggle-checkboxes .form-type-checkbox > label.option:hover,
.acc-maquetador-toggle-checkboxes label.option:hover {
  background: #eef4fb;
  border-color: #5f7ea5;
}

.acc-maquetador-toggle-checkboxes .form-type-checkbox > input.form-checkbox:checked + label.option,
.acc-maquetador-toggle-checkboxes input[type="checkbox"]:checked + label.option {
  background: #1d6fd6;
  border-color: #1d6fd6;
  color: #fff;
}

.acc-maquetador-toggle-checkboxes .form-type-checkbox > input.form-checkbox:checked + label.option:hover,
.acc-maquetador-toggle-checkboxes input[type="checkbox"]:checked + label.option:hover {
  background: #1558ac;
  border-color: #1558ac;
}