.alertify-notifier .ajs-message.ajs-error,.alertify-notifier .ajs-message.ajs-success,.mensaje-vacio {
    font-size:17px;
    font-weight:500!important;
    font-family:Quicksand,sans-serif
}
.ajs-body,.ajs-button.ajs-ok,.ajs-header,.alertify-notifier .ajs-message.ajs-error,.mensaje-vacio {
    font-family:Quicksand,sans-serif
}
.btn-perfil,li.siguiente {
    padding:0!important
}
.info-tarjeta,.nombre-ventas-btn-modal {
    white-space:nowrap;
    text-overflow:ellipsis
}
.nombre-ventas-btn-modal,.truncate-text {
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    text-overflow:ellipsis
}
html {
    box-sizing:border-box
}
*,:after,:before {
    box-sizing:inherit
}
:root {
    --blanco:#ffffff;
    --negro:#292929;
    --amarillo:#F5FEC7;
    --amarillo2:#DEFF31;
    --gris:#cfcfcf;
    --gris2:#9ca3af;
}
.dashboard,.user {
    min-height:100vh
}
.btn:active,.btn:focus {
    outline:0!important;
    box-shadow:none!important
}
body,html {
    overflow-y:auto
}
.form-control:focus,.uneditable-input:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,textarea:focus,textarea[type=text]:focus {
    border:2px solid var(--gris);
    box-shadow:none;
    background-color:var(--blanco);
    color:var(--negro) !important;
    font-weight: 400 !important;
}
.ajs-body,.ajs-header,.alertify .ajs-dialog {
    border-bottom:1px solid var(--amarillo)!important
}
.button:active,.button:focus,button:active,button:focus {
    background-color:inherit;
    color:inherit;
    outline:0;
    text-decoration:none
}
.ajs-body,.ajs-footer,.ajs-header,.alertify .ajs-dialog {
    background-color:var(--amarillo)!important
}
.button a:active,.button a:focus,button a:active,button a:focus {
    text-decoration:inherit;
    color:inherit;
    outline:0
}
.mensaje-vacio {
    color:var(--negro)!important
}
.alertify-notifier .ajs-message.ajs-success {
    color:#08895e !important;
    background: #ecfdf5 !important;
    border:1px solid #08895e !important;
    border-radius:6px!important;
    text-shadow:none!important
}
.alertify-notifier .ajs-message.ajs-error {
    color:#df2426 !important;
    background: #fef2f4 !important;
    border:1px solid #df2426 !important;
    border-radius:6px!important;
    text-shadow:none!important
}
.ajs-header {
    color:#000;
    font-size:20px
}
.ajs-body {
    font-size:25px;
    color:#333
}
.ajs-footer {
    border-top:1px solid var(--amarillo)!important
}
.ajs-button.ajs-ok {
    background-color:#deff31;
    color:#000!important;
    border:none;
    font-size:20px!important
}
.ajs-button.ajs-ok:hover {
    background-color:#c4e62a
}
.ajs-button.ajs-cancel {
    background-color:#ccc;
    color:#000;
    border:none
}
.ajs-button.ajs-cancel:hover {
    background-color:#bbb
}
.navbar {
    background-color:var(--blanco)!important;
    height:70px;
    padding-left:0!important;
    padding-right:0!important;
    border-bottom: 1px solid var(--gris);
}
.mr-auto {
    margin-right:0!important
}
.bi-grid-fill {
    font-size:40px!important;
    color:var(--dorado)!important
}
.img-dashboard {
    border-radius:50%;
    height:40px;
    width:40px;
    object-fit:cover;
}
.img-dashboard-no-picture{
    border-radius:50%;
    height:40px;
    width:40px;
    object-fit:cover;
    border: 1px solid var(--negro);
}
.img-menu-admin {
    height:30px;
    width:60px
}
.img-house {
    height:60px!important;
    width:50px!important
}
.text-filter-box,.ul-dropdown {
    width:100%!important
}
.bi-box-arrow-left,.bi-columns-gap,.bi-gear-wide {
    font-size:23px;
    color:var(--negro)
}
.text-filter-box {
    height:43px!important
}
.menu-sandwich{
    color: var(--negro);
    font-size: 35px;
}
.dashboard-icono{
    color: var(--negro);
    font-size: 30px;
}
.cerrar-icono-menu,
.como-icono-menu,
.opciones-icono-menu,
.editar-perfil-menu,
.dashboard-icono-menu{
    color: var(--negro);
    font-size: 20px;
}
.dropdown-menu {
    background-color:var(--blanco)!important;
    border:1px solid var(--gris);
    border-radius:9px!important;
}
.dropdown-item {
    font-size:20px!important;
    font-family:Quicksand,sans-serif;
    font-weight:400!important;
    font-optical-sizing:auto;
    font-style:normal
}
.btn-a-header,.loggedoutbtn {
    text-decoration:none!important;
    font-size:23px!important;
    font-weight:400!important;
    font-optical-sizing:auto;
    font-style:normal;
    font-family:Quicksand,sans-serif;
    transition:.3s ease-in-out
}
.btn-a-header {
    color:var(--negro)!important
}
.loggedoutbtn {
    color:var(--negro)!important
}
.adblock-message {
    display:none;
    background-color:var(--amarillo)!important;
    padding:5px;
    text-align:center!important;
    color:var(--negro)!important;
    font-family:Quicksand,sans-serif;
    line-height:1.1
}
.dashboard {
    padding-top:50px;
    background-color:var(--blanco)
}
.row-titulo-dashboard{
    padding-top: 50px;
}
.texto-titulo-dashboard{
    font-family:Quicksand,sans-serif;
    font-weight: bold;
    font-size: 25px;
    line-height: 1;
}
.texto-subtitulo-dashboard{
    font-family:Quicksand,sans-serif;
    font-size: 15px;
    padding-top: 20px;
    line-height: 1.5;
}
.form-control-busqueda {
    background-color:var(--blanco)!important;
    /* border-radius:50px!important; */
    font-family:Quicksand,sans-serif!important;
    font-size:18px!important;
    font-weight:600!important;
    color:var(--gris)!important;
    width:100%!important;
    padding-right:60px!important;
    margin-bottom:30px!important;
    font-optical-sizing:auto!important;
    font-style:normal!important;
    height: 50px;
}
.row-seleccion-busqueda{
        margin-bottom: 30px !important;
    }
.btn-outline-secondary {
    /* background-color:var(--negro); */
    height:48px;
    width:48px;
    border-radius:50px;
    margin-left:7%;
    transition:.3s ease-in-out;
    border:none !important;
}
.bi-search {
    color:var(--negro);
    font-size:23px;
    transition:.3s ease-in-out
}
.boton-copiar,.form-check-label {
    font-size:20px!important;
    font-weight:600!important;
    font-family:Quicksand,sans-serif
}
.form-check-label {
    font-optical-sizing:auto;
    font-style:normal
}
.form-buscador {
    width:100%;
    /* padding-bottom:50px; */
    padding-top:50px
}
.buscador-hashtag{
    padding-top:100px
}

input::placeholder,
textarea::placeholder,
select::placeholder {
  color: var(--gris2) !important;
  opacity: 1;
  font-style: normal;
  font-weight: 400;
}
.position-relative {
    position:relative;
}
.search-button {
    right:0;
    top:50%;
    transform:translateY(-50%);
    position:absolute;
    /* -webkit-box-shadow:-2px 0 5px 0 rgba(0,0,0,.75);
    -moz-box-shadow:-2px 0 5px 0 rgba(0,0,0,.75);
    box-shadow:-2px 0 5px 0 rgba(0,0,0,.75) */
}
.columna-seleccion-busqueda{
    
    margin-bottom: 10px;
}
.a-columna-seleccion-busqueda{
    font-family:Quicksand,sans-serif!important;
    font-size:18px!important;
    font-weight:500!important;
    color: var(--negro);
    background-color: var(--gris);
    display: inline-block;
    padding: 12px 45px;
    border: 1px solid var(--gris) !important;
    /* margin: 4px; */
    border-radius: 30px;
    border-style: none;
}
.a-columna-seleccion-busqueda.active {
        color: #292929;
        background-color: #F5FEC7;
        border: 1px solid #292929 !important;
    }
