/* =========================================
   0. VARIABLES CORPORATIVAS (Benitomo BT24)
   ========================================= */
:root {
    --bt-red: #d9232d;        /* Rojo intenso del logo */
    --bt-dark-bg: #1a1a1a;    /* Fondo principal muy oscuro */
    --bt-card-bg: #2c2c2c;    /* Fondo de tarjetas y paneles */
    --bt-text-light: #f8f9fa; /* Color de texto principal */
    --bt-text-muted: #adb5bd; /* Color de texto secundario */
    --bt-border-color: #444;  /* Color de bordes sutiles */
}

/* =========================================
   1. ESTILOS GENERALES (Tema Dark Corporativo)
   ========================================= */
body {
    background-color: var(--bt-dark-bg);
    color: var(--bt-text-light);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
    /* Opcional: Usar la imagen de fondo con una capa oscura encima para que se lea el texto */
    background-image: linear-gradient(rgba(26, 26, 26, 0.85), rgba(26, 26, 26, 0.6)), url('../img/Wallpaper-24hr.jpg');
    background-size: cover;
    background-attachment: fixed;
}

/* Encabezados y Textos */
h1, h2, h3, h4, h5, h6 {
    color: var(--bt-text-light);
    font-weight: 700;
}

.text-muted {
    color: var(--bt-text-muted) !important;
}

.text-dark {
    color: var(--bt-text-light) !important; /* En modo oscuro, el "texto oscuro" debe ser claro */
}

