/* ============================================================================
 * # MISTENNIS.ONLINE - CSS Personalizado v6.0 (Versión Estable y Completa)
 * ============================================================================ */

/* ============================================================================
 * # PALETA DE COLORES OFICIAL (Referencia)
 * ============================================================================ */
/* --mt-color-primario: #19526e; (Azul Petróleo Oscuro)
    --mt-color-acento: #0ce8f6; (Cyan Brillante)
    --mt-color-exito: #82f000; (Verde Lima)
    --mt-color-blanco: #ffffff;
    --mt-color-texto-secundario: #6c757d;
    --mt-color-bordes: #dee2e6;
    --mt-color-fondo-claro: #f0fadc; (Verde muy claro para filas de tabla)
*/

/* ============================================================================
 * # CONTENEDOR Y LAYOUT (MÁXIMA ESPECIFICIDAD)
 * ============================================================================ */
html body .user-content .mt-page-container {
    font-family: 'Poppins', sans-serif !important;
    max-width: 1100px !important;
    margin: 40px auto !important;
    padding: 0 1rem !important;
    box-sizing: border-box;
}
html body .user-content .mt-page-container--full-width {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ============================================================================
 * # ESTILOS BASE DE TEXTO
 * ============================================================================ */
html body .user-content .mt-page-container h1,
html body .user-content .mt-page-container h2,
html body .user-content .mt-page-container h3,
html body .user-content .mt-page-container h4 {
    color: #19526e !important;
    font-weight: 700 !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1rem !important;
    padding-left: 1rem;
    padding-right: 1rem;
}
html body .user-content .mt-page-container h1 { font-size: 2.2rem !important; text-align: center !important; margin-top: 0 !important; }
html body .user-content .mt-page-container h2 { font-size: 1.8rem !important; border-bottom: 2px solid #dee2e6 !important; padding-bottom: 0.5rem !important; text-align: center; }
html body .user-content .mt-page-container h3 { font-size: 1.4rem !important; }
html body .user-content .mt-page-container h4 { font-size: 1.2rem !important; margin-bottom: 0.5rem !important; }
html body .user-content .mt-page-container p { color: #6c757d !important; line-height: 1.7 !important; font-size: 1.1rem !important; padding-left: 1rem; padding-right: 1rem; }
html body .user-content .mt-page-container ul { padding-left: 3rem; margin-bottom: 1rem; }
html body .user-content .mt-page-container li { margin-bottom: 0.5rem; }
html body .user-content .mt-page-container hr { border: 0; border-top: 1px solid #eee; margin: 2.5rem 0; }

html body .user-content .mt-hashtag {
    color: #82f000 !important;
    font-weight: 600 !important;
}

/* ============================================================================
 * # COMPONENTES
 * ============================================================================ */

/* --- Tarjetas (Cards) --- */
html body .user-content .mt-card {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    text-align: left !important;
    position: relative !important;
    margin: 0 0 1rem 0;
}
html body .user-content .mt-card--accent-border { border-left: 5px solid #82f000 !important; }
html body .user-content .mt-card h3, html body .user-content .mt-card h4 { margin-top: 0 !important; padding: 0 !important; }
html body .user-content .mt-card p { padding: 0 !important; font-size: 1rem !important; }
html body .user-content .mt-card__icon { font-size: 2.5rem !important; margin-bottom: 1rem !important; line-height: 1 !important; }

/* --- Tablas --- */
html body .user-content .mt-table {
    width: calc(100% - 2rem) !important;
    margin: 0 1rem !important;
    border-collapse: collapse !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}
html body .user-content .mt-table th,
html body .user-content .mt-table td { padding: 14px !important; text-align: center !important; border-bottom: 1px solid #dee2e6 !important; }
html body .user-content .mt-table thead { background-color: #19526e !important; color: #ffffff !important; }
html body .user-content .mt-table tbody tr { background-color: #ffffff !important; }
html body .user-content .mt-table tbody tr:nth-child(even) { background-color: #f0fadc !important; }

/* --- Grilla --- */
html body .user-content .mt-grid { display: grid !important; gap: 1rem !important; grid-template-columns: 1fr !important; padding: 0 1rem; }
@media (min-width: 768px) {
    html body .user-content .mt-grid--2-cols,
    html body .user-content .mt-grid--4-cols { grid-template-columns: repeat(2, 1fr) !important; gap: 2rem !important; }
    html body .user-content .mt-grid--3-cols { grid-template-columns: repeat(3, 1fr) !important; gap: 2rem !important; }
}
@media (min-width: 992px) {
    html body .user-content .mt-grid--4-cols { grid-template-columns: repeat(4, 1fr) !important; }
}

/* --- Número de Paso --- */
html body .user-content .mt-step-number {
    position: absolute !important; top: -15px !important; left: -15px !important;
    width: 45px !important; height: 45px !important;
    background-color: #0ce8f6 !important;
    color: #19526e !important;
    font-size: 1.5rem !important; font-weight: 700 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 50% !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border: 2px solid #ffffff;
}

/* --- Botones --- */
.user-content .mt-btn {
    display: inline-block !important; padding: 12px 30px !important; font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important; text-transform: uppercase !important; text-decoration: none !important;
    cursor: pointer !important; border: none !important; border-radius: 50px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.user-content .mt-btn--accent { background-color: #82f000 !important; color: #19526e !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; }
.user-content .mt-btn--primary { background-color: #19526e !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; }
.user-content .mt-btn:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important; }


/* --- Secciones --- */
.user-content .mt-section--dark {
    background-color: #19526e !important; border-radius: 16px !important;
    color: #ffffff !important; padding: 3rem 1.5rem !important; margin-top: 2rem !important;
}
html body .user-content .mt-page-container .mt-section--dark h1,
html body .user-content .mt-page-container .mt-section--dark h2,
html body .user-content .mt-page-container .mt-section--dark h3 {
    color: #ffffff !important;
    border-bottom: none !important;
}
html body .user-content .mt-page-container .mt-section--dark p { color: #f8f9fa !important; }

/* --- Componente Tarjeta de Nivel --- */
html body .user-content .mt-page-container .mt-section--dark .mt-card--tier { text-align: center !important; }
html body .user-content .mt-page-container .mt-section--dark .mt-card--tier .tier__level { font-size: 1.2rem !important; font-weight: 700 !important; color: #19526e !important; margin-bottom: 1rem !important; }
html body .user-content .mt-page-container .mt-section--dark .mt-card--tier .tier__metric { font-size: 0.9em !important; text-transform: uppercase !important; margin-bottom: 0 !important; color: #6c757d !important; }
html body .user-content .mt-page-container .mt-section--dark .mt-card--tier .tier__meta { font-size: 1em !important; margin-top: 0.5rem !important; margin-bottom: 1rem !important; color: #6c757d !important; }
html body .user-content .mt-page-container .mt-section--dark .mt-card--tier .tier__label { font-size: 0.9em !important; text-transform: uppercase !important; margin-bottom: 0.25rem !important; color: #6c757d !important; }
html body .user-content .mt-page-container .mt-section--dark .mt-card--tier .tier__value { font-size: 2.2em !important; font-weight: bold !important; margin-top: 0 !important; color: #82f000 !important; line-height: 1.1 !important; }

/* --- Listas de Producto --- */
html body .user-content .mt-product-details,
html body .user-content .mt-list--arrow { list-style: none !important; padding-left: 1rem !important; }
html body .user-content .mt-product-details li,
html body .user-content .mt-list--arrow li { display: flex !important; align-items: flex-start !important; margin-bottom: 0.75rem !important; font-size: 1.1rem !important; }
html body .user-content .mt-product-details li::before { content: '✅'; margin-right: 0.75rem; font-size: 1rem; margin-top: 0.2rem; }
html body .user-content .mt-list--arrow li::before { content: '➡️'; margin-right: 0.75rem; font-size: 1rem; margin-top: 0.2rem; }

/* --- Componente Barra de Confianza Vistosa --- */
html body .user-content .mt-trust-section {
    background-color: #f8f9fa !important;
    border-radius: 16px !important;
    padding: 2rem 1.5rem !important;
    margin-top: 3rem !important;
}
html body .user-content .mt-trust-section .mt-card--trust {
    background-color: #ffffff !important;
    border: 1px solid #eef0f2 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
html body .user-content .mt-trust-section .mt-card--trust:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}
/* CORRECCIÓN: Se añadió el prefijo de alta especificidad a esta regla */
html body .user-content .mt-trust-section .trust-icon {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 1rem !important;
}


/* ============================================================================
 * # CORRECCIONES DE ESPECIFICIDAD PARA FICHA DE PRODUCTO
 * ============================================================================ */
.product-description .user-content h3 {
    border: none !important; background: none !important; padding: 0 !important;
    text-align: left !important; border-bottom: none !important; font-size: 1.4rem !important;
    color: #19526e !important; font-weight: 700 !important;
}
.product-description .user-content .mt-product-details,
.product-description .user-content .mt-list--arrow {
    list-style: none !important; padding-left: 0 !important;
}
.product-description .user-content .mt-product-details li,
.product-description .user-content .mt-list--arrow li {
    display: flex !important; align-items: flex-start !important;
    margin-bottom: 0.75rem !important; font-size: 1.1rem !important;
    list-style-type: none !important;
}
.product-description .user-content .mt-product-details li::before {
    content: '✅' !important; margin-right: 0.75rem !important;
    font-size: 1rem !important; margin-top: 0.2rem !important;
}
.product-description .user-content .mt-list--arrow li::before {
    content: '➡️' !important; margin-right: 0.75rem !important;
    font-size: 1rem !important; margin-top: 0.2rem !important;
}