.dropdown-menu-ca {
    right:auto;
    left:50%;
    -webkit-transform:translate(-50%,0);
    -o-transform:translate(-50%,0);
    transform:translate(-50%,0);
    background-color:var(--amarillo)!important;
    border:2px solid var(--negro)!important;
    border-radius:10px!important
}
.dropdown-menu-ca.show {
    display:flex;
    flex-direction:row;
    gap:10px
}
.dropdown-col-copy {
    flex:1;
    text-align:center
}
.boton-copiar {
    display:inline-block;
    padding:10px 15px;
    margin:5px 0;
    background-color:transparent;
    border:none;
    cursor:pointer;
    color:var(--negro)
}
.boton-copiar:hover {
    color:var(--negro);
    text-decoration:none
}
.dropdown-divider {
    border-top:1px solid var(--gris)!important
}
.ordenar{
    float: right !important;
}
#button-addon1:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (min-width:992px) {
    .texto-titulo-dashboard{
        font-size: 40px;
    }
    .texto-subtitulo-dashboard{
        font-size: 18px;
    }
    .position-relative{
        width: 50% !important;
        margin: 0 auto;
    }
    .form-control-busqueda{
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
    .form-control{
        border-radius: 50px !important;
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
    .row-seleccion-busqueda{
        margin-top: 30px !important;
        width: 70% !important;
        margin: 0 auto;
    }
    .a-columna-seleccion-busqueda{
        font-size:18px!important;
        padding: 8px 30px;
    }
    .search-button{
        padding-right: 50px;
    }
    .bi-search{
        color: var(--blanco);
        background-color: var(--negro);
        border-radius: 50%;
        padding: 5px 9px;
        border: 1px solid var(--negro);
    }
    .bi-search:hover{
        background-color: var(--amarillo);
        color: var(--negro);
        border: 1px solid var(--negro);
    }
    .a-columna-seleccion-busqueda {
        color: #292929;
        background-color: transparent;
        border: 1px solid transparent !important;
        cursor: pointer;
        transition: all 0.3s ease; /* Transición suave */
        /* Mantén el resto de tus estilos existentes */
    }

    /* Botón resaltado (activo) */
    .a-columna-seleccion-busqueda.active {
        color: #292929;
        background-color: var(--amarillo);
        border: 1px solid var(--negro);
    }

    /* Hover effect (opcional) */
        .a-columna-seleccion-busqueda:hover {
        background-color: var(--amarillo);
        border: 1px solid var(--negro)
    }
}
.body-modal-informacion,.footer-modal-informacion,.header-modal-informacion {
    background-color:var(--amarillo)!important
}
.footer-modal-informacion {
    border-top:var(--amarillo)!important
}
.titulo-modal-informacion {
    color:var(--negro);
    font-family:Quicksand,sans-serif;
    font-size:30px!important;
    font-weight:600!important
}
.titulo-h6-modal-info {
    color:var(--negro);
    font-family:Quicksand,sans-serif;
    font-size:25px!important;
    font-weight:600!important
}
.texto-p-modal-info {
    color:var(--negro);
    font-family:Quicksand,sans-serif;
    font-size:18px!important;
    font-weight:500!important;
    padding-bottom:20px
}
.boton-cerrar-modal-info {
    background-color:var(--negro);
    color:var(--amarillo);
    border-radius:15px;
    border:2px solid var(--negro);
    font-family:Quicksand,sans-serif;
    font-size:20px!important;
    font-weight:500!important;
    padding:8px 15px
}
.tarjeta,.toggle-switch .toggle-input:checked+.toggle-label {
    background-color:var(--amarillo)
}
@media (max-width:768px) {
    .dropdown-menu.show {
        flex-direction:column;
        gap:5px
    }
    .boton-copiar {
        width:100%
    }
}
.toggle-switch {
    position:relative;
    display:inline-block;
    width:50px;
    height:24px;
    margin-left:10px
}
.toggle-switch .toggle-input {
    display:none
}
.toggle-switch .toggle-label {
    position:absolute;
    top:0;
    left:0;
    width:50px;
    height:24px;
    background-color:var(--gris);
    border-radius:34px;
    cursor:pointer;
    transition:background-color .3s;
    -webkit-box-shadow:inset 4px 4px 5px -4px rgba(0,0,0,.75);
    -moz-box-shadow:inset 4px 4px 5px -4px rgba(0,0,0,.75);
    box-shadow:inset 4px 4px 5px -4px rgba(0,0,0,.75)
}
.toggle-switch .toggle-label::before {
    content:"";
    position:absolute;
    width:20px;
    height:20px;
    border-radius:50%;
    top:2px;
    left:2px;
    background-color:var(--blanco);
    box-shadow:0 2px 5px 0 rgba(0,0,0,.3);
    transition:transform .3s
}
.toggle-switch .toggle-input:checked+.toggle-label::before {
    transform:translateX(26px)
}
.form-check-label {
    margin-bottom:0
}
@media (max-width:767.98px) {
    .switches-container {
        flex-direction:column;
        align-items:flex-start
    }
    .switches-container .form-check {
        width:100%;
        display:flex;
        justify-content:space-between;
        margin-bottom:10px
    }
}
.tarjeta {
    border:2px solid var(--negro);
    border-radius:15px;
    margin-bottom:30px
}
.btn-profile,.img-tarjeta {
    background-color:var(--negro)
}
.img-tarjeta {
    display:inline-block;
    width:110px;
    height:110px;
    border-radius:15%;
    object-fit:cover;
    border:2px solid var(--negro)
}
.div-icono {
    padding-top:10px;
    padding-bottom:20px
}
.icono-email,.icono-linkedin,.icono-telefono {
    font-size:50px;
    color:var(--negro)
}
.btn-profile,.info-tarjeta {
    font-size:25px!important;
    font-family:Quicksand,sans-serif;
    font-optical-sizing:auto;
    font-style:normal
}
.info-tarjeta {
    font-weight:500!important;
    margin-bottom:20px;
    overflow:hidden;
    padding:0 40px
}
.col-btn-profile {
    padding-top:10px;
    padding-bottom:40px
}
.btn-profile {
    color:var(--amarillo);
    font-weight:400!important;
    border-radius:10px;
    padding:8px 20px;
    border:2px solid var(--negro);
    transition:.3s ease-in-out
}
.user,.version {
    background-color:var(--blanco)
}
.btn-modal-user,.informacion-user,.version {
    font-weight:500!important
}
.paginacion {
    padding-top:50px;
    margin-bottom:30px
}
.ul-paginacion {
    padding-left:0
}
.paginacion ul {
    list-style:none;
    text-align:center
}
.paginacion ul li {
    display:inline-block;
    margin:0 5px 15px;
    color:var(--negro)
}
.paginacion ul li a {
    display:block;
    padding:10px 20px;
    border:2px solid var(--gris);
    background:transparent;
    color:var(--negro);
    border-radius:10px
}
li.siguiente {
    background:var(--blanco);
    color:var(--negro);
    border-color:2px solid var(--negro);
    border-radius:10px
}
.paginacion ul li a:hover {
    background:var(--negro);
    border:2px solid var(--negro);
    color:var(--blanco);
    text-decoration:none
}
.paginacion ul .active {
    background:var(--negro);
    border:2px solid var(--negro);
    color:var(--blanco);
    padding:10px 20px;
    border-radius:10px
}
.ul-paginacion li.disabled {
    pointer-events: none;
    background:var(--blanco) !important;
    color:var(--negro);
    border:2px solid var(--gris) !important;
    border-radius:10px
}

.ul-paginacion li.disabled span {
    padding: 8px 12px;
    display: inline-block;
}
.btn-modal-user,.tab-profile {
    border:2px solid var(--negro)!important
}
.paginacion ul .disabled {
    background:#a8a8a8;
    padding:3px 10px;
    cursor:not-allowed
}
.paginacion ul .disabled:hover {
    background:#a8a8a8
}
.version {
    color:var(--negro);
    font-family:Quicksand,sans-serif;
    font-size:15px!important;
    text-align:center;
    font-optical-sizing:auto;
    font-style:normal
}
.user {
    padding-top:0!important;
    overflow:hidden!important;
    padding-bottom:50px
}
.contenedor-img-user {
    padding-left:0;
    padding-right:0
}
.info-user {
    padding-bottom:25px
}
.img-tarjeta-user {
    height:570px;
    width:100%;
    object-fit:cover;
    position:relative
}
.div-img-tarjeta-user-none {
    margin-top:100px;
    margin-bottom:50px
}
.div-icono-user {
    padding-top:50px;
    padding-bottom:50px
}
.btn-modal-user,.button-title-acordion {
    font-family:Quicksand,sans-serif;
    padding-top:1px!important
}
.icono-email-user,.icono-linkedin-user,.icono-telefono-user {
    font-size:50px;
    color:var(--amarillo);
    -webkit-text-stroke-width:1px;
    -webkit-text-stroke-color:black
}
div.dropdown-multicol2>div.dropdown-col-copy-user1 {
    display:inline-block;
    left:50%!important;
    right:auto!important;
    text-align:center!important;
    transform:translate(15%,0)!important
}
div.dropdown-multicol2>div.dropdown-col-copy-user2 {
    display:inline-block;
    width:20%;
    left:50%!important;
    right:auto!important;
    text-align:center!important;
    transform:translate(45%,0)!important
}
.img-tarjeta-user-none {
    display:inline-block;
    width:110px;
    height:110px;
    object-fit:cover;
    clip-path:circle(50% at 50% 50%)
}
.informacion-user {
    font-family:Quicksand,sans-serif;
    font-size:30px!important;
    color:var(--negro);
    padding-bottom:30px;
    text-align:center!important
}
.img-tarjeta-empresa {
    max-width:150px;
    max-height:150px
}
.descripcion-user {
    text-align:center;
    line-height:1.2
}
.btn-modal-user {
    font-size:25px!important;
    background-color:var(--amarillo)!important;
    color:var(--negro)!important;
    padding-bottom:1px!important;
    width:120px!important;
    border-radius:10px!important
}
@media (min-width:768px) {
    .switches-container {
        flex-direction:row;
        justify-content:center
    }
    .switches-container .form-check {
        display:flex;
        align-items:center;
        margin-right:15px
    }
    .img-tarjeta-user,.img-tarjeta-user-none {
        display:inline-block;
        width:110px;
        height:110px;
        object-fit:cover
    }
    .user {
        background-image:url('../imgs/user-pattern.png');
        background-attachment:fixed
    }
    .contenedor-img-user {
        margin-top:100px;
        margin-bottom:50px
    }
    .img-tarjeta-user {
        clip-path:circle(50% at 50% 50%)
    }
    .div-img-tarjeta-user:before {
        content:'';
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background:#000;
        background:linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 100%);
        z-index:1
    }
    .img-tarjeta-empresa {
        max-width:200px;
        max-height:200px
    }
    .div-img-tarjeta-user-none {
        margin-bottom:0!important
    }
}
.modal-content {
    background-color:var(--blanco)!important;
    /* min-height:95vh; */
    border-radius:5px;
    border:1px solid var(--gris)
}
.btn-svg-modal {
    background-color:transparent!important;
    float:left!important
}
.accordion,.card,.card-header {
    background-color:var(--fondo)!important
}
.icon-close-modal {
    font-size:45px!important;
    color:var(--dorado)!important;
    padding-left:11px!important
}
.accordion {
    width:85%!important;
    border-bottom:2px solid var(--negro)
}
.padding-acordion {
    margin-bottom:35px!important
}
.card {
    border:none!important
}
.button-title-acordion,.card-body {
    border-radius:0!important;
    color:var(--negro)!important
}
.card-header {
    border-bottom:none
}
.h2-acordion {
    margin-top:0!important
}
.button-title-acordion {
    font-size:25px!important;
    font-weight:500!important;
    padding-bottom:1px!important
}
.card-body,.nombre-ventas-btn-modal {
    font-family:Quicksand,sans-serif;
    font-size:20px!important;
    font-weight:500!important
}
.card-body {
    text-align:justify!important;
    text-justify:inter-word!important;
    line-height:1.2
}
.modal-ventas {
    background-color:var(--main-color)!important;
    height:100vh!important
}
.row-modal-ventas {
    margin-left:15px!important
}
.button-img-modal-ventas {
    width:110px!important;
    padding:0!important;
    border:none!important;
    background-color:transparent!important
}
.container-button-ventas,.nombre-ventas-btn-modal {
    padding-left:5px!important;
    padding-right:5px!important
}
.container-button-ventas {
    padding-top:70px!important;
    width:100%
}
.col-img-modal-ventas,.img-modal-ventas {
    width:110px!important
}
.img-modal-ventas {
    height:120px!important;
    border-radius:15px;
    border:2px solid var(--negro)!important;
    margin-bottom:10px
}
.nombre-ventas-btn-modal {
    color:var(--negro);
    height:40px;
    background-color:var(--amarillo);
    border:2px solid var(--negro);
    border-radius:10px;
    display:inline-block;
    overflow:hidden!important;
    padding-top:5px!important
}
.row-info-modal-ventas {
    padding-left:0!important;
    padding-right:0!important;
    padding-bottom:30px!important;
    align-items:center!important
}
.texto-carousel,.titulo-carousel {
    font-family:Quicksand,sans-serif;
    color:var(--negro);
    padding-left:15px!important;
    font-weight:500!important
}
.img-carousel {
    border-radius:15px!important;
    border:2px solid var(--negro);
    height:400px;
    width:400px;
    object-fit:cover
}
span.carousel-control-prev-icon {
    color:var(--negro)!important
}
.carousel-control-prev-icon {
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23292929' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e")!important
}
.carousel-control-next-icon {
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23292929' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e")!important
}
.carousel-indicators li {
    width:15px;
    height:15px;
    background-color:var(--negro);
    border-radius:50%;
    opacity:1;
    transition:background-color .3s,opacity .3s;
    border:2px solid var(--amarillo)
}
.carousel-indicators .active {
    background-color:var(--amarillo);
    opacity:1;
    border:2px solid var(--negro)
}
.carousel-indicators li:hover {
    background-color:#36a6a7;
    opacity:1
}
.row-info-carousel {
    padding-top:50px;
    padding-right:0!important
}
.titulo-carousel {
    font-size:40px!important;
    padding-bottom:30px
}
.texto-carousel {
    font-size:25px!important;
    line-height:1.3
}
.h1-no-perfil,.info-tarjeta-informacion,.info-tarjeta-profile {
    font-family:Quicksand,sans-serif;
    font-size:30px!important;
    color:var(--negro)
}
.div-img-tarjeta {
    padding:70px 0 40px
}
.contendor-edit-i,.distancia-imgs-perfil,.div-icono-profile {
    padding-bottom:40px
}
.img-tarjeta-profile {
    height:200px;
    width:200px;
    object-fit:cover;
    position:relative;
    border-radius:50%;
    border:2px solid var(--negro)
}
.info-tarjeta-informacion {
    font-weight:500!important;
    text-align:center;
    padding-bottom:30px;
    line-height:1.3
}
.info-tarjeta-profile {
    font-weight:500!important;
    text-align:center;
    padding-bottom:10px;
    line-height:1.3
}
.bnt-editar-perfil {
    padding-top:40px;
    padding-bottom:40px
}
.a-editar-perfil {
    color:var(--negro);
    background-color:var(--amarillo);
    border:2px solid var(--negro);
    border-radius:10px;
    transition:.3s ease-in-out
}
.h1-no-perfil {
    font-weight:500!important
}
.h1-texto-interes,.perfil-incompleto,.tab-profile,.tab-profile.active,body .tooltip-inner {
    font-size:20px!important;
    font-weight:500!important;
    font-family:Quicksand,sans-serif
}
.tab-profile {
    color:var(--negro);
    background-color:var(--gris);
    border-radius:10px!important;
    margin-left:15px;
    margin-right:15px;
    width:100px
}
.nav-tabs-profile {
    border-bottom:none!important
}
.nav-item-profile {
    padding-bottom:50px
}
.tab-profile.active {
    color:var(--negro);
    background-color:var(--amarillo)!important;
    border:2px solid var(--negro)!important
}
.h1-texto-interes,.perfil-incompleto {
    color:var(--negro)
}
.accordion-profile,.profile-img {
    padding-bottom:100px
}
.btn-modal-profile {
    width:100%!important;
    margin:auto!important
}
img.img-front-modal {
    width:100%;
    border-radius:10px!important;
    height:140px;
    border:2px solid var(--negro)
}
body .tooltip-inner {
    background:var(--amarillo)!important;
    color:var(--negro)!important
}
.container-perfil,.div-formulario-perfil {
    background-color:var(--blanco)!important
}
.iniciar-row {
    padding-bottom:10px
}
.formulario-perfil {
    padding-top:30px
}
.icono-prefil {
    padding-right:0!important
}
.col-img-perfil,.form-perfil,.padding-v {
    padding-left:0!important
}
.img-perfil {
    height:100px;
    width:100px;
    border:2px solid var(--negro);
    border-radius:15px
}
.alt {
    color:var(--secundario)
}
.img-distancia {
    margin-bottom:15px
}
.iconos-password,.iconos-perfil {
    height:calc(.5em + .75rem + 2px)!important;
    font-size:20px;
    color:var(--negro);
    background-color:var(--amarillo);
    padding:8px 10px;
    border-radius:10px;
    border:2px solid var(--negro);
    float:none!important;
    bottom:10!important
}
.label-img-profile {
    color:var(--letras)!important;
    font-family:Quicksand,sans-serif;
    font-size:20px!important;
    font-weight:500!important
}
.form-control,.textarea-perfil {
    font-size:20px;
    font-weight:500
}
input[type=file]::file-selector-button {
    background-color:var(--amarillo);
    border:2px solid var(--negro)!important;
    padding:8px 12px;
    border-radius:10px;
    cursor:pointer
}
.input-file {
    color:var(--dorado)
}
.form-control {
    border-radius:10px;
    border-left:0;
    border:2px solid var(--gris);
    color:var(--negro);
    font-family:Quicksand,sans-serif;
    background-color:var(--amarillo)
}
.textarea-perfil {
    color:var(--negro)!important;
    background-color:var(--amarillo)!important;
    border:2px solid var(--negro)!important;
    width:100%!important;
    height:200px!important;
    border-radius:10px!important;
    padding-top:5px!important;
    padding-left:10px!important
}
.contenedor-button-guardar {
    padding-top:5px;
    margin-bottom:25px!important
}
.button-guardar,button.btn-int-ven {
    padding:8px 12px!important;
    transition:.3s ease-in-out
}
.button-guardar {
    background-color:var(--negro);
    border:2px solid var(--negro)!important;
    color:var(--amarillo);
    font-size:23px;
    font-family:Quicksand,sans-serif;
    font-weight:600;
    border-radius:10px
}
.linea-botones,.mas-opciones {
    border-bottom:2px solid var(--negro)
}
.div-profile-opciones:first-child {
    padding-top:15px;
    padding-bottom:15px
}
.div-profile-opciones:last-child,.padding-interes {
    padding-bottom:15px
}
.a-profile-opciones {
    color:var(--letras)!important;
    font-size:20px!important;
    font-family:Quicksand,sans-serif;
    font-weight:500!important;
    transition:.3s ease-in-out
}
.bi-lock,.bi-pencil-square,.bi-person-x,.bi-plus-lg,.bi-x-lg {
    font-size:20px!important;
    color:var(--negro)!important;
    border:2px solid var(--negro);
    background-color:var(--amarillo);
    border-radius:10px;
    padding:6px
}
.iniciar-row-mas {
    padding-bottom:0!important
}
.linea-botones:last-child {
    border-bottom:0 solid var(--negro)
}
.div-btn-int-vent {
    padding-top:35px!important;
    padding-bottom:20px!important
}
button.btn-int-ven {
    background-color:var(--dorado)!important;
    border:none!important;
    color:var(--fondo)!important;
    height:auto!important;
    font-size:20px!important;
    border-radius:0!important;
    font-family:Quicksand,sans-serif;
    font-weight:300!important
}
.a-editar-perfil,.mas-opciones {
    font-size:20px!important;
    font-family:Quicksand,sans-serif;
    color:var(--negro)!important
}
.mas-opciones {
    font-weight:500!important;
    padding-top:50px
}
.card-mas-op {
    padding-top:0!important;
    padding-bottom:0!important
}
.a-editar-perfil {
    border:2px solid var(--negro)!important;
    font-weight:200!important;
    background-color:var(--amarillo)!important;
    padding:5px 25px!important;
    border-radius:10pxpx!important
}
.btn-mas-opciones,.modal-botones {
    background-color:var(--fondo)!important
}
.btn-mas-opciones {
    border:none!important;
    width:100%;
    text-align:left!important;
    padding-top:15px;
    padding-bottom:15px
}
.btn-aee,.button-guardar-password {
    padding:8px 12px!important;
    font-family:Quicksand,sans-serif
}
/* textarea::-webkit-input-placeholder {
    color:var(--negro)!important;
    font-family:Quicksand,sans-serif;
    font-size:25px!important
}
textarea:-moz-placeholder {
    color:var(--negro)!important;
    font-family:Quicksand,sans-serif;
    font-size:25px!important
}
textarea::-moz-placeholder {
    color:var(--negro)!important;
    font-family:Quicksand,sans-serif;
    font-size:25px!important
}
textarea:-ms-input-placeholder {
    color:var(--negro)!important;
    font-family:Quicksand,sans-serif;
    font-size:25px!important
}
textarea::placeholder {
    color:var(--negro)!important;
    font-family:Quicksand,sans-serif;
    font-size:25px!important
} */
.modal-botones {
    border-radius:0!important
}
.borderless td,.borderless th,.btn-aee,.modal-header {
    border:none!important
}
.modal-center {
    height:130px!important
}
.btn-aee {
    background-color:var(--dorado)!important;
    color:var(--fondo)!important;
    height:auto!important;
    font-size:20px!important;
    border-radius:0!important;
    font-weight:300!important
}
.div-form-edit-pass,.div-formulario-interes,.v {
    min-height:100vh;
    background-color:var(--blanco)
}
.btn-cancel,.btn-delete-1,.button-guardar-password {
    background-color:var(--amarillo)
}
.button-guardar-password {
    border:2px solid var(--negro)!important;
    color:var(--negro);
    font-size:23px;
    font-weight:600;
    border-radius:10px;
    transition:.3s ease-in-out
}
.btn-delete-1,.h1-delete-account,.h2-delete-account,.modal-body-eliminar-i,.modal-tile-delete-i {
    font-family:Quicksand,sans-serif;
    font-weight:500!important
}
.div-container-edit-i,.div-delete-account {
    padding-top:40px
}
.h1-delete-account {
    font-size:40px!important;
    color:var(--negro)
}
.h2-delete-account,.modal-body-eliminar-i {
    font-size:25px!important;
    color:red
}
.btn-delete-1 {
    color:var(--negro);
    border:2px solid var(--negro);
    padding:8px 16px;
    border-radius:10px;
    font-size:20px!important;
    transition:.3s ease-in-out
}
.modal-tile-delete-i {
    font-size:35px!important
}
.bi-x {
    color:var(--negro)!important;
    font-size:25px!important;
    text-shadow:none!important
}
.btn-cancel,.btn-delete {
    border:2px solid var(--negro);
    padding:8px 16px;
    font-weight:500!important;
    font-size:20px!important;
    font-family:Quicksand,sans-serif
}
.btn-cancel {
    color:var(--negro);
    border-radius:10px
}
.btn-delete {
    background-color:var(--negro);
    color:var(--amarillo);
    border-radius:10px
}
.label-interes,.label-interes-small,.label-ventas,.row-table {
    color:var(--negro);
    padding-bottom:15px
}
.label-interes,.label-ventas {
    font-family:Quicksand,sans-serif;
    font-size:30px!important;
    font-weight:500!important
}
.btn-editar-interes,.label-interes-small,.row-table {
    font-size:20px!important;
    font-family:Quicksand,sans-serif;
    font-weight:500!important
}
.delete-i,.edit-i,.edit-v {
    background-color:var(--blanco);
    min-height:100vh
}
.form-control-edit-i {
    margin-bottom:10px!important
}
.btn-editar-interes {
    background-color:var(--negro);
    color:var(--amarillo);
    border:2px solid var(--negro);
    padding:8px 16px;
    border-radius:10px;
    margin-top:10px;
    transition:.3s ease-in-out
}
.label-delete-i,.label-edit-v {
    color:var(--negro);
    font-family:Quicksand,sans-serif;
    font-size:30px!important;
    font-weight:500!important;
    padding-bottom:15px;
    padding-top:40px
}
.div-delete-interes {
    background-color:var(--amarillo);
    border:2px solid var(--negro);
    border-radius:10px;
    font-family:Quicksand,sans-serif;
    font-size:20px!important;
    font-weight:500!important;
    padding:5px 10px
}
.btn-delete-i {
    background-color:var(--amarillo);
    border:2px solid var(--negro);
    border-radius:10px;
    padding:0 5px;
    font-size:25px;
    transition:.3s ease-in-out
}
.btn-editar-v,.editar-v,.label-productos,.mensaje-resultados,.resultado-destacado {
    font-size:20px!important;
    font-family:Quicksand,sans-serif
}
.bi-x {
    color:var(--negro)
}
.img-add-productos {
    height:131px!important;
    width:136px!important;
    border:2px solid var(--negro);
    border-radius:10px;
    max-width:100%
}
.container-form-img-productos {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    padding-top:30px
}
.container-img-productos {
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-bottom:20px
}
.btn-modal-ventas {
    display:flex;
    justify-content:center;
    align-items:center
}
.text-label-productos {
    margin-top:0
}
.label-productos {
    font-weight:500!important
}
.btn-editar-v {
    background-color:var(--negro);
    border:2px solid var(--negro);
    color:var(--amarillo);
    border-radius:10px;
    font-weight:500!important;
    padding:8px 16px;
    transition:.3s ease-in-out
}
.margin-btn-v {
    padding-bottom:40px;
    margin-top:25px!important
}
.contenedor-volver {
    padding-top:25px!important;
    margin-bottom:30px!important
}
.float-v {
    float:left!important
}
.contenedor-v {
    margin-bottom:35px
}
.contenedor-img-v {
    margin-bottom:5px
}
.editar-v {
    background-color:var(--negro)!important;
    border:2px solid var(--negro)!important;
    color:var(--amarillo)!important;
    padding:8px 12px!important;
    border-radius:10px;
    font-weight:500!important;
    transition:.3s ease-in-out;
    margin-bottom:50px
}
.paddingtop-v {
    padding-top:35px
}
.container-form-img-productos-v {
    padding-left:0!important;
    padding-right:0!important;
    margin-bottom:50px!important
}
.truncate-text {
    display:-webkit-box;
    overflow:hidden;
    max-height:3em;
    line-height:1.5em
}
.mensaje-resultados {
    font-weight:500!important;
    color:var(--negro);
    background-color:var(--gris);
    padding:10px;
    border-radius:5px;
    border:2px solid var(--negro);
    text-align:center;
    margin-bottom:50px
}
.resultado-destacado {
    font-weight:700!important
}
.no-encontrado {
    min-height:80vh;
    padding-top:80px
}
.no-encontrado-msj {
    font-family:Quicksand,sans-serif;
    font-size:40px!important;
    font-weight:500!important
}
@media (min-width:992px) {
    .profile {
        min-height:100vh!important;
        background-image:url('../imgs/user-pattern.png');
        background-attachment:fixed
    }
    .container {
        max-width:1800px!important;
    }
    .adblock-message,.alertify-notifier .ajs-message.ajs-error,.alertify-notifier .ajs-message.ajs-success {
        font-size:20px
    }
    .dropdown-item:hover {
        background-color:transparent
    }
    .ancho-modal-info {
        max-width:800px!important
    }
    .btn-outline-secondary:hover {
        background-color: transparent !important;
        border: none !important;
    }
    .bi-search:hover {
        /* color:var(--amarillo); */
    }
    .boton-cerrar-modal-info:hover {
        background-color:var(--amarillo);
        color:var(--negro)
    }
    .btn-profile:hover {
        background-color:var(--amarillo);
        color:var(--negro);
        border:2px solid var(--negro);
        text-decoration:none
    }
    .container-profile,.container-user {
        max-width:1300px!important
    }
    .img-tarjeta-user {
        display:inline-block;
        width:200px;
        height:200px;
        object-fit:cover;
        clip-path:circle(50% at 50% 50%)
    }
    .div-img-tarjeta-user:before {
        content:'';
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background:#000;
        background:linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 100%);
        z-index:1
    }
    .img-tarjeta-user-none {
        display:inline-block;
        width:300px;
        height:300px;
        object-fit:cover
    }
    .div-img-tarjeta-user-none {
        margin-bottom:0!important
    }
    .mover-i {
        padding-left:450px
    }
    .mover-d {
        padding-right:450px
    }
    .informacion-user {
        padding-bottom:50px
    }
    .boton-copiar-user2:hover {
        text-decoration:none!important
    }
    .img-carousel {
        border-radius:15px!important;
        border:2px solid var(--negro);
        height:500px;
        width:500px;
        object-fit:cover
    }
    .button-img-modal-ventas,.img-modal-ventas {
        width:210px!important
    }
    .div-texto-interes {
        padding-top:115px;
        padding-bottom:45px
    }
    .img-modal-ventas {
        height:220px!important
    }
    .nombre-ventas-btn-modal {
        font-size:15px!important
    }
    .a-editar-perfil:hover,.tab-profile:hover {
        text-decoration:none;
        color:var(--negro)
    }
    .info-tarjeta-informacion {
        padding-bottom:20px;
        line-height:1.3
    }
    .a-editar-perfil:hover {
        background-color:var(--blanco)
    }
    img.img-front-modal {
        height:250px;
        width:250px
    }
    .iniciar-row {
        padding-bottom:25px
    }
    .distancia-imgs-perfil {
        padding-bottom:70px
    }
    .iconos-perfil {
        padding:9px 11px;
        font-size:23px!important
    }
    .icono-perfil {
        padding-right:0!important;
        max-width:4%
    }
    .a-profile-opciones,.bi-lock,.bi-pencil-square,.bi-person-x,.bi-plus-lg,.bi-x-lg,.form-control {
        font-size:25px!important
    }
    .button-guardar:hover {
        color:var(--negro)!important;
        background-color:var(--amarillo)!important;
        border:2px solid var(--negro)!important
    }
    .btn-int-ven:hover {
        text-decoration:none!important;
        color:var(--letras)!important
    }
    .form-perfil {
        min-width:96%!important
    }
    .a-profile-opciones:hover {
        text-decoration:none!important;
        color:var(--dorado)!important
    }
    .textarea-perfil {
        font-size:25px
    }
    .modal-center {
        width:auto!important
    }
    .btn-aee:hover {
        text-decoration:none!important;
        color:var(--secundary-color)!important
    }
    .iconos-password {
        height:calc(.9em + .75rem + 2px)!important
    }
    .button-guardar-password:hover {
        background-color:var(--negro);
        border:2px solid var(--negro)!important;
        color:var(--amarillo)
    }
    .btn-delete-1:hover {
        background-color:var(--negro);
        color:var(--amarillo);
        border:2px solid var(--negro)
    }
    .label-interes,.label-ventas {
        padding-top:40px
    }
    .btn-editar-interes:hover {
        background-color:var(--amarillo);
        color:var(--negro);
        border:2px solid var(--negro)
    }
    .btn-delete-i:hover {
        background-color:var(--negro);
        border:2px solid var(--negro)
    }
    .bi-x:hover {
        color:var(--amarillo)!important
    }
    .img-add-productos {
        height:250px!important;
        width:250px!important
    }
    .label-edit-v {
        padding-top:70px
    }
    .btn-editar-v:hover {
        color:var(--negro);
        background-color:var(--amarillo);
        border:2px solid var(--negro);
        text-decoration:none
    }
    .editar-v:hover {
        background-color:var(--amarillo)!important;
        color:var(--negro)!important;
        text-decoration:none!important;
        border:2px solid var(--negro)!important
    }
    .no-encontrado-msj {
        padding-top:200px
    }
}
.ad {
    text-align:center;
    margin:20px 0
}

