:root {

    --White: #FFFFFF;
    --Basic: #F4F6F3; /* var(--Basic) */
    --Back-g :#EEF2F5;
    --Blue-a :#006BBD;
    --Blue-b :#007bd2;
    --Blue-c :#006bbd1a;
    --Blue-d :#006BBD;
    --Green-T :#6ee4005d;
    --Green-T2 :#85c906a2;
    --Green-T3 :#6ee40013;
    --sm-a : #d26f00;
    --sm-b : #005099;
    --sm-c : #d24400;
    --sm-d : #d2a100;
    --sm-e : #005ed2;
    --sm-f : #00d27b;
    --sm-g : #d2007b;
    --sm-h : #f2d5c0;
    --sm-i : #c0d2f2;

    --gray-color-1: #f5f5f5;
    --gray-color-2: #ebebeb;
    --gray-color-3: #e0e0e0;
    --gray-color-4: #d6d6d6;
    --gray-color-5: #cccccc;
    --gray-color-6: #c2c2c2;
    --gray-color-7: #b8b8b8;
    --gray-color-8: #adadad;
    --gray-color-9: #a3a3a3;
    --gray-color-10: #999999;
    --gray-color-11: #8f8f8f;
    --gray-color-12: #858585;
    --gray-color-13: #7a7a7a;
    --gray-color-14: #707070;
    --gray-color-15: #666666;
    --gray-color-16: #5c5c5c;
    --gray-color-17: #525252;
    --gray-color-18: #474747;
    --gray-color-19: #3d3d3d;
    --gray-color-20: #303030;
    --gray-color-21: #202020;
    --gray-color-22: #131313;

}

.ms-tg-01{color: var(--gray-color-1);}
.ms-tg-02{color: var(--gray-color-2);}
.ms-tg-03{color: var(--gray-color-3);}
.ms-tg-04{color: var(--gray-color-4);}
.ms-tg-05{color: var(--gray-color-5);}
.ms-tg-06{color: var(--gray-color-6);}
.ms-tg-07{color: var(--gray-color-7);}
.ms-tg-08{color: var(--gray-color-8);}
.ms-tg-09{color: var(--gray-color-9);}
.ms-tg-10{color: var(--gray-color-10);}
.ms-tg-11{color: var(--gray-color-11);}
.ms-tg-12{color: var(--gray-color-12);}
.ms-tg-13{color: var(--gray-color-13);}
.ms-tg-14{color: var(--gray-color-14);}
.ms-tg-15{color: var(--gray-color-15);}
.ms-tg-16{color: var(--gray-color-16);}
.ms-tg-17{color: var(--gray-color-17);}
.ms-tg-18{color: var(--gray-color-18);}
.ms-tg-19{color: var(--gray-color-19);}
.ms-tg-20{color: var(--gray-color-20);}
.ms-tg-21{color: var(--gray-color-21);}
.ms-tg-22{color: var(--gray-color-22);}

.ms-tb-st{
    color: var(--Blue-b);
}

.al:link {
    text-decoration: none;
}
.ms-columna-reduce {
    white-space: nowrap;       /* Evita el salto de línea */
    overflow: hidden;          /* Oculta el contenido que excede el ancho */
    text-overflow: ellipsis;   /* Muestra los tres puntos (...) */
    max-width: 200px;          /* Define un ancho máximo para la columna */
}
.ms-columna-reduce-180 {
    white-space: nowrap;       /* Evita el salto de línea */
    overflow: hidden;          /* Oculta el contenido que excede el ancho */
    text-overflow: ellipsis;   /* Muestra los tres puntos (...) */
    max-width: 180px;          /* Define un ancho máximo para la columna */
}
.ms-columna-reduce-300 {
    white-space: nowrap;       /* Evita el salto de línea */
    overflow: hidden;          /* Oculta el contenido que excede el ancho */
    text-overflow: ellipsis;   /* Muestra los tres puntos (...) */
    max-width: 300px;          /* Define un ancho máximo para la columna */
}
.ms-columna-reduce-min {
    white-space: nowrap;       /* Evita el salto de línea */
    overflow: hidden;          /* Oculta el contenido que excede el ancho */
    text-overflow: ellipsis;   /* Muestra los tres puntos (...) */
    width: min-content;          /* Define un ancho máximo para la columna */
}
.ms-columna-reduce-21-percent {
    white-space: nowrap;       /* Evita el salto de línea */
    overflow: hidden;          /* Oculta el contenido que excede el ancho */
    text-overflow: ellipsis;   /* Muestra los tres puntos (...) */
    max-width: 21%;          /* Define un ancho máximo para la columna */
}
.B-login {
    display: flex;
    width: 800px; 
    height: 500px; 
    background-color: var(--White); 
    border-radius: 10px;  
    border: 1px solid #ff242423;  
}
.ms-all-container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
    width: 100%; 
    background-color: var(--Back-g); 
}
.ms-ovt-img {
    overflow: hidden; 
    border-radius: 10px; 
    height: 460px;
}
.ms-btn-red {
    padding: 11px 30px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 7px; 
    border: none;
    background-color:  #ff2424;
    color: #FFFF;
}
.CheckOne{
    border: 1px dashed #c7c7c7; 
    padding: 5px 9px; 
    border-radius: 5px;
}
.bg { 
    background-color: var(--Back-g); 
}

