@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap');


@media (min-width: 768px) {
.w-md-50{ max-width: 50% !important;}
.w-md-80{ max-width: 80% !important;}
}

@media (min-width: 1199px) {
.w-lg-50{ max-width: 50% !important;}
.w-lg-80{ max-width: 80% !important;}
}

/*SWAL*/
    .swal2-modal{
    border-radius: 10px;
    }
    .swal2-container{
    z-index: 10000
    }
    .swal2-container ul{
    text-align: left;
    }
    .swal2-container ul li{
    margin-bottom: 10px;
    }
    .swal2-confirm{
    color: #FFFFFF !important;
    background-color: #7234FF !important;
    border-radius: 8px !important;
    }
    .swal2-confirm:hover{
    background-color: #7234ffe6 !important;
    }
    .swal2-cancel{
    transition: all 0.2s ease-in-out;
    background-color: #fff;
    color: #161616;
    border: 1px solid #e9e2eb !important;
    border-radius: 8px;
    }
    .swal2-cancel:hover{
    background-color: #ff56d3 !important;
    border-color: #ff56d3 !important;
    color: #fff !important;
    }
    .custom-swal .swal2-actions{
    width: 100% !important;
    justify-content: end;
    margin-top: 2rem;
    }
    .custom-swal{
    padding: 1.5rem!important;
    }
    .swal2-html-container{
    padding: 0px!important;
    text-align:left !important;
    color: #5a597e;
    font-size: 15px;
    }
    .custom-swal .swal2-title{
    padding: 0px!important;
    text-align:left !important;
    margin-bottom: 0.5rem;
    font-weight: bold;
    font-size: 18px;
    }

/*DROPZONE*/
    .dropzone .dz-preview:not(.dz-processing) .dz-progress{
    margin-top: 40px;
    height: 5px;
    }
    .dz-remove,
    .btn-remove{
    color: #ffffff !important;
    border: 1px solid #d4183d !important;
    background-color: #d4183d;
    width: fit-content;
    padding: 2px 5px;
    border-radius: 8px;
    position: absolute;
    top: 5px;
    z-index:1000;
    right: 5px;
    cursor:pointer !important;
    }
    .btn-remove{
    z-index:10 !important;
    }
    .dz-remove:hover,
    .dz-remove svg:hover,
    .btn-remove:hover{
    background-color: #d4183de6 !important;
    }
    .dz-error .dz-error-mark{
    background-color: #d4183de6 !important;
    border-radius: 100%;
    margin-top:15px !important;
    scale: 0.5;
    }
    .dz-size{
    margin-top:20px;
    }
    .dz-filename{
    margin-top:-15px;
    }
    .dz-size, .dz-filename {
    font-weight:bold;
    color: #FFFFFF;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra sutil para que resalte */
    }
    .dz-filename span:hover{
    text-shadow:none;
    color: #000000;
    border:0 !important;
    }
    .dz-image{
    border-radius: 8px !important;
    }
    .fs-20 .feather {
    width: 20px;
    height: 20px;
    }

