/*
 * -------------------------------------------------------------------
 *	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;
    
    --navbar-height: 47px;
}

/*
* -------------------------------------------------------------------
*	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
}

/* Small button styles */
.btn-xs {
    padding: 0.45rem 0.7rem; /* Adjust padding for smaller size */
    font-size: 0.85rem; /* Smaller font size */
    line-height: 1.7; /* Line height for better readability */
    border-radius: 0.2rem; /* Rounded corners */
}

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

.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.842221cfe905.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-x: hidden;
    width: 100%;
    /* top: var(--navbar-height); */
    height: calc(100% - var(--navbar-height));
    overflow-y: auto;  /* si quieres scroll interno */
    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: calc(100% - var(--navbar-height));
    border-radius: 0;
    background: rgba(0, 0, 0, .9)
}
.ventana.galeria img.anexo {
    width: 100%;
    object-fit: contain;
}

/*
* -------------------------------------------------------------------
*	Navbar
* -------------------------------------------------------------------
*
*
*/
/* Pill principal (blanco) */
.navbar-icons-pill {
    gap: 0.1rem;              /* más espacio entre items */
    overflow: visible;        /* para que spinner y todo se vea completo */
    max-height: 40px;         /* altura máxima de 40px */
    min-height: 40px;         /* altura máxima de 40px */
}
  
/* El pequeño gradiente de fichaje */
.checador-pill {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
    align-items: center;         /* centrar contenido en cada celda */
    background: #FFD7C3;
    border-radius: 15px;
    margin: 0.2rem;              /* controla padding si lo necesitas */
    gap: 0.5rem;                 /* sin espacio extra */
    max-height: 34px;            /* altura máxima de 44px */
    min-height: 34px;            /* altura máxima de 44px */
    overflow: hidden;            /* oculta contenido que exceda la altura */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* sombra suave */
}
  
/* Icono en col 1, fila 1–2 */
.checador-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
}
  
/* Fichaje + dot */
.checador-fichaje {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: bold;
    gap: 0.2rem;
    padding-left: 0.2rem;  /* opcional para respirar */
}
  
/* Hora de entrada */
.checador-hora {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: bold;
    padding-left: 0.2rem;
    margin-right: 1px; /* opcional para respirar */
}
  
/* Punto de estado */
.status-dot {
    display: inline-block;
    margin-left: 4px;
    width: 5px; height: 5px;
    border-radius: 50%;
}
  
/* Spinner */
.spinner {
    display: inline-block;
    width: 16px;
    text-align: center;
}
.spinner > span {
    display: inline-block;
    width: 5px; height: 5px;
    margin: 0 1px;
    border-radius: 100%;
    background-color: var(--naranja);
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

/* Ajustes para móvil */
@media (max-width: 768px) {
    .navbar-icons-pill {
        gap: 0.1rem; /* Reduce el espacio entre items */
    }

    .checador-pill {
        grid-template-columns: 1fr; /* Cambia a una columna */
        grid-template-rows: auto auto; /* Ajusta filas automáticamente */
        padding: 0.1rem; /* Añade espacio interno */
    }

    .checador-icon {
        grid-column: 1;
        grid-row: 1;
        margin-left: 0; /* Elimina margen en móvil */
    }

    .checador-fichaje,
    .checador-hora {
        grid-column: 1;
        grid-row: auto;
        font-size: 10px; /* Reduce el tamaño de fuente */
        font-weight: bold;
        padding-left: 0; /* Elimina padding */
        justify-content: center; /* Centra el contenido */
    }
}

/* --- Animación tipo switch --- */
.checador-icon.switch-right {
    animation: moveRight 0.3s ease-in-out forwards;
  }
  .checador-icon.switch-left {
    animation: moveLeft 0.3s ease-in-out forwards;
  }
  
  @keyframes moveRight {
    from { transform: translateX(0); }
    to   { transform: translateX(50px); }
  }
  @keyframes moveLeft {
    from { transform: translateX(50px); }
    to   { transform: translateX(0); }
  }
  
  

/*
* -------------------------------------------------------------------
*	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.950105d88abb.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.8e6780bbe0f0.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.b9fd829ab74d.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.f516d65bc4b7.svg");	background-size: cover
}
.card span.candado{background-image: url("../img/candado.185e994e727a.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.185e994e727a.svg")}
.card.disabled[title]::before{
    content: "";
    position: absolute;	bottom: -19px;	left: 0;
    width: 12px;	height: 12px;
    background: url("../img/candado.185e994e727a.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.d8f27406d5f1.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;
    /* Removed invalid zoom:expression for modern browser compatibility */
    }
    
    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;
}


