html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ============================================
   ESTILOS GLOBALES PARA PLACEHOLDERS/EMPTY MESSAGES DE KENDO TEXTBOX
   ============================================
   Aplicar cursiva (italic) y color tenue a todos los placeholders
   y que desaparezcan cuando el control obtiene el foco o tiene valor
   ============================================ */

/* SOLUCIÓN PRINCIPAL: Selectores con máxima especificidad para Kendo TextBox */
/* Opción 1: Input con clase k-input-inner directamente */
input.k-input-inner::placeholder,
input.k-input-inner::-webkit-input-placeholder,
input.k-input-inner::-moz-placeholder,
input.k-input-inner:-ms-input-placeholder,
input.k-input-inner::-ms-input-placeholder {
    font-style: italic !important;
    font-family: inherit !important;
    color: #999999 !important;
    opacity: 0.6 !important;
}

/* Opción 2: Combinación wrapper + input (máxima especificidad) */
.k-textbox.k-input .k-input-inner::placeholder,
.k-textbox.k-input .k-input-inner::-webkit-input-placeholder,
.k-textbox.k-input .k-input-inner::-moz-placeholder,
.k-textbox.k-input .k-input-inner:-ms-input-placeholder,
.k-textbox.k-input .k-input-inner::-ms-input-placeholder,
.k-textbox .k-input-inner::placeholder,
.k-textbox .k-input-inner::-webkit-input-placeholder,
.k-textbox .k-input-inner::-moz-placeholder,
.k-textbox .k-input-inner:-ms-input-placeholder,
.k-textbox .k-input-inner::-ms-input-placeholder,
.k-input .k-input-inner::placeholder,
.k-input .k-input-inner::-webkit-input-placeholder,
.k-input .k-input-inner::-moz-placeholder,
.k-input .k-input-inner:-ms-input-placeholder,
.k-input .k-input-inner::-ms-input-placeholder {
    font-style: italic !important;
    font-family: inherit !important;
    color: #999999 !important;
    opacity: 0.6 !important;
}

/* Estilo global con máxima especificidad al final del CSS para sobrescribir tema de Kendo */
span.k-textbox.k-input input.k-input-inner::placeholder,
span.k-textbox.k-input input.k-input-inner::-webkit-input-placeholder,
span.k-textbox.k-input input.k-input-inner::-moz-placeholder,
span.k-textbox.k-input input.k-input-inner:-ms-input-placeholder,
span.k-textbox.k-input input.k-input-inner::-ms-input-placeholder {
    font-style: italic !important;
    font-family: inherit !important;
    color: #999999 !important;
    opacity: 0.6 !important;
}

/* Placeholders para TextBox de Kendo - Usando .k-input-inner (selector específico de Kendo) */
.k-textbox input::placeholder,
.k-textbox input::-webkit-input-placeholder,
.k-textbox input::-moz-placeholder,
.k-textbox input:-ms-input-placeholder,
.k-textbox input::-ms-input-placeholder {
    font-style: italic !important;
    font-family: inherit !important;
    color: #999999 !important;
    opacity: 0.6 !important;
}

/* Placeholders para .k-input-inner (selector específico de Kendo UI) */
.k-input-inner::placeholder,
.k-input-inner::-webkit-input-placeholder,
.k-input-inner::-moz-placeholder,
.k-input-inner:-ms-input-placeholder,
.k-input-inner::-ms-input-placeholder {
    font-style: italic !important;
    font-family: inherit !important;
    color: #999999 !important;
    opacity: 0.6 !important;
}

/* Placeholders para inputs dentro de widgets de Kendo con clase .k-input */
.k-input::placeholder,
.k-input::-webkit-input-placeholder,
.k-input::-moz-placeholder,
.k-input:-ms-input-placeholder,
.k-input::-ms-input-placeholder {
    font-style: italic !important;
    font-family: inherit !important;
    color: #999999 !important;
    opacity: 0.6 !important;
}

/* Placeholders para TextBox de Kendo usando selector más específico */
.k-textbox .k-input-inner::placeholder,
.k-textbox .k-input-inner::-webkit-input-placeholder,
.k-textbox .k-input-inner::-moz-placeholder,
.k-textbox .k-input-inner:-ms-input-placeholder,
.k-textbox .k-input-inner::-ms-input-placeholder {
    font-style: italic !important;
    font-family: inherit !important;
    color: #999999 !important;
    opacity: 0.6 !important;
}

/* Placeholders para todos los inputs que puedan tener placeholders */
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="url"]::placeholder,
input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-ms-input-placeholder {
    font-style: italic !important;
    font-family: inherit !important;
    color: #999999 !important;
    opacity: 0.6 !important;
}