/*GENERAL*/
    body {
    font-family: 'Arimo', sans-serif !important;
    color: #161616;
    }
    hr{
    border: 1px solid #e9e2eb !important;
    opacity: 0.7 !important;
    }

    .pointer{
    cursor: pointer !important;
    }
    .rounded-8 {
    border-radius: 8px !important;
    }
    .p-12{
    padding: 12px !important;
    }
    .iframe_custom{
    width:100% !important;
    height:500px !important;
    border:2px dashed #e9e2eb !important;
    border-radius: 8px !important;
    }
    
    /* CARDS */
    .card{
    border-radius: 14px !important;
    box-shadow: none !important;
    border: 1px solid #e9e2eb !important;
    }
    .custom-card{
    border-radius: 14px !important;
    box-shadow: none !important;
    border: 1px solid #e9e2eb !important;
    }
    
    /* ALERTS */
    .alert-soft-success{
    background-color: #f0fdf4 !important;
    border-color: #b9f8cf !important;
    }
    .alert-soft-purple{
    background-color: #faf5ff !important;
    border-color: #7234ff33 !important;
    }
    /* TOAST */
    .listoco .toast-custom {
        background-color: #14121f;
        color: #ffffff;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
        padding: 12px 16px;
        min-width: 320px;
        max-width: 420px;
    }

    .listoco .toast-custom-icon {
        font-size: 20px;
        color: #ffb020; /* tono de alerta/aviso */
    }

    .listoco #toastSistemaTitulo {
        font-size: 14px;
    }

    .listoco #toastSistemaTexto {
        font-size: 13px;
        opacity: 0.9;
    }


    /* TEXTS */
    .text-dark{
    color: #161616 !important;
    }
    .text-gray{
    color: #525252 !important;
    }
    .text-soft-secondary{
    color: #e5e7eb !important;
    }
    .text-purple{
    color: #7234FF !important;
    }
    .text-dark-purple{
    color: #59168b !important;
    }
    .text-soft-purple{
    color: #dab2ff !important;
    }
    .text-muted-purple{
    color: #5a597e !important;
    }
    .text-danger{
    color: #e7000b !important;
    }
    .text-dark-danger{
    color: #82181a !important;
    }
    .text-success{
    color: #00c951 !important;
    }
    .text-dark-success{
    color: #0d542b !important;
    }
    .text-warning{
    color: #fdc700 !important;
    }
    .text-soft-warning{
    color: #d08700 !important;
    }
    .text-dark-warning{
    color: #733e0a !important;
    }
    .text-primary{
    color: #155dfc !important;
    }
    .text-dark-primary{
    color: #1c398e !important;
    }
    .text-blue{
    color: #4f39f6 !important;
    }
    .text-dark-blue{
    color: #312c85 !important;
    }
    .text-orange {
    color: #ff6b00 !important;
    }
    .text-dark-orange{
    color: #7e2a0c !important;
    }

    /* BORDERS */
    .border-soft-purple{
    border: 1px solid #7234ff33 !important;
    }
    .border-muted-purple{
    border: 2px solid #dab2ff !important;
    }
    .border-danger{
    border-color: #ff6467 !important;
    }
    .border-soft-success{
    border-color: #b9f8cf !important;
    }
    .border-soft-primary{
    border-color: #bedbff !important;
    }
    .border-soft-orange{
    border-color: #ffd7a8 !important;
    }
    .border-soft-purple{
    border-color: #e9d4ff !important;
    }
    .border-soft-blue{
    border-color: #c6d2ff !important;
    }
    .border-warning{
    border-color: #fdc700 !important;
    }
    .border-soft-warning{
    border-color: #fff085 !important;
    }
    .border-orange{
    border-color: #ff6900 !important;
    }
    
    /* BACKGROUNDS */
    .bg-soft-secondary{
    background-color: #fefbff !important;
    }
    .bg-pink{
    background-color: #ff56d3 !important;
    }
    .bg-purple{
    background-color: #7234FF !important;
    }
    .bg-muted-purple{
    background-color: #fbf1fe !important;
    }
    .bg-ligth-purple{
    background-color: #f6eeff !important;
    }
    .bg-soft-purple{
    background-color: #f3e8ff !important;
    }
    .bg-ligth-blue{
    background-color: #e6ecff !important;
    }
    .bg-success{
    background-color: #22c55e !important;
    }
    .bg-soft-success{
    background-color: #dbfce7 !important;
    }
    .bg-ligth-success{
    background-color: #f0fdf4 !important;
    }
    .bg-primary{
    background-color: #155dfc !important;
    }
    .bg-soft-primary{
    background-color: #dbeafe !important;
    }
    .bg-ligth-primary{
    background-color: #eff6ff !important;
    }
    .bg-warning{
    background-color: #f0b100 !important;
    }
    .bg-soft-warning{
    background-color: #fef9c2 !important;
    }
    .bg-ligth-warning{
    background-color: #fefce8 !important;
    }
    .bg-danger{
    background-color: #ef4444 !important;
    }
    .bg-soft-danger{
    background-color: #ffe2e2 !important;
    }
    .bg-ligth-danger{
    background-color: #fef2f2 !important;
    }
    .bg-orange{
    background-color: #ff6900 !important;
    }
    .bg-ligth-orange{
    background-color: #fff7ed !important;
    }
    .bg-soft-orange{
    background-color: #ffedd4 !important;
    }

    /* BUTTONS */
    .btn{
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    }
    .btn.d-md-none {
    display: none !important;
    }
    .btn-purple{
    color: #FFFFFF !important;
    background-color: #7234FF !important;
    border-radius: 8px !important;
    }
    .btn-danger{
    color: #FFFFFF !important;
    background-color: #e7000b !important;
    border-radius: 8px !important;
    }
    .btn-warning{
    background-color: #fdc700 !important;
    }
    .btn-warning:hover{
    border: none !important;
    }
    .btn-purple:hover{
    background-color: #7234ffe6 !important;
    }

    .listoco .btn-emergency {
        background-color: #ffffff !important;
        color: #d4183d !important;
        border: 1px solid #d4183d !important;
        border-radius: 8px !important;
        padding: 10px 16px !important;
        font-weight: 500 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        transition: all 0.2s ease-in-out !important;
    }
    /* botones de contacto */
    .listoco .contact-btn,
    .listoco .whatsapp-btn {
        width: 160px !important;
        height: 68px !important;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        border-radius: 12px;
        padding: 12px 10px;

        font-size: 14px;
        font-weight: 500;

        background: #ffffff;
        border: 1px solid #e6e6f0;
        color: #5a597e;

        text-decoration: none;
        transition: background .15s ease, color .15s ease, border-color .15s ease;
    }
    .listoco .btn-marcar-evaluar {
    background: #00a63e;
    color: #ffffff;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    font-weight: 500;               
    border-radius: 12px;
    transition: all 0.2s ease-in-out;
    width: 100%;
    }

    /* BUTTONS HOVER*/

    .btn-hover-pink,
    .btn-icon-hover-pink{
    transition: all 0.2s ease-in-out;
    background-color: #fff;
    color: #161616;
    border: 1px solid #e9e2eb !important;
    border-radius: 8px;
    }
    .btn-icon-hover-pink {
    border: none !important;
    }
    .btn-icon-hover-pink.border {
    border: 1px solid #e9e2eb !important;
    }
    .btn-hover-pink:hover,
    .btn-icon-hover-pink:hover,
    .btn-hover-pink.active {
    background-color: #ff56d3 !important;
    border-color: #ff56d3 !important;
    color: #fff !important;
    }
    .btn-hover-pink:hover i,
    .btn-hover-pink:hover svg,
    .btn-icon-hover-pink:hover i,
    .btn-icon-hover-pink:hover svg {
    color: #fff !important;
    } 
    .btn-icon-hover-pink.red i,
    .btn-icon-hover-pink.red svg {
    color: #d4183d !important;
    } 
    .btn-icon-red{
    transition: all 0.2s ease-in-out;
    background-color: #d4183d !important;
    color: #ffffff;
    border: 1px solid #d4183d !important;
    border-radius: 8px;
    }
    .btn-icon-red:hover{
    background-color: #d4183de6 !important;
    color: #ffffff !important;
    }
    .listoco .btn-emergency svg,
    .listoco .btn-emergency i {
        color: #d4183d !important;
        transition: color 0.2s ease-in-out;
    }

    .listoco .btn-emergency:hover {
        background-color: #d4183d !important;
        color: #ffffff !important;
        border-color: #d4183d !important;
    }

    .listoco .btn-emergency:hover svg,
    .listoco .btn-emergency:hover i {
        color: #ffffff !important;
    }
    .listoco .contact-btn:hover {
        background: #f4e9ff;
        border-color: #d5b5ff;
        color: #7234ff;
    }
    .listoco .whatsapp-btn:hover {
        background: #e6fff1;
        border-color: #22c55e; 
        color: #22c55e;
    }
    .listoco .btn-marcar-evaluar:hover {
        background: #008236;
        border-color:#008236;
        color: #ffffff;
    }
    
    /* FONT SIZE */

    .fs-24 {
    font-size: 24px !important;
    }
    .fs-18 {
    font-size: 18px !important;
    }
    .fs-16 {
    font-size: 16px !important;
    }
    .fs-14 {
    font-size: 14px !important;
    }
    .fs-12 {
    font-size: 12px !important;
    }
    .fs-36{
    font-size: 36px !important;
    }

    /* FONT SIZE ICON */
    .fs-16 svg{
    height: 16px !important;
    width: auto !important;
    font-size: 14px !important;
    }
    .fs-icon-12 i,
    .fs-icon-12 svg{
    height: 12px !important;
    width: auto !important;
    font-size: 12px !important;
    }
    .fs-icon-14 i,
    .fs-icon-14 svg{
    height: 14px !important;
    width: auto !important;
    font-size: 14px !important;
    }
    .fs-icon-16 i,
    .fs-icon-16 svg{
    height: 16px !important;
    width: auto !important;
    font-size: 16px !important;
    }
    .fs-icon-18 i,
    .fs-icon-18 svg{
    height: 18px !important;
    width: auto !important;
    font-size: 18px !important;
    }
    .fs-icon-20 i,
    .fs-icon-20 svg{
    height: 20px !important;
    width: auto !important;
    font-size: 20px !important;
    }
    .fs-icon-30 i,
    .fs-icon-30 svg,
    i.fs-icon-30,
    svg.fs-icon-30{
    height: 40px !important;
    width: auto !important;
    font-size: 40px !important;
    }
    .fs-icon-40 i,
    .fs-icon-40 svg,
    i.fs-icon-40,
    svg.fs-icon-40{
    height: 40px !important;
    width: auto !important;
    font-size: 40px !important;
    }

    /* BADGE PILLS */
    .badge-pill{
    padding: 2px 8px;
    border-radius: 8px !important;

    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1;
    gap: 6px;
    }

    .badge-pill i{
    flex: 0 0 auto;
    }

    .badge-pill.amarillo.solid{
    color: #ffffff !important;
    border: 1px solid #f0b100 !important;
    background-color: #f0b100 !important;
    }
    .badge-pill.rojo{
    color: #bb4d00 !important;
    border: 1px solid #ffd230 !important;
    background-color: #fffbeb !important;
    }
    .badge-pill.morado{
    color: #8200db !important;
    border: 1px solid #dab2ff !important;
    background-color: #faf5ff !important;
    }
    .badge-pill.morado.solid{
    color: #ffffff !important;
    border: 1px solid #8200db !important;
    background-color: #8200db !important;
    }
    .badge-pill.gris{
    color: #364153 !important;
    border: 1px solid #d1d5dc !important;
    background-color: #fbf9fa !important;
    }
    .badge-pill.azul{
    color: #1447e6 !important;
    border: 1px solid #8ec5ff !important;
    background-color: #eff6ff !important;
    }
    .badge-pill.verde{
    color: #008236 !important;
    border: 1px solid #7bf1a8 !important;
    background-color: #f0fdf4 !important;
    }
    .badge-pill.verde.solid{
    color: #fff !important;
    border: 1px solid #008236 !important;
    background-color: #008236 !important;
    }
    .badge-pill.rojo.solid{
    color: #fff !important;
    background-color: #d4183d !important;
    border-color: #d4183d !important;
    }
    .badge-pill.naranjo.solid{
    color: #fff !important;
    background-color: #ff6900 !important;
    border-color: #ff6900 !important;
    }
        
    /* BADGE BUTTONS */
    .badge-btn{
    padding: 5px 10px;
    border-radius: 8px !important;
    font-weight:bold;
    cursor:initial !important;
    }
    .badge-btn.morado{
    color: #FFFFFF !important;
    background-color: #7234FF !important;
    }
    .badge-btn.rojo{
    color: #bb4d00 !important;
    background-color: #fffbeb !important;
    }
    .badge-btn.azul{
    color: #1447e6 !important;
    background-color: #eff6ff !important;
    }
    .badge-btn.gris{
    color: #364153 !important;
    background-color: #fbf9fa !important;
    }
    .badge-btn.white{
    border: 1px solid #e9e2eb !important;
    }

    /* BADGE TAG */
    .badge-tag{
    gap:6px !important;
    cursor: pointer !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #d324f5; 
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    white-space: nowrap;
    }
    .badge-tag.pink{
    background-color: #ff56d3 !important;
    border-color: #ff56d3 !important;
    color: #fff !important;
    }
    .badge-tag i{
    align-items: center;
    display: flex;
    }

    /* INPUTS */
    .input-custom,
    textarea.input-custom {
    background-color: oklch(0.98 0.008 310);
    border: none;
    box-shadow: none;
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    transition: border 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    outline: none;
    }
    .input-custom:focus,
    textarea.input-custom:focus {
    border: 2px solid #7234ff80; /* color violeta con transparencia */
    box-shadow: 0 0 0 3px rgba(114, 52, 255, 0.15); /* leve brillo */
    }
    .input-custom::placeholder,
    textarea.input-custom::placeholder {
    color: #b3a9b5;
    }
    .input-custom.text-muted-purple::placeholder{
    color: #5a597e !important;
    }
    .input-custom i,
    .input-custom svg{
    height: 16px !important;
    width: auto !important;
    font-size: 16px !important;
    }
    .input-custom[disabled]{
    background-color: oklch(0.98 0.008 310);
    color: #b3a9b5 !important;
    }

    /* SELECTS */
    .select-custom {
    background-color: oklch(0.98 0.008 310);
    border: none;
    box-shadow: none;
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    padding-right: 2.5rem; /* espacio para la flecha */
    font-size: 0.9rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    outline: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg fill='rgba(114, 52, 255, 0.9)' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    }
    .select-custom:hover {
    background-color: oklch(0.97 0.008 310);
    }
    .select-custom:focus {
    border: 2px solid #7234ff80;
    box-shadow: 0 0 0 3px rgba(114, 52, 255, 0.15);
    }
    .select-custom option[disabled] {
    color: #b3a9b5;
    }
    select:focus option[disabled] { 
    display: none; 
    }

    /* CHECKS */
    .form-check-input.input-custom{
    display: inline-block !important;
    position: relative !important;
    height: 20px !important;
    width: 20px !important;
    padding: 10px 10px !important;
    margin: 0px 4px 0px 0px  !important;
    }
    .form-check{
    margin:0px;
    padding-left: 8px !important;
    display:flex !important;
    align-items: center !important;
    }
    .form-check.align-items-start{
    align-items: start !important;
    }

    /* TABLE */
    .table-custom{
    border: 1px solid #e9e2eb !important;
    border-radius: 8px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
    }
    .table-custom thead tr th{
    font-weight: 700 !important;
    }
    .table-custom tbody tr td{
    vertical-align: middle !important;
    }

    /* NAV TABS */
    .listoco .custom-nav{
    background-color: #fbf1fe !important;
    padding: 5px !important;
    border-radius: 8px !important;
    }
    .listoco .custom-nav .nav-link{
    background-color: #fbf1fe !important;
    padding: 12px 5px !important;
    border-radius: 8px !important;
    color: #161616 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    }
    .listoco .custom-nav .nav-item{
    padding: 3px !important;
    }
    .listoco .custom-nav .nav-link.active{
    background-color: #FFFFFF !important;
    color: #161616 !important;
    box-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    }

    /* NAV TABS 2*/
    .listoco .custom-nav-2 {
    background-color: #fbf7ff;
    border-radius: 2rem;
    padding: 6px;
    display: inline-flex;
    gap: 4px;
    border: none;
    }
    .listoco .custom-nav-2 .nav-link {
    border: none;
    background: transparent;
    color: #1a1a1a;
    font-weight: 500;
    font-size: 14px;
    border-radius: 1.5rem;
    padding: 6px 16px;
    transition: all 0.2s ease;
    white-space: nowrap;
    }
    .listoco .custom-nav-2 .nav-link:hover {
    background-color: rgba(149, 74, 255, 0.1);
    color: #5b3ba8;
    }
    .listoco .custom-nav-2 .nav-link.active {
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(149, 74, 255, 0.15);
    color: #000;
    font-weight: 600;
    }

        
/*TOPBAR*/

    .listoco #page-topbar{
    height: 64px !important;
    background-color: #FFFFFF !important;
    border: 1px solid #E9E1EB !important;
    box-shadow: none !important;
    }
    .listoco #page-topbar .navbar-header{
    width: 100% !important;
    }
    .listoco #page-topbar .navbar-brand-box{
    background-color: #FFFFFF !important;
    border: 0px !important;
    height: fit-content !important;
    }
    .listoco #page-topbar .logo{
    line-height: initial !important;
    margin: 0px !important;
    }
    .listoco #page-topbar .logo-txt{
    color: #7234FF !important;
    font-size: 24px !important;
    }
    .listoco #page-topbar .header-item{
    color: #161616 !important;
    }
    .listoco #page-topbar .panel-usuario > button{
    border: 1px solid #E9E1EB !important;
    padding: auto!important;
    border-radius: 8px !important;
    height: 38px !important;
    transition: color .15s 
                ease-in-out, background-color .15s 
                ease-in-out, border-color .15s 
                ease-in-out, box-shadow .15s 
                ease-in-out, -webkit-box-shadow .15s 
                ease-in-out;
    }
    .listoco #page-topbar .panel-usuario > button:hover{
    border: 1px solid #ff56d3 !important;
    color: #FFFFFF !important;
    background-color: #ff56d3 !important;
    }
    .listoco #page-topbar .panel-usuario .dropdown-menu{
    min-width: 180px !important;
    }
    .listoco #page-topbar .panel-notificacion > button{
    border: 1px solid #FFFFFF !important;
    padding: auto!important;
    border-radius: 8px !important;
    height: 38px !important;
    }
    .listoco #page-topbar .panel-notificacion > button:hover{
    border: 1px solid #ff56d3 !important;
    color: #FFFFFF !important;
    background-color: #ff56d3 !important;
    }
    .listoco #page-topbar .right-elemenets{
    gap: 16px !important;
    }
    .listoco #page-topbar .boton-solicitar-servicio a{
    color: #FFFFFF !important;
    background-color: #7234FF !important;
    border-radius: 8px !important;
    font-weight:bold !important;
    }
    .listoco #page-topbar .boton-solicitar-servicio a:hover{
    background-color: #7234ffe6 !important;
    }
    .listoco #page-topbar .boton-ofrecer-servicio a{
    padding: auto!important;
    border-radius: 8px !important;
    height: 38px !important;
    }
    .listoco #page-topbar .boton-ofrecer-servicio a:hover{
    color: #FFFFFF !important;
    background-color: #ff56d3 !important;
    }
    .listoco #page-topbar .dropdown-menu{
    border-radius:8px !important;
    margin-top: 5px !important;
    }
    .listoco .dropdown-item:hover,
    .listoco .dropdown-item:active,
    .listoco .dropdown-item:focus{
    background-color: #ff56d3 !important;
    border-radius:8px !important;
    color: #FFFFFF !important;
    }

