/* Layout Principal */
.cgf-container { display: grid; grid-template-columns: 350px 1fr; gap: 20px; font-family: sans-serif; height: 80vh; }
.cgf-list-panel { background: #f4f4f4; border-right: 1px solid #ddd; padding: 15px; overflow-y: auto; }
.cgf-detail-panel { padding: 20px; background: #fff; }

/* Items */
.cgf-item { background: #fff; padding: 12px; margin-bottom: 8px; border: 1px solid #ddd; cursor: pointer; border-radius: 4px; }
.cgf-item:hover { border-color: #0073aa; }
.cgf-item.active { border-left: 4px solid #0073aa; background: #eef7ff; }

/* Offcanvas */
.cgf-offcanvas { 
    position: fixed; right: -500px; top: 0; width: 450px; height: 100%; 
    background: white; z-index: 9999; transition: 0.4s ease;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1); padding: 30px;
    display: flex; flex-direction: column;
}
.cgf-offcanvas.active { right: 0; }
.cgf-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.5); display: none; z-index: 9998; 
}
.cgf-overlay.active { display: block; }

/* Botones */
.btn-primary { background: #0073aa; color: white; border: none; padding: 10px 15px; cursor: pointer; border-radius: 4px; width: 100%; margin-top: 10px; }
.btn-edit { background: #ffb900; border: none; padding: 10px; cursor: pointer; }
.badge { background: #eee; padding: 2px 6px; font-size: 10px; border-radius: 10px; }