/* Defnir colores especiales*/
:root {
  --rojo-wurth: rgb(204, 0, 6);
  --rojo-wurth-tx: rgba(204, 0, 6, 0.2);
  --gris-wurth: rgb(88, 88, 90);
  --gris-wurth-tx: rgba(88, 88, 90, 0.2);
  --verde-wurth: rgb(39, 182, 1);
  --verde-wurth-tx: rgba(39, 182, 1, 0.2);
  --amarillo-wurth: rgb(255, 212, 0);
  --amarillo-wurth-tx: rgba(255, 212, 0, 0.2);
}

/* para que sin la posicion absoluta no deje espacios ni margenes que están generandose por los estilos de Dolibarr */
div.fiche {
    margin: 0px !Important;
}

body::-webkit-scrollbar {
  width: 0px; /* Oculta la barra de desplazamiento en navegadores webkit */
}

.container-master {
    color: rgb(214, 51, 55);
    width: 100vw;
    height: 100vh;
    background: blue;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 6vh 88vh 6vh;
	overflow: hidden;
}

.master-top-section {
    background: rgb(231, 231, 231);
    width: 100%;
    height: 100%;
    display: grid;
    gap: 8px;
    grid-template-columns: 20% 25% 10% 25% 20%;
}

.top-section-info-current {
    display: grid;
    grid-template-rows: 1fr 1fr;
    font-size: clamp(12px, 1.2vw, 18px);
    font-weight: bold;
}

.top-section-user-notifications {
    display: flex;
	gap: 2px;
}

.master-central-section {
    background: rgb(230, 230, 230);
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 3vw auto;
    z-index: 20;
}

.master-bottom-section {
	background:	rgb(231, 231, 231);
	width:		100%;
	height:		100%;
	display: flex;
    justify-content: space-between;
}

.left-central-section {
	width: 100%;
	height: 100%;
	background: var(--rojo-wurth);
    color: white;
	display: flex;
	flex-direction: column;
}


.right-central-section {
	/* background:	rgb(230, 230, 230); */
	/* left:	3vw; */
	width:	100%;
	height:	100%;
	overflow: auto;
}

.module-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8vw;
}

.module-title > i {
    padding: 9px;
    border: 0.1px solid var(--rojo-wurth);
    border-radius: 5px;
    font-size: 1.2vw;
}

.menu-lateral {
	display: flex;
	top: 6vh;
	left: 0;
	flex-direction: column;
	background: var(--rojo-wurth);
	padding-bottom: 50px;
	z-index: 60;
}

.menu-lateral .item .icono,
.top-master-left-section {
    width: 3vw;
    height: 6vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icono {
	font-size: 1.2em;
}

.item {
	display: flex;
	align-items: center;
	gap: 10px;
	height:		4vh;
	width:	300px;
	z-index: 50;
}

.item:hover,
.top-master-left-section:hover {
  background: rgb(214, 51, 55);
}

.item icono {
	font-size: 1.2em;
	margin-right: 10px;
	width: 100%;
}

@media screen and (max-height: 820px) {
  .fa-lg {
    font-size: unset !important;
  }
}

.bottom-section-information {
    display: flex;
    align-items: center;
}

.bottom-section-options {
    display: flex;
    gap: 20px;
    align-items: center;
	font-size: 0.8em;
}

.bitem {
	display: grid;
	text-align: center;
	width: 30px;
}

.container-product-card .product-resume {
	// background: blue;
	width: 30vw;
	min-width: 500px;
	min-height: 250px;
	display: grid;
	grid-template-rows: 35% 65%;
	cursor: pointer;
	transition: box-shadow 0.2s ease-in-out;
}

.container-product-card .product-resume:focus
, .container-product-card .product-resume:hover {
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.container-product-card .product-resume:active {
	box-shadow: 0 0 4px var(--rojo-wurth);
	transform: translateY(1px);
}


.container-product-card .product-resume .top {
	background: white;
	width: calc(100% - 20px);
	padding: 10px;
	border-bottom: 0.1px solid black;
	font-size: 1.2vw;
	color: black;
    border-radius: 10px 10px 0px 0px;
}

.container-product-card .product-resume .bottom {
	// background: blue;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.container-product-card .product-resume .bottom .left {
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	border-right: 0.1px solid black;
	border-radius: 0px 0px 0px 10px;
}

.container-product-card .product-resume .bottom .right .top,
.container-product-card .product-resume .bottom .right .bottom {
    display: contents;
}

.container-product-card .product-resume .bottom .right .top > *,
.container-product-card .product-resume .bottom .right .bottom > * {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    cursor: pointer;
}

.container-product-card .product-resume .bottom .right .bottom > *:nth-child(1),
.container-product-card .product-resume .bottom .right .bottom > *:nth-child(2) {
    border-top: 2px solid #ddd;
}

.container-product-card .product-resume .bottom .left .image {
	position: relative;
	padding: 5px;
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.container-product-card .product-resume .bottom .left .image img {
	max-width: 100%;
	max-height: calc(290px * 0.65 - 10px);
}

.container-home-home {
    width: 100%;
    height: calc(100% - 10px);
    display: grid;
    grid-template-rows: 25% 50% 25%;
    grid-gap: 10px;
    padding: 10px;
}

.container-home-top {
	background: rgb(230, 230, 230);
	width: 100%;
	height: 100%;
    overflow-x: scroll;
    display: grid;
    grid-template-columns: auto;
	grid-auto-flow: column;
	grid-gap: 10px;
}

.container-home-top::-webkit-scrollbar-thumb {
	background-color: #aaa;
	border-radius: 5px;
}

.container-home-top::-webkit-scrollbar-thumb:hover {
	background-color: #888;
}

.container-home-central {
	background: rgb(210, 210, 210);
}

.container-home-bottom {
	background: rgb(210, 210, 210);
}

.box-catalogo-home  {
    border: 0.1px solid rgb(180, 180, 180);
    background: white;
    width: 200px;
    display: grid;
    grid-template-rows: 80% 20%;
    border-radius: 10px 10px 10px 10px;
    border-bottom: 10px solid var(--rojo-wurth);
    color: black;
    height: calc(100% - 12px);
    overflow-x: scroll;
}

.img-catalogo-home {
	max-width: 100%;
	max-height: calc(22vh * .8 - 20px);
}

.label-catalogo {
    display: flex;
    justify-content: center;
    align-items: center;
	text-align: center;
}

.imagen-catalogo-home {
    display: flex;
    justify-content: center;
    align-items: center;
	// text-align: center;
}

.container-catalog {
	width: 100%;
	display: grid;
	grid-template-columns: 25vw 75vw;
	grid-gap: 10px;
	height: 100%;
	padding-left: 10px;
}

.catalog-left {
	width: 100%;
	height: 100%;
	background: white;
	color: black;
	display: grid;
    grid-template-rows: 5% 10% 85%;
	overflow: auto;
}

.catalog-right {
	width: 100%;
	height: 100%;
	max-height: 88vh;
}

.catalog-navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.catalog-current-category {
	display: flex;
	align-items: center;
    justify-content: start;
	padding-left: 10px;
}

#icon_tree
, #icon_folder {
    display: flex;
    align-items: center;
    justify-content: center;
}

ul {
    margin-left: 0px;
    padding-left: 10px;
}

.li-label {
	border-bottom: 0.1px solid black;
	padding-top: 15px;
}

.tree li {
	white-space: nowrap;
	list-style-type: none; /* elimina los puntos de lista por defecto */
	margin: 0;
	padding-left: 0px; /* establece un margen izquierdo para la lista */
	position: relative; /* establece la posición relativa para que los elementos hijos puedan ser posicionados de manera absoluta */
}

.tree {
	padding-left: 0px;
}

.catalog-tree
, .catalog-detail {
    width: calc(100% - 20px);
    height: 100%;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 0.9em;
    overflow: scroll;
}

.listprod li
, .list li {
	list-style-type: none;
    border-bottom: 0.1px solid black;
	padding-left: 0px;
	margin-left: 0px;
	padding-top: 15px;
    white-space: nowrap;
    overflow: hidden;
}


.catalogo {
	width: 100%;
	height: calc(100% - 20px);
    display: grid;
    grid-template-rows: repeat(3, 1fr);
	grid-auto-flow: column;
	grid-gap: 5px;
    overflow: scroll;
}

.box-catalogo-item {
	border: 0.1px solid rgb(180, 180, 180);
	background: white;
	width: 30vw;
	display: grid;
	grid-template-rows: 20% 80%;
	border-radius: 10px; /* redondea las esquinas superiores */
	color: var(--rojo-wurth);
}

.catalog-right .catalogo .box-catalogo-item .label {
	padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
	text-align: center;
}

.catalog-right .catalogo .box-catalogo-item .image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.catalog-right .catalogo .box-catalogo-item .image .img {
	background: darkcyan;
	max-width: 100%;
	max-height: calc(30vh * .8 - 20px);
}

.container-product-card {
	background: rgb(230, 230, 230);
    width: 100%;
    max-height: 100%;
    padding: 10px;
    height: calc(100vh - 12vh - 20px);
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-gap: 10px;
    overflow: scroll;
}



.container-catalog .container-product-panels {
	background: rgb(230, 230, 230);
	width: 100%;
	max-height: 100%;
	min-height: 100%;
	display: grid;
	grid-template-columns: repeat(4, 50%) 92% 50% 50%;
	grid-gap: 10px;
	color: black;
	overflow: auto;
}

.container-product-panels .panel-ppal {
	max-width: calc(75vw / 2);
	background: white;
	display: grid;
	grid-template-rows: 20% 10% 50% 20%;
}

.container-product-panels .panel-ppal .ref {
    background: white;
    display: flex;
    font-size: 1.5vw;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 5px 10px;
    font-weight: bold;
}

.container-product-panels .panel-ppal .data1 .dato {
    display: flex;
    font-size: 2vw;
    justify-content: space-between;
    padding: 5px 10px;
    align-items: center;
}

.panel-ppal .image {
	background: none;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: calc(75vw / 2);
	max-height: 100%;
}

.panel-ppal .image .carrusel img {
	width: calc(65vw / 2);
	height: 45vh;
}

.panel-ppal .data {
	// background: darkcyan;
	background: white;
	font-size: 2vw;
}

.panel-ppal .data .dato {
	display: flex;
	justify-content: space-between;
	padding: 5px 10px;
}

.panel-inner {
	background: white;
	max-height: 88vh;
	overflow: auto;
}

.panel-inner .header {
	display: grid;
	font-size: 2vw;
	grid-template-columns: 90% 10%;
	padding: 10px;
}

.panel-inner .banner-ref {
    background: white;
    display: flex;
    font-size: 1.5vw;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 5px 10px;
    font-weight: bold;
}

.panel-inner .body {
	display: flex;
	flex-direction: column;
	padding: 20px;
	font-size: 1.5vw;
	justify-content: stretch;
	text-align: justify;
	overflow: auto;
}

.carrusel {
	max-width: 100%;
	max-height: 100%;
}

.slick-list .draggable {
	max-width: calc(70vw / 2);
	max-height: 50vh;
}

.panel-multimedia .body .box-multimedia .url {
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgb(230, 230, 230);
	padding: 20px;
}

.panel-multimedia .body .box-multimedia .label {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.container-product-card .product-resume .bottom .right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;
    padding: 10px;
    background: white;
    border-radius: 0px 0px 10px 0px;
}

.container-product-card .product-resume .bottom .right .top .date {
    white-space: nowrap;
    font-size: 0.75em;
}

.container-clientes {
	margin: 0px 10px;
	background: grb(230, 230, 230);
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: column;
	grid-gap: 10px;
	// height: calc(100vh - 12vh - 20px);
    overflow: auto;
}


.ficha-cliente {
    display: grid;
    grid-template-columns: 90% 10%;
    width: calc(100vw / 3);
    border: 1px solid black;
    border-radius: 5px;
	background: white;
	overflow: hidden;
	color: black;
	height: calc((100vh - 12vh - 40px) / 3);
}

.grafica {
    display: inline-block;
    white-space: nowrap;
    transform: rotate(-90deg);
    transform-origin: right top;
}

.ficha-cliente .datos {
    padding: 10px;
    font-size: 2vw;
	display: grid;
	grid-template-rows: 10% 20% 20% 20% 10% 20%;
	height: calc((100vh - 12vh - 100px) / 3);
}

.ficha-cliente .datos .code-client {
	// background: red;
	overflow: hidden;
    display: flex;
    align-items: center;
    font-size: 0.9vw;
}

.ficha-cliente .datos .nom-client {
	// background: blue;
	font-size: 1.2vw;
	font-weight: bold;
	overflow: hidden;
	line-height: normal;
}

.ficha-cliente .datos .address-client {
	// background: green;
	overflow: hidden;
	font-size: 0.9vw;
    line-height: normal;
}

.ficha-cliente .datos .delivery-address-client {
	// background: green;
	overflow: hidden;
	font-size: 0.9vw;
    line-height: normal;
}

.ficha-cliente .datos .rubro-client {
	// background: green;
	overflow: hidden;
	font-size: 0.9vw;
    line-height: normal;
}

.ficha-cliente .datos .iconos {
	// background: cyan;
	font-size: 3vh;
    display: flex;
    justify-content: flex-start;
}

.ficha-cliente .datos .iconos .fa {
	color: black;
	padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.1px solid rgb(200, 200, 200);
    border-radius: 5px;
}

.container-dasboard-customer {
    background: white;
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: calc(75% - 5px) calc(25% - 5px);
    padding: 10px;
    gap: 10px;
    color: black;
}

.container-dasboard-customer .top {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 100% 0px;
    gap: 10px;
    position: relative;
}

.container-dasboard-customer.panel-open .top {
    grid-template-columns: calc(85% - 5px) calc(15% - 5px);
}

.container-dasboard-customer .top .left {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: grid;
    grid-template-rows: calc(35% - 5px) calc(65% - 5px);
    gap: 10px;
    overflow: auto;
}

.container-dasboard-customer .top .right .notes {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
	overflow: auto;
}

.container-dasboard-customer .top .right {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
	overflow: hidden;
}

.container-dasboard-customer.panel-open .top .right {
    overflow: auto;
}

.dashboard-panel-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #0093dd;
    color: white;
    border: none;
    border-radius: 6px 0 0 6px;
    width: 24px;
    height: 48px;
    cursor: pointer;
    z-index: 20;
    box-shadow: -2px 2px 5px rgba(0,0,0,0.3);
    transition: right 0.3s ease;
}

.container-dasboard-customer.panel-open .dashboard-panel-toggle {
    right: calc(15% + 5px);
}

.container-dasboard-customer .top .left .basic-gestion {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: grid;
    grid-template-columns: calc(60% - 5px) calc(40% - 5px);
    gap: 10px;
}

.container-dasboard-customer .top .left .basic-gestion .basic-data {
    background: rgb(230, 230, 230);
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    font-size: 0.9vw;
    /* width: calc(100% - 20px); */
    /* height: calc(100% - 20px); */
    align-content: flex-start;
    border: 1px solid rgb(200, 200, 200);
}

.container-dasboard-customer .top .left .basic-gestion .basic-data .customer-code
, .container-dasboard-customer .top .left .basic-gestion .basic-data .customer-name {
	height: calc(100% - 2.5px);
	width: calc(100% - 2.5px);
	max-height: 100%;
	max-width: 100%;
	overflow: hidden;
    text-overflow: ellipsis;
	padding: 5px;
}

.container-dasboard-customer .top .left .contacts-seller {
    display: grid;
    grid-template-columns: calc(18% - 5px) calc(82% - 5px);
    gap: 10px;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
	overflow: auto;
}

.container-dasboard-customer .top .left .gestion
, .container-dasboard-customer .top .left .contacts
, .container-dasboard-customer .top .left .seller-summary
, .container-dasboard-customer .top .right .notes {
	background: rgb(230, 230, 230);
	border: 1px solid rgb(200, 200, 200);
}

.container-dasboard-customer .top .left .gestion {
    display: grid;
    grid-template-columns: 50% 50%;
}

.container-dasboard-customer .bottom {
    width: calc(100% - 20px);
    height: 100%;
    display: grid;
    grid-template-columns: 20% 50% 30%;
    gap: 10px;
}

.container-dasboard-customer .bottom .contact-graph, .container-dasboard-customer .bottom .kpis, .container-dasboard-customer .bottom .current-situation {
    background: rgb(230, 230, 230);
    border: 1px solid rgb(200, 200, 200);
    height: 100%;
    overflow: auto;
}

.container-dasboard-customer .top .left .basic-gestion .gestion .right-gestion {
    display: grid;
    grid-template-rows: 1fr 2fr;
	border-left: 1px solid rgb(200, 200, 200);
}

.reporte-visitas {
    border-bottom: 1px solid rgb(200, 200, 200);
}

.reporte-visitas
{
    display: flex;
    align-items: center;
    padding: 5px 10px;
	justify-content: space-around;
}

.visita-actual {
    display: grid;
    grid-template-rows: 20% 20% 20% 20%;
}


.container-dasboard-customer .top .left .basic-gestion .gestion .left-gestion {
    display: grid;
    grid-template-rows: 15% 15% 15% 15% 15%;
}

.container-dasboard-customer .top .left .basic-gestion .gestion .left-gestion .sin-pedidos
, .container-dasboard-customer .top .left .basic-gestion .gestion .left-gestion .aviso-visita
, .container-dasboard-customer .top .left .basic-gestion .gestion .left-gestion .reprogramar-visita
, .container-dasboard-customer .top .left .basic-gestion .gestion .right-gestion .visita-actual .programar-tandem
, .container-dasboard-customer .top .left .basic-gestion .gestion .right-gestion .visita-actual .last-tandem
, .container-dasboard-customer .top .left .basic-gestion .gestion .right-gestion .visita-actual .next-tandem
, .container-dasboard-customer .top .left .basic-gestion .gestion .left-gestion .actualiza-info
, .container-dasboard-customer .top .left .basic-gestion .gestion .left-gestion .ultima-visita {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
}

.container-dasboard-customer .bottom .kpis {
    display: flex;
    flex-wrap: wrap;
}

.container-dasboard-customer .bottom .kpis > div {
    margin: 6px 5px;
    border: 1px solid rgb(180, 180, 180);
    width: calc((100% - 30px) / 3);
    height: 55px;
    display: flex;
    justify-content: space-between;
    padding: 0px 10px;
    /* justify-content: center; */
    align-items: center;
}

.contacts {
    width: 100%;
    height: 90%;
    max-width: 100%;
    max-height: 100%;
}

.seller-summary, .notes, .contact-graph {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
    /* width: calc(100% - 20px); */
    /* height: calc(100% - 20px); */
    overflow: auto;
}

.current-situation > * {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0px 10px;
}

.container-dasboard-customer .bottom .kpis .ytd
, .container-dasboard-customer .bottom .kpis .ytm {
    border-bottom: 1px solid rgb(200, 200, 200);
    border-right: 1px solid rgb(200, 200, 200);
}

.container-dasboard-customer .bottom .kpis .gap {
    border-right: 1px solid rgb(200, 200, 200);
}

.container-dasboard-customer .bottom .kpis .potencial-explotado
, .container-dasboard-customer .bottom .kpis .talla {
    border-bottom: 1px solid rgb(200, 200, 200);
}

#contact {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: rgb(200, 200, 200);
}

.contact-info-contacto {
    padding: 5px;
    font-size: 0.9vw;
    overflow-x: auto;
}

.options .options-icons
, .options .options-help {
    height: 6vh;
    display: grid;
    grid-template-columns: 10fr repeat(15, 1fr);
    overflow-x: auto;
}

.options-customer {
    display: grid;
    grid-template-columns: calc(100% - 4vw) 4vw;
    width: 100%;
}

.options-customer .options {
    // display: grid;
    // grid-template-rows: 1fr 1fr;
	color: white;
}

.options-customer .options .options-icons .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.options-customer .options .options-icons .icon:hover {
	background: var(--rojo-wurth);
}


.options-help .help {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
	text-align: center;
}

.toogle-options {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
	height: 6vh;
}

.expandir-bottom-section {
	height: 12vh;
}

.crm-options-list li {
  list-style-type: none; /* Oculta la viñeta predeterminada */
  margin-bottom: 5px;
}

.crm-options-list .option_crm .fa {
	margin-right: 10px;
	width: 20px;
}

.backorders-detail .header
, .backorders-detail .body {
    display: grid;
    grid-template-columns: repeat(4, 2fr) 8fr repeat(6, 2fr) 1fr;
	grid-gap: 20px;
	font-size: 0.8vw;
	overflow-x: auto;
}

.backorders-detail .header {
    font-weight: bold;
}

.backorders-detail .header .theader {
    text-align: center;
    background: rgb(200, 200, 200);
    padding: 5px 0px;
	display: flex;
    justify-content: center;
    align-items: center;
}

.backorders-detail .body .subtotal
, .backorders-detail .body .unitario {
	text-align: right;
}

.backorders-detail .body .pedido
, .backorders-detail .body .estado
, .backorders-detail .body .fecha
, .backorders-detail .body .ref
, .backorders-detail .body .qty-pedido
, .backorders-detail .body .entregado
, .backorders-detail .body .pendiente
, .backorders-detail .body .proximo-arribo {
	text-align: center;
}

.backorders-detail .body {
	padding: 3px 0px;
}

.consumos-filtros {
	margin: 10px 0px;
}

.consumos-filtros .search input[type="text"] {
	width: calc(100% - 10px);
}

.consumos-filtros .search input::placeholder {
	text-align: center;
}

/* Estilo para el texto introducido alineado a la izquierda */
input[type="text"] {
  text-align: left;
}

.consumos-filtros
, .consumos-detail .header
, .consumos-detail .body {
    display: grid;
    grid-template-columns: 1fr auto 4fr repeat(7, 1fr);
	grid-gap: 10px;
}

.consumos-detail .header {
    font-weight: bold;
}

.consumos-detail .body .iconos-consumo,
.consumos-detail .body .iconos-consumo i.fa.fa-shopping-cart.add-suggested-product,
.consumos-detail .body .iconos-consumo i.fa.fa-info-circle.info-product-card {
    font-size: 1vw;
}

.consumos-detail .encabezado-consumos .search
, .consumos-detail .encabezado-consumos .pdf-file {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5vw;
}

.consumos-detail .encabezado-consumos .pdf-download {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1vw;
}

.consumos-detail .encabezado-consumos p {
    font-size: large;
    font-weight: bold;
}

.consumos-detail .header .theader {
    text-align: center;
    background: rgb(200, 200, 200);
    padding: 5px 0px;
}

.consumos-detail .body .cantidad
, .consumos-detail .body .vunitario {
	text-align: right;
}

.consumos-detail .body .fecha
, .consumos-detail .body .documento
, .consumos-detail .body .descuento
, .consumos-detail .body .pedido {
	text-align: center;
}

.consumos-detail .body {
	padding: 3px 0px;
}

.abc-filtros
, .abc-detail .header
, .abc-detail .body {
    display: grid;
    grid-template-columns: 1fr 2fr auto 6fr repeat(6, 2fr);
	grid-gap: 10px;
}

.abc-detail .header {
    font-weight: bold;
}


.abc-detail .encabezado-abc .search
, .abc-detail .encabezado-abc .pdf-file {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5vw;
}

.abc-detail .encabezado-abc .pdf-download {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1vw;
}

.abc-detail .encabezado-abc p {
    font-size: large;
    font-weight: bold;
}

.abc-detail .header .theader {
    text-align: center;
    background: rgb(200, 200, 200);
    padding: 5px 0px;
}

.abc-detail .body .price
, .abc-detail .body .unitario {
	text-align: right;
}

.abc-detail .body .plan
, .abc-detail .body .cantidad
, .abc-detail .body .promedio
, .abc-detail .body .ultimacompra
, .abc-detail .body .frecuencia {
	text-align: center;
}

.abc-detail .body {
	padding: 3px 0px;
}

.abc-detail .body .iconos-abc,
.abc-detail .body .iconos-abc i.fa.fa-shopping-cart.add-suggested-product,
.abc-detail .body .iconos-abc i.fa.fa-info-circle.info-product-card {
    font-size: 1vw;
}

.abc-filtros {
	margin: 10px 0px;
}

.abc-filtros .search input[type="text"] {
	width: calc(100% - 10px);
}

.abc-filtros .search input::placeholder {
	text-align: center;
}

.promociones-filtros {
	margin: 10px 0px;
}

.promociones-filtros .search input[type="text"] {
	width: calc(100% - 10px);
}

.promociones-filtros .search input::placeholder {
	text-align: center;
}


.header-options-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-options-container h3 {
    background: rgb(200, 200, 200);
    padding: 2px 4px;
    border-radius: 4px;
}

.crm-options-list li:hover {
	background-color: rgb(210, 210, 210);
	cursor: pointer;
}

.cartera-detail.cartera-8-cols .header,
.cartera-detail.cartera-8-cols .body {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-gap: 20px;
    font-size: .85vw;
}

.cartera-detail.cartera-10-cols .header,
.cartera-detail.cartera-10-cols .body {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    grid-gap: 20px;
    font-size: .85vw;
}

.cartera-detail .header {
    font-weight: bold;
    position: sticky;
    top: 0px;
    background: white;
    padding: 10px;
}

.cartera-detail .body {
    padding: 0px 10px;
}

.cartera-detail .header .theader {
    text-align: center;
    background: rgb(200, 200, 200);
    padding: 5px 0px;
}

.cartera-detail .body .venta
, .cartera-detail .body .saldo
, .cartera-detail .body .vencido {
	text-align: right;
}

.cartera-detail .body .no-factura
, .cartera-detail .body .fecha
, .cartera-detail .body .vence
, .cartera-detail .body .dias
, .cartera-detail .body .vendedor {
	text-align: center;
}

.cartera-detail .body {
	padding: 3px 0px;
}

.container-home-central {
    background: rgb(230, 230, 230);
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    display: grid;
    grid-auto-flow: column;
    grid-gap: 10px;
    white-space: nowrap;
}

.label-central-home-option {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    font-size: 1.2vw;
    color: white;
    background: var(--rojo-wurth);
}

.imagen-central-home-option {
	border-radius: 10px 10px 0px 0px;
	border-left: 0.1px solid var(--rojo-wurth);
	border-top: 0.1px solid var(--rojo-wurth);
	border-right: 0.1px solid var(--rojo-wurth);
}

.label-central-home-option {
	border-radius: 0px 0px 10px 10px;
	border-left: 0.1px solid var(--rojo-wurth);
	border-bottom: 0.1px solid var(--rojo-wurth);
	border-right: 0.1px solid var(--rojo-wurth);
}

#visor-pdf {
	width: 100%;
	height: 500px;
}


.promociones-filtros
, .promociones-detail .header
, .promociones-detail .body {
    display: grid;
    grid-template-columns: 2fr 1fr 4fr repeat(3, 1fr);
	grid-gap: 10px;
}

.promociones-detail .header {
    font-weight: bold;
}

.consumos-detail .encabezado-consumos
, .abc-detail .encabezado-abc
, .promociones-detail .encabezado-promociones {
    display: grid;
    grid-template-columns: 50% 5% 5% 10% 6% 6% 6% 6% 6%;
	grid-gap: 2px;
}

.consumos-detail .encabezado-consumos .desplazamiento
, .abc-detail .encabezado-abc .desplazamiento
, .promociones-detail .encabezado-promociones .desplazamiento {
	display: flex;
	align-items: center;
	justify-content: center;
}

.promociones-detail .encabezado-promociones .search
, .promociones-detail .encabezado-promociones .pdf-file {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5vw;
}

.promociones-detail .encabezado-promociones .pdf-download {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1vw;
}

.promociones-detail .encabezado-promociones p {
    font-size: large;
    font-weight: bold;
}

.promociones-detail .header .theader {
    text-align: center;
    background: rgb(200, 200, 200);
    padding: 5px 0px;
}

.promociones-detail .body .precio {
	text-align: right;
}

.promociones-detail .body .qty-min
, .promociones-detail .body .vigente-hasta {
	text-align: center;
}

.promociones-detail .body {
	padding: 3px 0px;
}

#loading-message {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #555;
}

.container-home-bottom {
    background: rgb(230, 230, 230);
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    display: grid;
    grid-auto-flow: column;
    grid-gap: 10px;
    white-space: nowrap;
}

.label-bottom-home-option {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    font-size: 1.2vw;
    color: white;
    background: var(--gris-wurth);
}

.imagen-bottom-home-option {
	border-radius: 10px 10px 0px 0px;
	border-left: 0.1px solid var(--gris-wurth);
	border-top: 0.1px solid var(--gris-wurth);
	border-right: 0.1px solid var(--gris-wurth);
}

.label-bottom-home-option {
	border-radius: 0px 0px 10px 10px;
	border-left: 0.1px solid var(--gris-wurth);
	border-bottom: 0.1px solid var(--gris-wurth);
	border-right: 0.1px solid var(--gris-wurth);
}

.sugeridos-detail .header
, .sugeridos-detail .body {
    display: grid;
    grid-template-columns: 1fr 1fr 4fr 1fr;
	grid-gap: 20px;
}

.sugeridos-detail .header {
    font-weight: bold;
}

.sugeridos-detail .encabezado-sugeridos {
    display: grid;
    grid-template-columns: 70% 6% 6% 6% 6% 6%;
	grid-gap: 2px;
}

.sugeridos-detail .encabezado-sugeridos .desplazamiento {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sugeridos-detail .encabezado-sugeridos p {
    font-size: large;
    font-weight: bold;
}

.sugeridos-detail .header .theader {
    text-align: center;
    background: rgb(200, 200, 200);
    padding: 5px 0px;
}

.sugeridos-detail .body .precio {
	text-align: right;
}

.sugeridos-detail .body .qty-min
, .sugeridos-detail .body .vigente-hasta {
	text-align: center;
}

.sugeridos-detail .body {
	padding: 3px 0px;
}

.tab-content-sugeridos .tab-sugeridos {
  display: none;
}

.tab-content-sugeridos .active {
  display: block;
}

.tabs-sugeridos {
  display: flex;
  flex-direction: column;
}

.tab-links-sugeridos {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.tab-links-sugeridos li {
    margin-right: 10px;
    width: 120px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 10px;
    border-right: 1px solid black;
    border-top: 1px solid black;
	background: var(--gris-wurth);
	color: white;
}

.tab-content-sugeridos {
  flex: 1;
}


.tab-links-sugeridos li.active {
	background: var(--rojo-wurth);
	color: white;
}

.container-suboptions {
    display: grid;
    grid-template-rows: 1fr;
    grid-gap: 10px;
}

.container-suboptions .suboption {
    background: var(--rojo-wurth);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
}

.hijos-detail .header
, .hijos-detail .body {
    display: grid;
    grid-template-columns: 2fr 5fr 5fr;
	grid-gap: 20px;
}

.hijos-detail .header {
    font-weight: bold;
}

.hijos-detail .encabezado-hijos .desplazamiento {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hijos-detail .encabezado-hijos p {
    font-size: large;
    font-weight: bold;
}

.hijos-detail .header .theader {
    text-align: center;
    background: rgb(200, 200, 200);
    padding: 5px 0px;
}

.hijos-detail .body {
	padding: 3px 0px;
}

.box-customer-notes-option {
    width: 100%;
    height: 100%;
}

.label-customer-notes-option {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    font-size: 1.2vw;
    color: white;
    background: var(--rojo-wurth);
}

.imagen-customer-notes-option {
	/* border-radius: 10px 10px 0px 0px; */
	border-left: 0.1px solid var(--rojo-wurth);
	border-top: 0.1px solid var(--rojo-wurth);
	border-right: 0.1px solid var(--rojo-wurth);
}

.label-customer-notes-option {
	/* border-radius: 0px 0px 10px 10px; */
	border-left: 0.1px solid var(--rojo-wurth);
	border-bottom: 0.1px solid var(--rojo-wurth);
	border-right: 0.1px solid var(--rojo-wurth);
}

.box-customer-graphics-option {
    width: 100%;
    height: 100%;
}

.label-customer-graphics-option {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    font-size: 1.2vw;
    color: white;
    background: var(--rojo-wurth);
}

.label-customer-graphics-option {
	/* border-radius: 0px 0px 10px 10px; */
	border-left: 0.1px solid var(--rojo-wurth);
	border-bottom: 0.1px solid var(--rojo-wurth);
	border-right: 0.1px solid var(--rojo-wurth);
}

#overlay-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--rojo-wurth-tx);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  z-index: 9999;
  color: var(--rojo-wurth);
}

.current-customer-info {
    width: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.container-plan-viaje {
    height: 100%;
    width: 100%;
}

.container-plan-viaje .container-inferior, .modal-tpl-plan-viaje-container-food {
    background: rgb(230, 230, 230);
    display: grid;
    grid-template-columns: repeat(32, 1fr);
    grid-gap: 4px;
    color: black;
    font-size: 1.2vh;
}

.container-plan-viaje .container-inferior .day-trip-plan, .day-trip-plan-modal {
	background: white;
    text-align: center;
}


.container-plan-viaje .container-superior {
    height: calc(100% - 7vh);
    width: 100%;
    display: grid;
    grid-template-columns: 30% 70%;
	overflow: auto;
}

.container-plan-viaje .container-inferior {
    height: 6vh;
    width: 100%;
}

.document-customer-list {
	overflow-y: auto;
	background: var(--gris-wurth);
}

.document-customer-list .resume-customer {
    color: black;
    background: white;
    display: grid;
    padding: 10px;
    border-bottom: 0.1px solid var(--gris-wurth);
	margin: 10px;
	border-radius: 10px;
}

.master-top-section .top-section-shopping-cart {
    display: flex;
	gap: 2px;
}

.right-central-section .cointainer-ppal-shopping-cart {
    height: 100%;
    width: calc(100% - 1px);
    display: grid;
    grid-template-columns: 25% 75%;
	column-gap: 1px;
}

.right-central-section .cointainer-ppal-shopping-cart .cointainer-shopping-cart-left {
    background: white;
    height: 100%;
	width: 100%;
	border-right: 1px solid var(--gris-wurth);
    display: grid;
    grid-template-rows: 8% 92%;
	max-height: calc(100vh - 12vh);
}

.right-central-section .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right {
    background: white;
    height: 100%;
	width: 100%;
	display: grid;
    grid-template-rows: 0% 0% 0% auto;
	max-height: calc(100vh - 12vh);
}

.cart-left-toggle-btn {
    display: none;
}

@media screen and (max-width: 1024px) {
    .right-central-section .cointainer-ppal-shopping-cart {
        grid-template-columns: 0px 1fr;
        position: relative;
    }
    .right-central-section .cointainer-ppal-shopping-cart .cointainer-shopping-cart-left {
        overflow: hidden;
        min-width: 0;
    }
    .right-central-section .cointainer-ppal-shopping-cart.panel-open {
        grid-template-columns: 25% 75%;
    }
    .right-central-section .cointainer-ppal-shopping-cart.panel-open .cointainer-shopping-cart-left {
        overflow: auto;
        min-width: 0;
    }
    .cart-left-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background: #0093dd;
        color: white;
        border: none;
        border-radius: 0 6px 6px 0;
        width: 24px;
        height: 48px;
        cursor: pointer;
        z-index: 20;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
        transition: left 0.3s ease;
    }
    .right-central-section .cointainer-ppal-shopping-cart.panel-open .cart-left-toggle-btn {
        left: 25%;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1366px) {
    .right-central-section .cointainer-ppal-shopping-cart {
        grid-template-columns: 0px 1fr;
        position: relative;
    }
    .right-central-section .cointainer-ppal-shopping-cart .cointainer-shopping-cart-left {
        overflow: hidden;
        min-width: 0;
    }
    .right-central-section .cointainer-ppal-shopping-cart.panel-open {
        grid-template-columns: 25% 75%;
    }
    .right-central-section .cointainer-ppal-shopping-cart.panel-open .cointainer-shopping-cart-left {
        overflow: auto;
        min-width: 0;
    }
    .cart-left-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background: #0093dd;
        color: white;
        border: none;
        border-radius: 0 6px 6px 0;
        width: 24px;
        height: 48px;
        cursor: pointer;
        z-index: 20;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
        transition: left 0.3s ease;
    }
    .right-central-section .cointainer-ppal-shopping-cart.panel-open .cart-left-toggle-btn {
        left: 25%;
    }
}

.cointainer-shopping-cart-left-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
	color: black;
	position:	relative;
}

.cointainer-shopping-cart-list-docs {
	overflow-y: auto;
}

.cointainer-shopping-cart-right-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 10fr;
	color: black;
	border-bottom: 1px solid var(--gris-wurth);
	visibility: hidden;
}