/*SIDEBAR*/
    body[data-sidebar-size=sm] .vertical-menu #sidebar-menu>ul>li>a span{
    display: inline-block;
    }
    #col-sidebar{
    z-index: -100;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0 !important;
    width: 100% !important;
    height: 100vh;
    }
    #col-sidebar.show{
    z-index: 100;
    }
    .vertical-menu{
    max-width: 260px;
    width: 100% !important;
    height: calc(100% + 10px);
    }

    @media (min-width: 1199px) {
    #col-sidebar{
    z-index: 100;
    max-width: 260px;
    position: relative;
    background-color: #FEFBFF;
    height: auto;
    border-right: 1px solid #E9E1EB !important;
    }
    #vertical-menu-btn{
    display: none!important;
    }
    .fade-lg{
    opacity: 1 !important;
    }
    #menu-vertical-izq{
    position: sticky;
    top: 70px;
    align-self: flex-start;
    max-height: calc(100vh - 70px);
    }
    }
    #menu-vertical-izq{
    margin-top: -10px !important;
    padding: 24px !important;
    background-color: #FEFBFF !important;
    box-shadow: none !important;
    min-height: 100vh !important;
    position: initial !important;
    width: 100% !important;
    overflow-y: auto;
    }
    .listoco #menu-vertical-izq ul li a {
    padding: .675rem 0rem !important;
    }
    .listoco #menu-vertical-izq ul li a{
    border-radius:8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    }
    .listoco #menu-vertical-izq ul li a.active,
    .listoco #menu-vertical-izq ul li a:hover,
    .listoco #menu-vertical-izq ul li a:active,
    .listoco #menu-vertical-izq ul li a:focus{
    background-color: #7234FF !important;
    color: #FFFFFF !important;
    }
    .listoco #menu-vertical-izq ul li a.active svg,
    .listoco #menu-vertical-izq ul li a:hover svg,
    .listoco #menu-vertical-izq ul li a:active svg,
    .listoco #menu-vertical-izq ul li a:focus svg{
    color: #FFFFFF !important;
    }

