/* ============================================
   CONCEPTOS DE COBRO - MOBILE (<768px)
   Sistema de Administración de Condominios
   ============================================

   CONTENIDO:
   - Buscador de conceptos (estructura wrapper separada)

   SOLUCIÓN ESTRUCTURAL:
   El ícono NO está absolute-positioned encima del input.
   El wrapper .cc-search-wrap es un flex-row que contiene:
     [.cc-search-icon-wrap (lupa)] [.cc-search-input (input limpio)]
   El input nunca puede tapar la lupa porque son elementos hermanos.

   El #moduleContainer prefix garantiza especificidad sobre
   mobile-forms.css que tiene input[type=text] { ... !important }

   ============================================ */

@media (max-width: 768px) {

    /* Wrapper: borde + pill + flex-row */
    #moduleContainer .cc-search-wrap {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        border: 1px solid #d1d5db !important;
        border-radius: 20px !important;
        background: #fff !important;
        padding: 0 10px !important;
        height: 34px !important;
        max-width: 230px !important;
        min-width: 160px !important;
        flex: 1 1 auto !important;
        box-sizing: border-box !important;
    }

    /* Ícono: elemento propio, nunca tapado */
    #moduleContainer .cc-search-icon-wrap {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #9ca3af !important;
        font-size: 11px !important;
        line-height: 1 !important;
    }

    #moduleContainer .cc-search-icon-wrap i {
        line-height: 1 !important;
        margin: 0 !important;
    }

    /* Input: limpio, sin borde ni padding que compita */
    #moduleContainer .cc-search-input {
        border: 0 !important;
        outline: none !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: 32px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 11px !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        width: auto !important;
    }
}