.cointainer-shopping-cart-doc-customer {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 2fr;
    color: black;
    margin-left: 10px;
    min-height: 15vh;
    max-height: 22vh;
    overflow: auto;
    font-size: clamp(8px, 1vw, 14px);
}

/* Estilos generales */
.cart-container-options, .cart-container-options-informative {
	position: relative;
	cursor: pointer;
	display: flex;
	font-size: 1.5vw;
	align-items: center;
	justify-content: center;
}

.cart-container-options .fa-star {
    position: static !important;
}

/* Estilos para el círculo de notificación */
.cart-badge {
  top: -8px;
  right: -8px;
  background-color: black;
  color: white;
  border-radius: 50%;
  width: 1.5vw;
  height: 1.5vw;
  font-size: 1vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
}


.cointainer-shopping-cart-doc-customer .operation
, .cointainer-shopping-cart-doc-customer .customer
, .cointainer-shopping-cart-doc-customer .address {
    margin-top: 5px;
    margin-bottom: 5px;
	margin-left: 10px;
	border-right: 2px solid rgb(230, 230, 230);
}

.cointainer-shopping-cart-doc-customer .information {
    margin-top: 5px;
    margin-bottom: 5px;
	margin-left: 10px;
}

.cointainer-shopping-cart-doc-customer .operation {
    display: grid;
}

.cointainer-shopping-cart-doc-customer .operation
, .cointainer-shopping-cart-doc-customer .customer
, .cointainer-shopping-cart-doc-customer .address {
	max-height: 22vh;
	overflow: auto;
}


.operation-select-draft {
    display: flex;
    justify-content: center;
    align-items: center;
}

.operation-select-validate {
    display: grid;
    /* grid-template-rows: 2fr 1fr 1fr 1fr; */
}

.operation-select-validate > div {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.cointainer-shopping-cart-list-docs .cointainer-doc-shopping-cart {
    display: grid;
    grid-template-columns: 20% 70% 10%;
    color: black;
    padding: 5px 10px;
    border-bottom: 0.1px solid rgb(200, 200, 200);
}

.icon-doc-shopping-cart {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3vw;
}

.icon-doc-shopping-cart-selected {
	background: rgb(230, 230, 230);
}

#customer_info
, #address_info
, #information_info {
	margin-top: 5px;
}

.cointainer-shopping-cart-doc-customer .operation .fa-angle-down {
    font-size: 1.5vw;
    margin-left: 10px;
}

#select_doctype {
    display: grid;
    grid-template-rows: auto;
}

#select_doctype .select-typedoc-option {
    display: grid;
    grid-template-columns: 30% 70%;
	padding: 10px 0px;
}

#select_doctype .label-typedoc-option {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.5vw;
}

.cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header {
    display: grid;
    grid-template-columns: 5% 5% 6fr 2fr 1fr 1fr 1fr 1fr;
    font-size: 0.95vw;
	visibility: hidden;
	margin: 0px 20px 0px 10px;
	border-bottom: 2px solid rgb(230, 230, 230);
}

.cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header .cointainer-shopping-cart-header-action {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header .cointainer-shopping-cart-header-label
, .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header .cointainer-shopping-cart-header-niv-precio
, .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header .cointainer-shopping-cart-header-qty
, .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header .cointainer-shopping-cart-header-price
, .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header .cointainer-shopping-cart-header-discount
, .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header .cointainer-shopping-cart-header-total
, .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header .cointainer-shopping-cart-header-total-ttc {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: black;
    font-weight: 700;
}

.cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header .cointainer-shopping-cart-header-product-add-gift
,.cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header .cointainer-shopping-cart-header-product-add.add {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.cointainer-shopping-cart-header-product-search.add input {
    border: 1px solid black;
    height: 2.5vh;
	width: 90%;
}

.cointainer-shopping-cart-header-product-search.add
, .cointainer-shopping-cart-header-price-select.add {
    display: flex;
    align-items: center;
}

.icono-	 {
	color: rgb(230, 230, 230);
}

.icono-activo {
	color: var(--rojo-wurth);
}

.cointainer-shopping-cart-header-product-search.add input:focus
, .cointainer-shopping-cart-header-price-select.add select:focus {
  border: 2px solid var(--rojo-wurth);
  outline: none;
}

.cointainer-shopping-cart-doc-detail {
	max-height: 100%;
	margin: 0px 20px 0px 10px;
	overflow-y: auto;
	scrollbar-gutter: stable; /* reserva el ancho del scrollbar para que no se monte sobre la columna Total */
}

.cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-line-detail {
    padding: 10px 0px;
    display: grid;
    grid-template-columns: 5% 5% 5fr 2fr 1fr 2fr 1fr 1fr 1fr 1fr 1fr;
    color: black;
    font-size: 0.8vw;
    /*
        min-height (no height fijo): con una descripcion larga que envuelve en varias
        lineas, un height:9vh fijo no alcanza y la fila siguiente termina montandose
        encima. min-height conserva el alto de siempre para filas cortas, pero deja
        crecer la fila cuando el contenido lo necesita.
    */
    min-height: 9vh;
    height: auto;
    margin: 10px 0px;
}

.cointainer-shopping-cart-body-line-detail-informative {
    padding: 10px 0px;
    display: grid;
    grid-template-columns: 1fr 1fr 10fr 3fr 3fr 4fr;
    color: black;
    font-size: 1.2vw;
    height: 6vh;
    margin: 10px 0px;
}

.cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-line-detail:hover {
	border: 1px solid var(--rojo-wurth);
}

.cointainer-shopping-cart-body-rang-bad
, .cointainer-shopping-cart-body-rang-red
, .cointainer-shopping-cart-body-rang-green {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cointainer-shopping-cart-body-rang-bad::before
, .cointainer-shopping-cart-body-rang-red::before
, .cointainer-shopping-cart-body-rang-green::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 2.5vw 3vw 0 0;
  z-index: 1;
}

.cointainer-shopping-cart-body-rang-red::before {
  border-color: var(--rojo-wurth) transparent transparent transparent;
}

.cointainer-shopping-cart-body-rang-green::before {
  border-color: var(--verde-wurth) transparent transparent transparent;
}

/* === view kit products === */
.modal-view-kit-products {
    min-width: 500px;
    max-width: 80vw;
    color: black;
}

.font-view-kit-products {
    font-size: 0.9vw;
}

.panel-kit-products-container,
.view-kit-products-container {
    max-height: 50vh;
    overflow-y: auto;
}

.view-kit-products-header,
.view-kit-products-body {
    display: grid;
    grid-template-columns: 2fr 6fr 1fr 2fr;
    font-size: 0.85vw;
}

.view-kit-products-header {
    font-weight: bold;
    position: sticky;
    top: 0;
    background: white;
    padding: 5px 10px;
    border-bottom: 2px solid rgb(180, 180, 180);
}

.view-kit-products-header > * {
    background: rgb(200, 200, 200);
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.view-kit-products-body {
    padding: 4px 10px;
    border-bottom: 0.1px solid rgb(220, 220, 220);
    align-items: center;
}

.view-kit-products-body:hover {
    background: rgb(245, 245, 245);
}

.view-kit-products-body > span {
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 3px 8px;
}

.view-kit-products-body > span:first-child {
    color: var(--gris-wurth);
    font-size: 0.8vw;
}

.view-kit-products-body-qty {
    justify-content: center;
    font-weight: bold;
}

.view-kit-products-body-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 1.1em;
    cursor: pointer;
}

.view-kit-products-body-icons .info-product-card {
    color: var(--gris-wurth);
}

.view-kit-products-body-icons .info-product-card:hover {
    color: var(--rojo-wurth);
}

.cointainer-shopping-cart-body-rang-bad::before {
  border-color: var(--gris-wurth) transparent transparent transparent;
}

.label-rang {
  position: absolute;
  top: 0.1vh;
  left: 0.1vh;
  padding: 5px;
  border-radius: 3px;
  font-weight: bold;
  z-index: 2;
  color: white;
  font-size: 0.6vw;
}

.cointainer-shopping-cart-body-label {
    display: grid;
    grid-template-rows: auto;
    align-items: center;
}


.cointainer-shopping-cart-body-qty {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cointainer-shopping-cart-body-pu {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    font-size: 20px;
}

.cointainer-shopping-cart-body-price
, .cointainer-shopping-cart-body-discount
, .cointainer-shopping-cart-body-total
, .cointainer-shopping-cart-body-total-ttc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.cointainer-shopping-cart-header-product-add-qty.add {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
}

i#down_qty_line
, i#up_qty_line
, i#up_qty
, i#down_qty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8vw;
    color: black;
}

.cointainer-shopping-cart-header-product-input-add-qty.add {
    display: grid;
    grid-template-columns: 80% 20%;
    border: 1px solid black;
	border-radius: 3px;
    height: 3.5vh;
    justify-content: center;
    align-items: center;
}

.cointainer-shopping-cart-header-discount input#remise_percent {
    border: 1px solid black;
    height: 2.5vh;
    align-items: center;
    width: 4vw;
    min-width: 70px;
	text-align: center;
}

input#remise_percent {
    width: 90%;
}
.cointainer-shopping-cart-header-product-input-clear-qty.add {
    display: flex;
    align-items: center;
    justify-content: center;
}

#clear_qty_line
, #clear_qty {
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

input#qty_producto {
    width: 100%;
    display: flex;
    text-align: center;
    border: none;
    height: 1.5vh;
    align-items: center;
}

.container-shopping-cart-update-line, .container-shopping-add-update-line {
    display: grid;
    grid-template-columns: 3fr 2fr;
	padding: 2vw;
}

.cointainer-shopping-cart-line-product-add-qty, .cointainer-shopping-add-line-product-add-qty {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
}


input#qty_producto_line {
    width: 100%;
	text-align: center;
}

.cointainer-shopping-cart-line-product-input-add-qty, .cointainer-shopping-add-line-product-input-add-qty {
    display: grid;
    grid-template-columns: 80% 20%;
    border: 1px solid black;
}

.cointainer-shopping-cart-body-pu .fa-gift
,.edit-price-level {
	font-size: 20px;
}

// #btn_close_update_price
// , #btn_update_price {
	// font-size: 1.8vw;
// }

i#delete-product {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

i.fa.fa-trash.delete-product {
    font-size: 20px;
}

.font-window-message {
	font-size: 1.5vw;
}

.font-window-message-validate {
	font-size: 1.2vw;
}

h3.alerts-message-title-validate {
    padding: 10px;
    text-align: center;
    color: orange;
}

h3.blocks-message-title-validate {
    padding: 10px;
    text-align: center;
    color: red;
}

h3.confirm-message-title-validate {
    padding: 10px;
    text-align: center;
    color: green;
}

.confirm-validate-container
, .blocks-container
, .alerts-container
, .discount-container {
    padding: 10px;
    border-radius: 10px;
    margin-top: 20px;
}

.alerts-container {
    border: 2px solid orange;
}

.blocks-container {
    border: 2px solid red;
}

.discount-container {
    border: 2px solid blue;
}

.confirm-validate-container {
    border: 2px solid green;
}

p.alerts-message-validate {
    margin: 10px;
	text-align: justify;
}

p.confirm-message-validate {
    text-align: center;
}

.container-purchase-situation {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: calc(66% - 5px) calc(34% - 5px);
    gap: 10px;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}

.container-purchase-situation .container-top {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: calc(25% - 5px) calc(75% - 5px);
    grid-gap: 10px;
    max-width: 100%;
    max-height: 100%;
	overflow: auto;
}

.container-purchase-situation .container-bottom {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: calc(50% - 5px) calc(50% - 5px);
    grid-gap: 10px;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}

.container-purchase-situation .container-bottom .container-shopping-cart {
	background: white;
}

.container-purchase-situation .container-bottom .container-account-status {
    font-size: 9vh;
}

.container-purchase-situation .container-e-shop
,.container-purchase-situation .container-top .container-sale-objectives-right .container-no-more-purchased
,.container-purchase-situation .container-top .container-sale-objectives-right .container-purchase-history
,.container-purchase-situation .container-top .container-sale-objectives-right .container-top-50
,.container-purchase-situation .container-top .container-sale-objectives-right .container-sale-objectives-left
,.container-purchase-situation .container-top .container-sale-objectives-right .container-check-in-out {
	background: white;
	border-radius: 10px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.container-purchase-situation .container-top .container-sale-objectives-right .container-check-in-out {
    display: grid;
    grid-template-rows: 50% 50%;
	width: 100%;
	height: 100%;
}

.container-purchase-situation .container-top .container-sale-objectives-right {
    display: grid;
    grid-template-columns: repeat(3, calc(33.33% - 6.67px));
    grid-gap: 10px;
    grid-template-rows: calc(50% - 5px) calc(50% - 5px);
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}

.container-purchase-situation .container-top .container-sale-objectives-left {
    display: grid;
    grid-template-rows: 50% 50%;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}

.container-purchase-situation .container-top .container-sale-objectives-left .container-top
, .container-purchase-situation .container-top .container-sale-objectives-left .container-bottom {
	background: white;
	width: 100%;
	gap: 0px;
}

.container-purchase-situation .container-sale-objectives-left .container-top {
	border-radius: 10px 10px 0px 0px;
	box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5vh;
	color: rgb(150, 150, 150);
}

.container-purchase-situation .container-top .container-sale-objectives-left .container-bottom {
	border-radius: 0px 0px 10px 10px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.container-purchase-situation .container-top .container-sale-objectives-left .container-bottom-a
,.container-purchase-situation .container-top .container-sale-objectives-left .container-bottom-b {
	border: 1px solid rgb(230, 230 ,230);
}

.container-purchase-situation .container-top .container-sale-objectives-left .container-bottom-a {
	border-radius: 0px 10px 0px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3vh;
    color: rgb(150, 150, 150);
}

.container-purchase-situation .container-top .container-sale-objectives-left .container-bottom-b {
    border-radius: 10px 0px 10px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5vw;
}

.container-purchase-situation .container-top .container-sale-objectives-left .container-bottom-b i.fa.fa-stopwatch {
    display: flex;
    justify-content: center;
    align-items: end;
}

.container-purchase-situation .container-top .container-sale-objectives-left .container-bottom-b i.fa.fa-handshake {
    display: flex;
    justify-content: center;
    align-items: start;
    font-size: 2vh;
}

.container-purchase-situation .container-top .container-sale-objectives-left .container-bottom-b i.fa.fa-stopwatch
,.container-purchase-situation .container-top .container-sale-objectives-left .container-bottom-b i.fa.fa-handshake {
    color: rgb(150, 150, 150);
}

.container-purchase-situation .container-top .container-sale-objectives-right #btn_check_in_out {
    display: grid;
    justify-content: center;
    align-items: center;
    font-size: 3vh;
    text-align: center;
}

.container-purchase-situation .container-top .container-sale-objectives-right #btn_check_in_out > p {
    font-size: 1.5vh;
	color: rgb(169, 169, 169);
	margin-top: 5px;
}

.container-purchase-situation .container-top .container-sale-objectives-right .fa-times-circle {
	color: var(--amarillo-wurth);
}

.container-purchase-situation .container-top .container-sale-objectives-right .container-e-shop
,.container-purchase-situation .container-top .container-sale-objectives-right .container-no-more-purchased
,.container-purchase-situation .container-top .container-sale-objectives-right .container-purchase-history
,.container-purchase-situation .container-top .container-sale-objectives-right .container-top-50 {
    display: grid;
    grid-template-rows: 50% 50%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    overflow: auto;
}

.container-purchase-situation .container-top .container-sale-objectives-right .container-e-shop .title
,.container-purchase-situation .container-top .container-sale-objectives-right .container-no-more-purchased .title
,.container-purchase-situation .container-top .container-sale-objectives-right .container-purchase-history .title
,.container-purchase-situation .container-top .container-sale-objectives-right .container-top-50 .title {
    display: flow;
    text-align: center;
    color: rgb(169, 169, 169);
	font-size: 1.1vw;
}

.container-purchase-situation .container-top .container-sale-objectives-right .container-e-shop .dato
,.container-purchase-situation .container-top .container-sale-objectives-right .container-no-more-purchased .dato
,.container-purchase-situation .container-top .container-sale-objectives-right .container-purchase-history .dato
,.container-purchase-situation .container-top .container-sale-objectives-right .container-top-50 .relation {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4vh;
    font-weight: bold;
    color: var(--gris-wurth);
}


.ecommerce-filtros
, .ecommerce-detail .header
, .ecommerce-detail .body {
    display: grid;
    grid-template-columns: 1fr 4fr repeat(2, 1fr);;
	grid-gap: 10px;
}

.ecommerce-detail .header {
    font-weight: bold;
}

.consumos-detail .encabezado-consumos
, .abc-detail .encabezado-abc
, .ecommerce-detail .encabezado-ecommerce {
    display: grid;
    grid-template-columns: 50% 5% 5% 10% 6% 6% 6% 6% 6%;
	grid-gap: 2px;
	margin-bottom: 15px;
}

.consumos-detail .encabezado-consumos .desplazamiento
, .abc-detail .encabezado-abc .desplazamiento
, .ecommerce-detail .encabezado-ecommerce .desplazamiento {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ecommerce-detail .encabezado-ecommerce .search
, .ecommerce-detail .encabezado-ecommerce .pdf-file {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5vw;
}

.ecommerce-detail .encabezado-ecommerce .pdf-download {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1vw;
}

.ecommerce-detail .encabezado-ecommerce p {
    font-size: large;
    font-weight: bold;
}

.ecommerce-detail .header .theader {
    text-align: center;
    background: rgb(200, 200, 200);
    padding: 5px 0px;
}

.ecommerce-detail .body .precio {
	text-align: right;
}

.ecommerce-detail .body .qty-min
, .ecommerce-detail .body .vigente-hasta {
	text-align: center;
}

.ecommerce-detail .body {
	padding: 3px 0px;
}

.clase-recaudo {
    display: grid;
    grid-template-columns: 30% 1fr 6fr;
	grid-gap: 20px;
    margin-right: 20px;
}

#fila_anticipo {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 30% 1fr 2fr 1fr;
    margin-right: 20px;
}

#fila_total_recaudo, #fila_total_abono {
    display: grid;
    grid-template-columns: 40% 35% 25%;
    grid-gap: 15px;
    width: calc(100% - 30px);
    height: 4vh;
    font-size: 2vh;
    padding: 10px;
    text-align: right;
    font-weight: bold;
}



#fila_total_abono .label-data-total-abono
,#fila_total_abono .data-recaudo {
    font-weight: bold;
    display: flex;
    justify-content: end;
    align-items: center;
}

.data-recaudo {
	width: max-content;
}

input.data-recaudo {
    text-align: right;
}

.facture-container .body-facture, .facture-container .header-facture {
    display: grid;
    grid-gap: 15px;
    height: 3vh;
    margin: 5px 0px;
}

.facture-container .header-facture {
    font-weight: bold;
    position: sticky;
    top: 6px;
    margin-bottom: 10px;
    background: var(--rojo-wurth);
    color: white;
    border-radius: 5px;
    padding: 0px 0px 10px 0px;
    text-align: center;
}

.body-facture > div
,.header-facture > div {
    padding: 5px;
	font-size: 1vw;
}

.body-facture > input {
    padding: 5px 10px;
	font-size: 1vw;
	text-align: right;
}

.body-facture > div[data-etiqueta="abono igual a total"] {
	text-align: center;
}


.body-facture > div[data-etiqueta="Importe total"], .body-facture > div[data-etiqueta="Vlr rte fte"], .body-facture > div[data-etiqueta="Total"], .body-facture > div[data-etiqueta="Intereses"], .body-facture > div[data-etiqueta="Honorarios"], .body-facture > div[data-etiqueta="% Desc."] {
    text-align: right;
}

.body-facture > div[data-etiqueta="No. Factura"],.body-facture > div[data-etiqueta="Dias Cartera"],.body-facture > div[data-etiqueta="Fecha"],.body-facture > div[data-etiqueta="% Vali. hasta"] {
    text-align: center;
}


.facture-container {
    border: 1px solid rgb(220, 220, 220);
    border-radius: 10px;
    padding: 5px 15px;
    overflow-y: auto;
    max-height: 22vh;
    min-height: 10vh;
}

.body-facture > input[data-etiqueta="Abono"] {
    border: 1px solid var(--gris-wurth);
    border-radius: 5px;
    height: 1.5vh;
    background: var(--gris-wurth-tx);
    text-align: right;
    width: 8vw;
}

.body-facture > input[data-etiqueta="Abono"]::placeholder {
    color: var(--gris-wurth);
}

#fila_forma_pago
,#fila_fecha
,#fila_fecha_cheque
,#fila_cheque_postfechado
,#fila_nro_cheque
,#fila_banco
,#fila_anticipo
,#fila_rte_fuente
,#fila_rte_ica
,#fila_rte_iva
,#fila_total_recaudo
,#btn_agregar_pago
,#btn_close {
	font-size: 2vh;
}

#fila_forma_pago .label-data-total-abono
,#fila_fecha .label-data-total-abono
,#fila_fecha_cheque .label-data-total-abono
,#fila_cheque_postfechado .label-data-total-abono
,#fila_nro_cheque .label-data-total-abono
,#fila_banco .label-data-total-abono
,#fila_anticipo .label-data-total-abono
,#fila_rte_fuente .label-data-total-abono
,#fila_rte_ica .label-data-total-abono
,#fila_rte_iva .label-data-total-abono
,#fila_total_recaudo .label-data-total-abono {
	font-weight: bold;
	text-align: right;
    display: flex;
    justify-content: right;
    align-items: center;
    height: 4vh;
}

#fila_forma_pago .data-recaudo
,#fila_fecha .data-recaudo
,#fila_fecha_cheque .data-recaudo
,#fila_cheque_postfechado .data-recaudo
,#fila_nro_cheque .data-recaudo
,#fila_banco .data-recaudo
,#fila_anticipo .data-recaudo
,#fila_rte_fuente .data-recaudo
,#fila_rte_ica .data-recaudo
,#fila_total_recaudo .data-recaudo
,#fila_rte_iva .data-recaudo {
    display: flex;
    align-items: center;
	padding-right: 15px;
}


#nro_pedidos {
	width: 100%;
	text-align: center;
}

#fila_total_recaudo {
    border-top: 3px double black;
    margin-top: 15px;
	padding-top: 15px;
}

#total_anticipo {
	padding-right: 15px;
	text-align: right
}

.file-upload {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.cheque-upload {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.label-file-cheque {
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  cursor: pointer;
}

#nombre_archivo_cheque {
  margin-top: 10px;
}

.font-window-upload-cheque {
	font-size: 2vh;
}

.container-upload-cheque {
    display: grid;
    grid-template-rows: 1fr 1fr;
    padding: 20px;
}

.texto-check-in-out {
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(169, 169, 169);
    font-weight: bold;
	text-align: center;
}

.paragraph-visit-type {
    padding: 15px 0px;
}

.container-visit-types {
    display: grid;
    grid-template-columns: 10% 90%;
    grid-row-gap: 10px;
}

#address_info .container-delivery-address {
    margin: 5px;
    padding: 5px;
    border-radius: 10px;
}

#address_info .delivery-address-bad
, #address_info .delivery-address-ok {
    height: 15vh;
    overflow-y: auto;
}

#address_info .delivery-address-bad {
    border: 2px solid var(--rojo-wurth);
    background: var(--rojo-wurth-tx);
}

#address_info .delivery-address-ok {
    border: 2px solid var(--verde-wurth);
    background: var(--verde-wurth-tx);
}

.delivery-address-alt-sep {
    border: none;
    border-top: 1px dashed var(--rojo-wurth);
    margin: 6px 0 4px 0;
}

.delivery-address-alt-title {
    font-size: 11px;
    font-weight: bold;
    color: var(--rojo-wurth);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.delivery-address-alt-value {
    font-size: 12px;
    font-weight: bold;
}

.cointainer-shopping-cart-order-aditional-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
    font-size: 2vh;
}

.aditional-info-order {
    padding: 10px;
    border-radius: 10px;
    background: var(--gris-wurth-tx);
    display: grid;
    text-align: center;
}

.aditional-info-order > label {
	font-weight: bold;
}

.aditional-info-order.prospect-accion-pendiente {
    border: 2px solid #cc6600;
    position: relative;
}

.prospect-badge-alerta {
    position: absolute;
    top: -9px;
    right: -9px;
    background: #cc6600;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.cointainer-shopping-cart-order-note-public > p {
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.view-note-public textarea {
    width: 90%;
    height: 90%;
    padding: 10px;
    text-align: justify;
    border-radius: 10px;
}

.font-window-more-attributes {
	font-size: 3vh;
}

label.information-label {
    font-weight: bold;
}

#information_info > div {
	margin-right: 20px;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.information-data {
	text-align: right;
}

.flete-benefit-info-panel {
	margin-top: 6px;
	padding: 4px 6px;
	border-radius: 4px;
	grid-column: 1 / -1;
}

.flete-benefit-ok {
	background-color: #d4edda;
	border: 1px solid #28a745;
}

.flete-benefit-ok label.information-label {
	color: #155724;
}

.flete-benefit-ok .information-data {
	color: #155724;
	font-weight: bold;
}

.flete-benefit-pending {
	background-color: #f0f0f0;
	border: 1px solid #999;
}

.flete-benefit-pending label.information-label {
	color: #666;
	font-style: italic;
	grid-column: 1 / -1;
}

.cointainer-shopping-cart-order-orden-compra .action-icons {
    display: flex;
    justify-content: space-evenly;
}

.orders-managed-body
, .orders-managed-header {
    display: grid;
    grid-template-columns: 1fr 2.5fr 0.8fr 1fr 1fr 1fr;
	font-size: 1.2vw;
}

.orders-managed-header {
    font-weight: bold;
	margin-bottom: 10px;
	padding: 10px;
	text-align: center;
}

.orders-managed-body > span[data-etiqueta="total"]
, .orders-managed-body > span[data-etiqueta="lineas_pedido"] {
	text-align: right;
}

.orders-managed-body > span[data-etiqueta="referencia"]
, .orders-managed-body > span[data-etiqueta="estado"] {
	text-align: center;
}

.orders-managed-title {
	text-align: center;
}

.operation-select-validate > span[data-etiqueta="Nro. Pedido"]
, .operation-select-validate > span[data-etiqueta="element_crm"] {
	font-weight: bold;
	text-align: center;
	font-size: 2vh;
}

#revert_order {
	border: 2px solid var(--verde-wurth);
	padding: 5px;
	border-radius: 5px;
}

.total-clientes-plan-viaje {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

input#observa_guia
, input#quien_solicita {
    width: 90%;
}

.operation-label {
    font-size: 2vh;
}

.container-shopping-cart-update-line-change-discount, .container-shopping-add-update-line-change-discount {
    padding: 1vw 2vw;
    display: grid;
    grid-template-columns: 80% 20%;
}

#view_pdf {
    border: 2px solid rgb(0, 0, 255);
    padding: 5px;
    border-radius: 5px;
    font-size: 1.2vw;
}

.title-list-docs-prospecto {
    display: grid;
    grid-template-columns: 90% 10%;
	margin-bottom: 20px;
}

.title-list-docs-prospecto > span {
    font-weight: bold;
}

i#add_docs_prospecto {
    cursor: pointer;
}

input#docs_prospecto_attach {
    padding: 10%;
}

li.li-list-docs-prospecto {
    display: grid;
    grid-template-columns: 5% 75% 5% 5%;
}

li.li-list-docs-prospecto:hover {
  background-color: #e0e0e0; /* Color de fondo al pasar el ratón por encima */
}

i.fa.fa-search.view-attach-file-prospecto
, i.fa.fa-trash.delete-attach-file-prospecto {
    display: flex;
    align-items: center;
    justify-content: center;
	cursor: pointer;
}

.guia-docs-requeridos {
    background-color: #f4f6f8;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 0.72em;
}

.guia-docs-titulo {
    font-weight: bold;
    margin: 0 0 5px 0;
    color: #444;
}

.guia-docs-lista {
    margin: 0;
    padding-left: 16px;
}

.guia-docs-lista li {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    color: #333;
}

.guia-doc-nombre {
    flex: 1;
}

.guia-doc-obligatorio {
    color: #1a7a3c;
    font-style: italic;
    white-space: nowrap;
    margin-left: 8px;
}

.cointainer-ppal-shopping-add {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 5fr 95fr;
}

.cointainer-shopping-add-options {
    background: white;
    border-bottom: 2px solid #cccccc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 10px 0px 10px;
    font-size: 2vh;
}

.cointainer-shopping-add-info {
    background: antiquewhite;
}

.cointainer-shopping-add-info {
    background: rgb(239,239,239);
    display: grid;
    grid-template-columns: 30% 70%;
}

.cointainer-shopping-add-info-left {
    width: 100%;
    background: white;
    height: 100%;
    border-right: 2px solid #cccccc;
}

.cointainer-shopping-add-info-right {
    /* background: rgb(239, 239, 239); */
    margin: 10px;
    overflow: auto;
    display: grid;
    grid-template-rows: auto;
    /* grid-gap: 10px; */
}

.add-left-toggle-btn {
    display: none;
}

@media screen and (max-width: 1024px) {
    .cointainer-shopping-add-info {
        grid-template-columns: 0px 1fr;
        position: relative;
    }
    .cointainer-shopping-add-info-left {
        overflow: hidden;
        min-width: 0;
    }
    .cointainer-shopping-add-info.panel-open {
        grid-template-columns: 30% 70%;
    }
    .cointainer-shopping-add-info.panel-open .cointainer-shopping-add-info-left {
        overflow: auto;
        min-width: 0;
    }
    .add-left-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: 3vw;
        top: 50vh;
        transform: translateY(-50%);
        background: #0093dd;
        color: white;
        border: none;
        border-radius: 0 6px 6px 0;
        width: 24px;
        height: 48px;
        cursor: pointer;
        z-index: 20;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
        transition: left 0.3s ease;
    }
    .cointainer-shopping-add-info.panel-open .add-left-toggle-btn {
        left: calc(3vw + 0.3 * (100vw - 3vw));
    }
}

@media screen and (min-width: 1025px) and (max-width: 1366px) {
    .cointainer-shopping-add-info {
        grid-template-columns: 0px 1fr;
        position: relative;
    }
    .cointainer-shopping-add-info-left {
        overflow: hidden;
        min-width: 0;
    }
    .cointainer-shopping-add-info.panel-open {
        grid-template-columns: 30% 70%;
    }
    .cointainer-shopping-add-info.panel-open .cointainer-shopping-add-info-left {
        overflow: auto;
        min-width: 0;
    }
    .add-left-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: 3vw;
        top: 50vh;
        transform: translateY(-50%);
        background: #0093dd;
        color: white;
        border: none;
        border-radius: 0 6px 6px 0;
        width: 24px;
        height: 48px;
        cursor: pointer;
        z-index: 20;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
        transition: left 0.3s ease;
    }
    .cointainer-shopping-add-info.panel-open .add-left-toggle-btn {
        left: calc(3vw + 0.3 * (100vw - 3vw));
    }
}

.shopping-add-option {
    padding: 10px;
    border: 1px solid rgb(230, 230, 230);
    margin: 10px;
    border-radius: 10px;
    color: black;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

div#product_resume {
    background: rgb(246,246, 246);
	color: black;
    display: grid;
    grid-template-rows: 30% 70%;
}

