:root {
    --rz-primary: #4088BD;
    --rz-checkbox-checked-background-color: #4088BD;
    --rz-primary-light: #4088BD;
    --rz-profile-menu-top-item-background-color: #ffffff00;
}

/* ============================================================
   Diálogos de Radzen con el diseño moderno de la app:
   tarjeta blanca redondeada, fondo con blur y X roja en la esquina.
   ============================================================ */
.rz-dialog-mask {
    opacity: 1;
    background: rgba(0, 0, 0, .5) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.rz-dialog {
    position: relative;
    border-radius: 16px !important;
    overflow: visible !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28) !important;
}

.rz-dialog-titlebar,
.rz-dialog-side-titlebar {
    background: #fff !important;
    border-bottom: 1px solid #f0f2f5;
    border-radius: 16px 16px 0 0;
    padding: 18px 54px 14px 22px;
}

.rz-dialog-title,
.rz-dialog-side-title {
    color: #1f2937 !important;
    font-weight: 800;
    font-size: 1.12rem;
    text-transform: none;
    margin: 0;
}

.rz-dialog-content {
    border-radius: 0 0 16px 16px;
    background: #fff;
}

/* X roja circular pegada en la esquina superior derecha */
.rz-dialog-titlebar-close,
.rz-dialog-side-titlebar-close {
    position: absolute !important;
    top: -13px;
    right: -13px;
    width: 34px;
    height: 34px;
    margin: 0 !important;
    background: #e53935 !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(229, 57, 53, .4);
    transition: background .12s, transform .1s;
    z-index: 10;
}

    .rz-dialog-titlebar-close:hover,
    .rz-dialog-side-titlebar-close:hover {
        background: #c62828 !important;
        transform: scale(1.06);
    }

.rz-dialog-titlebar-close .rzi-times,
.rz-dialog-side-titlebar-close .rzi-times {
    font-size: 15px;
    color: #fff;
    font-weight: 900;
    line-height: 1;
    vertical-align: middle;
}

.BtnItruck {
    background: #3E3936 !important;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    border-radius: 9px;
}

.text-gray {
    color: gray;
}

.rz-dialog-content,
.rz-dialog-side-content {
    padding-top: 1px;
    padding-bottom: 30px
}

.rz-form-field-helper {
    padding: var(--rz-form-field-helper-padding);
    z-index: 2 !important;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Estilos por defecto (PC) */
.containerCel {
    padding-top: 20%;
}

.LogoTelefono {
    display: block;
    margin: 0 auto;
}

/* Media query para teléfonos */
@media only screen and (max-width: 768px) {
    .containerCel {
        padding-top: 10%;
    }

    .LogoTelefono {
        text-align: center;
    }
}



.backgroundCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}


.TextWhite {

    color: #ffffff !important
}

.TextGre {
    color: #373737 !important
}


.custom-notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-notification {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    text-align: center;
    position: relative;
}

.custom-notification h2 {
    color: #198754;
}

.custom-notification span {
    background-color: #f0f0f0;
    padding: 5px;
    border-radius: 5px;
}

.custom-notification button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #198754;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.progress-bar {
    width: 100%;
    height: 5px;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 15px;
}

.progress-fill {
    height: 100%;
    background-color: #198754;
    transition: width 0.1s linear;
}

/* Icono de Guía en el header (junto a la campana) */
.header-guide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: 14px;
    border-radius: 50%;
    cursor: help;
    transition: background-color .15s ease;
}

.header-guide:hover {
    background-color: rgba(255, 255, 255, .12);
}

.header-info {
    display: flex;
    justify-content: center;
    /* Centrar el contenido horizontalmente */
    align-items: center;
    /* Centrar el contenido verticalmente */
    background-color: #2C2C2C;
    /* Fondo oscuro */
    padding: 10px 20px;
    border-radius: 15px;
}

@media only screen and (max-width: 768px) {
    .header-info {
        display: none !important;
    }
}

.header-info a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    margin: 0 15px;
    /* Espacio entre los elementos */
    display: inline-flex;
    align-items: center;
}

.header-info a:first-child {
    border-right: 2px solid #555;
    /* Línea divisoria entre los elementos */
    padding-right: 15px;
    margin-right: 15px;
}

.header-info a:last-child {
    padding: 5px 10px;
    background-color: #FFD700;
    /* Color dorado para destacar */
    border-radius: 15px;
    /* Borde redondeado */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    /* Sombra para dar profundidad */
}

.header-info a:last-child:hover {
    background-color: #4088BD;
    /* Color más oscuro al pasar el mouse */
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.header-info {
    display: flex;
    justify-content: center;
    /* Centrar el contenido horizontalmente */
    align-items: center;
    /* Centrar el contenido verticalmente */
    background-color: #2C2C2C;
    /* Fondo oscuro */
    padding: 10px 20px;
    border-radius: 15px;
}

.header-info a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    margin: 0 15px;
    /* Espacio entre los elementos */
    display: inline-flex;
    align-items: center;

}

.header-info a:first-child {
    border-right: 2px solid #555;
    /* Línea divisoria entre los elementos */
    padding-right: 15px;
    margin-right: 15px;
}

.license {
    padding: 5px 10px;
    border-radius: 15px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    font-weight: bold;
}

.license-profesional {
    background-color: #4A90E2 !important;
    /* Azul más suave para Academic */
    color: #FFFFFF !important;
    /* Blanco */
}

.license-essential {
    background-color: #7B8E98 !important;
    /* Gris azulado para Basic */
    color: #FFFFFF !important;
    /* Blanco */
}

.license-enterprise {
    background-color: #34A853 !important;
    /* Verde vibrante para Enterprise */
    color: #FFFFFF !important;
    /* Blanco */
}

.license-free {
    background-color: #00BFA5 !important;
    /* Verde agua para Free */
    color: #FFFFFF !important;
    /* Blanco */
}

.license-premium {
    background-color: #4088BD !important;
    /* Dorado más suave para Premium */
    color: #2C2C2C !important;
    /* Oscuro para contraste */
}

.license-pro {
    background-color: #E53935 !important;
    /* Rojo vivo para Pro */
    color: #FFFFFF !important;
    /* Blanco */
}

.license-trial {
    background-color: #198754 !important;
    /* Naranja suave para Trial */
    color: white !important;
    /* Oscuro para contraste */
}

.license-default {
    background-color: #495057 !important;
    /* Gris oscuro pero no completamente negro */
    color: #FFFFFF !important;
    /* Blanco */
}


.rz-tooltip-content {
    background-color: #d41355;
    color: var(--rz-text-contrast-color);
}

.rz-panel-menu .rz-navigation-item-active .rz-navigation-item-icon,
.rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon {
    color: #333333;
}

.rz-panel-menu .rz-navigation-item-active,
.rz-panel-menu .rz-navigation-item-wrapper-active {
    background-color: #4088bd59;
}


.rz-alert .rz-alert-title {
    color: #ffffff;
}

.rz-alert.rz-warning.rz-shade-lighter {
    --rz-alert-background-color: rgb(200 184 81);
    --rz-alert-color: #ffffff;
    --rz-alert-title-color: #ffffff;
    --rz-alert-icon-color: #ffffff;
}

.rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):hover:not(:active),
.rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):focus-visible:not(:active),
.rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):active {
    background-color: rgb(255 255 255 / 20%);
    color: #ffffff;
    background-image: none;
    box-shadow: none;
}

.rz-button.rz-variant-text.rz-warning.rz-shade-darker {
    color: #ffffff;
}

.rz-alert.rz-info.rz-shade-lighter {
    --rz-alert-background-color: rgb(251 253 255 / 20%);
    --rz-alert-color: #ffffff;
    --rz-alert-title-color: #ffffff;
    --rz-alert-icon-color: #ffffff;
}

.rz-button.rz-variant-text.rz-info.rz-shade-darker {
    color: #ffffff;
}

/* Ocultar en teléfonos (pantallas menores o iguales a 767px) */
@media only screen and (max-width: 767px) {
    .ocultar-en-telefono {
        display: none;
    }

    .custom-header {
        flex-direction: column;
    }

    .custom-buttons {
        padding-top: 20px
    }

    .custom-main-cards {
        display: block;
    }

    .custom-main-cards {

        align-items: normal;
    }

    .custom-main {

        margin-left: 0px !important;

    }

    .custom-container {
        grid-template-columns: repeat(1, 1fr) !important;
        /* 1 columna en pantallas pequeñas */
        padding-top: 20px;
        /* Ajuste del padding para pantallas pequeñas */
    }

    .List-dashboard-container {

        gap: 0px !important;

    }
}

.mobile-header-info {
    display: none;
    justify-content: center;
    /* Centrar el contenido horizontalmente */
    align-items: center;
    /* Centrar el contenido verticalmente */
    background-color: #373737;
    /* Fondo oscuro */
    padding: 10px 20px;
}

@media only screen and (max-width: 768px) {
    .mobile-header-info {
        display: flex !important;
    }
}

.mobile-header-info a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    margin: 0 15px;
    /* Espacio entre los elementos */
    display: inline-flex;
    align-items: center;
}

.mobile-header-info a:first-child {
    border-right: 2px solid #555;
    /* Línea divisoria entre los elementos */
    padding-right: 15px;
    margin-right: 15px;
}

.mobile-header-info a:last-child {
    padding: 5px 10px;
    background-color: #FFD700;
    /* Color dorado para destacar */
    border-radius: 15px;
    /* Borde redondeado */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    /* Sombra para dar profundidad */
}

.mobile-header-info a:last-child:hover {
    background-color: #4088BD;
    /* Color más oscuro al pasar el mouse */
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.license-cards-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.license-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    max-width: 48%;
}

.license-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.license-info {
    display: flex;
    align-items: center;
    font-size: 0.9em;
    color: #333;
}

.license-info i {
    margin-right: 10px;
    color: #4088BD;
}

.license-info span {
    font-size: 0.9em;
}



.animated-text {
    display: inline-block;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.rz-button.rz-info.rz-shade-darker:hover {
    background-color: #E53935;
}

.ItLicen-price-carousel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    /* Ensure content outside the container is hidden */
}

.ItLicen-price-content {
    text-align: center;
    flex-grow: 1;
    overflow: hidden;
    /* Hide overflow content to keep only active slide visible */
}

.ItLicen-price-slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    /* Smooth transition for slide effect */
}

.ItLicen-price-slide {
    min-width: 100%;
    /* Each slide takes full width of the container */
    box-sizing: border-box;
}

.ItLicen-price {
    font-size: 1.5em;
    margin-bottom: 5px;
}

.ItLicen-discount {
    color: green;
    font-weight: bold;
}



.ItLicen-carousel-control.prev {
    position: absolute;
    left: 0;
}

.ItLicen-carousel-control.next {
    position: absolute;
    right: 0;
}

.ItLicen-carousel-control:hover {
    color: #495057;
}


.ItLicen-carousel-control {
    background: none;
    border: none;
    font-size: 3em;
    cursor: pointer;
    color: #333;
    padding: 0 10px;
    font-weight: 900;
    z-index: 10;
    /* Ensure buttons are on top */
}


/* Estilos específicos para pantallas pequeñas (teléfonos) */
@media (max-width: 768px) {
    .ItLicen-price-carousel {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 100%;
        /* Asegura que el carrusel ocupe todo el ancho en teléfonos */
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }

    .ItLicen-price-content {
        text-align: center;
        flex-grow: 1;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .ItLicen-price-slider {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .ItLicen-price-slide {
        min-width: 100%;
        box-sizing: border-box;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Centrar el contenido horizontalmente */
        justify-content: center;
        /* Centrar el contenido verticalmente */
    }

    .ItLicen-plan-feature {
        text-align: center;
        /* Centrar el texto dentro del plan */
    }

    .ItLicen-plan-feature-title {
        font-weight: bold;
        margin-bottom: 5px;
        /* Espacio entre el título y el precio */
    }

    .ItLicen-discount {
        margin-top: 10px;
        /* Espacio por encima del descuento */
        color: green;
        font-weight: bold;
        font-size: 1.2em;
        /* Aumentar un poco el tamaño del texto */
    }

    .ItLicen-carousel-control {
        background: none;
        border: none;
        font-size: 2.5em;
        /* Ajuste del tamaño del botón en móviles */
        cursor: pointer;
        color: #333;
        padding: 0 10px;
        font-weight: 900;
        z-index: 10;
    }

    .ItLicen-carousel-control.prev {
        position: absolute;
        left: 0;
    }

    .ItLicen-carousel-control.next {
        position: absolute;
        right: 0;
    }

    .ItLicen-carousel-control:hover {
        color: #495057;
    }
}

@media (max-width: 768px) {
    .license-card-container {
        display: flex !important;
        flex-direction: column;
        /* Cambia la dirección del flujo para que las tarjetas estén una debajo de otra */
        align-items: center;
        /* Opcional: centrar las tarjetas en el contenedor */
    }

    .license-card {
        max-width: 90%;
        /* Ajustar el ancho de la tarjeta para que no ocupe todo el ancho de la pantalla */
        margin-bottom: 15px;
        /* Espacio entre las tarjetas */
    }

    .license-cards-container {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        flex-direction: column;
    }
}

.license-key {

    font-size: 1.2em;
    /* Ajustar el tamaño de la fuente según sea necesario */
    letter-spacing: 0.1em;
    /* Espaciado entre caracteres */
}

.masked-part {
    font-weight: bold;
    /* Negrita para destacar */
    font-size: 1.8em !important;
    /* Tamaño más grande para los asteriscos */
    line-height: 1 !important;
    /* Asegurar que no haya espacio extra */
    vertical-align: middle !important;
    /* Alinear verticalmente los asteriscos con el texto circundante */
    letter-spacing: -0.05em !important;
    /* Ajustar el espaciado para los asteriscos */
}

.rz-datatable-thead th,
.rz-grid-table thead th {
    background-color: #504d4d;
    color: white !important;
}

.rz-datatable-thead th .rz-column-title-content,
.rz-grid-table thead th .rz-column-title-content {

    font-weight: 550;
    color: whitesmoke;
}

.rz-pager-element,
.rz-button {
    box-shadow: none;
}

.rz-datatable {
    border-radius: 10px;

}

.rz-pager-page.rz-state-active {
    background-color: #4088BD;
    color: #ffffff;
}




.billing-section,
.shipping-section {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}

.billing-section h4,
.shipping-section h4 {
    margin-bottom: 10px;
    color: #4088BD;
}



/* ============================================================
   Notificaciones (toasts) — diseño moderno propio:
   tarjeta blanca con banda de color, icono en círculo suave,
   sombra y ancho contenido (nunca banner a pantalla completa).
   ============================================================ */
/* Las alertas SIEMPRE al nivel más alto: por encima de cualquier modal
   (vac-modal-overlay usa 99999/100000 y el resto de overlays menos). */
.rz-notification {
    z-index: 2000000 !important;
}

.rz-notification-item-wrapper {
    background-color: transparent;
    width: auto !important;
    max-width: 430px;
    margin-left: auto;
}

.rz-notification-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    background: #fff !important;
    color: #1f2937 !important;
    border-radius: 14px !important;
    border: 1px solid #eef0f4;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .18) !important;
    padding: 14px 16px 14px 20px !important;
    animation: itToastIn .18s ease;
}

@keyframes itToastIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

/* Banda de color a la izquierda según severidad */
.rz-notification-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: #4088BD;
}

