/*
* estilos de Covima.APP
* File include item demo only specific css only
******************************************************************************/

.app-brand {
    padding: 6px;
}

.app-brand-logo img {
    width: 80%;
}

.inline-spacing > * {
    margin: 1rem 0.50rem 0 0 !important;
}

.btn i.fa {
    margin-right: 12px;
}

.list-inline-item.disabled {
    color: #C7CDD4;
    pointer-events: none;
}

.pointer {
    cursor: pointer;
}

.toast-success {
    background-color: #9bec9b !important;
    color: #000 !important;
}

.toast-error {
    background-color: #ffe0e0 !important;
    color: #990000 !important;
}

.toast-warning {
    background-color: #feffe0 !important;
    color: #990000 !important;
}

.form-control {
    color: #333333 !important;
}

.light-style .bootstrap-select .filter-option-inner-inner {
    color: #333333 !important;
}

.form_lineas_pedido .form-control,
.form_lineas_pedido .input-group-text {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

/* Estilo para las imágenes en el carrusel */
.swiper-container {
    overflow: hidden;
}

.swiper-wrapper {
    width: 100%;
    max-width: 350px !important;
    float: left;
}

.swiper-slide img {
    width: 100%;
    max-width: 300px;
    height: auto;
    cursor: pointer;
}

.numeric-nospinner {
    padding: 7px 7px;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Estilo por defecto */
#selected_image_container {
    height: 100% !important;
}

@media screen and (min-width: 375px) and (max-width: 500px) {
    div[data-repeater-item] {
        border-bottom: double;
        margin-bottom: 20px;
    }
}

/* Aplicar estilo cuando la resolución es menor de 991px */
@media (max-width: 991px) {
    #selected_image_container {
        height: 300px !important;
    }
}

.row-align-bottom {
    display: flex;
    align-items: flex-end;
}

/*.btn-outline-dark:hover > */
.bg-primary {
    background-color: #c4d5ff !important
}

.table-noborder {
    border-collapse: collapse; /* Para hacer que las celdas se unan */
}

.table-noborder td, .table-noborder th {
    border: none;
    border-bottom: 1px solid #ddd; /* Añade una línea en la parte inferior de cada celda */
}

.table-noborder tr:last-child td {
    border-bottom: none; /* Quita la línea inferior de la última fila */
}

.dataTables_filter input, .dataTables_length select {
    font-size: 12px; /* Ajusta el tamaño de la fuente según lo necesario */
    margin: 0 4px;
}

.dataTables_filter label, .dataTables_length label {
    font-size: 12px; /* Ajusta el tamaño de la fuente según lo necesario */
}

.slider {
    -webkit-appearance: none; /* Override the default appearance */
    width: 100%; /* Full width */
    height: 15px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1;
}

/* The thumb (slider handle) - it needs to be specified for each browser */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override the default look */
    appearance: none;
    width: 20px; /* Set a specific slider handle width */
    height: 20px; /* Slider handle height */
    background: #b71e1e; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
    width: 20px; /* Set a specific slider handle width */
    height: 20px; /* Slider handle height */
    background: #b71e1e; /* Green background */
    cursor: pointer; /* Cursor on hover */
}


.badge.guarda_estado {
    border: 2px solid transparent;
    margin: 1px;
    font-size: 14px;
}

.badge.disabled {
    background-color: #ccc;
    color: #888;
    cursor: not-allowed;
}

.opcion-activable:focus,
.opcion-activable.active {
    text-decoration: underline;
    border: none !important;
}

.boton-padre:focus,
.boton-padre:focus:not(:focus-visible),
.boton-padre.active {
    outline: 2px solid #000000 !important;
    outline-offset: -2px;
    text-decoration: underline;
}

.bg-pedidos-0 {
    background-color: #007bff !important; /* Nuevo */
}

.bg-pedidos-0.active {
    /*border-color: #FF0000 !important;*/ /* Nuevo */
    text-decoration: underline;
    font-size: 16px;
}

.bg-pedidos-1 {
    background-color: #02216b !important; /* Aceptado */
}

.bg-pedidos-1.active {
    /*border-color: #00ffbb !important;*/ /* Aceptado */
    text-decoration: underline;
    font-size: 16px;
}

.bg-pedidos-2 {
    background-color: #FF0000 !important; /* Incidencias */
}

.bg-pedidos-2.active {
    /*border-color: #02216b !important;*/ /* Incidencias */
    text-decoration: underline;
    font-size: 16px;
}

.bg-pedidos-3 {
    background-color: #215b02 !important; /* En proceso */
}

.bg-pedidos-3.active {
    /*border-color: #00FF00 !important;*/ /* En proceso */
    text-decoration: underline;
    font-size: 16px;
}

.bg-pedidos-4 {
    background-color: #cc00b1 !important; /* Externo */
}

.bg-pedidos-4.active {
    /*border-color: #FF0000 !important;*/ /* Externo */
    text-decoration: underline;
    font-size: 16px;
}

