/* AG THEMING */
.ag-theme-quartz {
    --ag-foreground-color: var(--onColor) !important;
    --ag-background-color: var(--containerColor) !important;
    --ag-header-foreground-color: var(--onColor) !important;
    --ag-header-background-color: var(--platformColor) !important;
    --ag-odd-row-background-color: rgba(var(--shadowColor), 0.1) !important;
    --ag-header-column-resize-handle-color: var(--borderColor) !important;

    --ag-active-color: var(--flashyColor) !important;

    --ag-border-color: /* var(--borderColor) */ transparent !important;
    --ag-row-border-color: transparent !important;

    --ag-borders: none !important;
    /* --ag-border-color: var(--borderColor) !important; */

    --ag-font-size: 14px !important;

    --ag-wrapper-border-radius: 0.375rem;
    --ag-grid-size: 7px !important;
    --ag-selected-row-background-color: color-mix(in srgb, transparent, var(--ag-active-color) 20%) !important;
    --ag-row-hover-color: color-mix(in srgb, transparent, var(--ag-active-color) 5%) !important;
}

.ag-theme-quartz .ag-row:nth-child(even),
.ag-theme-quartz .ag-row:nth-child(odd) {
    background-color: unset !important;
}

.ag-header-cell-comp-wrapper {
    cursor: pointer;
}

.ag-header-group-cell-label, .ag-header-cell-label {
    justify-content: center;
}

.ag-cell-value {
    text-align: center;
}

.ag-theme-quartz .ag-center-cols-viewport {
  min-height: 280px !important;
}

/* VUE-DATEPICKER THEMING */
.dp__theme_dark {
    --dp-background-color: var(--backgroundColor) !important;
    --dp-text-color: var(--onColorActive) !important;
    --dp-hover-color: var(--platformColor) !important;
    --dp-hover-text-color: var(--onColor) !important;
    --dp-hover-icon-color: var(--onColor) !important;
    --dp-primary-color: var(--platformColorActive) !important;
    --dp-primary-disabled-color: var(--platformColor) !important;
    --dp-primary-text-color: var(--onColorActive) !important;
    --dp-secondary-color: var(--flashyColor) !important;
    --dp-border-color: var(--borderColor) !important;
    --dp-menu-border-color: var(--borderColor) !important;
    --dp-border-color-hover: var(--onColor) !important;
    --dp-disabled-color: transparent !important;
    --dp-disabled-border-color: transparent !important;
    --dp-disabled-color-text: var(--borderColor) !important;
    --dp-scroll-bar-background: var(--containerColor) !important;
    --dp-scroll-bar-color: var(--borderColor) !important;
    --dp-success-color: var(--flashyColorActive) !important;
    --dp-success-color-disabled: var(--flashyColorActive) !important;
    --dp-icon-color: var(--onColor) !important;
    --dp-danger-color: var(--dangerColor) !important;
    --dp-marker-color: var(--dangerColor) !important;
    --dp-tooltip-color: var(--shadowColor) !important;
    --dp-highlight-color: var(--platformColorActive) !important;
    --dp-range-between-dates-background-color: var(--dp-hover-color, var(--borderColor)) !important;
    --dp-range-between-dates-text-color: var(--dp-hover-text-color, var(--onColorActive)) !important;
    --dp-range-between-border-color: var(--dp-hover-color, var(--onColorActive)) !important;

    --dp-action-row-padding: 0 !important;
    --dp-border-radius: 0.375rem !important;
    --dp-input-padding: 1px 8px 2px 8px !important;
}

.dp__input{
    height: 28px !important;
    background: transparent !important;
}

.dp__input::placeholder {
    color: var(--onColor) !important;
}

.dp__input:disabled{
    height: 28px !important;
    border-color: var(--shadowColor) !important;
}

.dp__input[readonly] {
    cursor: not-allowed !important; /* Muestra el cursor como no permitido */
    height: 28px !important;
    background: transparent !important;
    --tw-ring-color: transparent !important; /* Elimina el color del anillo */
    --tw-ring-shadow: none !important; /* Elimina la sombra del anillo */
}

.dp__input[readonly]:hover {
    cursor: not-allowed !important; /* Mostrar cursor como no permitido */
}

