/*
 * Actividades interactivas nativas · Matemática Interactiva (GRADA)
 *
 * Estilos de las actividades reescritas en JavaScript propio (public/assets/actividades/motores/).
 * Usan los tokens de marca del portal Eduteka (azul #5454E9, amarillo #F0D63C, verde #168A0A,
 * morado #7B3CF0, naranja #E85E2F, superficies lavanda) y NO dependen de Tailwind: todo cuelga de
 * la clase .mia y lleva el prefijo mia-, de modo que no chocan con el resto de la página.
 */

.mia {
    --mia-azul: #5454e9;
    --mia-azul-hover: #4444c9;
    --mia-primario: #3a37d0;
    --mia-amarillo: #f0d63c;
    --mia-verde: #168a0a;
    --mia-morado: #7b3cf0;
    --mia-naranja: #e85e2f;
    --mia-rosa: #e5548c;
    --mia-turquesa: #2fb5c9;
    --mia-ambar: #f2a93b;

    --mia-fondo: #f5f2ff;
    --mia-superficie: #ffffff;
    --mia-contenedor: #efecfc;
    --mia-contenedor-alto: #e4e0f7;
    --mia-texto: #1b1a26;
    --mia-texto-suave: #464555;
    --mia-contorno: #767586;
    --mia-borde: #c7c4d7;

    --mia-exito: #1f7a48;
    --mia-exito-fondo: #e4f5ea;
    --mia-error: #b8431d;
    --mia-error-fondo: #fdece5;
    --mia-aviso: #7a5b00;
    --mia-aviso-fondo: #fbf8d3;
    --mia-info: #3a37d0;
    --mia-info-fondo: #ecebff;

    --mia-radio: 2px;
    --mia-sombra: 0 1px 2px rgba(27, 26, 38, .06), 0 12px 28px -16px rgba(58, 55, 208, .40);

    container-type: inline-size;
    position: relative;
    box-sizing: border-box;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.45;
    color: var(--mia-texto);
    background: var(--mia-fondo);
    border: 1px solid var(--mia-borde);
    border-radius: 2px;
    overflow: hidden;
    overflow: clip; /* recorta las esquinas sin crear un contenedor de scroll: así los mensajes pueden quedarse fijos abajo */
}

.mia *, .mia *::before, .mia *::after { box-sizing: border-box; }
.mia :where(h3, h4, p, ol, ul) { margin: 0; }
.mia :where(ol, ul) { padding: 0; list-style: none; }
.mia [hidden] { display: none !important; }
.mia :where(button, input, select, textarea) { font: inherit; color: inherit; }
.mia svg { display: block; max-width: 100%; }
.mia .mia-num { font-variant-numeric: tabular-nums; }
.mia .mia-simbolo { font-family: Georgia, 'Times New Roman', serif; }

.mia:fullscreen { overflow: auto; border-radius: 0; border: 0; }
.mia:fullscreen .mia-cuerpo { max-width: 1200px; margin-inline: auto; }