/* Ocultar placeholder cuando el input tiene foco */
input.k-input-inner:focus::placeholder,
input.k-input-inner:focus::-webkit-input-placeholder,
input.k-input-inner:focus::-moz-placeholder,
input.k-input-inner:focus:-ms-input-placeholder,
input.k-input-inner:focus::-ms-input-placeholder,
.k-textbox input:focus::placeholder,
.k-textbox input:focus::-webkit-input-placeholder,
.k-textbox input:focus::-moz-placeholder,
.k-textbox input:focus:-ms-input-placeholder,
.k-textbox input:focus::-ms-input-placeholder,
.k-input-inner:focus::placeholder,
.k-input-inner:focus::-webkit-input-placeholder,
.k-input-inner:focus::-moz-placeholder,
.k-input-inner:focus:-ms-input-placeholder,
.k-input-inner:focus::-ms-input-placeholder,
.k-input:focus::placeholder,
.k-input:focus::-webkit-input-placeholder,
.k-input:focus::-moz-placeholder,
.k-input:focus:-ms-input-placeholder,
.k-input:focus::-ms-input-placeholder,
input:focus::placeholder,
input:focus::-webkit-input-placeholder,
input:focus::-moz-placeholder,
input:focus:-ms-input-placeholder,
input:focus::-ms-input-placeholder {
    opacity: 0 !important;
    color: transparent !important;
}

/* Asegurar que los placeholders también se oculten cuando hay valor */
input.k-input-inner:not(:placeholder-shown)::placeholder,
.k-textbox input:not(:placeholder-shown)::placeholder,
.k-input-inner:not(:placeholder-shown)::placeholder,
.k-input:not(:placeholder-shown)::placeholder,
input:not(:placeholder-shown)::placeholder {
    opacity: 0 !important;
}

/* Placeholders para ComboBox y otros controles de Kendo con inputs */
.k-combobox .k-input::placeholder,
.k-combobox .k-input::-webkit-input-placeholder,
.k-combobox .k-input::-moz-placeholder,
.k-combobox .k-input:-ms-input-placeholder,
.k-combobox .k-input::-ms-input-placeholder,
.k-combobox .k-input-inner::placeholder,
.k-combobox .k-input-inner::-webkit-input-placeholder,
.k-combobox .k-input-inner::-moz-placeholder,
.k-combobox .k-input-inner:-ms-input-placeholder,
.k-combobox .k-input-inner::-ms-input-placeholder,
.k-dropdownlist .k-input::placeholder,
.k-dropdownlist .k-input::-webkit-input-placeholder,
.k-dropdownlist .k-input::-moz-placeholder,
.k-dropdownlist .k-input:-ms-input-placeholder,
.k-dropdownlist .k-input::-ms-input-placeholder,
.k-dropdownlist .k-input-inner::placeholder,
.k-dropdownlist .k-input-inner::-webkit-input-placeholder,
.k-dropdownlist .k-input-inner::-moz-placeholder,
.k-dropdownlist .k-input-inner:-ms-input-placeholder,
.k-dropdownlist .k-input-inner::-ms-input-placeholder {
    font-style: italic !important;
    font-family: inherit !important;
    color: #999999 !important;
    opacity: 0.6 !important;
}

/* Ocultar placeholders en ComboBox y DropDownList cuando tienen foco */
.k-combobox .k-input:focus::placeholder,
.k-combobox .k-input:focus::-webkit-input-placeholder,
.k-combobox .k-input:focus::-moz-placeholder,
.k-combobox .k-input:focus:-ms-input-placeholder,
.k-combobox .k-input:focus::-ms-input-placeholder,
.k-combobox .k-input-inner:focus::placeholder,
.k-combobox .k-input-inner:focus::-webkit-input-placeholder,
.k-combobox .k-input-inner:focus::-moz-placeholder,
.k-combobox .k-input-inner:focus:-ms-input-placeholder,
.k-combobox .k-input-inner:focus::-ms-input-placeholder,
.k-dropdownlist .k-input:focus::placeholder,
.k-dropdownlist .k-input:focus::-webkit-input-placeholder,
.k-dropdownlist .k-input:focus::-moz-placeholder,
.k-dropdownlist .k-input:focus:-ms-input-placeholder,
.k-dropdownlist .k-input:focus::-ms-input-placeholder,
.k-dropdownlist .k-input-inner:focus::placeholder,
.k-dropdownlist .k-input-inner:focus::-webkit-input-placeholder,
.k-dropdownlist .k-input-inner:focus::-moz-placeholder,
.k-dropdownlist .k-input-inner:focus:-ms-input-placeholder,
.k-dropdownlist .k-input-inner:focus::-ms-input-placeholder {
    opacity: 0 !important;
    color: transparent !important;
}

