<style>
        body { font-family: Arial, sans-serif; background-color: #f4f6f9; margin: 0; padding: 0; color: #333; padding-bottom: 60px; }
        .header-sticky { position: sticky; top: 0; background: #f4f6f9; z-index: 100; padding: 10px 15px 5px 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
        h2 { text-align: center; color: #1e3a8a; margin: 5px 0 15px 0; font-size: 22px; }
        
        .dashboard-cards { 
    display: flex; 
    gap: 10px; 
    overflow-x: auto; 
    padding-bottom: 5px; 
    -webkit-overflow-scrolling: touch; 
}
.card { 
    flex: 1; 
    min-width: 140px; 
    background: white; 
    padding: 10px 5px; 
    border-radius: 8px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
    text-align: center; 
    border-top: 4px solid #1e3a8a; 
}
        .card.editable-card { background-color: #fffbeb; cursor: pointer; border-top-color: #3b82f6; }
        .card h3 { margin: 0 0 5px 0; font-size: 11px; color: #666; text-transform: uppercase; }
        .card .number { font-size: 18px; font-weight: bold; color: #111827; }
        
        .tabs-container { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
        .tab-btn { background: #e5e7eb; border: none; padding: 10px 18px; border-radius: 20px; font-weight: bold; font-size: 13px; cursor: pointer; white-space: nowrap; -webkit-appearance: none; color: #333; }
        .tab-btn.active { background: #1e3a8a; color: white; }
        .tab-btn.gasto-tab { background: #fca5a5; color: #7f1d1d; }
        .tab-btn.gasto-tab.active { background: #ef4444; color: white; }
        .action-btn { background: #8b5cf6; color: white; border: none; padding: 10px 14px; border-radius: 20px; font-size: 13px; cursor: pointer; font-weight: bold; margin-left: auto; white-space: nowrap; }

        #chart-section { background: white; border-radius: 8px; padding: 15px; margin: 0 15px 15px 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); display: none; }
        .main-content { padding: 0 15px; }
        .table-responsive { width: 100%; overflow-x: auto; background: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        table { width: 100%; border-collapse: collapse; min-width: 1100px; table-layout: fixed; }
        th { background-color: #1e3a8a; color: white; padding: 12px 8px; text-align: left; font-size: 13px; position: sticky; top: 0; }
        td { padding: 10px 8px; border-bottom: 1px solid #e5e7eb; font-size: 13px; vertical-align: middle; }
        
        th.col-tipo { width: 80px; } th.col-foto { width: 65px; } th.col-producto { width: 220px; }
        th.col-cant { width: 60px; } th.col-stock { width: 85px; } th.col-precio { width: 100px; }
        th.col-liberacion { width: 110px; } th.col-bruto { width: 110px; } th.col-pago { width: 115px; }
        th.col-flex { width: 85px; } th.col-costo { width: 95px; } th.col-neto { width: 110px; }
        
        tr.total-row { background-color: #f1f5f9; font-weight: bold; }
        tr.total-row td { border-top: 2px solid #1e3a8a; color: #1e3a8a; }
        .mini-img { width: 45px; height: 45px; border-radius: 6px; object-fit: cover; border: 1px solid #ddd; }
        .editable { background-color: #fffbeb; cursor: pointer; padding: 4px; border-radius: 4px; }
        .input-edit { width: 90%; padding: 4px; }
        .badge { padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: bold; }
        .badge-ingreso { background-color: #d1fae5; color: #065f46; }
        .fecha-futura-alerta { background-color: #e0f2fe !important; color: #0369a1; font-weight: bold; }
        .fecha-urgente { background-color: #fca5a5 !important; color: #7f1d1d; font-weight: bold; } /* Menos de 3 días: Rojo Alerta */
        .fecha-cercana { background-color: #fef08a !important; color: #713f12; font-weight: bold; } /* De 3 a 7 días: Amarillo Intenso */
        .fecha-media { background-color: #bbf7d0 !important; color: #14532d; font-weight: bold; }    /* De 8 a 15 días: Verde Claro */
        .fecha-lejana { background-color: #e0f2fe !important; color: #0369a1; font-weight: bold; }   /* Más de 15 días: Azul Suave */

        /* GASTOS */
        .gastos-form { background: white; padding: 15px; border-radius: 8px; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
        .gastos-form input, .gastos-form select { padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; }
        .btn-add-gasto { background: #ef4444; color: white; border: none; padding: 9px 16px; border-radius: 4px; font-weight: bold; cursor: pointer; }
        .btn-borrar-gasto { background: #ef4444; color: white; border: none; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 11px; }

        /* DRAWER STOCK */
        .stock-drawer { position: fixed; top: 0; right: -320px; width: 280px; height: 100%; background: white; box-shadow: -4px 0 10px rgba(0,0,0,0.15); z-index: 200; transition: right 0.3s ease; padding: 20px; overflow-y: auto; }
        .stock-drawer.open { right: 0; }
        .stock-drawer h3 { border-bottom: 2px solid #ec4899; padding-bottom: 8px; color: #ec4899; margin-top: 0; }
        .drawer-close { background: #ef4444; color: white; border: none; padding: 5px 10px; border-radius: 5px; float: right; cursor: pointer; }
        .stock-item { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f3f4f6; }
        .stock-item input { width: 60px; padding: 4px; text-align: center; font-weight: bold; }

        .btn-flotante { position: fixed; bottom: 20px; right: 20px; background: #ec4899; color: white; border: none; width: 55px; height: 55px; border-radius: 50%; font-size: 22px; font-weight: bold; box-shadow: 0 4px 8px rgba(0,0,0,0.2); cursor: pointer; z-index: 150; }
    </style>