/* CSS de inecadmcuestionarios (panel sombra Administrar > Cuestionarios). Lista, KPIs, pestanas y barra. */

/* 1. Ocultar nativo solo cuando el panel sombra esta activo */
html[data-inecadmcuestionarios-escritorio] .vibebp_main > .wplms_manage_quizzes_wrapper,
html[data-inecadmcuestionarios-movil] .vibebp_main > .wplms_manage_quizzes_wrapper {
  display: none !important;
}

/* 2. Tokens del modulo (claro) */
section.inecaq {
  --iaq-fondo: var(--inec-marca-texto, white);
  --iaq-borde: color-mix(in srgb, currentColor 12%, transparent);
  --iaq-texto: color-mix(in srgb, black 88%, white);
  --iaq-tit: color-mix(in srgb, black 90%, white);
  --iaq-sub: color-mix(in srgb, currentColor 55%, transparent);
  --iaq-hover: color-mix(in srgb, currentColor 5%, transparent);
  --iaq-activo-fondo: color-mix(in srgb, var(--inec-marca) 12%, transparent);
  --iaq-pista: color-mix(in srgb, currentColor 14%, transparent);
  --iaq-pista-relleno: color-mix(in srgb, currentColor 40%, transparent);
  --iaq-ok: #1e7b34;
  --iaq-error: var(--inecac-peligro, #b42318);
  --iaq-error-fondo: var(--inecac-peligro-fondo, #fef3f2);
  --iaq-vacio-bg: color-mix(in srgb, currentColor 2%, transparent);

  font-family: "Mulish", "Inter", sans-serif;
  color: var(--iaq-texto);
  padding: 24px 32px;
  box-sizing: border-box;
  contain: inline-size;
}

/* Tokens (oscuro) */
html.inec-oscuro section.inecaq:not(#_) {
  --iaq-fondo: color-mix(in srgb, black 85%, white);
  --iaq-borde: color-mix(in srgb, white 12%, transparent);
  --iaq-texto: color-mix(in srgb, white 95%, transparent);
  --iaq-tit: var(--inec-marca-texto, white);
  --iaq-sub: color-mix(in srgb, white 65%, transparent);
  --iaq-hover: color-mix(in srgb, white 7%, transparent);
  --iaq-activo-fondo: color-mix(in srgb, var(--inec-marca) 20%, transparent);
  --iaq-pista: color-mix(in srgb, white 16%, transparent);
  --iaq-pista-relleno: color-mix(in srgb, white 45%, transparent);
  --iaq-ok: #6fd48a;
  --iaq-error: var(--inecac-peligro, #f97066);
  --iaq-error-fondo: var(--inecac-peligro-fondo, #3a1613);
  --iaq-vacio-bg: color-mix(in srgb, white 3%, transparent);
}

html.inec-oscuro section.inecaq:not(#_) .inecaq-titulo,
html.inec-oscuro section.inecaq:not(#_) .inecaq-vacio-tit,
html.inec-oscuro section.inecaq:not(#_) .inecaq-fila-tit {
  color: var(--iaq-tit);
}

section.inecaq * {
  box-sizing: border-box;
}

/* 3. Cabecera */
section.inecaq .inecaq-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}
section.inecaq .inecaq-top-izq {
  min-width: 0;
}
section.inecaq .inecaq-titulo {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--iaq-tit);
}
section.inecaq .inecaq-sub {
  margin-top: 4px;
  font-size: 14px;
  color: var(--iaq-sub);
}
section.inecaq:not(#_) .inecaq-btn-primario {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  height: 40px;
  padding: 0 16px;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: var(--inec-marca);
  color: var(--inec-marca-texto, white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* 4. KPIs */
section.inecaq .inecaq-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--iaq-borde);
}
section.inecaq .inecaq-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
section.inecaq .inecaq-kpi-val {
  font-size: 24px;
  font-weight: 600;
  color: var(--iaq-tit);
}
section.inecaq .inecaq-kpi-val--alerta {
  color: var(--iaq-error);
}
section.inecaq .inecaq-kpi-lbl {
  font-size: 12px;
  color: var(--iaq-sub);
}

/* 5. Pestanas */
section.inecaq .inecaq-tabs-wrap {
  margin-bottom: 16px;
  overflow-x: auto;
}
section.inecaq .inecaq-tabs {
  display: flex;
  gap: 4px;
  min-width: max-content;
}
section.inecaq:not(#_) .inecaq-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--iaq-sub);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
section.inecaq:not(#_) .inecaq-tab:hover {
  color: var(--iaq-texto);
  background: var(--iaq-hover);
}
section.inecaq:not(#_) .inecaq-tab--activa {
  color: var(--iaq-tit);
  background: var(--iaq-activo-fondo);
  font-weight: 600;
}
section.inecaq .inecaq-tab-n {
  font-size: 12px;
  font-weight: 500;
  color: var(--iaq-sub);
}

/* 6. Barra de busqueda y filtros (padding/float explicitos: el tema los pisa) */
section.inecaq .inecaq-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 16px;
}
section.inecaq .inecaq-buscar-wrap {
  position: relative;
  flex: 1 1 280px;
  min-width: 0;
  max-width: 420px;
}
section.inecaq .inecaq-buscar-lupa {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--iaq-sub);
  pointer-events: none;
}
section.inecaq:not(#_) input.inecaq-buscar {
  float: none;
  display: block;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 16px 0 36px;
  border: 1px solid var(--iaq-borde);
  border-radius: 6px;
  background: var(--iaq-fondo);
  color: var(--iaq-texto);
  font-family: inherit;
  font-size: 14px;
  box-shadow: none;
  outline: none;
}
section.inecaq:not(#_) input.inecaq-buscar:focus {
  border-color: var(--inec-marca);
}
section.inecaq .inecaq-sel-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
section.inecaq .inecaq-sel-ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--iaq-sub);
  pointer-events: none;
}
section.inecaq .inecaq-sel-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--iaq-sub);
  pointer-events: none;
}
section.inecaq:not(#_) select.inecaq-sel {
  float: none;
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  max-width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 32px 0 36px;
  border: 1px solid var(--iaq-borde);
  border-radius: 999px;
  background: var(--iaq-fondo);
  color: var(--iaq-texto);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-overflow: ellipsis;
}
section.inecaq .inecaq-sel-wrap--activo select.inecaq-sel {
  border-color: var(--inec-marca);
}
section.inecaq select.inecaq-sel:focus-visible {
  outline: 2px solid var(--inec-marca);
  outline-offset: 2px;
}

