/* ================================================ */
/* PASO 1: VARIABLES DE COLOR (CON TU PALETA DE LOGO) */
/* ================================================ */
:root {
    --primary-color: #F2071B;    /* Rojo principal del logo */
    --primary-hover: #C80617;    /* Un rojo ligeramente más oscuro para el hover */
    --secondary-color: #0D0D0D;  /* Negro/Gris oscuro del logo para textos */
    --card-bg: #FFFFFF;         /* Blanco para las tarjetas */
    --card-header-bg: #F2F2F2;   /* Gris claro del logo para fondos sutiles */
    --border-color: #E2E8F0;     /* Un gris neutro y suave para los bordes */
}

body {
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f8f9fa; 
    color: var(--secondary-color); /* Aplicamos el color de texto base */
}


/* ================================================ */
/* PASO 2: ESTILOS GENERALES (TARJETAS, BOTONES, TÍTULOS) */
/* ================================================ */

/* Mejora en las tarjetas */
.card {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
}

.card-header {
    background-color: var(--card-header-bg);
    border-bottom: 1px solid var(--border-color);
    font-weight: 500;
}

/* Estilo de botones adaptado a la nueva paleta */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}
.btn-danger { /* El botón de peligro ahora también usa el rojo de tu marca */
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-danger:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}
.btn-success {
    background-color: #38A169;
    border: none;
}
.btn-success:hover {
    background-color: #2F855A;
}
.btn-info {
    background-color: #3182CE;
    border: none;
}
.btn-info:hover {
    background-color: #2B6CB0;
}

/* Títulos más limpios */
h1, h3 {
    color: var(--secondary-color);
}


/* ================================================ */
/* PASO 3: ESTILOS ESPECÍFICOS (TABLAS) */
/* ================================================ */

table.dataTable thead {
    background-color: transparent;
    border-bottom: 2px solid var(--border-color);
}

table.dataTable thead th {
    color: var(--secondary-color);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

table.dataTable tbody tr td {
    vertical-align: middle;
    padding: 1rem 0.75rem;
}

.table-hover > tbody > tr:hover {
    background-color: #F2F2F2 !important; /* Usamos el gris claro de tu paleta */
}

table.dataTable .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    margin-right: 0.25rem;
}


/* ================================================ */
/* CORRECCIONES Y ESTILOS ORIGINALES */
/* ================================================ */

/* Corrección para tablas con cabecera oscura */
/* Corrección para tablas con cabecera oscura */

table.dataTable .table-dark th {

    color: #FFFFFF; /* Forzamos el texto a blanco en cabeceras oscuras */
}

/* Estilos específicos que ya tenías */
#tabla-inventario tbody td {
    font-size: 12px;
    vertical-align: middle;
    color: #212529;
}

.sticky-top-card {
    position: -webkit-sticky;
    position: sticky;
    top: 1rem;
    z-index: 1000;
}

/* Estilo para la barra de navegación personalizada */
.navbar-brand-dark {
    background-color: #0D0D0D; /* El negro de tu logo */
}
/* ================================================ */
/* MEJORA PARA ENLACES DE LA BARRA DE NAVEGACIÓN    */
/* ================================================ */

/*
  Esta regla hace que los enlaces del menú se pongan blancos
  cuando el ratón pasa por encima (:hover) o cuando es el
  enlace de la página activa (.active).
*/
.navbar-brand-dark .navbar-nav .nav-link:hover,
.navbar-brand-dark .navbar-nav .nav-link.active {
    color: #FFFFFF; /* Texto blanco puro */
}

/*
  Opcional: Añade una transición suave para que el cambio
  de color no sea tan brusco al pasar el ratón.
*/
.navbar-brand-dark .navbar-nav .nav-link {
    transition: color 0.2s ease-in-out;
}