@import url("themes/_tokens.css");
/* Archivos por marca (variables y overrides mínimos) */
@import url("themes/mdc.css");
@import url("themes/cafe.css");
@import url("themes/mabe.css");
@import url("themes/geprofile.css");
@import url("themes/monogram.css");
@import url("themes/haier.css");
@import url("themes/iomabe.css");
/* Tema por defecto - MDC */
.theme-mdc {
    --primary-color: #121110; /* MDC Granite Black */
    --secondary-color: #2C4051; /* MDC Graphite Blue */
    --tertiary-color: #5A5142; /* MDC Mute Caoba */
    --accent-color: #2A2928; /* 90% del PANTONE BLACK 3 C */
    --text-color: #2A2928; /* Color para textos */
    --bg-color: #FFFFFF;
    --bg-secondary: rgba(18, 17, 16, 0.75); /* 75% del color primario */
    --bg-tertiary: rgba(18, 17, 16, 0.1); /* 10% del color primario */
    --mdc-font-primary: 'Acta', 'Klarheit Kurrent', sans-serif;
    --mdc-font-secondary: 'Klarheit Kurrent', sans-serif;
    font-family: var(--mdc-font-primary);
}

/* === ESTILOS COMUNES PARA TODOS LOS TEMAS === */

/* Reglas globales para z-index - ELIMINADAS para solucionar problema con modales */
/* Se eliminó la regla que aplicaba z-index: 1 !important a .nav-tabs, .tab-content, etc. */

/* Estilos base para elementos de formulario - aplicados a todos los temas */
/* [class*="theme-"] .form-control,
[class*="theme-"] .form-select,
[class*="theme-"] input,
[class*="theme-"] button,
[class*="theme-"] .btn {
    color: var(--text-color);
} */

/* Botones secundarios comunes */
[class*="theme-"] .btn-light-secondary {
    background-color: var(--secondary-color);
    color: white;
}

[class*="theme-"] .btn-light-secondary:hover {
    background-color: var(--primary-color);
}

/* Inputs de búsqueda comunes */
[class*="theme-"] [class*="search-input"] {
    background-color: transparent;
    color: var(--text-color);
}

/* Botones de menú comunes */
[class*="theme-"] [class*="menu-btn"] {
    background-color: transparent;
    border-radius: 50%;
    padding: 8px;
}

/* Acciones/botones comunes */
[class*="theme-"] [class*="actions"] {
    align-items: center;
}

/* Estilos generales para navbar */
.navbar-brand img {
    max-width: 194px;
    /* min-height: 62px; */
    width: auto;
    height: auto;
}

/* Transiciones suaves */
.navbar,
.btn-light-secondary,
.nav-link {
    transition: all 0.3s ease;
}

/* Remover el fondo global que puede estar causando problemas */
.page {
    background-color: transparent;
}

/* Debug styles */
.debug-font-sample {
    border: 2px dashed #ddd;
    padding: 10px;
    margin: 5px 0;
    background-color: #f8f9fa;
}

.debug-font-sample:hover {
    border-color: #007bff;
    background-color: #e9ecef;
}

/* Banners para todos los temas */
/* .cafe-banner,
.mabe-banner,
.mdc-banner {
    height: 260px;
    object-fit: cover;
} */

/* Aplicar fuente MDC a todos los elementos del tema */
.theme-mdc,
.theme-mdc *{
    font-family: var(--font-primary);
}

/* Clases de fuente específicas para MDC */
.theme-mdc .mdc-font {
    font-family: var(--mdc-font-primary);
    color: var(--text-color);
    font-size: 17px;
}

.theme-mdc h1,
.theme-mdc h2,
.theme-mdc h3,
.theme-mdc h4,
.theme-mdc h5,
.theme-mdc h6 {
    font-family: var(--font-primary);
    color: var(--primary-color);
    font-weight: 600;
}

/* Elementos de formulario para MDC */
.theme-mdc .form-control,
.theme-mdc .form-select,
.theme-mdc input,
.theme-mdc button,
.theme-mdc .btn {
    font-family: var(--font-primary);
}

/* === BOTONES DINÁMICOS DEL COMPARADOR === */
/* Ahora estandarizados via _tokens.css (.btn-compare / .btn-cancel) y variables por tema */


