/* _content/MabeWeb/Components/Layout/ActualizarImagenes/ActualizarImagenes.razor.rz.scp.css */
/* Estilos para ActualizarImagenes con Bootstrap siguiendo el patrón de modales existentes */

/* Personalización del botón principal usando Design Tokens */
.btn-outline-warning[b-p2pcbs6lyo] {
    border-radius: 0 !important;
    font-family: var(--font-secondary) !important;
    border-color: var(--warning-color, #f39c12);
    color: var(--warning-color, #f39c12) !important;
    background-color: white;
    transition: all var(--transition-fast);
}

.btn-outline-warning:hover[b-p2pcbs6lyo] {
    background-color: var(--warning-color, #f39c12);
    border-color: var(--warning-color, #f39c12);
    box-shadow: var(--elevation-sm);
    color: white !important;
}

/* Área de drag & drop personalizada */
.drop-zone[b-p2pcbs6lyo] {
    border: 2px dashed var(--mabe-neutral-300);
    border-radius: var(--border-radius-md, 8px);
    transition: all var(--transition-fast);
    background-color: var(--mabe-neutral-50);
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drop-zone:hover[b-p2pcbs6lyo] {
    border-color: var(--mabe-primary-400);
    background-color: var(--mabe-primary-50);
    transform: translateY(-2px);
    box-shadow: var(--elevation-sm);
}

.drop-zone.drag-over[b-p2pcbs6lyo] {
    border-color: var(--mabe-primary-500) !important;
    background-color: var(--mabe-primary-100) !important;
    border-style: solid !important;
    box-shadow: var(--elevation-md);
}

/* Archivos seleccionados */
.selected-files[b-p2pcbs6lyo] {
    text-align: left;
    padding: 1rem;
}

.selected-files .text-truncate[b-p2pcbs6lyo] {
    max-width: 200px;
    margin: 0 auto;
}

/* Mapeo de archivos */
.file-mapping[b-p2pcbs6lyo] {
    background-color: var(--mabe-neutral-50);
    border: 1px solid var(--mabe-neutral-200) !important;
    transition: all var(--transition-fast);
}

.file-mapping:hover[b-p2pcbs6lyo] {
    background-color: var(--mabe-neutral-100);
    border-color: var(--mabe-primary-300) !important;
}

.file-mapping .form-select[b-p2pcbs6lyo] {
    font-size: 0.75rem;
    border-radius: var(--border-radius-sm, 4px);
    border-color: var(--mabe-neutral-300);
}

.file-mapping .form-select:focus[b-p2pcbs6lyo] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
}

.file-mapping .fw-bold[b-p2pcbs6lyo] {
    color: var(--primary-color);
    font-size: 0.8rem;
}

.file-mapping .text-muted[b-p2pcbs6lyo] {
    font-size: 0.7rem;
}

/* Personalización de cards por tipo de imagen */
.card-header.bg-primary[b-p2pcbs6lyo] {
    background-color: var(--primary-color) !important;
}

.card-header.bg-success[b-p2pcbs6lyo] {
    background-color: var(--success-color, #27ae60) !important;
}

.card-header.bg-info[b-p2pcbs6lyo] {
    background-color: var(--info-color, #3498db) !important;
}

.card-header.bg-tertiary[b-p2pcbs6lyo] {
    background-color: var(--tertiary-color, #5A5142) !important;
}

/* Botones por tipo */
.btn-outline-primary.btn-sm[b-p2pcbs6lyo] {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transition: all var(--transition-fast);
}

.btn-outline-primary.btn-sm:hover[b-p2pcbs6lyo] {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.btn-outline-tertiary.btn-sm[b-p2pcbs6lyo] {
    border-color: var(--tertiary-color, #5A5142);
    color: var(--tertiary-color, #5A5142);
    transition: all var(--transition-fast);
}

.btn-outline-tertiary.btn-sm:hover[b-p2pcbs6lyo] {
    background-color: var(--tertiary-color, #5A5142);
    border-color: var(--tertiary-color, #5A5142);
    color: white;
}

.btn-outline-success.btn-sm[b-p2pcbs6lyo] {
    border-color: var(--success-color, #27ae60);
    color: var(--success-color, #27ae60);
    transition: all var(--transition-fast);
}

.btn-outline-success.btn-sm:hover[b-p2pcbs6lyo] {
    background-color: var(--success-color, #27ae60);
    border-color: var(--success-color, #27ae60);
    color: white;
}

.btn-outline-info.btn-sm[b-p2pcbs6lyo] {
    border-color: var(--info-color, #3498db);
    color: var(--info-color, #3498db);
    transition: all var(--transition-fast);
}

.btn-outline-info.btn-sm:hover[b-p2pcbs6lyo] {
    background-color: var(--info-color, #3498db);
    border-color: var(--info-color, #3498db);
    color: white;
}

/* Personalización de inputs de archivos */
input[type="file"][b-p2pcbs6lyo] {
    display: none;
}

label[for$="FileInput"][b-p2pcbs6lyo] {
    cursor: pointer;
    transition: all var(--transition-fast);
    border-radius: var(--btn-border-radius, 8px);
}

label[for$="FileInput"]:hover[b-p2pcbs6lyo] {
    transform: translateY(-1px);
    box-shadow: var(--elevation-sm);
}

/* Iconos display */
.display-4[b-p2pcbs6lyo] {
    font-size: 2.5rem !important;
    opacity: 0.6;
    transition: all var(--transition-fast);
}

.drop-zone:hover .display-4[b-p2pcbs6lyo] {
    opacity: 0.8;
    transform: scale(1.1);
}

/* Personalización de alertas */
.alert-warning[b-p2pcbs6lyo] {
    background-color: var(--mabe-warning-50, #fff8e1);
    border-color: var(--mabe-warning-200, #ffcc02);
    color: var(--mabe-warning-800, #e65100);
}

.alert-success[b-p2pcbs6lyo] {
    background-color: var(--mabe-success-50, #e8f5e8);
    border-color: var(--mabe-success-200, #81c784);
    color: var(--mabe-success-800, #2e7d32);
}

.alert-danger[b-p2pcbs6lyo] {
    background-color: var(--mabe-error-50, #ffebee);
    border-color: var(--mabe-error-200, #ef9a9a);
    color: var(--mabe-error-800, #c62828);
}

/* Personalización de botones en el modal */
.btn-warning[b-p2pcbs6lyo] {
    background-color: var(--warning-color, #f39c12);
    border-color: var(--warning-color, #f39c12);
    transition: all var(--transition-fast);
    border-radius: var(--btn-border-radius, 8px);
}

.btn-warning:hover:not(:disabled)[b-p2pcbs6lyo] {
    background-color: var(--warning-hover-color, #e67e22);
    border-color: var(--warning-hover-color, #e67e22);
    box-shadow: var(--elevation-sm);
}

.btn-warning:disabled[b-p2pcbs6lyo] {
    background-color: var(--mabe-neutral-300);
    border-color: var(--mabe-neutral-300);
    color: var(--mabe-neutral-500);
}

.btn-outline-secondary[b-p2pcbs6lyo] {
    border-color: var(--secondary-color, #6c757d);
    color: var(--secondary-color, #6c757d);
    transition: all var(--transition-fast);
    border-radius: var(--btn-border-radius, 8px);
}

.btn-outline-secondary:hover:not(:disabled)[b-p2pcbs6lyo] {
    background-color: var(--secondary-color, #6c757d);
    border-color: var(--secondary-color, #6c757d);
    color: white;
    box-shadow: var(--elevation-sm);
}

.btn-outline-danger.btn-sm[b-p2pcbs6lyo] {
    border-color: var(--error-color, #e74c3c);
    color: var(--error-color, #e74c3c);
    transition: all var(--transition-fast);
}

.btn-outline-danger.btn-sm:hover[b-p2pcbs6lyo] {
    background-color: var(--error-color, #e74c3c);
    border-color: var(--error-color, #e74c3c);
    color: white;
}

/* Spinner personalizado */
.spinner-border-sm[b-p2pcbs6lyo] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
    color: white;
}

/* Cards de resultados */
.card.bg-light[b-p2pcbs6lyo] {
    background-color: var(--mabe-neutral-50) !important;
    border: 1px solid var(--mabe-neutral-200);
}

.card-header[b-p2pcbs6lyo] {
    border-bottom: 1px solid var(--mabe-neutral-200);
    font-family: var(--font-secondary);
}

/* Colores de estadísticas */
.h4.text-primary[b-p2pcbs6lyo] {
    color: var(--primary-color) !important;
}

.h4.text-success[b-p2pcbs6lyo] {
    color: var(--success-color, #27ae60) !important;
}

.h4.text-danger[b-p2pcbs6lyo] {
    color: var(--error-color, #e74c3c) !important;
}

.h4.text-warning[b-p2pcbs6lyo] {
    color: var(--warning-color, #f39c12) !important;
}

/* Listas de errores */
.list-unstyled li[b-p2pcbs6lyo] {
    margin-bottom: 0.25rem;
}

.text-danger[b-p2pcbs6lyo] {
    color: var(--error-color, #e74c3c) !important;
}

.text-muted[b-p2pcbs6lyo] {
    color: var(--mabe-neutral-600) !important;
}

/* Responsive design */
@media (max-width: 992px) {
    .modal-dialog.modal-xl[b-p2pcbs6lyo] {
        margin: 0.5rem !important;
        max-width: none !important;
    }
    
    .col-lg-4[b-p2pcbs6lyo] {
        margin-bottom: 1rem;
    }
    
    .drop-zone[b-p2pcbs6lyo] {
        min-height: 150px;
    }
}

@media (max-width: 576px) {
    .modal-body[b-p2pcbs6lyo] {
        padding: 1rem !important;
    }
    
    .display-4[b-p2pcbs6lyo] {
        font-size: 2rem !important;
    }
    
    .btn[b-p2pcbs6lyo] {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
    
    .drop-zone[b-p2pcbs6lyo] {
        min-height: 120px;
    }
    
    .selected-files .text-truncate[b-p2pcbs6lyo] {
        max-width: 150px;
    }
}

/* Animaciones */
@keyframes fadeIn-b-p2pcbs6lyo {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp-b-p2pcbs6lyo {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert[b-p2pcbs6lyo] {
    animation: fadeIn-b-p2pcbs6lyo 0.3s ease-out;
}

.card[b-p2pcbs6lyo] {
    animation: slideUp-b-p2pcbs6lyo 0.4s ease-out;
}

/* Estados de hover mejorados para cards */
.card:hover[b-p2pcbs6lyo] {
    box-shadow: var(--elevation-md);
    transform: translateY(-2px);
    transition: all var(--transition-fast);
}

/* Mejoras de accesibilidad */
.visually-hidden[b-p2pcbs6lyo] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Estados de focus mejorados */
.btn:focus[b-p2pcbs6lyo] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.drop-zone:focus-within[b-p2pcbs6lyo] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Personalización del modal principal */
.modal-content[b-p2pcbs6lyo] {
    border: none;
    box-shadow: var(--elevation-lg);
    border-radius: var(--border-radius-lg, 12px);
}

.modal-header[b-p2pcbs6lyo] {
    border-bottom: 1px solid var(--mabe-neutral-200);
    background-color: var(--mabe-neutral-50);
    border-radius: var(--border-radius-lg, 12px) var(--border-radius-lg, 12px) 0 0;
}

.modal-footer[b-p2pcbs6lyo] {
    border-top: 1px solid var(--mabe-neutral-200);
    background-color: var(--mabe-neutral-50);
    border-radius: 0 0 var(--border-radius-lg, 12px) var(--border-radius-lg, 12px);
}

.modal-title[b-p2pcbs6lyo] {
    font-family: var(--font-secondary);
    color: var(--primary-color);
    font-weight: 600;
}

/* Mejoras visuales para archivos pequeños */
.selected-files small[b-p2pcbs6lyo] {
    font-size: 0.75rem;
    line-height: 1.2;
}

/* Indicadores de carga */
.text-center p.text-muted.small[b-p2pcbs6lyo] {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Hover effects para mejor UX */
.card-body:hover .drop-zone[b-p2pcbs6lyo] {
    border-color: var(--mabe-primary-300);
}
/* _content/MabeWeb/Components/Layout/CargaMasivaBanners/CargaMasivaBanners.razor.rz.scp.css */
/* Estilos para BulkUpload con Bootstrap */

/* Personalización del botón principal usando Design Tokens */

.btn-outline-primary[b-j9a79g2v64] {
    border-radius: var(--btn-border-radius, 8px)!important;
    font-family: var(--font-secondary) !important;
    border-color: var(--secondary-color);
    color: var(--secondary-color)!important;
    background-color: white;
    transition: all var(--transition-fast);
}

.btn-outline-primary:hover[b-j9a79g2v64] {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    box-shadow: var(--elevation-sm);
    color: white!important;
}

/* Estados de visibility para prevenir _blazorFilesById error */
.file-upload-section[b-j9a79g2v64] {
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.file-upload-section[style*="display: none"][b-j9a79g2v64] {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.file-upload-section[style*="display: block"][b-j9a79g2v64] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* Área de drag & drop */
.border-dashed[b-j9a79g2v64] {
    border-style: dashed !important;
    border-width: 2px !important;
    transition: all var(--transition-fast);
}

.border-dashed:hover[b-j9a79g2v64] {
    border-color: var(--mabe-primary-400) !important;
    background-color: var(--mabe-neutral-50) !important;
}

.border-dashed.border-primary[b-j9a79g2v64] {
    border-color: var(--mabe-primary-500) !important;
    background-color: var(--mabe-primary-50) !important;
}

/* Área de carga de archivos */
.card-body[ondragover][b-j9a79g2v64] {
    cursor: pointer;
    position: relative;
}

.card-body[ondragover][b-j9a79g2v64]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px dashed transparent;
    border-radius: var(--border-radius-md);
    transition: all var(--transition-fast);
}

.card-body[ondragover]:hover[b-j9a79g2v64]:before {
    border-color: var(--mabe-primary-300);
    background-color: rgba(var(--mabe-primary-500-rgb), 0.05);
}

/* Icono de archivo */
.display-1[b-j9a79g2v64] {
    font-size: 4rem !important;
    opacity: 0.6;
}

.display-4[b-j9a79g2v64] {
    font-size: 2.5rem !important;
}

/* Personalización del input file */
input[type="file"][b-j9a79g2v64] {
    display: none;
}

label[for="csvFileInput"][b-j9a79g2v64] {
    cursor: pointer;
    transition: all var(--transition-fast);
}

label[for="csvFileInput"]:hover[b-j9a79g2v64] {
    background-color: var(--tertiary-color);
    border-color: var(--tertiary-color);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--elevation-sm);
}

/* Personalización de alertas */
.alert-info[b-j9a79g2v64] {
    background-color: var(--mabe-info-50);
    border-color: var(--mabe-info-200);
    color: var(--mabe-info-800);
}

.alert-success[b-j9a79g2v64] {
    background-color: var(--mabe-success-50);
    border-color: var(--mabe-success-200);
    color: var(--mabe-success-800);
}

.alert-danger[b-j9a79g2v64] {
    background-color: var(--mabe-error-50);
    border-color: var(--mabe-error-200);
    color: var(--mabe-error-800);
}

/* Personalización de botones en el modal */
.btn-primary[b-j9a79g2v64] {
    background-color: var(--mabe-primary-500);
    border-color: var(--mabe-primary-500);
    transition: all var(--transition-fast);
}

.btn-primary:hover:not(:disabled)[b-j9a79g2v64] {
    background-color: var(--mabe-primary-600);
    border-color: var(--mabe-primary-600);
    box-shadow: var(--elevation-sm);
}

.btn-primary:disabled[b-j9a79g2v64] {
    background-color: var(--mabe-neutral-300);
    border-color: var(--mabe-neutral-300);
    color: var(--mabe-neutral-500);
}

/* Spinner personalizado */
.spinner-border-sm[b-j9a79g2v64] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}
.btn-subir[b-j9a79g2v64]{
    
    border: 1px solid var(--tertiary-color,#000)!important;
    cursor: pointer;
}
.btn-subir:hover[b-j9a79g2v64]{
    background-color: var(--tertiary-color,#5A5142)!important;
    color: #f5f5f5;
    cursor: pointer;
}
.btn-outline-danger:hover[b-j9a79g2v64] {
    background-color: red;
    border-color: red;
    color: white;
}
/* Responsive design */
@media (max-width: 576px) {
    .modal-dialog.modal-lg[b-j9a79g2v64] {
        margin: 0.5rem !important;
        max-width: none !important;
    }
    
    .modal-body[b-j9a79g2v64] {
        padding: 1rem !important;
    }
    
    .display-1[b-j9a79g2v64] {
        font-size: 3rem !important;
    }
    
    .btn[b-j9a79g2v64] {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
}

/* Animaciones */
@keyframes fadeIn-b-j9a79g2v64 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert[b-j9a79g2v64] {
    animation: fadeIn-b-j9a79g2v64 0.3s ease-out;
}

/* Estados de hover mejorados */
.btn-outline-danger:hover[b-j9a79g2v64] {
    background-color: var(--mabe-error-500);
    border-color: var(--mabe-error-500);
    color: white;
}

.btn-outline-secondary:hover[b-j9a79g2v64] {
    background-color: var(--mabe-neutral-500);
    border-color: var(--mabe-neutral-500);
    color:var(--mabe-neutral-50);
}

/* Mejora visual para archivos seleccionados */
.text-success[b-j9a79g2v64] {
    color: var(--mabe-success-600) !important;
}

/* Lista de requisitos */
.alert ul[b-j9a79g2v64] {
    margin-bottom: 0.5rem;
}

.alert li[b-j9a79g2v64] {
    margin-bottom: 0.25rem;
}

/* Accesibilidad mejorada */
.visually-hidden[b-j9a79g2v64] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Estados de focus mejorados */
.btn:focus[b-j9a79g2v64] {
    outline: 2px solid var(--mabe-primary-500);
    outline-offset: 2px;
}

.modal-content[b-j9a79g2v64] {
    border: none;
    box-shadow: var(--elevation-lg);
}

.modal-header[b-j9a79g2v64] {
    border-bottom: 1px solid var(--mabe-neutral-200);
}

.modal-footer[b-j9a79g2v64] {
    border-top: 1px solid var(--mabe-neutral-200);
}
/* _content/MabeWeb/Components/Layout/CargaMasivaMultimedia/CargaMasivaMultimedia.razor.rz.scp.css */
/* Estilos para RenderBulkUpload con Bootstrap */

/* Personalización del botón principal usando Design Tokens */
.btn-outline-success[b-qgn8tv7aui] {
    font-family: var(--font-secondary) !important;
    border-color: var(--secondary-color);
    color: var(--secondary-color);
    background-color: white;
       border-radius: var(--btn-border-radius, 8px)!important;
    transition: all var(--transition-fast);
}

.btn-outline-success:hover[b-qgn8tv7aui] {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    box-shadow: var(--elevation-sm);
    color: white;
}

/* Estados de visibility para prevenir _blazorFilesById error */
.file-upload-section[b-qgn8tv7aui] {
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.file-upload-section[style*="display: none"][b-qgn8tv7aui] {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.file-upload-section[style*="display: block"][b-qgn8tv7aui] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* Área de drag & drop */
.border-dashed[b-qgn8tv7aui] {
    border-style: dashed !important;
    border-width: 2px !important;
    transition: all var(--transition-fast);
}

.border-dashed:hover[b-qgn8tv7aui] {
    border-color: var(--mabe-primary-400) !important;
    background-color: var(--mabe-neutral-50) !important;
}

.border-dashed.border-primary[b-qgn8tv7aui] {
    border-color: var(--mabe-primary-500) !important;
    background-color: var(--mabe-primary-50) !important;
}

/* Área de carga de archivos */
.card-body[ondragover][b-qgn8tv7aui] {
    cursor: pointer;
    position: relative;
}

.card-body[ondragover][b-qgn8tv7aui]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px dashed transparent;
    border-radius: var(--border-radius-md);
    transition: all var(--transition-fast);
}

.card-body[ondragover]:hover[b-qgn8tv7aui]:before {
    border-color: var(--mabe-primary-300);
    background-color: rgba(var(--mabe-primary-500-rgb), 0.05);
}

/* Icono de archivo */
.display-1[b-qgn8tv7aui] {
    font-size: 4rem !important;
    opacity: 0.6;
}

.display-4[b-qgn8tv7aui] {
    font-size: 2.5rem !important;
}

/* Personalización del input file */
input[type="file"][b-qgn8tv7aui] {
    display: none;
}

label[for="csvFileInput"][b-qgn8tv7aui] {
    cursor: pointer;
    transition: all var(--transition-fast);
}

label[for="csvFileInput"]:hover[b-qgn8tv7aui] {
    background-color: var(--mabe-primary-500);
    border-color: var(--mabe-primary-500);
    color: rgba(255, 255, 255, 0.888);
    transform: translateY(-1px);
    box-shadow: var(--elevation-sm);
}

/* Personalización de alertas */
.alert-info[b-qgn8tv7aui] {
    background-color: var(--mabe-info-50);
    border-color: var(--mabe-info-200);
    color: var(--mabe-info-800);
}

.alert-success[b-qgn8tv7aui] {
    background-color: var(--mabe-success-50);
    border-color: var(--mabe-success-200);
    color: var(--mabe-success-800);
}

.alert-danger[b-qgn8tv7aui] {
    background-color: var(--mabe-error-50);
    border-color: var(--mabe-error-200);
    color: var(--mabe-error-800);
}

/* Personalización de botones en el modal */
.btn-primary[b-qgn8tv7aui] {
    background-color: var(--mabe-primary-500);
    border-color: var(--mabe-primary-500);
    transition: all var(--transition-fast);
}

.btn-primary:hover:not(:disabled)[b-qgn8tv7aui] {
    background-color: var(--mabe-primary-600);
    border-color: var(--mabe-primary-600);
    box-shadow: var(--elevation-sm);
}

.btn-primary:disabled[b-qgn8tv7aui] {
    background-color: var(--mabe-neutral-300);
    border-color: var(--mabe-neutral-300);
    color: var(--mabe-neutral-500);
}

/* Spinner personalizado */
.spinner-border-sm[b-qgn8tv7aui] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Responsive design */
@media (max-width: 576px) {
    .modal-dialog.modal-lg[b-qgn8tv7aui] {
        margin: 0.5rem !important;
        max-width: none !important;
    }
    
    .modal-body[b-qgn8tv7aui] {
        padding: 1rem !important;
    }
    
    .display-1[b-qgn8tv7aui] {
        font-size: 3rem !important;
    }
    
    .btn[b-qgn8tv7aui] {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
}

/* Animaciones */
@keyframes fadeIn-b-qgn8tv7aui {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert[b-qgn8tv7aui] {
    animation: fadeIn-b-qgn8tv7aui 0.3s ease-out;
}

/* Estados de hover mejorados */
.btn-outline-danger:hover[b-qgn8tv7aui] {
    background-color: var(--mabe-error-500);
    border-color: var(--mabe-error-500);
    color: white;
}

.btn-outline-secondary:hover[b-qgn8tv7aui] {
    background-color: var(--mabe-neutral-500);
    border-color: var(--mabe-neutral-500);
    color:var(--mabe-neutral-50);
}

/* Mejora visual para archivos seleccionados */
.text-success[b-qgn8tv7aui] {
    color: var(--mabe-success-600) !important;
}

/* Lista de requisitos */
.alert ul[b-qgn8tv7aui] {
    margin-bottom: 0.5rem;
}

.alert li[b-qgn8tv7aui] {
    margin-bottom: 0.25rem;
}

/* Accesibilidad mejorada */
.visually-hidden[b-qgn8tv7aui] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Estados de focus mejorados */
.btn:focus[b-qgn8tv7aui] {
    outline: 2px solid var(--mabe-primary-500);
    outline-offset: 2px;
}

.modal-content[b-qgn8tv7aui] {
    border: none;
    box-shadow: var(--elevation-lg);
}

.modal-header[b-qgn8tv7aui] {
    border-bottom: 1px solid var(--mabe-neutral-200);
}

.modal-footer[b-qgn8tv7aui] {
    border-top: 1px solid var(--mabe-neutral-200);
}
/* _content/MabeWeb/Components/Layout/CategoryCard.razor.rz.scp.css */
.text-dark[b-j50nt7cg3f] {
    font-size: 2rem;
    font-weight: 600;
    color: #fff !important;
    position: relative;
    z-index: 2;
    font-family: var(--font-secondary);
}

.card-img-category[b-j50nt7cg3f] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.card-img-overlay[b-j50nt7cg3f] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* _content/MabeWeb/Components/Layout/DisenoBackOffice/DisenoBackOffice.razor.rz.scp.css */
[b-emh8qcolkm] .admin-container {
    padding: 0 6rem!important;
}
/* _content/MabeWeb/Components/Layout/Filtros/Filtros.razor.rz.scp.css */
/* ===========================================
   Filtros Modal - CSS Responsivo y Flexible
   =========================================== */

/* Wrapper principal */
.filters-wrapper[b-ve56squeyd] {
    position: relative;
    display: inline-block;
}

.filters-label[b-ve56squeyd] {
    font-size: 1.1rem;
}

/* Enlace para abrir el modal de filtros */
.filters-toggle-link[b-ve56squeyd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--primary-color);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
    text-decoration: none;
}

.filters-toggle-link:focus[b-ve56squeyd] {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Badge para mostrar cantidad de filtros activos */
[class*="theme-"] .badge.bg-primary.ms-2[b-ve56squeyd] {
    background-color: var(--primary-color, #00526B)!important;
    font-family: var(--font-primary);
    border-radius: var(--btn-border-radius, 8px);
}
.filters-badge[b-ve56squeyd] {
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    position: absolute;
    top: -8px;
    right: -8px;
    animation: pulse-b-ve56squeyd 1.5s infinite;
}

@keyframes pulse-b-ve56squeyd {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ===========================================
   Modal y Overlay
   =========================================== */

.filters-modal[b-ve56squeyd] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.filters-modal.show[b-ve56squeyd] {
    opacity: 1;
    visibility: visible;
}

.filters-overlay[b-ve56squeyd] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.filters-modal-content[b-ve56squeyd] {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: min(1200px, 95vw);
    max-height: min(90vh, 800px);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.9) translateY(-10px);
    transition: transform 0.3s ease;
    font-family: var(--font-primary);
}

.filters-modal.show .filters-modal-content[b-ve56squeyd] {
    transform: scale(1) translateY(0);
}

/* ===========================================
   Header del Modal
   =========================================== */

.filters-header[b-ve56squeyd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e9ecef;
    background-color: #fff;
    color: var(--primary-color) !important;
    flex: 0 0 auto;
}

.filters-header h3[b-ve56squeyd] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.close-btn[b-ve56squeyd] {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.close-btn:hover[b-ve56squeyd] {
    background-color: rgba(0, 0, 0, 0.1);
}

/* ===========================================
   Cuerpo del Modal - Layout Flexible
   =========================================== */

.filters-body[b-ve56squeyd] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0; /* Permite que el scroll funcione */
}

/* Layout principal - Mobile First */
.filters-grid[b-ve56squeyd] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}

/* Paneles laterales (marcas/categorías) */
.brands-pane[b-ve56squeyd],
.categories-pane[b-ve56squeyd] {
    flex: 0 0 auto;
    max-height: 40vh;
    display: flex;
    flex-direction: column;
    position: relative; /* Para sticky */
    overflow: visible; /* Cambiado de hidden para permitir sticky */
}

.brands-controls[b-ve56squeyd],
.categories-controls[b-ve56squeyd] {
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 0.5rem;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 10;
}

.brands-list[b-ve56squeyd],
.categories-list[b-ve56squeyd] {
    overflow-y: auto;
    flex: 1 1 auto;
    padding: 0.5rem 0;
}

/* Items de listas */
.brand-item[b-ve56squeyd],
.category-item[b-ve56squeyd],
.feature-item[b-ve56squeyd] {
    display: flex;
    align-items: center;
    padding: 0.25rem 0;
}

.brand-item label[b-ve56squeyd],
.category-item label[b-ve56squeyd],
.feature-item label[b-ve56squeyd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    width: 100%;
    padding: 0.25rem;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.brand-item label:hover[b-ve56squeyd],
.category-item label:hover[b-ve56squeyd],
.feature-item label:hover[b-ve56squeyd] {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Panel principal (características) */
.filters-main[b-ve56squeyd] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative; /* Necesario para que sticky funcione */
}

.filters-main-controls[b-ve56squeyd],
.categories-controls[b-ve56squeyd] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 1rem;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 10;
}

.features-control[b-ve56squeyd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.features-search[b-ve56squeyd] {
    flex: 1;
    min-width: 200px;
}

.features-search input[b-ve56squeyd] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: var(--btn-border-radius);
    font-size: 0.9rem;
}

.features-container[b-ve56squeyd] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    border-radius: var(--btn-border-radius);
   
}

/* Estilos para el Accordion de Bootstrap */
.features-container .accordion[b-ve56squeyd] {
    --bs-accordion-border-color: #e9ecef;
    font-size: 0.9rem;
}

.features-container .accordion-item[b-ve56squeyd] {
    border: 1px solid var(--bs-accordion-border-color);
    margin-bottom: 0.5rem;
   border-radius: var(--btn-border-radius);
    overflow: hidden;
}

.features-container .accordion-item:last-child[b-ve56squeyd] {
    margin-bottom: 0;
}

[class*="theme-"].features-container .accordion-button[b-ve56squeyd] {
    background-color: var(--primary-color, #00526B);
    color: var(--btn-text-color, #fff);
    font-size: 1rem;
    font-weight: 300;
    padding: 1rem 1.25rem;
    border: none;
}

[class*="theme-mdc-new"] .features-container .accordion-button:not(.collapsed)[b-ve56squeyd] {
    background-color: #BDAA8E;
    color: white;
    border-radius: var(--btn-border-radius);
    box-shadow: none;
}
[class*="theme-mabe-new"] .features-container .accordion-button:not(.collapsed)[b-ve56squeyd] {
    background-color: var(--primary-color, #00526B);
    color: white;
    border-radius: var(--btn-border-radius);
    box-shadow: none;
}
[class*="theme-iomabe"] .features-container .accordion-button:not(.collapsed)[b-ve56squeyd] {
    background-color: var(--primary-color, #00526B);
    color: white;
    border-radius: var(--btn-border-radius);
    box-shadow: none;
}
[class*="theme-cafe-new"] .features-container .accordion-button:not(.collapsed)[b-ve56squeyd] {
    background-color: var(--primary-color, #00526B);
    color: white;
    border-radius: var(--btn-border-radius);
    box-shadow: none;
}
[class*="theme-monogram-new"] .features-container .accordion-button:not(.collapsed)[b-ve56squeyd] {
    background-color: var(--primary-color, #00526B);
    color: white;
    border-radius: var(--btn-border-radius);
    box-shadow: none;
}
[class*="theme-"].features-container .accordion-button:not(.collapsed)[b-ve56squeyd] {
    background-color: var(--primary-color, #00526B);
    color: white;
    border-radius: var(--btn-border-radius);
    box-shadow: none;
}
[class*="theme-mdc-new"] input[type="checkbox"]:checked[b-ve56squeyd]  {
    background-color: #BDAA8E !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23f5f5f5' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
    border-color: #BDAA8E !important;
    border-radius: var(--btn-border-radius);
}

[class*="theme-mdc-new"] input[type="checkbox"][b-ve56squeyd] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

[class*="theme-mdc-new"] input[type="checkbox"]:hover[b-ve56squeyd] {
    border-color: #BDAA8E;
}

[class*="theme-"] .features-container .accordion-button:not(.collapsed) .badge[b-ve56squeyd] {
    background-color: var(--primary-color, #00526B) !important;
    color: var(--btn-text-color, #fff);
    border-radius: var(--btn-border-radius);
}

.features-container .accordion-button:focus[b-ve56squeyd] {
    box-shadow: none;
    border-color: var(--bs-accordion-border-color);
}

.features-container .accordion-button[b-ve56squeyd]::after {
    filter: brightness(0) saturate(100%) invert(28%) sepia(45%) saturate(1018%) hue-rotate(157deg) brightness(95%) contrast(101%);
}

.features-container .accordion-button:not(.collapsed)[b-ve56squeyd]::after {
    filter: brightness(0) saturate(100%) invert(100%);
}

.features-container .accordion-body[b-ve56squeyd] {
    padding: 1rem 1.25rem;
    background-color: white;
}

.features-container .badge[b-ve56squeyd] {
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
}

.features-category-group[b-ve56squeyd] {
    margin-bottom: 2rem;
}

.features-category-group:last-child[b-ve56squeyd] {
    margin-bottom: 0;
}

.features-category-title[b-ve56squeyd] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color, #00526B);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color, #00526B);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.features-list[b-ve56squeyd] {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas por defecto */
    gap: 0.25rem;
    align-items: start; /* Alinea los items al inicio para mejor distribución */
}

/* En móvil, una sola columna */
@media (max-width: 768px) {
    .features-list[b-ve56squeyd] {
        grid-template-columns: 1fr; /* Una columna en móvil */
    }
}

/* ===========================================
   Acciones del Modal
   =========================================== */

.filter-actions[b-ve56squeyd] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid #e9ecef;
    background-color: #fff;
    flex: 0 0 auto;
}

.btn-apply[b-ve56squeyd],
.btn-clear[b-ve56squeyd] {
    flex: 1;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 48px;
}

.btn-apply[b-ve56squeyd] {
    background-color: var(--btn-menu-color, #00526B);
    color: white;
}

.btn-apply:hover[b-ve56squeyd] {
    filter: brightness(1.1);
}

.btn-clear[b-ve56squeyd] {
    background-color: transparent;
    color: #6c757d;
    border: 2px solid #e9ecef;
}

.btn-clear:hover[b-ve56squeyd] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

/* ===========================================
   Estados Especiales
   =========================================== */

.loading-brands[b-ve56squeyd] {
    padding: 1rem;
    color: #666;
    font-style: italic;
    text-align: center;
}

/* ===========================================
   Responsive Design - Mobile First
   =========================================== */

/* Tablets y Desktop */
@media (min-width: 768px) {
    .filters-grid[b-ve56squeyd] {
        flex-direction: row;
        gap: 2rem;
    }

    .brands-pane[b-ve56squeyd],
    .categories-pane[b-ve56squeyd] {
        flex: 0 0 300px;
        max-height: none;
        border-right: 1px solid #eee;
        padding-right: 1rem;
    }

    .filters-main[b-ve56squeyd] {
        flex: 1 1 auto;
    }

    .features-search[b-ve56squeyd] {
        min-width: 250px;
    }
}
[class*="theme-mdc-new"] .bg-primary[b-ve56squeyd] {
    background-color: #BDAA8E!important;
    font-family: var(--font-primary);
    border-radius: var(--btn-border-radius);
}

/* Desktop Grande */
@media (min-width: 1024px) {
    .filters-modal-content[b-ve56squeyd] {
        max-width: 1400px;
        max-height: 85vh;
    }

    .brands-pane[b-ve56squeyd],
    .categories-pane[b-ve56squeyd] {
        flex: 0 0 350px;
    }

    .filters-main-controls[b-ve56squeyd] {
        gap: 2rem;
    }
}

/* Móviles Pequeños */
@media (max-width: 480px) {
    .filters-modal[b-ve56squeyd] {
        align-items: flex-end;
        padding: 0;
    }

    .filters-modal-content[b-ve56squeyd] {
        width: 100%;
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }

    .filters-modal.show .filters-modal-content[b-ve56squeyd] {
        transform: translateY(0);
    }

    .filters-body[b-ve56squeyd] {
        padding: 1rem;
    }

    .filters-header[b-ve56squeyd] {
        padding: 1rem;
    }

    .filters-header h3[b-ve56squeyd] {
        font-size: 1.25rem;
    }

    .filter-actions[b-ve56squeyd] {
        flex-direction: column;
        padding: 1rem;
        gap: 0.5rem;
    }

    .btn-apply[b-ve56squeyd],
    .btn-clear[b-ve56squeyd] {
        width: 100%;
    }

    .filters-main-controls[b-ve56squeyd] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .categories-controls[b-ve56squeyd] {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .features-search[b-ve56squeyd] {
        min-width: auto;
    }
}

/* ===========================================
   Estilos Generales
   =========================================== */

label[b-ve56squeyd] {
    font-family: var(--font-primary);
    color: #333;
    font-size: 0.9rem;
}

input[type="checkbox"][b-ve56squeyd] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color, #00526B);
}

/* ===========================================
   Headers Collapsibles
   =========================================== */

.categories-header[b-ve56squeyd],
.features-header[b-ve56squeyd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 0.5rem;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 10;
}

.categories-header h4[b-ve56squeyd],
.features-header h4[b-ve56squeyd] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
}

.toggle-btn[b-ve56squeyd] {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.toggle-btn:hover[b-ve56squeyd] {
    background-color: rgba(0, 0, 0, 0.1);
}

.toggle-btn span[b-ve56squeyd] {
    font-weight: bold;
}
/* _content/MabeWeb/Components/Layout/MenuNavegacion/MenuNavegacion.razor.rz.scp.css */
/* Estilos específicos del navbar para mejorar legibilidad del menú colapsado (mobile) */

/* Fondo, sombra y espaciado cuando el menú está colapsado (pantallas < lg) */
@media (max-width: 991.98px) {
	.navbar-nuevo .navbar-collapse[b-g6uoj7gfsw] {
		/* background-color: var(--navbar-bg-color, var(--bg-color, #ffffff)); */
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
		border-top: 1px solid rgba(0, 0, 0, 0.06);
		padding: 0.75rem 1rem;
	}

	/* Aumentar clicabilidad y separar enlaces */
	.navbar-nuevo .navbar-nav .nav-link[b-g6uoj7gfsw] {
		padding: 0.5rem 0;
	}

	/* Delimitar el buscador en mobile para que no se pierda con el fondo */
	.navbar-nuevo .general-search-container[b-g6uoj7gfsw] {
		border: 1px solid rgba(0, 0, 0, 0.08);
		border-radius: var(--btn-border-radius, 8px);
	}
}

/* En desktop, mantener fondo transparente si el tema así lo define */
.navbar-nuevo[b-g6uoj7gfsw] {
	/* background-color: var(--navbar-bg-color, transparent); */
	background-color: transparent;
}

.floating-island-menu[b-g6uoj7gfsw] {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--navbar-bg-color);
	border-radius: 15px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	padding: 10px 20px;
	z-index: 1000;
	max-width: 90%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.floating-island-menu .container-xxl[b-g6uoj7gfsw] {
	max-width: none;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.floating-island-menu .navbar-brand-logo[b-g6uoj7gfsw] {
	flex-shrink: 0;
}

.floating-island-menu #mainNavbar[b-g6uoj7gfsw] {
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.floating-island-menu .navbar-nav[b-g6uoj7gfsw] {
	display: flex;
	flex-direction: row;
	margin: 0;
}

.floating-island-menu .nav-item[b-g6uoj7gfsw] {
	margin: 0 10px;
}
.general-search[b-g6uoj7gfsw]{
	border-bottom: 0!important;
}


@media (max-width: 768px) {
	.floating-island-menu[b-g6uoj7gfsw] {
		top: 10px;
		padding: 5px 10px;
		max-width: 95%;
	}

	.floating-island-menu .d-none.d-md-flex[b-g6uoj7gfsw] {
		display: none !important;
	}

	.floating-island-menu .navbar-nav[b-g6uoj7gfsw] {
		display: none;
	}
}
/* _content/MabeWeb/Components/Layout/TarjetaMarca/TarjetaMarca.razor.rz.scp.css */
html[b-fnlt3jwjrn] {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.card-img-top[b-fnlt3jwjrn] {
  max-width: 340px;
  max-height: 70px;
  width: auto;
  height: auto;
  object-fit: contain; /* important: do not crop */
  object-position: center;
  display: block;
  transition: transform var(--transition-normal);
}

.card-img-container[b-fnlt3jwjrn] {
  height: 100%;
}

.card-img-placeholder[b-fnlt3jwjrn] {
  height: 100%;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card-body[b-fnlt3jwjrn] {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.card-title[b-fnlt3jwjrn] {
  font-size: 1.25rem;
  font-weight: 600;
}
.brand-card[b-fnlt3jwjrn] {
  cursor: pointer;
}

.card-img-placeholder[b-fnlt3jwjrn] {
  height: 100%;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card-body[b-fnlt3jwjrn] {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.card-title[b-fnlt3jwjrn] {
  font-size: 1.8rem;
  color: var(--mabe-primary-500);
  text-decoration: none;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  max-height: 52px; /* Limita a 2 líneas */
}

.columna-marca[b-fnlt3jwjrn] {
  height: 230px;
}

/* Estilos para el placeholder cuando no hay imagen */
.bg-primary[b-fnlt3jwjrn] {
  background: linear-gradient(135deg, #007298 0%, #005a77 100%);
}

/* Fallback mejorado para imágenes rotas */
.card-img-top[src=""][b-fnlt3jwjrn],
.card-img-top:not([src])[b-fnlt3jwjrn],
.card-img-top[src="#"][b-fnlt3jwjrn] {
  display: none;
}

.card-img-top[src=""] + .card-img-placeholder[b-fnlt3jwjrn],
.card-img-top:not([src]) + .card-img-placeholder[b-fnlt3jwjrn],
.card-img-top[src="#"] + .card-img-placeholder[b-fnlt3jwjrn] {
  display: flex !important;
}

/* Fondo por marca */
.card-bg-cafe[b-fnlt3jwjrn] {
  background-image: url('/images/assets/cards/Boton-Cafe.webp');
  background-size: cover;
  background-position: center;
}
.card-bg-geprofile[b-fnlt3jwjrn] {
  background-image: url('/images/assets/cards/Boton-GE-Profile.webp');
  background-size: cover;
  background-position: center;
}
.card-bg-haier[b-fnlt3jwjrn] {
  background-image: url('/images/assets/cards/Boton-Haier.webp');
  background-size: cover;
  background-position: center;
}
.card-bg-iomabe[b-fnlt3jwjrn] {
  background-image: url('/images/assets/cards/boton-io-mabe.webp');
  background-size: cover;
  background-position: center;
}
.card-bg-mabe[b-fnlt3jwjrn] {
  background-image: url('/images/assets/cards/boton-mabe.webp');
  background-size: cover;
  background-position: center;
}
.card-bg-monogram[b-fnlt3jwjrn] {
  background-image: url('/images/assets/cards/Boton-Monogram.webp');
  background-size: cover;
  background-position: center;
}

.placeholder-title[b-fnlt3jwjrn] {
  font-size: 1.5rem;
  font-weight: 600;
  color: white;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.brand-logo[b-fnlt3jwjrn] {
    width: 250px;
    height: 250px;
    object-fit: contain;
}
.card-bg-mabe .brand-logo[b-fnlt3jwjrn] {
 width: 220px;
    height: 250px;
    object-fit: contain;
}
.card-bg-haier .brand-logo[b-fnlt3jwjrn] {
 width: 220px;
    height: 250px;
    object-fit: contain;
}
.card-bg-cafe[b-fnlt3jwjrn],
.card-bg-geprofile[b-fnlt3jwjrn],
.card-bg-iomabe[b-fnlt3jwjrn],
.card-bg-mabe[b-fnlt3jwjrn],
.card-bg-monogram[b-fnlt3jwjrn] {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: relative;
}
.card-bg-haier[b-fnlt3jwjrn] {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.card-bg-cafe[b-fnlt3jwjrn]::before,
.card-bg-geprofile[b-fnlt3jwjrn]::before,
.card-bg-haier[b-fnlt3jwjrn]::before,
.card-bg-iomabe[b-fnlt3jwjrn]::before,
.card-bg-mabe[b-fnlt3jwjrn]::before,
.card-bg-monogram[b-fnlt3jwjrn]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.card-img-top[b-fnlt3jwjrn] {
  max-width: 340px;
  max-height: 70px;
  width: auto;
  height: auto;
  object-fit: contain; /* important: do not crop */
  object-position: center;
  display: block;
  transition: transform var(--transition-normal);
  position: relative; /* Añadido para permitir z-index */
  z-index: 2; /* Añadido para que esté encima del overlay */
}

.monogram-logo[b-fnlt3jwjrn] {}
.cafe-logo[b-fnlt3jwjrn] {
  width: 200px;
  height: 200px;
  padding-bottom: 10px;
}
.geprofile-logo[b-fnlt3jwjrn] {
  width: 200px;
  height: 200px;
}
.haier-logo[b-fnlt3jwjrn] {
  width: 110px !important;
  height: 110px !important;
}
.iomabe-logo[b-fnlt3jwjrn] {
  width: 160px;
  height: 160px;
  padding-bottom: 10px;
}
.mabe-logo[b-fnlt3jwjrn] {
  width: 140px !important;
  height: 140px !important;
  padding-bottom: 10px;
}
/* _content/MabeWeb/Components/Layout/TarjetaProducto/TarjetaProducto.razor.rz.scp.css */
/* === ESTILOS BASE PARA PRODUCT CARD === */
.product-card[b-wkvdkkn0ns] {
    transition: all 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
}

/* Botón de favoritos */
.favorite-btn[b-wkvdkkn0ns] {
    background-color: transparent!important;
    backdrop-filter: blur(5px);
    width: 40px;
    height: 40px;
    transition: all 0.2s ease;
    z-index: 2;
}

/* Imagen del producto */
.card-img-top[b-wkvdkkn0ns] {
    transition: transform 0.3s ease;
}

.product-card:hover .card-img-top[b-wkvdkkn0ns] {
    transform: scale(1.02);
}

/* Título del producto */
.card-title[b-wkvdkkn0ns] {
    font-size: 1rem;
    line-height: 1.3;
    margin-bottom: 0.5rem;
    height: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Footer de la card */
.card-footer[b-wkvdkkn0ns] {
    margin-top: auto;
}

/* Checkbox personalizado */
.form-check[b-wkvdkkn0ns] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-check-input[b-wkvdkkn0ns] {
    width: 1.2rem;
    height: 1.2rem;
    border-width: 2px;
    transition: all 0.2s ease;
}

.form-check-input:focus[b-wkvdkkn0ns] {
    box-shadow: none;
    border-width: 2px;
}

.form-check-input:checked[b-wkvdkkn0ns] {
    border-width: 2px;
}

.form-check-label[b-wkvdkkn0ns] {
    font-weight: 500;
    margin-bottom: 0;
    cursor: pointer;
    user-select: none;
}

/* Placeholder de imagen */
.bg-light[b-wkvdkkn0ns] {
    background-color: #fff !important;
    border-radius: 8px;
}

/* Responsividad */
@media (max-width: 768px) {
    .product-card[b-wkvdkkn0ns] {
        margin-bottom: 1rem;
    }
    
    .card-title[b-wkvdkkn0ns] {
        font-size: 0.9rem;
        min-height: 2.4rem;
    }
    
    .favorite-btn[b-wkvdkkn0ns] {
        width: 36px;
        height: 36px;
        margin: 0.5rem !important;
    }
    
    .form-check-input[b-wkvdkkn0ns] {
        width: 1.1rem;
        height: 1.1rem;
    }
    
    .form-check-label[b-wkvdkkn0ns] {
        font-size: 0.9rem;
    }
}

/* Animaciones para interacciones */
@keyframes heartBeat-b-wkvdkkn0ns {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.favorite-btn:active i[b-wkvdkkn0ns] {
    animation: heartBeat-b-wkvdkkn0ns 0.3s ease;
}

/* Mejoras visuales adicionales */
.card-body[b-wkvdkkn0ns] {
    padding: 1rem 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Estado de carga para imágenes */
.card-img-top[src=""][b-wkvdkkn0ns] {
    background: linear-gradient(90deg, #f0f0f0 25%, transparent 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-wkvdkkn0ns 1.5s infinite;
}

@keyframes loading-b-wkvdkkn0ns {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === Clases añadidas para eliminar estilos inline === */
.text-muted-heart[b-wkvdkkn0ns] { color: #6c757d; }
/* _content/MabeWeb/Components/Pages/BackOffice/BackOffice.razor.rz.scp.css */
/* Hover para el select */
select:hover[b-24byiur1iz] {
    border-color: var(--bg-tertiary);
    background-color: var(--bg-tertiary);
}

/* Hover para las opciones (limitado por soporte de navegador) */
select option:hover[b-24byiur1iz] {
    background-color: #dce775;
    color: #222;
}
/* Estilos personalizados para el filtro de marca */
select[b-24byiur1iz] {
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid #bbb;
    border-radius: var(--btn-border-radius);
    padding: 8px 12px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

select:focus[b-24byiur1iz] {
    border-color:var(--primary-color);
    box-shadow: 0 0 0 2px var(--bg-tertiary);
}

/* Cambia el color de la opción seleccionada en algunos navegadores */
select option:checked[b-24byiur1iz] {
    background-color: var(--producto-btn-comparar-bg-color);
    color: white;
}

/* Quitar la apariencia nativa para personalizar más (opcional) */
select[b-24byiur1iz] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
:root[b-24byiur1iz] {
    --mdc-sand-yellow: #F5F1E9; /* Color de fondo amarillo arena */
}
.theme-mdc-new .card-header[b-24byiur1iz] {
    border-bottom: solid 1.8px rgba(189, 170, 142, 0.3)!important; /* Transparente, ajusta el color si es necesario */
}
/* === ESTILOS PARA ADMIN - TEMA MDC === */
/* === SWITCHES PERSONALIZADOS CON COLORES MDC === */

/* Switch MDC sin sombras, con thumb personalizado */

.theme-mdc-new .form-switch .form-check-input[role="switch"][b-24byiur1iz] {
    width: 2.8em;
    height: 1.6em;
    border: 2px solid var(--producto-btn-comparar-bg-color);
    border-radius: 12px;
    position: relative;
    transition: background-color 0.2s, border-color 0.2s;
    appearance: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    cursor: pointer;
}

.theme-mdc-new .form-switch .form-check-input[role="switch"]:checked[b-24byiur1iz] {
    background-color: var(--producto-btn-comparar-bg-color);
    border-color: var(--producto-btn-comparar-bg-color);
}


.theme-mdc-new .form-switch .form-check-input[role="switch"][b-24byiur1iz]::after {
    position: absolute;
    top: 0.01em;
    left: 0.20em;
    width: 1.20em;
    height: 1.20em;
    background: white;
    border-radius: var(--btn-border-radius);
    transition: left 0.2s;
    border: 2px solid var(--producto-btn-comparar-bg-color);
    box-sizing: border-box;
}


.theme-mdc-new .form-switch .form-check-input[role="switch"]:checked[b-24byiur1iz]::after {
    left: 1.34em;
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.theme-mdc-new .form-switch .form-check-input[role="switch"]:disabled[b-24byiur1iz] {
    background-color: #e9ecef;
    border-color: #e9ecef;
    opacity: 0.6;
}

.theme-mdc-new .container-fluid[b-24byiur1iz] {
    padding: 0 8rem;
}

/* Botones principales */
.theme-mdc-new .btn.btn-primary.btn-sm[b-24byiur1iz] {
    background-color: var(--secondary-color);
    border-color: var(--producto-btn-comparar-bg-color);
    font-family: var(--font-secondary);
    padding: 0 1.2rem;
    color: white;
}
.theme-mdc-new .btn.btn-outline-primary.btn-sm[b-24byiur1iz] {
    background-color: transparent;
    border-color: var(--producto-btn-comparar-bg-color);
    color: var(--producto-btn-comparar-bg-color);
    font-family: var(--font-secondary);
    padding: 0 1.2rem;
}

.theme-mdc-new .btn.btn-primary.btn-sm:hover[b-24byiur1iz] {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}
#btnLogoNegro[b-24byiur1iz] {
    color: #f5f5f5 !important;
    background-color: var(--primary-color, #000) !important;
    border-radius: var(--btn-border-radius, 8px) !important;
    border: 2px solid var(--primary-color, #000) !important;
    font-family: var(--font-secondary);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    transition: all 0.3s ease;
}
#btnLogoBlanco[b-24byiur1iz] {
    color: #000 !important;
    background-color: var(--mdc-sand-yellow #eeebeb) !important;
    border-radius: var(--btn-border-radius, 8px) !important;
    border: 2px solid var(--primary-color, #161616) !important;
    font-family: var(--font-secondary);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    transition: all 0.3s ease;
}
/* Tablas */
.theme-mdc-new .table[b-24byiur1iz] { 
    margin-bottom: 0;
    font-family: var(--font-secondary);
    overflow: hidden;
    border-radius: var(--btn-border-radius);
}

.theme-mdc-new .table th[b-24byiur1iz] { 
    font-weight: 600;
    font-size: 0.9rem;
    background-color: var(--producto-btn-comparar-bg-color);
    color: white;
}

.theme-mdc-new .table td[b-24byiur1iz] { 
    font-size: 0.9rem;
    vertical-align: middle;
    color: var(--text-color);
}

/* Cards */
.theme-mdc-new .card[b-24byiur1iz] { 
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: var(--btn-border-radius);
}

/* Badges */
.theme-mdc-new .badge[b-24byiur1iz] { 
    font-size: 0.75rem;
    font-family: var(--font-secondary);
}

/* Badge específico para info de paginación */
.theme-mdc-new .badge.bg-info[b-24byiur1iz] {
    background-color: var(--tertiary-color) !important;
    color: white !important;
}

/* Badge para filtros activos */
.theme-mdc-new .badge.bg-primary[b-24byiur1iz] {
    background-color: var(--producto-btn-comparar-bg-color) !important;
    color: white !important;
}

/* Información de peso */
.theme-mdc-new .weight-info[b-24byiur1iz] { 
    line-height: 1.2;
}

.theme-mdc-new .weight-info .text-primary[b-24byiur1iz] { 
    font-weight: 600;
    color: var(--producto-btn-comparar-bg-color);
}

.theme-mdc-new .weight-info .text-secondary[b-24byiur1iz] { 
    font-size: 0.8rem;
    color: var(--secondary-color);
}

/* Botones generales */
.theme-mdc-new .btn[b-24byiur1iz] { 
  
    font-size: small;
    font-family: var(--font-secondary);
}

/* Icono de herramientas */
.theme-mdc-new .tool-icon[b-24byiur1iz] {
    color: #f5f5f5;
}

/* === ESTILOS DE LOGIN === */

/* Botón centrado de login */
.theme-mdc-new .login-btn-centered.btn.btn-primary[b-24byiur1iz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    text-align: center;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    background: var(--tertiary-color);
    border: none;
    border-radius: var(--btn-border-radius);
    transition: all 0.3s ease;
    font-family: var(--font-secondary);
    color: white;
    background-color: var(--tertiary-color) !important;
    border-color: var(--tertiary-color) !important;
    color: #fff !important;
    font-weight: 600;
}
.theme-mdc-new .text-primary[b-24byiur1iz] {
    color: var(--secondary-color) !important;
}
.theme-mdc-new .login-btn-centered.btn.btn-primary:hover:not(:disabled)[b-24byiur1iz] {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color) !important;
    color: #fff !important;
    background: var(--bg-secondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(18, 17, 16, 0.3);
}

.theme-mdc-new .login-btn-centered.btn.btn-primary:disabled[b-24byiur1iz] {
    background: #6c757d;
    transform: none;
    box-shadow: none;
    opacity: 0.65;
}

.theme-mdc-new .login-btn-centered span[b-24byiur1iz],
.theme-mdc-new .login-btn-centered i[b-24byiur1iz] {
    display: inline-flex;
    align-items: center;
}

/* Container de login */
.theme-mdc-new .login-container[b-24byiur1iz] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background-color: var(--main-bg-color);
}

/* Card de login */
.theme-mdc-new .login-card[b-24byiur1iz] {
    max-width: 500px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: var(--btn-border-radius);
    border: none;
    overflow: hidden;
}

.theme-mdc-new .login-card .card-header[b-24byiur1iz] {
    border-radius: 0;
    background-color: var(--tertiary-color)!important;
    color: #fff !important;
    background:  var(--tertiary-color);
    border: none;
    padding: 1.5rem;
}

.theme-mdc-new .login-card .card-header h4[b-24byiur1iz] {
    margin-bottom: 0;
    font-family: var(--font-secondary) !important;
    font-weight: 600;
    color: white !important;
}

.theme-mdc-new .login-card .card-header i[b-24byiur1iz] {
    color: white !important;
}

.theme-mdc-new .login-card .card-body[b-24byiur1iz] {
    padding: 2rem;
    background-color: var(--bg-color);
}

.theme-mdc-new .login-card .card-footer[b-24byiur1iz] {
    background-color: var(--mdc-sand-yellow);
    border: none;
    padding: 1rem 1.5rem;
}

.card-header[b-24byiur1iz] {
     border: none;
}
/* Input group styling específico para login */
.theme-mdc-new .login-card .input-group-text[b-24byiur1iz] {
    background-color: var(--mdc-sand-yellow);
    border-color: var(--form-check-input-border-color-unchecked);
    color: var(--primary-color);
    font-size: 1rem;
    width: 2.75rem;
    height: 44px!important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: none;
}
 .btn-group > :first-child[b-24byiur1iz] {
        border-top-left-radius: var(--btn-border-radius) !important;
        border-bottom-left-radius: var(--btn-border-radius) !important;
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }

    .btn-group > :not(:first-child):not(:last-child)[b-24byiur1iz] {
        border-radius: 0px !important;
    }

    .btn-group > :last-child[b-24byiur1iz] {
        border-top-right-radius: var(--btn-border-radius) !important;
        border-bottom-right-radius: var(--btn-border-radius) !important;
        border-top-left-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
    }

.theme-mdc-new .form-control[b-24byiur1iz] {
    border-left: none;
    padding-left: 0.75rem;
    border-radius: var(--btn-border-radius);
    font-family: var(--font-secondary);
    color: var(--text-color);
    border: 1px solid var(--primary-color);
}
.theme-mdc-new .form-select[b-24byiur1iz] {
    border-left: none;
    padding-left: 0.75rem;
    padding-bottom: .60rem;
    font-family: var(--font-secondary);
    color: var(--text-color);
    border-radius: var(--btn-border-radius);
    border: 1px solid var(--primary-color);
}

.theme-mdc-new .login-card .form-control[b-24byiur1iz] {
    border-left: none;
    padding-left: 0.75rem;
    font-family: var(--font-secondary);
    color: var(--text-color);
    
}

.theme-mdc-new .login-card .form-control:focus[b-24byiur1iz] {
    border-color: var(--producto-btn-comparar-bg-color);
    box-shadow: 0 0 0 0.2rem var(--bg-secondary);
}

.theme-mdc-new .login-card .form-label[b-24byiur1iz] {
    font-family: var(--font-secondary);
    color: var(--text-color);
    font-weight: 600;
}

/* Button styling específico para login */
.theme-mdc-new .login-card .btn-login[b-24byiur1iz] {
    background: #5A5142;
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--btn-border-radius);
    transition: all 0.3s ease;
    width: 100%;
    font-family: var(--font-secondary);
}

.theme-mdc-new .login-card .btn-login:hover:not(:disabled)[b-24byiur1iz] {
    background: var(--bg-secondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(18, 17, 16, 0.3);
    color: white;
}

.theme-mdc-new .login-card .btn-login:focus[b-24byiur1iz] {
    box-shadow: 0 0 0 0.2rem var(--bg-secondary);
    color: white;
}

.theme-mdc-new .login-card .btn-login:disabled[b-24byiur1iz] {
    background: #6c757d;
    transform: none;
    box-shadow: none;
    opacity: 0.65;
}

/* Clase para aplicar los estilos solicitados por el usuario a botones específicos */
.theme-mdc-new .btn-csvstyle[b-24byiur1iz] {
    border-radius: var(--btn-border-radius, 8px) !important;
    font-family: var(--font-secondary) !important;
    border-color: var(--secondary-color) !important;
    color: var(--secondary-color) !important;
    background-color: white !important;
    transition: all var(--transition-fast) !important;
}

/* Asegurar que los estados hover/focus mantengan contraste */
.theme-mdc-new .btn-csvstyle:hover[b-24byiur1iz],
.theme-mdc-new .btn-csvstyle:focus[b-24byiur1iz] {
    background-color: white !important;
    color: var(--secondary-color) !important;
    box-shadow: 0 0 0 0.08rem rgba(0,0,0,0.06);
}

/* === ESTILOS PARA TÍTULOS Y TEXTOS === */

.theme-mdc-new h1[b-24byiur1iz],
.theme-mdc-new h2[b-24byiur1iz],
.theme-mdc-new h3[b-24byiur1iz],
.theme-mdc-new h4[b-24byiur1iz],
.theme-mdc-new h5[b-24byiur1iz],
.theme-mdc-new h6[b-24byiur1iz] {
    font-family: var(--font-secondary) !important;
    color: #fff !important;
}

.theme-mdc-new .form-label[b-24byiur1iz] {
    font-family: var(--font-secondary) !important;
    color: var(--text-color) !important;
    font-weight: 600;
}

.theme-mdc-new .card-title[b-24byiur1iz] {
    font-family: var(--font-secondary) !important;
    color: var(--text-color) !important;
}

.theme-mdc-new p[b-24byiur1iz] {
    font-family: var(--font-secondary);
    color: var(--text-color);
}

.theme-mdc-new small[b-24byiur1iz] {
    font-family: var(--font-secondary);
}

/* Botones de outline */
.theme-mdc-new .btn-outline-primary[b-24byiur1iz] {
    color: var(--producto-btn-comparar-bg-color) !important;
    border-color: var(--producto-btn-comparar-bg-color) !important;
    font-family: var(--font-secondary);
}

.theme-mdc-new .btn-outline-primary:hover[b-24byiur1iz] {
    background-color: var(--producto-btn-comparar-bg-color) !important;
    border-color: var(--producto-btn-comparar-bg-color) !important;
    color: white !important;
}

.theme-mdc-new .btn-outline-secondary[b-24byiur1iz] {
    color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    font-family: var(--font-secondary);
}

.theme-mdc-new .btn-outline-secondary:hover[b-24byiur1iz] {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: white !important;
}

.theme-mdc-new .btn-outline-danger[b-24byiur1iz] {
    font-family: var(--font-secondary);
    color: white !important;
    border-color: var(--tertiary-color) !important;
    background-color: var(--tertiary-color) ;
}

.theme-mdc-new .btn-outline-danger:hover[b-24byiur1iz] {
    background-color:var(--tertiary-color) !important;
    border-color: #BDAA8E !important;
    color: white !important;
}

/* Input y select */
.theme-mdc-new .form-control[b-24byiur1iz],
.theme-mdc-new .form-select[b-24byiur1iz] {
    font-family: var(--font-secondary) !important;
    color: var(--text-color) !important;
}

.theme-mdc-new .input-group-text[b-24byiur1iz] {
    height: 44px!important;
    background-color: var(--bg-tertiary);
    border-color: var(--primary-color);
    color: var(--producto-btn-comparar-bg-color);
}

/* Paginación */
.theme-mdc-new .pagination .page-link[b-24byiur1iz] {
    color: var(--producto-btn-comparar-bg-color);
    font-family: var(--font-secondary);
}

.theme-mdc-new .pagination .page-item.active .page-link[b-24byiur1iz] {
    background-color: var(--secondary-color);
    color: white    ;
    border-color: var(--producto-btn-comparar-bg-color);
}

/* Alertas */
.theme-mdc-new .alert[b-24byiur1iz] {
    font-family: var(--font-secondary);
    border-radius: var(--banner-marca-border-radius);
}

/* Card header */
.theme-mdc-new .card-header[b-24byiur1iz] {
    background-color: var(--bg-tertiary);
    border-bottom: 2px solid var(--producto-btn-comparar-bg-color);
    font-family: var(--font-secondary);
}
.card-body[b-24byiur1iz] {
    min-height: 100vh;
    border-radius: var(--btn-border-radius);
}
.tab-content[b-24byiur1iz] {
    border-radius: var(--btn-border-radius);
}
.card-body-login[b-24byiur1iz] {
    max-height: 500px;
    overflow-y: auto;
    padding: 2rem;
    border-radius: var(--btn-border-radius);
}
.theme-mdc-new .login-card .card-header[b-24byiur1iz] {
    border-radius: var(--btn-border-radius) !important;
}
.card-header.text-center[b-24byiur1iz]{
    border-radius: var(--btn-border-radius) !important;
}
.btn[b-24byiur1iz] {
    border-radius: var(--btn-border-radius) !important;
}
.btn-success[b-24byiur1iz] {
    background-color: var(--producto-btn-comparar-bg-color) !important;
    border-color: var(--producto-btn-comparar-bg-color) !important;
    color: white !important;
}
.theme-mdc-new .btn-outline-danger:hover[b-24byiur1iz]{
    border-color: var(--tertiary-color) !important;
    color:var(--primary-color) !important;
    background-color: transparent;
}
.theme-mdc-new .btn-outline-danger[b-24byiur1iz]{
    color:var(--primary-color) !important;
    background-color: transparent;
    font-size: 1.2rem;
    font-weight: 650!important;
    border:none !important;
}
#productos-tab[b-24byiur1iz], #filtros-tab[b-24byiur1iz], #respuestas-tab[b-24byiur1iz], #sucursales-tab[b-24byiur1iz] {
    font-family: var(--font-secondary);
}

/*#searchText, #brandFilter, #filterSearchText, #respuestaSearchText {
    background-image: none !important;
}*/
#searchText[b-24byiur1iz], #filterSearchText[b-24byiur1iz], #respuestaSearchText[b-24byiur1iz] {
    background-image: none !important;
}

#brandFilter[b-24byiur1iz] {
    cursor: pointer;
}
.ajustes-card[b-24byiur1iz] {
    background-color: var(--tertiary-color);
}
.ajustes-form[b-24byiur1iz]{
    background-color: #fff;
}

/* Botones CSV */
.theme-mdc-new .btn.activar-filtros[b-24byiur1iz],
.theme-mdc-new .btn.desactivar-filtros[b-24byiur1iz] {
    font-family: var(--font-secondary);
    font-size: small;
}

.theme-mdc-new .btn.activar-filtros[b-24byiur1iz] {
    background-color: var(--producto-btn-comparar-bg-color);
    border-color: var(--producto-btn-comparar-bg-color);
    color: white;
}

.theme-mdc-new .btn.desactivar-filtros[b-24byiur1iz] {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
}

/* Alerta de importación CSV */
.theme-mdc-new .alert-success[b-24byiur1iz] {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.theme-mdc-new .alert-danger[b-24byiur1iz] {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}
/* _content/MabeWeb/Components/Pages/BackOffice/Producto/BackOfficeProducto.razor.rz.scp.css */
/* === ESTILOS PARA ADMIN PRODUCTO - TEMA MDC === */

.theme-mdc-new .container-fluid[b-f4irj8ifwu] {
    padding: 0 8rem;
    min-width: 100vh;
}

/* Todos los elementos: forzar border-radius del tema */
.theme-mdc-new *[b-f4irj8ifwu],
.theme-mdc-new *[b-f4irj8ifwu]:before,
.theme-mdc-new *[b-f4irj8ifwu]:after {
    border-radius: var(--btn-border-radius) !important;
}

/* === TIPOGRAFÍAS === */

/* Títulos principales */
.theme-mdc-new h1[b-f4irj8ifwu],
.theme-mdc-new h2[b-f4irj8ifwu],
.theme-mdc-new h3[b-f4irj8ifwu],
.theme-mdc-new h4[b-f4irj8ifwu],
.theme-mdc-new h5[b-f4irj8ifwu],
.theme-mdc-new h6[b-f4irj8ifwu] {
    font-family: var(--font-primary) !important;
    color: #fff !important;
    font-weight: 400;
}

/* Textos generales */
.theme-mdc-new p[b-f4irj8ifwu] {
    font-family: var(--font-secondary);
    color: black;
}


.theme-mdc-new small[b-f4irj8ifwu] {
    font-family: var(--font-secondary);
}

/* Labels de formularios */
.theme-mdc-new .form-label[b-f4irj8ifwu] {
    font-family: var(--font-secondary) !important;
    color: var(--text-color) !important;
    font-weight: 600;
}

.theme-mdc-new .fw-bold[b-f4irj8ifwu] {
    font-family: var(--font-secondary) !important;
    font-weight: 700 !important;
}

.theme-mdc-new .form-control-plaintext[b-f4irj8ifwu] {
    font-family: var(--font-secondary);
    color: var(--text-color);
}

.theme-mdc-new .form-text[b-f4irj8ifwu] {
    font-family: var(--font-secondary);
    font-size: 0.875rem;
}

/* === BOTONES === */

/* Botón de regresar/atrás */
.theme-mdc-new .btn-regresar-catalogo[b-f4irj8ifwu] {
    font-family: var(--font-secondary);
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: var(--btn-border-radius);
    transition: all 0.3s ease;
    font-weight: 500;
}

.theme-mdc-new .btn-regresar-catalogo:hover[b-f4irj8ifwu] {
    color: var(--primary-color);
    background-color: var(--bg-tertiary);
}

/* Botones primarios */
.theme-mdc-new .btn.btn-primary[b-f4irj8ifwu] {
    /*background-color: var(--primary-color);*/
    background-color: var(--tertiary-color);
    border-color: var(--tertiary-color);
    font-family: var(--font-secondary);
    color: white;
    border-radius: var(--btn-border-radius);
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
}

.theme-mdc-new .btn.btn-primary:hover:not(:disabled)[b-f4irj8ifwu] {
    background-color: var(--btn-menu-color);
    border-color: var(--btn-menu-color);
    transform: translateY(-1px);
}

.theme-mdc-new .btn.btn-primary:disabled[b-f4irj8ifwu] {
    background-color: #6c757d;
    border-color: #6c757d;
    opacity: 0.65;
}

/* Botones outline primary */
.theme-mdc-new .btn-outline-primary[b-f4irj8ifwu] {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    font-family: var(--font-secondary);
    background-color: transparent;
    border-radius: var(--btn-border-radius);
    font-weight: 500;
    transition: all 0.3s ease;
}

.theme-mdc-new .btn-outline-primary:hover:not(:disabled)[b-f4irj8ifwu] {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
    transform: translateY(-1px);
}

.theme-mdc-new .btn-outline-primary.btn-sm[b-f4irj8ifwu] {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
}
.text-primary[b-f4irj8ifwu] {
    color: var(--secondary-color) !important;
}

/* Botones outline secondary */
.theme-mdc-new .btn-outline-secondary[b-f4irj8ifwu] {
    color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    font-family: var(--font-secondary);
    background-color: transparent;
    border-radius: var(--btn-border-radius);
    font-weight: 500;
    transition: all 0.3s ease;
}

.theme-mdc-new .btn-outline-secondary:hover:not(:disabled)[b-f4irj8ifwu] {
    filter: brightness(1.2);
}

/* Botones outline danger */
.theme-mdc-new .btn-outline-danger[b-f4irj8ifwu] {
    font-family: var(--font-secondary);
    color: var(--tertiary-color) !important;
    border-color: var(--tertiary-color) !important;
    background-color: transparent;
    border-radius: var(--btn-border-radius);
    font-weight: 500;
    transition: all 0.3s ease;
}

.theme-mdc-new .btn-outline-danger:hover:not(:disabled)[b-f4irj8ifwu] {
    background-color: var(--tertiary-color) !important;
    border-color: var(--tertiary-color) !important;
    color: white !important;
    transform: translateY(-1px);
}

/* Botón de danger para tarjeta de acceso denegado */
.theme-mdc-new .card-header.bg-danger[b-f4irj8ifwu] {
    background-color: #dc3545 !important;
}

/* === BADGES === */

.theme-mdc-new .badge[b-f4irj8ifwu] {
    font-family: var(--font-secondary);
    font-weight: 600;
    padding: 0.35em 0.65em;
    border-radius: var(--btn-border-radius);
}

.theme-mdc-new .badge.bg-secondary[b-f4irj8ifwu] {
    background-color: var(--tertiary-color) !important;
}

.theme-mdc-new .badge.bg-primary[b-f4irj8ifwu] {
    background-color: var(--primary-color) !important;
}

.theme-mdc-new .badge.bg-success[b-f4irj8ifwu] {
    background-color: var(--tertiary-color) !important;
}

.theme-mdc-new .badge.bg-danger[b-f4irj8ifwu] {
    background-color: #dc3545 !important;
}

/* === CARDS === */

.theme-mdc-new .card[b-f4irj8ifwu] {
    border: none;
    border-radius: var(--btn-border-radius);
    background-color: var(--bg-color);
}

.theme-mdc-new .card-header[b-f4irj8ifwu] {
    background-color: var(--btn-menu-color);
    border-bottom: 2px solid rgba(189, 170, 142, 0.3);
    font-family: var(--font-primary);
    padding: 1rem 1.5rem;
}

.theme-mdc-new .card-title[b-f4irj8ifwu] {
    font-family: var(--font-secondary)! important;
    color: white!important;
    margin-bottom: 0;
    font-weight: 600;
}

.theme-mdc-new .card-body[b-f4irj8ifwu] {
    padding: 1.5rem;
    background-color: var(--mdc-sand-yellow);
    font-family: var(--font-secondary);
}
.theme-mdc-new .card-body-2[b-f4irj8ifwu] {
    padding: 1.5rem;
    background-color: white;
    font-family: var(--font-secondary);
}

.theme-mdc-new .card-footer[b-f4irj8ifwu] {
    background-color: var(--bg-tertiary);
    border-top: 1px solid rgba(0, 0, 0, 0.125);
    padding: 1rem 1.5rem;
}

/* === FORMULARIOS === */

.theme-mdc-new .form-control[b-f4irj8ifwu],
.theme-mdc-new .form-select[b-f4irj8ifwu] {
    font-family: var(--font-secondary) !important;
    color: var(--text-color) !important;
    border-radius: var(--btn-border-radius);
}

.theme-mdc-new .form-control:focus[b-f4irj8ifwu],
.theme-mdc-new .form-select:focus[b-f4irj8ifwu] {
    border-color: var(--primary-color);
}

.theme-mdc-new .input-group-text[b-f4irj8ifwu] {
    background-color: var(--bg-tertiary);
    border-color: var(--form-check-input-border-color-unchecked);
    color: var(--primary-color);
    font-family: var(--font-secondary);
}
 

/* === ALERTAS === */

.theme-mdc-new .alert[b-f4irj8ifwu] {
    font-family: var(--font-secondary);
    border-radius: var(--btn-border-radius);
    border: none;
}

.theme-mdc-new .alert-heading[b-f4irj8ifwu] {
    font-family: var(--font-primary) !important;
    font-weight: 600;
}

.theme-mdc-new .alert-danger[b-f4irj8ifwu] {
    background-color: rgba(220, 53, 69, 0.1);
    color: #721c24;
}

.theme-mdc-new .alert-success[b-f4irj8ifwu] {
    background-color: rgba(40, 167, 69, 0.1);
    color: #155724;
}

.theme-mdc-new .alert-info[b-f4irj8ifwu] {
    background-color: rgba(189, 170, 142, 0.1);
    color: var(--tertiary-color);
}




/* === TABLAS === */

.theme-mdc-new .table[b-f4irj8ifwu] {
    font-family: var(--font-secondary);
    color: var(--text-color);
}

.theme-mdc-new .table th[b-f4irj8ifwu] {
    font-weight: 600;
    background-color: var(--primary-color);
    color: white;
    font-family: var(--font-secondary);
}

.theme-mdc-new .table td[b-f4irj8ifwu] {
    vertical-align: middle;
}

/* === ENLACES === */

.theme-mdc-new a[b-f4irj8ifwu] {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.theme-mdc-new a:hover[b-f4irj8ifwu] {
    color: var(--secondary-color);
}

/* === VALIDACIÓN === */

.theme-mdc-new .validation-message[b-f4irj8ifwu]{
    font-family: var(--font-secondary);
    font-size: 0.875rem;
    color: #dc3545 !important;
}
#accessDeniedHeader[b-f4irj8ifwu] {
    color: white !important;
}
/* === ICONOS === */

.theme-mdc-new i[b-f4irj8ifwu],
.theme-mdc-new svg[b-f4irj8ifwu] {
    vertical-align: middle;
}

/* === CONTENEDOR DEL FORMULARIO DE RENDER === */

.theme-mdc-new .render-form-container[b-f4irj8ifwu] {
    background-color: var(--bg-color);
}

/* === DIVISIONES Y ESPACIADO === */

.theme-mdc-new hr[b-f4irj8ifwu] {
    border-color: var(--bg-tertiary);
    opacity: 0.5;
}

.theme-mdc-new .d-grid .btn[b-f4irj8ifwu] {
    max-width: 100%;
}

/* === ACCESIBILIDAD Y ESTADOS === */

.theme-mdc-new .visually-hidden[b-f4irj8ifwu] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.theme-mdc-new .thumbnail-wrapper.active[b-f4irj8ifwu] {
    border: 2px solid var(--tertiary-color) !important;
}
/* _content/MabeWeb/Components/Pages/Catalogo/Catalogo.razor.rz.scp.css */
/* .catalogo .compare-button:active,
.catalogo .catalog-compare-button:active {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  filter: brightness(0.95);
}
.catalogo .catalog-compare-button {
  background-color: var(--primary-color);
  color: #fff;
}
.catalogo .catalog-cancel-button {
  background-color: transparent;
  color: var(--text-color);
  border: 1.5px solid var(--text-color);
}
.catalogo .catalog-cancel-button:hover {
  background-color: var(--text-color);
  color: #fff;
}

.catalogo .btn-compare {
  background-color: var(--primary-color);
  color: #fff;
}
.catalogo .btn-compare:active {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  filter: brightness(0.95);
}
.catalogo .btn-cancel {
  background-color: transparent;
  color: var(--text-color);
  border: 1.5px solid var(--text-color);
}
.catalogo .btn-cancel:hover {
  background-color: var(--text-color);
  color: #fff;
} */
.cafe-banner[b-6tjqo9vwsc] {
    border-radius: 0  ;
  }
  .mabe-banner[b-6tjqo9vwsc] {
    border-radius: 5px  ;
  }
  .profile-banner[b-6tjqo9vwsc] {
    border-radius: 0  ;
  }
  .object-fit-cover[b-6tjqo9vwsc] {
    object-fit: contain;
    height: 100%;
    width: 100%;
    display: block;
  }
  .catalogo .compare-bar[b-6tjqo9vwsc]{
    z-index: 100;
  }
/* opcional: asegurar contraste con el tema */
/* .catalogo .compare-bar.bg-body { background-color: var(--bg-color) !important; } */
/* Nuevas clases locales para reemplazar estilos inline */

.catalogo .search-input[b-6tjqo9vwsc] {
  color: black;
  border-radius: 0;
  font-size: 18px !important;
}

[class*="theme-"] .catalogo .search-input[b-6tjqo9vwsc]::placeholder, [class*="theme-"] .catalogo .search-input[b-6tjqo9vwsc] {
  color: #000;
}

[class*="theme-iomabe"] .catalogo .search-input[b-6tjqo9vwsc]::placeholder, [class*="theme-iomabe"] .catalogo .search-input[b-6tjqo9vwsc] {
  color: #fff;
}

.catalogo .search-input:focus[b-6tjqo9vwsc] {
  border: none !important;
}

.catalogo .catalog-spacer[b-6tjqo9vwsc] {
  height: 108px;
}

.catalogo .compare-actions[b-6tjqo9vwsc] {
  min-width: 225px;

  @media (min-width: 990px) {
    max-width: 225px;[b-6tjqo9vwsc]
  }
}

.contenedor-catalogo[b-6tjqo9vwsc] {
  @media (max-width: 990px) {
    margin-bottom: 5rem;[b-6tjqo9vwsc]
  }
}
/*mdc*/
[class*="theme-mdc-new"].small.font-secondary.chip-title[b-6tjqo9vwsc] {
  color: var(--secondary-color);
}
[class*="theme-mdc-new"].mb-3.font-primary.catalog-title[b-6tjqo9vwsc] {
  color: #fff;
}
.border-bottom[b-6tjqo9vwsc] {
  border: 0px !important;
}
/* _content/MabeWeb/Components/Pages/Encargados/Encargados.razor.rz.scp.css */

/* Variables CSS */
:root[b-9hm6b7jtev] {

}

/* Reset y Base */
*[b-9hm6b7jtev] {
    box-sizing: border-box;
    font-family: 'Klarheit Kurrent', sans-serif;
}

body[b-9hm6b7jtev] {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
    color: var(--dark-color);
    background-color: var(--light-color);
}

/* Layout Principal */
.theme-mdc-new[b-9hm6b7jtev] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.theme-mdc-new .container-xxl[b-9hm6b7jtev] {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* Logo */
.logo-container[b-9hm6b7jtev] {
    margin-bottom: 2rem;
}

.logo[b-9hm6b7jtev] {
    width: 100px;
    height: auto;
}

/* Card */
.theme-mdc-new .card[b-9hm6b7jtev] {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--btn-border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.theme-mdc-new .card-header[b-9hm6b7jtev] {
    background-color: white;
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem;
    text-align: center;
}

.theme-mdc-new .card-header h4[b-9hm6b7jtev] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dark-color);
}

.theme-mdc-new .card-body[b-9hm6b7jtev] {
    padding: 2rem;
}

/* Formularios */
.form-section[b-9hm6b7jtev] {
    margin-bottom: 2rem;
}

.form-section:last-child[b-9hm6b7jtev] {
    margin-bottom: 0;
}

.form-group[b-9hm6b7jtev] {
    margin-bottom: 1.5rem;
}

.form-group:last-child[b-9hm6b7jtev] {
    margin-bottom: 0;
}

.theme-mdc-new .form-label[b-9hm6b7jtev] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--dark-color);
    font-size: 0.875rem;
}

.theme-mdc-new .form-control[b-9hm6b7jtev] {
    display: block;
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--dark-color);
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: var(--btn-border-radius);
}

.theme-mdc-new .form-control:focus[b-9hm6b7jtev] {
    border-color: var(--primary-color);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Botones */
.theme-mdc-new .btn[b-9hm6b7jtev] {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--btn-border-radius);
    min-width: 120px;
}

.theme-mdc-new .btn-primary[b-9hm6b7jtev] {
    color: white;
    background-color: #A0998E;
    border-color: #A0998E;
}

.theme-mdc-new .btn-secondary[b-9hm6b7jtev] {
    color: #000;
    background-color: #fff;
    border-color: #ccc;
}

.theme-mdc-new .btn-success[b-9hm6b7jtev] {
    color: white;
    background-color: var(--success-color);
    border-color: var(--success-color);
}

.theme-mdc-new .btn-danger[b-9hm6b7jtev] {
    color: white;
    background-color: var(--danger-color);
    border-color: var(--danger-color);
}

/* Layouts específicos */
.options-grid[b-9hm6b7jtev] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 300px;
    margin: 0 auto;
}

.form-actions[b-9hm6b7jtev] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.form-actions-right[b-9hm6b7jtev] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* Alertas */
.theme-mdc-new .alert[b-9hm6b7jtev] {
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--btn-border-radius);
}

.theme-mdc-new .alert-danger[b-9hm6b7jtev] {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

/* Títulos */
.theme-mdc-new h5[b-9hm6b7jtev] {
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dark-color);
}

/* Tabla */
.theme-mdc-new .table[b-9hm6b7jtev] {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
}

.theme-mdc-new .table th[b-9hm6b7jtev],
.theme-mdc-new .table td[b-9hm6b7jtev] {
    padding: 0.75rem;
    vertical-align: middle;
    border-top: 1px solid var(--border-color);
}

.theme-mdc-new .table th[b-9hm6b7jtev] {
    background-color: var(--light-color);
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
}

.theme-mdc-new .table-striped tbody tr:nth-of-type(odd)[b-9hm6b7jtev] {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Contenedor de creación de asesor */
.theme-mdc-new .border.rounded.bg-light[b-9hm6b7jtev] {
    background-color: var(--light-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--btn-border-radius) !important;
    padding: 1.5rem !important;
}

.theme-mdc-new h6[b-9hm6b7jtev] {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark-color);
}
.btn-warning[b-9hm6b7jtev] {
    color: var(--primary-color);
    background: transparent;
    font-size: large;
    font-weight: 600;
}
/* Responsive */
@media (max-width: 768px) {
    .theme-mdc-new .card-body[b-9hm6b7jtev] {
        padding: 1rem;
    }
    
    .form-actions[b-9hm6b7jtev] {
        flex-direction: column;
        align-items: center;
    }
    
    .theme-mdc-new .btn[b-9hm6b7jtev] {
        width: 100%;
        max-width: 200px;
    }
}
/* _content/MabeWeb/Components/Pages/FormularioMovil.razor.rz.scp.css */
:root[b-k5t287y8c1] {
    --bs-card-border-radius: 0px;
    --formulario-bg-color: #BDAA8E;
}

/* Contenedor específico del formulario móvil */
.formulario-movil-container[b-k5t287y8c1] {
    background-color: var(--formulario-bg-color) !important;
    min-height: 100vh !important;
}

/* Fondo principal del formulario móvil */
[b-k5t287y8c1] .admin-container {
    background-color: var(--formulario-bg-color) !important;
    min-height: 100vh !important;
    padding: 0 !important;
}

[b-k5t287y8c1] body {
    background-color: var(--formulario-bg-color) !important;
    min-height: 100vh !important;
}

[b-k5t287y8c1] html {
    background-color: var(--formulario-bg-color) !important;
    min-height: 100vh !important;
}

[b-k5t287y8c1] .page {
    background-color: var(--formulario-bg-color) !important;
    min-height: 100vh !important;
}

/* Contenedor del formulario */
.container-fluid[b-k5t287y8c1] {
    background-color: var(--formulario-bg-color) !important;
    min-height: 100vh;
    padding: 1rem !important;
}

.btn-enviar[b-k5t287y8c1] {
    background-color: #BDAA8E;
    color: #f5f5f5!important;
    border-radius: 0px!important;
}
.btn-enviar:hover[b-k5t287y8c1] {
    color: #fff!important;
    border-radius: 0px!important;
}
.card[b-k5t287y8c1]{
    font-family: var(--font-secondary);
    border-radius: 0px 0px 0px 0px!important;
    background-color: transparent !important;
    border: none !important;
}

.card-body[b-k5t287y8c1] {
    background-color: white !important;
    border-radius: 0px !important;
    margin: 0 !important;
}

select[b-k5t287y8c1]{
    border-radius: 0px!important;
}
.no-radius[b-k5t287y8c1],
.no-radius *[b-k5t287y8c1] {
    border-radius: 0 !important;
}
.card-header[b-k5t287y8c1] {
    background-color: #BDAA8E;
    color: #f5f5f5;
    border-radius: 0px 0px 0px 0px!important;
}
/* Logo */
.logo-container[b-k5t287y8c1] {
    margin-bottom: 2rem;
}

.logo[b-k5t287y8c1] {
    width: 100px;
    height: auto;
}

/* Estilos específicos para móviles */
@media (max-width: 768px) {
    .formulario-movil-container[b-k5t287y8c1],
    [b-k5t287y8c1] .admin-container,
    [b-k5t287y8c1] body,
    [b-k5t287y8c1] html,
    [b-k5t287y8c1] .page {
        background-color: var(--formulario-bg-color) !important;
        min-height: 100vh !important;
    }
    
    .container-fluid[b-k5t287y8c1] {
        max-width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}
/* _content/MabeWeb/Components/Pages/InicioViejo/Inicio.razor.rz.scp.css */
/* Estilos adicionales para Bootstrap en la página Home */

/* Personalización del header */
.display-4[b-skrdd1bmu9] {
    color: #007298 !important;
}

.lead[b-skrdd1bmu9] {
    font-size: 1.3rem;
    line-height: 1.6;
}

/* Grid adaptativo para cuando el sidebar está abierto */
.main-wrapper.sidebar-open .row[b-skrdd1bmu9] {
    --bs-gutter-x: 1rem;
}

/* Adaptación del grid cuando el sidebar está abierto */
@media (min-width: 769px) {
    .main-wrapper.sidebar-open .col-xl-3[b-skrdd1bmu9] {
        flex: 0 0 auto;
        width: 33.333333%; /* 3 columnas máximo */
    }
    
    .main-wrapper.sidebar-open .col-lg-4[b-skrdd1bmu9] {
        flex: 0 0 auto;
        width: 33.333333%; /* 3 columnas máximo */
    }
    
    /* Ajustar header cuando sidebar está abierto */
    .main-wrapper.sidebar-open .display-4[b-skrdd1bmu9] {
        font-size: 1.8rem !important;
    }
    
    .main-wrapper.sidebar-open .lead[b-skrdd1bmu9] {
        font-size: 1.1rem !important;
    }
}

/* Para pantallas muy grandes con sidebar abierto, máximo 3 columnas */
@media (min-width: 1400px) {
    .main-wrapper.sidebar-open .col-xl-3[b-skrdd1bmu9],
    .main-wrapper.sidebar-open .col-lg-4[b-skrdd1bmu9] {
        flex: 0 0 auto;
        width: 33.333333%; /* Forzar 3 columnas */
    }
}

/* Media queries para responsividad del grid */
@media (max-width: 576px) {
    .display-4[b-skrdd1bmu9] {
        font-size: 1.8rem !important;
    }
    
    .lead[b-skrdd1bmu9] {
        font-size: 1.1rem !important;
    }
}

/* Optimización para pantallas de 64 pulgadas */
@media screen and (min-width: 1080px) and (min-height: 800px) {
    
    /* Header principal más grande y prominente */
    .display-4[b-skrdd1bmu9] {
        font-size: 4rem !important;
        font-weight: 700;
        margin-bottom: 2rem;
        text-shadow: 2px 2px 4px rgba(0, 114, 152, 0.1);
    }
    
    .lead[b-skrdd1bmu9] {
        font-size: 1.8rem !important;
        line-height: 1.7;
        margin-bottom: 3rem;
        max-width: 900px;
    }
    
    /* Sección de bienvenida más espaciosa */
    .text-center.py-5[b-skrdd1bmu9] {
        padding: 4rem 0 !important;
        margin-bottom: 3rem !important;
    }
    
    /* Grid de categorías optimizado */
    .row.g-4[b-skrdd1bmu9] {
        --bs-gutter-x: 2.5rem;
        --bs-gutter-y: 2.5rem;
    }
    
    /* Columnas más grandes para mejor visibilidad */
    .col-xl-3[b-skrdd1bmu9], .col-lg-4[b-skrdd1bmu9], .col-md-6[b-skrdd1bmu9] {
        flex: 0 0 auto;
        width: 25%; /* 4 columnas en pantallas grandes */
        margin-bottom: 2rem;
    }
    
    /* CategoryCards más grandes */
    .col-xl-3 .card[b-skrdd1bmu9],
    .col-lg-4 .card[b-skrdd1bmu9],
    .col-md-6 .card[b-skrdd1bmu9] {
        height: 100%;
        min-height: 350px;
        border-radius: 20px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        transition: all 0.4s ease;
    }
    
    .col-xl-3 .card:hover[b-skrdd1bmu9],
    .col-lg-4 .card:hover[b-skrdd1bmu9],
    .col-md-6 .card:hover[b-skrdd1bmu9] {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    }
    
    /* Ajustes cuando hay sidebar */
    .main-wrapper.sidebar-open .col-xl-3[b-skrdd1bmu9],
    .main-wrapper.sidebar-open .col-lg-4[b-skrdd1bmu9] {
        width: 33.333333%; /* 3 columnas con sidebar */
    }
    
    .main-wrapper.sidebar-open .display-4[b-skrdd1bmu9] {
        font-size: 3rem !important;
    }
    
    .main-wrapper.sidebar-open .lead[b-skrdd1bmu9] {
        font-size: 1.5rem !important;
    }
}

/* Para resolución exacta 1920x1080 */
@media screen and (width: 1920px) and (height: 1080px) {
    
    .display-4[b-skrdd1bmu9] {
        font-size: 5rem !important;
    }
    
    .lead[b-skrdd1bmu9] {
        font-size: 2.2rem !important;
        max-width: 1200px;
    }
    
    .text-center.py-5[b-skrdd1bmu9] {
        padding: 5rem 0 !important;
        margin-bottom: 4rem !important;
    }
    
    .row.g-4[b-skrdd1bmu9] {
        --bs-gutter-x: 3rem;
        --bs-gutter-y: 3rem;
    }
    
    /* En resolución nativa, usar más espacio horizontal */
    .container-fluid[b-skrdd1bmu9] {
        max-width: 85%;
        margin: 0 auto;
    }
    
    /* Cards aún más grandes para resolución nativa */
    .col-xl-3 .card[b-skrdd1bmu9],
    .col-lg-4 .card[b-skrdd1bmu9],
    .col-md-6 .card[b-skrdd1bmu9] {
        min-height: 400px;
        border-radius: 25px;
    }
    
    /* Con sidebar en resolución nativa */
    .main-wrapper.sidebar-open .container-fluid[b-skrdd1bmu9] {
        max-width: 95%;
    }
}

/* Mejoras de accesibilidad para pantallas grandes */
@media screen and (min-width: 1921px) {
    
    /* Mejor contraste y legibilidad */
    .display-4[b-skrdd1bmu9] {
        letter-spacing: -0.02em;
        font-size: 8rem !important;
    }
    
    .lead[b-skrdd1bmu9] {
        letter-spacing: 0.01em;
    }
    
    /* Enlaces más visibles */
    a[b-skrdd1bmu9] {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
    }
    
    a:hover[b-skrdd1bmu9] {
        text-decoration-thickness: 3px;
    }
    
    /* Focus mejorado */
    .card:focus-within[b-skrdd1bmu9] {
        outline: 4px solid #007298;
        outline-offset: 4px;
    }
}
/* _content/MabeWeb/Components/Pages/Inicio/Inicio.razor.rz.scp.css */
/* Tipografía y tamaños responsivos para la página de inicio (sin cambiar colores) */

/* Título principal */
.inicio-title[b-tk1jvbbazh] {
	font-size: clamp(1.25rem, 3.5vw, 2rem);
	line-height: 1.2;
	margin-bottom: 0.25rem;
}

/* Contenedor del selector (botones) - ancho máximo sin fijar px */
.selector-container[b-tk1jvbbazh] {
	max-width: 720px;
}

/* Tamaños de los botones del selector */
.grupo-botones-selector-inicial .btn-selector-inicial[b-tk1jvbbazh] {
	font-size: clamp(0.95rem, 2.2vw, 1.125rem);
	padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.75rem, 2vw, 1rem);
	min-height: 44px;
	/* accesibilidad tactil */
}

.grupo-botones-selector-inicial[b-tk1jvbbazh] {
	overflow: hidden;
	box-shadow: rgba(0, 0, 0, .35) 0 4px 15px;
	border-radius: 12px;
}

/* Ajustes en pantallas pequeñas */
@media (max-width: 575.98px) {
	.selector-container[b-tk1jvbbazh] {
		max-width: 100%;
	}
}
/* _content/MabeWeb/Components/Pages/ListaDeDeseos/CrearProyectosSection.razor.rz.scp.css */
/* Estilos de tema para botones */
[class*="theme-"] button[b-8s93a0it03], [class*="theme-"] .btn[b-8s93a0it03] {
    color: #f5f5f5;
    background-color:#BDAA8E!important;
    border-color: #BDAA8E!important;
}
[class*="theme-"] .modal-header[b-8s93a0it03]{
    color: var(--text-color);
}
.form-label[b-8s93a0it03] {
    color: var(--text-color);}
.btn-close .editar-proyecto[b-8s93a0it03]{
    color: #f5f5f5!important;
}
.btn-close[b-8s93a0it03]{
    background-color: transparent!important;
}

button.btn-close.editar-proyecto[b-8s93a0it03] {
    color: #f5f5f5 !important;
    background-color: transparent !important;
    border: none;
    width: 36px;
    height: 36px;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    opacity: 1;
}

[class*="theme-"] .btn-close .editar-proyecto[b-8s93a0it03]{color:#f5f5f5; opacity:1;}
/* === ESTILOS PARA PROJECT CARDS ===*/
.proyecto-card[b-8s93a0it03] {
    box-shadow: rgba(0, 0, 0, 0.15) 0 4px 15px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    height: 255px;
    border-radius: 12px;
    overflow: hidden;
    background-color: #fff;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Botón glassmorphism en la parte inferior */
.btn-acciones.btn.btn-sm[b-8s93a0it03] {
    transition: all 0.3s ease;
    background-color: transparent !important;
    font-size: 1.8rem;
    border: none !important;
}

/*.proyecto-card:hover button.btn {
    background-color: rgba(255,255,255,0.3) !important;
    border-color: rgba(255,255,255,0.5) !important;
}*/

/* Dropdown menu */
.proyecto-card .dropdown-toggle[b-8s93a0it03] {
    background-color: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(5px);
    width: 40px;
    height: 40px;
    transition: all 0.2s ease;
    z-index: 2;
    border-radius: 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
}

.proyecto-card .dropdown-toggle:hover[b-8s93a0it03] {
    background-color: rgba(255,255,255,1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.proyecto-card .dropdown-toggle:active[b-8s93a0it03] {
    transform: scale(0.95);
}

/* Icono de carpeta - animación en hover 
.proyecto-card:hover i.ph-folder {
    transform: scale(1.1);
}*/

/* Gradiente inferior más visible en hover */
.proyecto-card:hover > div:last-child[b-8s93a0it03] {
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent) !important;
}

/* Responsividad */
@media (max-width: 768px) {
    .proyecto-card[b-8s93a0it03] {
        margin-bottom: 1rem;
        height: 220px;
    }
    
    .proyecto-card .dropdown-toggle[b-8s93a0it03] {
        width: 36px;
        height: 36px;
    }
    
    .proyecto-card h6[b-8s93a0it03] {
        font-size: 0.9rem;
    }
}

/* === Slider de proyectos (se activa cuando hay más de 3) === */
.projects-slider[b-8s93a0it03] { 
    position: relative;
    overflow: visible;
    padding: 0 50px;
}

.slider-track[b-8s93a0it03] {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0.25rem 0.4rem 0.4rem;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;    /* Firefox */
}

.slider-track[b-8s93a0it03]::-webkit-scrollbar { 
    display: none; /* Chrome, Safari */
}

.slider-item[b-8s93a0it03] {
    flex: 0 0 auto;
    width: calc((100% - 2rem) / 3); /* 3 cards con gaps de 1rem */
    scroll-snap-align: start;
    min-width: 280px;
}

.slider-nav[b-8s93a0it03] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(189, 170, 142, 0.95);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    color: #fff;
    z-index: 10;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.2rem;
}

.slider-nav:hover[b-8s93a0it03] { 
    background: rgba(189, 170, 142, 1);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.slider-nav:active[b-8s93a0it03] {
    transform: translateY(-50%) scale(0.95);
}

.slider-nav-left[b-8s93a0it03] { left: 0; }
.slider-nav-right[b-8s93a0it03] { right: 0; }
.dropdown-menu.show[b-8s93a0it03] {
    background-color: #bdaa8e !important;
    backdrop-filter: blur(5px);
    border-radius: 8px !important;
}
/* Tablet: 2 cards */
@media (max-width: 992px) {
    .slider-item[b-8s93a0it03] { 
        width: calc((100% - 1rem) / 2);
        min-width: 260px;
    }
}

/* Mobile: 1 card */
@media (max-width: 576px) {
    .slider-item[b-8s93a0it03] { 
        width: calc(100% - 1rem);
        min-width: auto;
    }
    
    .projects-slider[b-8s93a0it03] {
        padding: 0 45px;
    }
    
    .slider-nav-left[b-8s93a0it03] { left: 2px; }
    .slider-nav-right[b-8s93a0it03] { right: 2px; }
    .slider-nav[b-8s93a0it03] {
        width: 36px;
        height: 36px;
    }
}
/* _content/MabeWeb/Components/Pages/Producto/Producto.razor.rz.scp.css */
.highlights-content[b-kckn1wk4qq],
.features-content[b-kckn1wk4qq],
.description-medium[b-kckn1wk4qq],
.description-long[b-kckn1wk4qq] {
    line-height: 1.6;
}
    
.highlights-content ul[b-kckn1wk4qq],
.features-content ul[b-kckn1wk4qq],
.description-medium ul[b-kckn1wk4qq],
.description-long ul[b-kckn1wk4qq] {
    padding-left: 1.5rem;
}
    
.highlights-content li[b-kckn1wk4qq],
.features-content li[b-kckn1wk4qq],
.description-medium li[b-kckn1wk4qq],
.description-long li[b-kckn1wk4qq] {
    margin-bottom: 0.5rem;
    position: relative;
}

    
.action-buttons[b-kckn1wk4qq] {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}

.feature-item[b-kckn1wk4qq] {
    background-color: #f8f9fa;
}

.feature-item:hover[b-kckn1wk4qq] {
    background-color: #e9ecef;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.carousel-item img[b-kckn1wk4qq] {
    background-color: #f8f9fa;
}

.carousel-item img[style*="display: none"] + div[b-kckn1wk4qq] {
    opacity: 1;
}


.carousel-control-prev:hover[b-kckn1wk4qq],
.carousel-control-next:hover[b-kckn1wk4qq] {
    background: rgba(0, 0, 0, 0.2);
}

.carousel-indicators[b-kckn1wk4qq] {
    margin-bottom: -1rem;
}

.carousel-indicators button[b-kckn1wk4qq] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.carousel-indicators button.active[b-kckn1wk4qq] {
    background-color: #fff;
}
/* Barra superior de información del producto */
.producto-topbar[b-kckn1wk4qq] {
    background: transparent;
    margin-bottom: 10px;
    top: 0;
    z-index: 1;
    border-bottom:none!important;
}
.producto-topbar-content[b-kckn1wk4qq] {
    max-width: 3360px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 0;
}
.producto-nombre[b-kckn1wk4qq] {
    font-size: 1.6rem;
    color: var(--primary-color, #17594A);
    font-weight: 500;
    line-height: 1.2;
}
.producto-sku[b-kckn1wk4qq] {
    font-size: 0.95rem;
    color: var(--text-color, #17594A);
    opacity: 0.7;
    margin-top: 2px;
}

/* Contenedor de detalles del producto */


/* Espaciado de botones */
.mb-4.d-flex.space-between[b-kckn1wk4qq] {
    gap: 1rem;
}

/* Responsive para botones */
@media (max-width: 768px) {
    .btn-producto[b-kckn1wk4qq] {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .mb-4.d-flex.space-between[b-kckn1wk4qq] {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Contenedor de tabs del producto */
.tabs-container[b-kckn1wk4qq] {
    max-width: 590px;
    max-height: 530px;
    overflow: auto;
    background-color: #ffffff;
    position: relative;
    z-index: 1; /* Asegurar que esté por debajo del modal */
}
@media (max-width: 600px) {
    .producto-topbar-content[b-kckn1wk4qq] {
        padding: 0;
        align-items: center;
        text-align: center;
    }
    .producto-nombre[b-kckn1wk4qq] {
        font-size: 1.1rem;
    }
    .producto-sku[b-kckn1wk4qq] {
        font-size: 0.8rem;
    }
    
    /* Ajustes responsive para tabs */
    .tabs-container[b-kckn1wk4qq] {
        max-width: 100%;
        max-height: 450px;
    }
}
 .tabs-container[b-kckn1wk4qq] {
        isolation: isolate;
    }
    .caracteristica-image-container[b-kckn1wk4qq] {
        isolation: isolate;
        width: 100%;
        overflow: hidden;
        background-color: #ffffff;
        position: relative;
        transition: transform 0.2s ease;
    }

    .caracteristica-image-container:hover[b-kckn1wk4qq] {
        transform: scale(1.02);
    }

    .caracteristica-image[b-kckn1wk4qq] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: filter 0.2s ease;
    }

    .caracteristica-image-container:hover .caracteristica-image[b-kckn1wk4qq] {
        filter: brightness(0.8);
    }

    /* Overlay para indicar que la imagen es clickeable */
    .image-overlay[b-kckn1wk4qq] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s ease;
        color: white;
        font-size: 2rem;
    }

    .caracteristica-image-container:hover .image-overlay[b-kckn1wk4qq] {
        opacity: 1;
    }

    .caracteristica-content[b-kckn1wk4qq] {
        padding: 1.2rem 1.5rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .caracteristica-title[b-kckn1wk4qq] {
        color: #2c3e50;
        font-weight: 600;
        margin-bottom: 0.75rem;
        line-height: 1.3;
    }

    .caracteristica-description[b-kckn1wk4qq] {
        color: #6c757d;
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 1rem;
        flex-grow: 1;
    }

    .caracteristica-video[b-kckn1wk4qq] {
        margin-top: auto;
    }

    .caracteristica-video .btn[b-kckn1wk4qq] {
        border-radius: 20px;
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }

    /* Cuando no hay imagen */
    .caracteristica-card:not(:has(.caracteristica-image-container))[b-kckn1wk4qq] {
        padding: 2rem;
    }

    .caracteristica-card:not(:has(.caracteristica-image-container)) .caracteristica-content[b-kckn1wk4qq] {
        padding: 0;
    }

    .caracteristica-card:not(:has(.caracteristica-image-container)) .caracteristica-title[b-kckn1wk4qq] {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .caracteristica-image-container[b-kckn1wk4qq] {
            height: 150px;
        }

        .caracteristica-content[b-kckn1wk4qq] {
            padding: 1rem;
        }

        .caracteristica-title[b-kckn1wk4qq] {
            font-size: 1rem;
        }

        .caracteristica-description[b-kckn1wk4qq] {
            font-size: 0.9rem;
        }
    }

    /* Estados especiales para diferentes tipos de contenido */
    .caracteristica-card.solo-imagen .caracteristica-content[b-kckn1wk4qq] {
        padding: 1rem;
        color: white;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .caracteristica-card.solo-texto[b-kckn1wk4qq] {
        background: transparent !important;
        color: #000;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .caracteristica-card.solo-texto .caracteristica-title[b-kckn1wk4qq] {
        color: #000;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .caracteristica-card.solo-texto .caracteristica-description[b-kckn1wk4qq] {
        color: rgba(255, 255, 255, 0.9);
        font-size: 1rem;
    }
    
    /* Estilos para el carrusel y los botones de navegación */
    .caracteristicas-carousel-container[b-kckn1wk4qq] {
        position: relative;
    }
    
    .caracteristicas-carousel[b-kckn1wk4qq] {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 24px;
        padding: 10px 40px;
        scrollbar-width: thin;
    }

    @media (max-width: 768px) {
        .caracteristicas-carousel[b-kckn1wk4qq] {
            padding: 10px 20px;
        }
    }

/* Botones de acción del producto */
.btn-producto[b-kckn1wk4qq] {
    display: inline-block;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
    line-height: 1.2;
}

.producto-btn-comparar[b-kckn1wk4qq] {
    background-color: var(--primary-color, #007bff);
    color: white;
}

.producto-btn-deseo[b-kckn1wk4qq] {
    background-color: var(--secondary-color, #6c757d);
    color: white;
}

@media (max-width: 768px) {
    .btn-producto[b-kckn1wk4qq] {
        width: 100%;
        padding: 14px 20px;
        font-size: 1.1rem;
    }
}

/* Tabla de especificaciones */
.specification-label[b-kckn1wk4qq] {
    text-align: left;
    font-weight: 600;
    color: var(--text-color, #333);
}

.specification-value[b-kckn1wk4qq] {
    text-align: center;
    color: var(--text-color, #666);
}

.lista-manuales .list-group-item:first-child[b-kckn1wk4qq] {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
} 
/* _content/MabeWeb/Components/Shared/ClienteModal/ClienteModal.razor.rz.scp.css */
/* Forzar fuente compatible con emojis para el select de país */
.mdc-input-codigo[b-m9pxd6tt6g] {
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI', 'Arial', sans-serif !important;
    font-size: 1rem;
}
/* --- Estilos para el Modal --- */

/* Centrado y tamaño del modal */
.modal[b-m9pxd6tt6g] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-width: 100vw;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
}

.modal-dialog[b-m9pxd6tt6g] {
    width: 70vw;
    height: 70vh;
    max-width: 70vw;
    max-height: 70vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-m9pxd6tt6g] {
    border: none;
    border-radius: var(--btn-border-radius)!important;
    padding: 9.5rem !important;
    background-color: #f5f5f569;
    width: 95%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    h4, p, label {
        color: #f5f5f5 !important;
    }

    input[b-m9pxd6tt6g] {
        border-radius: var(--btn-border-radius) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}


.modal-close-btn[b-m9pxd6tt6g] {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background-color: #f1f1f1;
    border-radius: 0px;
    padding: 0.25rem 0.5rem;
}

.modal-close-btn:hover[b-m9pxd6tt6g] {
    background-color: #e0e0e0;
}


/* --- Encabezado y Títulos --- */
.modal-header-custom[b-m9pxd6tt6g] {

    margin-bottom: 3rem;
    color: var(--primary-color);
}

.modal-header-custom .modal-title[b-m9pxd6tt6g] {
    font-size: 1.75rem; /* Tamaño del "¡Bienvenido!" */
    font-weight: bold;
}

.modal-header-custom p[b-m9pxd6tt6g] {
    font-size: 1rem;
}
.form-select .mdc-input .mdc-input-codigo[b-m9pxd6tt6g] {
    max-width: 50px;
    width: 20px;
}

/* --- Campos del Formulario --- */
.form-label[b-m9pxd6tt6g] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #555;
    margin-bottom: 0.35rem; /* Menos espacio entre label e input */
}

.form-control[b-m9pxd6tt6g] {
    background-color: #fdfdfd;
    border: 1px solid #ced4da;
    border-radius: 0px!important; 
    padding: 0.75rem 1rem; 
    height: 3rem!important;
}

.form-control:focus[b-m9pxd6tt6g] {
    border-color: var(--accent-color);
    background-color: #fff;
}

/* --- Botón de Enviar --- */
.btn-enviar[b-m9pxd6tt6g] {
    background-color: #2C363D;
    color: #ffffff!important;
    font-weight: bold;
    padding: 0.85rem 1rem;
    border: none;
    transition: background-color 0.2s ease;
}

.btn-enviar:hover[b-m9pxd6tt6g] {
    color: #ffffff;
}
#codigoPais[b-m9pxd6tt6g] {
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI', 'Arial', sans-serif !important;
    border: none !important;
}
[class*="theme-mdc-new"] .form-control[b-m9pxd6tt6g]{
    border-radius: 0px !important;
}
/* --- Media Queries para Dispositivos Móviles (Tablets y Celulares) --- */
@media (max-width: 768px) {
    
    /* 1. Ajustar el contenedor del diálogo para usar más espacio */
    .modal-dialog[b-m9pxd6tt6g] {
        width: 95vw;       /* Ocupar casi todo el ancho */
        max-width: 95vw;
        height: auto;      /* La altura se ajusta al contenido */
        max-height: 90vh;  /* Evitar que se salga de la pantalla */
        margin: 1rem auto; /* Un poco de margen */
    }

    /* 2. Reducir drásticamente el padding interno */
    .modal-content[b-m9pxd6tt6g] {
        padding: 2rem 1.5rem !important; /* De 9.5rem pasamos a algo manejable */
        width: 100%;
        height: auto;      /* Permitir que crezca según el formulario */
        overflow-y: auto;  /* Scroll interno si el teclado tapa campos */
    }

    /* 3. Ajustar el botón de cerrar */
    .modal-close-btn[b-m9pxd6tt6g] {
        top: 0.75rem;
        right: 0.75rem;
        padding: 0.5rem; /* Aumentar área táctil un poco */
    }

    /* 4. Reducir márgenes y tamaños de fuente en el encabezado */
    .modal-header-custom[b-m9pxd6tt6g] {
        margin-bottom: 1.5rem; /* Reducir espacio debajo del título */
        text-align: center;    /* Centrar textos suele verse mejor en móvil */
    }

    .modal-header-custom .modal-title[b-m9pxd6tt6g] {
        font-size: 1.5rem; /* Texto un poco más pequeño */
    }

    .modal-header-custom p[b-m9pxd6tt6g] {
        font-size: 0.9rem;
    }

    /* 5. Asegurar que los inputs sean fáciles de tocar */
    .form-control[b-m9pxd6tt6g] {
        font-size: 16px; /* Evita que iOS haga zoom automático al escribir */
    }

    /* 6. Ajustar el input de código de país si es necesario */
    .form-select .mdc-input .mdc-input-codigo[b-m9pxd6tt6g] {
        width: auto; /* Dejar que se ajuste */
    }
}

/* --- Ajuste para pantallas MUY pequeñas (iPhone SE, etc) --- */
@media (max-width: 380px) {
    .modal-content[b-m9pxd6tt6g] {
        padding: 1.5rem 1rem !important;
    }
    .modal-header-custom .modal-title[b-m9pxd6tt6g] {
        font-size: 1.3rem;
    }
}
/* _content/MabeWeb/Components/Shared/CompareProductsModal.razor.rz.scp.css */
.modal-card[b-wz881tw7u8]{
  background-color: var(--main-bg-color)!important;
}
.img-fluid[b-wz881tw7u8]{
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}
/* _content/MabeWeb/Components/Shared/DetallesProductoTabs.razor.rz.scp.css */
/* 
    Se eliminó el contenido de este archivo 
    para solucionar el problema de z-index con el modal.
    La regla anterior era:
    * {
        z-index: 2!important;
    }
*/
/* _content/MabeWeb/Components/Shared/EnviarListaDeseosModal/EnviarListaDeseosModal.razor.rz.scp.css */
/* Forzar fuente compatible con emojis para el select de país */
.mdc-input-codigo[b-nm1eclms5i] {
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI', 'Arial', sans-serif !important;
    font-size: 1rem;
}
/* --- Estilos para el Modal --- */

/* Centrado y tamaño del modal */
.modal[b-nm1eclms5i] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-width: 100vw;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
}

.modal-dialog[b-nm1eclms5i] {
    width: 70vw;
    height: 95vh;
    max-width: 70vw;
    max-height: 95vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-nm1eclms5i] {
    border: none;
    border-radius: 0px!important;
    padding: 6rem 2rem !important;
    background-color: #F5F5F5;
    width: 95%;
    height: 98%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.modal-close-btn[b-nm1eclms5i] {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background-color: #f1f1f1;
    border-radius: 0px;
    padding: 0.25rem 0.5rem;
}

.modal-close-btn:hover[b-nm1eclms5i] {
    background-color: #e0e0e0;
}


/* --- Encabezado y Títulos --- */
.modal-header-custom[b-nm1eclms5i] {

    margin-bottom: 3rem;
    color: var(--primary-color);
}

.modal-header-custom .modal-title[b-nm1eclms5i] {
    font-size: 1.75rem; /* Tamaño del "¡Bienvenido!" */
    font-weight: bold;
    color: #333;
}

.modal-header-custom p[b-nm1eclms5i] {
    font-size: 1rem;
    color: var(--primary-color)!important;
}
.form-select .mdc-input .mdc-input-codigo[b-nm1eclms5i] {
    max-width: 50px;
    width: 20px;
}

/* --- Campos del Formulario --- */
.form-label[b-nm1eclms5i] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #555;
    margin-bottom: 0.35rem; /* Menos espacio entre label e input */
}

.form-control[b-nm1eclms5i] {
    background-color: #fdfdfd;
    border: 1px solid #ced4da;
    border-radius: 0px!important; 
    padding: 0.75rem 1rem; 
    height: 3rem!important;
}

.form-control:focus[b-nm1eclms5i] {
    border-color: var(--accent-color);
    background-color: #fff;
}

/* --- Botón de Enviar --- */
.btn-enviar[b-nm1eclms5i] {
    background-color: var(--tertiary-color);
    color: #ffffff!important;
    font-weight: bold;
    padding: 0.85rem 1rem;
    border: none;
    border-radius: 0px;
    transition: background-color 0.2s ease;
}

.btn-enviar:hover[b-nm1eclms5i] {
    background-color: #4a413a;
    color: #ffffff;
}
#codigoPais[b-nm1eclms5i] {
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI', 'Arial', sans-serif !important;
    border: none !important;
}
[class*="theme-mdc-new"] .form-control[b-nm1eclms5i]{
    border-radius: 0px !important;
}
/* _content/MabeWeb/Shared/PausableGif.razor.rz.scp.css */
/* _content/MabeWeb/Shared/ProductCarousel.razor.rz.scp.css */
/* === ESTILOS BASE PARA IMAGEN DEL PRODUCTO (común a todos los temas) === */
.thumbnail-wrapper.active[b-6ypci0bmu5] {
    border: 2px solid var(--secondary-color, #007bff); /* color por defecto, override en tema */
}
.image-counter[b-6ypci0bmu5] {
    position: absolute;
    top: 15px;
    left: 15px;
    color: #7F848B;
    font-size: 1.2rem;
    background-color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 500;
    z-index: 2;
}
.btn-3d[b-6ypci0bmu5] {
    background-color: white;
    font-weight: 600;
    font-size: 1.2rem;
    border: none;
}
/* Contenedor principal del carrusel */
.carousel-container[b-6ypci0bmu5] {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    font-family: 'Arial', sans-serif;
}

/* Contenedor de la imagen principal */
.carousel-main-image-container[b-6ypci0bmu5] {
    margin-bottom: 20px;
}

.main-image-wrapper[b-6ypci0bmu5] {
    position: relative;
    width: 100%;
    background: #ffffff; /* Fondo blanco para las imágenes */
    border-radius: 1px;
    overflow: hidden; /* Ocultar las imágenes que se deslizan fuera del área */
    touch-action: pan-y pinch-zoom; /* Permitir scroll vertical y zoom, controlar horizontal */
    user-select: none; /* Prevenir selección de texto/imagen */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    scroll-behavior: smooth; /* Scroll suave para gestos táctiles */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 520px;
}

.main-image[b-6ypci0bmu5] {
    width: 100%;
    max-height: 520px!important;
    max-width: 520px!important;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.1s ease;
    pointer-events: auto;
    opacity: 1;
    transform: scale(1);
    cursor: pointer;
    z-index: 1;
    position: relative;
    margin: 0 auto;
}

/* Estilos para canvas y contenedores de librerías externas (GIFs) */
.main-image-wrapper .ff-container[b-6ypci0bmu5],
.main-image-wrapper .ff-loading-icon[b-6ypci0bmu5],
.main-image-wrapper .ff-responsive[b-6ypci0bmu5],
.main-image-wrapper .ff-inactive[b-6ypci0bmu5],
.main-image-wrapper .ff-ready[b-6ypci0bmu5] {
    width: 100% !important;
    max-width: 520px !important;
    max-height: 520px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    position: relative !important;
}

.main-image-wrapper canvas[b-6ypci0bmu5],
.main-image-wrapper .ff-canvas[b-6ypci0bmu5] {
    width: 100% !important;
    max-width: 520px !important;
    max-height: 520px !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Forzar dimensiones en elementos con atributos width/height inline */
.main-image-wrapper canvas[width][b-6ypci0bmu5],
.main-image-wrapper canvas[height][b-6ypci0bmu5] {
    width: auto !important;
    height: auto !important;
    max-width: 520px !important;
    max-height: 520px !important;
}

.main-image-wrapper img[b-6ypci0bmu5] {
    width: 100% !important;
    max-width: 520px !important;
    max-height: 520px !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Animación de entrada para nuevas imágenes */
@keyframes fadeInImage-b-6ypci0bmu5 {
    from {
        opacity: 0.7;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.main-image.image-entering[b-6ypci0bmu5] {
    animation: fadeInImage-b-6ypci0bmu5 0.1s ease-out;
}

@keyframes fadeOutImage-b-6ypci0bmu5 {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0.7;
        transform: scale(0.98);
    }
}

.main-image.image-leaving[b-6ypci0bmu5] {
    animation: fadeOutImage-b-6ypci0bmu5 0.1s ease-in;
}

/* Animación de cambiar imagen */
.main-image.image-changing[b-6ypci0bmu5] {
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform: scale(0.98);
    opacity: 0.8;
}

/* Elementos superpuestos */
.image-overlay-elements[b-6ypci0bmu5] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    pointer-events: none;
    z-index: 1; /* Encima de la imagen pero sin bloquear eventos */
}

.image-overlay-elements > *[b-6ypci0bmu5] {
    pointer-events: auto;
}

/* Animación de pulso para el contador */
@keyframes pulseCounter-b-6ypci0bmu5 {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.image-counter.updating[b-6ypci0bmu5] {
    animation: pulseCounter-b-6ypci0bmu5 0.2s ease;
}

/* Botones de navegación */
.carousel-nav[b-6ypci0bmu5] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
   transition: transform 0.2s ease;
    color: #6c757d;
    z-index: 1; /* Mayor que los elementos superpuestos */
}

.carousel-nav:hover:not(:disabled)[b-6ypci0bmu5] {
    background: #6c757d;
    color: white;
    transform: translateY(-50%) scale(1.05);
}

.carousel-nav:active:not(:disabled)[b-6ypci0bmu5] {
    transform: translateY(-50%) scale(0.95);
    transition: transform 0.1s ease;
}

.carousel-nav:disabled[b-6ypci0bmu5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.carousel-nav i[b-6ypci0bmu5] {
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.carousel-prev[b-6ypci0bmu5] {
    left: 12px;
}

.carousel-next[b-6ypci0bmu5] {
    right: 12px;
}

.more-images-overlay[b-6ypci0bmu5] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--tertiary-color, rgba(83, 143, 207, 0.07));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: background-color 0.3s ease;
}

.thumbnail-wrapper.more-images:hover .more-images-overlay[b-6ypci0bmu5] {
    background: var(--tertiary-color, rgba(83, 143, 207, 0.2));
}

.more-count[b-6ypci0bmu5] {
    color: var(primary-color, white);
    font-weight: bold;
    font-size: 14px;
    transition: transform 0.3s ease;
}

.thumbnail-wrapper.more-images:hover .more-count[b-6ypci0bmu5] {
    transform: scale(1.1);
}

/* Placeholder sin imágenes */
.no-images-placeholder[b-6ypci0bmu5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px dashed #dee2e6;
}

/* Estilos específicos por marca */
.carousel-container.marca-cafe .thumbnail-wrapper.active[b-6ypci0bmu5] {
    border-color: #8B4513;
    
}

/* Estilos para estandarizar el modal-header del carousel con el modal de características */
[class*="theme-"] #carouselModal .modal-header[b-6ypci0bmu5] {
    background: white;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.4rem 6rem 0 6rem;

}

/* Centrado vertical del modal */
[class*="theme-"] #carouselModal .modal-dialog[b-6ypci0bmu5] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 1rem);
    margin: 0.5rem auto;
    position: relative;
    left: 0;
    transform: none;
}

.carousel-container.marca-cafe .btn-3d[b-6ypci0bmu5] {
    background: rgba(139, 69, 19, 0.8);
}

.carousel-container.marca-cafe .btn-3d:hover[b-6ypci0bmu5] {
    background: rgba(139, 69, 19, 0.9);
    transform: scale(1.05);
}

.carousel-container.marca-cafe .carousel-nav:hover:not(:disabled)[b-6ypci0bmu5] {
    background: #8B4513;
    color: white;
    transform: translateY(-50%) scale(1.05);
    
}

/* === ESTILOS PARA EL TEMA MABE === */
.theme-mabe .carousel-container .thumbnail-wrapper.active[b-6ypci0bmu5] {
    border-color: var(--secondary-color,#0588AD);
}

.theme-mabe .carousel-container .btn-3d[b-6ypci0bmu5] {
    background: white;
    font-size: 18px;
    font-weight: 700;
    color: var(--mabe-orange, #00526B);
}

.theme-mabe .carousel-container .carousel-nav:hover:not(:disabled)[b-6ypci0bmu5] {
    background: var(--primary-color, #A1DCFF);
    color: var(--mabe-orange, #00526B);
    transform: translateY(-50%) scale(1.05);
}

/* Responsividad */
@media (max-width: 768px) {
    .main-image[b-6ypci0bmu5] {
        height: 300px;
    }
    
    .carousel-nav[b-6ypci0bmu5] {
        width: 35px;
        height: 35px;
    }
    
    .carousel-prev[b-6ypci0bmu5] {
        left: 8px;
    }
    
    .carousel-next[b-6ypci0bmu5] {
        right: 8px;
    }
    
    .thumbnail-wrapper[b-6ypci0bmu5] {
        width: 50px;
        height: 50px;
    }
    
    .thumbnails-container[b-6ypci0bmu5] {
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .main-image[b-6ypci0bmu5] {
        height: 250px;
    }
    
    .thumbnail-wrapper[b-6ypci0bmu5] {
        width: 45px;
        height: 45px;
    }
    
    .image-counter[b-6ypci0bmu5],
    .btn-3d[b-6ypci0bmu5] {
        font-size: 11px;
        padding: 3px 6px;
    }
}

/* Estilos del Modal de Imagen en Pantalla Completa */
.image-modal-overlay[b-6ypci0bmu5] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeInModal-b-6ypci0bmu5 0.3s ease-out forwards;
    backdrop-filter: blur(8px) saturate(0.8);
    -webkit-backdrop-filter: blur(8px) saturate(0.8);
    /* Fallback para navegadores que no soportan backdrop-filter */
    background-attachment: fixed;
}

/* Fallback para navegadores sin soporte de backdrop-filter */
@supports not (backdrop-filter: blur(8px)) {
    .image-modal-overlay[b-6ypci0bmu5] {
        background: rgba(0, 0, 0, 0.9);
    }
}

/* Asegurar que el modal se superponga a todo */
.image-modal-overlay[b-6ypci0bmu5] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 10000 !important; /* Z-index más alto */
}

/* Asegurar que el modal funcione correctamente en diferentes navegadores */
.image-modal-overlay[b-6ypci0bmu5]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    z-index: -1;
}

@keyframes fadeInModal-b-6ypci0bmu5 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


@keyframes scaleInModal-b-6ypci0bmu5 {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Estilos para el botón de cerrar el modal */
[class*="theme-"] #carouselModal .btn-close[b-6ypci0bmu5] {
    width: 2.1rem;
    height: 2.1rem;
    font-size: 2.2rem;
    color: var(--text-color);
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    position: relative;
    z-index: 11;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

[class*="theme-"] #carouselModal .btn-close:hover[b-6ypci0bmu5] {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

[class*="theme-"] #carouselModal .btn-close:active[b-6ypci0bmu5] {
    transform: scale(0.95);
}

.modal-close-btn:hover[b-6ypci0bmu5] {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

.modal-close-btn:active[b-6ypci0bmu5] {
    transform: scale(0.95);
}


.modal-image-counter[b-6ypci0bmu5] {
  position: absolute;
  top: 1.6rem;
  left: 8rem;
  z-index: 10;
  background-color: white;
  color: rgb(175, 169, 169);
  padding: 6px 12px;
  border-radius: var(--btn-border-radius);
  font-size: 1.6rem;
  font-weight: 500;
}

.modal-image-container[b-6ypci0bmu5] {
    position: relative;
    width: 100%;
    height: 69vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.modal-container.modalbody[b-6ypci0bmu5] {
    margin: 0;
    padding: 0;
    max-width: 90vw;
    overflow: hidden;
    max-height: 70vh;
}

.modal-image[b-6ypci0bmu5] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    animation: imageZoomIn-b-6ypci0bmu5 0.2s ease-out;
    margin: 0 auto;
    display: block;
}

/* Estilos para canvas y contenedores de librerías externas en el modal (GIFs) */
.modal-image-container .ff-container[b-6ypci0bmu5],
.modal-image-container .ff-loading-icon[b-6ypci0bmu5],
.modal-image-container .ff-responsive[b-6ypci0bmu5],
.modal-image-container .ff-inactive[b-6ypci0bmu5],
.modal-image-container .ff-ready[b-6ypci0bmu5] {
    max-width: 100% !important;
    max-height: 69vh !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    position: relative !important;
}

.modal-image-container canvas[b-6ypci0bmu5],
.modal-image-container .ff-canvas[b-6ypci0bmu5],
.modal-image-container .ff-canvas-ready[b-6ypci0bmu5] {
    max-width: 100% !important;
    max-height: 69vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Forzar dimensiones en elementos con atributos width/height inline */
.modal-image-container canvas[width][b-6ypci0bmu5],
.modal-image-container canvas[height][b-6ypci0bmu5] {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 69vh !important;
}

.modal-image-container img[b-6ypci0bmu5] {
    max-width: 100% !important;
    max-height: 69vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

@keyframes imageZoomIn-b-6ypci0bmu5 {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.modal-nav[b-6ypci0bmu5] {
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
    background-color: transparent;
    border: rgba(0, 0, 0, 0.1) 1px solid;
    border-radius: var(--btn-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    pointer-events: all;
    transition: transform 0.2s ease;
    color: #333;
}

.modal-nav:hover[b-6ypci0bmu5] {
    background-color: transparent;
    border: none;
    outline: none;
    transform: translateY(-62%) scale(1.05);
}

.modal-nav:active[b-6ypci0bmu5] {
    transform: translateY(-62%) scale(0.95);
}

.modal-nav-prev[b-6ypci0bmu5] {
    left: 7rem;
}

.modal-nav-next[b-6ypci0bmu5] {
    right: 7rem;
}

.modal-nav i[b-6ypci0bmu5] {
    font-size: 5rem;
}

.modal-image-info[b-6ypci0bmu5] {
    position: absolute;
    bottom: 4.7rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 15px;
    border-radius: 12px;
    font-size: 1.1rem;
    z-index: 10000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Responsividad para el modal */
@media (max-width: 768px) {
    [class*="theme-"] #carouselModal .modal-dialog[b-6ypci0bmu5] {
        margin: 0.25rem auto;
        min-height: calc(100vh - 0.5rem);
        justify-content: center;
        left: 0;
        transform: none;
    }
    
    [class*="theme-"] #carouselModal .modal-header[b-6ypci0bmu5] {
        padding: 1rem 2rem;
    }
    
    [class*="theme-"] #carouselModalLabel[b-6ypci0bmu5] {
        font-size: 2rem;
    }
    
    [class*="theme-"] #carouselModal .btn-close[b-6ypci0bmu5] {
        width: 1.8rem;
        height: 1.8rem;
        font-size: 1.8rem;
    }
    
    #carouselModalCloseBtn .ph-x[b-6ypci0bmu5] {
        font-size: 1.8rem;
    }
    
    .modal-close-btn[b-6ypci0bmu5] {
        width: 45px;
        height: 45px;
        top: 15px;
        right: 15px;
        font-size: 18px;
    }
    
    .modal-image-counter[b-6ypci0bmu5] {
        top: 15px;
        left: 15px;
        padding: 8px 12px;
        font-size: 14px;
    }
    
    .modal-nav[b-6ypci0bmu5] {
        width: 50px;
        height: 50px;
    }
    
    .modal-nav i[b-6ypci0bmu5] {
        font-size: 3rem;
    }
    
    .modal-nav-prev[b-6ypci0bmu5] {
        left: 3rem;
    }
    
    .modal-nav-next[b-6ypci0bmu5] {
        right: 3rem;
    }
    
    .modal-image-info[b-6ypci0bmu5] {
        bottom: 15px;
        padding: 8px 15px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    [class*="theme-"] #carouselModal .modal-dialog[b-6ypci0bmu5] {
        margin: 0.125rem auto;
        min-height: calc(100vh - 0.25rem);
        justify-content: center;
        left: 0;
        transform: none;
    }
    
    .image-modal-content[b-6ypci0bmu5] {
        width: 98vw;
        height: 98vh;
    }
    
    .modal-close-btn[b-6ypci0bmu5] {
        width: 40px;
        height: 40px;
        top: 10px;
        right: 10px;
        font-size: 16px;
    }
    
    .modal-image-counter[b-6ypci0bmu5] {
        top: 10px;
        left: 10px;
        padding: 6px 10px;
        font-size: 16px;
    }
    
    .modal-nav[b-6ypci0bmu5] {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
    
    .modal-nav-prev[b-6ypci0bmu5] {
        left: 15px;
    }
    
    .modal-nav-next[b-6ypci0bmu5] {
        right: 15px;
    }
    
    .modal-image-info[b-6ypci0bmu5] {
        bottom: 10px;
        padding: 6px 12px;
        font-size: 16px;
    }
}

/* Animación de salida del modal */
.image-modal-overlay.closing[b-6ypci0bmu5] {
    animation: fadeOutModal-b-6ypci0bmu5 0.3s ease-in forwards;
}

.image-modal-overlay.closing .image-modal-content[b-6ypci0bmu5] {
    animation: scaleOutModal-b-6ypci0bmu5 0.3s ease-in;
}

@keyframes fadeOutModal-b-6ypci0bmu5 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes scaleOutModal-b-6ypci0bmu5 {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0.9);
        opacity: 0;
    }
}

/* Efecto de transición al cambiar imagen en el modal - similar a highlights */
.modal-image.changing[b-6ypci0bmu5] {
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform: scale(0.95);
    opacity: 0.7;
}
.modal-thumbnails-container[b-6ypci0bmu5] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    min-height: 5rem; /* Reservar espacio para thumbnails incluso si no hay */
    align-items: center; /* Centrar verticalmente el contenido */
}

.thumbnail-wrapper[b-6ypci0bmu5] {
    display: inline-block;
    cursor: pointer;
}

.thumbnail-image[b-6ypci0bmu5] {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    border-radius: 5px;
    transition: transform 0.2s ease;
}

.thumbnail-wrapper.active .thumbnail-image[b-6ypci0bmu5] {
    border: 2px solid #007bff;
    transform: scale(1.1);
}
[class*="theme-"] #carouselModalLabel[b-6ypci0bmu5] {
    font-size: 3rem;
    font-weight: 400;
    font-family: var(--font-primary, 'Arial', sans-serif);
    color: var(--text-color, #333);
    text-align: center;
    margin-bottom: 0;
}

/* Estilos específicos para temas */
[class*="theme-cafe"] #carouselModalLabel[b-6ypci0bmu5] {
    color: var(--cafe-font-primary);
}

[class*="theme-mabe"] #carouselModalLabel[b-6ypci0bmu5] {
    color: #0c2434;
}
.image-modal-content[b-6ypci0bmu5]{
    min-width: 92vw;
    min-height: 80vh; /* Aumentar altura mínima para incluir espacio de thumbnails */
    margin: 0 auto; 
    position: relative;
}
#carouselModalContent[b-6ypci0bmu5] {
    overflow: hidden; /* Prevenir scroll del contenido del modal */
    min-width: 92vw;
    min-height: 80vh; /* Aumentar altura mínima para incluir espacio de thumbnails */
    margin: 0 auto; 
    position: relative;
    left: 0;
    transform: none;
}
#carouselModalCloseBtn .ph-x[b-6ypci0bmu5] {
    font-size: 2.2rem; /* Ajusta el tamaño del ícono para coincidir con el container */
    color: var(--text-color, #000); /* Color del ícono usando variable de tema */
    display: inline-block;
    vertical-align: middle;
}

/* Estilos movidos desde el componente Razor - elementos con display y gap específicos */
.producto-btn-3d[b-6ypci0bmu5] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.text-3d[b-6ypci0bmu5] {
    vertical-align: middle;
    line-height: 1;
}

/* Altura específica para thumbnails cuando solo hay una imagen */
.single-image-thumbnail-spacer[b-6ypci0bmu5] {
    height: 5rem;
}
.multimedia-video-container[b-6ypci0bmu5] {
    width: 100%;
    max-width: 1200px; /* Ancho máximo de 1200px */
    height: 50vh; /* Altura fija de 50vh */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border-radius: var(--btn-border-radius, 8px);
    overflow: hidden;
    margin: 0 auto; /* Centrar horizontalmente */
}

/* Estilos adicionales del modal - movidos desde el componente Razor */
:global([class*="theme-"]) :global(#carouselModal) .modal-image-counter[b-6ypci0bmu5] {
    position: absolute;
    top: 1.8rem;
    left: 8rem;
    z-index: 10;
    background-color: white;
    color: #7F848B;
    padding: 6px 12px;
    border-radius: var(--btn-border-radius);
    font-size: 1.5rem;
    font-weight: 500;
}

/* Botones de navegación del modal */
:global([class*="theme-"]) :global(#carouselModal) .modal-nav[b-6ypci0bmu5] {
    position: absolute;
    top: 46%;
    transform: translateY(-62%);
    border-radius: var(--btn-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    pointer-events: all;
}

:global([class*="theme-"]) :global(#carouselModal) .modal-nav:hover[b-6ypci0bmu5] {
    border: none;
    outline: none;
}

:global([class*="theme-"]) :global(#carouselModal) .modal-nav i[b-6ypci0bmu5] {
    font-size: 5rem;
}

:global([class*="theme-"]) :global(#carouselModal) .modal-nav.modal-nav-next[b-6ypci0bmu5] {
    right: 7rem;
}

:global([class*="theme-"]) :global(#carouselModal) .modal-nav.modal-nav-prev[b-6ypci0bmu5] {
    left: 7rem;
}

:global([class*="theme-"]) :global(#carouselModal) .btn-close:hover[b-6ypci0bmu5] {
    transform: scale(1.1);
}

/* Estilos para el thumbnail de video */
.video-thumbnail[b-6ypci0bmu5] {
    position: relative;
    cursor: pointer;
}

.video-thumbnail-overlay[b-6ypci0bmu5] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    transition: all 0.3s ease;
    z-index: 2;
}

.video-thumbnail:hover .video-thumbnail-overlay[b-6ypci0bmu5] {
    background: rgba(0, 0, 0, 0.7);
}

.video-thumbnail .video-thumb-bg[b-6ypci0bmu5] {
    filter: brightness(0.8);
}

.video-thumbnail:hover .video-thumb-bg[b-6ypci0bmu5] {
    filter: brightness(0.6);
}

/* Estilos para contenido multimedia unificado */
.multimedia-main-container[b-6ypci0bmu5] {
    position: relative;
    width: 100%;
    height: 100%;
}

.multimedia-video-container iframe[b-6ypci0bmu5],
.multimedia-video-container video[b-6ypci0bmu5] {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--btn-border-radius, 8px);
}

.multimedia-counter[b-6ypci0bmu5] {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10;
}

.multimedia-type-indicator[b-6ypci0bmu5] {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Estilos para el botón 3D deshabilitado */
.producto-btn-3d.disabled[b-6ypci0bmu5] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.producto-btn-3d.disabled:hover[b-6ypci0bmu5] {
    opacity: 0.4;
    transform: none;
}

/* Estilos para el indicador de GIF */
.gif-thumbnail[b-6ypci0bmu5] {
    position: relative;
    cursor: pointer;
}

.gif-thumbnail-overlay[b-6ypci0bmu5] {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 3;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.gif-thumbnail:hover .gif-thumbnail-overlay[b-6ypci0bmu5] {
    transform: scale(1.05);
}

/* Clase adicional para distinguir thumbnails de GIF */
.gif-thumbnail .thumbnail-image[b-6ypci0bmu5] {
    transition: all 0.3s ease;
}

/* Efecto hover específico para GIFs */
.gif-thumbnail:hover .thumbnail-image[b-6ypci0bmu5] {
    filter: brightness(1.1);
}

/* Indicador de GIF en las miniaturas del modal también */
.modal-thumbnails-container .gif-thumbnail-overlay[b-6ypci0bmu5] {
    top: 3px;
    right: 3px;
    font-size: 0.65rem;
}

.modal-thumbnails-container .gif-thumbnail-overlay span[b-6ypci0bmu5] {
    padding: 1px 4px;
}
/* _content/MabeWeb/Shared/Screensaver.razor.rz.scp.css */
/* Overlay de salvapantallas */
.screensaver[b-wdr3q4ha32] {
  display: none;
  position: fixed;
  inset: 0;
  background: #5a5142;
  color: #fff;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.screensaver.show[b-wdr3q4ha32] {
  display: flex;
}

/* Animación de ejemplo para el contenido interno */
.screensaver .pulse[b-wdr3q4ha32] {
  animation: pulse-b-wdr3q4ha32 1.6s ease-in-out infinite;
}
@keyframes pulse-b-wdr3q4ha32 {
  0% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: .9; }
}