.gamified-profile .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #6c757d;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.gamified-profile .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    min-height: 45px;
    border-radius: 8px;
}

.gamified-profile .card-header.outline {
    border: 1px solid var(--naranja);
    background-color: transparent;
    color: var(--naranja);
}

.gamified-profile .card-header-task {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    min-height: 30px;
    border-radius: 2px;
}


.gamified-profile .card-body {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
}
.gamified-profile .progress {
    width: 100%;
    height: 25px;
    margin-bottom: 1rem;
}
.gamified-profile .progress-bar {
    line-height: 25px;
}
.gamified-profile .badge-pill {
    font-size: 1.2rem;
}
.gamified-profile .stat {
    font-size: 1.5rem;
    font-weight: bold;
}
.gamified-profile .stat-label {
    font-size: 1rem;
    color: rgb(81, 87, 93);
}
.gamified-profile .card {
    transition: transform 0.2s;
}
.gamified-profile .card:hover {
    transform: scale(1.01);
}

/* ===== Priority dots ===== */
.priority-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.75rem;
  }
  .priority-dot.urgente { background-color: #dc3545; }   /* rojo */
  .priority-dot.alta    { background-color: #fd7e14; }   /* naranja */
  .priority-dot.media   { background-color: #ffc107; }   /* amarillo */
  .priority-dot.baja   { background-color: #28a745; }   /* verde */
  
  /* Opcional: un poco de padding para la lista */
  .priority-list .list-group-item {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

/* el badge y la prioridad no cambian de tamaño */
.priority-list .list-group-item .col-auto {
    flex: 0 0 auto;
  }
  
  /* la columna del ticker crece o encoge */
  .ticker-col {
    /* permite encoger en flex/grid */
    min-width: 0;
  }
  
  /* contenedor y animación igual que antes */
  .ticker-container {
    overflow: hidden;
    height: 1.5rem;
  }

  .ticker-content {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 20s linear infinite;
  }

  @keyframes marquee {
    from { transform: translateX(210%); }
    to   { transform: translateX(-100%); }
  }
  

.recent-activity {
    font-size: 0.9rem;
    color: #6c757d;
}
.recent-activity .activity-item {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 1rem;
}
.recent-activity .activity-item:last-child {
    border-bottom: none;
}
.recent-activity .activity-item .activity-icon {
    margin-right: 10px;
    font-size: 1.2rem;
}
.recent-activity .activity-item .activity-time {
    font-size: 0.8rem;
    color: #adb5bd;
    margin-left: auto;
}
.stat-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.badge-naranja {
    background-color: #fff3e6;
    color: var(--naranja-hover);
    padding: 0.2em 0.4em;
    font-size: 0.9rem;
    border-radius: 0.275rem;
    font-weight: 700; /* Make text bold */
}

.badge-naranja:hover {
    background-color: var(--naranja-hover);
    transition: background-color 0.3s ease-in-out;
    color: var(--blanco-2);
    cursor: pointer;
}

.tr-fieldset {
    border: 2px solid #fc8019;
    border-radius: 10px;
    background-color: #fff5eb;
}

.tr-fieldset td {
    padding: 10px;
}
.oculto {
    display: none !important;
}
.scroll-horizontal {
    overflow-x: auto;
}
.stat-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 20px 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  height: 100%; 
}

.text-content {
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 14px;
  color: #6c757d;
}

.value {
  font-size: 24px;
  font-weight: 600;
  color: #212529;
}

.icon-container {
  padding: 12px;
  border-radius: 50%;
  font-size: 18px;
  width: 44px; /* Damos un tamaño fijo para consistencia */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Clases de color para los iconos */
.icon-blue {
  background-color: #e7f3ff;
  color: #007bff;
}
.icon-green {
  background-color: #eaf6ec;
  color: #28a745;
}
.icon-orange {
  background-color: #fff4e5;
  color: #fd7e14;
}
/* Estilo base para las cajas de información de la derecha */
.info-box {
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

/* Estilo para la caja grande de "Valor Total" */
.info-box-total {
  background: linear-gradient(to right, #fff7e7, #ffeedb); /* Gradiente suave */
  border: 1px solid #ffe1b3;
  text-align: center;
}

.info-box-total .info-box-title {
  font-size: 14px;
  color: #d9534f;
}

.info-box-total .info-box-value {
  font-size: 28px;
  font-weight: 700;
  color: #d9534f; /* Un color rojo/naranja para destacar */
}

/* Estilo para las dos cajas pequeñas */
/* --- Estilo para la Caja Verde --- */
.info-box-green {
  background-color: #f0fff3; /* Fondo verde claro */
  border: 1px solid #d4edda;
  height: 100%; 
}

.info-box-green .info-box-title {
  font-size: 12px;
  color: #155724; /* Color de texto verde oscuro */
}

.info-box-green .info-box-value-small {
  font-size: 21px;
  font-weight: 700;
  color: #155724; /* Color de texto verde oscuro */
}


/* --- Estilo para la Caja Azul --- */
.info-box-blue {
  background-color: #f0f7ff; /* Fondo azul muy claro */
  border: 1px solid #d4eaff;
  height: 100%;
}

.info-box-blue .info-box-title {
  font-size: 12px;
  color: #004085; /* Color de texto azul oscuro */
}

.info-box-blue .info-box-value-small {
  font-size: 18px;
  font-weight: 700;
  color: #004085; /* Color de texto azul oscuro */
}


/* Estilos generales para las etiquetas y texto, si los necesitas */
label.text-muted {
    font-size: 14px;
}
/* --- ESTILOS GENERALES DEL CONTENEDOR --- */
.package-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0;
}

.package-header h3 {
    margin: 0;
    font-size: 1.75rem;
    color: #333;
}

.package-header p {
    margin: 0;
    color: #666;
}
/* --- ESTILOS DE LA TARJETA PRINCIPAL --- */
.property-card {
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    transition: box-shadow 0.3s;
}

.property-card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.card-main-info {
    flex-basis: 55%;
}

.card-actions {
    flex-basis: 45%;
    border-left: 1px solid #f0f0f0;
    padding-left: 2rem;
}


/* --- SECCIÓN IZQUIERDA: INFO --- */
.property-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.property-icon {
    font-size: 2.5rem;
}

.property-id {
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
}

.apartado-info {
    margin: 0;
    color: #555;
}

.status-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.8rem;
    margin-bottom: 1.5rem;
}

.status-created {
    background-color: #d4edda;
    color: #155724;
}

.status-pending {
    background-color: #e2e3e5;
    color: #383d41;
}

/* --- CÓDIGO BASE DE LA ESTRUCTURA (FUNCIONA) --- */

.info-pills {
    display: flex;
    gap: 1rem;
}

.info-pill {
    flex: 1;
    background-color: #f8f9fa; /* <-- El nuevo código sobreescribirá este color */
    border: 1px solid #e9ecef;   /* <-- El nuevo código sobreescribirá este borde */
    border-radius: 8px;
    padding: 0.8rem;
    text-align: center;
}

.pill-title {
    display: block; /* <-- ESTA ES LA LÍNEA CLAVE PARA LA ALINEACIÓN */
    color: #6c757d;      /* <-- El nuevo código sobreescribirá este color */
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.pill-value {
    display: block; /* <-- ESTA ES LA LÍNEA CLAVE PARA LA ALINEACIÓN */
    font-weight: bold;
    font-size: 1.25rem;
    color: #495057;      /* <-- El nuevo código sobreescribirá este color */
}

/* Para mostrar el precio venta como si fuera texto normal */
.pill-input-display {
    background: transparent;
    border: none;
    text-align: center;
    padding: 0;
    width: 100%;
}

/* --- AÑADIR ESTE BLOQUE NUEVO PARA LOS COLORES --- */

/* 1. Estilos para "Remodelada" (Tonos Azules) */
.pill-remodelada {
    background-color: #eef2ff;
    border-color: #e0e7ff;
}
.pill-remodelada .pill-title {
    color: #4338ca;
}
.pill-remodelada .pill-value {
    color: #3730a3;
}

/* 2. Estilos para "Paquete" (Tonos Verdes) */
.pill-paquete {
    background-color: #f0fdf4;
    border-color: #dcfce7;
}
.pill-paquete .pill-title {
    color: #16a34a;
}
.pill-paquete .pill-value {
    color: #15803d;
}

/* 3. Estilos para "Precio Venta" (Tonos Morados) */
.pill-venta {
    background-color: #faf5ff;
    border-color: #f3e8ff;
}
.pill-venta .pill-title {
    color: #9333ea;
}
.pill-venta .pill-value,
.pill-venta .pill-input-display { /* Se aplica tanto al texto como al input */
    color: #7e22ce;
}

/* --- SECCIÓN DERECHA: ACCIONES --- */
.payment-schedule h5,
.create-sale-form h5 {
    font-size: 1.1rem;
    color: #333;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.payment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.payment-item:last-child {
    border-bottom: none;
}
.payment-item span {
    color: #555;
}
.payment-item strong {
    font-size: 1.1rem;
}

.form-group-inline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.form-group-inline label {
    flex-basis: 20%;
    color: #666;
    font-size: 0.9rem;
}
.form-control-light {
    flex: 1;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 0.5rem;
    background-color: #fff;
}
.form-control-light[readonly] {
    background-color: #e9ecef;
    color: #495057;
    font-weight: bold;
}
/* --- RESPONSIVE DESIGN --- */
@media (max-width: 992px) {
    .property-card {
        flex-direction: column;
        gap: 1.5rem;
    }
    .card-actions {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid #f0f0f0;
        padding-top: 1.5rem;
    }
}
@media (max-width: 576px) {
    .info-pills {
        flex-direction: column;
    }
    .form-group-inline {
        flex-direction: column;
        align-items: flex-start;
    }
    .form-group-inline label {
        margin-bottom: 0.25rem;
    }
    .form-control-light {
        width: 100%;
    }
}

/* Encapsulando estilos para galeria_global.html y cargar_galeria_global.html */
.galeria-global-root {
  /* General improvements */
  background: #f4f6fb;
}
.galeria-global-root .filter-label {
  font-weight: 600;
  color: #495057;
  letter-spacing: 0.02em;
  font-size: 0.98rem;
}
.galeria-global-root #global-filter-form {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem 1.5rem 1.5rem 1.5rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  border: 1px solid #e3e6ef;
  margin-bottom: 2rem;
  transition: box-shadow 0.2s;
}
.galeria-global-root #global-filter-form:focus-within {
  box-shadow: 0 6px 32px rgba(33, 150, 243, 0.10);
  border-color: #90caf9;
}
.galeria-global-root .form-row.gap-md-3 {
  gap: 1.2rem;
  flex-wrap: wrap;
  display: flex;
  align-items: flex-end;
}
.galeria-global-root .form-row.gap-md-3 > [class^="col-"] {
  margin-bottom: 1rem;
}
.galeria-global-root .form-control,
.galeria-global-root .select2-container .select2-selection--multiple {
  border-radius: 0.5rem !important;
  border: 1px solid #ff9800;
  font-size: 0.92rem;
  transition: border-color 0.2s;
}
.galeria-global-root .form-control:focus,
.galeria-global-root .select2-container--default .select2-selection--multiple:focus {
  border-color: #ff9800;
  box-shadow: 0 0 0 2px #ffe0b2;
}
.galeria-global-root .select2-container .select2-selection--multiple {
  min-height: 38px;
  padding: 0.35rem 0.7rem;
  background: #fff8e1;
  font-size: 0.92rem;
}
.galeria-global-root .select2-container .select2-dropdown {
  font-size: 0.90rem;
}
.galeria-global-root .select2-container .select2-results__option {
  font-size: 0.90rem;
  padding: 0.35rem 0.8rem;
}
.galeria-global-root .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #ffe0b2 !important;
  color: #ff9800 !important;
}
.galeria-global-root .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #ede7f6 !important;
  color: #7c4dff !important;
}
.galeria-global-root .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #7c4dff;
  color: #fff;
  border: none;
  border-radius: 0.35rem;
  margin-top: 0.25rem;
  font-size: 0.90rem;
  box-shadow: 0 1px 2px rgba(124,77,255,0.10);
}
.galeria-global-root .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #ede7f6;
  margin-right: 0.25em;
}
.galeria-global-root .btn-primary,
.galeria-global-root .btn-outline-secondary {
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 1rem;
  padding: 0.5rem 1.1rem;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.galeria-global-root .btn-primary {
  background: linear-gradient(90deg, #1976d2 0%, #42a5f5 100%);
  border: none;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.10);
}
.galeria-global-root .btn-primary:hover,
.galeria-global-root .btn-primary:focus {
  background: linear-gradient(90deg, #1565c0 0%, #1e88e5 100%);
  color: #fff;
}
.galeria-global-root .btn-outline-secondary {
  border: 1.5px solid #1976d2;
  color: #1976d2;
  background: #f8fafc;
}
.galeria-global-root .btn-outline-secondary:hover,
.galeria-global-root .btn-outline-secondary:focus {
  background: #1976d2;
  color: #fff;
}
.galeria-global-root #download-selected {
  background: linear-gradient(90deg, #43a047 0%, #66bb6a 100%);
  border: none;
}
.galeria-global-root #download-selected:hover,
.galeria-global-root #download-selected:focus {
  background: linear-gradient(90deg, #388e3c 0%, #43a047 100%);
  color: #fff;
}
.galeria-global-root input[type="date"]::-webkit-input-placeholder { color: #b0b8c1; }
.galeria-global-root input[type="date"]::-moz-placeholder { color: #b0b8c1; }
.galeria-global-root input[type="date"]:-ms-input-placeholder { color: #b0b8c1; }
.galeria-global-root input[type="date"]::placeholder { color: #b0b8c1; }
.galeria-global-root input[type="text"][name="q"] {
  border-radius: 0.5rem;
  border: 1px solid #b0b8c1;
  font-size: 1.05rem;
  padding: 0.5rem 1rem;
  background: #f8fafc;
  transition: border-color 0.2s;
}
.galeria-global-root input[type="text"][name="q"]:focus {
  border-color: #1976d2;
  background: #fff;
}
.galeria-global-root #global-loader {
  margin: 2rem 0;
  width: 3rem;
  height: 3rem;
}
@media (max-width: 767px) {
  .galeria-global-root #global-filter-form {
    padding: 1rem 0.5rem 0.5rem 0.5rem;
  }
  .galeria-global-root .form-row.gap-md-3 {
    gap: 0.5rem;
  }
  .galeria-global-root .btn-primary,
  .galeria-global-root .btn-outline-secondary {
    font-size: 0.97rem;
    padding: 0.45rem 0.7rem;
  }
}

/* Styles from cargar_galeria_global.html */
.galeria-global-root .anexo-card {
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
}
.galeria-global-root .anexo-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  transform: translateY(-4px) scale(1.03);
  z-index: 3;
}
.galeria-global-root .anexo-card.selected {
  border-color: #ff9800 !important;
  box-shadow: 0 0 0 4px #ffe0b2, 0 8px 24px rgba(0,0,0,0.15);
}
.galeria-global-root .anexo-placeholder {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  color: #4a4a4a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 100%;
  font-size: 1.1rem;
  font-weight: 500;
  border-bottom: 1px solid #e0e0e0;
}
.galeria-global-root .anexo-file-ext {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 8px;
  color: #6c63ff;
  letter-spacing: 1px;
}
.galeria-global-root .anexo-date {
  font-size: 0.95rem;
  color: #888;
  margin-bottom: 0.5rem;
}
.galeria-global-root .anexo-title {
  font-size: 1.08rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.2rem;
}
.galeria-global-root .anexo-download-btn {
  margin-top: 0.7rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.98rem;
  box-shadow: 0 2px 6px rgba(255,152,0,0.10);
  background: linear-gradient(90deg, #ff9800 0%, #ffe082 100%);
  border: none;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s, color 0.2s;
  z-index: 3;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.galeria-global-root .anexo-download-btn:hover {
  background: linear-gradient(90deg, #ffe082 0%, #ff9800 100%);
  box-shadow: 0 4px 16px 0 rgba(255,224,130,0.25), 0 2px 6px rgba(255,152,0,0.18);
  color: #fff;
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.15) saturate(1.3);
}
.galeria-global-root .seleccion-checkbox { display: none !important; }