.theme-mabe2 .btn-cancelar-mabe2 {
    background-color: transparent !important;
    color: var(--text-color) !important;
    border: 1.5px solid var(--text-color) !important;
    border-radius: 8px !important;
    font-family: var(--mdc-font-primary);
    font-weight: 600;
}

.theme-mabe2 .btn-cancelar-mabe2:hover {
    background-color: var(--text-color) !important;
    color: white !important;
    border-color: var(--text-color) !important;
}





/* Navbar principal para MDC */
.theme-mdc .navbar {
  
    border-bottom: 3px solid var(--secondary-color);
    background-color: transparent  ;
}

/* Enlaces de navegación */
.theme-mdc .nav-link {
    color: var(--text-color) ;
    font-family: var(--font-secondary);
    font-weight: 600  ;
}

.theme-mdc .nav-link:hover {
    color: var(--tertiary-color);
}

/* Buscador */
.theme-mdc .mdc-search {
    background-color: var(--bg-tertiary);
    border-radius: 25px;
    padding: 5px;
}

.theme-mdc .mdc-search-input {
    color: var(--text-color);
}

.theme-mdc .mdc-search-input::placeholder {
    color: var(--bg-secondary);
}

.theme-mdc .mdc-search-icon {
    color: white;
}

/* Acciones/botones MDC específicos */
.theme-mdc .mdc-menu-btn {
    border: 2px solid white;
}

.theme-mdc .mdc-menu-btn:hover {
    background-color: white;
    color: var(--primary-color)  ;
}

.theme-mdc .mdc-menu-btn i {
    color: white  ;
}

.theme-mdc .mdc-menu-btn:hover i {
    color: var(--primary-color)  ;
}

/* Banner MDC */
.mdc-banner {
    height: 260px;
    object-fit: cover;
}

/* Tema Café */
.theme-cafe {
    --primary-color: #8B4513;
    --secondary-color: #D2691E;
    --accent-color: #CD853F;
    --text-color: #6C6158;
    --bg-color: #FFF8DC;
    --cafe-font-primary: #004B3D;
    --cafe-selected: #B65328;
}

/* Aplicar fuentes Café a todos los elementos del tema */
.theme-cafe .form-select {
    font-family: var(--font-secondary);
}

/* Fuentes específicas para elementos secundarios */
.theme-cafe .cafe-font-2,
.theme-cafe .cafe-font-3,
.theme-cafe select.cafe-font-2,
.theme-cafe .input-group input,
.theme-cafe .form-select,
.theme-cafe .btn,
.theme-cafe .chip {
    font-family: 'Proxima Nova', Arial, Helvetica, sans-serif;
}

.theme-cafe .cafe-font-2 {
    color: var(--cafe-font-primary);
    font-size: 17px;
}

.theme-cafe .cafe-font-3 {
    color: #6C6158  ;
    font-size: 14px;
}

/* Títulos y encabezados usan Adobe Garamond */
.theme-cafe h1,
.theme-cafe h2,
.theme-cafe h3,
.theme-cafe h4,
.theme-cafe h5,
.theme-cafe h6,
.theme-cafe .cafe-font {
    font-family: var(--font-primary);
    color: var(--cafe-font-primary)  ;
}
/* Enlaces usan Proxima Nova */
.theme-cafe .nav-link{
    font-family: var(--font-secondary);
}
/* Elementos de formulario y controles para Café */
.theme-cafe .form-control,
.theme-cafe .form-select,
.theme-cafe input,
.theme-cafe button,
.theme-cafe .btn {
    font-family: var(--font-secondary);
}

/* Elementos específicos del producto card */
.theme-cafe .card-title {
    font-family: var(--font-primary);
    color: var(--cafe-font-primary)  ;
}

.theme-cafe .form-check-label {
    font-family: var(--font-secondary);
    color: #6C6158  ;
    font-size: 14px;
}

/* Botones del tema Café */
.theme-cafe .btn-success,
.theme-cafe .compare-button {
    background-color: var(--cafe-font-primary)  ;
    border-color: var(--cafe-font-primary)  ;
    color: white  ;
}

.theme-cafe .btn-success:hover,
.theme-cafe .compare-button:hover {
    background-color: var(--cafe-selected)  ;
    border-color: var(--cafe-selected)  ;
}

