/*
 * -------------------------------------------------------------------
 *	Variables
 * -------------------------------------------------------------------
 *
 *
*/
:root{
    --titulo: 'Roboto', sans-serif;
    --texto: 'Lato', sans-serif;

    --naranja: #ff6a1a;
    --naranja-hover: #ff5900;
    --naranja-claro: #ff7a33;
    --naranja-light: #ffa575;
    --naranja-op-5: rgba(255, 106, 26, .5);
    --naranja-op-3: rgba(255, 106, 26, .3);
    --mostaza: #f5a300;
    --blanco: #fff;
    --blanco-2: #f8f9fa;
    --negro: #212121;
    --negro-op-7: rgba(33, 33, 33, .7);
    --negro-op-5: rgba(0, 0, 0, .5);
    --gris: #e9e8e7;
    --gris-op-5: rgba(233, 232, 231, .5);
    --gris-2: #dddbda;
    --gris-3: #b8b4b2;
    --gris-claro: #f2f5f6;
    --gris-claro-2: #f0f0f0;
    --gris-med: #87827d;
}


/*
* -------------------------------------------------------------------
*	Generales
* -------------------------------------------------------------------
*
*
*/
html, body{
    position: relative;	top: 0;	right: 0;	left: 0;	bottom: 0;
    height: 100%;	width: 100%;
    font-size: 14px;	color: var(--negro);
    background: var(--gris-claro);
    scroll-behavior: smooth;
    /* Animación */
        -webkit-transition: top 0.5s ease 0s, right 0.5s ease 0s, left 0.5s ease 0s;
        -moz-transition: top 0.5s ease 0s, right 0.5s ease 0s, left 0.5s ease 0s;
        -o-transition: top 0.5s ease 0s, right 0.5s ease 0s, left 0.5s ease 0s;
        transition: top 0.5s ease 0s, right 0.5s ease 0s, left 0.5s ease 0s
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;    
}

body > div.container{padding-bottom: 100px}
h1, h2, h3, h4, h5, h6{font-family: var(--titulo)}
/*a.btn{line-height: 1.2em}*/
.btn{padding-top: .6rem;	padding-bottom: .6rem}
.btn-sm{
    padding-top: inherit;	padding-bottom: inherit;
    line-height: 2rem
}

.navbar {
    top: 0;
    background-color: var(--naranja);
    width: 100%;
    margin-bottom: 2rem;
}

.bg-orange {
    background-color: var(--naranja);
}

.btn.disabled{opacity: .4}
.btn.focus,
.btn:focus{box-shadow: 0 0 0 .2rem rgba(255, 122, 51, .25)}

.btn.disabled.focus,
.btn.disabled:focus,
.btn:disabled.focus,
.btn:disabled:focus{box-shadow: none}

.btn-naranja,
.btn-outline-naranja{
    color: var(--blanco);
    border-color: var(--naranja);
    background-color: var(--naranja)
}
.btn-outline-naranja{
    color: var(--naranja);
    background-color: transparent
}
.btn-naranja:hover,
.btn-outline-naranja:hover{
    color: var(--blanco);
    border-color: var(--naranja-hover);
    background-color: var(--naranja-hover)
}

.btn-blanco{
    color: var(--negro);
    border-color: var(--blanco);
    background-color: var(--blanco)
}
.btn-blanco:hover{
    border-color: var(--blanco-2);
    background-color: var(--blanco-2)
}
.btn .icon{vertical-align: sub}

.icon.border{
    max-width: 42px;
    padding: .5rem;
    border: 1px solid var(--gris);	border-radius: 50%
}
[data-ventana-abrir],
[data-ventana-galeria]{
    cursor: pointer
}

.list-group-item{
    padding-top: 1.5em;	padding-bottom: 1.5em;
    border-color: var(--gris);
    background: none
}
.img-cuadrada{
    position: relative;
    width: 100%;
    padding: 0;
    background-color: var(--gris-claro-2);	background-position: center;	background-size: cover
}
.img-cuadrada::before{
    content: "";
    display: block;
    padding-top: 100%
}
.img-cuadrada.borde{border: 1px solid var(--gris)}

