/**
 * FIX DEFINITIVO: Flechas Múltiples en Selects
 *
 * Problema: modern-forms.css aplica background-image a TODOS los selects,
 * causando múltiples flechas superpuestas cuando otros CSS también lo hacen.
 *
 * Solución: Eliminar TODAS las flechas del sistema y aplicar UNA SOLA flecha
 * con la máxima especificidad posible.
 */

/* ============================================================================
   PASO 1: ELIMINAR TODAS LAS FLECHAS EXISTENTES
   ============================================================================ */

/* Eliminar background-image de modern-forms.css */
select,
select.modern-select,
select.form-control,
select.form-input,
select.rice-select-modern,
select.form-field__select {
    background-image: none !important;
}

/* Eliminar también en estados hover y focus */
select:hover,
select.modern-select:hover,
select.form-control:hover,
select.form-input:hover,
select:focus,
select.modern-select:focus,
select.form-control:focus,
select.form-input:focus {
    background-image: none !important;
}

/* ============================================================================
   PASO 2: APLICAR UNA SOLA FLECHA UNIFICADA
   ============================================================================ */

/* Aplicar una sola flecha a todos los selects */
select {
    /* Eliminar apariencia nativa */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    /* Padding para que no se superponga el texto */
    padding-right: 40px !important;

    /* UNA SOLA flecha - gris oscuro */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 20px !important;
}

/* Flecha más oscura en hover */
select:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Flecha azul en focus */
select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* ============================================================================
   PASO 3: LIMPIAR PSEUDO-ELEMENTOS (por si acaso)
   ============================================================================ */

/* Eliminar cualquier pseudo-elemento que pueda estar agregando contenido */
select::before,
select::after,
select option::before,
select option::after {
    content: none !important;
    display: none !important;
}

/* ============================================================================
   PASO 4: ASEGURAR QUE NO HAYA FONT AWESOME EN SELECTS
   ============================================================================ */

/* Forzar font normal en todo el select */
select,
select option {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Eliminar cualquier clase de Font Awesome */
select.fa,
select.fas,
select.far,
select.fab,
select option.fa,
select option.fas,
select option.far,
select option.fab {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* ============================================================================
   PASO 5: FIX PARA SEARCHABLE-SELECT
   ============================================================================ */

/* Si hay componentes searchable-select personalizados */
.searchable-select-arrow,
.searchable-select-arrow.fas,
.searchable-select-arrow.fa-chevron-down {
    font-family: inherit !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px !important;
}

.searchable-select-arrow::before,
.searchable-select-arrow::after {
    content: none !important;
    display: none !important;
}

/* ============================================================================
   NOTAS IMPORTANTES
   ============================================================================ */

/*
 * Este archivo debe cargarse DESPUÉS de todos los demás CSS del módulo
 * para que los !important tengan efecto.
 *
 * Orden de carga recomendado en base.html:
 * 1. modern-forms.css (global)
 * 2. registro-tabs.css
 * 3. form-system.css
 * 4. rice.css
 * 5. select-fix-final.css ← ESTE ARCHIVO AL FINAL
 */