.theme-cafe .btn-outline-secondary {
    border-color: #6C6158  ;
    color: #6C6158  ;
}

.theme-cafe .btn-outline-secondary:hover {
    background-color: #6C6158  ;
    color: white  ;
}

/* Checkbox personalizado para Café */
.theme-cafe .form-check-input:checked {
    background-color: var(--cafe-selected)  ;
    border-color: var(--cafe-selected)  ;
}

/* Placeholder text */
.theme-cafe input::placeholder,
.theme-cafe .form-control::placeholder {
    color: #6C6158  ;
}

/* Reglas por marca del comparador eliminadas: usan tokens globales */



/* Navbar principal para Café */
.theme-cafe .navbar {
    background-color: transparent   ;
}

/* Enlaces de navegación */
.theme-cafe.navbar .nav-link,
.theme-cafe .nav-link {
    color: var(--text-color)   ;
    font-weight: 600   ;
}

.theme-cafe.navbar .nav-link:hover,
.theme-cafe .nav-link:hover {
    color: var(--primary-color);
}

/* Buscador */
.theme-cafe .cafe-search {
    padding: 5px;
}

.theme-cafe .cafe-search-input {
    color: var(--text-color);
}

.theme-cafe .cafe-search-input::placeholder {
    color: #8B7355;
}

.theme-cafe .cafe-search-icon {
    color: var(--primary-color);
}

/* Acciones/botones Café específicos */
.theme-cafe .cafe-menu-btn:hover {
    color: white;
}

.theme-cafe .cafe-menu-btn i {
    color: var(--primary-color)!important;
}

.theme-cafe .cafe-menu-btn:hover i {
    color: white  ;
}

/* TEMAS DE MABE*/
.theme-mabe {
    --primary-color: #00526B;
    --secondary-color: #0066CC;
    --tertiary-color: #A1DCFF;
    --accent-color: #4A90E2;
    --text-color: #2D3234;
    --bg-color: #F8F9FA;
    --mabe-font-primary: 'Neue Frutiger World', 'Frutiger', Arial, Helvetica, sans-serif;
    --mabe-font-secondary: 'Proxima Nova Light', Arial, Helvetica, sans-serif;
        --mabe-orange: #FF8C00;
        --mabe-orange-dark: #E67A00;
}

/* Aplicar fuente Mabe a todos los elementos del tema */
.theme-mabe,
.theme-mabe * {
    font-family: var(--font-primary);
}

/* Clases de fuente específicas para Mabe */
.theme-mabe .mabe-font {
    font-family: var(--mabe-font-primary);
    color: var(--primary-color);
}

.theme-mabe .mabe-font-2 {
    font-family: var(--mabe-font-secondary);
    color: var(--text-color);
    font-size: 17px;
}

.theme-mabe h1,
.theme-mabe h2,
.theme-mabe h3,
.theme-mabe h4,
.theme-mabe h5,
.theme-mabe h6 {
    font-family: var(--font-primary);
    color: var(--primary-color);
    font-weight: 600;
}

/* Elementos de formulario para Mabe */
.theme-mabe .form-control,
.theme-mabe .form-select,
.theme-mabe input,
.theme-mabe button,
.theme-mabe .btn {
    font-family: var(--font-primary);
}

/* Reglas por marca del comparador eliminadas: usan tokens globales */



/* Navbar principal para Mabe */
.theme-mabe .navbar {
    background-color: transparent  ;
    border-bottom: 3px solid #0066CC  ;
}

/* Enlaces de navegación */
.theme-mabe .nav-link {
    color: #00526B  ;
    font-weight: 600  ;
}

.theme-mabe .nav-link:hover {
    filter: brightness(1.25);
}

/* Buscador */
.theme-mabe .mabe-search {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 25px;
    padding: 5px;
}

.theme-mabe .mabe-search-input {
    color: var(--text-color);
}

.theme-mabe .mabe-search-input::placeholder {
    color: #666;
}

.theme-mabe .mabe-search-icon {
    color: var(--primary-color);
}

/* Acciones/botones Mabe específicos */
.theme-mabe .mabe-menu-btn {
    border: 2px solid white;
}

.theme-mabe .mabe-menu-btn:hover {
    background-color: white;
    color: var(--primary-color)  ;
}