/*FOOTER*/
    .listoco #footer-page{
    position:initial !important;
    display:block !important;
    width:100% !important;
    left: 0 !important;
    top: initial !important;
    font-size: 16px !important;
    background-color: #FBF1FE !important;
    height:auto !important;
    border: 1px solid #E9E1EB !important;
    }
    .listoco #footer-page > .row{
    gap: 8px;
    }
    .listoco #footer-page ul.text-muted-purple{
    padding-left:0px;
    }
    .listoco #footer-page ul.text-muted-purple li{
    list-style: none;
    margin-bottom: 10px
    }
    .listoco #footer-page ul.text-muted-purple li a{
    color: #5a597e  !important;
    }
    .listoco #footer-page ul.text-muted-purple li a:hover{
    color: #161616 !important;
    }

/*PAGE CONTENT*/
    .listoco .page-content{
    background-color: #FFFFFF !important;
    margin-left: 2px;
    }
    #habilita_boton{
    display: inline-block !important;
    position: relative !important;
    height: 20px !important;
    width: 20px !important;
    padding: 10px 10px;
    }
    .circle-35{
    max-width: 35px !important;
    max-height: 35px !important;
    width: 100%;
    height: 100%;
    }

/*PAGE PROFESIONALES*/

    #editar_foto_perfil{
    height: 184px !important;
    width: 184px !important;
    }
    #editar_verificado{
    width: 125px !important;
    }
    #editar_valoracion{
    text-align: center;
    }
    #btn_cobertura{
    white-space: nowrap;
    align-items: center;
    display: flex;
    }
    #btn_cobertura i{
    align-items: center;
    display: flex;
    }
    
    .recomendaciones{
    max-height: 100px !important;
    overflow-y:auto !important;
    position:absolute !important;
    border: 1px solid #e9e2eb !important;
    border-end-start-radius: 8px !important;
    border-end-end-radius: 8px !important;
    background-color: #FFFFFF !important;
    padding: 14px 5px 5px 5px !important;
    width: calc(100% - 32px) !important;
    margin-top: -10px !important;
    z-index: 1 !important;
    box-shadow: 0 0 6px rgba(114, 52, 255, 0.15);
    }
    .recomendaciones.w-button{
    width: calc(100% - 30px - 120px + 5px) !important;
    }
    .recomendaciones p{
    margin-bottom: 0px !important;
    padding: 3px 10px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    }
    .recomendaciones p:hover{
    background-color: #E9E1EB;
    }
    .recomendaciones_input{
    width: 100% !important;
    z-index: 5;
    position:relative
    }
    #btn_servicio{
    white-space: nowrap;
    align-items: center;
    display: flex;
    height: 37px !important;
    width: 120px;
    }
    #btn_servicio i{
    align-items: center;
    display: flex;
    }

    #modalFotos,
    #modalCertificados,
    #modalVerCertificado,
    #modalEvaluacion{
    z-index: 10001;
    }
    .modal-backdrop.fade.show:nth-of-type(4){
    z-index: 10000;
    }
    .imagen-portafolio img{
    width: 284px;
    height: 284px;
    object-fit: cover;
    border-radius: 8px !important;
    display: block;
    }
    .imagen-portafolio {
    position: relative;
    display: inline-block;
    }
    .imagen-portafolio .btn-remove {
    color: #ffffff !important;
    border: 1px solid #d4183d !important;
    background-color: #d4183d;
    width: fit-content;
    padding: 8px 8px;
    border-radius: 8px;
    position: absolute;
    top: 5px;
    z-index:1000;
    right: 12px;
    cursor:pointer !important;
    opacity: 0;
    transition: opacity .15s;
    }
    .imagen-portafolio:hover .btn-remove {
    opacity: 1;
    }
    #div_boton_push{
    margin-left: 20px;
    }
    .archivo-portafolio svg,
    .evaluacion svg{
    height:13px !important;
    width:13px !important;
    }
    .evaluacion button{
    width:120px !important;
    }
    #cambiar_puntuacion .fas{
    cursor: pointer !important
    }
    #cambiar_puntuacion .fas.text-soft-secondary:hover{
    color: #fdc7005e !important
    }

    
