body {
    height: 100vh !important;
    /*padding-top: 50px !important;*/
}

* {
    font-family: 'poppins', 'sans-serif';
    box-sizing: border-box;
    position: relative;
    font-size: 12px;
}

.nav-bar > li a {
    /*padding: 2.5px; */
    font: var(--unnamed-font-style-normal) normal 600 12px/30px Poppins;
    letter-spacing: var(--unnamed-character-spacing-0);
    text-align: left;
    font: normal normal 600 12px/30px Poppins;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}

.nav-bar > li {
    display: flex;
    height: max-content;
}

.acceder-btn {
    background: #017D94 0% 0% no-repeat padding-box;
    border-radius: 31px;
    opacity: 1;
    padding: 2.5px;
    font: var(--unnamed-font-style-normal) normal
}

/*INICIO DE FUENTES DE TEXTO*/
.p-s-b {
    font-family: 'poppins', 'sans-serif';
}

.font-default {
    /*text-align: left;
    font: normal normal 600 15px/30px Poppins;
    font-style: normal;
    font-weight: 600;*/


    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    font-size: 12px;
    font-family: Poppins;
    letter-spacing: 0px;
    opacity: 1;
}

.font-weight-unset {
    font-weight: unset;
}


.font-size-30 {
    font-size: 30px;
}

.font-size-27 {
    font-size: 27px;
}

.font-size-18 {
    font-size: 18px;
}

.font-size-15 {
    font-size: 15px;
}

/*FIN DE FUENTES DE TEXTO*/


#img-ladingpage-artista {
    /*position: absolute;
    width: 960.5px;
    height: 1546px;
    left: 0px;
    top: 0px;*/
    overflow: visible;
}

#title-distribution > span {
    text-align: left;
    font-family: Poppins;
    font-style: normal;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
}

#detalle-distribucion > span {
    text-align: left;
    font-family: Poppins;
    font-style: normal;
    font-weight: lighter;
    font-size: 15px;
    color: rgba(217, 217, 217, 1);
}

.shadow-distribucion {
    width: 100%;
    position: absolute;
    background: transparent linear-gradient(91deg, #100C0D00 0%, #100C0D 46%, #100C0D 100%) 0% 0% no-repeat padding-box;
    height: 100%;
}

.wh-190 {
    width: 175px !important;
    height: 175px !important;
}

.input-search {
    background: rgba(255, 255, 255, 0.059);
    border: none;
    color: #fff;
    border-radius: 12px;
    padding: 12px;
    background-size: 30px 30px;
    background-color: url("../img-desing/lupa.svg") no-repeat fixed center;
}


/*INICIO DISPLAY*/
.flex-right {
    display: flex;
    align-items: flex-end;
}


.flex-justify-right {
    display: flex;
    justify-content: flex-end;
}

/*FIN DISPLAY*/


/*INICIO ANCHO PORCENTAJE*/
.width-auto {
    width: auto;
}

.width-100 {
    width: 100%;
}

.width-60 {
    width: 60%;
}

.width-55 {
    width: 55%;
}

.width-50 {
    width: 50%;
}

.width-45 {
    width: 45%;
}

.width-40 {
    width: 40%;
}

.width-max-90 {
    max-width: 90%;
}


.wid-700 {
    width: 700px;
}

.wid-600 {
    width: 600px;
}

.wid-500 {
    width: 500px;
}

.wid-450 {
    width: 450px;
}

.wid-400 {
    width: 400px;
}

.wid-350 {
    width: 350px;
}

.wid-300 {
    width: 300px;
}

.wid-200 {
    width: 200px;
}

.wid-190 {
    width: 190;
}

.wid-150 {
    width: 150px;
}

.wid-100 {
    width: 100px;
}

.wid-80 {
    width: 80px;
}

.wid-70 {
    width: 70px;
}

.wid-60 {
    width: 60px;
}

.wid-55 {
    width: 55px;
}

.wid-50 {
    width: 50px;
}

.wid-45 {
    width: 45px;
}

.wid-40 {
    width: 40px;
}

.wid-30 {
    width: 30px;
}

.wid-20 {
    width: 20px;
}


.wid-max-300 {
    max-width: 300px;
}

.wid-max-250 {
    max-width: 250px;
}

.wid-max-200 {
    max-width: 200px;
}

.wid-max-150 {
    max-width: 150px;
}

.wid-max-100 {
    max-width: 100px;
}

/*FIN ANCHO PORCENTAJE*/


/*INICIO BORDER DE CAJA*/
.bra-40 {
    border-radius: 40px;
}

/*FIN DE BORDER DE CAJA*/


/*INICIO DE PADDIN*/

.pa-unset {
    padding: unset;
}


.pa-15 {
    padding: 15px
}


.pat-30 {
    padding-top: 30px
}

.pat-25 {
    padding-top: 25px
}

.pat-20 {
    padding-top: 20px
}

.pat-15 {
    padding-top: 15px
}

.pa-3 {
    padding: 3px;
}

/*FIN DE PADDIN*/


/*INICIO MARGIN BOX*/
.mr-unset {
    margin: unset !important;
}

.mrt-unset {
    margin-top: unset !important;
}

/*FIN MARGIN BOX*/


/*INICIO BACKGRAUND*/
.bg-black-desing {
    /*background: transparent linear-gradient(91deg, #100C0D00 0%, #100C0D 46%, #100C0D 100%) 0% 0% no-repeat padding-box;*/
    background-color: rgba(16, 12, 13, 1);
    opacity: 1;
}

/*FIN BACKGRAUND*/


/*INICIO DE COLOR DE TEXTO*/
.tc-white {
    color: #fff;
}

/*FIN DE COLOR DE TEXTO*/

.servicio-css {
    background: #017d94;
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 4px;
    color: #FFF;
}

/*ESTILOS DE NAV DE REFATORIZADO*/
#nav-refact {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: black !important;
    color: #fff;
    padding: 0px 20px;
    flex-wrap: wrap;
    position: sticky;
    z-index: 3;
    /* Permite el ajuste de elementos en dispositivos pequeños */
}