.theme-mabe .mabe-menu-btn i {
    color: white  ;
}

.theme-mabe .mabe-menu-btn:hover i {
    color: var(--primary-color)  ;
}




/* === CLASES DE FUENTE INDEPENDIENTES === */
/* Estas clases funcionan sin necesidad del contexto de tema */

/* MDC Fonts */
.mdc-font {
    font-family: 'Acta', 'Klarheit Kurrent', sans-serif !important;
    color: #2A2928;
    font-weight: 600;
}

.mdc-font-2 {
    font-family: 'Klarheit Kurrent', sans-serif !important;
    color: #2A2928;
    font-size: 17px;
}

.mdc-font-3 {
    font-family: 'Klarheit Kurrent', sans-serif !important;
    color: rgba(18, 17, 16, 0.75);
    font-size: 14px;
}

/* === CLASES DE BOTONES DINÁMICAS === */

/* MDC Button Classes */
.theme-mdc .btn-producto-primary-mdc {
    background-color: var(--text-color) !important;
    color: #FFFFFF !important;
    border: 1.5px solid var(--text-color) !important;
    border-radius: 8px !important;
}

.theme-mdc .btn-producto-primary-mdc:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.theme-mdc .btn-producto-secondary-mdc {
    background-color: #FFFFFF !important;
    color: var(--text-color) !important;
    border: 1.5px solid var(--text-color) !important;
    border-radius: 8px !important;
}

.theme-mdc .btn-producto-secondary-mdc:hover {
    background-color: var(--text-color) !important;
    color: #FFFFFF !important;
}

/* Café Button Classes */
.theme-cafe .btn-producto-primary-cafe {
    background-color: var(--cafe-font-primary) !important;
    color: #FFFFFF !important;
    border: 1.5px solid var(--cafe-font-primary) !important;
}

.theme-cafe .btn-producto-primary-cafe:hover {
    background-color: var(--cafe-selected) !important;
    border-color: var(--cafe-selected) !important;
}

.theme-cafe .btn-producto-secondary-cafe {
    background-color: #FFFFFF !important;
    color: var(--cafe-font-primary) !important;
    border: 1.5px solid var(--cafe-font-primary) !important;
    
}
  button.btn.w-100.btn-comparar-cafe.cafe-font-2 {
    background-color:  #0588AD!important;
    color: white !important;
    border: 2px solid #0588AD!important;
    border-radius: 8px !important;
}

.theme-cafe .btn-producto-secondary-cafe:hover {
    background-color: var(--cafe-font-primary) !important;
    color: #FFFFFF !important;
}

/* Mabe Button Classes */
.theme-mabe .btn-producto-primary-mabe {
    background-color: var(--mabe-orange) !important;
    color: #FFFFFF !important;
    border: 1.5px solid #FF8C00 !important;
    border-radius: 8px !important;
}

.theme-mabe .btn-producto-primary-mabe:hover {
    background-color: var(--mabe-orange-dark) !important;
    border-color: #E67A00 !important;
}

.theme-mabe .btn-producto-secondary-mabe {
    background-color: #FFFFFF !important;
    color: var(--primary-color) !important;
    border: 1.5px solid var(--primary-color) !important;
    border-radius: 8px !important;
}

.theme-mabe .btn-producto-secondary-mabe:hover {
    background-color: var(--primary-color) !important;
    color: #FFFFFF !important;
}

/* Café Fonts */
.cafe-font {
    font-family: 'Adobe Garamond', serif !important;
    color: #004B3D;
    font-weight: 600;
}

.cafe-font-2 {
    font-family: 'Proxima Nova', Arial, Helvetica, sans-serif !important;
    color: #004B3D;
    font-size: 17px;
}

.cafe-font-3 {
    font-family: 'Proxima Nova', Arial, Helvetica, sans-serif !important;
    color: #6C6158;
    font-size: 14px;
}

/* Mabe Fonts */
.mabe-font {
    font-family: 'Neue Frutiger World', 'Frutiger', Arial, Helvetica, sans-serif !important;
    color: #00526B!important;
    font-weight: 500;
}

