#message{
    width: 100%;
    padding: 0 1.15rem .25rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: .5px;
    color: #333;

    display: none;
}

.dashboard-grid {
    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); */
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
        "Grifero Grifero Grifero Ventas Clientes Clientes Clientes"
        "Grifero Grifero Grifero Cobro Clientes Clientes Clientes"
        "Grifero Grifero Grifero Cobro Clientes Clientes Clientes"
        "Grifero Grifero Grifero Cobro Clientes Clientes Clientes"
        "Contometros Contometros cobro-detalle cobro-detalle cobro-detalle cobro-detalle cobro-detalle"
        "Contometros Contometros descuento-detalle descuento-detalle descuento-detalle descuento-detalle descuento-detalle"
        "Creditos Creditos Grafico-Credito Grafico-Credito Grafico-Credito Grafico-Credito Grafico-Credito"
        "Creditos Creditos Grafico-Credito Grafico-Credito Grafico-Credito Grafico-Credito Grafico-Credito"
        "compras compras compras compras compras compras compras";
    gap: 20px;
    flex-grow: 1;
    padding: 1rem;

    overflow: scroll;
    max-width: 100vw;
    height: 90vh;

    background-color: #e2e2e2;
    padding-bottom: 4rem;
}

/* Cuando el div clientes este oculto */
.dashboard-grid.clientes-oculto{
    /* grid-template-columns: repeat(8, 1fr); */
    grid-template-rows: auto;
    grid-template-areas:
        "Grifero Grifero Grifero Ventas Clientes Clientes Clientes"
        "Grifero Grifero Grifero Cobro Clientes Clientes Clientes"
        "Grifero Grifero Grifero Cobro Clientes Clientes Clientes"
        "Grifero Grifero Grifero Cobro Clientes Clientes Clientes"
        "detalleUsuario detalleUsuario detalleUsuario detalleUsuario detalleUsuario detalleUsuario detalleUsuario"
        "Contometros Contometros cobro-detalle cobro-detalle cobro-detalle cobro-detalle cobro-detalle"
        "Contometros Contometros descuento-detalle descuento-detalle descuento-detalle descuento-detalle descuento-detalle"
        "Creditos Creditos Grafico-Credito Grafico-Credito Grafico-Credito Grafico-Credito Grafico-Credito"
        "Creditos Creditos Grafico-Credito Grafico-Credito Grafico-Credito Grafico-Credito Grafico-Credito"
        "compras compras compras compras compras compras compras";  
}

#ventas{
    grid-area: Ventas;
    visibility: visible;

    transition: transform 0.7s ease-in-out;
    z-index: 1000;
}

#contometro{
    grid-area: Contometros;
}

#cobro{
    grid-area: Cobro;
    visibility: visible;

    transition: transform 0.7s ease-in-out;
    z-index: 1000;

}

#clientes{
    grid-area: Clientes;
    gap: .5rem;

    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    opacity: 1;
    visibility: visible;
    z-index: 1000;
}

.cliente-oculto{
    opacity: 1;
    visibility: visible;
}

#clientes.cliente-oculto{
    opacity: 0;
    visibility: hidden;
}

/* Estilo para el div detalleUsuarios cuando se muestra */
.detalle-usuarios.visible{
    grid-area: detalleUsuario;
    overflow: auto;
    height: 75vh;

    opacity: 1;
    visibility: visible;
    
    transition: transform 0.3s ease-in-out, opacity 0.1s ease-in-out;
    background-color: #f2f2f2;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;

    padding-bottom: 2rem;
    animation: ocultar .5s ease-in normal;

}


/* DETALLE VENTA DIARIA USUARIO */
/* Estilo inicial del div de detalles (oculto) */
.detalle-usuarios.oculto{
    opacity: 0; 
    transform: translateY(-100%); /* Empuja el div fuera de la pantalla hacia la derecha */
    transition: transform .3s ease-in-out, opacity 0.1s ease-in-out;
    position: absolute; /* Asegúrate de que esté en la misma posición que el div "usuarios" */
    top: 0;
    right: 0;
    background-color: #f2f2f2;
    /* width: 300px; */
    height: 100%;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    z-index: -1000;

}

@keyframes ocultar {
    0%{
        opacity: 0; 
        transform: scaleY(-100%);
        transform: translateY(-100%);
    }
    50% {opacity: 0}
    75% {opacity: 0.5;}
    100%{
        opacity: 0.8; 
        transform: scale(0);
        transform: translateY(0%);    
    }
}

/* Estilo para mostrar el div de detalles */
.detalle-usuarios.visible {
    transform: translateY(0); /* Lleva el div de vuelta a la pantalla */
    opacity: 1;
}

#usuarios{
    grid-area: Grifero;
    z-index: 1000;
}


/* #grafico-cobro{
    grid-area: Grafico1;
} */

/* #credito-detalle{
    grid-area: Creditos;
} */

#credito-grafica{
    grid-area: Grafico-Credito;
    overflow-x: auto;
    height: 100vh;
    padding-top: 1rem;
}

.box {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;

    /* background-color: white;
    padding: 20px; */
    border-radius: 8px;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
}

.filtro-container{
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-grow: 1;

    padding: .7rem 1rem;
}

.form-group{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    background-color: #f2f2f2;
    border-radius: 8px;
    text-align: left;
    flex-grow: 1;
}

.form-group--upload{
    width: 100%;
    background-color: inherit;
    border: 0;

    gap: .5rem;
}

/* Estilos para el contenedor de los formularios */
form {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    width: 98%;
    display: flex;
    justify-content: left;
    align-items: center;
    gap: .5rem;
    flex-grow: 1;
}