.ms-dsf{
    display: flex;
}
.ms-nav{
    background-color: var(--Blue-a);
    border-radius: 0px 0px 4px 4px;
    display: flex;
    height: 70px;    
}
.bgw {
    background-color: white;
}
.bg-White {
    background-color: var(--White);
}
.flex-container {
    display: flex;
    height: calc(100vh - 70px ); /* Full height of the viewport */
    width: 100%;
    background-color: var(--Back-g);
}
.flexible-right {
    flex: 1;
}
.full-height {
    height: 100vh; 
}
.full-width {
    width: 100%;
}
.point{
    cursor: pointer;
}
.accordion {
    cursor: pointer;
    padding: 6px 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 14.5px;
    transition:.5s ease-in-out;   
    background-color: #006bbd0a;
    border-radius: 4px;
    border: 1px solid var(--Blue-c);
}

/* Clase para activar la animación */
.animate-show {
    animation: fadeIn 0.4s;
}


.ms-titls{
    font-size: 15px;
    font-weight: 600;
    color: var(--Blue-a);
}
.subm_left {
    padding: 0px 0px 0px 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
.option_m{
    padding: 10px 0px 10px 30px;
    font-size: 14px;
    display: flex;
    cursor: pointer;
    color: #585858;
    border: 1px dashed #FFF;
}
.option_m:hover{
    background-color: #f5f5f5;
    color: var(--Blue-b);
    border-radius: 5px;
    border: 1px solid var(--Green-T);
}

.option_menu_s{
    padding: 5px;
    border-radius: 6px;
    color: #585858;
    display: flex;
    padding: 10px;
}

.option_menu_s:hover{
    background-color: #e8e8e8;
    color: var(--Blue-a);

}
.active{
    background-color: #c7e0f4;
}
.active-menu{
    background-color: #FFF;
    color: var(--Blue-a);
    border: 1px solid var(--Green-T2);
    background-color: var(--Green-T3);
    border-radius: 5px;
}
.active-menu .ovh .rt{
    top: -25px;
}
.active-menu span{
    font-size: 15px;
    font-weight: 600;
}
.option_m:hover .ovh .rt{
    top: -25px;
} 
.ovh{
    overflow: hidden;
    width: 25px;
    height: 25px;
}
.ofh {
    overflow: hidden;
}
.OFY {
    overflow-y: auto
}
.rt{
    position: relative;
    top: 0px;
    /* transition: all 0.4s; */
}
.Box-table-tam {
    border: 1px solid #0c66ee36;
    border-radius: 10px;
}
.Tal {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    border-radius: 10px;
}
.Tal td,
.Tal th {
    padding: 16px 0px;
    font-size: 14px;
    color: #5e5e5e;
    text-align: center;
}

.Tal tr:nth-child(odd) {
    Background-color: #FFF;
}

.Tal tr:nth-child(even) {
    Background-color: #F9FAFC;
}

.Tal tr:hover {
    background-color: #0c66ee11;
}
.Tal th {
    padding: 14px 0px;
    text-align: center;
    background-color: #0c66ee33;
    color: #303030;
    font-size: 26px;
    font-weight: 100;
    border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
    font-weight: 600;
}
.butt-add{
    padding: 2px 12px;
    border: 1px dashed #109e63;
    background-color: #FFF;
    border-radius: 15px;
    background-color: #00d27b18;
    font-size: 13px;
    width: 120px;
    color: #07834f;
    text-align: center;
    font-weight: 500;
    cursor: pointer;
}
.ms-state-active{
    color:#0d752f !important; 
    font-weight: 600;
}

.ms-state-inactive{
    color:#df1818 !important;
    font-weight: 600;
}
.full-height-19 {
    height: calc(100vh - 190px);
}
.full-height-195 {
    height: calc(100vh - 195px);
}
.full-height-20 {
    height: calc(100vh - 200px);
}
.full-height-28 {
    height: calc(100vh - 280px);
}

.full-height-27 {
    height: calc(100vh - 270px);
}

.full-height-26 {
    height: calc(100vh - 260px);
}

.full-height-25 {
    height: calc(100vh - 250px);
}
.full-height-24 {
    height: calc(100vh - 240px);
}
.full-height-23 {
    height: calc(100vh - 230px);
}
.full-height-22 {
    height: calc(100vh - 220px);
}
.full-height-21 {
    height: calc(100vh - 210px);
}
.full-height-20 {
    height: calc(100vh - 200px);
}

.Max-detail-orders{
    max-height: 400px; 
    background-color: #ececec; 
    border-radius: 5px; 
    border: 1px solid #e9e9e9;
}

.Max-detail-answers{
    max-height: 400px; 
    background-color: #ffffff; 
    border-radius: 5px; 
    border: 1px solid #e9e9e9;
}

.Box-answer{
    width: 100%;
    display : 'flex';
}
.answer-all{
    width: calc(100% - 100px); 
}
.answer-val{
    width: 100px;
    color: #0721b4 !important;
}

.Tp-10{
    background-color: #cdffc910 !important;  
    color: #303030;
    font-size: 17px;
}

.Scrl-T::-webkit-scrollbar-track {
    background-color: transparent;
    /*color de la barra de fondo*/
}
.Scrl-T::-webkit-scrollbar-thumb {
    background-color: var(--Blue-00);
    /*color del manejador*/
}
.Scrl-T::-webkit-scrollbar {
    width: 8px;
    /*ancho del scroll vertical*/
    height: 8px;
    /*alto del scroll horizontal*/
}

/* Estilo de la tabla */
.Txl {
    width: 100%;
    border-collapse: collapse;
}

.Txl tr:nth-child(odd) {
    Background-color: #FFF;
    border-bottom: 1px solid #0c66ee36;
}

.Txl tr:nth-child(even) {
    Background-color: #F9FAFC;
    border-bottom: 1px solid #0c66ee36;
}

.Txl tbody tr:hover {
    background-color: #0c66ee11;
}

.Txl tbody td {
    padding: 16px;
    font-size: 14px;
    color: #5e5e5e;
    border: 'none';
}
    
/* Encabezado fijo */
.Txl thead th {
    position: sticky;
    z-index: 1;
    text-align: left;

    padding: 14px 0px;
    text-align: center;
    background-color: #327ae618;
    color: #083b88c4;
    font-size: 15px;
    font-weight: 100;
    border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
    font-weight: 600;

    white-space: nowrap;       /* Evita el salto de línea */
    overflow: hidden;          /* Oculta el contenido que excede el ancho */
    text-overflow: ellipsis;   /* Muestra los tres puntos (...) */
    width: min-content;          /* Define un ancho máximo para la columna */
}

/* Estilos de las celdas */
.Txl tbody td {
    padding: 10px;
    text-align: center;

    white-space: nowrap;       
    overflow: hidden;          
    text-overflow: ellipsis; 

/*     border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;   */  
}

/* Contenedor desplazable */
.Scrl-T tbody {
    display: block;
    height: calc(100% - 50px);
    overflow-y: auto;
    width: 100%;
}

/* Asegura que las columnas del cuerpo y encabezado se alineen */
.Scrl-T thead, .Scrl-T tbody tr {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.box-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}


.file-upload-container {
    cursor: pointer;
    border: 2px dashed #8b8b8b;
}
.hidden-input {
    display: none;
    position: absolute;
    pointer-events: none;
}

.inpt-b {
    border: 1px solid var(--gray-color-5);
    background-color: #ffffff;
    border-radius: 5px;
    padding: 5px;

}
.inpt-b:focus {
    background-color: white;
    border-radius: 5px;
    outline: none;
}

.ms-iplacel::placeholder {
    color: #bbbbbb !important;
    font-size: 13px !important;
}

/* Padding */
.ms-pd-2{padding:2px;}.ms-pd-3{padding:3px;}.ms-pd-4{padding:4px;}.ms-pd-5{padding:5px;}.ms-pd-6{padding:6px;}.ms-pd-7{padding:7px;}.ms-pd-8{padding:8px;}.ms-pd-9{padding:9px;}.ms-pd-10{padding:10px;}.ms-pd-11{padding:11px;}.ms-pd-12{padding:12px;}.ms-pd-13{padding:13px;}.ms-pd-14{padding:14px;}.ms-pd-15{padding:15px;}.ms-pd-20{padding:20px;}.ms-pd-25{padding:25px;}.ms-pd-30{padding:30px;}.ms-pd-40{padding:40px;}.ms-pd-50{padding:50px;}
.ms-pt-2{ padding-top: 2px;}.ms-pt-3{ padding-top: 3px;}.ms-pt-4{ padding-top: 4px;}.ms-pt-5{ padding-top: 5px;}.ms-pt-6{ padding-top: 6px;}.ms-pt-7{ padding-top: 7px;}.ms-pt-8{ padding-top: 8px;}.ms-pt-9{ padding-top: 9px;}.ms-pt-10{ padding-top: 10px;}.ms-pt-11{ padding-top: 11px;}.ms-pt-12{ padding-top: 12px;}.ms-pt-13{ padding-top: 13px;}.ms-pt-14{ padding-top: 14px;}.ms-pt-15{ padding-top: 15px;}.ms-pt-16{ padding-top: 16px;}.ms-pt-17{ padding-top: 17px;}.ms-pt-18{ padding-top: 18px;}.ms-pt-19{ padding-top: 19px;}.ms-pt-20{ padding-top: 20px;}.ms-pt-25{ padding-top: 25px;}.ms-pt-30{ padding-top: 30px;}.ms-pt-35{ padding-top: 35px;}
.ms-pr-5{ padding-right: 5px;}.ms-pr-10{ padding-right: 10px;}.ms-pr-15{ padding-right: 15px;}.ms-pr-20{ padding-right: 20px;}.ms-pr-25{ padding-right: 25px;}.ms-pr-30{ padding-right: 30px;}.ms-pr-35{ padding-right: 35px;}
.ms-pl-5{ padding-left: 5px;}.ms-pl-6{ padding-left: 6px;}.ms-pl-7{ padding-left: 7px;}.ms-pl-8{ padding-left: 8px;}.ms-pl-9{ padding-left: 9px;}.ms-pl-10{ padding-left: 10px;}.ms-pl-15{ padding-left: 15px;}.ms-pl-20{ padding-left: 20px;}.ms-pl-25{ padding-left: 25px;}.ms-pl-30{ padding-left: 30px;}.ms-pl-35{ padding-left: 35px;}
.ms-pb-2{ padding-bottom: 2px;}.ms-pb-3{ padding-bottom: 3px;}.ms-pb-4{ padding-bottom: 4px;}.ms-pb-5{ padding-bottom: 5px;}.ms-pb-6{ padding-bottom: 6px;}.ms-pb-7{ padding-bottom: 7px;}.ms-pb-8{ padding-bottom: 8px;}.ms-pb-9{ padding-bottom: 9px;}.ms-pb-10{ padding-bottom: 10px;}.ms-pb-15{ padding-bottom: 15px;}.ms-pb-20{ padding-bottom: 20px;}.ms-pb-25{ padding-bottom: 25px;}.ms-pb-30{ padding-bottom: 30px;}.ms-pb-40{ padding-bottom: 40px;}.ms-pb-50{ padding-bottom: 50px;}.ms-pb-55{ padding-bottom: 55px;}.ms-pb-60{ padding-bottom: 60px;}
.ms-pd-tb-2{padding:2px 0px;}.ms-pd-tb-3{ padding:3px 0px;}.ms-pd-tb-4{padding:4px 0px;}.ms-pd-tb-5{padding:5px 0px;}.ms-pd-tb-6{padding:6px 0px;}.ms-pd-tb-7{padding:7px 0px;}.ms-pd-tb-8{padding:8px 0px;}.ms-pd-tb-9{padding:9px 0px;}.ms-pd-tb-10{padding:10px 0px;}.ms-pd-tb-11{padding:11px 0px;}.ms-pd-tb-12{padding:12px 0px;}.ms-pd-tb-13{padding:13px 0px;}.ms-pd-tb-14{padding:14px 0px;}.ms-pd-tb-15{padding:15px 0px;}.ms-pd-tb-20{padding:20px 0px;}.ms-pd-tb-25{padding:25px 0px;}.ms-pd-tb-30{ padding:30px 0px;}
.ms-pd-lr-2{padding:0px 2px;}.ms-pd-lr-3{padding:0px 3px;}.ms-pd-lr-4{padding:0px 4px;}.ms-pd-lr-5{padding:0px 5px;}.ms-pd-lr-6{padding:0px 6px;}.ms-pd-lr-7{padding:0px 7px;}.ms-pd-lr-8{padding:0px 8px;}.ms-pd-lr-9{padding:0px 9px;}.ms-pd-lr-10{padding:0px 10px;}.ms-pd-lr-11{padding:0px 11px;}.ms-pd-lr-12{padding:0px 12px;}.ms-pd-lr-13{padding:0px 13px;}.ms-pd-lr-14{padding:0px 14px;}.ms-pd-lr-15{padding:0px 15px;}.ms-pd-lr-20{padding:0px 20px;}.ms-pd-lr-25{padding:0px 25px;}.ms-pd-lr-30{padding:0px 30px;}.ms-pd-lr-35{padding:0px 35px;}.ms-pd-lr-40{padding:0px 40px;}

/* Text */
.ms-tac{text-align: center;}.ms-tar{text-align: right !important;}.ms-tal{text-align: left !important;}.ms-taj{text-align: justify;}
.ms-fwa-10{font-weight:100;}.ms-fwa-20{font-weight:200;}.ms-fwa-30{font-weight:300;}.ms-fwa-40{font-weight:400;}.ms-fwa-50{font-weight:500;}.ms-fwa-60{font-weight:600;}.ms-fwa-70{font-weight:700;}.ms-fwa-80{font-weight:800;}.ms-fwa-90{font-weight:900;}.ms-fwa-100{font-weight:bold;}
.ms-fsa-5{font-size: 5px;}.ms-fsa-6{font-size: 6px;}.ms-fsa-7{font-size: 7px;}.ms-fsa-8{font-size: 8px;}.ms-fsa-9{font-size: 9px;}.ms-fsa-10{font-size: 10px;}.ms-fsa-11{font-size: 11px;}.ms-fsa-12{font-size: 12px;}.ms-fsa-13{font-size: 13px;}.ms-fsa-14{font-size: 14px;}.ms-fsa-15{font-size: 15px;}.ms-fsa-16{font-size: 16px;}.ms-fsa-17{font-size: 17px;}.ms-fsa-18{font-size: 18px;}.ms-fsa-19{font-size: 19px;}.ms-fsa-20{font-size: 20px;}.ms-fsa-21{font-size: 21px;}.ms-fsa-22{font-size: 22px;}.ms-fsa-23{font-size: 23px;}.ms-fsa-24{font-size: 24px;}.ms-fsa-25{font-size: 25px;}.ms-fsa-26{font-size: 26px;}.ms-fsa-27{font-size: 27px;}.ms-fsa-28{font-size: 28px;}.ms-fsa-29{font-size: 29px;}.ms-fsa-30{font-size: 30px;}.ms-fsa-33{font-size: 33px;}.ms-fsa-34{font-size: 34px;}.ms-fsa-35{font-size: 35px;}.ms-fsa-36{font-size: 36px;}.ms-fsa-37{font-size: 37px;}.ms-fsa-38{font-size: 38px;}.ms-fsa-39{font-size: 39px;}.ms-fsa-40{font-size: 40px;}.ms-fsa-41{font-size: 41px;}.ms-fsa-42{font-size: 42px;}.ms-fsa-43{font-size: 43px;}.ms-fsa-44{font-size: 44px;}.ms-fsa-45{font-size: 45px;}.ms-fsa-46{font-size: 46px;}.ms-fsa-47{font-size: 47px;}.ms-fsa-48{font-size: 48px;}.ms-fsa-49{font-size: 49px;}.ms-fsa-50{font-size: 50px;}
.ms-tw{color: #FFF;}

/* Margin */
.ms-mg-0{margin:0!important}.ms-mg-1{margin:.25rem!important}.ms-mg-2{margin:.5rem!important}.ms-mg-3{margin:1rem!important}.ms-mg-4{margin:1.5rem!important}.ms-mg-5{margin:3rem!important}.ms-mb-0{margin-bottom:0!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}.ms-mt-0{margin-top:0!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-ml-0{margin-left:0!important}.ms-ml-1{margin-left:.25rem!important}.ms-ml-2{margin-left:.5rem!important}.ms-ml-3{margin-left:1rem!important}.ms-ml-4{margin-left:1.5rem!important}.ms-ml-5{margin-left:3rem!important}.ms-mr-0{margin-right:0!important}.ms-mr-1{margin-right:.25rem!important}.ms-mr-2{margin-right:.5rem!important}.ms-mr-3{margin-right:1rem!important}.ms-mr-4{margin-right:1.5rem!important}.ms-mr-5{margin-right:3rem!important}

/* With */
.ms-w-1{width:10px;}.ms-w-2{width:20px;}.ms-w-3{width:30px;}.ms-w-4{width:40px;}.ms-w-5{width:50px;}.ms-w-6{width:60px;}.ms-w-7{width:70px;}.ms-w-8{width:80px;}.ms-w-9{width:90px;}
.ms-w-10{width:100px;}.ms-w-11{width:110px;}.ms-w-12{width:120px;}.ms-w-13{width:130px;}.ms-w-14{width:140px;}.ms-w-15{width:150px;}.ms-w-16{width:160px;}.ms-w-17{width:170px;}.ms-w-18{width:180px;}.ms-w-19{width:190px;}.ms-w-20{width:200px;}.ms-w-30{width:300px;}.ms-w-35{width:350px;}.ms-w-40{width:400px;}.ms-w-50{width:500px;}.ms-w-60{width:600px;}.ms-w-70{width:700px;}.ms-w-80{width:800px;}.ms-w-90{width:900px;}
.ms-w-100{ width: 100%; }
.ms-wh-50{ width: 50%; }

.ms-wh-8{ width: 8%; }
.ms-wh-16{ width: 16%; }
.ms-wh-20{ width: 20%; }
.ms-wh-24{ width: 24%; }
.ms-wh-25{ width: 25%; }
.ms-wh-30{ width: 30%; }
.ms-wh-32{ width: 32%; }
.ms-wh-36{ width: 36%; }
.ms-wh-40{ width: 40%; }
.ms-wh-48{ width: 48%; }
.ms-wh-56{ width: 56%; }
.ms-wh-64{ width: 64%; }
.ms-wh-72{ width: 72%; }
.ms-wh-80{ width: 80%; }
.ms-wh-88{ width: 88%; }
.ms-wh-96{ width: 96%; }
/* Height */
.ms-h-70{ height: 70px; }

/* Ajustes Máximos y Mínimos */
.ms-min-w-0    { min-width: 0; }
.ms-min-w-100  { min-width: 100%; }
.ms-max-w-none { max-width: none; }
.ms-max-w-full { max-width: 100%; }
.ms-max-w-screen-sm { max-width: 640px; }
.ms-max-w-screen-md { max-width: 768px; }
.ms-max-w-screen-lg { max-width: 1024px; }
.ms-max-w-screen-xl { max-width: 1280px; }

/* Contenedor Flex */
.ms-flex      { display: flex; }
.ms-flex-row  { flex-direction: row; }
.ms-flex-col  { flex-direction: column; }
.ms-flex-wrap { flex-wrap: wrap; }
.ms-jcr { justify-content: right; }
.ms-jcl { justify-content: left; }

.ms-dsfcc {
    display: flex;
    justify-content: center;
    align-items: center;
}
.ms-dsn      { display: none; }
/* Contenedor Flex */
.ms-flex      { display: flex; }
.ms-flex-row  { flex-direction: row; }
.ms-flex-col  { flex-direction: column; }
.ms-flex-wrap { flex-wrap: wrap; }

/* Alineación */
.ms-items-center { align-items: center; }
.ms-justify-between { justify-content: space-between; }
.ms-justify-center  { justify-content: center; }

.Tp-0{
    color: #088546 !important;
}

.Tp-1{
    background-color: #00d27b !important;
    border: 2px solid #1cdf26d8 !important;
    color: #FFF !important;
}

.Tp-2{
    background-color: #00d27b !important;  
    color: white !important;  
}
.Tp-3{
    padding: 7px 15px !important;
    background-color: #00d27b !important;
    border: 1px solid #00d27b !important;
}
.Tp-4{
    background-color: #ffe600 !important;  
    color: black !important;  
    font-weight: 800 !important;
}
.Tp-5{
    background-color: #218a9ca9 !important;  
    color: white !important;  
}

.Tp-6{
    background-color: #134cb4 !important;  
    color: white !important;  
}

.Tp-4 h1{
    font-weight: 800 !important;
}

.img-h-24{
    height: 24px;
}

/* Radius */
.ms-br-3 { border-radius: 3px; }.ms-br-4 { border-radius: 4px; }.ms-br-5 { border-radius: 5px; }.ms-br-6 { border-radius: 6px; }.ms-br-7 { border-radius: 7px; }.ms-br-8 { border-radius: 8px; }.ms-br-9 { border-radius: 9px; }.ms-br-10 { border-radius: 10px; }.ms-br-11 { border-radius: 11px; }.ms-br-12 { border-radius: 12px; }.ms-br-13 { border-radius: 13px; }.ms-br-14 { border-radius: 14px; }.ms-br-15 { border-radius: 15px; }.ms-br-16 { border-radius: 16px; }.ms-br-17 { border-radius: 17px; }.ms-br-18 { border-radius: 18px; }.ms-br-19 { border-radius: 19px; }.ms-br-19 { border-radius: 19px; }.ms-br-20 { border-radius: 20px; }
.ms-w-05{ width: 5px;}.ms-w-1{ width: 10px;}.ms-w-2{ width: 20px;}.ms-w-3{ width: 30px;}.ms-w-4{ width: 40px;}.ms-w-5{ width: 50px;}.ms-w-6{ width: 60px;}.ms-w-7{ width: 70px;}.ms-w-8{ width: 80px;}.ms-w-9{ width: 90px;}.ms-w-10{ width: 100px;}.ms-w-11{ width: 110px;}.ms-w-12{ width: 120px;}.ms-w-13{ width: 130px;}.ms-w-14{ width: 140px;}.ms-w-15{ width: 150px;}.ms-w-18{ width: 180px;}.ms-w-20{ width: 200px;}.ms-w-25{ width: 250px;}.ms-w-30{ width: 300px;}.ms-w-40{ width: 400px;}.ms-w-50{ width: 500px;}
.ms-cw-550{ width: calc( 100% - 550px); }
.ms-cw-100{ width: calc( 100% - 200px); }
.ms-cw-350{ width: calc( 100% - 350px); }
.ms-cw-400{ width: calc( 100% - 400px); }

.btn-Green-t {
    font-size: 14px;
    padding: 10px 40px;
    background-color: var(--sm-f);
    color: #FFF;
    width: max-content;
    height: min-content;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    text-align: center;
}

.btn-Green-t:hover {
    background-color: var(--sq-14);
    color: #ffffff;
}


.btn-blue {
    font-size: 14px;
    padding: 10px 40px;
    background-color: var(--Blue-c);
    color: #FFF;
    width: max-content;
    height: min-content;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    text-align: center;
}

.btn-Green-t:hover {
    background-color: var(--sq-14);
    color: #ffffff;
}

.btn-blue-li {
    font-size: 15px;
    font-weight: 600;
    padding: 7px 25px;
    background-color: white;
    color: var(--Blue-b);;
    width: max-content;
    height: min-content;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    border: 2px solid var(--Blue-b);
}

.btn-blue-li:hover {
    background-color: var(--sm-f);
    color: #ffffff;
    border: 2px dashed var(--sm-f);
}

.sombra-01{
    -webkit-box-shadow: 8px -1px 23px 3px #f0f0f0b6;
    -moz-box-shadow: 8px -1px 23px 3px #f0f0f0b6;
    box-shadow: 8px -1px 23px 3px #f0f0f0b6;
}

#Box_Search_Prod{

    width: 300px; 
    height: 530px; 
    position: absolute; 
    left: 100%; 
    top: 2px;
    background-color: white;
    /*border: 2px solid #fbff00f5 !important;*/
    border: 2px solid #1cdf26d8 !important;
    -webkit-box-shadow: 8px -1px 23px 3px #2b2b2bb6;
    -moz-box-shadow: 8px -1px 23px 3px #2b2b2bb6;
    box-shadow: 8px -1px 23px 3px #2b2b2bb6;

}

#Box_Search_Prod_Opts{

    width: 300px; 
    height: 430px; 
    position: absolute; 
    left: 100%; 
    top: -63px;
    background-color: white;
    /*border: 2px solid #fbff00f5 !important;*/
    border: 2px solid #1cdf26d8 !important;
    -webkit-box-shadow: 8px -1px 23px 3px #2b2b2bb6;
    -moz-box-shadow: 8px -1px 23px 3px #2b2b2bb6;
    box-shadow: 8px -1px 23px 3px #2b2b2bb6;

}

.Bx-prod{
    border: 1px dashed #1567b477;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 7px;
}

.img-box{
    border-radius: 50%;
    margin-right: 5px;
}

.ms-l-divisor {
    border-bottom: 1px solid #e6e6e6;
    width: 100%;
}
.inp_modal_prod{
    padding: 5px;
    width: 150px;
    border-radius: 5px;
}
.inp_modal_prod-1{
    padding: 5px;
    width: 100px;
    border-radius: 5px;
}
.inp_modal_prod-6{
    padding: 5px;
    width: 60px;
    border-radius: 5px;
}
.inp_modal_prod-100{
    padding: 5px;
    width: 100%;
    border-radius: 5px;
}


/* Estilo de la tabla */
.Txl-min {
    width: 100%;
    border-collapse: collapse;
}

.Txl-min tr:nth-child(odd) {
    Background-color: #FFF;
    border-bottom: 1px solid #0c66ee36;
}

.Txl-min tr:nth-child(even) {
    Background-color: #F9FAFC;
    border-bottom: 1px solid #0c66ee36;
}

.Txl-min tbody tr:hover {
    background-color: #0c66ee11;
}

.Txl-min tbody td {
    padding: 16px;
    font-size: 14px;
    color: #5e5e5e;
    text-align: center;
    border: 'none';
}
    
/* Encabezado fijo */
.Txl-min thead th {

    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: 10px 0px;
    text-align: center;
    background-color: #03df6615;
    color: #0c0c0c;
    font-size: 15px;
    font-weight: 100;
    border-bottom: 1px solid #f3f3f3;    
}

/* Estilos de las celdas */
.Txl-min tbody td {
    padding: 10px;
/*     border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;   */  
}

/* Style Menu... */

.user-menu-container {
    position: relative;
    padding: 14px;
}

.menu-button {
    background: none;
    border: none;
    cursor: pointer;
    border: 1px solid #b8b8b8;
    border-radius: 5px;
    background-color: #007bd2;

    height: 41px;
    width: 41px;
}

.menu-button:hover img {
    transform: scale(1.1);
}

.icon-menu-button {
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    background-color: #007bd2;

    height: 41px;
    width: 41px;
}

.icon-menu-button:hover img {
    transform: scale(1.1);
}

.menu {
    position: absolute;
    top: 75px;
    right: 0;
    background: #FFF;
    border-radius: 10px;
    border: 2px solid #004f9954;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.363);
    width: 200px;
    z-index: 100;
    opacity: 0;
    padding: 10px;
    transform: translateY(-10px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* Estilos de la lista */
.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu li {
    cursor: pointer;
    transition: background 0.2s;
}

.menu li:hover {
    background: #f0f0f0;
}

/* Clases de animación */
.hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


.seleccionadas-container{
    padding: 10px;
    display: flex;
    flex-wrap: wrap;        
}

.item {
    display: flex;
    align-items: center;
    border: 1px solid #cccccc;
    background-color: #f1f1f1;
    border-radius: 4px;
    padding: 0px 5px;
    font-size: 11px;
    width: max-content;
    margin-right: 4px;
    margin-bottom: 4px;
}

.item div {
    margin-left: 5px;
    background-color: #ff004cbb;
    color: white;
    border: none;
    cursor: pointer;
    width: 15px;
    height: 15px;
    text-align: center;
    border-radius: 10px;
}

.val_green{
    border: 1px solid #1FBD4B;
}

.val_red{

    border: 1px solid #FF5555;
    width: 100%;
    padding: 25px;
    background-color: coral;
    color: white;
    font-size: 25px;
    box-sizing: border-box;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip-text {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;
    position: absolute;
    bottom: 15%;
    left: calc(50% - 70px);
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1001;
    font-size: 12px;

}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;    
}

/* 🟢 Menú Izquierdo */
.m_left_up {
    position: absolute;
    top: 50;
    left: 0;
    background: #ffffff;
    color: #fff;
    width: 300px;
    height: calc(100vh - 90px);
    transition: left 0.5s ease-in-out;
    margin-left: 10px;
    overflow-y: auto;
}

/* 🔴 Ocultar Menú */
.m_left_up.Trans_left {
    left: -310px;
}

/* 🔵 Contenido derecho */
.m_right_up {
    flex: 1;
    transition: margin-left 0.5s ease-in-out;
    margin-left: 310px; /* Cuando el menú está visible */

}

/* 🟡 Cuando el menú está oculto */
.m_left_up.Trans_left ~ .m_right_up {
    margin-left: 0;
}

/* Botón para alternar menú */
.toggle-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    z-index: 10;
}

.toggle-btn:hover {
    background: #0056b3;
}

.custom-row {
    text-align: left;
    padding: 10px;
    background-color: #17bb7c17;
    color: #181818;
    font-size: 14px;
    font-weight: 100;
    border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
    font-weight: 600;
    border-radius: 0px 5px 0px 0px;
}
.detail_prod{
    border-bottom: 1px solid #0066ff13;
}
.border-basic{
    border: 1px solid #f1f1f1;
}

.border-blue-01{
    border: 3px solid #4467d823;
}

.border-icon{
    width: max-content; 
    border-radius: 7px; 
    padding: 5px 30px; 
    background-color: white; 
    text-align: center; 
    border: 3px solid #e9e9e9;
    cursor: pointer;
}

.btn-enviar{
    font-size: 16px; 
    height: min-content; 
    width: max-content; 
    border-radius: 5px; 
    padding: 6px 30px; 
    background-color: #ee0f2d; 
    color: #ffffff; 
    text-align: center;
    cursor: pointer;
}


/* All MENU RIGHT */

.option_int {
  padding: 10px 0px 10px 30px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #585858;
  border: 1px dashed #fff;
  border-radius: 6px;
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}

/* Efecto de luz deslizante */
.option_int::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: skewX(-25deg);
  transition: all 0.5s ease;
}
.option_int:hover::before {
  left: 125%;
}
.option_int .bi{
    font-size: 20px;
}
.option_int:hover {
  background-color: #f8fdfb;
  color: var(--Blue-b);
  border: 1px solid var(--Green-T);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  transform: translateX(3px);
}

/* Ícono con pequeña animación */
.option_int i {
  transition: transform 0.3s ease;
}

.option_int:hover i {
  transform: scale(1.2) rotate(-5deg);
}

/* Estado activo */
.active-menu-int {
  background-color: var(--Green-T3);
  color: var(--Blue-a);
  border: 1px solid var(--Green-T2);
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 128, 0, 0.1);
  transform: scale(1.02);
  transition: all 0.3s ease-in-out;
}

/* Suave entrada */
.option_int {
  animation: fadeInMenu 0.6s ease forwards;
}

@keyframes fadeInMenu {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


.state-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    cursor: pointer;
}


/* Tooltip a la derecha */
.state-circle:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    left: calc(100% + 15px );
    transform: translateY(-50%);
    background: #333;
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 9999;
}

/* Flecha del tooltip apuntando hacia el circulito */
.state-circle:hover::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(100% + 6px );
    transform: translateY(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent #333 transparent transparent;
    z-index: 9999;
}

.noselect {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}