.mabe-font-2 {
    font-family: 'Neue Frutiger World', 'Frutiger', Arial, Helvetica, sans-serif !important;
    color: var(--primary-color);
    font-size: 14px;
}
.mabe-font-muted {
    font-family: 'Neue Frutiger World', 'Frutiger', Arial, Helvetica, sans-serif !important;
    color: #7f848b !important;
    font-size: 14px;
}


.mabe-font-3 {
    font-family: 'Neue Frutiger World', 'Frutiger', Arial, Helvetica, sans-serif !important;
    color: #003876;
    font-size: 14px;
}

/* === ESTILOS PARA DETALLES DE PRODUCTO TABS === */

/* === ESTILOS BASE PARA BOTONES DE CARRUSEL === */
[class*="theme-"] .carousel-btn,
[class*="theme-"] .carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    border: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    pointer-events: all;
}

[class*="theme-"] .carousel-btn:hover,
[class*="theme-"] .carousel-nav:hover {
    background-color: #f8f9fa;
    border: none;
    outline: none;
}

[class*="theme-"] .carousel-btn-prev,
[class*="theme-"] .carousel-prev {
    left: 10px;
}

[class*="theme-"] .carousel-btn-next,
[class*="theme-"] .carousel-next {
    right: 10px;
}

[class*="theme-"] .carousel-btn i,
[class*="theme-"] .carousel-nav i {
    font-size: 2rem;
}

/* === BOTONES DE CARRUSEL ESPECÍFICOS POR TEMA === */

/* Tema MDC - Botones de Carrusel */
.theme-mdc .carousel-btn,
.theme-mdc .carousel-nav {
    background-color: white;
    border: none;
    color: var(--primary-color);
}

.theme-mdc .carousel-btn:hover,
.theme-mdc .carousel-nav:hover {
    background-color: var(--primary-color);
    border: none;
    color: white;
    transform: translateY(-50%) scale(1.05);
}

.theme-mdc .carousel-btn i,
.theme-mdc .carousel-nav i {
    color: inherit;
    font-weight: 600;
}

/* Tema Café - Botones de Carrusel */
.theme-cafe .carousel-btn,
.theme-cafe .carousel-nav {
    background-color: white;
    border: none;
    color: var(--cafe-font-primary);
}

.theme-cafe .carousel-btn:hover,
.theme-cafe .carousel-nav:hover {
    background-color: var(--cafe-selected);
    border: none;
    color: white;
    transform: translateY(-50%) scale(1.05);
}

.theme-cafe .carousel-btn i,
.theme-cafe .carousel-nav i {
    color: inherit;
    font-weight: 500;
}

/* Tema Mabe - Botones de Carrusel */
.theme-mabe .carousel-btn,
.theme-mabe .carousel-nav {
    background-color: white;
    border: none;
    border-radius: 8px;
    color: #0588AD;
    font-weight: bold;
}

.theme-mabe .carousel-btn:hover,
.theme-mabe .carousel-nav:hover {
    transform: translateY(-50%) scale(1.05);
}

.theme-mabe .carousel-btn i,
.theme-mabe .carousel-nav i {
    color: #0588AD;
    font-weight: 600;
}

/* Contenedores comunes */
[class*="theme-"] .datos-tecnicos-container {
    margin-top: 1rem;
}

[class*="theme-"] .datos-tecnicos-container .table {
    margin-bottom: 0;
}

[class*="theme-"] .contenido-tecnico-container {
    margin-top: 1rem;
    color:white;
}

[class*="theme-"] .list-group-item-action:hover {
    background-color: #f8f9fa;
}

/* Media queries comunes */
@media (max-width: 768px) {
    [class*="theme-"] .custom-tabs .nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    [class*="theme-"] .caracteristicas-carousel-container {
        padding: 0 40px;
    }

    [class*="theme-"] .caracteristica-slide {
        flex: 0 0 100%;
    }

    [class*="theme-"] .carousel-btn {
        width: 32px;
        height: 32px;
    }

    [class*="theme-"] .carousel-btn i {
        font-size: 1rem;
    }

    /* Ajustes específicos para cada tema en móvil */
    .theme-mdc .carousel-btn:hover {
        transform: translateY(-50%) scale(1.02);
    }
    
    .theme-cafe .carousel-btn:hover {
        transform: translateY(-50%) scale(1.02);
    }
    
    .theme-mabe .carousel-btn:hover {
        transform: translateY(-50%) scale(1.02);
    }
}