#nav-refact .menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

#nav-refact .bar {
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 3px 0;
}

#nav-refact .menu2 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.menu2 a {
    text-decoration: none;
    color: #fff;
}

#nav-refact .menu2 li a {
    font-weight: normal !important;
}

#nav-refact .submenu-content2 {
    display: none;
    position: absolute;
    background-color: #fff;
    padding: 10px;
    z-index: 1;
}

#nav-refact .submenu-content2 li {
    margin: 5px 0;
}

#nav-refact .auth a {
    text-decoration: none;
    color: #fff;
    margin-left: 10px;
}

#nav-refact .submenu-content2 {
    display: none;
    position: absolute;
    background-color: #333;
    /* padding: 10px; */
    z-index: 1;
    width: max-content;
}

#nav-refact .submenu-content2.active {
    display: block;
}

#nav-refact .menu2 > li > ul li {
    background-color: transparent !important;
}

#nav-refact li.principal-options {
    padding-left: 10px;
}

#nav-refact .principal-options > a {
    opacity: 0.6;
}

#nav-refact .cardperfil {
    padding: 10px;
    border-radius: 5px;
    background-image: linear-gradient(45deg, red, blue);
    color: #fff;
    display: block;
    margin-bottom: 20px;
}

#nav-refact .icon-muniii {
    width: 14px;
    height: 14px;
    vertical-align: middle;
}

#nav-refact .principal-options > a:hover {
    opacity: 1;
}

#nav-refact .close-icon {
    display: none;
}

#nav-refact .menu2 .active {
    color: #fff !important;
    font-weight: bold;
    background: #1392d2bf !important;
    border-radius: 20px;
    opacity: 1;
}

#nav-refact .card-profile {
    display: flex;
}

#nav-refact .image-user {
    display: none !important;
}

/*** */
#menu-desplegable-bar .sub-item-bar {
    color: #ddd !important;
}

#menu-desplegable-bar > li > div {
    cursor: pointer;
    padding: 0;
}

#menu-desplegable-bar > li > div > a:hover {
    background: rgba(221, 221, 221, 0.06);
}

#menu-desplegable-bar > li > div > a {
    padding: 15px !important;
    width: 100% !important;
    display: flex !important;
}

#nav-refact .menu-desplegable li.show ul {
    transition: 3s !important;
}

#nav-refact .menu-desplegable > li > a {
    color: #FFF;
}

/*** */

#nav-refact .insignia {
    color: #fff;
    background-image: linear-gradient(45deg, red, blue);
    display: flex;
    flex-direction: column;
}

#nav-refact .options-muni {
    display: none;
}

#nav-refact .contenedor-options {
    display: flex;
}

#nav-refact .subtitle {
    display: none;
}

#nav-refact .arrow-down {
    display: none;
}

#nav-refact .general {
    display: none !important;
}

#nav-refact .submenu2:hover:not(.no-hover) .submenu-content2 {
    display: block;
}

#nav-refact .submenu2.no-hover:hover .submenu-content2 {
    display: none;
}