div.product-resume {
    background: rgb(246,246, 246);
	color: black;
}

.product-resume-top {
    background: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(204, 204, 204);
	padding: 5px;
}

.product-resume-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.product-resume-bottom-left {
    background: rgb(255, 255, 255);

    border-right: 1px solid rgb(204, 204, 204);
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-resume-bottom-right-top {
    background: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(204, 204, 204);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    justify-items: center;
    font-size: 0.9vw;
    overflow: hidden;
}

.product-resume-bottom-right-top .date {
    font-size: 0.65vw;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.product-resume-bottom-right-top .price i,
.product-resume-bottom-right-top .items i {
    font-size: 0.85vw;
    cursor: pointer;
}

.product-resume-bottom-right {
    display: grid;
    grid-template-rows: 1fr 1fr;
}

.product-resume-bottom-right-bottom {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px;
    font-size: 1.5vw;
}

img.product-resume-bottom-left-image-img {
    width: 60%;
}

.product-resume-bottom-left-image {
    display: flex;
    justify-content: center;
    align-items: center;
}


.top.fa.fa-cube
, .bottom.fa.fa-shopping-cart {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2vw;
}


input#inputp_shopping_cart_update_line_update_discount, input#inputp_shopping_add_update_line_update_discount {
    text-align: center;
}

input#inputv_shopping_cart_update_line_update_discount, input#inputv_shopping_add_update_line_update_discount {
    text-align: right;
    padding: 0 1vw;
}

i#convert_propal_to_order {
    font-size: 1vw;
    border: 3px solid #27b601;
    border-radius: 10px;
    padding: 10px;
}

i.fa.fa-shopping-cart.add-shopping-cart
, i.fa.fa-info-circle.info-product-card, i.fa.fa-arrow-circle-down {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.summary-produc-line {
    display: grid;
    grid-template-columns: 30% 70%;
    grid-gap: 10px;
    font-size: 1.2vw;
}

span.label-summary-produc-line {
    font-weight: bold;
}

.font-modal-summary-product {
    font-size: 1.2vw;
}

i.fa.fa-clipboard.edit-product-description-line
, i.fa.fa-edit.edit-price-level
, i.fa.fa-cube
, i.fa.fa-unlink.edit-price-level {
    display: flex;
    justify-content: center;
    align-items: center;
}

.list-documents-by-customer {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border: 1px solid rgb(200, 200, 200);
    background: rgb(230, 230, 230);
    border-radius: 10px;
	overflow: auto;
	font-size: 1.1vw;
    display: flex;
    flex-direction: column;
}

#btn-list-commandebycustomer    { order: 1; }
#btn-list-propalbycustomer      { order: 2; }
#btn-list-muestrasbycustomer    { order: 3; }
#btn-list-obsequiosbycustomer   { order: 4; }
#btn-list-txbycustomer          { order: 5; }
#btn-list-rcbycustomer          { order: 6; }
#btn-list-oserviciobycustomer   { order: 7; }
#btn-list-devolucionesbycustomer { order: 8; }
#btn-list-enviosbycustomer      { order: 9; }
#btn-list-ticketsbycustomer     { order: 10; }
#btn-list-facturasbycustomer    { order: 11; }
#btn-list-visitasbycustomer     { order: 12; }
#btn-list-cbonosbycustomer      { order: 13; }
#btn-list-cobranzasbycustomer   { order: 14; }
#btn-list-sizeexchangebycustomer { order: 15; }

.label-promos-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--rojo-wurth);
}

iframe.imagen-popup-promos {
    width: 100%;
    height: 100%;
	object-fit: contain;
}

label.label-popup-promos {
    text-align: center;
    color: white;
    font-weight: 600;
}

.customer-address > i.fa
, .customer-phone > i.fa
, .customer-phone2 > i.fa
, .customer-rubro > i.fa
, .customer-fjuridica > i.fa
, .customer-ubicacion > i.fa
, .customer-email > i.fa
, .customer-celular > i.fa
, .customer-celular2 > i.fa
, .customer-seller > i.fa
, .customer-dir-entrega > i.fa
, .customer-requiere-ocompra > i.fa
, .customer-castigo-cartera > i.fa
, .customer-estructura > i.fa
, .customer-cobertura > i.fa
, .customer-nro-operarios > i.fa
, .customer-motivo-perdida > i.fa
, .customer-birthday > i.fa {
	color: black;
	opacity: 1;
	width: 1.2vw;
}

.customer-address span
, .customer-phone span
, .customer-phone2 span
, .customer-rubro span
, .customer-fjuridica span
, .customer-ubicacion span
, .customer-email span
, .customer-celular span
, .customer-celular2 span
, .customer-seller span
, .customer-dir-entrega span
, .customer-requiere-ocompra span
, .customer-castigo-cartera span
, .customer-estructura span
, .customer-cobertura span
, .customer-nro-operarios span
, .customer-motivo-perdida span
, .customer-birthday span {
    margin-left: 10px;
}

.customer-address
, .customer-phone
, .customer-phone2
, .customer-rubro
, .customer-fjuridica
, .customer-ubicacion
, .customer-email
, .customer-seller
, .customer-dir-entrega
, .customer-requiere-ocompra
, .customer-castigo-cartera
, .customer-estructura
, .customer-cobertura
, .customer-nro-operarios
, .customer-motivo-perdida
, .customer-celular
, .customer-celular2
, .customer-birthday {
    display: flex;
    align-items: center;
}

.font-modal-alert-cheque
, .font-edita-email
, .font-edita-celular
, div#modal_recaudo {
    font-size: 1vw;
}

div#fila_forma_pago {
    align-items: center;
}

canvas#signature_pad {
    border: 2px solid var(--rojo-wurth);
    border-radius: 10px;
}

.mensaje-faltan-datos-cliente {
    width: 60vw;
    max-height: 70vh;
}

.exito-recaudo-container > div {
    display: grid;
    grid-template-columns: 1fr 5fr;
}

.gestion {
    font-size: 1vw;
}

img.help-recaudo {
    max-height: 55vh;
}

.edita-email-container
, .edita-celular-container {
    width: 40vw;
    padding: 20px;
}

input.data-email
, input.data-celular {
    width: 100%;
}

i#edit_email , i#edit_celular {
    margin: 0px 10px;
}

span.tipo-pago-label {
    font-size: 1vw;
    font-weight: bold;
}

select#tipo_pago_select {
    font-size: 1vw;
}

.add-new-prospect-data-container {
    width: 55vw;
    border: 1px solid black;
    padding: 20px;
    border-radius: 10px;
}

.add-new-prospect-container {
    display: grid;
    max-height: 80vh;
}

span.add-new-prospect-title {
    font-size: 1.2vw;
    font-weight: bold;
    padding: 20px;
}

.celular-hint {
    display: block;
    color: #c0392b;
    font-size: 0.75em;
    margin-top: 3px;
}

.campo-add-prospect {
    font-size: 0.9vw;
    margin: 10px 0px;
    border: 0.1px solid rgb(220, 220, 220);
    padding: 10px;
    border-radius: 10px;
    display: grid;
    flex-grow: 1; /* Para que los elementos se expandan */
    // max-width: calc(25% - 10px); /* Ancho máximo para cuatro elementos por fila */
}

.add-new-prospect-data-container {
    width: 55vw;
    border: 1px solid black;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 68vh;
    column-gap: 10px;
    box-sizing: border-box;
}

.campo-add-prospect {
    /* También puedes usar calc(33.33% - 10px) para tres elementos por fila,
       // calc(50% - 10px) para dos elementos por fila, y calc(100% - 10px) para uno por fila */
}

// /* Ajuste para el caso de un solo elemento por fila */
// .campo-add-prospect:nth-child(odd) {
    // max-width: calc(100% - 10px);
// }

// /* Ajuste para el caso de dos elementos por fila */
// @media screen and (max-width: 1100px) {
    // .campo-add-prospect:nth-child(odd),
    // .campo-add-prospect:nth-child(odd) ~ .campo-add-prospect {
        // max-width: calc(50% - 10px);
    // }
// }

// /* Ajuste para el caso de tres elementos por fila */
// @media screen and (max-width: 800px) {
    // .campo-add-prospect:nth-child(4n+1),
    // .campo-add-prospect:nth-child(4n+2),
    // .campo-add-prospect:nth-child(4n+3),
    // .campo-add-prospect:nth-child(4n+4) {
        // max-width: calc(33.33% - 10px);
    // }
// }

// /* Ajuste para el caso de cuatro elementos por fila */
// @media screen and (max-width: 600px) {
    // .campo-add-prospect:nth-child(3n+1),
    // .campo-add-prospect:nth-child(3n+2),
    // .campo-add-prospect:nth-child(3n+3),
    // .campo-add-prospect:nth-child(3n+4),
    // .campo-add-prospect:nth-child(3n+5),
    // .campo-add-prospect:nth-child(3n+6) {
        // max-width: calc(25% - 10px);
    // }
// }

.campo-add-prospect[dato="nombre"]  {
	flex-basis: 100%;
}

.campo-add-prospect[dato="alias"] {
    flex-basis: calc((60% - 10px) - 20px);
}

.campo-add-prospect[dato="es_proveedor"] {
    flex-basis: calc((30% - 10px) - 20px);
}

.campo-add-prospect[dato="subdivision"]  {
	flex-basis: calc((50% - 10px) - 20px);
}

.campo-add-prospect[dato="segmento"]  {
	flex-basis: calc((50% - 10px) - 20px);
}

.campo-add-prospect[dato="country"]  {
	flex-basis: calc((50% - 10px) - 20px);
}

.campo-add-prospect[dato="town"]  {
	flex-basis: calc((50% - 10px) - 20px);
}

.campo-add-prospect[dato="email"]  {
	flex-basis: calc((45% - 10px) - 20px);
}

.campo-add-prospect[dato="address"]  {
	flex-basis: calc((55% - 10px) - 20px);
}

.campo-add-prospect[dato="celular"]  {
	flex-basis: calc((10% - 10px) - 20px);
}

.campo-add-prospect[dato="rut"]  {
	flex-basis: calc((60% - 10px) - 20px);
}

.campo-add-prospect[dato="tipo_doc"]  {
	flex-basis: calc((38% - 10px) - 20px);
}

.campo-add-prospect[dato="sucursal"]  {
	flex-basis: calc((38% - 10px) - 20px);
}

.campo-add-prospect[dato="forma_juridica"]  {
	flex-basis: calc((10% - 10px) - 20px);
}

.campo-add-prospect[dato="es_referido"]  {
	flex-basis: calc((10% - 10px) - 20px);
}

.campo-add-prospect.campo-check-full {
	flex-basis: 100%;
	border: none;
	padding: 4px 10px;
	display: flex;
	align-items: center;
}

.campo-ciudad-inline {
	font-size: 0.82em;
	color: #888;
	padding-left: 2px;
}

.campo-add-prospect > label {
	font-weight: bold;
}

.view-info-container {
    width: 80vw;
    height: 80vh;
}

.required::after {
	content: "*";
	color: var(--rojo-wurth);
	margin-left: 5px;
	font-size: 1.2vw;
}

.wrapper-firma-cprospecto {
    border: 0.1px solid var(--rojo-wurth);
    border-radius: 10px;
    padding: 3px;
}

.container-account {
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    overflow: auto;
}

.view-comerciaux-container {
    border: 1px solid black;
    padding: 10px;
    border-radius: 10px;
    max-height: 60vh;
    overflow: auto;
}

.view-comerciaux-container li {
	list-style-type: none;
	margin: 5px 0;
}

.view-comerciaux-container li i {
	margin-right: 10px;
}

span.title-transfer-container {
    font-size: 1vw;
    font-weight: bold;
}

.transfer-container {
    padding: 5px 10px;
    margin: 10px;
    border: 1px solid black;
    border-radius: 10px;
    max-height: 70vh;
    overflow: auto;
    width: 85vw;
}

.contenedor-suma-transfer {
    font-size: 1vw;
    margin: 10px;
    color: var(--rojo-wurth);
    font-weight: bold;
    width: 35%;
    display: flex;
    justify-content: space-between;
}

.theader-reg-tx, .tfila-reg-tx {
    font-size: 1vw;
    display: grid;
    column-gap: 10px;
}

.theader-reg-tx {
    font-weight: bold;
    background: rgb(220, 220, 220);
    padding: 10px;
    text-align: center;
	border-radius: 10px;
}

.input-group-append {
    display: grid;
    grid-template-columns: 20% 80%;
}

.tfila-reg-tx {
    padding: 5px 10px;
}

input.vr-pagar-factura {
    text-align: right;
	width: 100%;
}

.tlabel-reg-tx[dato="no_factura"], .tlabel-reg-tx[dato="fecha"], .tlabel-reg-tx[dato="dias"], .tlabel-reg-tx[dato="incluye rte fte"], .tlabel-reg-tx[dato="abono igual a total"], .tlabel-reg-tx[dato="sucursal"], .tlabel-reg-tx[dato="fecha_prontopago"] {
    display: flex;
    justify-content: center;
    align-items: center;
	text-align: center;
}

.tlabel-reg-tx[dato="saldo"], .tlabel-reg-tx[dato="Vlr rte fte"], .tlabel-reg-tx[dato="Total"], .tlabel-reg-tx[dato="Abono"], .tlabel-reg-tx[dato="intereses"], .tlabel-reg-tx[dato="honorarios"], .tlabel-reg-tx[dato="porcentaje_dcto"] {
    display: flex;
    justify-content: right;
	text-align: right;
    align-items: center;
}

div#total_saldo {
    margin: 10px;
}

input#vr_transferencia {
    text-align: right;
}

i.fas.fa-arrow-right.fill_ammont {
    display: flex;
    justify-content: left;
    align-items: center;
}

.soporte-container {
    width: 40vw;
    font-size: 1.2vw;
}

input.vr-pagar-factura {
    text-align: right;
    width: 100%;
    border: 1px solid;
    border-radius: 10px;
    background: rgb(220, 220, 220);
}

div#modal_transferencias {
    padding: 10px 0px;
    font-size: clamp(1vw, 1.05vw, 2vw);
}

span.title-transfer-container {
    font-size: 1.5vw;
    margin: 10px;
}

.font-consignment, .font-confirm-consignment, .font-consignment-options, .font-confirm-user-survey, .font-user-survey-exits, .font-user-survey-save-sucess , .font-confirm-user-activity, .font-user-activity-exits, .font-user-activity-save-sucess {
	font-size: 1.1vw;
}

.consignment-container {
    width: 50vw;
    height: 70vh;
    border: 1px solid var(--rojo-wurth);
    border-radius: 10px;
    overflow: auto;
    display: grid;
    grid-template-rows: 10% 30% 50% 10%;
}

.datos-generales-consignment {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    border: 1px solid;
    padding: 10px;
    border-radius: 10px;
    margin: 0px 10px;
}

.campo-consignment[dato="fecha_consignment"], .campo-consignment[dato="metodo_consignment"], .campo-consignment[dato="banco_cheque"], .campo-consignment[dato="fecha_cheque"] {
    flex-basis: 100%;
}

.campo-consignment {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.campo-consignment[dato="total_consignment"] {
	font-size: 1.3vw;
	color: var(--rojo-wurth);
	font-weight: bold;
	margin: 10px;
}

.campo-consignment > label {
	font-weight: bold;
}

.paiement-consignment-header, .paiement-consignment-line {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    font-size: 1.1vw;
    margin: 0px 10px;
}

.paiement-consignment-header {
    background: rgb(220, 220, 220);
    padding: 10px;
    border-radius: 10px;
    margin: 5px 0px;
    font-weight: bold;
    text-align: center;
    margin: 10px 10px;
}

.paiement-consignment-line > div[dato="referencia"], .paiement-consignment-line > div[dato="fecha"], .paiement-consignment-line > div[dato="consignar"] {
	text-align: center;
}

.paiement-consignment-line > div[dato="valor"] {
	text-align: right;
}

.paiement-consignment-body {
    height: 80%;
    overflow: auto;
    margin: 0px 10px;
}

.title-consignment {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: bold;
    font-size: 1.3vw;
    margin: 0px 10px;
}

.campo-consignment > label {
	display: flex;
	align-items: center;
}

input#fecha_consignment, input#fecha_cheque {
    display: flex;
    border: none;
}

.detalle-pago-container {
    font-size: 1.1vw;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    height: 47vh;
    width: 30vw;
}

.campo-consignment-detail {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

b.simula-boton {
    background: rgb(220, 220, 220);
    padding: 5px;
    border-radius: 7px;
}

input.dato-consignment-detail {
    text-align: right;
}

.consignment-detail-container {
    width: 80vw;
    max-height: 60vh;
    overflow: auto;
    display: grid;
}

.campo {
    padding: 5px;
    display: grid;
    grid-template-columns: 35% 65%;
}

.campo > label {
    font-weight: bold;
}

.consignment-lines-header, .consignment-lines-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.consignment-lines-header {
    padding: 10px;
    background: var(--rojo-wurth);
    color: white;
    border-radius: 10px;
    font-size: 1.1vw;
    font-weight: bold;
}

.consignment-detail-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.consignment-lines-body > div:not(:last-child) {
    border-right: 1px solid black;
}

.consignment-lines-body > div {
	padding: 5px;
}

.consignment-lines-body {
    margin: 5px 0px;
    font-size: 1.1vw;
}

.consignment-lines-body-label-ref, .consignment-lines-body-label-fecha, .consignment-lines-body-label-nitsuc, .consignment-lines-body-label-tipo {
    text-align: center;
}

.consignment-lines-body-label-amount {
    text-align: right;
}

.icon-view-consignment-detail {
    font-size: 1.5vw;
    margin: 0px 10px;
    color: var(--rojo-wurth);
    display: -webkit-inline-box;
    cursor: pointer;
}

.user-survey-options-container, .consignment-options-container, .user-ausentismos-options-container, .user-comodatos-options-container, .user-kits-options-container {
    padding: 10px;
    font-size: 1.1vw;
    width: 20vw;
}

.user-survey-options-container > p, .consignment-options-container > p, .user-ausentismos-options-container > p, .user-comodatos-options-container > p, .user-kits-options-container > p {
	text-align: center;
	font-weight: bold;
}

.menu-user-survey, .menu-seller-consg, .menu-user-ausentismos, .menu-user-comodatos, .menu-user-kits {
	list-style-type: none; /* Quitar viñetas */
	padding: 0; /* Quitar padding predeterminado */
	margin: 0; /* Quitar margen predeterminado */
	// width: 200px; /* Ancho del menú */
	background-color: #f9f9f9; /* Color de fondo */
	border: 1px solid #ccc; /* Borde */
}

.opcion-user-survey, .opcion-seller-consg, .opcion-user-ausentismos, .opcion-user-comodatos, .opcion-user-kits {
	padding: 15px; /* Espacio interno */
	// text-align: center; /* Centrar texto */
	cursor: pointer; /* Cambiar el cursor al pasar por encima */
	border-bottom: 1px solid #ccc; /* Borde inferior para separar items */
}

.opcion-user-survey:last-child, .opcion-seller-consg:last-child, .opcion-user-ausentismos:last-child, .opcion-user-comodatos:last-child, .opcion-user-kits:last-child {
	border-bottom: none; /* Quitar borde inferior del último item */
}

.opcion-user-survey:hover, .opcion-seller-consg:hover, .opcion-user-ausentismos:hover, .opcion-user-comodatos:hover, .opcion-user-kits:hover {
	background-color: var(--rojo-wurth);
	color: white; /* Cambiar color del texto al pasar el mouse */
}

p.title-user-survey {
    font-size: 1.5vw;
    color: var(--rojo-wurth);
    font-weight: bold;
}

p.user-survey-criteria-paragraph {
    font-weight: bold;
}

// .user-survey-container {
    // border: 1px solid;
    // margin: 5px 10px;
    // padding: 10px;
    // border-radius: 10px;
// }

.user-survey-container {
    width: 45vw;
    border: 1px solid black;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    column-gap: 10px;
    max-height: 70vh;
}

.campo-user-survey[dato-user-survey="chck_inspeccion"]
, .campo-user-survey[dato-user-survey="chck_tecno"]
, .campo-user-survey[dato-user-survey="chck_soat"]
, .campo-user-survey[dato-user-survey="chck_licencia"]
, .campo-user-survey[dato-user-survey="kilometraje"]
, .campo-user-survey[dato-user-survey="fecha_user_survey"]
, .campo-user-survey[dato-user-survey="placa_vehiculo"] {
    flex-basis: 100%;
}

.campo-user-survey {
    display: flex;
    justify-content: space-between;
    border: 1px solid rgb(220,220,220);
    margin: 5px 0px;
    padding: 5px;
    border-radius: 5px;
}

input#kilometraje {
    width: 40%;
    text-align: right;
}

input#placa_vehiculo {
    width: 40%;
    text-transform: uppercase;
}

p.user-survey-field_required {
    font-size: smaller;
    color: var(--rojo-wurth);
    font-weight: bold;
}

.font-id-customer-already-exist {
	font-size: 1.1vw;
	color: var(--rojo-wurth);
}

textarea#product_description {
    margin: 5px 2vw;
    padding: 15px;
    border-radius: 10px;
    width: -webkit-fill-available;
}

span.product-description-modify-title {
    font-weight: bold;
    margin: 0px 2vw;
}

.report-coordinates-fault-container {
    width: 40vw;
    border: 1px solid;
    margin: 10px 0px;
    padding: 10px;
    border-radius: 10px;
}

p.report-coordinates-fault-title {
    font-size: large;
    font-weight: bold;
    text-align: center;
}

p.report-coordinates-fault-help {
    font-size: medium;
    text-align: justify;
}

i#obtain_new_customer_coordinates {
    font-size: xx-large;
    margin: 10px;
}

.report-new-coordinates-container {
    display: grid;
    grid-template-columns: 20% 80%;
    align-items: center;
}

.data-obtain-new-customner-coordinates {
    border: 1px solid rgb(150, 150, 150);
    border-radius: 10px;
    padding: 10px;
}

textarea#comments_visity {
    margin: 20px 0px;
    width: 95%;
    border-radius: 10px;
    min-height: 15vh;
}

.category-products {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
}

.post-sales-service-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 6vh;
}

i#register_return, i#register_master_service {
    background: rgb(225, 225, 225);
    padding: 10px;
    border-radius: 10px;
}

.returnable-orders-container {
    width: 70vw;
    border: 1px solid;
    max-height: 70vh;
    border-radius: 10px;
    margin: 10px 0px;
    padding: 10px;
    overflow: auto;
}

.returnable-orders-header, .returnable-orders-body-line {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr;
	font-size: clamp(1vw, 1.05vw, 2vw);
}

.returnable-orders-header {
    text-align: center;
    background: rgb(220, 220, 220);
    padding: 10px;
    border-radius: 10px;
    font-weight: bold;
}

.returnable-orders-body {
    border: 1px solid rgb(220, 220, 220);
    margin-top: 10px;
    border-radius: 10px;
    padding: 10px;
    max-height: 40vh;
    overflow: auto;
}

.returnable-orders-body-line {
    margin: 5px 0px;
    padding: 5px 0px;
}

.returnable-orders-body-line:nth-child(odd) {
	background-color: rgb(230, 230, 230); /* Color de fondo para filas impares */
}

.returnable-orders-body-line:nth-child(even) {
	background-color: #ffffff; /* Color de fondo para filas pares */
}

.returnable-orders-body-line > div[dato="no_order"], .returnable-orders-body-line > div[dato="days_validate"], .returnable-orders-body-line > div[dato="date_validate"] {
	text-align: center;
}

.returnable-orders-paragraph {
    font-size: 1.5vw;
    padding: 10px;
}

// .returnable-orders-search-product-container {
    // border: 1px solid var(--rojo-wurth);
    // padding: 10px;
    // border-radius: 10px;
    // display: grid;
    // grid-template-columns: 1fr 1fr;
    // font-size: 1.3vw;
    // grid-gap: 20px;
// }

.returnable-orders-search-product-container {
    border: 1px solid var(--rojo-wurth);
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    column-gap: 10px;
    font-size: clamp(1vw, 1.05vw, 2vw);
}

.return-detail-container {
    border: 1px solid var(--rojo-wurth);
    padding: 10px;
    border-radius: 10px;
    margin: 5px 0px;
    font-size: clamp(1vw, 1.05vw, 2vw);
    overflow: auto;
    width: 80vw;
    max-height: 60vh;
}

.return-detail-container-header, .return-detail-container-body-line {
    display: grid;
    grid-template-columns: 4fr 1fr 1fr 1fr;
	font-size: clamp(1vw, 1.05vw, 2vw);
}

.return-detail-container-header {
    background: rgb(220, 220, 220);
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
}

.return-detail-container-body {
    border: 1px solid rgb(200, 200, 200);
    margin-top: 10px;
    padding: 5px 10px;
}

.return-detail-container-body-line:nth-child(odd) {
	background: rgb(230, 230, 230);
}

.return-detail-container-body-line {
	padding: 5px 10px;
}

.return-detail-container-body-line > div[dato="qty"], .return-detail-container-body-line > div[dato="qty_delivery"], .return-detail-container-body-line > div[dato="qty_return"] {
    text-align: center;
}

input.qty-return {
    width: 3vw;
    border: 1px solid rgb(170, 170, 170);
    border-radius: 5px;
	text-align: center;
}

span.cointainer-shopping-add-options-save.inactivo {
    background: rgb(220,220,220);
    padding: 5px 10px;
    border-radius: 5px;
	cursor: no-drop;
}

span.cointainer-shopping-add-options-save.activo {
    color: white;
    background: var(--rojo-wurth);
    padding: 5px 10px;
    border-radius: 5px;
}

.category-title {
    margin: 10px 0px;
    border: 6px solid;
    padding: 0px 10px;
    text-align: center;
    border-radius: 10px;
    background: white;
}

span.returnable-orders-search-product-container-label {
    flex-basis: 60%;
}

input#search_product_to_return {
    flex-basis: 30%;
}

span.returnable-orders-search-product-selected {
    flex-basis: 100%;
	margin-top: 10px;
}


.product-search-autocomplete {
	max-height: 30vh;
	overflow-y: auto;
}

.product-search-autocomplete .ui-menu-item {
	font-size: clamp(1vw, 1.05vw, 2vw);
}

.product-search-autocomplete .ui-menu-item:hover {
	background-color: var(--rojo-wurth);
	color: white;
}

.product-search-autocomplete .ui-state-active {
	background-color: var(--rojo-wurth);
	color: white;
	border: none;
}

// .font-return-detail, .font-returnable-orders, .font-msj, .font-data-return, .font-upload-photo-products-return, .font-golden-minute {
    // font-size: clamp(10px, 1.2vw, 24px);
    // color: blueviolet;
// }

.data-return-container {
    width: 50vw;
    max-height: 75vh;
    overflow: auto;
    margin: 5px 0px;
    padding: 5px;
    border-radius: 10px;
    display: grid;
    grid-template-rows: 4.5fr 0.5fr 5fr;
    grid-gap: 10px;
    font-size: clamp(10px, 1vw, 20px);
}

.data-mservice-container {
    width: 50vw;
    max-height: 75vh;
    overflow: auto;
    margin: 5px 0px;
    padding: 5px;
    border-radius: 10px;
    display: grid;
    grid-template-rows: auto 0.5fr 5fr;
    grid-gap: 10px;
    font-size: clamp(10px, 1vw, 20px);
}

span.data-return-title, span.data-mservice-title {
    font-weight: bold;
}

.campo-data-return, .campo-data-mservice{
    display: grid;
    grid-template-columns: 26% 9fr 1fr;
    grid-gap: 10px;
    padding: 5px;
}

.campo-data-return > label, .campo-data-mservice > label {
    font-weight: bold;
    display: flex;
    align-items: center;
}

i.dato-data-return {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5vw;
}

.campo-data-return >i.fa-check.ok, .campo-data-mservice >i.fa-check.ok {
    width: 2vw;
    height: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--verde-wurth);
}

.campo-data-return >i.fa-check.ko, .campo-data-mservice >i.fa-check.ko {
    display: none;
}

.msj-container {
    width: 40vw;
    text-align: justify;
    align-items: center;
    min-height: 100px;
}

.upload-images-orders-return-container, .upload-images-orders-mservice-container {
    width: 40vw;
    border: 1px solid var(--rojo-wurth);
    margin: 10px 0px;
    padding: 10px;
    border-radius: 10px;
    height: 40vh;
    overflow: auto;
}

.campo-data-return-photo, .campo-data-mservice-photo {
    display: grid;
    grid-template-rows: auto;
    grid-gap: 20px;
}

.wrapper-firma {
    width: 100%;
    height: 100%;
}

canvas#customer_signature_pad, canvas#seller_signature_pad {
    width: 100%;
    height: 100%;
}

div#preview_foto_soporte.ok, div#preview_foto_soporte1.ok, div#preview_foto_soporte2.ok, div#preview_foto_soporte3.ok, div#preview_customer_sign.ok, div#preview_seller_sign.ok {
    border: 1px solid rgb(200, 200, 200);
    padding: 5px;
    width: 2vw;
    height: 2vw;
    border-radius: 5px;
}

div#preview_foto_soporte.ko, div#preview_foto_soporte1.ko, div#preview_foto_soporte2.ko, div#preview_foto_soporte3.ko, div#preview_customer_sign.ko, div#preview_seller_sign.ko {
	display: none;
}

.dato-data-return-container, .dato-data-mservice-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.data-return-title-container, .data-mservice-title-container {
    background: rgb(220, 220, 220);
    padding: 10px;
    border-radius: 5px;
    text-align: justify;
}

.data-return-detail-container, .data-mservice-detail-container {
    /* padding: 10px; */
    border: 1px solid var(--verde-wurth);
    /* margin: 10px; */
    border-radius: 5px;
    overflow: auto;
}

.golden-minute-container {
    width: 95vw;
    max-height: 75vh;
    border: 1px solid;
    margin: 10px 0px;
    border-radius: 10px;
}

.golden-minute-title {
    font-size: clamp(10px, 1.3vw, 20px);
    color: var(--rojo-wurth);
    border: 4px solid;
    padding: 10px;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 20% 6% 76%;
    font-weight: bold;
}

.golden-minute-body-line, .golden-minute-header {
    display: grid;
    grid-template-columns: 1.2fr 4fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.golden-minute-header {
    margin: 10px 0px;
    background: rgb(220, 220 ,220);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    font-size: clamp(1vw, 1.05vw, 2vw);
    font-weight: bold;
}

.golden-minute-body-line {
    padding: 5px 10px;
}

.golden-minute-body-line >div[dato="iconos"] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
}

.golden-minute-body-line >span[dato="montos"] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.golden-minute-body-line >span[dato="referencia"], .golden-minute-body-line >span[dato="label"] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.golden-minute-body {
    font-size: clamp(1vw, 1.05vw, 2vw);
}

i.fa.fa-shopping-cart.add-suggested-product {
    font-size: 1.5vw;
}

.recaudo-container {
    width: 85vw;
}

.recaudo-title-container {
    display: flex;
    justify-content: space-around;
}

.recaudo-title-rte-fte-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

span.recaudo-title-rte-fte-label {
    margin-right: 10px;
    font-weight: bold;
}

i.fa.fa-arrow-right.ammount-equal-total.inactivo {
    color: rgb(220, 220, 220);
}

.body-facture > input[data-etiqueta="Abono"].inactivo {
    background: rgb(250, 250, 250);
    border: 1px solid rgb(220, 220, 220);
    color: rgb(220, 220, 200);
}

.user-activity-options-container, .consignment-options-container {
    padding: 10px;
    font-size: 1.1vw;
    width: 20vw;
}

.user-activity-options-container > p, .consignment-options-container > p {
	text-align: center;
	font-weight: bold;
}

.menu-user-activity, .menu-seller-consg {
	list-style-type: none; /* Quitar viñetas */
	padding: 0; /* Quitar padding predeterminado */
	margin: 0; /* Quitar margen predeterminado */
	// width: 200px; /* Ancho del menú */
	background-color: #f9f9f9; /* Color de fondo */
	border: 1px solid #ccc; /* Borde */
}

.opcion-user-activity, .opcion-seller-consg {
	padding: 15px; /* Espacio interno */
	// text-align: center; /* Centrar texto */
	cursor: pointer; /* Cambiar el cursor al pasar por encima */
	border-bottom: 1px solid #ccc; /* Borde inferior para separar items */
}

.opcion-user-activity:last-child, .opcion-seller-consg:last-child {
	border-bottom: none; /* Quitar borde inferior del último item */
}

.opcion-user-activity:hover, .opcion-seller-consg:hover {
	background-color: var(--rojo-wurth);
	color: white; /* Cambiar color del texto al pasar el mouse */
}

p.title-user-activity {
    font-size: 1.5vw;
    color: var(--rojo-wurth);
    font-weight: bold;
}

p.user-activity-criteria-paragraph {
    font-weight: bold;
}

// .user-activity-container {
    // border: 1px solid;
    // margin: 5px 10px;
    // padding: 10px;
    // border-radius: 10px;
// }

.user-activity-container {
    width: 45vw;
    border: 1px solid black;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    column-gap: 10px;
    max-height: 70vh;
}

.campo-user-activity[dato-user-activity="titulo"]
, .campo-user-activity[dato-user-activity="frecuencia"]
, .campo-user-activity[dato-user-activity="actividad"]
, .campo-user-activity[dato-user-activity="tiempo"]
, .campo-user-activity[dato-user-activity="objetivo"]
, .campo-user-activity[dato-user-activity="entregable"] {
    flex-basis: 100%;
}

.campo-user-activity {
    display: flex;
    justify-content: space-between;
    border: 1px solid rgb(220,220,220);
    margin: 5px 0px;
    padding: 5px;
    border-radius: 5px;
}