/*REGISTRO PROFESIONAL*/

    .pasos{
    background-color: #fbf1fe;
    padding: 5px;
    max-width: 70px;
    width: 100%;
    min-width: 30px;
    border-radius: 8px;
    pointer-events: none;  /* Esto evita que el enlace sea clickeado */
    }
    .pasos.active{
    background-color: #7234FF;
    }
    .line-text {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        position: relative;
    }
    .line-text::before,
    .line-text::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 100%;
        height: 1px;
        background-color: #e9e2eb;
        left: 0;
        right: 0;
    }
    .line-text span {
        position: relative;
        background-color: #FFF;
        padding: 0 10px;
        z-index: 100;
    }
    .codigo_verificacion{
    width: 50px !important;
    height: 50px !important;
    font-size: 24px !important;
    text-align: center !important;
    }

/*REGISTRO USUARIO*/

    .spin {
    animation: girar 0.8s linear infinite;
    }
    @keyframes girar {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .codigo-input {
    width: 45px !important;
    height: 48px !important;
    border-radius: 8px !important;
    font-size: 20px !important;
    font-weight: bold !important;
    background-color: rgba(114, 52, 255, 0.04) !important;
    border: 2px solid transparent !important;
    transition: all 0.15s ease-in-out !important;
    }

    .codigo-input:focus {
        border: 2px solid #7234FF80 !important;
        box-shadow: 0 0 0 3px rgba(114, 52, 255, 0.15) !important;
        outline: none !important;
    }

/*REGISTRAR SOLICITUD*/
    .pasos-circle{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #161616;
    background-color: #fbf1fe;
    width: 35px !important;
    height: 35px !important;
    min-width: 30px;
    font-size: 16px;
    border-radius: 100%;
    pointer-events: none;  /* Esto evita que el enlace sea clickeado */
    }
    .pasos-circle.active{
    background-color: #7234FF;
    color: #FFF;
    }
    .pasos-circle-separator{
    background-color: #fbf1fe;
    width: 70px !important;
    height: 5px !important;
    min-width: 30px;
    border-radius: 8PX;
    margin-top:auto;
    margin-bottom:auto;
    pointer-events: none;  /* Esto evita que el enlace sea clickeado */
    }
    .pasos-circle-separator.active{
    background-color: #7234FF;
    }
    .card-option{
    cursor:pointer !important;
    }
    .card-option.active{
    border: 1px solid #7234FF !important;
    background-color: #f8f5ff !important;
    }
    .radio-hidden {
    position: absolute;
    opacity: 0;
    }
    /* MANTENEDOR PLANES */
    /*SWITCHES DE COLOR MORADO Y REDONDEADO*/
    .listoco .switch-purple {
        position: relative;
        display: inline-block;
        width: 46px;
        height: 24px;
    }

    /* Ocultar checkbox real */
    .listoco .switch-purple input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    /* Slider */
    .listoco .switch-purple .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #d8cfe6; /* gris pastel */
        transition: 0.3s;
        border-radius: 34px;
        border: 1px solid #c8bdd8;
    }

    /* Círculo */
    .listoco .switch-purple .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.3s;
        border-radius: 50%;
        box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    }

    /* CHECKED: ON */
    .listoco .switch-purple input:checked + .slider {
        background-color: #8C3CFF;     /* morado */
        border-color: #8C3CFF;
    }

    /* mover círculo */
    .listoco .switch-purple input:checked + .slider:before {
        transform: translateX(22px);
    }

    /* Forma redonda extra */
    .listoco .switch-purple .slider.round {
        border-radius: 34px;
    }