/* Estilos para las etiquetas de los formularios */
/* label {
    display: block;
    color: #555;
    font-weight: bold;
    font-size: 1rem;
    flex-grow: 1;

    min-width: 12%;
} */

/* Estilos para los inputs */
input[type="file"],
input[type="date"],
select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;

    flex-grow: 1;
}


/* Estilos para los botones */
button[type="submit"] {
    height: 100%;
    background-color: var(--bs-btn-disabled-bg);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 20px;

    margin-left: .8rem;
}

button[type="submit"]:hover {
    background-color: var(--bs-btn-active-bg);
    box-shadow: var(--bs-btn-active-shadow);
}

/* Estilos específicos para el selector de sucursal */
#branchSelect {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
}

/* Estilos para alinear el contenido del formulario */
#uploadForm{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

#uploadForm,
#dateForm,
#branchSelectForm {
    margin: 20 auto;
}

#dateForm,
#branchSelectForm {
    background-color: inherit;
    padding: 0;
    margin: 5 auto;
    border-radius: 0;
    border: 0;
    box-shadow: 0 0 0 0;

    /* width: 98%;
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 1rem;
    flex-grow: 1; */
}

.inner-grid {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 2rem;
    flex-grow: 1;
}

.inner-box {
    /* width: 100%;
    height: 100%; */
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    border-radius: 20px;
    flex-grow: 1;
    cursor: pointer;
}

.box--creditos {
    grid-area: Creditos;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
}

.creditos-item {
    text-align: center;
    flex: 1;
    border-radius: 20px;
}

.grid-item {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.wide {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.5rem;

    flex-grow: 1;
    /* flex-wrap: wrap; */
}

.grafico--anillo--medio{
    width: 75%;    
    margin-right: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;

    flex-grow: 1;
}

.grafico--anillo--medio > .inner-grid{
    /* width: 100%; */
    width: 100px;
    flex-grow: 1;
    gap: 1rem;
}

.chart-container {
    position: relative;
    display: inline-block; /* Asegura que el tamaño del contenedor se ajuste al canvas */
}

.chartPorcentaje {
    display: block; /* El canvas ocupe todo el espacio del contenedor */
}

.chart-label {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px; 
    color: black; 
    pointer-events: none; /* Asegura que el span no interfiera con el canvas */
}

.chart-label > h3{
    font-size: 2.5rem;
    font-weight: bold;
}

.chart-label > span{
    font-size: 1.1rem;
    margin-top: .5rem;
}

.wide > .inner-grid--label{
    min-width: 20%;
    width: 20%;
}

.wide > .inner-grid--label, 
.wide > .grafico--anillo--medio{
    flex-grow: 1;
}

#grafico-cobro{
    grid-area: cobro-detalle;
}

#grafico-descuento{
    grid-area: descuento-detalle;
}

#compras{
    grid-area: compras;
}


/* ------------------------ */
/* Estilos CSS para la tabla */
.box--start{
    justify-content: flex-start;
}

.box > #salesChart{
    margin-top: 1.5rem;
    padding: 1rem;
}

.top-clientes-table td + td {
    border-left: 2px solid transparent;
}
.top-sellers-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 15px 0px;
}

.top-clientes-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
}

.top-clientes-table th, .top-sellers-table td {
    text-align: left;
    padding: 15px;
}

.top-clientes-table thead {
    border-bottom: 2px solid #333;
}

.top-clientes-table tbody tr {
    border-bottom: 1px solid #ccc;
}

.top-clientes-table tbody tr:last-child {
    border-bottom: 2px solid #333;
}

.top-clientes-table tbody tr:hover {
    background-color: #f9f9f9;
}

.top-clientes-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}
.top-clientes-table th:first-child{
    width: 30%;
}

.top-clientes-table th:nth-child(2){
    width: 50%;
}

.top-clientes-table th:nth-child(3){
    width: 20%;
}

.top-clientes-table th:nth-of-type(3) td{
    text-align: center;
}

.top-clientes-table td {
    color: #333;
}

/* Opcional: Agrega un estilo tipo "cartel" */
.top-sellers-container h3 {
    background-color: #007BFF;
    color: #fff;
    padding: 10px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 5px;
}


/* Tabla sin borde contometro */
/* Estilo para el contenedor de la tabla */
.table-container {
    margin-top: 20px;
}

/* Estilo para la tabla */
.table-contometro {
    width: 100%;
    border-collapse: collapse; /* Elimina los espacios entre las celdas */
    background-color: #f9f9f9; /* Fondo suave para la tabla */
}

/* Estilo para las celdas del encabezado */
.table-contometro th {
    text-align: left;
    padding: 10px;
    font-weight: bold;
    background-color: #2c3e50; /* Fondo oscuro para el encabezado */
    color: white; /* Texto blanco */
}

/* Estilo para las celdas del cuerpo */
.table-contometro td {
    padding: 10px;
    border-bottom: 1px solid #e0e0e0; /* Línea de separación suave entre filas */
}

/* Quitar los bordes de la tabla */
.table-contometro, 
.table-contometro th, 
.table-contometro td {
    border: none;
}

/* Estilo para las filas alternas */
.table-contometro tr:nth-child(even) {
    background-color: #f2f2f2; /* Color de fondo alterno para las filas pares */
}

/* Resaltar una fila cuando el ratón pasa por encima */
.table-contometro tr:hover {
    background-color: #d1ecf1;
}


/* Circular con hueco */
.donut-chart-container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

#donutChart {
    width: 100%;
    height: 100%;
}

.center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: center;
}


/* ------------------------ 
    CHARTS
*/


/* ---------------------------- */