.bg-pedidos-5 {
    background-color: #ff7300 !important; /* Preparado */
    animation: latido 1s linear infinite;
}

.btn_productos_consumo.active {
    animation: latido_2 1s linear infinite;
}

.latido {
    animation: latido 1s linear infinite;
}

.latido2 {
    animation: latido_2 1s linear infinite;
}

@keyframes latido {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes latido_2 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

.bg-pedidos-5.active {
    /*border-color: #02216b !important;*/ /* Preparado */
    text-decoration: underline;
    font-size: 16px;
}

.bg-pedidos-6 {
    background-color: #a876d8 !important; /* Pte.Reparto */
}

.bg-pedidos-6.active {
    /*border-color: #003300 !important;*/ /* Pte.Reparto */
    text-decoration: underline;
    font-size: 16px;
}

.bg-pedidos-7 {
    background-color: #5a02af !important; /* Reparto */
}

.bg-pedidos-7.active {
    /*border-color: #003300 !important;*/ /* Reparto */
    text-decoration: underline;
    font-size: 16px;
}

.bg-pedidos-8 {
    background-color: #ffb000 !important; /* Anulado */
}

.bg-pedidos-8.active {
    /*border-color: #02216b !important;*/ /* Anulado */
    text-decoration: underline;
    font-size: 16px;
}

.bg-pedidos-9 {
    background-color: #00CC00 !important; /* Finalizado */
}

.bg-pedidos-9.active {
    /*border-color: #003300 !important;*/ /* Finalizado */
    text-decoration: underline;
    font-size: 16px;
}

.bg-pedidos-10 {
    background-color: #999999 !important; /* Entregado */
}

.bg-pedidos-10.active {
    /*border-color: #000000 !important;*/ /* Entregado */
    text-decoration: underline;
    font-size: 16px;
}


.swiper-button-next,
.swiper-button-prev {
    background-color: rgba(0, 0, 0, 0.5); /* Esto añadirá un fondo negro semitransparente */
    width: 50px; /* Cambia la anchura aquí */
    height: 50px; /* Cambia la altura aquí */
}

.swiper-button-next:after,
.swiper-button-prev:after {
    color: white; /* Esto cambiará el color de las flechas a blanco */
    font-size: 20px; /* Cambia el tamaño de las flechas aquí */
}

#lista_pedidos .list-inline {
    margin: 4px 0;
}

#lista_pedidos tr.active {
    background-color: #dbf0f9;
}

/* Define la animación */
@keyframes zoom {
    0% {
        transform: scale(1);
    }
    /* Comienza en tamaño normal */
    50% {
        transform: scale(1.2);
    }
    /* En el medio de la animación, haz zoom */
    100% {
        transform: scale(1);
    }
    /* Vuelve a tamaño normal al final */
}

/* Aplica la animación a una clase */
.zoom-effect {
    animation: zoom 1s; /* Duración de 1s */
    animation-iteration-count: infinite; /* Repetir infinitamente */
}

.layout-navbar .navbar-dropdown .dropdown-menu {
    min-width: 28rem;
}

.dz-success-mark {
    position: relative;
    display: none;
    height: auto;
    text-align: center;
    width: 160px;
    padding: 2px 4px;
}

.dz-success-mark span {
    color: #ffffff;
}

.container-icon {
    position: relative;
}

.delete-icon {
    position: relative;
    top: 6px;
    left: 6px;
    z-index: 10; /* asegurarse de que esté encima del otro contenido */
    background-color: rgba(255, 255, 255, 0.7); /* opcional: para mejor visibilidad */
    padding: 5px; /* opcional: espaciado alrededor del icono */
    cursor: pointer; /* indicar que es clickeable */
}

.offcanvas-taller {
    height: 60vh !important;
}

.tablas_pedidos_lineas .dataTables_filter {
    display: none;
}


.container_ellipsis {
    width: 100%; /* O el ancho que desees para tu DIV */
}

.line_ellipsis {
    display: inline-block;
    white-space: nowrap;
    /*overflow: hidden;*/
    text-overflow: ellipsis;
    max-width: 100%; /* Asegura que el contenido no exceda el ancho del contenedor */
    width: 100%;
}

.buttons-inline-spacing > * {
    margin: 1rem 0.375rem 0 0 !important;
}

.show_details:hover {
    text-decoration: underline;
    cursor: pointer;
}

#tabla_procesos_wrapper .group {
    cursor: pointer;
}

/* Estilo para el elemento mientras se arrastra */
.sortable-chosen {
    opacity: 0.6;
    background-color: #f0f0f0;
    border: 2px dashed #d9d9d9;
}

/* Estilo para el 'fantasma' del elemento en su posición original */
.sortable-ghost {
    opacity: 0.8;
    background-color: #e9ecef;
    border: 2px solid #dee2e6;
}

/* Estilo básico del checkbox */
.form-check-input {
    margin: 4px;
    transition: background-color 0.2s; /* Transición suave del color de fondo */
}

