:root {
    --arol-rojo: #E30613;
    --arol-gris: #C4C4C4;
}

body {
    font-family: Arial, sans-serif;
    margin: 8px;
}

/* 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: #7D0A0A;
    /* 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: #ddd;
}

/* 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: 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 */
}

/*--- NAVEGATION BAR ---*/

.navbar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar a {
    color: inherit;
    text-decoration: none;
    padding: 15px;
    display: block;
    text-align: center;
    font-family: kari-display-pro, sans-serif;
    border: 2px solid transparent;
}

.navbar a:hover {
    background-color: #FFE700;
    color: #292F77;
    border: 2px solid #FFFFFF;
}

.navbar li {
    float: left;
}