body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
.header {
    text-align: center;
    margin-bottom: 20px;
}
.card {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 10px; /* Margin to create space between cards */
    flex: 1; /* Allow cards to grow evenly */
    text-align: center;
    color: white; /* Change text color to white for better contrast */
    min-width: 250px; /* Ensure minimum width for cards */
}

.chart-container-json {
    width: 600px; /* Ajusta el ancho */
    height: 600px; /* Ajusta la altura */
    margin: auto; /* Centra el contenedor si lo deseas */
}

.card:hover {
    transform: scale(1.05); /* Aumenta el tamaño de la carta al pasar el mouse */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Mejora la sombra al hacer hover */
}

.card h2 {
    margin: 0 0 10px;
}
.card p {
    font-size: 1.5em;
    margin: 0;
}
/* Distinct card designs with more vibrant colors */
.card-mes {
    background-color: #007bff; /* Bright blue */
}

.card-json {
    background-color: #007bff;
}

.card-semana {
    background-color: #007bff; /* Bright green */
}
.card-dia {
    background-color: #007bff; /* Bright red */
}

.principal {
    background-image: url('../img/menu.png');
    background-repeat: no-repeat;
    display: inline-flex;
    background-color: #1a81ff; /* Bright blue */
    width: 150px;
    height: 50px;
    white-space: nowrap; 
    justify-content: center;    /* Centra los botones horizontalmente */
    align-items: center;        /* Centra los botones verticalmente (si es necesario) */
    text-decoration: none; /* Elimina el subrayado */

}

.faltantes {
    background-image: url('../img/faltantes.png');
    background-repeat: no-repeat;
    display: inline-flex;
    background-color: #007bff; /* Bright blue */
    width: 150px;
    height: 50px;
    white-space: nowrap; 
    justify-content: center;    /* Centra los botones horizontalmente */
    align-items: center;        /* Centra los botones verticalmente (si es necesario) */
    text-decoration: none; /* Elimina el subrayado */

}

.suscripcion {
    background-image: url('../img/pago.png');
    background-repeat: no-repeat;
    display: inline-flex;
    background-color: #007bff; /* Bright blue */
    width: 150px;
    height: 50px;
    white-space: nowrap; 
    justify-content: center;    /* Centra los botones horizontalmente */
    align-items: center;        /* Centra los botones verticalmente (si es necesario) */
    text-decoration: none; /* Elimina el subrayado */

}

.json-count {
    background-image: url('../img/contar.png');
    background-repeat: no-repeat;
    display: inline-flex;
    background-color: #007bff; /* Bright blue */
    width: 150px;
    height: 50px;
    white-space: nowrap; 
    justify-content: center;    /* Centra los botones horizontalmente */
    align-items: center;        /* Centra los botones verticalmente (si es necesario) */
    text-decoration: none; /* Elimina el subrayado */

}

.botonera {
    display: flex;          /* activa el modelo flex */
    flex-wrap: wrap;        /* permite saltos de línea */
    justify-content: flex-start; /* Alinea los botones a la derecha */
    gap: 10px; /* Espacio entre los botones */
    margin-top: 20px;
    padding: 10px;
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho */
}

.botonera a {
    display: inline-flex !important; /* Forzamos inline-block */
    width: auto !important; /* Evita que ocupen más espacio del necesario */
    max-width: fit-content !important; /* Asegura que no se expandan */
    padding: 10px 15px; /* Espaciado interno */
    text-decoration: none; /* Elimina subrayado */
    border-radius: 5px; /* Bordes redondeados */
    white-space: nowrap; /* Evita que se expandan por contenido */
}

.logout {
    background-image: url('../img/salir.png');
    background-repeat: no-repeat;
    display: inline-flex;
    background-color: #ff3535; /* Bright blue */
    width: 150px;
    height: 50px;
    white-space: nowrap; 
    justify-content: center;    /* Centra los botones horizontalmente */
    align-items: center;        /* Centra los botones verticalmente (si es necesario) */
    text-decoration: none; /* Elimina el subrayado */
}