/* Estado intermedio: fondo verde sin check */
.form-check-input.intermediate {
    background-color: green;
}

.select_tr_producto_corte.selected {
    background-color: #b6cfec !important;
}

.fila-ejecutada {
    background-color: #d4eebd !important;
    cursor: not-allowed;
}

.fila-con-linea {
    padding: 4px;
    padding-left: 10px;
    cursor: not-allowed;
}

.fila-con-linea div {
    border-bottom: 1px solid #999999;
}

#zona_botones_tablets::after {
    content: "";
    position: absolute;
    top: 0; /* Empieza justo debajo de la zona de botones */
    left: 0;
    width: 100%;
    height: 70px; /* Ajusta la altura según la necesidad */
    background-image: linear-gradient(to bottom, #f5f5f9, rgba(245, 245, 249, 0.6), rgba(255, 255, 255, 0) 100%);
    z-index: -1; /* Asegura que el degradado esté detrás de los botones */
}

.img-cover-lock {
    background-image: url("/assets/img/illustrations/girl-verify-password-light.png");
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 80%;
}

.sorts-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #f00; /* Color de fondo */
    color: #fff; /* Color de texto */
    padding: 5px 10px; /* Espaciado interno */
    border-radius: 0 0 0 5px; /* Bordes redondeados */
    font-weight: bold; /* Negrita */
}

.button-decrement,
.button-increment {
    padding: 8px 10px;
}

.html_tr_cliente td {
    background-color: #5a789b;
    color: #ffffff;
    padding: 6px 10px;
}

.html_tr_cliente.ejecutada td {
    background-color: #607a4a;
}

#tabla_asignar_procesos > :not(caption) > * > * {
    padding: 4px 10px;
}

.select_producto_consumo_id_pedidos {
    padding: 0 !important;
}

.ts-wrapper .option .nombre_pedidos {
    font-size: 12px;
    display: block;
    color: #a0a0a0;
}

.row-anotado-sap td {
    background-color: #a3edbd !important; /* green color */
}

.row-anotado-sap td:nth-child(-n+3) {
    text-decoration: line-through;
}

.opciones-taller-arriba {
    top: 0;
    z-index: 500;
}

.opciones-taller-arriba .btn-select-lista {
    /*width: 32px;*/
    height: 34px;
    margin-right: 10px;
}

.aligned-option {
    font-family: monospace; /* Fuente de ancho fijo */
}

.marcar-todos-hechos {
    color: #ffeb3b;
    text-decoration: underline;
}

.tabla_body_card td {
    padding: 0 !important;
}

.copia_valores_cortes_hoja_entera {
    cursor: pointer;
}

.tr_pedidos_lineas.selected_view {
    background-color: #bcecb3 !important;
}

.seleccion_usuario.nowrap,
.seleccion_proceso.nowrap {
    white-space: nowrap;
}

.popover_boton {
    color: #FFFFFF !important; /* Texto blanco */
}

.popover-body {
    background-color: #ffac02 !important;
    color: #FFFFFF;
    border-radius: 10px;
    box-shadow: #33333330 -4px 8px 4px;
}
.popover.bs-popover-auto[data-popper-placement=bottom]>.popover-arrow:after {
    border-bottom-color: #ffac02 !important;
}

.boton-rebajar {
    background-color: #0ca643;
    border-color: #0ca643;
    box-shadow: 0 .125rem .25rem 0 #0ca643;

}

#sortable1, #sortable2 {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
}
#sortable1 li, #sortable2 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}
.badge.badge-notifications {
    margin: 0;
    position: relative;
    top: 0;
    -webkit-transform: translate(-50%, -30%);
    transform: translate(-50%, -30%);
}

.cliente-referencia {
    max-width: 300px; /* Ajusta este valor según tus necesidades */
    word-wrap: break-word;
    white-space: normal;
}

.productos-alb-pic {
    max-width: 300px; /* Ajusta este valor según tus necesidades */
    word-wrap: break-word;
    white-space: normal;
}

.tooltip-notas {
    white-space: preserve-breaks;
    font-size: 0.8em !important;
}
.tooltip-notas .tooltip-inner {
    max-width: fit-content !important;
    text-align: left !important;
}


.orientacion-label {
    --b: 2px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    padding: .40rem .7rem;
    border-radius: .75rem;
    border: var(--b) solid var(--bs-border-color);
    background: #ffffff; /*var(--bs-body-bg);*/
    transition: .15s;
    cursor: pointer;
}
.btn-check:checked + .orientacion-label {
    border-color: var(--bs-primary);
    /*box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);*/
}
.dibujo {
    width: 92px; height: 92px;
}
.txt {
    font: 700 9px system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans";
    fill: #6c757d; /* text-muted */
    letter-spacing: .8px;
}
.marco { stroke:#6c757d; stroke-width:2; fill:none; }
.linea { stroke:#6c757d; stroke-width:2; }