/* ═══════════════════════════════════════════════════════════════════════════
   vt-select — estándar único de listas desplegables (<select>) de la app
   Se carga después del bundle. Mismo lenguaje visual que .vt-input / .vt-select:
   borde con tokens --vt-*, radio, flecha propia, hover y foco naranja, modo oscuro.

   Por qué "!important": el bundle (vehitotal-final-override.css) aplicaba
   `select { background/border/color: … !important }`, lo que borraba la flecha
   y dejaba todos los desplegables planos. La "piel" (fondo, flecha, borde, color)
   se fija aquí con el mismo peso; las DIMENSIONES (alto, padding, tamaño de
   letra) NO llevan !important para que cada pantalla pueda ajustarlas.

   Tamaños
     .vt-select-sm / .form-select-sm / <select> sin clase  → compacto (filtros)
     .vt-select / .form-select / .form-control / .vt-form-control → formulario
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Naranja de marca. Ojo: --vt-primary-accent del sistema es AZUL (#3B82F6); para acentos naranja usar esta. */
    --vt-brand-orange: #f8790c;
    --vt-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    --vt-select-arrow-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23f8790c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}
[data-vehitotal-theme="dark"] {
    --vt-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}

/* ── Dimensiones (sin !important: las pantallas pueden ajustarlas) ──────── */
:where(select:not([multiple]):not([size])) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    min-width: 0;
    height: 2.25rem;
    padding: 0 2.25rem 0 .75rem;
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 10px;
    cursor: pointer;
    text-overflow: ellipsis;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* Estándar de formulario (select "grande") */
select.vt-select,
select.form-select:not(.form-select-sm),
select.form-control:not(.form-control-sm),
select.vt-form-control {
    height: 2.75rem;
    padding: 0 2.5rem 0 1rem;
    font-size: .9375rem;
    font-weight: 400;
    border-radius: var(--vt-radius-lg, 12px);
}

/* Selects de página con su propio padding: reservar siempre espacio para la flecha */
select.po-ctrl-select,
select.po-filter-select,
select.prd-field__select,
select.prd-edit-select,
select.rc-input { padding-right: 2.25rem; }

/* Anchura: compactos se ajustan al contenido; los de formulario ocupan el ancho */
select.vt-select-sm,
select.form-select-sm { width: auto; max-width: 100%; }
select.form-select:not(.form-select-sm) { width: 100%; }

/* ── Piel (con !important: gana al override global del bundle) ──────────── */
select:not([multiple]):not([size]) {
    background-color: var(--vt-bg-elevated) !important;
    background-image: var(--vt-select-arrow) !important;
    background-repeat: no-repeat !important;
    background-position: right .625rem center !important;
    background-size: 1.1rem !important;
    border: 1.5px solid var(--vt-border-base) !important;
    color: var(--vt-text-primary) !important;
}
select.vt-select:not([multiple]):not([size]),
select.form-select:not(.form-select-sm):not([multiple]):not([size]),
select.form-control:not(.form-control-sm):not([multiple]):not([size]),
select.vt-form-control:not([multiple]):not([size]) {
    background-position: right .75rem center !important;
    background-size: 1.25rem !important;
    border-width: 2px !important;
}

select:not([multiple]):not([size]):hover:not(:disabled) {
    border-color: var(--vt-border-medium, #cbd5e1) !important;
    background-image: var(--vt-select-arrow-hover) !important;
}
select:not([multiple]):not([size]):focus {
    outline: none;
    border-color: var(--vt-brand-orange, #f8790c) !important;
    background-image: var(--vt-select-arrow-hover) !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .14) !important;
}
select:not([multiple]):not([size]):focus-visible { outline: 2px solid rgba(249, 115, 22, .45); outline-offset: 1px; }
select:not([multiple]):not([size]):disabled {
    opacity: .55;
    cursor: not-allowed;
    background-color: var(--vt-disabled-bg, rgba(100, 116, 139, .08)) !important;
}

/* Selects con varias filas (multiple / size>1): sin flecha, mismo marco */
select[multiple],
select[size]:not([size="1"]) {
    height: auto;
    padding: .375rem .5rem;
    font-size: .8125rem;
    border-radius: 10px;
    background-image: none !important;
    background-color: var(--vt-bg-elevated) !important;
    border: 1.5px solid var(--vt-border-base) !important;
    color: var(--vt-text-primary) !important;
}

/* ── Opciones (desplegable nativo) ──────────────────────────────────────── */
select option,
select optgroup {
    background-color: var(--vt-bg-elevated, #fff);
    color: var(--vt-text-primary, #0f172a);
    font-weight: 400;
}
select optgroup { font-weight: 700; }
select option:disabled { color: var(--vt-text-muted, #9ca3af); }

/* ── Modo oscuro ────────────────────────────────────────────────────────── */
[data-vehitotal-theme="dark"] select:not([multiple]):not([size]),
[data-vehitotal-theme="dark"] select[multiple],
[data-vehitotal-theme="dark"] select[size]:not([size="1"]) {
    background-color: rgba(255, 255, 255, .06) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    color: #f1f5f9 !important;
}
[data-vehitotal-theme="dark"] select:not([multiple]):not([size]):hover:not(:disabled) { border-color: rgba(248, 121, 12, .55) !important; }
[data-vehitotal-theme="dark"] select:not([multiple]):not([size]):focus { border-color: var(--vt-brand-orange, #f8790c) !important; background-color: rgba(255, 255, 255, .09) !important; }
[data-vehitotal-theme="dark"] select option,
[data-vehitotal-theme="dark"] select optgroup { background-color: #1f2937; color: #f1f5f9; }

@media (prefers-reduced-motion: reduce) {
    select { transition: none !important; }
}

/* ═══ Selects dentro de un contenedor "píldora" (PurchaseOrders: filas por página / ordenar) ═══
   El contenedor .po-ctrl-wrap dibuja el marco, el icono y la flecha; el <select> debe quedar
   transparente y sin flecha propia (antes se veían dos cajas y dos flechas superpuestas). */
select.po-ctrl-select:not([multiple]):not([size]) {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    height: 100%;
    padding: 0;
    flex: 0 0 auto;
    text-overflow: clip;
    font-size: .8125rem;
    font-weight: 600;
    border-radius: 0;
    color: var(--vt-text-primary) !important;
}
select.po-ctrl-select:focus { box-shadow: none !important; outline: none; }
.po-ctrl-wrap {
    height: 36px;
    gap: .5rem;
    padding: 0 .7rem 0 .45rem;
    border-radius: 10px;
    background: var(--vt-bg-elevated);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.po-ctrl-wrap:hover { border-color: rgba(248, 121, 12, .45); }
.po-ctrl-wrap__icon {
    display: grid; place-items: center;
    width: 24px; height: 24px; margin: 0;
    font-size: .65rem; border-radius: 7px;
    color: var(--vt-brand-orange, #f8790c);
    background: rgba(248, 121, 12, .12);
}
.po-ctrl-wrap__arrow { position: static; transform: none; flex: none; margin: 0 0 0 .1rem; font-size: .6rem; line-height: 1; transition: color .15s; }
.po-ctrl-wrap:hover .po-ctrl-wrap__arrow, .po-ctrl-wrap:focus-within .po-ctrl-wrap__arrow { color: var(--vt-brand-orange, #f8790c); }
[data-vehitotal-theme="dark"] .po-ctrl-wrap { background: var(--vt-bg-elevated); box-shadow: none; }
[data-vehitotal-theme="dark"] .po-ctrl-select option { background: var(--vt-bg-elevated); color: var(--vt-text-primary); }