/* 7. Lista: grid de columnas fijas, chips en sub-grid alineado entre filas */
section.inecaq .inecaq-fila {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 340px 96px 110px 32px;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-bottom: 1px solid var(--iaq-borde);
  transition: background .15s ease;
}
section.inecaq .inecaq-fila:hover {
  background: var(--iaq-hover);
}
section.inecaq .inecaq-fila-icono {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--iaq-hover);
  color: var(--iaq-texto);
}
section.inecaq .inecaq-fila-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
section.inecaq:not(#_) .inecaq-fila-abrir {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}
section.inecaq .inecaq-fila-tit {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--iaq-tit);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
section.inecaq .inecaq-fila-sub {
  font-size: 12px;
  color: var(--iaq-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
section.inecaq .inecaq-chips {
  display: grid;
  grid-template-columns: 72px 104px 92px 56px;
  gap: 6px;
  justify-items: start;
}
section.inecaq .inecaq-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--iaq-hover);
  color: var(--iaq-sub);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
section.inecaq .inecaq-chip--hueco {
  visibility: hidden;
}
section.inecaq .inecaq-res {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
}
section.inecaq .inecaq-res-env {
  font-size: 12px;
  color: var(--iaq-texto);
  white-space: nowrap;
}
section.inecaq .inecaq-res-fila {
  display: flex;
  align-items: center;
  gap: 6px;
}
section.inecaq .inecaq-res-pct {
  font-size: 11px;
  color: var(--iaq-sub);
}
section.inecaq .inecaq-prog {
  width: 64px;
  height: 4px;
  background: var(--iaq-pista);
  border-radius: 2px;
  overflow: hidden;
}
section.inecaq .inecaq-prog-fill {
  display: block;
  height: 100%;
  width: var(--inecaq-pct, 0%);
}
section.inecaq .inecaq-prog--ok .inecaq-prog-fill {
  background: var(--iaq-ok);
}
section.inecaq .inecaq-prog--error .inecaq-prog-fill {
  background: var(--iaq-error);
}
section.inecaq .inecaq-prog--neutro .inecaq-prog-fill {
  background: var(--iaq-pista-relleno);
}
section.inecaq .inecaq-badge-col {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}
section.inecaq .inecaq-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--iaq-hover);
  color: var(--iaq-sub);
  font-size: 11px;
  white-space: nowrap;
}
section.inecaq .inecaq-badge--alerta {
  background: var(--iaq-error-fondo);
  color: var(--iaq-error);
}
section.inecaq:not(#_) .inecaq-menu-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--iaq-sub);
  box-shadow: none;
  cursor: pointer;
}
section.inecaq:not(#_) .inecaq-menu-btn:hover {
  background: var(--iaq-borde);
  color: var(--iaq-texto);
}
section.inecaq .inecaq-menu-hueco {
  width: 32px;
  height: 32px;
}

