/* ================================================================
   FYQ — FICHA MEZCLAS Y DISOLUCIONES · estilos específicos
   ================================================================ */

/* ============ FYQ DASHBOARD · NUEVA TARJETA ============ */
.ficha-mezclas-card {
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%) !important;
}

/* ============ DASHBOARD DE LA FICHA · FÓRMULAS ============ */
.mezclas-formulario {
    background: linear-gradient(135deg, #ecfeff 0%, #dbeafe 100%);
    border: 2px solid #06b6d4;
    border-radius: 14px;
    margin: 1.2rem 0 1.5rem;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(6, 182, 212, 0.12);
}
.mezclas-formulario[open] {
    box-shadow: 0 8px 24px rgba(6, 182, 212, 0.2);
}
.mezclas-formulario-summary {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.2rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.mezclas-formulario-summary::-webkit-details-marker { display: none; }
.mezclas-formulario-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}
.mezclas-formulario-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.mezclas-formulario-text strong {
    color: #0c4a6e;
    font-size: 1.05rem;
    font-weight: 800;
}
.mezclas-formulario-hint {
    color: #0e7490;
    font-size: 0.88rem;
    margin-top: 0.15rem;
}
.mezclas-formulario-arrow {
    font-size: 1.4rem;
    color: #0e7490;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.mezclas-formulario[open] .mezclas-formulario-arrow { transform: rotate(180deg); }

.mezclas-formulario-body {
    padding: 1rem 1.2rem 1.2rem;
    background: white;
    border-top: 2px solid #06b6d4;
}

.mezclas-formulario-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    margin-bottom: 0.7rem;
}
.mezclas-formulario-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr minmax(260px, 1.3fr) auto;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.5rem;
    padding: 1rem 1.2rem 1rem 2.2rem;
    background: #f8fafc;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    transition: all 0.15s;
}
.mezclas-formulario-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.mezclas-formulario-card-1 { border-color: #10b981; background: #ecfdf5; }
.mezclas-formulario-card-2 { border-color: #8b5cf6; background: #f5f3ff; }
.mezclas-formulario-card-3 { border-color: #f59e0b; background: #fffbeb; }
.mezclas-formulario-card-4 { border-color: #06b6d4; background: #ecfeff; }
.mezclas-formulario-card-5 { border-color: #ef4444; background: #fef2f2; }
.mezclas-formulario-card-wide { grid-column: 1 / -1; }

.mezclas-formulario-card-num {
    position: absolute;
    top: 50%;
    left: -16px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: white;
    border: 2px solid currentColor;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.mezclas-formulario-card-1 .mezclas-formulario-card-num { color: #10b981; }
.mezclas-formulario-card-2 .mezclas-formulario-card-num { color: #8b5cf6; }
.mezclas-formulario-card-3 .mezclas-formulario-card-num { color: #f59e0b; }
.mezclas-formulario-card-4 .mezclas-formulario-card-num { color: #06b6d4; }
.mezclas-formulario-card-5 .mezclas-formulario-card-num { color: #ef4444; font-size: 1.1rem; }

.mezclas-formulario-card-titulo {
    grid-column: 1;
    grid-row: 1;
    font-weight: 800;
    color: #0f172a;
    font-size: 1.05rem;
    line-height: 1.3;
}
.mezclas-formulario-card-formula {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 0.4rem;
    padding: 0.7rem 1rem;
    background: white;
    border-radius: 9px;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    min-width: 0;
    overflow-x: auto;
}
.mezclas-formulario-card-formula-mini {
    font-size: 1rem;
    padding: 0.7rem 1rem;
}
.mezclas-formulario-card-extra {
    grid-column: 1;
    grid-row: 2;
    padding: 0.5rem 0.7rem;
    background: white;
    border-radius: 7px;
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.5;
}
.mezclas-formulario-card-extra small {
    font-size: 0.82rem;
    color: #64748b;
}
.mezclas-formulario-card-uso {
    grid-column: 3;
    grid-row: 1 / span 2;
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
    text-align: center;
    padding: 0.5rem 0.8rem;
    background: white;
    border-radius: 8px;
    border: 1px dashed #cbd5e1;
    align-self: center;
    white-space: nowrap;
}
.mezclas-formulario-card-1 .mezclas-formulario-card-uso { color: #047857; border-color: #10b981; }
.mezclas-formulario-card-2 .mezclas-formulario-card-uso { color: #6d28d9; border-color: #8b5cf6; }
.mezclas-formulario-card-3 .mezclas-formulario-card-uso { color: #b45309; border-color: #f59e0b; }
.mezclas-formulario-card-4 .mezclas-formulario-card-uso { color: #0e7490; border-color: #06b6d4; }
.mezclas-formulario-card-5 .mezclas-formulario-card-uso { color: #b91c1c; border-color: #ef4444; }

/* Cuando no hay extra, el título se centra verticalmente */
.mezclas-formulario-card:not(:has(.mezclas-formulario-card-extra)) .mezclas-formulario-card-titulo {
    grid-row: 1 / span 2;
    align-self: center;
}

.mezclas-formulario-aviso {
    padding: 0.7rem 0.9rem;
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    color: #78350f;
    font-size: 0.92rem;
    line-height: 1.55;
}

@media (max-width: 720px) {
    .mezclas-formulario-card {
        grid-template-columns: 1fr;
        padding: 1rem 1rem 1rem 1.2rem;
    }
    .mezclas-formulario-card-num {
        position: static;
        transform: none;
        margin-bottom: 0.4rem;
    }
    .mezclas-formulario-card-titulo,
    .mezclas-formulario-card-formula,
    .mezclas-formulario-card-extra,
    .mezclas-formulario-card-uso {
        grid-column: 1;
        grid-row: auto;
    }
    .mezclas-formulario-card-formula {
        font-size: 0.95rem;
        padding: 0.6rem 0.8rem;
        white-space: normal;
        flex-wrap: wrap;
    }
    .mezclas-formulario-card-uso {
        text-align: left;
    }
}

/* ============ DASHBOARD DE LA FICHA · TEMARIO ============ */
.mezclas-temario {
    background: white;
    border-radius: 14px;
    padding: 1.3rem 1.4rem;
    margin: 1.2rem 0 1.5rem;
    border: 2px solid #e0f2fe;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.08);
}
.mezclas-temario-titulo {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0c4a6e;
    margin-bottom: 1rem;
}
.mezclas-temario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.7rem;
}
.mezclas-temario-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    column-gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}
.mezclas-temario-item strong {
    grid-column: 2;
    font-size: 0.95rem;
    color: #0f172a;
}
.mezclas-temario-item span {
    grid-column: 2;
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 0.1rem;
}
.mezclas-temario-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: white;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-row: span 2;
}

/* ============ TEORÍA DESPLEGABLE ============ */
.mez-teoria {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 14px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all 0.2s;
}
.mez-teoria[open] {
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.25);
}
.mez-teoria > summary {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.2rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.mez-teoria > summary::-webkit-details-marker { display: none; }
.mez-teoria-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}
.mez-teoria-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.mez-teoria-text strong {
    color: #78350f;
    font-size: 1rem;
    font-weight: 800;
}
.mez-teoria-hint {
    color: #92400e;
    font-size: 0.85rem;
    margin-top: 0.15rem;
}
.mez-teoria-arrow {
    font-size: 1.4rem;
    color: #b45309;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.mez-teoria[open] .mez-teoria-arrow { transform: rotate(180deg); }

.mez-teoria-body {
    background: white;
    padding: 1.3rem 1.4rem;
    border-top: 2px solid #f59e0b;
}
.mez-teoria-bloque {
    margin-bottom: 1.4rem;
    padding: 1rem 1.2rem;
    background: #fffbeb;
    border-radius: 10px;
    border-left: 4px solid #f59e0b;
}
.mez-teoria-bloque:last-child { margin-bottom: 0; }
.mez-teoria-bloque-titulo {
    font-weight: 800;
    color: #78350f;
    font-size: 1rem;
    margin-bottom: 0.7rem;
}
.mez-teoria-bloque-cuerpo p {
    margin: 0.4rem 0;
    color: #1f2937;
    line-height: 1.55;
}
.mez-teoria-lista {
    margin: 0.4rem 0 0.4rem 1.2rem;
    padding: 0;
}
.mez-teoria-lista li {
    margin: 0.3rem 0;
    line-height: 1.5;
}
.mez-teoria-ejemplo {
    margin-top: 0.7rem;
    padding: 0.6rem 0.9rem;
    background: white;
    border-radius: 8px;
    border-left: 3px solid #0ea5e9;
    font-size: 0.92rem;
    color: #0c4a6e;
}
.mez-teoria-truco {
    margin-top: 0.7rem;
    padding: 0.6rem 0.9rem;
    background: #f0fdf4;
    border-radius: 8px;
    border-left: 3px solid #10b981;
    font-size: 0.93rem;
    color: #064e3b;
}
.mez-teoria-aviso {
    margin: 0.6rem 0;
    padding: 0.65rem 0.9rem;
    background: #fef2f2;
    border-radius: 8px;
    border-left: 3px solid #ef4444;
    font-size: 0.93rem;
    color: #7f1d1d;
}
.mez-teoria-aviso-ok {
    background: #ecfdf5;
    border-left-color: #10b981;
    color: #064e3b;
}

.mez-teoria-tabla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 2px solid #fbbf24;
    border-radius: 10px;
    overflow: hidden;
    margin: 0.6rem 0;
    background: white;
}
.mez-teoria-tabla-row {
    display: contents;
}
.mez-teoria-tabla-row > div {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid #fde68a;
    border-right: 1px solid #fde68a;
    line-height: 1.5;
}
.mez-teoria-tabla-row > div:last-child { border-right: none; }
.mez-teoria-tabla-row:last-child > div { border-bottom: none; }
.mez-teoria-tabla-head > div {
    background: #fbbf24;
    color: #78350f;
    font-weight: 800;
    text-align: center;
}
.mez-teoria-mini-atom {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.3rem;
}

/* Disolución */
.mez-teoria-disolucion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin: 0.7rem 0;
}
.mez-teoria-disolucion-bloq {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1rem;
    background: white;
    border-radius: 10px;
    border: 2px solid #fde68a;
}
.mez-teoria-disolucion-icon {
    font-size: 2rem;
    flex-shrink: 0;
}
.mez-teoria-disolucion-bloq strong {
    color: #78350f;
    font-size: 1rem;
    display: block;
    margin-bottom: 0.2rem;
}
.mez-teoria-disolucion-bloq p {
    margin: 0;
    font-size: 0.88rem;
    color: #475569;
}

/* Árbol resumen */
.mez-teoria-resumen {
    background: #eff6ff;
    border-left-color: #0ea5e9;
}
.mez-teoria-arbol {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    align-items: center;
    margin-top: 0.6rem;
}
.mez-teoria-arbol-nivel {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}
.mez-teoria-arbol-caja {
    padding: 0.6rem 0.9rem;
    background: white;
    border: 2px solid #93c5fd;
    border-radius: 8px;
    font-weight: 700;
    color: #1e3a8a;
    font-size: 0.9rem;
    text-align: center;
    min-width: 110px;
}
.mez-teoria-arbol-caja small {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    margin-top: 0.1rem;
}
.mez-arbol-top {
    background: #1e40af;
    color: white;
    border-color: #1e40af;
}
.mez-arbol-simp { background: #dcfce7; border-color: #16a34a; color: #14532d; }
.mez-arbol-comp { background: #fef3c7; border-color: #d97706; color: #78350f; }
.mez-arbol-homo { background: #dbeafe; border-color: #2563eb; color: #1e3a8a; }
.mez-arbol-hete { background: #fce7f3; border-color: #db2777; color: #831843; }

/* Fórmulas matemáticas */
.mez-teoria-formula-bloque {
    background: #ecfeff;
    border-left-color: #06b6d4;
}
.mez-formula-grande {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0e7490;
    padding: 0.8rem 1rem;
    background: white;
    border-radius: 10px;
    margin: 0.5rem 0;
    line-height: 1.4;
}
.mez-formula-mini { font-size: 1rem; padding: 0.6rem 0.8rem; }
.mez-fraccion {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0.3rem;
}
.mez-numerador, .mez-denominador {
    padding: 0.1rem 0.3rem;
    font-size: 0.95em;
}
.mez-numerador {
    border-bottom: 2px solid #0e7490;
}

/* Conversiones */
.mez-conversiones {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.6rem 0;
}
.mez-conv-item {
    padding: 0.5rem 0.8rem;
    background: white;
    border-radius: 6px;
    border-left: 3px solid #06b6d4;
    color: #0e7490;
}
.mez-conversiones-ejemplos {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.6rem;
    padding: 0.6rem 0.9rem;
    background: white;
    border-radius: 8px;
}
.mez-conversiones-ejemplos > div {
    font-family: 'Cambria Math', serif;
    color: #0f172a;
}

.mez-pasos-ej {
    margin: 0.5rem 0 0.5rem 1.4rem;
    padding: 0;
}
.mez-pasos-ej li {
    margin: 0.3rem 0;
    padding-left: 0.2rem;
    line-height: 1.5;
}

/* Truco bloque */
.mez-teoria-bloque-truco {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left-color: #d97706;
}
.mez-truco-formula {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.8rem 1rem;
    background: white;
    border-radius: 10px;
    margin: 0.6rem 0;
    font-size: 1rem;
    color: #78350f;
}
.mez-truco-arrow {
    color: #d97706;
    font-weight: 800;
    font-size: 1.3rem;
}

/* Comparar bloque */
.mez-teoria-bloque-comparar {
    background: #f5f3ff;
    border-left-color: #8b5cf6;
}
.mez-comparar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-top: 0.5rem;
}
.mez-comparar-card {
    padding: 0.8rem 1rem;
    background: white;
    border-radius: 10px;
    border: 2px solid #ddd6fe;
}
.mez-comparar-card-ok {
    border-color: #10b981;
    background: #f0fdf4;
}
.mez-comparar-titulo {
    font-weight: 800;
    margin-bottom: 0.4rem;
    color: #5b21b6;
}
.mez-comparar-card-ok .mez-comparar-titulo { color: #064e3b; }

/* Dos fórmulas (ej 5) */
.mez-dos-formulas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin: 0.6rem 0;
}
.mez-dos-formulas-card {
    padding: 0.8rem 1rem;
    background: white;
    border-radius: 10px;
    border: 2px solid #06b6d4;
}
.mez-dos-formulas-tit {
    font-weight: 800;
    color: #0e7490;
    margin-bottom: 0.4rem;
    text-align: center;
}
.mez-dos-formulas-nota {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #64748b;
    text-align: center;
}

/* ============ ENUNCIADO Y ENTRADAS ============ */
.mez-enunciado-card {
    padding: 1.1rem 1.3rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.mez-enunciado-titulo {
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.6rem;
}
.mez-enunciado-card p {
    margin: 0.4rem 0;
    line-height: 1.55;
    color: #1f2937;
}
.mez-datos-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px dashed #e2e8f0;
}
.mez-datos-resumen span {
    padding: 0.4rem 0.8rem;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    font-size: 0.92rem;
    color: #1f2937;
}

.mez-input-card {
    padding: 1.1rem 1.3rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #10b981;
    border-radius: 12px;
    margin-bottom: 1rem;
}
.mez-input-card-titulo {
    font-weight: 800;
    color: #064e3b;
    margin-bottom: 0.6rem;
    font-size: 1rem;
}
.mez-input-label {
    display: block;
    font-weight: 700;
    color: #064e3b;
    margin-bottom: 0.5rem;
}
.mez-input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}
.mez-input-num {
    flex: 1;
    padding: 0.7rem 0.9rem;
    border: 2px solid #10b981;
    border-radius: 10px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    background: white;
    text-align: right;
    min-width: 0;
}
.mez-input-num:focus {
    outline: 3px solid rgba(16, 185, 129, 0.25);
    outline-offset: 0;
}
.mez-input-unidad {
    font-weight: 800;
    color: #064e3b;
    font-size: 1.05rem;
    min-width: 38px;
}

.mez-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.mez-actions-center { justify-content: center; }
.mez-btn {
    padding: 0.6rem 1.1rem;
    border: none;
    border-radius: 9px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.15s;
}
.mez-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.mez-btn-comprobar {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}
.mez-btn-reset {
    background: #f1f5f9;
    color: #475569;
}
.mez-btn-sol {
    background: #fef3c7;
    color: #78350f;
}

/* Doble columna para ej 5 */
.mez-doble {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}
.mez-input-card-doble { padding: 0.9rem 1rem; }

/* ============ PASO A PASO ============ */
.mez-pasos {
    margin-top: 0.8rem;
    padding: 1rem 1.1rem;
    background: white;
    border-radius: 10px;
    border-left: 4px solid #0ea5e9;
}
.mez-pasos-titulo {
    font-weight: 800;
    color: #0c4a6e;
    margin-bottom: 0.7rem;
}
.mez-paso {
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: 0.7rem;
    align-items: start;
    padding: 0.6rem 0;
    border-top: 1px dashed #e0f2fe;
}
.mez-paso:first-of-type { border-top: none; }
.mez-paso-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0ea5e9;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}
.mez-paso-body {
    line-height: 1.5;
    color: #1f2937;
}
.mez-paso-body strong { color: #0f172a; }
.mez-paso-datos {
    margin: 0.4rem 0 0.4rem 1.2rem;
    padding: 0;
}
.mez-paso-datos li { margin: 0.2rem 0; }
.mez-paso-aviso {
    margin-top: 0.5rem;
    padding: 0.5rem 0.7rem;
    background: #fef2f2;
    border-radius: 6px;
    font-size: 0.88rem;
    color: #7f1d1d;
}
.mez-paso-aviso-ok {
    background: #ecfdf5;
    color: #064e3b;
}
.mez-paso-truco { background: #fffbeb; border-radius: 8px; }
.mez-paso-truco .mez-paso-num { background: #f59e0b; }
.mez-paso-conclusion .mez-paso-num { background: #10b981; }
.mez-formula-paso {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.8rem;
    background: #f0f9ff;
    border-radius: 8px;
    margin-top: 0.4rem;
    font-size: 1rem;
    color: #0c4a6e;
}

/* ============ EJ 2 · BOTÓN PASO A PASO Y RESOLUCIÓN ============ */
.mez2-btn-pasos {
    display: grid;
    grid-template-columns: 56px 1fr 28px;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 1rem 1.2rem;
    background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
    border: 2px solid #d97706;
    border-radius: 12px;
    cursor: pointer;
    margin: 0 0 1rem;
    text-align: left;
    transition: all 0.2s;
    font-family: inherit;
}
.mez2-btn-pasos:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(217, 119, 6, 0.25);
}
.mez2-btn-pasos-icon {
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(120, 53, 15, 0.15);
}
.mez2-btn-pasos-text {
    display: flex;
    flex-direction: column;
}
.mez2-btn-pasos-text strong {
    font-size: 1.05rem;
    color: #78350f;
}
.mez2-btn-pasos-text small {
    font-size: 0.85rem;
    color: #92400e;
    margin-top: 0.1rem;
}
.mez2-btn-pasos-arrow {
    font-size: 1.6rem;
    color: #78350f;
    font-weight: 800;
}

.mez2-pasos-cabecera {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 1.1rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #d97706;
    border-radius: 12px;
    margin-bottom: 0.7rem;
}
.mez2-pasos-cabecera-icon { font-size: 1.8rem; }
.mez2-pasos-cabecera-titulo {
    font-weight: 800;
    color: #78350f;
    font-size: 1.1rem;
}
.mez2-pasos-cabecera-sub {
    font-size: 0.9rem;
    color: #92400e;
    margin-top: 0.1rem;
}

.mez-pasos-detallado .mez-paso { padding: 0.9rem 0; }
.mez-pasos-detallado .mez-paso-body p {
    margin: 0.5rem 0;
    line-height: 1.55;
}

.mez2-cita {
    padding: 0.7rem 0.9rem;
    background: #f8fafc;
    border-left: 3px solid #0ea5e9;
    border-radius: 6px;
    margin: 0.5rem 0;
    color: #1f2937;
    line-height: 1.5;
}
.mez2-cita mark {
    background: #fde68a;
    padding: 0 0.2rem;
    border-radius: 3px;
    font-weight: 700;
    color: #78350f;
}

.mez2-formula-grande {
    font-size: 1.1rem;
    padding: 0.8rem 1rem;
}
.mez2-formula-mini {
    font-size: 1.05rem;
    padding: 0.6rem 0.9rem;
}

.mez2-conversion-visual {
    display: flex;
    justify-content: center;
    margin: 0.6rem 0;
}
.mez2-conv-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    background: white;
    border: 2px solid #06b6d4;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.15);
}
.mez2-conv-num {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0e7490;
    font-family: 'Cambria Math', serif;
}
.mez2-conv-igual {
    font-size: 1.4rem;
    color: #475569;
    font-weight: 800;
}

.mez2-truco-extra {
    margin-top: 0.6rem;
    padding: 0.6rem 0.9rem;
    background: #f0fdf4;
    border-left: 3px solid #10b981;
    border-radius: 6px;
    color: #064e3b;
    line-height: 1.55;
    font-size: 0.93rem;
}

.mez2-resultado-final {
    display: inline-block;
    padding: 0.8rem 1.4rem;
    background: white;
    border: 3px solid #10b981;
    border-radius: 12px;
    font-size: 1.3rem;
    font-weight: 800;
    color: #064e3b;
    margin: 0.5rem 0;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}
.mez2-resultado-final strong { color: #10b981; }

.mez2-significado {
    padding: 0.8rem 1rem;
    background: #ecfdf5;
    border: 1px dashed #10b981;
    border-radius: 10px;
    color: #064e3b;
    line-height: 1.55;
    margin: 0.5rem 0;
}

.mez2-checklist {
    margin-top: 0.8rem;
    padding: 0.8rem 1rem;
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
}
.mez2-check-titulo {
    font-weight: 800;
    color: #1e3a8a;
    margin-bottom: 0.4rem;
}
.mez2-checklist ul {
    margin: 0.3rem 0 0 1.3rem;
    padding: 0;
}
.mez2-checklist li {
    margin: 0.3rem 0;
    color: #1e3a8a;
    line-height: 1.5;
}

/* ============ EJ 5 · APARTADOS DEL PASO A PASO ============ */
.mez5-apartado {
    margin: 1rem 0;
    padding: 0.8rem 0.9rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}
.mez5-apartado-a { border-color: #10b981; background: #f0fdf4; }
.mez5-apartado-b { border-color: #8b5cf6; background: #faf5ff; }
.mez5-apartado-header {
    font-weight: 800;
    font-size: 0.95rem;
    padding: 0.4rem 0.8rem;
    background: white;
    border-radius: 8px;
    margin-bottom: 0.7rem;
    letter-spacing: 0.5px;
}
.mez5-apartado-a .mez5-apartado-header { color: #047857; border-left: 4px solid #10b981; }
.mez5-apartado-b .mez5-apartado-header { color: #6d28d9; border-left: 4px solid #8b5cf6; }

.mez5-decision {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin: 0.5rem 0;
}
.mez5-decision-card {
    padding: 0.8rem 1rem;
    background: white;
    border-radius: 10px;
    border: 2px solid;
}
.mez5-decision-card-1 { border-color: #10b981; }
.mez5-decision-card-2 { border-color: #8b5cf6; }
.mez5-decision-titulo {
    font-weight: 800;
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
}
.mez5-decision-card-1 .mez5-decision-titulo { color: #047857; }
.mez5-decision-card-2 .mez5-decision-titulo { color: #6d28d9; }
.mez5-decision-formula {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.5rem 0.7rem;
    background: #f8fafc;
    border-radius: 6px;
    margin: 0.4rem 0;
    font-weight: 700;
    color: #0f172a;
}
.mez5-decision-uso {
    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
    margin-top: 0.4rem;
}
.mez5-decision-card-1 .mez5-decision-uso { color: #047857; }
.mez5-decision-card-2 .mez5-decision-uso { color: #6d28d9; }

/* ============ EJ 6 · RAZONAMIENTO PASO A PASO ============ */
.mez6-keywords-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
    margin: 0.6rem 0;
}
.mez6-keyword-card {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0.6rem;
    align-items: center;
    padding: 0.6rem 0.8rem;
    background: white;
    border-radius: 9px;
    border: 1px solid #e2e8f0;
}
.mez6-keyword-icon {
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mez6-keyword-card strong {
    color: #0f172a;
    font-size: 0.95rem;
}
.mez6-keyword-card p {
    margin: 0.15rem 0 0;
    font-size: 0.83rem;
    color: #64748b;
    line-height: 1.4;
}

.mez6-razonar {
    display: grid;
    grid-template-columns: 50px 1fr;
    column-gap: 0.7rem;
    align-items: start;
    padding: 0.7rem 0.9rem;
    background: white;
    border-radius: 10px;
    border-left: 4px solid #06b6d4;
    margin: 0.5rem 0;
}
.mez6-razonar-num {
    font-weight: 800;
    color: #0e7490;
    background: #ecfeff;
    border-radius: 8px;
    text-align: center;
    padding: 0.3rem 0.4rem;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}
.mez6-razonar-body em {
    color: #0f172a;
    font-style: italic;
    display: block;
    margin-bottom: 0.4rem;
    line-height: 1.5;
}
.mez6-razonar-body p {
    margin: 0.25rem 0;
    line-height: 1.5;
    font-size: 0.92rem;
    color: #1f2937;
}

.mez6-tabla-resumen {
    display: grid;
    grid-template-columns: 2fr 1.3fr;
    border: 2px solid #06b6d4;
    border-radius: 10px;
    overflow: hidden;
    background: white;
    margin: 0.5rem 0;
}
.mez6-tabla-resumen-row {
    display: contents;
}
.mez6-tabla-resumen-row > div {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid #ecfeff;
    border-right: 1px solid #ecfeff;
    line-height: 1.5;
    color: #0f172a;
    font-size: 0.92rem;
}
.mez6-tabla-resumen-row > div:last-child { border-right: none; font-weight: 700; }
.mez6-tabla-resumen-row:last-child > div { border-bottom: none; }
.mez6-tabla-resumen-head > div {
    background: #06b6d4;
    color: white;
    font-weight: 800;
    font-size: 0.92rem;
}

/* ============ DASHBOARD · CHULETAS ============ */
.ficha-chuletas-section {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #d97706;
    border-radius: 14px;
    padding: 1rem 1.2rem !important;
    margin-bottom: 1.2rem;
}
.ficha-chuletas-section .ficha-pdf-section-titulo { color: #78350f; }
.ficha-chuletas-section .ficha-pdf-section-desc { color: #92400e; }

.ficha-chuleta-card {
    border: 2px solid #d97706 !important;
    background: white !important;
    transition: all 0.2s;
}
.ficha-chuleta-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(217, 119, 6, 0.25);
}
.ficha-chuleta-formulas { border-left: 6px solid #06b6d4 !important; }
.ficha-chuleta-tecnicas { border-left: 6px solid #8b5cf6 !important; }
.ficha-chuleta-card .ficha-pdf-card-num {
    font-size: 1.8rem !important;
    background: #fef3c7 !important;
    color: #78350f !important;
}

/* ============ EJ 7 · BLOQUE CLAVE (átomo vs molécula) ============ */
.mez7-bloque-clave {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    border: 2px solid #d97706 !important;
    border-left-width: 4px !important;
    box-shadow: 0 6px 18px rgba(217, 119, 6, 0.18);
    position: relative;
    padding-top: 1.5rem !important;
}
.mez7-bloque-clave-badge {
    position: absolute;
    top: -10px;
    left: 12px;
    padding: 0.25rem 0.7rem;
    background: #d97706;
    color: white;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

table.mez7-tabla-pista {
    width: 100%;
    border-collapse: collapse;
    margin: 0.6rem 0;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #d97706;
}
table.mez7-tabla-pista th,
table.mez7-tabla-pista td {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid #fde68a;
    text-align: left;
    line-height: 1.5;
    font-size: 0.93rem;
}
table.mez7-tabla-pista tr:last-child td { border-bottom: none; }
table.mez7-tabla-pista th {
    background: #d97706;
    color: white;
    font-weight: 800;
    font-size: 0.88rem;
}
table.mez7-tabla-pista td:nth-child(3) {
    text-align: center;
    font-size: 1.05rem;
    font-weight: 800;
    color: #78350f;
    background: #fffbeb;
}
table.mez7-tabla-pista tr.mez7-tabla-destacada td {
    background: #fef3c7;
    font-weight: 700;
}
table.mez7-tabla-pista tr.mez7-tabla-destacada td:nth-child(3) {
    background: #fbbf24;
    color: #78350f;
}

@media (max-width: 720px) {
    table.mez7-tabla-pista th,
    table.mez7-tabla-pista td {
        font-size: 0.85rem;
        padding: 0.5rem 0.6rem;
    }
}

/* ============ EJ 7 · REGLA BIEN/MAL ============ */
.mez7-regla-bien-mal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin: 0.7rem 0;
}
.mez7-bien, .mez7-mal {
    padding: 0.7rem 0.9rem;
    background: white;
    border-radius: 10px;
    border: 2px solid;
    text-align: center;
}
.mez7-bien { border-color: #10b981; background: #f0fdf4; }
.mez7-mal { border-color: #ef4444; background: #fef2f2; }
.mez7-bien-titulo, .mez7-mal-titulo {
    font-weight: 800;
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
}
.mez7-bien-titulo { color: #047857; }
.mez7-mal-titulo { color: #b91c1c; }
.mez7-bien small, .mez7-mal small {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.4;
}

@media (max-width: 720px) {
    .mez7-regla-bien-mal { grid-template-columns: 1fr; }
}

/* ============ EJ 7 · REACCIONES PASO A PASO ============ */
.mez7-reaccion-paso {
    margin: 0.7rem 0;
    padding: 0.6rem 0.8rem 0.8rem;
    background: white;
    border-radius: 10px;
    border: 1px solid #fecaca;
}
.mez7-reaccion-paso-header {
    font-weight: 800;
    color: #991b1b;
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.7rem;
    background: #fef2f2;
    border-radius: 6px;
}

@media (max-width: 720px) {
    .mez5-decision { grid-template-columns: 1fr; }
    .mez6-keywords-grid { grid-template-columns: 1fr; }
    .mez6-tabla-resumen { grid-template-columns: 1fr; }
    .mez6-tabla-resumen-row > div:last-child {
        border-right: none;
        background: #f0f9ff;
    }
}

/* ============ EJ 1 · ATMÓSFERAS ============ */
.mez1-widget { padding: 0; }
.mez1-widget .fyq-widget-header { padding: 1rem 1.3rem; }
.mez1-widget > div:not(.mez-teoria) { padding: 0 1.3rem; }
.mez1-widget > div.mez-teoria { margin: 1rem 1.3rem; padding: 0; }
.mez1-widget #mez1-container { padding: 0 1.3rem 1.3rem; }

.mez1-tabla {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #0ea5e9;
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
}
.mez1-tabla-titulo {
    font-weight: 800;
    color: #0c4a6e;
    margin-bottom: 0.7rem;
}
.mez1-planetas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}
.mez1-planeta {
    background: white;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    border: 1px solid #bae6fd;
}
.mez1-planeta-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    color: #0c4a6e;
}
.mez1-planeta-emoji { font-size: 1.3rem; }
.mez1-componentes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.mez1-componentes li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0;
    border-bottom: 1px dashed #e0f2fe;
    font-size: 0.95rem;
}
.mez1-componentes li:last-child { border-bottom: none; }
.mez-pct {
    margin-left: auto;
    font-weight: 800;
    color: #0e7490;
    font-family: 'Cambria Math', serif;
}

.mez1-parte {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
    transition: border-color 0.2s;
}
.mez1-parte.answered.correct { border-color: #10b981; background: #f0fdf4; }
.mez1-parte.answered.wrong { border-color: #ef4444; background: #fef2f2; }
.mez1-parte-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.mez1-parte-letra {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0ea5e9;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}
.mez1-parte-header h4 {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
}
.mez1-pista {
    padding: 0.6rem 0.9rem;
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #78350f;
    margin-bottom: 0.7rem;
    line-height: 1.5;
}

.mez1-botones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
}
.mez1-btn-comp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.7rem 0.5rem;
    background: white;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.mez1-btn-comp:hover:not(:disabled) { border-color: #0ea5e9; background: #f0f9ff; transform: translateY(-1px); }
.mez1-btn-comp:disabled { cursor: not-allowed; opacity: 0.7; }
.mez1-btn-comp span { font-weight: 700; color: #0f172a; }
.mez1-btn-comp small { font-size: 0.78rem; color: #64748b; font-weight: 600; }
.mez1-btn-comp.selected:not(.right-answer) { background: #fef2f2; border-color: #ef4444; opacity: 1; }
.mez1-btn-comp.right-answer { background: #f0fdf4; border-color: #10b981; opacity: 1; }

.mez1-feedback {
    margin-top: 0.7rem;
    padding: 0.9rem 1rem;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}
.mez1-fb-vera {
    font-weight: 800;
    margin-bottom: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
}
.mez1-fb-vera.ok { background: #d1fae5; color: #064e3b; }
.mez1-fb-vera.ko { background: #fee2e2; color: #7f1d1d; }
.mez1-fb-expl { line-height: 1.55; color: #1f2937; }

.mez1-podio {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
    margin-top: 0.7rem;
}
.mez1-podio-item {
    display: grid;
    grid-template-columns: 90px 1fr 60px;
    gap: 0.6rem;
    align-items: center;
    padding: 0.5rem 0.8rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}
.mez1-podio-disolvente {
    border-color: #10b981;
    background: #ecfdf5;
}
.mez1-podio-soluto {
    border-color: #f59e0b;
    background: #fffbeb;
}
.mez1-podio-rol {
    font-size: 0.7rem;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.5px;
}
.mez1-podio-disolvente .mez1-podio-rol { color: #064e3b; }
.mez1-podio-soluto .mez1-podio-rol { color: #78350f; }
.mez1-podio-formula {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
}
.mez1-podio-pct {
    font-weight: 800;
    color: #0e7490;
    text-align: right;
    font-family: 'Cambria Math', serif;
}

.mez1-curiosidad {
    margin-top: 0.7rem;
    padding: 0.6rem 0.9rem;
    background: #eff6ff;
    border-radius: 8px;
    border-left: 3px solid #3b82f6;
    color: #1e3a8a;
    font-size: 0.92rem;
    line-height: 1.5;
}

/* Filas disolvente/soluto (parte a y b) */
.mez1-rol-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}
.mez1-rol-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0.5rem;
    align-items: center;
    padding: 0.6rem 0.9rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.2s;
}
.mez1-rol-row.answered.correct { border-color: #10b981; background: #f0fdf4; }
.mez1-rol-row.answered.wrong   { border-color: #ef4444; background: #fef2f2; }

.mez1-rol-comp {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.mez1-rol-comp strong { font-size: 1.05rem; color: #0f172a; }
.mez1-rol-nombre {
    font-size: 0.85rem;
    color: #64748b;
}
.mez1-rol-comp .mez-pct {
    margin-left: auto;
    font-weight: 800;
    color: #0e7490;
    font-family: 'Cambria Math', serif;
}

.mez1-rol-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}
.mez1-rol-btn {
    padding: 0.55rem 0.5rem;
    border: 2px solid #cbd5e1;
    background: white;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.8rem;
    cursor: pointer;
    color: #475569;
    transition: all 0.15s;
    letter-spacing: 0.3px;
}
.mez1-rol-btn:hover:not(:disabled) { border-color: #0ea5e9; transform: translateY(-1px); }
.mez1-rol-btn:disabled { cursor: not-allowed; opacity: 0.7; }
.mez1-rol-btn-d { color: #047857; }
.mez1-rol-btn-s { color: #b45309; }
.mez1-rol-btn.selected:not(.right-answer) { background: #fef2f2; border-color: #ef4444; opacity: 1; }
.mez1-rol-btn.right-answer { background: #f0fdf4; border-color: #10b981; opacity: 1; }

.mez1-rol-expl {
    grid-column: 1 / -1;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px dashed #e2e8f0;
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.5;
}
.mez1-rol-expl .ok { color: #047857; font-weight: 800; }
.mez1-rol-expl .ko { color: #b91c1c; font-weight: 800; }

/* Filas simple/compuesta */
.mez1-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.mez1-row-tipo {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 0.5rem;
    align-items: center;
    padding: 0.6rem 0.9rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.2s;
}
.mez1-row-tipo.answered.correct { border-color: #10b981; background: #f0fdf4; }
.mez1-row-tipo.answered.wrong { border-color: #ef4444; background: #fef2f2; }
.mez1-row-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.mez1-row-form strong { font-size: 1.05rem; color: #0f172a; }
.mez1-row-nombre {
    font-size: 0.85rem;
    color: #64748b;
}
.mez1-row-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}
.mez1-rp-btn {
    padding: 0.55rem 0.5rem;
    border: 2px solid #cbd5e1;
    background: white;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.78rem;
    cursor: pointer;
    color: #475569;
    transition: all 0.15s;
}
.mez1-rp-btn:hover:not(:disabled) { border-color: #0ea5e9; transform: translateY(-1px); }
.mez1-rp-btn:disabled { cursor: not-allowed; opacity: 0.7; }
.mez1-rp-simple { color: #047857; }
.mez1-rp-comp { color: #b45309; }
.mez1-rp-btn.selected:not(.right-answer) { background: #fef2f2; border-color: #ef4444; opacity: 1; }
.mez1-rp-btn.right-answer { background: #f0fdf4; border-color: #10b981; opacity: 1; }
.mez1-row-expl {
    grid-column: 1 / -1;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px dashed #e2e8f0;
    font-size: 0.88rem;
    color: #475569;
}
.mez1-row-expl .ok { color: #047857; font-weight: 800; }
.mez1-row-expl .ko { color: #b91c1c; font-weight: 800; }

.mez1-resumen-tipos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-top: 0.6rem;
}
.mez1-resumen-tipo {
    padding: 0.7rem 0.9rem;
    background: white;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}
.mez1-resumen-titulo {
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.4rem;
    font-size: 0.92rem;
}
.mez1-resumen-tipo ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.9rem;
}
.mez1-resumen-tipo li {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Progreso */
.mez1-progreso {
    margin-top: 0.5rem;
    font-size: 0.92rem;
    color: #475569;
}
.mez1-progreso strong { color: #0c4a6e; }
.mez1-reset-btn {
    margin-left: 0.5rem;
    padding: 0.3rem 0.7rem;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    font-weight: 700;
}
.mez1-reset-btn:hover { background: #e2e8f0; }

/* ============ EJ 6 · TÉCNICAS ============ */
.mez6-tecs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.7rem;
    margin: 0.6rem 0;
}
.mez6-tec-card {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 0.7rem;
    padding: 0.8rem 1rem;
    background: white;
    border-radius: 10px;
    border: 2px solid #e0f2fe;
}
.mez6-tec-icon {
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f9ff;
    border-radius: 10px;
}
.mez6-tec-body strong {
    color: #0c4a6e;
    font-size: 1rem;
}
.mez6-tec-body p {
    margin: 0.3rem 0;
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.45;
}
.mez6-tec-ej {
    margin-top: 0.4rem;
    padding: 0.5rem 0.7rem;
    background: #fffbeb;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #78350f;
    line-height: 1.4;
}

.mez6-leyenda {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px dashed #e2e8f0;
}
.mez6-leyenda > strong {
    display: block;
    margin-bottom: 0.5rem;
    color: #0c4a6e;
}
.mez6-leyenda-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.mez6-leyenda-item {
    padding: 0.3rem 0.7rem;
    background: #ecfeff;
    border: 1px solid #06b6d4;
    border-radius: 16px;
    font-size: 0.85rem;
    color: #0e7490;
    font-weight: 600;
}

.mez6-rows {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.mez6-row {
    padding: 0.8rem 1rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.2s;
}
.mez6-row.answered.correct { border-color: #10b981; background: #f0fdf4; }
.mez6-row.answered.wrong { border-color: #ef4444; background: #fef2f2; }
.mez6-row-desc {
    color: #1f2937;
    line-height: 1.5;
    margin-bottom: 0.6rem;
}
.mez6-sel {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 2px solid #cbd5e1;
    border-radius: 9px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
    background: white;
    cursor: pointer;
}
.mez6-sel:focus {
    outline: 3px solid rgba(14, 165, 233, 0.25);
    border-color: #0ea5e9;
}
.mez6-sel-ok { border-color: #10b981; background: #ecfdf5; }
.mez6-sel-ko { border-color: #ef4444; background: #fef2f2; }
.mez6-row-expl {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed #e2e8f0;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
}
.mez6-expl-ok { color: #047857; font-weight: 800; }
.mez6-expl-ko { color: #b91c1c; font-weight: 800; }

/* ============ EJ 7 · MODELOS DE BOLAS ============ */
.mez7-leyenda-bolas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.6rem 0;
    padding: 0.7rem 0.9rem;
    background: white;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}
.mez7-leyenda-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #0f172a;
}
.mez7-ejemplos-mol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.6rem;
    margin: 0.6rem 0;
}
.mez7-ejemplo-mol {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.9rem;
    background: white;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}
.mez7-ec-ejemplo {
    text-align: center;
    padding: 0.7rem 0.9rem;
    background: white;
    border-radius: 8px;
    margin: 0.4rem 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0c4a6e;
}

.mez7-reacciones-enunciado {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}
.mez7-reacciones-enunciado li {
    margin: 0.4rem 0;
    padding: 0.5rem 0.8rem;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid #ef4444;
    line-height: 1.5;
}

.mez7-parte {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
}
.mez7-parte-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.mez7-parte-letra {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}
.mez7-parte-header h4 {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
}
.mez7-pista {
    padding: 0.6rem 0.9rem;
    background: #fef2f2;
    border-left: 3px solid #ef4444;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #7f1d1d;
    margin-bottom: 0.7rem;
    line-height: 1.5;
}

.mez7-imgs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.7rem;
}
.mez7-img-card {
    padding: 0.8rem 0.9rem;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    position: relative;
    transition: all 0.2s;
}
.mez7-img-card.answered.correct { border-color: #10b981; background: #f0fdf4; }
.mez7-img-card.answered.wrong { border-color: #ef4444; background: #fef2f2; }
.mez7-img-num {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 24px;
    height: 24px;
    background: #1f2937;
    color: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
}
.mez7-img-dibujo {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70px;
    margin: 0.5rem 0 0.7rem;
}
.mez7-atomo-solo {
    display: inline-flex;
}
.mez7-img-pregunta {
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 0.4rem;
    text-align: center;
}
.mez7-img-opciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;
}
.mez7-opcion {
    padding: 0.5rem 0.5rem;
    border: 2px solid #cbd5e1;
    background: white;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    color: #0f172a;
}
.mez7-opcion:hover:not(:disabled) { border-color: #ef4444; transform: translateY(-1px); }
.mez7-opcion:disabled { cursor: not-allowed; opacity: 0.7; }
.mez7-opcion.selected:not(.right-answer) { background: #fef2f2; border-color: #ef4444; opacity: 1; }
.mez7-opcion.right-answer { background: #f0fdf4; border-color: #10b981; opacity: 1; }
.mez7-img-fb {
    margin-top: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    font-size: 0.88rem;
    line-height: 1.4;
}
.mez7-img-fb.ok { background: #d1fae5; color: #064e3b; }
.mez7-img-fb.ko { background: #fee2e2; color: #7f1d1d; }

.mez7-reaccion {
    padding: 0.9rem 1rem;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    margin-bottom: 0.7rem;
}
.mez7-reaccion-titulo {
    margin-bottom: 0.6rem;
    color: #0f172a;
    line-height: 1.5;
}
.mez7-reaccion-ec {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.7rem 0.9rem;
    background: white;
    border-radius: 8px;
    margin-bottom: 0.7rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    justify-content: center;
}
.mez7-coef {
    width: 50px;
    padding: 0.4rem 0.3rem;
    border: 2px solid #ef4444;
    border-radius: 6px;
    font-size: 1.05rem;
    font-weight: 800;
    text-align: center;
    color: #0f172a;
    background: #fff;
}
.mez7-coef:focus {
    outline: 2px solid rgba(239, 68, 68, 0.25);
}
.mez7-ec-paso {
    display: inline-block;
    padding: 0.4rem 0.7rem;
    background: white;
    border-radius: 6px;
    font-weight: 700;
    color: #0c4a6e;
    margin-top: 0.3rem;
}

.mez7-conteo-tabla {
    display: grid;
    grid-template-columns: 1fr 80px 80px;
    gap: 0;
    margin: 0.5rem 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}
.mez7-conteo-row {
    display: contents;
}
.mez7-conteo-row > span {
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    text-align: center;
    color: #1f2937;
}
.mez7-conteo-row > span:last-child { border-right: none; }
.mez7-conteo-row:last-child > span { border-bottom: none; }
.mez7-conteo-row:first-child > span {
    background: #f1f5f9;
    color: #0f172a;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 720px) {
    .mez1-planetas,
    .mez-teoria-disolucion,
    .mez-teoria-tabla,
    .mez-comparar-grid,
    .mez-dos-formulas,
    .mez-doble,
    .mez1-resumen-tipos,
    .mez7-imgs-grid {
        grid-template-columns: 1fr;
    }
    .mez1-row-tipo,
    .mez1-rol-row {
        grid-template-columns: 1fr;
    }
    .mez-formula-grande {
        font-size: 1rem;
        padding: 0.6rem 0.7rem;
    }
    .mez7-reaccion-ec {
        font-size: 1rem;
    }
    .mezclas-temario-grid {
        grid-template-columns: 1fr;
    }
}