/* Estilos globales para la barra de desplazamiento */
::-webkit-scrollbar {
    width: 10px; /* Ancho de la barra de desplazamiento */
    height: 10px; /* Altura de la barra de desplazamiento horizontal */
  }
  
  ::-webkit-scrollbar-track {
    background: #f1f1f1c3; /* Fondo semi-transparente */
    border-radius: 20px; /* Bordes redondeados */
  }
  
  ::-webkit-scrollbar-thumb {
    background: #888; /* Color del thumb */
    border-radius: 20px; /* Bordes redondeados */
    border: 3px solid transparent; /* Borde transparente */
    background-clip: padding-box; /* Evita que el fondo se extienda más allá del borde */
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color más oscuro al pasar el mouse */
  }
  
  /* Estilos para Firefox */
  * {
    scrollbar-width: thin; /* Ancho de la barra de desplazamiento */
    scrollbar-color: #888 #f1f1f1c3; /* Color del thumb y del track */
  }
  
  /* Estilos específicos para contenedores de tablas */
  .card-body.modis,
  .card-body.modi {
    overflow: auto !important;
    scrollbar-width: thin; /* Para Firefox */
  }
  
  .card-body.modis .table-responsive,
  .card-body.modi .table-responsive {
    scrollbar-width: thin !important; /* Para Firefox */
  }
  
  /* Media queries para responsive design */
  @media screen and (max-width: 1656px) {
    .card-body.modis .table-responsive {
      min-width: 1225px;
      overflow: hidden !important;
    }
  }
  
  @media screen and (min-width: 1496px) and (max-width: 1627px) {
    .col-md-4 {
      width: 30.333333% !important;
    }
    .col-md-8 {
      width: 69% !important;
    }
    .card-body.modi {
      overflow: auto !important;
    }
  }
  
  @media screen and (max-width: 1496px) {
    .card-body.modi .table-responsive {
      min-width: 880px;
      overflow: hidden !important;
    }
  }
  
  @media screen and (max-width: 1400px) {
    .am5-layer-0 {
      width: 100% !important;
      position: relative !important;
      height: 100% !important;
    }
  }
  
@media screen and (max-width: 1656px){
    .card-body.modis .table-responsive{
    scrollbar-width: thin !important;;
}
.card-body.modis{
    overflow: auto !important;
    scrollbar-width: thin;
}
.card-body.modis .table-responsive{
    min-width: 1225px;
    overflow: hidden !important;
}
}
@media screen and (min-width: 1496px) and (max-width: 1627px){
    .col-md-4 {
        width: 30.333333% !important;
    }
    .col-md-8 {
        width: 69% !important;
    }
    .card-body.modi{
        overflow: auto !important;
        scrollbar-width: thin;
    }
}
@media screen and (max-width: 1496px){
    .card-body.modi .table-responsive{
    scrollbar-width: thin !important;;
}
.card-body.modi{
    overflow: auto !important;
    scrollbar-width: thin;
}
.card-body.modi .table-responsive{
    min-width: 880px;
    overflow: hidden !important;
}
}
@media screen and (max-width: 1400px){
    .am5-layer-0{
        width: 100% !important;
        position: relative !important;
        height: 100% !important;
    }
}
/* @media (max-width: 1390px) {
    .app-sidebar {
        display: none;
        width: var(--bs-app-sidebar-width);
        z-index: 106;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 0;
    }
    .app-main {
        padding-left: 0;
        padding-right: 0;
    }    
    .app-container {
        max-width: none;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    [data-kt-app-header-fixed-mobile="true"] .app-header {
        z-index: 100;
        transition: none;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
    }
    [data-kt-app-header-fixed-mobile="true"] .app-header {
        z-index: 100;
        transition: none;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
    }
    .app-header {
        height: var(--bs-app-header-height);
        align-items: stretch;
    }
    .app-wrapper {
        transition: margin-left 0.3s ease, margin-right 0.3s ease;
    }
    [data-kt-app-header-fixed-mobile="true"] .app-wrapper {
        margin-top: var(--bs-app-header-height);
    }
} */
@media (max-width: 1300px) {
    [data-kt-app-sidebar-fixed="false"] .app-sidebars {
        position: fixed;
        z-index: 105;
        top: 0;
        /* bottom: 0; */
        left: 0;
    }
    .app-sidebars {
        display: none;
        width: var(--bs-app-sidebar-width);
        z-index: 9999;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 0;
    }
    .app-sidebars {
        border-right: var(--bs-app-separator-border) !important;
    }
    .drawer.drawer-start {
        left: 0;
        transform: translateX(-100%);
    }
}
@media screen and (max-width: 1201px){
    .sli .card-body, .table-responsive{
        scrollbar-width: thin !important;;
    }
    .sli.card-body{
        overflow: auto !important;
    }
    .sli > .table-responsive{
        min-width: 880px;
        overflow: hidden !important;
    }
}
@media screen and (max-width: 1171px){
    .w-c {
        min-width: 200px !important;
        width: calc(50% - 1rem) !important;
    }
}
@media screen and (max-width: 992px){
    .listap{
        gap: 45px;  
    }
    .tama{
        max-width: 550px;
        width: 100%; 
    }
    .symbol.symbol-45px > img {
        width: 40px;
        height: 40px;
    }    
} 
@media screen and (max-width: 731px){
    .opciones {
        gap: 25px;
        width: 240px;
    }
    .boton-multiple-choice {
        width: 178px;
    }
    .espacios {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr); /* Cambia a 2 columnas */
    }
}
@media screen and (max-width: 655px){
    .marg{
        margin-top: 4rem;
    }
}
@media screen and (max-width:571px){
    .d-flex-c {
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
    }
}
@media screen and (max-width:500px){
    .gradient-left, .gradient-right{
        width: 100%;
    }
}

@media screen and (max-width: 452px) {
    .w-c {
        width: calc(100% - 1rem) !important;
    }
}
@media screen and (max-width: 400px) {
    .letras-grandotas{
        font-size: clamp(35px, 1.2vw, 50px);
    }
    .letras-bajo{
        font-size: clamp(20px, 1vw, 30px);
    }
}