p {
    margin: 0;
    padding: 0;
}

/* Estilo base para cualquier tipo de puesto */
.puesto-box {
    width: 26px;
    height: 23px;
    display: flex;
    /* CENTRADO PERFECTO */
    justify-content: center;
    /* Horizontal */
    align-items: center;
    /* Vertical */

    font-size: 11px;
    font-family: Calibri, sans-serif;
    color: #fff;

    border: 1px solid #000;
    border-radius: 2px;
    box-sizing: border-box;

    padding: 0;
    margin: 0;

    cursor: pointer;
}

/* Colores por estado */
.ACTIVO {
    background: #F1B613;
    /* Amarillo */
}

.ACTIVO:hover {
    background: #e7b221af !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) !important;
}

.INACTIVO {
    background: #00C0FF;
}

.INACTIVO:hover {
    background: #23a4cf !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) !important;
}

.ABANDONADO {
    background: #e50e47c9;
}

.ABANDONADO:hover {
    background: #b32b4fc9 !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) !important;
}

.DISPONIBLE {
    background: #50D092;
}

.DISPONIBLE:hover {
    background: #57b688 !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) !important;
}

.ADJUDICACION {
    background: blueviolet;
}

.ADJUDICACION:hover {
    background: rgb(116, 75, 155) !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) !important;
}