/*******************************************************************************************************SECCION NUEVA************************************************************/

.col-btn-opciones{
    margin-bottom: 20px;
}

.col-btn-idioma{
    margin-bottom: 5px;
}

.btn-opciones{
    font-family: "Quicksand", sans-serif;
    font-size: 20px !important;
    font-weight: 500 !important;
    color: var(--negro);
    transition: 0.3s ease-in-out;
}

.linea-separadora {
  border: none;
  border-top: 2px solid var(--negro);
  width: 60%;
  margin-left: 15px;
}

/************************************************BUSCAR****************************************/

.img-tarjeta-buscar{
    display: inline-block;
    height: 400px;
    width: 93%;
    border-radius: 5%;
    object-fit: cover;
    border: 2px solid var(--negro);
    background-color: var(--negro);
}

.bold{
    font-weight: bolder !important;
}

.div-img-tarjeta-buscar{
    padding: 18px 0 20px;
}

.info-tarjeta-buscar{
    font-size: 25px !important;
    font-family: Quicksand,sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 5px !important;
    overflow: hidden;
    padding: 0 40px;
    text-align: left !important;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.info-tarjeta-buscar-ultimo{
    font-size: 25px !important;
    font-family: Quicksand,sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 500 !important;
    margin-bottom: 15px !important;
    overflow: hidden;
    padding: 0 40px;
    text-align: left !important;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fondo-comp-vent{
    padding-left: 35px;
}

.fondo-comp-vent-ultimo{
    padding-right: 35px;
    padding-left: 35px;
}

.com-vent{
    font-size: 18px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    background-color: var(--negro);
    border-radius: 5px;
    color: var(--amarillo) !important;
}

.div-hashtag{
    padding-top: 10px;
}

.hashtag{
    font-size: 15px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    background-color: var(--negro);
    border-radius: 5px;
    color: var(--amarillo) !important;
}

.col-btn-profile-buscar{
    padding-top: 30px;
    padding-bottom: 20px;
}

.select-busqueda{
    width: 100% !important;
    /* height: 15px; */
}

.filtro-busqueda{
    width: 100%;
    height: 35px;
    font-size: 18px;
    font-family: Quicksand,sans-serif !important;
    color: var(--negro);
    border: 2px solid var(--gris);
    border-radius: 8px;
    background-color: var(--blanco);
    margin-bottom: 10px;
}

#dropdownOrdenar {
    white-space: nowrap;
    min-width: fit-content;
    padding: 0.5rem 1rem;
}

#texto-ordenar {
    display: inline-block;
    font-size: 18px;
    font-family: Quicksand,sans-serif !important;
    margin-left: 5px;
}