.body-facture > input[data-etiqueta="incluye rte fte"] {
	width: 1.5vw;
}

.price-history-container {
    border: 1px solid;
    border-radius: 10px;
    margin: 10px 0px;
    padding: 10px;
    width: 70vw;
    max-height: 60vh;
    overflow: auto;
}

.golden-minute-top-container {
    padding: 10px;
    background: white;
    position: sticky;
    top: 0;
}

.golden-minute-body {
    font-size: clamp(1vw, 1.05vw, 2vw);
    max-height: 50vh;
    overflow: auto;
}

select#mesAplicacionSelect {
    font-size: 1.1vw;
}

.master-top-section div#top_section_search {
    border: 1px solid;
    border-radius: 5px;
    padding: 5px;
    margin: 3px 0px;
    display: grid;
    grid-template-columns: 1fr 5fr 1fr 1fr;
    width: 84%;
    font-size: clamp(10px, 1.2vw, 20px);
    align-items: center;
}

input#search_field {
    width: 100%;
    height: 3vh;
}

.search-clear-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgb(180, 180, 180);
    font-size: clamp(10px, 1.1vw, 16px);
    transition: color 0.2s ease;
}

.search-clear-icon:hover {
    color: var(--rojo-wurth);
}

.customer-advanced-search-container {
    width: 85vw;
    height: 65vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    font-size: 1.1vw;
}

.customer-advanced-search-parameter-container, .customer-advanced-search-query-container, .product-advanced-search-parameter-container, .product-advanced-search-query-container {
    border: 1px solid var(--rojo-wurth);
    border-radius: 5px;
    padding: 10px;
}

p.customer-advanced-search-parameter-title, p.customer-advanced-search-query-title, p.product-advanced-search-parameter-container {
    font-weight: bold;
    text-align: center;
}

.customer-advanced-search-parameter-container {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    column-gap: 10px;
}

.campo-customer-advanced-search {
	flex-basis: 100%;
}

.campo-customer-advanced-search, .campo-product-advanced-search {
    flex-basis: 100%;
    border: 1px solid rgb(220, 220, 220);
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 95%;
}

.campo-customer-advanced-search > label, .campo-product-advanced-search > label {
	font-weight: bold;
}

#search_producto {
    flex-basis: 78%;  /* El input ocupará el 80% del espacio disponible */
    margin-right: 5%;
}

span#select2-search_rubro-container {
    width: 32vw;
}

.campo-customer-advanced-search:last-child {
    border: none;
}

li.customer-advanced-search-query-menu-option {
    list-style-type: none;
    border: 1px solid rgb(220, 220, 220);
    background: rgb(250, 250, 250);
    padding: 10px;
    margin: 5px;
    text-align: center;
    border-radius: 5px;
}

.customer-advanced-search-query-container, .product-advanced-search-query-container {
    max-height: 62vh;
    overflow: auto;
}

/* Modal búsqueda avanzada productos - campos compactos */
.modal-product-advanced-search .campo-product-advanced-search {
    margin: 2px 4px;
    padding: 3px 5px;
    font-size: 0.82vw;
}

.modal-product-advanced-search .campo-product-advanced-search > label {
    font-size: 0.8vw;
}

.modal-product-advanced-search .campo-product-advanced-search input,
.modal-product-advanced-search .campo-product-advanced-search select {
    font-size: 0.8vw;
    padding: 2px 4px;
}

.modal-product-advanced-search p.product-advanced-search-parameter-title,
.modal-product-advanced-search p.product-advanced-search-query-title {
    font-size: 0.85vw;
    margin: 3px 0;
}

.modal-product-advanced-search .product-advanced-search-parameter-container,
.modal-product-advanced-search .product-advanced-search-query-container {
    max-height: 75vh;
    overflow-y: auto;
}

.cointainer-doc-shopping-cart {
    font-size: clamp(1vw, 1.05vw, 2vw);
}

.box-multimedia {
    border: 1px solid rgb(200, 200, 200);
    width: 70%;
    margin: 5px 0px;
    border-radius: 5px;
    padding: 5px;
    display: grid;
    grid-template-columns: 7fr 7fr 4fr 1fr;
    font-size: clamp(10px, 1.5vw, 20px);
    align-items: center;
}

.document-customer-list-main-container, .statistics-list-main-container {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 20% 80%;
    max-height: 96vh;
	color: black;
	font-size: clamp(10px, 1.05vw, 14px);
}

.document-customer-list-left-container, .statistics-list-left-container {
    width: 100%;
    height: 100%;
    background: rgb(230, 230, 230);
    overflow: auto;
}

.document-customer-list-right-container {
    width: 100%;
    height: 100%;
    background: white;
    overflow: auto;
}

div.document-customer-list-option, div.statistics-list-option {
    background: var(--rojo-wurth);
    color: white;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
}


/********** INICIO - Definicion de estilos para los listados de gestión del vendedor *************/

.encabezado-array-orders, .encabezado-array-muestras, .encabezado-array-sellervisits, .encabezado-array-tickets, .encabezado-array-facturas, .encabezado-array-transferencias, .encabezado-array-devoluciones, .encabezado-array-devoluciones_pendientes, .encabezado-array-reposiciones, .encabezado-array-reposiciones_pendientes, .encabezado-array-recibos, .encabezado-array-rcpendientes, .encabezado-array-obsequios, .encabezado-array-propal, .encabezado-array-ordenes_servicio, .encabezado-array-visitas, .encabezado-array-consignaciones, .encabezado-array-cartera, .encabezado-array-envios, .encabezado-array-acompanamiento {
    display: grid;
    grid-template-columns: 5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    max-width: 90%;
}

.orders-list-container, .muestras-list-container, .tickets-list-container, .transferencias-list-container, .devoluciones-list-container, .devoluciones_pendientes-list-container, .reposiciones-list-container, .reposiciones_pendientes-list-container .obsequios-list-container, .propal-list-container, .ordenes_servicio-list-container, .visitas-list-container, .consignaciones-list-container, .cartera-list-container, .envios-list-container {
    border: 1px solid;
    width: 120vw;
    background: white;
}

.sellervisits-list-container {
    border: 1px solid;
    width: 180vw;
    background: white;
}

.recibos-list-container {
    border: 1px solid;
    width: 100vw;
    background: white;
}

.rcpendientes-list-container {
    border: 1px solid;
    width: 100vw;
    background: white;
}

.facturas-list-container {
    border: 1px solid;
    width: 100vw;
    background: white;
}

.orders-list-container .header, .array-orders-filtros, .orders-list-container .body {
    display: grid;
    grid-template-columns: 4fr 2fr 2fr 3fr 3fr 1.5fr 2fr 2fr 2fr 2fr;
}

.muestras-list-container .header, .array-muestras-filtros, .muestras-list-container .body {
    display: grid;
    grid-template-columns: 4fr 2fr 3fr 3fr 3fr 2fr 2fr 2fr;
}

.sellervisits-list-container .header, .array-sellervisits-filtros, .sellervisits-list-container .body {
    display: grid;
    grid-template-columns: 5% 15% 10% 10% 10% 5% 7% 7% 7% 7% 5% 7% 5%;
}

.tickets-list-container .header, .array-tickets-filtros, .tickets-list-container .body {
    display: grid;
    grid-template-columns: 1fr 18% 10% 1fr 1fr 1fr 8% 8% 8%;
}

.facturas-list-container .header, .array-facturas-filtros, .facturas-list-container .body {
    display: grid;
    grid-template-columns: 40% 10% 10% 15% 25%;
}

.transferencias-list-container .header, .array-transferencias-filtros, .transferencias-list-container .body {
    display: grid;
    grid-template-columns: 4fr 2fr 3fr 3fr 3fr 2fr 2fr 2fr;
}

.devoluciones-list-container .header, .array-devoluciones-filtros, .devoluciones-list-container .body {
    display: grid;
    grid-template-columns: 20% 8% 10% 20% 10% 10% 10% 10%;
}

.reposiciones-list-container .header, .array-reposiciones-filtros, .reposiciones-list-container .body {
    display: grid;
    grid-template-columns: 20% 8% 10% 20% 10% 10%;
}

.devoluciones_pendientes-list-container .header, .array-devoluciones_pendientes-filtros, .devoluciones_pendientes-list-container .body {
    display: grid;
    grid-template-columns: 20% 8% 10% 20% 10% 10% 10% 10%;
}

.reposiciones_pendientes-list-container .header, .array-reposiciones_pendientes-filtros, .reposiciones_pendientes-list-container .body {
    display: grid;
    grid-template-columns: 20% 8% 10% 20% 10% 10% 10% 10%;
}

.recibos-list-container .header, .array-recibos-filtros, .recibos-list-container .body {
    display: grid;
    grid-template-columns: 30% 12% 10% 25% 10% 10%;
}

.rcpendientes-list-container .header, .array-rcpendientes-filtros, .rcpendientes-list-container .body {
    display: grid;
    grid-template-columns: 30% 12% 10% 25% 10% 10%;
}

.obsequios-list-container .header, .array-obsequios-filtros, .obsequios-list-container .body {
    display: grid;
    grid-template-columns: 4fr 2fr 3fr 3fr 3fr 2fr 2fr 2fr;
}

.propal-list-container .header, .array-propal-filtros, .propal-list-container .body {
    display: grid;
    grid-template-columns: 4fr 2fr 3fr 3fr 3fr 2fr 2fr 2fr 2fr;
}

.ordenes_servicio-list-container .header, .array-ordenes_servicio-filtros, .ordenes_servicio-list-container .body {
    display: grid;
    grid-template-columns: 20% 8% 10% 20% 10% 10% 10% 10%;
}

.visitas-list-container .header, .array-visitas-filtros, .visitas-list-container .body {
    display: grid;
    grid-template-columns: 4fr 2fr 3fr 3fr 3fr 2fr 2fr;
}

.consignaciones-list-container .header, .array-consignaciones-filtros, .consignaciones-list-container .body {
    display: grid;
    grid-template-columns: 4fr 2fr 3fr 3fr 3fr 2fr 2fr;
}

.cartera-list-container .header, .array-cartera-filtros, .cartera-list-container .body {
    display: grid;
    grid-template-columns: 4fr 2fr 2fr 3fr 3fr 1.5fr 2fr 2fr 2fr 2fr;
}

.envios-list-container .header, .array-envios-filtros, .envios-list-container .body {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 2fr 1fr 1.5fr 3fr 1fr 2fr 1.5fr 1fr 1fr 1fr 1fr 1fr;
}

.orders-list-container .header, .muestras-list-container .header, .sellervisits-list-container .header, .tickets-list-container .header, .facturas-list-container .header, .transferencias-list-container .header, .devoluciones-list-container .header, .devoluciones_pendientes-list-container .header, .reposiciones-list-container .header, .reposiciones_pendientes-list-container .header, .recibos-list-container .header, .rcpendientes-list-container .header, .obsequios-list-container .header, .propal-list-container .header, .ordenes_servicio-list-container .header, .visitas-list-container .header, .consignaciones-list-container .header, .cartera-list-container .header, .envios-list-container .header {
    margin: 10px 0px;
    position: sticky;
    top: 160px;
}

.orders-list-container .theader, .muestras-list-container .theader, .sellervisits-list-container .theader, .tickets-list-container .theader, .facturas-list-container .theader, .transferencias-list-container .theader, .devoluciones-list-container .theader, .reposiciones-list-container .theader, .acompanamiento-list-container .theader, .devoluciones_pendientes-list-container .theader,.reposiciones_pendientes-list-container .theader, .recibos-list-container .theader, .rcpendientes-list-container .theader, .obsequios-list-container .theader, .propal-list-container .theader, .ordenes_servicio-list-container .theader, .visitas-list-container .theader, .consignaciones-list-container .theader, .cartera-list-container .theader, .envios-list-container .theader {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 6vh;
    display: flex;
    align-items: center;
    background: rgb(220,220,220);
    margin: 0px 2px;
    padding: 0px 5px;
    border-radius: 5px;
    border: 1px solid rgb(220, 220, 220);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
}

.orders-list-container .body .Cliente, .orders-list-container .body .Referencia, .orders-list-container .body .no-pedido, .orders-list-container .body .fecha-pedido, .orders-list-container .body .vendedor, .orders-list-container .body .estado, .orders-list-container .body .orden-compra, .orders-list-container .body .sub-total, .orders-list-container .body .iva, .orders-list-container .body .total {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
    align-items: center;
    margin: 0px 2px;
    padding: 0px 5px;
}

.muestras-list-container .body .Cliente, .muestras-list-container .body .Referencia, .muestras-list-container .body .fecha, .muestras-list-container .body .vendedor, .muestras-list-container .body .estado, .muestras-list-container .body .sub-total, .muestras-list-container .body .iva, .muestras-list-container .body .total {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
    align-items: center;
    margin: 0px 2px;
    padding: 0px 5px;
}

.tickets-list-container .body .Cliente, .tickets-list-container .body .Referencia, .tickets-list-container .body .fecha, .tickets-list-container .body .vendedor, .tickets-list-container .body .estado, .tickets-list-container .body .motivo, .tickets-list-container .body .categoria, .tickets-list-container .body .total {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
    align-items: center;
    margin: 0px 2px;
    padding: 0px 5px;
}

.facturas-list-container .body .Cliente, .facturas-list-container .body .Referencia, .facturas-list-container .body .fecha, .facturas-list-container .body .vendedor, .facturas-list-container .body .estado, .facturas-list-container .body .sub-total, .facturas-list-container .body .iva, .facturas-list-container .body .total {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
    align-items: center;
    margin: 0px 2px;
    padding: 0px 5px;
}

.transferencias-list-container .body .Cliente, .transferencias-list-container .body .Referencia, .transferencias-list-container .body .fecha, .transferencias-list-container .body .vendedor, .transferencias-list-container .body .estado, .transferencias-list-container .body .sub-total, .transferencias-list-container .body .iva, .transferencias-list-container .body .total {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
    align-items: center;
    margin: 0px 2px;
    padding: 0px 5px;
}

.devoluciones-list-container .body .Cliente, .devoluciones-list-container .body .Referencia, .devoluciones-list-container .body .fecha, .devoluciones-list-container .body .vendedor, .devoluciones-list-container .body .estado, .devoluciones-list-container .body .sub-total, .devoluciones-list-container .body .iva, .devoluciones-list-container .body .total {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
    align-items: center;
    margin: 0px 2px;
    padding: 0px 5px;
}

.reposiciones-list-container .body .Cliente, .reposiciones-list-container .body .Referencia, .reposiciones-list-container .body .fecha, .reposiciones-list-container .body .vendedor, .reposiciones-list-container .body .estado, .reposiciones-list-container .body .sub-total, .reposiciones-list-container .body .iva, .reposiciones-list-container .body .total {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
    align-items: center;
    margin: 0px 2px;
    padding: 0px 5px;
}

.devoluciones_pendientes-list-container .body .Cliente, .devoluciones_pendientes-list-container .body .Referencia, .devoluciones_pendientes-list-container .body .fecha, .devoluciones_pendientes-list-container .body .vendedor, .devoluciones_pendientes-list-container .body .estado, .devoluciones_pendientes-list-container .body .sub-total, .devoluciones_pendientes-list-container .body .iva, .devoluciones_pendientes-list-container .body .total {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
    align-items: center;
    margin: 0px 2px;
    padding: 0px 5px;
}

.reposiciones_pendientes-list-container .body .Cliente, .reposiciones_pendientes-list-container .body .Referencia, .reposiciones_pendientes-list-container .body .fecha, .reposiciones_pendientes-list-container .body .vendedor, .reposiciones_pendientes-list-container .body .estado, .reposiciones_pendientes-list-container .body .sub-total, .reposiciones_pendientes-list-container .body .iva, .reposiciones_pendientes-list-container .body .total {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
    align-items: center;
    margin: 0px 2px;
    padding: 0px 5px;
}

.recibos-list-container .body .Cliente, .recibos-list-container .body .Referencia, .recibos-list-container .body .fecha, .recibos-list-container .body .vendedor, .recibos-list-container .body .estado, .recibos-list-container .body .sub-total, .recibos-list-container .body .iva, .recibos-list-container .body .total {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
    align-items: center;
    margin: 0px 2px;
    padding: 0px 5px;
}

.rcpendientes-list-container .body .Cliente, .rcpendientes-list-container .body .Referencia, .rcpendientes-list-container .body .fecha, .rcpendientes-list-container .body .vendedor, .rcpendientes-list-container .body .estado, .rcpendientes-list-container .body .sub-total, .rcpendientes-list-container .body .iva, .rcpendientes-list-container .body .total {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
    align-items: center;
    margin: 0px 2px;
    padding: 0px 5px;
}

.obsequios-list-container .body .Cliente, .obsequios-list-container .body .Referencia, .obsequios-list-container .body .fecha, .obsequios-list-container .body .vendedor, .obsequios-list-container .body .estado, .obsequios-list-container .body .sub-total, .obsequios-list-container .body .iva, .obsequios-list-container .body .total {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
    align-items: center;
    margin: 0px 2px;
    padding: 0px 5px;
}

.propal-list-container .body .Cliente, .propal-list-container .body .Referencia, .propal-list-container .body .fecha-creacion, .propal-list-container .body .fecha-cotizacion, .propal-list-container .body .vendedor, .propal-list-container .body .estado, .propal-list-container .body .sub-total, .propal-list-container .body .iva, .propal-list-container .body .total {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
    align-items: center;
    margin: 0px 2px;
    padding: 0px 5px;
}

.ordenes_servicio-list-container .body .Cliente, .ordenes_servicio-list-container .body .Referencia, .ordenes_servicio-list-container .body .fecha, .ordenes_servicio-list-container .body .vendedor, .ordenes_servicio-list-container .body .estado, .ordenes_servicio-list-container .body .sub-total, .ordenes_servicio-list-container .body .iva, .ordenes_servicio-list-container .body .total {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
    align-items: center;
    margin: 0px 2px;
    padding: 0px 5px;
}

.visitas-list-container .body .Cliente, .visitas-list-container .body .Referencia, .visitas-list-container .body .fecha, .visitas-list-container .body .vendedor, .visitas-list-container .body .estado, .visitas-list-container .body .sub-total, .visitas-list-container .body .iva, .visitas-list-container .body .total {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
    align-items: center;
    margin: 0px 2px;
    padding: 0px 5px;
}

.consignaciones-list-container .body .Cliente, .consignaciones-list-container .body .Referencia, .consignaciones-list-container .body .fecha, .consignaciones-list-container .body .vendedor, .consignaciones-list-container .body .estado, .consignaciones-list-container .body .sub-total, .consignaciones-list-container .body .iva, .consignaciones-list-container .body .total {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
    align-items: center;
    margin: 0px 2px;
    padding: 0px 5px;
}

.cartera-list-container .body .Cliente, .cartera-list-container .body .Referencia, .cartera-list-container .body .fecha, .cartera-list-container .body .vendedor, .cartera-list-container .body .estado, .cartera-list-container .body .sub-total, .cartera-list-container .body .iva, .cartera-list-container .body .total {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
    align-items: center;
    margin: 0px 2px;
    padding: 0px 5px;
}

.envios-list-container .body .id-pedido, .envios-list-container .body .referencia, .envios-list-container .body .fecha-pedido, .envios-list-container .body .vendedor, .envios-list-container .body .estado, .envios-list-container .body .sub-total, .envios-list-container .body .iva, .envios-list-container .body .total {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
    align-items: center;
    margin: 0px 2px;
    padding: 0px 5px;
}

.array-orders-filtros .search, .array-muestras-filtros .search, .array-sellervisits-filtros .search, .array-tickets-filtros .search, .array-facturas-filtros .search, .array-transferencias-filtros .search, .array-devoluciones-filtros .search, .array-reposiciones-filtros .search, .array-acompanamiento-filtros .search, .array-devoluciones_pendientes-filtros .search,.array-reposiciones_pendientes-filtros .search, .array-recibos-filtros .search, .array-rcpendientes-filtros .search, .array-obsequios-filtros .search, .array-propal-filtros .search, .array-ordenes_servicio-filtros .search, .array-visitas-filtros .search, .array-consignaciones-filtros .search, .array-cartera-filtros .search, .array-envios-filtros .search {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 6vh;
    display: flex;
    align-items: center;
    background: var(--rojo-wurth-tx);
    margin: 0px 2px;
    padding: 0px 5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    text-align: center;
    font-weight: bold;
}

.array-orders-filtros .search > input, .array-muestras-filtros .search > input, .array-sellervisits-filtros .search > input, .array-tickets-filtros .search > input, .array-facturas-filtros .search > input, .array-transferencias-filtros .search > input, .array-devoluciones-filtros .search > input, .array-reposiciones-filtros .search > input, .array-acompanamiento-filtros .search > input, .array-devoluciones_pendientes-filtros .search > input, .array-reposiciones_pendientes-filtros .search > input, .array-recibos-filtros .search > input, , .array-rcpendientes-filtros .search > input .array-obsequios-filtros .search > input, .array-propal-filtros .search > input, .array-ordenes_servicio-filtros .search > input, .array-visitas-filtros .search > input, .array-consignaciones-filtros .search > input, .array-cartera-filtros .search > input, .array-envios-filtros .search > input {
	max-width: 90%
}

.header-array-orders-container, .header-array-muestras-container, .header-array-sellervisits-container, .header-array-tickets-container, .header-array-facturas-container, .header-array-transferencias-container, .header-array-devoluciones-container, .header-array-devoluciones_pendientes-container, .header-array-reposiciones-container, .header-array-reposiciones_pendientes-container, .header-array-recibos-container, .header-array-rcpendientes-container, .header-array-obsequios-container, .header-array-propal-container, .header-array-ordenes_servicio-container, .header-array-visitas-container, .header-array-consignaciones-container, .header-array-cartera-container, .header-array-envios-container {
    border: 1px solid rgb(200, 200, 200);
    border-radius: 10px;
    padding: 0px 10px;
    width: 94vw;
    position: sticky;
    left: 4px;
    top: 4px;
    background: white;
}

.array-orders-filtros, .array-muestras-filtros, .array-sellervisits-filtros, .array-tickets-filtros, .array-facturas-filtros, .array-transferencias-filtros, .array-devoluciones-filtros, .array-reposiciones-filtros, .array-devoluciones_pendientes-filtros, .array-reposiciones_pendientes-filtros, .array-recibos-filtros, , .array-rcpendientes-filtros .array-obsequios-filtros, .array-propal-filtros, .array-ordenes_servicio-filtros, .array-visitas-filtros, .array-consignaciones-filtros {
    position: sticky;
    top: 50px;
}

.body-array-orders-container .body .fecha-pedido, .body-array-orders-container .body .estado {
	text-align: center;
	justify-content: center;
}

.body-array-propal-container .body .fecha-creacion, .body-array-propal-container .body .fecha-cotizacion{
	text-align: center;
	justify-content: center;
}

.body-array-orders-container .body .sub-total, .body-array-orders-container .body .iva, .body-array-orders-container .body .total, .body-array-muestras-container .body .sub-total, .body-array-muestras-container .body .iva, .body-array-muestras-container .body .total, .body-array-facturas-container .body .sub-total, .body-array-facturas-container .body .iva, .body-array-facturas-container .body .total, .body-array-transferencias-container .body .sub-total, .body-array-transferencias-container .body .iva, .body-array-transferencias-container .body .total, .body-array-devoluciones-container .body .sub-total, .body-array-reposiciones-container .body .sub-total, .body-array-devoluciones-container .body .iva, .body-array-reposiciones-container .body .iva, .body-array-devoluciones-container .body .total, .body-array-reposiciones-container .body .total, .body-array-devoluciones_pendientes-container .body .sub-total, .body-array-reposiciones_pendientes-container .body .sub-total, .body-array-devoluciones_pendientes-container .body .iva, .body-array-reposiciones_pendientes-container .body .iva, .body-array-devoluciones_pendientes-container .body .total, .body-array-reposiciones_pendientes-container .body .total, .body-array-obsequios-container .body .sub-total, .body-array-obsequios-container .body .iva, .body-array-obsequios-container .body .total, .body-array-ordenes_servicio-container .body .sub-total, .body-array-ordenes_servicio-container .body .iva, .body-array-ordenes_servicio-container .body .total, .body-array-visitas-container .body .sub-total, .body-array-visitas-container .body .iva, .body-array-visitas-container .body .total, .body-array-consignaciones-container .body .sub-total, .body-array-consignaciones-container .body .iva, .body-array-consignaciones-container .body .total, .body-array-cartera-container .body .sub-total, .body-array-cartera-container .body .iva, .body-array-cartera-container .body .total, .body-array-envios-container .body .sub-total, .body-array-envios-container .body .iva, .body-array-envios-container .body .total {
	text-align: right;
	justify-content: right;
}

.body-array-muestras-container .body .Referencia, .body-array-muestras-container .body .fecha {
	text-align: center;
	justify-content: center;
}

.body-array-tickets-container .body .Referencia, .body-array-tickets-container .body .fecha {
	text-align: center;
	justify-content: center;
}

.body-array-transferencias-container .body .Referencia, .body-array-transferencias-container .body .fecha {
	text-align: center;
	justify-content: center;
}

.body-array-devoluciones-container .body .Referencia, .body-array-devoluciones-container .body .fecha {
	text-align: center;
	justify-content: center;
}

.body-array-reposiciones-container .body .Referencia, .body-array-reposiciones-container .body .fecha {
	text-align: center;
	justify-content: center;
}

.body-array-devoluciones_pendientes-container .body .Referencia, .body-array-devoluciones_pendientes-container .body .fecha {
	text-align: center;
	justify-content: center;
}

.body-array-reposiciones_pendientes-container .body .Referencia, .body-array-reposiciones_pendientes-container .body .fecha {
	text-align: center;
	justify-content: center;
}

.body-array-facturas-container .body .nitsuc, .body-array-facturas-container .body .Referencia, .body-array-facturas-container .body .fecha {
	text-align: center;
	justify-content: center;
}

.body-array-recibos-container .body .Referencia, .body-array-recibos-container .body .fecha {
	text-align: center;
	justify-content: center;
}

.body-array-rcpendientes-container .body .Referencia, .body-array-rcpendientes-container .body .fecha {
	text-align: center;
	justify-content: center;
}

.body-array-obsequios-container .body .Referencia, .body-array-obsequios-container .body .fecha {
	text-align: center;
	justify-content: center;
}

.body-array-ordenes_servicio-container .body .Referencia, .body-array-ordenes_servicio-container .body .fecha {
	text-align: center;
	justify-content: center;
}

.body-array-visitas-container .body .Referencia, .body-array-visitas-container .body .fecha {
	text-align: center;
	justify-content: center;
}

.body-array-consignaciones-container .body .Referencia, .body-array-consignaciones-container .body .fecha {
	text-align: center;
	justify-content: center;
}

.body-array-cartera-container .body .Referencia, .body-array-cartera-container .body .fecha {
	text-align: center;
	justify-content: center;
}

.body-array-envios-container .body .referencia, .body-array-envios-container .body .fecha-pedido {
	text-align: center;
	justify-content: center;
}

.body-array-sellervisits-container .body > div  {
	padding: 2px;
}

.body-array-sellervisits-container .body .cliente span.view-client-detail, .body-array-sellervisits-container .body .vendedor, .body-array-sellervisits-container .body .coach, .body-array-sellervisits-container .body .gerencia {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.body-array-sellervisits-container .body .fecha, .body-array-sellervisits-container .body .tipo-visita, .body-array-sellervisits-container .body .duracion, .body-array-sellervisits-container .body .no-pedidos, .body-array-sellervisits-container .body .checkin-time, .body-array-sellervisits-container .body .checkin-coord, .body-array-sellervisits-container .body .checkout-time, .body-array-sellervisits-container .body .checkout-coord, .body-array-sellervisits-container .body .coordenadas {
    display: flex;
    justify-content: center;
    align-items: center;
}

p.header-array-list-title {
    margin: 0px;
    padding: 5px 0px;
}

.header-array-orders-main-container, .header-array-muestras-main-container, .header-array-sellervisits-main-container, .header-array-tickets-main-container, .header-array-facturas-main-container, .header-array-transferencias-main-container, .header-array-devoluciones-main-container, .header-array-reposiciones-main-container, .header-array-devoluciones_pendientes-main-container, .header-array-reposiciones_pendientes-main-container, .header-array-recibos-main-container, .header-array-rcpendientes-main-container, .header-array-obsequios-main-container, .header-array-propal-main-container, .header-array-ordenes_servicio-main-container, .header-array-visitas-main-container, .header-array-consignaciones-main-container, .header-array-cartera-main-container, .header-array-envios-main-container {
    position: sticky;
    top: 0px;
    background: white;
}

input#search_product, input#search_customer, input#search_referencia, input#search_refcliente, input#search_fechapedido, input#search_vendedor, input#search_estado, input#search_ordencompra, input#search_fecha, input#search_coach, input#search_gerencia, input#search_orden_compra, input#search_id_pedido, input#search_ciudad_entrega, input#search_fecha_pedido, input#search_direccion_entrega, input#search_fecha_guia, input#search_transportadora, input#search_guia, input#search_estado_guia, input#search_fecha_p_entrega, input#search_estado_entrega, input#search_novedades {
    width: 100%;
}

input#search_product::placeholder, input#search_customer::placeholder, input#search_referencia::placeholder, input#search_refcliente::placeholder, input#search_fechapedido::placeholder, input#search_vendedor::placeholder, input#search_estado::placeholder, input#search_ordencompra::placeholder, input#search_fecha::placeholder, input#search_fechacreacion::placeholder, input#search_fechacotizacion::placeholder, input#search_amount::placeholder, input#search_banco::placeholder, input#search_motivo::placeholder, input#search_categoria::placeholder, input#search_nitsuc::placeholder, input#search_coach::placeholder, input#search_gerencia::placeholder, input#search_orden_compra::placeholder, input#search_id_pedido::placeholder, input#search_ciudad_entrega::placeholder, input#search_fecha_pedido::placeholder, input#search_direccion_entrega::placeholder, input#search_fecha_guia::placeholder, input#search_transportadora::placeholder, input#search_guia::placeholder, input#search_estado_guia::placeholder, input#search_fecha_p_entrega::placeholder, input#search_estado_entrega::placeholder, input#search_novedades::placeholder {
    width: 100%;
	font-size: clamp(10px, 1.05vw, 14px);
	color: var(--rojo-wurth-tx);
}

.body-array-orders-container .body, .body-array-muestras-container .body, .body-array-sellervisits-container .body, .body-array-tickets-container .body, .body-array-facturas-container .body, .body-array-transferencias-container .body, .body-array-devoluciones-container .body, .body-array-reposiciones-container .body, .body-array-devoluciones_pendientes-container .body, .body-array-reposiciones_pendientes-container .body, .body-array-recibos-container .body, .body-array-rcpendientes-container .body,  .body-array-obsequios-container .body, .body-array-propal-container .body, .body-array-ordenes_servicio-container .body, .body-array-visitas-container .body, .body-array-consignaciones-container .body, .body-array-cartera-container .body, .body-array-envios-container .body {
	padding: 0px;
	margin: 0px;
}

.body-array-orders-container .body:nth-child(odd), .body-array-muestras-container .body:nth-child(odd), .body-array-sellervisits-container .body:nth-child(odd), .body-array-tickets-container .body:nth-child(odd), .body-array-facturas-container .body:nth-child(odd), .body-array-transferencias-container .body:nth-child(odd), .body-array-devoluciones-container .body:nth-child(odd), .body-array-reposiciones-container .body:nth-child(odd), .body-array-acompanamiento-container .body:nth-child(odd), .body-array-devoluciones_pendientes-container .body:nth-child(odd), .body-array-reposiciones_pendientes-container .body:nth-child(odd), .body-array-recibos-container .body:nth-child(odd), .body-array-rcpendientes-container .body:nth-child(odd), .body-array-obsequios-container .body:nth-child(odd), .body-array-propal-container .body:nth-child(odd), .body-array-ordenes_servicio-container .body:nth-child(odd), .body-array-visitas-container .body:nth-child(odd), .body-array-consignaciones-container .body:nth-child(odd), .body-array-cartera-container .body:nth-child(odd), .body-array-envios-container .body:nth-child(odd) {
	background-color: rgb(230, 230, 230); /* Color de fondo para filas impares */
}

.body-array-orders-container .body:nth-child(even), .body-array-muestras-container .body:nth-child(even), .body-array-sellervisits-container .body:nth-child(even), .body-array-tickets-container .body:nth-child(even), .body-array-facturas-container .body:nth-child(even), .body-array-transferencias-container .body:nth-child(even), .body-array-devoluciones-container .body:nth-child(even), .body-array-reposiciones-container .body:nth-child(even), .body-array-devoluciones_pendientes-container .body:nth-child(even), .body-array-reposiciones_pendientes-container .body:nth-child(even), .body-array-recibos-container .body:nth-child(even), .body-array-rcpendientes-container .body:nth-child(even), .body-array-obsequios-container .body:nth-child(even), .body-array-propal-container .body:nth-child(even), .body-array-ordenes_servicio-container .body:nth-child(even), .body-array-visitas-container .body:nth-child(even), .body-array-consignaciones-container .body:nth-child(even), .body-array-cartera-container .body:nth-child(even), .body-array-envios-container .body:nth-child(even) {
	background-color: #ffffff; /* Color de fondo para filas pares */
}

