/* Autos Esquivel — mejoras del selector de alerta de inventario. */

.ae-vehicle-combobox,
.ae-budget-input {
    position: relative;
    min-width: 0;
}

.ae-vehicle-combobox {
    z-index: 12;
}

.ae-vehicle-combobox__menu[hidden],
.ae-alert-criteria[hidden],
.ae-alert-search-panel[hidden] {
    display: none !important;
}

.ae-vehicle-combobox__menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 2147483200 !important;
    max-height: 286px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    margin: 0 !important;
    padding: 7px !important;
    border: 1px solid var(--ae-modal-line-strong) !important;
    border-radius: 14px !important;
    background: var(--ae-modal-surface) !important;
    color: var(--ae-modal-text) !important;
    box-shadow: 0 20px 48px rgba(8, 11, 14, .18) !important;
}

html[data-theme="dark"] .ae-vehicle-combobox__menu {
    box-shadow: 0 22px 56px rgba(0, 0, 0, .48) !important;
}

.ae-vehicle-combobox__option {
    width: 100% !important;
    min-height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--ae-modal-text) !important;
    font: inherit !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background-color 140ms ease, transform 140ms ease !important;
}

.ae-vehicle-combobox__option + .ae-vehicle-combobox__option {
    margin-top: 2px !important;
}

.ae-vehicle-combobox__option:hover,
.ae-vehicle-combobox__option.is-active,
.ae-vehicle-combobox__option:focus-visible {
    background: var(--ae-modal-surface-soft) !important;
    outline: 0 !important;
}

.ae-vehicle-combobox__option:hover {
    transform: translateX(2px);
}

.ae-vehicle-combobox__option-main {
    min-width: 0;
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
}

