/*
 * ============================================================
 * RC UI 3.0 — RESPONSIVE FINAL OWNER
 *
 * Mobile is a product profile, not simply a small viewport.
 * .rcsd-device-mobile is authoritative.
 * ============================================================
 */

/* ============================================================
 * MOBILE UTILITY DRAWERS — COMMON VISUAL LANGUAGE
 * ============================================================ */

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
:is(
    #rc-template-modal,
    #rc-image-library-modal,
    #rc-elements-modal,
    #rc-qr-modal
).rc-side-panel.rcsd-utility-side-panel{
    box-sizing:border-box !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    border:1px solid #d8e1ea !important;
    background:#f8fafc !important;
    color:#172033 !important;

    box-shadow:0 18px 46px rgba(15,23,42,.20) !important;

    transform:none !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
:is(
    #rc-template-modal,
    #rc-image-library-modal,
    #rc-elements-modal,
    #rc-qr-modal
).rc-side-panel.rcsd-utility-side-panel
> :is(
    .rc-template-box,
    .rc-image-library-box,
    .rc-elements-box,
    .rc-qr-box
){
    box-sizing:border-box !important;

    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;

    border:0 !important;
    border-radius:inherit !important;

    background:#f8fafc !important;
    color:#172033 !important;

    box-shadow:none !important;
}

/* Header */
body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
:is(
    #rc-template-modal,
    #rc-image-library-modal,
    #rc-elements-modal,
    #rc-qr-modal
)
:is(
    .rc-template-head,
    .rc-image-library-head,
    .rc-elements-head,
    .rc-qr-head
){
    box-sizing:border-box !important;

    flex:0 0 52px !important;
    min-height:52px !important;
    height:52px !important;

    padding:9px 12px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    border:0 !important;
    border-bottom:1px solid #e1e8ef !important;

    background:#ffffff !important;
    color:#172033 !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
:is(
    #rc-template-modal,
    #rc-image-library-modal,
    #rc-elements-modal,
    #rc-qr-modal
)
:is(
    .rc-template-head,
    .rc-image-library-head,
    .rc-elements-head,
    .rc-qr-head
) strong{
    color:#172033 !important;
    font-size:14px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
}

/* Search/filter region */
body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
:is(
    #rc-template-modal,
    #rc-image-library-modal,
    #rc-elements-modal
)
:is(
    .rc-template-toolbar,
    .rc-image-library-toolbar,
    .rc-elements-toolbar,
    .rcsd-gallery-filters
){
    box-sizing:border-box !important;

    flex:0 0 auto !important;

    width:100% !important;

    margin:0 !important;
    padding:9px 10px !important;

    display:grid !important;
    grid-template-columns:1fr !important;
    gap:7px !important;

    border:0 !important;
    border-bottom:1px solid #e1e8ef !important;

    background:#ffffff !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
:is(
    #rc-template-modal,
    #rc-image-library-modal,
    #rc-elements-modal
)
:is(
    .rc-template-toolbar,
    .rc-image-library-toolbar,
    .rc-elements-toolbar,
    .rcsd-gallery-filters
)
:is(input, select){
    box-sizing:border-box !important;

    width:100% !important;
    min-width:0 !important;

    height:36px !important;
    min-height:36px !important;

    margin:0 !important;
    padding:0 10px !important;

    border:1px solid #d1dae4 !important;
    border-radius:8px !important;

    background:#f8fafc !important;
    color:#172033 !important;

    font-size:12px !important;
    line-height:1.2 !important;

    box-shadow:none !important;
}

/* Main content/list */
body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
:is(
    #rc-template-list,
    #rc-image-library-list,
    #rc-elements-list,
    #rc-qr-modal .rc-qr-body
){
    flex:1 1 auto !important;
    min-height:0 !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    background:#f3f6f9 !important;
    color:#172033 !important;

    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch;
}

/* Eliminate historical dark gallery voids. */
body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
:is(
    #rc-template-list,
    #rc-image-library-list,
    #rc-elements-list
),
body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
:is(
    #rc-template-list,
    #rc-image-library-list,
    #rc-elements-list
) :is(
    .rcsd-gallery-grid,
    .rcsd-gallery-status,
    .rcsd-gallery-sentinel
){
    background-color:#f3f6f9 !important;
}

/* QR owns the same light language. */
body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
#rc-qr-modal .rc-qr-body{
    box-sizing:border-box !important;

    padding:12px !important;

    background:#f8fafc !important;
    color:#172033 !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
#rc-qr-modal .rc-qr-body label{
    color:#475569 !important;
    font-size:12px !important;
    font-weight:700 !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
#rc-qr-modal .rc-qr-body :is(
    input:not([type="color"]),
    select
){
    border-color:#d1dae4 !important;
    background:#ffffff !important;
    color:#172033 !important;
    box-shadow:none !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
#rc-qr-preview{
    border:1px solid #d8e1ea !important;
    background:#ffffff !important;
    box-shadow:none !important;
}

/* ============================================================
 * MOBILE PORTRAIT
 * Sheet: visible canvas remains behind it.
 * ============================================================ */

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
:is(
    #rc-template-modal,
    #rc-image-library-modal,
    #rc-elements-modal,
    #rc-qr-modal
).rc-side-panel.rcsd-utility-side-panel{
    top:auto !important;
    right:8px !important;
    bottom:70px !important;
    left:8px !important;

    inset:auto 8px 70px 8px !important;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    height:min(74dvh, 590px) !important;
    min-height:300px !important;
    max-height:calc(100dvh - 148px) !important;

    border-radius:15px !important;
}

/* Sheet handle */
body.rc-editor-open #rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
:is(
    #rc-template-modal,
    #rc-image-library-modal,
    #rc-elements-modal,
    #rc-qr-modal
).rc-side-panel.rcsd-utility-side-panel::before{
    content:"";

    position:absolute;
    top:6px;
    left:50%;
    z-index:20;

    width:38px;
    height:4px;

    border-radius:999px;

    background:#cbd5e1;

    transform:translateX(-50%);
    pointer-events:none;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
:is(
    #rc-template-modal,
    #rc-image-library-modal,
    #rc-elements-modal,
    #rc-qr-modal
)
:is(
    .rc-template-head,
    .rc-image-library-head,
    .rc-elements-head,
    .rc-qr-head
){
    padding-top:14px !important;
}

/* ============================================================
 * MOBILE LANDSCAPE
 * Side drawer: canvas remains visible.
 * ============================================================ */

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile.rcsd-orientation-landscape
:is(
    #rc-template-modal,
    #rc-image-library-modal,
    #rc-elements-modal,
    #rc-qr-modal
).rc-side-panel.rcsd-utility-side-panel{
    top:58px !important;
    right:auto !important;
    bottom:8px !important;
    left:64px !important;

    inset:58px auto 8px 64px !important;

    width:min(340px, calc(100vw - 80px)) !important;
    min-width:0 !important;
    max-width:340px !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    border-radius:0 13px 13px 0 !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile.rcsd-orientation-landscape
:is(
    #rc-template-modal,
    #rc-image-library-modal,
    #rc-elements-modal,
    #rc-qr-modal
)
:is(
    .rc-template-head,
    .rc-image-library-head,
    .rc-elements-head,
    .rc-qr-head
){
    flex-basis:44px !important;
    min-height:44px !important;
    height:44px !important;

    padding:5px 9px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile.rcsd-orientation-landscape
:is(
    #rc-template-modal,
    #rc-image-library-modal,
    #rc-elements-modal
)
:is(
    .rc-template-toolbar,
    .rc-image-library-toolbar,
    .rc-elements-toolbar,
    .rcsd-gallery-filters
){
    padding:6px 8px !important;
    gap:5px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile.rcsd-orientation-landscape
:is(
    #rc-template-modal,
    #rc-image-library-modal,
    #rc-elements-modal
)
:is(
    .rc-template-toolbar,
    .rc-image-library-toolbar,
    .rc-elements-toolbar,
    .rcsd-gallery-filters
)
:is(input, select){
    height:32px !important;
    min-height:32px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile.rcsd-orientation-landscape
#rc-qr-modal .rc-qr-body{
    padding:8px 10px !important;
}

/* ============================================================
 * SAVE TEMPLATE — MOBILE
 * ============================================================ */

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
#rc-save-template-modal{
    box-sizing:border-box !important;

    position:fixed !important;

    background:rgba(15,23,42,.28) !important;

    overflow:hidden !important;
}

/* Portrait — compact centered form card. */
body.rc-editor-open #rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
#rc-save-template-modal{
    inset:58px 0 70px 0 !important;

    padding:14px !important;

    align-items:center !important;
    justify-content:center !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
#rc-save-template-modal .rc-save-template-box{
    width:min(360px, 100%) !important;
    max-width:360px !important;
    max-height:100% !important;

    margin:0 !important;
    padding:17px !important;

    gap:7px !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;
}

/* Landscape — low, wide, internally scrollable modal. */
body.rc-editor-open #rc-editor-modal.rcsd-device-mobile.rcsd-orientation-landscape
#rc-save-template-modal{
    inset:58px 0 8px 0 !important;

    padding:7px 12px !important;

    align-items:center !important;
    justify-content:center !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile.rcsd-orientation-landscape
#rc-save-template-modal .rc-save-template-box{
    width:min(520px, calc(100% - 20px)) !important;
    max-width:520px !important;

    max-height:100% !important;

    margin:0 !important;
    padding:10px 14px !important;

    gap:4px !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile.rcsd-orientation-landscape
#rc-save-template-modal .rc-save-template-box h3{
    margin:0 0 2px !important;
    font-size:15px !important;
    line-height:1.2 !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile.rcsd-orientation-landscape
#rc-save-template-modal .rc-save-template-box label{
    margin:0 !important;
    font-size:11px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile.rcsd-orientation-landscape
#rc-save-template-modal .rc-save-template-box
:is(
    input[type="text"],
    input[type="number"],
    .rcsd-category-select__trigger
){
    min-height:30px !important;
    height:30px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile.rcsd-orientation-landscape
#rc-save-template-modal .rc-save-template-actions{
    margin-top:3px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile.rcsd-orientation-landscape
#rc-save-template-modal .rc-save-template-actions button{
    min-height:32px !important;
    height:32px !important;
    padding:0 10px !important;
    font-size:11px !important;
}


/* ============================================================
 * RC UI 3.0 — MOBILE ART DIRECTION FINAL OWNER
 *
 * Final visual polish for:
 * - QR portrait consistency
 * - Save Template portrait / landscape
 * - Smart Bar portrait clearance
 * - Bottom Rail portrait labels
 * - Left Rail short-landscape geometry
 *
 * Structural behavior remains owned by the existing RC UI 3.0
 * shell and utility drawer contracts.
 * ============================================================ */


/* ============================================================
 * 1. QR — PORTRAIT SHEET
 *
 * QR uses the same light editorial language as
 * Modelos / Biblioteca / Elementos on portrait mobile.
 * ============================================================ */

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
#rc-qr-modal.rcsd-mobile-sheet-normalized{
    background:transparent !important;
    color:#172033 !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
#rc-qr-modal.rcsd-mobile-sheet-normalized
.rc-qr-box{
    background:#ffffff !important;
    color:#172033 !important;

    border:1px solid #d9e1ea !important;
    border-radius:14px 14px 0 0 !important;

    box-shadow:0 -10px 30px rgba(15,23,42,.10) !important;

    overflow:hidden !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
#rc-qr-modal.rcsd-mobile-sheet-normalized
.rc-qr-head{
    min-height:56px !important;
    height:56px !important;

    padding:0 10px 0 14px !important;

    border-bottom:1px solid #d9e1ea !important;

    background:#ffffff !important;
    color:#172033 !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
#rc-qr-modal.rcsd-mobile-sheet-normalized
.rc-qr-head strong{
    color:#172033 !important;

    font-size:14px !important;
    font-weight:750 !important;
    line-height:1.2 !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
#rc-qr-modal.rcsd-mobile-sheet-normalized
#rc-close-qr{
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;

    height:38px !important;
    min-height:38px !important;

    padding:0 !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    border:1px solid #d9e1ea !important;
    border-radius:10px !important;

    background:#f8fafc !important;
    color:#334155 !important;

    box-shadow:none !important;

    font-size:0 !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
#rc-qr-modal.rcsd-mobile-sheet-normalized
#rc-close-qr .rc-icon{
    width:18px !important;
    height:18px !important;

    color:#334155 !important;
    stroke:currentColor !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
#rc-qr-modal.rcsd-mobile-sheet-normalized
.rc-qr-body{
    padding:12px 14px 16px !important;

    gap:8px !important;

    background:#ffffff !important;
    color:#172033 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
#rc-qr-modal.rcsd-mobile-sheet-normalized
.rc-qr-body label{
    margin:0 !important;

    color:#475569 !important;

    font-size:11px !important;
    font-weight:700 !important;
    line-height:1.25 !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
#rc-qr-modal.rcsd-mobile-sheet-normalized
.rc-qr-body
:is(
    input[type="text"],
    select
){
    box-sizing:border-box !important;

    width:100% !important;
    min-height:38px !important;
    height:38px !important;

    margin:0 !important;
    padding:0 10px !important;

    border:1px solid #cfd8e3 !important;
    border-radius:9px !important;

    background:#f8fafc !important;
    color:#172033 !important;

    box-shadow:none !important;

    font-size:12px !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
#rc-qr-modal.rcsd-mobile-sheet-normalized
#rc-qr-color{
    width:64px !important;
    min-width:64px !important;
    max-width:64px !important;

    height:38px !important;
    min-height:38px !important;

    padding:3px !important;

    border:1px solid #cfd8e3 !important;
    border-radius:9px !important;

    background:#f8fafc !important;

    box-shadow:none !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
#rc-qr-modal.rcsd-mobile-sheet-normalized
#rc-qr-preview{
    width:132px !important;
    min-width:132px !important;
    max-width:132px !important;

    height:132px !important;
    min-height:132px !important;

    margin:8px auto !important;

    border:1px dashed #cbd5e1 !important;
    border-radius:11px !important;

    background:#ffffff !important;

    box-shadow:none !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
#rc-qr-modal.rcsd-mobile-sheet-normalized
#rc-insert-qr{
    position:static !important;

    width:100% !important;
    min-height:40px !important;
    height:40px !important;

    margin:4px 0 0 !important;
    padding:0 14px !important;

    border:0 !important;
    border-radius:9px !important;

    background:#2f6fed !important;
    color:#ffffff !important;

    box-shadow:none !important;

    font-size:12px !important;
    font-weight:700 !important;
}


/* ============================================================
 * 2. SAVE TEMPLATE — MOBILE VISUAL CONTRACT
 *
 * Save Template is a dialog, not a utility drawer.
 * It remains light in both orientations.
 * ============================================================ */

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile
#rc-save-template-modal{
    background:rgba(15,23,42,.30) !important;

    color:#172033 !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile
#rc-save-template-modal
.rc-save-template-box{
    box-sizing:border-box !important;

    background:#ffffff !important;
    color:#172033 !important;

    border:1px solid #d9e1ea !important;
    border-radius:14px !important;

    box-shadow:0 20px 50px rgba(15,23,42,.20) !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile
#rc-save-template-modal
.rc-save-template-box h3{
    color:#172033 !important;

    font-weight:750 !important;
    letter-spacing:-.01em !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile
#rc-save-template-modal
.rc-save-template-box label{
    color:#475569 !important;

    font-weight:700 !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile
#rc-save-template-modal
.rc-save-template-box
:is(
    input[type="text"],
    input[type="number"],
    .rcsd-category-select__trigger
){
    box-sizing:border-box !important;

    border:1px solid #cfd8e3 !important;
    border-radius:9px !important;

    background:#f8fafc !important;
    color:#172033 !important;

    box-shadow:none !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile
#rc-save-template-modal
.rcsd-category-select__arrow{
    border:0 !important;
    background:transparent !important;
    color:#64748b !important;

    box-shadow:none !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile
#rc-save-template-modal
.rcsd-category-select__chip{
    background:#e8f3fb !important;
    color:#185f87 !important;
}


/* Portrait Save Template — compact professional card. */

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
#rc-save-template-modal{
    inset:58px 0 70px 0 !important;

    padding:12px !important;

    align-items:center !important;
    justify-content:center !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
#rc-save-template-modal
.rc-save-template-box{
    width:min(356px, 100%) !important;
    max-width:356px !important;

    max-height:100% !important;

    margin:auto !important;
    padding:16px !important;

    gap:7px !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
#rc-save-template-modal
.rc-save-template-box h3{
    margin:0 0 4px !important;

    font-size:15px !important;
    line-height:1.25 !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
#rc-save-template-modal
.rc-save-template-box label{
    margin:0 !important;

    font-size:11px !important;
    line-height:1.25 !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
#rc-save-template-modal
.rc-save-template-box
:is(
    input[type="text"],
    input[type="number"],
    .rcsd-category-select__trigger
){
    min-height:36px !important;
    height:36px !important;

    font-size:12px !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
#rc-save-template-modal
.rc-save-template-actions{
    margin-top:8px !important;

    gap:8px !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
#rc-save-template-modal
.rc-save-template-actions button{
    min-height:36px !important;
    height:36px !important;

    padding:0 12px !important;

    font-size:12px !important;
    font-weight:650 !important;
}


/* Landscape Save Template — viewport-safe compact dialog. */

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-landscape
#rc-save-template-modal{
    inset:58px 0 6px 0 !important;

    padding:6px 12px !important;

    align-items:flex-start !important;
    justify-content:center !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-landscape
#rc-save-template-modal
.rc-save-template-box{
    width:min(460px, calc(100% - 16px)) !important;
    max-width:460px !important;

    max-height:calc(100% - 2px) !important;

    margin:0 auto !important;
    padding:9px 13px !important;

    gap:4px !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-landscape
#rc-save-template-modal
.rc-save-template-box h3{
    margin:0 0 1px !important;

    font-size:14px !important;
    line-height:1.15 !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-landscape
#rc-save-template-modal
.rc-save-template-box label{
    margin:0 !important;

    font-size:10px !important;
    line-height:1.15 !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-landscape
#rc-save-template-modal
.rc-save-template-box
:is(
    input[type="text"],
    input[type="number"],
    .rcsd-category-select__trigger
){
    min-height:28px !important;
    height:28px !important;

    font-size:11px !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-landscape
#rc-save-template-modal
.rc-save-template-actions{
    margin-top:3px !important;

    gap:7px !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-landscape
#rc-save-template-modal
.rc-save-template-actions button{
    min-height:30px !important;
    height:30px !important;

    padding:0 10px !important;

    font-size:10.5px !important;
}


/* ============================================================
 * 3. SMART BAR — PORTRAIT CLEARANCE
 *
 * Existing owner reserves 72px.
 * Increase the protected zone so the lower edge/shadow of the
 * Smart Bar never visually touches the canvas.
 * ============================================================ */

@media (max-width:719px) and (orientation:portrait){

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    .rc-canvas-area{
        padding-top:86px !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-context-toolbar{
        top:10px !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    .rc-context-toolbar-inner{
        min-height:44px !important;

        margin-bottom:0 !important;

        border-radius:11px !important;

        box-shadow:0 7px 18px rgba(15,23,42,.10) !important;
    }
}


/* ============================================================
 * 4. PORTRAIT BOTTOM RAIL
 *
 * Prevent first/last labels from visually touching or clipping
 * against the viewport edges.
 * ============================================================ */

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
.rc-sidebar{
    box-sizing:border-box !important;

    padding-left:6px !important;
    padding-right:6px !important;

    gap:2px !important;

    overflow-x:hidden !important;
}

body.rc-editor-open
#rc-editor-modal.rcsd-device-mobile.rcsd-orientation-portrait
.rc-sidebar
button.rc-has-lucide-icon{
    min-width:0 !important;

    padding-left:1px !important;
    padding-right:1px !important;

    font-size:8px !important;
    line-height:1 !important;

    white-space:nowrap !important;
    text-overflow:clip !important;
}


/* ============================================================
 * 5. SHORT LANDSCAPE LEFT RAIL
 *
 * 844x390 has insufficient vertical room for the normal
 * 56px tablet rail item. Compact only short landscape screens.
 * ============================================================ */

@media (min-width:720px) and (max-width:899px) and (max-height:430px){

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet{
        --rc-left-rail-item-height:44px !important;
        --rc-left-rail-icon-box:27px !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    .rc-sidebar{
        gap:2px !important;

        padding-top:5px !important;
        padding-bottom:5px !important;

        overflow-x:hidden !important;
        overflow-y:auto !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    .rc-sidebar
    button.rc-has-lucide-icon{
        grid-template-rows:27px 11px !important;

        gap:2px !important;

        padding:2px 1px !important;

        font-size:8px !important;
        line-height:1 !important;

        overflow:hidden !important;
        white-space:nowrap !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    .rc-sidebar
    button.rc-has-lucide-icon > .rc-icon{
        width:27px !important;
        height:27px !important;

        padding:6px !important;
    }
}


/* ============================================================
 * RC UI 3.0 — REAL RESPONSIVE PROFILE FINISH
 *
 * Important:
 * Runtime profiles are:
 *
 * mobile  < 720
 * tablet  >=720 and <1180
 *
 * Mobile runtime uses:
 * rcsd-mobile-portrait
 * rcsd-mobile-landscape
 *
 * This owner intentionally uses media queries + real device
 * classes instead of the obsolete orientation class assumptions.
 * ============================================================ */


/* ============================================================
 * A. MOBILE PORTRAIT — WORKSPACE CLEARANCE
 * Smart Bar now occupies a real 52px visual box.
 * ============================================================ */

@media (max-width:719px) and (orientation:portrait){

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    .rc-canvas-area{
        padding-top:94px !important;
    }
}


/* ============================================================
 * B. QR — MOBILE PORTRAIT
 * Force the same light visual language as Modelos/Biblioteca.
 * This intentionally overrides the dark drawer owner in 06.
 * ============================================================ */

@media (max-width:719px) and (orientation:portrait){

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-qr-modal.rc-side-panel.rcsd-utility-side-panel{
        background:#f8fafc !important;
        color:#172033 !important;

        border-radius:15px !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-qr-modal.rc-side-panel.rcsd-utility-side-panel
    > .rc-qr-box{
        background:#ffffff !important;
        color:#172033 !important;

        border:0 !important;
        border-radius:15px !important;

        box-shadow:none !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-qr-modal.rc-side-panel.rcsd-utility-side-panel
    .rc-qr-head{
        flex:0 0 52px !important;

        min-height:52px !important;
        height:52px !important;

        padding:14px 12px 8px !important;

        border-bottom:1px solid #e1e8ef !important;

        background:#ffffff !important;
        color:#172033 !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-qr-modal.rc-side-panel.rcsd-utility-side-panel
    .rc-qr-head strong{
        color:#172033 !important;

        font-size:14px !important;
        font-weight:800 !important;
        line-height:1.2 !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-qr-modal.rc-side-panel.rcsd-utility-side-panel
    .rc-qr-body{
        flex:1 1 auto !important;

        min-height:0 !important;

        padding:12px 14px 16px !important;

        gap:8px !important;

        overflow-x:hidden !important;
        overflow-y:auto !important;

        background:#f8fafc !important;
        color:#172033 !important;

        scrollbar-color:#cbd5e1 transparent !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-qr-modal.rc-side-panel.rcsd-utility-side-panel
    .rc-qr-body label{
        color:#475569 !important;

        font-size:11px !important;
        font-weight:700 !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-qr-modal.rc-side-panel.rcsd-utility-side-panel
    .rc-qr-body
    :is(
        input[type="text"],
        select
    ){
        box-sizing:border-box !important;

        width:100% !important;

        min-height:38px !important;
        height:38px !important;

        border:1px solid #cfd8e3 !important;
        border-radius:9px !important;

        background:#ffffff !important;
        color:#172033 !important;

        box-shadow:none !important;

        font-size:12px !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-qr-modal.rc-side-panel.rcsd-utility-side-panel
    #rc-qr-color{
        width:62px !important;
        min-width:62px !important;
        max-width:62px !important;

        height:38px !important;

        padding:3px !important;

        border:1px solid #cfd8e3 !important;
        border-radius:9px !important;

        background:#ffffff !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-qr-modal.rc-side-panel.rcsd-utility-side-panel
    #rc-qr-preview{
        width:128px !important;
        min-width:128px !important;
        max-width:128px !important;

        min-height:128px !important;
        height:128px !important;

        margin:8px auto !important;

        border:1px dashed #cbd5e1 !important;
        border-radius:11px !important;

        background:#ffffff !important;

        box-shadow:none !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-qr-modal.rc-side-panel.rcsd-utility-side-panel
    #rc-insert-qr{
        position:static !important;

        width:100% !important;

        min-height:40px !important;
        height:40px !important;

        margin:4px 0 0 !important;

        border:0 !important;
        border-radius:9px !important;

        background:#2f6fed !important;
        color:#ffffff !important;

        font-size:12px !important;
        font-weight:700 !important;

        box-shadow:none !important;
    }
}


/* ============================================================
 * C. SAVE TEMPLATE — MOBILE PORTRAIT
 * Prevent text wrapping on narrow screens such as 344px.
 * ============================================================ */

@media (max-width:719px) and (orientation:portrait){

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-save-template-modal
    .rc-save-template-actions{
        display:grid !important;

        grid-template-columns:minmax(0, 1fr) auto !important;

        align-items:center !important;

        gap:8px !important;

        width:100% !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-save-template-modal
    .rc-save-template-actions button{
        width:auto !important;
        min-width:0 !important;

        min-height:36px !important;
        height:36px !important;

        padding:0 10px !important;

        white-space:nowrap !important;

        font-size:11px !important;
        line-height:1 !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-confirm-save-template{
        width:100% !important;
    }
}

@media (max-width:360px) and (orientation:portrait){

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-save-template-modal
    .rc-save-template-box{
        padding:14px !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-save-template-modal
    .rc-save-template-box h3{
        font-size:14px !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-save-template-modal
    .rc-save-template-actions button{
        padding-inline:8px !important;
        font-size:10.5px !important;
    }
}


/* ============================================================
 * D. SAVE TEMPLATE — SHORT TABLET LANDSCAPE
 *
 * 844x390 is TABLET, not mobile.
 * The editor page remains fixed; only the dialog scrolls.
 * ============================================================ */

@media (min-width:720px) and (max-width:899px) and (max-height:430px){

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-save-template-modal{
        box-sizing:border-box !important;

        position:fixed !important;

        inset:58px 0 6px 0 !important;

        padding:6px 12px !important;

        display:flex;
        align-items:flex-start !important;
        justify-content:center !important;

        overflow-x:hidden !important;
        overflow-y:auto !important;

        background:rgba(15,23,42,.30) !important;

        color:#172033 !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-save-template-modal
    .rc-save-template-box{
        box-sizing:border-box !important;

        width:min(430px, calc(100% - 20px)) !important;
        max-width:430px !important;

        height:auto !important;
        max-height:calc(100% - 2px) !important;

        margin:0 auto !important;
        padding:9px 13px !important;

        display:flex !important;
        flex-direction:column !important;

        gap:4px !important;

        overflow-x:hidden !important;
        overflow-y:auto !important;

        border:1px solid #d9e1ea !important;
        border-radius:12px !important;

        background:#ffffff !important;
        color:#172033 !important;

        box-shadow:0 16px 40px rgba(15,23,42,.20) !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-save-template-modal
    .rc-save-template-box h3{
        margin:0 0 1px !important;

        color:#172033 !important;

        font-size:14px !important;
        font-weight:750 !important;
        line-height:1.15 !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-save-template-modal
    .rc-save-template-box label{
        margin:0 !important;

        color:#475569 !important;

        font-size:10px !important;
        font-weight:700 !important;
        line-height:1.15 !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-save-template-modal
    .rc-save-template-box
    :is(
        input[type="text"],
        input[type="number"],
        .rcsd-category-select__trigger
    ){
        box-sizing:border-box !important;

        min-height:28px !important;
        height:28px !important;

        border:1px solid #cfd8e3 !important;
        border-radius:8px !important;

        background:#f8fafc !important;
        color:#172033 !important;

        box-shadow:none !important;

        font-size:11px !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-save-template-modal
    .rc-save-template-actions{
        margin-top:3px !important;

        display:flex !important;
        align-items:center !important;

        gap:7px !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-save-template-modal
    .rc-save-template-actions button{
        width:auto !important;

        min-height:30px !important;
        height:30px !important;

        padding:0 10px !important;

        white-space:nowrap !important;

        font-size:10.5px !important;
        line-height:1 !important;
    }
}


/* ============================================================
 * E. LAYERS / OBJETOS — SHORT TABLET
 *
 * Stop action controls from competing for full row width.
 * The row remains stacked, but actions become a clean compact
 * flex group with natural button widths.
 * ============================================================ */

@media (min-width:720px) and (max-width:899px) and (max-height:430px){

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-layers-side-panel-content
    #rc-layers-list{
        gap:6px !important;

        padding:0 8px 12px !important;

        overflow-x:hidden !important;
        overflow-y:auto !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-layers-side-panel-content
    .rc-layer-row{
        box-sizing:border-box !important;

        width:100% !important;
        min-width:0 !important;

        padding:7px !important;

        display:flex !important;
        flex-direction:column !important;

        gap:6px !important;

        overflow:hidden !important;

        border-radius:10px !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-layers-side-panel-content
    .rc-layer-main{
        box-sizing:border-box !important;

        width:100% !important;
        min-width:0 !important;

        display:grid !important;
        grid-template-columns:30px minmax(0, 1fr) !important;

        gap:7px !important;

        align-items:center !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-layers-side-panel-content
    .rc-layer-icon{
        width:30px !important;
        min-width:30px !important;

        height:30px !important;
        min-height:30px !important;

        border-radius:8px !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-layers-side-panel-content
    .rc-layer-name-wrap,
    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-layers-side-panel-content
    .rc-layer-name-line{
        width:100% !important;
        min-width:0 !important;

        box-sizing:border-box !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-layers-side-panel-content
    .rc-layer-name-line{
        display:grid !important;

        grid-template-columns:minmax(0, 1fr) auto !important;

        gap:5px !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-layers-side-panel-content
    .rc-layer-actions{
        box-sizing:border-box !important;

        width:100% !important;
        min-width:0 !important;

        display:flex !important;
        flex-wrap:wrap !important;

        align-items:center !important;
        justify-content:flex-start !important;

        gap:4px !important;

        grid-template-columns:none !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-layers-side-panel-content
    .rc-layer-action{
        flex:0 0 auto !important;

        width:auto !important;
        min-width:30px !important;
        max-width:none !important;

        height:30px !important;
        min-height:30px !important;

        padding:0 7px !important;

        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;

        gap:3px !important;

        white-space:nowrap !important;

        font-size:9px !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-layers-side-panel-content
    .rc-layer-rename-btn{
        flex:0 0 auto !important;

        width:auto !important;
        min-width:30px !important;

        height:30px !important;
        min-height:30px !important;

        padding:0 7px !important;

        white-space:nowrap !important;
    }
}


/* ============================================================
 * RC UI 3.0 — FINAL COMPONENT VISUAL POLISH
 *
 * Final art-direction details:
 * - Save Template CTA white text
 * - QR CTA perfect vertical centering
 * - Layers/Object actions visually simplified
 * ============================================================ */


/* ============================================================
 * 1. SAVE TEMPLATE — PRIMARY CTA
 * ============================================================ */

body.rc-editor-open
#rc-editor-modal
#rc-confirm-save-template{
    color:#ffffff !important;

    font-weight:700 !important;

    text-align:center !important;

    line-height:1 !important;

    white-space:nowrap !important;
}

body.rc-editor-open
#rc-editor-modal
#rc-confirm-save-template:hover,
body.rc-editor-open
#rc-editor-modal
#rc-confirm-save-template:focus{
    color:#ffffff !important;
}


/* ============================================================
 * 2. QR — CTA VERTICAL ALIGNMENT
 * ============================================================ */

body.rc-editor-open
#rc-editor-modal
#rc-insert-qr{
    box-sizing:border-box !important;

    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    text-align:center !important;

    line-height:1 !important;

    vertical-align:middle !important;

    padding-top:0 !important;
    padding-bottom:0 !important;
}

body.rc-editor-open
#rc-editor-modal
#rc-insert-qr > *{
    margin-top:0 !important;
    margin-bottom:0 !important;

    line-height:1 !important;
}


/* ============================================================
 * 3. OBJECTS / LAYERS
 *
 * The row itself is the visual container.
 * Secondary actions should not each look like boxed tiles.
 * ============================================================ */

body.rc-editor-open
#rc-editor-modal
#rc-layers-side-panel-content
.rc-layer-row{
    position:relative !important;

    box-sizing:border-box !important;
}

body.rc-editor-open
#rc-editor-modal
#rc-layers-side-panel-content
.rc-layer-actions{
    display:flex !important;

    align-items:center !important;
    justify-content:flex-start !important;

    flex-wrap:wrap !important;

    gap:4px !important;

    min-width:0 !important;

    background:transparent !important;

    border:0 !important;

    box-shadow:none !important;
}


/*
 * Secondary actions:
 * no permanent individual square/pill.
 */

body.rc-editor-open
#rc-editor-modal
#rc-layers-side-panel-content
.rc-layer-actions
.rc-layer-action,
body.rc-editor-open
#rc-editor-modal
#rc-layers-side-panel-content
.rc-layer-actions
.rc-layer-rename-btn{
    flex:0 0 auto !important;

    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;

    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;

    padding:0 !important;
    margin:0 !important;

    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    border:1px solid transparent !important;
    border-radius:7px !important;

    background:transparent !important;

    color:#9aabc0 !important;

    box-shadow:none !important;

    line-height:1 !important;
}


/*
 * Hover/focus reveals a subtle control surface.
 */

body.rc-editor-open
#rc-editor-modal
#rc-layers-side-panel-content
.rc-layer-actions
.rc-layer-action:hover,
body.rc-editor-open
#rc-editor-modal
#rc-layers-side-panel-content
.rc-layer-actions
.rc-layer-action:focus-visible,
body.rc-editor-open
#rc-editor-modal
#rc-layers-side-panel-content
.rc-layer-actions
.rc-layer-rename-btn:hover,
body.rc-editor-open
#rc-editor-modal
#rc-layers-side-panel-content
.rc-layer-actions
.rc-layer-rename-btn:focus-visible{
    border-color:rgba(148,163,184,.28) !important;

    background:rgba(255,255,255,.07) !important;

    color:#ffffff !important;

    box-shadow:none !important;
}


/*
 * Icons inside the secondary actions remain centered
 * and never create a second visual box.
 */

body.rc-editor-open
#rc-editor-modal
#rc-layers-side-panel-content
.rc-layer-actions
:is(
    .rc-layer-action,
    .rc-layer-rename-btn
)
.rc-icon,
body.rc-editor-open
#rc-editor-modal
#rc-layers-side-panel-content
.rc-layer-actions
:is(
    .rc-layer-action,
    .rc-layer-rename-btn
)
svg{
    width:16px !important;
    min-width:16px !important;
    max-width:16px !important;

    height:16px !important;
    min-height:16px !important;
    max-height:16px !important;

    margin:0 !important;
    padding:0 !important;

    background:transparent !important;

    border:0 !important;

    box-shadow:none !important;

    transform:none !important;
}


/*
 * Keep the object-type tile as the only persistent inner tile.
 */

body.rc-editor-open
#rc-editor-modal
#rc-layers-side-panel-content
.rc-layer-icon{
    flex:0 0 auto !important;

    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    border:0 !important;

    border-radius:8px !important;

    background:#f8fafc !important;

    color:#3454d1 !important;

    box-shadow:none !important;
}


/* ============================================================
 * 4. SHORT TABLET LANDSCAPE — LAYERS EXTRA REFINEMENT
 * ============================================================ */

@media (min-width:720px) and (max-width:899px) and (max-height:430px){

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-layers-side-panel-content
    .rc-layer-row{
        padding:7px 9px !important;

        gap:5px !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-layers-side-panel-content
    .rc-layer-main{
        grid-template-columns:30px minmax(0, 1fr) !important;

        gap:8px !important;

        align-items:center !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-layers-side-panel-content
    .rc-layer-actions{
        margin-left:38px !important;

        width:auto !important;

        justify-content:flex-start !important;

        gap:3px !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-layers-side-panel-content
    .rc-layer-actions
    :is(
        .rc-layer-action,
        .rc-layer-rename-btn
    ){
        width:26px !important;
        min-width:26px !important;
        max-width:26px !important;

        height:26px !important;
        min-height:26px !important;
        max-height:26px !important;
    }
}


/* ============================================================
 * RC UI 3.0 — QR RESPONSIVE UNIFIED CTA
 *
 * Single responsive owner for the approved QR CTA.
 *
 * Contract:
 * - 40px CTA geometry;
 * - centered label;
 * - white foreground;
 * - mobile portrait keeps the approved -1px optical correction;
 * - tablet landscape uses true geometric centering.
 * ============================================================ */

body.rc-editor-open
#rc-editor-modal
#rc-qr-modal
#rc-insert-qr{
    box-sizing:border-box !important;

    position:static !important;

    width:100% !important;

    min-height:40px !important;
    height:40px !important;
    max-height:40px !important;

    margin:0 !important;
    padding:0 12px !important;

    display:flex !important;
    flex-direction:row !important;

    align-items:center !important;
    justify-content:center !important;

    text-align:center !important;
    vertical-align:middle !important;

    border:0 !important;
    border-radius:9px !important;

    background:#2f6fed !important;

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    font-size:12px !important;
    font-weight:700 !important;
    line-height:1 !important;

    white-space:nowrap !important;

    text-indent:0 !important;

    transform:none !important;

    box-shadow:none !important;
}

body.rc-editor-open
#rc-editor-modal
#rc-qr-modal
#rc-insert-qr
.rc-insert-qr-label{
    display:block !important;

    position:relative !important;

    margin:0 !important;
    padding:0 !important;

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    font:inherit !important;
    font-weight:700 !important;
    line-height:1 !important;

    top:0 !important;

    transform:none !important;
}

/*
 * Mobile portrait:
 * preserve the approved optical correction for the font metrics.
 */
@media (max-width:719px) and (orientation:portrait){

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-qr-modal
    #rc-insert-qr{
        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        min-height:40px !important;
        height:40px !important;
        max-height:40px !important;

        padding:0 12px !important;

        color:#ffffff !important;
        -webkit-text-fill-color:#ffffff !important;

        line-height:1 !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-qr-modal
    #rc-insert-qr
    .rc-insert-qr-label{
        transform:translateY(-1px) !important;
    }
}

/*
 * Tablet landscape:
 * explicit final foreground and geometric centering.
 */
@media (min-width:720px) and (max-width:899px){

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-tablet
    #rc-qr-modal
    #rc-insert-qr{
        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        min-height:40px !important;
        height:40px !important;
        max-height:40px !important;

        padding:0 12px !important;

        background:#2f6fed !important;

        color:#ffffff !important;
        -webkit-text-fill-color:#ffffff !important;

        line-height:1 !important;
    }
}