/* Spinner */
.spinner{
    display: inline-block;
    width: 50px;
    margin: auto;
    text-align: center
}
.spinner > span{
    display: inline-block;
    width: 10px;	height: 10px;
    margin: 0 3px;
    border-radius: 100%;
    background-color: var(--naranja);
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both
}
.spinner .bounce1{
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s
}
.spinner .bounce2{
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s
}
@-webkit-keyframes sk-bouncedelay{
    0%, 80%, 100%{-webkit-transform: scale(0)}
    40%{-webkit-transform: scale(1.0)}
}
@keyframes sk-bouncedelay{
    0%, 80%, 100%{ 
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    40%{ 
        -webkit-transform: scale(1.0);
        transform: scale(1.0)
    }
}

/* Formularios */
form{font-size: 16px}
input,
select,
textarea,
.custom-file-label{
    opacity: 1;
    margin-bottom: 0;
    font-size: 1em;
    /*border-width: 0 0 1px !important;	border-radius: 0 !important;
    background-color: var(--gris) !important;	box-shadow: none !important*/
}
input:focus,
input:focus + .custom-file-label,
select:focus,
textarea:focus,
.form-control:focus,
.custom-select:focus,
.custom-file-input:focus,
.custom-file-input:focus~.custom-file-label {
    border-color: var(--naranja-op-5);
    box-shadow: 0 0 0 .2rem var(--naranja-op-3);
}
select option[disabled]{font-size: .8em}
label,
.label{
    display: inline-block;
    margin-bottom: .5rem;
    font-size: .9em;	color: var(--negro-op-7);	line-height: 1.2em
}
.custom-file-label{
    padding-right: 5em;
    white-space: nowrap;	text-overflow: ellipsis
}
.custom-file-label::after{
    border-radius: 0;
    background: var(--gris-2)
}
.form-control-lg,
.custom-select-lg,
.custom-file .custom-file-label.lg,
.custom-file .custom-file-label.lg::after,
.input-group-append .btn{
    height: auto;
    padding: .8rem 1rem;
    font-size: 1em
}
/*.custom-file-label.lg::after{height: calc(1.5em + 1rem + 2px)}*/
.custom-control-label{font-size: 1em}
.custom-control-label::before{width: 1em;}
.custom-control-label::after{width: 1em;	height: 1em}
.custom-control-input:checked ~ .custom-control-label::before{
    border-color: var(--naranja);
    background-color: var(--naranja)
}
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before{
    border-color: var(--naranja-op-3);
    background-color: var(--naranja-op-3)
}
fieldset:disabled legend{opacity: .5}
form .btn{padding-top: .7rem;	padding-bottom: .7rem}
/* Botón cargando */
.btn .spinner,
button .spinner,
.btn.cargando .texto,
button.cargando .texto{display: none}
.btn.cargando .spinner,
button.cargando .spinner{display: inline-block}
.btn .spinner > span,
button .spinner > span{background: var(--blanco)}
/* Buscar */
input.buscar{
    /*background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right .75rem center/8px 10px no-repeat;*/
    background: #fff url("../img/buscar_icono.svg") right .75rem center/20px 20px no-repeat;
}
.input-group > .custom-file:not(:last-child) .custom-file-label{border-top-left-radius: .25rem;	border-top-right-radius: 0;	border-bottom-right-radius: 0;	border-bottom-left-radius: .25rem}

/* Colores iconos */
.icon.mostaza{stroke: var(--mostaza)}
.icon.pink{stroke: var(--pink)}
.icon.red{stroke: var(--red)}
.icon.purple{stroke: var(--purple)}
.icon.green{stroke: var(--green)}
.icon.gray{stroke: var(--secondary)}

/*
* -------------------------------------------------------------------
*	Cabecera
* -------------------------------------------------------------------
*
*
*/
.cabecera{
    position: relative;
    color: #fff;
    background: var(--naranja);
}
.cabecera .titulo{
    padding: .714em 2.5em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-family: var(--titulo);	font-size: 1.1em;	text-align: center;	font-weight: 400;
}
.cabecera.alta{height: 8rem}
.cabecera.arr{
    position: fixed;	top: 0;	right: 0;	left: 0;
    z-index: 9
}
.cabecera input.buscar{border-color: transparent}


/*
* -------------------------------------------------------------------
*	Menú
* -------------------------------------------------------------------
*
*
*/
#menu{
    position: fixed;	right: 0;	bottom: 0;	left: 0;
    border-top: 1px solid var(--gris);
    background: #fff;	box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.03), 0 -8px 16px rgba(0, 0, 0, 0.03);
    z-index: 9
}
#menu a{
    display: inline-block;
    padding-left: .5rem;	padding-right: .5rem;
    color: var(--gris-med);	text-align: center
}
#menu a .icon{stroke: var(--gris-med)}
#menu a small{
    display: block;
    font-size: .7em
}
#menu a.activo{color: var(--naranja-hover)}
#menu a.activo .icon{stroke: var(--naranja-hover)}

/* Estilo icono */
#menu .icono input{
    position: absolute;	opacity: 0;
    width: 1rem;	height: 1.25rem;
    z-index: -1
}
#menu .icono label{
    width: 100%;
    margin-bottom: 1.8rem;
    font-size: 1em;	color: var(--negro)
}
#menu .icono label img{
    width: 100%;	height: auto;
    padding: 6px;
    border: 1px solid var(--gris);	border-radius: 100%;
    background-color: transparent
}
#menu .icono label::after,
#menu .icono label::before{
    content: "";
    position: absolute;	top: 0;	right: 12px;	pointer-events: none;
    width: 1.3rem;	height: 1.3rem;
    border-radius: 100%;
    z-index: 1;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
#menu .icono label::after{background: 50%/50% 50% no-repeat}
#menu .icono input:checked ~ label::after{background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e")}
#menu .icono input:checked ~ label::before{background-color: var(--naranja)}
/*
<div class="col-3 icono">
    <input id="equipo" type="checkbox">
    <label class="text-center" for="equipo"><img src="assets/img/equip/cerco.svg" alt="">Equipo</label>
</div>
*/