.encabezado-array-orders .search, .encabezado-array-orders .unsearch, .encabezado-array-muestras .search, .encabezado-array-muestras .unsearch, .encabezado-array-sellervisits .search, .encabezado-array-sellervisits .unsearch, .encabezado-array-tickets .search, .encabezado-array-tickets .unsearch, .encabezado-array-facturas .search, .encabezado-array-facturas .unsearch, .encabezado-array-transferencias .search, .encabezado-array-transferencias .unsearch, .encabezado-array-devoluciones .search, .encabezado-array-reposiciones .search, .encabezado-array-devoluciones .unsearch, .encabezado-array-reposiciones .unsearch, .encabezado-array-devoluciones_pendientes .search, .encabezado-array-reposiciones_pendientes .search, .encabezado-array-devoluciones_pendientes .unsearch, .encabezado-array-reposiciones_pendientes .unsearch, .encabezado-array-recibos .search, .encabezado-array-recibos .unsearch, .encabezado-array-rcpendientes .search, .encabezado-array-rcpendientes .unsearch,  .encabezado-array-obsequios .search, .encabezado-array-obsequios .unsearch, .encabezado-array-propal .search, .encabezado-array-propal .unsearch, .encabezado-array-ordenes_servicio .search, .encabezado-array-ordenes_servicio .unsearch, .encabezado-array-visitas .search, .encabezado-array-visitas .unsearch, .encabezado-array-consignaciones .search, .encabezado-array-consignaciones .unsearch, .encabezado-array-cartera .search, .encabezado-array-envios .search, .encabezado-array-cartera .unsearch, .encabezado-array-envios .unsearch, .encabezado-array-acompanamiento .search, .encabezado-array-acompanamiento .unsearch {
    font-size: clamp(15px, 2vw, 20px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/********** FIN - Definicion de estilos para los listados de gestión del vendedor *************/

.order-detail-container, .muestra-detail-container, .sellervisit-detail-container, .product-return-detail-container, .recibo-detail-container, .obsequio-detail-container, .propal-detail-container {
    width: 85vw;
    max-height: 70vh;
    overflow: auto;
}

.exception-order-lines-container {
    width: 80vw;
    max-height: 65vh;
    overflow: auto;
    text-align: justify;
}

span.exception-order-lines-li-span {
    display: block;
    margin-left: 2em;
}

input#nom_producto, input#remise_percent {
    font-size: clamp(10px, 1.05vw, 14px);
    padding: 10px;
}

.detalle-pedido-container {
    width: 90vw;
    max-height: 65vh;
    margin: 10px;
    padding: 10px;
    overflow: auto;
}


.lines-order-header, .lines-order-body, .lines-muestra-header, .lines-muestra-body, .lines-recibo-header, .lines-recibo-body, .lines-obsequio-header, .lines-obsequio-body {
    display: grid;
    grid-template-columns: 1.5fr 2fr 0.5fr 0.5fr 1fr 1fr 1fr;
}

.product-return-lines-header, .product-return-lines-body {
    display: grid;
    grid-template-columns: 1fr 12% 12% 8% 12%;
}

.lines-propal-header, .lines-propal-body {
    display: grid;
    grid-template-columns: 1.5fr 2fr 1fr 1fr 0.5fr 0.5fr 1fr;
}

.transfer-lines-header, .transfer-lines-body {
    display: grid;
    grid-template-columns: 12% 1fr 8% 14% 1fr 12%;
}

.lines-order-header, .lines-muestra-header, .lines-sellervisit-header, .lines-recibo-header, .lines-obsequio-header, .lines-propal-header, .product-return-lines-header, .transfer-lines-header {
    font-weight: bold;
    margin: 20px 0px 10px 0px;
    text-align: center;
    background: var(--rojo-wurth);
    padding: 5px;
    border-radius: 5px;
    color: white;
    align-items: center;
}

.order-detail-lines, .muestra-detail-lines, .sellervisit-detail-lines, .recibo-detail-lines, .obsequio-detail-lines, .propal-detail-lines {
    font-size: clamp(10px, 0.6vw, 14px);
}

.product-return-lines-body > div {
    border: 1px solid rgb(220, 220, 220);
    padding: 5px;
    border-radius: 5px;
    margin: 0px 5px;
}

.product-return-lines-body-label-iva, .product-return-lines-body-label-subprice, .product-return-lines-body-label-total-ht {
	text-align: right;
}

.product-return-lines-body-label-qty {
	text-align: center;
}

.lines-order-body-qty, .lines-order-body-cant-entregada, .lines-order-body-remise-percent, .lines-muestra-body-qty, .lines-muestra-body-cant-entregada, .lines-muestra-body-remise-percent, .lines-recibo-body-qty, .lines-recibo-body-cant-entregada, .lines-recibo-body-remise-percent, .lines-obsequio-body-qty, .lines-obsequio-body-cant-entregada, .lines-obsequio-body-remise-percent {
    text-align: center;
}

.lines-propal-body-qty, .lines-propal-body-remise-percent {
    text-align: center;
}

.lines-order-body-subprice, .lines-order-body-total-ttc, .lines-muestra-body-subprice, .lines-muestra-body-total-ttc, .lines-recibo-body-subprice, .lines-recibo-body-total-ttc, .lines-obsequio-body-subprice, .lines-obsequio-body-total-ttc {
    text-align: right;
}

.lines-propal-body-subprice, .lines-propal-body-iva, .lines-propal-body-total-ttc {
    text-align: right;
}

.lines-order-body > div, .lines-muestra-body > div, .lines-recibo-body > div, .lines-obsequio-body > div, .lines-propal-body > div {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lines-order-body:nth-child(even), .lines-muestra-body:nth-child(even), .lines-recibo-body:nth-child(even), .lines-obsequio-body:nth-child(even), .lines-propal-body:nth-child(even) {
	background-color: rgb(230, 230, 230);
}

.lines-order-body:nth-child(odd), .lines-muestra-body:nth-child(odd), .lines-recibo-body:nth-child(odd), .lines-obsequio-body:nth-child(odd), .lines-propal-body:nth-child(odd) {
	background-color: #ffffff;
}

.lines-order-body, .lines-muestra-body, .lines-recibo-body, .lines-obsequio-body, .lines-propal-body {
    margin: 2px 0px;
    padding: 2px 0px;
}

i#view_order_pdf, i#view_order_attachment, i#view_muestra_pdf, i#view_muestra_attachment, i#view_recibo_pdf, i#view_recibo_attachment, i#view_obsequio_pdf, i#view_obsequio_attachment, i#view_propal_pdf, i#view_propal_attachment, i#view_transfer_comprobante {
    margin-left: 10px;
    font-size: clamp(10px, 2vw, 20px);
    color: var(--rojo-wurth);
}

.lines-order-body-ref-container, .lines-muestra-body-ref-container, .lines-recibo-body-ref-container, .lines-obsequio-body-ref-container, .lines-propal-body-ref-container {
    display: grid;
    grid-template-columns: 1fr 1fr 6fr;
}

.lines-order-body-ref-container i.fa.fa-cube, .lines-order-body-ref-container i.fa.fa-info-circle, .lines-muestra-body-ref-container i.fa.fa-cube, .lines-muestra-body-ref-container i.fa.fa-info-circle, .lines-recibo-body-ref-container i.fa.fa-cube, .lines-recibo-body-ref-container i.fa.fa-info-circle, .lines-obsequio-body-ref-container i.fa.fa-cube, .lines-obsequio-body-ref-container i.fa.fa-info-circle, .lines-propal-body-ref-container i.fa.fa-cube, .lines-propal-body-ref-container i.fa.fa-info-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(10px, 1.5vw, 14px);
}

span.lines-order-body-ref-ref {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-detail-total-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 5px;
    border-top: 3px double;
}

.order-detail-guias-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 5px;
    border-top: 3px double;
}

.list-atacchment-header, .list-atacchment-body {
    display: grid;
    grid-template-columns: 6fr 2fr 2fr;
}

.list-atacchment-header {
    display: grid;
    grid-template-columns: 6fr 2fr 2fr;
    font-weight: bold;
    text-align: center;
    background: rgb(220, 220, 220);
    padding: 10px;
    border-radius: 10px;
    margin: 15px 0px;
}

.attachment-list-container {
    width: 70vw;
    max-height: 60vh;
    padding: 10px;
}

.list-atacchment-body-size {
	text-align: right;
}

.list-atacchment-body-date {
	text-align: center;
}

.list-atacchment-body > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.font-attachment-list {
	font-size: clamp(10px, 1.5vw, 14px);
}

/* Modal documentos adjuntos del tercero (add_contact) */
.modal-documentos-societe {
	font-size: clamp(10px, 1.5vw, 14px);
	padding: 10px;
	min-width: 40vw;
}

.documentos-societe-header {
	font-size: clamp(12px, 1.6vw, 16px);
	font-weight: 600;
	padding: 8px 0 12px 0;
	border-bottom: 1px solid #ddd;
	margin-bottom: 8px;
}

.documentos-societe-table-header,
.documentos-societe-row {
	display: grid;
	grid-template-columns: 1fr 100px 130px;
	gap: 6px;
	padding: 5px 4px;
}

.documentos-societe-table-header {
	font-weight: 600;
	background-color: #f5f5f5;
	border-bottom: 1px solid #ccc;
}

.documentos-societe-row {
	border-bottom: 1px solid #eee;
}

.documentos-societe-row:hover {
	background-color: #f9f9f9;
}

.documentos-societe-name {
	cursor: pointer;
	color: var(--verde-wurth, #1a6136);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.documentos-societe-name:hover {
	text-decoration: underline;
}

.campo-data-return-required, .campo-data-mservice-required {
    border: 1px solid black;
    width: 25px;
    height: 25px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--verde-wurth);
}

.data-return-facture-distribution-container {
    margin: 0px;
    border: 1px solid var(--verde-wurth);
    border-radius: 5px;
    padding: 5px;
    /* height: 25vh; */
    /* max-height: 20vh; */
    overflow: auto;
}

.data-return-facture-distribution-title {
    text-align: justify;
    margin-bottom: 10px;
}

.data-return-facture-distribution-table-header, .data-return-facture-distribution-table-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	gap:5px;
}

.data-return-facture-distribution-table-header {
    text-align: center;
    font-weight: bold;
    background: var(--rojo-wurth);
    color: white;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 5px;
}

.data-return-facture-distribution-table-container {
    font-size: clamp(8px, 0.8vw, 14px);
}

span.data-return-facture-distribution-table-body-data {
    padding: 3px 5px;
}

div.data-return-facture-distribution-table-body:nth-child(even) {
	background-color: rgb(230, 230, 230);
}

div.data-return-facture-distribution-table-body:nth-child(odd) {
	background-color: #ffffff;
}

span.data-return-facture-distribution-table-body-data[dato="no_factura"] {
    text-align: center;
}

span.data-return-facture-distribution-table-body-data[dato="saldo"], span.data-return-facture-distribution-table-body-data[dato="vlr_aplicar"] {
    text-align: right;
}

.data-return-facture-distribution-total-return {
    margin: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 5px;
    background: var(--rojo-wurth);
    color: white;
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
}

span.data-return-facture-distribution-table-body-data {
    border: 1px solid;
    border-radius: 3px;
}




#btn-list-rcbycustomer {
    border: 1px solid rgb(200,200,200);
    padding: 10px;
    border-radius: 10px;
    margin: 10px;
    background: var(--rojo-wurth);
    color: white;
    text-align: left;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.rcbycustomer-filtros {
	margin: 10px 0px;
}

.rcbycustomer-filtros .search input[type="text"] {
	width: calc(100% - 10px);
}

.rcbycustomer-filtros .search input::placeholder {
	text-align: center;
}

.rcbycustomer-filtros, .rcbycustomer-detail .header, .rcbycustomer-detail .body {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 2fr 1.5fr 1.5fr 1.5fr;
    grid-gap: 10px;
}

.rcbycustomer-detail .header {
    font-weight: bold;
}

.rcbycustomer-detail .encabezado-rcbycustomer .search
, .rcbycustomer-detail .encabezado-rcbycustomer .pdf-file {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5vw;
}

.rcbycustomer-detail .encabezado-rcbycustomer .pdf-download {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1vw;
}

.rcbycustomer-detail .encabezado-rcbycustomer p {
    font-size: large;
    font-weight: bold;
}

.rcbycustomer-detail .header .theader {
    text-align: center;
    background: rgb(200, 200, 200);
    padding: 5px 0px;
}

.rcbycustomer-detail .body .cantidad
, .rcbycustomer-detail .body .vunitario {
	text-align: right;
}

.rcbycustomer-detail .body .fecha
, .rcbycustomer-detail .body .documento
, .rcbycustomer-detail .body .descuento
, .rcbycustomer-detail .body .pedido {
	text-align: center;
}

.rcbycustomer-detail .body {
	padding: 3px 0px;
}

.rcbycustomer-detail .encabezado-rcbycustomer
, .abc-detail .encabezado-abc
, .promociones-detail .encabezado-promociones {
    display: grid;
    grid-template-columns: 50% 5% 5% 10% 6% 6% 6% 6% 6%;
	grid-gap: 2px;
}

.rcbycustomer-detail .encabezado-rcbycustomer .desplazamiento
, .abc-detail .encabezado-abc .desplazamiento
, .promociones-detail .encabezado-promociones .desplazamiento {
	display: flex;
	align-items: center;
	justify-content: center;
}

.rcbycustomer-detail .encabezado-rcbycustomer
, .abc-detail .encabezado-abc
, .ecommerce-detail .encabezado-ecommerce {
    display: grid;
    grid-template-columns: 50% 5% 5% 10% 6% 6% 6% 6% 6%;
	grid-gap: 2px;
	margin-bottom: 15px;
}

.rcbycustomer-detail .encabezado-rcbycustomer .desplazamiento
, .abc-detail .encabezado-abc .desplazamiento
, .ecommerce-detail .encabezado-ecommerce .desplazamiento {
	display: flex;
	align-items: center;
	justify-content: center;
}

.font-rcbycustomer-list {
	font-size: 0.7vw !important;
}

.paiement-detail-container {
    width: 70vw;
    max-height: 60vh;
    overflow: auto;
    display: grid;
}

.paiement-detail-lines .lines-paiement-header, .lines-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.font-modal-paiement-detail {
    font-size: 1.1vw;
}

.paiement-detail-lines {
    padding: 10px;
}

.lines-paiement-header {
    font-weight: bold;
    background: var(--rojo-wurth);
    color: white;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 10px;
}

.lines-paiement-body-label-amount {
    text-align: right;
}

.icon-view-paiment-detail {
    font-size: 1.5vw;
    margin: 0px 10px;
    color: var(--rojo-wurth);
    display: -webkit-inline-box;
	cursor: pointer;
}

.font-window-message-envia-rc {
	font-size: 1.5vw;
}

.lines-body:nth-child(even) {
    background-color: #f2f2f2; /* Color de fondo para filas pares */
}

.lines-body:nth-child(odd) {
    background-color: #ffffff; /* Color de fondo para filas impares */
}

.rcbycustomer-detail .body:nth-child(even) {
    background-color: #f2f2f2; /* Color de fondo para filas pares */
}

.rcbycustomer-detail .body:nth-child(odd) {
    background-color: #ffffff; /* Color de fondo para filas impares */
}

.lines-paiement-body-label-amount, .lines-paiement-body-label {
    // border-right: 1px solid black;
    margin: 0px 10px;
    padding: 0px 10px;
}

.lines-paiement-body-vencido, .lines-paiement-body-amount, .lines-paiement-body-rtefte, .lines-paiement-body-saldo, .lines-paiement-body-pronpago {
	text-align: right;
}

.lines-paiement-body-estado-factura {
	text-align: center;
}

div.build-address-data-container {
    width: 60vw;
    /* border: 1px solid black;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    column-gap: 10px;
    font-size: clamp(10px, 1vw, 14px); */
}

/* .campo-build-address {
    flex-basis: calc(50% - 28px);
    border: 1px solid rgb(220, 220, 220);
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
} */

/* .campo-build-address > label {
	font-weight: bold;
} */

/* p.build-address-title {
    font-size: clamp(14px, 1.5vw, 20px);
    font-weight: bold;
} */

.campo-build-address[dato="nomenclature"] {
    flex-basis: 100%;
    height: 2vw;
}

.build-address-data-container {
    --bs-gutter-y: 0.4rem;
}

.build-address-data-container > .w-100 {
    margin-top: 0 !important;
    height: 0;
}

.build-address-data-container .campo-build-address {
    margin-bottom: 0 !important;
}

.build-address-data-container .campo-build-address[dato="nomenclature"] {
    display: none;
    flex-basis: 100%;
    height: auto !important;
    min-height: unset !important;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f0f4ff;
    border: 1px solid #c5d0e8;
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 6px !important;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e6b;
    align-items: center;
}

.build-address-data-container .campo-build-address > label {
    font-size: 12px !important;
    margin-bottom: 0.1rem;
}

.build-address-data-container .form-control,
.build-address-data-container .form-select {
    font-size: 12px;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.totales-prepedido-goldenm-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    font-size: clamp(14px, 1vw, 20px);
}

.totales-prepedido-goldenm-line-container {
    display: flex;
    align-items: center;
    margin: 0px 5px;
}

span.totales-prepedido-goldenm-line-label {
    font-weight: bold;
	margin-right: 10px;
}

.totales-prepedido-container {
    margin: 10px;
    border: 1px solid var(--rojo-wurth-tx);
    border-radius: 5px;
    padding: 10px;
}

.totales-prepedido-line-container {
    display: flex;
    justify-content: space-between;
}

span.totales-prepedido-line-label {
    font-weight: bold;
}

.transfer-detail-container {
    width: 85vw;
    max-height: 60vh;
}

.transfer-lines-body > div {
    border: 1px solid rgb(220, 220, 220);
    border-radius: 5px;
    padding: 3px;
    margin: 3px;
    display: flex;
    align-items: center;
}

.transfer-lines-body-label-fecha, .transfer-lines-body-label-nitsuc {
	text-align: center;
	justify-content: center;
}

	.transfer-lines-body-label-amount, .transfer-lines-body-label-rtefte, .transfer-lines-body-label-total-amount {
	text-align: right;
	justify-content: right;
}

.paiement-detail-lines .lines-body > div, .lines-obsequio-body > div, .lines-propal-body > div, .lines-muestra-body > div, .lines-order-body > div {
    border: 1px solid rgb(220, 220, 220);
    border-radius: 5px;
    padding: 3px;
    margin: 3px;
}

.tipo-pago-icono-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

i#btn_tipo_pago {
    font-size: 2vw;
}

.capture-payment-detail-container {
    border: 1px solid rgb(220, 220, 220);
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    width: 30vw;
    min-height: 10vh;
}

.campo-capture-payment-detail > label {
    font-weight: bold;
}

.campo-capture-payment-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-payment-detail-container {
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.view-payment-detail-container {
    border: 1px solid rgb(220, 220, 220);
    border-radius: 5px;
    padding: 5px;
}

p.view-payment-detail-title {
    font-weight: bold;
    text-align: center;
}

.view-payment-detail-header, .view-payment-detail-line, .view-payment-detail-total {
    display: grid;
    grid-template-columns: 1fr 1fr 10%;
}

.view-payment-detail-header > span {
    font-weight: bold;
    text-align: center;
    background: var(--rojo-wurth);
    color: white;
    border-radius: 3px;
    margin: 3px;
}

.view-payment-detail-line {
    padding: 2px 5px;
}

.view-payment-detail-line > span {
    border: 1px solid rgb(220, 220, 220);
    padding: 3px;
    margin: 3px;
    border-radius: 3px;
}

span.view-payment-detail-line-monto {
    text-align: right;
}

.view-payment-detail-total > span {
    padding: 3px;
    margin: 3px;
}

span.view-payment-detail-total-label {
    display: flex;
    text-align: right;
    justify-content: right;
    align-items: center;
    font-weight: bold;
}

span.view-payment-detail-total-monto {
    display: flex;
    justify-content: right;
    align-items: center;
    border: 1px solid rgb(220, 220, 220);
    border-radius: 3px;
}

.view-payment-detail-total {
    padding: 2px 5px;
}

.view-payment-detail-total-action-container {
    display: flex;
    text-align: center;
    justify-content: center;
    padding: 5px;
    margin: 5px;
}

.capture-payment-detail-resume-container {
    border: 1px solid rgb(220, 220, 220);
    border-radius: 3px;
    padding: 3px;
    margin: 10px 3px 3px 3px;
	width: 20vw;
}

.capture-payment-detail-resume-total-pedido-container, .capture-payment-detail-resume-faltante-pago-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

span.capture-payment-detail-resume-faltante-pago-label, span.capture-payment-detail-resume-total-pedido-label {
    font-weight: bold;
}

.reporte-visitas-subcontainer {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-birthday {
    padding: 10px;
}

.customer-birthday {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.set-birthday-container {
    width: 20vw;
    height: 20vh;
    padding: 10px;
    margin: 10px;
    border: 1px solid rgb(220, 220, 220);
    border-radius: 5px;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
}

.set-birthday-container > label[for="birthday_customer"] {
    font-weight: bold;
    text-align: center;
    font-size: clamp(10px, 1.5vw, 20px);
}

input#day_customer_bday, input#day_customer_bmonth {
    width: 2vw;
}

.top-section-user-notifications #label_nom_user > label {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}

.resume-customer {
    position: relative;
    padding: 5px;
    border: 1px solid var(--rojo-wurth);
    margin: 5px;
    border-radius: 5px;
}

.btn-coach-checkin {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    background: #1976D2;
    color: white;
    font-size: 0.72rem;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.btn-coach-checkin:hover {
    opacity: 0.85;
}

.coach-vendor-banner {
    background: var(--rojo-wurth);
    color: white;
    font-weight: bold;
    font-size: 0.85rem;
    padding: 6px 10px;
    border-radius: 5px;
    margin: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.coach-empty-msg {
    color: #888;
    font-size: 0.85rem;
    font-style: italic;
    padding: 12px 10px;
    text-align: center;
}

.encabezado-seller-statistics {
    border: 1px solid rgb(180, 180, 180);
    display: grid;
    grid-template-columns: 45% 5% 5% 5% 5% 5% 5% 5% 5% 5% 10%;
    margin: 10px 5px 5px 5px;
    padding: 5px;
    border-radius: 5px;
    width: 95vw;
}

.seller-statistics-filtros-container-search > input {
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--rojo-wurth-tx);
    box-sizing: border-box;
    font-size: clamp(10px, 1vw, 14px);
    color: var(--rojo-wurth);
}

.seller-statistics-filtros-container-search > input::placeholder {
	color: var(--rojo-wurth);
}

.seller-statistics-filtros-container, .seller-statistics-header-container, .seller-statistics-body-line, .seller-statistics-body-total {
    display: grid;
    grid-template-columns: 6% 14% 14% 14% 14% 10% 14% 9% 5%;
}

.seller-statistics-header-label.list-sort-field {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--rojo-wurth);
    color: white;
    padding: 5px;
    margin: 5px;
    border-radius: 5px;
}

.seller-statistics-filtros-container-search {
    margin: 0px 5px;
    padding: 5px;
}

.seller-statistics-body-line > span {
    border: 1px solid rgb(220, 220, 220);
    margin: 3px;
    padding: 3px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.statistics-list-right-container {
    background: white;
    width: 125vw;
}

.icono-califica-container {
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    margin: 5px;
    width: 2vw;
    height: 2vw;
    background: rgb(200, 200, 200);
}

.seller-statistics-source-container > input {
	border: 1px solid;
}

.seller-statistics-source-container {
    width: 95vw;
    border: 1px solid rgb(220, 220, 220);
    border-radius: 5px;
    margin: 5px;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.statistics-list-main-container select#search_criterio, .statistics-list-main-container select#search_indicador {
    width: 100%;
    font-size: clamp(10px, 1vw, 14px);
    border: 1px solid var(--rojo-wurth-tx);
    border-radius: 5px;
    color: var(--rojo-wurth);
}

.seller-statistics-body-line > span.indicador {
    text-align: right;
}

.encabezado-seller-statistics > div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(14px, 1.5vw, 18px);
}

.seller-statistics-body-total > span {
    margin: 3px;
    padding: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	text-align: right;
}

.seller-statistics-body-total span.criterio {
    background: var(--rojo-wurth);
    color: white;
    border-radius: 3px;
    padding: 5px;
    font-weight: bold;
}

.seller-statistics-body-total span.indicador {
	border: 1px solid rgb(220, 220, 220);
    border-radius: 3px;
    padding: 5px;
    font-weight: bold;
}

div#map_sales_visit_track {
    width: 100%;
    height: 100%;
    border: 1px solid;
    border-radius: 10px;
}

.sales-visit-track-container {
    width: calc(100vw - 38px);
    height: calc(100vh - 86px);
    display: grid;
    grid-template-rows: 10% 90%;
    gap: 6px;
}

.sales-visit-track-marker-container {
    position: absolute;
}

.sales-visit-track-marker-customer-name-container {
    padding: 5px;
    background: black;
    color: white;
    font-size: clamp(10px, 1vw, 20px);
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    border: 1px solid;
    border-radius: 5px;
}

.sales-visit-track-marker-customer-number-container {
    padding: 10px;
    background: black;
    margin: 5px;
    border-radius: 10px;
    width: 5px;
    height: 5px;
    display: flex;
    justify-content: center;
    color: white;
    border: 1px solid;
}

.menu-sales-visit-track {
    padding: 3px;
    border: 1px solid var(--gris-wurth-tx);
    border-radius: 3px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.icons-sales-visit-track-checkin-chekout-container {
    border: 1px solid var(--gris-wurth-tx);
    padding: 5px;
    border-radius: 3px;
    width: 100px;
    display: flex;
    justify-content: space-around;
}

i#select_checkin_coord.check-inactivo {
    color: var(--verde-wurth-tx);
}

i#select_checkin_coord.check-activo {
    color: var(--verde-wurth);
}

i#select_checkout_coord.check-inactivo {
    color: var(--rojo-wurth-tx);
}

i#select_checkout_coord.check-activo {
    color: var(--rojo-wurth);
}

i.fa.fa-play.icono-checkin-sales-visit-track {
    color: var(--verde-wurth);
    font-size: clamp(10px, 2vw, 25px);
}

.sales-visit-track-marker-checkin-container {
    position: absolute;
}

.sales-visit-track-marker-checkin-number-container {
    padding: 10px;
    background: var(--verde-wurth);
    margin: 5px;
    border-radius: 10px;
    width: 5px;
    height: 5px;
    display: flex;
    justify-content: center;
    color: white;
    border: 1px solid;
}

i.fa.fa-stop.icono-checkout-sales-visit-track {
    color: var(--rojo-wurth);
    font-size: clamp(10px, 2vw, 25px);
}

.sales-visit-track-marker-checkout-container {
    position: absolute;
}

.sales-visit-track-marker-checkout-number-container {
    padding: 10px;
    background: var(--rojo-wurth);
    margin: 5px;
    border-radius: 10px;
    width: 5px;
    height: 5px;
    display: flex;
    justify-content: center;
    color: white;
    border: 1px solid;
}

.container-master span.select2-selection.select2-selection--single {
    font-size: clamp(10px, 1.05vw, 14px);
}

span.checkhour-customer-sales-visit-track {
    font-size: clamp(8px, 0.8vw, 20px);
}

i.visittype-customer-sales-visit-track {
    color: white;
    font-size: 1vw;
}

.encabezado-array-sellervisits .excel-file {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(10px, 2vw, 20px);
}

.encabezado-array-sellervisits .desplazamiento label.current-page {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(10px, 1.2vw, 24px);
}

.retenidos-detail .header, .retenidos-detail .body {
    display: grid;
    grid-template-columns: 10% 12% 13% 10% 20% 14% 1%;
    grid-gap: 20px;
    font-size: clamp(8px, 1.5vw, 12px);
    overflow-x: auto;
}

.retenidos-detail .header {
    font-weight: bold;
}

.retenidos-detail .header .theader {
    text-align: center;
    background: rgb(200, 200, 200);
    padding: 5px 0px;
	display: flex;
    justify-content: center;
    align-items: center;
}

.retenidos-detail .body .subtotal
, .retenidos-detail .body .unitario {
	text-align: right;
}

.retenidos-detail .body .pedido
, .retenidos-detail .body .estado
, .retenidos-detail .body .fecha
, .retenidos-detail .body .ref
, .retenidos-detail .body .qty-pedido
, .retenidos-detail .body .entregado
, .retenidos-detail .body .pendiente
, .retenidos-detail .body .proximo-arribo {
	text-align: center;
}

.retenidos-detail .body {
	padding: 3px 0px;
}

.product-return-detail-header .campo {
    padding: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

#btn_saldo_bonos {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(10px, 1.2vw, 18px);
    font-weight: bold;
    border: 1px solid;
    margin: 0px 5%;
    border-radius: 3px;
    padding: 5%;
}

.bonus-detail-container {
    width: 40vw;
    max-height: 40vh;
    padding: 10px;
}

.bonus-detail-header-container, .bonus-detail-body-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
}

.bonus-detail-header-container {
    font-weight: bold;
    text-align: center;
}

.font-bonus-detail {
    font-size: clamp(10px, 1.2vw, 20px);
}

.bonus-detail-body-container > span{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bonus-detail-body-container > span[etiqueta="fecha"], .bonus-detail-body-container > span[etiqueta="vencimiento"] {
    text-align: center;
}

.bonus-detail-body-container > span[etiqueta="monto"] {
    text-align: right;
}

.bonus-distribution-container {
    font-size: clamp(10px, 1.2vw, 20px);
}

.bonus-distribution-header-container, .bonus-distribution-body-container {
    display: grid;
    grid-template-columns: 17% 37% 20% 20%;
    grid-gap: 10px;
}

.bonus-distribution-header-container {
    font-weight: bold;
    text-align: center;
}

.bonus-distribution-body-container > span{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bonus-distribution-body-container > span[etiqueta="fecha"] {
    text-align: center;
}

.bonus-distribution-body-container > span[etiqueta="monto"], .bonus-distribution-body-container > span[etiqueta="utilizado"] {
    text-align: right;
}

p.bonus-distribution-title-container {
    display: flex;
    text-align: justify;
    align-items: center;
}

.bonus-total-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-column-gap: 5px;
}

.bonus-total-container > span[etiqueta="label"] {
	font-weight: bold;
}

.bonus-total-container > span[etiqueta="monto"] {
	text-align: right;
}

span.quien-refiere-dato {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.green-text {
    color: green;
    font-weight: bold; /* Opcional para resaltar */
}

.yellow-text {
    color: orange; /* Puedes usar amarillo o un tono visible */
    font-weight: bold;
}

.red-text {
    color: red;
    font-weight: bold;
}

.cointainer-shopping-cart-header-actions[etiqueta="acciones"] {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2vw;
}

i#btn_goto_preorder {
    color: orange;
}

.hidden {
    color: grey !important;
}

.data-mservice-facture-container {
    border: 1px solid var(--verde-wurth);
    padding: 5px;
    border-radius: 5px;
    max-height: 15vh;
    overflow: auto;
}

.data-mservice-facture-table-body {
    margin: 5px;
    display: grid;
    grid-template-columns: 21% 21% 10%;
    align-items: center;
}

.campo-data-mservice input#quien_solicita {
	width: auto;
}

div#select_master_service {
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
}

i.select-master-service-option, i.select-master-service-option-size-exchange {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 6vh;
    border-radius: 10px;
    background: var(--gris-wurth-tx);
}

.select-master-service-option-container > p {
    display: flex;
    justify-content: center;
    align-items: center;
}

i#help_categories_mservice {
    margin: 0px 5px;
    font-size: 1.3vw;
    color: var(--verde-wurth);
}

.data-mservice-facture-table-container {
    border: 1px solid var(--verde-wurth);
    border-radius: 3px;
}

span.data-mservice-facture-table-body-data {
    font-weight: bold;
}

.data-mservice-facture-table-body {
    background: var(--gris-wurth-tx);
}

.discount-display {
    background-color: #0195d9;
    color: #fff;
    padding: 7px 10px;
    margin-top: 5px;
    line-height: 1.5em;
    text-transform: uppercase;
    width: 50%;
    box-sizing: border-box;
    display: block;
    text-align: center;
    font-size: 10px;
    font-family: 'WuerthExtraBoldCondFont';
}

.discount-ahorro {
    color: #0C831E !important;
    font-weight: bold;
    font-family: "WuerthBookFont";
    width: 30%;
    box-sizing: border-box;
    display: block;
    text-align: center;
    font-size: 10px;
}

.container-show-descuentos {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.product-price {
    font-family: 'WuerthBookFont' !important;
    font-size: 14px;
    color: #9C9C9C;
    text-decoration: line-through;
}

.price-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

.product-price-min {
    color: #000;
    font-size: 20px;
    font-family: 'WuerthExtraBoldCondFont';
}

.product-ahorro {
    color: #0C831E;
    font-weight: bold;
    font-family: 'WuerthBookFont';
    box-sizing: border-box;
    text-align: center;
}

.product-descuento {
    background-color: #0195d9;
    color: #fff;
    padding: 7px 10px;
    line-height: 1.5em;
    text-transform: uppercase;
    box-sizing: border-box;
    text-align: center;
    font-family: 'WuerthExtraBoldCondFont';
}

ul.help-list-categories-list {
    margin-left: 20px;
}

.help-list-categories-container {
    border: 1px solid rgb(200, 200, 200);
    padding: 5px;
    border-radius: 5px;
}

i#btn_load_tpl_planner_byday {
    border: 1px solid var(--rojo-wurth);
    padding: 5px;
    border-radius: 3px;
    margin-left: 10px;
}

i#btn_load_tbl_report {
    border: 1px solid var(--rojo-wurth);
    padding: 5px;
    border-radius: 3px;
    margin-left: 10px;
}

div#tpl_planner_container {
    width: 80vw;
    height: 70vh;
}

.document-customer-list-title {
    background: white;
    color: var(--rojo-wurth);
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
}

.body-array-recibos-container .sub-total {
	text-align: right;
}

i.fa.fa-gavel.cobro-juridico {
    color: var(--rojo-wurth);
	margin-right: 10px;
}

i.fa.fa-money-bill-wave.descuento-ppago {
    color: var(--verde-wurth);
	margin-right: 10px;
}

.tx-convenciones-container {
    display: flex;
    justify-content: space-evenly;
}

.product-return-detail-header-container {
    display: grid;
    grid-template-columns: 60% 40%;
}

