/* Modo claro (predeterminado) */
body {
    background-color: #ffffff;
    color: #000000;
}

table {
    background-color: #ffffff;
    color: #000000;
}


/* Modo oscuro */
body.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

body.dark-mode table {
    background-color: #1e1e1e;
    color: #ffffff;
}

body.dark-mode .container {
    background-color: #121212;
}

body.dark-mode .container .alert-info {
    color: var(--bs-info-bg-subtle) !important;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(2n+1) > * {
    color:lightgray !important;
}

.table-striped > tbody > tr:nth-of-type(2n+1) > * {
    color:black ;
}

.text-muted {
    color: var(--bs-secondary-color);
}

body.dark-mode .text-muted {
    color: white !important;
}

body.dar-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: white !important;
}


/* Cambiar colores de botones */
body.dark-mode .btn {
    background-color: #444;
    color: #ffffff;
}

body.dark-mode .form-control {
    background-color: #333;
    color: #ffffff;
    border-color: #555;
}

body.dark-mode .bluedess {
    color: #0099cc;  /* Cambia el color de texto azul si lo deseas */
}

/* Tiempos de transición */
body {
    transition: background-color 0.3s, color 0.3s;
}

body.dark-mode {
    transition: background-color 0.3s, color 0.3s;
}

.tresult {
    color: #00A9CE !important;
    font-weight: bold;
    font-size: xx-large;
}

.logo {
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    float: left;
}
.btn {
    background-color: #00A9CE !important;
    border-color: #ccc !important;
}
.form-label {
    color: #fff !important;
}
.bluedess { 
    color: #00A9CE !important;
}

.negrita { font-weight: bold;}

.xlarge { font-size: x-large;}

.card p b { color:#555; }

.filters {
    /*border: 1px solid #ddd;*/
    border-radius: 20px;
    padding: 20px 20px 30px 20px;
    background-color: #00A9CE;
}
/* Mantener el tamaño de fuente de la tabla */
#resultTable td,
#resultTable th {
    font-size: 14px !important; /* Define el tamaño que prefieras */
}

/* Opcional: Ajustar el tamaño de las entradas del buscador de filtros */
#resultTable thead input {
    font-size: 14px !important;
}

/* Asegurar que las celdas mantengan un diseño limpio */
#resultTable td {
    white-space: nowrap; /* Evitar que se rompan las líneas */
}

.titlegraph {
    text-align: center;
    display: none;
}

#startDate, #endDate {
    text-align: center;
}

.divconte {
    border: 1px solid #00A9CE;
    border-radius: 20px;
    padding: 20px;
    width: 48%;;
}

/* Asegurar que la tabla no sobresalga */
#resultTable {
    width: 100%; /* Ajustar al ancho completo del contenedor */
    table-layout: auto; /* Permitir el ajuste dinámico de las columnas */
    word-wrap: break-word; /* Permitir que el texto se ajuste si es muy largo */
    overflow-x: auto; /* Habilitar el desplazamiento horizontal si es necesario */
}

#downloadsByEmailChart {
    transform:scale(0.75); 
    margin-top:-8em;
}

/* MOVIL VERTICAL */
@media screen and (max-width: 768px) and (orientation: portrait) {
    #downloadsByEmailChart { 
        margin-top: -2em !important;
    }

    #resultContainer {
        overflow-x: auto; /* Habilitar desplazamiento horizontal */
        -webkit-overflow-scrolling: touch; /* Suavidad en scroll para iOS */
    }

    #resultTable thead th {
        font-size: 0.9rem; /* Ajustar el tamaño del texto */
    }

    #resultTable tbody td {
        font-size: 0.8rem; /* Ajustar el tamaño del texto */
        white-space: nowrap; /* Evitar que el texto se divida */
    }
    .labelwtop {
        margin-top: 10px;
    }
}

/* MOVIL HORIZONTAL */
@media screen and (max-width: 920px) and (orientation: landscape) {
    #downloadsByEmailChart { 
        margin-top: -5em !important;
    }
}