/*
* -------------------------------------------------------------------
*	Ventanas
* -------------------------------------------------------------------
*
*
*/
body.ventana-abierta{position: fixed; overflow-x:hidden; overflow-y: initial}
body.ventana-abierta.der{left: -25%}
body.ventana-abierta.izq{left: 25%}
body.ventana-abierta.arr{top: 15%}
body.ventana-abierta.aba{top: -15%}
.ventana{
    position: fixed !important;	bottom: 0;
    width: 100%;
    box-shadow: 0 0 18px 2px rgba(0, 0, 0, .3);
    z-index: 10;
    /* Animación */
        -webkit-transition: all 0.5s ease 0s;
        -moz-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s
}
.ventana.der{right: -100%}
.ventana.izq{left: -100%}
.ventana.arr{top: -100%}
.ventana.aba{bottom: -100%;	left: 0}
.ventana.der.activo{right: 0}
.ventana.izq.activo{left: 0}
.ventana.arr.activo{top: 0}
.ventana.aba.activo{bottom: 0}

/* Menú editar */
.ventana.editar{
    position: absolute !important;	right: -60%;
    max-width: 60%
}
.boton_editar{
    position: absolute;	right: 100%;
    margin-right: 10px
}

/* Contenedor */
.ventana .contenedor{
    position: absolute;	bottom: 0;	overflow-y: initial; overflow-x: hidden;
    width: 100%;	height: 100%;
    background: var(--gris-claro);
    z-index: 2;
}
.ventana .contenedor .cabecera .icon{stroke: #fff}

/* Ventana flotante */
.ventana.flotante{box-shadow: none}
.ventana.flotante .fondo{
    position: fixed;	top: 0;	right: 0;	bottom: 0;	left: 0;	opacity: 0;	visibility: hidden;
    background: #000;
    z-index: 1;
    /* Animación */
        -webkit-transition: opacity 0.4s ease 0s;
        -moz-transition: opacity 0.4s ease 0s;
        -o-transition: opacity 0.4s ease 0s;
        transition: opacity 0.4s ease 0s
}
.ventana.flotante .contenedor{
    height: auto;	max-height: 90%;
    border-radius: 20px 20px 0 0
}
.ventana.flotante.activo .fondo{opacity: .6;	visibility: visible}

/* Botón cerrar */
.ventana .cerrar{
    position: absolute;	top: 15px;	right: 20px;	cursor: pointer;
    width: 1em;	height: 1em;
    padding: 0;
    font-size: 2rem;	line-height: .65em;
    /* border: 1px solid var(--gris-med); */
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px rgba(0,0,0,.2);
    z-index: 2;
    vertical-align: middle;
    stroke: #212121;
}
.ventana .cerrar.regresar{
    top: 50%;	right: unset;	left: 10px;
    width: auto;	height: auto;
    margin-top: -12px;
    line-height: 0;
    border: none;	border-radius: none;
    background: none;	box-shadow: none;
}

/* Pie */
.pie{
    z-index: 10;
    opacity: 0;	visibility: collapse;
    margin-bottom: -10%;
    background-color: var(--gris-claro);
    bottom: 0;
    position: fixed;
    width: 100%;
    /* Animación */
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.pie.activo{
    opacity: 1;	visibility: visible;
    margin-bottom: 0
}
.pie.sombra{
    box-shadow: 0 -2px 16px rgba(0, 0 ,0 , .15)
}

/* Galería */
.ventana.galeria .fondo{display: none !important}
.ventana.galeria .contenedor{
    height: 100%;	max-height: 100%;
    border-radius: 0;
    background: rgba(0, 0, 0, .9)
}
.ventana.galeria img.anexo {
    width: 100%;
    object-fit: contain;
}


/*
* -------------------------------------------------------------------
*	Cards
* -------------------------------------------------------------------
*
*
*/
.card{
    overflow: hidden;
    font-size: .857rem;
    border: none;	border-radius: .5rem;
    box-shadow: 0 6px 12px rgba(0,0,0,.05)
}
.card .card-header{
    font-family: var(--titulo);	font-size: 1.5em;	font-weight: 500;
    border-color: var(--gris);
    background: none
}
.card a.card-body{color: var(--negro)}
.card a.card-footer{
    position: relative;
    padding-top: 1.1em;	padding-bottom: 1.1em;
    font-size: 1.1em;
    border-top-color: var(--gris);
    background: none
}
.card a.card-footer.small{padding-top: .75em;	padding-bottom: .75em}
.card a.card-footer .icon{vertical-align: sub}
.card a.card-footer .arrow{
    position: absolute;	top: 50%;	right: 12px;
    margin-top: -8px;
    stroke: #007bff
}

/* Estilo submenú */
.card.menu h5{
    opacity: .9;
    margin-bottom: .2em;
    font-size: 1.3em;	font-weight: 400
}
.card.menu p{
    opacity: .5;
    margin-bottom: 0
}
.card.menu .arrow{stroke: var(--gris-med)}

/* Con lista <ul> */
.card .list-group-item a{color: inherit}

/* Estilo Anexos */
.card.anexos .list-group{padding-top: .5em;	padding-bottom: .5em}
.card.anexos .list-group-item{
    padding-top: 1em;	padding-bottom: 1em;
    border-width: 0
}
.card.anexos h4{
    margin-bottom: .3em;
    font-family: inherit;	font-size: 1.2em;	font-weight: 600
}

.card.anexos .badge{padding: .3em .5em}
.card.anexos small{
    opacity: .5;
    font-size: 1em
}
.card.anexos .check{
    display: block;
    margin-right: -5px;	padding: 6px 20px 6px 10px;
    color: var(--blanco);	line-height: 1em;
    border-radius: 100px 0 0 100px;
    background: var(--success)
}
.card.anexos .card-footer{border-top: 1px solid var(--gris)}
/* Sin info */
.card.anexos .no-info h4{font-weight: normal}
.card.anexos .no-info a{
    display: block;
    margin-top: 2rem;	margin-bottom: 1rem
}
.card.anexos .no-info a span{
    display: block;
    margin-top: .5rem
}
.card.anexos .sin_anexo{color: var(--gris-med)}
.card.anexos .sin_anexo .icon.naranja{stroke: var(--gris-2)}
.card.anexos .sin_anexo small{
    opacity: .8;
    color: var(--danger)
}
.card.anexos .sin_anexo .check{
    color: var(--gris-3);
    background: var(--gris-claro)
}

.check.validar {
    padding: 0.5rem 0.61rem;
    border-radius: 100%;
    color: var(--gris-3);
    background: var(--gris-claro);    
}

.check.validar.success{
    background: var(--success);
    color: white;
}

/* Estilo con Datos */
.card.datos label,
.card.datos .label{
    position: relative;
    margin-bottom: 0;	margin-left: 1px;	padding: 2px 6px 2px 0;
    border-radius: 3px;
    background: #fff;
    z-index: 3
}
.card.datos .custom-file{
    display: block;
    margin-bottom: .7rem
}
.card.datos .custom-file label{
    position: absolute;
    color: var(--negro-op-7) !important;
    z-index: 1
}

.card.datos select {
    appearance: none;
}

.card.datos span.form-control {
    color: rgb(33,33 ,33);
}


.card.datos span.form-control,
.card.datos label + input, .card.datos .label + input,
.card.datos label + .form-control, .card.datos .label + .form-control,
.card.datos label + select, .card.datos .label + select,
.card.datos label + .custom-select, .card.datos .label + .custom-select,
.card.datos label + .custom-file label, .card.datos .label + .custom-file label{
    margin-top: -.5em;	padding-left: 0;
    font-size: 1.3em;
    border-color: transparent
}

.card.datos .label + .custom-file label::after {
    display: none
}

.card.datos input:disabled,
.card.datos select:disabled,
.card.datos textarea:disabled,
.card.datos .custom-file-input:disabled + .custom-file-label{
    color: var(--negro);
    background-color: transparent
}

/* Editando */
.card.datos.editando label,
.card.datos.editando .label{
    margin-left: 8px;
    padding-left: 6px;
}

.card.datos.editando label + input, .card.datos.editando .label + input,
.card.datos.editando label + select, .card.datos.editando .label + select,
.card.datos.editando label + .custom-select, .card.datos.editando .label + .custom-select,
.card.datos.editando label + .custom-file label, .card.datos.editando .label + .custom-file label{
    padding-left: 1rem;
    border-color: var(--gris-2);
    background-color: white;
}
.card.datos.editando .label + .custom-file label{margin-left: 0}
.card.datos.editando .label + .custom-file label::after{display: block}
.card.datos.editando select {
    appearance: auto;
}

/* Estilo desplegable */
.card.desplegable{
    max-height: 280px;
    padding-bottom: 40px;
}

.card.desplegable.lg {
    max-height: 440px;
    padding-bottom: 40px;
}

.card.anexos.desplegable {
    max-height: 425px;
    padding-bottom: 0;
}

.card.anexos.desplegable.desplegado {
    padding-bottom: 40px;
}

.card.desplegable .desplegar{
    position: absolute;	right: 0;	bottom: 0;	left: 0;	opacity: .9;	cursor: pointer;
    padding: 20px;
    background: var(--blanco) url('../img/desplegar.svg') center no-repeat;	background-size: 20px;	box-shadow: 0 0 20px 20px var(--blanco);
    z-index: 9;
}
.card.desplegable .desplegar.black {
    background: rgba(0, 0, 0, .4) url('../img/desplegar-white.svg') center no-repeat;
    box-shadow: 0 0 20px 20px rgba(0,0,0, .4);
}

.card.desplegable .desplegar-top {
    background: rgba(0, 0, 0, .3);
    box-shadow: 0 0 20px 20px rgb(0 0 0 / 30%);
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    color: white;
    opacity: .9;
    padding-top: 20px;
    background-size: 20px;
    z-index: 9;    
}

.card.desplegable.desplegado{max-height: 100%}
.card.desplegable.desplegado .desplegar{
    background-color: var(--blanco);
    background-image: url('../img/contraer.svg');	box-shadow: none
}

/* Flecha y candado */
.card span.arrow,
.card span.candado{
    display: inline-block;
    width: 16px;	height: 16px;
    vertical-align: middle;
    background: url('../img/arrow-next.svg');	background-size: cover
}
.card span.candado{background-image: url('../img/candado.svg')}

/* Bloqueada */
.card.disabled{
    overflow: visible;	cursor: not-allowed;
    color: var(--gris-med);
    background-color: var(--gris-op-5);	box-shadow: 0 0 0 1px var(--gris-2);
    margin-bottom: 2.5rem!important;
}
.card.disabled .icon.naranja{stroke: var(--gris-med)}
.card.disabled span.arrow{background-image: url('../img/candado.svg')}
.card.disabled[title]::before{
    content: "";
    position: absolute;	bottom: -19px;	left: 0;
    width: 12px;	height: 12px;
    background: url('../img/candado.svg');	background-size: cover
}
.card.disabled[title]::after{
    content: attr(title);
    position: absolute;	top: 100%;	left: 16px;
    padding-top: 5px;
    line-height: 1.2em
}

/* Estilo checklist */
.card.checklist .custom-control{padding-left: 2.5rem}
.card.checklist .custom-control-label{display: block}
.card.checklist .custom-control-label::after,
.card.checklist .custom-control-label::before{
    top: 50%;	left: -2.5rem;
    width: 1.5rem;	height: 1.5rem;
    margin-top: -.75rem;
    border-radius: 100%;
    box-shadow: none
}
.card.checklist .custom-control-label::after{background: 50%/100% 60% no-repeat}
.card.checklist .custom-control-label h5{
    margin-bottom: .1rem;
    font-size: 1.15rem
}
.card.checklist .custom-control-label p{margin-bottom: 0}
.card.checklist .fecha{
    opacity: 0;
    font-size: .9em;	color: var(--gris-3);	text-align: right
}
.card.checklist .custom-control-input:checked ~ .col .custom-control .custom-control-label{text-decoration: line-through}
.card.checklist .custom-control-input:checked ~ .col .custom-control .custom-control-label::after{background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e")}
.card.checklist .custom-control-input:checked ~ .col .custom-control .custom-control-label::before{
    border-color: var(--naranja);
    background-color: var(--naranja)
}
.card.checklist .custom-control-input:checked ~ .col .custom-control .custom-control-label h5,
.card.checklist .custom-control-input:checked ~ .col .custom-control .custom-control-label p{color: var(--naranja-hover)}
.card.checklist .custom-control-input:checked ~ .fecha{opacity: 1}


/*
* -------------------------------------------------------------------
*	Listas
* -------------------------------------------------------------------
*
*
*/
.lista h5{
    margin-top: .2rem;	margin-bottom: 0;
    font-size: 1.1em
}
.lista small{opacity: .5}
.lista p{
    opacity: .75;
    margin-bottom: 0;
    font-size: .9em
}
.lista small.cliente,
.lista small.proveedor{opacity: 1}
.lista small.cliente{color: var(--naranja)}
.lista small.proveedor{color: var(--blue)}
.lista .arrow{stroke: var(--gris-med)}


/*
* -------------------------------------------------------------------
*	Anexos en Inv. y tren / Provisiones / Clientes-Proveedores
* -------------------------------------------------------------------
*
*
*/
/* Anexos */
.cabecera h3{
    color: #fff; position: relative;	display: inline-block;
}
.cabecera h3 small{
    position: absolute;	top: 50%;	right: 100%;	opacity: .7 !important;
    margin-top: -.55em;	margin-right: 4px
}


/*
* -------------------------------------------------------------------
*	Clientes
* -------------------------------------------------------------------
*
*
*/
.cabecera.cliente h3{font-size: 1.6em}
.cabecera.cliente .img-cuadrada{
    margin-top: 14px;
    box-shadow: 0 0 0 14px rgba(255,255,255,.1);
    background-image: url("../img/cliente-sin-foto.jpg");
}
.cabecera.cliente .btn{padding: .4rem 1rem}
.cabecera.cliente .btn .icon{
    margin-right: -5px;	margin-left: 4px;
    vertical-align: sub;
    stroke: var(--negro)
}
.cliente h4{font-size: 1.3em; font-weight: 400}


/*
* -------------------------------------------------------------------
*	Apartados
* -------------------------------------------------------------------
*
*
*/
.nav-secciones .nav-link{
    position: relative;
    width: 1.75em;	height: 1.75em;
    padding: 0;
    font-family: var(--titulo);	color: var(--blanco);	font-weight: 500;	line-height: 1.75em;	text-align: center;
    border-radius: 100%;
    background: var(--naranja);	box-shadow: 0 0 0 .6em var(--naranja-op-3)
}
.nav-secciones .nav-link::after,
.nav-secciones .nav-link::before{
    content: '';
    position: absolute;	top: 50%;	left: 90%;
    width: 200%;	height: 4px;
    margin-top: -2px;
    background: var(--naranja-claro);
    z-index: -1
}
.nav-secciones .nav-link::before{
    right: 90%;	left: unset;
    width: 90%
}
.nav-secciones .nav-link:last-child::after,
.nav-secciones .nav-link:first-child::before{display: none}
.nav-secciones .nav-link.active ~ .nav-link{
    color: var(--gris-claro);
    background: var(--gris-2);	box-shadow: 0 0 0 .6em var(--gris-op-5)
}
.nav-secciones .nav-link.active ~ .nav-link::after,
.nav-secciones .nav-link.active ~ .nav-link::before{background: var(--gris)}

/* Info */
.cabecera.apartado h3{
    position: relative;	display: inline-block;
    margin-left: 6px;	margin-bottom: 0
}
.cabecera.apartado h3 small{
    position: absolute;	top: 50%;	right: 100%;	opacity: .7;
    margin-top: -.55em;	margin-right: 4px
}
#generar_contrato{padding-left: 1.5rem;	padding-right: 1.5rem}
#generar_contrato .icon{stroke: var(--negro)}
.apartado h4{font-size: 1.3em; font-weight: 400}
.apartado .card-header h4{
    margin-bottom: 0;
    font-size: inherit;	font-weight: inherit;	line-height: inherit
}
.apartado .card h5{
    margin-bottom: .25rem;
    font-size: 1.283em
}
.apartado .card small{
    opacity: .5;
    font-size: 93%
}

/* Equipo */
.equipo input{
    position: absolute;	opacity: 0;
    width: 1rem;	height: 1.25rem;
    z-index: -1
}
.equipo label,
.equipo .label{
    position: relative;
    width: 100%;
    margin-bottom: 1.8rem;
    font-size: 1em;	color: var(--negro)
}
.equipo label img,
.equipo .label img{
    width: 100%;	height: auto;
    padding: 6px;
    border: 1px solid var(--gris);	border-radius: 100%;
    background-color: var(--gris-claro)
}
.equipo label::after,
.equipo label::before{
    content: "";
    position: absolute;	top: 50%;	left: -.65rem;	pointer-events: none;
    width: 1.3rem;	height: 1.3rem;
    margin-top: -.65rem;
    border-radius: 100%;
    z-index: 1;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
.equipo label::after{background: 50%/50% 50% no-repeat}
.equipo input:checked ~ label::after{background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e")}
.equipo input:checked ~ label::before{background-color: var(--naranja)}
.equipo input:checked ~ label img{border-color: var(--naranja)}
.equipo.select label{opacity: .5}
.equipo.select label img{
    border-color: var(--gris-2);
    background-color: transparent
}
.equipo.select input:checked ~ label{opacity: 1}
.equipo.select input:checked ~ label img{
    border-color: var(--naranja);
    background-color: var(--gris-claro)
}
.card.anexos .text-primary{font-size: 93%;	font-weight: bold}


/*
* -------------------------------------------------------------------
*	Tren
* -------------------------------------------------------------------
*
*
*/
.apartado .estatus svg{color: var(--naranja)}
/* Notaría */
.input_file_desc{color: var(--gris-med) !important;	font-size: 70%}


/*
* -------------------------------------------------------------------
*	Tren
* -------------------------------------------------------------------
*
*
*/
.menu_extendido h2{
    font-size: 1.2em;
    font-weight: 400
}


/*
* ----------------------------------------------------------------------
*  DataTables
* ----------------------------------------------------------------------
*/
.dataTables_paginate {
    margin-top: -2px !important;
}

.dataTables_length {
    float: right !important;
}

.dt-buttons {
    margin-bottom: -1px !important;
}


div.dt-button-collection button.dt-button:active:not(.disabled), div.dt-button-collection button.dt-button.active:not(.disabled), div.dt-button-collection div.dt-button:active:not(.disabled), div.dt-button-collection div.dt-button.active:not(.disabled), div.dt-button-collection a.dt-button:active:not(.disabled), div.dt-button-collection a.dt-button.active:not(.disabled) {
    background-color: var(--naranja-hover);
    font-family: 'Lato');
    border-radius: 10px;
    font-size: 12px;
    color: var(--blanco-2);
    border-color: var(--negro);
}

button.dt-button:active:not(.disabled):hover:not(.disabled), button.dt-button.active:not(.disabled):hover:not(.disabled), div.dt-button:active:not(.disabled):hover:not(.disabled), div.dt-button.active:not(.disabled):hover:not(.disabled), a.dt-button:active:not(.disabled):hover:not(.disabled), a.dt-button.active:not(.disabled):hover:not(.disabled) {
    background-color: var(--naranja-hover);
    font-family: var('Lato');
    border-radius: 10px;
    font-size: 14px;
    border-color: var(--negro);
}

div.dt-buttons {
    position: relative;
    float: left;
    font: 0.9em Arial;
    padding-bottom: 0.25em;
    }
    
div.dt-buttons .dt-button {
    margin: 0.25em 0.333em 0.25em 0;
    }
    
div.dt-button-collection {
    font: 0.9em Arial;
    position: absolute;
    margin-top: 3px;
    padding: 4px;
    border: 1px solid var(--blue);
    border-radius: 10px;
    background-color: var(--blanco-2);
    overflow: hidden;
    height: 450px !important;
    overflow-y: scroll !important;
    z-index: 2002;
    }
    
div.dt-button-collection .dt-button {
    text-align: center;
    position: relative;
    display: block;
    margin-right: 0;
    width: 100px;
    }
    
div.dt-button-background {
    zoom: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    filter: alpha(opacity=35);
    opacity: .35;
    z-index: 2001;
    }
    
    dt-button.buttons-select-cells,
    dt-button.buttons-select-rows,
    dt-button.buttons-select-columns {
    position: relative;
    width: 175px;
    text-align: left;
    }
    
    dt-button.buttons-columnVisibility.ui-button-text-only {
    padding-left: 10px;
    }
    
    dt-button.buttons-columnVisibility.ui-state-active,
    dt-button.buttons-columnVisibility {
    position: relative;
    width: auto;
    *width: 230px;
    text-align: left;
    *zoom:expression(
        this.runtimeStyle['zoom']="1",
        this.insertBefore(document.createElement("div"),
        this.childNodes[0]).className="before",
        this.appendChild(document.createElement("div")).className="after",
    );
    }
    
    dt-button.buttons-columnVisibility:before,
    dt-button.buttons-columnVisibility.ui-state-active:after {
    display: block;
    position: absolute;
    top: 1em;
    margin-top: -8px;
    margin-left: -6px;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    }
    
    dt-button.buttons-columnVisibility:before {
    content: ' ';
    border: 2px solid black;
    border-radius: 3px;
    }
    
    dt-button.buttons-columnVisibility.ui-state-active:after {
    font: 1.2em Arial;
    content: '\2714';
    text-align: center;
    }
    
    *dt-button.buttons-columnVisibility .before,
    *dt-button.buttons-columnVisibility.ui-state-active .after,
    *dt-button.buttons-columnVisibility.ui-state-active:hover .after {
    position: absolute;
    margin: 6px 0px 0px -6px;
    width: 16px;
    height: 16px;
    background-position: 0px 0px;
    }
    
    *dt-button.buttons-columnVisibility .before {
    background-position: 0px 0px;
    }
    
    *dt-button.buttons-columnVisibility.ui-state-active .before {
    background-position: 0px 16px;
    }
    
    *.dt-button.buttons-columnVisibility.ui-state-active:hover .before {
    background-position: 16px 0px;
    }

    thead input {
        width: auto;
        text-align: center;
    }

    .dataTables_scrollBody::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: var(--gris-med);
        border-radius: 10px;
    }
    
    .dataTables_scrollBody::-webkit-scrollbar {
        width: 6px;
        background-color: var(--gris-med);
    }
    
    .dataTables_scrollBody::-webkit-scrollbar-thumb {
        background-color: var(--naranja-hover);
        border-radius: 10px;
    }


/*
* ----------------------------------------------------------------------
*  DataTables
* ----------------------------------------------------------------------
*/

.border-rounded {
    border-radius: 20px; /* ajusta el valor según el grado de curvatura que desees */
}

.border-rounded:hover {
    background-color: rgba(245, 166, 35, 0.5); /* Cambia los valores RGB y el valor de opacidad según lo que necesites */
  }


/*
* ----------------------------------------------------------------------
*  atwho
* ----------------------------------------------------------------------
*/

    /* Cambia el tamaño de fuente de la lista desplegable */
    .atwho-view li {
    font-size: 18px;
    }

    /* Cambia el color de fondo del hover */
    .atwho-view li:hover {
    background-color: var(--naranja-hover);
    }

    /* Añade curvatura a la caja de la lista desplegable */
    .atwho-view {
    border-radius: 8px;
    }

    /* Cambia el color de texto del elemento seleccionado */
    .atwho-view li.cur {
    color: #fff;
    background-color: var(--naranja-hover);
    }

    /* Cambia el color de fondo del elemento seleccionado por el teclado */
    .atwho-view li.matched {
        background-color: var(--naranja-hover);
    }

/*
* ----------------------------------------------------------------------
*  atwho
* ----------------------------------------------------------------------
*/


/*
* ----------------------------------------------------------------------
*  modal
* ----------------------------------------------------------------------
*/

.modal-backdrop {
    z-index: 1040 !important;
  }
  
  .modal-dialog {
    z-index: 1050 !important;
  }
  

/*
* ----------------------------------------------------------------------
*  modal
* ----------------------------------------------------------------------
*/

.checkbox-naranja:checked {
    background-color: var(--naranja);
    border-color: var(--naranja);
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: var(--naranja); /* Color naranja */
}
.btn-edit {
    border: none;
    background-color: transparent;
    color: var(--naranja-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.btn-edit:hover {
    background-color: var(--naranja-hover);
    color: var(--mostaza);
}


#preinventario-form .form-check {
    display: flex;
    justify-content: left;
    align-items: center;
    flex-direction: row-reverse;
}

#preinventario-form .form-check-label {
    margin-left: .3rem;
    margin-bottom: .58rem;
}

#preinventario-form .form-check-input {
    position: relative;
    width: 1rem;
    height: 1rem;
    border-radius: 4px;
    margin-left: .5rem;
    margin-bottom: 0;
    border: 1px solid rgba(0, 0, 0, 0.25);
}

#cargar-preinventario-btn {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: transparent;
}

#cargar-preinventario-btn:hover {
    background-color: var(--blanco) !important;
}