#nav-refact .linksubmenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 768px) {
    #nav-refact .menu2 {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        background-color: #000;
        z-index: 1111;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        padding: 20px 0;
        width: 100%;
        margin: 0;
        overflow-y: auto;
        -webkit-overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease;
    }

    #nav-refact .container-menu {
        width: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        -webkit-overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 80px;
    }

    #nav-refact .close-icon {
        position: absolute;
        display: block;
        top: 20px;
        /* Ajusta la posición de la flecha hacia abajo */
        left: 10px;
        cursor: pointer;
        z-index: 2;
        /* Asegura que la flecha esté por encima del menú */
    }

    #nav-refact .menu2.active {
        display: flex;
        opacity: 1;
        visibility: visible;
    }

    /* Añade un pseudo-elemento ::before para crear el fondo desenfocado */
    .menu2::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: transparent;
        backdrop-filter: blur(5px);
        z-index: -1;
    }

    .principal-options {
        border-bottom: 0.2px solid #ccc;
        /* Línea separadora entre elementos */
        width: 100%;
        /* O ajusta el ancho según tus preferencias */
        padding: 10px 10px;
        opacity: 1;
        /* Espaciado vertical */
    }

    #nav-refact .menu2 a {
        text-decoration: none;
        color: #fff;
        display: flex;
        align-items: center;
        font-size: 12px;
    }

    #nav-refact .menu2 a i {
        margin-right: 10px;
    }

    #nav-refact .principal-options > a {
        opacity: 1;
    }

    .icon-muniii {
        width: 18px;
        height: 18px;
        vertical-align: middle;
    }

    #nav-refact .submenu-content2 {
        display: none;
        background-color: #333;
        z-index: 1;
        list-style-type: none;
        margin: 0;
        position: relative !important;
        z-index: 1;
        top: 0 !important;
        width: 100%;
    }

    /* Asegura que el contenido del submenu se muestre correctamente */
    #nav-refact .submenu2.active .submenu-content2 {
        display: block;
        position: relative;
        z-index: 2;
        /* Ajusta el z-index según sea necesario */
        margin-top: 40px;
        /* Ajusta el espacio entre el submenú y el contenido */
    }

    #nav-refact .active-submenu {
        display: block;
        background-color: black;
    }

    #nav-refact .menu2 .active {
        background: transparent !important;
    }

    #nav-refact .card-profile {
        display: none;
    }

    #nav-refact .image-user {
        display: flex !important;
        width: 95%;
        height: 80px;
        border-radius: 10px;
    }

    #nav-refact .options-muni {
        display: block;
    }

    #nav-refact .contenedor-options {
        flex-direction: column;
        width: 95%;
        background-color: #1C1C1E;
        border-radius: 10px;
        margin-top: 5px;
    }

    #nav-refact .subtitle {
        display: block;
        width: 95%;
        background-color: #1C1C1E;
        border-radius: 10px;
        margin-top: 12px;
        padding: 10px 20px;
        font-weight: bold;
    }

    /* Cambiar el color del trazo a blanco */
    #nav-refact .x1n2onr6 path {
        stroke: white;
    }

    /* Cambiar el grosor del trazo */
    #nav-refact .x1n2onr6 path {
        stroke-width: 3; /* Puedes ajustar el valor según lo necesites */
    }

    #nav-refact .arrow-down {
        display: inline-block;
    }

    #nav-refact .container-general {
        display: flex;
        align-items: center;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    #nav-refact {
        justify-content: space-between;
    }

    #nav-refact .menu2 {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        background-color: rgba(0, 0, 0, 1);
        /* backdrop-filter: blur(5px); */
        z-index: 1111;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        padding: 20px 0;
        width: 100%;
        margin: 0;
        overflow-y: auto;
        -webkit-overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease;
    }

    #nav-refact .close-icon {
        position: absolute;
        display: block;
        top: 20px;
        /* Ajusta la posición de la flecha hacia abajo */
        left: 10px;
        cursor: pointer;
        z-index: 2;
        /* Asegura que la flecha esté por encima del menú */
    }

    #nav-refact .menu2.active {
        display: flex;
        opacity: 1;
        visibility: visible;
    }

    /* Añade un pseudo-elemento ::before para crear el fondo desenfocado */
    #nav-refact .menu2::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: transparent;
        backdrop-filter: blur(5px);
        z-index: -1;
    }

    #nav-refact .principal-options {
        border-bottom: 0.2px solid #ccc;
        /* Línea separadora entre elementos */
        width: 100%;
        /* O ajusta el ancho según tus preferencias */
        padding: 10px 10px;
        opacity: 1;
        /* Espaciado vertical */
    }

    #nav-refact .menu2 a {
        text-decoration: none;
        color: #fff;
        display: flex;
        align-items: center;
        font-size: 12px;
    }

    #nav-refact .menu2 a i {
        margin-right: 10px;
    }

    #nav-refact .principal-options > a {
        opacity: 1;
    }

    .icon-muniii {
        width: 18px;
        height: 18px;
        vertical-align: middle;
    }

    #nav-refact .submenu-content2 {
        display: none;
        background-color: #333;
        z-index: 1;
        list-style-type: none;
        margin: 0;
        position: relative !important;
        z-index: 1;
        top: 0 !important;
        width: 100%;
    }

    /* Asegura que el contenido del submenu se muestre correctamente */
    #nav-refact .submenu2.active .submenu-content2 {
        display: block;
        position: relative;
        z-index: 2;
        /* Ajusta el z-index según sea necesario */
        margin-top: 40px;
        /* Ajusta el espacio entre el submenú y el contenido */
    }

    #nav-refact .active-submenu {
        background-color: black;
    }

    #nav-refact .menu2 .active {
        background: transparent !important;
    }

    #nav-refact .card-profile {
        display: none;
    }

    #nav-refact .image-user {
        display: flex !important;
        width: 95%;
        height: 80px;
        border-radius: 10px;
    }

    .options-muni {
        display: block;
    }

    #nav-refact .contenedor-options {
        flex-direction: column;
        width: 95%;
        background-color: #1C1C1E;
        border-radius: 10px;
        margin-top: 5px;
    }

    #nav-refact .subtitle {
        display: block;
        width: 95%;
        background-color: #1C1C1E;
        border-radius: 10px;
        margin-top: 12px;
        padding: 10px 20px;
        font-weight: bold;
    }

    /* Cambiar el color del trazo a blanco */
    #nav-refact .x1n2onr6 path {
        stroke: white;
    }

    /* Cambiar el grosor del trazo */
    #nav-refact .x1n2onr6 path {
        stroke-width: 3; /* Puedes ajustar el valor según lo necesites */
    }

    #nav-refact .arrow-down {
        display: inline-block;
    }

    #nav-refact .container-general {
        display: flex;
        align-items: center;
    }
}

