/* ================================================================
   PERFIL DIALOG STYLES - Versión corregida para problemas de renderización
   ================================================================ */

/* Reset básico para el diálogo de perfiles */
.perfil-dialog {
    --mud-palette-primary-lighten: rgba(33, 150, 243, 0.1);
}

/* Corrección para tarjetas de módulos */
.perfil-dialog .mud-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}

.perfil-dialog .mud-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    transform: translateY(-2px) !important;
}

/* Tarjetas seleccionadas */
.perfil-dialog .mud-theme-primary {
    background-color: #e3f2fd !important;
    border: 2px solid #2196f3 !important;
}

.perfil-dialog .modulo-card {
    min-height: 140px !important;
    max-height: none !important;
    width: 100% !important;
}

/* Contenido de las tarjetas */
.perfil-dialog .mud-card-content {
    display: block !important;
    padding: 16px !important;
    height: auto !important;
    min-height: auto !important;
}

.perfil-dialog .modulo-card-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Contenedor de checkbox y contenido */
.perfil-dialog .checkbox-container {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
}

/* Información del módulo */
.perfil-dialog .modulo-info {
    flex: 1 !important;
    display: block !important;
}

/* Títulos de módulos */
.perfil-dialog .modulo-info .mud-typography-body1 {
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 4px !important;
    line-height: 1.4 !important;
    display: block !important;
}

/* Descripciones de módulos */
.perfil-dialog .modulo-info .mud-typography-caption {
    color: #666 !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
    display: block !important;
}

/* Contenedor de chips */
.perfil-dialog .chip-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
    align-items: center !important;
}

/* Corrección específica para MudChip */
.perfil-dialog .mud-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    height: auto !important;
    padding: 4px 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    background-color: #f5f5f5 !important;
    color: #333 !important;
    border: 1px solid #e0e0e0 !important;
}

/* Chips con colores específicos */
.perfil-dialog .mud-chip.mud-chip-color-info {
    background-color: #e3f2fd !important;
    color: #1976d2 !important;
    border-color: #bbdefb !important;
}

.perfil-dialog .mud-chip.mud-chip-color-success {
    background-color: #e8f5e8 !important;
    color: #388e3c !important;
    border-color: #c8e6c9 !important;
}

.perfil-dialog .mud-chip.mud-chip-color-warning {
    background-color: #fff3e0 !important;
    color: #f57c00 !important;
    border-color: #ffcc02 !important;
}

/* Iconos en chips */
.perfil-dialog .mud-chip .mud-icon-root {
    margin-right: 4px !important;
    font-size: 16px !important;
}

/* Corrección para checkboxes */
.perfil-dialog .mud-checkbox {
    margin: 0 !important;
    padding: 0 !important;
}

.perfil-dialog .mud-checkbox .mud-button-root {
    padding: 6px !important;
    min-width: auto !important;
}

/* Corrección para inputs */
.perfil-dialog .mud-input-control,
.perfil-dialog .mud-select,
.perfil-dialog .mud-textfield {
    width: 100% !important;
    display: block !important;
}

/* Botones */
.perfil-dialog .mud-button {
    text-transform: none !important;
}

/* Contenedor de carga */
.perfil-dialog .loading-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 300px !important;
}

.perfil-dialog .loading-content {
    text-align: center !important;
}

/* Grid de módulos */
.perfil-dialog .mud-grid {
    width: 100% !important;
}

.perfil-dialog .mud-grid-item {
    padding: 8px !important;
}

/* Paper contenedor */
.perfil-dialog .mud-paper {
    background-color: #fafafa !important;
    border: 1px solid #e0e0e0 !important;
}

/* Estado vacío */
.perfil-dialog .text-center {
    text-align: center !important;
}

/* Alertas */
.perfil-dialog .mud-alert {
    margin: 8px 0 !important;
}

/* Dividers */
.perfil-dialog .mud-divider {
    margin: 16px 0 !important;
}

/* Espaciado general */
.perfil-dialog .pa-3 {
    padding: 16px !important;
}

.perfil-dialog .pa-4 {
    padding: 24px !important;
}

.perfil-dialog .mb-2 {
    margin-bottom: 8px !important;
}

.perfil-dialog .mb-3 {
    margin-bottom: 16px !important;
}

.perfil-dialog .mt-1 {
    margin-top: 4px !important;
}

.perfil-dialog .mt-2 {
    margin-top: 8px !important;
}

.perfil-dialog .mt-3 {
    margin-top: 16px !important;
}

.perfil-dialog .mr-2 {
    margin-right: 8px !important;
}

/* Corrección específica para problemas de WebAssembly */
.perfil-dialog * {
    box-sizing: border-box !important;
}

.perfil-dialog .d-flex {
    display: flex !important;
}

.perfil-dialog .flex-wrap {
    flex-wrap: wrap !important;
}

.perfil-dialog .align-items-center {
    align-items: center !important;
}

.perfil-dialog .align-items-start {
    align-items: flex-start !important;
}

.perfil-dialog .justify-end {
    justify-content: flex-end !important;
}

.perfil-dialog .gap-1 {
    gap: 4px !important;
}

.perfil-dialog .cursor-pointer {
    cursor: pointer !important;
}

/* Asegurar que el texto sea visible */
.perfil-dialog .mud-typography {
    color: inherit !important;
}

.perfil-dialog .fw-bold {
    font-weight: 600 !important;
}