#cargar-preinventario-btn:hover svg.icon {
    stroke: #000 !important;
}

/* calendario */

.calendar-event {
    cursor: pointer;
}

.calendar-event:hover {
    filter: brightness(1.1);
}

.fc-header-toolbar {
    margin-bottom: 0;
    padding: 1rem;
}

.fc-toolbar-title {
    font-size: 1.75rem;
    color: #3F4254;
    font-weight: 600;
}

.fc-day {
    cursor: pointer;
}

.fc-day:hover {
    background-color: #ececec;
}

.fc-day-other .fc-event {
    opacity: .3;
    filter: saturate(.5);
}

#calendar-controls {
    margin-left: 1.5rem;
    padding-top: 5.2rem;
    padding-right: 1rem;
    min-width: 250px;
}

#minicalendario .fc-daygrid-day.fc-day-today {
    background-color: white !important;
}

.accordionPreinventario .card {
    border-radius: 0;
}

.accordionPreinventario .card:not(:last-of-type) {
    border-bottom: 1px solid #e6e6e6;
}

.accordionPreinventario .desalojador-title,
.accordionPreinventario .plaza-title {
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: bolder;
    margin-bottom: 0;
    text-align: right;
    margin-right: 2.5rem;
    width: 25%;
    max-width: 220px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background: none;
    border: none;
}