.dp__input[readonly]:focus {
    outline: none !important; /* Evita el borde azul al hacer focus */
    border-color:var(--onColor) !important;
}

.dp__outer_menu_wrap,
.dp--menu-wrapper {
  position: absolute !important; /* mantiene el posicionamiento natural */
  z-index: 9999 !important;      /* se muestra por encima de todo */
  overflow: visible !important;  /* evita cortes internos */
  max-height: none !important;   /* no limita altura */
}

.dp__outer_menu_wrap {
  top: unset !important;
  left: unset !important;
  transform: translate(0, 0) !important;
}

.custom-datepicker-specialReadonly {
    cursor: default !important;
    pointer-events: none;
    background: transparent !important;
    border-color: var(--shadowColor) !important;
}

.custom-datepicker-specialReadonly .dp__input {
    background: transparent !important;
    pointer-events: none;
    border-color: var(--shadowColor) !important;
}

.custom-datepicker-specialReadonly .dp__input:not(:placeholder-shown) {
    color: var(--onColor) !important;
}
/* MAPBOX DEFAULT SETTINGS*/

.mapboxgl-popup-content {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-center .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{
    display:none !important;
}

.mapboxgl-popup-close-button{
    display: none !important;
}

.mapboxgl-ctrl-logo {
    display: none !important;
}

.mapboxgl-ctrl-group {
    background: transparent !important;
    border: solid 1px var(--borderColor) !important;
    border-radius: 9999px !important;
}

/* INPUT:FOCUS */
  input:focus {
    outline: none;
    border-color: var(--platformColorActive);
    box-shadow: 0 0 10px var(--platformColorActive);}

/* SCROLL */

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 3px;
}

::-webkit-scrollbar:horizontal {
    height: 4px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
    margin: 1px;
}

::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, transparent, var(--borderColor) 60%); /* var(--borderColor); */
    border-radius: 5px;
}

/* INPUT radio */

input[type="radio"] {
    background-color: transparent;
    border-color: var(--borderColor);
    border-radius: 10px;
    border-width: 1px;
    cursor: pointer;
    display: inline-block;
    height: 12px;
    position: relative;
    width: 12px;
    -webkit-appearance: none;
}

input[type="radio"]:hover {
    background-color: color-mix(in srgb, transparent, var(--flashyColor) 30%);
    border-color: var(--borderColor);
}

input[type="radio"]:checked {
    background-color: color-mix(in srgb, transparent, var(--flashyColorActive) 75%);
    border-color: var(--borderColor);
}

input[type="radio"]:checked:hover {
    background-color: color-mix(in srgb, transparent, var(--flashyColorActive) 75%);
    border-color: var(--borderColor);
}

input[type="checkbox"] {
    background-color: transparent;
    border-color: var(--borderColor);
    border-radius: 10px;
    border-width: 1px;
    cursor: pointer;
    display: inline-block;
    height: 12px;
    position: relative;
    width: 12px;
    -webkit-appearance: none;
}

input[type="checkbox"]:hover {
    background-color: color-mix(in srgb, transparent, var(--flashyColor) 30%);
    border-color: var(--borderColor);
}

input[type="checkbox"]:checked {
    background-color: color-mix(in srgb, transparent, var(--flashyColorActive) 75%);
    border-color: var(--borderColor);
}

input[type="checkbox"]:checked:hover {
    background-color: color-mix(in srgb, transparent, var(--flashyColorActive) 75%);
    border-color: var(--borderColor);
}

/* Animations*/

.animate-rolling{
    animation: rolling 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes rolling {
    0%, 10% {
        transform: rotate(-8deg);
    }
    10%, 20% {
        transform: rotate(8deg);
    }
    20%, 30% {
        transform: rotate(-8deg);
    }
    30%, 40% {
        transform: rotate(8deg);
    }
    40%, 50% {
        transform: rotate(-8deg);
    }
    50%, 60% {
        transform: rotate(8deg);
    }
    60%, 70% {
        transform: rotate(-8deg);
    }
    70%, 80% {
        transform: rotate(8deg);
    }
    80%, 90% {
    }
    90%, 100% {
    }
}

.animate-ping{
    animation: ping 2s linear infinite;
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 1s ease-in-out infinite !important;
}