/*FIN ESTILOS DE NAV DE REFATORIZADO*/

.btnseguir[follow='1']:hover {
    background-color: #fff;
    color: #292929;
}

.btnseguir[follow='1']:after {
    content: 'Siguiendo';
}

.btnseguir[follow='0']:after {
    content: 'Seguir';
}

.seguir[follow='1']:hover {
    background-color: #fff;
    color: #292929;
}

.seguir[follow='1']:after {
    content: 'Siguiendo';
}

.seguir[follow='0']:after {
    content: 'Seguir';
}


@keyframes aparecerSuave {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.dynamic-form-modal {
    animation: aparecerSuave 0.05s ease-out;
    transform-origin: top left;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 3px;
    z-index: 1;
}

.tabla-row[data-id-inline]:hover {
    background-color: unset !important;
}

.tabla-row[data-id-inline] .celda > div {
    width: 100%;
}

[class^="element-aparataje-"]:hover,
[class^="element-aparataje-"]:hover, [class*="element-aparataje-"]:hover {
    /*background-color: #f0f0f0;*/
    background-color: #f0f0f082;
}

[class^="element-aparataje-"],
[class*="element-aparataje-"] {
    cursor: pointer;
    align-items: center;
    display: grid;
    /*color: #FFF;*/
    /*width: 100%;*/
    min-height: 20px;
    padding: 2px 5px;
    width: fit-content;
}

[class^="element-aparataje-"]:empty,
[class*="element-aparataje-"]:empty {
    min-width: 130px;
}

[class^="element-aparataje-"][data-in-placeholder]:empty::before,
[class*="element-aparataje-"][data-in-placeholder]:empty::before {
    content: attr(data-in-placeholder);
    color: #999;
    font-style: italic;
    pointer-events: none;
}

[class^="element-aparataje-"][data-in-placeholder]:empty,
[class*="element-aparataje-"][data-in-placeholder]:empty {
    background-color: #f0f0f082;
}

[class^="element-aparataje-"][data-in-placeholder]:hover,
[class*="element-aparataje-"][data-in-placeholder]:hover {
    background-color: #f0f0f0;
}


@keyframes placeholder-float-in {
    0% {
        opacity: 0;
        transform: translateY(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

[class^="element-aparataje-"][data-out-placeholder]:empty::before,
[class*="element-aparataje-"][data-out-placeholder]:empty::before {
    /* oculto por defecto */
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    padding-left: 4px;
}

[class^="element-aparataje-"][data-out-placeholder]:empty:hover::before,
[class*="element-aparataje-"][data-out-placeholder]:empty:hover::before {
    content: attr(data-out-placeholder);
    color: #999;
    font-style: italic;
    pointer-events: none;
    font-weight: 400;
    animation: placeholder-float-in 0.3s forwards ease-out;
}

[class^="element-aparataje-"][data-out-placeholder]:empty,
[class*="element-aparataje-"][data-out-placeholder]:empty {
    background-color: #f0f0f082;
}

[class^="element-aparataje-"][data-out-placeholder]:hover,
[class*="element-aparataje-"][data-out-placeholder]:hover {
    background-color: #f0f0f0;
}

[class^="element-aparataje-"].circle,
[class*="element-aparataje-"].circle {
    min-height: unset !important;
    border-radius: 100% !important;
}