.accordionPreinventario .desalojador-title:focus-visible,
.accordionPreinventario .expand:focus-visible,
.accordionPreinventario .plaza-title:focus-visible {
    outline: -webkit-focus-ring-color auto 1px !important;
}

.accordionPreinventario .columns {
    display: flex;
    flex-shrink: 1;
    width: fit-content;
    gap: 1rem;
}

.accordionPreinventario .columns a[disabled] {
    opacity: .9;
    filter: brightness(.9);
}

.accordionPreinventario .expand {
    text-align: center;
    width: 36px;
    transition: transform .3s ease-out;
    flex-grow: 1;
}

.accordionPreinventario .expand[aria-expanded="true"] {
    transform: rotate(-180deg);
}


 
.accordionPreinventario .badge {
    flex-grow: 1;
    min-width: 72px;
}

.accordionPreinventario .badge-light {
    border: 1px solid rgba(66, 66, 66, .1);
}

.accordionPreinventario .accordion-item {
    border: none;
}

.accordionPreinventario .accordion-collapse,
.accordionPreinventario .accordion-collapse.collapsing,
.accordionPreinventario .accordion-collapse.show,
.accordionPreinventario .accordion-collapse .card {
    background-color: #e8e8e8 !important;
}

.accordionPreinventario .accordion-collapse .card:not(:last-of-type) {
    border-bottom: 1px solid #d9d9d9;
}