/* 7b. Menu de acciones (vive en body para no recortarse por los contenedores nativos) */
.inecaq-menu {
  --iaq-menu-fondo: var(--inec-marca-texto, white);
  --iaq-menu-texto: color-mix(in srgb, black 88%, white);
  --iaq-menu-borde: color-mix(in srgb, currentColor 12%, transparent);
  --iaq-menu-hover: color-mix(in srgb, currentColor 6%, transparent);
  position: fixed;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  max-width: calc(100vw - 16px);
  padding: 6px;
  box-sizing: border-box;
  border: 1px solid var(--iaq-menu-borde);
  border-radius: 8px;
  background: var(--iaq-menu-fondo);
  color: var(--iaq-menu-texto);
  box-shadow: 0 8px 24px color-mix(in srgb, black 18%, transparent);
  font-family: "Mulish", "Inter", sans-serif;
}
html.inec-oscuro .inecaq-menu:not(#_) {
  --iaq-menu-fondo: color-mix(in srgb, black 85%, white);
  --iaq-menu-texto: color-mix(in srgb, white 95%, transparent);
  --iaq-menu-borde: color-mix(in srgb, white 14%, transparent);
  --iaq-menu-hover: color-mix(in srgb, white 8%, transparent);
}
.inecaq-menu .inecaq-menu-item:not(#_) {
  display: block;
  width: 100%;
  margin: 0;
  padding: 9px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: var(--iaq-menu-texto);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.inecaq-menu .inecaq-menu-item:not(#_):hover,
.inecaq-menu .inecaq-menu-item:not(#_):focus-visible {
  background: var(--iaq-menu-hover);
  color: var(--iaq-menu-texto);
  outline: none;
}

/* 8. Vacio, aviso y cargar mas */
section.inecaq .inecaq-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  background: var(--iaq-vacio-bg);
  border: 1px dashed var(--iaq-borde);
  border-radius: 12px;
  text-align: center;
}
section.inecaq .inecaq-vacio-ico {
  margin-bottom: 16px;
  color: var(--iaq-sub);
  opacity: .5;
}
section.inecaq .inecaq-vacio-tit {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--iaq-tit);
}
section.inecaq .inecaq-vacio-txt {
  margin: 0;
  font-size: 14px;
  color: var(--iaq-sub);
}
section.inecaq .inecaq-aviso {
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 8px;
  background: var(--iaq-hover);
  color: var(--iaq-sub);
  font-size: 13px;
  text-align: center;
}
section.inecaq .inecaq-mas-wrap {
  margin-top: 24px;
  text-align: center;
}
section.inecaq:not(#_) .inecaq-mas-btn {
  margin: 0;
  padding: 10px 24px;
  border: 0;
  border-radius: 8px;
  background: var(--iaq-hover);
  color: var(--iaq-texto);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
section.inecaq:not(#_) .inecaq-mas-btn:hover {
  background: var(--iaq-borde);
}

/* 9. Intermedio: los chips bajan a la fila 2 */
@media (max-width: 1180px) {
  section.inecaq .inecaq-fila {
    grid-template-columns: 36px minmax(0, 1fr) 96px 110px 32px;
    row-gap: 8px;
  }
  section.inecaq .inecaq-chips {
    grid-column: 2 / -1;
    grid-row: 2;
  }
}

/* 10. Movil: la fila pasa a columna */
@media (max-width: 768px) {
  section.inecaq {
    padding: 16px;
  }
  section.inecaq .inecaq-top {
    flex-wrap: wrap;
  }
  section.inecaq .inecaq-kpis {
    grid-template-columns: 1fr 1fr;
  }
  section.inecaq .inecaq-fila {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  section.inecaq .inecaq-fila-info {
    width: 100%;
  }
  section.inecaq .inecaq-chips {
    display: flex;
    flex-wrap: wrap;
  }
  section.inecaq .inecaq-res {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  section.inecaq .inecaq-badge-col {
    justify-content: flex-start;
  }
  section.inecaq .inecaq-buscar-wrap {
    flex-basis: 100%;
    max-width: none;
  }
}

/* SWR fantasma */
.is-fantasma {
  pointer-events: none;
}
.is-fantasma .inecaq-fila-tit {
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 4px;
  min-height: 16px;
  display: inline-block;
  width: 50%;
}


/* cajon.css: Estilos para el cajón lateral de inecadmcuestionarios */

/* Tokens también definidos en .inecaq-capa por si está fuera de section.inecaq */
.inecaq-capa {
  --iaq-fondo: var(--inec-marca-texto, white);
  --iaq-borde: color-mix(in srgb, currentColor 12%, transparent);
  --iaq-texto: color-mix(in srgb, black 88%, white);
  --iaq-tit: color-mix(in srgb, black 90%, white);
  --iaq-sub: color-mix(in srgb, currentColor 55%, transparent);
  --iaq-hover: color-mix(in srgb, currentColor 5%, transparent);
  --iaq-activo-fondo: color-mix(in srgb, var(--inec-marca) 12%, transparent);
  --iaq-pista: color-mix(in srgb, currentColor 14%, transparent);
  --iaq-pista-relleno: color-mix(in srgb, currentColor 40%, transparent);
  --iaq-ok: #1e7b34;
  --iaq-alerta: #8a5a00;
  --iaq-error: var(--inecac-peligro, #b42318);
  --iaq-error-fondo: var(--inecac-peligro-fondo, #fef3f2);
  --iaq-vacio-bg: color-mix(in srgb, currentColor 2%, transparent);

  position: fixed;
  inset: 0;
  z-index: 1000;
  font-family: "Mulish", "Inter", sans-serif;
  color: var(--iaq-texto);
  visibility: hidden;
  pointer-events: none;
  transition: visibility .2s ease;
}

html.inec-oscuro .inecaq-capa {
  --iaq-fondo: color-mix(in srgb, black 85%, white);
  --iaq-borde: color-mix(in srgb, white 12%, transparent);
  --iaq-texto: color-mix(in srgb, white 95%, transparent);
  --iaq-tit: var(--inec-marca-texto, white);
  --iaq-sub: color-mix(in srgb, white 65%, transparent);
  --iaq-hover: color-mix(in srgb, white 7%, transparent);
  --iaq-activo-fondo: color-mix(in srgb, var(--inec-marca) 20%, transparent);
  --iaq-pista: color-mix(in srgb, white 16%, transparent);
  --iaq-pista-relleno: color-mix(in srgb, white 45%, transparent);
  --iaq-ok: #6fd48a;
  --iaq-alerta: #f5c26b;
  --iaq-error: var(--inecac-peligro, #f97066);
  --iaq-error-fondo: var(--inecac-peligro-fondo, #3a1613);
  --iaq-vacio-bg: color-mix(in srgb, white 3%, transparent);
}

.inecaq-capa * {
  box-sizing: border-box;
}

/* Velo de fondo */
.inecaq-velo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  transition: opacity .2s ease;
}

/* Contenedor del cajón lateral */
.inecaq-cajon {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -440px;
  width: 440px;
  max-width: 100%;
  background: var(--iaq-fondo);
  box-shadow: -4px 0 24px rgba(0, 0, 0, .15);
  display: flex;
  flex-direction: column;
  transition: right .25s ease;
  overflow: hidden;
}

/* Estado activo */
.inecaq-capa.inecaq-capa--activa {
  visibility: visible;
  pointer-events: auto;
}

.inecaq-capa.inecaq-capa--activa .inecaq-velo {
  opacity: 1;
}

.inecaq-capa.inecaq-capa--activa .inecaq-cajon {
  right: 0;
}

/* Cabecera del cajón */
.inecaq-cajon-cab {
  padding: 20px 24px;
  border-bottom: 1px solid var(--iaq-borde);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  flex-shrink: 0;
}

.inecaq-cajon-cab-fila1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inecaq-capa:not(#_) .inecaq-cajon-cerrar {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--iaq-sub);
  padding: 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}

.inecaq-capa:not(#_) .inecaq-cajon-cerrar:hover {
  background: var(--iaq-hover);
  color: var(--iaq-tit);
}

.inecaq-cajon-curso {
  font-size: 13px;
  color: var(--iaq-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inecaq-capa:not(#_) .inecaq-cajon-tit {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--iaq-tit);
}

.inecaq-cajon-acciones-cab {
  display: flex;
  gap: 8px;
}

.inecaq-capa:not(#_) .inecaq-btn-sec {
  background: transparent;
  border: 1px solid var(--iaq-borde);
  color: var(--iaq-texto);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, border-color .15s;
}

.inecaq-capa:not(#_) .inecaq-btn-sec:hover {
  background: var(--iaq-hover);
  border-color: color-mix(in srgb, currentColor 24%, transparent);
}

/* Cuerpo con scroll */
.inecaq-cajon-cuerpo {
  padding: 24px;
  overflow-y: auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Secciones */
.inecaq-capa:not(#_) .inecaq-sec-tit {
  margin: 0 0 14px 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--iaq-sub);
}

/* Configuración: lista de pares clave-valor */
.inecaq-conf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  font-size: 13px;
}

.inecaq-conf-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.inecaq-conf-lbl {
  color: var(--iaq-sub);
  font-size: 12px;
}

.inecaq-conf-val {
  font-weight: 500;
  color: var(--iaq-tit);
}

/* Opciones (píldoras) */
.inecaq-opciones-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.inecaq-opc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 12px;
  background: var(--iaq-hover);
  color: var(--iaq-texto);
  border: 1px solid var(--iaq-borde);
}

.inecaq-opc.inecaq-opc--inactiva {
  text-decoration: line-through;
  opacity: .55;
}

/* Mini-stats de resultados */
.inecaq-mini-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.inecaq-mini-stat {
  padding: 10px 8px;
  background: var(--iaq-hover);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}

.inecaq-mini-stat-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--iaq-tit);
}

.inecaq-mini-stat-lbl {
  font-size: 11px;
  color: var(--iaq-sub);
}

/* Histograma */
.inecaq-hist-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.inecaq-hist {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 90px;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--iaq-borde);
}

.inecaq-hist-col {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.inecaq-hist-bar {
  width: 100%;
  max-width: 28px;
  background: var(--inec-marca, #2271b1);
  border-radius: 4px 4px 0 0;
  height: var(--inecaq-pct, 0%);
  min-height: 0;
  transition: height .25s ease;
}

.inecaq-hist-etiquetas {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.inecaq-hist-lbl {
  flex: 1 1 0;
  text-align: center;
  font-size: 11px;
  color: var(--iaq-sub);
}

.inecaq-tasa-aprob {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--iaq-tit);
}

/* Preguntas más falladas */
.inecaq-falladas-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inecaq-fallada-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--iaq-hover);
  border-radius: 6px;
  font-size: 13px;
}

.inecaq-fallada-txt {
  flex: 1 1 auto;
  color: var(--iaq-texto);
  line-height: 1.35;
}

.inecaq-fallada-pct {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--iaq-error);
  font-size: 12px;
}

/* Intentos recientes */
.inecaq-intentos-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inecaq-intento-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--iaq-hover);
  border-radius: 6px;
  font-size: 13px;
}

