.pi:before {
    backface-visibility: visible;
}

/* Card hover effect */
.custom-card-title {
    transition: border-color 0.3s ease !important;
}

.custom-card-title:hover {
    border-top: 3px solid #4e84af !important;
    border-color: #4e84af !important;
}

table,
.p-fluid.formgrid.grid {
    font-size: 0.9rem !important;
}

.layout-content>table {
    font-size: 10px !important;
}

.p-inputtext {
    font-size: 0.9rem !important;
}

.p-panel .p-panel-content {
    padding: 1.5rem 0.5rem 0.5rem 0.5rem;
    background: #ffffff;
    color: #495057;
    /* border: 1px solid #dee2e6; */
    border: unset;
    border-top: 0px;
    border-radius: 0px 0px 5px 5px;
}

.p-component {
    font-family: inherit !important;
    font-size: inherit !important;
}

.p-datatable-wrapper {
    border-radius: 8px;
}

.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
    background: #f3f4f6;
    border-top-right-radius: 15;
    border-top-left-radius: 15;
    border-color: #183d5b;
    color: #183d5b;
}

.p-datatable.p-datatable-sm .p-datatable-tbody>tr>td {
    padding: 0.3rem 0.3rem !important;
}

.p-datepicker .p-datepicker-header {
    padding: 0.1rem;
    color: #495057;
    background: #ffffff;
    font-weight: 600;
    margin: 0;
    border-bottom: 1px solid #dee2e6;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.p-datepicker .p-datepicker-buttonbar {
    padding: 0.1rem 0;
    border-top: 1px solid #dee2e6;
}

.p-datepicker table td {
    padding: 0.2rem;
}

.p-datepicker table td>span {
    width: 2rem;
    height: 2rem;
    border-radius: 20%;
    transition: box-shadow 0.2s;
    border: 1px solid transparent;
}

.p-status {
    font-size: 1rem;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    --webkit-color: #757575;
    color: #757575;
}

.p-sembrado,
.p-cosechado,
.p-liquidada,
.p-modificado,
.p-mantenimiento {
    --webkit-color: #183d5b;
    color: #183d5b;
}

.p-disponible,
.p-produccion,
.p-activo,
.p-activado,
.p-agregado {
    --webkit-color: #72c154;
    color: #72c154;
}

.p-rechazado,
.p-eliminado,
.p-inactivo,
.p-desactivado {
    --webkit-color: #d32f2f;
    color: #d32f2f;
}

.p-pendiente,
.p-cosechando {
    --webkit-color: #757575;
    color: #757575;
}

.p-button-outlined:disabled,
.p-button-icon:disabled {
    background-color: #d3d3d373 !important;
    border-color: gray !important;
    color: gray !important;
}

.p-menubar {
    position: relative;
}

.p-menubar .p-menuitem {
    position: relative;
    z-index: 999;
}