/* MIS SOLICITUDES PROFESIONAL */
    .dropdown-tittle{
    padding: 5px 10px;
    font-weight:bold;
    }
    .filter-check .dropdown-item{
    padding: 2px 15px !important;
    }
    .dropdown-item{
    cursor: pointer;
    }
    .badge-pill-lg {
    height: 38px;
    width: 43px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    }
    .badge-pill-lg.morado {
    background: linear-gradient(90deg, #7234FF, #FF56D3);
    color: #FFF;
    }
    .badge-pill-lg.amarillo {
    background: linear-gradient(90deg, #f0b100, #ffcc5a);
    color: #FFF;
    }
    .badge-pill-lg.naranjo {
    background: linear-gradient(90deg, #ff6900, #f0b100);
    color: #FFF;
    }

    .foto {
    width: 284px;
    height: 284px;
    }
    .overlay-x{
    overflow-x: overlay;
    }

    .cards-carousel {
    position: relative;
    width: 100%;
    }
    .cards-viewport {
    overflow: hidden;
    width: 100%;
    }
    .cards-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    transition: transform .35s ease;
    will-change: transform;
    }
    .cards-track > .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
    }

    /* md: 2 por vista */
    @media (min-width: 768px) {
    .cards-track > .col-12 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    }

    .carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    border: none;
    width: 60px;
    height: 100%;
    background: #fff !important;
    opacity: 1!important;
    cursor: initial !important;
    }
    .carousel-nav svg {
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    }
    .carousel-nav.morado svg {
    color: #fff;
    background-color: #7c3aed;
    }
    .carousel-nav.amarillo svg {
    color: #fff;
    background-color: #f0b100;
    }
    .carousel-nav.prev { left: -8px; }
    .carousel-nav.next { right: -8px; }
    .carousel-nav:disabled svg {
    opacity: .35;
    cursor: default;
    }


    @media (max-width: 768px) {
    .carousel-nav {
    width: 35px !important;
    }
    .carousel-nav.prev svg {
    margin-left:-14px;
    }
    .carousel-nav.next svg {
    margin-right:-14px;
    }
    }

    /* pagination dots */
    .cards-pagination {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 32px;
    }
    .cards-pagination .dot {
    border: none !important;
    width: 25px;
    height: 25px;
    border-radius: 8px;
    background: #E9E1EB;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
    color: #5a597e;
    }
    .cards-pagination.morado .dot.active {
    color: #fff;
    background: #7c3aed;
    }
    .cards-pagination.amarillo .dot.active {
    color: #fff;
    background: #f0b100;
    }
    
    .dropdown-item.active{
    background-color: #ff56d3 !important;
    border-radius:8px !important;
    color: #FFFFFF !important;
    }

    #modalDetalle{
    z-index: 10 !important;
    padding-top: 60px !important;
    }
    .detalle-sticky{
    position: sticky;
    top: 0;
    max-height: calc(100vh - 100px);
    overflow: auto;
    }


