body {
            font-family: sans-serif;
            margin: 0;
            background: #222;
        }

        .demo-panel {
            position: fixed;
            top: 0;
            right: 0;
            z-index: 9999;
            background: rgba(30, 30, 30, 0.95);
            padding: 15px;
            width: 340px;
            height: 100vh;
            box-shadow: -4px 0 15px rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            gap: 8px;
            overflow-y: auto;
            color: #fff;
            font-size: 0.9rem;
            transition: transform 0.3s ease;
        }

        .demo-panel h3 {
            margin: 0 0 10px 0;
            font-size: 1.1rem;
            border-bottom: 1px solid #555;
            padding-bottom: 8px;
        }

        .demo-panel button {
            padding: 8px 10px;
            cursor: pointer;
            border: none;
            border-radius: 4px;
            background: #0056b3;
            color: #fff;
            font-weight: 500;
            font-size: 0.85rem;
            text-align: left;
            transition: background 0.2s;
        }

        .demo-panel button:hover {
            background: #004494;
        }

        .demo-panel button.green {
            background: #28a745;
        }

        .demo-panel button.green:hover {
            background: #218838;
        }

        .demo-panel button.orange {
            background: #d39e00;
            color: #111;
        }

        .demo-panel button.orange:hover {
            background: #b08401;
        }

        .demo-panel button.purple {
            background: #6f42c1;
        }

        .demo-panel button.purple:hover {
            background: #5a32a3;
        }

        .demo-panel button.danger {
            background: #dc3545;
            margin-top: auto;
        }

        .demo-panel button.danger:hover {
            background: #c82333;
        }

        .demo-panel::-webkit-scrollbar {
            width: 6px;
        }

        .demo-panel::-webkit-scrollbar-thumb {
            background-color: #666;
            border-radius: 4px;
        }



        /* DATATABLES Color de la fila seleccionada */
        table.dataTable tbody tr.selected>* {
            /* Cambia el código hexadecimal por el color que prefieras (ej. el color corporativo de la empresa) */
            box-shadow: inset 0 0 0 9999px #7eabffe8 !important;

            /* Cambia el color del texto para asegurarte de que se lea bien sobre tu nuevo color de fondo */
            color: #ffffff !important;
        }

        /* DATATABLES Opcional: Color cuando pasas el ratón por encima (hover) de una fila que YA está seleccionada */
        table.dataTable.hover tbody tr.selected:hover>*,
        table.dataTable.display tbody tr.selected:hover>* {
            box-shadow: inset 0 0 0 9999px #7eabffe8 !important;
            /* Un tono un poco más oscuro */
        }