/*
 * Selector del catalogo SUNAT 25 (public/js/sunat/catalogo.jquery.js)
 *
 * Debe verse bien en los 4 contextos:
 *   1) legacy skin claro     2) legacy smart-style-1
 *   3) diseño nuevo light    4) diseño nuevo dark
 *
 * El modo oscuro es EXCLUSIVO del diseño nuevo: se activa solo con
 * body.g-newdesign.theme-dark. En legacy el componente es SIEMPRE claro.
 *
 * Baseline Firefox 80: sin :has(), sin color-mix(), sin accent-color.
 */

.sunat-cat {
    --sc-borde: #ccc;
    --sc-fondo: #fff;
    --sc-texto: #333;
    --sc-suave: #777;
    --sc-hover: #f2f7fb;
    --sc-acento: #3276b1;
}

/* ---------- buscador ---------- */
.sunat-cat-busca {
    position: relative;
    margin-bottom: 6px;
}

.sunat-cat-result {
    display: none;
    position: absolute;
    z-index: 1000;
    left: 0;
    right: 0;
    top: 100%;
    max-height: 260px;
    overflow-y: auto;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    background: var(--sc-fondo);
    border: 1px solid var(--sc-borde);
    border-radius: 3px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .15);
}

.sunat-cat-result li {
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    color: var(--sc-texto);
    line-height: 1.35;
}

.sunat-cat-result li:last-child {
    border-bottom: 0;
}

.sunat-cat-result li:hover {
    background: var(--sc-hover);
}

.sunat-cat-result li b {
    color: var(--sc-acento);
    margin-right: 4px;
    font-family: monospace;
}

.sunat-cat-result li small {
    display: block;
    color: var(--sc-suave);
    font-size: 11px;
}

/* ---------- cascada de 4 selects ---------- */
.sunat-cat-cascada {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sunat-cat-cascada > select {
    flex: 1 1 46%;
    min-width: 0;              /* sin esto el select desborda el flex */
    max-width: 100%;
}

/* En pantallas chicas, uno debajo del otro */
@media (max-width: 640px) {
    .sunat-cat-cascada > select {
        flex: 1 1 100%;
    }
}

/* El código SUNAT es OPCIONAL: NO lleva la marca required.png. Un producto
   sin clasificar se guarda igual. */

/* ---------- resumen de lo elegido ---------- */
.sunat-cat-elegido {
    margin-top: 6px;
    font-size: 12px;
    color: var(--sc-texto);
    word-break: break-word;
}

.sunat-cat-elegido .text-muted {
    color: var(--sc-suave);
}

.sunat-cat-elegido ._limpiar {
    display: none;
    margin-left: 6px;
    font-weight: bold;
    text-decoration: none;
    color: #a94442;
}

/* =====================================================================
 *  MODO OSCURO — solo diseño nuevo
 * ===================================================================== */
body.g-newdesign.theme-dark .sunat-cat {
    --sc-borde: #4a4a4a;
    --sc-fondo: #2b2b2b;
    --sc-texto: #ddd;
    --sc-suave: #999;
    --sc-hover: #3a3a3a;
    --sc-acento: #6fa8dc;
}

body.g-newdesign.theme-dark .sunat-cat-result li {
    border-bottom-color: rgba(255, 255, 255, .08);
}

body.g-newdesign.theme-dark .sunat-cat-result {
    box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
}