.ae-vehicle-combobox__brand {
    flex: 0 0 auto;
    color: var(--ae-modal-muted) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.ae-vehicle-combobox__model {
    min-width: 0;
    overflow: hidden;
    color: var(--ae-modal-text) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ae-vehicle-combobox__option-icon {
    flex: 0 0 auto;
    color: var(--ae-modal-muted) !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

.ae-vehicle-combobox__empty {
    padding: 12px !important;
    color: var(--ae-modal-muted) !important;
    font-size: 10.5px !important;
    line-height: 1.55 !important;
}

.ae-vehicle-combobox__empty strong {
    display: block !important;
    margin-bottom: 3px !important;
    color: var(--ae-modal-text) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

.ae-budget-input::before {
    content: "MXN";
    position: absolute;
    top: 50%;
    right: 13px;
    z-index: 2;
    color: var(--ae-modal-muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);
}

.ae-budget-input > input[data-ae-budget-display] {
    padding-right: 52px !important;
    font-variant-numeric: tabular-nums;
}

/* Modalidad de la alerta */
form.ae-alert-form fieldset.ae-alert-mode {
    min-width: 0 !important;
    display: block !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

form.ae-alert-form fieldset.ae-alert-mode > legend {
    width: auto !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--ae-modal-text) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .065em !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
}

form.ae-alert-form .ae-alert-mode__options {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

form.ae-alert-form label.ae-alert-mode__option {
    position: relative !important;
    min-width: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
}

/* Neutraliza las reglas globales del formulario que hacían gigantes los radios. */
form.ae-alert-form label.ae-alert-mode__option > input[type="radio"] {
    position: absolute !important;
    inset: auto !important;
    top: 0 !important;
    left: 0 !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 1px !important;
    max-height: 1px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    pointer-events: none !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
}

form.ae-alert-form label.ae-alert-mode__option > span {
    position: relative !important;
    min-height: 86px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 28px !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    column-gap: 14px !important;
    row-gap: 5px !important;
    margin: 0 !important;
    padding: 15px 16px !important;
    border: 1px solid var(--ae-modal-line) !important;
    border-radius: 15px !important;
    background: var(--ae-modal-surface) !important;
    color: var(--ae-modal-text) !important;
    box-shadow: 0 1px 0 rgba(10, 13, 16, .02) !important;
    overflow: hidden !important;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

form.ae-alert-form label.ae-alert-mode__option > span::after {
    content: "";
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    justify-self: end !important;
    width: 24px !important;
    height: 24px !important;
    border: 1.5px solid var(--ae-modal-line-strong) !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-sizing: border-box !important;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease !important;
}

form.ae-alert-form label.ae-alert-mode__option > span::before {
    content: "✓";
    position: absolute !important;
    top: 50% !important;
    right: 22px !important;
    z-index: 2 !important;
    color: var(--ae-modal-action-text) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-50%) scale(.7) !important;
    transition: opacity 140ms ease, transform 160ms ease !important;
}

form.ae-alert-form label.ae-alert-mode__option strong {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: -.012em !important;
    line-height: 1.3 !important;
}

form.ae-alert-form label.ae-alert-mode__option small {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--ae-modal-muted) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

form.ae-alert-form label.ae-alert-mode__option:hover > span {
    border-color: var(--ae-modal-line-strong) !important;
    background: var(--ae-modal-surface-soft) !important;
    transform: translateY(-1px) !important;
}

form.ae-alert-form label.ae-alert-mode__option > input[type="radio"]:checked + span {
    border-color: var(--ae-modal-text) !important;
    background: var(--ae-modal-surface) !important;
    box-shadow: inset 0 0 0 1px var(--ae-modal-text), 0 8px 24px rgba(10, 13, 16, .07) !important;
}

html[data-theme="dark"] form.ae-alert-form label.ae-alert-mode__option > input[type="radio"]:checked + span {
    box-shadow: inset 0 0 0 1px var(--ae-modal-text), 0 10px 28px rgba(0, 0, 0, .22) !important;
}

form.ae-alert-form label.ae-alert-mode__option > input[type="radio"]:checked + span::after {
    border-color: var(--ae-modal-action) !important;
    background: var(--ae-modal-action) !important;
    transform: scale(1.02) !important;
}

form.ae-alert-form label.ae-alert-mode__option > input[type="radio"]:checked + span::before {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1) !important;
}

form.ae-alert-form label.ae-alert-mode__option > input[type="radio"]:focus-visible + span {
    outline: 2px solid var(--ae-modal-text) !important;
    outline-offset: 3px !important;
}

.ae-alert-search-panel {
    margin: 0 0 20px !important;
    padding: 0 !important;
}

/* Búsqueda por tipo y características */
.ae-alert-criteria {
    margin: 0 0 20px !important;
    padding: 17px !important;
    border: 1px solid var(--ae-modal-line) !important;
    border-radius: 16px !important;
    background: var(--ae-modal-surface-soft) !important;
}

.ae-alert-criteria__head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 15px !important;
}

.ae-alert-criteria__head strong,
.ae-alert-criteria__head span {
    display: block !important;
}

.ae-alert-criteria__head strong {
    margin: 0 0 4px !important;
    color: var(--ae-modal-text) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.ae-alert-criteria__head span {
    color: var(--ae-modal-muted) !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
}

.ae-alert-criteria__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 13px !important;
}

.ae-alert-form select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 12px 38px 12px 13px !important;
    border: 1px solid var(--ae-modal-line) !important;
    border-radius: 12px !important;
    background: var(--ae-modal-surface) !important;
    color: var(--ae-modal-text) !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    outline: 0 !important;
}

.ae-alert-form select:focus {
    border-color: var(--ae-modal-line-strong) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ae-modal-text) 11%, transparent) !important;
}

.ae-alert-form select:disabled,
.ae-alert-form input:disabled,
.ae-alert-form textarea:disabled {
    opacity: .58 !important;
    cursor: not-allowed !important;
}

.ae-alert-form__grid--contact {
    margin-top: 0 !important;
}

/* Criteria controls: keep every field inside a visible, consistent control surface. */
form.ae-alert-form .ae-alert-criteria .ae-alert-criteria__grid {
    gap: 15px 13px !important;
}

form.ae-alert-form .ae-alert-criteria label.ae-alert-form__field {
    gap: 8px !important;
}

