/* [REMOVAL-1980] D5 sweep: rules extracted from template <style> blocks.
   Each section header names its source template. */

/* ---- extracted from apps/templates/includes/side_panel_video_controls.html ---- */
/* [REMOVAL-1221] DS migration: raw z-index -> --z-* ladder tokens. */
    /* =============== Quick Actions =============== */
.quick-actions-toggle {
    transition: all 0.3s ease;
    transform: translateY(-50%);
    z-index: var(--z-sidepanel) !important;
}

.quick-actions-toggle:hover {
    padding-right: 12px;
}

.toggle-icon {
    transition: transform 0.3s ease;
}

/* Cuando el panel está abierto, mover el botón */
.offcanvas.show ~ .quick-actions-toggle {
    right: 339px !important;
}

/* Rotar el ícono cuando el panel está abierto */
.offcanvas.show ~ .quick-actions-toggle .toggle-icon {
    transform: rotate(180deg);
}

/* Ajustar el ancho y alto del panel offcanvas */
.offcanvas {
    width: 350px !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 8px 0 0 8px;
    z-index: var(--z-sidepanel) !important;
}

/* Asegurar que la transición del botón sea suave */
@media (prefers-reduced-motion: no-preference) {
    .quick-actions-toggle {
        transition: right 0.3s ease, padding 0.3s ease;
    }
    
    .offcanvas.showing ~ .quick-actions-toggle {
        right: 350px !important;
    }
    
    .offcanvas.hiding ~ .quick-actions-toggle {
        right: -11px !important;
    }
}

/* Ajustar el backdrop del offcanvas */
.offcanvas-backdrop {
    z-index: var(--z-sidepanel) !important;
}

/* ---- D5 inline style extraction from apps/templates/includes/side_panel_video_controls.html ---- */
#qrcodeButton { margin:auto; }
#streamToShare { margin:auto; }