/* Layout vertical del selector */
.fq-selector.fq-vertical { display:block; max-width:760px; }
.fq-field { margin-bottom:14px; }

/* Lista vertical */
.fq-topics-list.fq-topics-vertical { display:block; }

/* Cada tema en su propio “pill” */
.fq-topic-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  background:#fff;
  border:1px solid #efefef;
  border-radius:8px;
  padding:10px 12px;
  margin-bottom:8px;
  transition: background .15s ease, border-color .15s ease;
}
.fq-topic-item:hover{ background:#f7f7f7; border-color:#e6e6e6; }

/* Izquierda: checkbox + icono + nombre */
.fq-topic-left{ display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.fq-topic-item input[type="checkbox"]{ margin:0; accent-color:#000; }

/* Icono */
.fq-topic-icon{
  width:18px; height:18px; flex:0 0 18px; opacity:.85;
  background-repeat:no-repeat; background-size:contain;
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'>\
    <path d='M3 5a2 2 0 0 1 2-2h9.5a1 1 0 0 1 .8.4l3.7 4.6a1 1 0 0 1 .2.6V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5zm2 0v14h12V9h-3.5a1 1 0 0 1-1-1V4H5z'/>\
  </svg>");
}

/* Badge nº preguntas */
.fq-topic-badge{
  background:#f0f0f0; border:1px solid #e6e6e6; color:#111;
  border-radius:5px; padding:0px 4px 10px; font-size:12px; line-height:1;
  min-width:28px; text-align:center; flex-shrink:0;
}

/* (opcional) reset por si el tema maquilla los checkboxes */
.fq-topic-item input[type="checkbox"]{
  appearance:auto; -webkit-appearance:checkbox;
  position:static; transform:none; width:auto; height:auto;
  box-shadow:none; background:transparent; border:none;
}
.fq-topic-item input[type="checkbox"]::before,
.fq-topic-item input[type="checkbox"]::after{ content:none; }




/* Botones negros reutilizables */
.black-btn { background:#000; color:#fff; border:1px solid #000; border-radius:8px; padding:12px 16px; cursor:pointer; transition:background .15s ease, opacity .15s ease; margin-left:5px; }
.black-btn:hover { background:#333; opacity:.9; }
.black-btn:focus-visible { outline:2px solid #a0c4ff; outline-offset:2px; }
.black-btn:active { background:#000!important; color:#fff!important; border-color:#000!important; box-shadow:none!important; }
.fq-actions .fq-btn-wide { width:100%; }

/* Respuestas */
.fq-answer-list { list-style: none; margin: 0; padding: 0; }
.fq-answer-list li { margin: 5px 0; }
.fq-answer-btn.base {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  color: #111;
  border: 1px solid #efefef;
  border-radius: 5px;
  padding: 12px 14px;
  cursor: pointer;
  line-height: 1.35;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.fq-answer-btn.base:hover:not(:disabled) { background: #f7f7f7; border-color: #e6e6e6; }
.fq-answer-btn.correct { background: #e6f4ea; border-color: #b7e1c0; color: #1e4620; }
.fq-answer-btn.wrong   { background: #fdecea; border-color: #f5c2c7; color: #611a15; }
.fq-answer-btn:disabled { opacity: 1; cursor: default; box-shadow: none; }
.fq-answer-btn.base:active { background:#fff!important; color:#111!important; border-color:#efefef!important; box-shadow:none!important; }

/* Feedback / nota */
.fq-feedback { margin-top:8px; font-weight:600; }
.fq-correct { color:#1e4620; }
.fq-wrong   { color:#611a15; }

/* Nota & mnemotecnia */
.fq-note {
  background:#fafafa; border:1px solid #efefef; border-radius:5px;
  padding:10px 12px; line-height:1.4; overflow-wrap:anywhere; word-break:break-word;
}
.fq-note-image { border:1px solid #efefef; border-radius:6px; background:#fff; padding:6px; display:none; width:max-content; }
.fq-note-img { width:255px; height:130px; object-fit:contain; display:block; cursor:zoom-in; }

/* Insignias en pregunta */
.fq-badge { display:inline-block; font-size:12px; font-weight:600; line-height:1; padding:6px 8px; border-radius:999px; margin-bottom:8px; border:1px solid transparent; }
.fq-badge.is-cecop  { background:#e7f0ff; color:#123b7a; border-color:#c7dafc; }
.fq-badge.is-comu   { background:#f2e8ff; color:#4b2277; border-color:#e0d0ff; }
.fq-badge.is-ayunta { background:#e6fff7; color:#0d4b3a; border-color:#c6f3e4; }

/* Tabla resumen */
.fq-summary-table { width:100%; border-collapse:collapse; margin-top:10px; }
.fq-summary-table th, .fq-summary-table td { border:1px solid #efefef; padding:8px; vertical-align:top; overflow-wrap:anywhere; word-break:break-word; }

/* Lightbox */
.fq-lightbox-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index:9999; }
.fq-lightbox-content{ position:relative; max-width:90vw; max-height:90vh; }
.fq-lightbox-content img{ max-width:90vw; max-height:90vh; display:block; }
.fq-lightbox-close{ position:absolute; top:-10px; right:-10px; background:#fff; border:none; border-radius:999px; width:32px; height:32px; line-height:28px; font-size:22px; cursor:pointer; }

/* Admin badge */
.fq-badge-admin{ display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid transparent; font-size:11px; line-height:1; }
.fq-badge-admin.is-cecop{ background:#e7f0ff; color:#123b7a; border-color:#c7dafc; }
.fq-badge-admin.is-comu{ background:#f2e8ff; color:#4b2277; border-color:#e0d0ff; }
.fq-badge-admin.is-ayunta{ background:#e6fff7; color:#0d4b3a; border-color:#c6f3e4; }

/* Responsive */
@media (max-width: 480px){
  .fq-selector.fq-vertical { max-width:100%; }
  .fq-question h4 { font-size:16px; line-height:1.35; }
  .fq-answer-btn.base { padding:12px; font-size:15px; }
  .fq-nav button { width:100%; margin-right:0; margin-top:8px; }
  .fq-summary-table th, .fq-summary-table td { font-size:14px; }
}

/* Foco accesible */
.fq-answer-btn.base:focus-visible,
.fq-nav button:focus-visible,
.black-btn:focus-visible,
.fq-topic-pill:focus-within { outline:2px solid #a0c4ff; outline-offset:2px; }

/* === Selector de temas vertical y a prueba de temas === */
.fq-selector .fq-topics-list{ display:block !important; }
.fq-selector .fq-topics{
  list-style:none; margin:0; padding:0;
  display:block !important;
}
.fq-selector .fq-topic-item{
  margin:0 0 8px 0; padding:0;
}

/* Fila: [checkbox] Título ........ [badge] */
.fq-selector .fq-topic-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  width:100% !important;
  background:#fff !important;
  border:1px solid #efefef !important;
  border-radius:8px !important;
  padding:10px 12px !important;
  transition:background .15s,border-color .15s;
}

/* Zona izquierda: checkbox + título */
.fq-selector .fq-topic-row input[type="checkbox"]{
  /* reset para anular pseudo-elementos del tema */
  appearance:auto !important;
  -webkit-appearance:checkbox !important;
  position:static !important;
  width:auto !important; height:auto !important;
  margin:0 !important; transform:none !important;
  box-shadow:none !important; background:transparent !important; border:none !important;
}
.fq-selector .fq-topic-row input[type="checkbox"]::before,
.fq-selector .fq-topic-row input[type="checkbox"]::after{ content:none !important; }

.fq-selector .fq-topic-title{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}



/* Evitar grids heredados del tema */
.fq-selector .fq-topics-list,
.fq-selector .fq-topics{
  grid-template-columns:none !important; column-count:initial !important; gap:0 !important;
}

/* Inputs y botón siguientes: full-width */
.fq-selector .fq-count-wrap input[type="number"]{ width:100% !important; }
.fq-selector .fq-actions .fq-btn-wide{ width:100% !important; }

/* Herramientas admin en el front */
.fq-admin-tools { margin-top:10px; }
.fq-edit-link {
  display:inline-block;
  font-size:13px;
  padding:6px 8px;
  border:1px dashed #ccc;
  border-radius:6px;
  text-decoration:none;
  color:#333;
  background:#fafafa;
}
.fq-edit-link:hover { background:#f3f3f3; }
/* Opciones tipo tarjeta (look Google Forms) + prefijo A/B/C/D */
.fq-answer-list { list-style: none; margin: 0; padding: 0; }
.fq-answer-list li { margin: 10px 0; }

.fq-answer-btn.base{
  display:flex; align-items:flex-start; gap:12px;
  width:100%; text-align:left;
  background:#f7f8fa;
  color:#1f2937;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:14px 16px;
  line-height:1.4;
  box-shadow:0 1px 0 rgba(16,24,40,.02);
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .02s ease;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
.fq-answer-btn.base:hover:not(:disabled){
  background:#eef1f5;
  border-color:#dbe1e8;
  box-shadow:0 1px 0 rgba(16,24,40,.04);
}
.fq-answer-btn.base:focus-visible{
  outline:2px solid #a0c4ff;
  outline-offset:2px;
}
.fq-answer-btn.base:active{ transform:scale(.997); }

.fq-choice-prefix{
  flex:0 0 auto;
  min-width:28px; height:28px;
  border-radius:8px;
  background:#eef1f5; color:#6b7280;
  border:1px solid #e5e7eb;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; font-size:13px;
  margin-top:1px;
}
.fq-choice-text{ flex:1 1 auto;    font-size: 15px; padding:5px; }

.fq-answer-btn.correct{ background:#e6f4ea; border-color:#b7e1c0; color:#0f5132; }
.fq-answer-btn.wrong  { background:#fdecea; border-color:#f5c2c7; color:#842029; }
.fq-answer-btn:disabled{ opacity:1; cursor:default; box-shadow:none; transform:none; }

/* Feedback */
.fq-feedback{ margin:8px 2px 0; font-weight:600; }
.fq-correct{ color:#0f5132; }
.fq-wrong  { color:#842029; }


/* Lightbox */
.fq-lightbox{ position: fixed; inset: 0; background: rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center; z-index: 9999; }
.fq-lightbox-img{ max-width:60vw; max-height:60vh; display:block; }
.fq-lightbox-close{ position:absolute; top:16px; right:16px; background:#fff; border:0; border-radius:999px; width:36px; height:36px; line-height:36px; text-align:center; font-size:22px; cursor:pointer; }

/* Barra de progreso por pasos + contador */
.fq-progress{ display:flex; align-items:center; gap:12px; margin:6px 0 14px; }
.fq-progress-steps{ display:grid; grid-template-columns: repeat(10, 1fr); gap:8px; flex:1 1 auto; }
.fq-step{ display:block; height:6px; border-radius:999px; background:#e8edf3; }
.fq-step.is-active{ background:#3b82f6; }
.fq-step.is-done{ background:#1d4ed8; }
.fq-progress-count{ flex:0 0 auto; min-width:48px; text-align:right; font-weight:600; color:#374151; }

@media (max-width:480px){
  .fq-choice-prefix{ min-width:26px; height:26px; font-size:12px; }
  .fq-answer-btn.base{ padding:12px 14px; }
  .fq-progress{ gap:8px; }
  .fq-progress-steps{ gap:6px; }
  .fq-step{ height:5px; }
}
/* Marco y ancho uniforme del quiz */
.fq-quiz-wrap{
  min-width: 720px;       /* ancho mínimo en escritorio */
  max-width: 720px;       /* ancho máximo */
  width: 100%;
  margin: 0 auto;
  background: #fff;
  border: 3px solid #e5e7eb;   /* gris */
  border-radius: 14px;
  padding: 16px;
}

/* En móviles, que se adapte */
@media (max-width: 767px){
  .fq-quiz-wrap{
    min-width: auto;
    max-width: 100%;
  }
}


/* El selector ya no limita ancho; lo controla el wrap */
.fq-selector.fq-vertical{ max-width: 100%; }

/* Ajuste pequeño de separación interna */
.fq-question h4{ margin-top: 6px; }