.ordenarlista.active{
    background-color: var(--amarillo);
    color: var(--negro);
}

.bi-sort-down{
    color: var(--gris2);
    font-size: 23px;
}

/* Responsive: En móviles acortar el texto */
/* @media (max-width: 576px) {
    #dropdownOrdenar {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }
} */
 

@media (min-width: 768px) {
        .img-tarjeta-buscar{
        height: 350px;
        width: 92%;
    }
}

@media (min-width: 992px) {
    .img-tarjeta-buscar{
        height: 450px;
        width: 92%;
    }

    .filtro-busqueda{
        /* width: 33.1%; */
        height: 40px;
    }

    .ordenarlista:hover{
        background-color: var(--gris2);
    }

    .ordenarlista.active:hover{
        background-color: var(--amarillo2);
    }
}

/**filtro**/
.filtro{
    font-size: 18px !important;
    border: none !important;
    background-color: transparent !important;
    padding-bottom: 15px;
}
.bi-funnel-fill{
    color: var(--gris2);
}

/*editar-perfil*/
.select-edit-profile{
    border-radius: 10px;
  border-left: 0;
  border: 2px solid var(--negro);
  color: var(--negro);
  font-family: Quicksand,sans-serif;
  background-color: var(--amarillo);
  font-size: 20px;
  font-weight: 500;

  display: block;
  width: 80%;
  height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
}