.top-section-modules {
    display: grid;
    grid-template-columns: 1fr;
	grid-gap: 3px;
}

.top-section-utilities {
    display: flex;
	gap: 2px;
}

div#label_nom_user {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    justify-content: flex-start;
}

.row-head {
    font-size: 10px;
    width: 70px;
    display: inline-block;
    text-align: center;
}

img.top-section-logo-img {
    max-height: calc(6vh - 10px);
}

.top-section-logo {
    padding: 5px;
}

.home-coach-main-container, .home-kam-main-container, .home-orsy-main-container, .home-gerente-main-container, .home-ingeniero-main-container, .home-gcg-main-container {
    display: grid;
    grid-template-rows: auto 1fr 1fr;
    grid-gap: 30px;
    height: 100%;
    margin: 0px 10px;
    width: calc(100% - 30px);
}

.home-coach-main-icon-container, .home-kam-main-icon-container, .home-orsy-main-icon-container, .home-gerente-main-icon-container, .home-ingeniero-main-icon-container, .home-gcg-main-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 6vw;
    border: 3px solid orange;
    width: auto;
    padding: 10px;
    margin: 10px;
    background: white;
    border-radius: 20px;
    color: orange;
}

@media (max-height: 700px) {
    .home-coach-main-icon-container, .home-kam-main-icon-container, .home-orsy-main-icon-container, .home-gerente-main-icon-container, .home-ingeniero-main-icon-container, .home-gcg-main-icon-container {
        font-size: 4vw;
        padding: 5px;
        margin: 5px;
    }
}

.home-coach-main-line, .home-kam-main-line, .home-orsy-main-line, .home-gerente-main-line, .home-ingeniero-main-line, .home-gcg-main-line,
.home-role-panel-section {
    border: 1px solid var(--gris-wurth);
    background: var(--gris-wurth-tx);
    border-radius: 10px;
    display: flex;
    gap: 10px;
}

.tpl-planner-byday-container {
    display: grid;
    grid-template-columns: repeat(12, 8%);
    gap: 6px;  /* Espaciado entre elementos */
    align-items: center;  /* Alinear verticalmente los elementos */
    font-size: 8px;
}

.tpl-planner-total-clientes, .tpl-planner-clientes-programados, .tpl-planner-clientes-no-programados, .tpl-planner-convention-square {
    background-color: #f8f9fa;  /* Color de fondo ligero */
    padding: 10px;  /* Espaciado interno */
    border-radius: 5px;  /* Bordes redondeados */
    text-align: center;  /* Centrar texto */
    font-weight: bold;
}

.tpl-planner-convention-square {
    display: flex; /* Para colocar los elementos en línea */
    align-items: center; /* Alinear verticalmente */
    gap: 10px; /* Espaciado entre el texto y el cuadro */
    font-weight: bold; /* Texto en negrita */
    background-color: #f1f1f1;
    padding: 6px 10px;
    border-radius: 6px;

}

.tpl-convention-square {
    width: 15px; /* Tamaño del cuadro */
    height: 15px;
    border-radius: 3px; /* Bordes ligeramente redondeados */
    display: inline-block; /* Para que se comporte como un elemento en línea */
    margin-left: 8px; /* Espacio entre el texto y el cuadro */
    vertical-align: middle; /* Alinear con el texto */
}

/* Colores específicos */
.tpl-convention-square.red { background-color: red; }
.tpl-convention-square.yellow { background-color: yellow; }
.tpl-convention-square.green { background-color: green; }

/* Estilo del botón */
#buttom-day-change {
    background-color: #007bff; /* Azul Bootstrap */
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

ul.changeable-days-list-ul {
    padding: 10px;
}

.changeable-days-container {
    width: 30vw;
    height: 60vh;
}

.changeable-days-title {
    font-size: 20px;
    font-weight: bold;
}

.changeable-days-list-li-container {
    display: flex;
    justify-content: space-around;
    border: 1px solid rgb(200, 200, 200);
    padding: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
}

i.fa.fa-arrow-left.changeable-days-list-icon {
    background: var(--rojo-wurth);
    color: white;
    padding: 3px;
    border-radius: 3px;
}

.changeable-days-customer {
    padding: 5px;
    border: 1px solid rgb(200, 200, 200);
    border-radius: 5px;
    margin-bottom: 3px;
}

.home-coach-main-option, .home-kam-main-option, .home-orsy-main-option, .home-gerente-main-option {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 90% auto;
    max-height: calc(100% - 10px);
	width: 190px;
}

.home-coach-main-option-label, .home-kam-main-option-label, .home-orsy-main-option-label, .home-gerente-main-option-label {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(10px, 2vw, 20px);
    font-weight: bold;
    color: orange;
    background: white;
    border-radius: 5px;
    border: 3px solid;
}

.home-coach-main-option, .home-kam-main-option, .home-orsy-main-option, .home-gerente-main-option {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 90% auto;
    max-height: calc(100% - 35px);
}

.container-dasboard-customer .basic-data > div {
    border: 1px solid rgb(200, 200, 200);
    border-radius: 3px;
    margin: 1px;
    padding: 2px;
}

.container-dasboard-customer i.fa.fa-comments {
    color: orange;
    opacity: 1;
    width: 1.2vw;
    font-weight: 900;
    font-size: 1.5em;
	margin: 0px 3px;
}

.model-report-day {
    border: 1px solid #ccc;
    padding: 5px;
}

.modal-tpl-report {
    width: 60vw;
    height: 60vh;
    overflow: hidden; /* Evita que el contenido sobresalga */
    display: flex;
}

.tpl-report-container {
    flex-grow: 1; /* Hace que el contenedor ocupe todo el espacio disponible */
    max-height: 70vh; /* Limita la altura del contenido */
    overflow-y: auto; /* Agrega barra de desplazamiento vertical */
    background: rgb(230, 230, 230);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    /* justify-content: space-between; */
}

.tpl-report-model-box {
    flex-grow: 1;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px 6px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    min-height: 60px;
}

.tpl-report-model-title {
    font-size: 0.8rem;
    font-weight: bold;
    color: #555;
    margin-bottom: 2px;
}

.tpl-report-model-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #222;
}

.tpl-report-model-value-porce {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #222;
}

.tpl-report-container-bar-termometer, .tpl-report-container-bar-termometer-pres {
    height: 20px;
    background: linear-gradient(to right, red, yellow, green);
    position: relative;
    border-radius: 10px;
    margin: 10px 5px 0px 5px;
    width: 100px;
    left: 0;
}

.tpl-report-container-bar-termometer-indicador, .tpl-report-container-bar-termometer-indicador-pres {
    width: 10px;
    height: 30px;
    background: black;
    position: absolute;
    top: -5px;
    left: 0%;
    border-radius: 5px;
    transition: left 0.3s ease-in-out;
}

p.tpl-report-container-bar-termometer-nota, .tpl-report-container-bar-termometer-nota-pres {
    text-align: center;
}

p.tpl-report-container-title, p.tpl-report-container-bar-termometer-title, p.tpl-report-container-bar-termometer-pres-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(12px, 1vw, 14px);
    font-weight: bold;
}

p.tpl-report-container-bar-termometer-title, p.tpl-report-container-bar-termometer-pres-title {
    margin-top: 8px;
    margin-bottom: 4px;
}

.tpl-planner-trip-byday-customer-total {
    position: absolute;
    top: 5px;
    right: 5px;
    display: inline-block;
    background: #ff5722;
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 5px;
    margin-left: 10px;
}

.tpl-planner-trip-byday-customer-talla {
    position: absolute;
    top: 5px;
    right: 25px; /* Ajusta la posición  */
    display: inline-block;
    background: #2196F3; /* Azul para diferenciar */
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 5px;
}

.tpl-planner-trip-byday-customer-building {
    position: absolute;
    top: 5px;
    right: 50px; /* Ajusta la posición  */
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 6px;
}

.tpl-planner-trip-byday-customer-hand-holding {
    position: absolute;
    top: 5px;
    right: 70px; /* Ajusta la posición  */
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 6px;
}

.tpl-planner-trip-byday-customer-cake {
    position: absolute;
    top: 5px;
    right: 95px; /* Ajusta la posición  */
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 6px;
}

.tpl-planner-trip-byday-customer-rutero{
    position: absolute;
    top: 5px;
    right: 55px; /* Ajusta la posición  */
    display: inline-block;
    background: #f32121; /* Azul para diferenciar */
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 5px;
}

.tpl-planner-trip-byday-customer-days {
    /* position: absolute; */
    /* top: 5px; */
    /* right: 5px; */
    display: inline-block;
    background: #ff5722;
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 5px;
    margin-left: 10px;
}

.changeable-days-customer-list-container {
    overflow: auto; /* Muestra scroll si es necesario */
    height: 500px;
}

.changeable-days-customer {
    position: relative;
}

.search-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

div#advanced_search {
    display: flex;
    justify-content: center;
    align-items: center;
}

#clientes-container, #clientes-container-coach, #clientes-container-kam, #clientes-container-orsy, #clientes-container-gerente {
    overflow: auto; /* Muestra scroll si es necesario */
    height: 100%;
}

.changeable-days-customer-report, .changeable-days-customer-report-outside {
    position: relative;
    border-bottom: 0.1px solid var(--gris-wurth);
    padding: 5px;
}

.changeable-days-customer-report-red {
    color: red;
}

.changeable-days-customer-report-blue {
    color: blue;
}

.changeable-days-customer-report-purple {
    color: purple;
}

.tpl-planner-trip-byday_custom-infowindow {
    font-size: 10px;
    background-color: black;
    color: white;
    padding: 4px;
    margin: 0;
    border-radius: 5px;
    width: 100%;
    text-align: center;
    white-space: normal;
    overflow: hidden;
    word-wrap: break-word;
}

.current-situation :is(.retenidos, .backorders, .current-balance, .limit, .disponible, .payment-days, .customer-seniority, .credit-terms, .average-purchase) {
    flex: 0 0 calc(50% - 4px);
    box-sizing: border-box;
    font-size: 12px;
    border: 1px solid rgb(200, 200, 200);
    border-radius: 3px;
    margin: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container-dasboard-customer .bottom .current-situation {
	display: flex;
	flex-wrap: wrap;
}

.current-situation .current-situation-spacer {
	flex: 0 0 calc(50% - 4px);
	margin: 2px;
}

.cupo-credito-container-label {
    font-weight: bold;
}

.cupo-credito-container {
    width: 90vw;
    height: 75vh;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(3, calc(100%/3));
    font-size: small;
}

.cupo-credito-container-item-container {
    border: 1px solid rgb(200, 200, 200);
    border-radius: 5px;
    margin: 5px;
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
}

span.next-payment-term-uneffective {
    color: var(--gris-wurth-tx);
}

span.next-payment-term-effective {
    color: var(--verde-wurth);
}

.credit-terms-handler-container {
    width: 60vw;
    height: 30vh;
    overflow: auto;
}

p.credit-terms-handler-require-oc-description {
    text-align: justify;
    padding: 5px;
}

.credit-terms-handler-require-oc-check-container {
    background: rgb(220, 220, 220);
    border-radius: 5px;
    padding: 5px;
    display: flex;
    justify-content: space-evenly;
}

.mensaje-motivo-ampliacion-dias-credito-motivo-container {
    width: 50vw;
    height: 25vh;
}

textarea.mensaje-motivo-ampliacion-dias-credito-motivo-textarea {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.select-cond-pago-container {
    display: flex;
    justify-content: space-evenly;
    padding: 10px;
    background: var(--gris-wurth-tx);
    border-radius: 5px;
}

.modal-get-info-ecommerce-container {
    max-height: 60vh;
    overflow-y: auto;
    padding: 10px;
}

.upload-images-sign-container {
	width: 60vw;
	height: 40vh;
}

div#modalFirma {
    border: 2px solid rgb(180,180,180);
    border-radius: 10px;
    padding: 10px;
}

.customer_sign-firma-detail-container {
    display: flex;
    justify-content: space-around;
}

.modal-get-info_ecommerce-arroba-ecommerce {
    color: white;
    opacity:1;
}

.acompanamiento-list-container .header, .array-acompanamiento-filtros, .acompanamiento-list-container .body {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 2fr 1.5fr 1.5fr 1fr 1fr 1fr 1fr 1.5fr 1.5fr;
    margin: 10px 0px;
}

.body-array-acompanamiento-container .body, .body-array-acompanamiento-container .body {
	text-align: center;
	justify-content: center;
}

.customer-sign-commande {
    width: 400px;
    height: 300px;
}

i.fa.fa-tags.tag-solicitud-en-curso {
    color: orange;
	padding: 0px 5px;
}

.limite-credito-main-container {
    width: 100%;
}

.limite-credito-datos {
    background: rgb(180, 180, 180);
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    color: white;
}

.monto-riesgo-datos {
    background: var(--rojo-wurth);
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    color: white;
}

.credito-datos {
    background: var(--verde-wurth);
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    color: white;
}

p.limite-credito-label, p.credito-label, p.monto-riesgo-label {
    margin: 0px;
    font-weight: bold;
}

div#termometro_comporta_pagos_admon_container, div#termometro_comporta_pagos_container {
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}

.termometro {
    display: flex;
    width: fit-content;
    margin: 0 auto;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.segmento-comporta {
    width: 80px;
    height: 20px;
    border-right: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: white;
}


.segmento-comporta:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.segmento-comporta:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

#indicador {
    transition: left 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.burbuja {
    background: #045ba3;
    color: white;
    border-radius: 10px;
    padding: 2px 8px;
    font-weight: bold;
    font-size: 14px;
	width: 35px;
	position: relative;
}

.punta {
    width: 2px;
    height: 20px;
    background: #045ba3;
	position: relative;
}

.estado {
    margin-top: 10px;
    font-weight: bold;
    padding: 4px 8px;
    background: #f9f9f0;
    color: #00b140;
    display: inline-block;
    border-radius: 12px;
}

p.termometro-comporta-pagos-admon-container, p.termometro-comporta-pagos-container {
    text-align: justify;
    font-weight: bold;
}

// .cupo-credito-container-item-container:has(.limite-credito-main-container, #termometro_comporta_pagos_admon_container) {
  // height: 200px;
// }

.cupo-credito-container-item-container:has(#tacometro_resumen_riesgo) {
  justify-content: center;
}

p.tacometro-resumen-riesgo-title, p.tacometro-resumen-riesgo-label {
    margin: 0px;
    font-weight: bold;
	text-align: center;
}

p.tacometro-resumen-riesgo-label {
    margin: 0px;
    font-weight: bold;
	text-align: center;
	position: relative;
	top: -35px;
}

.tacometro-resumen-riesgo-porcentaje {
    text-align: center;
    top: -35px;
    position: relative;
    font-weight: bold;
    font-size: larger;
    color: rgb(150,150,150);
}

.datos-sector-main-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px;
}

.datos-sector-label {
    font-weight: bold;
}

.datos-main-container {
    width: 100%;
}

.datos-sector-data {
    text-align: end;
}

.datos-recomendaciones-label {
    font-weight: bold;
    margin-bottom: 10px;
}

.datos-recomendaciones-data {
    text-align: justify;
}

.modal-tpl-plan-viaje-maps {
    width: 70%;
    height: 100%;
}

.modal-tpl-plan-viaje {
	display: flex;
	flex-direction: column;
	height: 100%; /* o 100vh */
}

.modal-tpl-plan-viaje-container-top {
	height: 88%;
	display: flex;
}

.modal-tpl-plan-viaje-container-bottom {
	height: 10%;
	overflow-y: auto;
}

.modal-tpl-plan-viaje-list-customer {
	width: 30%;
    height: 68vh;
    overflow-y: auto;
    color: rgb(214, 51, 55);
}

.modal-tpl-plan-viaje-container-food {
	height: 100%;
	padding: 5px;
	box-sizing: border-box;
    width: 1700px;
}

.informative-badge {
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    margin-left: 5px;
    vertical-align: top;
    display: inline-block;
}

.cointainer-shopping-cart-body-etiqueta, .cointainer-shopping-cart-body-stock {
    font-weight: bold;
}

img.imagen-customer-foto {
	width: 100%;
}

.imagen-preview {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
}

i#edit_rubro, i#edit_mperdida, i#update_info {
    color: var(--verde-wurth);
    margin-left: 10px;
}

.set-rubro-container, .set-mperdida-container {
    width: 50vw;
    height: 40vh;
}

#select_mperdiad + .select2-container {
    width: 300px !important; /* O el ancho deseado */
}

.cartera-detail-container {
    padding: 0px !Important;
	margin: 0px !Important;
}

.cartera-detail {
    max-height: 70vh;
	padding: 10px;
}

.theader.link-pago {
    position: relative;
}

.check-container {
    position: absolute;
    bottom: 30px;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.check-vencidos-container, .check-todos-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cartera-totales-customer-container .totales-cartera:nth-of-type(7), .cartera-totales-customer-container .totales-cartera:nth-of-type(8), .cartera-totales-customer-container .totales-cartera:nth-of-type(9) {
    background-color: #f0f0f0;
    font-weight: bold;
    border-radius: 5px;
    text-align: right;
}

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

.badge-notificacion {
	position: absolute;
	top: -4px;
	right: -4px;
	background-color: red;
	color: white;
	font-size: 0.65vw; /* o 10px */
	padding: 2px 6px;
	border-radius: 50%;
	min-width: 16px;
	text-align: center;
	line-height: 1;
	display: inline-block;
}

.icon-estandar {
    padding: 9px;
    border: 0.1px solid var(--rojo-wurth);
    border-radius: 5px;
    font-size: 1vw;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#filter-seller-coach, #filter-seller-gerente {
    margin-bottom: 10px;
    padding: 5px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.contacts-slide .slick-slide {
    padding: 0 !important;
    margin: 0 !important;
}

.detail-facture-valor-a-pagar-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

input.detail-facture-valor-a-pagar {
    width: 100%;
    text-align: right !important;
    border: none;
}

.detail-facture-valor-a-pagar-container {
    border: 1px solid rgb(220, 220, 220);
    border-radius: 5px;
}

.detail-facture-valor-a-pagar-container.con-descuento {
    border: 2px solid var(--verde-wurth);
}

.invd-alert-delete {
    background: var(--rojo-wurth-tx) !important;
}

.totales-cartera.link-pago {
    text-align: right;
}

.ocultoModalFamilia {
    display: none !important;
}

.father-highlight {
    background-color: #e6f4ea;
    border-left: 4px solid #007bff;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-in-out;
}

.father-active {
    background-color: #f0f4f8;
    border-left: 4px solid #007bff;
    transition: all 0.3s ease-in-out;
}

.familia-tabla-body .father:nth-child(even) {
    background-color: #f7f8fa;
}
.familia-tabla-body .father:nth-child(odd) {
    background-color: #ffffff;
}

.opcion-usuario {
        cursor: pointer;
        padding: 8px;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
}
.opcion-usuario:hover {
	background-color: #f0f0f0;
}
.opcion-usuario i {
	margin-right: 8px;
	color: #0073aa;
}

.icon-spacing-familia-modal {
	margin-right: 5px;
}

.custom-map-control-button {
    background-color: #fff;
    border: none;
    outline: none;
    width: 40px;
    height: 40px;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
    padding: 0;
    transition: background-color 0.3s;
}
.custom-map-control-button:hover {
    background-color: #ebebeb;
}
.custom-map-control-button svg {
    width: 24px;
    height: 24px;
    fill: #5f6368;
}

.cointainer-shopping-cart-body-attachment, .cointainer-shopping-cart-body-input-attachment {
	display: flex;
	justify-content: center; /* Centra horizontalmente */
	align-items: center;     /* Centra verticalmente */
	height: 100%;            /* o un valor fijo como 40px */
}

.modal-attach-info-warning-box {
	background-color: #fff3cd;
	color: #856404;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #ffeeba;
	margin-top: 15px;
	font-size: 13px;
}

button#view_consumos.inactivo, button#view_sugeridos.inactivo, button#search_product.inactivo {
    background: rgb(220, 220, 220);
    color: var(--gris-wurth);
	cursor: no-drop;
}

.text-right {
    text-align: right;
}

.link-fake {
    color: #007bff;
    cursor: pointer;
}

.link-fake:hover {
    color: #0056b3;
}

span#msj_no_cuenta_rutero, span#msj_si_cuenta_rutero {
    position: absolute;
    top: 40px;
    right: 64px;
    width: 50%;
    border: 1px solid rgb(220,220,220);
    border-radius: 5px;
    padding: 10px;
}

.container-telesales{
    height: 100%;
    width: 100%;
}

