/* =========================================================
   Circuito Resuelto · Estilos de las páginas de ejercicios autocorregidos
   Todo queda limitado al bloque .ejer, con clases de prefijo «ej-», para
   que no choque con los estilos generales de la web (estilos.css).
   Toma la paleta de la web y mantiene los tamaños compactos de las
   calculadoras: texto de 14 px y controles de 36 px.
   ========================================================= */

.ejer {
  /* Colores propios de los ejercicios; el resto viene de estilos.css */
  --ej-borde-suave: #ece4da;
  --ej-primario-hover: #654b3b;
  --ej-exito: #166534;
  --ej-exito-fondo: #ecfdf3;
  --ej-error: #b42318;
  --ej-error-fondo: #fef3f2;
  --ej-aviso: #92400e;
  --ej-aviso-fondo: #fffbeb;
  --ej-info: #1e40af;
  --ej-info-fondo: #eff6ff;

  max-width: 728px;          /* mismo ancho que la columna de texto */
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.5;
}

/* Modo oscuro: mismo criterio que estilos.css (automático o forzado) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ejer {
    --ej-borde-suave: #2b323d;
    --ej-primario-hover: #e6d6c2;
    --ej-exito: #86efac;
    --ej-exito-fondo: #0b2a18;
    --ej-error: #fca5a5;
    --ej-error-fondo: #341313;
    --ej-aviso: #fcd34d;
    --ej-aviso-fondo: #2f2208;
    --ej-info: #93c5fd;
    --ej-info-fondo: #10223f;
  }
}
:root[data-theme="dark"] .ejer {
  --ej-borde-suave: #2b323d; --ej-primario-hover: #e6d6c2;
  --ej-exito: #86efac; --ej-exito-fondo: #0b2a18;
  --ej-error: #fca5a5; --ej-error-fondo: #341313;
  --ej-aviso: #fcd34d; --ej-aviso-fondo: #2f2208;
  --ej-info: #93c5fd; --ej-info-fondo: #10223f;
}

/* Anula los márgenes y tamaños generales de la web dentro del bloque */
.ejer h2 { margin: 0 0 8px; font-size: 15px; letter-spacing: normal; }
.ejer p, .ejer ul, .ejer ol { margin-top: 0; }
.ejer li { margin-bottom: 0; }
.ejer table { font-size: 14px; }

/* Lo que está oculto sigue oculto aunque una regla le dé «display» */
.ejer [hidden] { display: none !important; }

.ejer .ej-tarjeta {
  background: var(--ce-superficie);
  border: 1px solid var(--ej-borde-suave);
  border-radius: var(--ce-radio);
  padding: 16px;
  margin-bottom: 16px;
}

.ejer .ej-etiqueta { display: block; margin: 0 0 8px; font-weight: 600; }
.ejer .ej-grupo + .ej-grupo { margin-top: 16px; }

.ejer .ej-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ejer .ej-chip {
  height: 36px; padding: 0 12px;
  border: 1px solid var(--ce-linea); border-radius: 18px;
  background: var(--ce-superficie); color: var(--ce-texto);
  font: inherit; cursor: pointer;
}
.ejer .ej-chip:hover { border-color: var(--ce-acento); }
.ejer .ej-chip[aria-pressed="true"] {
  background: var(--ce-acento); border-color: var(--ce-acento);
  color: var(--ce-acento-texto); font-weight: 600;
}
.ejer .ej-nota { margin: 8px 0 0; color: var(--ce-texto-suave); font-size: 13px; }

.ejer .ej-marcador {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  justify-content: space-between; margin-bottom: 16px; color: var(--ce-texto-suave);
}
.ejer .ej-enlace {
  background: none; border: 0; padding: 0; font: inherit; font-size: 13px;
  color: var(--ce-enlace); text-decoration: underline; cursor: pointer;
}

.ejer .ej-tipo-actual {
  margin: 0 0 8px; color: var(--ce-acento); font-size: 12px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.ejer .ej-enunciado { margin: 0 0 16px; font-size: 16px; font-weight: 500; }

.ejer .ej-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ejer .ej-campo, .ejer .ej-selector {
  height: 36px; padding: 0 12px;
  border: 1px solid var(--ce-linea); border-radius: var(--ce-radio);
  background: var(--ce-superficie); color: var(--ce-texto);
  font: inherit; font-size: 14px;
}
.ejer .ej-campo { flex: 1 1 160px; min-width: 0; }
.ejer .ej-selector { flex: 0 0 auto; padding-right: 8px; }
.ejer .ej-unidad-fija {
  height: 36px; display: inline-flex; align-items: center; padding: 0 12px;
  border-radius: var(--ce-radio); background: var(--ej-borde-suave); font-weight: 600;
}
.ejer .ej-ayuda { margin: 8px 0 0; color: var(--ce-texto-suave); font-size: 13px; }

.ejer .ej-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ejer .ej-boton {
  height: 36px; padding: 0 16px;
  border: 1px solid var(--ce-linea); border-radius: var(--ce-radio);
  background: var(--ce-superficie); color: var(--ce-texto);
  font: inherit; font-weight: 600; cursor: pointer;
}
.ejer .ej-boton:hover { border-color: var(--ce-acento); }
.ejer .ej-boton--primario {
  background: var(--ce-acento); border-color: var(--ce-acento); color: var(--ce-acento-texto);
}
.ejer .ej-boton--primario:hover { background: var(--ej-primario-hover); border-color: var(--ej-primario-hover); }

.ejer .ej-aviso {
  margin-top: 16px; padding: 12px 16px;
  border-left: 4px solid; border-radius: var(--ce-radio);
}
.ejer .ej-aviso--exito { color: var(--ej-exito); background: var(--ej-exito-fondo); }
.ejer .ej-aviso--error { color: var(--ej-error); background: var(--ej-error-fondo); }
.ejer .ej-aviso--aviso { color: var(--ej-aviso); background: var(--ej-aviso-fondo); }
.ejer .ej-aviso--info  { color: var(--ej-info);  background: var(--ej-info-fondo); }

.ejer .ej-resolucion { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ej-borde-suave); }
.ejer .ej-pasos { margin: 0; padding-left: 20px; }
.ejer .ej-pasos li { margin: 0 0 8px; }
.ejer .ej-respuesta-final { margin: 8px 0 0; font-weight: 700; }

.ejer details.ej-tarjeta summary { font-weight: 600; cursor: pointer; }
.ejer .ej-tabla { width: 100%; border-collapse: collapse; margin-top: 16px; }
.ejer .ej-tabla th, .ejer .ej-tabla td {
  text-align: left; padding: 8px; border-bottom: 1px solid var(--ej-borde-suave);
}
.ejer .ej-lista-eq { margin: 16px 0 0; padding-left: 20px; }

.ejer .ej-pie { margin: 0; color: var(--ce-texto-suave); font-size: 13px; }

/* En móvil los campos van a 16 px para que el navegador no amplíe la página. */
@media (max-width: 640px) {
  .ejer .ej-campo, .ejer .ej-selector { font-size: 16px; }
}

/* Versión de impresión en blanco y negro. */
@media print {
  .ejer .ej-tarjeta { border-color: #000; background: #fff; }
  .ejer .ej-chips, .ejer .ej-botones, .ejer .ej-enlace, .ejer .ej-fila { display: none !important; }
  .ejer .ej-aviso { color: #000; background: #fff; }
}

/* Margen de la zona de ejercicios dentro de la página */
.ce-zona-ejercicios { padding: 0 16px; margin: 0 auto 48px; }