select.select-edit-profile option {
    color: var(--negro);
    font-size: 20px;
}

@media (min-width: 768px) {
    .select-edit-profile{
        width: 89.6%;
    }

    #sugerencias-ciudad {
    width: 98%;
    }
}

@media (min-width: 992px) {
    .select-edit-profile{
        width: 95.2%;
        height: 52.5px;
    }

    #sugerencias-ciudad {
    width: 99.2%;
    }

    #sugerencias-ciudad .list-group-item:hover {
    background-color: var(--gris);
    color: var(--negro);
}
}

/**Agregar interés**/
.label-interes-hashtag{
    font-size: 18px !important;
    font-family: Quicksand,sans-serif;
    font-weight: 500 !important;
    padding-top: 20px;
}

/**editar-interés**/
.edit-input-hashtag{
    margin-top: 10px;
}

.espacio-input-edithahstag{
    margin-bottom: 10px;
}

.contendor-edit-i{
    margin-bottom: 50px !important;
}

/**Agregar ventas**/

.hashtags-carousel {
    margin-top: 5px;
}
.hashtag-item {
    display: inline-block;
    margin-right: 10px;
    color: #007bff; /* azul tipo link */
    /* font-weight: bold; */
    font-family: Quicksand,sans-serif;
}
.hashtag-item::before {
    content: "";
}

/******************************************DASHBOARD*************************************/

.row-tarjeta{
    margin-left: 0px;
    margin-right: 0px;
}

.tarjeta-perfiles{
    border: 1px solid var(--gris);
    border-radius: 10px;
    margin-bottom: 30px !important;
    padding-top: 13px;
    /* Agregar Flexbox para empujar hashtags hacia abajo */
    display: flex;
    flex-direction: column;
    transition: 0.4s ease-in-out;
}

.imagen-tarjeta{
    height: 60px;
    /* width: 50px !important; */
    background-color: var(--negro);
    border-radius: 5px ;
}

.primera-fila{
    margin-bottom: 15px !important;
}

.contenedortexto1tarjetaperfil{
    padding-left: 10px;
}

.texto1tarjetaperfil1{
    font-size: 18px !important;
    font-family: Quicksand,sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--negro);
    /* font-weight: 550; */
}

.texto1tarjetaperfil2{
    font-size: 14px !important;
    font-family: Quicksand,sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--negro);
}

.badge-interes{
    background-color: var(--amarillo);
    padding: 5px 13px;
    border-radius: 20px;
    color: var(--negro);
}

.badge-venta{
    background-color: #dcfce7;
    padding: 5px 13px;
    border-radius: 20px;
    color: var(--negro);
}

.tercera-fila{
    font-family: Quicksand, sans-serif;
    /* Propiedades para truncar en 3 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4; /* Ajusta según necesites */
    /* Hacer que este elemento crezca para empujar hashtags abajo */
    flex-grow: 1;
    margin-bottom: 15px; /* Reducir margin para compensar */
    color: var(--negro);
}

.segunda-fila{
    margin-bottom: 15px !important;
    margin-bottom: 15px !important;
    margin-top: auto; /* Empuja hacia abajo */
}

.hashtag-tarjeta-perfil1{
    background-color: #dbeafe;
    color: #1e7cd7;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 0px !important;
    margin-right: 7px !important;
    font-size: 15px !important;
}

.hashtag-tarjeta-perfil2{
    background-color: #dcfce7;
    color: #237345;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 0px !important;
    margin-right: 7px !important;
    font-size: 15px !important;
}

.hashtag-tarjeta-perfil3{
    background-color: #e5ceff;
    color: #6b3ab9;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 0px !important;
    margin-right: 7px !important;
    font-size: 15px !important;
}

.hashtag-tarjeta-perfil4{
    background-color: var(--amarillo);
    color: var(--negro);
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    font-size: 15px !important;
}

.tercera-fila{
    margin-bottom: 10px;
    font-size: 15px !important;
    font-family: Quicksand,sans-serif;
}

.cuarta-fila{
    margin-bottom: 10px;
    font-size: 15px !important;
    font-family: Quicksand,sans-serif;
    font-weight: 550;
    color: var(--negro);
}

.titulodashboard{
    font-size: 18px !important;
    /* font-weight: 550; */
    color: var(--negro);
    font-family: Quicksand,sans-serif;
}

.hashtag-clickable {
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    display: inline-block;
}


@media (min-width: 992px) {
    .row-tarjeta {
        gap: 20px; /* Espacio entre tarjetas */
        margin-left: 0px;
        margin-right: 0px;
    }
    
    .tarjeta-perfiles {
        margin-bottom: 0px !important; /* Quitar margin-bottom porque gap lo maneja */
        flex: 0 0 calc(25% - 15px); /* Ajustar el ancho considerando el gap */
        max-width: calc(25% - 15px);
        max-height: 400px;
    }

    .tarjeta-perfiles:hover{
        border: 1px solid var(--negro);
    }

    .tarjeta-link:hover{
        text-decoration: none;
    }

    .hashtag-clickable:hover {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/****************************************EDITAR-PERFIL*********************************/
.profile-image-container {
    position: relative;
    width: 150px;
    height: 150px;
    border: 2px dashed var(--gris);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
}

.profile-image-container:hover {
    border-color: var(--gris2);
    background-color: #e9ecef;
}

.bi-plus-circle-dotted,
.bi-image{
    color: var(--negro) !important;
    font-size: 18px;
}

.company-logo-container {
    position: relative;
    width: 120px;
    height: 80px;
    border: 2px dashed var(--gris);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
}

.company-logo-container:hover {
    border-color: var(--gris2);
    background-color: #e9ecef;
}

.image-preview {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    border-radius: inherit;
}

.upload-text {
    text-align: center;
    color: #6c757d;
    font-size: 0.9rem;
}

.hidden-input {
    display: none;
}

.form-section {
    margin-bottom: 2rem;
}

.form-section h5 {
    color: #495057;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.sidebar-images {
    /* background-color: #f8f9fa; */
    /* min-height: 100vh; */
    padding: 2rem 1rem;
}

.image-upload-sidebar {
    margin-bottom: 2rem;
}

.paddingeditarperfilcol-12{
    padding-left: 0px;
    padding-right: 0px;
}

.tituloprincipaleditarperfil{
    font-family: Quicksand, sans-serif;
    font-size: 30px;
    color: var(--negro) !important;
}

.upload-text{
    font-family: Quicksand, sans-serif;
    font-size: 15px;
    color: var(--negro) !important;
}

.titulo1editarperfil{
    font-family: Quicksand, sans-serif;
    font-size: 18px;
    color: var(--negro) !important;
    font-weight: bold;
}

.formcontroleditarperfil{
    font-size: 18px !important;
    font-weight: 400;
}

.titulo2editarperfil{
font-family: Quicksand, sans-serif;
    font-size: 15px;
    color: var(--negro) !important;
}

.titulo2editarperfilpading{
    margin-top: 30px;
}

.form-control{
    background-color: var(--blanco);
    border-radius: 6px;
    border: 2px solid var(--gris)
}

.botonguardarperfil{
    font-family: Quicksand, sans-serif;
    font-size: 18px;
    width: 100%;
    height: 50px;
    background-color: var(--amarillo);
    border: none;
    border-radius: 6px;
    font-weight: bold;
    transition: 0.4s ease-in-out;
}

.cuerpotarjetaeditarperfil{
    padding-left: 0px;
    padding-right: 0px;
}

#sugerencias-ciudad {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid negro;
    border-top: none;
    width: 92%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
#sugerencias-ciudad .list-group-item {
    cursor: pointer;
    background: var(--gris);
    border: 1px solid var(--negro);
    padding: 10px 15px;
}

@media (min-width: 992px) {
    .sidebar-images{
        border: 2px solid var(--gris);
        border-radius: 6px;
        min-height: 100vh;
    }

    .tarjetainformacioneditarperfil{
        border: 2px solid var(--gris) !important;
        border-radius: 6px;
    }

    .titulo1editarperfil{
        font-weight: bold !important;
    }

    .cuerpotarjetaeditarperfil{
        padding: 20px;
    }

    .formcontroleditarperfil{
        border-radius: 6px !important;
        height: 40px;
        font-size: 18px !important;
        padding-left: 10px !important;
    }

    #sugerencias-ciudad {
    width: 93%;
    }

    #sugerencias-ciudad .list-group-item:hover {
    background: var(--amarillo);
    }

    .botonguardarperfil{
        width: 15% !important;
    }

    .botonguardarperfil:hover{
        background-color: var(--amarillo2);
        color: var(--negro);
    }
}

.sectioninteresventas{
    margin-top: 40px;
}

.tituloagregareditariv{
    font-family: Quicksand, sans-serif;
    font-size: 18px;
    color: var(--negro);
    font-weight: bold;
}

.subtituloagregareditariv{
    font-family: Quicksand, sans-serif;
    font-size: 15px;
    color: var(--negro);
}

.lupa,
.bi-shop-window{
    font-size: 17px;
    color: var(--gris2);
}

.segundafilaagregareditariv{
    margin-top: 30px;
}

.btnagregareditariv1{
    background-color: var(--blanco);
    border-radius: 6px;
    border: 2px solid var(--gris);
    color: var(--negro);
    font-size: 15px;
    margin-bottom: 10px;
}

.btnagregareditariv2{
    background-color: var(--blanco);
    border-radius: 6px;
    border: 2px solid var(--gris);
    color: var(--gris2);
    font-size: 15px;
}

.iconomas{
    color: var(--negro) !important;
    font-size: 15px !important;
    background-color: transparent !important;
    border: transparent !important;
}

.iconoeditar{
    color: var(--gris2) !important;
    font-size: 15px !important;
    background-color: transparent !important;
    border: transparent !important;
}

.subtituloseleccionindustrias{
    font-family: Quicksand, sans-serif;
    font-size: 15px;
    color: var(--negro);
    padding-bottom: 15px;
}

@media (min-width: 768px) {
    .botonguardarperfil{
        width: 40%;
    }

    .btnagregareditariv1{
        margin-bottom: 0px;
        /* margin-right: 30px; */
    }
}