.card-container {
    display: flex; /* Use flexbox for horizontal alignment */
    justify-content: space-between; /* Space between cards */
    margin-bottom: 20px; /* Space below cards */
}

.charts-container {
    display: flex; /* Usar flexbox para la alineación horizontal */
    justify-content: space-between; /* Espacio entre los gráficos */
    margin: 20px 0; /* Margen superior e inferior */
}

.graficos-container {
    display: flex;
    justify-content: center; /* Alinea los gráficos al centro */
    gap: 20px; /* Espacio entre cada gráfico */
    flex-wrap: wrap; /* Permite que se ajusten en pantallas pequeñas */
    margin-bottom: 20px;
}

.graficos-container canvas {
    max-width: 250px;
    height: auto;
}

/* Ajustes generales para los gráficos */
.chart-container-json,
.chart-container,
.chart-container-prod {
    flex: 1;
    margin: 0 10px;
    max-width: 100%; /* Asegura que los contenedores de los gráficos no se desborden */
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
}

/* Ajuste del canvas */
canvas {
    width: 100% !important; /* Asegura que el canvas ocupe todo el ancho del contenedor */
    height: auto !important; /* Mantiene la proporción adecuada */
    display: block; /* Cambia a display block para evitar cualquier problema de alineación */
    margin: auto; /* Centra el canvas */
}

/* 1) Asegurar que padding y border no expandan el ancho real */
.swal2-container .swal2-input,
.swal2-container .swal2-select {
  box-sizing: border-box; /* :contentReference[oaicite:0]{index=0} */
  width: 100%;            /* :contentReference[oaicite:1]{index=1} */
  max-width: 300px;       /* ajusta a tu gusto */
  margin: 0 auto;         /* centrar dentro de la celda */
}

/* 2) Definir un grid de 2 columnas con espacios uniformes */
.swal2-container .filter-grid {
  display: grid;                                  /* :contentReference[oaicite:2]{index=2} */
  grid-template-columns: repeat(1, 1fr);          /* dos columnas iguales :contentReference[oaicite:3]{index=3} */
  gap: 1rem;                                      /* espacio entre celdas */
  justify-items: stretch;                         /* que cada input llene su celda */
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {

    .charts-container {
    flex-direction: column;
    align-items: center; /* Centra los gráficos en vertical */
  }

  .charts-container > div {
    flex: 1 1 100%;
    max-width: 100%;
  }

    /* Cargar padding en body para que no esté pegado */
    body {
        padding: 15px;
    }

    /* Tarjetas: una columna, ancho completo de contenedor */
    .card-container {
        flex-direction: column;
        align-items: center;
    }
    .card {
        width: 100%;
        min-width: unset;
        margin: 10px 0;
    }

    /* Botonera: botones en columna con ancho mayor */
    .botonera {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .botonera a {
        width: 100% !important;      /* Ocupen todo el ancho disponible */
        max-width: none !important;
        font-size: 1.1em;            /* Texto un poco más grande */
        padding: 18px 0;             /* Más alto para dedo en móvil */
        min-width: unset;
        height: 60px;                /* Altura consistente y mayor */
    }

    /* Gráficos: una columna, cada uno ocupa todo el ancho */
    .graficos-container {
        flex-direction: column;
        align-items: center;
    }
    .chart-container-json,
    .chart-container,
    .chart-container-prod {
        width: 100%;
        margin: 10px 0;
    }
    .graficos-container canvas {
        height: 300px !important;    /* Altura adecuada para que se vean bien */
        max-width: 100%;
    }
}

/* ——————————————————————————————————
   Responsive: ajustes para pantallas de hasta 480px
   —————————————————————————————————— */
@media (max-width: 480px) {

    body {
        padding: 10px;
    }

    /* Ajuste extra en altura de gráficos para pantallas muy pequeñas */
    .graficos-container canvas {
        height: 250px !important;
    }

    /* Reducir tamaño de fuente en botones si es necesario */
    .botonera a {
        font-size: 1em;
        height: 50px;
        padding: 15px 0;
    }
}