/* ============================================================
   AGREGAR a css/alfabetizacion.css (no reemplaza lo que ya tenías,
   solo se necesitan estos bloques nuevos/actualizados)
   ============================================================ */

/* ============================================================
   Chips flotantes de las 4 variantes tipográficas (reemplazan las
   4 cajas estáticas de imagen). Uno activo a la vez; al hacer clic
   cambia el video de grafía de abajo a esa variante.
   Colores calcados de la referencia visual del usuario.
   ============================================================ */
.alfab-chips-tipograficos {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}
.alfab-chip-tipo {
    width: 68px;
    height: 68px;
    border-radius: 14px;
    background: #ffffff;
    border: 2px solid var(--border-color, #cbd5e1);
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.alfab-chip-tipo:hover {
    transform: translateY(-2px);
}
.alfab-chip-tipo:active {
    transform: translateY(0) scale(0.96);
}

/* Imagen tipográfica dentro del chip: una por variante, del carácter
   actual (ver rutaImagenGrafia() en alfabetizacion.js). */
.alfab-chip-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none; /* el clic siempre debe caer sobre el <button> */
}

/* Colores por variante, igual que la referencia */
.alfab-chip-mayuscula { border-color: #38bdf8; }
.alfab-chip-mayuscula.active { background: #e0f2fe; border-color: #0284c7; box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18); }

.alfab-chip-minuscula { border-color: #4ade80; }
.alfab-chip-minuscula.active { background: #dcfce7; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }

.alfab-chip-cursiva-mayuscula { border-color: #fb923c; }
.alfab-chip-cursiva-mayuscula.active { background: #ffedd5; border-color: #ea580c; box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.18); }

.alfab-chip-cursiva-minuscula { border-color: #c084fc; }
.alfab-chip-cursiva-minuscula.active { background: #f3e8ff; border-color: #9333ea; box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.18); }

/* Chip único de números (sin variantes tipográficas como las letras) */
.alfab-chip-numero { border-color: var(--accent-color, #0284c7); }
.alfab-chip-numero.active { background: #e0f2fe; border-color: #0284c7; box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18); }

/* ============================================================
   Tira de fonética letra por letra (para NÚMEROS: se pronuncian
   como palabra, ej. 13 = T-R-E-C-E, y se reutiliza la boca de
   cada letra ya existente en img/alfabetizacion/boca/{LETRA}.png)
   ============================================================ */
.alfab-boca-numero-tira {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 4px 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.alfab-boca-numero-item {
    flex: 0 0 auto;
    text-align: center;
}
.alfab-boca-numero-item img {
    width: 78px;
    height: 78px;
    object-fit: cover;
    border-radius: 10px;
    border: 3px solid #0f172a;
    background-color: #0f172a;
    display: block;
}
.alfab-boca-numero-item span {
    display: block;
    margin-top: 6px;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--text-main, #0f172a);
}

/* ============================================================
   Juego "Completar la palabra": fusiona palabras del abecedario
   (con imagen) y de los números (sin imagen, se muestra el número
   grande). Interacción por toque: se elige la ficha de letra y se
   coloca sola en el espacio en blanco.
   ============================================================ */
.completar-imagen-caja {
    width: 160px;
    height: 160px;
    max-width: 100%;
    background: #eef2ff;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.completar-imagen-caja img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
}
.completar-numero-grande {
    font-size: 3rem;
    font-weight: 800;
    color: var(--accent-color, #0284c7);
}

.completar-palabra {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}
.completar-letra-casilla {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 44px;
    padding: 0 2px;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary-color, #0f172a);
    border-bottom: 3px solid transparent;
}
.completar-letra-casilla.blank {
    border-bottom: 3px dashed #f59e0b;
    background: #fffbeb;
    border-radius: 6px;
}
/* Cuando faltan 2 o 3 letras (nivel Medio/Difícil), esta marca cuál de
   los espacios en blanco toca llenar en este momento. */
.completar-letra-casilla.blank.activa {
    border-bottom-color: #d97706;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
    animation: completarBlancoActivo 1.1s ease-in-out infinite;
}
@keyframes completarBlancoActivo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
.completar-letra-casilla.correcta {
    color: #16a34a;
    border-bottom-color: #16a34a;
    background: #f0fdf4;
    border-radius: 6px;
}
.completar-letra-casilla.incorrecta {
    color: #dc2626;
    border-bottom-color: #dc2626;
    background: #fef2f2;
    border-radius: 6px;
}

.completar-opcion-letra {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    border: 2px solid var(--border-color, #cbd5e1);
    background: #ffffff;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.completar-opcion-letra:not(:disabled):hover {
    border-color: var(--accent-color, #0284c7);
    transform: translateY(-2px);
}
.completar-opcion-letra:disabled {
    opacity: 0.6;
}
.completar-opcion-letra.correcta {
    background: #dcfce7;
    border-color: #16a34a;
    color: #166534;
    animation: quizPulso 0.5s ease;
}
.completar-opcion-letra.incorrecta {
    background: #fef2f2;
    border-color: #dc2626;
    color: #991b1b;
    animation: quizTiemble 0.4s ease;
}

/* Caja de grafía: la letra/video se muestra grande, similar a la referencia */
.alfab-grafia-caja {
    background: #f8fafc;
}

/* Fonética (foto de boca) y Grafía (video de trazo): misma proporción
   1:1 en ambas cajas para que siempre se vean del mismo tamaño, sin
   importar si la foto o el video original son más anchos o más altos
   (object-fit:contain en .apoyo-visual-img evita que se deformen). */
#alfabBocaCaja,
#alfabTrazoCaja {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    max-height: 340px;
}

/* Las 4 cajas de imagen estática (.alfab-tipo-img/.alfab-tipo-box) ya no
   se usan tras este cambio — se pueden retirar si no aparecen en ningún
   otro lugar del sitio. */

/* Letra/número inicial resaltado dentro de la palabra de ejemplo */
.alfab-ejemplo-letra-inicial {
    font-weight: 800;
    font-size: 1.35em;
    color: var(--accent-color, #0284c7);
}

/* El video de grafía reutiliza .apoyo-visual-caja / .apoyo-visual-img
   ya existentes; si esas clases fijaban object-fit o dimensiones
   pensadas para <img>, confirma que también apliquen bien a <video>
   (mismas reglas box-sizing/width/height suelen funcionar igual). */

/* ============================================================
   Juego "Unir con flechas": dos columnas de ítems tocables +
   un <svg> superpuesto que dibuja una línea por cada conexión
   (gris = pendiente de comprobar, verde = correcta y bloqueada,
   rojo = recién marcada incorrecta, se libera sola en un momento).
   ============================================================ */
.alfab-unir-tablero {
    min-height: 260px;
    padding-top: 4px;
}

/* El SVG cubre todo el tablero pero no intercepta clics: los botones
   de las dos columnas siguen siendo lo único clicable. */
.alfab-unir-lineas-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}
.alfab-unir-linea {
    stroke-width: 3;
    stroke-linecap: round;
}
.alfab-unir-linea.pendiente { stroke: #94a3b8; stroke-dasharray: 6 5; }
.alfab-unir-linea.correcta { stroke: #16a34a; }
.alfab-unir-linea.incorrecta { stroke: #dc2626; }

/* Ítem de cualquiera de las dos columnas (imagen o palabra) */
.alfab-unir-item {
    width: 100%;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 2px solid var(--border-color, #cbd5e1);
    background: #ffffff;
    font-weight: 700;
    color: var(--text-main, #0f172a);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.alfab-unir-item:hover:not(:disabled) {
    border-color: var(--accent-color, #0284c7);
    transform: translateY(-1px);
}
.alfab-unir-item:disabled {
    cursor: default;
}

.alfab-unir-imagen img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    pointer-events: none;
}
.alfab-unir-numero {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent-color, #0284c7);
    pointer-events: none;
}

/* Seleccionado: primer toque, esperando su pareja */
.alfab-unir-item.seleccionado {
    border-color: #0d6efd;
    background: #eaf2ff;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.18);
}
/* Conectado: ya tiene línea pendiente de comprobar */
.alfab-unir-item.conectado {
    border-color: #94a3b8;
    background: #f8fafc;
}
/* Acertada: pareja confirmada, queda bloqueada */
.alfab-unir-item.acertada {
    border-color: #16a34a;
    background: #dcfce7;
    color: #166534;
    opacity: 0.9;
}
/* Marcada incorrecta al comprobar (se libera sola tras la animación) */
.alfab-unir-item.error-temp {
    border-color: #dc2626;
    background: #fef2f2;
    animation: quizTiemble 0.4s ease;
}