.blur-effect {
    position: relative;
    opacity: 0.7;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: url(#blur);
    filter: blur(3px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3') grayscale(100%);
}

.p-card .p-card-title,
.custom-card-title .p-card-title {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    margin-bottom: 0rem !important;
    color: #183d5b !important;
}

.p-datatable.p-datatable-sm .p-datatable-tfoot>tr>td {
    padding: 0.2rem 0.3rem !important;
}

.p-menubar .p-menubar-root-list>.p-menuitem>.p-menuitem-link {
    padding: 0.75rem 0.3rem;
    color: #ffffff;
    border-radius: 0px;
    transition: box-shadow 0.2s;
}

.dx-datagrid-headers .dx-datagrid-table .dx-header-row>td {
    border-bottom: 1px solid #ddd;
    background-color: #183d5b;
    color: #ffffff;
    text-align: center;
    font-weight: 600;
    vertical-align: middle;
    justify-content: center;
    padding: 4px;
}

.dx-datagrid-action {
    text-align: center !important;
    vertical-align: middle;
    justify-content: center;
    padding: 4px;
}

.dx-row.dx-column-lines.dx-header-row {
    vertical-align: middle;
    align-items: center;
    justify-content: center;
}

.dx-datagrid-headers .dx-datagrid-table .dx-row>td {
    word-break: break-word !important;
    text-align: center !important;
}

/*
.dx-datagrid .dx-header-row .dx-datagrid-text-content {
    white-space: normal !important;
    word-break: break-word !important;
}
*/

.dx-datagrid-content .dx-datagrid-table .dx-row>td,
.dx-datagrid-content .dx-datagrid-table .dx-row>tr>td {
    vertical-align: middle !important;
}

.dx-datagrid .dx-row>td {
    padding-top: 2.5px !important;
    padding-bottom: 2.5px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
}

@media (min-width: 1200px) {
    .max-width-400 {
        max-width: 400px;
    }
}

.dx-datagrid .dx-header-filter {
    position: relative;
    color: #ffffff !important;
    font: 14px / 1 DXIcons;
}

.dx-datagrid .dx-header-filter-empty {
    position: relative;
    color: #93a5ad !important;
    font: 12px / 1 DXIcons;
}

.dx-col-fixed.dx-datagrid-action.dx-cell-focus-disabled.dx-datagrid-drag-action {
    background-color: #183d5b !important;
    color: #ffffff !important;
}

.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
    color: #000000;
    background: #e0e0e0;
    border-left: 4px solid #183d5b;
}

.p-listbox .p-listbox-list .p-listbox-item.p-highlight {
    color: #000000;
    background: #e0e0e0;
    border-left: 4px solid #183d5b;
}

.dx-datagrid-header-panel {
    border: 1px solid #ddd !important;
    padding: 5px;
}

.dx-datagrid-rowsview .dx-row-focused.dx-data-row>td,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row>tr:last-child>td {
    background-color: #5c95c5 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #dddddd !important;
}

.p-treetable .p-treetable-thead>tr>th {
    text-align: left;
    padding: 1rem 1rem;
    border: 1px solid #e9ecef;
    border-width: 0 0 1px 0;
    font-weight: 600;
    color: #ffffff;
    background: #183d5b;
    transition: box-shadow 0.2s;
}

.p-picklist .p-picklist-list .p-picklist-item.p-highlight {
    color: #183d5b;
    background: #f3f4f6;
    border-left: 4px solid #183d5b;
    border-right: 4px solid #183d5b;
}

.p-picklist .p-picklist-header {
    background: #f8f9fa;
    color: #183d5b;
    border: 1.5px solid #dee2e6;
    padding: 1rem;
    font-weight: 600;
    border-bottom: 0 none;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.valuation-treetable .p-treetable .p-treetable-thead>tr>th {
    text-align: left;
    padding: 0.5rem 0.5rem !important;
    border: 1px solid #e9ecef;
    border-width: 0 0 1px 0;
    font-weight: 600;
    color: #ffffff;
    background: #183d5b;
    transition: box-shadow 0.2s;
    font-size: 0.9rem;
}

.valuation-treetable .p-treetable .p-treetable-tbody>tr>td {
    text-align: left;
    border: 1px solid #e9ecef;
    border-width: 0 0 1px 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
}

.valuation-treetable .p-treetable .p-treetable-tbody>tr.p-highlight {
    background: #f3f4f6;
}

.valuation-treetable .p-treetable .p-treetable-tbody>tr:hover {
    background: #f8f9fa;
}

.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused)>td {
    background-color: #5c95c5 !important;
    color: #ffffff !important;
}

.dx-datagrid-rowsview .dx-row-focused.dx-data-row>td:not(.dx-focused) {
    background-color: #5c95c5 !important;
    color: #ffffff !important;
}

.custom-history-grid .dx-datagrid-headers .dx-datagrid-table .dx-header-row>td {
    background-color: #183d5b !important;
    color: #ffffff !important;
    text-align: center !important;
    font-weight: 600 !important;
    padding: 4px !important;
    border-bottom: 1px solid #ddd !important;
}

.custom-history-grid .dx-datagrid-content .dx-datagrid-table .dx-row>td {
    padding: 2.5px 7px !important;
    font-size: 11px !important;
}

.custom-history-grid .dx-datagrid-rowsview .dx-row-focused.dx-data-row>td {
    background-color: #5c95c5 !important;
    color: #ffffff !important;
}

.p-menubar .p-submenu-list>.p-menuitem-active>.p-submenu-list {
    width: 15rem !important;
}

.p-menubar .p-submenu-list {
    border-bottom-right-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    animation: fadeInDown 0.3s;
    transform-origin: top center;
}

.p-menubar .p-submenu-list>.p-menuitem-active>.p-submenu-list {
    border-top-right-radius: 10px !important;
    border-top-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    animation: fadeInRight 0.3s;
}

.p-menubar .p-submenu-list {
    z-index: 10000 !important;
}

/* Indicador de menú seleccionado */
.p-menubar .p-menubar-root-list>.p-menuitem.p-menuitem-active>.p-menuitem-link {
    border-bottom: 2px solid #ffffff !important;
    position: relative;
}

/* Keyframes para los efectos de menú */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px) scaleY(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Mejoras adicionales para los efectos de hover */
.p-menubar .p-menuitem-link:not(.p-disabled):hover {
    transition: background-color 0.2s, color 0.2s;
}

/* Efecto para el menú mobile */
@media screen and (max-width: 1250px) {
    .p-menubar.p-menubar-mobile-active .p-menubar-root-list {
        animation: fadeInDown 0.3s;
    }
}

/* Estilos de mayor especificidad para estados en filas seleccionadas */
.dx-datagrid-rowsview .dx-row-focused.dx-data-row>td .p-status .p-disponible,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row>td .p-status .p-produccion,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row>td .p-status .p-activo,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row>td .p-status .p-activado,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row>td .p-status .p-agregado,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row>td .p-status .p-sembrado,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row>td .p-status .p-cosechado,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row>td .p-status .p-liquidada,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row>td .p-status .p-modificado,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row>td .p-status .p-mantenimiento,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row>td .p-status .p-pendiente,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row>td .p-status .p-cosechando {
    color: #ffffff !important;
    --webkit-color: #ffffff !important;
    background-color: transparent !important;
}

/* Forzar color blanco con !important */
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) .p-status {
    color: #ffffff !important;
    --webkit-color: #ffffff !important;
}

