:root {
     --vino-intenso: #7A1B38;
     --gris-oscuro: #333333;
     --marfil: #F8F4F0;
     --rosa-palo: #D9A5B3;
     --gris-claro: #CCCCCC;
     --gris-azul: #454E55;
 }

 .contenedor_col1,
 .contenedor_col2 {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     margin-top: 1.5rem;
 }

 .contenedor_col1 .columna1 {
     width: 100%;
 }

 .contenedor_col1 .columna2 {
     width: 100%;
     height: 100vh;
 }

 .contenedor_col2 .columna1 {
     width: 100%;
     height: 100vh;
 }

 .contenedor_col2 .columna2 {
     width: 100%;
 }

 /* A partir de 768px (pantallas medianas y grandes) */
 @media (min-width: 1100px) {
     .contenedor_col1 {
         flex-direction: row;
     }

     .contenedor_col1 .columna1 {
         width: 30%;
     }

     .contenedor_col1 .columna2 {
         width: 70%;
     }

     .contenedor_col2 {
         flex-direction: row;
     }

     .contenedor_col2 .columna1 {
         width: 70%;
     }

     .contenedor_col2 .columna2 {
         width: 30%;
     }
 }


/*  @media (max-width: 900px) {

     table,
     thead,
     tbody,
     tfoot,
     th,
     td,
     tr {
         display: block;
     }

     tr {
         margin-bottom: 1rem;
         border-bottom: 1px solid var(--gris-claro);
     }

     td {
         position: relative;
         padding-left: 50%;
     }

     td::before {
         position: absolute;
         left: 10px;
         top: 8px;
         white-space: nowrap;
         font-weight: bold;
         content: attr(data-label);
     }
 } */

 .tabla-scroll {
    width: 100%;
    overflow-x: auto;  /* Habilita scroll horizontal */
}

.tabla-scroll table {
    width: 100%;
    min-width: 600px; /* Evita que la tabla se achique demasiado */
    border-collapse: collapse;
}

/* Aplica solo en pantallas pequeñas */
@media (max-width: 768px) {
    .tabla-scroll {
        display: block;
        white-space: nowrap; /* Evita que las celdas salten de línea */
    }
}


 .mapa_mexico_sty {
     width: 80%;
     display: block;
     margin: 0 auto;
     height: 90vh;
 }

 .tabla-datos {
     width: 100%;
     margin: .5rem auto;
     padding: .5rem;
     border-collapse: collapse;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     border-radius: 12px;
     overflow: hidden;
     font-size: 1.7rem;
     text-align: center;
 }

 .tabla-datos thead {
     background-color: var(--vino-intenso);
     color: white;
 }

 .tabla-datos th,
 .tabla-datos td {
     padding: .3rem;
     text-align: center;
     border-bottom: 1px solid var(--marfil);
 }

 .tabla-datos tbody tr:hover {
     background-color: var(--gris-claro);
 }

 .tabla-datos td {
     color: var(--gris-oscuro);
 }

 .controls {
     display: flex;
     justify-content: space-between;
     margin-bottom: 10px;
 }

 .pagination {
     margin-top: 10px;
     font-size: 1.6rem;
 }

 .pagination button {
     background-color: var(--marfil);
     color: var(--gris-oscuro);
     border: var(--marfil);
 }

 .pagination button:hover {
     background-color: var(--gris-azul);
     color: var(--marfil);
 }

 button:disabled {
     opacity: 0.5;
     cursor: not-allowed;
 }

/*  canvas {
     background: white;
     border: 1px solid var(--gris-claro);
     padding: 10px;
 }

 .chart-container {
     position: relative;
     width: 95%;
     height: 50vh;
     margin: 30px 0px;
 }

 @media (min-width: 900px) {
     .chart-container {
         height: 80vh;
     }
 }
 */

 .chart-container {
    width: 100%;
    overflow-x: auto; /* Scroll horizontal */
}

.chart-container canvas {
    width: 900px; /* Tamaño mínimo de la gráfica */
    margin: auto;
}

/* En pantallas pequeñas, asegura que se pueda desplazar */
@media (max-width: 768px) {
    .chart-container {
        display: block;
        white-space: nowrap;
    }
}


 .elemento_descripcion {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100px;
     padding: 20px;
     text-align: center;
     background-color: var(--rosa-palo);
     border: 1px solid var(--gris-claro);
     border-radius: 12px;
     margin: 10px 0px;
     padding: 5px;
 }

 .elemento_descripcion p {
     font-size: 1.8rem;
     margin: 10px 0;
     text-align: center;
 }


 .descripcion .container {
     width: 100%;
     margin: 40px auto;
     padding: 0 20px;
 }

 .descripcion .card {
     width: 100%;
     background: white;
     border-radius: 12px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
     padding: 24px;
     margin-bottom: 24px;
     transition: transform 0.3s ease;
 }

 .descripcion .card:hover {
     transform: translateY(-5px);
 }

 .descripcion .card h2 {
     margin-top: 0;
     font-size: 2.3rem;
     color: var(--vino-intenso);
 }

 .descripcion .icon {
     font-size: 2rem;
     margin-right: 8px;
     color: var(--gris-azul);
 }

 @media (max-width: 600px) {
     .descripcion .info {
         flex-direction: column;
         align-items: flex-start;
     }
 }

 #botones button {
     background-color: var(--vino-intenso);
     color: white;
     border: 2px solid var(--gris-oscuro);
     padding: 0.6rem 1.2rem;
     margin: 0.5rem;
     border-radius: 6px;
     cursor: pointer;
     transition: background-color 0.3s, color 0.3s;
 }

 #botones button:hover {
     background-color: var(--gris-oscuro);
     color: var(--marfil);
 }

 #botones {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
 }

 .pagination_mun {
     margin-top: 10px;
 }

 .pagination_mun button {
     margin-right: 5px;
     border: var(--gris-oscuro) solid 2px;
     padding: 2px 10px;
     border-radius: 15px;
     color: white;
     background-color: var(--vino-intenso);
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
 }

 .pagination_mun button:hover {
     background-color: var(--gris-azul);
     border: var(--vino-intenso);
 }

 .fuentes_pie {
     text-align: center;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     font-size: .9rem;
     color: rgb(99, 30, 30);
     margin-bottom: 40px;
     margin-top: -10px
 }


 .fuente_mapa {
     margin-top: -30px;
 }

 .fuente_mapa_sub_pro {
     margin-top: 1px;
 }

 .fuente_elemento {
     margin-top: 8px
 }

 .boton-recargar {
     background-color: var(--gris-azul);
     border: var(--gris-oscuro) solid 2px;
     color: var(--marfil);
 }

 .boton-recargar:hover {
     background-color: var(--marfil);
     color: var(--gris-oscuro);
 }