/* ============================================
   ESTILOS GLOBALES PARA TOASTS
   ============================================
   Asegurar que los toasts siempre tengan el z-index más alto
   para aparecer por encima de modales, overlays y cualquier otro componente
   ============================================ */

/* Contenedores de toast - por encima de ventanas/modales Kendo (p. ej. filtros dinámicos en modal) */
#toastContainer,
#toastContainerCenter {
    z-index: 120000 !important;
}

/* Contenedor: anclado desde arriba, altura fija para que el borde inferior no quede detrás de la barra de tareas */
#toastContainerCenter {
    top: 1rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-height: calc(100vh - 1rem - 6rem) !important; /* 1rem arriba, 6rem abajo (barra de tareas) */
    overflow: hidden !important; /* no dejar que el contenido empuje el contenedor */
}

/* Toasts: altura que deja el borde inferior siempre visible (sin tapar por la barra de inicio) */
.toast {
    z-index: 120001 !important;
    position: relative !important;
    max-height: calc(100vh - 9rem) !important; /* contenedor menos padding, borde dentro de pantalla */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Cuerpo del toast con scroll cuando hay mucho contenido (ej. muchos errores de inventario) */
.toast .toast-body {
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 9rem - 52px) !important; /* reservar header */
}

/* Asegurar que los toasts de confirmación también tengan z-index alto */
.toast-confirm {
    z-index: 120001 !important;
}

/* ============================================
   TRI-STATE SWITCH (Filtro dinámico tipo 103 - Sí/No/Null)
   Colores: izquierda = amarillo, centro = gris, derecha = turquesa
   ============================================ */
.tri-switch {
    width: 80px;
    height: 32px;
    cursor: pointer;
    display: inline-block;
    user-select: none;
    touch-action: none;
    position: relative;
}
.tri-switch .tri-track {
    position: relative;
    width: 100%;
    height: 100%;
    background: #e9ecef;
    border-radius: 32px;
    transition: background .2s ease;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
.tri-switch .tri-zone {
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 5;
    cursor: pointer;
}
.tri-switch .tri-zone.tri-zone-left {
    left: 0;
    width: 27px;
    border-top-left-radius: 32px;
    border-bottom-left-radius: 32px;
}
.tri-switch .tri-zone.tri-zone-null {
    left: 27px;
    width: 26px;
}
.tri-switch .tri-zone.tri-zone-right {
    left: 53px;
    width: 27px;
    border-top-right-radius: 32px;
    border-bottom-right-radius: 32px;
}
.tri-switch[data-state="left"] .tri-track { background: #f0ad4e; }
.tri-switch[data-state="null"] .tri-track { background: #e9ecef; }
.tri-switch[data-state="right"] .tri-track { background: #17a2b8; }
.tri-switch .tri-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: left .3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10;
    pointer-events: none;
}
.tri-switch .thumb-container {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 4px;
    left: 28px;
    z-index: 20;
    cursor: grab;
    background: transparent;
}
.tri-switch .thumb-container:active { cursor: grabbing; }
.tri-switch[data-state="left"] .thumb-container { left: 4px; }
.tri-switch[data-state="null"] .thumb-container { left: 28px; }
.tri-switch[data-state="right"] .thumb-container { left: 52px; }
.tri-switch .tri-label-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    line-height: 32px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity .2s ease;
}
.tri-switch[data-state="left"] .tri-label-inner,
.tri-switch[data-state="right"] .tri-label-inner { opacity: 1; }
.tri-switch[data-state="left"] .tri-label-inner { color: #212529; }
.tri-switch[data-state="right"] .tri-label-inner { color: #fff; }
.tri-labels-external {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    width: 80px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #495057;
    min-height: 16px;
}
.tri-labels-external span { text-align: center; min-width: 22px; }
.tri-switch[data-state="left"] ~ .tri-labels-external span:first-child { color: #212529; font-weight: 600; }
.tri-switch[data-state="right"] ~ .tri-labels-external span:last-child { color: #17a2b8; font-weight: 600; }
.tri-switch[data-state="null"] ~ .tri-labels-external .tri-null-indicator { color: #495057; font-weight: 600; }
.tri-switch:focus-visible {
    outline: 2px solid #17a2b8;
    outline-offset: 2px;
    border-radius: 32px;
}

/* Wrapper del tri-state: evita que la fila corte el label del campo */
.tri-switch-wrapper {
    min-height: 52px;
}
.tri-switch-wrapper .tri-switch {
    flex-shrink: 0;
}
.tri-switch-wrapper .tri-labels-external {
    flex-shrink: 0;
}

/* Filtros dinámicos tipo RI (rango entero): flex sin min-width:0 puede deformar NumericTextBox (Kendo) */
.dynamic-filter-ri .k-numerictextbox {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
}