@media (min-width: 992px) {
    .paddingeditarperfilcol-12{
        padding-left: 15px;
        padding-right: 15px;
    }

    .btnagregareditariv1{
        background-color: var(--amarillo);
        border: 2px solid var(--amarillo);
        font-weight: bold;
    }

    .btnagregareditariv1:hover{
        background-color: var(--amarillo2);
        border: 2px solid var(--amarillo2);
        font-weight: bold;
    }

    .btnagregareditariv2{
        background-color: transparent;
        font-weight: bold;
    }

    .btnagregareditariv2:hover{
        background-color: transparent;
        border: 2px solid var(--negro);
        color: var(--negro);
        font-weight: bold;
    }

    .bi-shop-window:hover{
        color: var(--negro) !important;
    }

    .paddingtarjetaeditarperfil{
        padding-right: 0px;
    }

    .lupa{
        font-size: 17px;
        color: var(--gris2);
        background-color: transparent !important;
        border: none;
        padding: 0px !important;
    }

    .lupa:hover{
        background-color: transparent !important;
        border: none !important;
        color: var(--gris2) !important;
        
    }

    .roweditarperfilagregariv{
        border: 2px solid var(--gris);
        padding: 40px 10px;
        border-radius: 6px;
        margin-bottom: 20px;
    }
}

/**AGREGAR INTERÉS**/

.intereses-section{
    margin-top: 50px;
    /* padding-left: 15px;
    padding-right: 15px; */
    margin-bottom: 30px;
}

.headersecccionintereses{
    margin-bottom: 30px;
}

.cantidaddeintereses{
    background-color: var(--amarillo);
    color: var(--negro);
    font-family: Quicksand, sans-serif;
    font-size: 15px;
    text-align: center;
    padding: 5px;
    border-radius: 50%;
}

.cantidadweb{
    display: none;
}

.bordertarjetaintereses{
    border: 1px solid var(--gris);
    padding: 10px 10px;
    border-radius: 6px;
}

.paddingtarjetainteres{
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 20px;
}

.titulotarjetainteres{
    color: var(--negro);
    font-family: Quicksand, sans-serif;
    font-size: 20px;
}

.textotarjetainteres{
    color: var(--negro);
    font-family: Quicksand, sans-serif;
    font-size: 15px !important;

    font-family: Quicksand, sans-serif;
    /* Propiedades para truncar en 3 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4; /* Ajusta según necesites */
    /* Hacer que este elemento crezca para empujar hashtags abajo */
    flex-grow: 1;
    margin-bottom: 15px; /* Reducir margin para compensar */
}

.titulotarjetainteresperfil,
.textotarjetainteresperfil{
    text-align: left;
}

.iconoseditarcontainer{
    padding-top: 15px;
    padding-bottom: 10px;

    padding-right: 20px;
}

.iconoeditarinteres{
    background-color: transparent;
    color: #0056b3!important;
    border: 0px !important;
    border-style: none !important;
    font-size: 20px !important;
}

.iconoborrarinteres{
    background-color: transparent;
    color: red!important;
    border: 0px !important;
    border-style: none !important;
    font-size: 20px !important;
    padding-left: 5px;
}

.cerrarmodal{
    background-color: transparent !important;
    border: none !important;
    color: var(--negro) !important;
    font-size: 20px !important;
}

.closemodal{
    background-color: transparent;
    border: none;
}

.btneditarperfil{
    font-family: Quicksand, sans-serif;
    font-size: 18px;
    /* width: 100%; */
    padding: 1px 10px;
    height: 50px;
    background-color: var(--amarillo);
    border: none;
    border-radius: 6px;
    font-weight: bold;
    transition: 0.4s ease-in-out;
}

.btneditarperfil{
    font-family: Quicksand, sans-serif;
    font-size: 18px;
    /* width: 100%; */
    padding: 1px 10px;
    height: 50px;
    background-color: var(--amarillo);
    color: var(--negro);
    border: none;
    border-radius: 6px;
    /* font-weight: bold; */
    transition: 0.4s ease-in-out;
}

.btncerrarmodal{
    font-family: Quicksand, sans-serif;
    font-size: 18px;
    /* width: 100%; */
    padding: 1px 10px;
    height: 50px;
    background-color: var(--negro);
    color: var(--blanco);
    border: none;
    border-radius: 6px;
    /* font-weight: bold; */
    transition: 0.4s ease-in-out;
}

.eliminarregistro{
    font-family: Quicksand, sans-serif;
    font-size: 18px;
    /* width: 100%; */
    padding: 1px 10px;
    height: 50px;
    background-color: rgb(150, 0, 0);
    color: var(--blanco);
    border: none;
    border-radius: 6px;
    /* font-weight: bold; */
    transition: 0.4s ease-in-out;
}

@media (min-width: 992px) {
    .paddingtarjetainteres{
        max-width: 400px;
    }

    .iconoseditarcontainer{
        padding-top: 15px;
        padding-bottom: 10px;
    }

    .cantidadweb{
        display:inline;
    }

    .hashtags-container{
        margin-top: auto !important;
    }

    .cantidaddeintereses{
        background-color: var(--amarillo);
        color: var(--negro);
        font-family: Quicksand, sans-serif;
        font-size: 15px;
        text-align: center;
        padding: 5px;
        border-radius: 10%;
        width: 40%;
        float: right;
    }
}

/*********EDITAR INTERÉS**********/

.containereditarinteres{
    min-height: 100vh;
}

.mensaje-icono-vacio{
    font-size: 30px;
}

.mensaje-titulo-vacio{
    margin-bottom: 30px !important;
    font-size: 25px;
    color: var(--negro);
    font-family: Quicksand, sans-serif;
    font-weight: bold;
}

.mensaje-texto-vacio{
    margin-bottom: 30px !important;
    font-size: 15px;
    color: var(--negro);
    font-family: Quicksand, sans-serif;
}

.mensaje-texto-vacio-perfil-vacio{
    margin-bottom: 30px !important;
    font-size: 20px;
    color: var(--negro);
    font-family: Quicksand, sans-serif;
}

.btncompletar,
.btnprimerinteres{
    font-family: Quicksand, sans-serif;
    font-size: 18px;
    width: 100%; 
    height: 50px;
    background-color: var(--amarillo);
    color: var(--negro);
    border: none;
    border-radius: 6px;
    font-weight: bold;
    padding: 8px 15px;
    transition: 0.4s ease-in-out;
}

.iconoprimerinteres{
    font-size: 20px;
    color: var(--negro);
}

/* === RESPONSIVE PARA BOTONES === */
.empty-state-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* DESKTOP: Botones lado a lado */
@media (min-width: 768px) {
    .empty-state-actions {
        flex-direction: row;
        align-items: center;
    }
    
    .btnprimerinteres {
        flex: 0 1 auto;
    }
}

/* MOBILE: Botones uno arriba del otro */
/* .empty-state-actions {
    flex-direction: column;
    width: 100%;
    gap: 12px;
} */

/* .btncompletar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
} */