/* === ESTILOS ESPECÍFICOS POR TEMA === */

/* Tema MDC - Tabs */
.theme-mdc .custom-tabs .nav-link {
    color: var(--text-color);
}

.theme-mdc .custom-tabs .nav-link:hover {
    color: var(--tertiary-color);
}

.theme-mdc .custom-tabs .nav-link.active {
    color: var(--primary-color);
    font-weight: bold;
    background-color: transparent;
    border-bottom: 2px solid var(--primary-color);
}

.theme-mdc .datos-tecnicos-container .table th {
    background-color: var(--primary-color);
    color: white;
    border: none;
    font-weight: 600;
}

.theme-mdc .datos-tecnicos-container .table td {
    vertical-align: middle;
    border-color: #dee2e6;
}

.theme-mdc .datos-tecnicos-container > tbody > tr:nth-of-type(odd) > td {
    background-color: var(--bg-tertiary);
}

.theme-mdc .alert {
    border-radius: 0.5rem;
    border: none;
    background-color: var(--bg-tertiary);
    color: var(--text-color);
}

/* Tema Café - Tabs */
.theme-cafe .custom-tabs .nav-link {
    color: var(--text-color);
}

.theme-cafe .custom-tabs .nav-link:hover {
    color: var(--primary-color);
}

.theme-cafe .custom-tabs .nav-link.active {
    color: var(--cafe-selected);
    font-weight: bold;
    background-color: transparent;
    border-bottom: 2px solid var(--cafe-selected);
}

.theme-cafe .datos-tecnicos-container .table th {
    background-color: var(--cafe-font-primary);
    color: white;
    border: none;
    font-weight: 600;
}

.theme-cafe .datos-tecnicos-container .table td {
    vertical-align: middle;
    border-color: #dee2e6;
}

.theme-cafe .datos-tecnicos-container .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: #f8f9fa;
}

.theme-cafe .alert {
    border-radius: 0.5rem;
    border: none;
    background-color: #f4f1eb;
    color: var(--cafe-font-primary);
}

/* Tema Mabe - Tabs */
.theme-mabe .custom-tabs .nav-link {
    color: #7F848B;
    font-weight: bold;
    font-family: var(--mabe-font-primary);
}

.theme-mabe .custom-tabs .nav-link:hover {
    color: var(--accent-color);
}

.theme-mabe .custom-tabs .nav-link.active {
    color: var(--text-color);
    font-weight: bold;
    font-size: large;
    background-color: transparent;
}

.theme-mabe .datos-tecnicos-container .table th {
    background-color: var(--primary-color);
    color: white;
    border: none;
    font-weight: 600;
}

.theme-mabe .datos-tecnicos-container .table td {
    vertical-align: middle;
    border-color: #dee2e6;
}

.theme-mabe .datos-tecnicos-container .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: #f8f9fa;
}

.theme-mabe .alert {
    border-radius: 0.5rem;
    border: none;
    background-color: #e3f2fd;
    color: var(--primary-color);
}

/* === ESTILOS PARA TABLA COLAPSABLE DE ESPECIFICACIONES === */

/* Estilos base comunes para todos los temas */

[class*="theme-"] .specification-header h5 {
    font-weight: 600;
    margin: 0;
}

[class*="theme-"] .collapse-btn {
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;

}