/********************************* TEXTOS EN ETIQUETAS ************************/
/*TEXT-VERTICAL*/
.TEXT-VERTICAL {
    width: 20px;
    height: 23px;
    display: flex;
    /* CENTRADO PERFECTO */
    justify-content: center;
    /* Horizontal */
    align-items: center;
    /* Vertical */
    font-size: 10px;
    font-family: BCDFEE+Calibri;
    color: #000000;
    background-color: #f0f0f0;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.TEXT-VERTICAL:hover {
    background-color: #dcdcdc;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}


/*TEXT-HORIZONTAL*/
.TEXT-HORIZONTAL {
    font-size: 11px;
    line-height: 9px;
    font-family: BCDFEE+Calibri;
    color: #000000;
    background-color: #f0f0f0;
    border-radius: 8px;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.TEXT-HORIZONTAL:hover {
    background-color: #dcdcdc;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/*TEXT-TITULO*/
.TEXT-TITULO {
    font-size: 18px;
    line-height: 10px;
    font-family: BCDFEE+Calibri;
    color: #000000;
    background-color: #f0f0f0;
    border-radius: 8px;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.TEXT-TITULO:hover {
    background-color: #dcdcdc;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.titulo-croquis {
    position: absolute;
    top: 130px;
    left: 350px;
    white-space: nowrap;
    cursor: pointer;
    font-size: 20px;
    font-family: 'Calibri', sans-serif;
    background-color: #f5faff;
    border: 2px solid #007bff;
    padding: 10px 16px;
    border-radius: 10px;
    color: #007bff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, transform 0.2s;
}

.titulo-croquis:hover {
    background-color: #e0f0ff;
    transform: scale(1.02);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.titulo-croquis .sub-texto {
    display: block;
    font-size: 13px;
    color: #555;
    font-style: italic;
    margin-top: 4px;
}

/* ----------------------------------------------- */

/* TEXT-ACTIVO */
.TEXT-ACTIVO {
    font-size: 12px !important;
    font-family: BCDFEE+Calibri !important;
    background: #F1B613 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 1px 8px;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: visible;
}

.TEXT-ACTIVO:hover {
    background: #e0a700 !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) !important;
}

.TEXT-ACTIVO:hover::after {
    content: "Puesto actualmente ocupado y en operación por un adjudicatario.";
    position: absolute;
    bottom: 100%;
    background: #F1B613 !important;
    color: white;
    font-size: 10px;
    padding: 6px 10px;
    border-radius: 4px;
    width: 150px;
    white-space: normal;
    z-index: 999;
    margin-bottom: 5px;
    pointer-events: none;
    box-sizing: border-box;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transform: none;
    text-align: center;

}

/* TEXT-INACTIVO */
.TEXT-INACTIVO {
    font-size: 12px !important;
    font-family: BCDFEE+Calibri !important;
    background: #00C0FF !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 1px 8px;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: visible;
}

.TEXT-INACTIVO:hover {
    background: #0099cc !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) !important;
}

.TEXT-INACTIVO:hover::after {
    content: "Puesto adjudicado pero no está siendo utilizado temporalmente.";
    position: absolute;
    bottom: 100%;
    background: #00C0FF !important;
    color: white;
    font-size: 10px;
    padding: 6px 10px;
    border-radius: 4px;
    width: 150px;
    white-space: normal;
    z-index: 999;
    margin-bottom: 5px;
    pointer-events: none;
    box-sizing: border-box;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transform: none;
    text-align: center;
}

/* TEXT-ABANDONADO */
.TEXT-ABANDONADO {
    font-size: 12px !important;
    font-family: BCDFEE+Calibri !important;
    background: #A03070 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 1px 8px;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: visible;
}

.TEXT-ABANDONADO:hover {
    background: #80265a !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) !important;
}

.TEXT-ABANDONADO:hover::after {
    content: "Puesto adjudicado pero sin actividad prolongada, posible causal de recuperación.";
    position: absolute;
    bottom: 100%;
    background: #A03070 !important;
    color: white;
    font-size: 10px;
    padding: 6px 10px;
    border-radius: 4px;
    width: 150px;
    white-space: normal;
    z-index: 999;
    margin-bottom: 5px;
    pointer-events: none;
    box-sizing: border-box;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transform: none;
    text-align: center;
}

/* TEXT-ADJUDICACION */
.TEXT-ADJUDICACION {
    font-size: 12px !important;
    font-family: BCDFEE+Calibri !important;
    background: blueviolet !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 1px 8px;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: visible;
}

.TEXT-ADJUDICACION:hover {
    background: rebeccapurple !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) !important;
}

.TEXT-ADJUDICACION:hover::after {
    content: "Puesto en proceso de asignación a un nuevo adjudicatario.";
    position: absolute;
    bottom: 100%;
    background: blueviolet !important;
    color: white;
    font-size: 10px;
    padding: 6px 10px;
    border-radius: 4px;
    width: 150px;
    white-space: normal;
    z-index: 999;
    margin-bottom: 5px;
    pointer-events: none;
    box-sizing: border-box;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transform: none;
    text-align: center;
}

/* TEXT-DISPONIBLE */
.TEXT-DISPONIBLE {
    font-size: 12px !important;
    font-family: BCDFEE+Calibri !important;
    color: #ffffff !important;
    background: #50D092 !important;
    border-radius: 8px !important;
    padding: 1px 8px;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: visible;
}

.TEXT-DISPONIBLE:hover {
    background: #3fb27e !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) !important;
}

.TEXT-DISPONIBLE:hover::after {
    content: "Puesto libre, sin adjudicatario actual, listo para ser asignado.";
    position: absolute;
    bottom: 100%;
    background: #50D092 !important;
    color: white;
    font-size: 10px;
    padding: 6px 10px;
    border-radius: 4px;
    width: 150px;
    white-space: normal;
    z-index: 999;
    margin-bottom: 5px;
    pointer-events: none;
    box-sizing: border-box;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transform: none;
    text-align: center;
}

/* *****************Mensaje en cada puesto****************** */
.mitooltip {
    position: relative;
    display: inline-block;
}

.mitooltip .mitooltiptext {
    visibility: hidden;
    width: 300px;
    background-color: black;
    color: white;
    text-align: left;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
}

.mitooltip:hover .mitooltiptext {
    visibility: visible;
    opacity: 1;
}


/* *****************Zoom den imagenes****************** */
.img-container {
    position: relative;
    overflow: hidden;
    /* Esconde cualquier parte de la imagen que exceda el contenedor */
    width: 100%;
    /* O el ancho deseado */
    height: 300px;
    /*O la altura deseada */
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Asegura que la imagen cubra el contenedor inicialmente */
    height: 300px;
    /* Mantiene la relación de aspecto */
    transition: transform 0.3s ease;
    /* Suaviza las transformaciones */
    /*object-fit: cover;  Cubre el área disponible sin distorsionar las imágenes */
    object-fit: fill;
    /* Cubre el área disponible sin distorsionar las imágenes */
}

/* *****************Colores carrusel****************** */
.custom-indicators {
    position: absolute;
    top: 100%;
    /* Colocar justo debajo del carrusel */
    transform: translateY(10px);
    /*Desplazar un poco hacia abajo para no superponerse con el carrusel */
}


/* *****************Tamanio carrusel****************** */
.carousel-wrapper {
    height: 100%;
    max-height: 500px;
    /* Puedes ajustar este valor según el diseño */
}

.carousel-inner,
.carousel-item {
    height: 350px;
}

.carousel-item img {
    height: 100%;
    /*object-fit: cover;  o 'contain' si no quieres que se recorte */
    object-fit: fill;
    /* o 'contain' si no quieres que se recorte */
    width: 100%;
    border-radius: 12px;
}

.carousel-indicators.custom-indicators {
    bottom: -20px;
}


/* Forzar funcionamiento de grid dentro del modal */
#modalCrearPeticion .row {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

#modalCrearPeticion .col-sm-6,
#modalCrearPeticion .col-sm-8,
#modalCrearPeticion .col-sm-4,
#modalCrearPeticion .col-sm-12 {
    width: 100% !important;
    /* forzado para que no se colapsen */
}

/* Si quieres conservar las columnas en desktop */
@media (min-width: 768px) {
    #modalCrearPeticion .col-sm-6 {
        width: 50% !important;
    }

    #modalCrearPeticion .col-sm-8 {
        width: 66.666% !important;
    }

    #modalCrearPeticion .col-sm-4 {
        width: 33.333% !important;
    }
}

/* --- FIX SELECT2 WIDTH --- */
#modalCrearPeticion .select2-container,
#modalCrearPeticion .form-control,
#modalCrearPeticion .select2-selection,
#modalCrearPeticion .select2-selection__rendered {
    width: 100% !important;
}

#modalCrearPeticion .input-group>.form-control {
    height: 38px !important;
    /* igual que bootstrap */
}

#modalCrearPeticion .input-group-text {
    height: 100% !important;
    display: flex;
    align-items: center;
}

input[readonly],
input:disabled {
    background-color: #e9ecef !important;
    /* mismo color que select disabled de Bootstrap */
    color: #6c757d !important;
    /* texto gris como en los selects */
    cursor: not-allowed;
}

input[readonly] {
    background-color: #e9ecef !important;
    /* mismo color que select disabled de Bootstrap */
    color: #6c757d !important;
    /* texto gris como en los selects */
    cursor: not-allowed;
}