form.ae-alert-form .ae-alert-criteria label.ae-alert-form__field > span {
    padding-left: 1px !important;
    color: var(--ae-modal-text) !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    letter-spacing: .07em !important;
}

html body .ae-quick-modal form.ae-alert-form .ae-alert-criteria label.ae-alert-form__field > input,
html body .ae-quick-modal form.ae-alert-form .ae-alert-criteria label.ae-alert-form__field > select,
html body .ae-quick-modal form.ae-alert-form .ae-alert-criteria label.ae-alert-form__field > textarea {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    margin: 0 !important;
    border: 1px solid var(--ae-modal-line) !important;
    border-radius: 12px !important;
    background-color: var(--ae-modal-surface) !important;
    color: var(--ae-modal-text) !important;
    box-shadow: 0 1px 0 rgba(10, 13, 16, .025), 0 4px 14px rgba(10, 13, 16, .025) !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    outline: 0 !important;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease !important;
}

html[data-theme="dark"] body .ae-quick-modal form.ae-alert-form .ae-alert-criteria label.ae-alert-form__field > input,
html[data-theme="dark"] body .ae-quick-modal form.ae-alert-form .ae-alert-criteria label.ae-alert-form__field > select,
html[data-theme="dark"] body .ae-quick-modal form.ae-alert-form .ae-alert-criteria label.ae-alert-form__field > textarea {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018), 0 5px 18px rgba(0, 0, 0, .16) !important;
}

html body .ae-quick-modal form.ae-alert-form .ae-alert-criteria label.ae-alert-form__field > input {
    padding: 13px 14px !important;
}

html body .ae-quick-modal form.ae-alert-form .ae-alert-criteria label.ae-alert-form__field > select {
    padding: 13px 46px 13px 14px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ae-modal-muted) 50%),
        linear-gradient(135deg, var(--ae-modal-muted) 50%, transparent 50%) !important;
    background-position:
        calc(100% - 19px) calc(50% - 2px),
        calc(100% - 14px) calc(50% - 2px) !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    cursor: pointer !important;
}

html body .ae-quick-modal form.ae-alert-form .ae-alert-criteria label.ae-alert-form__field > textarea {
    min-height: 104px !important;
    padding: 13px 14px !important;
    resize: vertical !important;
}

html body .ae-quick-modal form.ae-alert-form .ae-alert-criteria label.ae-alert-form__field > :is(input, select, textarea):hover:not(:disabled) {
    border-color: var(--ae-modal-line-strong) !important;
    background-color: color-mix(in srgb, var(--ae-modal-surface) 94%, var(--ae-modal-text) 6%) !important;
}

html body .ae-quick-modal form.ae-alert-form .ae-alert-criteria label.ae-alert-form__field > :is(input, select, textarea):focus-visible {
    border-color: var(--ae-modal-text) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ae-modal-text) 10%, transparent), 0 8px 22px rgba(10, 13, 16, .07) !important;
}

html body .ae-quick-modal form.ae-alert-form .ae-alert-criteria label.ae-alert-form__field > :is(input, select, textarea):disabled {
    opacity: .62 !important;
    background-color: var(--ae-modal-surface) !important;
    cursor: not-allowed !important;
}

@media (max-width: 720px) {
    .ae-vehicle-combobox__menu {
        max-height: 240px !important;
    }

    .ae-vehicle-combobox__option {
        min-height: 48px !important;
    }

    form.ae-alert-form .ae-alert-mode__options,
    .ae-alert-criteria__grid {
        grid-template-columns: 1fr !important;
    }

    form.ae-alert-form label.ae-alert-mode__option > span {
        min-height: 74px !important;
        padding: 13px 14px !important;
    }

    form.ae-alert-form label.ae-alert-mode__option > span::before {
        right: 20px !important;
    }

    .ae-alert-criteria {
        padding: 14px !important;
    }

    html body .ae-quick-modal form.ae-alert-form .ae-alert-criteria label.ae-alert-form__field > input,
    html body .ae-quick-modal form.ae-alert-form .ae-alert-criteria label.ae-alert-form__field > select {
        min-height: 50px !important;
    }
}