/* ---------- Cabecera ---------- */
.mia-cabecera {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
    padding: .75rem 1rem;
    background: var(--mia-superficie);
    border-bottom: 1px solid var(--mia-borde);
}
.mia-icono {
    flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
    border-radius: 2px; background: var(--mia-azul); color: var(--mia-amarillo); font-size: 1rem;
}
.mia-titulo { flex: 1 1 8rem; min-width: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.mia-acciones { display: flex; flex-wrap: wrap; gap: .25rem; margin-left: auto; }

.mia-ayuda {
    padding: .9rem 1.1rem; background: var(--mia-info-fondo); color: var(--mia-texto);
    border-bottom: 1px solid var(--mia-borde); font-size: .95rem;
}
.mia-ayuda ol { display: grid; gap: .35rem; counter-reset: paso; }
.mia-ayuda li { counter-increment: paso; display: flex; gap: .6rem; align-items: baseline; }
.mia-ayuda li::before {
    content: counter(paso); flex: none; width: 1.4rem; height: 1.4rem; display: grid; place-items: center;
    border-radius: 2px; background: var(--mia-primario); color: #fff; font-size: .75rem; font-weight: 800;
}

/* ---------- Estructura ---------- */
.mia-cuerpo { display: grid; gap: 1rem; padding: 1rem; }
.mia-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.mia-fila--entre { justify-content: space-between; }
.mia-cols { display: grid; gap: 1rem; align-items: start; }
@container (min-width: 720px) {
    .mia-cuerpo { padding: 1.5rem; gap: 1.25rem; }
    .mia-cols--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .mia-cols--asimetrico { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
    .mia-cols--asimetrico-inv { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
    .mia-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 520px) { .mia-cols--3-medio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mia-tarjeta {
    background: var(--mia-superficie);
    border: 1px solid rgba(199, 196, 215, .7);
    border-radius: var(--mia-radio);
    box-shadow: var(--mia-sombra);
    padding: 1rem;
    min-width: 0;
}
.mia-tarjeta--plana { box-shadow: none; }
.mia-tarjeta > .mia-subtitulo:first-child { margin-top: -.15rem; }
.mia-subtitulo {
    margin-bottom: .6rem; font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: var(--mia-texto-suave);
}
.mia-lienzo { display: grid; place-items: center; }

/* ---------- Botones ---------- */
.mia-boton {
    --_fondo: var(--mia-superficie); --_texto: var(--mia-primario); --_borde: var(--mia-borde); --_hover: var(--mia-contenedor);
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 2.5rem; padding: .45rem 1.05rem;
    font-weight: 700; font-size: .92rem; line-height: 1.15; text-align: center;
    color: var(--_texto); background: var(--_fondo); border: 1.5px solid var(--_borde); border-radius: 2px;
    cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
    transition: background-color .15s, border-color .15s, transform .1s, box-shadow .15s;
}
.mia-boton:hover:not(:disabled) { background: var(--_hover); }
.mia-boton:active:not(:disabled) { transform: translateY(1px); }
.mia-boton:disabled, .mia-boton[aria-disabled='true'] { opacity: .45; cursor: not-allowed; }
.mia-boton:focus-visible, .mia-campo:focus-visible, .mia-segmento button:focus-visible, .mia-tarjeta-eleg:focus-visible {
    outline: 3px solid var(--mia-amarillo); outline-offset: 2px; box-shadow: 0 0 0 5px var(--mia-primario);
}
.mia-boton--primario { --_fondo: var(--mia-primario); --_texto: #fff; --_borde: var(--mia-primario); --_hover: var(--mia-azul-hover); }
.mia-boton--exito { --_fondo: var(--mia-verde); --_texto: var(--mia-texto); --_borde: var(--mia-verde); --_hover: #3fa568; }
.mia-boton--acento { --_fondo: var(--mia-amarillo); --_texto: var(--mia-texto); --_borde: var(--mia-amarillo); --_hover: #d6de4c; }
.mia-boton--fantasma { --_fondo: transparent; --_borde: transparent; --_hover: var(--mia-contenedor); }
.mia-boton--peligro { --_texto: var(--mia-error); --_borde: #f1b9a5; --_hover: var(--mia-error-fondo); }
.mia-boton--s { min-height: 2rem; padding: .25rem .75rem; font-size: .82rem; }
.mia-boton--icono { width: 2.5rem; padding: 0; }
.mia-boton--icono.mia-boton--s { width: 2rem; }
@media (pointer: coarse) { .mia-boton { min-height: 2.75rem; } .mia-boton--s { min-height: 2.5rem; } }

/* ---------- Campos ---------- */
.mia-campo {
    min-height: 2.5rem; padding: .4rem .8rem; width: 100%;
    border: 1.5px solid var(--mia-borde); border-radius: 2px; background: #fff; color: var(--mia-texto);
    font-variant-numeric: tabular-nums;
}
.mia-campo:hover { border-color: var(--mia-contorno); }
.mia-campo--corto { width: 5.5rem; text-align: center; }
.mia-campo--medio { width: 9rem; }
.mia-campo[aria-invalid='true'] { border-color: var(--mia-naranja); background: var(--mia-error-fondo); }
.mia-etiqueta { display: grid; gap: .25rem; font-size: .8rem; font-weight: 700; color: var(--mia-texto-suave); }
.mia-etiqueta--fila { display: flex; align-items: center; gap: .5rem; }

.mia input[type='range'] { width: 100%; accent-color: var(--mia-primario); height: 1.75rem; cursor: pointer; }

/* Selector segmentado (radios visuales) */
/* border-radius acotado (no 999px): con muchas opciones o etiquetas largas, el grupo envuelve en varias líneas en
   pantallas angostas, y un radio ilimitado hincha una esquina hasta media altura de TODO el bloque (un bulto redondo
   tapando la primera fila) en vez de solo redondear una fila de una línea. Con un tope, cada fila de una sola línea
   sigue viéndose como una píldora (el radio ya excede la mitad de su altura), y el bloque envuelto queda razonable. */
.mia-segmento {
    display: inline-flex; flex-wrap: wrap; gap: .2rem; padding: .25rem;
    background: var(--mia-contenedor); border-radius: 2px;
}
.mia-segmento button {
    padding: .35rem .85rem; border: 0; border-radius: 2px; background: transparent; cursor: pointer;
    font-size: .85rem; font-weight: 700; color: var(--mia-texto-suave);
}
.mia-segmento button:hover { color: var(--mia-primario); }
.mia-segmento button[aria-checked='true'], .mia-segmento button[aria-pressed='true'] {
    background: var(--mia-superficie); color: var(--mia-primario); box-shadow: 0 1px 3px rgba(27, 26, 38, .18);
}

/* Contador con − / + */
.mia-contador { display: inline-flex; align-items: center; gap: .35rem; }
.mia-contador output {
    min-width: 2.4rem; text-align: center; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums;
}

/* ---------- Mensajes ---------- */
.mia-mensaje {
    display: flex; align-items: flex-start; gap: .65rem; padding: .7rem .95rem; border-radius: 2px;
    font-size: .95rem; font-weight: 600; min-height: 3rem;
    background: var(--mia-contenedor); color: var(--mia-texto-suave);
}
/* Desde la primera acción del usuario, el mensaje lo acompaña: queda pegado al borde inferior de la pantalla
   mientras la actividad esté a la vista (en el móvil la cuadrícula suele quedar lejos del pie). */
.mia-mensaje[data-flota='1'] {
    position: sticky; bottom: .75rem; z-index: 4;
    pointer-events: none; /* solo informa: no debe tapar un botón ni un punto de la cuadrícula que quede debajo */
    box-shadow: 0 0 0 1px rgba(199, 196, 215, .8), 0 8px 22px -10px rgba(27, 26, 38, .45);
}
.mia-mensaje i { margin-top: .2rem; flex: none; }
.mia-mensaje[data-tipo='info'] { background: var(--mia-info-fondo); color: var(--mia-texto); }
.mia-mensaje[data-tipo='info'] i { color: var(--mia-info); }
.mia-mensaje[data-tipo='pista'] { background: var(--mia-aviso-fondo); color: var(--mia-texto); }
.mia-mensaje[data-tipo='pista'] i { color: var(--mia-aviso); }
.mia-mensaje[data-tipo='exito'] { background: var(--mia-exito-fondo); color: #12351f; }
.mia-mensaje[data-tipo='exito'] i { color: var(--mia-exito); }
.mia-mensaje[data-tipo='error'] { background: var(--mia-error-fondo); color: #4a1d0d; }
.mia-mensaje[data-tipo='error'] i { color: var(--mia-error); }
.mia-mensaje.mia-aparece { animation: mia-aparece .28s ease-out; }

/* ---------- Datos y marcadores ---------- */
.mia-marcadores { display: flex; flex-wrap: wrap; gap: .5rem; }
.mia-dato {
    display: grid; gap: .1rem; min-width: 5.2rem; padding: .45rem .8rem;
    background: var(--mia-contenedor); border-radius: 2px;
}
.mia-dato b { font-size: 1.35rem; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; }
.mia-dato span { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mia-texto-suave); }
.mia-dato--exito b { color: var(--mia-exito); }
.mia-dato--error b { color: var(--mia-error); }
.mia-dato--acento { background: var(--mia-amarillo); }
.mia-dato--acento span { color: #3a3d05; }

.mia-insignia {
    display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .65rem; border-radius: 2px;
    font-size: .78rem; font-weight: 800; background: var(--mia-contenedor); color: var(--mia-primario);
}
.mia-insignia--acento { background: var(--mia-amarillo); color: var(--mia-texto); }
.mia-insignia--exito { background: var(--mia-exito-fondo); color: var(--mia-exito); }

.mia-progreso { height: .5rem; border-radius: 2px; background: var(--mia-contenedor-alto); overflow: hidden; }
.mia-progreso > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--mia-verde); transition: width .35s ease; }

.mia-tabla { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.mia-tabla th { text-align: left; padding: .35rem .6rem; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--mia-texto-suave); border-bottom: 2px solid var(--mia-borde); }
.mia-tabla td { padding: .4rem .6rem; border-bottom: 1px solid var(--mia-contenedor-alto); }
.mia-tabla tr:last-child td { border-bottom: 0; }
.mia-tabla td:not(:first-child), .mia-tabla th:not(:first-child) { text-align: right; }

/* ---------- Animaciones ---------- */
@keyframes mia-aparece { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes mia-sacudir { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes mia-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes mia-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(84, 84, 233, .45); } 50% { box-shadow: 0 0 0 8px rgba(84, 84, 233, 0); } }
.mia-sacude { animation: mia-sacudir .38s ease; }
.mia-pop { animation: mia-pop .35s ease-out; }
.mia-pulsa { animation: mia-pulso 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .mia *, .mia *::before, .mia *::after { animation: none !important; transition: none !important; }
}

/* ---------- Carga y error del montaje ---------- */
.mia-montaje { min-height: 12rem; }
.mia-cargando { display: grid; place-items: center; gap: .5rem; min-height: 12rem; color: var(--mia-texto-suave); font-weight: 700; }
.mia-cargando::before {
    content: ''; width: 1.75rem; height: 1.75rem; border-radius: 50%;
    border: 3px solid var(--mia-contenedor-alto); border-top-color: var(--mia-azul); animation: mia-gira .8s linear infinite;
}
@keyframes mia-gira { to { transform: rotate(360deg); } }
.mia-fallo { padding: 1.25rem; }

/* ---------- Texto accesible oculto ---------- */
.mia-solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* =====================================================================
   Factorizar (fz-)
   ===================================================================== */
.fz-numero { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.fz-cifra { font-size: 3.4rem; line-height: 1; font-weight: 800; color: var(--mia-primario); letter-spacing: -.03em; min-width: 1.6ch; }
.fz-avance { flex: 1; display: grid; gap: .35rem; font-size: .82rem; font-weight: 700; color: var(--mia-texto-suave); }
.fz-agregar { display: flex; gap: .5rem; }
.fz-agregar .mia-campo { flex: 1; min-width: 0; }
.fz-utiles { margin-top: .6rem; }
.fz-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; margin-top: .9rem; }
.fz-lista:empty { display: none; }
.fz-item {
    display: flex; align-items: center; gap: .6rem; width: 100%; padding: .4rem .65rem .4rem .45rem;
    background: #fff; border: 1.5px solid var(--mia-borde); border-radius: 2px; text-align: left;
    animation: mia-pop .3s ease-out;
}
button.fz-item { cursor: pointer; }
button.fz-item:hover { border-color: var(--mia-azul); }
button.fz-item:focus-visible { outline: 3px solid var(--mia-amarillo); outline-offset: 2px; box-shadow: 0 0 0 5px var(--mia-primario); }
.fz-item[data-estado='activa'] { border-color: var(--mia-primario); box-shadow: 0 0 0 3px rgba(84, 84, 233, .22); }
.fz-item[data-estado='hecha'] { border-color: var(--mia-verde); background: var(--mia-exito-fondo); }
.fz-item > span { flex: 1; min-width: 0; display: grid; }
.fz-expr { font-weight: 800; font-size: 1.1rem; }
.fz-item small { font-size: .7rem; line-height: 1.25; color: var(--mia-texto-suave); }
.fz-ok { color: var(--mia-exito); }
.fz-mini { flex: none; }
.fz-final {
    margin-top: 1rem; padding: 1rem; display: grid; gap: .5rem; justify-items: start;
    background: var(--mia-amarillo); border-radius: var(--mia-radio); color: var(--mia-texto);
}
.fz-final-titulo { font-size: 1.15rem; font-weight: 800; }
.fz-svg { border-radius: 2px; }
.fz-medidas { justify-content: space-between; margin: .6rem 0; }
.fz-acciones { margin-top: .75rem; justify-content: flex-end; }
.fz-contadores { display: grid; grid-template-columns: max-content max-content; justify-content: start; align-items: center; gap: .4rem 1rem; }

/* =====================================================================
   Indicador de fracciones (fr-)
   ===================================================================== */
.fr-etapas { display: flex; flex-wrap: wrap; gap: .4rem; }
.fr-etapas li { display: flex; align-items: center; gap: .45rem; padding: .25rem .8rem .25rem .3rem; border-radius: 2px; background: var(--mia-contenedor); color: var(--mia-texto-suave); font-size: .82rem; font-weight: 700; }
.fr-num { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--mia-borde); color: #fff; font-size: .75rem; font-weight: 800; }
.fr-etapas li[data-estado='actual'] { background: var(--mia-primario); color: #fff; }
.fr-etapas li[data-estado='actual'] .fr-num { background: var(--mia-amarillo); color: var(--mia-texto); }
.fr-etapas li[data-estado='hecha'] { background: var(--mia-exito-fondo); color: var(--mia-exito); }
.fr-etapas li[data-estado='hecha'] .fr-num { background: var(--mia-verde); color: var(--mia-texto); }

.fr-recta { max-height: 220px; }
.fr-flecha { transition: transform .25s ease; }

.fr-figuras { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; align-items: start; }
.fr-figura { display: grid; gap: .6rem; justify-items: center; text-align: center; border-top: 5px solid var(--fr-color); transition: opacity .2s; }
.fr-figura > * { width: 100%; }
.fr-figura[data-estado='espera'] { opacity: .5; }
.fr-figura[data-estado='ok'] { background: var(--mia-exito-fondo); }
.fr-figura .mia-subtitulo { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0; }
.fr-punto { width: .8rem; height: .8rem; border-radius: 50%; background: var(--fr-color); }
.fr-marca { color: var(--mia-exito); text-transform: none; letter-spacing: 0; font-size: .8rem; }
.fr-objetivo { min-height: 3.4rem; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .3rem; font-weight: 600; color: var(--mia-texto-suave); }
.fr-svg { margin-inline: auto; outline: none; }
.fr-parte { cursor: pointer; transition: fill .12s; }
.fr-parte:hover { fill-opacity: .55; }
.fr-bloqueada .fr-parte { cursor: default; }
.fr-bloqueada .fr-parte:hover { fill-opacity: inherit; }
.fr-pie { font-size: .85rem; color: var(--mia-texto-suave); }
.fr-pie b { color: var(--fr-color); font-size: 1.05rem; }
.fr-panel { display: grid; gap: .6rem; justify-items: center; }
.fr-controles { display: grid; grid-template-columns: max-content max-content; justify-content: center; align-items: center; gap: .35rem .8rem; }
.fr-acciones { justify-content: center; }

.fr-frac { display: inline-grid; text-align: center; line-height: 1.1; vertical-align: middle; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 1.35rem; color: var(--mia-texto); }
.fr-frac > span:first-child { border-bottom: 2px solid currentColor; padding: 0 .3em .06em; }
.fr-frac > span:last-child { padding-top: .06em; }

.fr-entrada { display: inline-grid; gap: .3rem; justify-items: center; }
.fr-barra { width: 100%; height: 2px; background: var(--mia-texto); border-radius: 2px; }
.fr-extremos-fila { gap: 1rem; }
.fr-y { font-weight: 800; color: var(--mia-texto-suave); }
.fr-nota { margin-top: .6rem; font-size: .85rem; color: var(--mia-texto-suave); }

/* =====================================================================
   La ruleta (ru-)
   ===================================================================== */
.ru-rueda { margin-inline: auto; overflow: visible; }
.ru-aguja { transform: rotate(0deg); }
.ru-elegido { stroke: var(--mia-texto); stroke-width: 4; }
.ru-manija { cursor: grab; }
.ru-manija:active { cursor: grabbing; }
.ru-manija:focus-visible { outline: none; stroke: var(--mia-amarillo); stroke-width: 5; }
.ru-controles { display: grid; gap: .75rem; margin-top: 1rem; }
.ru-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin: .75rem 0 .25rem; min-height: 1.5rem; }
.ru-chip { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: .72rem; font-weight: 800; animation: mia-pop .25s ease-out; }
.ru-tabla { margin-top: .5rem; overflow-x: auto; }
.ru-tabla tfoot td { border-top: 2px solid var(--mia-borde); font-weight: 800; }
.ru-fila-actual { background: var(--mia-amarillo); }
.ru-fila-actual td { border-bottom-color: transparent; }
.ru-muestra { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: .75rem; font-weight: 800; vertical-align: middle; }
.ru-sub { margin-top: 1.1rem; }
.ru-grafico { max-height: 240px; }

/* =====================================================================
   Monty Hall (mh-)
   ===================================================================== */
.mh-col { display: grid; gap: 1rem; min-width: 0; }
.mh-estado { min-height: 3rem; margin-bottom: .75rem; font-weight: 600; color: var(--mia-texto-suave); }
.mh-ajuste { display: grid; gap: .5rem; margin-bottom: .9rem; padding: .75rem; background: var(--mia-contenedor); border-radius: 2px; }
.mh-ajuste .mia-etiqueta--fila { flex-wrap: wrap; }
.mh-ajuste input[type='range'] { flex: 1; min-width: 8rem; }
.mh-valor { min-width: 2.5ch; font-size: 1.05rem; font-weight: 800; color: var(--mia-primario); }
.mh-check { cursor: pointer; font-weight: 600; }
.mh-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--mia-primario); }
.mh-tablero { border-radius: 2px; background: linear-gradient(180deg, var(--mia-contenedor) 0%, var(--mia-fondo) 100%); padding: .5rem; }
.mh-puertas { overflow: visible; }
.mh-puerta { outline: none; }
.mh-puerta[role='button']:hover .mh-hoja { filter: brightness(1.12); }
.mh-puerta[role='button']:focus-visible .mh-marco { stroke: var(--mia-texto); stroke-width: 4; stroke-dasharray: 8 4; }
.mh-acciones { justify-content: center; margin-top: .9rem; min-height: 2.5rem; }
.mh-form { display: grid; gap: .8rem; margin-bottom: .9rem; }
.mh-salida { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.mh-punto { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; margin-right: .5rem; vertical-align: baseline; }
.mh-grafico { max-height: 220px; margin-top: .75rem; }
.mh-reiniciar { justify-content: flex-end; }

/* =====================================================================
   Histograma (hi-)
   ===================================================================== */
.hi-resumen { margin-top: .9rem; }
.hi-datos { min-height: 7rem; margin: .75rem 0 .5rem; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; resize: vertical; }
.hi-mis { display: grid; }
.mia select.mia-campo { appearance: auto; }
.hi-svg { max-height: 460px; border-radius: 2px; }
.hi-barra rect { transition: fill .15s; }
.hi-barra:hover rect { fill: var(--mia-primario); }
.hi-controles { display: grid; gap: 1rem; margin-top: .75rem; padding-top: 1rem; border-top: 1px solid var(--mia-contenedor-alto); }
.hi-fila-ancho { display: grid; grid-template-columns: max-content minmax(8rem, 1fr) max-content; align-items: center; gap: .5rem 1rem; }
@container (max-width: 520px) { .hi-fila-ancho { grid-template-columns: 1fr max-content; } .hi-fila-ancho .mia-etiqueta { grid-column: 1 / -1; } }
.hi-titulo { flex: 1 1 14rem; }
.hi-check { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-weight: 700; }
.hi-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--mia-primario); }
.hi-tabla { margin-top: .9rem; max-height: 22rem; overflow: auto; }
.hi-tabla tfoot td { border-top: 2px solid var(--mia-borde); font-weight: 800; }

/* =====================================================================
   Preguntas y cuestionarios (jp-, cz-) y Cuatro en línea (cu-)
   ===================================================================== */
.jp-config { display: grid; gap: 1.1rem; max-width: 46rem; margin-inline: auto; width: 100%; }
.jp-campo { display: grid; gap: .5rem; }
.jp-campo .mia-subtitulo { margin: 0; }
.jp-nota { font-size: .85rem; color: var(--mia-texto-suave); }
.jp-tipos { display: flex; flex-wrap: wrap; gap: .5rem; }
.jp-tipo { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .9rem; border: 1.5px solid var(--mia-borde); border-radius: 2px; background: #fff; font-weight: 700; font-size: .92rem; cursor: pointer; }
.jp-tipo:has(input:checked) { border-color: var(--mia-primario); background: var(--mia-info-fondo); color: var(--mia-primario); }
.jp-tipo[data-fijo='1'] { cursor: default; }
.jp-tipo input { width: 1.1rem; height: 1.1rem; accent-color: var(--mia-primario); }
.jp-aviso { color: var(--mia-error); font-weight: 700; }
.jp-resumen { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }

.jp-pregunta { display: grid; gap: .8rem; transition: box-shadow .2s, border-color .2s; }
.jp-pregunta[data-resultado='ok'] { border-color: var(--mia-verde); box-shadow: 0 0 0 3px rgba(76, 185, 121, .28); }
.jp-pregunta[data-resultado='mal'] { border-color: var(--mia-naranja); box-shadow: 0 0 0 3px rgba(233, 104, 59, .25); }
.jp-etiquetas { display: flex; flex-wrap: wrap; gap: .4rem; }
.jp-enunciado { font-size: clamp(1.35rem, 3.2cqw + .6rem, 2rem); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.jp-pista { font-size: .85rem; color: var(--mia-texto-suave); }
.jp-tiempo { display: flex; align-items: center; gap: .75rem; }
.jp-barra { flex: 1; height: .6rem; border-radius: 2px; background: var(--mia-contenedor-alto); overflow: hidden; }
.jp-barra i { display: block; height: 100%; width: 100%; background: var(--mia-verde); border-radius: inherit; transition: width .25s linear, background-color .3s; }
.jp-pregunta[data-urgente='1'] .jp-barra i { background: var(--mia-naranja); }
.jp-reloj { font-weight: 800; min-width: 3ch; color: var(--mia-texto-suave); }
.jp-pregunta[data-urgente='1'] .jp-reloj { color: var(--mia-error); }
.jp-forma { display: flex; gap: .5rem; }
.jp-entrada { flex: 1; min-width: 0; font-size: 1.15rem; font-weight: 700; }
.jp-comentario { display: flex; gap: .6rem; align-items: flex-start; font-weight: 700; }
.jp-comentario:empty { display: none; }
.jp-comentario i { margin-top: .2rem; }
.jp-comentario[data-tipo='exito'] { color: var(--mia-exito); }
.jp-comentario[data-tipo='error'] { color: var(--mia-error); }
.jp-comentario[data-tipo='pista'] { color: var(--mia-aviso); }

.cz-derecha { display: grid; gap: .75rem; min-width: 0; align-content: start; }
.cz-siguiente { justify-content: flex-end; min-height: 2.5rem; }
.cz-marcadores { margin-bottom: .9rem; }
.cz-botones { margin-bottom: .5rem; }
.cz-tabla { margin-top: .5rem; overflow-x: auto; }
.cz-tabla tfoot td { border-top: 2px solid var(--mia-borde); font-weight: 800; }

.cu-jugadores { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.cu-jugador { flex: 1 1 8rem; display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; border-radius: 2px; border: 2px solid transparent; background: var(--mia-contenedor); font-weight: 800; opacity: .65; transition: opacity .2s; }
.cu-jugador small { display: block; font-size: .72rem; font-weight: 700; color: var(--mia-texto-suave); text-transform: capitalize; }
.cu-jugador[data-turno='true'] { opacity: 1; border-color: var(--mia-primario); background: #fff; box-shadow: var(--mia-sombra); }
.cu-punto { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--mia-texto); font-weight: 800; border: 2px solid rgba(27, 26, 38, .3); }
.cu-lienzo { padding: .25rem; }
.cu-tablero { max-width: 520px; overflow: visible; filter: drop-shadow(0 10px 18px rgba(58, 55, 208, .25)); }
.cu-columna { cursor: not-allowed; }
.cu-activo .cu-columna { cursor: pointer; }
.cu-botones { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; margin-top: .75rem; max-width: 520px; margin-inline: auto; }
.cu-botones .mia-boton { padding-inline: 0; min-width: 0; }
.cu-derecha { display: grid; gap: .75rem; align-content: start; min-width: 0; }
/* En pantallas estrechas se responde primero (pregunta arriba) y después se elige la columna (tablero abajo). */
@container (max-width: 719px) { .cu-derecha { order: -1; } }
.cu-fin { justify-content: center; }
.cu-gana { animation: cu-anillo 1s ease-in-out infinite; }
@keyframes cu-anillo { 50% { stroke-opacity: .3; } }

/* =====================================================================
   Fractales por etapas (fe-)
   ===================================================================== */
.fe-marco { border-radius: 2px; background: linear-gradient(180deg, #fff 0%, var(--mia-fondo) 100%); border: 1px solid var(--mia-contenedor-alto); overflow: hidden; }
.fe-lienzo { display: block; max-width: 100%; margin-inline: auto; }
.fe-mando { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .9rem; }
.fe-mando input[type='range'] { flex: 1 1 8rem; min-width: 7rem; }
.fe-lateral { display: grid; gap: 1rem; min-width: 0; align-content: start; }
.fe-resumen .mia-dato { min-width: 6.5rem; }
.fe-resumen .mia-dato b { font-size: 1.15rem; }
.fe-scroll { max-height: 15rem; overflow: auto; }
.fe-tabla .fe-actual { background: var(--mia-amarillo); font-weight: 800; }
.fe-tabla .fe-actual td { border-bottom-color: transparent; }
.fe-fraccion { margin-top: .9rem; }
.fe-prediccion { display: grid; gap: .5rem; }

/* =====================================================================
   Juego del caos (jc-)
   ===================================================================== */
.jc-marco { border-radius: 2px; background: #fff; border: 1px solid var(--mia-contenedor-alto); overflow: hidden; touch-action: none; }
.jc-lienzo { display: block; margin-inline: auto; max-width: 100%; touch-action: none; }
.jc-lateral { display: grid; gap: 1rem; min-width: 0; align-content: start; }
.jc-controles { display: grid; gap: 1rem; }
.jc-campo { display: grid; gap: .45rem; }
.jc-campo .mia-subtitulo { margin: 0; }
.jc-razon { min-width: 3ch; font-weight: 800; color: var(--mia-primario); }
.jc-pesos { display: grid; gap: .35rem; margin-bottom: .9rem; }
.jc-peso { display: grid; grid-template-columns: max-content 1fr 2.4rem; align-items: center; gap: .6rem; font-weight: 700; }
.jc-punto { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: .75rem; font-weight: 800; color: #fff; border: 2px solid rgba(27, 26, 38, .3); }
.jc-punto--s { width: 1.3rem; height: 1.3rem; font-size: .68rem; }
.jc-tabla td:first-child, .jc-tabla th:first-child { text-align: left; }
.jc-total { margin-top: .75rem; font-weight: 700; color: var(--mia-texto-suave); }
.jc-total b { color: var(--mia-primario); }

/* =====================================================================
   Conjuntos de Julia y de Mandelbrot (cc-)
   ===================================================================== */
.cc-marco { position: relative; border-radius: 2px; overflow: hidden; border: 1px solid var(--mia-contenedor-alto); background: #0f0f1a; line-height: 0; }
.cc-base, .cc-capa { display: block; width: 100%; height: auto; }
.cc-capa { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
.cc-estado { margin-top: .6rem; font-size: .8rem; color: var(--mia-texto-suave); }
.cc-botones { margin-top: .6rem; }
.cc-controles { max-width: 46rem; }

/* =====================================================================
   Dimensión fractal (df-) y triángulo de Pascal (tp-)
   ===================================================================== */
.df-marco { border-radius: 2px; background: linear-gradient(180deg, #fff 0%, var(--mia-fondo) 100%); border: 1px solid var(--mia-contenedor-alto); overflow: hidden; }
.df-lienzo { display: block; margin-inline: auto; max-width: 100%; }
.df-nav { justify-content: space-between; margin-top: .9rem; }
.df-forma { display: grid; gap: .8rem; align-content: start; }
.df-resultado { display: grid; gap: .2rem; padding: .7rem .9rem; border-radius: 2px; background: var(--mia-contenedor); font-weight: 700; color: var(--mia-texto-suave); }
.df-resultado--ok { background: var(--mia-exito-fondo); color: #12351f; }
.df-puntaje { margin-top: .25rem; }

.tp-controles { display: grid; gap: .9rem; }
.tp-datos { margin-bottom: .75rem; }
.tp-marco { overflow-x: auto; }
.tp-svg { display: block; max-width: 780px; margin-inline: auto; }
.tp-celda { cursor: pointer; outline: none; }
.tp-celda[aria-pressed='false']:hover circle { fill: var(--mia-contenedor); }
.tp-celda:focus-visible circle { stroke: var(--mia-primario); stroke-width: 4; }

/* =====================================================================
   Plano cartesiano (pl-) y graficadores (gr-)
   ===================================================================== */
.pl-marco { position: relative; border-radius: 2px; border: 1px solid var(--mia-contenedor-alto); overflow: hidden; background: #fff; line-height: 0; }
.pl-lienzo { display: block; width: 100%; height: auto; outline: none; }
.pl-interactivo .pl-lienzo { cursor: grab; touch-action: none; }
.pl-interactivo .pl-agarrado { cursor: grabbing; }
.pl-lienzo:focus-visible { box-shadow: inset 0 0 0 4px var(--mia-primario), inset 0 0 0 7px var(--mia-amarillo); }

.gr-lateral { display: grid; gap: 1rem; min-width: 0; align-content: start; }
.gr-filas { display: grid; gap: .7rem; margin-bottom: .75rem; }
.gr-fila { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .6rem; align-items: center; }
.gr-color { width: .9rem; height: .9rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgba(27, 26, 38, .35); }
.gr-entradas { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.gr-rotulo { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: .95rem; white-space: nowrap; }
.gr-campo { flex: 1 1 7rem; min-width: 0; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .95rem; }
.gr-error { grid-column: 2; font-size: .82rem; font-weight: 600; color: var(--mia-error); }
.gr-error:empty { display: none; }
.gr-deslizadores { display: grid; gap: .5rem; margin-top: .75rem; padding: .75rem; border-radius: 2px; background: var(--mia-contenedor); }
.gr-deslizador { display: grid; grid-template-columns: 1.5rem 1fr 3.2rem; align-items: center; gap: .6rem; }
.gr-deslizador b { font-size: 1.1rem; color: var(--mia-primario); }
.gr-valor { font-weight: 800; text-align: right; }
.gr-datos { min-height: 8rem; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; resize: vertical; }
.gr-opciones { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .6rem; }
.gr-check { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; cursor: pointer; }
.gr-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--mia-primario); }
.gr-ejes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.gr-ejes .mia-campo { width: 100%; }
.gr-estado { margin-top: .6rem; font-size: .85rem; color: var(--mia-texto-suave); min-height: 1.3rem; overflow-wrap: anywhere; }
.gr-zoom { margin-top: .5rem; }
.gr-ayuda { font-size: .8rem; color: var(--mia-texto-suave); }
.gr-tabla { margin-top: .6rem; max-height: 16rem; overflow: auto; }
.gr-ejemplos { max-width: 15rem; }
/* Gráfico de dispersión: título, rótulos de los ejes y leyenda de los conjuntos */
.gr-titulo-grafico { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 800; text-align: center; color: var(--mia-texto); overflow-wrap: anywhere; }
.gr-titulo-grafico[hidden], .gr-leyenda[hidden] { display: none; }
.gr-rotulos { display: grid; gap: .6rem; }
.gr-rotulos .mia-campo { width: 100%; margin-top: .2rem; }
.gr-leyenda { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .85rem; font-weight: 700; }
.gr-leyenda li { display: inline-flex; align-items: center; gap: .4rem; }

/* ------------------------------------------------------------------ Regresión (rg-) */
.rg-lienzo { touch-action: none; }
@media (min-width: 900px) { .rg-plano { position: sticky; top: .75rem; align-self: start; } } /* el plano se queda a la vista mientras se recorren las rectas y los residuos */
.pl-marco[data-modo='anadir'] .rg-lienzo { cursor: crosshair; }
.pl-marco[data-modo='eliminar'] .rg-lienzo { cursor: no-drop; }
.pl-marco[data-modo='mover'] .rg-lienzo, .pl-marco[data-modo='recta'] .rg-lienzo { cursor: grab; }
.pl-marco[data-modo] .rg-lienzo.pl-agarrado { cursor: grabbing; }
.rg-n { margin: 0 0 .5rem; font-weight: 800; font-size: 1.05rem; }
.rg-aviso { grid-column: auto; }
.rg-recta { display: grid; gap: .35rem; margin: .35rem 0 .9rem 1.6rem; padding: .6rem .8rem; border-radius: 2px; background: var(--mia-contenedor); }
.rg-recta[hidden] { display: none; }
.rg-recta .mia-fila { gap: .5rem 1rem; }
.rg-recta .mia-campo--corto { width: 6rem; }
.rg-ecuacion { margin: 0; font-size: 1.15rem; font-weight: 800; overflow-wrap: anywhere; }
.rg-ecuacion--verde { color: #2A8A55; }
.rg-ecuacion--roja { color: #C8262C; }
.rg-dato { margin: 0; font-size: 1.15rem; font-weight: 800; color: #C8262C; }
.rg-nota { margin: 0; font-size: .82rem; color: var(--mia-texto-suave); }
.rg-subtitulo { margin: .9rem 0 .4rem; font-size: .95rem; font-weight: 800; }
.rg-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: .5rem 0 0; font-size: .85rem; font-weight: 700; }
.rg-leyenda .gr-color:not(:first-child) { margin-left: .6rem; }
.rg-tabla tfoot th, .rg-tabla tfoot td { font-weight: 800; border-top: 2px solid var(--mia-borde, #c7c4d7); }

/* ------------------------------------------------------------------ Mezclas (mz-) */
.mz-pilas { row-gap: 1rem; }
.mz-pila { min-height: 0; }
.mz-circulos { display: flex; flex-wrap: wrap; gap: 3px; min-height: 2.4rem; align-content: flex-start; padding: .5rem; border-radius: 2px; background: var(--mia-fondo); }
.mz-circulo { width: .85rem; height: .85rem; border-radius: 50%; flex: 0 0 auto; background: #fff; border: 1.5px solid var(--mia-borde); }
.mz-circulo--lleno { background: var(--mia-primario); border-color: var(--mia-primario); }
.mz-texto { margin: .5rem 0 0; font-weight: 700; font-size: .88rem; color: var(--mia-texto-suave); }
.mz-controles { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--mia-contenedor-alto); display: grid; gap: .5rem; }
.mz-controles[hidden] { display: none; }
.mz-controles .mia-campo--corto { width: 5rem; }
.mz-botones { display: flex; flex-wrap: wrap; gap: .4rem; }
.mz-enunciado { margin: 0; }
.mz-combinada[hidden] { display: none; }
.mz-combinada .mz-circulos { background: var(--mia-contenedor); }

/* ------------------------------------------------------------------ Regresión lineal múltiple (rm-) */
.rm-datos { min-height: 9rem; }
.rm-n { margin: 0 0 .5rem; font-weight: 800; }
.rm-cuadricula { row-gap: 1rem; }
.rm-dimension .pl-marco { max-width: 22rem; margin-inline: auto; }
.rm-ecuacion { font-size: 1rem; }
.rm-recta-verde { display: grid; gap: .3rem; margin: .5rem 0 .7rem; padding: .6rem .75rem; border-radius: 2px; background: var(--mia-contenedor); }
.rm-deslizador { display: grid; grid-template-columns: 1.1rem 1fr 3rem; align-items: center; gap: .5rem; }
.rm-deslizador input[type='range'] { width: 100%; accent-color: var(--mia-primario); }
.rm-suma { margin: .2rem 0 0; font-size: .85rem; font-weight: 700; color: var(--mia-texto-suave); }
.rm-incluir { margin-top: .5rem; }
.rm-total { margin: 0; font-size: 1.1rem; font-weight: 800; }

/* ------------------------------------------------------------------ Distribución normal (dn-) */
.dn-etiqueta { margin: 0 0 .6rem; font-size: 1.05rem; font-weight: 800; }
.dn-mediana { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--mia-contenedor-alto); }
.dn-deslizador { display: grid; gap: .35rem; margin-top: .8rem; }
.dn-deslizador input[type='range'] { width: 100%; accent-color: var(--mia-primario); }
.dn-comparacion { margin-top: 1rem; }
.dn-caja { background: var(--mia-superficie); border: 1px solid rgba(199, 196, 215, .7); border-radius: var(--mia-radio); padding: .85rem 1rem; }
.dn-caja-titulo { margin: 0 0 .5rem; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.dn-caja--negra .dn-caja-titulo { color: var(--mia-texto); }
.dn-caja--morada .dn-caja-titulo { color: var(--mia-morado); }
.dn-caja-datos { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .75rem; margin: 0; }
.dn-caja-datos dt { font-weight: 700; color: var(--mia-texto-suave); }
.dn-caja-datos dd { margin: 0; font-weight: 800; text-align: right; }
.dn-caja--morada .dn-caja-datos dd { color: var(--mia-morado); }

/* ------------------------------------------------------------------ Curvas Gaussianas superpuestas (cg-) */
.cg-deslizadores { display: grid; gap: 1rem; margin-top: 1rem; }
@container (min-width: 520px) { .cg-deslizadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cg-curva h4 { display: flex; align-items: center; gap: .5rem; }
.cg-area { margin: 0 0 .4rem; font-weight: 700; font-size: .92rem; }

/* ------------------------------------------------------------------ Bolsa de valores / moneda (mo-) */
.mo-panel { text-align: center; }
.mo-moneda { width: 8rem; margin: 0 auto; }
.mo-moneda svg { display: block; width: 100%; height: auto; }
.mo-ultimo { margin: .75rem 0; font-weight: 700; }
.mo-secuencia { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: .5rem; }
.mo-secuencia[hidden] { display: none; }
.mo-ficha { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-weight: 800; font-size: .8rem; color: #fff; }
.mo-ficha--cara { background: #5454E9; }
.mo-ficha--sello { background: #E5484D; }
.mo-icono-fa { font-family: "Font Awesome 6 Free"; font-weight: 900; }
.mo-icono-fila { margin-right: .3rem; color: var(--mia-contorno); }
.mo-nota { margin: .5rem 0 0; font-size: .8rem; color: var(--mia-texto-suave); }
.mo-total th, .mo-total td { font-weight: 800; border-top: 2px solid var(--mia-borde); }
.mo-comparacion { margin: .75rem 0 0; font-size: .85rem; color: var(--mia-texto-suave); }

/* ------------------------------------------------------------------ Tablero de dados (td-) */
.td-filas { display: grid; gap: .4rem; margin-bottom: .8rem; }
.td-fila { display: grid; grid-template-columns: 1.6rem 1fr; align-items: center; gap: .6rem; }
.td-suma { font-weight: 800; text-align: right; }
.td-cuadricula { display: block; width: 100%; max-width: 22rem; margin: 0 auto; height: auto; }
.td-etiqueta { font-size: 13px; font-weight: 700; fill: var(--mia-texto-suave); }
.td-celda { stroke: var(--mia-borde); stroke-width: 1; } /* el relleno lo pone JS (setAttribute): una regla de fill aquí ganaría por especificidad y lo taparía siempre */
.td-celda-texto { font-size: 15px; font-weight: 800; pointer-events: none; }
.td-nota { color: var(--mia-texto-suave); }
.td-preguntas[hidden], .td-nota[hidden] { display: none; }
.td-pregunta { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--mia-contenedor-alto); }
.td-pregunta:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.td-pregunta p { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 .5rem; }
.td-pregunta .mia-campo--corto { width: 6rem; }
.td-jugador-actual { color: var(--mia-primario); }
.td-aviso { margin: .4rem 0 0; font-weight: 700; font-size: .88rem; }
.td-aviso:empty { display: none; }
.td-aviso[data-tipo='exito'] { color: #2A8A55; }
.td-aviso[data-tipo='error'] { color: var(--mia-error); }

/* ------------------------------------------------------------------ Dos colores (dsc-) */
/* «dc-» ya lo usa diagrama-caja: prefijo distinto para no chocar con sus clases. */
.dsc-panel { text-align: center; }
.dsc-urna { margin-bottom: 1rem; }
.dsc-urna-bolas { display: flex; justify-content: center; gap: 6px; margin-top: .4rem; }
.dsc-bola { display: inline-block; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgba(27, 26, 38, .25); }
.dsc-bola--verde { background: #168A0A; }
.dsc-bola--roja { background: #E5484D; }
.dsc-bola--grande { width: 2.6rem; height: 2.6rem; border-width: 3px; }
.dsc-ultimo { padding: .9rem; border-radius: 2px; background: var(--mia-contenedor); margin-bottom: 1rem; }
.dsc-par { display: flex; justify-content: center; gap: .6rem; margin: .5rem 0; }
.dsc-resultado { margin: 0; font-weight: 700; }
.dsc-secuencia { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.dsc-secuencia[hidden] { display: none; }
.dsc-par-chico { display: inline-flex; gap: 2px; padding: 2px; border-radius: 2px; background: var(--mia-fondo); }
.dsc-nota { margin: .5rem 0 0; font-size: .8rem; color: var(--mia-texto-suave); }
.dsc-total th, .dsc-total td { font-weight: 800; border-top: 2px solid var(--mia-borde); }
.dsc-tabla { overflow-x: auto; } /* la tabla de resultados puede ser más ancha que la tarjeta en móvil */

/* =====================================================================
   Máquinas de funciones (mf-) y juegos de coordenadas (co-)
   ===================================================================== */
.mf-marco { border-radius: 2px; background: linear-gradient(180deg, #fff 0%, var(--mia-fondo) 100%); border: 1px solid var(--mia-contenedor-alto); padding: .5rem; margin-bottom: .9rem; }
.mf-svg { width: 100%; height: auto; overflow: visible; }
.mf-engranaje { transform-box: fill-box; transform-origin: center; }
.mf-trabaja .mf-engranaje--a { animation: mf-gira 1.1s linear infinite; }
.mf-trabaja .mf-engranaje--b { animation: mf-gira 1.1s linear infinite reverse; }
@keyframes mf-gira { to { rotate: 360deg; } }
.mf-entrada { justify-content: space-between; }
.mf-datos { margin-top: 1rem; max-height: 17rem; overflow: auto; }
.mf-derecha { display: grid; gap: 1rem; min-width: 0; align-content: start; }
.mf-adivina { display: grid; gap: .9rem; }
.mf-regla { gap: .5rem .6rem; }
.mf-y { font-size: 1.25rem; font-weight: 700; }
.mf-op { width: 4.5rem; text-align: center; font-weight: 800; font-size: 1.1rem; }
.mf-puntaje { margin-top: .75rem; display: grid; gap: .6rem; }

.co-forma { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; }
.co-plano .pl-marco { max-width: 560px; margin-inline: auto; }

/* ------------------------------------------------------------------ Cálculo: derivada e integral (ca-) */
.ca-fila { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: .6rem; }
.ca-fila input[type='range'], .ca-secante input[type='range'] { width: 100%; accent-color: var(--mia-primario); }
.ca-valor { min-width: 3.2rem; text-align: right; font-weight: 800; }
.ca-datos { display: grid; gap: .35rem; margin: .9rem 0 .5rem; padding: .75rem .9rem; border-radius: 2px; background: var(--mia-contenedor); }
.ca-dato { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem .75rem; }
.ca-dato[hidden] { display: none; }
.ca-dato dt { font-weight: 700; color: var(--mia-texto-suave); }
.ca-dato dd { margin: 0; font-weight: 800; text-align: right; overflow-wrap: anywhere; }
.ca-secante { margin-top: .5rem; }
.ca-secante[hidden] { display: none; }
.ca-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: .6rem 0 0; font-size: .82rem; color: var(--mia-texto-suave); }
.ca-muestra { display: inline-block; width: 1rem; height: .7rem; border-radius: 2px; }
.ca-muestra--pos { background: rgba(84, 84, 233, .35); border: 1.5px solid var(--mia-primario); }
.ca-muestra--neg { background: rgba(134, 92, 240, .4); border: 1.5px solid #7042e0; }
.ca-muestra--curva { height: 3px; background: var(--mia-naranja); }

/* ------------------------------------------------------------------ Desigualdades lineales (dl-) */
.dl-filas { display: grid; gap: .7rem; margin-bottom: .75rem; }
.dl-fila { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .6rem; align-items: center; }
.dl-entradas { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .45rem; }
.dl-entradas .mia-campo--corto { width: 4.3rem; }
.dl-signo { width: 4.2rem; font-weight: 800; font-size: 1.05rem; text-align: center; }
.dl-fila .gr-error { grid-column: 2; }
.dl-listado, .dl-datos { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .35rem; }
.dl-listado:empty, .dl-datos:empty { display: none; }
.dl-listado li { display: flex; align-items: center; gap: .6rem; }
.dl-texto { font-weight: 800; }
.dl-resumen { margin: .6rem 0 0; font-weight: 700; }
.dl-datos { max-height: 10rem; overflow: auto; }
.dl-datos li { display: flex; flex-wrap: wrap; gap: .25rem .6rem; font-weight: 700; }
.dl-ok { color: var(--mia-exito); }
.dl-mal { color: var(--mia-error); }

/* ------------------------------------------------------------------ Prueba de la recta vertical y «¿Posible o no?» (pv-, pn-) */
.pv-puntos { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0; }
.pv-puntos[hidden] { display: none; }
.pv-punto { font-variant-numeric: tabular-nums; }
.pv-punto--usado { background: var(--mia-primario); color: #fff; border-color: var(--mia-primario); }
.pv-recta { margin: .5rem 0 0; font-weight: 700; }
.pn-pregunta { margin: 0 0 .75rem; font-weight: 700; }
.pn-progreso { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: .85rem 0 0; }
.pn-paso { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; font-weight: 800; font-size: .85rem; background: var(--mia-contenedor); color: var(--mia-texto); border: 2px solid transparent; }
.pn-paso--actual { border-color: var(--mia-primario); }
.pn-paso--ok { background: var(--mia-exito-fondo); color: var(--mia-exito); }
.pn-paso--mal { background: var(--mia-error-fondo); color: var(--mia-error); }

/* ------------------------------------------------------------------ Bomba de variables (bv-) */
.bv-tabla { max-height: 22rem; overflow: auto; }
.bv-ultima td { background: var(--mia-aviso-fondo); font-weight: 800; }
.bv-entrada { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; margin-bottom: .7rem; }
.bv-par { display: flex; align-items: center; gap: .4rem; font-weight: 700; }
.bv-par .mia-campo--corto { flex: 1 1 4rem; width: auto; min-width: 0; }
.pn-puntaje { margin: .9rem 0 .5rem; }

/* ------------------------------------------------------------------ Control de pendiente (pi-) */
.pi-ecuacion { font-family: Georgia, 'Times New Roman', serif; font-size: 1.4rem; font-weight: 700; margin: 0 0 .75rem; }

/* ------------------------------------------------------------------ Resolviendo ecuaciones (re-) */
.re-historial { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .35rem; max-height: 14rem; overflow: auto; }
.re-historial li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .92rem; }
.re-flecha { color: var(--mia-texto-suave); font-weight: 700; }
.re-termino { flex: 1 1 10rem; }

/* ------------------------------------------------------------------ Explorador de área y perímetro (ep-) */
.ep-svg { width: 100%; aspect-ratio: 1 / 1; display: block; background: #fff; border-radius: 2px; border: 1px solid var(--mia-contenedor-alto); }
.ep-fondo { fill: #fff; stroke: var(--mia-contenedor-alto); stroke-width: 1; }
.ep-celda { fill: var(--mia-amarillo); stroke: var(--mia-texto); stroke-width: 2; }

/* ------------------------------------------------------------------ Reloj analógico (rl-) */
.rl-svg { width: 100%; max-width: 260px; aspect-ratio: 1 / 1; display: block; margin-inline: auto; }
.rl-esfera { fill: #fff; stroke: var(--mia-texto); stroke-width: 3; }
.rl-marca { stroke: var(--mia-texto-suave); stroke-width: 2; stroke-linecap: round; }
.rl-numero { font: 700 11px 'Inter', system-ui, sans-serif; fill: var(--mia-texto); }
.rl-hora, .rl-minuto { stroke: var(--mia-primario); stroke-linecap: round; transition: transform .4s ease; }
.rl-hora { stroke-width: 5; }
.rl-minuto { stroke-width: 3.5; stroke: var(--mia-naranja); }
.rl-centro { fill: var(--mia-texto); }
@media (prefers-reduced-motion: reduce) { .rl-hora, .rl-minuto { transition: none; } }
.rl-tarjeta { text-align: center; }

/* ------------------------------------------------------------------ Ángulos entre paralelas (ag-) */
.ag-svg { width: 100%; max-width: 560px; aspect-ratio: 480 / 300; display: block; margin: .4rem auto 0; background: #fff; border-radius: 2px; border: 1px solid var(--mia-contenedor-alto); }
.ag-paralela { stroke: var(--mia-texto); stroke-width: 3; stroke-linecap: round; }
.ag-transversal { stroke: var(--mia-primario); stroke-width: 3; stroke-linecap: round; }
.ag-flecha { fill: none; stroke: var(--mia-texto); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ag-cuna { stroke-width: 1.5; }
.ag-cuna--a { fill: rgba(233, 104, 59, .38); stroke: var(--mia-naranja); }
.ag-cuna--b { fill: rgba(134, 92, 240, .38); stroke: var(--mia-morado); }
.ag-cuna--dato { fill: rgba(228, 235, 96, .85); stroke: var(--mia-texto-suave); }
.ag-letra { font: 800 17px 'Plus Jakarta Sans', system-ui, sans-serif; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.ag-letra--a { fill: #B5421C; }
.ag-letra--b { fill: #5B32C7; }
.ag-letra--dato { fill: var(--mia-texto); }
.ag-info { margin: .6rem 0 0; font-weight: 700; }
.ag-forma { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; }
.ag-ficha { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; color: #fff; font-weight: 800; font-size: .8rem; }
.ag-ficha--a { background: #B5421C; }
.ag-ficha--b { background: #5B32C7; }
.ag-sel[data-estado='ok'] { border-color: var(--mia-verde); box-shadow: 0 0 0 2px rgba(76, 185, 121, .35); }
.ag-sel[data-estado='mal'] { border-color: var(--mia-naranja); }

/* ------------------------------------------------------------------ Transmógrafo (tm-) */
.tm-svg { width: 100%; max-width: 620px; aspect-ratio: 1 / 1; display: block; margin: .4rem auto 0; background: #fff; border-radius: 2px; border: 1px solid var(--mia-contenedor-alto); }
.tm-svg--gira { cursor: grab; touch-action: none; }
.tm-fondo { fill: #fff; }
.tm-rejilla { fill: none; stroke: var(--mia-contenedor-alto); stroke-width: 1; }
.tm-rejilla--mayor { stroke: var(--mia-borde); }
.tm-eje { fill: none; stroke: var(--mia-texto); stroke-width: 2.4; }
.tm-marca { font: 600 10px 'Plus Jakarta Sans', system-ui, sans-serif; fill: var(--mia-texto-suave); }
.tm-nombre-eje { font: 800 14px 'Plus Jakarta Sans', system-ui, sans-serif; fill: var(--mia-texto); }
.tm-poligono { fill: rgba(233, 104, 59, .2); stroke: var(--mia-naranja); stroke-width: 3; stroke-linejoin: round; }
.tm-previa { fill: rgba(70, 69, 85, .14); stroke: var(--mia-texto-suave); stroke-width: 2; stroke-dasharray: 6 4; stroke-linejoin: round; }
.tm-original { fill: none; stroke: var(--mia-azul, #5454e9); stroke-width: 2; stroke-dasharray: 2 4; stroke-linejoin: round; }
.tm-vertice { stroke: var(--mia-texto); stroke-width: 1.6; }
.tm-recta { fill: none; stroke: var(--mia-verde); stroke-width: 2.5; stroke-dasharray: 8 5; }
.tm-centro { fill: none; stroke: var(--mia-primario); stroke-width: 2.5; stroke-linecap: round; }
.tm-cara { fill-opacity: .55; stroke: rgba(27, 26, 38, .5); stroke-width: .7; stroke-linejoin: round; }
.tm-anillo { fill: none; stroke: rgba(70, 69, 85, .55); stroke-width: .8; }
.tm-arco { fill: none; stroke-width: 1.6; }
.tm-barra { justify-content: space-between; }
.tm-vertices { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .25rem; font-size: .88rem; }
.tm-vertices li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tm-chip { flex: none; width: .9rem; height: .9rem; border-radius: 50%; border: 1.5px solid var(--mia-texto); }
.tm-controles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; }
.tm-grupo { display: grid; gap: .55rem; padding: .7rem .8rem; border-radius: 2px; background: var(--mia-contenedor); }
.tm-grupo .mia-subtitulo { margin-bottom: 0; }
.tm-fila { justify-content: space-between; }
.tm-radio { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 600; }
.tm-radio input[type='radio'] { width: 1.1rem; height: 1.1rem; accent-color: var(--mia-primario); }
.tm-nota { margin: 0; font-size: .8rem; color: var(--mia-texto-suave); }
.tm-velocidad { width: auto; min-height: 2rem; padding: .15rem .5rem; }
.tm-tabla { display: grid; gap: .4rem; }
.tm-cabecera, .tm-vertice-fila { display: grid; grid-template-columns: 1.5rem 1fr 1fr; align-items: center; gap: .5rem; }
.tm-cabecera { text-align: center; }
.tm-vertice-fila .mia-campo { width: 100%; }
.tm-historial { margin: 0; padding-left: 1.2rem; display: grid; gap: .25rem; font-size: .9rem; max-height: 11rem; overflow: auto; }
.tm-historial li::marker { font-weight: 800; color: var(--mia-primario); }
.tm-vacio { list-style: none; margin-left: -1.2rem; color: var(--mia-texto-suave); }

/* ------------------------------------------------------------------ Área de superficie y volumen (ap-) */
.ap-svg { width: 100%; max-width: 680px; aspect-ratio: 600 / 420; display: block; margin: .4rem auto 0; background: #fff; border-radius: 2px; border: 1px solid var(--mia-contenedor-alto); }
.ap-svg--gira { cursor: grab; touch-action: none; }
.ap-svg:focus-visible { outline: 3px solid var(--mia-primario); outline-offset: 2px; }
.ap-cara { stroke: var(--mia-texto); stroke-width: 1.8; stroke-linejoin: round; }
.ap-cara--oculta { stroke-dasharray: 5 4; stroke-width: 1.2; }
.ap-rejilla { fill: none; stroke-width: 1; stroke-opacity: .55; pointer-events: none; }
.ap-opciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .6rem; }
.ap-opciones .mia-campo { width: auto; min-height: 2.1rem; padding: .2rem .5rem; }
.ap-selector { gap: .4rem; }
.ap-nota { margin: .4rem 0 0; font-size: .82rem; color: var(--mia-texto-suave); text-align: center; }
.ap-controles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; }
.ap-controles .gr-deslizador { grid-template-columns: 6.2rem 1fr 2.2rem; }
.ap-medidas { display: grid; gap: .6rem; }
.ap-medida { display: grid; gap: .1rem; padding: .55rem .75rem; border-radius: 2px; background: var(--mia-contenedor); }
.ap-rotulo { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mia-texto-suave); }
.ap-cifra { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.ap-valor { font-size: 1.6rem; color: var(--mia-primario); }
.ap-unidad { font-size: .8rem; color: var(--mia-texto-suave); }
.ap-cuenta { font-size: .85rem; color: var(--mia-texto-suave); overflow-wrap: anywhere; }
.ap-calcular { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.ap-calcular input[data-estado='ok'] { border-color: var(--mia-verde); box-shadow: 0 0 0 2px rgba(76, 185, 121, .35); }
.ap-calcular input[data-estado='mal'] { border-color: var(--mia-naranja); }

/* ------------------------------------------------------------------ Teselados (ts-) */
.ts-svg { width: 100%; max-width: 680px; aspect-ratio: 600 / 420; display: block; margin: .4rem auto 0; background: #fff; border-radius: 2px; border: 1px solid var(--mia-contenedor-alto); }
.ts-svg--editar { touch-action: none; } /* al arrastrar una esquina no se desplaza la página */
.ts-fondo { fill: #fff; }
.ts-rejilla { stroke: var(--mia-contenedor-alto); stroke-width: 1; }
.ts-eje { stroke: var(--mia-texto-suave); stroke-width: 1.6; }
.ts-marca { font: 600 10px 'Plus Jakarta Sans', system-ui, sans-serif; fill: var(--mia-texto-suave); }
.ts-tesela { stroke: var(--mia-texto); stroke-width: 1.2; stroke-linejoin: round; }
.ts-tesela--base { stroke-width: 3; }
.ts-tesela--edicion { fill-opacity: .8; stroke: none; }
.ts-lado { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.ts-giro { fill: #fff; stroke: var(--mia-texto); stroke-width: 1.8; }
.ts-esquina, .ts-doblez, .ts-segmento { cursor: grab; outline: none; }
.ts-esquina { fill: var(--mia-primario); stroke: #fff; stroke-width: 2.5; }
.ts-doblez { fill: var(--mia-amarillo); stroke: var(--mia-texto); stroke-width: 2; }
.ts-segmento { fill: #fff; stroke: var(--mia-primario); stroke-width: 1.8; }
.ts-esquina:focus-visible, .ts-doblez:focus-visible, .ts-segmento:focus-visible { stroke: var(--mia-naranja); stroke-width: 4; }
.ts-etiqueta { font: 800 13px 'Plus Jakarta Sans', system-ui, sans-serif; fill: var(--mia-texto); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.ts-controles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; }
.ts-paletas { display: grid; gap: .6rem; }
.ts-fila-color { display: grid; gap: .25rem; }
.ts-paleta { display: flex; flex-wrap: wrap; gap: .4rem; }
.ts-color { width: 2rem; height: 2rem; padding: 0; border-radius: 50%; background: var(--c); border: 2px solid var(--mia-borde); cursor: pointer; }
.ts-color[aria-checked='true'] { border-color: var(--mia-texto); box-shadow: 0 0 0 3px var(--mia-amarillo), 0 0 0 5px var(--mia-primario); }
.ts-color:focus-visible { outline: 3px solid var(--mia-primario); outline-offset: 2px; }
.ts-info { display: grid; gap: .5rem; padding: .7rem .8rem; border-radius: 2px; background: var(--mia-contenedor); }
.ts-info-datos { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; font-weight: 800; }
.ts-info .tr-tabla { background: #fff; border-radius: 2px; }

/* ------------------------------------------------------------------ Triángulos y Pitágoras (tr-) */
.tr-svg { width: 100%; display: block; margin: .4rem auto 0; background: #fff; border-radius: 2px; border: 1px solid var(--mia-contenedor-alto); }
.tr-svg--cuadricula { max-width: 460px; aspect-ratio: 1 / 1; }
.tr-svg--pitagoras { max-width: 460px; aspect-ratio: 360 / 250; }
.tr-svg--cuadratura { max-width: 600px; aspect-ratio: 480 / 380; }
.tr-fondo { fill: #fff; }
.tr-rejilla { stroke: var(--mia-contenedor-alto); stroke-width: 1; }
.tr-eje { stroke: var(--mia-texto-suave); stroke-width: 2; }
.tr-marca { font: 600 11px 'Plus Jakarta Sans', system-ui, sans-serif; fill: var(--mia-texto-suave); }
.tr-triangulo { fill: rgba(228, 235, 96, .6); stroke: var(--mia-texto); stroke-width: 2.5; stroke-linejoin: round; }
.tr-vertice { fill: var(--mia-primario); stroke: #fff; stroke-width: 2; }
.tr-etiqueta { font: 700 13px 'Plus Jakarta Sans', system-ui, sans-serif; fill: var(--mia-texto); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.tr-caja { fill: none; stroke: var(--mia-naranja); stroke-width: 2; stroke-dasharray: 6 4; }
.tr-sobrante { fill: rgba(233, 104, 59, .22); stroke: var(--mia-naranja); stroke-width: 1.5; }
.tr-ayuda { stroke: var(--mia-naranja); stroke-width: 2.5; stroke-dasharray: 6 4; stroke-linecap: round; }
.tr-ayuda--fina { stroke-width: 1.5; }
.tr-recto { fill: none; stroke: var(--mia-texto); stroke-width: 2; }
.tr-segmento--x { stroke: var(--mia-naranja); stroke-width: 5; stroke-linecap: round; }
.tr-lado { font: 700 18px 'Plus Jakarta Sans', system-ui, sans-serif; fill: var(--mia-texto); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.tr-lado--x { fill: #B5421C; font-size: 24px; }
.tr-cuadrado { stroke-width: 2; stroke-linejoin: round; }
.tr-cuadrado--a { fill: rgba(84, 84, 233, .22); stroke: var(--mia-azul, #5454e9); }
.tr-cuadrado--b { fill: rgba(76, 185, 121, .3); stroke: var(--mia-verde); }
.tr-cuadrado--c { fill: rgba(233, 104, 59, .26); stroke: var(--mia-naranja); }
.tr-area { font: 800 15px 'Plus Jakarta Sans', system-ui, sans-serif; fill: var(--mia-texto); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.tr-aviso { font: 800 18px 'Plus Jakarta Sans', system-ui, sans-serif; fill: #B5421C; }
.tr-aviso--suave { font-size: 14px; font-weight: 600; fill: var(--mia-texto-suave); }
.tr-forma { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; }
.tr-forma .gr-deslizador { grid-template-columns: 5.6rem 1fr 2.2rem; }
.tr-forma .gr-deslizador .mia-etiqueta { display: flex; align-items: center; gap: .3rem; white-space: nowrap; }
.tr-nota { margin: 0; font-size: .82rem; color: var(--mia-texto-suave); }
.tr-x { font-size: 1.4rem; color: #B5421C; }
.tr-ficha { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 2px; color: #fff; font-weight: 800; font-size: .8rem; }
.tr-ficha--a { background: #4141d6; }
.tr-ficha--b { background: #2f8f57; }
.tr-ficha--c { background: #B5421C; }
.tr-tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tr-tabla th, .tr-tabla td { padding: .4rem .5rem; text-align: left; border-bottom: 1px solid var(--mia-contenedor-alto); }
.tr-tabla thead th { font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; color: var(--mia-texto-suave); }
.tr-tabla tbody th { font-weight: 700; white-space: nowrap; }
.tr-veredicto { margin: 0; padding: .6rem .8rem; border-radius: 2px; background: var(--mia-contenedor); font-weight: 800; font-size: 1.05rem; text-align: center; overflow-wrap: anywhere; }
.tr-veredicto[data-tipo='exito'] { background: rgba(76, 185, 121, .22); }
.tr-veredicto[data-tipo='aviso'] { background: var(--mia-error-fondo); font-size: .9rem; font-weight: 700; text-align: left; }
.tr-clasificacion { margin: 0; font-size: .88rem; color: var(--mia-texto-suave); }
@container (max-width: 34rem) {
    .tr-tabla th, .tr-tabla td { padding: .35rem .3rem; font-size: .8rem; }
    .tr-tabla thead th { font-size: .68rem; }
    .tr-lado-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* oculto a la vista, no a los lectores de pantalla */
}

/* ------------------------------------------------------------------ Tiempo transcurrido (tt-) */
.tt-relojes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: .6rem; }
.tt-reloj-cols { text-align: center; }
.tt-etiqueta { margin: .3rem 0 0; font-weight: 700; }
.tt-dato { font-weight: 700; margin: 0 0 .6rem; }
.tt-oculto { visibility: hidden; }
.tt-forma { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; }
@container (max-width: 34rem) { .tt-relojes { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Herramienta de imágenes (mi-) */
.mi-svg { width: 100%; max-width: 680px; aspect-ratio: 600 / 420; display: block; margin: .4rem auto 0; background: #fff; border-radius: 2px; border: 1px solid var(--mia-contenedor-alto); touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.mi-svg:focus-visible { outline: 3px solid var(--mia-primario); outline-offset: 2px; }
.mi-cols, .mi-lateral { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@container (min-width: 38rem) { .mi-lateral { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 64rem) { .mi-cols { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .mi-lateral { grid-template-columns: minmax(0, 1fr); } }
.mi-herramientas { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem .9rem; margin-bottom: .4rem; }
.mi-selector { flex: 1 1 12rem; min-width: 0; }
.mi-selector--color { flex: 0 1 8rem; }
.mi-botones { display: flex; }
.mi-nota { margin: 0; font-size: .82rem; color: var(--mia-texto-suave); }
.mi-nota--centro { margin-top: .5rem; text-align: center; }
.mi-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; align-content: start; }
.mi-lectura-caja { padding: .7rem .85rem; border-radius: 2px; background: var(--mia-contenedor); min-height: 4.6rem; }
.mi-cifra { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .6rem; }
.mi-etiqueta { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mia-texto-suave); }
.mi-valor { font-size: 1.55rem; line-height: 1.15; color: var(--mia-primario); overflow-wrap: anywhere; }
.mi-cifra--chica { margin-top: .25rem; }
.mi-cifra--chica b { font-size: 1.05rem; color: var(--mia-texto); }
.mi-tramos { display: grid; gap: .15rem; margin: .4rem 0 0; font-size: .88rem; max-height: 8rem; overflow: auto; }
.mi-aviso { margin: .4rem 0 0; font-size: .85rem; font-weight: 700; color: #B5421C; }
.mi-escala { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.mi-forma-escala { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.mi-forma-escala .mia-campo:not(.mia-campo--medio) { width: auto; }
.mi-tramo { font-weight: 800; color: var(--mia-primario); }
.mi-retos { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; padding: .8rem; border-radius: 2px; background: var(--mia-info-fondo); }
.mi-retos .mia-subtitulo { margin: 0; }
.mi-reto-texto { font-weight: 700; }

/* las marcas que se dibujan sobre la imagen */
.mi-linea { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.mi-linea--halo { stroke-width: 7; stroke-opacity: .85; }
.mi-linea--arco { stroke-width: 2.4; }
.mi-linea--halo.mi-linea--arco { stroke-width: 5.5; }
.mi-linea--tenue { stroke-dasharray: 7 6; }
.mi-relleno { pointer-events: none; }
.mi-medida { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; fill: var(--mia-texto); text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 4.5px; stroke-linejoin: round; pointer-events: none; }
.mi-cierre { fill: none; stroke: var(--mia-texto); stroke-width: 1.8; stroke-dasharray: 3 3; pointer-events: none; }
.mi-punto { cursor: grab; outline: none; }
.mi-svg[data-clic='quitar'] .mi-punto { cursor: pointer; }
.mi-marca-punto { stroke-width: 2.4; }
.mi-anillo { fill: transparent; stroke: none; }
.mi-punto:focus .mi-anillo { stroke: var(--mia-primario); stroke-width: 3; }
.mi-mira { fill: none; stroke: var(--mia-texto); stroke-width: 2; pointer-events: none; }
.mi-mira-halo { fill: none; stroke: #fff; stroke-width: 5; pointer-events: none; }

/* las imágenes propias */
.mi-fondo-imagen { fill: #fff; }
.mi-rotulo { font: 700 13px 'Plus Jakarta Sans', system-ui, sans-serif; font-size: calc(13px * var(--mi-texto, 1)); fill: var(--mia-texto); text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.mi-rotulo--barra { font-size: calc(12px * var(--mi-texto, 1)); }
.mi-barra-fondo { fill: rgba(255, 255, 255, .92); stroke: var(--mia-borde); }
.mi-barra-trazo { fill: none; stroke: var(--mia-texto); stroke-width: 2; }
.mi-mar { fill: #DCEBFA; }
.mi-malla { stroke: #B9D3EE; stroke-width: 1; stroke-dasharray: 3 5; }
.mi-tierra { fill: #E4F5EA; stroke: var(--mia-verde); stroke-width: 3; stroke-linejoin: round; }
.mi-ciudad { fill: var(--mia-primario); stroke: #fff; stroke-width: 2; }
.mi-monte { fill: var(--mia-morado); stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.mi-centro { fill: #fff; }
.mi-norte { fill: none; stroke: var(--mia-texto); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mi-manzana { fill: var(--mia-contenedor); }
.mi-calle { fill: #D5D1E6; }
.mi-eje-calle { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 8 8; }
.mi-avenida { stroke: var(--mia-ambar); stroke-width: 14; }
.mi-parque { fill: #BFE6CC; stroke: var(--mia-verde); stroke-width: 2; }
.mi-arbol { fill: var(--mia-verde); fill-opacity: .55; }
.mi-lugar { fill: var(--mia-primario); stroke: #fff; stroke-width: 2; }
.mi-lugar--hospital { fill: #B5421C; }
.mi-inicial { font: 800 15px 'Plus Jakarta Sans', system-ui, sans-serif; fill: #fff; text-anchor: middle; pointer-events: none; }
.mi-fondo-reloj { fill: var(--mia-fondo); }
.mi-esfera { fill: #fff; stroke: var(--mia-primario); stroke-width: 6; }
.mi-marca { stroke: var(--mia-contorno); stroke-width: 1.2; }
.mi-marca--hora { stroke: var(--mia-texto); stroke-width: 3; }
.mi-numero { font: 800 22px 'Plus Jakarta Sans', system-ui, sans-serif; font-size: calc(22px * var(--mi-texto, 1)); fill: var(--mia-texto); text-anchor: middle; }
.mi-mano { stroke-linecap: round; }
.mi-mano--hora { stroke: var(--mia-texto); stroke-width: 10; }
.mi-mano--minuto { stroke: var(--mia-azul); stroke-width: 6; }
.mi-eje { fill: var(--mia-primario); }
.mi-suelo { fill: #EFE9D6; }
.mi-parcela { stroke: #5E5326; stroke-width: 2.5; stroke-linejoin: round; }
.mi-parcela--A { fill: #F2D479; }
.mi-parcela--B { fill: #9AD9AE; }
.mi-parcela--C { fill: #EBB08E; }
.mi-parcela--surcos { stroke: none; pointer-events: none; }
.mi-surco { fill: rgba(27, 26, 38, .14); }
.mi-letra { font: 800 34px 'Plus Jakarta Sans', system-ui, sans-serif; fill: rgba(27, 26, 38, .75); text-anchor: middle; paint-order: stroke; stroke: rgba(255, 255, 255, .7); stroke-width: 5px; pointer-events: none; }
.mi-lago { fill: #A9D3F2; stroke: #5DA9DE; stroke-width: 3; }
.mi-cielo { fill: #E6E9FF; }
.mi-sol { fill: var(--mia-amarillo); }
.mi-roca { fill: #B9B6EA; }
.mi-cresta { fill: none; stroke: var(--mia-primario); stroke-width: 3; stroke-linejoin: round; }
.mi-nieve { fill: #fff; fill-opacity: .95; }
.mi-guia { stroke: var(--mia-texto-suave); stroke-width: 1.5; stroke-dasharray: 5 5; }

/* ------------------------------------------------------------------ Diagramas de Venn (vd-) */
.vd-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; }
.vd-pregunta { font-size: 1.15rem; font-weight: 800; }
.vd-nivel { flex: none; padding: .15rem .6rem; border-radius: 2px; background: var(--mia-contenedor); color: var(--mia-primario); font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.vd-svg { width: 100%; max-width: 520px; aspect-ratio: 440 / 430; display: block; margin: .5rem auto 0; background: #fff; border-radius: 2px; border: 1px solid var(--mia-contenedor-alto); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.vd-nota { margin: .4rem 0 0; font-size: .82rem; color: var(--mia-texto-suave); text-align: center; }
.vd-caja { fill: #fff; stroke: var(--mia-texto-suave); stroke-width: 2; }
.vd-caja--sel { stroke: var(--mia-primario); stroke-width: 6; }
.vd-caja--correcto { stroke: var(--mia-verde); }
.vd-caja--incorrecto { stroke: var(--mia-naranja); }
.vd-relleno--sel { fill: rgba(58, 55, 208, .42); }
.vd-relleno--bien { fill: rgba(31, 157, 87, .5); }
.vd-relleno--mal { fill: rgba(233, 104, 59, .45); }
.vd-circulo { fill-opacity: .08; stroke-width: 2.6; pointer-events: none; }
.vd-rotulo { font: 800 15px 'Plus Jakarta Sans', system-ui, sans-serif; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.vd-objeto { pointer-events: none; }
.vd-objeto rect { fill: var(--mia-texto); }
.vd-objeto text { font: 800 15px 'Plus Jakarta Sans', system-ui, sans-serif; fill: #fff; text-anchor: middle; }
.vd-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; align-content: start; }
.vd-panel .mia-subtitulo { margin: 0; }
.vd-nivel-sel { width: auto; min-width: 11rem; }
.vd-opciones { display: grid; gap: .35rem; }
.vd-opcion { align-items: flex-start; line-height: 1.3; }
.vd-opcion input { flex: none; margin-top: .15rem; }
.vd-porque { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.vd-porque li { padding: .45rem .6rem; border-radius: 2px; background: var(--mia-contenedor); border-left: 4px solid var(--mia-borde); overflow-wrap: anywhere; }
.vd-porque li[data-pertenece='1'] { border-left-color: var(--mia-verde); }
.vd-porque li[data-pertenece='0'] { border-left-color: var(--mia-naranja); }

/* ------------------------------------------------------------------ Clasificador de figuras (cf-) */
.cf-tarjeta { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.cf-controles { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.cf-reglas { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.cf-fila-regla .mia-campo { width: auto; min-width: 12rem; }
.cf-svg { width: 100%; max-width: 780px; display: block; margin: 0 auto; background: #fff; border-radius: 2px; border: 1px solid var(--mia-contenedor-alto); user-select: none; -webkit-user-select: none; touch-action: none; } /* Chrome solo respeta touch-action en el <svg> raíz, no en sus figuras: al arrastrar una no se desplaza la página */
.cf-lista { fill: var(--mia-fondo); stroke: var(--mia-borde); }
.cf-hueco { fill: var(--mia-borde); }
.cf-caja { fill: #fff; stroke: var(--mia-texto-suave); stroke-width: 2; }
.cf-circulo { fill: rgba(84, 84, 233, .06); stroke: var(--mia-primario); stroke-width: 3; pointer-events: none; }
.cf-circulo[data-circulo='1'] { fill: rgba(233, 104, 59, .07); stroke: var(--mia-naranja); }
.cf-rotulo { font: 800 15px 'Plus Jakarta Sans', system-ui, sans-serif; font-size: calc(15px * var(--cf-texto, 1)); fill: var(--mia-texto); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.cf-rotulo[data-circulo='0'] { fill: var(--mia-primario); }
.cf-rotulo[data-circulo='1'] { fill: #B5421C; }
.cf-rotulo--fuera { font-size: calc(12px * var(--cf-texto, 1)); font-weight: 700; fill: var(--mia-texto-suave); }
.cf-ficha { cursor: grab; outline: none; transition: transform .2s ease; }
.cf-ficha--arrastra { transition: none; cursor: grabbing; }
.cf-quieto .cf-ficha { transition: none; }
.cf-agarre { fill: transparent; }
.cf-forma { stroke: rgba(27, 26, 38, .75); stroke-width: 1.4; stroke-linejoin: round; }
.cf-anillo { fill: none; stroke: transparent; stroke-width: 3; pointer-events: none; }
.cf-ficha:focus-visible .cf-anillo, .cf-ficha--elegida .cf-anillo { stroke: var(--mia-primario); }
.cf-ficha--elegida .cf-anillo { stroke-dasharray: 5 4; }
.cf-ficha--mala .cf-anillo { stroke: #D93B3B; stroke-width: 4; stroke-dasharray: none; }
.cf-ficha--rechazada .cf-anillo { stroke: var(--mia-naranja); stroke-width: 4; }
@media (prefers-reduced-motion: reduce) { .cf-ficha { transition: none; } }
.cf-acciones { padding: .6rem .8rem; border-radius: 2px; background: var(--mia-contenedor); }
.cf-acciones-texto { font-weight: 700; margin-right: .3rem; }
.cf-nota { margin: 0; font-size: .82rem; color: var(--mia-texto-suave); text-align: center; }
.cf-contador { margin: 0; font-size: .85rem; color: var(--mia-texto-suave); text-align: center; }

/* ------------------------------------------------------------------ Generador de cristales (gc-) */
.gc-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@container (min-width: 46rem) { .gc-cols { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.gc-lienzo { position: relative; width: 100%; max-width: 640px; aspect-ratio: 480 / 420; margin: 0 auto; background: #fff; border-radius: 2px; border: 1px solid var(--mia-contenedor-alto); overflow: hidden; }
.gc-fractal, .gc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gc-svg { touch-action: none; user-select: none; -webkit-user-select: none; }
.gc-nodos { fill: none; stroke: var(--mia-borde); stroke-width: 2.4; stroke-linecap: round; }
.gc-linea { fill: none; stroke: var(--mia-texto-suave); stroke-width: 1.4; stroke-dasharray: 5 4; opacity: .7; pointer-events: none; }
.gc-punto { outline: none; }
.gc-agarre { fill: transparent; cursor: grab; }
.gc-marca { fill: #E5484D; stroke: #fff; stroke-width: 1.6; pointer-events: none; }
.gc-punto--fijo .gc-marca { fill: var(--mia-texto); }
.gc-punto--fijo .gc-agarre { pointer-events: none; cursor: default; }
.gc-punto:focus-visible .gc-marca { stroke: var(--mia-primario); stroke-width: 3.4; }
.gc-lateral { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.gc-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; align-content: start; }
.gc-panel .mia-subtitulo { margin: 0; }
.gc-pasos { width: auto; }
.gc-opciones { display: grid; gap: .4rem; }
.gc-nota { margin: 0; font-size: .82rem; color: var(--mia-texto-suave); }
.gc-nota--centro { margin-top: .5rem; text-align: center; }
.gc-datos { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: .35rem .8rem; margin: 0; font-size: .92rem; }
.gc-datos dt { font-weight: 800; color: var(--mia-texto-suave); }
.gc-datos dd { margin: 0; overflow-wrap: anywhere; }
.gc-detalle summary { cursor: pointer; font-weight: 700; }
.gc-tabla { width: 100%; border-collapse: collapse; margin-top: .4rem; font-size: .88rem; }
.gc-tabla th, .gc-tabla td { padding: .3rem .5rem; text-align: left; border-bottom: 1px solid var(--mia-contenedor-alto); }
.gc-tabla thead th { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--mia-texto-suave); }

/* ------------------------------------------------------------------ Imágenes fracturadas (pf-) */
.pf-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@container (min-width: 46rem) { .pf-cols { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.pf-lienzo { width: 100%; max-width: 640px; aspect-ratio: 1; margin: 0 auto; background: #fff; border-radius: 2px; border: 1px solid var(--mia-contenedor-alto); overflow: hidden; }
.pf-canvas { width: 100%; height: 100%; display: block; }
.pf-lateral { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.pf-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; align-content: start; }
.pf-panel .mia-subtitulo { margin: 0; }
.pf-campo { display: grid; gap: .25rem; }
.pf-par { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem; }
.pf-par input[type='range'] { width: 100%; accent-color: var(--mia-primario); }
.pf-par .mia-campo--corto { width: 5.2rem; }
.pf-opciones { display: grid; gap: .4rem; }
.pf-nota { margin: 0; font-size: .82rem; color: var(--mia-texto-suave); }
.pf-nota:empty { display: none; }
.pf-datos { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: .35rem .8rem; margin: 0; font-size: .92rem; }
.pf-datos dt { font-weight: 800; color: var(--mia-texto-suave); }
.pf-datos dd { margin: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ Recta de fracciones y puntaje (rf-, pj-) */
.rf-recta { max-height: none; }
.pj-barra { gap: .6rem .9rem; }
.pj-interruptor { display: inline-flex; align-items: center; gap: .5rem; }
.pj-luz { width: .8rem; height: .8rem; border-radius: 50%; background: var(--mia-verde); box-shadow: 0 0 0 3px var(--mia-exito-fondo); }
.pj[data-pausa='1'] .pj-luz { background: var(--mia-contorno); box-shadow: 0 0 0 3px var(--mia-contenedor); }
.pj-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: .9rem; }
.pj-tablas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1rem; }
.pj-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.pj-tabla caption { text-align: left; font-weight: 800; padding-bottom: .35rem; color: var(--mia-primario); }
.pj-tabla th[scope='row'] { text-align: left; font-weight: 600; }
.pj-tabla td { text-align: right; white-space: nowrap; padding-left: .8rem; }
.pj-tabla tr > * { padding-block: .28rem; border-bottom: 1px solid var(--mia-contenedor-alto); }
.pj-tabla tfoot tr > * { font-weight: 800; border-bottom: 0; border-top: 2px solid var(--mia-borde); }

/* ------------------------------------------------------------------ Ordenador de fracciones (of-) */
.of-orden { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.of-bandeja { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem; min-height: 8.6rem; padding: .6rem; border: 2px dashed var(--mia-borde); border-radius: 2px; background: var(--mia-contenedor); }
.of-bandeja[data-vacia='1']::before { content: 'Aquí aparecen las fichas de las figuras que ya verificaste'; color: var(--mia-texto-suave); font-size: .85rem; text-align: center; }
.of-eje { display: flex; align-items: center; gap: .6rem; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--mia-texto-suave); }
.of-flecha { flex: 1; height: 2px; background: var(--mia-borde); position: relative; }
.of-flecha::after { content: ''; position: absolute; right: 0; top: -4px; border-left: 8px solid var(--mia-borde); border-block: 5px solid transparent; }
.of-casillas { display: grid; grid-template-columns: repeat(var(--of-n, 2), minmax(0, 1fr)); gap: .6rem; }
.of-casilla { position: relative; min-height: 8.8rem; display: grid; place-items: center; padding: 1.1rem .3rem .4rem; border: 2px dashed var(--mia-contorno); border-radius: 2px; background: var(--mia-superficie); }
.of-casilla[data-ocupada='1'] { border-style: solid; border-color: var(--mia-borde); }
.of-num { position: absolute; top: .3rem; left: .55rem; font-size: .72rem; font-weight: 800; color: var(--mia-contorno); }
.of-hueco { position: absolute; inset: 0; border: 0; border-radius: inherit; background: transparent; cursor: default; }
.of-hueco:focus-visible { outline: 3px solid var(--mia-primario); outline-offset: 2px; }
.of-casillas[data-eligiendo='1'] .of-casilla[data-ocupada='0'] { border-color: var(--mia-primario); background: var(--mia-info-fondo); }
.of-casillas[data-eligiendo='1'] .of-hueco { cursor: pointer; }
.of-ficha { display: grid; justify-items: center; gap: .3rem; width: 100%; max-width: 7.6rem; padding: .5rem .4rem; background: #fff; border: 3px solid var(--of-color); border-radius: 2px; box-shadow: var(--mia-sombra); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.of-ficha svg { width: 4.6rem; height: 4.6rem; pointer-events: none; }
.of-ficha .fr-frac { font-size: 1.15rem; pointer-events: none; }
.of-ficha:focus-visible { outline: 3px solid var(--mia-primario); outline-offset: 2px; }
.of-ficha[aria-pressed='true'] { outline: 3px solid var(--mia-primario); outline-offset: 2px; background: var(--mia-info-fondo); }
.of-ficha.of-arrastrando { position: relative; z-index: 20; cursor: grabbing; box-shadow: 0 16px 30px -10px rgba(27, 26, 38, .45); }
.mia[data-fase='fin'] .of-ficha { cursor: default; }
.of-acciones { justify-content: center; }
@container (max-width: 34rem) {
    .of-ficha svg { width: 3rem; height: 3rem; }
    .of-ficha .fr-frac { font-size: .95rem; }
    .of-casilla { min-height: 6.8rem; padding-top: 1rem; }
    .of-bandeja { min-height: 7rem; }
}

/* ------------------------------------------------------------------ Fracciones equivalentes (eq-) */
.eq-figuras[data-solo='1'] { grid-template-columns: minmax(0, 1fr); max-width: 26rem; margin-inline: auto; width: 100%; }
.eq-objetivo .fr-estatica { width: 100%; max-width: 210px; height: auto; margin-inline: auto; }

/* ------------------------------------------------------------------ Estimador y variantes (es-) */
.es-enunciado { text-align: center; }
.es-panel-unico { display: grid; justify-items: center; }
.es-paneles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@container (min-width: 40rem) { .es-paneles { grid-template-columns: 1fr 1fr; } }
.es-lado { display: grid; justify-items: center; }
.es-lienzo { width: 100%; max-width: 46rem; height: auto; background: #fff; border: 1px solid var(--mia-borde); border-radius: 2px; }
.es-rejilla line { stroke: var(--mia-borde); stroke-width: 1; }
.es-figura { transition: opacity .15s; }
.es-unidad text { font-size: 13px; fill: var(--mia-texto-suave); font-family: Georgia, serif; }
.es-frase { font-size: 1rem; text-align: center; }
.es-frase select { margin-inline: .3rem; }
.es-historial table.es-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.es-tabla th, .es-tabla td { padding: .3rem .6rem; border-bottom: 1px solid var(--mia-contenedor-alto); text-align: right; }
.es-tabla th:first-child, .es-tabla td:first-child { text-align: left; }

/* ------------------------------------------------------------------ Aritmética del reloj (ar-) */
.ar-tarjeta { display: grid; justify-items: center; }
.ar-svg { width: 100%; max-width: 280px; aspect-ratio: 1 / 1; display: block; margin-inline: auto; }
.ar-esfera { fill: #fff; stroke: var(--mia-texto); stroke-width: 3; }
.ar-marca { stroke: var(--mia-texto-suave); stroke-width: 2; stroke-linecap: round; }
.ar-numero { font: 700 11px 'Inter', system-ui, sans-serif; fill: var(--mia-texto); }
.ar-manecilla { stroke: var(--mia-primario); stroke-width: 5; stroke-linecap: round; transition: transform .5s ease; }
.ar-sinanimar .ar-manecilla { transition: none; }
.ar-centro { fill: var(--mia-texto); }
@media (prefers-reduced-motion: reduce) { .ar-manecilla { transition: none; } }
.ar-resumen { font-size: 1rem; }
.ar-historial table.ar-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ar-tabla th, .ar-tabla td { padding: .3rem .6rem; border-bottom: 1px solid var(--mia-contenedor-alto); text-align: right; }

/* ------------------------------------------------------------------ Cifrado de César (cc-) */
.cc-area { width: 100%; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .02em; resize: vertical; }
.cc-area[readonly] { background: var(--mia-contenedor); }
.cc-frase { width: 16rem; max-width: 100%; }
.cc-fila-frase { flex-wrap: wrap; }

/* ------------------------------------------------------------------ Convertidor de fracciones y decimales (cv-) */
.cv-resultado { margin-top: .6rem; font-size: 1.05rem; }
.cv-salida { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--mia-primario); }
.cv-salida:empty::before { content: '—'; color: var(--mia-contorno); font-weight: 400; }

/* ------------------------------------------------------------------ Gráfica de puntos compartida (gp-) */
.gp-svg { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; }
.gp-rejilla { stroke: var(--mia-contenedor-alto); stroke-width: 1; }
.gp-eje { stroke: var(--mia-contorno); stroke-width: 1.5; }
.gp-etiqueta { font-size: 10px; fill: var(--mia-texto-suave); font-variant-numeric: tabular-nums; }
.gp-linea { fill: none; stroke-width: 2; opacity: .8; }
.gp-punto { stroke: #fff; stroke-width: 1.2; }

/* ------------------------------------------------------------------ Crear sucesiones (cs-) */
.cs-tarjeta { display: grid; gap: .8rem; }
.cs-lista { display: block; font-size: .92rem; line-height: 1.6; overflow-wrap: anywhere; }
.cs-termino { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--mia-primario); }

/* ------------------------------------------------------------------ Recursión (rc-) */
.rc-bloque { border-top: 5px solid var(--rc-color); }
.rc-bloque .mia-subtitulo { display: flex; align-items: center; gap: .5rem; }
.rc-punto { width: .8rem; height: .8rem; border-radius: 50%; background: var(--rc-color); flex: none; }
.rc-fila-formula { flex: 1 1 16rem; }
.rc-formula { width: 100%; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.rc-tarjeta { display: grid; gap: .8rem; }
.rc-leyenda { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .9rem; }
.rc-item { display: inline-flex; align-items: center; gap: .4rem; }
.rc-muestra { width: 1rem; height: 1rem; border-radius: 2px; background: var(--rc-color); flex: none; }

/* ------------------------------------------------------------------ Relojes de bases numéricas (rb-) */
.rb-relojes { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
.rb-reloj { display: grid; justify-items: center; gap: .3rem; max-width: 9rem; }
.rb-svg { width: 100%; max-width: 9rem; aspect-ratio: 1 / 1; }
.rb-esfera { fill: #fff; stroke: var(--mia-texto); stroke-width: 2.5; }
.rb-marca { stroke: var(--mia-texto-suave); stroke-width: 1.5; stroke-linecap: round; }
.rb-numero { font: 700 8px 'Plus Jakarta Sans', system-ui, sans-serif; fill: var(--mia-texto); }
.rb-manecilla { stroke: var(--mia-primario); stroke-width: 3.5; stroke-linecap: round; transition: transform .4s ease; }
@media (prefers-reduced-motion: reduce) { .rb-manecilla { transition: none; } }
.rb-centro { fill: var(--mia-texto); }
.rb-etiqueta-reloj { font-size: .8rem; color: var(--mia-texto-suave); text-align: center; }
.rb-tarjeta { display: grid; gap: .8rem; justify-items: center; }
.rb-desarrollo, .rb-compacto { font-size: 1.1rem; font-variant-numeric: tabular-nums; text-align: center; }
.rb-desarrollo sup, .rb-compacto sub { font-size: .7em; }

/* ------------------------------------------------------------------ Generador de patrones (pt-) */
.pt-zona { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.pt-tablero { display: flex; flex-direction: column; gap: .6rem; flex: 1 1 16rem; min-width: 0; }
.pt-fila { display: flex; gap: .6rem; flex-wrap: wrap; }
.pt-celda {
    width: 3.6rem; height: 3.6rem; display: grid; place-items: center; padding: 0;
    border-radius: 2px; background: var(--mia-fondo); border: 1px solid var(--mia-borde);
}
.pt-hueco { cursor: pointer; border-style: dashed; border-color: var(--mia-contorno); }
.pt-hueco:hover, .pt-hueco:focus-visible { border-color: var(--mia-primario); background: var(--mia-contenedor); }
.pt-celda--resuelta { border-color: var(--mia-exito); background: var(--mia-exito-fondo); }
.pt-pieza { display: block; }
.pt-paleta { flex: 0 0 auto; display: flex; flex-direction: column; gap: .5rem; }
.pt-titulo-paleta { margin: 0; font-size: .8rem; font-weight: 700; color: var(--mia-texto-suave); }
.pt-paleta .mia-segmento { flex-direction: column; align-items: flex-start; }

/* ------------------------------------------------------------------ La carrera de la tortuga y la liebre (zn-) */
.zn-tarjeta { display: grid; gap: .6rem; }
.zn-svg { width: 100%; height: auto; }
.zn-pista { stroke: var(--mia-borde); stroke-width: 4; stroke-linecap: round; }
.zn-marca { stroke: var(--mia-texto-suave); stroke-width: 1.5; }
.zn-numero { font-size: 9px; fill: var(--mia-texto-suave); }
.zn-meta { stroke: var(--mia-texto); stroke-width: 2; stroke-dasharray: 3 2; }
.zn-tortuga { fill: var(--mia-verde); }
.zn-liebre { fill: var(--mia-naranja); }
.zn-letra { font: 700 10px 'Plus Jakarta Sans', system-ui, sans-serif; fill: #fff; }
.zn-resumen { display: grid; gap: .3rem; margin: 0; }
.zn-dato { font-size: .95rem; color: var(--mia-texto-suave); }
.zn-dato b { color: var(--mia-texto); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Gráfico de barras (gb-) */
.gb-tarjeta { display: grid; gap: .6rem; }
.gb-titulo-grafico { margin: 0; font-weight: 800; text-align: center; font-size: 1.05rem; min-height: 1.4em; }
.gb-svg { width: 100%; height: auto; }
.gb-datos { min-height: 8rem; margin-top: .4rem; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; resize: vertical; }
.gb-marca { stroke: var(--mia-borde); stroke-width: 1; }
.gb-numero { font-size: 12px; font-weight: 600; fill: var(--mia-texto-suave); }
.gb-eje { stroke: var(--mia-texto-suave); stroke-width: 2; }
.gb-titulo-eje { font-size: 13px; font-weight: 700; fill: var(--mia-texto); }
.gb-etiqueta { font-size: 11px; fill: var(--mia-texto-suave); }
.gb-valor { font-size: 11px; font-weight: 800; fill: var(--mia-texto); }
.gb-barra rect { transition: fill .15s; }
.gb-rango { max-width: 12rem; }
.gb-campo-ancho { flex-wrap: nowrap; white-space: nowrap; }
.gb-campo-ancho input { flex: 1 1 auto; min-width: 0; white-space: normal; }

/* ------------------------------------------------------------------ Clasificador de gráfico de barras (cb-) */
.cb-paleta { display: flex; flex-wrap: wrap; gap: .5rem; }
.cb-figura {
    display: grid; place-items: center; padding: .3rem; border-radius: 2px;
    border: 2px solid var(--mia-borde); background: var(--mia-fondo); cursor: pointer;
}
.cb-figura:hover, .cb-figura:focus-visible { border-color: var(--mia-primario); }
.cb-figura--elegida { border-color: var(--mia-primario); background: var(--mia-contenedor); box-shadow: 0 0 0 2px rgba(84, 84, 233, .25); }
.cb-vacio { color: var(--mia-texto-suave); margin: 0; }
.cb-grafico { display: flex; flex-direction: column; gap: .5rem; }
.cb-fila {
    display: flex; align-items: center; gap: .6rem; border: 0; background: none; padding: .2rem;
    cursor: pointer; border-radius: 2px; font: inherit; color: inherit; min-width: 0; width: 100%;
}
.cb-fila:hover, .cb-fila:focus-visible { background: var(--mia-contenedor); }
.cb-rotulo-fila { display: grid; place-items: center; width: 1.8rem; flex: 0 0 auto; }
.cb-muestra-color { width: 1.1rem; height: 1.1rem; border-radius: 2px; display: block; }
.cb-celdas { display: flex; flex-direction: row; gap: 2px; min-width: 0; }
.cb-celda { width: clamp(.85rem, 3.6vw, 1.5rem); height: clamp(.85rem, 3.6vw, 1.5rem); border: 1px solid var(--mia-borde); border-radius: 2px; flex: 0 0 auto; }
.cb-celda--llena { background: var(--mia-primario); border-color: var(--mia-primario); }
.cb-cuenta { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 1.5em; text-align: right; }

.cb-grafico--vertical { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
.cb-grafico--vertical .cb-fila { flex-direction: column-reverse; }
.cb-grafico--vertical .cb-celdas { flex-direction: column-reverse; }

/* ------------------------------------------------------------------ Gráfico circular (grc-) */
.grc-tarjeta { display: grid; gap: .6rem; }
.grc-titulo-grafico { margin: 0; font-weight: 800; text-align: center; font-size: 1.05rem; min-height: 1.4em; }
.grc-datos { min-height: 8rem; margin-top: .4rem; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; resize: vertical; }
.grc-campo-ancho { flex-wrap: nowrap; white-space: nowrap; }
.grc-campo-ancho input { flex: 1 1 auto; min-width: 0; white-space: normal; }
.grc-zona { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: center; }
.grc-svg { width: 100%; max-width: 20rem; height: auto; flex: 1 1 16rem; }
.grc-vacio { fill: var(--mia-fondo); stroke: var(--mia-borde); stroke-width: 1; stroke-dasharray: 6 4; }
.grc-porcentaje { font: 700 15px 'Plus Jakarta Sans', system-ui, sans-serif; fill: #fff; pointer-events: none; }
.grc-sector { transition: opacity .15s; }
.grc-sector:hover { opacity: .82; }
.grc-leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; flex: 1 1 14rem; }
.grc-item { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.grc-muestra { width: .9rem; height: .9rem; border-radius: 2px; flex: 0 0 auto; }
.grc-nombre { font-weight: 700; flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.grc-cuenta { color: var(--mia-texto-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------------ Gráfico de torta (grt-) */
.grt-tarjeta { display: grid; gap: .6rem; justify-items: center; }
.grt-titulo-grafico { margin: 0; font-weight: 800; text-align: center; font-size: 1.05rem; }
.grt-svg { width: 100%; max-width: 20rem; height: auto; }
.grt-campos { display: flex; flex-wrap: wrap; gap: .6rem; }
.grt-campo { display: flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 700; }
.grt-campo input { width: 4.5rem; }
.grt-muestra { width: .9rem; height: .9rem; border-radius: 2px; flex: 0 0 auto; }
.grt-suma { font-weight: 700; margin: 0; }
.grt-suma--mal { color: var(--mia-naranja); }
.grt-sector { transition: opacity .15s; }
.grt-sector:hover { opacity: .82; }
.grt-porcentaje { font: 700 15px 'Plus Jakarta Sans', system-ui, sans-serif; fill: #fff; pointer-events: none; }

/* ------------------------------------------------------------------ Gráfico multibarras (mb-) */
.mb-tarjeta { display: grid; gap: .6rem; }
.mb-titulo-grafico { margin: 0; font-weight: 800; text-align: center; font-size: 1.05rem; min-height: 1.4em; }
.mb-svg { width: 100%; height: auto; }
.mb-datos { min-height: 8rem; margin-top: .4rem; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; resize: vertical; }
.mb-marca { stroke: var(--mia-borde); stroke-width: 1; }
.mb-numero { font-size: 12px; font-weight: 600; fill: var(--mia-texto-suave); }
.mb-eje { stroke: var(--mia-texto-suave); stroke-width: 2; }
.mb-titulo-eje { font-size: 13px; font-weight: 700; fill: var(--mia-texto); }
.mb-etiqueta { font-size: 11px; fill: var(--mia-texto-suave); }
.mb-valor { font-size: 10px; font-weight: 800; fill: var(--mia-texto); }
.mb-barra rect { transition: fill .15s; }
.mb-campo-ancho { flex-wrap: nowrap; white-space: nowrap; }
.mb-campo-ancho input { flex: 1 1 auto; min-width: 0; white-space: normal; }
.mb-leyenda { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.mb-item { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .9rem; }
.mb-muestra { width: .9rem; height: .9rem; border-radius: 2px; flex: 0 0 auto; }

/* ------------------------------------------------------------------ Diagramador de tallo y hoja (dh-) */
.dh-tarjeta { display: grid; gap: .6rem; }
.dh-titulo { margin: 0; font-weight: 800; text-align: center; font-size: 1.05rem; min-height: 1.4em; }
.dh-datos { min-height: 8rem; margin-bottom: .6rem; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; resize: vertical; }
.dh-etiqueta { flex-wrap: nowrap; white-space: nowrap; font-weight: 700; }
.dh-etiqueta input { flex: 1 1 auto; min-width: 0; white-space: normal; }
.dh-marco { overflow: auto; max-height: 30rem; padding: .75rem; border: 1px solid var(--mia-borde); border-radius: 2px; background: var(--mia-fondo); }
.dh-diagrama { display: grid; width: max-content; margin: 0 auto; font: 600 1.05rem ui-monospace, 'Cascadia Mono', Consolas, monospace; font-variant-numeric: tabular-nums; }
.dh-fila { display: flex; align-items: stretch; }
.dh-tallo { min-width: 2.4rem; min-height: 1.7em; line-height: 1.7; text-align: right; padding: 0 .6rem 0 0; border-right: 2px solid var(--mia-texto); }
.dh-hojas { display: flex; align-items: center; gap: .45rem; padding-left: .6rem; min-height: 1.7em; line-height: 1.7; }
.dh-diagrama--horizontal { display: flex; align-items: flex-start; }
.dh-diagrama--horizontal .dh-fila { flex-direction: column; align-items: center; min-width: 2.2rem; }
.dh-diagrama--horizontal .dh-tallo { min-width: 0; width: 100%; text-align: center; padding: 0 .4rem .25rem; border-right: 0; border-bottom: 2px solid var(--mia-texto); }
.dh-diagrama--horizontal .dh-hojas { flex-direction: column; align-items: center; gap: .1rem; padding: .3rem 0 0; }
.dh-clave { margin: 0; text-align: center; color: var(--mia-texto-suave); font-size: .9rem; }
.dh-respuestas { display: grid; gap: .6rem; margin-bottom: .75rem; }
.dh-estado { font-weight: 800; font-size: .9rem; min-width: 6rem; }
.dh-estado[data-estado='ok'] { color: var(--mia-exito); }
.dh-estado[data-estado='mal'] { color: var(--mia-naranja); }

/* ------------------------------------------------------------------ ¡Póngalo! (po-) */
.po-tarjeta { display: grid; gap: .75rem; }
.po-etiqueta { flex-wrap: nowrap; white-space: nowrap; font-weight: 700; }
.po-marco { overflow-x: auto; padding: .5rem .25rem .25rem; }
.po-eje { --celda: 1.35rem; min-width: calc(var(--ancho) * 1.5rem); }
.po-columnas { display: grid; grid-template-columns: repeat(var(--ancho), minmax(0, 1fr)); border-bottom: 2px solid var(--mia-texto); }
.po-columna {
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; padding: 0;
    border: 0; border-left: 1px solid transparent; background: transparent; cursor: pointer; font: inherit; color: var(--mia-texto-suave);
}
.po-columna:hover, .po-columna:focus-visible { background: var(--mia-contenedor); }
.po-columna--origen { background: var(--mia-contenedor); box-shadow: inset 0 0 0 2px var(--mia-primario); }
.po-pila { display: flex; flex-direction: column-reverse; justify-content: flex-start; width: 100%; height: calc(var(--alto) * (var(--celda) + .1rem)); align-items: center; }
.po-bloque { display: block; width: 78%; height: var(--celda); margin-top: .1rem; border-radius: 2px; background: var(--mia-primario); }
.po-tick { font-size: .75rem; font-weight: 700; padding: .2rem 0; font-variant-numeric: tabular-nums; }
.po-flechas { position: relative; height: 2.5rem; }
.po-flecha { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; line-height: 1.05; transition: left .4s ease; }
.po-instantaneo .po-flecha { transition: none; }
@media (prefers-reduced-motion: reduce) { .po-flecha { transition: none; } }
.po-punta { font-size: 1rem; }
.po-valor { font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.po-flecha--media { color: #E5484D; }
.po-flecha--mediana { color: var(--mia-exito); }
.po-flecha--moda { color: var(--mia-primario); }
.po-sin-moda { position: absolute; left: 50%; transform: translateX(-50%); font-size: .85rem; font-weight: 700; color: var(--mia-texto-suave); }
.po-opciones { align-items: center; }
.po-check { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-weight: 700; font-size: .9rem; }
.po-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--mia-primario); }
.po-etiq--media { color: #E5484D; }
.po-etiq--mediana { color: var(--mia-exito); }
.po-etiq--moda { color: var(--mia-primario); }
.po-datos { min-height: 5rem; margin-bottom: .6rem; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; resize: vertical; }
.po-estad { margin-top: .75rem; }

/* ------------------------------------------------------------------ Mediciones (me-) */
.me-indicador { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--mia-texto-suave); }
.me-paso { display: grid; gap: .75rem; }
.me-ayuda { margin: 0; color: var(--mia-texto-suave); font-size: .9rem; }
.me-estad { border: 0; padding: 0; margin: 0; min-width: 0; }
.me-checks { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .4rem; }
.me-check { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font-weight: 700; font-size: .95rem; }
.me-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--mia-primario); }
.me-encabezado { margin: 0; font-weight: 800; font-size: 1.05rem; }
.me-filas { display: grid; gap: .45rem; }
.me-fila-obs { display: grid; grid-template-columns: minmax(4.5rem, 9rem) minmax(0, 1fr) 5.5rem; gap: .6rem; align-items: center; }
.me-nombre { font-weight: 700; overflow-wrap: anywhere; }
.me-stats { display: grid; gap: .4rem; margin: 0; padding-top: .75rem; border-top: 1px solid var(--mia-contenedor-alto); }
.me-dato { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: baseline; }
.me-dato dt { font-weight: 800; margin: 0; }
.me-dato dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; color: var(--mia-primario); }
.me-pista { font-weight: 500; font-size: .8rem; color: var(--mia-texto-suave); }

/* ------------------------------------------------------------------ Diagrama de caja (dc-) */
.dc-tarjeta { display: grid; gap: .75rem; }
.dc-marco { overflow-x: auto; }
.dc-svg { width: 100%; min-width: 34rem; height: auto; }
.dc-descripcion { margin: 0; text-align: center; font-weight: 700; min-height: 1.4em; }
.dc-datos { min-height: 8rem; margin-top: .4rem; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; resize: vertical; }
.dc-check { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 700; }
.dc-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--mia-primario); }
.dc-rejilla { stroke: var(--mia-contenedor-alto); stroke-width: 1; }
.dc-eje { stroke: var(--mia-texto-suave); stroke-width: 1.5; }
.dc-numero { font-size: 12px; font-weight: 600; fill: var(--mia-texto-suave); }
.dc-etiqueta { font-size: 13px; font-weight: 700; fill: var(--mia-texto); }
.dc-bigote { stroke: var(--mia-texto); stroke-width: 2; }
.dc-cuerpo { fill: var(--mia-primario); fill-opacity: .85; stroke: var(--mia-texto); stroke-width: 1.5; }
.dc-mediana { stroke: #fff; stroke-width: 3; }
.dc-atipico { fill: var(--mia-naranja); stroke: var(--mia-texto); stroke-width: 1; }
.dc-tabla { overflow-x: auto; }
.dc-vacia { margin: 0; color: var(--mia-texto-suave); }

/* ------------------------------------------------------------------ Carrera de dados (cd-) */
.cd-chip { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; margin-right: .3rem; vertical-align: middle; border: 1px solid rgba(0, 0, 0, .15); }
.cd-fila-reglas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.cd-caras { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.cd-check { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; font-weight: 700; }
.cd-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--mia-primario); }
.cd-nota { margin: .3rem 0 .6rem; font-size: .85rem; color: var(--mia-error); font-weight: 600; }
.cd-nota:empty { display: none; }
.cd-pista-envoltura { overflow-x: auto; margin: .6rem 0; }
.cd-pista { display: block; height: auto; min-width: 20rem; }
.cd-etiqueta { font-size: 13px; font-weight: 700; fill: var(--mia-texto); }
.cd-casilla { fill: var(--mia-fondo); stroke: var(--mia-borde); stroke-width: 1; }
.cd-casilla--salida { fill: var(--mia-contenedor); }
.cd-casilla--meta { fill: #E9F7EF; }
.cd-token { stroke: #fff; stroke-width: 2; transition: cx .25s ease; }
.cd-token--ganador { stroke: var(--mia-amarillo); stroke-width: 3; }
.cd-token-letra { font-size: 13px; font-weight: 800; pointer-events: none; transition: x .25s ease; }
.cd-bandera { font-size: 16px; }
.cd-resultado { font-weight: 700; margin: .4rem 0; }
.cd-resultados { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.cd-tabla { overflow-x: auto; }
.cd-total th, .cd-total td { font-weight: 800; border-top: 2px solid var(--mia-borde); }
.cd-torta-caja { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; justify-content: center; }
.cd-torta { width: 9rem; height: 9rem; flex: 0 0 auto; }
.cd-torta-vacia { fill: var(--mia-contenedor); }
.cd-sector { stroke: #fff; stroke-width: 2; } /* el relleno lo pone JS: una regla de fill aquí lo taparía siempre */
.cd-leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .85rem; }
.cd-pantalla[hidden] { display: none; }
.cd-filas-suma { display: grid; gap: .4rem; margin-bottom: .8rem; }
.cd-fila-suma { display: grid; grid-template-columns: 1.6rem 1fr; align-items: center; gap: .6rem; }
.cd-suma { font-weight: 800; text-align: right; }
.cd-cuadricula { display: block; width: 100%; max-width: 18rem; margin: 0 auto; height: auto; }
.cd-etiqueta-eje { font-size: 12px; font-weight: 700; fill: var(--mia-texto-suave); }
.cd-celda { stroke: var(--mia-borde); stroke-width: 1; } /* el relleno lo pone JS (setAttribute): una regla de fill aquí ganaría por especificidad y lo taparía siempre */
.cd-celda-texto { font-size: 13px; font-weight: 800; pointer-events: none; }

/* ------------------------------------------------------------------ Probabilidad experimental (pe-) */
.pe-rueda { width: 100%; max-width: 15rem; height: auto; margin: 0 auto; display: block; }
.pe-sector--elegido { stroke: var(--mia-amarillo); stroke-width: 4; }
.pe-dado { width: 100%; max-width: 9rem; height: auto; margin: 0 auto; display: block; }
.pe-dado-caja { stroke: var(--mia-borde); stroke-width: 2; } /* el relleno lo pone JS (setAttribute): una regla de fill aquí ganaría por especificidad y lo taparía siempre */
.pe-dado-texto { pointer-events: none; }
.pe-caras-propias { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .5rem; margin: .6rem 0; }
.pe-cara-etiqueta { display: grid; gap: .25rem; font-size: .82rem; font-weight: 700; color: var(--mia-texto-suave); }
.pe-cara-etiqueta[hidden] { display: none; }
.pe-muestra { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; margin-right: .3rem; vertical-align: middle; border: 1px solid rgba(0, 0, 0, .15); }
.pe-total th, .pe-total td { font-weight: 800; border-top: 2px solid var(--mia-borde); }
.pe-tabla { overflow-x: auto; }

/* ------------------------------------------------------------------ Alternativas locas (jl-) */
.jl-columna { padding: .85rem; }
.jl-fraccion { display: grid; justify-items: center; gap: .3rem; max-width: 7rem; margin: .6rem auto 0; }
.jl-fraccion hr { width: 100%; margin: 0; border: none; border-top: 2px solid var(--mia-texto); }
.jl-fraccion input { text-align: center; }
.jl-decimal { min-height: 1.3em; margin: .4rem 0 0; text-align: center; font-weight: 700; color: var(--mia-primario); }
.jl-fraccion-resultado { margin: .6rem 0 0; text-align: center; font-size: 1.3rem; font-weight: 800; }

/* ------------------------------------------------------------------ La aguja de Buffon (ab-) */
.ab-hoja { width: 100%; max-width: 26rem; height: auto; margin: 0 auto; display: block; background: #fff; border-radius: 2px; border: 1px solid var(--mia-borde); }
.ab-raya { stroke: var(--mia-verde); stroke-width: 2; }
.ab-aguja { stroke: var(--mia-error); stroke-width: 3; transition: opacity .15s ease; }
.ab-aguja--acierto { stroke: var(--mia-naranja); }
.ab-texto-pi { font-size: 14px; font-weight: 800; fill: var(--mia-texto); }
.ab-contador { margin: .5rem 0 0; font-weight: 600; color: var(--mia-texto-suave); min-height: 1.3em; }

/* ------------------------------------------------------------------ Cronómetro (cr-) */
.cr-pantalla { margin: .5rem 0 1rem; text-align: center; font-size: clamp(2.2rem, 9vw, 3.4rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cr-controles { justify-content: center; }
.cr-registros { margin-top: 1rem; }
.cr-lista { list-style: none; margin: .5rem 0 0; padding: 0; max-height: 12rem; overflow-y: auto; display: grid; gap: .3rem; font-variant-numeric: tabular-nums; }
.cr-lista li { padding: .35rem .6rem; border-radius: 2px; background: var(--mia-fondo); font-weight: 600; }
.cr-vacia { color: var(--mia-texto-suave); margin: .5rem 0 0; }

/* ------------------------------------------------------------------ Vida y Vida ligera (vi-) */
.vi-envoltura { overflow-x: auto; margin-bottom: .8rem; }
.vi-grid { display: block; width: 100%; max-width: 40rem; height: auto; min-width: 22rem; border: 1px solid var(--mia-borde); border-radius: 2px; touch-action: none; }
.vi-celda { stroke: var(--mia-contenedor); stroke-width: 1; cursor: pointer; } /* el relleno lo pone JS (setAttribute): una regla de fill aquí ganaría por especificidad y lo taparía siempre */
.vi-velocidad { width: 100%; max-width: 16rem; }
.vi-reglas-envoltura { overflow-x: auto; }
.vi-reglas { border-collapse: collapse; font-size: .85rem; }
.vi-reglas th, .vi-reglas td { padding: .25rem .4rem; text-align: center; }
.vi-reglas thead th { color: var(--mia-texto-suave); font-weight: 700; }
.vi-reglas tbody th { text-align: left; font-weight: 700; white-space: nowrap; }
.vi-reglas input[type=checkbox] { width: 1.05rem; height: 1.05rem; accent-color: var(--mia-primario); }
.vi-grafico { width: 100%; height: auto; display: block; }
.vi-linea-poblacion { fill: none; stroke: var(--mia-primario); stroke-width: 2; stroke-linejoin: round; }

/* ------------------------------------------------------------------ Conejos y lobos (cl-) */
.cl-envoltura { overflow-x: auto; margin-bottom: .8rem; }
.cl-grid { display: block; width: 100%; max-width: 40rem; height: auto; min-width: 22rem; border: 1px solid var(--mia-borde); border-radius: 2px; }
.cl-pasto { stroke: rgba(255, 255, 255, .5); stroke-width: .5; } /* el relleno (nivel de pasto) lo pone JS */
.cl-animal { pointer-events: none; font-size: 13px; } /* el contenido (🐇/🐺/nada) lo pone JS */
.cl-controles-iniciales { flex-wrap: wrap; align-items: flex-end; }
.cl-sub-grafico { margin-top: 1rem; }
.cl-grafico { width: 100%; height: auto; display: block; }
.cl-linea { fill: none; stroke-width: 2; stroke-linejoin: round; }
.cl-linea--pasto { stroke: var(--mia-verde); }
.cl-linea--conejos { stroke: var(--mia-ambar); }
.cl-linea--lobos { stroke: var(--mia-texto); }
.cl-leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: .9rem; margin: .5rem 0 0; padding: 0; font-size: .85rem; font-weight: 600; }
.cl-leyenda li { display: flex; align-items: center; gap: .35rem; }
.cl-emoji { font-size: 1.1rem; line-height: 1; }
.cl-chip { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; }
.cl-chip--pasto { background: var(--mia-verde); }
.cl-chip--conejos { background: var(--mia-ambar); }
.cl-chip--lobos { background: var(--mia-texto); }
.cl-velocidad { width: 100%; max-width: 16rem; }

/* ------------------------------------------------------------------ Propagación de enfermedades (pd-) */
.pd-envoltura { overflow-x: auto; margin-bottom: .8rem; }
.pd-grid { display: block; width: 100%; max-width: 40rem; height: auto; min-width: 22rem; border: 1px solid var(--mia-borde); border-radius: 2px; background: var(--mia-fondo); }
.pd-persona { pointer-events: none; } /* el relleno (susceptible/infectada/recuperada/nadie) lo pone JS */
.pd-sub-grafico { margin-top: 1rem; }
.pd-grafico { width: 100%; height: auto; display: block; }
.pd-linea { fill: none; stroke-width: 2; stroke-linejoin: round; }
.pd-linea--susceptibles { stroke: var(--mia-naranja); }
.pd-linea--infectadas { stroke: var(--mia-verde); }
.pd-linea--recuperadas { stroke: var(--mia-azul); }
.pd-leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: .9rem; margin: .5rem 0 0; padding: 0; font-size: .85rem; font-weight: 600; }
.pd-leyenda li { display: flex; align-items: center; gap: .35rem; }
.pd-chip { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; }
.pd-chip--susceptibles { background: var(--mia-naranja); }
.pd-chip--infectadas { background: var(--mia-verde); }
.pd-chip--recuperadas { background: var(--mia-azul); }
.pd-velocidad { width: 100%; max-width: 16rem; }

/* ------------------------------------------------------------------ ¡Incendio! / Incendio dirigible (in-) */
.in-envoltura { overflow-x: auto; margin-bottom: .8rem; }
.in-grid { display: block; width: 100%; max-width: 40rem; height: auto; min-width: 22rem; border: 1px solid var(--mia-borde); border-radius: 2px; background: var(--mia-fondo); cursor: pointer; }
.in-celda { stroke: var(--mia-fondo); stroke-width: 1; } /* el relleno (árbol/quemando/quemado/vacío) lo pone JS con setAttribute: una regla de fill aquí ganaría por especificidad y lo taparía siempre */
.in-chip { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; }
.in-chip--arbol { background: #168A0A; }
.in-chip--quemando { background: #E85E2F; }
.in-chip--quemado { background: #767586; }
.in-velocidad { width: 100%; max-width: 16rem; }
.in-prob-texto { margin: 0 0 .6rem; font-size: .85rem; color: var(--mia-contorno); }
.in-prob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; max-width: 16rem; margin-bottom: .7rem; }
.in-prob-celda { display: flex; align-items: center; justify-content: center; }
.in-prob-celda input { width: 100%; }
.in-prob-celda--centro { font-size: .75rem; text-align: center; color: var(--mia-contorno); font-weight: 600; }

/* ------------------------------------------------------------------ ¡Un incendio mejor! (imj-) */
.imj-envoltura { overflow-x: auto; margin-bottom: .8rem; display: flex; justify-content: center; }
.imj-lienzo { display: block; width: 100%; max-width: 26rem; height: auto; aspect-ratio: 1; border: 1px solid var(--mia-borde); border-radius: 2px; cursor: pointer; image-rendering: pixelated; }
.imj-chip { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; }
.imj-chip--arbol { background: #168A0A; }
.imj-chip--quemando { background: #E85E2F; }
.imj-chip--quemado { background: #767586; }
.imj-velocidad, .imj-densidad, .imj-fuerza { width: 100%; max-width: 16rem; }
.imj-texto { margin: 0 0 1rem; font-size: .9rem; }

/* ------------------------------------------------------------------ Evaluación de un incendio (ei-) */
.ei-envoltura { overflow-x: auto; margin-bottom: .8rem; }
.ei-grid { display: block; width: 100%; max-width: 30rem; height: auto; min-width: 16rem; border: 1px solid var(--mia-borde); border-radius: 2px; background: var(--mia-fondo); cursor: pointer; }
.ei-celda { stroke: var(--mia-fondo); stroke-width: 1; } /* el relleno (árbol/quemando/quemado/vacío) lo pone JS con setAttribute: una regla de fill aquí ganaría por especificidad y lo taparía siempre */
.ei-chip { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; }
.ei-chip--arbol { background: #168A0A; }
.ei-chip--quemando { background: #E85E2F; }
.ei-chip--quemado { background: #767586; }
.ei-adivina { margin-top: 1rem; }

/* ------------------------------------------------------------------ Canicas (cn-) */
.cn-colores { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem .8rem; margin-bottom: .8rem; }
.cn-color-etiqueta { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.cn-color-etiqueta .mia-campo--corto { flex: 1 1 4rem; width: auto; min-width: 0; } /* si no, el ancho fijo (5.5rem) desborda la tarjeta a 390px */
.cn-muestra { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; flex: none; }
.cn-envoltura-tabla { max-height: 32rem; overflow: auto; }
.cn-tabla { width: 100%; border-collapse: collapse; font-size: .85rem; }
.cn-tabla th, .cn-tabla td { padding: .3rem .5rem; border-bottom: 1px solid var(--mia-borde); text-align: right; }
.cn-tabla thead th { position: sticky; top: 0; background: var(--mia-superficie); text-align: center; }
.cn-col-color { width: 1.6rem; text-align: center; }
.cn-grafico { display: block; width: 100%; max-width: 22rem; height: auto; margin-top: .8rem; cursor: pointer; }
.cn-valor { font-size: 11px; font-weight: 700; fill: var(--mia-texto); text-anchor: middle; }
.cn-etiqueta { font-size: 10px; fill: var(--mia-contorno); text-anchor: middle; }
.cn-vacio { font-size: 12px; fill: var(--mia-contorno); }

/* ------------------------------------------------------------------ Inclinación (inc-) */
.inc-velocidad { width: 100%; max-width: 16rem; }

/* ------------------------------------------------------------------ Rotación de funciones (rv-) */
.rv-lienzos { position: relative; }
.rv-lienzos .tm-svg { margin: 0 auto; }
.rv-campo-funcion { width: 100%; }
.rv-fila-funcion { display: flex; align-items: center; gap: .5rem; }
.rv-fila-funcion span { flex: none; font-weight: 700; font-family: 'Fira Code', ui-monospace, monospace; }

/* ------------------------------------------------------------------ Folleto de secciones transversales (st-) */
.st-cara { fill: rgba(84, 84, 233, .22); stroke: rgba(58, 55, 208, .55); stroke-width: .7; stroke-linejoin: round; }
.st-corte { fill: rgba(233, 104, 59, .35); stroke: var(--mia-naranja); stroke-width: 2.2; stroke-linejoin: round; }
.st-clasificacion { margin: .5rem 0 0; font-weight: 700; color: var(--mia-primario); }