.accordionPreinventario .badge.badge-light-secondary  {
    color: #6c7084;
    background-color: #f8f9fa;
}

.accordionPreinventario a[disabled=true]:hover {
    color: inherit;
}

@media (max-width: 768px) {
    .accordionPreinventario .desalojador-title,    
    .accordionPreinventario .plaza-title  {
        font-size: 1rem !important;
    }

    /* .accordionPreinventario .badge {
        max-height: 1.25rem;
        width: 70px;
        font-size: .9rem !important;
    } */

    .accordionPreinventario .columns {
        flex-wrap: wrap;
        gap: 1.25rem !important;
    }
}


@media (min-width: 769px) and (max-width: 1599px){
    .accordionPreinventario .plaza-title,
    .accordionPreinventario .desalojador-title  {
        font-size: 12px !important;
        margin-right: .5rem;
        width: 20%;
    }
}


/* @media (min-width: 1200px) {
    .accordionPreinventario .plaza-title,
    .accordionPreinventario .desalojador-title  {
        font-size: 1rem !important;
        text-align: right;
        margin-right: 1rem;
    }


    .accordionPreinventario .columns {
        gap: 1.5rem !important;
        flex-wrap: wrap;
        justify-content: center;
    }

    .accordionPreinventario .columns.justify-content-around {
        gap: 3rem !important;
    }    
} */

