:root {
    --tema-contraste-borde: #000000;
    --tema-contraste-texto: #111111;
    --tema-contraste-pendiente: #c00000;
    --tema-contraste-fondo: #cfd4da;
    --tema-contraste-superficie: #ffffff;
    --tema-contraste-navegacion: #e1e5e9;
    --tema-contraste-contenido: #d9dde2;
    --tema-contraste-encabezado: #c8cfd6;
    --bs-border-color: var(--tema-contraste-borde);
    --bs-border-color-translucent: rgba(0, 0, 0, 0.35);
    --bs-secondary-bg: #d8dde3;
    --bs-tertiary-bg: #e4e7eb;
    --neutral-stroke-rest: var(--tema-contraste-borde);
    --neutral-stroke-hover: var(--tema-contraste-borde);
    --neutral-stroke-active: var(--tema-contraste-borde);
}

html,
body {
    color: var(--tema-contraste-texto);
    background-color: var(--tema-contraste-fondo);
}

.app-content {
    background-color: var(--tema-contraste-contenido) !important;
}

.app-sidebar,
.app-topbar {
    background-color: var(--tema-contraste-navegacion) !important;
    border-color: var(--tema-contraste-borde) !important;
}

.card,
.card-header,
.card-footer,
.modal-content,
.modal-header,
.modal-footer,
.dropdown-menu,
.list-group-item,
.input-group-text,
.form-control,
.form-select,
.form-check-input,
.btn,
.nav-tabs,
.nav-tabs .nav-link,
.table,
.table > :not(caption) > * > *,
.pagination .page-link,
.accordion-item,
.accordion-button,
.alert,
fieldset,
fluent-button,
fluent-text-field,
fluent-number-field,
fluent-select,
fluent-combobox,
fluent-text-area,
fluent-data-grid,
fluent-card {
    border-color: var(--tema-contraste-borde) !important;
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.table-light,
.table-light > :not(caption) > * > * {
    background-color: var(--tema-contraste-encabezado) !important;
}

.form-control,
.form-select,
.input-group-text,
.dropdown-menu,
.modal-content,
.card {
    background-color: var(--tema-contraste-superficie);
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder,
.form-floating > .form-control::placeholder,
.form-floating > .form-control-plaintext::placeholder,
.campo-pendiente {
    color: var(--tema-contraste-pendiente) !important;
    opacity: 1 !important;
}

select option[value=""],
select option[value="0"],
.form-select option[value=""],
.form-select option[value="0"],
select:has(option:checked[value=""]),
select:has(option:checked[value="0"]) {
    color: var(--tema-contraste-pendiente) !important;
}

input[type="date"].campo-pendiente::-webkit-datetime-edit,
input[type="datetime-local"].campo-pendiente::-webkit-datetime-edit,
input[type="month"].campo-pendiente::-webkit-datetime-edit,
input[type="time"].campo-pendiente::-webkit-datetime-edit {
    color: var(--tema-contraste-pendiente) !important;
}

fluent-text-field,
fluent-number-field,
fluent-select,
fluent-combobox,
fluent-text-area {
    --neutral-fill-input-rest: var(--tema-contraste-superficie);
    --neutral-fill-input-hover: var(--tema-contraste-superficie);
    --neutral-foreground-hint: var(--tema-contraste-pendiente);
}

.auth-card,
.brand-logo-wrap,
.app-brand-logo {
    border: 1px solid var(--tema-contraste-borde) !important;
}

.selector-archivo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.selector-archivo-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.selector-archivo-boton {
    margin: 0;
    cursor: pointer;
}

.selector-archivo-nombre {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 0.9rem;
}

.columnas-productos-menu {
    min-width: 15rem;
    max-height: min(70vh, 34rem);
    overflow-y: auto;
}

.columna-producto-nombre {
    width: 100%;
    min-width: 15rem;
}