:root { --primary:#0747a6; --ok:#1b873f; --fail:#c62828; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui, Arial, sans-serif; background:#f6f7fb; color:#222; }
.container { max-width:860px; margin:40px auto; background:#fff; padding:28px; border-radius:14px; box-shadow:0 6px 20px rgba(0,0,0,.06); }
h1 { margin-top:0; }
.btn { display:inline-block; background:var(--primary); color:#fff; padding:12px 18px; border-radius:10px; text-decoration:none; border:0; cursor:pointer; }
.btn:hover { filter:brightness(.95); }
.quiz-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.timer { font-weight:700; padding:8px 12px; border-radius:10px; background:#eef4ff; color:#183a8f; }
.question { border:1px solid #e8e8ef; padding:16px; border-radius:12px; margin:14px 0; }
.qnum { color:#555; margin-right:8px; }
.option { display:block; padding:8px 10px; border-radius:8px; border:1px solid #e6e6ee; margin:8px 0; cursor:pointer; }
.option input { margin-right:8px; }
.input-text { width:100%; padding:10px 12px; border:1px solid #d9d9e6; border-radius:8px; }
.actions { margin-top:18px; }
.result.ok { border-left:6px solid var(--ok); padding-left:10px; }
.result.fail { border-left:6px solid var(--fail); padding-left:10px; }
.alert { background:#fff8e1; border:1px solid #ffe082; padding:10px 12px; border-radius:8px; margin-bottom:12px; }
details.details { margin-top:16px; }
@media (max-width:640px){
  .quiz-header { flex-direction:column; align-items:flex-start; }
}
.q-media {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin: 8px 0 12px;
}
.q-media figure { margin: 0; }
.q-media img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid #e6e6ee;
  background: #fafafa;
}
.q-media figcaption {
  font-size: .85rem;
  color: #666;
  text-align: center;
  margin-top: 4px;
}
/* --- Imágenes responsivas en preguntas --- */
.q-media{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(3, minmax(0,1fr)); /* desktop */
  align-items:start;
  margin:8px 0 12px;
}
.q-media figure{ margin:0; }
.q-media img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;              /* mantiene proporción */
  object-fit:contain;       /* no recorta si el contenedor es más chico */
  border-radius:10px;
  border:1px solid #e6e6ee;
  background:#fafafa;
  cursor:zoom-in;           /* opcional si usas zoom.js */
}
.q-media figcaption{
  font-size:.85rem;
  color:#666;
  text-align:center;
  margin-top:4px;
}

/* tablets */
@media (max-width: 1024px){
  .q-media{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* teléfonos */
@media (max-width: 560px){
  .q-media{ grid-template-columns:1fr; } /* 1 columna en móvil */
  .q-media img{ max-height:60vh; }       /* evita que se hagan infinitas en vertical */
}
/* === Patch tamaño/resp. imágenes de preguntas === */
.q-media{
  display: grid;
  gap: 12px;
  justify-items: center;   /* centra la(s) imagen(es) */
  align-items: start;
  margin: 8px 0 12px;
}

/* Estilo base */
.q-media > figure{ margin: 0; }
.q-media > figure img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid #e6e6ee;
  background: #fafafa;
}

/* ✅ Caso 1: SOLO UNA imagen → usar la MITAD del ancho en desktop */
.q-media > figure:only-child{ width: 90%; }   /* mitad del contenedor */
@media (max-width: 560px){
  .q-media > figure:only-child{ width: 100%; } /* en móvil, ancho completo */
}

/* ✅ Caso 2: VARIAS imágenes → miniaturas más pequeñas en desktop */
.q-media > figure:not(:only-child){ width: 220px; }  /* cada miniatura ~220px */
@media (max-width: 560px){
  .q-media > figure:not(:only-child){ width: 100%; } /* en móvil, 1 por fila */
}

/* (opcional) Limitar altura para evitar “torres” verticales */
.q-media > figure img{ max-height: 360px; }
@media (max-width: 560px){
  .q-media > figure img{ max-height: 50vh; }
}
/* Marca / logo en el header */
.site-header{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.site-header .brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;}
.site-header .brand img{height:48px; width:auto; display:block;}
@media (max-width:560px){
  .site-header .brand img{height:40px;}
}