/* ============================================
   UNIDAD2.CSS - Estilos de Temas 2.1 - 2.15
   Proyecto: Cálculo Integral
   ============================================ */

/* ============================================
   TEMA 2.1 - SUSTITUCIÓN
   ============================================ */

/* Lista numerada personalizada */
.lista-numerada {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    counter-reset: lista;
}

.lista-numerada li {
    padding: 0.5rem 0;
    padding-left: 2rem;
    position: relative;
    counter-increment: lista;
}

.lista-numerada li::before {
    content: counter(lista);
    position: absolute;
    left: 0;
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Pasos del método */
.metodo-pasos {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.metodo-paso {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: white;
    border-radius: var(--radius-sm);
}

.paso-num {
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Ejemplo box */
.ejemplo-box {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border: 2px solid #facc15;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.ejemplo-box h5 {
    color: #a16207;
    margin-bottom: 1.25rem;
}

.ejemplo-contenido {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ejemplo-paso-detallado {
    background: white;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.paso-header {
    background: var(--primary);
    color: white;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.paso-body {
    padding: 1rem;
}

.paso-body p {
    margin-bottom: 0.5rem;
}

.paso-body p:last-child {
    margin-bottom: 0;
}

.paso-resultado {
    background: #eff6ff;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary);
    font-family: 'Georgia', serif;
}

.paso-nota {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

.ejemplo-resultado-final {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}

.ejemplo-resultado-final .resultado-label {
    font-weight: 600;
    opacity: 0.9;
}

.ejemplo-resultado-final .resultado-formula {
    font-size: 1.1rem;
}

/* Pasos de sustitución interactivo */
.sustitucion-pasos {
    background: white;
    border-radius: var(--radius-md);
    padding: 1.5rem;
}

.sust-paso {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.sust-paso:last-child {
    border-bottom: none;
}

.sust-paso.sust-resultado {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    margin: 0.5rem -1.5rem -1.5rem -1.5rem;
    padding: 1rem 1.5rem;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.sust-label {
    font-weight: 600;
    min-width: 120px;
    color: var(--text-muted);
}

.sust-paso.sust-resultado .sust-label {
    color: rgba(255,255,255,0.9);
}

.sust-valor {
    font-size: 1.1rem;
}

/* ============================================
   TEMA 2.2 - INTEGRACIÓN POR PARTES
   ============================================ */

/* Regla LIATE */
.regla-liate {
    background: white;
    padding: 1rem;
    border-radius: var(--radius-sm);
    border-left: 4px solid #f59e0b;
}

.regla-liate h6 {
    color: #b45309;
    margin-bottom: 0.5rem;
}

.liate-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.liate-item {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 500;
    color: #92400e;
}

/* Juego de partes */
.partes-juego {
    background: white;
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
}

.partes-integral {
    font-size: 1.5rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.partes-opciones {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.partes-btn {
    padding: 0.75rem 2rem;
    border: 2px solid var(--primary);
    background: white;
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.partes-btn:hover {
    background: var(--bg-mate);
}

.partes-btn.selected {
    background: var(--primary);
    color: white;
}

.partes-btn.correct {
    background: #22c55e;
    border-color: #22c55e;
    color: white;
}

.partes-btn.incorrect {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
}

.partes-feedback {
    padding: 1rem;
    border-radius: var(--radius-sm);
    text-align: center;
}

.partes-feedback.success {
    background: #dcfce7;
    color: #166534;
}

.partes-feedback.error {
    background: #fee2e2;
    color: #991b1b;
}

/* ============================================
   TEMA 2.3 y 2.4 - TRIGONOMÉTRICAS
   ============================================ */

/* Grid de identidades */
.identidades-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.identidad-card {
    background: white;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.identidad-nombre {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.identidad-formula {
    color: var(--text-dark);
}

/* Estrategia box */
.estrategia-box {
    background: white;
    padding: 1rem;
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--accent-green);
}

.estrategia-box h6 {
    color: #166534;
    margin-bottom: 0.5rem;
}

/* Tabla de estrategias */
.estrategia-tabla {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.estrategia-fila {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    background: white;
    border-radius: var(--radius-sm);
}

.estrategia-fila .caso {
    font-size: 0.85rem;
    color: var(--primary);
}

.estrategia-fila .accion {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Controles de exponentes */
.trig-controles,
.tansec-controles {
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius-md);
    height: 100%;
}

.trig-resultado,
.tansec-resultado {
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius-md);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.trig-integral,
.tansec-integral {
    font-size: 1.25rem;
    text-align: center;
    padding: 1rem;
    background: #f8fafc;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.trig-estrategia,
.tansec-estrategia {
    flex: 1;
}

.estrategia-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.9rem;
}

.estrategia-badge.estrategia-impar {
    background: #dbeafe;
    color: #1e40af;
}

.estrategia-badge.estrategia-par {
    background: #dcfce7;
    color: #166534;
}

.estrategia-badge.estrategia-ambos-par {
    background: #fef3c7;
    color: #92400e;
}

.estrategia-badge.estrategia-ninguno {
    background: #f1f5f9;
    color: #475569;
}

/* ============================================
   TEMA 2.5 - PRODUCTOS SEN/COS
   ============================================ */

.producto-info {
    background: white;
    padding: 1rem;
    border-radius: var(--radius-sm);
}

.producto-info p {
    margin-bottom: 0.25rem;
}

/* ============================================
   RESPONSIVE UNIDAD 2
   ============================================ */

@media (max-width: 991.98px) {
    .partes-opciones {
        flex-direction: column;
        align-items: stretch;
    }
    
    .partes-btn {
        width: 100%;
    }
    
    .liate-lista {
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .ejemplo-resultado-final {
        flex-direction: column;
        text-align: center;
    }
    
    .sust-paso {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .sust-label {
        min-width: unset;
        font-size: 0.85rem;
    }
    
    .metodo-paso {
        flex-direction: column;
        text-align: center;
    }
    
    .estrategia-fila {
        text-align: center;
    }
    
    .identidad-card {
        text-align: center;
    }
    
    .identidad-formula.small {
        font-size: 0.8rem;
    }
    
    .partes-integral {
        font-size: 1.2rem;
    }
}
/* ============================================
   TEMA 2.6 - FUNCIONES HIPERBÓLICAS
   ============================================ */

/* Grid de funciones hiperbólicas */
.hiperbolicas-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hiper-card {
    background: white;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hiper-nombre {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.hiper-formula {
    color: var(--text-dark);
    font-size: 0.95rem;
}

.identidad-hiper {
    background: white;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--accent-green);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.identidad-hiper strong {
    font-size: 0.85rem;
    color: #166534;
}

/* Tabla de integrales */
.tabla-integrales {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: 1px solid #bbf7d0;
}

.tabla-integrales h5 {
    color: #166534;
    margin-bottom: 0;
}

.integral-item {
    background: white;
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
}

.integral-izq {
    color: var(--text-dark);
    min-width: 120px;
}

.integral-der {
    color: var(--primary);
    font-weight: 600;
}

/* Selector hiperbólicas */
.hiper-selector {
    background: white;
    border-radius: var(--radius-md);
    padding: 1.5rem;
    height: 100%;
}

.hiper-diferencias {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dif-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dif-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.dif-valor {
    font-size: 0.95rem;
    color: var(--text-dark);
}

/* ============================================
   TEMA 2.7 - SUSTITUCIÓN TRIGONOMÉTRICA
   ============================================ */

/* Casos de sustitución trigonométrica */
.casos-trigsub {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.caso-trigsub {
    background: white;
    border-radius: var(--radius-sm);
    padding: 1rem;
    border-left: 4px solid var(--primary);
}

.caso-trigsub.caso-1 {
    border-left-color: #667eea;
}

.caso-trigsub.caso-2 {
    border-left-color: #f59e0b;
}

.caso-trigsub.caso-3 {
    border-left-color: #10b981;
}

.caso-expresion {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.caso-sustitucion {
    font-size: 0.9rem;
    color: var(--primary);
    font-weight: 600;
}

.caso-resultado {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Resultado de sustitución trigonométrica */
.trigsub-resultado {
    background: white;
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
}

.trigsub-expresion {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.trigsub-flecha {
    color: var(--primary);
    font-size: 1.5rem;
    margin: 0.5rem 0;
}

.trigsub-sustitucion {
    background: linear-gradient(135deg, var(--bg-mate) 0%, #e0e7ff 100%);
    border-radius: var(--radius-sm);
    padding: 1rem;
    text-align: left;
}

.sust-principal {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.sust-dx,
.sust-simplifica {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

/* ============================================
   TEMA 2.8 - FRACCIONES PARCIALES
   ============================================ */

/* Casos de fracciones parciales */
.casos-fp {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.caso-fp {
    background: white;
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.caso-fp-tipo {
    font-size: 0.8rem;
    color: var(--primary);
    font-weight: 600;
}

.caso-fp-ejemplo {
    font-size: 0.9rem;
    color: var(--text-dark);
}

/* Resultado de fracciones parciales */
.fp-resultado {
    background: white;
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
}

.fp-original,
.fp-factorizado,
.fp-descompuesto {
    margin-bottom: 0.5rem;
}

.fp-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.fp-formula {
    font-size: 1.1rem;
    color: var(--text-dark);
}

.fp-flecha {
    color: var(--primary);
    font-size: 1.25rem;
    margin: 0.5rem 0;
}

.fp-descompuesto .fp-formula {
    color: var(--primary);
    font-weight: 600;
}

/* ============================================
   TEMA 2.9 - SUSTITUCIÓN DE WEIERSTRASS
   ============================================ */

/* Fórmulas de Weierstrass */
.weierstrass-formulas {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.weier-formula {
    background: white;
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.weier-izq {
    min-width: 60px;
    font-weight: 600;
    color: var(--text-dark);
}

.weier-igual {
    color: var(--text-muted);
}

.weier-der {
    color: var(--primary);
    font-weight: 600;
}

/* Comparación de Weierstrass */
.weier-comparacion {
    background: white;
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.weier-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-radius: var(--radius-sm);
}

.weier-nombre {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.weier-valor {
    font-weight: 700;
    color: var(--text-dark);
    font-family: 'Courier New', monospace;
}

.weier-valor.weier-destacado {
    color: var(--primary);
    background: var(--bg-mate);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

/* ============================================
   TEMA 2.10 - RACIONALIZACIÓN
   ============================================ */

/* Resultado de racionalización */
.racion-resultado {
    background: white;
    border-radius: var(--radius-md);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.racion-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.racion-item:last-of-type {
    border-bottom: none;
}

.racion-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    min-width: 100px;
}

.racion-valor {
    font-size: 1.1rem;
    color: var(--text-dark);
}

.racion-nota {
    background: #eff6ff;
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--primary);
    margin-top: 0.5rem;
}

.racion-nota i {
    color: var(--primary);
}

/* ============================================
   RESPONSIVE PARTE 2-B
   ============================================ */

@media (max-width: 991.98px) {
    .caso-trigsub {
        text-align: center;
    }
    
    .trigsub-sustitucion {
        text-align: center;
    }
    
    .weier-formula {
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .integral-item {
        flex-direction: column;
        text-align: center;
        gap: 0.25rem;
    }
    
    .integral-izq {
        min-width: unset;
    }
    
    .hiper-card,
    .caso-fp,
    .weier-formula {
        text-align: center;
    }
    
    .weier-fila {
        flex-direction: column;
        text-align: center;
        gap: 0.25rem;
    }
    
    .racion-item {
        flex-direction: column;
        text-align: center;
        gap: 0.25rem;
    }
    
    .racion-label {
        min-width: unset;
    }
    
    .trigsub-expresion {
        font-size: 1.2rem;
    }
    
    .caso-expresion {
        font-size: 1rem;
    }
}/* ============================================
   TEMA 2.11 - INTEGRALES BINOMIAS
   ============================================ */

/* Condiciones de Chebyshev */
.condiciones-chebyshev {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.condicion-cheby {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: white;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
}

.condicion-num {
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.condicion-texto {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.condicion-texto strong {
    color: var(--text-dark);
}

.condicion-texto span {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Inputs de Chebyshev */
.cheby-inputs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cheby-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cheby-input-group label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Resultado de Chebyshev */
.cheby-resultado {
    background: white;
    border-radius: var(--radius-md);
    padding: 1.5rem;
}

.cheby-integral {
    font-size: 1.25rem;
    text-align: center;
    padding: 1rem;
    background: #f8fafc;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.cheby-verificacion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.cheby-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #fee2e2;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: #991b1b;
}

.cheby-check i {
    font-size: 1.1rem;
}

.cheby-check.cheby-ok {
    background: #dcfce7;
    color: #166534;
}

.cheby-conclusion {
    padding: 1rem;
    border-radius: var(--radius-sm);
    text-align: center;
}

.cheby-conclusion.cheby-solucionable {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
}

.cheby-conclusion.cheby-no-solucionable {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
}

.cheby-conclusion p {
    margin: 0.5rem 0 0 0;
    font-size: 0.9rem;
}

/* ============================================
   TEMA 2.12 - SUSTITUCIÓN DE EULER
   ============================================ */

/* Casos de Euler */
.casos-euler {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.caso-euler {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: white;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
}

.caso-euler-num {
    width: 28px;
    height: 28px;
    background: var(--accent-orange);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.caso-euler-texto {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.caso-euler-texto strong {
    color: var(--text-dark);
    font-size: 0.9rem;
}

.caso-euler-texto span {
    font-size: 0.85rem;
    color: var(--primary);
}

/* Inputs de Euler */
.euler-inputs {
    background: white;
    border-radius: var(--radius-md);
    padding: 1.5rem;
}

.euler-coef-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.euler-coef label {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.25rem;
}

/* Resultado de Euler */
.euler-resultado {
    background: white;
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
}

.euler-expresion {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.euler-caso {
    background: #f8fafc;
    border-radius: var(--radius-sm);
    padding: 1rem;
}

.euler-caso-badge {
    display: inline-block;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.euler-caso-badge.caso-1 {
    background: #dbeafe;
    color: #1e40af;
}

.euler-caso-badge.caso-2 {
    background: #dcfce7;
    color: #166534;
}

.euler-caso-badge.caso-3 {
    background: #fef3c7;
    color: #92400e;
}

.euler-caso-badge.caso-ninguno {
    background: #fee2e2;
    color: #991b1b;
}

.euler-sustitucion {
    text-align: left;
}

.euler-sustitucion strong {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.euler-sustitucion span {
    display: block;
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-top: 0.25rem;
}

/* ============================================
   TEMAS 2.13 y 2.14 - MÉTODOS NUMÉRICOS
   ============================================ */

/* Controles de métodos numéricos */
.metodo-controles {
    background: white;
    border-radius: var(--radius-md);
    padding: 1.5rem;
    height: 100%;
}

.metodo-n-valor {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    margin-top: 0.5rem;
}

.metodo-resultados {
    border-top: 1px solid #e2e8f0;
    padding-top: 1rem;
}

.metodo-resultado {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.metodo-resultado .label {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.metodo-resultado .valor {
    font-weight: 700;
    color: var(--primary);
}

.metodo-resultado .valor.exacta {
    color: var(--accent-green);
}

.metodo-resultado .valor.error {
    color: var(--accent-red);
}

/* Info de métodos numéricos */
.metodo-numerico-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: white;
    padding: 1rem;
    border-radius: var(--radius-sm);
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-label {
    font-weight: 700;
    color: var(--primary);
    min-width: 60px;
}

.info-valor {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Comparación de métodos */
.comparacion-metodos {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.comp-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-radius: var(--radius-sm);
}

.comp-item.comp-mejor {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}

.comp-metodo {
    font-weight: 600;
    color: var(--text-dark);
}

.comp-error {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.comp-item.comp-mejor .comp-error {
    color: #166534;
    font-weight: 600;
}

/* Patrón de Simpson */
.simpson-patron {
    background: white;
    padding: 1rem;
    border-radius: var(--radius-sm);
    text-align: center;
}

.patron-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.patron-numeros {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.coef {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
}

.coef.coef-4 {
    background: var(--primary);
    color: white;
}

.coef.coef-2 {
    background: var(--accent-orange);
    color: white;
}

/* Comparación de resultados Simpson */
.comparacion-resultados {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-top: 1px solid #e2e8f0;
    padding-top: 1rem;
}

.comp-resultado {
    background: #f8fafc;
    border-radius: var(--radius-sm);
    padding: 0.75rem;
}

.comp-resultado.comp-mejor {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}

.comp-resultado.comp-exacto {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.comp-titulo {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.comp-valor {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
}

.comp-resultado .comp-error {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.comp-resultado.comp-mejor .comp-titulo,
.comp-resultado.comp-mejor .comp-error {
    color: #166534;
}

/* ============================================
   TEMA 2.15 - CUADRATURA DE GAUSS
   ============================================ */

/* Tabla de Gauss */
.gauss-tabla {
    background: white;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-top: 0.5rem;
}

.gauss-titulo,
.gauss-nodo-titulo {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.gauss-valores {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    padding: 0.25rem 0;
}

/* Nodos de Gauss */
.gauss-nodos {
    background: white;
    border-radius: var(--radius-md);
    padding: 1rem;
}

.gauss-nodo-lista {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gauss-nodo-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.gauss-nodo-x {
    color: var(--primary);
    font-weight: 600;
}

.gauss-nodo-w {
    color: var(--text-muted);
}

/* Comparación de Gauss */
.gauss-comparacion {
    background: white;
    border-radius: var(--radius-md);
    padding: 1.5rem;
}

.gauss-funcion {
    text-align: center;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.gauss-tabla-comp {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gauss-fila {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr 1fr;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    align-items: center;
}

.gauss-fila.gauss-header {
    background: var(--bg-dark);
    color: white;
    font-weight: 600;
}

.gauss-fila.gauss-mejor {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    font-weight: 600;
}

.gauss-fila.gauss-exacto {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

/* Nota importante */
.nota-importante {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.nota-importante h5 {
    color: #92400e;
    margin-bottom: 0.75rem;
}

/* ============================================
   RESPONSIVE PARTE 2-C
   ============================================ */

@media (max-width: 991.98px) {
    .euler-coef-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .gauss-fila {
        grid-template-columns: 1fr 1fr;
        gap: 0.25rem;
    }
}

@media (max-width: 767.98px) {
    .condicion-cheby,
    .caso-euler {
        flex-direction: column;
        text-align: center;
    }
    
    .euler-coef-grid {
        grid-template-columns: 1fr;
    }
    
    .gauss-fila {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .gauss-fila.gauss-header {
        display: none;
    }
    
    .gauss-valores {
        flex-direction: column;
        text-align: center;
        gap: 0.25rem;
    }
    
    .patron-numeros .coef {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
}