:root {
    --arol-rojo: #E30613;
    --arol-gris: #E3E3E3;
}
body {
    font-family: Arial, sans-serif;
    background-color: var(--arol-gris);
    /* Clave: asegura que el padding y border no aumenten el ancho total */
    box-sizing: border-box;
    /* Previene el desbordamiento horizontal forzando a ocultar cualquier exceso */
    overflow-x: hidden;
    /* Asegura que no haya margen extra que cause el scroll horizontal */
    margin: 20px;
}

::selection {
    background-color: var(--arol-rojo);
    color: var(--arol-gris);
}

/* Estilo para el campo de búsqueda */

.upcase {
    text-transform: uppercase;
}

#buscador {
    width: 100%;
    padding: 10px;
    margin-bottom: 0px;
    box-sizing: border-box;
    /* Asegura que el padding no afecte el ancho total */
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Estilo para la tabla */
#tablaDevoluciones {
    width: 100%;
    border-collapse: collapse;
    /* Quita los espacios entre las celdas */
}

/* Estilo para el encabezado de la tabla */
#tablaDevoluciones th {
    background-color: #740001;
    /* Un color azul para el encabezado */
    color: white;
    padding: 12px;
    text-align: left;
}

/* Estilo para las celdas de datos */
#tablaDevoluciones td {
    border: 1px solid #ddd;
    padding: 8px;
}

/* Efecto de "zebra" para mejor legibilidad */
#tablaDevoluciones tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Pequeño efecto al pasar el ratón */
#tablaDevoluciones tbody tr:hover {
    background-color: #848C8E;
}

/* style.css (Añadir al final de tu archivo CSS) */

/* Contenedor principal del encabezado */
#header-area {
    display: flex;
    justify-content: space-between;
    /* Mueve las columnas a los extremos */
    align-items: center;
    /* Centra verticalmente */
    padding: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

/* Área de Logo y Título */
#header-left {
    display: flex;
    align-items: center;
}

/* Estilo para simular el LOGO 
#logo-placeholder {
    background-color: #e3000f;
    color: white;
    font-weight: bold;
    padding: 20px;
    height: 60px;
    width: 60px;
    text-align: center;
    line-height: 20px;
    margin-right: 20px;
} */

#logo {
    padding: 0px 20px;
}

/* Ajuste del título */
#titulo-area h1 {
    font-size: 1.5em;
    /* Título un poco más pequeño */
    margin: 0 0 5px 0;
    font-weight: normal;
    /*color: #333;*/
}

/* Ajuste del Buscador en su nueva ubicación */
#buscador {
    width: 100%;
    /* Ocupa todo el espacio disponible */
    padding: 8px;
    margin-bottom: 0;
    /* Quitar el margen de abajo */
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    max-width: 300px;
    /* Limitar el ancho para que no se extienda demasiado */
}


/* Panel de Resumen (Contadores) - AJUSTE DEL TAMAÑO Y POSICIÓN */
#resumen-dashboard {
    display: flex;
    gap: 30px;
    /* Espacio entre los indicadores */
    padding: 0;
    border-bottom: none;
}

/* Estilo para cada tarjeta/indicador */
.indicador {
    text-align: center;
    /* Centrar el número y la etiqueta */
    padding: 0 10px;
    /* Reducir padding horizontal si es necesario */
}

/* Estilo para el número grande (más grande ahora) */
.indicador .numero {
    display: block;
    font-size: 3.5em;
    /* Aumentamos el tamaño de la fuente para que destaque más */
    font-weight: 300;
    line-height: 1;
    /* Asegura que no haya espacio extra */
    /*color: #7D0A0A;*/
    /* Color que coincida con el encabezado de tu tabla */
    margin-bottom: 5px;
    /* Espacio entre el número y la etiqueta */
}

/* Estilo para la etiqueta descriptiva (debajo del número) */
.indicador .etiqueta {
    display: block;
    /* Asegura que esté en su propia línea */
    font-size: 0.9em;
    /* Un poco más grande para ser más legible */
    /*color: #666;*/
    margin-top: 0;
    /* No necesitamos margen superior si el número ya tiene margin-bottom */
}

/* Media query para dispositivos móviles */
@media screen and (max-width: 768px) {
    #header-area {
        flex-direction: column;
        padding: 1rem;
    }

    #header-left {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    #logo {
        margin-bottom: 1rem;
    }

    #titulo-area {
        text-align: center;
        width: 100%;
    }

    #titulo-area h1 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    #buscador {
        width: 100%;
        margin-bottom: 1rem;
    }

    #resumen-dashboard {
        width: 100%;
        justify-content: space-around;
        margin-top: 1rem;
    }

    .indicador {
        margin: 0.5rem;
    }

    /* Ajustes para la tabla en móvil */
    #tablaDevoluciones {
        font-size: 0.9rem;
    }

    #tablaDevoluciones th,
    #tablaDevoluciones td {
        padding: 0.5rem;
    }
}

/* Para pantallas muy pequeñas */
@media screen and (max-width: 480px) {
    .indicador .numero {
        font-size: 1.5rem;
    }

    .indicador .etiqueta {
        font-size: 0.8rem;
    }

    #tablaDevoluciones {
        font-size: 0.8rem;
    }
}