@import url('https://cdn-uicons.flaticon.com/2.1.0/uicons-regular-rounded/css/uicons-regular-rounded.css');
:root{
		--primary:#0d6efd;
		--secondary:#3292f0;
		--primary_light:#f1f1f1;
    --primary_medium_light:#cce3fb;
}

body{background-color: #fafafa}

h1,h2,h3,h4,h5,h6{color:#474c52;margin: 15px 0;}
.nowrap{white-space: nowrap;}

input{border-radius: 3px;}
.border-bottom-dark{border-bottom: 1px solid #ddd}
label.checkbox input{position: absolute; opacity: 0}
label.checkbox input+div:before{content:" "; width: 15px; height: 15px; border: 1px solid #ccc; display: block; background: #fff; margin-right: 10px;}
label.checkbox input+div{display: flex; align-items: center; color:#333}
label.checkbox input:checked+div:before{background-image: url('../icons/check.svg'); background-position: center; background-size: 99%; background-color: var(--dark_green); border-color: var(--dark_green);background-repeat: no-repeat;}

label.radio input{position: absolute; opacity: 0}
label.radio input+div:before{content:" "; width: 15px; height: 15px; border: 1px solid #ccc; border-radius: 100%; display: block; background: #fff; margin-right: 10px;}
label.radio input+div{display: flex; align-items: center;}
label.radio input:checked+div:before{background-image: url('../icons/radio.svg'); background-position: center; background-size: 50%; background-color: var(--dark_green); border-color: var(--dark_green); background-repeat: no-repeat;}

label.tags input{position: absolute; opacity: 0}
label.tags input+div{display: flex; align-items: center;  padding: 5px 15px; background: #fff; border:1px solid #ccc; cursor: pointer;}
label.tags input:checked+div{background-color: var(--dark_green); border-color: var(--dark_green); color:#fff;}
#preloader{position: fixed; top: 0; left: 0; z-index: 9999999; background: rgba(0,0,0,0.6); width:100%; height: 100%; display: flex; align-items: center; justify-content: center; }
#preloader:after{content:" ";width: 75px; height: 75px; background-repeat: no-repeat; background-image: url('../images/cargando.gif'); background-size: 100%; filter: contrast(0) brightness(2000%);}

.checkbox-vertical label{display: block;}
.radio-vertical label{display: block;}
.tags-vertical label{display: block; width:fit-content;}
.checkbox-horizontal label{margin-right: 20px}
.radio-horizontal label{margin-right: 20px}
.tags-horizontal label{margin-right: 10px}

.bg-primary-light{background-color: var(--primary_light)}
.shadow{ border-radius: 5px; box-shadow: unset !important}
.form-item-label-required{
    padding: 2em;
    /* border: 1px solid; */
    margin: 0;

    margin-bottom: 2em;
    border-radius: 5px;
	
    background-color: #f2f2f2;
}
.form-item-label-required h4, .form-item-label-required h3, .form-item-label-required h5{margin-bottom: 1em;}
.max-width-100{width: 100px; max-width: 100px;}
.tag{font-size: .8rem; padding: 3px 10px; border-radius: 5px; border-width: 1px; border-style: solid; background-color: #f0f0f0; border-color: #ccc; width: fit-content;display: block;font-weight: 400}

a.tag:hover{background-color: #ddd; border-color: #bbb}
.tag.orange{background: #ffe8be; border-color: #ffa700}
.tag.red, .aviso.red{background: #eeb2c3; border-color: #C70039} .aviso.red{color:#C70039;} .color-red{border-color: #C70039}
.tag.blue{background-color: #e5f1fd; border-color: var(--primary)}
.tag.purple{background-color: #efe2ff; border-color: #cca1ff}
.tag.green{background-color:#dcf5dd; border-color: #51d158}
.tag.GRS{background-color:#80ef5d; border-color: #000}
.tag.turquoise{border-color: #51ced1; background-color: #edfafa}
.tag.dark_green{border-color: #3d623f; background-color: #c4cfc5}
.tag.width{width: 100%; text-align: center; justify-content: center;}

.tag[onclick]{cursor: pointer;}
.tag[onclick].orange:hover, a.tag.orange:hover{background-color:#ffa700}
.tag[onclick].green:hover, a.tag.green:hover{background-color:#51d158}
.tag[onclick].blue:hover, a.tag.blue:hover{background-color: var(--primary)}
.tag[onclick].purple:hover, a.tag.purple:hover{background-color: #cca1ff}
.tag[onclick].turquoise:hover, a.tag.turquoise:hover{background-color: #edfafa}
.tag[onclick].dark_green:hover, a.tag.dark_green:hover{background-color: #c4cfc5}
.tag.flex{display: flex; align-items: center; width:fit-content;}
.tag .vertical_separator{height: calc(100% + 6px); margin-top: -3px;}

.lineaTabla.odd{background-color: #fff}
.lineaTabla.even{background: #f8f8f8}

.new_formulario{display: flex; background-color:#f0f0f0; padding: 1.5em; align-items: center; border-radius: 5px;}
.new_formulario label{margin-right: 1em;}
.new_formulario .fi-rr-search{font-size: 1.5rem; margin-left: 1em;}
.new_formulario input[type="text"]{padding:0.5em;}

h1.titulo{font-size: 2rem; color:#000; font-weight: bolder} 


select.width  + .select2 {width: 100% !important}

.fake_input{padding: 5px;}


.btn-secondary, .boton a, .btn{padding: 0.75em 1em;border: 1px solid var(--primary) !important;border-radius: 5px;font-size: 0.8rem; width: fit-content; white-space: nowrap;}
.btn-secondary, .enlacePaginas a{background-color: transparent !important; color:var(--primary);white-space: nowrap;}
.btn-secondary:hover, .enlacePaginas a:hover{background-color: #000 !important; color:#fff;text-decoration: none; border-color: #000 !important}

.pagina-actual{padding: 0.75em 1em;border: 1px solid #000 !important;border-radius: 5px;font-size: 0.8rem; width: fit-content; color:#fff; background-color: #000}

.boton a, .btn-primary, .btn{background-color: var(--primary); color:#fff;white-space: nowrap;}
.boton a:hover, .btn-primary:hover{background-color: #6a6a6a !important; color:#fff !important;border: 1px solid #000 !important}
.boton a.botoninvertido:hover, .boton .botonInvertido:hover{color: #fff !important}
.contact .fi-rr-edit{font-size: 1rem}
.contact .fi-rr-trash{font-size: 1rem}
.contact .sombra{height: 100%}
.contact_content a{color: #000}


.btn-icon{display: flex !important; align-items: center; white-space: nowrap;}
.btn-icon .fi{font-size: 1.25em; margin-right: 0.5ch}


.boton.width a, .btn-secondary.width, .btn-icon.width{width:100%; display: block; text-align:center;}
.btn-icon.width{justify-content: center;display: flex;}

.modal-title{margin-top: 0px;font-size: 1.3rem}
.close-modal-confirm{border:0px; background:transparent; padding:0px; cursor: pointer;font-size: 1.3rem}
.modal-header{margin-left: -2em;margin-right: -2em;padding-left: 2em;padding-right: 2em;border-bottom: 1px solid #ddd;padding-bottom: 1em;margin-bottom: 2em;}
.modal-body{font-size: .9rem}
.modal-footer{margin-top: 2em;}
.modal-footer .btn-secondary{margin-left: 1em;}

.vertical_separator{border-left: 1px solid #ccc}

.order_row {padding: 1em;}
.order_row:nth-child(odd){background-color: #fff}

ul.options{padding: 0; margin: 0}
ul.options li{list-style: none; border-bottom: 1px solid #ddd}
ul.options li a, ul.options li label{padding: 0.5em; font-size: 0.8rem; color: #000; display: block}
ul.options li:not(.facturas):hover{background-color: #eee;}
ul.options li a:hover{text-decoration: none}
ul.options li a{display: flex; align-items: center;}
ul.options li a .fi{font-size: 1.25em; margin-right: 0.5ch; color: var(--primary)}

ul.options li.facturas .flex .tag{margin-right: 5px; margin-bottom: 5px; font-size: 11px; line-height: 1.2}

li.facturas .flex{flex-wrap: wrap;}
.lineas_pedido .lineaVenta:nth-child(odd){background-color: #fff}

.loader {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--primary);
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}
.card-body{width: 100%}
.drop-zone {
  min-width: 250px;
  height: 250px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  color: #cccccc;
  border: 1px dashed var(--primary);
  border-radius: 8px;
  width: 100%
}
.drop-zone:hover{
	background-color: #f0f0f0
}

.drop-zone--over {
  border-style: solid;
}

.drop-zone__input {
  display: none;
}

.drop-zone__thumb {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f0f0f0;
  background-size: contain;
  position: relative;
  background-repeat: no-repeat; background-position: center;
}

.drop-zone__thumb::after {
  content: attr(data-label);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 0;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.70);
  font-size: 14px;
  text-align: center;
}

.detalleArticuloImagen{z-index: 9999}
.sombra_card{border:1px solid #ddd; padding: 1em; border-radius: 8px}
.sombra_card .sombra_card_header{padding: 1em; margin: -1em; width: calc(100% + 2em); margin-bottom: 1em; border-bottom: 1px solid #ddd; font-weight: bolder}
.sombra_card .sombra_card_header.nm{margin-bottom: 0px}
.sombra_card .sombra_card_header i{font-size: 1rem}

.col-md-9 #divCobrosPedido{display: flex; flex-wrap: wrap; justify-content: space-between;}
.col-md-9 #divCobrosPedido .f2{flex: 0 0 100%;}
.col-md-9 #divCobrosPedido .sombra_card {flex: 0 0 32%;}


.bg-absolute-black .background-image{
    width: calc(100% - 6em);
    height: calc(100% - 6em);
    margin: 3em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    width: calc(100vw - 6em);
    position: absolute;
    top:0px;
}

.bg-absolute-black .bg-image-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 1em 3em;
    z-index: 99999;
    position: relative;
}


.lightbox{
    width: 100%;
    display: block;
    padding-top: 100%;
    position: relative;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #ccc;
    overflow: hidden; 
    transition: all 0.5s ease-in-out;
    position: relative;
}
.lightbox:hover{background-color: #f0f0f0}

.lightbox img {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%; 
    max-height: 100%;
    width: auto;
    height: auto;
    transition: all 0.5s ease-in-out;
    z-index: 0;
    cursor: pointer;
}

.lightbox_buttons {display: none; justify-content: flex-end;position: absolute;z-index: 1;bottom: 10px;right: 10px;}
.lightbox_buttons .btn-icon .fi{margin-right: 0px}
.lightbox:hover .lightbox_buttons{display: flex;}

.lightbox2{
    width: 100%;
    display: block;
    padding-top: 100%;
    position: relative;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #ccc;
    overflow: hidden; 
    transition: all 0.5s ease-in-out;
    position: relative;
}
.lightbox2:hover{background-color: #f0f0f0}

.lightbox2 img {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%; 
    max-height: 100%;
    width: auto;
    height: auto;
    transition: all 0.5s ease-in-out;
    z-index: 0;
    cursor: pointer;
}

.lightbox2:hover .lightbox_buttons{display: flex;}

.fecServido td
{
	background-color:#cdf1c0 !important;
}

.fecServido:hover td
{
	background-color:var(--primary_medium_light) !important;
}
#ui-datepicker-div{background: #fff; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
#ui-datepicker-div .ui-widget-header{margin:0;}.ui-datepicker {
    width: 21em;}

.table.flex > div{flex: 0 0 7%; padding:.5em;}
.table.flex.encabezado{font-weight: bold; background: #ccc}
.table.flex:has(.canvas) > div:first-child{flex: 0 0 calc(7% - 44px);}
.table.flex .canvas{flex: 0 0 calc(7% * 12 + 50px);padding:0px;}


.table.flex div:nth-child([attr="data-mes"]){display: none}

.table.flex> div[data-width] {flex: 0 0 attr(data-width width); padding:.5em;}

.asiContable{
  display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


.asiContable:after{content:"\f51e";    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;font-family: 'Line Awesome Free';
    font-weight: 900;font-size: 15px}

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

.separador-lateral
{ 
    border-right: 1px solid #878787;
    padding-right: 5px;
}

.darkgreen
{
	color:#060;
}
.darkblue
{
	color:#0e33f5;
}
.ui-state-highlight
{
	font-weight: bold !important;
	color:#000 !iportant;
}
	
	

/* Botón principal */
.dropdown-btn {
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    padding: 7px 15px;
    font-size: 0.8rem;
    border-radius: 5px;
}

/* Contenedor del menú desplegable */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 200px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    border-radius: 5px;
}

/* Estilos de los enlaces dentro del desplegable */
.dropdown-content a {
    color: black;
    padding: 10px 15px;
    display: block;
    text-decoration: none;
}

/* Efecto hover */
.dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* Mostrar el desplegable cuando se activa */
.dropdown:hover .dropdown-content {
    display: block;
}