.container-telesales-agenda, .container-telesales-gestion {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.container-telesales-agenda .container-superior-agenda, .container-telesales-gestion .container-superior-gestion {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    /* overflow-x: hidden;  */
}

.container-telesales-agenda .container-inferior-agenda, .container-telesales-gestion .container-inferior-gestion {
    background: white;
    text-align: center;
    height: 6vh;                /* altura fija */
    width: 100%;
    font-size: 1.3vh;
    overflow-x: auto;   /* activa scroll horizontal */
    overflow-y: hidden; /* oculta scroll vertical */
    white-space: nowrap; /* evita saltos de línea y fuerza el scroll horizontal */
    margin-top: 1rem;
    gap: 0.5rem;
}

.container-telesales .container-superior {
    height: calc(100% - 6vh);
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
	/* overflow: auto; */
}

.parpadeo {
	animation: blink 1s infinite;
}

@keyframes blink {
	0% { background-color: transparent; }
	50% { background-color: yellow; }
	100% { background-color: transparent; }
}
.mensaje-alerta-checkin-es-telefonico-container {
    margin: 10px;
}

.phone-interaction-container {
    width: 60vw;
}

.orders-managed-footer {
    font-weight: bold;
    border-top: 2px solid #444;
    margin-top: 5px;
    padding-top: 5px;
}
.orders-managed-footer span {
    display: inline-block;
    width: 120px; /* ajusta al ancho de tus columnas */
    text-align: center;
}

.orders-managed-header,
.orders-managed-body,
.orders-managed-footer {
    display: grid;
	grid-template-columns: 1fr 2.5fr 0.8fr 1fr 1fr 1fr;
    align-items: right;
    text-align: right;
}

.orders-managed-footer {
    font-weight: bold;
    border-top: 2px solid #444;
    margin-top: 5px;
    padding-top: 5px;
}

/* Fondo del modal */
.modal-add-new-ticket {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5); /* fondo oscuro semi-transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Contenedor principal */
.add-new-ticket-container {
    background: #fff;
    border-radius: 12px;
    padding: 25px 30px;
    width: 500px;
    max-width: 90%;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.2);
    font-family: "Segoe UI", Arial, sans-serif;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.add-new-ticket-title {
    display: block;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
}

.add-new-ticket-data-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.campo-add-cliente,
.campo-add-usuario,
.campo-add-tema,
.campo-add-categoria {
    display: flex;
    flex-direction: column;
}

.campo-add-cliente label,
.campo-add-usuario label,
.campo-add-tema label,
.campo-add-categoria label {
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: 600;
    color: #555;
}

.dato-add-ticket {
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

.dato-add-ticket:focus {
    border-color: #007bff;
    outline: none;
}

.btn-ticket-submit {
    margin-top: 20px;
    padding: 10px 15px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-ticket-submit:hover {
    background: #0056b3;
}

.campo-add-mensaje textarea {
    resize: vertical;
    min-height: 100px;
}

.campo-add-adjuntos input[type="file"] {
    padding: 5px;
    font-size: 14px;
}

.modal-ticket-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 25px;
}

.btn-guardar-ticket {
    background: #28a745;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}
.btn-guardar-ticket:hover {
    background: #218838;
}

.btn-cancelar-ticket {
    background: #dc3545;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.btn-cancelar-ticket:hover {
    background: #c82333;
}

.fa-phone {
    color: white;
}

.street-view-container {
    width: 80vw;
    height: 70vh;
}

.product-return-lines-header {
    position: relative;
}

.reverse-logistics-tracks-detail-view {
    position: absolute;
    border: 1px solid rgb(200,200,200);
    padding: 5px;
    display: grid;
    bottom: 50px;
    right: 0px;
    font-size: 0.8em;
    border-radius: 5px;
    color: black;
    text-align: center;
    justify-content: center;
}

.reverse-logistics-support-tracks {
    display: flex;
    justify-content: center;
    align-items: center;
	font-size: 1.5em;
	cursor:	pointer;
}

/*En telesales agenda marca el dias seleccionado*/
.dia-container-telesales-agenda.selected-day {
	background-color: #0d6efd !important; /* azul Bootstrap */
	color: white !important;
	border-color: #0d6efd !important;
}



/* Fondo general del modal */
.modal-ticket-detail {
    font-family: "Segoe UI", Tahoma, sans-serif;
    font-size: 14px;
    color: #333;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
}

/* Encabezado del ticket */
.ticket-detail-header {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 20px;
    margin-bottom: 20px;
    padding: 15px;
    background: linear-gradient(135deg, #f0f7ff, #e3f2fd);
    border: 1px solid #b3d9ff;
    border-radius: 8px;
}

.ticket-detail-header label {
    font-weight: bold;
    margin-bottom: 3px;
    font-size: 13px;
    color: #0056a3;
}

.ticket-detail-header .dato {
    font-size: 14px;
    color: #222;
}

/* Encabezado de las líneas */
.lines-ticket-header {
    display: grid;
    grid-template-columns: 150px 1fr 200px;
    font-weight: bold;
    background: #e60000;
    color: #fff;
    padding: 8px;
    border: 1px solid #0066cc;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

/* Cuerpo de las líneas */
.lines-ticket-body {
    display: grid;
    grid-template-columns: 150px 1fr 200px;
    padding: 10px;
    border: 1px solid #ccc;
    border-top: none;
    font-size: 13px;
    align-items: center;
    transition: background 0.2s;
}

.lines-ticket-body:nth-child(even) {
    background: #f9fbff;
}

.lines-ticket-body:hover {
    background: #eaf4ff;
}

/* Adjuntos */
.ticket-adjunto {
    color: #007bff;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.ticket-adjunto:hover {
    color: #0056a3;
    text-decoration: underline;
}

/* Botones del modal */
.ui-dialog-buttonpane .btn-cerrar-ticket {
    background: #e53935;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.ui-dialog-buttonpane .btn-cerrar-ticket:hover {
    background: #c62828;
}

.ui-dialog-buttonpane .btn-finalizar-ticket {
    background: #43a047;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    margin-left: 10px;
    transition: background 0.2s;
}

.ui-dialog-buttonpane .btn-finalizar-ticket:hover {
    background: #2e7d32;
}

/* Estrellas */
.stars .star {
    font-size: 30px;
    color: #ccc;
    transition: color 0.2s ease-in-out, transform 0.1s;
}

.stars .star:hover,
.stars .star:hover ~ .star {
    color: #ffcc00;
    transform: scale(1.2);
}

.stars .fa-star {
    color: #f5b301;
}

/* Observaciones */
.observacion-container textarea {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 14px;
    resize: vertical;
    background: #fdfdfd;
    transition: border 0.2s;
}

.observacion-container textarea:focus {
    border-color: #0073e6;
    outline: none;
    background: #f0f7ff;
}

span#btn_solo_cliente_en_foco {
    position: absolute;
    top: 4px;
    right: 35px;
    font-size: 2vw;
    color: var(--gris-wurth-tx);
	cursor:	pointer;
}

span#btn_solo_cliente_en_foco.selected {
    color: var(--verde-wurth);
}

.destacado-no-user td {
    color: #246fd1 !important;
}

.programar-tandem .fa-phone {
	color: black;
}

.tpl-planner-byday-customers-tandem .fa-phone {
	color: green;
}

.client-propect-talla  {
    background: #2196F3;
	color: white;
	font-size: 16px;
	font-weight: bold;
	padding: 2px 6px;
	border-radius: 5px;
}

.client-propect-span {
	background: #4CAF50;
	color: white;
	font-size: 16px;
	font-weight: bold;
	padding: 2px 6px;
	border-radius: 5px;
}

.client-propect-building,
.client-propect-hand-holding {
	font-size: 16px;
	font-weight: bold;
	padding: 2px 6px;
	border-radius: 5px;
}

.table-list-container .top {
    margin: 10px;
    height: 30px;
}

.table-list-container {
    margin: 10px 20px;
    border: 1px solid rgb(220,220,220);
    padding: 10px;
    border-radius: 10px;
}

table#table_list {
    font-size: 0.85em;
}

.shopping-add-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}

/* Contenedor de las barras */
.shopping-progress {
    display: flex;
    flex: 1;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 6px;
    gap: 2px;
}

/* Cada barra */
.shopping-part {
    flex: 1;
    min-width: 10px;
    height: 10px; /* Ajusta si quieres */
    border-right: 1px solid #fff;
}

.shopping-part:last-child {
    border-right: none;
}

/* Colores */
.shopping-part.done {
    background-color: #4CAF50 !important;
}

.shopping-part.pending {
    background-color: #ccc !important;
}

.shopping-extra {
    margin-left: 6px;
    font-weight: 600;
    color: #0d6efd;
    font-size: 13px;
}

.line-discount-container {
    margin-top: 10px;
    border: 2px solid var(--verde-wurth);
    padding: 5px;
    border-radius: 10px;
    font-size: 16px;
}

.cointainer-shopping-cart-order-cambiar-dir-entrega {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cambiar-dir-entrega-btn {
    background-color: var(--rojo-wurth);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cambiar-dir-entrega-btn:hover {
    opacity: 0.85;
}

.cambiar-dir-entrega-btn-activo {
    background-color: #1a7a3c;
}

.cambiar-dir-entrega-sel-label {
    font-size: 12px;
    color: var(--rojo-wurth);
    font-weight: bold;
    padding-left: 2px;
}

.lista-dir-entrega-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}

.lista-dir-entrega-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.lista-dir-entrega-item:hover {
    background-color: var(--rojo-wurth);
    border-color: var(--rojo-wurth);
    color: #fff;
}

.lista-dir-entrega-item:hover .lista-dir-entrega-ciudad {
    color: rgba(255, 255, 255, 0.8);
}

.lista-dir-entrega-direccion {
    font-weight: bold;
    font-size: 13px;
}

.lista-dir-entrega-ciudad {
    font-size: 12px;
    color: #666;
}

.pedidos-dia-kpi {
    padding: 6px 8px;
    background: #f4f6f9;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 11px;
}

.kpi-horizontal {
    display: flex;
    gap: 10px;
    white-space: nowrap;
}

.kpi-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.kpi-label {
    font-size: 9px;
    color: #777;
}

.kpi-data {
    font-weight: 600;
    font-size: 12px;
    color: #2c3e50;
}

.checkout-main-container {
    width: 800px;
    height: 350px;
}

/* Tablet vertical */
@media screen and (max-width: 1024px) and (orientation: portrait) {
    .master-top-section {
        grid-template-columns: 20fr 10fr 5fr 35fr 30fr;
        gap: 2px;
    }

    .top-section-utilities {
        gap: 1px;
        flex-wrap: wrap;
        overflow: hidden;
    }

    .master-top-section .module-title > i {
        padding: 6px;
        font-size: clamp(14px, 2.5vw, 20px);
        border: none;
    }

    .master-top-section .module-title {
        font-size: clamp(16px, 3vw, 22px);
    }

    .row-head {
        font-size: 6px;
        width: 38px;
    }

    .master-top-section div#top_section_search {
        width: 100%;
    }

    img.top-section-logo-img {
        max-height: calc(4vh - 5px);
    }

    div#label_nom_user {
        font-size: 11px;
    }

    .label-rang {
        font-size: clamp(12px, 1.8vw, 15px);
        padding: 2px;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    }
    .cointainer-shopping-cart-body-rang-bad::before,
    .cointainer-shopping-cart-body-rang-red::before,
    .cointainer-shopping-cart-body-rang-green::before {
        border-width: 3.5vw 4vw 0 0;
    }
    .cointainer-shopping-cart-body-rang-bad,
    .cointainer-shopping-cart-body-rang-red,
    .cointainer-shopping-cart-body-rang-green {
        overflow: visible;
    }

    /* Tabla familia: dos líneas por producto en tablet portrait */
    .familia-tabla-body .row > .col {
        order: -1;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 2px;
    }
    .familia-tabla-body .row > .col-4 {
        flex: 1 0 0%;
        max-width: 100%;
        width: auto;
    }
    .familia-tabla-body .father {
        border-top: 2px solid #c5cae9 !important;
        border-bottom: none !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
    .familia-tabla-body .father:nth-child(even) {
        background-color: #eef0f8;
    }
    .familia-tabla-body .father:nth-child(odd) {
        background-color: #f9f9ff;
    }

    /*
        Linea de producto del carro de compras: en portrait de tablet ya no alcanza el ancho
        para 11 columnas (rango, accion, label, iconos, cantidad, precio, dto, subtotal, total,
        adjuntos). Se reordena la misma fila (sin tocar el JS ni el orden de los divs, siguen
        siendo hermanos directos) en una tarjeta de 2 niveles via grid-template-areas:
        arriba la descripcion con todo el ancho, abajo los valores en chips propios.
        dbonilla. 2026-jul-27
    */
    /*
        !important en grid-template-columns y font-size: hay otra regla mas adelante en este
        archivo (@media max-width:1366px, sin filtro de orientacion, selector identico) que
        tambien las redefine y por orden de cascada ganaria sobre esta. Mismo patron ya usado
        en este archivo (ver comentario junto a .cointainer-shopping-cart-right, linea ~2352).
    */
    /*
        margin-right original (20px, linea ~2160) pensado para pantallas anchas — a 600px de
        ancho se nota demasiado, sobre todo ya sin el "ancho fantasma" que antes se comia
        parte de ese espacio. Se reduce solo para este breakpoint.
        dbonilla. 2026-jul-27
    */
    .cointainer-shopping-cart-doc-detail {
        margin: 0px 6px 0px 10px;
    }

    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-line-detail {
        display: grid;
        /*
            minmax(0, 1fr) en vez de 1fr: sin el "0", una columna 1fr no se encoge mas
            alla del contenido mas ancho que tenga adentro (un numero largo sin espacios
            como "1.639.500" no tiene donde partirse). Esa sola celda empuja el ancho de
            TODO el grid, y lo que se sale por la derecha (Dto, Total) queda cortado fuera
            de la pantalla en vez de acomodarse. Ver tambien min-width:0 mas abajo, que
            resuelve el mismo problema a nivel de cada celda (no solo de la columna).
        */
        /*
            12 columnas. Reorganizado a pedido del cliente (via Jose):
            - Fila 1: consecutivo + basura + descripcion (maximo ancho posible) + nota roja
              (stock/prepedido) al lado, no debajo.
            - Fila 2 (antes compartida con fila 1): iconos de accion (lapiz/caja/info) +
              los 5 datos (Cant/Precio/Dto/Subtotal/Total), todos en una sola linea.
            - etiq/fecha-reposicion conservan su propia fila (el cliente no pidio tocarlas,
              solo se refirio al aviso de stock/prepedido).
            dbonilla. 2026-jul-27
        */
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        /*
            Correccion 2026-jul-28 (v2), a peticion del cliente: stock/etiq/fecha (Prepedido /
            Producto agotado / Fecha) comparten ahora la misma fila que "label" (nombre del
            producto) — "label" ocupa las primeras 8 columnas y se extiende (mismo nombre
            repetido) a lo alto de las 3 sub-filas, mientras stock/etiq/fecha ocupan las
            ultimas 4 columnas, cada uno en su propia sub-fila, apilados verticalmente al lado
            de la descripcion en vez de debajo. Con texto alineado a la derecha (regla de mas
            abajo) queda igual al boceto que paso el cliente.
            dbonilla. 2026-jul-28
        */
        grid-template-areas:
            "rank  trash label label label label label label stock stock stock stock"
            "rank  trash label label label label label label etiq  etiq  etiq  etiq"
            "rank  trash label label label label label label fecha fecha fecha fecha"
            "pu    pu    qty   qty   price price dto   dto   subt  subt  total total"
            "chk   chk   chk   chk   chk   chk   att   att   att   att   att   att";
        height: auto;
        row-gap: 4px;
        column-gap: 4px;
        /*
            padding-right moderado: solo el margen de seguridad real frente al scrollbar de
            .cointainer-shopping-cart-doc-detail (scrollbar-gutter:stable no parece tener
            efecto en este dispositivo). El resto del espacio de mas (32px) que tenia antes
            era para compensar el "ancho fantasma" de .master-central-section, ya corregido
            en la raiz — ya no hace falta ese colchon extra.
            dbonilla. 2026-jul-27
        */
        padding: 10px 12px 10px 6px;
        font-size: 14px !important;
    }

    /*
        "stock" (Necesita revision de stock / Prepedido) usa visibility:hidden cuando esta
        inactivo — eso PRESERVA su alto reservado aunque no muestre nada, dejando un espacio
        vacio entre la descripcion y los iconos/datos. [style*="visibility: hidden"] detecta
        el caso inactivo (atributo style puesto por JS) y lo colapsa del todo con display:none,
        sin tocar el JS. Cuando si aplica, JS cambia ese estilo en linea a visibility:visible,
        deja de coincidir el selector, y la fila vuelve a mostrarse normal.
        dbonilla. 2026-jul-27
    */
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-stock[style*="visibility: hidden"] {
        display: none;
    }

    /*
        Mismo caso para "etiqueta" (Producto agotado / Prox. arribo) — tiene su propia fila
        completa (no comparte con "stock"), asi que al colapsarla del todo cuando esta
        inactiva, la fila entera desaparece en vez de solo el texto.
    */
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-etiqueta[style*="visibility: hidden"] {
        display: none;
    }

    /*
        A peticion del cliente: las tres filas (stock/etiq/fecha) ya ocupan el ancho completo
        de la linea, pero el texto debe quedar alineado a la derecha (no pegado al texto del
        producto a la izquierda), como en el boceto que paso.
        dbonilla. 2026-jul-28
    */
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-stock,
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-etiqueta,
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-fecha-reposicion {
        text-align: right;
    }

    /*
        Caso "Prepedido": shopping_cart.js.php le quita la clase
        "cointainer-shopping-cart-body-stock" a este texto especifico (para evitar que se
        dispare un clic accidental, ver funcion que arma la linea de producto), asi que las
        reglas de arriba no lo alcanzan ahi. Se agarra por su posicion fija: siempre es el
        siguiente hermano justo despues de "body-label" (el nombre del producto), sin importar
        si conserva su clase o no.
        dbonilla. 2026-jul-28
    */
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-label + .text-danger {
        grid-area: stock;
        text-align: right;
    }

    /* Cada celda puede encogerse hasta su columna en vez de imponer su propio ancho minimo */
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-line-detail > * {
        min-width: 0;
        overflow-wrap: break-word;
    }

    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-rang-red,
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-rang-green,
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-rang-bad { grid-area: rank; }
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-header-actions { grid-area: trash; }
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-label { grid-area: label; }
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-stock { grid-area: stock; }
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-etiqueta { grid-area: etiq; }
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-fecha-reposicion { grid-area: fecha; }
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-pu { grid-area: pu; }
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-qty { grid-area: qty; }
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-price { grid-area: price; }
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-discount { grid-area: dto; }
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-total { grid-area: subt; }
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-total-ttc { grid-area: total; }
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-input-attachment { grid-area: chk; }
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-attachment { grid-area: att; }

    /* Cantidad tambien pasa a chip con etiqueta propia (no comparte la regla flex-column de precio/dto/subtotal/total) */
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-qty {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
    }

    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-qty::before,
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-price::before,
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-discount::before,
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-total::before,
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-total-ttc::before {
        order: -1;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--gris-wurth, #999);
    }
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-qty::before { content: "Cant"; }
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-price::before { content: "Precio"; }
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-discount::before { content: "Dto"; }
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-total::before { content: "Subtotal"; }
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-total-ttc::before { content: "Total"; }

    /*
        El encabezado de columnas (Articulo/Nivel precio/Cantidad/Precio/Dto/Subtotal/Total) no
        se adapto a la tarjeta de 2 niveles y sigue intentando dibujarse como tabla plana de 9
        columnas fijas — eso es lo que estaba forzando el ancho de mas y el corte de texto a la
        derecha (confirmado: el mismo encabezado se veia cortado igual que las filas de datos).
        En la tarjeta cada valor ya trae su propia etiqueta (Cant/Precio/Dto/...), asi que esas
        etiquetas quedan redundantes y se ocultan.
        dbonilla. 2026-jul-27

        Correccion 2026-jul-28: el "display:none" original ocultaba TODO el contenedor, pero
        ahi mismo viven los botones de agregar producto (+) e ir a prepedido (portapapeles) —
        confirmado por el cliente en captura de pantalla, esos dos iconos desaparecian junto
        con las etiquetas redundantes sin que fuera la intencion. Se muestra el contenedor
        como fila simple y se ocultan unicamente las etiquetas de columna, dejando visibles
        los dos iconos de accion.
        dbonilla. 2026-jul-28

        Correccion 2026-jul-28 (2): el primer intento de ocultar solo las etiquetas
        (":not(.header-action):not(.header-actions)") no se sostenia — el toggle real entre
        "modo edicion" (etiquetas Articulo/Nivel precio/...) y "modo agregar" (buscador/select
        precio/cantidad/dto/carrito/regalo) lo hace JS con .show()/.hide() (shopping_cart.js.php
        lineas 1038-1050, 2497-2498), que fija un "display" por estilo en linea — un estilo en
        linea le gana a cualquier regla de esta hoja que no tenga !important, sin importar
        cuanto se ocultara por CSS. Se cambia el selector a ".edit:not(.add)" (las etiquetas
        puras: Articulo/Nivel precio/Cantidad/Precio/Dto/Subtotal/Total, todas clase "edit" sin
        "add") con !important; los dos iconos de accion tienen clase "edit add" (las dos a la
        vez) asi que quedan fuera de este selector sin necesitar excepciones explicitas, y los
        campos de "modo agregar" (clase "add" sola) siguen su toggle normal via JS.
        dbonilla. 2026-jul-28
    */
    .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header {
        padding: 6px 0;
        margin-bottom: 10px;
        border-bottom: 3px solid rgb(150, 150, 150);
    }
    .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header
        > .edit:not(.add) {
        display: none !important;
    }

    /*
        Version anterior forzaba "display:flex; flex-wrap:wrap" aqui, pensada para evitar que
        el carrito/regalo quedaran cortados en "modo agregar". Descartada: confirmado por el
        usuario probando en vivo (checkbox de la propiedad en el inspector) que quitar el
        "display:flex" y dejar el "display:grid" original (columnas "fr" proporcionales, ver
        JS linea 1040) es lo que realmente evita el corte — porque las columnas "fr" siempre
        se ajustan al ancho disponible sin desbordar, en una sola linea. El flex-wrap, en
        cambio, hacia crecer el encabezado a 2 lineas y ESO era lo que se veia "montado" sobre
        la primera linea de producto (confirmado tambien con el overlay de lineas del grid: las
        filas de por si estaban bien delimitadas, el problema era la altura extra de las 2
        lineas). Se deja solo el padding/margen/borde para separar visualmente el encabezado
        de la lista, sin tocar su modo de display.
        dbonilla. 2026-jul-28
    */

    /*
        A peticion del cliente (via Jose, probando con la extension de Chrome que emula sus
        tablets reales): en "modo agregar" (buscador/nivel de precio/cantidad/descuento/
        carrito/regalo) se necesita un titulo fijo por campo, para que el vendedor sepa que
        va en cada uno. Se prefiere titulo fijo sobre placeholder porque el placeholder
        desaparece justo al tocar el campo — en pantalla tactil no hay "hover" que lo
        recuerde despues. Implementado con ::before (::after en los iconos, que ya usan su
        propio ::before para el glifo de Font Awesome) en posicion absoluta: no participan
        del layout interno de cada campo (grid/flex propios), asi que no hace falta
        reacomodar nada mas.
        dbonilla. 2026-jul-28
    */
    .cointainer-shopping-cart-header-product-search.add,
    .cointainer-shopping-cart-header-price-select.add,
    .cointainer-shopping-cart-header-product-add-qty.add,
    .cointainer-shopping-cart-header-discount.add {
        position: relative;
        padding-top: 11px;
    }
    .cointainer-shopping-cart-header-product-search.add::before,
    .cointainer-shopping-cart-header-price-select.add::before,
    .cointainer-shopping-cart-header-product-add-qty.add::before,
    .cointainer-shopping-cart-header-discount.add::before {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        font-size: 8px;
        font-weight: 700;
        letter-spacing: .02em;
        text-transform: uppercase;
        color: rgb(115, 115, 115);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cointainer-shopping-cart-header-product-search.add::before { content: "Buscar producto"; text-align: left; }
    .cointainer-shopping-cart-header-price-select.add::before   { content: "Nivel de precio"; text-align: left; }
    .cointainer-shopping-cart-header-product-add-qty.add::before { content: "Cantidad"; text-align: center; }
    .cointainer-shopping-cart-header-discount.add::before        { content: "Descuento %"; text-align: left; }

    /*
        El select2 de "Nivel de precio" trae su propia altura fija puesta por JS
        (shopping_cart.js.php ~linea 940, 3.5vh) — distinta a la del buscador (2.5vh, regla
        base linea ~2133). Con el select vacio no se notaba; con un precio real ya elegido
        (texto largo tipo "Precios Por Cliente $ 18.509 cant. min. 1") se ve mas alto que sus
        vecinos y desalinea la fila. Se iguala su altura a la del buscador y se fuerza a
        truncar en una sola linea con "...", en vez de desbordar hacia abajo.
        dbonilla. 2026-jul-28
    */
    .cointainer-shopping-cart-header-price-select.add .select2-container,
    .cointainer-shopping-cart-header-price-select.add .select2-selection {
        height: 2.5vh !important;
    }
    .cointainer-shopping-cart-header-price-select.add .select2-selection__rendered {
        line-height: 2.5vh !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /*
        Carrito y regalo se quedan SIN titulo de texto (a diferencia de los 4 campos de
        arriba): son iconos que el vendedor ya reconoce sin etiqueta en el resto de la app
        (misma pareja de iconos, sin texto, en cada linea de producto). Se intento agregarles
        titulo (flex-direction:column + ::after) pero causaba que saltaran a una fila aparte
        del encabezado, sin lograr aislar la causa exacta a tiempo — se descarta esa parte y
        se dejan tal como estaban antes de este cambio.
        dbonilla. 2026-jul-28
    */

    /*
        Se intento redistribuir estas columnas a peticion del cliente (buscador/nivel de
        precio 60/40, cantidad igualada a descuento) sobreescribiendo "grid-template-columns"
        con [style*="10fr 3fr 3fr"] (ver commit anterior). Se revierte: justo despues de ese
        cambio empezaron a saltar carrito/regalo a una fila aparte del encabezado — no se logro
        aislar la causa exacta a tiempo, y las proporciones originales (las que pone el propio
        JS en linea, shopping_cart.js.php linea ~1040) son las que quedaron confirmadas sin
        ese problema. Pendiente para una proxima sesion, con mas tiempo para probar en el
        dispositivo real.
        dbonilla. 2026-jul-28

        Confirmado despues con el HTML real (F2 del cliente): la columna de cantidad SI tiene
        exactamente 8 items para 8 columnas, sin ningun item de mas — las "3 celdas vacias"
        que se veian en el overlay del grid eran los iconos +/- del stepper de cantidad
        (#down_qty/#up_qty), que ya traen "visibility:hidden" puesto por el propio JS de la
        app (ocupan su espacio pero no dibujan nada) — no un problema nuestro.
        dbonilla. 2026-jul-28
    */

    /*
        La causa real de todo el problema de esta sesion: existe OTRA regla para este mismo
        contenedor, mas arriba en este archivo ("Tablet horizontal", @media max-width:1366px,
        SIN filtro de orientacion), pensada para los encabezados de columna del listado normal
        (Articulo/Nivel precio/.../Total, 11 columnas) — no para "modo agregar". Esa regla
        tambien tiene !important y la misma cadena de 3 clases, y en ciertos momentos le ganaba
        a lo que se intentaba aqui. El usuario confirmo en vivo (editando esa otra regla
        directamente en el inspector) que ese tipo de valor SI funciona sin desbordar ni
        saltar de linea. Se replica el mismo enfoque aqui, acotado con [style*="10fr 3fr 3fr"]
        (solo "modo agregar", no toca modo edicion ni horizontal), con las proporciones finales
        pedidas por el cliente: buscador 6fr / nivel de precio 4fr (60/40 entre ellos dos), y
        cantidad / descuento ambos en 1.5fr (mismo ancho entre si — ya no hace falta el
        "max-width" que se le habia puesto antes a cantidad por separado, la columna misma le
        da el tamaño correcto).
        dbonilla. 2026-jul-28

        Correccion final: el overlay del grid del inspector mostro una celda vacia real (una
        columna del grid sin ningun elemento asignado) entre cantidad y descuento — el
        acomodo automatico de los 8 elementos reales no estaba cayendo en las columnas
        esperadas dentro de esta regla de 11 columnas (pensada originalmente para otro
        encabezado). En vez de seguir ajustando el "grid-template-columns" y confiar en el
        acomodo automatico, se le asigna a CADA uno de los 8 elementos su columna exacta con
        "grid-column", y "grid-row: 1" a todos para blindar contra el salto de linea — sin
        ambiguedad de por medio.
        dbonilla. 2026-jul-28
    */
    .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header[style*="10fr 3fr 3fr"] {
        grid-template-columns: 5% 5% 6fr 4fr 3fr 1.5fr 5% 5% !important;
    }
    .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header[style*="10fr 3fr 3fr"] > .cointainer-shopping-cart-header-action {
        grid-column: 1 !important; grid-row: 1 !important;
    }
    .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header[style*="10fr 3fr 3fr"] > .cointainer-shopping-cart-header-actions {
        grid-column: 2 !important; grid-row: 1 !important;
    }
    .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header[style*="10fr 3fr 3fr"] > .cointainer-shopping-cart-header-product-search.add {
        grid-column: 3 !important; grid-row: 1 !important;
    }
    .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header[style*="10fr 3fr 3fr"] > .cointainer-shopping-cart-header-price-select.add {
        grid-column: 4 !important; grid-row: 1 !important;
    }
    .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header[style*="10fr 3fr 3fr"] > .cointainer-shopping-cart-header-product-add-qty.add {
        grid-column: 5 !important; grid-row: 1 !important;
    }
    .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header[style*="10fr 3fr 3fr"] > .cointainer-shopping-cart-header-discount.add {
        grid-column: 6 !important; grid-row: 1 !important;
    }
    .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header[style*="10fr 3fr 3fr"] > .cointainer-shopping-cart-header-product-add.add {
        grid-column: 7 !important; grid-row: 1 !important;
    }
    .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header[style*="10fr 3fr 3fr"] > .cointainer-shopping-cart-header-product-add-gift {
        grid-column: 8 !important; grid-row: 1 !important;
    }

    /*
        Nota: no hace falta reclamar aqui el espacio que dejaba el encabezado oculto — mas
        adelante en este archivo (linea ~9356, bloque @media max-width:1366px) ya existe
        ".cointainer-shopping-cart-right { grid-template-rows: auto auto auto 1fr !important; }".
        Con "auto", una fila que solo contiene un elemento display:none colapsa sola a 0 de
        alto, y "1fr" en la fila de la lista de productos ya absorbe automaticamente ese
        espacio liberado. Esa regla gana por orden de cascada (viene despues), asi que
        agregar algo aqui seria redundante.
        dbonilla. 2026-jul-27
    */

    /*
        Causa raiz real de todo el corte de texto a la derecha (carro de compras, cuadro de
        informacion, encabezados): .master-central-section (regla base, linea ~158) usa
        grid-template-columns: 3vw auto — la columna "auto" no se limita al ancho disponible
        del padre (.container-master, 600px reales), crece segun el contenido que tenga adentro
        (medido: 642px). Como .container-master tiene overflow:hidden, esos ~42px de mas se
        recortan en silencio en vez de generar scroll. minmax(0, 1fr) toma exactamente el
        espacio que sobra despues de los 3vw, en vez de crecer segun el contenido.
        dbonilla. 2026-jul-27
    */
    .master-central-section {
        grid-template-columns: 3vw minmax(0, 1fr);
        /*
            Este mismo elemento TAMBIEN es un item dentro de la grilla de .container-master
            (columna 1fr). Igual que sus hijos, por defecto no se encoge mas alla de lo que
            pida su propio contenido interno, sin importar que su ancho declarado sea 100%.
            Por eso, aunque ya se arreglaron sus columnas internas y sus hijos (abajo), el
            elemento intermedio seguia empujando todo hacia afuera. Es el mismo problema en
            un tercer nivel: columna (.container-master) -> item (.master-central-section
            mismo) -> columna interna (arriba) -> item (.left/right-central-section, abajo).
        */
        min-width: 0;
    }

    /*
        La prueba con 400px confirmo que el CSS SI controla el ancho de este elemento — y que
        el "min-width:0" nunca fue la solucion porque el minimo nunca fue el problema. La
        causa real: el width:100% de la regla base (linea ~161) no se esta resolviendo contra
        los 600px reales de .container-master en este contexto de grid (por eso min-width:0
        no cambiaba nada — el valor "de fondo" ya estaba mal, no habia ningun minimo empujando).
        100vw si resuelve directo contra el viewport real, sin depender de ese calculo de grid.
        dbonilla. 2026-jul-27
    */
    .master-central-section {
        width: 100vw !important;
    }

    /*
        Con la columna arreglada (arriba), falta el otro lado del mismo problema: el elemento
        QUE VIVE dentro de esa columna (.right-central-section) por defecto tampoco se encoge
        mas alla de lo que pida su propio contenido, sin importar que tan angosta sea la
        columna que lo contiene. min-width:0 se lo permite. Mismo patron ya aplicado antes en
        .cointainer-shopping-cart-body-line-detail (columna + celda, las dos partes hacen falta).
    */
    .left-central-section,
    .right-central-section {
        min-width: 0;
    }

    /*
        El cuadro "Informacion" (Valor mercancia/flete/IVA/total) es un elemento totalmente
        distinto a las filas del carro — comparte fila con Cliente/Direccion de entrega en
        4 columnas iguales (.cointainer-shopping-cart-doc-customer, regla base linea ~1959:
        grid-template-columns: 2fr 2fr 2fr 2fr). A 600px de ancho cada cuarto de esos apenas
        tiene ~140px, y adentro "Informacion" todavia se reparte otra vez en 2 columnas
        (#information_info > div, linea ~3129) para etiqueta y valor — de ahi el mismo corte
        a la derecha.
        A peticion del cliente (via Jose): en vez de apilar las 4 secciones en 1 columna,
        pasan a una grilla de 2x2 — arriba el selector de tipo de documento (operation) y
        Cliente (customer), lado a lado; abajo Direccion de entrega (address) e Informacion
        (information), lado a lado. Cada una sigue usando la mitad del ancho, suficiente para
        que Informacion no se corte (antes tenia solo 1/4 con 4 columnas iguales).
        !important en grid-template-columns: este elemento trae ese valor puesto por JS en el
        atributo style (confirmado en el inspector), y un estilo en linea le gana a cualquier
        regla de hoja de estilos que no tenga !important, sin importar el orden o la
        especificidad.
        dbonilla. 2026-jul-27
    */
    .cointainer-shopping-cart-doc-customer {
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "operation customer"
            "address   information";
        /*
            Igual que .master-central-section: este elemento TAMBIEN es un item dentro de la
            grilla de .cointainer-shopping-cart-right, y por defecto no se encoge mas alla de
            lo que pida su propio contenido interno, sin importar que sus columnas internas ya
            esten resueltas. Medido antes: 612px de contenido en un espacio real de ~590px.
            dbonilla. 2026-jul-27
        */
        min-width: 0 !important;
    }
    .cointainer-shopping-cart-doc-customer .operation { grid-area: operation; }
    .cointainer-shopping-cart-doc-customer .customer { grid-area: customer; }
    .cointainer-shopping-cart-doc-customer .address { grid-area: address; }
    .cointainer-shopping-cart-doc-customer .information { grid-area: information; }

    /*
        Separador entre la fila de arriba (selector documento/Cliente) y la de abajo
        (Direccion de entrega/Informacion), a peticion del cliente. Mismo color/grosor que
        ya usa el borde entre operation/customer/address (rgb(230,230,230), regla base
        linea ~2001).
        dbonilla. 2026-jul-27
    */
    .cointainer-shopping-cart-doc-customer .address,
    .cointainer-shopping-cart-doc-customer .information {
        border-top: 2px solid rgb(230, 230, 230);
        padding-top: 6px;
    }

    /*
        Cada linea de "Informacion" (Valor mercancia/flete/IVA/total, #information_info > div,
        regla base linea ~3129) trae margin-right:20px — pensado para cuando esta seccion
        compartia fila con otras 3 y sobraba poco espacio. Ahora que ocupa el ancho completo
        (arriba), ese margen ya no cabe y empuja el valor fuera del borde derecho. Se quita
        el margen y se agrega minmax(0,1fr) en la columna del valor, mismo patron de siempre.
        dbonilla. 2026-jul-27
    */
    #information_info > div {
        margin-right: 0;
        /* minmax(0, 1fr) en las DOS columnas — con solo una, la otra puede seguir
           creciendo de mas y empujar a la que si tiene el limite hasta casi 0 de ancho */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    /* Un poco de aire entre el valor y el borde derecho real de la pantalla */
    .cointainer-shopping-cart-doc-customer .information {
        padding-right: 16px;
    }

    /*
        Ultimo eslabon de la cadena: .cointainer-shopping-cart-right (medido: 622px) es un
        item dentro de la grilla de .cointainer-ppal-shopping-cart (regla base linea ~1861,
        @media max-width:1024px sin orientacion: grid-template-columns: 0px 1fr — sin
        minmax). .cointainer-shopping-cart-left YA tenia min-width:0 en esa regla base, pero
        a .cointainer-shopping-cart-right (el que SI importa, ahi vive todo el carro) nunca
        se le agrego. Por eso .doc-customer y .doc-detail heredaban un padre todavia ancho de
        mas, sin importar cuanto se arreglaran ellos mismos.
        dbonilla. 2026-jul-27
    */
    .right-central-section .cointainer-ppal-shopping-cart {
        grid-template-columns: 0px minmax(0, 1fr);
    }
    .cointainer-shopping-cart-right {
        min-width: 0;
    }

    /*
        "Estrategia 5X5X5" (pedidos-dia-kpi) comparte fila con TODOS los demas
        iconos del pie de pagina (camion, documento, check, menu "..."). Solo
        existe un ajuste para esa fila en @media max-width:1366px SIN distinguir
        orientacion (columnas minmax(40px,1fr), pensado para tablet horizontal) —
        en vertical ese ancho minimo no cabe y la fila se corta/corre hacia la
        izquierda. Se reduce el contenido de esta caja en particular (sin tocar
        las demas columnas de la fila): se oculta el titulo "Estrategia 5X5X5"
        (es una etiqueta, no un dato, igual que el encabezado de columnas del
        carrito mas arriba) y se recorta gap/padding/fuente para que ocupe menos
        ancho horizontal.
        dbonilla. 2026-jul-28
    */
    .pedidos-dia-kpi .kpi-horizontal .kpi-item:first-child {
        display: none;
    }
    .pedidos-dia-kpi {
        padding: 4px 6px;
    }
    .pedidos-dia-kpi .kpi-horizontal {
        gap: 6px;
    }
    .pedidos-dia-kpi .kpi-label {
        font-size: 8px;
    }
    .pedidos-dia-kpi .kpi-data {
        font-size: 11px;
    }

    /*
        Se pide mas ancho para esta caja (las cifras de Vr Prom Ped. pueden ser
        de millones). Intento anterior (span 9) resulto demasiado ancho y
        empujo los iconos reales (truck/newspaper/check) fuera de su posicion
        esperada — confirmado por el usuario en captura de pantalla e inspector:
        hay 6 "<div></div>" vacios (sin clase) dentro de .options-icons — 1
        antes de la caja (columna 1, ya es 0px por la regla base) y 5 despues,
        antes de los iconos reales — que seguian ocupando su propia columna de
        grid aunque agrandaramos la caja, en vez de liberarla.
        Se sacan esos 6 divs vacios del flujo del grid con display:none (no
        afecta a la caja ni a los iconos reales, que si tienen contenido/clase
        y no coinciden con :empty). Con eso, la caja pasa a ser el primer
        elemento real del grid (arranca en la columna 1, de 0px) y puede
        crecer a span 10 (9 columnas utiles + la columna 1 desperdiciada)
        dejando 3 columnas de sobra antes de los 3 iconos reales — sin superar
        las 16 columnas totales de "grid-template-columns" (1 + 10 + 3 = 13).
        Pendiente de confirmar en el tablet.
        !important necesario: mas adelante en este archivo (@media max-width:
        1366px, SIN filtro de orientacion, selector identico) hay
        "grid-column: span 4" que por orden de cascada ganaria sobre esta regla
        en cualquier tablet vertical de <=1366px de ancho.
        dbonilla. 2026-jul-28
    */
    .options-icons > div:empty {
        display: none;
    }
    .options-icons .pedidos-dia-kpi.option-shopping-cart {
        grid-column: span 10 !important;
    }
}

/* Tablet horizontal */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    .master-top-section {
        grid-template-columns: 20fr 25fr 8fr 20fr 27fr;
        gap: 4px;
    }

    .top-section-utilities {
        gap: 1px;
        flex-wrap: wrap;
        overflow: hidden;
    }

    .master-top-section .module-title > i {
        padding: 6px;
        font-size: clamp(14px, 1.8vw, 22px);
        border: none;
    }

    .master-top-section .module-title {
        font-size: clamp(16px, 2vw, 24px);
    }

    .row-head {
        font-size: 7px;
        width: 45px;
    }

    .master-top-section div#top_section_search {
        width: 100%;
    }
}

/* iPad Pro landscape y tablets grandes */
@media screen and (min-width: 1025px) and (max-width: 1366px) {
    .master-top-section {
        grid-template-columns: 15fr 25fr 8fr 22fr 30fr;
        gap: 4px;
    }

    .master-top-section div#top_section_search {
        width: 100%;
    }

    .master-top-section .module-title > i {
        padding: 7px;
        font-size: clamp(16px, 1.6vw, 22px);
        border: none;
    }

    .master-top-section .module-title {
        font-size: clamp(18px, 1.8vw, 24px);
    }

    .top-section-utilities {
        gap: 2px;
        overflow: hidden;
    }
}