/* Remover márgenes laterales en mobile */
.marginderbtnprimerinteres,
.marginizqbtnprimerinteres {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


@media (min-width: 992px) {
    .modal-dialog-ventas{
        max-width: 800px;
    }

    .btncompletar:hover,
    .btnprimerinteres:hover{
        color: var(--negro);
        background-color: var(--amarillo2);
        text-decoration: none;
    }

    .btncompletar {
        width: 15%;
    }

    .marginderbtnprimerinteres{
        margin-right: 10px;
    }

    .marginizqbtnprimerinteres{
        margin-right: 10px;
    }
}

.textoeliminar{
    color: var(--negro);
    font-family: Quicksand, sans-serif;
    font-size: 20px;
}


/* =============================================================================
   CONTROL DE TEXTO LARGO EN TARJETAS - Mobile First
   ============================================================================= */

/* MOBILE (sin media query) */
.interes-card {
    overflow: hidden; /* Evita desbordamiento */
    word-wrap: break-word; /* Rompe palabras largas */
    hyphens: auto; /* Agrega guiones automáticos */
}

/* TÍTULO - Una sola línea con puntos suspensivos */
.titulotarjetainteres {
    white-space: nowrap; /* Mantiene en una línea */
    overflow: hidden; /* Oculta el desbordamiento */
    text-overflow: ellipsis; /* Agrega "..." */
    width: 100%; /* Asegura que use todo el ancho disponible */
    word-break: break-all; /* Rompe palabras muy largas si es necesario */
}

/* DESCRIPCIÓN - Máximo 4 líneas con puntos suspensivos */
.textotarjetainteres {
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Máximo 4 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word; /* Rompe palabras largas */
    word-break: break-word; /* Rompe palabras en cualquier punto */
    hyphens: auto; /* Agrega guiones automáticos */
    line-height: 1.4; /* Altura de línea consistente */
}

/* CONTENEDOR DE HASHTAGS - Flexbox para mejor control */
.hashtags-container {
    display: flex;
    flex-wrap: wrap; /* Permite que los hashtags pasen a la siguiente línea */
    gap: 5px; /* Espacio entre hashtags */
    max-height: calc(2 * 1.5em + 5px); /* Altura máxima para 2 líneas */
    overflow: hidden; /* Oculta hashtags que no caben */
    align-items: flex-start;
    justify-content: flex-start;
}

/* HASHTAGS INDIVIDUALES - Control de longitud */
.hashtags-container span {
    display: inline-block;
    max-width: 100px; /* Ancho máximo para móvil */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    flex-shrink: 0; /* Evita que se compriman demasiado */
    line-height: 1.5;
}

/* TABLET */
@media (min-width: 768px) {
    .hashtags-container span {
        max-width: 120px; /* Más ancho en tablet */
    }
}

/* DESKTOP */
@media (min-width: 768px) {
    .hashtags-container span {
        max-width: 150px; /* Ajustado para desktop con 4 columnas */
    }
    
    /* En desktop, podrías permitir títulos un poco más largos */
    .titulotarjetainteres {
        font-size: 1rem; /* Ajusta si es necesario */
    }
}

/* =============================================================================
   ALTERNATIVA PARA HASHTAGS: Sistema de prioridad
   ============================================================================= */

/* Si prefieres mostrar solo los hashtags que caben completamente */
.hashtags-container-alt {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: calc(2 * 1.5em + 5px); /* 2 líneas máximo */
    overflow: hidden;
}

.hashtags-container-alt span {
    white-space: nowrap;
    flex-shrink: 0;
    /* Sin text-overflow: ellipsis aquí */
}

/* =============================================================================
   CLASE ADICIONAL PARA CASOS EXTREMOS
   ============================================================================= */

/* Para palabras extremadamente largas que podrían romper el diseño */
.texto-seguro {
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/*****AGREGAR-VENTAS******/

.image-upload-container {
    margin: 20px 0;
}

.image-upload-input {
    position: relative;
    border: 2px dashed var(--gris);
    border-radius: 8px;
    padding: 30px 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
    margin-bottom: 15px;
}

.image-upload-input:hover {
    border-color: var(--amarillo);
    background-color: #fbffe5;
}

.image-upload-input input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.bi-cloud-arrow-up-fill{
    font-size: 2.5rem;
    color: var(--gris);
    margin-bottom: 3px;
    display: block;
}

.upload-text {
    color: var(--negro) !important;
    font-weight: 600;
    margin-bottom: 5px;
    font-family: Quicksand, sans-serif;
    font-size: 15px;
}

.upload-subtitle {
    color: var(--negro);
    font-size: 0.9rem;
    font-family: Quicksand, sans-serif;
    font-size: 15px;
}

/* Responsive - Desktop */
@media (min-width: 768px) {
    .image-upload-input {
        margin-bottom: 0;
    }
}

/* Estados activos */
.image-upload-input:active,
.image-upload-input:focus-within {
    border-color: var(--amarillo);
    box-shadow: 0 0 0 0.2rem var(--amarillo);
}

/* Efecto hover opcional */
.imgagregarventas:hover {
    transform: scale(1.05);
}

/* Alternativa si prefieres que se vea completa la imagen sin recortar */
.imgagregarventas-contain {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Muestra la imagen completa, puede dejar espacios */
    object-position: center;
}

/* Hacer el contenedor relativo para posicionar el contador */
.divimgagregarventas {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*contadordeimagenes*/
/* Imagen estandarizada */
.imgagregarventas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

/* Estilo del contador */
.contador-imagenes {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
    backdrop-filter: blur(4px); /* Efecto de desenfoque de fondo */
}

/* Variante con fondo blanco si prefieres */
.contador-imagenes-blanco {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Efecto hover sobre la imagen */
.divimgagregarventas:hover .imgagregarventas {
    transform: scale(1.05);
}

/* .divimgagregarventas:hover .contador-imagenes {
    background-color: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
} */

.ventavacia{
    min-height: 100vh;
}

.contenedor-editar-ventas{
    min-height: 100vh;
}

/* Responsive */
@media (max-width: 576px) {
    .contador-imagenes {
        top: 6px;
        right: 6px;
        font-size: 11px;
        padding: 3px 6px;
        min-width: 20px;
        height: 20px;
    }
}

/*********************OPCIONES**********************/

.sectionoptions{
    padding-top: 30px;
}

/* Estilos personalizados */
.btneditarcontrasena {
    /* border: 2px solid #dee2e6; */
    border-radius: 12px;
    background-color: var(--amarillo);
    color: var(--negro);
    padding: 15px 20px;
    margin-bottom: 15px;
    transition: all 0.3s ease-in-out;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.contenedortextoiconoidioma{
    border-radius: 12px;
    color: var(--negro);
    padding: 15px 20px;
}

.btnelimincuenta{
    border: 1px solid rgb(220 38 38 / var(--tw-text-opacity, 1));
    border-radius: 12px;
    background-color: var(--blanco);
    color: var(--negro);
    padding: 15px 20px;
    margin-bottom: 15px;
    transition: all 0.3s ease-in-out;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.btneddescargardatos{
    border: 1px solid var(--gris2);
    border-radius: 12px;
    background-color: var(--blanco);
    color: var(--negro);
    padding: 15px 20px;
    margin-bottom: 15px;
    transition: all 0.3s ease-in-out;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.bi-lock-fill{
    font-size: 24px;
    color: var(--gris2);
    margin-right: 15px;
    background-color: var(--blanco);
    padding: 5px 12px;
    border-radius: 50%;
}

.bi-trash2-fill{
    font-size: 24px;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
    margin-right: 15px;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
    padding: 5px 12px;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
}

.bi-globe{
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
    font-size: 24px;
    margin-right: 15px;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
    padding: 5px 12px;
    border-radius: 50%;
}

.bi-cloud-arrow-down-fill {
    font-size: 24px;
    color: var(--blanco);
    margin-right: 15px;
    background-color: var(--gris2);
    padding: 5px 12px;
    border-radius: 50%;
}

.btn-icon-right {
    font-size: 18px;
    color: var(--gris2);
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.btn-text-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.btn-text-primary {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 2px;
    color: var(--negro);
}

.btn-text-primary-eliminar{
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 2px;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.btn-text-secondary {
    font-size: 14px;
    color: var(--gris2);
    line-height: 1.2;
}

.btn-custom:hover .btn-text-secondary {/******/
    color: #495057;
}

.section-title {
    color: #212529;
    font-weight: 500;
    margin-bottom: 20px;
    font-size: 24px;
}

.section-subtitle {
    color: #495057;
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 18px;
}

.form-groupidioma{
    padding-left: 15px;
    padding-right: 15px;
}

.help-text {
    font-size: 14px;
    color: var(--gris2);
    margin-top: 8px;
    line-height: 1.4;
    padding-left: 15px;
    padding-right: 15px;
}

.section-container {
    background-color: #ffffff;
    border-radius: 12px;
    /* padding: 25px; */
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border: 1px solid var(--gris2);
}

.titulopreferencias,
.containeropciones{
        padding: 25px;
}

.containeridioma{
    padding-bottom: 25px;
}

.main-container {
    background-color: #f8f9fa;
    min-height: 100vh;
    padding: 40px 0;
}

@media (min-width: 992px) {
    .containeropcionesgenerales{
        max-width: 70% !important;
    }

    .containeropciones{
        border: 1px solid var(--gris2);
        padding: 20px 20px;
        border-radius: 12px;
    }

    .titulopreferencias{
        padding:0px;
        border-radius: 12px;
    }

    .containeridioma{
        border: 1px solid var(--gris2);
        padding: 20px 20px;
    }

    .form-groupidioma{
        width: 40%;
    }

    .btneditarcontrasena:hover{
        background-color: var(--amarillo2);
    }

    .btnelimincuenta:hover{
        background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
    }

    .btnelimincuenta:hover .bi-trash2-fill{
        background-color: var(--blanco);
    }

    .btneddescargardatos:hover{
        background-color: var(--gris2);
    }

    .btneddescargardatos .btn-text-secondary, .bi-cloud-arrow-down-fill, .bi-chevron-right{
        transition: all 0.3s ease-in-out;
    }

    .btneddescargardatos:hover .btn-text-secondary{
        color: var(--negro);
    }

    .btneddescargardatos:hover .bi-cloud-arrow-down-fill{
        color: var(--gris2);
        background-color: var(--blanco);
    }

    .btneddescargardatos:hover .bi-chevron-right{
        color: var(--blanco);
    }
}

/******************************EDITAR-CONTRASEÑA*****************************/

.divinputcontraseña{
    padding-bottom: 30px;
}

.containerinputeditarcontrasena{
    border: 1px solid var(--gris2);
    padding: 20px 20px;
}

.textprimaryinputeditcontra{
    padding-bottom: 5px;
}

.inputeditarcontrasena{
    margin-bottom: 20px;
}

/* ========================================
   PASSWORD INPUT CON TOGGLE
   ======================================== */

.password-input-wrapper {
    position: relative;
    width: 100%;
}

.password-input-wrapper input {
    padding-right: 45px;
}

.toggle-password-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: #6b7280;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-password-btn:hover {
    color: #1f2937;
}

.toggle-password-btn i {
    font-size: 18px;
}

/* ========================================
   MEDIDOR DE FORTALEZA
   ======================================== */

.password-strength-meter {
    margin-top: 12px;
    margin-bottom: 16px;
}

.password-strength-bar {
    width: 100%;
    height: 6px;
    background-color: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.password-strength-fill {
    height: 100%;
    width: 0%;
    transition: all 0.3s ease;
    background-color: #e5e7eb;
    border-radius: 3px;
}

.password-strength-text {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
}

/* ========================================
   REQUISITOS DE CONTRASEÑA
   ======================================== */

.password-requirements {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.requirement {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
    transition: color 0.3s ease;
}

.requirement i {
    font-size: 12px;
    transition: all 0.3s ease;
}

.requirement.valid {
    color: #10b981;
}

.requirement.valid i {
    color: #10b981;
}

.requirement.valid i::before {
    content: "\f26b"; /* bi-check-circle-fill */
}

/* ========================================
   INDICADOR DE COINCIDENCIA
   ======================================== */

.password-match-indicator {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #10b981;
    font-size: 14px;
    font-weight: 500;
}

.password-match-indicator i {
    font-size: 16px;
}

/* ========================================
   BOTÓN DESHABILITADO
   ======================================== */

.botonguardarperfil:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/******************************USUARIO***********************************/
.contenedorusuario{
    min-height: 100vh;
}

.profile-container{
    padding-top: 50px;
}

.mobile-header{
    margin-bottom: 20px;
}

.imagenperfilmobile{
    border-radius:50%;
    height:200px;
    width:200px;
    object-fit:cover;
    margin-bottom: 15px;
}

.imagendefault{
    background-color: var(--gris);
    border: 1px solid var(--gris);
}

.nombreusuario{
    font-family: Quicksand, sans-serif;
    font-size: 25px;
    font-weight: 600;
    color: var(--negro);
}

.cargousuario{
    font-family: Quicksand, sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: var(--negro);
}

.empresausuario{
    font-family: Quicksand, sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--negro);
    /* margin-bottom: 15px; */
}

.contenedorimgperfil{
    height:50px;
    width:100px;
    margin: 1.75rem auto !important; /* Mantiene el centrado horizontal */
    max-width: 1000px !important;
}

.logoempresa{
    height: 100%;
    width: 100%;
    object-fit:contain;
}

.contact-item{
    margin-bottom:13px ;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.contact-item i {
    flex-shrink: 0;
}

.contact-item .textocontacto,
.contact-item a {
    flex: 1;
    word-break: break-word;
}

.iconocontacto{
    font-size: 20px;
    color: var(--gris2);
    padding: 0px;
    background-color: transparent;
    margin: 0px;
    padding-left: 20px;
    padding-right: 15px;
}

.textocontacto{
    font-family: Quicksand, sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--negro);
}

.textodescripcion{
    font-family: Quicksand, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--negro);
    text-align: left;
    padding-left: 20px;
    margin-top: 25px;
}

.nav-tabs{
    border: 0px;
    margin-bottom: 30px;
}

.navtabmobile{
    justify-content: center;
}

/* Contenedor general de las tabs */
.nav-tabs {
    background-color: #f8f9fa;
    border-radius: 8px 8px 0 0;
    /* padding: 8px 8px 0 8px; */
}

/* Estilos base para todos los nav-links */
.nav-tabs .nav-link {
    border: none;
    border-radius: 6px 6px 6px 6px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    margin-right: 4px;
    position: relative;
    background-color: transparent;
    color: var(--gris2);
}

.nav-tabs .nav-link:not(.active):not(.activo) {
    background-color: #e9ecef;
    color: #6c757d;
    border: 1px solid #dee2e6;
    font-family: Quicksand, sans-serif;
}

/* === ESTADO ACTIVO === */
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.activo {
    background-color: var(--amarillo);
    color: var(--negro);
    /* border: 1px solid var(--negro); */
    /* box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.33); */
    transform: translateY(-2px);
    font-family: Quicksand, sans-serif;
}

.navlink1{
    margin-right: 20px;
}

.modalheader{
    padding-bottom: 10px !important;
}

.titulomodal{
    font-family: Quicksand, sans-serif;
    font-size: 25px;
    font-weight: 600;
    color: var(--negro);
}

.modalbody{
    padding-top: 10px !important;
}

.lugarmodal{
    font-family: Quicksand, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--negro);
}

.descripcionmodal{
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: Quicksand, sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--negro);
}

.carouselmodalventas{
    margin-bottom: 20px;
}

.carousel-inner {
    /* height: 100%; */
    display: flex;
    align-items: center; /* Centra verticalmente */
}

.carousel-item {
    justify-content: center !important; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    background-color: var(--blanco); /* Fondo negro para contraste */
}

.imgmodalventas{
    height: 350px;
    width: 100%;
    object-fit: contain;
    border-radius: 12px !important;
}

.redirect-container {
    margin-left: auto;
    margin-bottom: 30px;
}

.redirect-containermobile{
    margin-top: 30px;
}

.botoneditarperfil{
    background-color: var(--amarillo);
    font-family: Quicksand, sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--negro);
    padding: 10px 20px;
    border-radius: 6px;
    transition: 0.3s ease-in-out;
}

.empty-state-actions{
    margin-bottom: 100px;
}

@media (min-width: 992px) {
    .usuarioversionweb{
        border: 1px solid var(--gris2);
        border-radius: 12px;
        padding: 30px 10px;
    }

    .imagenperfilweb{
        border-radius:50%;
        height:250px;
        width:250px;
        object-fit:cover;
        margin-bottom: 50px;
    }

    .contenedorimgperfil{
        height:100px;
        width:100px;
    }

    .logoempresaweb{
        height:170px;
        width:170px;
        object-fit:contain;
    }

    .nombreusuarioweb{
        font-family: Quicksand, sans-serif;
        font-size: 30px;
        font-weight: 600;
        color: var(--negro);
    }

    .cargousuarioweb{
        font-family: Quicksand, sans-serif;
        font-size: 25px;
        font-weight: 500;
        color: var(--gris2);
    }

    .empresausuarioweb{
        font-family: Quicksand, sans-serif;
        font-size: 20px;
        font-weight: 500;
        color: var(--gris2);
    }

    .seccioninformacionweb{
        margin-bottom: 30px;
    }
    
    .seccioncontactoweb{
        margin-bottom: 30px;
    }

    .iconocontactoweb{
        font-size: 20px;
        color: var(--gris2);
        padding: 0px;
        background-color: transparent;
        margin: 0px;
        padding-right: 15px;
        transition: 0.3s ease-in-out;
    }

    .textocontactoweb{
        font-family: Quicksand, sans-serif;
        font-size: 20px;
        font-weight: 500;
        color: var(--negro);
    }

    .textodescripcionweb{
        font-family: Quicksand, sans-serif;
        font-size: 20px;
        font-weight: 500;
        color: var(--negro);
    }

    .navtabmobile{
        justify-content: left;
    }   

    .nav-tabs .nav-link:not(.active):not(.activo):hover {
        background-color: var(--gris2);
        color: var(--blanco);
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        font-family: Quicksand, sans-serif;
    }

    .nav-tabs .nav-link.active:hover,
    .nav-tabs .nav-link.activo:hover {
        background-color: var(--amarillo2);
        /* border-color: #0056b3; */
        color: var(--negro);
    }

    .navtabsweb{
        margin-left: 450px;
    }

    .modal-dialog-centered {
        margin: 1.75rem auto !important; /* Mantiene el centrado horizontal */
        max-width: 1000px !important;
    }

    .titulomodal{
        font-size: 25px;
    }

    .lugarmodal{
        font-size: 20px;
    }

    .descripcionmodal{
        font-size: 20px;
    }

    .imgmodalventas{
        height: 550px;
        width: 100%;
        object-fit: contain;
    }

    .tabs-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .botoneditarperfil:hover{
        background-color: var(--amarillo2);
        text-decoration: none;
        color: var(--negro);
    }
    
    .nav-tabs {
        /* margin-bottom: 0; */
        flex-grow: 0;
    }
    
    .redirect-container {
        margin-left: auto;
    }

    a.textocontactoweb:hover{
        color: var(--gris2);
        text-decoration: none;
    }
    
    .btneditarperfilweb{
        float: right;
    }

    .empty-state-edit-button{
        margin-top: 30px;
        margin-bottom: 100px;
    }

    .empty-state-actions{
        margin-bottom: 0px;
    }

}

/*********************************************ERROR*************************************/

.contenedor-error{
    min-height: 100vh;
}

.imgerror{
    margin-top: 100px;
    height: 400px;
    margin-bottom: 100px;
}

.imgerror500{
    margin-top: 100px;
    height: 230px;
    margin-bottom: 100px;
}

.errorh1{
    font-size: 3rem;
    line-height: 3rem;
    font-weight: 500;
    color: var(--texto-primario);
    font-family: "Noto Sans", sans-serif;
}

.errorh2{
    margin-top: 50px;
    /* margin-bottom: 50px; */
    font-size: 2rem;
    line-height: 3rem;
    font-weight: 500;
    color: var(--texto-primario);
    font-family: "Noto Sans", sans-serif;
}

.back{
    margin-top: 30px;
    background-color: var(--amarillo);
    color: var(--texto-primario);
    font-family: "Noto Sans", sans-serif;
    padding: 10px 15px;
    border-radius: 15px;
    font-size: 20px;
    cursor: pointer;
}

@media (min-width: 768px) {
    .img404,
    .imgerror500{
        margin-top: 50px;
        height: 600px;
        margin-bottom: 50px;
    }

    .back:hover{
        text-decoration: none;
        color: var(--texto-primario);
        background-color: var(--amarillo2);
        transition: 0.3s ease-in-out;
    }
}

/*********************************DESCARGAR-DATOS*********************************/

.Titulo-datos{
    font-family: Quicksand, sans-serif;
    font-size: 30px;
    color: var(--negro) !important;
}

.cuerpotarjetadescarga{
    padding: 0px !important;
}

.textodescargardatos{
    font-family: Quicksand, sans-serif;
    font-size: 18px;
    color: var(--negro) !important;
}

.alerta-descarga{
    color: #856404;
    background-color: var(--amarillo);
    border-color: var(--amarillo);
    font-family: Quicksand, sans-serif;
}

.btnconfirmardescarga{
    font-family: Quicksand, sans-serif;
    font-size: 18px;
    color: var(--negro) !important;
    width: 100%;
    background-color: var(--amarillo);
    border: none;
    padding: 10px;
    border-radius: 10px;
    font-weight: bold;
    transition: 0.3s ease-in-out;
}

@media (min-width: 768px) {
    .btnconfirmardescarga:hover{
        background-color: var(--amarillo2);
    }
}

/************************************************MODAL REPORTAR CUENTA************************************/

.dropdownreporte{
    font-family: Quicksand, sans-serif;
    font-size: 18px;
    color: var(--negro) !important;
}

.flagdropdownreporte{
    color: red;
    font-size: 18px;
}

.flagdropdownreportep{
    color: var(--gris2);
    font-size: 15px;
}

.tituloreportep{
    color: var(--gris2);
    font-family: "Noto Sans", sans-serif;
    font-size: 15px;
    text-decoration: none;
}

.headerreporte{
    background-color: var(--amarillo);
}

.tituloreporte{
    background-color: var(--amarillo);
    color: var(--negro);
    font-family: "Noto Sans", sans-serif;
    font-size: 20px
}

.usuarioreporte{
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--gris) !important;
    border-radius: .25rem;
}

.usuarioreporte strong{
    color: var(--negro);
    font-family: "Noto Sans", sans-serif;
    font-size: 15px
}

.usuarioreporte span{
    color: var(--gris2);
    font-family: "Noto Sans", sans-serif;
    font-size: 15px
}

.textopequeñoreporte{
    color: var(--gris2);
    font-family: "Noto Sans", sans-serif;
    font-size: 12px
}

.titulodelreporte{
    color: var(--negro);
    font-family: "Noto Sans", sans-serif;
    font-size: 18px
}

/* Borde sin seleccionar: gris claro */
#modalReportarCuenta .custom-control-input:not(:checked) ~ .custom-control-label::before {
    border-color: var(--gris);
}

/* Seleccionado: amarillo */
#modalReportarCuenta .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--amarillo2);
    border: none;
}

/* Hover: amarillo más oscuro */
#modalReportarCuenta .custom-control-label:hover::before {
    border-color: #e0a800;
}

/* Quitar el círculo amarillo al hacer clic */
#modalReportarCuenta .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none !important;
}