.dx-selection.dx-row {
    background-color: #5c95c5 !important;
    color: #ffffff !important;
}

/* Estilos para texto de estados en filas seleccionadas */
.dx-datagrid-rowsview .dx-selection.dx-row .p-status,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row .p-status {
    color: #ffffff !important;
    --webkit-color: #ffffff !important;
}

/* Estilos específicos para diferentes estados */
.dx-datagrid-rowsview .dx-selection.dx-row .p-status.p-disponible,
.dx-datagrid-rowsview .dx-selection.dx-row .p-status.p-produccion,
.dx-datagrid-rowsview .dx-selection.dx-row .p-status.p-activo,
.dx-datagrid-rowsview .dx-selection.dx-row .p-status.p-activado,
.dx-datagrid-rowsview .dx-selection.dx-row .p-status.p-agregado,
.dx-datagrid-rowsview .dx-selection.dx-row .p-status.p-sembrado,
.dx-datagrid-rowsview .dx-selection.dx-row .p-status.p-cosechado,
.dx-datagrid-rowsview .dx-selection.dx-row .p-status.p-liquidada,
.dx-datagrid-rowsview .dx-selection.dx-row .p-status.p-modificado,
.dx-datagrid-rowsview .dx-selection.dx-row .p-status.p-mantenimiento,
.dx-datagrid-rowsview .dx-selection.dx-row .p-status.p-pendiente,
.dx-datagrid-rowsview .dx-selection.dx-row .p-status.p-cosechando {
    color: #ffffff !important;
    --webkit-color: #ffffff !important;
}

/* Estilos para botones en filas seleccionadas */
.dx-datagrid-rowsview .dx-selection.dx-row .p-button,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row .p-button {
    color: #ffffff !important;
}