/* ESTILOS PARA MIS SOLICITUDES USUARIO*/

    /* === CARD BASE === */
    .listoco .solicitud-card {
        border: 1px solid #eee;
        border-radius: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        transition: box-shadow .2s ease;
    }

    .listoco .solicitud-card:hover {
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    }

    /* === TÍTULO === */
    .listoco .titulo-solicitud {
        font-size: 18px;
        color: #161616;
    }

    /* === BADGES === */
    .listoco .badge-estado {
        background: #7e3af2;
        color: white;
        font-size: 12px;
        border-radius: 6px;
        padding: 4px 8px;
    }

    .listoco .badge-tipo {
        background: #ede9fe;
        color: #5b21b6;
        font-size: 12px;
        border-radius: 6px;
        padding: 4px 8px;
    }

    .listoco .badge-urgente {
        background: #ff4b4b;
        color: white;
        border-radius: 6px;
        padding: 4px 10px;
        font-size: 12px;
    }

    .listoco .badge-estado-en-progreso {
        background: oklch(0.705 0.213 47.604);
        color: #ffffff;
    }

    /* Badge naranja que palpita en mis solicitudes*/
    .badge-pulse {
        position: absolute;
        top: -8px;
        right: -4px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FF7200;
        color: #FFFFFF;
        font-size: 12px;
        font-weight: 700;
        box-shadow: 0 0 0 0 rgba(255, 114, 0, 0.7);
        animation: pulse-badge 1.5s infinite;
        z-index: 10;
    }

    .badge-pulse-inner {
        position: relative;
        z-index: 2;
    }

    /* Onda alrededor */
    .badge-pulse::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        box-shadow: 0 0 0 0 rgba(255, 114, 0, 0.7);
        animation: pulse-wave 1.5s infinite;
        z-index: 1;
    }

    /* Palpito del círculo */
    @keyframes pulse-badge {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.08);
        }
        100% {
            transform: scale(1);
        }
    }

    /* Onda que se expande */
    @keyframes pulse-wave {
        0% {
            transform: scale(1);
            opacity: 0.8;
        }
        70% {
            transform: scale(1.8);
            opacity: 0;
        }
        100% {
            transform: scale(1.8);
            opacity: 0;
        }
    }

    /* === TIEMPO RESTANTE === */
    .listoco .tiempo-box {
        background: #eef6ff;
        padding: 12px;
        border-radius: 10px;
    }

    .listoco .tiempo-icon {
        font-size: 22px;
        color: #1d4ed8;
        margin-right: 10px;
    }

    .listoco .tiempo-descripcion {
        font-size: 13px;
    }

    /* === DESCRIPCIÓN === */
    .listoco .descripcion {
        line-height: 1.4;
    }

    /* === LÍNEA DETALLES === */
    .listoco .icon-detalle {
        font-size: 16px;
        color: #6b7280;
    }

    .listoco .detalle-linea {
        font-size: 14px;
    }

    /* === COTIZACIÓN === */
    .listoco .cotizacion-info {
        font-size: 14px;
    }

    /* === VER DETALLES === */
    .listoco .link-detalle {
        color: #111;
        font-size: 14px;
    }

    .listoco .text-orange {
        color: #ff6b00 !important;
    }

    /* === DROPDOWN ORDENAR === */
    .listoco .dropdown-ordenar .dropdown-item {
        display: flex !important; /* forzamos flex, rompiendo el block de Bootstrap */
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 6px;
    }

    .listoco .dropdown-ordenar .check-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        min-width: 20px;
    }

    .listoco .opacity-0 {
        opacity: 0 !important;
    }
    /* Panel derecho fijo al hacer scroll en vista detalle*/
    .listoco .detalle-info-col {
        position: sticky;
        top: 80px;
        height: fit-content;
        align-self: flex-start;
    }

    /* === MODAL EVALUAR PROFESIONAL === */
    
    /* Quitar líneas de separación del modal Bootstrap */
    .listoco #modalEvaluacion .modal-header,
    .listoco #modalEvaluacion .modal-footer {
        border: none !important;
    }
    /* centrar las estrellas */
    .listoco #modalEvaluacion .mb-3 {
        display: flex;
        flex-direction: column;
    }

    /* contador de caracteres */
    .listoco #modalEvaluacion .contador-caracteres {
        font-size: 12px;
        color: #5a597e;
    }
    /* subtítulo */
    .listoco #modalEvaluacion .eval-subtitle {
        font-size: 14px;
        color: #5a597e;
    }

    /* Fila de estrellas centrada */
    .listoco #modalEvaluacion .estrellas {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin-top: 8px;
    }

    /* Botón-estrella */
    .listoco #modalEvaluacion .estrella {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
    }

    /* Ícono SVG base (sin rellenar) */
    .listoco #modalEvaluacion .icon-star {
        width: 32px;
        height: 32px;
        stroke: #5a597e;          /* bordes grises */
        fill: transparent;
        stroke-width: 2;
        transition: fill 0.15s ease, stroke 0.15s ease, transform 0.1s ease;
    }

    /* Hover visual ligero */
    .listoco #modalEvaluacion .estrella:hover .icon-star {
        transform: scale(1.05);
    }

    /* Estrella activa (seleccionada) */
    .listoco #modalEvaluacion .estrella.activa .icon-star {
        stroke: #fdc700;          /* bordes */
        fill: #fdc700;            /* relleno */
    }

    .listoco #modalEvaluacion .eval-estado {
        font-size: 16px;
        color: #5a597e;
        margin-top: 6px;
    }

    .listoco .servicio-completado-alert {
        background-color: #e6f8ec;
        border-color: #b4e2c3;
        border-radius: 12px;
    }