.rz-notification-success .rz-notification-item::before { background: #22c55e; }
.rz-notification-error .rz-notification-item::before { background: #ef4444; }
.rz-notification-warn .rz-notification-item::before { background: #f59e0b; }
.rz-notification-info .rz-notification-item::before { background: #4088BD; }

/* Icono en círculo suave */
.rz-notification-icon {
    font-size: 22px !important;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

    .rz-notification-icon::after { display: none; }

.rz-notification-success .rz-notification-icon { background: #e7f8ee; color: #16a34a !important; }
.rz-notification-error .rz-notification-icon { background: #fdecea; color: #dc2626 !important; }
.rz-notification-warn .rz-notification-icon { background: #fdf4dc; color: #b45309 !important; }
.rz-notification-info .rz-notification-icon { background: #eaf3fb; color: #4088BD !important; }

.rz-notification-icon.rzi-check:before { content: "check_circle"; }

.rz-notification-icon.rzi-times:before { content: "error"; }

.rz-notification-icon.rzi-exclamation-triangle:before { content: "warning"; font-size: 22px; }

.rz-notification-icon.rzi-info-circle:before { content: "info"; }

/* Textos: título oscuro, mensaje gris */
.rz-notification-item .rz-notification-title,
.rz-notification-item .rz-notification-summary {
    font-weight: 700;
    color: #111827;
}

.rz-notification-item .rz-notification-content,
.rz-notification-item .rz-notification-detail {
    color: #4b5563;
    font-size: .9rem;
    word-break: break-word;
}

.rz-notification-close {
    color: #9aa4b2 !important;
    font-size: 16px !important;
    transition: color .12s;
}

    .rz-notification-close:hover { color: #374151 !important; }

.rz-button.rz-base.rz-shade-default {
    background-color: #7a7777;
    color: white;
}

/* CSS personalizado para los botones */
.ItruckCardButtonCopy {
    background-color: #00bf67;
    /* Color verde */
    border: none;
    color: white;
    padding: 12px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;
    /* Bordes redondeados */
    transition: background-color 0.3s ease, transform 0.3s ease;
    /* Efecto al pasar el mouse */
}

.ItruckCardButtonCopy:hover {
    background-color: #45a049;
    /* Color verde más oscuro al pasar el mouse */
    transform: scale(1.05);
    /* Efecto de agrandar ligeramente al pasar el mouse */
}

.ItruckCardButtonCopy i {
    margin-right: 8px;
    /* Espacio entre el icono y el texto */
}

.ItruckCardButtonCopy.centered {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}




.ItruckCardButton {
    background-color: #4088BD;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 4px 2px;
    gap: 8px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
}



.ItruckCardButton:hover {
    background-color: #35709c;
    /* Azul primario más oscuro al pasar el mouse */
    transform: scale(1.03);
}

.ItruckCardButton i {
    transition: transform 0.3s ease;
    font-size: 1.25rem;
    /* Ajustar tamaño con unidades relativas */
}

.ItruckCardButton:hover i {
    transform: scaleX(-1);
    /* Voltea el icono horizontalmente */
}



/* Botón "Volver" de cabecera: SOLO ICONO (gris → azul al hover); el texto
   (span) es su tooltip — misma burbuja oscura que round-button-gold. */
.ItruckCardButtonBack {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    border: none;
    background: #eef2f6;
    color: #56657a;
    cursor: pointer;
    font-size: 15px;
    transition: background .15s, color .15s, transform .1s;
}

.ItruckCardButtonBack i {
    transition: transform 0.3s ease;
    font-size: 16px;
    margin: 0;
}

.ItruckCardButtonBack:hover {
    background: #4088BD;
    color: #fff;
}

.ItruckCardButtonBack:hover i {
    transform: rotate(-360deg);
}

.ItruckCardButtonBack:active {
    transform: translateY(1px);
}

/* Tooltip (burbuja oscura debajo-derecha, como los botones de cabecera) */
.ItruckCardButtonBack span {
    position: absolute;
    top: calc(100% + 9px);
    right: -4px;
    left: auto;
    background: #1e2a3a;
    color: #fff;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.3;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 3000;
    box-shadow: 0 6px 16px rgba(16, 24, 40, .28);
    transition: opacity .12s ease, transform .12s ease;
}

    .ItruckCardButtonBack span::after {
        content: "";
        position: absolute;
        bottom: 100%;
        right: 14px;
        border: 5px solid transparent;
        border-bottom-color: #1e2a3a;
    }

.ItruckCardButtonBack:hover span {
    opacity: 1;
    visibility: visible;
    transform: translateY(2px);
}

.ItruckCardButtonTrace {
    background-color: #4088BD;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.ItruckCardButtonTrace i {
    transition: transform 0.3s ease;
    font-size: 15px;
}

.ItruckCardButtonTrace:hover i {
    transform: rotate(360deg);
}

.ItruckCardButtonTemplate {
    background-color: #a860d4;
    /* Color de fondo verde */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s ease;
}

.ItruckCardButtonPreview {
    background-color: #198754;
    /* Color de fondo verde */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s ease;
}

.ItruckCardButtonPreview i {
    font-size: 15px;
    display: inline-block;
    /* Asegura que el icono se comporta como un elemento en línea-bloque */
}

.ItruckCardButtonPreview:hover i {
    animation: bounce 0.5s ease infinite alternate;
    /* Anima el ícono con un "salto" continuo */
}

.ItruckCardButtonDanger {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s ease;
}

.ItruckCardButtonDanger i {
    font-size: 15px;
}

/* Definición de la animación */
@keyframes bounce {
    0% {
        transform: translateY(0);
        /* Posición inicial */
    }

    50% {
        transform: translateY(-5px);
        /* Salto hacia arriba */
    }

    100% {
        transform: translateY(0);
        /* Vuelve a la posición inicial */
    }
}



/* buton list*/



.round-buttonSintxt {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #4088BD;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s, width 0.3s, border-radius 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.round-buttonSintxt i {
    font-size: 18px;
    transition: transform 0.3s;
    color: #4088BD;
    /* Color del icono por defecto */
    z-index: 1;
}


/* ============================================================
   BOTONES PILL MODERNOS (antes circulares expandibles al hover)
   Texto siempre visible, sin expansión de ancho en hover.
   ============================================================ */

/* Botón de acción de grid: SOLO ICONO. El texto (span) se convierte en un
   tooltip propio: burbuja oscura con flecha que aparece encima al pasar el ratón. */
.round-buttonTwo,
.round-buttonTree,
.round-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 9px;
    border: none;
    background: #eef3f8;
    color: #35597a;
    cursor: pointer;
    transition: background .15s, transform .1s, box-shadow .15s;
}

.round-buttonTwo i,
.round-buttonTree i,
.round-button i {
    font-size: 15px;
    color: #4088BD;
    transition: none;
    transform: none;
    margin: 0;
}

.round-buttonTwo:hover,
.round-buttonTree:hover,
.round-button:hover {
    background: #dfeaf4;
}

.round-buttonTwo:active,
.round-buttonTree:active,
.round-button:active {
    transform: translateY(1px);
}

/* Tooltip propio: el span del botón es la burbuja. Se ancla a la DERECHA del
   botón (crece hacia la izquierda) para que no se corte en la última columna. */
.round-buttonTwo span,
.round-buttonTree span,
.round-button span {
    position: absolute;
    bottom: calc(100% + 9px);
    right: -4px;
    left: auto;
    transform: none;
    background: #1e2a3a;
    color: #fff;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.3;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 3000;
    box-shadow: 0 6px 16px rgba(16, 24, 40, .28);
    transition: opacity .12s ease, transform .12s ease;
}

    /* Flechita del tooltip (alineada con el centro del botón) */
    .round-buttonTwo span::after,
    .round-buttonTree span::after,
    .round-button span::after {
        content: "";
        position: absolute;
        top: 100%;
        right: 14px;
        border: 5px solid transparent;
        border-top-color: #1e2a3a;
    }

.round-buttonTwo:hover span,
.round-buttonTree:hover span,
.round-button:hover span {
    opacity: 1;
    visibility: visible;
    transform: translateY(-2px);
}

/* Las celdas del grid de Radzen recortan (overflow:hidden) el tooltip:
   se libera el overflow SOLO en las celdas que contienen estos botones. */
.rz-grid-table td:has(.round-button),
.rz-grid-table td:has(.round-buttonTwo),
.rz-grid-table td:has(.round-buttonTree) {
    overflow: visible !important;
}

/* El tooltip SIEMPRE por delante: al hacer hover, la fila/celda sube su
   stacking context por encima de cabeceras sticky y filas vecinas.

   OJO CON EL VALOR: tiene que quedar por DEBAJO de 1001. El menú contextual
   de Radzen vive en un contenedor con z-index 1001 INLINE (div.rz-tooltip que
   envuelve a .rz-context-menu), y ese contexto de apilamiento atrapa cualquier
   z-index que se ponga dentro: subir .rz-context-menu NO sirve de nada. Si la
   fila supera 1001, tapa el menú mientras el cursor sigue sobre el botón de
   los 3 puntos (las primeras opciones solo "aparecían" al retirar el ratón).
   Las cabeceras sticky del grid usan z-index 1-2: con 990 sobra. */
.rz-grid-table tr:has(.round-button:hover),
.rz-grid-table tr:has(.round-buttonTwo:hover),
.rz-grid-table tr:has(.round-buttonTree:hover),
.rz-grid-table tr:has(.round-buttonSintxt:hover),
table tr:has(.round-button:hover),
table tr:has(.round-buttonSintxt:hover) {
    position: relative;
    z-index: 990;
}

.rz-grid-table td:has(.round-button:hover),
.rz-grid-table td:has(.round-buttonTwo:hover),
.rz-grid-table td:has(.round-buttonTree:hover) {
    position: relative;
    z-index: 991;
}

    .rz-grid-table td:has(.round-button) .rz-cell-data,
    .rz-grid-table td:has(.round-buttonTwo) .rz-cell-data,
    .rz-grid-table td:has(.round-buttonTree) .rz-cell-data {
        overflow: visible !important;
    }

/* Peligro / eliminar */
.round-button-danger {
    background: #fdecea;
    color: #a93226;
}

.round-button-danger i {
    color: #c0392b;
}

.round-button-danger:hover {
    background: #f9d9d5;
}

/* Rutas (ámbar) */
.round-button-Rutas {
    background: #fdf4dc;
    color: #8a6a03;
}

.round-button-Rutas i {
    color: #dca904;
}

.round-button-Rutas:hover {
    background: #f8eac2;
}

/* Success / Pagar */
.round-button-success {
    background: #e7f8ee;
    color: #1a7a43;
}

.round-button-success i {
    color: #22c55e;
}

.round-button-success:hover {
    background: #d4f1e0;
}

/* Factura */
.round-button-Factura {
    background: #e6f4ee;
    color: #14663f;
}

.round-button-Factura i {
    color: #198754;
}

.round-button-Factura:hover {
    background: #d3ebdf;
}

/* No visto */
.round-button-NoVisto {
    background: #e6f4ee;
    color: #14663f;
}

.round-button-NoVisto i {
    color: #198754;
}

.round-button-NoVisto:hover {
    background: #d3ebdf;
}

/* Visto (gris) */
.round-button-Visto {
    background: #f1f3f5;
    color: #6c757d;
}

.round-button-Visto i {
    color: #9aa0a6;
}

.round-button-Visto:hover {
    background: #e4e7ea;
}

/* Duplicar (violeta) */
.round-button-Duplicar {
    background: #f1ecfd;
    color: #5b3cc4;
}

.round-button-Duplicar i {
    color: #7a5af8;
}

.round-button-Duplicar:hover {
    background: #e4dbfb;
}


@media (max-width: 768px) {
    .mobile-indicator {
        display: block !important;
    }
}

@media (min-width: 769px) {
    .mobile-indicator {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .hide-on-mobile {
        display: none;
    }

    .show-on-mobile {
        display: block;
    }
}

@media (min-width: 769px) {
    .hide-on-mobile {
        display: block;
    }

    .show-on-mobile {
        display: none;
    }
}

.rz-cell-filter .rz-cell-filter-label>.rzi {
    color: #000000;
    font-weight: 900;
    cursor: pointer
}

.rz-datatable-thead th,
.rz-grid-table thead th {
    border-bottom: 1px solid #787575;
}

.rz-sortable-column .rzi-sort-asc {
    color: white;
}

.rz-sortable-column .rzi-sort-desc {
    color: white
}

.switch-container {
    padding: 1rem;
    background-color: #f5f5f560;
    border-radius: 8px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}

.switch-label {
    font-size: 1rem;
    font-weight: 550;
    color: #333;
}

.custom-switch {
    width: 50px;
    height: 20px;
    position: relative;
    background-color: #ccc;
    /* Default background for inactive state */
    border-radius: 15px;
    transition: background-color 0.3s ease-in-out;
}




.rz-switch.rz-switch-checked .rz-switch-circle:before {
    background: #4CAF50;
    transform: translateX(2rem);
}

.custom-switch.rz-switch-checked {
    background-color: #b8efbb;
    /* Green background when checked */
}






.client-list-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.title-section {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.iva-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.iva-header-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.iva-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.iva-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.iva-year-filter {
    width: 140px;
}

.iva-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.iva-quarter-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.iva-content {
    padding-top: 15px;
}

.iva-overview {
    background-color: #f8fbff;
    border: 1px solid #e0e8f3;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 25px rgba(64, 136, 189, 0.08);
}

.iva-overview-header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: stretch;

}

.iva-result-label {
    font-size: 0.85rem;
    color: #6c7b89;
    margin-top: 0.35rem;
}

.iva-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.iva-summary-card {
    background-color: #ffffff;
    border: 1px solid #d9e3f2;
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    box-shadow: 0 6px 18px rgba(22, 64, 129, 0.08);
}

.iva-summary-positive {
    border-color: #4caf50;
}

.iva-summary-negative {
    border-color: #ff7043;
}

.summary-label {
    font-size: 0.85rem;
    color: #6c7b89;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.summary-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f3a5f;
}

.ItruckCardButton {
    background-color: #4088BD;
    /* Use a more subtle yellow */
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

.tooltipLicencia {
    visibility: hidden;
    width: 150px;
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    /* Position the tooltip above the badge */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.8rem;
    white-space: nowrap;
}

.custom-badge {
    position: relative;
    cursor: pointer;
    display: inline-block;
    margin-left: 10px;
}

.custom-badge:hover .tooltipLicencia {
    visibility: visible;
    opacity: 1;
    /* Show the tooltip with a fade-in effect */
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
    .client-list-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .title-section {
        width: 100%;
        justify-content: space-between;
    }

    .ItruckCardButton {
        margin-top: 0;
        margin-left: 10px;
    }

    .custom-badge {
        margin-left: 0;
        margin-top: 10px;
    }
}

.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter {
    background-color: #4088BD;
    color: #ffffff;
}

.rz-apply-filter .rz-button-text {
    visibility: hidden;
    /* Hide the original text */
    position: relative;
}

.rz-apply-filter .rz-button-text::after {
    content: 'Buscar';
    /* Replace 'New Text' with your desired text */
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-weight: 600;
    text-align: center;
    visibility: visible;
    font-size: 12px;
}

/* Hide the original text */
.rz-clear-filter .rz-button-text {
    visibility: hidden;
    position: relative;
}

/* Inject new text using the ::after pseudo-element */
html[lang="en"] .rz-apply-filter .rz-button-text::after { content: 'Search'; }
html[lang="en"] .rz-clear-filter .rz-button-text::after { content: 'Clear'; }

.rz-clear-filter .rz-button-text::after {
    content: 'Limpiar';
    /* Replace 'Limpiar' with your desired translation */
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    visibility: visible;
    font-size: 12px;
    font-weight: 600;
}


/* ============================================================
   ESTILOS BASE de los inputs propios (It*). Viven aquí en GLOBAL
   porque ItNumber/ItDatePicker/ItTextArea reutilizan las clases
   .it-input__* y deben verse bien aunque la página no tenga ItInput.
   ============================================================ */
.it-input { width: 100%; margin-bottom: 4px; }

.it-input__box {
    position: relative;
    display: flex;
    align-items: center;
}

.it-input__field {
    width: 100%;
    height: 52px;
    padding: 0 14px;
    font-size: 1rem;
    font-weight: 400; /* el valor NUNCA en negrita */
    color: #4b5563; /* gris medio: legible sin parecer negrita */
    background: #fff;
    border: 1.6px solid #d7dde5;
    border-radius: 12px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.it-input__field--icon { padding-left: 42px; }

.it-input__field:focus {
    border-color: var(--it-accent, #4088BD);
    box-shadow: 0 0 0 3px var(--it-accent-soft, rgba(64,136,189,.15));
}

.it-input__label {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #98a2b3;
    font-size: 1rem;
    pointer-events: none;
    transition: all .15s ease;
    background: transparent;
    padding: 0 4px;
}

.it-input__field--icon ~ .it-input__label { left: 40px; }

.it-input__field:focus ~ .it-input__label,
.it-input__field:not(:placeholder-shown) ~ .it-input__label {
    top: 0;
    left: 12px;
    transform: translateY(-50%) scale(.86);
    color: var(--it-accent, #4088BD);
    background: #fff;
}

.it-input__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--it-accent, #4088BD);
    font-size: 1rem;
    pointer-events: none;
}

/* Iconos de la derecha (calendario/chevron/reloj) SIEMPRE centrados en vertical:
   son absolutos y sin top se pegaban arriba dejando hueco abajo. */
.it-dp__arrow,
.it-select__arrow,
.it-tp__icon {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.it-select--open .it-select__arrow {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* El texto del valor del datepicker centrado en su caja de 52px */
.it-dp__display {
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.it-input--error .it-input__field { border-color: #b42318; }

.it-input__error {
    color: #b42318;
    font-size: .82rem;
    margin: 4px 2px 0;
}

.it-input--disabled { opacity: .65; }

.it-input--disabled .it-input__field { background: #f3f4f6; cursor: not-allowed; }

/* Variante compacta de los inputs propios (para cabeceras junto a botones de 40px). */
/* Variante compacta para selects/inputs/datepickers de barra de filtros:
   38px de alto, texto centrado, sin márgenes muertos arriba/abajo. */
.it-compact .it-select__box,
.it-compact .it-input__field {
    height: 38px !important;
    border-radius: 10px !important;
}

.it-compact.it-select,
.it-compact.it-input,
.it-compact {
    margin-bottom: 0 !important;
}

.it-compact .it-select__value,
.it-compact .it-input__field,
.it-compact .it-dp__display {
    font-size: .88rem !important;
    font-weight: 600;
}

.it-compact .it-select__label,
.it-compact .it-input__label {
    font-size: .88rem;
}

    .it-compact .it-select__label--float,
    .it-compact .it-dp__label--float {
        font-size: .8rem !important;
    }

/* Modal genérico de la app (overlay con blur, tarjeta centrada y X roja en la esquina). */
.vac-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vac-modal {
    position: relative;
    z-index: 100000;
    background: #fff;
    border-radius: 16px;
    width: min(560px, 92vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    /* visible: deja asomar la X roja de la esquina (los paneles de calendario/select
       ya se posicionan en fixed, así que no dependen de este overflow) */
    overflow: visible;
    padding: 18px 20px 22px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

/* Cuerpo con scroll propio: si el formulario es más alto que la pantalla,
   se desplaza por dentro y nunca se sale de la tarjeta. */
.vac-modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    flex: 1 1 auto;
    padding: 4px 6px 4px 2px;
    margin-right: -6px;
}

.vac-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.1rem;
    color: #2c3e50;
    margin-bottom: 14px;
}

.vac-modal-close {
    position: absolute;
    top: -13px;
    right: -13px;
    width: 32px;
    height: 32px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #e53935;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .85rem;
    box-shadow: 0 3px 8px rgba(229, 57, 53, .4);
    transition: background .12s, transform .1s;
    z-index: 2;
}

    .vac-modal-close:hover {
        background: #c62828;
        transform: scale(1.06);
    }

/* ============================================================
   Detalles comunes de TODOS los modales de la app:
   línea azul inferior + efecto de giro en la X roja al pasar el ratón.
   ============================================================ */
.it-modal__card,
.ModalGlobal-content,
.ModalDemo-content,
.vac-modal,
.ConfirmModal-content {
    border-bottom: 5px solid #4088BD !important;
}

/* Red de seguridad: como las tarjetas de modal llevan overflow:visible (para la X
   de la esquina), una cabecera con fondo puede tapar las esquinas redondeadas.
   Se fuerza el redondeo superior en TODAS las cabeceras de modal. */
.it-modal__header,
.ModalGlobal-header,
.ModalDemo-header,
.vac-modal-header,
.ConfirmModal-header {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.it-modal__close:hover,
.ModalGlobal-close:hover,
.ModalDemo-close:hover,
.vac-modal-close:hover,
.ConfirmModal-close:hover {
    transform: rotate(180deg) scale(1.08) !important;
    background: #c62828 !important;
}

.it-modal__close,
.ModalGlobal-close,
.ModalDemo-close,
.vac-modal-close,
.ConfirmModal-close {
    transition: transform .25s ease, background .15s ease !important;
}

/* ============================================================
   Estado Activo/Inactivo
   - Switches (RadzenSwitch): VERDE cuando está activo, gris cuando no.
     Los deshabilitados NO se lavan: conservan el color para que se lea el estado.
   - Badge propio .it-badge para columnas de estado de solo lectura en grids.
   ============================================================ */
.rz-switch.rz-switch-checked {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
}

.rz-switch:not(.rz-switch-checked) {
    background-color: #cbd5e1 !important;
    border-color: #cbd5e1 !important;
}

.rz-switch.rz-state-disabled,
.rz-switch[disabled],
.rz-state-disabled .rz-switch {
    opacity: 1 !important;
    cursor: default !important;
}

.rz-switch .rz-switch-circle { background: #fff !important; }

/* Badge de estado: píldora con punto de color */
.it-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

    .it-badge::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
    }

.it-badge--on {
    background: #e7f8ee;
    color: #16a34a;
}

.it-badge--off {
    background: #eef1f4;
    color: #6b7280;
}

/* Gestoría: empresa partner y consentimiento pendiente del responsable. */
.it-badge--info {
    background: #eaf3fb;
    color: #2e6da4;
}

.it-badge--warn {
    background: #fff7e6;
    color: #b8860b;
}

/* ============================================================
   Tipografía de campos: nada de fuentes monoespaciadas "de robot".
   Los inputs/textarea heredan siempre la fuente de la app.
   ============================================================ */
input, textarea, select, button {
    font-family: inherit;
}

textarea, .it-input__field {
    font-family: 'Open Sans', 'Poppins', system-ui, sans-serif !important;
}

/* ============================================================
   Menú contextual de acciones (Radzen ContextMenu) — diseño moderno:
   card blanca redondeada, items con hover suave, iconos azules.
   ============================================================ */
/* Radzen pinta el menú en DOS capas (rz-menu con fondo + rz-navigation-menu con
   borde/sombra) y se veía como una card encima de otra. Aquí se aplana: UNA sola
   card en el contenedor exterior y la capa interior totalmente transparente. */
.rz-context-menu {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    animation: itToastIn .12s ease;
    /* pequeño offset para no tapar el botón que abre el menú */
    margin: 8px 0 0 6px;
}

.rz-context-menu .rz-menu:not(.rz-profile-menu) {
    background: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 24px rgba(16, 24, 40, .16), 0 0 0 1px rgba(16, 24, 40, .05) !important;
    padding: 5px !important;
    min-width: 170px;
    overflow: hidden;
}

.rz-context-menu .rz-navigation-menu {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
}

/* Nada de bordes, contornos ni sombras internas en los items (el recuadro azul fuera) */
.rz-context-menu .rz-navigation-item,
.rz-context-menu .rz-navigation-item-wrapper,
.rz-context-menu .rz-navigation-item-link,
.rz-context-menu .rz-navigation-item-wrapper:focus,
.rz-context-menu .rz-navigation-item-link:focus,
.rz-context-menu .rz-navigation-item.rz-state-focused,
.rz-context-menu .rz-navigation-item-wrapper.rz-state-focused {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-clip: padding-box;
}

.rz-context-menu .rz-navigation-item {
    background: transparent !important;
    margin: 0 !important;
}

/* El "recuadro azul" del item activo es un ::before del tema de Radzen: fuera. */
.rz-context-menu .rz-navigation-item-wrapper-active::before,
.rz-context-menu .rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active::before {
    display: none !important;
}

.rz-context-menu .rz-navigation-item-wrapper-active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.rz-context-menu .rz-navigation-item-link {
    padding: 0 !important;
    background: transparent !important;
}

.rz-context-menu .rz-navigation-item-wrapper {
    border-radius: 8px !important;
    padding: 8px 12px !important;
    transition: background .1s;
    cursor: pointer;
    display: flex;
    align-items: center;
}

    .rz-context-menu .rz-navigation-item-wrapper:hover,
    .rz-context-menu .rz-navigation-item-wrapper.rz-state-focused:hover {
        background: #f2f5f8 !important;
    }

.rz-context-menu .rz-navigation-item-icon {
    color: #7d8998 !important;
    font-size: 17px !important;
    margin-right: 10px !important;
    width: 20px;
    text-align: center;
}

.rz-context-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon {
    color: #4088BD !important;
}

.rz-context-menu .rz-navigation-item-text {
    color: #333f4f !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
    line-height: 1.2;
}

/* Item "Eliminar"/peligro dentro del menú contextual */
.rz-context-menu .rz-navigation-item-wrapper:has(.rzi-delete),
.rz-context-menu .rz-navigation-item-wrapper:has(.rz-navigation-item-icon[icon="delete"]) {
    color: #dc2626 !important;
}

    .rz-context-menu .rz-navigation-item-wrapper:has(.rzi-delete):hover {
        background: #fdecea !important;
    }

    .rz-context-menu .rz-navigation-item-wrapper:has(.rzi-delete) .rz-navigation-item-icon,
    .rz-context-menu .rz-navigation-item-wrapper:has(.rzi-delete) .rz-navigation-item-text {
        color: #dc2626 !important;
    }

/* ============================================================
   Botones de la tabla de productos (facturas / borradores / compras).
   - Editar: mismo formato que los botones de grid (cuadrado suave azul).
   - Eliminar: FONDO ROJO SÓLIDO con icono BLANCO.
   ============================================================ */
.round-buttonSintxt {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    border: none !important;
    background-color: #eef3f8 !important;
    overflow: visible !important;
    transition: background-color .15s, transform .1s !important;
}

    .round-buttonSintxt i {
        font-size: 15px !important;
        color: #4088BD !important;
        transition: none !important;
        transform: none !important;
    }

    .round-buttonSintxt:hover {
        background-color: #dfeaf4 !important;
    }

    .round-buttonSintxt:active {
        transform: translateY(1px);
    }

    .round-buttonSintxt.round-button-danger {
        background-color: #e53935 !important;
    }

        .round-buttonSintxt.round-button-danger i {
            color: #fff !important;
        }

        .round-buttonSintxt.round-button-danger:hover {
            background-color: #c62828 !important;
        }

/* Toolbar de productos (añadir / eliminar todo / plantilla / ruta / IA):
   cuadrados redondeados 40px como los botones de cabecera, conservando su color. */
.edit-button,
.edit-button2,
.edit-button3,
.edit-button-ai {
    border-radius: 10px !important;
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .14);
    transition: filter .15s, transform .1s;
}

    .edit-button i,
    .edit-button2 i,
    .edit-button3 i,
    .edit-button-ai i {
        font-size: 16px !important;
    }

    .edit-button:hover,
    .edit-button2:hover,
    .edit-button3:hover,
    .edit-button-ai:hover {
        filter: brightness(.92);
    }

    .edit-button:active,
    .edit-button2:active,
    .edit-button3:active,
    .edit-button-ai:active {
        transform: translateY(1px);
    }

/* Tooltip propio para la toolbar de productos y los botones de las filas:
   el <span> interno es la burbuja oscura (mismo sistema que round-button). */
.edit-button, .edit-button2, .edit-button3, .edit-button-ai, .round-buttonSintxt {
    position: relative;
}

    .edit-button span, .edit-button2 span, .edit-button3 span, .edit-button-ai span,
    .round-buttonSintxt span {
        position: absolute;
        bottom: calc(100% + 9px);
        right: -4px;
        left: auto;
        background: #1e2a3a;
        color: #fff;
        font-size: .74rem;
        font-weight: 600;
        line-height: 1.3;
        padding: 6px 10px;
        border-radius: 8px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 3000;
        box-shadow: 0 6px 16px rgba(16, 24, 40, .28);
        transition: opacity .12s ease, transform .12s ease;
    }

        .edit-button span::after, .edit-button2 span::after, .edit-button3 span::after,
        .edit-button-ai span::after, .round-buttonSintxt span::after {
            content: "";
            position: absolute;
            top: 100%;
            right: 14px;
            border: 5px solid transparent;
            border-top-color: #1e2a3a;
        }

    .edit-button:hover span, .edit-button2:hover span, .edit-button3:hover span,
    .edit-button-ai:hover span, .round-buttonSintxt:hover span {
        opacity: 1;
        visibility: visible;
        transform: translateY(-2px);
    }

/* Las celdas del grid oscuro de productos recortan el tooltip */
.FacItruck-table td:has(.round-buttonSintxt),
table td:has(.round-buttonSintxt) {
    overflow: visible !important;
    position: relative;
}

/* Acción no permitida en esa fila (p. ej. borrar una ruta finalizada): atenuada,
   sin efecto al pulsar, pero con su rótulo al pasar el ratón para explicar por qué. */
.round-button.round-button-bloqueado,
.round-button.round-button-bloqueado:hover {
    opacity: .4;
    cursor: not-allowed;
    background: #eef3f8;
}

.round-button.round-button-bloqueado i {
    color: #8a9bb0;
}

/* Botones de acción ocupados (descargando/exportando): atenuados, cursor de
   progreso y sin dobles clicks; el icono se cambia a spinner desde el markup. */
.round-button[disabled],
.round-buttonTwo[disabled],
.round-buttonTree[disabled],
.round-button-gold[disabled],
.ItruckCardButtonBack[disabled] {
    opacity: .65;
    cursor: progress !important;
    pointer-events: none;
}

/* Menú: módulo bloqueado — el icono principal es el normal del módulo;
   el candado pequeño va JUNTO AL TEXTO. */
.menu-lock-item .rz-navigation-item-text::after {
    content: "\f023"; /* fa-lock */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    margin-left: 7px;
    color: #98a2b3;
}

/* SplitButton en grids: compacto y acorde a los botones de acción */
.rz-splitbutton .rz-button {
    background: #eef3f8 !important;
    color: #4088BD !important;
    border: none !important;
    box-shadow: none !important;
    height: 34px;
}

.rz-splitbutton .rz-button:first-child {
    border-radius: 9px 0 0 9px !important;
}

.rz-splitbutton .rz-splitbutton-menubutton {
    border-radius: 0 9px 9px 0 !important;
    border-left: 1px solid #dfe7ef !important;
}

.rz-splitbutton .rz-button:hover {
    background: #dfeaf4 !important;
}

/* Título de sección dentro de pestañas: pequeño, azul, sin icono (mismo tono que el tab activo). */
.it-section-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    color: #4088BD;
    margin: 0 0 10px;
}

/* Botón principal de cabecera: SOLO ICONO azul; el texto (span) es su tooltip. */
.round-button-gold {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    border: none;
    background: #4088BD;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(64, 136, 189, .25);
    transition: background .15s, transform .1s, box-shadow .15s;
}

.round-button-gold i {
    font-size: 16px;
    color: #fff;
    transition: none;
    transform: none;
    margin: 0;
}

.round-button-gold:hover {
    background: #35709c;
    box-shadow: 0 4px 10px rgba(64, 136, 189, .35);
}

.round-button-gold:active {
    transform: translateY(1px);
}

/* Tooltip propio (burbuja oscura, anclada a la derecha, aparece DEBAJO
   porque estos botones van pegados al borde superior de la card). */
.round-button-gold span {
    position: absolute;
    top: calc(100% + 9px);
    right: -4px;
    left: auto;
    background: #1e2a3a;
    color: #fff;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.3;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 3000;
    box-shadow: 0 6px 16px rgba(16, 24, 40, .28);
    transition: opacity .12s ease, transform .12s ease;
}

    .round-button-gold span::after {
        content: "";
        position: absolute;
        bottom: 100%;
        right: 14px;
        border: 5px solid transparent;
        border-bottom-color: #1e2a3a;
    }

.round-button-gold:hover span {
    opacity: 1;
    visibility: visible;
    transform: translateY(2px);
}

/* Estilos para dispositivos móviles */
@media screen and (max-width: 768px) {
    .round-button-gold {
        width: 38px;
        height: 38px;
    }

    .button-containerCe {
        padding-top: 10px;
    }

    .iva-header {
        flex-direction: column;
        align-items: stretch;
    }

    .iva-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .iva-summary-grid {
        grid-template-columns: 1fr;
    }
}


.rz-column-resizer {

    width: 1px;
    background: #5e6565;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active,
.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active {
    background-color: #4088bd59;
    color: var(--rz-panel-menu-item-2nd-level-active-color);
    font-weight: var(--rz-panel-menu-item-2nd-level-active-font-weight);
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active .rz-navigation-item-icon,
.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon {
    color: black;
}


.rz-calendar-view td .rz-state-active,
.rz-calendar-view td .rz-state-active.rz-calendar-today {
    color: var(--rz-datepicker-calendar-selected-color);
    background-color: #4088BD;
    padding: var(--rz-datepicker-calendar-item-padding);
    box-shadow: none;
}

.rz-state-highlight.rz-menuitem,
.rz-state-highlight.rz-autocomplete-list-item,
.rz-state-highlight.rz-multiselect-item,
.rz-autocomplete-items li.rz-state-highlight,
.rz-dropdown-items li.rz-state-highlight,
.rz-multiselect-items li.rz-state-highlight,
.rz-dropdown-item.rz-state-highlight {
    background-color: #4088BD80;
    color: black;
    box-shadow: var(--rz-dropdown-item-selected-shadow);
    font-weight: 600;
    border-radius: 0;
}

.rz-calendar-view td .rz-state-active.rz-state-focused,
.rz-calendar-view td .rz-state-active:hover,
.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused,
.rz-calendar-view td .rz-state-active.rz-calendar-today:hover {
    color: var(--rz-datepicker-calendar-selected-hover-color);
    background-color: #4088BD;
}

.rz-tabview.rz-tabview-top>.rz-tabview-nav .rz-tabview-selected {
    border-top-width: 0;
    border: 3px solid #ddb100;
    border-radius: 10px 10px 0 0;
    /* Redondeado en la parte superior */
}

.rz-tabview-nav .rz-tabview-selected {
    color: #555;
    position: relative;
    background-color: #4088BD;
}


.CustomTabs {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffffff;
    padding: 10px;
}



.CustomTab {
    padding: 10px 15px;
    /* Reducido para hacer los tabs más compactos */
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px 5px 0 0;
    transition: background-color 0.3s, color 0.3s, border 0.3s;
    display: flex;
    align-items: center;
    font-weight: 500;
    margin-right: 2px;
    /* Espaciado reducido entre los tabs */
    background-color: #f1f1f1;
    color: #7a7a7a;
}

.CustomTab i {
    margin-right: 8px;
    /* Espaciado entre el icono y el texto */
}

.CustomTabInactive:hover {
    background-color: #e0e0e0;
}

.CustomTabActive {
    background-color: #4088BD;
    color: white;
    border: 1px solid #4088BD;
    border-bottom: none;
    z-index: 10;
}

.CustomTabDisabled {
    background-color: #dee2e6;
    color: #adb5bd;
    cursor: not-allowed;
}

.NavButton {
    background-color: #4088BD;
    border: none;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    color: white;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

.NavButton:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}

.NavButton:hover:not(:disabled) {
    background-color: #ff9800;
}

.CustomTabs {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    padding: 10px;
}

.CustomTabContainer {
    display: flex;
    flex-wrap: wrap;                 /* Los tabs pasan a varias filas en vez de cortarse */
    justify-content: center;
    align-items: stretch;
    row-gap: 6px;
    width: 100%;
    margin-bottom: 10px;
    border-bottom: 2px solid #4088BD;
    padding-top: 10px;
    border-top: 1px solid #f3f3f3;
    z-index: 1;
}

.CustomTab {
    padding: 10px 14px;
    cursor: pointer;
    font-size: .95em;
    border-radius: 5px 5px 0 0;
    transition: background-color 0.3s, color 0.3s, border 0.3s;
    display: flex;
    align-items: center;
    font-weight: 600;
    background-color: #f1f1f1;
    color: #7a7a7a;
    white-space: nowrap;             /* El texto de cada tab no se parte */
}

/* Ajuste en el espaciado de los tabs (menor para que quepan más por fila) */
.CustomTabContainer .CustomTab {
    margin-right: 8px;
}

.CustomTab i {
    margin-right: 8px;
    /* Espaciado entre el icono y el texto */
    font-size: 1.15em;
}

.CustomTabInactive:hover {
    background-color: #e0e0e0;
}

.CustomTabActive {
    background-color: #4088BD;
    color: white;
    border: 1px solid #4088BD;
    border-bottom: none;
    z-index: 10;
}

.CustomTabDisabled {
    background-color: #dee2e6;
    color: #adb5bd;
    cursor: not-allowed;
}

.NavButton {
    background-color: #4088BD;
    border: none;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 30%;
    cursor: pointer;
    color: white;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

.NavButton:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}

.NavButton:hover:not(:disabled) {
    background-color: #ff9800;
}

.CustomTabContent {
    width: 100%;
    box-shadow: none;
    /* Eliminado para un aspecto más plano */
    margin-top: 0;
    /* Alineado correctamente con los tabs */
    position: relative;
    z-index: 1;
}

/* Media query para modo móvil */
@media (max-width: 768px) {
    .CustomTabContainer {
        justify-content: space-between;
        /* Para centrar los elementos de las pestañas en móviles */
    }

    .CustomTab {
        display: none;
        /* Oculta las pestañas en modo móvil */
    }

    .CustomTabActive {
        display: flex;
        /* Solo muestra la pestaña activa en modo móvil */
        margin-left: 25px;
    }

    .NavButton {
        display: flex;
        /* Asegura que las flechas de navegación estén visibles en móvil */
    }
}

/* Ocultar completamente la barra de desplazamiento en WebKit (Chrome, Safari) */
::-webkit-scrollbar {
    width: 1px;
    /* Ocultar la barra de desplazamiento vertical */
    height: 1px;
    /* Ocultar la barra de desplazamiento horizontal */
}

/* Estilo para navegadores Firefox */
* {
    scrollbar-width: none;
    /* Ocultar la barra de desplazamiento en Firefox */
}

/* Opcional: Eliminar el área reservada para el track en WebKit */
::-webkit-scrollbar-track {
    background: transparent;
    /* Asegura que el track sea transparente */
}

.ItCuadro-containerSumary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 16px;
    /* Ajusta según sea necesario */
    padding: 10px;
    background-color: transparent;
    /* Fondo opcional */
    border-radius: 5px;
    /* Bordes redondeados opcionales */
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.ItCuadro-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    /* Ajusta según sea necesario */
    padding: 10px;
    background-color: transparent;
    /* Fondo opcional */
    border-radius: 5px;
    /* Bordes redondeados opcionales */
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.ItCuadro-text {
    font-size: 18px;
    /* Tamaño del texto de la fecha */
    font-weight: bold;
    color: #494848;
}

.ItCuadro-label {
    font-size: 12px;
    /* Tamaño del texto "Fecha Actual" */
    color: #494848;
    /* Ajusta el color si es necesario */
}

.text-green {
    color: green;
}

.text-red {
    color: red;
}

.rz-dialog {
    width: 60% !important
}

.info-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 columnas para la mayoría de las secciones */
    gap: 1rem;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.info-item {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.info-label {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.info-value {
    font-size: 1rem;
    color: #555;
}

/* Asegurar que la sección de notas ocupe una fila completa */
.info-notes {
    grid-column: 1 / -1;
    /* Hace que la sección de notas ocupe toda la fila */
}

@media screen and (max-width: 768px) {
    .info-section {
        grid-template-columns: 1fr;
        /* 1 columna en pantallas pequeñas */
    }

    .info-item {
        padding: 15px;
    }

    .info-label {
        font-size: 1.1rem;
    }

    .info-value {
        font-size: 1rem;
    }
}


.text-Darknegro {
    color: #2C2C2C;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
}

.rz-timeline-item:before {
    height: 10px !important
}




.rz-timeline-row .rz-timeline-item.Completo:before {
    background-color: green;
    height: 10px !important;
}

@media screen and (max-width: 768px) {
    .rz-timeline-item:before {
        height: 100% !important;
    }

    .rz-timeline-item.Completo:before {
        background-color: green;
    }

    .rz-timeline-column .rz-timeline-item:before {
        width: 5px;

    }
}

.itruckMaps-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    padding-top: 60px;
}

.itruckMaps-modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #ccc;
    width: 90%;
    max-width: 900px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.itruckMaps-close {
    color: #444;
    float: right;
    font-size: 24px;
    font-weight: bold;
    margin-top: -10px;
}

.itruckMaps-close:hover,
.itruckMaps-close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.itruckMaps-modal-title {
    font-size: 24px;
    margin-bottom: 15px;
    color: #333;
    text-align: center;
}

.itruckMaps-modal-body {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.itruckMaps-left {
    flex: 1;
    min-width: 300px;
}

.itruckMaps-right {
    flex: 1;
    min-width: 300px;
}

.itruckMaps-info {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.itruckMaps-info legend {
    font-size: 18px;
    font-weight: bold;
    color: #4088BD;
}

.itruckMaps-info p {
    font-size: 16px;
    margin: 10px 0;
    color: #555;
}

/* Sección del Clima */
.itruckMaps-weather {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.itruckMaps-weather legend {
    font-size: 18px;
    font-weight: bold;
    color: #4088BD;
}

.itruckMaps-weather-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.itruckMaps-weather-column {
    flex: 1;
    text-align: center;
    padding: 0 10px;
}

.itruckMaps-weather-icon {
    flex: 0 0 150px;
    /* Ampliar la columna del ícono */
    text-align: center;
}

.itruckMaps-weather-icon img {
    max-width: 220px;
    /* Ampliar el tamaño máximo del ícono */
    max-height: 220px;
    margin: auto;
    height: 90px;
}

.itruckMaps-weather-content p {
    margin: 5px 0;
    font-size: 16px;
    color: #555;
}

/* Sección del Mapa */
.itruckMaps-modal-map {
    text-align: center;
}

.itruckMaps-modal-map img {
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

/* Diseño Responsive */
@media screen and (max-width: 768px) {
    .itruckMaps-modal-body {
        flex-direction: column;
    }

    .itruckMaps-modal {
        padding-top: 110px;
    }

    .itruckMaps-modal-content {
        background-color: #fff;
        margin: 5% auto;
        padding: 20px;
        border-radius: 10px;
        border: 1px solid #ccc;
        width: 90%;
        max-width: 900px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        height: 1150px !important;
    }

    .itruckMaps-left,
    .itruckMaps-right {
        max-width: 100%;
    }



    .itruckMaps-weather-column,
    .itruckMaps-weather-icon {
        text-align: center;
        padding: 5px 0;
    }

    .itruckMaps-weather-icon img {
        margin-bottom: 10px;
    }

    .itruckMaps-modal-map img {
        max-height: 100% !important;

        height: 400px !important;
        width: 100% !important;
    }

    .itruckMaps-close {
        font-size: 54px;
    }
}


.custom-link {
    color: #4088BD;
    /* Color del enlace normal */
    text-decoration: none;
    /* Quitar subrayado */
    font-weight: bold;
    /* Hacer el texto en negrita */
}

.custom-link:visited {
    color: #4088BD;
    /* Color del enlace visitado */
}

.custom-link i {
    margin-right: 5px;
    /* Espacio entre el icono y el texto */
    color: #555;
    /* Color del icono */
}

/* Cambia el color al pasar el ratón por encima */
.custom-link:hover {
    color: #555;
    /* Color al pasar el mouse */
    text-decoration: underline;
    /* Subrayado al pasar el mouse */
}

.custom-link i:hover {
    color: #555;
    /* Color al pasar el mouse */
}


.rz-timepicker .rz-button-md {

    background: #4088BD;
}




.itruckMapsRutas {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.itruckMapsRutasleft {
    flex: 1;
    min-width: 300px;
}

.itruckMapsRutasright {
    flex: 1;
    min-width: 300px;
}

.itruckMapsRutasinfo {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.itruckMapsRutasinfo legend {
    font-size: 18px;
    font-weight: bold;
    color: #4088BD;
}

.itruckMapsRutasinfo p {
    font-size: 16px;
    margin: 10px 0;
    color: #555;
}


.info-sectionTwo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Tres columnas de igual tamaño */
    gap: 1rem;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-top: 15px;
}

.info-sectionTwo>div:nth-child(1) {
    grid-column: 1 / 2;
    /* Coloca el primer elemento en la primera columna */
    text-align: left;
    /* Alinea el contenido del primer elemento a la izquierda */
}

.info-sectionTwo>div:nth-child(2) {
    grid-column: 3/ 4;
    /* Coloca el segundo elemento en la segunda columna */
    text-align: center;
    /* Centra el contenido del segundo elemento */
}



.info-itemTwo {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.info-labelTwo {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.info-valueTwo {
    font-size: 1rem;
    color: #555;
}


#autocomplete {
    width: 100%;

    font-size: 12px;


    border-radius: 4px;
    margin-bottom: 10px;

}


/* Media query para pantallas más pequeñas */
@media (max-width: 768px) {
    .itruckMapsRutas {
        flex-direction: column;
        /* Cambia a una columna en pantallas más pequeñas */
        gap: 10px;
        /* Reduce el espacio entre los elementos */
    }

    .info-sectionTwo {
        grid-template-columns: 1fr 50px;
        /* Una columna principal y una más pequeña para el ícono */
        gap: 0.5rem;
    }

    .info-sectionTwo>div:nth-child(1) {
        font-size: 0.9rem;
        /* Reduce el tamaño de la fuente para ahorrar espacio */
    }

    .info-sectionTwo>div:nth-child(2) {
        grid-column: 2 / 3;
        justify-self: flex-end;
        /* Alinea el botón a la derecha */
    }
}

@media (max-width: 480px) {
    .itruckMapsRutasinfo p {
        font-size: 14px;
        /* Ajusta el tamaño del texto en pantallas muy pequeñas */
    }
}


/* Contenedor general que contiene todas las facturas */
.itruckFact-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    width: 100%;
    max-width: none;
    margin: 0;
    align-items: stretch;
}

/* Estilos del ticket con el tema ItruFact */
.itruckFact-ticket {
    background: #fff;
    padding: 14px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 16px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    position: relative;
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.itruckFact-ticket:focus,
.itruckFact-ticket:hover {
    outline: none;
    transform: translateY(-2px);
    box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 20px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.itruckFact-ticket:focus-visible {
    box-shadow: 0 0 0 3px #4c8bf5;
}

.itruckFact-header h1 {
    font-size: 18px;
    margin-bottom: 3px;
    text-align: center;
    color: #333;
}

.itruckFact-subtitle {
    font-size: 13px;
    text-align: center;
    color: #6b7280;
    margin: 0 0 4px 0;
    letter-spacing: 0.3px;
}

.itruckFact-header p {
    text-align: center;
    margin: 5px 0;
    font-size: 14px;
    color: #777;
}

.itruckFact-info p {
    font-size: 13px;
    margin: 5px 0;
    color: #555;
}

.itruckFact-reference {
    color: #4b5563;
    font-size: 12px;
}

.itruckFact-concept {
    font-size: 13px;
    color: #4b5563;
    margin: 0 0 6px 0;
}

.itruckFact-total p {
    font-size: 14px;
    margin: 0;
    text-align: right;
    color: #333;
}

.itruckFact-total p strong {
    color: #111;
}

.itruckFact-footer {
    text-align: center;
    margin-top: 8px;
    font-size: 12px;
    color: #6b7280;
}

/* Estilo para borde recortado con tema ItruFact */
.itruckFact-ticket::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(to right, transparent 50%, #fff 50%);
    background-size: 10px 20px;
}

/* Media query para pantallas pequeñas */
@media (max-width: 768px) {
    .itruckFact-container {
        grid-template-columns: repeat(1, 1fr);
        /* Una columna en pantallas pequeñas */
    }

    .itruckFact-ticket {
        padding: 15px;
        gap: 10px;
        /* Espacio entre secciones reducido para pantallas pequeñas */
    }
}


.rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active {
    background-color: #4088bd59;
    border-color: #4088bdff;
    color: #000000;
    font-weight: 600;
}

.rz-event-content {
    background: #4088BD;
    color: white;
    overflow: hidden;
}

.rz-scheduler a.rz-event-list-btn {
    color: #607D8B;
}

.rz-scheduler a.rz-event-list-btn:hover {
    color: #ff9800;
}

.custom-timeline {
    position: relative;
    padding: 20px 0;
    max-width: 700px;
    margin: 0 auto;
}

.custom-timeline::before {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 0;
    left: 5px;
    /* Centra la línea en relación al marcador */
    width: 2px;
    background: #ddd;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    position: relative;
    cursor: pointer;
    padding-left: 10px;
    /* Ajusta el padding para que el contenido no se salga */
}

.timeline-marker {
    width: 12px;
    height: 12px;
    background-color: #CDC040;
    border-radius: 50%;
    position: absolute;
    left: 0px;
    /* Alinea el marcador con la línea */
    top: 0px;
    border: 2px solid white;
    box-shadow: 0 0 0 3px #CDC040;
}

.past-task .timeline-marker {
    background-color: #ccc;
    box-shadow: 0 0 0 3px #aaa;
}

.timeline-content {
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    width: 100%;
}

.timeline-date {
    font-weight: bold;
    font-size: 0.9rem;
    color: #4088BD;
    margin-bottom: 5px;
}

.timeline-details {
    flex-grow: 1;
}

.timeline-title {
    margin: 0;
    font-size: 0.8rem;
    color: #333;
}

/* Responsive Design */
@media (max-width: 767px) {
    .timeline-item {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 15px;
        /* Ajuste para dispositivos pequeños */
    }

    .timeline-marker {
        left: 1px;
        /* Ajusta el marcador para dispositivos pequeños */
    }

    .timeline-content {
        padding: 5px;
        flex-direction: column;
        align-items: flex-start;
    }

    .timeline-date {
        margin-bottom: 5px;
        font-size: 0.85rem;
    }

    .timeline-title {
        font-size: 0.95rem;
    }

    .custom-content {
        padding: 10px !important;
    }
}





/* Tareas pasadas */
.past-task .timeline-marker {
    background-color: #aaa;
    /* Gris */
    box-shadow: 0 0 0 3px #aaa;
}

/* Tareas próximas, en 1 días  */
.red-task .timeline-marker {
    background-color: #c10e34;
    /* Amarillo */
    box-shadow: 0 0 0 3px #c10e34;
}

/* Tareas próximas, en 3 días o menos */
.warning-task .timeline-marker {
    background-color: #4088BD;
    /* Amarillo */
    box-shadow: 0 0 0 3px #4088BD;
}

/* Tareas próximas, en 7 días o menos */
.upcoming-task .timeline-marker {
    background-color: #ff6600;
    /* Naranja */
    box-shadow: 0 0 0 3px #ff6600;
}

/* Tareas futuras, más de 7 días */
.future-task .timeline-marker {
    background-color: #28a745;
    /* Verde */
    box-shadow: 0 0 0 3px #28a745;
}

/* Estilo para el fondo del modal */
.NotiModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Mostrar el modal */
.NotiModal-show {
    display: block;
}

/* Ocultar el modal */
.NotiModal-hide {
    display: none;
}

/* Contenido del modal */
.NotiModal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
}

/* Botón de cierre del modal */
.NotiModal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.NotiModal-close:hover,
.NotiModal-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


/* Modal General */
.ITDoc-modal-visible {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.ITDoc-modal-hidden {
    display: none;
}

.ITDoc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9998;
}

.ITDoc-modal-content {
    background-color: #fff;
    position: relative;
    margin: 50px auto;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 80%;
    /* Limitar la altura máxima del modal */
    border-radius: 12px;
    z-index: 9999;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    /* Habilitar scroll dentro del modal si el contenido es mayor */

    border-bottom: 4px solid #4088BD;
}

.ITDoc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ITDoc-modal-header h5 {
    margin: 0;
    font-size: 1.25rem;
}

.ITDoc-modal-body {
    margin-top: 20px;
}

.ITDoc-close-btn {
    background-color: #4088BD;
    /* Color del botón */
    border: none;
    /* Sin bordes */
    color: #fff;
    /* Color de la "X" en blanco */
    font-size: 1.5rem;
    /* Tamaño de la fuente para la "X" */
    cursor: pointer;
    /* Cambia el cursor al pasar sobre el botón */
    width: 40px;
    /* Ancho del botón */
    height: 40px;
    /* Altura del botón */
    border-radius: 50%;
    /* Hace el botón redondo */
    display: flex;
    /* Usar flexbox para centrar la "X" */
    justify-content: center;
    /* Centrar horizontalmente */
    align-items: center;
    /* Centrar verticalmente */
}

.ITDoc-close-btn:hover {
    background-color: #366FA0;
    /* Un color más oscuro al hacer hover */
}

/* Área de carga de imagen */
.ITDoc-upload-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.ITDoc-image-upload-box {
    width: 100%;
    height: 200px;
    border: 2px dashed #4088BD;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #4088BD;
    background-color: #f7faff;
    border-radius: 12px;
    transition: background-color 0.3s;
}

.ITDoc-image-upload-box:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

.ITDoc-uploaded-img {
    max-width: 100%;
    max-height: 300px;
    /* Limitar la altura de la imagen dentro del modal */
    height: auto;
    border-radius: 12px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Contenedor de la imagen */
.ITDoc-image-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Overlay sobre la imagen */
.ITDoc-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Fondo oscuro transparente */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 12px;
}

.ITDoc-image-container:hover .ITDoc-image-overlay {
    opacity: 1;
    /* Mostrar el overlay al pasar el ratón sobre la imagen */
}

/* Icono de eliminar (la X) */
.ITDoc-remove-icon {
    font-size: 2rem;
    cursor: pointer;
}

/* Botón personalizado */
.ITDoc-btn-custom {
    padding: 10px 20px;
    background-color: #4088BD;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
}

.ITDoc-btn-custom:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

/* Acciones de subir */
.ITDoc-upload-actions {
    margin-top: 20px;
}


/* Overlay de carga que cubre toda la pantalla */
.ITDoc-fullscreen-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    /* Fondo oscuro transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    /* Asegurar que esté por encima de todo el contenido */
}

/* Contenido dentro del overlay (spinner y texto) */
.ITDoc-loading-content {
    text-align: center;
    color: white;
}

/* Spinner para mostrar la carga */
.ITDoc-spinner {
    border: 8px solid #4088BD;
    border-top: 8px solid #4088BD;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spinS 1s linear infinite;
}

/* Animación del spinner */
@keyframes spinS {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* Estilos personalizados para el modal */
.modal-it {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    /* Fondo semitransparente */
}

.modal-content-it {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.close-it {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-it:hover,
.close-it:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Imagen responsive */
.img-responsive-it {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}


.WizardITruck {

    margin: 0 auto;

    padding: 20px;
}

.wizard-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.wizard-header .step {
    width: 33%;
    text-align: center;
    padding: 10px;
    color: #aaa;
    /* Color inactivo */
    position: relative;
    font-size: 14px;
}

.wizard-header .step i {
    font-size: 30px;
    display: block;
    margin-bottom: 5px;
    color: #aaa;
    /* Color inactivo */
    transition: color 0.3s ease;
}

.wizard-header .step.active {
    color: #4088BD;
    /* Color activo para el texto */

}

.wizard-header .step.active i {
    color: #4088BD;
    /* Color activo para el icono */
}

.wizard-header .step:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 50px;
    background-color: #4088BD;
    transform: translateY(-50%);
}

.wizard-header .step:last-child:after {
    display: none;
}

.wizard-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.relo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: 600;
    font-size: 2em;
}

.btnredondo {
    display: inline-block;
    margin-left: 10px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    background-color: #4088BD;
    color: white;
    font-size: 24px;
    font-weight: bold;
}

.btn-wizard {
    padding: 10px 20px;
    background-color: #4088BD;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px;
    transition: background-color 0.3s;
}

.btn-wizard:hover {
    background-color: #4088BD;
}

.btn-wizard:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .WizardITruck {
        padding: 15px;
    }

    .wizard-header .step {
        font-size: 14px;
    }
}


.containerExtra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Para pantallas grandes */
    gap: 20px;
    padding: 20px;
}

/* Imagen a la izquierda */
.image-containerExtra {
    position: relative;
    width: 100%;
    /* Ajusta el ancho según sea necesario */
    max-width: 600px;
    /* Máximo ancho */
    overflow: hidden;
}

.image-containerExtra img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease, transform-origin 0.3s ease;
    /* Transición suave */
}

/* Aplica el zoom en hover */
.image-containerExtra.zoom img {
    transform: scale(1.5);
    /* Ajusta el nivel de zoom */
}

/* Formularios a la derecha */
.form-containerExtra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Dos columnas para PC */
    gap: 10px;
}



/* Formularios a la derecha */
.form-containerExtra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Dos columnas para PC */
    gap: 10px;
}

@media (max-width: 768px) {
    .containerExtra {
        grid-template-columns: 1fr;
        /* Una columna para pantallas pequeñas */
    }

    .form-containerExtra {
        grid-template-columns: 1fr;
        /* Los campos en una sola columna en móviles */
    }
}


.linea-texto-linea {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

.linea-texto-linea::before,
.linea-texto-linea::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background-color: #000;
    margin: 0 10px;
}

.linea-texto-linea span {
    font-size: 18px;
    font-weight: bold;
}


.factura-containerDos {
    margin-left: auto;
    margin-right: 0;
    margin-top: 20px;
    text-align: right;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
    width: 90%
}

.factura-container {
    margin-left: auto;
    margin-right: 0;
    margin-top: 20px;
    text-align: right;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.factura-item {
    margin-bottom: 10px;
    font-size: 16px;
}

.factura-item span {
    font-weight: bold;
}

.factura-total {
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
}

.imagezoo {
    max-width: 100%;
    /* Asegura que la imagen no exceda el tamaño del contenedor */
    height: auto;
    /* Mantiene la relación de aspecto de la imagen */
    display: block;
    /* Evita espacios en línea debajo de la imagen */
    border-radius: 8px;
    /* Bordes redondeados */
    object-fit: cover;
    /* Opcional: ajusta la imagen dentro de su contenedor */
}


.zoom-area {
    position: absolute;
    width: 120px;
    height: 120px;
    overflow: hidden;
    border: 1px solid #000;
    display: none;
    pointer-events: none;
    border-radius: 30%;
    /* Circular */
}

#zoom-image {
    position: absolute;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
}


.texrregister {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    color: black
}

.grid-containerBTNCua {
    display: grid;
    grid-template-columns: 1fr;
    /* Por defecto una sola columna */
    gap: 10px;
    /* Espacio entre los elementos */
    justify-content: end;
}


.button-containerD {
    display: flex;
    justify-content: center;
}

.button-container {
    display: flex;
    grid-template-columns: repeat(3, 1fr);
    /* Cuatro columnas */
    justify-content: end;
    gap: 10px;
    /* Espacio entre los botones */
}


.grid-containerBTNtre {
    display: flex;
    gap: 10px;
    /* Espacio entre los elementos */
    justify-content: end;
    grid-template-columns: repeat(3, 1fr);
    /* Cuatro columnas */
}



.grid-containerBTNDos {
    display: grid;
    grid-template-columns: 1fr;
    /* Por defecto una sola columna */
    gap: 10px;
    /* Espacio entre los elementos */
    justify-content: end;
}

.button-container2 {
    display: flex;
    grid-template-columns: repeat(4, 1fr);
    /* Cuatro columnas */
    justify-content: end;
    gap: 10px;
    /* Espacio entre los botones */
}

@media (max-width: 768px) {
    .grid-containerBTNDos {
        grid-template-columns: repeat(2, 1fr) !important;
        justify-content: end;
    }

    .button-container2 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* Cuatro columnas */
        justify-content: end;
        gap: 10px;
        /* Espacio entre los botones */
    }

    .grid-containerBTNtre {
        display: GRID;
        gap: 10px;
        justify-content: end;
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-containerBTNCua {
        grid-template-columns: repeat(2, 1fr) !important;
        justify-content: end;
    }
}



/* Estilos generales para el fondo del modal */
.ModalDemo-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Fondo ligeramente oscuro, con el mismo desenfoque que los modales estándar */
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    z-index: 9991;
}

.rz-dropdown-panel {
    box-sizing: content-box;
    padding: var(--rz-dropdown-panel-padding);
    z-index: 99999 !important;
}

.rz-notification {
    box-sizing: border-box;
    position: fixed;
    z-index: 9992;
    inset-block-start: 100px;
    inset-inline-end: 1rem;

}

@media (max-width: 768px) {

    /* Contenido del modal */
    .ModalDemo-content {

        width: 100% !important;

    }

}

/* Contenido del modal (diseño moderno unificado) */
.ModalDemo-content {
    background-color: white;
    width: 40%;
    max-width: 600px;
    padding: 0;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    overflow: visible; /* deja asomar la X roja de la esquina */
    position: relative;
    border-bottom: none;
    /* Como .it-modal__card y .vac-modal: nunca más alto que la pantalla. Sin esto un
       formulario largo (Nueva Empresa) llenaba la ventana y la X quedaba cortada arriba. */
    max-height: 90vh;
    box-sizing: border-box; /* el borde azul inferior cuenta dentro de esos 90vh */
    display: flex;
    flex-direction: column;
}

    .ModalDemo-content > *:last-child {
        border-radius: 0 0 16px 16px;
    }

/* Encabezado del modal: limpio, título oscuro (diseño moderno unificado) */
.ModalDemo-header {
    background: #fff;
    padding: 18px 54px 12px 22px;
    color: #1f2937;
    text-transform: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f2f5;
    /* la cabecera hereda el redondeo de la tarjeta (si no, tapa las esquinas) */
    border-radius: 16px 16px 0 0;
}

.ModalDemo-header h2,
.ModalDemo-header h4 {
    margin: 0;
    font-weight: 800;
    font-size: 1.12rem;
    color: #1f2937;
}

/* X roja circular pegada en la esquina superior derecha */
.ModalDemo-close {
    position: absolute;
    top: -13px;
    right: -13px;
    width: 34px;
    height: 34px;
    background: #e53935;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(229, 57, 53, .4);
    transition: background .12s, transform .1s;
    z-index: 10;
}

    .ModalDemo-close:hover {
        background: #c62828;
        transform: scale(1.06);
    }

    .ModalDemo-close .rz-icon,
    .ModalDemo-close .rzi {
        font-size: 16px !important;
        color: #fff;
    }

/* Cuerpo del modal */
.ModalDemo-body {
    padding: 20px;
    /* Espacio interno */
    /* Scroll propio: si el contenido no cabe, se desplaza por dentro y la cabecera
       y la X siguen a la vista (los paneles de ItSelect/ItDatePicker van en fixed). */
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    flex: 1 1 auto;
}

.ModalDemo-header {
    flex-shrink: 0;
}

.ModalDemo-body form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Espacio entre los campos */
}

/*
        .ModalDemo-body input {
            width: 100%;
            padding: 10px;
            font-size: 1rem;
            border: 1px solid #ccc;
            border-radius: 4px;
        }*/

/* Botón personalizado */
.ModalDemo-body .button {
    background-color: #4e4e4e;
    /* Color oscuro */
    color: white;
    /* Texto en blanco */
    border: none;
    padding: 15px;
    text-transform: uppercase;
    /* Texto en mayúsculas */
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    width: 100%;
    font-size: 1rem;
}

/* Hover del botón */
.ModalDemo-body .button:hover {
    background-color: #333333;
}

/* Estilo del botón de cierre */
.ModalDemo-close:hover {
    color: #ffffff88;
    /* Color de hover para el botón de cierre */
}

.switch-company-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.switch-company-actions .rz-dropdown {
    width: 100%;
    max-width: 420px;
}

.switch-company-actions .ItruckCardButton {
    min-width: 180px;
    text-align: center;
}


.ModalBien-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.ModalBien-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    animation: fadeIn 0.3s ease-in-out;
    border-bottom: 4px solid #4088BD;
}

.ModalBien-header h2 {
    margin: 0;
    font-size: 24px;
    color: #333;
}

.ModalBien-body {
    margin-top: 15px;
}

.ModalBien-image {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 15px;
}

.ModalBien-body p {
    font-size: 16px;
    color: #555;
    margin: 0;
}

.ModalBien-footer {
    margin-top: 20px;
}


.ModalBien-button {
    background-color: #4088BD;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    position: relative;
    overflow: hidden;
}

.ModalBien-button i {
    margin-left: 10px;
    animation: moveRight 1s infinite linear;
    /* Animación continua */
}

.ModalBien-button:hover i {
    animation-play-state: paused;
    /* Pausa la animación en hover */
}

@keyframes moveRight {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px);
        /* Mueve el ícono hacia la derecha */
    }

    100% {
        transform: translateX(0);
        /* Vuelve a la posición original */
    }
}

.ModalBien-button:hover {
    background-color: #4088bdc2;
}




@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.form-containerVertitcal {
    width: 100%;
    margin: 0 auto;
    gap: 10px;
    display: grid;
    gap: 10px;
}


/* Contenedor principal */
.profile-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    margin: 0 auto;
}

/* Líneas a los lados */
.line {
    width: calc(50% - 100px);
    /* Ajustamos el ancho para que las líneas se unan al arco sin tocar el perfil */
    height: 1px;
    background-color: #cdcbcb;
    position: relative;
    z-index: 1;
}

/* Círculos en los extremos de las líneas */
.circle {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #cdcbcb;
    border-radius: 50%;
    position: absolute;
    top: -7px;
}

.left-line .circle {
    left: 0px;
    /* Posicionamos el círculo al extremo izquierdo */
}

.right-line .circle {
    right: 0px;
    /* Posicionamos el círculo al extremo derecho */
}

/* Contenedor del perfil (imagen o inicial) */
.profile-container {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    margin: 0 20px;
    /* Espacio a los lados para evitar que el perfil toque las líneas */
}

/* Imagen de perfil */
.profile-image-container {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    border: 1px solid #cdcbcb;
    overflow: hidden;
}

.profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}

/* Inicial del perfil */
.profile-initial-container {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    background-color: #4088BD;
    /* Aseguramos el color de fondo */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #4088BD;
    /* Borde azul */
}

.profile-initial {
    color: white;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    /* Asegura que la inicial esté centrada */
}

/* Arco que conecta las líneas (oculto: el logo ahora es cuadrado) */
.arc {
    display: none;
}

/* =====================================================================
   EMPRESA · Tab Información — layout moderno (logo a un lado + secciones)
   ===================================================================== */
.company-info-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    align-items: start;
    padding: 26px 4px 8px;
}

.company-logo-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: sticky;
    /* Debajo del header fijo: al hacer scroll el logo no lo tapa. */
    top: 95px;
}

.company-logo-box {
    position: relative;
    width: 210px;
    height: 210px;
    border-radius: 24px;
    border: 1px solid #e6ebf2;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .10);
    display: flex;
    align-items: center;
    justify-content: center;
}

.company-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.company-logo-initial {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 70px;
    font-weight: 700;
}

.company-logo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: none;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    z-index: 2;
}

.company-logo-overlay i { font-size: 28px; }
.company-logo-overlay span { font-size: .82rem; font-weight: 600; }
.company-logo-box:hover .company-logo-overlay { display: flex; }

.company-logo-edit {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #4088BD;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    transition: background-color .15s ease;
    z-index: 3;
}

.company-logo-edit:hover { background: #2f6d9c; }
.company-logo-edit i { font-size: 13px; }

.company-logo-name {
    margin-top: 8px;
    font-size: 1.08rem;
    font-weight: 700;
    color: #2c3e50;
    text-align: center;
    line-height: 1.25;
}

.company-logo-sub {
    font-size: .85rem;
    color: #8a97a8;
    text-align: center;
}

/* Secciones de datos */
.company-section {
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 16px;
    padding: 18px 20px 22px;
    margin-bottom: 18px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.company-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .98rem;
    font-weight: 700;
    color: #4088BD;
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid #eef1f5;
}

.company-section-title i { font-size: 1rem; }

/* Botón del pincel (diseño de la factura) al final del título de «Facturación y pagos». */
.company-section-title .company-diseno-factura { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; }
.company-section-title .company-diseno-factura i { font-size: 15px; color: #fff; }

.company-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.company-section-desc {
    margin: -2px 0 14px;
    color: #8a97a8;
    font-size: .88rem;
}

/* Tab Configuración Email */
.company-email {
    padding: 22px 4px 8px;
}

.company-email-head {
    margin-bottom: 18px;
}

.company-eyebrow {
    margin: 0;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #8a97a8;
}

.company-head-title {
    margin: 4px 0 6px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f3552;
}

.company-head-sub {
    margin: 0;
    color: #56657a;
    font-size: .92rem;
}

/* Fila SSL/TLS */
.company-ssl-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 14px 16px;
    background: #f7f9fc;
    border: 1px solid #eef1f5;
    border-radius: 12px;
}

.company-ssl-hint {
    font-size: .8rem;
    color: #8a97a8;
    margin-top: 2px;
}

/* Fila de prueba de envío: input + botón alineados */
.company-test-row {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.company-test-input {
    flex: 1;
    min-width: 260px;
}

.company-test-btn {
    flex: 0 0 auto;
    height: 44px;
    white-space: nowrap;
}

/* =====================================================================
   LoadingButton — spinner de carga en botones de acción
   ===================================================================== */
.lb-busy {
    opacity: .85;
    cursor: progress !important;
    pointer-events: none;
}

.lb-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 8px;
    animation: lb-rot .6s linear infinite;
}

@keyframes lb-rot {
    to { transform: rotate(360deg); }
}

/* Responsive: en pantallas estrechas el logo va arriba y los datos abajo */
@media (max-width: 900px) {
    .company-info-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .company-logo-side {
        position: static;
    }

    .company-actions {
        justify-content: center;
    }
}

/* Hover que aparece al pasar sobre el perfil */
.hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 18px;
    cursor: pointer;
    z-index: 4;
}

.profile-container:hover .hover-overlay {
    display: flex;
}

.hover-overlay i {
    color: white;
    font-size: 24px;
}

/* Ícono de lápiz siempre visible para editar la imagen */
.edit-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 4;
}

.edit-icon i {
    color: white;
    font-size: 10px;
}

/* Estilos para pantallas pequeñas */
@media (max-width: 768px) {
    .line {
        width: 111px;
    }

    .circle {
        width: 15px;
        height: 15px;
    }

    .arc {
        width: 120px;
        height: 66px;
    }

    .profile-container {
        width: 87px;
        height: 80px;
    }

    .profile-initial {
        font-size: 30px;
    }

    .profile-wrapper {
        padding-top: 40px;
    }
}


.form-containerAD {
    max-width: 400px;
    /* Ajusta el ancho máximo para centrarlo */
    margin: 0 auto;
    /* Centra el contenedor */
    display: flex;
    flex-direction: column;
    /* Asegura que los elementos estén en columna */
    gap: 15px;
    /* Espacio entre los campos */

    padding-top: 10px;
}

.fomDivBt {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}


.fomDivBtCenter {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

@media (max-width: 768px) {

    /* Para pantallas más pequeñas, como teléfonos móviles */
    .form-containerAD {
        width: 100%;
        /* Asegura que ocupe todo el ancho en móvil */
        max-width: 100%;
        /* Anula el ancho máximo en dispositivos pequeños */
        padding: 0px;
        /* Añade un poco de espacio a los lados en móvil */
    }

    .fomDivBt {
        justify-content: center;
    }

}

/* Estilos del modal */
.ModalGlobal-visible {
    display: flex;
}

.ModalGlobal-hidden {
    display: none;
}

/* Fondo del modal */
.ModalGlobal-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

/* Ensure overlay respects hidden state */
.ModalGlobal-overlay.ModalGlobal-hidden {
    display: none;
}

.ModalGlobal-content > *:last-child {
    border-radius: 0 0 16px 16px;
}

.ModalGlobal-overlay.ModalGlobal-visible {
    display: flex;
}

/* Contenedor del modal (diseño moderno unificado) */
.ModalGlobal-content {
    background-color: white;
    width: 40%;
    max-width: 600px;
    max-height: 90vh;
    /* Limitar la altura del modal */
    padding: 0;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    overflow: visible; /* deja asomar la X roja */
    position: relative;
    border-bottom: none;
    display: flex;
    flex-direction: column;
}

.client-modal-content {
    width: 70%;
    max-width: 820px;
    max-height: 96vh;
}

/* Modal de producto de factura y borrador (InvoicesCrud): más ancho para que
   el concepto se lea entero. En móvil manda la regla de .ModalGlobal-content (90 %). */
.invoice-item-modal {
    width: 70%;
    max-width: 900px;
}

.invoice-item-modal__importes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

/* Modales de plantillas de ítems (InvoiceTemplatesModal, InvoiceTemplateDetail):
   listado, "Nueva plantilla" e "Items de plantilla". Buscador y botón Nuevo en una
   fila; en pantallas estrechas el botón baja solo. */
.invoice-templates-modal {
    width: 80%;
    max-width: 1000px;
}

.invoice-templates-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.invoice-templates-toolbar .it-grid-search-slot { flex: 1 1 260px; }
.invoice-templates-toolbar .button-container { flex: none; }

/* Cargar plantilla en la factura (InvoiceTemplateSelector): elegir entre todos los
   ítems o marcar cuáles en una tabla. */
.tpl-modo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.tpl-modo__op {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1.6px solid #d7dde5;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.tpl-modo__op input { margin-top: 3px; accent-color: #4088BD; }
.tpl-modo__op strong { display: block; color: #1f2937; font-size: .95rem; }
.tpl-modo__op small { color: #667085; }
.tpl-modo__op.is-on { border-color: #4088BD; background: rgba(64, 136, 189, .06); }

/* "Elegir ítems": catálogo con buscador + carrito. En pantallas estrechas el
   carrito baja debajo del catálogo. */
.tpl-shop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
}

.tpl-shop__buscar { display: flex; align-items: center; gap: 10px; }
.tpl-shop__buscar .it-input { flex: 1; margin: 0; }
.tpl-shop__contador { color: #667085; font-size: .85rem; padding: 8px 2px 10px; }

.tpl-cat { display: flex; flex-direction: column; gap: 10px; }
.tpl-cat__vacio { color: #667085; text-align: center; padding: 28px 10px; }

.tpl-cat__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1.6px solid #eaecf0;
    border-radius: 12px;
    background: #fff;
    transition: border-color .15s, background .15s;
}

.tpl-cat__item.is-on { border-color: #4088BD; background: rgba(64, 136, 189, .05); }
.tpl-cat__desc { color: #1f2937; font-weight: 600; line-height: 1.35; white-space: pre-line; }
.tpl-cat__meta { color: #667085; font-size: .85rem; padding-top: 4px; }
.tpl-cat__precio { color: #0a1a33; font-weight: 700; white-space: nowrap; }

.tpl-cat__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1.6px solid #4088BD;
    border-radius: 10px;
    background: #4088BD;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.tpl-cat__btn.is-on { background: #e8f5ee; border-color: #12b76a; color: #067647; }
.tpl-cat__btn--todos { background: #fff; color: #4088BD; height: 52px; }

.tpl-cart {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1.6px solid #eaecf0;
    border-radius: 14px;
    background: #f8fafc;
}

.tpl-cart__head { display: flex; align-items: center; gap: 8px; color: #0a1a33; font-weight: 700; }

.tpl-cart__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #4088BD;
    color: #fff;
    font-size: .8rem;
}

.tpl-cart__vaciar { margin-left: auto; border: 0; background: none; color: #b42318; font-size: .85rem; font-weight: 600; cursor: pointer; }
.tpl-cart__vacio { color: #667085; font-size: .9rem; text-align: center; padding: 18px 6px; }
.tpl-cart__lineas { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; }
.tpl-cart__linea { padding: 10px; border: 1px solid #eaecf0; border-radius: 10px; background: #fff; }

.tpl-cart__desc {
    color: #344054;
    font-size: .88rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tpl-cart__fila { display: flex; align-items: center; gap: 8px; padding-top: 8px; }
.tpl-cart__importe { margin-left: auto; color: #0a1a33; font-weight: 700; white-space: nowrap; }
.tpl-cart__quitar { border: 0; background: none; color: #98a2b3; padding: 4px; cursor: pointer; }
.tpl-cart__quitar:hover { color: #b42318; }

.tpl-qty { display: inline-flex; align-items: center; overflow: hidden; border: 1.6px solid #d7dde5; border-radius: 10px; background: #fff; }
.tpl-qty button { width: 30px; height: 30px; border: 0; background: #f2f4f7; color: #344054; font-weight: 700; cursor: pointer; }
.tpl-qty input { width: 52px; height: 30px; border: 0; text-align: center; font-size: .9rem; -moz-appearance: textfield; }
.tpl-qty input::-webkit-outer-spin-button,
.tpl-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.tpl-cart__totales { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px dashed #d0d5dd; color: #475467; font-size: .9rem; }
.tpl-cart__totales div { display: flex; justify-content: space-between; }
.tpl-cart__totales .is-total { padding-top: 4px; color: #0a1a33; font-size: 1.05rem; font-weight: 800; }

@media (max-width: 900px) {
    .tpl-shop { grid-template-columns: 1fr; }
    .tpl-cart { position: static; }
}

@media (max-width: 560px) {
    .tpl-cat__item { grid-template-columns: minmax(0, 1fr) auto; }
    .tpl-cat__item .tpl-cat__btn { grid-column: 1 / -1; justify-content: center; }
    .tpl-shop__buscar { flex-wrap: wrap; }
    .tpl-cat__btn--todos { width: 100%; justify-content: center; }
}

/* "Generar factura unificada" (UnifyDraftsModal): diferencias entre borradores y
   confirmación con las fechas. */
.unif-cargando { color: #667085; text-align: center; padding: 30px 10px; }

.unif-aviso {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: .92rem;
    line-height: 1.5;
    margin-bottom: 16px;
}

.unif-aviso > i { font-size: 1.2rem; margin-top: 2px; }
.unif-aviso--error { background: #fef3f2; border-left: 4px solid #D92D20; color: #7a271a; }
.unif-aviso--error > i { color: #D92D20; }
.unif-aviso--info { background: #f0f6fc; border-left: 4px solid #4088BD; color: #1f3b57; margin-top: 18px; margin-bottom: 0; }
.unif-aviso--info > i { color: #4088BD; }

.unif-tabla-scroll { overflow-x: auto; border: 1px solid #eaecf0; border-radius: 12px; }
.unif-tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.unif-tabla th { background: #4f86ba; color: #fff; text-align: left; padding: 10px 12px; font-weight: 600; white-space: nowrap; vertical-align: top; }
.unif-tabla th small { display: block; font-weight: 400; opacity: .9; padding-top: 2px; }
.unif-tabla td { padding: 10px 12px; border-top: 1px solid #eaecf0; color: #344054; vertical-align: top; }
.unif-tabla .num { text-align: right; white-space: nowrap; }
.unif-tabla .unif-campo { font-weight: 700; color: #0a1a33; white-space: nowrap; }
.unif-tabla td.is-distinto { background: #fef3f2; color: #b42318; font-weight: 700; }
.unif-editar { display: inline-block; margin-top: 4px; color: #fff; font-size: .8rem; font-weight: 600; text-decoration: underline; }

.unif-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.unif-resumen > div { padding: 12px 14px; border: 1px solid #eaecf0; border-radius: 12px; background: #f8fafc; }
.unif-resumen span { display: block; color: #667085; font-size: .8rem; }
.unif-resumen strong { color: #0a1a33; font-size: 1.05rem; }

.unif-sub { margin: 20px 0 12px; color: #0a1a33; font-weight: 700; }
.unif-unsolo { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.unif-tabla td.desc { white-space: pre-line; }

.unif-nota {
    padding: 10px 12px;
    border-left: 4px solid #F26A1B;
    border-radius: 10px;
    background: #fff3e8;
    color: #7a4318;
    font-size: .88rem;
}

.unif-fechas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.unif-fechas small { display: block; color: #667085; font-size: .8rem; padding: 4px 4px 0; }

/* Asociar DeCA ↔ ruta (DeCARouteLinkModal). */
.deca-link { display: flex; flex-direction: column; gap: 14px; min-width: min(560px, 80vw); }
.deca-link__texto { margin: 0; color: #475467; font-size: .92rem; }
.deca-link__vacio { color: #667085; text-align: center; padding: 24px 10px; }
.deca-link__nota { display: flex; gap: 8px; align-items: flex-start; color: #1f3b57; background: #f0f6fc; border-left: 4px solid #4088BD; border-radius: 10px; padding: 10px 12px; font-size: .85rem; }
.deca-link__nota i { color: #4088BD; margin-top: 2px; }
.deca-link__error { color: #b42318; background: #fef3f2; border-left: 4px solid #D92D20; border-radius: 10px; padding: 10px 12px; font-size: .88rem; }
.deca-link__acciones { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 4px; }

/* Columnas de un listado elegidas por la empresa (GridColumnsModal, botón «Columnas»). */
/* Rejilla con columnas elegibles: nunca más estrecha que la suma de sus columnas visibles
   (--it-grid-min, lo calcula la página); si no cabe, se desplaza en horizontal. */
.it-grid-minw .rz-grid-table { min-width: var(--it-grid-min, 0px); }
/* Anchos arrastrados por el usuario (RadzenDataGridEs): la suma de sus columnas manda
   sobre el mínimo de fábrica de la página, para que estrechar sirva para que quepan más. */
.it-grid-anchos > .rz-data-grid > .rz-data-grid-data > .rz-grid-table { min-width: var(--it-grid-anchos) !important; }
.grid-cols { display: flex; flex-direction: column; gap: 10px; min-width: min(620px, 86vw); max-width: 720px; }
.grid-cols__texto { margin: 0; color: #475467; font-size: .9rem; line-height: 1.5; }
.grid-cols__texto span { color: #667085; }
.grid-cols__titulo { font-weight: 700; color: #1f2937; font-size: .92rem; margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.grid-cols__titulo small { background: #eef4fa; color: #2e6da4; border-radius: 999px; padding: 1px 8px; font-size: .75rem; font-weight: 700; }
.grid-cols__lista { display: flex; flex-direction: column; border: 1px solid #e6e9ee; border-radius: 12px; overflow: hidden; }
.grid-cols__fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border-bottom: 1px solid #f0f2f5; background: #fff; }
.grid-cols__fila:last-child { border-bottom: none; }
.grid-cols__fila:hover { background: #f8fafc; }
.grid-cols__check { display: flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; flex: 1; min-width: 0; font-size: .9rem; color: #1f2937; }
.grid-cols__check input { width: 17px; height: 17px; accent-color: #4088BD; cursor: pointer; flex: none; }
.grid-cols__check small { color: #98a2b3; font-size: .75rem; margin-left: auto; white-space: nowrap; }
.grid-cols__orden { display: flex; gap: 4px; flex: none; }
.grid-cols__orden button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; color: #4088BD; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.grid-cols__orden button:hover:not(:disabled) { background: #4088BD; color: #fff; border-color: #4088BD; }
.grid-cols__orden button:disabled { color: #cbd5e1; cursor: default; }
.grid-cols__grupo { color: #667085; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
.grid-cols__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.grid-cols__chip { border: 1px dashed #b6cde3; background: #f4f8fc; color: #2e6da4; border-radius: 999px; padding: 5px 12px; font-size: .84rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.grid-cols__chip:hover { background: #4088BD; color: #fff; border-style: solid; border-color: #4088BD; }
.grid-cols__chip i { font-size: 11px; }
.grid-cols__error { color: #b42318; background: #fef3f2; border-left: 4px solid #D92D20; border-radius: 10px; padding: 10px 12px; font-size: .86rem; }
.grid-cols__acciones { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 8px; flex-wrap: wrap; }
.grid-cols__acciones-der { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
/* Botones con texto: el texto nunca se parte en dos líneas. */
.grid-cols__acciones .ItruckCardButton { white-space: nowrap; margin: 0; flex: none; }
.ItruckCardButton.grid-cols__btn-sec { background-color: #fff; color: #2e6da4; border: 1px solid #b6cde3; }
.ItruckCardButton.grid-cols__btn-sec:hover { background-color: #f0f6fc; }
.ItruckCardButton.grid-cols__btn-sec:disabled { color: #98a2b3; border-color: #e2e8f0; cursor: default; transform: none; }
/* Arrastrar y soltar filas para ordenarlas (la raya azul marca dónde caerá). */
.grid-cols__fila[draggable="true"] { cursor: grab; }
.grid-cols__fila[draggable="true"]:active { cursor: grabbing; }
.grid-cols__asa { color: #98a2b3; flex: none; display: inline-flex; align-items: center; font-size: 13px; padding: 0 2px; }
.grid-cols__fila:hover .grid-cols__asa { color: #4088BD; }
.grid-cols__fila--arrastrando { opacity: .45; background: #f4f8fc; }
.grid-cols__fila--antes { box-shadow: inset 0 3px 0 #4088BD; }
.grid-cols__fila--despues { box-shadow: inset 0 -3px 0 #4088BD; }
@media (max-width: 560px) { .grid-cols__check small { display: none; } }

/* Duplicar ruta (RouteDuplicateModal): qué se copia y qué no antes de crear la copia. */
.rt-dup { display: flex; flex-direction: column; gap: 12px; min-width: min(560px, 86vw); max-width: 640px; }
.rt-dup__texto { margin: 0; color: #475467; font-size: .92rem; line-height: 1.5; }
.rt-dup__ruta { border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 14px; background: #f8fafc; display: flex; flex-direction: column; gap: 4px; }
.rt-dup__cliente { font-weight: 700; color: #1f2937; font-size: .92rem; }
.rt-dup__trayecto { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: #344054; font-size: .86rem; }
.rt-dup__trayecto .rt-dot { width: 9px; height: 9px; box-shadow: none; }
.rt-dup__trayecto i { color: #98a2b3; font-size: 11px; margin: 0 2px; }
.rt-dup__detalle { color: #667085; font-size: .8rem; }
.rt-dup__listas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rt-dup__lista { border-radius: 12px; padding: 10px 14px; }
.rt-dup__lista ul { margin: 6px 0 0; padding-left: 18px; color: #344054; font-size: .86rem; line-height: 1.55; }
.rt-dup__titulo { font-weight: 700; font-size: .86rem; display: flex; align-items: center; gap: 6px; }
.rt-dup__lista--si { background: #ecfdf3; border: 1px solid #abefc6; }
.rt-dup__lista--si .rt-dup__titulo { color: #067647; }
.rt-dup__lista--no { background: #fef3f2; border: 1px solid #fecdca; }
.rt-dup__lista--no .rt-dup__titulo { color: #b42318; }
.rt-dup__nota { margin: 0; color: #475467; font-size: .84rem; display: flex; gap: 8px; align-items: baseline; }
.rt-dup__nota i { color: #4088BD; }
.rt-dup__error { color: #b42318; background: #fef3f2; border-left: 4px solid #D92D20; border-radius: 10px; padding: 10px 12px; font-size: .86rem; }
.rt-dup__acciones { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 4px; }
.rt-dup__acciones .ItruckCardButton { white-space: nowrap; margin: 0; flex: none; }
@media (max-width: 560px) { .rt-dup__listas { grid-template-columns: 1fr; } }

.tpl-items-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fff3e8;
    color: #c4540f;
    font-size: .75rem;
    font-weight: 600;
}

/* El formulario del cliente se muestra COMPLETO, sin scroll interno.
   El form (ItForm) pasa a ser columna flex para que, solo en pantallas
   muy bajas, el scroll de seguridad quede dentro del body y no asome
   por las esquinas redondeadas. */
.client-modal-content form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 0 0 16px 16px;
}

.client-modal-content .ModalGlobal-body {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
}

.client-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 0;
}

.cardFormuModal.client-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 4px;
}

.client-modal-actions {
    grid-column: 1 / -1;
    justify-content: center;
}

.invoice-client-link {
    color: black;
    text-decoration: underline;
}

.invoice-client-link:hover {
    color: black;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .client-form-grid {
        grid-template-columns: 1fr;
    }

    .cardFormuModal.client-form-grid {
        grid-template-columns: 1fr;
    }
}

.action-menu-wrapper {
    position: relative;
    display: inline-block;
}

.action-trigger {
    background-color: #4088BD;
    border: none;
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.action-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.action-menu {
    position: absolute;
    right: 0;
    margin-top: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    min-width: 180px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    z-index: 20;
    overflow: hidden;
}

.action-menu-item {
    width: 100%;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    color: #3a3a3a;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.action-menu-item:hover {
    background-color: #f0f6fc;
    color: #0b5ed7;
}

.action-menu-item.danger {
    color: #c62828;
}

.action-menu-item.danger:hover {
    background-color: #fdecea;
    color: #b71c1c;
}

/* Header del modal */
.ModalGlobal-header {
    background: #fff;
    padding: 18px 54px 12px 22px;
    color: #1f2937;
    text-transform: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid #f0f2f5;
    border-radius: 16px 16px 0 0;
}

.ModalGlobal-header h2,
.ModalGlobal-header h4 {
    margin: 0;
    font-weight: 800;
    font-size: 1.12rem;
    color: #1f2937;
}

/* X roja circular pegada en la esquina superior derecha */
.ModalGlobal-close {
    position: absolute;
    top: -13px;
    right: -13px;
    width: 34px;
    height: 34px;
    background: #e53935;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(229, 57, 53, .4);
    transition: background .12s, transform .1s;
    z-index: 10;
}

    .ModalGlobal-close .rz-icon,
    .ModalGlobal-close .rzi,
    .ModalGlobal-close .notranslate {
        font-size: 17px !important;
        color: #fff;
    }

.ModalGlobal-close:hover {
    background: #c62828;
    transform: scale(1.06);
    color: #fff;
}

/* Cuerpo del modal con scroll habilitado */
.ModalGlobal-body {
    padding: 20px;
    overflow-y: auto;
    /* Habilitar el scroll dentro del cuerpo del modal */
    flex-grow: 1;
    max-height: calc(90vh - 80px);
    /* Ajustar la altura teniendo en cuenta el header */
    scrollbar-width: thin;
    scrollbar-color: #c3d4e2 transparent;
    /* Sobrescribir el ocultamiento global */
}

/* Scrollbar del modal: discreto, redondeado y SEPARADO de las esquinas
   redondeadas (el margin evita que el pulgar asome fuera de la tarjeta). */
.ModalGlobal-body::-webkit-scrollbar {
    width: 5px;
}

.ModalGlobal-body::-webkit-scrollbar-thumb {
    background: #c3d4e2;
    border-radius: 999px;
}

.ModalGlobal-body::-webkit-scrollbar-track {
    background: transparent;
    margin: 14px 0;
}

.ModalGlobal-footer {
    padding: 15px 20px;
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 1;
    /* hereda la curva inferior de la tarjeta: si no, su fondo blanco
       tapa las esquinas redondeadas y el borde azul */
    border-radius: 0 0 16px 16px;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .ModalGlobal-content {
        width: 90%;
        max-height: 90vh;
    }
}



/* ============================================
   PÁGINA DE ACCESO DENEGADO - DISEÑO MODERNO
   ============================================ */

.access-denied-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;

}

.access-denied-content {
    background: white;
    border-radius: 20px;
    padding: 50px 40px;
    max-width: 550px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

/* Icono superior */
.access-denied-icon {
    margin-bottom: 25px;
    animation: pulse 2s ease-in-out infinite;
}

.access-denied-icon svg {
    color: #dc3545;
    filter: drop-shadow(0 4px 8px rgba(220, 53, 69, 0.3));
}

@keyframes pulse {

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

    50% {
        transform: scale(1.05);
    }
}

/* Título */
.access-denied-title {
    font-size: 32px;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 15px 0;
    letter-spacing: -0.5px;
}

/* Subtítulo */
.access-denied-subtitle {
    font-size: 18px;
    color: #4a5568;
    margin: 0 0 30px 0;
    line-height: 1.6;
}

/* Sección de razones */
.access-denied-reasons {
    background: #f7fafc;
    border-left: 4px solid #4088BD;
    border-radius: 8px;
    padding: 20px 25px;
    margin: 30px 0;
    text-align: left;
}

.reasons-title {
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
    margin: 0 0 12px 0;
}

.reasons-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.reasons-list li {
    position: relative;
    padding-left: 28px;
    margin: 10px 0;
    color: #4a5568;
    font-size: 15px;
    line-height: 1.5;
}

.reasons-list li::before {
    content: "▸";
    position: absolute;
    left: 8px;
    color: #4088BD;
    font-weight: bold;
    font-size: 18px;
}

/* Mensaje de contacto */
.access-denied-contact {
    font-size: 16px;
    color: #2d3748;
    font-weight: 600;
    margin: 25px 0 30px 0;
}

/* Botón de cerrar sesión mejorado */
.access-denied-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
    position: relative;
    overflow: hidden;
}

.access-denied-logout-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.access-denied-logout-btn:hover::before {
    left: 100%;
}

.access-denied-logout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}

.access-denied-logout-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(220, 53, 69, 0.3);
}

.access-denied-logout-btn svg {
    flex-shrink: 0;
}

/* Cuenta regresiva */
.access-denied-countdown {
    margin-top: 30px;
    padding: 20px;
    background: #fff5f5;
    border: 2px dashed #fc8181;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.access-denied-countdown p {
    margin: 0;
    color: #c53030;
    font-size: 15px;
}

.access-denied-countdown strong {
    font-size: 20px;
    font-weight: 700;
}

/* Spinner animado */
.countdown-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid #fed7d7;
    border-top-color: #dc3545;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .access-denied-wrapper {
        padding: 15px;
    }

    .access-denied-content {
        padding: 35px 25px;
        border-radius: 15px;
    }

    .access-denied-icon svg {
        width: 60px;
        height: 60px;
    }

    .access-denied-title {
        font-size: 26px;
    }

    .access-denied-subtitle {
        font-size: 16px;
    }

    .access-denied-reasons {
        padding: 15px 20px;
    }

    .reasons-list li {
        font-size: 14px;
    }

    .access-denied-logout-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        font-size: 15px;
    }

    .access-denied-countdown {
        flex-direction: column;
        gap: 8px;
        padding: 15px;
    }

    .access-denied-countdown p {
        text-align: center;
        font-size: 14px;
    }
}

/* Eliminar estilos antiguos (mantener compatibilidad) */
.containerEpsacioTres {
    display: flex;
    justify-content: space-between;
    /* Distribuye los elementos con espacio entre ellos */
    align-items: center;
    /* Alinea verticalmente en el centro si los elementos tienen alturas diferentes */
    flex-wrap: wrap;
    /* Permite que los elementos se ajusten a la siguiente línea si no caben */
    width: 100%;
    /* Ajusta esto según el contenedor que quieras usar */
    gap: 10px;
    /* Añade espacio entre los elementos */
}

@media (max-width: 768px) {
    .containerEpsacioTres {
        justify-content: flex-start;
        /* Alinea los elementos al inicio */
    }

    /* Cada elemento tomará el 48% del ancho para que haya dos en una fila */
    .containerEpsacioTres>* {
        flex: 1 1 48%;
        /* Cada elemento ocupa el 48% del ancho */
        margin-bottom: 10px;
        /* Añade un poco de espacio inferior */
    }
}

@media (max-width: 768px) {
    .containerEpsacioTres {
        justify-content: flex-start;
        /* Alinea los elementos al inicio */
    }

    /* Cada elemento tomará el 48% del ancho para que haya dos en una fila */
    .containerEpsacioTres>* {
        flex: 1 1 48%;
        /* Cada elemento ocupa el 48% del ancho */
        margin-bottom: 10px;
        /* Añade un poco de espacio inferior */
    }
}


.TBRol-role-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Encabezado solo para pantallas grandes */
.TBRol-permission-header {
    display: none;
    /* Por defecto no mostrar */
    flex-direction: row;
    gap: 10px;
    padding: 10px;
    font-weight: bold;
    border-bottom: 2px solid #4088bd;
    white-space: nowrap;
    background: #4088bd;
    color: white;
    border-radius: 10px;
}

/* Elementos individuales de permiso */
.TBRol-permission-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.TBRol-module-name {
    flex: 1 1 200px;
    font-weight: bold;
    margin-bottom: 0;
}

.TBRol-permission-switch {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1 1 100px;
    justify-content: space-between;
}

/* Etiquetas para nombres de acciones en pantallas pequeñas */
.TBRol-label {
    display: none;
}

/* Mostrar el encabezado y ocultar las etiquetas en pantallas grandes */
@media (min-width: 768px) {
    .TBRol-permission-header {
        display: flex;
    }


    .TBRol-permission-switch-header {
        flex: 1 1 100px;
        text-align: center;
    }

    .TBRol-module-name {
        flex: 1 1 200px;
    }

    .TBRol-permission-switch {
        flex: 1 1 100px;
        justify-content: center;
    }

    /* Ocultar las etiquetas en pantallas grandes */
    .TBRol-label {
        display: none;
    }
}

/* Para pantallas pequeñas */
@media (max-width: 768px) {
    .TBRol-permission-header {
        display: none;
        /* Ocultar encabezado en pantallas pequeñas */
    }

    .TBRol-permission-item {
        align-items: flex-start;
    }

    .TBRol-permission-switch {
        flex: 1 1 100%;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .TBRol-label {
        display: inline-block;
        /* Mostrar las etiquetas junto a los switches */
        margin-right: 10px;
    }

    .TBRol-module-name {
        flex: 1 1 200px;
        font-weight: bold;
        margin-bottom: 0;
        position: relative;
        /* Necesario para que la pseudo-clase ::after se posicione correctamente */
    }

    .TBRol-module-name::after {
        content: "";
        /* No mostramos texto, solo la línea */
        display: block;
        width: 100%;
        /* Línea ocupará el ancho del contenedor */
        height: 1px;
        /* Altura de la línea */
        background-color: #4088BD;
        /* Color claro para la línea */
        position: absolute;
        bottom: -5px;
        /* Ajustar la distancia desde la parte inferior del texto */
        left: 0;
    }
}


.RolView {
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    font-weight: bold;
    background-color: #4088bd;
    color: white;

}

.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 2fr));
    gap: 20px;
}

.status-grid-item {
    background-color: #7fc7fc17;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.status-grid-item i {
    font-size: 24px;
    color: #28a745;
    /* Color inicial del ícono */
    margin-right: 10px;
    /* Espacio entre ícono y número */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.status-grid-item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.status-amount {
    font-size: 24px;
    font-weight: bold;
    color: #3d4451;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.status-description {
    font-size: 14px;
    color: #98a6ad;
    margin-top: 5px;
}

/* Colores personalizados para cada ícono */
.status-grid-item:nth-child(1) i {
    color: #28a745;
    /* Verde para Activos */
}

.status-grid-item:nth-child(2) i {
    color: #f44336;
    /* Rojo para Inactivos */
}

.status-grid-item:nth-child(3) i {
    color: #ffc107;
    /* Amarillo para Mantenimiento */
}

.status-grid-item:nth-child(4) i {
    color: #4088BD;
    /* Azul para En Ruta */
}

.ItemIco {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1024px) {
    .status-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(50%, 2fr));
        gap: 20px;
    }
}

@media (max-width: 768px) {

    .status-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(80%, 2fr));
        gap: 20px;
    }
}



.custom-linkHome {
    color: #555;
    /* Color del enlace normal */
    text-decoration: none;
    /* Quitar subrayado */
    font-weight: bold;
    /* Hacer el texto en negrita */
}

.custom-linkHome:visited {
    color: #555;
    /* Color del enlace visitado */
}

.custom-linkHome i {
    margin-right: 5px;
    /* Espacio entre el icono y el texto */
    color: #555;
    /* Color del icono */
}

/* Cambia el color al pasar el ratón por encima */
.custom-linkHome:hover {
    color: #555;
    /* Color al pasar el mouse */
    text-decoration: none;
    /* Subrayado al pasar el mouse */
}

.custom-linkHome i:hover {
    color: #555;
    /* Color al pasar el mouse */
}

.link-plain {
    color: black;
    /* El color que quieres para el texto */
    text-decoration: none;
    /* Elimina el subrayado */
}

.link-plain:visited {
    color: black;
    /* Color cuando el enlace ya ha sido visitado */
}

.link-plain:hover {
    color: black;
    /* Color cuando el mouse está sobre el enlace */
    text-decoration: none;
    /* Asegura que no aparezca subrayado en hover */
}

.link-plain:active {
    color: black;
    /* Color cuando se hace clic en el enlace */
    text-decoration: none;
    /* Asegura que no haya subrayado al hacer clic */
}

.payment-icons i {
    font-size: 30px;
    /* Ajusta el tamaño de los iconos */
    color: #4088bd7a;
    /* Color de los iconos */
    margin-right: 15px;
    /* Añade espacio a la derecha de cada icono */
}

.payment-icons i:last-child {
    margin-right: 0;
    /* Elimina el margen derecho del último ícono */
}

.payment-icons i:hover {
    color: #4088BD;
    /* Cambia el color al pasar el ratón por encima */
}



.rz-accordion {
    box-sizing: border-box;
    border-radius: var(--rz-accordion-border-radius);
    /* box-shadow: var(--rz-accordion-shadow); */
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}

.RutI-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
}

.RutI-row {

    justify-content: space-between;
    width: 100%;
    margin-bottom: 15px;
}

.RutI-row-center {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 15px;
}

.RutI-circle {
    border: 2px solid #4088BD;
    border-radius: 50px;
    padding: 10px;
    text-align: center;
    width: 100%;
}

.docdriver {
    display: grid;
    grid-template-columns: 30% 67%;
    gap: 20px;
    /* Espacio entre columnas, puedes ajustarlo según tus necesidades */
}

@media (max-width: 768px) {
    .docdriver {
        grid-template-columns: 1fr;
        /* En pantallas pequeñas (celulares) será una sola columna */
    }
}

/* Encabezado */
.FacItruck-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Dos columnas, cada una ocupa el 50% del ancho */
    gap: 5px;
}

.FacItruck-header p:nth-child(odd) {
    justify-self: start;
    /* Alinea a la izquierda */
}

.FacItruck-header p:nth-child(even) {
    justify-self: end;
    /* Alinea a la derecha */
}


/* Ajuste para pantallas pequeñas */
@media (max-width: 768px) {
    .FacItruck-header {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

/* Tabla de items */
.FacItruck-items {
    margin-top: 20px;
}

.FacItruck-table-responsive {
    width: 100%;
    overflow-x: auto;
}

.FacItruck-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    border-radius: 10px 10px 0 0;
    /* Bordes superiores redondeados */
    overflow: hidden;
    /* Para que el contenido no sobresalga de los bordes redondeados */
}

.FacItruck-table thead {
    background-color: #504D4D;
    color: #ffffff;
}

.FacItruck-table th:first-child {
    border-top-left-radius: 10px;
    /* Esquina superior izquierda */
}

.FacItruck-table th:last-child {
    border-top-right-radius: 10px;
    /* Esquina superior derecha */
}

.FacItruck-table th,
.FacItruck-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
    white-space: nowrap;
    /* Evitar que el texto se corte */
}

.FacItruck-table th {
    font-weight: 500;
}

.FacItruck-table tbody tr:hover {
    background-color: #f3f4f6;
}

/* Ocultar columnas menos importantes en pantallas pequeñas */
@media (max-width: 768px) {

    .FacItruck-col-precio,
    .FacItruck-col-descuento {
        display: none;
    }

    .FacItruck-table {
        min-width: auto;
        /* Permitir que la tabla se ajuste al ancho disponible */
    }
}

/* Totales y Información Adicional */
.FacItruck-summary {
    display: grid;
    grid-template-columns: 30% 30% 1fr;
    gap: 30px;
    margin-top: 20px;
}

/* Ajuste para pantallas más pequeñas (móviles) */
@media (max-width: 768px) {
    .FacItruck-summary {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}


.FacItruck-additional-info2 {
    display: flex;
    flex-direction: column;
    /* Asegura que los elementos se muestren en columnas (uno debajo de otro) */
    gap: 10px;
    /* Espacio entre los elementos */
    margin-top: 0px;
    /* Margen superior opcional */
}

.FacItruck-additional-info {
    display: flex;
    flex-direction: column;
    /* Asegura que los elementos se muestren en columnas (uno debajo de otro) */
    gap: 10px;
    /* Espacio entre los elementos */
    margin-top: 20px;
    /* Margen superior opcional */
}

.FacItruck-additional-info p {
    margin: 0;
}

.FacItruck-additional-info a {
    color: #4088BD;
    /* Color del enlace */
    text-decoration: none;
}

.FacItruck-additional-info a:hover {
    text-decoration: underline;
    /* Subraya el enlace al pasar el mouse */
}



.FacItruck-totals table {
    width: 100%;
}

.FacItruck-totals td {
    padding: 8px 0;
    font-size: 14px;
}

.FacItruck-totals td:first-child {
    text-align: left;
}

.FacItruck-totals td:last-child {
    text-align: right;
}

.FacItruck-total-row td {
    font-size: 16px;
    font-weight: 700;
    border-top: 2px solid #e5e7eb;
    padding-top: 10px;
}

/* Pie de página */
.FacItruck-footer {
    text-align: center;
    margin-top: 40px;
    font-size: 14px;
    color: #6b7280;
}

.FacItruck-footer a {
    color: #3b82f6;
    text-decoration: none;
}

.FacItruck-footer a:hover {
    text-decoration: underline;
}

/* Responsividad */
@media (max-width: 768px) {

    .FacItruck-company-info,
    .FacItruck-invoice-info,
    .FacItruck-additional-info,
    .FacItruck-totals {
        width: 100%;
    }

    .FacItruck-invoice-info h2,
    .FacItruck-invoice-info p {
        text-align: left;
    }

    .FacItruck-summary {
        flex-direction: column;
    }

    .FacItruck-additional-info {
        margin-bottom: 20px;
    }
}

.espacioCardFixbuton {
    margin-bottom: 50px;
}

@media (max-width: 768px) {
    .espacioCardFixbuton {
        margin-bottom: 60px;
    }
}

.fixed-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Barra ocupa todo el ancho de la pantalla */
    background-color: #4088BD;
    /* Color de fondo */
    padding: 15px;
    text-align: center;
    border-top-left-radius: 10px;
    Z-INDEX: 9;
}

.save-button {
    background-color: #fff;
    /* Color de fondo del botón */
    color: #4088BD;
    /* Color del texto */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.save-button:hover {
    background-color: #e5e7eb;
    /* Cambia color en hover */
}

.save-button i {
    margin-left: 10px;
    animation: moveRight 1s infinite linear;
    /* Animación continua */
}

.save-button:hover i {
    animation-play-state: paused;
    /* Pausa la animación en hover */
}

.FacItruck-totals {
    margin-top: 20px;
    width: 100%;
}

.FacItruck-totals-header {
    background-color: #4088BD;
    /* Color de fondo */
    color: white;
    /* Color del texto */
    font-size: 18px;
    padding: 10px;
    text-align: center;
    border-radius: 10px 10px 0 0;
    /* Bordes redondeados en la parte superior */
}

.FacItruck-total-row td {
    font-weight: bold;
    padding-top: 10px;
    border-top: 2px solid #e5e7eb;
}

@media (max-width: 1024px) {
    .FacItruck-summary {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-top: 20px;
    }
}




/* Estilos generales */
body.modalim-modal-open {
    overflow: hidden;
}

/* Contenedor de la imagen */
.modalim-image-container {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: auto;
}

/* Estilos para el overlay */
.modalim-image-overlay {
    position: relative;
    display: inline-block;
    width: 100%;
    cursor: zoom-in;
}

/* Imagen inicial */
.modalim-image-overlay img {
    width: 100%;
    display: block;
    border-radius: 8px;
}

/* Fondo oscuro sobre la imagen */
.modalim-image-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Fondo oscuro semitransparente */
    border-radius: 8px;
    pointer-events: none;
    /* Permite que los clics pasen a través del overlay */
}

/* Ícono de zoom */
.modalim-zoom-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    /* Tamaño del ícono */
    color: #fff;
    pointer-events: none;
}

/* Ajuste para el ícono de Font Awesome */
.modalim-zoom-icon i {
    font-size: 50px;
}

/* Estilos para el modal */
.modalim-modal {
    display: none;
    /* Oculto por defecto */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 98%);
    /* Fondo negro semitransparente */
    overflow: hidden;
    /* Oculta el scroll */
}

/* Barra de herramientas */
.modalim-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centra los controles horizontalmente */
    z-index: 1001;
}

/* Botón de cierre */
.modalim-close {
    position: absolute;
    top: 8px;
    right: 29px;
    background-color: #4088BD;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilos para los controles de zoom */
.modalim-zoom-controls {
    display: flex;
    gap: 10px;
}

.modalim-zoom-controls button {
    background-color: #4088BD;
    /* Color del botón */
    border: none;
    /* Sin bordes */
    color: #fff;
    /* Color del texto en blanco */
    font-size: 1.5rem;
    /* Tamaño de la fuente */
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 5px;
}

.modalim-zoom-controls button:hover {
    background-color: #66a9de;
}

/* Contenedor de la imagen dentro del modal */
.modalim-modal-content-container {
    width: 100%;
    height: calc(100% - 60px);
    /* Resta la altura de la barra de herramientas */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-top: 60px;
    /* Evita que la imagen se superponga con la barra */
}

/* Imagen dentro del modal */
.modalim-modal-content {
    max-width: 100%;
    max-height: 100%;
    cursor: grab;
    /* Indica que se puede arrastrar */
    transition: transform 0.25s ease;
    /* Suaviza el zoom */
    border-radius: 8px;
}

/* Cursor durante el arrastre */
.modalim-modal-content:active {
    cursor: grabbing;
}

/* Estilos responsivos */
@media (max-width: 600px) {

    /* En dispositivos móviles */
    .modalim-toolbar {
        justify-content: space-between;
        /* Distribuye espacio entre los elementos */
        padding: 0 10px;
    }

    .modalim-close {
        position: static;
        order: 2;
    }

    .modalim-zoom-controls {
        order: 1;
    }
}


/* Contenedor principal simula un fieldset */
.custom-fieldset {
    border: 2px solid #cccccc6e;
    border-radius: 10px;
    padding: 15px;
    position: relative;
    margin-bottom: 20px;
    padding-top: 30px;
    /* Espacio para que el título se superponga */
}

/* Encabezado simula el legend */
.custom-legend {
    position: absolute;
    top: -15px;
    /* Levanta el legend simulado sobre el borde */
    left: 20px;
    background-color: white;
    padding: 0 10px;
    /* Espacio alrededor del texto para superponer sobre la línea */
    display: flex;
    align-items: center;
    width: calc(100% - 40px);
    /* Asegura que el botón esté alineado a la derecha */
    z-index: 1;
}

/* Título del legend */
.legend-title {
    font-weight: bold;
    font-size: 16px;
    z-index: 1;
}

/* Línea entre el título y el botón */
.legend-line {
    flex-grow: 1;
    height: 1px;
    background-color: #ccc;
    margin: 0 10px;
    /* Espaciado entre el título y el botón */
}

/* Botón de edición */
.edit-button {
    background-color: #34A853;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icono dentro del botón */
.edit-button i {
    font-size: 1.2em;
}

/* Efecto hover en el botón */
.edit-button:hover {
    background-color: #34A853;
}


/* Botón de edición */
.edit-button2 {
    background-color: #e87608;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icono dentro del botón */
.edit-button2 i {
    font-size: 1.2em;
}

/* Efecto hover en el botón */
.edit-button2:hover {
    background-color: #e87608;
}

/* Contenido dentro del fieldset */
.fieldset-content {
    padding-top: 10px;
}

/* Estilos para las etiquetas dentro del contenido */
.fieldset-content div {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.fieldset-content div strong {
    margin-right: 5px;
}

/* Icono de edición junto al teléfono */
.edit-icon {
    margin-left: 10px;
    color: #4088BD;
    text-decoration: none;
    cursor: pointer;
}

.edit-icon i {
    font-size: 16px;
}

.edit-icon:hover {
    color: #4088bd90;
}

/* Estilos responsivos */
@media (max-width: 600px) {
    .custom-legend {
        flex-wrap: wrap;
    }

    .legend-title {
        margin-bottom: 5px;
    }

    .edit-button {
        margin-top: 5px;
    }

    .fieldset-content div {
        flex-direction: column;
        align-items: flex-start;
    }

    .edit-icon {
        margin-left: 0;
        margin-top: 5px;
    }
}

.form-group-custom {
    padding: 7px;
    /* border: 1px solid #dcdcdc; */
    border-radius: 4px;
    /* display: inline-block; */
    width: 95%;
    /* margin-bottom: 10px; */
    /* margin-top: 20px; */
}

.form-group-custom label {
    display: block;
    font-size: 14px;
    color: #999999;
    margin-bottom: 5px;
}

.form-control-custom {
    width: 100%;
    padding: 8px;
    font-size: 16px;
    color: #333333;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    box-sizing: border-box;
}

.switch-containerBorde {
    padding: 0.5rem;
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
}

.switch-containerTow {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.zoom-controls {
    display: flex;
    justify-content: flex-end;
}

.zoom-btn {
    background-color: #4088BD;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}

.zoom-btn:hover {
    background-color: #346a8c;
}


.FacRepor-container {
    border: 1px solid #919090;
    padding: 10px;
}

.btnfac {
    background-color: #e7650d !important;
}

.btnDEsc {
    background-color: #ffb71c !important;
}

.FacRepor-header {
    background-color: #4088BD;
    padding: 20px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.FacRepor-logo {
    width: 100px;
}

.FacRepor-invoice-title {
    font-size: 36px;
    font-weight: bold;
}

.FacRepor-invoice-details {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.FacRepor-invoice-details div {
    margin-bottom: 10px;
}

.FacRepor-invoice-details p {
    margin: 0;
    font-size: 14px;
}

.FacRepor-invoice-number {
    font-size: 14px;
    background-color: #4088BD;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
}

.FacRepor-table-container {
    margin-top: 20px;
}

.FacRepor-summary {
    margin-top: 20px;
    justify-content: space-between;
    display: grid;
    grid-template-columns: 70% 30%;
    /* Primera columna al 70%, segunda al 30% */
}



.FacRepor-footer {
    margin-top: 30px;
    text-align: center;
    font-size: 12px;
    color: #777;
}

.FacRepor-footer a {
    color: #00385c;
    text-decoration: none;
}

/* Botones flotantes */
.FacRepor-floating-buttons {
    position: fixed;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.FacRepor-button {
    background-color: #00385c;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.FacRepor-button:hover {
    background-color: #002d4a;
}

.FacItruck-totals-headertow {
    background-color: #4088BD;
    /* Color de fondo */
    color: white;
    /* Color del texto */
    font-size: 18px;
    padding: 10px;
    text-align: center;
}

.FacItruck-total-row td {
    font-weight: bold;
    padding-top: 10px;
    border-top: 2px solid #e5e7eb;
}

.invoice-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    background-color: #f9f9f9;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
    color: #333;
}

.invoice-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.invoice-company {
    text-align: left;
}

.invoice-company h2 {
    font-size: 24px;
    margin: 0;
}

.invoice-info p {
    margin: 5px 0;
}

.invoice-client {
    padding: 10px 0;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    padding: 20px;
}

.invoice-client h3 {
    margin: 0;
    font-size: 18px;
}

.invoice-items table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.invoice-items th,
.invoice-items td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
}

.invoice-items th {
    background-color: #f2f2f2;
}

.invoice-summary {
    text-align: right;
    margin-bottom: 20px;
}

.invoice-summary p {
    margin: 5px 0;
    font-size: 16px;
}

.invoice-footer {
    text-align: center;
    font-size: 12px;
    color: #666;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.invoice-status {
    padding: 5px 10px;
    border-radius: 5px;
}

.invoice-status.paid {
    background-color: #4CAF50;
    color: white;
}

.invoice-status.pending {
    background-color: #FFC107;
    color: white;
}

.invoice-status.cancelled {
    background-color: #F44336;
    color: white;
}

.TituloCompnay {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    margin: 0 15px;
    display: inline-flex;
    align-items: center;
}

.beta-badge {
    top: 16%;
    left: 13%;
    background-color: #ff00009c;
    color: #fff;
    font-size: 1em;
    /* width: 40%; */
    font-weight: bold;
    padding: 5px 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* border-radius: 3px; */
    /* transform: rotate(45deg); */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}


.EfficContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.EfficFolder,
.EfficFile {
    width: 100px;
    height: 140px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    position: relative;
}

.EfficFolder:hover,
.EfficFile:hover {
    background-color: #e0e0e0;
}

.EfficFolderIcon,
.EfficFileIcon {
    font-size: 40px;
    margin-bottom: 10px;
    color: #4088BD;
    cursor: pointer;
}

.EfficFolderName,
.EfficFileName {
    border-top: 1px solid #ddd;
    font-size: 1em;
    color: #000000;
    /* background-color: #4088BD; */
    /* border-radius: 12px; */
    padding: 5px 10px;
    /* display: inline-block; */
    font-weight: 500;
    font-family: Arial, sans-serif;
}

.DOC-button-delete {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    background-color: red;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.DOC-button-delete:hover {
    background-color: darkred;
}

.EfficBackButton {
    margin-bottom: 20px;
    background-color: #4088BD;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: block;
}

.EfficBackButton:hover {
    background-color: #0056b3;
}

.modal-reporte-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden;
    /* Ocultar por defecto */
    opacity: 0;
    /* Transición suave */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-reporte-overlay.show {
    visibility: visible;
    /* Mostrar cuando la clase "show" esté presente */
    opacity: 1;
}

.modal-reporte-overlay.hide {
    visibility: hidden;
    /* Ocultar cuando la clase "hide" esté presente */
    opacity: 0;
}

.modal-reporte {
    background-color: #ffffff;
    width: 420px;
    max-width: calc(100% - 32px);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    position: relative;
    border-bottom: 4px solid #4088BD;
}

.modal-reporte .ModalDemo-header {
    padding: 16px 20px;
}

.modal-reporte .ModalDemo-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.modal-divider {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 0 -20px;
}

.report-filters {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.report-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.report-filter-group label {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #4a5568;
}

.report-filter-group select {
    width: 100%;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.95rem;
    color: #2d3748;
    background-color: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.report-filter-group select:focus {
    outline: none;
    border-color: #4088BD;
    box-shadow: 0 0 0 2px rgba(64, 136, 189, 0.2);
}

.date-range-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.report-actions {
    display: flex;
    justify-content: center;
}

.report-actions .reporte-button {
    max-width: 260px;
}

.report-filter-group ::deep(.rz-inputtext) {
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.report-filter-group ::deep(.rz-inputtext:focus) {
    border-color: #4088BD;
    box-shadow: 0 0 0 2px rgba(64, 136, 189, 0.2);
}

@media (max-width: 576px) {
    .modal-reporte {
        width: 100%;
        border-radius: 12px;
    }

    .modal-reporte .ModalDemo-header {
        padding: 14px 16px;
    }

    .modal-reporte .ModalDemo-body {
        padding: 16px;
    }

    .modal-divider {
        margin: 0 -16px;
    }

    .report-actions {
        justify-content: stretch;
    }

    .report-actions .reporte-button {
        width: 100%;
        max-width: none;
    }

    .date-range-filter {
        grid-template-columns: 1fr;
    }
}

.modal-reporte-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.modal-close-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    color: #333;
}

.modal-close-button:hover {
    color: red;
}

.modal-reporte-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* Modal específico para la gestión de empresas del usuario */
.CompanyModal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.CompanyModal-content {
    background-color: white;
    width: 40%;
    max-width: 600px;
    max-height: 90vh;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    border-bottom: 4px solid #4088BD;
    display: flex;
    flex-direction: column;
}

.CompanyModal-header {
    background-color: #4088BD;
    padding: 15px;
    color: white;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.CompanyModal-close {
    background: none;
    border: none;
    font-size: 34px;
    cursor: pointer;
    color: white;
    font-weight: 700;
}

.CompanyModal-body {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
    max-height: calc(90vh - 80px);
}

@media (max-width: 768px) {
    .CompanyModal-content {
        width: 90%;
    }
}


.rz-selectable tbody tr.rz-data-row.rz-state-highlight .rz-cell-data {
    color: #000000 !important;
    font-weight: 600 !important
}

.rz-selectable tbody tr.rz-data-row.rz-state-highlight>td:not(.rz-frozen-cell) {
    background-color: rgb(64 210 90 / 12%) !important;
    color: black !important;
}

.rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start,
.rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-end,
.rz-form-field.rz-variant-flat .rz-form-field-content .rz-form-field-start,
.rz-form-field.rz-variant-flat .rz-form-field-content .rz-form-field-end {
    padding-top: 0rem !important;
}


.DOC-search-container {
    position: relative;
    max-width: 300px;
    margin: 0 auto 1rem;
}

.DOC-search-container i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
}

.DOC-search {
    width: 100%;
    padding: 8px 8px 8px 32px;
    border: 1px solid #ccc;
    border-radius: 8px;
}


.iva-quarter-selector {
    display: flex;
    justify-content: center;
    padding-top: 10px;
    gap: 10px;
}

.quarter-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    background-color: #e0e0e0;
    color: black;
}

.quarter-btn.active {
    background-color: #4088BD;
    color: white;
}

.iva-header {
    display: flex;
    /*    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;*/
}

.iva-header-title {
    font-weight: bold;
}

.iva-amount {
    font-size: 24px;
    color: #4088BD;
}


.edit-button3 {
    background-color: #4088BD;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iva-quarter-selector {
    display: flex;
    justify-content: center;
    padding-top: 10px;
    gap: 10px;
}

.quarter-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    background-color: #e0e0e0;
    color: black;
}

.quarter-btn.active {
    background-color: #4088BD;
    color: white;
}

.iva-overview {
    display: flex;
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
}

.iva-overview>div {
    flex: 1;

}

.iva-overview>div:not(:last-child) {
    /*   border-right: 1px solid #e0e0e0;*/
}

.iva-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.iva-header-title {
    font-weight: bold;
}

.iva-amount {
    font-size: 24px;
    color: #4088BD;
}

.iva-summary-item {
    display: flex;
    align-items: center;
}


.modal-email-sender {
    max-width: 1100px;
    width: 95%;
}

.invoice-email-modal-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
}

.invoice-email-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-right: 1px solid #e0e0e0;
    padding-right: 16px;
}

.invoice-email-composer {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.recipient-group label,
.template-selector label,
.email-template-header label,
.email-preview-wrapper label {
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}

.template-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.template-selector-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #666;
}

.template-switch {
    --rz-switch-background-on: #4088bd;
    --rz-switch-border-on: #4088bd;
}

.tag-input-container {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 5px;
    min-height: 40px;
    background: #fff;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tag {
    background-color: #4088bd;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    font-size: 13px;
}

.tag-secondary {
    background-color: #6c757d;
}

.remove-tag {
    margin-left: 8px;
    cursor: pointer;
    font-weight: bold;
}

.recipient-group input,
.template-selector input {
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 5px;
    font-size: 14px;
    min-width: 120px;
}

.template-helper {
    color: #666;
    font-size: 12px;
}

.email-editor-wrapper {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.email-editor-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.email-preview-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.email-preview {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 16px;
    background: #f8f9fa;
    max-height: 320px;
    overflow: auto;
}

.invoice-email-actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.email-subject-preview {
    color: #666;
    font-size: 12px;
}

@media (max-width: 992px) {
    .invoice-email-modal-grid {
        grid-template-columns: 1fr;
    }

    .invoice-email-sidebar {
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        padding-right: 0;
        padding-bottom: 16px;
    }
}

.invoice-email-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 1100;
    animation: invoice-email-fade-in 150ms ease-in;
}

.invoice-email-modal {
    background-color: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.25);
    max-width: 1100px;
    width: 100%;
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: invoice-email-slide-up 200ms ease-out;
}

.invoice-email-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #f1f5f9 0%, #ffffff 60%);
}

.invoice-email-modal__header h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: #0f172a;
}

.invoice-email-modal__close {
    background: none;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 150ms ease, transform 150ms ease;
}

.invoice-email-modal__close:hover,
.invoice-email-modal__close:focus {
    color: #0f172a;
    transform: scale(1.05);
}

.invoice-email-modal__body {
    padding: 1.5rem 1.75rem 1.75rem;
    overflow: auto;
}

.invoice-email-modal__body::-webkit-scrollbar {
    width: 10px;
}

.invoice-email-modal__body::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 999px;
}

.invoice-email-modal__body::-webkit-scrollbar-thumb {
    background: #cbd5f5;
    border-radius: 999px;
}

@keyframes invoice-email-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes invoice-email-slide-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

@media (max-width: 992px) {
    .invoice-email-modal {
        max-width: 95vw;
    }

    .invoice-email-modal__body {
        padding: 1.25rem;
    }
}

@media (max-width: 768px) {
    .invoice-email-modal {
        border-radius: 16px;
    }

    .invoice-email-modal__header {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 1rem 1.25rem;
    }

    .invoice-email-modal__header h2 {
        font-size: 1.1rem;
    }

    .invoice-email-modal__body {
        padding: 1rem 1.25rem 1.5rem;
    }
}

@media (max-width: 576px) {
    .invoice-email-modal {
        max-height: calc(100vh - 1.5rem);
    }
}


.email-dialog-toolbar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
}

.email-dialog-toolbar .rz-button {
    white-space: nowrap;
}

.email-dialog-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    color: var(--rz-text-tertiary-color, #6b7280);
    text-align: center;
}

.email-dialog-grid .rz-button {
    min-width: 100px;
}

.email-stats-card.clickable {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.email-stats-card.clickable:hover,
.email-stats-card.clickable:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
    outline: none;
}

.email-stats-card.clickable.warning-card:hover,
.email-stats-card.clickable.warning-card:focus {
    box-shadow: 0 8px 18px rgba(255, 152, 0, 0.25);
}

.email-dialog-content {
    width: 95vw;
    max-width: 640px;
    margin: 0 auto;
}

.email-dialog-content--wide {
    max-width: 720px;
}

.email-dialog-header {
    margin-bottom: 1rem;
}

.email-dialog-header h3 {
    margin-bottom: 0.25rem;
}

.email-dialog-grid {
    margin-bottom: 1rem;
}

.email-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.email-missing-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.email-missing-row {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(240px, 1.5fr);
    align-items: center;
    gap: 1rem;
}

.email-missing-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.email-missing-info span {
    color: var(--rz-text-tertiary-color, #6b7280);
    font-size: 0.85rem;
}

.email-dialog-error {
    margin-top: 0.5rem;
    color: var(--rz-danger-color, #d32f2f);
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .email-missing-row {
        grid-template-columns: 1fr;
    }
}

.email-editor-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.email-editor-fields {
    flex: 1 1 60%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.email-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.email-template-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0.5rem;
    border-radius: 10px;
    background: #f1f5ff;
    border: 1px solid #dbeafe;
}

.email-template-open-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    background: #e0ecff;
    border: 1px solid #c7d2fe;
    color: #1d4ed8;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.email-template-open-button:hover,
.email-template-open-button:focus {
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.15);
    transform: translateY(-1px);
    outline: none;
}

.email-template-toggle-hint {
    color: var(--rz-text-tertiary-color, #6b7280);
    font-size: 0.85rem;
}

.email-editor-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.email-editor-hint {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--rz-text-tertiary-color, #6b7280);
}

.email-body-field .rz-field-label {
    display: none;
}

.email-template-hints-panel {
    flex: 1 1 40%;
    background: var(--rz-panel-background, #ffffff);
    border: 1px solid var(--rz-border-color, #d1d5db);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.email-template-hints-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.email-template-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(59, 130, 246, 0.12);
    color: rgb(37, 99, 235);
    flex-shrink: 0;
}

.email-template-description {
    margin: 0.25rem 0 0;
    color: var(--rz-text-tertiary-color, #6b7280);
    font-size: 0.85rem;
}

.email-template-token-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.email-template-token {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    min-width: 200px;
    background: #f5f3ff;
    border: 1px solid #d8d4f2;
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
    color: #4338ca;
}

.email-template-token:hover,
.email-template-token:focus {
    background: #ebe8ff;
    border-color: #c7d2fe;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.12);
    transform: translateY(-1px);
    outline: none;
}

.email-template-token .token-description {
    font-weight: 600;
    font-size: 0.9rem;
}

.email-template-token .token-key {
    font-family: "Fira Code", "Cascadia Code", monospace;
    font-size: 0.8rem;
    color: #312e81;
}

.email-template-hints-footer {
    margin-top: auto;
    color: var(--rz-text-tertiary-color, #6b7280);
    font-size: 0.8rem;
}

.email-token-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    z-index: 1100;
    padding: 1.25rem;
}

.email-token-modal {
    background: #ffffff;
    border-radius: 16px 0 0 16px;
    box-shadow: -6px 0 32px rgba(15, 23, 42, 0.16);
    width: min(440px, 100%);
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slide-in-right 0.25s ease-out;
}

.email-token-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--rz-border-color, #e5e7eb);
}

.email-token-modal-body {
    padding: 1rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
}

.email-token-modal-close {
    background: none;
    border: none;
    color: var(--rz-text-tertiary-color, #6b7280);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.25rem;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.email-token-modal-close:hover,
.email-token-modal-close:focus {
    background: rgba(59, 130, 246, 0.1);
    color: rgb(37, 99, 235);
    outline: none;
}

@keyframes slide-in-right {
    from {
        transform: translateX(30px);
        opacity: 0;
    }

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

/* Certificado digital */
.certificate-section {
    max-width: 1024px;
    margin: 0 auto;
    padding: 24px 0 12px;
}

.certificate-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.certificate-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #5a6a85;
    font-size: 12px;
    margin: 0 0 6px 0;
}

.certificate-title {
    margin: 0;
    font-size: 26px;
    color: #0f2b46;
}

.certificate-subtitle {
    margin: 6px 0 0 0;
    color: #4a5568;
    max-width: 620px;
}

.certificate-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
}

.certificate-badge i {
    font-size: 14px;
}

.badge-success {
    background: linear-gradient(135deg, #e8f8ee 0%, #f3fbf6 100%);
    color: #1e7a3e;
    border: 1px solid #b8e1c4;
}

.badge-warning {
    background: linear-gradient(135deg, #fff3d4 0%, #fff8e5 100%);
    color: #a36800;
    border: 1px solid #f4cd84;
}

.certificate-card {
    background: #ffffff;
    border: 1px solid #dbe4ef;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 10px 26px rgba(31, 44, 61, 0.07);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.certificate-card-success {
    background: #f4fbf6;
    border-color: #b7e2c4;
    border-left: 4px solid #2f8a4f;
}

.certificate-card-info {
    background: #f8fbff;
    border-color: #cde5ff;
}

.certificate-card-upload {
    background: linear-gradient(180deg, #f7fbff 0%, #fefefe 100%);
    border: 1px dashed #c7ddf5;
}

.certificate-card-guides {
    border-left: 4px solid #4088BD;
    box-shadow: 0 14px 32px rgba(64, 136, 189, 0.08);
}

.certificate-card-body {
    display: flex;
    align-items: center;
    gap: 12px;
}

.certificate-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2f7;
    color: #1b4b76;
    font-size: 20px;
}

.certificate-icon.success {
    background: #e4f6ea;
    color: #2f8a4f;
    box-shadow: 0 8px 16px rgba(47, 138, 79, 0.15);
}

.certificate-card-title {
    font-weight: 700;
    font-size: 16px;
    margin: 0;
    color: #1f2c3d;
}

.certificate-card-text {
    margin: 4px 0 0 0;
    color: #4a5568;
    font-size: 14px;
}

.certificate-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.certificate-action {
    border-radius: 10px;
    padding: 10px 14px;
}

.certificate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.certificate-dropzone {
    min-height: 190px;
    align-items: flex-start;
    padding: 24px;
    gap: 10px;
    text-align: center;
    border: 1px dashed #7fb1d8;
    background: #f6fbff;
    border-radius: 14px;
    width: 85% !important;
}

.certificate-dropzone-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9f3fc;
    color: #275a83;
    font-size: 20px;
    box-shadow: inset 0 0 0 1px rgba(64, 136, 189, 0.18);
}

.certificate-dropzone-hint {
    color: #6b7280;
    font-size: 13px;
}

.certificate-primary-btn {
    background: #4088BD;
    color: #ffffff;
    border: 1px solid #4088BD;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(64, 136, 189, 0.18);
    transition: all 0.2s ease;
}

.certificate-primary-btn:hover {
    background: #366fa0;
    border-color: #366fa0;
}

.certificate-file-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #f7faff;
    border: 1px solid #d7e8f5;
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(64, 136, 189, 0.08);
}

.certificate-file-name {
    flex: 1;
    color: #1f2c3d;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.certificate-remove-btn {
    border: none;
    background: transparent;
    color: #c0392b;
    font-size: 16px;
    cursor: pointer;
}

.certificate-tips {
    margin: 0;
    padding-left: 18px;
    color: #4a5568;
    display: grid;
    gap: 6px;
}

@media (max-width: 1100px) {
    .email-editor-layout {
        flex-direction: column;
    }

    .email-template-hints-panel {
        position: static;
        width: 100%;
        max-height: none;
        box-shadow: none;
    }

    .email-editor-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }
}


.invoice-board {
    background: #f8fafc;
    border-radius: 18px;
    padding: 1.5rem;
    color: #0f172a;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    border: 1px solid #e2e8f0;
}

.invoice-board__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.invoice-board__eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: #0ea5e9;
    font-weight: 700;
}

.invoice-board__title {
    margin: 0.1rem 0 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
}

.invoice-board__badge {
    background: #e0f2fe;
    color: #0369a1;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    font-weight: 700;
    border: 1px solid #bae6fd;
    min-width: 150px;
    text-align: center;
}

.invoice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.invoice-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.invoice-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.invoice-card--compact {
    gap: 0.5rem;
    padding: 0.9rem;
}

.invoice-card:focus,
.invoice-card:hover {
    transform: translateY(-4px);
    border-color: #bae6fd;
    box-shadow: 0 10px 25px rgba(14, 165, 233, 0.15);
    outline: none;
}

.invoice-card__head,
.invoice-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.invoice-card__summary {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.invoice-number {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.invoice-company {
    margin: 0;
    color: #0f172a;
    font-size: 1.05rem;
}

.invoice-date {
    margin: 0.1rem 0 0;
    color: #475569;
    font-size: 0.9rem;
}

.invoice-status {
    padding: 0.35rem 0.65rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: capitalize;
    align-self: flex-start;
    border: 1px solid transparent;
}

.invoice-status.status-paid {
    background: #dcfce7;
    color: #15803d;
    border-color: #bbf7d0;
}

.invoice-status.status-pending {
    background: #fefce8;
    color: #b45309;
    border-color: #fef3c7;
}

.invoice-status.status-cancelled,
.invoice-status.status-anulada {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecdd3;
}

.invoice-status.status-neutral {
    background: #f8fafc;
    color: #0f172a;
    border-color: #e2e8f0;
}

.invoice-card__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.invoice-card__body--compact {
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

.invoice-meta {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.7rem;
}

.invoice-meta--highlight {
    background: linear-gradient(135deg, #e0f2fe, #eff6ff);
    border-color: #bae6fd;
}

.invoice-meta span {
    display: block;
    color: #64748b;
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
    font-weight: 700;
}

.invoice-meta strong {
    color: #0f172a;
    font-size: 0.95rem;
    word-break: break-word;
}

.invoice-total__amount {
    font-size: 1.05rem;
    color: #0f172a;
}

.invoice-total span {
    color: #94a3b8;
    display: block;
    font-size: 0.85rem;
}

.invoice-total p {
    margin: 0.2rem 0 0;
    color: #0f172a;
    font-weight: 800;
    font-size: 1.1rem;
}

.invoice-action {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.invoice-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}

.invoice-empty {
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    color: #475569;
}

.invoice-empty h4 {
    margin: 0 0 0.35rem;
    color: #0f172a;
}

.invoice-empty__link {
    color: #0ea5e9;
    font-weight: 700;
}

@media (max-width: 768px) {
    .invoice-card__body {
        grid-template-columns: 1fr;
    }

    .invoice-card__body--compact {
        grid-template-columns: 1fr;
    }

    .invoice-board__badge {
        width: 100%;
    }

    .invoice-card__footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .invoice-action {
        width: 100%;
        text-align: center;
    }
}

.lds-dual-ring {
    display: inline-block;
    width: 32px;
    height: 32px;
}

.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 24px;
    height: 24px;
    margin: 4px;
    border-radius: 50%;
    border: 4px solid #0d6efd;
    border-color: #0d6efd transparent #0d6efd transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


@media (max-width: 768px) {
    .tour-inline-hint {
        position: relative;
        top: 8px;
        right: 0;
        margin-bottom: 0.75rem;
    }

    .tour-inline-hint::after {
        display: none;
    }
}
/* === Sugerencias de Google Places (autocompletador) con la estética del sistema ===
   Global: aplica a todos los campos con autocomplete (DeCA, mapa de rutas, etc.).
   z-index por debajo del menú de perfil (1100) para que no lo tape. */
.pac-container {
    z-index: 1080 !important;
    border: 1px solid #e6e9ee;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
    margin-top: 6px;
    padding: 6px;
    font-family: inherit;
    background: #fff;
    overflow: hidden;
}
.pac-item {
    border: none;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    color: #35597a;
    line-height: 1.4;
    cursor: pointer;
}
.pac-item:hover, .pac-item-selected { background: #eef3f8; }
.pac-item-query { font-size: 13px; color: #1e2a3a; font-weight: 600; }
.pac-matched { color: #4088BD; }
.pac-icon { margin-right: 8px; margin-top: 3px; }

/* Menú contextual de Radzen: NO añadir aquí reglas de z-index. Su contenedor
   real es un div.rz-tooltip con z-index 1001 INLINE, así que subir el z-index
   de .rz-context-menu no tiene efecto. Lo que debe mantenerse bajo (< 1001)
   es el z-index de las filas con hover de los .round-button: ver el bloque
   "El tooltip SIEMPRE por delante" junto a los estilos de .round-button. */

/* Aviso de nueva versión (lo pinta Itrucks.js). Una pestaña abierta no vuelve a
   pedir el documento y puede quedarse días con la versión anterior: cuando el
   servidor cambia de sello se ofrece recargar, sin hacerlo por sorpresa.
   z-index por debajo de 1001: ver el bloque "El tooltip SIEMPRE por delante". */
.it-actualizacion {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 20px;
    padding: 12px 24px;
    background: #0F172A;
    color: #fff;
    font-family: var(--font-main, 'Outfit', sans-serif);
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 -4px 16px rgb(15 23 42 / 0.25);
}
.it-actualizacion button {
    min-height: 36px;
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    background: var(--primary, #4088BD);
    color: #fff;
    font: inherit;
    cursor: pointer;
}
.it-actualizacion button:hover { filter: brightness(1.1); }


/* Acción de un módulo no contratado: se ve, pero apagada. Al pulsarla se explica qué
   módulo hace falta, en vez de esconderla y que nadie sepa que existe. */
.it-modulo-bloqueado {
    background: #e9edf2 !important;
    color: #98a2b3 !important;
    cursor: help;
}

    .it-modulo-bloqueado i {
        color: #98a2b3 !important;
    }