.dx-datagrid-rowsview .dx-selection.dx-row .p-button-icon,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row .p-button-icon {
    color: #ffffff !important;
}

.dx-datagrid-rowsview .dx-selection.dx-row span[class^='tooltip-lote-'],
.dx-datagrid-rowsview .dx-row-focused span[class^='tooltip-lote-'] {
    color: #ffffff !important;
}

.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
    background: #f3f4f6 !important;
    border-top-right-radius: 15 !important;
    border-top-left-radius: 15 !important;
    border-color: #183d5b !important;
    color: #183d5b !important;
}

.tabview-custom .p-tabview-panels {
    padding: 0rem !important;
}

.tabview-custom .p-tabview-nav-content {
    width: 50% !important;
}

.tab-panel-animated {
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.18, 1), opacity 0.4s cubic-bezier(0.77, 0, 0.18, 1);
    will-change: transform, opacity;
    opacity: 1;
}

.tab-slide-in-left {
    animation: slideLeftIn 0.4s cubic-bezier(0.77, 0, 0.18, 1);
}

.tab-slide-in-right {
    animation: slideRightIn 0.4s cubic-bezier(0.77, 0, 0.18, 1);
}

@keyframes slideLeftIn {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRightIn {
    0% {
        opacity: 0;
        transform: translateX(-60px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.dx-pivotgrid .dx-area-description-cell,
.dx-pivotgrid .dx-column-header,
.dx-pivotgrid .dx-data-header,
.dx-pivotgrid .dx-total {
    background-color: #183d5b !important;
}

.dx-pivotgrid .dx-area-description-cell .dx-pivotgrid-toolbar .dx-button:not(.dx-state-hover):not(.dx-state-active) {
    background-color: #ffffff !important;
}

.dx-pivotgrid .dx-area-description-cell .dx-pivotgrid-toolbar .dx-button {
    margin-top: 5px !important;
    margin-left: 5px !important;
}

.dx-pivotgrid .dx-pivotgrid-horizontal-headers {
    background-color: #183d5b !important;
    color: #ffffff !important;
}

.dx-pivotgrid .dx-pivotgrid-horizontal-headers tr td {
    color: #ffffff !important;
}

.dx-pivotgrid .dx-pivotgrid-area-data tbody .dx-total {
    background-color: #f8f8f8 !important;
}

/* Sidebar Overlay */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
    will-change: opacity;
}

.sidebar-overlay-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Sidebar Panel */
.custom-sidebar-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 25rem;
    max-width: 90vw;
    height: 100vh;
    background: white;
    z-index: 1000;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    overflow-y: auto;
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.custom-sidebar-panel.visible {
    right: 0;
}

/* Ensure the form takes available space and button stays at bottom */
.custom-sidebar-panel .p-fluid.formgrid.grid {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Style for the calculate button */
.calculate-button {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.custom-input-number {
    height: 1.4rem !important;
    text-align: right !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    border-radius: 0px !important;
    display: flex !important;
    align-items: center !important;
}

.custom-new-tab-button {
    font-size: 1.05rem !important;
    margin-top: -3px !important;
    margin-right: 0.5rem !important;
    height: 2.1rem !important;
}

.custom-tab-view .p-tabview-panels {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
    padding-bottom: 0rem !important;
}

.dx-datagrid-summary-item {
    color: #081d2e !important;
    font-weight: 500 !important;
}

.dx-pivotgrid .dx-pivotgrid-horizontal-headers tr td {
    color: #ffffff !important;
    background-color: #183d5b !important;
}

.dx-datagrid .dx-datagrid-content-fixed .dx-datagrid-table .dx-col-fixed {
    background-color: none !important;
}

.dx-datagrid .dx-row td.dx-col-fixed.dx-cell-focus-disabled.dx-datagrid-drag-action {
    background-color: #183d5b !important;
}

.production-summary .p-tabmenu .p-tabmenu-nav {
    height: 4.5rem !important;
}

.density-widget .p-tabmenu .p-tabmenu-nav {
    height: 2.5rem !important;
}

.Toastify__toast-container--top-center {
    z-index: 99999 !important;
}

.valuation-overlay-panel .p-overlaypanel-content {
    padding: 0rem !important;
    border-radius: 10px !important;
    max-height: 350px !important;
    overflow: auto !important;
}

.comment-generator-active {
    border: 1px solid #d1d5db;
    animation: pulse-border 1.8s infinite;
}

@keyframes pulse-border {
    0% {
        box-shadow: 0 0 0 0 rgba(92, 149, 197, 0.4);
    }

    50% {
        box-shadow: 0 0 6px 2px rgba(24, 61, 91, 0.3);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(92, 149, 197, 0);
    }
}

/* Command Bar Actions Animation */
@keyframes slideInFromLeft {
    from {
        transform: translateX(-15px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.command-bar-item {
    opacity: 0;
    animation: slideInFromLeft 0.3s ease-out forwards;
}

/* Staggered animation for each item */
.command-bar-item:nth-child(1) {
    animation-delay: 0.05s;
}

.command-bar-item:nth-child(2) {
    animation-delay: 0.1s;
}

.command-bar-item:nth-child(3) {
    animation-delay: 0.15s;
}

.command-bar-item:nth-child(4) {
    animation-delay: 0.2s;
}

.command-bar-item:nth-child(5) {
    animation-delay: 0.25s;
}

.command-bar-item:nth-child(6) {
    animation-delay: 0.3s;
}

.command-bar-item:nth-child(7) {
    animation-delay: 0.35s;
}

.command-bar-item:nth-child(8) {
    animation-delay: 0.4s;
}

.command-bar-item:nth-child(n+9) {
    animation-delay: 0.45s;
}

/* animación de entrada */
.env-dialog.p-dialog {
    transform-origin: bottom right;
    animation: growFromCorner 0.35s ease forwards;
}

@keyframes growFromCorner {
    0% {
        opacity: 0;
        transform: scale(0.2) translate(80%, 80%);
    }

    100% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
}

.bouncing {
    animation: bounce 0.6s infinite;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Apaga el color de selección */
.datagrid-without-color-seleccion .dx-datagrid-rowsview .dx-row.dx-selection,
.datagrid-without-color-seleccion .dx-datagrid-rowsview .dx-row.dx-selection>td {
    background: transparent !important;
    color: inherit !important;
}

/* Apaga el color/borde de la fila enfocada */
.datagrid-without-color-seleccion .dx-datagrid-rowsview .dx-row.dx-row-focused,
.datagrid-without-color-seleccion .dx-datagrid-rowsview .dx-row.dx-row-focused>td {
    background: transparent !important;
    color: inherit !important;
    border-left: none !important;
    /* Material suele poner una barra */
}

/* Por si el tema usa pseudo-elemento para el overlay */
.datagrid-without-color-seleccion .dx-datagrid-rowsview .dx-row.dx-selection::before,
.datagrid-without-color-seleccion .dx-datagrid-rowsview .dx-row.dx-row-focused::before {
    background: transparent !important;
}

/* Ícono transformable */
.btn-icon-bounce .p-button-icon-right {
    display: inline-block;
    will-change: transform;
}

/* Espera 1s; luego rebote suave y pequeño hasta salir del botón */
.btn-icon-bounce:hover .p-button-icon-right {
    animation-name: bounceXSoft;
    animation-duration: 0.8s;
    /* un poco más lento para suavidad */
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    /* empieza tras 1s */
    animation-iteration-count: infinite;
    /* se mantiene hasta mouseout */
}

@keyframes bounceXSoft {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(0);
    }

    40% {
        transform: translateX(2px);
    }

    60% {
        transform: translateX(1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-icon-bounce:hover .p-button-icon-right {
        animation: none !important;
    }
}

.custom-slider .p-slider-handle {
    height: 0.85rem !important;
    width: 0.85rem !important;
    margin-top: -0.4315rem !important;
}

/* For horizontal sliders */
.custom-slider.p-slider-horizontal .p-slider-handle {
    margin-top: -0.4315rem !important;
}