.inecaq-intento-izq {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.inecaq-intento-alumno {
  font-weight: 600;
  color: var(--iaq-tit);
}

.inecaq-intento-fecha {
  font-size: 11px;
  color: var(--iaq-sub);
}

/* Píldoras de estado o nota */
.inecaq-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}

.inecaq-pill--ok {
  background: rgba(30, 123, 52, .15);
  color: var(--iaq-ok);
}

.inecaq-pill--error {
  background: var(--iaq-error-fondo);
  color: var(--iaq-error);
}

.inecaq-pill--alerta {
  background: rgba(138, 90, 0, .15);
  color: var(--iaq-alerta);
}

.inecaq-pill--neutro {
  background: var(--iaq-hover);
  color: var(--iaq-sub);
}

/* Pie del cajón */
.inecaq-cajon-pie {
  padding: 16px 24px;
  border-top: 1px solid var(--iaq-borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  background: var(--iaq-fondo);
}

.inecaq-cajon-pie-izq {
  display: flex;
  gap: 8px;
}

/* Estados especiales dentro del cajón */
.inecaq-cajon-estado {
  padding: 48px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--iaq-sub);
}

.inecaq-cajon-vacio-txt {
  font-size: 13px;
  color: var(--iaq-sub);
  margin: 6px 0 0 0;
}

/* Responsivo para móvil */
@media (max-width: 768px) {
  .inecaq-cajon {
    width: 100%;
    right: -100%;
  }

  .inecaq-conf-grid {
    grid-template-columns: 1fr;
  }

  .inecaq-mini-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* Accesibilidad: movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .inecaq-capa,
  .inecaq-velo,
  .inecaq-cajon,
  .inecaq-hist-bar {
    transition: none !important;
  }
}