/* =============================================================================
   JAMM Page Search — buscador principal de páginas/listados
   -----------------------------------------------------------------------------
   Componente visual reutilizable para las pages principales. No aplicar a
   buscadores internos de overlays, modales, combos, selectores o formularios.
   ============================================================================= */

.jamm-page-search,
.prod-search,
.prov-search,
.ins-search,
.cc-search,
.dep-search {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 1 460px !important;
    width: 100% !important;
    min-width: 260px !important;
    max-width: 460px !important;
    min-height: var(--btn-h, 40px) !important;
    padding: 0 42px !important;
    background: var(--surface-field) !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: background 0.14s ease, border-color 0.14s ease !important;
}

/* Foco del buscador: el ring GLOBAL (--focus-ring) va sobre el WRAPPER redondo (pill), no sobre
   el <input> interno. El input tiene border-radius:0 y llena el wrapper, así que si el ring
   quedaba en el input se veía CUADRADO. Acá se pinta en el wrapper (:focus-within) para que
   siga la forma redondeada, usando los mismos tokens de foco que el resto de los campos. */
.jamm-page-search:focus-within,
.prod-search:focus-within,
.prov-search:focus-within,
.ins-search:focus-within,
.cc-search:focus-within,
.dep-search:focus-within {
    background: var(--data-filter-bg-hover) !important;
    border-color: var(--focus-ring-border) !important;
    box-shadow: var(--focus-ring) !important;
}

.jamm-page-search-ic,
.jamm-page-search .prod-search-ic,
.prod-search .prod-search-ic,
.prov-search .prod-search-ic,
.ins-search .prod-search-ic,
.cc-search .prod-search-ic,
.dep-search .prod-search-ic {
    position: absolute !important;
    left: 16px !important;
    width: 18px !important;
    height: 18px !important;
    color: var(--ink-700) !important;
    stroke-width: 2.2 !important;
    pointer-events: none !important;
}

.jamm-page-search input,
.prod-search input,
.prov-search input,
.ins-search input,
.cc-search input,
.dep-search input {
    width: 100% !important;
    flex: 1 1 auto !important;
    height: var(--btn-h, 40px) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ink-900) !important;
    font-weight: 600 !important;
    font-family: var(--font) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    outline: none !important;
}

/* El <input> NO muestra su ring propio (lo pinta el wrapper de arriba). Los `:not()` suben la
   especificidad por encima de la regla global de foco (`input:focus:not([type=checkbox]):not([type=radio])`),
   que si no le ganaba y le estampaba el box-shadow CUADRADO al input. */
.jamm-page-search input:focus:not([type=checkbox]):not([type=radio]),
.prod-search input:focus:not([type=checkbox]):not([type=radio]),
.prov-search input:focus:not([type=checkbox]):not([type=radio]),
.ins-search input:focus:not([type=checkbox]):not([type=radio]),
.cc-search input:focus:not([type=checkbox]):not([type=radio]),
.dep-search input:focus:not([type=checkbox]):not([type=radio]) {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.jamm-page-search input::placeholder,
.prod-search input::placeholder,
.prov-search input::placeholder,
.ins-search input::placeholder,
.cc-search input::placeholder,
.dep-search input::placeholder {
    color: var(--field-placeholder) !important;
}

.jamm-page-search .jamm-search-clear,
.prod-search .jamm-search-clear,
.prov-search .jamm-search-clear,
.ins-search .jamm-search-clear,
.cc-search .jamm-search-clear,
.dep-search .jamm-search-clear {
    right: 10px !important;
    background: transparent !important;
}

.jamm-page-search .jamm-search-clear:hover,
.prod-search .jamm-search-clear:hover,
.prov-search .jamm-search-clear:hover,
.ins-search .jamm-search-clear:hover,
.cc-search .jamm-search-clear:hover,
.dep-search .jamm-search-clear:hover {
    background: var(--surface-chip) !important;
}