/* DASHBOARD ADMIN */
    .warning{
    border-radius: 8px;
    border: 1px solid #fff085;
    background-color: #fefce8;
    padding: 15px;
    }
    .warning svg,
    .warning i{
    color: #d08700;
    font-size: 16px;
    height: 16px;
    width: 16px;
    margin-right: 5px;
    }
    .warning span.badge-custom{
    border-radius: 8px;
    padding: 0px 8px;
    border: 1px solid #ffdf20;
    background-color: #fef9c2;
    }
    .warning.n2{
    border-color: #ffd7a8;
    background-color: #fff7ed;
    }
    .warning.n2 svg,
    .warning.n2 i{
    color: #f54a00;
    }
    .warning.n2 span.badge-custom{
    border-color: #ffb86a;
    background-color: #ffedd4;
    }
    .warning.n3{
    border-color: #ffc9c9;
    background-color: #fef2f2;
    }
    .warning.n3 svg,
    .warning.n3 i{
    color: #e7000b;
    }
    .warning.n3 span.badge-custom{
    border-color: #ffa2a2;
    background-color: #ffe2e2;
    }
    .warning.n4{
    border-color: #ffa2a2;
    background-color: #ffe2e2;
    }
    .warning.n4 svg,
    .warning.n4 i{
    color: #c10007;
    }
    .warning.n4 span.badge-custom{
    border-color: #d4183d;
    background-color: #d4183d;
    color: white;
    font-weight: bold;
    }

/* DASHBOARD PROFESIONALES */

    .custom-grafic-card{
    background-color: #fff;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
    }
    .custom-grafic-card .title{
        font-size: 13px !important;
    }
    .custom-grafic-card .data{
        font-size: 15px !important;
    }
    #dashboard-stiky-top{
    max-width: calc(100% - 24px - 24px);
    margin-top: -30px;
    z-index: 10;
    }
    .borroso{
    filter: blur(6px);
    pointer-events: none;
    }
    .badge-dpi-40{
    width:48px !important;
    height:48px !important;
    text-align: center !important;
    padding-top: 7px !important;
    }
    .badge-dpi-40 i.dripicons-lightbulb{
    font-size:28px !important;
    }
    

    @media (max-width: 450px) {
    #dashboard-stiky-top {
    max-width: calc(100% - 34px - 24px) !important;
    }
    }

    @media (min-width: 554px) and (max-width: 768px) {
    #espacio{
    margin-bottom: 1.5rem !important;
    }
    }
    
    @media (max-width: 767px) {
    #dashboard-stiky-top{
    padding-right: 40px !important;
    }
    }

/* LICITACIONES ADMIN */
    #detalle_fotos_contenedor{
    padding-top: 6px;
    }

    .foto-adjunta{
    display: inline-block !important;
    width: 110px !important;
    height: 110px !important;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #eee;
    background: #f7f7f7;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    }

    .foto-adjunta__img{
    width: 110px !important;
    height: 110px !important;
    max-width: 110px !important;
    max-height: 110px !important;
    object-fit: cover;
    display: block;
    }