[class*="theme-"] .collapse-btn:hover,
[class*="theme-"] .collapse-btn:focus,
[class*="theme-"] .collapse-btn:active {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Tabla de especificaciones común */
[class*="theme-"] .specifications-table {
    margin-bottom: 0;
    background-color: #fff;
    table-layout: fixed;
    width: 100%;
}

[class*="theme-"] .specifications-table tbody tr {
    border: none;
    background-color: transparent !important;
}

[class*="theme-"] .specifications-table tbody tr:nth-child(odd),
[class*="theme-"] .specifications-table tbody tr:nth-child(even) {
    background-color: transparent !important;
}

/* Transición suave para el colapso - SOLO para especificaciones, NO para navbar */
[class*="theme-"] .collapse:not(.show):not(.navbar-collapse) {
    opacity: 0;
}

[class*="theme-"] .collapse.show {
    opacity: 1;
}

/* === ESTILOS ESPECÍFICOS POR TEMA PARA TABLA COLAPSABLE === */

/* Tema MDC - Tabla Colapsable */
.theme-mdc .specification-header {
    background-color: var(--bg-tertiary);
    color: var(--primary-color);
}

.theme-mdc .specification-header:hover {
    background-color: rgba(18, 17, 16, 0.15);
}

.theme-mdc .specification-header h5 {
    color: var(--primary-color);
    font-family: var(--mdc-font-primary);
}

.theme-mdc .collapse-btn {
    color: var(--primary-color) !important;
}

.theme-mdc .specification-label {
    color: var(--primary-color);
    font-family: var(--mdc-font-secondary);
}

.theme-mdc .specification-value {
    color: var(--text-color);
    font-family: var(--mdc-font-secondary);
}

/* Tema Café - Tabla Colapsable */
.theme-cafe .specification-header {
    background-color: #E6F3F7;
    color: var(--cafe-font-primary);
}

.theme-cafe .specification-header:hover {
    background-color: #D1EAF0;
}

.theme-cafe .specification-header h5 {
    color: var(--cafe-font-primary);
    font-family: 'Proxima Nova', Arial, Helvetica, sans-serif;
}

.theme-cafe .collapse-btn {
    color: var(--cafe-font-primary) !important;
}

.theme-cafe .specification-label {
    color: var(--cafe-font-primary);
    font-family: 'Proxima Nova', Arial, Helvetica, sans-serif;
}

.theme-cafe .specification-value {
    color: #6C6158;
    font-family: 'Proxima Nova', Arial, Helvetica, sans-serif;
}

/* Tema Mabe - Tabla Colapsable */
.theme-mabe .specification-header {
    background-color:var(--primary-color);
    color: white;
}

.theme-mabe .specification-header:hover {
    background-color: #004A5E;
}

.theme-mabe .specification-header h5 {
    color: white;
    font-family: var(--mabe-font-primary);
}

.theme-mabe .collapse-btn {
    color: white !important;
    font-weight: bold;
}

.theme-mabe .specification-label {
    color: var(--primary-color);
    font-family: var(--mabe-font-primary);
}

.theme-mabe .specification-value {
    color: var(--text-color);
    font-family: var(--mabe-font-primary);
    
}

/* Ajustes responsivos para todos los temas */
@media (max-width: 768px) {
    [class*="theme-"] .specifications-table td {
        padding: 10px 0px;
        font-size: 15px;
    }
    
    [class*="theme-"] .specification-label {
        width: 50% !important;
    }
    
    [class*="theme-"] .specification-value {
        width: 50% !important;
    }
}

/* === ESTILOS PARA MODAL DE HIGHLIGHTS === */

/* Estilos base del modal */
[class*="theme-"] .modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10 px 30px rgba(0, 0, 0, 0.3);
}

[class*="theme-"] .modal-header {
    border-bottom: none;
    padding: 1rem 1rem 0.5rem;
    background: transparent;
}

[class*="theme-"] .btn-close {
    background: none;
    opacity: 0.8;
    font-size: 1.2rem;
}

[class*="theme-"] .btn-close:hover {
    opacity: 1;
}

/* Estilos específicos por tema para el modal */

/* Tema MDC - Modal */
.theme-mdc .highlight-modal-title {
    color: var(--primary-color);
    font-family: var(--mdc-font-primary);
}

.theme-mdc .highlight-modal-description {
    color: var(--text-color);
    font-family: var(--mdc-font-secondary);
}

.theme-mdc .btn-close {
    color: var(--primary-color);
}

/* Tema Café - Modal */
.theme-cafe .highlight-modal-title {
    color: var(--cafe-font-primary);
    font-family: 'Adobe Garamond', serif;
}

.theme-cafe .highlight-modal-description {
    color: #6C6158;
    font-family: 'Proxima Nova', Arial, Helvetica, sans-serif;
}

.theme-cafe .btn-close {
    color: var(--cafe-font-primary);
}

/* Tema Mabe - Modal */
.theme-mabe .highlight-modal-title {
    color: var(--primary-color);
    font-family: var(--mabe-font-primary);
}

.theme-mabe .highlight-modal-description {
    color: var(--text-color);
    font-family: var(--mabe-font-primary);
}

.theme-mabe .btn-close {
    color: var(--primary-color);
}