/* Bottom bar — distribución en tablet */
@media screen and (max-width: 1366px) {
    .options .options-icons,
    .options .options-help {
        grid-template-columns: 0px repeat(15, minmax(40px, 1fr));
    }
    .options-icons .pedidos-dia-kpi {
        grid-column: span 2;
        min-width: 0;
        overflow-x: auto;
    }
    .options-icons .pedidos-dia-kpi.option-shopping-cart {
        grid-column: span 4;
    }
    .master-bottom-section {
        padding-left: 3vw;
    }

    /* Shopping cart — filas reales en tablet para eliminar superposición */
    /* !important necesario: JS aplica grid-template-rows como inline style en línea 2352 */
    .right-central-section .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right {
        grid-template-rows: auto auto auto 1fr !important;
    }

    /* Shopping cart — cabecera cliente más compacta */
    .cointainer-shopping-cart-doc-customer {
        min-height: auto;
        max-height: none;
        align-items: start;
        align-self: start;
        font-size: clamp(11px, 1.3vw, 15px);
    }
    .cointainer-shopping-cart-doc-customer .operation,
    .cointainer-shopping-cart-doc-customer .customer,
    .cointainer-shopping-cart-doc-customer .address,
    .cointainer-shopping-cart-doc-customer .information {
        margin-top: 2px;
        margin-bottom: 2px;
        max-height: none;
        overflow: visible;
    }
    .cointainer-shopping-cart-doc-customer .operation-select-draft {
        align-self: start;
        padding-top: 5px;
    }

    /*
        A peticion del cliente: el bloque "Orden" (titulo + icono de estado con flecha) debe
        verse mejor ubicado y mas grande. Se agrupa titulo + icono en una sola fila (antes
        quedaban apilados por el "display:grid" base de ".operation", uno debajo del otro) y
        se agranda el texto del titulo y los iconos.
        dbonilla. 2026-jul-28
    */
    .cointainer-shopping-cart-doc-customer .operation {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    .cointainer-shopping-cart-doc-customer .operation-label {
        font-size: clamp(15px, 2.6vh, 22px);
    }
    .cointainer-shopping-cart-doc-customer .icon-doc-shopping-cart {
        font-size: clamp(20px, 2.6vw, 28px);
    }
    .cointainer-shopping-cart-doc-customer .operation .fa-angle-down {
        font-size: clamp(14px, 1.6vw, 20px);
        margin-left: 5px;
    }

    /*
        A peticion del cliente: los 4 iconos de accion del carrito (agregar producto, ir a
        prepedido, agregar al carrito, obsequio) tambien deben verse un poco mas grandes.
        Los de agregar-producto y carrito/regalo traen su tamaño puesto por JS como estilo en
        linea (2vw / 1.8vw) — hace falta !important para ganarles. El de "ir a prepedido"
        (i#btn_goto_preorder) hereda el tamaño de su contenedor
        (.cointainer-shopping-cart-header-actions[etiqueta="acciones"], regla base linea
        ~7024) y no necesita !important.
        dbonilla. 2026-jul-28
    */
    .cointainer-shopping-cart-header-action .fa-plus-circle,
    .cointainer-shopping-cart-header-product-add.add,
    .cointainer-shopping-cart-header-product-add-gift {
        font-size: clamp(20px, 2.6vw, 28px) !important;
    }
    .cointainer-shopping-cart-header-actions[etiqueta="acciones"] {
        font-size: clamp(20px, 2.6vw, 28px);
    }
    #customer_info,
    #address_info,
    #information_info {
        margin-top: 2px;
    }
    #address_info .delivery-address-bad,
    #address_info .delivery-address-ok {
        height: auto;
        overflow-y: visible;
    }

    /* Fila agregar producto — campos mejorados en tablet */
    .cointainer-shopping-cart-header-product-search.add input,
    input#search_field {
        height: clamp(40px, 5.5vh, 52px);
        font-size: clamp(15px, 1.6vw, 18px);
        padding: 0 8px;
        border-radius: 3px;
        width: 95%;
    }
    .cointainer-shopping-cart-header-price-select.add select {
        height: clamp(28px, 3.5vh, 36px);
        font-size: clamp(11px, 1.2vw, 14px);
        width: 95%;
        border-radius: 3px;
        border: 1px solid black;
    }
    .cointainer-shopping-cart-header-product-input-add-qty.add {
        height: clamp(28px, 3.5vh, 36px);
    }
    input#qty_producto {
        height: clamp(24px, 3vh, 30px);
        font-size: clamp(11px, 1.2vw, 14px);
    }
    .cointainer-shopping-cart-header-discount input#remise_percent {
        height: clamp(28px, 3.5vh, 36px);
        font-size: clamp(11px, 1.2vw, 14px);
        width: 5vw;
        min-width: 60px;
        border-radius: 3px;
    }

    /* Barra de opciones (estrella, tag, bandera) — altura y tamaño en tablet */
    .cointainer-shopping-cart-right-options {
        min-height: 44px;
        padding: 6px 0;
    }
    .cart-container-options,
    .cart-container-options-informative {
        font-size: clamp(16px, 1.8vw, 22px);
    }

    /* Líneas de producto — texto legible en tablet */
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-line-detail {
        font-size: clamp(11px, 1.2vw, 14px);
        grid-template-columns: 5% 5% 3fr 3fr 0.3fr 1.5fr 1.2fr 1.2fr 1.5fr 1.5fr 1.5fr;
    }

    /*
        Encabezado de productos — respiracion en tablet, y alineado con las columnas reales
        de la fila de producto (mismo listado de 11 columnas que
        .cointainer-shopping-cart-body-line-detail, linea ~9425).
        Verificado en el inspector (arbol real, no solo el codigo fuente): la fila tiene 13
        hijos que SI compiten por columna (fecha-reposicion trae display:none y no cuenta) —
        rango(1) basura(2) descripcion(3) stock(4) etiqueta(5) iconos(6) cantidad(7) precio(8)
        dto(9) subtotal(10) total(11); adjuntos(12,13) se van a una fila implicita aparte.
        El primer intento asumio que los iconos caian en la columna 5 (sin contar
        "etiqueta"), por eso "Nivel precio" quedaba corrido a la derecha; luego se corrigio a
        la columna 5 de nuevo por error de conteo y quedo muy a la izquierda. Esta es la
        posicion verificada contra el DOM real.
        !important: JS fija este grid-template-columns por estilo en linea segun el estado
        del carro (ver invdspeedy.js.php / shopping_cart.js.php lineas ~1040-1052, 2499, 6802).
        dbonilla. 2026-jul-27
    */
    .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header {
        font-size: clamp(11px, 1.2vw, 14px);
        padding: 8px 0;
        margin-bottom: 6px;
        grid-template-columns: 5% 5% 3fr 3fr 0.3fr 1.5fr 1.2fr 1.2fr 1.5fr 1.5fr 1.5fr !important;
    }
    .cointainer-shopping-cart-header-action { grid-column: 1; }
    .cointainer-shopping-cart-header-actions { grid-column: 2; }
    .cointainer-shopping-cart-header-label { grid-column: 3; }
    .cointainer-shopping-cart-header-niv-precio { grid-column: 6; }
    .cointainer-shopping-cart-header-qty { grid-column: 7; }
    .cointainer-shopping-cart-header-price { grid-column: 8; }
    .cointainer-shopping-cart-header-discount { grid-column: 9; }
    .cointainer-shopping-cart-header-total { grid-column: 10; }
    .cointainer-shopping-cart-header-total-ttc { grid-column: 11; }

    /*
        "Necesita revision de Stock por BackOffice" partia hasta palabras a la mitad
        (ej. "BackOffi"/"ce") porque la columna era muy angosta (1.5fr). Ya se le dio mas
        ancho arriba (3fr, a costa de "etiqueta" que casi nunca se usa). overflow-wrap:normal
        evita el corte a mitad de palabra — con mas espacio, el texto ya cabe partiendo solo
        en los espacios normales.
        dbonilla. 2026-jul-27
    */
    .cointainer-shopping-cart-doc-detail .cointainer-shopping-cart-body-stock {
        overflow-wrap: normal;
        word-break: normal;
    }

    /*
        Precio y Dto.: el encabezado esta centrado (regla base linea ~2109) pero el dato de
        la fila esta alineado a la derecha (regla base .cointainer-shopping-cart-body-price/
        -discount, linea ~2342 area, align-items:flex-end) — de ahi la sensacion de
        desalineado. Se alinea el encabezado a la derecha tambien, para coincidir con el dato
        (que sigue el estandar de esta pantalla para valores numericos).
        dbonilla. 2026-jul-27
    */
    .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header .cointainer-shopping-cart-header-price,
    .cointainer-ppal-shopping-cart .cointainer-shopping-cart-right .cointainer-shopping-cart-doc-header .cointainer-shopping-cart-header-discount {
        justify-content: flex-end !important;
    }

    /* Línea de producto — iconos uniformes */
    .cointainer-shopping-cart-body-pu {
        font-size: clamp(16px, 2.6vw, 26px);
    }
    .cointainer-shopping-cart-body-pu .fa-gift,
    .cointainer-shopping-cart-body-pu .edit-price-level {
        font-size: clamp(16px, 2.6vw, 26px);
    }
    i#delete-product {
        font-size: clamp(14px, 1.8vw, 20px);
    }
    i#down_qty_line, i#up_qty_line,
    i#up_qty, i#down_qty {
        font-size: clamp(14px, 1.8vw, 20px);
    }
    .label-rang {
        font-size: clamp(11px, 1.2vw, 14px);
        text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    }
    .cointainer-shopping-cart-body-rang-bad::before,
    .cointainer-shopping-cart-body-rang-red::before,
    .cointainer-shopping-cart-body-rang-green::before {
        border-width: 2.5vw 2.8vw 0 0;
    }
    .cointainer-shopping-cart-body-rang-bad,
    .cointainer-shopping-cart-body-rang-red,
    .cointainer-shopping-cart-body-rang-green {
        overflow: visible;
    }

    /* Vista cliente — iconos post-venta */
    .post-sales-service-container {
        font-size: clamp(28px, 5.5vh, 48px);
        gap: 8px;
    }
    i#register_return,
    i#register_master_service {
        padding: 6px;
    }

    /* Vista cliente — bloque gestión */
    .container-dasboard-customer .top .left .basic-gestion .gestion {
        font-size: clamp(13px, 1.3vw, 15px);
    }
    .container-dasboard-customer .top .left .basic-gestion .gestion .left-gestion {
        grid-template-rows: repeat(5, auto);
        align-content: start;
    }
    .visita-actual {
        grid-template-rows: repeat(3, auto);
        align-content: start;
    }
    .container-dasboard-customer .top .left .basic-gestion .gestion .left-gestion .sin-pedidos,
    .container-dasboard-customer .top .left .basic-gestion .gestion .left-gestion .aviso-visita,
    .container-dasboard-customer .top .left .basic-gestion .gestion .left-gestion .reprogramar-visita,
    .container-dasboard-customer .top .left .basic-gestion .gestion .left-gestion .ultima-visita,
    .container-dasboard-customer .top .left .basic-gestion .gestion .right-gestion .visita-actual .programar-tandem,
    .container-dasboard-customer .top .left .basic-gestion .gestion .right-gestion .visita-actual .last-tandem,
    .container-dasboard-customer .top .left .basic-gestion .gestion .right-gestion .visita-actual .next-tandem {
        padding: 3px 8px;
    }

    /* Vista cliente — KPIs bottom */
    .container-dasboard-customer .bottom {
        grid-template-columns: 20% 35% 45%;
    }
    .container-dasboard-customer .bottom .kpis,
    .container-dasboard-customer .bottom .current-situation {
        min-width: 0;
    }
    .container-dasboard-customer .bottom .kpis > div {
        height: clamp(36px, 5vh, 48px);
        font-size: clamp(15px, 1.6vw, 18px);
        padding: 0 6px;
        margin: 3px 4px;
        width: calc((100% - 24px) / 3);
        min-width: 0;
        flex-shrink: 1;
    }
    .container-dasboard-customer .bottom .kpis > div i {
        font-size: clamp(20px, 2.2vw, 26px) !important;
    }

    /* Vista cliente — datos básicos (basic-data) */
    .container-dasboard-customer .top .left .basic-gestion .basic-data {
        font-size: clamp(12px, 1.3vw, 15px);
        padding: 6px;
    }
    .container-dasboard-customer .basic-data i.fa {
        width: clamp(14px, 1.5vw, 18px);
        font-size: clamp(12px, 1.3vw, 16px);
    }

    /* Vista cliente — situación actual */
    .current-situation :is(.retenidos, .backorders, .current-balance, .limit, .disponible, .payment-days, .customer-seniority, .credit-terms, .average-purchase) {
        font-size: clamp(13px, 1.4vw, 16px);
        padding: 4px 10px;
        min-height: clamp(28px, 3.5vh, 36px);
    }

    /* Vista cliente — seller summary / situación de compra */
    .container-purchase-situation .container-top .container-sale-objectives-right
        :is(.container-e-shop, .container-no-more-purchased, .container-purchase-history, .container-top-50) .title {
        font-size: clamp(11px, 1.3vw, 15px);
    }
    .container-purchase-situation .container-top .container-sale-objectives-right
        :is(.container-e-shop, .container-no-more-purchased, .container-purchase-history) .dato,
    .container-purchase-situation .container-top .container-sale-objectives-right .container-top-50 .relation {
        font-size: clamp(20px, 3.5vh, 38px);
    }
    .container-purchase-situation .container-sale-objectives-left .container-top {
        font-size: clamp(28px, 5vh, 50px);
    }
    .container-purchase-situation .container-top .container-sale-objectives-left .container-bottom-a {
        font-size: clamp(28px, 5vh, 50px);
    }
    .container-purchase-situation .container-top .container-sale-objectives-left .container-bottom-b {
        font-size: clamp(28px, 5vh, 50px);
    }
    .container-purchase-situation .container-top .container-sale-objectives-right #btn_check_in_out {
        font-size: clamp(28px, 4.5vh, 46px);
    }
    .container-purchase-situation .container-bottom .container-account-status {
        font-size: clamp(28px, 5.5vh, 48px);
    }

    /* Vista vendedor — gaps y layout de tarjetas optimizados */
    .container-purchase-situation,
    .container-purchase-situation .container-top,
    .container-purchase-situation .container-bottom,
    .container-purchase-situation .container-top .container-sale-objectives-right {
        gap: 6px;
        grid-gap: 6px;
    }
    .container-purchase-situation .container-top .container-sale-objectives-right
        :is(.container-e-shop, .container-no-more-purchased,
            .container-purchase-history, .container-top-50),
    .container-purchase-situation .container-top .container-sale-objectives-right
        .container-check-in-out {
        grid-template-rows: 1fr auto;
        padding: 4px 6px;
    }
}

.acciones-detail .header, .acciones-detail .body {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 2fr 3fr;
    grid-gap: 10px;
}

.acciones-detail .header {
    font-weight: bold;
}

/* ============================================================
   PROSPECT WIZARD -- Wizard de 6 pasos para nuevo prospecto
   dbonilla. 2026-abr-01
   ============================================================ */

.prospect-wizard-wrapper {
    display: flex;
    flex-direction: column;
    width: min(72vw, 900px);
    min-width: 360px;
    height: 100%;
    min-height: 0;
}

.prospect-wizard-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px 8px;
    flex-shrink: 0;
}

.prospect-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: default;
}

.prospect-step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #d0d0d0;
    color: #fff;
    font-weight: bold;
    font-size: clamp(11px, 0.85vw, 14px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.prospect-step-item.active .prospect-step-circle {
    background: var(--rojo-wurth);
}

.prospect-step-item.completed .prospect-step-circle {
    background: #2e7d32;
}

.prospect-step-label {
    font-size: clamp(9px, 0.62vw, 11px);
    color: #666;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}

.prospect-step-item.active .prospect-step-label {
    color: var(--rojo-wurth);
    font-weight: bold;
}

.prospect-step-item.completed .prospect-step-label {
    color: #2e7d32;
}

.prospect-step-connector {
    flex: 1;
    height: 2px;
    background: #d0d0d0;
    margin: 0 4px;
    margin-bottom: 20px;
}

/* ---- Step panels ---- */

.prospect-step {
    display: none;
    flex-wrap: wrap;
    column-gap: 10px;
    width: 100%;
}

.prospect-step.prospect-step--active {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    width: 100%;
}

/* ---- Section headers within steps ---- */
.prospect-section-header {
    flex-basis: 100%;
    font-size: clamp(11px, 0.8vw, 13px);
    font-weight: 700;
    color: var(--rojo-wurth);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 12px;
    margin-bottom: 2px;
    padding-bottom: 4px;
    border-bottom: 1px solid #eee;
}

/* ---- Step 1: Empresa ---- */
/* gap 1 col = 10px (2 items) ; gap 2 col = ~7px (3 items) */
.prospect-step[data-step="1"] .campo-add-prospect[dato="nombre"]         { flex-basis: 100%; }
.prospect-step[data-step="1"] .campo-add-prospect[dato="tipo_doc"]       { flex-basis: calc(35% - 10px); }
.prospect-step[data-step="1"] .campo-add-prospect[dato="rut"]            { flex-basis: calc(65% - 10px); }
.prospect-step[data-step="1"] .campo-add-prospect[dato="alias"]          { flex-basis: calc(65% - 10px); }
.prospect-step[data-step="1"] .campo-add-prospect[dato="sucursal"]       { flex-basis: calc(35% - 10px); }
.prospect-step[data-step="1"] .campo-add-prospect[dato="forma_juridica"] { flex-basis: calc(60% - 10px); }
.prospect-step[data-step="1"] .campo-add-prospect[dato="es_proveedor"]   { flex-basis: calc(40% - 10px); }
.prospect-step[data-step="1"] .campo-add-prospect[dato="requiere_oc"]    { flex-basis: 100%; }

/* Sección Representante Legal (visible solo con NIT) */
.seccion-rl {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.seccion-rl .campo-add-prospect[dato="nombre_rl"]    { flex-basis: calc(65% - 10px); }
.seccion-rl .campo-add-prospect[dato="documento_rl"] { flex-basis: calc(35% - 10px); }
.seccion-rl .campo-add-prospect[dato="correo_rl"]    { flex-basis: calc(65% - 10px); }
.seccion-rl .campo-add-prospect[dato="celular_rl"]   { flex-basis: calc(35% - 10px); }

/* Selector firmante (radiobuttons NIT) */
.firmante-selector {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px 0;
    border-top: 1px solid #eee;
    margin-bottom: 4px;
}
.firmante-selector-label {
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}
.firmante-selector-label.required {
    color: var(--rojo-wurth);
}
.firmante-radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
    margin: 0;
}
.firmante-radio-label input[type="radio"] {
    cursor: pointer;
    accent-color: var(--rojo-wurth);
    width: 16px;
    height: 16px;
}

/* Readonly para campos del firmante */
.campo-add-prospect[dato="nombre_firma"] input[readonly],
.campo-add-prospect[dato="documento_firma"] input[readonly],
.campo-add-prospect[dato="cargo_firma"] input[readonly] {
    background-color: #f0f0f0;
    cursor: default;
    color: #555;
}

/* ---- Step 2: Contacto ---- */
.prospect-step[data-step="2"] .campo-add-prospect[dato="nombre_solicitante"]  { flex-basis: calc(60% - 10px); }
.prospect-step[data-step="2"] .campo-add-prospect[dato="cargo_solicitante"]   { flex-basis: calc(40% - 10px); }
.prospect-step[data-step="2"] .campo-add-prospect[dato="email"]              { flex-basis: calc(55% - 10px); }
.prospect-step[data-step="2"] .campo-add-prospect[dato="celular"]            { flex-basis: calc(45% - 10px); }
.prospect-step[data-step="2"] .campo-add-prospect[dato="telefono"]           { flex-basis: calc(45% - 10px); }
.prospect-step[data-step="2"] .campo-add-prospect[dato="celular2"]           { flex-basis: calc(55% - 10px); }
.prospect-step[data-step="2"] .campo-add-prospect[dato="country"]            { flex-basis: calc(45% - 10px); }
.prospect-step[data-step="2"] .campo-add-prospect[dato="town"]               { flex-basis: calc(55% - 10px); }
.prospect-step[data-step="2"] .campo-add-prospect[dato="es_referido"]        { flex-basis: calc(50% - 10px); }
.prospect-step[data-step="2"] .campo-add-prospect[dato="cliente_que_refiere"]{ flex-basis: calc(50% - 10px); }
.prospect-step[data-step="2"] .campo-add-prospect[dato="referral_source"]    { flex-basis: 100%; }

/* ---- Step 3: Direcciones ---- */
.prospect-step[data-step="3"] .campo-add-prospect[dato="address"]           { flex-basis: 100%; }
.prospect-step[data-step="3"] .campo-add-prospect[dato="ciudad_oficina"]    { flex-basis: 100%; }
.prospect-step[data-step="3"] .campo-add-prospect[dato="direccion_entrega"] { flex-basis: 100%; }
.prospect-step[data-step="3"] .campo-add-prospect[dato="ciudad_entrega"]    { flex-basis: 100%; }

/* ---- Step 4: Clasificacion ---- */
.prospect-step[data-step="4"] .campo-add-prospect[dato="division"]          { flex-basis: calc(50% - 10px); }
.prospect-step[data-step="4"] .campo-add-prospect[dato="rubro"]             { flex-basis: calc(50% - 10px); }
.prospect-step[data-step="4"] .campo-add-prospect[dato="ciiu"]              { flex-basis: calc(50% - 10px); }
.prospect-step[data-step="4"] .campo-add-prospect[dato="operaios"]          { flex-basis: calc(50% - 10px); }
.prospect-step[data-step="4"] .campo-add-prospect[dato="estructura_cliente"]{ flex-basis: calc(50% - 10px); }
.prospect-step[data-step="4"] .campo-add-prospect[dato="ambito_cliente"]    { flex-basis: calc(50% - 10px); }

/* ---- Step 5: Gestion ---- */
.prospect-step[data-step="5"] .campo-add-prospect[dato="correo_fact_electronica"] { flex-basis: 100%; }
/* Compras */
.prospect-step[data-step="5"] .campo-add-prospect[dato="nombre_compras"]  { flex-basis: calc(50% - 10px); }
.prospect-step[data-step="5"] .campo-add-prospect[dato="cargo_compras"]   { flex-basis: calc(50% - 10px); }
.prospect-step[data-step="5"] .campo-add-prospect[dato="correo_compras"]  { flex-basis: calc(55% - 10px); }
.prospect-step[data-step="5"] .campo-add-prospect[dato="celular_compras"] { flex-basis: calc(45% - 10px); }
/* Pagos */
.prospect-step[data-step="5"] .campo-add-prospect[dato="nombre_pagos"]    { flex-basis: calc(50% - 10px); }
.prospect-step[data-step="5"] .campo-add-prospect[dato="telefono_pagos"]  { flex-basis: calc(50% - 10px); }
.prospect-step[data-step="5"] .campo-add-prospect[dato="correo_pagos"]    { flex-basis: calc(55% - 10px); }
.prospect-step[data-step="5"] .campo-add-prospect[dato="celular_pagos"]   { flex-basis: calc(45% - 10px); }
/* Referencias: 3 columnas (45 / 30 / 25) */
.prospect-step[data-step="5"] .campo-add-prospect[dato="nombre_ref1"]     { flex-basis: calc(45% - 7px); }
.prospect-step[data-step="5"] .campo-add-prospect[dato="parentesco1"]     { flex-basis: calc(30% - 7px); }
.prospect-step[data-step="5"] .campo-add-prospect[dato="celular_ref1"]    { flex-basis: calc(25% - 7px); }
.prospect-step[data-step="5"] .campo-add-prospect[dato="nombre_ref2"]     { flex-basis: calc(45% - 7px); }
.prospect-step[data-step="5"] .campo-add-prospect[dato="parentesco2"]     { flex-basis: calc(30% - 7px); }
.prospect-step[data-step="5"] .campo-add-prospect[dato="celular_ref2"]    { flex-basis: calc(25% - 7px); }

/* ---- Step 6: SAGRILAFT y Firma ---- */

/* Preguntas SAGRILAFT: etiqueta a la izquierda, select pequeno a la derecha */
.prospect-step[data-step="6"] .campo-sagrilaft {
    flex-basis: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

.prospect-step[data-step="6"] .campo-sagrilaft label {
    flex: 1;
    margin: 0;
    font-weight: normal;
    font-size: clamp(11px, 0.82vw, 13px);
    color: #333;
    line-height: 1.3;
}

.prospect-step[data-step="6"] .campo-sagrilaft select {
    flex: 0 0 90px;
    width: 90px;
}

/* Sub-pregunta ¿Cuales? para recursos_publicos — indentada, full-width */
.prospect-step[data-step="6"] .campo-sagrilaft-cuales {
    flex-basis: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 2px 0 4px 24px;
    border: none;
}

.prospect-step[data-step="6"] .campo-sagrilaft-cuales label {
    flex: 0 0 auto;
    font-size: 0.85em;
    font-style: italic;
    color: #666;
    margin: 0;
}

.prospect-step[data-step="6"] .campo-sagrilaft-cuales input {
    flex: 1;
    min-width: 0;
}

.prospect-step[data-step="6"] .campo-add-prospect[dato="entidades_estatales"] { flex-basis: 100%; }
.prospect-step[data-step="6"] .campo-add-prospect[dato="entidades_estatales"] textarea {
    width: 100%;
    resize: vertical;
    min-height: 48px;
}

/* Firma: 3 columnas (50 / 20 / 30) */
.prospect-step[data-step="6"] .campo-add-prospect[dato="nombre_firma"]    { flex-basis: calc(50% - 7px); }
.prospect-step[data-step="6"] .campo-add-prospect[dato="documento_firma"] { flex-basis: calc(20% - 7px); }
.prospect-step[data-step="6"] .campo-add-prospect[dato="cargo_firma"]     { flex-basis: calc(30% - 7px); }

/* Terminos */
.prospect-step[data-step="6"] .campo-add-prospect[dato="terminos"] {
    flex-basis: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    border: none;
    margin-top: 8px;
}

.prospect-step[data-step="6"] .campo-add-prospect[dato="terminos"] input[type="checkbox"] {
    width: auto;
    margin-top: 3px;
    accent-color: var(--rojo-wurth);
    cursor: pointer;
    transform: scale(1.3);
    flex-shrink: 0;
}

/* ---- Zapsign status area ---- */

.prospect-zapsign-status {
    display: none;
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 8px;
    align-items: center;
    gap: 10px;
    font-size: clamp(11px, 0.85vw, 14px);
}

.prospect-zapsign-status.zapsign-sending {
    display: flex;
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}

.prospect-zapsign-status.zapsign-success {
    display: flex;
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.prospect-zapsign-status.zapsign-error {
    display: flex;
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

.zapsign-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: zapsign-spin 0.8s linear infinite;
    flex-shrink: 0;
}

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

/* ---- Wizard footer navigation ---- */

.prospect-wizard-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.prospect-wizard-nav-btn {
    padding: 8px 18px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: clamp(11px, 0.82vw, 14px);
    font-weight: 600;
    transition: opacity 0.2s;
}

.prospect-wizard-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-wizard-anterior {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #bbb;
}

.btn-wizard-siguiente,
.btn-wizard-enviar {
    background: var(--rojo-wurth);
    color: #fff;
}

.btn-wizard-cancelar {
    background: transparent;
    color: #666;
    border: 1px solid #bbb;
    margin-right: auto;
}

.btn-wizard-anterior:hover:not(:disabled),
.btn-wizard-siguiente:hover:not(:disabled),
.btn-wizard-enviar:hover:not(:disabled) {
    opacity: 0.85;
}

/* ---- Data container (scrollable content area) ---- */
.modal-add-new-prospect .add-new-prospect-data-container {
    display: block;        /* Anula el display:flex;flex-wrap:wrap de la regla antigua */
    width: 100%;
    border: none;
    padding: 10px 20px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;               /* Hijo flex de .prospect-wizard-wrapper: ocupa el espacio restante */
    min-height: 0;
    box-sizing: border-box;
}

/* Compact field margins inside wizard + allow flex shrink */
.prospect-step .campo-add-prospect {
    margin: 5px 0;
    min-width: 0;
    box-sizing: border-box;
}

/* Force Select2 containers to respect their parent flex-basis */
.prospect-step .campo-add-prospect .select2-container {
    width: 100% !important;
    min-width: 0;
}

/* Asegurar que los inputs no hereden color de enlace del CSS global de Dolibarr */
/* y que siempre queden contenidos dentro de su campo-add-prospect */
.prospect-step input.dato-add-prospect,
.prospect-step select.dato-add-prospect,
.prospect-step textarea.dato-add-prospect {
    color: #333 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}
.prospect-step input[type="checkbox"].dato-add-prospect {
    width: auto !important;
    min-width: unset !important;
    flex-shrink: 0;
    margin-top: 2px;
}
/* Checkbox de términos: fila horizontal, texto al lado */
.prospect-step .campo-add-prospect[dato="terminos"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 8px;
    flex-basis: 100%;
}
.prospect-step .campo-add-prospect[dato="terminos"] label {
    flex: 1;
    font-size: 0.85em;
    line-height: 1.4;
    cursor: pointer;
}

.firmante-hint {
    color: #c0392b;
    font-size: 0.85em;
    font-weight: normal;
    margin-left: 4px;
}

/* ---- Responsive: pantalla 1080x600 landscape ---- */
@media screen and (max-width: 1100px) {
    .prospect-wizard-wrapper {
        width: min(88vw, 860px);
    }
    .prospect-step-circle {
        width: 28px;
        height: 28px;
    }
}

/* ---- Responsive: portrait / narrow screens (<= 680px) ---- */
@media screen and (max-width: 680px) {

    .prospect-wizard-wrapper {
        width: 95vw;
        min-width: unset;
    }

    .prospect-wizard-header {
        padding: 8px 8px 6px;
    }

    .prospect-step-circle {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }

    .prospect-step-label {
        font-size: 8px;
    }

    .prospect-step-connector {
        margin: 0 2px;
        margin-bottom: 18px;
    }

    /* Todos los campos a ancho completo en pantallas estrechas */
    .prospect-step .campo-add-prospect {
        flex-basis: 100% !important;
    }

    /* Excepto SAGRILAFT que mantiene la fila etiqueta + select */
    .prospect-step[data-step="6"] .campo-sagrilaft {
        flex-basis: 100% !important;
        flex-direction: row;
    }

    /* Sub-pregunta cuales: mantiene fila en pantallas estrechas */
    .prospect-step[data-step="6"] .campo-sagrilaft-cuales {
        flex-basis: 100% !important;
        flex-direction: row;
    }

    .prospect-wizard-nav-btn {
        padding: 7px 12px;
        font-size: 11px;
    }
}

/* ---- Responsive: pantallas de baja altura (<= 650px) ---- */
@media screen and (max-height: 650px) {
    .prospect-wizard-wrapper {
        max-height: 98vh;
    }
    .prospect-wizard-header {
        padding: 5px 16px 4px;
    }
    .prospect-step-circle {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
    .prospect-step .campo-add-prospect {
        margin: 3px 0;
        padding: 7px 10px;
    }
    .prospect-section-header {
        margin: 6px 0 2px;
        padding-bottom: 3px;
    }
    .prospect-wizard-footer {
        padding: 6px 20px;
    }
}

/* ============================================================
   END PROSPECT WIZARD (6 pasos — actualizado 2026-abr-01)
   ============================================================ */

.acciones-detail .header .theader {
    text-align: center;
    background: rgb(200, 200, 200);
    padding: 5px 0px;
}

/* ── Modal productos relacionados ── */
#modal_productos_relacionados + .ui-dialog > .ui-dialog-titlebar,
.pr-modal-titlebar {
    background: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
    padding: 1rem !important;
    font-weight: bold !important;
}

#pr_tabs.ui-tabs                  { padding: 0; border: none; background: transparent; }
#pr_tabs .ui-tabs-nav             { background: #f1f3f5 !important; border: 1px solid #ced4da !important; border-bottom: 2px solid #adb5bd !important; padding: 8px 8px 0 !important; border-radius: 4px 4px 0 0; }
#pr_tabs .ui-tabs-tab             { background: #dde1e7 !important; border: 1px solid #adb5bd !important; border-bottom: none !important; margin-bottom: -2px !important; border-radius: 4px 4px 0 0 !important; }
#pr_tabs .ui-state-active         { background: #ffffff !important; border: 1px solid #adb5bd !important; border-bottom: 2px solid #ffffff !important; }
#pr_tabs .ui-tabs-anchor          { color: #495057 !important; font-weight: 600 !important; padding: 8px 16px !important; display: block; }
#pr_tabs .ui-state-active .ui-tabs-anchor { color: #212529 !important; }
#pr_tabs .ui-tabs-panel           { border: 1px solid #ced4da !important; border-top: none !important; background: #ffffff !important; padding: 0 !important; }

/* ── Overlay producto fuera de venta ── */
.container-product-card .product-resume .bottom .left { position: relative; }
.fuera-de-venta-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    background: rgba(180, 0, 0, 0.72);
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 3px;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
}
.descontinuado-overlay {
    background: rgba(180, 0, 0, 0.72);
}
.search-product-icon {
    cursor: pointer;
    font-size: 22px;
    padding: 4px;
}
.search-product-icon.info-product-card {
    color: #555;
}
.list-group-item.active .search-product-icon {
    color: #fff !important;
}
.product-overlay-stack {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    z-index: 2;
}
.product-overlay-stack .fuera-de-venta-overlay {
    position: static;
    z-index: auto;
}

/* ===================================================
   Modal Entendimiento del Cliente
   =================================================== */
.modal-entendimiento-invd {
    font-family: inherit;
    padding: 0;
}

/* --- Títulos de sección --- */
.modal-entendimiento-invd .header {
    background: var(--rojo-wurth);
    color: #fff;
    padding: 10px 16px;
    margin: 0 0 12px 0;
    border-radius: 6px;
    text-align: center;
}
.modal-entendimiento-invd .header h2 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* --- Cabecera de la tabla de preguntas --- */
.modal-entendimiento-invd .header-encuesta {
    display: grid;
    grid-template-columns: 1.2fr 3fr 1.3fr 2fr;
    background: #2c3e50;
    color: #fff;
    border-radius: 6px 6px 0 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 2;
}
.modal-entendimiento-invd .header-encuesta > span {
    padding: 10px 12px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.12);
}
.modal-entendimiento-invd .header-encuesta > span:last-child {
    border-right: none;
}

/* --- Filas de preguntas --- */
.modal-entendimiento-invd .detail-encuesta {
    display: grid;
    grid-template-columns: 1.2fr 3fr 1.3fr 2fr;
    border-bottom: 1px solid #e9ecef;
    align-items: center;
    transition: background 0.12s;
}
.modal-entendimiento-invd .detail-encuesta:nth-child(odd) {
    background: #f8f9fa;
}
.modal-entendimiento-invd .detail-encuesta:nth-child(even) {
    background: #ffffff;
}
.modal-entendimiento-invd .detail-encuesta:hover {
    background: rgba(204, 0, 6, 0.04);
}
.modal-entendimiento-invd .detail-encuesta.respondida {
    border-left: 3px solid var(--verde-wurth);
}

/* --- Celda criterio --- */
.modal-entendimiento-invd .encuesta-criterio {
    padding: 8px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #495057;
    border-right: 1px solid #dee2e6;
    align-self: stretch;
    display: flex;
    align-items: center;
}

/* --- Celda pregunta --- */
.modal-entendimiento-invd .encuesta-pregunta {
    padding: 8px 12px;
    font-size: 0.82rem;
    color: #212529;
    line-height: 1.4;
    border-right: 1px solid #dee2e6;
}

/* --- Select de respuesta --- */
.modal-entendimiento-invd .encuesta-sino {
    width: calc(100% - 16px);
    margin: 4px 8px;
    padding: 5px 6px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.78rem;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.modal-entendimiento-invd .encuesta-sino:focus {
    border-color: var(--rojo-wurth);
    box-shadow: 0 0 0 2px var(--rojo-wurth-tx);
    outline: none;
}
.modal-entendimiento-invd .encuesta-sino.con-respuesta {
    border-color: var(--verde-wurth);
    background: var(--verde-wurth-tx);
}
.modal-entendimiento-invd .encuesta-sino.sin-respuesta {
    border-color: #ced4da;
    color: #6c757d;
}

/* --- Input de observación --- */
.modal-entendimiento-invd .encuesta-observacion {
    width: calc(100% - 16px);
    margin: 4px 8px;
    padding: 5px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.78rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.modal-entendimiento-invd .encuesta-observacion:focus {
    border-color: var(--rojo-wurth);
    box-shadow: 0 0 0 2px var(--rojo-wurth-tx);
    outline: none;
}

/* --- Sección de documentos --- */
.modal-entendimiento-invd .documentos-encuesta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}
.modal-entendimiento-invd .documento-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #fff;
    transition: box-shadow 0.15s;
}
.modal-entendimiento-invd .documento-item:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.modal-entendimiento-invd .documento-item.requerido {
    border-left: 4px solid var(--rojo-wurth);
}
.modal-entendimiento-invd .documento-item.opcional {
    border-left: 4px solid #adb5bd;
    opacity: 0.85;
}
.modal-entendimiento-invd .icono-documento {
    font-size: 1.2rem;
    color: var(--rojo-wurth);
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.modal-entendimiento-invd .texto-documento {
    flex: 1;
    font-size: 0.84rem;
    font-weight: 500;
    color: #343a40;
}
.modal-entendimiento-invd .btn-subir {
    padding: 5px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--verde-wurth);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.modal-entendimiento-invd .btn-subir:hover {
    background: #1e9a00;
}

/* --- Botones principales --- */
.modal-entendimiento-invd .botones-encuesta {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 16px 0 4px 0;
    border-top: 1px solid #dee2e6;
    margin-top: 14px;
}
.modal-entendimiento-invd .custom-button {
    min-width: 140px;
    height: 40px;
    padding: 0 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: background 0.15s, opacity 0.15s;
}
.modal-entendimiento-invd #btn_agregar_firma_modal {
    background: var(--rojo-wurth);
    color: #fff;
}
.modal-entendimiento-invd #btn_agregar_firma_modal:hover:not(:disabled) {
    background: #a80005;
}
.modal-entendimiento-invd #btn_cerrar_formulario_modal {
    background: #fff;
    color: var(--rojo-wurth);
    border: 1.5px solid var(--rojo-wurth);
}
.modal-entendimiento-invd #btn_cerrar_formulario_modal:hover:not(:disabled) {
    background: var(--rojo-wurth-tx);
}
.modal-entendimiento-invd .custom-button:disabled {
    background: #e9ecef !important;
    color: #adb5bd !important;
    border-color: #dee2e6 !important;
    cursor: not-allowed;
}

/* --- Mensaje error observación --- */
.modal-entendimiento-invd .error-msg {
    color: var(--rojo-wurth);
    font-size: 0.75rem;
    padding: 2px 8px 4px 8px;
}