/* Estilo base compartido para combobox multi-columna (.el-combo) */
/* Columnas: --el-col-1 / --el-col-2 fijas; última columna siempre flexible */
/* Popup: --el-popup-max controla el ancho máximo */

.el-combo.e-multi-column.e-ddl.e-popup {
    max-width: var(--el-popup-max, 500px) !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
}

.el-combo .head,
.el-combo .item {
    display: flex !important;
    width: 100% !important;
    align-items: center;
}

.el-combo .head {
    background-color: #efeef3 !important;
    color: #2c3e50 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid #dee2e6 !important;
    box-sizing: border-box;
}

.el-combo .item {
    padding: 7px 12px !important;
    box-sizing: border-box;
    border-bottom: 1px solid #f1f3f5;
    font-size: 13px !important;
    color: #2c3e50 !important;
}

.el-combo .item:last-child {
    border-bottom: none;
}

/* Columnas: fijas por posición, flexible la última */
.el-combo .head > *,
.el-combo .item > * {
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    min-width: 0;
}

.el-combo .head > *:nth-child(1):not(:last-child),
.el-combo .item > *:nth-child(1):not(:last-child) {
    flex: 0 0 var(--el-col-1, 140px);
    min-width: var(--el-col-1, 140px);
    max-width: var(--el-col-1, 140px);
    padding-right: 10px;
}

.el-combo .head > *:nth-child(2):not(:last-child),
.el-combo .item > *:nth-child(2):not(:last-child) {
    flex: 0 0 var(--el-col-2, 110px);
    min-width: var(--el-col-2, 110px);
    max-width: var(--el-col-2, 110px);
    padding: 0 10px;
    border-left: 1px solid #f1f3f5;
}

.el-combo .head > *:last-child,
.el-combo .item > *:last-child {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 10px;
    border-left: 1px solid #f1f3f5;
}

/* Para combos de 2 columnas: la 1ª no debe heredar border-left de ser "última" */
.el-combo .item > *:first-child:last-child {
    border-left: none;
    padding-left: 0;
}

.el-combo .head > * {
    color: #2c3e50 !important;
    background-color: transparent !important;
    font-weight: 600 !important;
    text-indent: 0;
    border-left: none !important;
    padding-left: 0;
}

.el-combo .item > *:first-child {
    font-weight: 600;
    color: #495057;
    border-left: none !important;
    padding-left: 0;
}

.el-combo.e-multi-column.e-dropdownbase .e-list-item {
    background-color: #ffffff !important;
    color: #2c3e50 !important;
}

.el-combo.e-multi-column.e-dropdownbase .e-list-item.e-item-focus,
.el-combo.e-multi-column.e-dropdownbase .e-list-item.e-active,
.el-combo.e-multi-column.e-dropdownbase .e-list-item.e-active.e-hover,
.el-combo.e-multi-column.e-dropdownbase .e-list-item.e-hover {
    background-color: #efeef3 !important;
    color: #2c3e50 !important;
}

.el-combo.e-multi-column.e-dropdownbase .e-list-item.e-item-focus > *:first-child,
.el-combo.e-multi-column.e-dropdownbase .e-list-item.e-active > *:first-child,
.el-combo.e-multi-column.e-dropdownbase .e-list-item.e-hover > *:first-child {
    color: #007bff !important;
}