/* Animaciones */
.fade-in { animation: fadeIn 0.8s ease-in; }
.seccion-pantalla { animation: slideIn 0.6s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================
   2. TARJETAS E INDICADORES (KPIs)
   ========================================= */
.card, .card-kpi, .card-sector, .card-tabla {
    background-color: var(--bt-card-bg);
    border: 1px solid var(--bt-border-color);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Sombra más oscura */
}

.card-kpi {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.card-kpi:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(217, 35, 45, 0.2) !important; /* Resplandor rojo al pasar el mouse */
    border-color: var(--bt-red);
}

/* Bordes de color para KPIs */
.border-warning { border-color: var(--bt-red) !important; } /* Usamos rojo para destacar */
.border-primary { border-color: var(--bt-text-light) !important; } /* Blanco/Gris para contraste */
.border-success { border-color: #28a745 !important; } /* Mantenemos verde para 'Socios' si se desea, o cambiar a otro tono */
.border-info { border-color: var(--bt-text-muted) !important; }
.border-danger { border-color: var(--bt-red) !important; }

/* Iconos en KPIs */
.icon-box {
    width: 45px; height: 45px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    font-size: 1.2rem;
    background-color: rgba(255, 255, 255, 0.05); /* Fondo sutil para el icono */
}

/* Colores de texto e iconos en KPIs */
/* .text-warning { color: var(--bt-red) !important; }  El amarillo ahora es rojo corporativo */
/* .text-primary { color: var(--bt-text-light) !important; } */
.text-success { color: #2ecc71 !important; } /* Un verde más brillante para fondo oscuro */
.text-danger { color: var(--bt-red) !important; }
.text-info { color: var(--bt-text-muted) !important; }

.bg-warning.bg-opacity-10 { background-color: rgba(208, 217, 35, 0.15) !important; }
.bg-primary.bg-opacity-10 { background-color: rgba(248, 249, 250, 0.15) !important; }
.bg-success.bg-opacity-10 { background-color: rgba(46, 204, 113, 0.15) !important; }
.bg-info.bg-opacity-10 { background-color: rgba(173, 181, 189, 0.15) !important; }
.bg-danger.bg-opacity-10 { background-color: rgba(217, 35, 45, 0.15) !important; }

/* Barras de progreso */
.progress {
    height: 6px;
    border-radius: 10px;
    margin-top: 8px;
    background-color: rgba(255, 255, 255, 0.1); /* Fondo de barra más oscuro */
}
/* .progress-bar.bg-primary { background-color: var(--bt-text-light) !important; } */
.progress-bar.bg-success { background-color: #2ecc71 !important; }
.progress-bar.bg-warning { background-color: var(--bt-red) !important; }

/* Badges */
.badge.bg-warning { background-color: var(--bt-red) !important; color: white !important; }
.badge.bg-white { background-color: var(--bt-card-bg) !important; color: var(--bt-text-light) !important; border-color: var(--bt-border-color) !important; }
.badge.bg-primary.bg-opacity-10 { background-color: rgba(255,255,255,0.2) !important; color: var(--bt-text-light) !important; }
.badge.bg-success.bg-opacity-10 { background-color: rgba(46, 204, 113, 0.2) !important; color: #2ecc71 !important; }

/* =========================================
   3. ESTILOS DE TABLAS (DataTables)
   ========================================= */
.card-tabla {
    overflow: hidden;
}

/* Encabezados de tabla */
table.dataTable thead th {
    background-color: rgba(0, 0, 0, 0.2); /* Un poco más oscuro que la tarjeta */
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: var(--bt-text-muted);
    padding-top: 15px; padding-bottom: 15px;
    border-bottom: 2px solid var(--bt-border-color) !important;
}

/* Filas y Celdas */
table.dataTable tbody td {
    vertical-align: middle;
    color: var(--bt-text-light);
    border-color: var(--bt-border-color) !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(217, 35, 45, 0.05) !important; /* Sutil toque rojo al pasar el mouse */
}

/* =========================================
   4. ESTILOS ESPECÍFICOS: MONITOR SURTIDOS
   ========================================= */
.card-sector {
    overflow: hidden;
    padding: 0; /* Eliminar padding para que el header toque los bordes */
}

/* Encabezados de Planta - Ahora con el Rojo Corporativo */
.header-planta {
    text-align: center;
    padding: 15px;
    font-weight: 800;
    font-size: 1.6rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 3px;
    /* Usamos el rojo corporativo con un degradado sutil hacia negro para profundidad */
    background: linear-gradient(to bottom, var(--bt-red), #a31a22);
    border-bottom: 3px solid black;
}
/*
.bg-planta-baja { background: linear-gradient(to right, #333, #555); border-bottom: 3px solid var(--bt-red); }
.bg-planta-alta { background: linear-gradient(to right, #333, #555); border-bottom: 3px solid var(--bt-red); }
*/

/* Filas de Sectores */
.sector-row {
    font-size: 1.8rem;
    border-bottom: 1px solid var(--bt-border-color);
    padding: 5px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bt-card-bg);
}

.sector-row:last-child {
    border-bottom: none;
}

.sector-id {
    font-weight: 700;
    color: var(--bt-text-light);
    display: flex;
    align-items: center;
}
.sector-id .icon-box {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--bt-text-light) !important;
}

.sector-qty {
    font-weight: 900;
    font-size: 2.4rem;
}

/* Colores Semáforo - Adaptados al tema oscuro */
.qty-low { color: #28a745; }  /* Bajo: Color sutil */
.qty-med { color: #ffc107; }               /* Medio: Amarillo alerta */
.qty-high { color: var(--bt-red); text-shadow: 0 0 10px rgba(217, 35, 45, 0.5); } /* Alto: Rojo brillante con resplandor */

/* Sub-renglón de Buffer */
.buffer-row {
    background-color: rgba(0, 0, 0, 0.2); /* Fondo más oscuro para contraste */
    border-radius: 8px;
    padding: 5px 25px;
    margin: 5px 10px 5px 15px; /* Márgenes para separarlo */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 4px solid var(--bt-text-muted); /* Línea de acento */
}

.buffer-row .text-muted, .buffer-row .text-secondary {
    color: var(--bt-text-muted) !important;
}

/* Mensajes de estado */
.text-center.text-muted {
    color: var(--bt-text-muted) !important;
    opacity: 0.7;
}

.col-dato {
    min-width: 90px; /* Ancho reservado fijo */
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Alineado a la derecha junto al borde */
}

/* Hace que los números tengan el mismo ancho (el 1 ocupa lo mismo que el 8) */
.num-mono {
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}

/* Contenedor fijo para el Total Grande del final */
.total-fijo {
    min-width: 70px;
    display: inline-block;
    text-align: right;
}

.num-container {
    min-width: 60px;
    display: table;
}


/* =========================================
   5. ESTILOS ESPECÍFICOS: MONITOR EMPAQUES
   ========================================= */
.list-container {
    max-height: 72vh; /* Aumenté un poco la altura disponible */
    overflow-y: auto;
    border-radius: 0 0 12px 12px;
}

.list-container::-webkit-scrollbar { width: 8px; }
.list-container::-webkit-scrollbar-track { background: #1a1a1a; }
.list-container::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
.list-container::-webkit-scrollbar-thumb:hover { background: #d9232d; }

.packing-row {
    background-color: var(--bt-card-bg);
    border-bottom: 1px solid var(--bt-border-color);
    transition: background-color 0.2s;
}
.packing-row:hover {
    background-color: rgba(255,255,255,0.05);
}

/* Ajuste fino para textos en modo compacto */
.text-compact { font-size: 0.95rem; }


/* =========================================
   6. ESTILOS ESPECÍFICOS: MONITOR ENTRADAS
   ========================================= */
.entry-row {
    background-color: var(--bt-card-bg);
    border-bottom: 1px solid var(--bt-border-color);
    transition: background-color 0.2s;
}
.entry-row:hover {
    background-color: rgba(255,255,255,0.05);
}

/* Ajustes finos de texto */
.text-provider { font-size: 0.9rem; color: var(--bt-text-muted); }