/* Quitar outline también del input */
#modalReportarCuenta .custom-control-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Borde sin seleccionar: gris claro */
#modalReportarPublicacion .custom-control-input:not(:checked) ~ .custom-control-label::before {
    border-color: var(--gris);
}

/* Seleccionado: amarillo */
#modalReportarPublicacion .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--amarillo2);
    border: none;
}

/* Hover: amarillo más oscuro */
#modalReportarPublicacion .custom-control-label:hover::before {
    border-color: #e0a800;
}

/* Quitar el círculo amarillo al hacer clic */
#modalReportarPublicacion .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none !important;
}

/* Quitar outline también del input */
#modalReportarPublicacion .custom-control-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

.custom-control-label,
.cuentanosreporte{
    color: var(--negro);
    font-family: "Noto Sans", sans-serif;
    font-size: 15px;
}

.alert-info{
    font-family: "Noto Sans", sans-serif;
}

.btn-secondary{
    background-color: var(--gris);
    color: var(--negro);
    border: 1px solid var(--gris);
    font-family: "Noto Sans", sans-serif;
    font-size: 1rem;
    transition: 0.3s ease-in-out;
}

.btn-secondary:hover{
    background-color: var(--gris2);
    border: 1px solid var(--gris2);
    color: var(--negro);
}

.btnenviarreporte{
    background-color: var(--amarillo);
    color: var(--negro);
    font-family: "Noto Sans", sans-serif;
    font-size: 1rem;
    transition: 0.3s ease-in-out;
    border: 1px solid var(--amarillo);
}

.btnenviarreporte:hover{
    background-color: var(--amarillo2);
    border: 1px solid var(--amarillo2);
    color: var(--negro);
}

.btnenviarreporte:focus{
    background-color: var(--amarillo2);
}

@media (min-width: 768px) {
    .bi-three-dots-vertical{
        font-size: 25px;
        color: var(--gris2);
        transition: 0.3s ease-in-out;
    }

    .bi-three-dots-vertical:hover{
        color: var(--negro);
    }

    .tituloreportep:hover{
        color: var(--negro);
    }
}