@media (min-width: 2200px) {
    .accordionPreinventario .desalojador-title, 
    .accordionPreinventario .plaza-title {
        width: 30%;
        font-size: 1.1rem !important;
    }

    .accordionPreinventario .columns {
        width: 75%;
    }

    /* .accordionPreinventario .badge {
        max-height: 1.5rem;
        width: 125px;
        font-size: 1.1rem !important;
    } */

    .accordionPreinventario .expand {
        width: 25px;
    }    
}

/* Estilos específicos para las tablas de proyecciones */
  .proyeccion-table {
    font-size: 1rem;
    margin: 0 15px; /* Añadir margen a los lados de las tablas */
  }
  
  .proyeccion-table th, .proyeccion-table td {
    white-space: nowrap;
    padding: 0.25rem;
    cursor: pointer; /* Cambia el cursor para indicar que las columnas son ordenables */
  }
  
  .proyeccion-clickable-row {
    cursor: pointer;
  }
  
  .proyeccion-column-title {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
  
  .proyeccion-container {
    max-width: 1200px;
  }
  
  .proyeccion-table-responsive {
    max-height: 320px;
    overflow-y: auto;
  }
  
  .proyeccion-table-responsive thead {
    position: sticky;
    top: 0;
    z-index: 1;
  }
  
  .proyeccion-table-responsive th {
    background-color: #343a40;
    color: white;
  }
  
  .proyeccion-btn-guardar {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
  }
  
  .proyeccion-monto-total, .proyeccion-monto-disponibles {
    position: fixed;
    bottom: 80px;
    right: 20px;
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }
  
  .proyeccion-monto-disponibles {
    bottom: 140px;
  }
  
  .proyeccion-count-badge {
    background-color: #343a40;
    color: rgb(255, 255, 255);
    border-radius: 20%;
    padding: 0.25em 0.5em;
    font-size: 1.0rem;
    vertical-align: top;
  }
  
.d-grid {
    display: grid;
    width: 100%;
    grid-template-rows: 100%;
}


/* Swiper ----------------------------------------------------------
    Styles for swiper container, slides, images, and navigation 
    buttons with flexbox centering, responsive images, and custom 
    button design 
--------------------------------------------------------------------
*/

.swiper-container {
    width: 100% !important;
    margin: 10px auto !important;
}

.swiper-slide {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Botones de navegación */
.swiper-button-next,
.swiper-button-prev {
    background-color: var(--naranja) !important; /* Color de fondo */
    color: white !important;
    width: 18px !important; /* Tamaño del botón */
    height: 18px !important; /* Tamaño del botón */
    border-radius: 50% !important; /* Botones redondos */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Tamaño de los íconos de flecha */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 8px !important; /* Tamaño más pequeño para los íconos */
    font-weight: bold !important;
}