/* ========================================
   FIX CRÍTICO: Texto de Dropdowns Invisible
   ======================================== */

/* 🚨 PROBLEMA: El texto seleccionado en los dropdowns no se ve
   aunque está presente en el HTML. Esto se debe a que algún CSS
   está ocultando el contenido visualmente. */

/* ✅ SOLUCIÓN: Forzar visibilidad del texto en dropdowns */

/* 1. Forzar color del texto del dropdown */
.rz-dropdown-label,
.rz-dropdown-label span,
.rz-dropdown-label div,
.rz-dropdown-label div span {
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 2. Asegurar que el texto sea visible (no transparente) */
.rz-dropdown-label.rz-inputtext {
    color: var(--rz-text-color, #333) !important;
    opacity: 1 !important;
    /* ✅ MEJORADO: Alineación vertical centrada */
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    min-height: 40px !important;
    /* ✅ NUEVO: Margen superior para mejor alineación */
    margin-top: -5px !important;
}

/* 3. Fix para el span interno que contiene el texto */
.rz-dropdown-label > div > span,
.rz-dropdown-label > span {
    font-size: inherit !important;
    color: inherit !important;
    opacity: 1 !important;
    text-indent: 0 !important;
    letter-spacing: normal !important;
    line-height: normal !important;
}

/* 4. Asegurar que las imágenes (banderas) sean visibles */
.rz-dropdown-label img {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    flex-shrink: 0 !important;
}

/* 5. ✅ MEJORADO: Fix para el contenedor del template personalizado con mejor alineación */
.rz-dropdown-label > div {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    opacity: 1 !important;
    /* Asegurar que el contenedor no agregue altura extra */
    line-height: 1 !important;
    padding: 0 !important;
}

/* 6. Prevenir que CSS de terceros oculte el contenido */
.rz-dropdown .rz-dropdown-label * {
    color: inherit !important;
}

/* 7. Fix específico para dropdown con placeholder */
.rz-dropdown-label:not(:empty) {
    color: var(--rz-text-color, #333) !important;
}

/* 8. ✅ MEJORADO: Asegurar contraste del texto sin afectar el padding del inputtext */
.rz-dropdown .rz-dropdown-label.rz-inputtext {
    color: #333 !important;
    background-color: transparent !important;
    /* Prevenir padding extra que desalinea verticalmente */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 9. Fix para modo oscuro (si aplica) */
@media (prefers-color-scheme: dark) {
    .rz-dropdown-label {
        color: #fff !important;
    }
}

/* 10. ✅ MEJORADO: Override específico solo para dropdowns con clase "modified" */
.rz-dropdown.modified .rz-dropdown-label.rz-inputtext {
    color: #333 !important;
    opacity: 1 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    /* Alineación vertical centrada perfecta */
    justify-content: flex-start !important;
}

.rz-dropdown.modified .rz-dropdown-label span,
.rz-dropdown.modified .rz-dropdown-label div {
    color: #333 !important;
    opacity: 1 !important;
}

/* 11. Fix para el input oculto (aria) - NO tocar estos */
.rz-dropdown .rz-helper-hidden-accessible {
    position: absolute !important;
    clip: rect(0, 0, 0, 0) !important;
    pointer-events: none !important;
    /* NO aplicar estilos de alineación aquí */
}

/* 12. ✅ REMOVIDO: No forzar padding en todos los labels
   Esto causaba desalineación en otros controles */

/* 13. Fix para cuando el dropdown tiene clase "valid" */
.rz-dropdown.valid .rz-dropdown-label,
.rz-dropdown.valid .rz-dropdown-label span {
    color: #333 !important;
}

/* ========================================
   FIX ADICIONAL: Items del Panel Dropdown
   ======================================== */

/* Asegurar que los items del panel también sean visibles */
.rz-dropdown-panel .rz-dropdown-item,
.rz-dropdown-panel .rz-dropdown-item span,
.rz-dropdown-panel .rz-dropdown-item div {
    color: #333 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix para items hover */
.rz-dropdown-panel .rz-dropdown-item:hover {
    background-color: #f5f5f5 !important;
    color: #000 !important;
}

/* Fix para item seleccionado */
.rz-dropdown-panel .rz-dropdown-item.rz-state-highlight {
    background-color: #e3f2fd !important;
    color: #1976d2 !important;
}

/* ========================================px
   ✅ NUEVO: Fix específico para NO afectar otros controles
   ======================================== */

/* Solo aplicar estilos de alineación a dropdowns dentro de form-fields */
.rz-form-field .rz-dropdown .rz-dropdown-label.rz-inputtext {
    display: flex !important;
    align-items: center !important;
}

/* NO aplicar a otros inputs de Radzen */
.rz-textbox.rz-inputtext,
.rz-numeric .rz-inputtext,
.rz-datepicker .rz-inputtext {
    /* Dejar que usen sus estilos por defecto */
    display: inline-block !important;
}

/* ========================================
   ✅ NUEVO: Estilos para Dropdown de Características Telefónicas
   ======================================== */

/* Contenedor del dropdown de características (Start de FormField) */
.rz-form-field-start {
    margin-left: -13px !important;
    padding: 0 !important;
}

/* Dropdown de características compacto */
.rz-form-field-start .rz-dropdown {
    width: auto !important;
    min-width: 90px !important;
    max-width: 100px !important;
    margin-right: -1px !important;
}

/* Label del dropdown de características - más compacto */
.rz-form-field-start .rz-dropdown .rz-dropdown-label {
    padding: 0 8px !important;
    min-height: 38px !important;
}

/* Contenedor interno del template - gap más pequeño */
.rz-form-field-start .rz-dropdown .rz-dropdown-label > div {
    gap: 4px !important;
    justify-content: flex-start !important;
}

/* Bandera más pequeña en dropdown de características */
.rz-form-field-start .rz-dropdown .rz-dropdown-label img {
    width: 18px !important;
    height: 12px !important;
}

/* Texto más pequeño en dropdown de características */
.rz-form-field-start .rz-dropdown .rz-dropdown-label span {
    font-size: 0.85em !important;
}

/* Panel desplegable del dropdown de características */
.rz-form-field-start .rz-dropdown + div.rz-dropdown-panel,
div.rz-dropdown-panel[id^="popup-"] {
    min-width: 150px !important;
}

/* Items del panel más compactos */
.rz-form-field-start .rz-dropdown-panel .rz-dropdown-item {
    padding: 8px 12px !important;
}

/* Banderas en el panel del dropdown de características */
.rz-form-field-start .rz-dropdown-panel .rz-dropdown-item img {
    width: 18px !important;
    height: 12px !important;
}

/* Texto en items del panel */
.rz-form-field-start .rz-dropdown-panel .rz-dropdown-item span {
    font-size: 0.85em !important;
}

/* Gap en items del panel */
.rz-form-field-start .rz-dropdown-panel .rz-dropdown-item > span > div {
    gap: 4px !important;
}

/* ========================================
   DEBUG: Comentar en producción
   ======================================== */

/* Descomentar para debugging visual */
/*
.rz-dropdown-label {
    border: 2px solid red !important;
}

.rz-dropdown-label span {
    background: yellow !important;
}
*/