/* Autor: Emanuel
   Data : 18/06/2026
*/

:root {
    --ks-orange: #ff8500;
    --ks-orange-dark: #e86f00;
    --ks-blue: #009ec3;
    --ks-blue-dark: #007fa0;
    --ks-white: #ffffff;
    --ks-text: #333333;
    --ks-muted: #6c757d;
    --ks-page-bg: #f5f7fa;
    --ks-border: #dee2e6;
    --ks-input-bg: #f8f9fa;
    --ks-grid-header: #f1f3f5;
    --ks-shadow: 0 8px 24px rgba(22, 34, 51, 0.08);
    --ks-shadow-sm: 0 3px 10px rgba(22, 34, 51, 0.06);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    
    margin: 0;
    min-height: 100vh;
    background: var(--ks-page-bg);
    color: var(--ks-text);
    font-family: 'Poppins', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
}

a { color: var(--ks-blue-dark); }
a:hover { color: var(--ks-orange-dark); }

#app { min-height: 100vh; position: absolute;width: 100%;}

.container, .container-fluid {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
.container { max-width: 1180px; }
.container-fluid { max-width: 1440px; }
.container-fluid.campaign-form-page { max-width: 1860px; }

.row { display: flex; flex-wrap: wrap; margin-left: -0.75rem; margin-right: -0.75rem; }
.row > * { padding-left: 0.75rem; padding-right: 0.75rem; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) { .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; } }
@media (min-width: 992px) { .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .col-lg-7 { flex: 0 0 58.333%; max-width: 58.333%; } }
@media (min-width: 1200px) { .col-xl-4 { flex: 0 0 33.333%; max-width: 33.333%; } }

.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.align-items-center { align-items: center; }
.text-center { text-align: center; }
.text-start { text-align: left; }
.text-end,
.align-right,
.align-number-right,
input[type="number"],
input[inputmode="numeric"],
input[inputmode="decimal"],
.numeric-value,
.money-value,
.currency-value,
.quantity-value,
td.numeric,
th.numeric {
    text-align: right;
}
.text-decoration-none { text-decoration: none; }
.text-muted { color: var(--ks-muted); }
.text-primary { color: var(--ks-orange) !important; }
.bg-light { background: #fff; }
.bg-dark { background: #17212b !important; }
.bg-primary { background: var(--ks-orange) !important; }
.bg-success { background: #198754 !important; }
.border { border: 1px solid var(--ks-border); }
.border-top { border-top: 1px solid var(--ks-border); }
.border-primary { border-color: var(--ks-orange) !important; }
.border-start { border-left: 1px solid var(--ks-border); }
.border-4 { border-width: 4px !important; }
.rounded { border-radius: 8px; }
.shadow-sm { box-shadow: var(--ks-shadow-sm); }
.disabled { opacity: .55; pointer-events: none; }

.gap-2 { gap: .5rem; } .gap-3 { gap: 1rem; }
.g-2 { row-gap: .5rem; } .g-3 { row-gap: 1rem; } .g-4 { row-gap: 1.5rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-5 { margin-top: 3rem; margin-bottom: 3rem; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: 1rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-4 { margin-bottom: 1.5rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; } .py-2 { padding-top: .5rem; padding-bottom: .5rem; } .py-3 { padding-top: 1rem; padding-bottom: 1rem; } .py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.p-3 { padding: 1.25rem; } .p-4 { padding: 1.5rem; }
.pt-2 { padding-top: .5rem; }
.px-0 { padding-left: 0; padding-right: 0; }
.w-100 { width: 100%; }
.vh-100 { min-height: 100vh; }
.small, small { font-size: .84rem; }
.h3 { font-size: 1.55rem; }
.display-5 { font-size: 2.5rem; line-height: 1; }
.fw-bold { font-weight: 700; } .fw-semibold { font-weight: 600; }

.app-page { padding-top: 1.25rem; padding-bottom: 2rem; }

#app > .navbar + .app-page { padding-top: 1.25rem; }
.page-header h1, h1, h2 {
    color: #2f3b47;
    font-weight: 700;
    letter-spacing: 0;
    margin: .15rem 0 0;
}
.page-kicker {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--ks-orange-dark);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-kicker .menu-icon-allop {
    font-size: .95rem;
    line-height: 1;
}

.card, .card-allop {
    background: var(--ks-white);
    border: 1px solid rgba(222, 226, 230, .75);
    border-radius: 10px;
    box-shadow: var(--ks-shadow);
    overflow: visible;
}
.card-header {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #f0f2f4;
}
.card-title { color: #5f6c78; font-size: 1rem; font-weight: 700; }
.card-body { padding: 1.25rem; }

.btn, button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    white-space: nowrap;
    min-height: 38px;
    padding: .48rem .9rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-allop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}
.btn-icon-allop {
    display: inline-flex;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    align-items: center;
    justify-content: center;
    color: currentColor;
}
.btn-icon-allop svg,
.btn-icon-allop i {
    display: block;
    width: 1rem;
    height: 1rem;
    line-height: 1;
    color: currentColor;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary, .btn-allop.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--ks-orange), var(--ks-orange-dark));
    box-shadow: 0 4px 12px rgba(255, 133, 0, .22);
}
.btn-outline-secondary { color: #50606f; background: #fff; border-color: #cdd5dd; }
.btn-outline-danger { color: #b42318; background: #fff; border-color: #f3b7b2; }
.btn-light { color: #42505c; background: #fff; }
.btn-light,
.btn-outline-secondary,
.btn-outline-light,
.btn.btn-allop.btn-light,
.btn.btn-allop.btn-outline-secondary,
.btn.btn-allop.btn-outline-light {
    color: var(--ks-orange);
    background: #fff;
    border-color: var(--ks-orange);
}
.btn-light:hover:not(:disabled),
.btn-outline-secondary:hover:not(:disabled),
.btn-outline-light:hover:not(:disabled),
.btn.btn-allop.btn-light:hover:not(:disabled),
.btn.btn-allop.btn-outline-secondary:hover:not(:disabled),
.btn.btn-allop.btn-outline-light:hover:not(:disabled) {
    color: #fff;
    background: var(--ks-orange);
    border-color: var(--ks-orange);
}
.btn-light.btn-allop {
    color: var(--ks-orange);
    border-color: var(--ks-orange);
}
.btn-sm { min-height: 32px; padding: .32rem .65rem; font-size: .82rem; }

.form-label { color: var(--ks-muted); font-weight: 700; }
.form-control, .form-select, .input-allop {
    min-height: 56px;
    border: 1px solid var(--ks-border);
    border-radius: 10px;
    background: var(--ks-input-bg);
    color: var(--ks-text);
    padding: .55rem .75rem;
    font: inherit;
}
.form-control:focus, .input-allop:focus {
    background: #fff;
    border-color: var(--ks-orange);
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(255, 133, 0, .15);
}
.invalid-feedback { color: #b42318; font-size: .78rem; margin-top: .25rem; min-height: 1rem; }
.is-invalid { border-color: #dc3545 !important; }


.modal-allop {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow: auto;
}

.modal-allop[hidden] {
    display: none !important;
}

.modal-backdrop-allop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(2px);
}

.modal-dialog-allop {
    position: relative;
    z-index: 1;
    width: min(100%, 920px);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
    overflow: hidden;
}

.modal-dialog-allop.modal-dialog-lg {
    width: min(100%, 1360px);
}

.modal-header-allop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e7ebef;
    background: #fff;
}

.modal-body-allop {
    flex: 1 1 auto;
    min-height: 0;
    padding: .6rem .7rem .75rem;
    background: #fff;
    overflow: auto;
    overscroll-behavior: contain;
}

.whatsapp-modal-dialog {
    width: min(100%, 540px);
    background:
        radial-gradient(circle at top right, rgba(13, 148, 136, .08), transparent 28%),
        radial-gradient(circle at bottom left, rgba(255, 193, 7, .08), transparent 24%),
        #fff;
}

.whatsapp-modal-title {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.whatsapp-modal-title strong {
    display: block;
    font-size: 1.1rem;
    line-height: 1.15;
    color: #1f2937;
}

.whatsapp-modal-title small {
    display: block;
    margin-top: .2rem;
    color: #6b7280;
    font-size: .82rem;
}

.whatsapp-modal-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    box-shadow: 0 10px 24px rgba(18, 140, 126, .25);
    flex: 0 0 auto;
    font-size: 1.05rem;
}

.whatsapp-modal-main {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.whatsapp-qr-box {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(249, 250, 251, .98)),
        repeating-linear-gradient(45deg, rgba(17, 24, 39, .03) 0, rgba(17, 24, 39, .03) 10px, transparent 10px, transparent 20px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
}

.whatsapp-qr-box img {
    width: min(100%, 230px);
    max-width: 230px;
    max-height: 230px;
    padding: .35rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

.whatsapp-qr-box img:not([hidden]) {
    animation: whatsappQrIn .42s ease-out both;
}

.whatsapp-qr-box.is-loaded {
    border-color: rgba(37, 211, 102, .45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .65),
        0 18px 42px rgba(15, 23, 42, .08);
}

.whatsapp-qr-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    color: #6b7280;
    font-weight: 600;
    text-align: center;
}

.whatsapp-qr-placeholder i {
    font-size: 2.4rem;
    color: #25d366;
}

.whatsapp-permission-notice {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid rgba(255, 133, 0, .28);
    border-radius: 14px;
    background: linear-gradient(180deg, #fffaf3 0%, #fff7ec 100%);
    color: #5f3b10;
}

.whatsapp-permission-notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #fff;
    color: var(--ks-orange-dark);
    border: 1px solid rgba(255, 133, 0, .25);
    box-shadow: 0 8px 18px rgba(255, 133, 0, .10);
    flex: 0 0 auto;
}

.whatsapp-permission-notice strong {
    display: block;
    color: #3f2b12;
    font-size: .95rem;
    line-height: 1.2;
}

.whatsapp-permission-notice span:not(.whatsapp-permission-notice-icon) {
    display: block;
    margin-top: .2rem;
    color: #7a541f;
    font-size: .84rem;
    line-height: 1.45;
}

@keyframes whatsappQrIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.96);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.alert { border-radius: 8px; border: 1px solid transparent; padding: .7rem .9rem; margin-bottom: 1rem; }
.alert-success { background: #e9f8ef; border-color: #bce6ca; color: #1d6f3a; }
.alert-danger { background: #fff0f0; border-color: #f4bcbc; color: #9f1c1c; }
.modal-dialog-allop.modal-dialog-lg {
    width: min(100%, 1360px);
}

.modal-dialog-allop .modal-content {
    border-radius: 18px;
    overflow: hidden;
}

.campaign-filter-modal-body {
    min-height: 0;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.55rem;
    background:
        radial-gradient(circle at top left, rgba(255, 133, 0, .07), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

.modal-dialog-allop.modal-dialog-lg .campaign-filter-modal-body {
    max-height: calc(100vh - 8rem);
}

.campaign-filter-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.55rem;
    padding: 1.35rem 1.5rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e7ebef;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--ks-shadow-sm);
}

.campaign-filter-hero strong {
    display: block;
    font-size: 1.02rem;
    color: #34404d;
}

.campaign-filter-hero p {
    margin: .25rem 0 0;
    color: var(--ks-muted);
}

.campaign-filter-section {
    margin-bottom: 1.25rem;
}

.campaign-filter-modal-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    align-items: start;
    padding-bottom: .5rem;
}

.campaign-filter-modal-form > .campaign-filter-modal-actions {
    grid-column: 1 / -1;
}

.campaign-filter-modal-form > .campaign-filter-modal-details-wide {
    grid-column: 1 / -1;
}

.details-allop.campaign-filter-modal-details {
    --filter-accent: var(--ks-orange-dark);
    --filter-accent-soft: rgba(255, 133, 0, .08);
    --filter-accent-border: rgba(255, 133, 0, .24);
    min-height: 0;
    margin-bottom: 0;
    border: 1px solid #dbe3ea;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(31, 48, 63, .05);
    overflow: visible;
    position: relative;
}

.campaign-filter-modal-form > .campaign-filter-modal-details:not(.campaign-filter-modal-details-wide)[open] {
    grid-column: auto;
}

.campaign-filter-modal-form > .campaign-filter-modal-details:not(.campaign-filter-modal-details-wide)[open] .campaign-filter-modal-grid {
    grid-template-columns: 1fr;
}

.campaign-filter-modal-form > .campaign-filter-modal-details:not(.campaign-filter-modal-details-wide)[open] .campaign-filter-age-range {
    grid-column: auto;
    grid-template-columns: 1fr;
}

.campaign-filter-modal-form > .campaign-filter-modal-details:not(.campaign-filter-modal-details-wide)[open] .campaign-filter-modal-field[style] {
    grid-column: auto !important;
}

.details-allop.campaign-filter-modal-details.is-filter-active {
    border-color: var(--filter-accent-border);
    box-shadow: 0 10px 24px rgba(31, 48, 63, .065);
}

.details-allop.campaign-filter-modal-details.is-filter-active .details-allop-summary {
    background:
        linear-gradient(90deg, var(--filter-accent-soft), rgba(255, 133, 0, 0) 36%),
        linear-gradient(180deg, #fbfcfe 0%, #f5f8fb 100%);
}

.details-allop.campaign-filter-modal-details:focus-within {
    z-index: 100;
}

.details-allop.campaign-filter-modal-details.is-select-open,
.details-allop.campaign-filter-modal-details:has(.input-select3-allop.is-open),
.details-allop.campaign-filter-modal-details:has(.input-select-allop.is-open) {
    z-index: 6000;
}

.campaign-filter-modal-details .details-allop-summary {
    min-height: 4.75rem;
    padding: .86rem 1rem;
    border-radius: 17px;
    background:
        linear-gradient(90deg, rgba(255, 133, 0, .06), rgba(255, 133, 0, 0) 28%),
        linear-gradient(180deg, #fbfcfe 0%, #f5f8fb 100%);
}

.campaign-filter-modal-details[open] .details-allop-summary {
    min-height: auto;
    border-radius: 17px 17px 0 0;
}

.campaign-filter-modal-details .details-allop-summary:hover {
    background:
        linear-gradient(90deg, rgba(255, 133, 0, .075), rgba(255, 133, 0, 0) 28%),
        linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

.campaign-filter-modal-details .details-allop-body {
    padding: 1rem;
    border-radius: 0 0 17px 17px;
    background: #fff;
    overflow: visible;
}

.campaign-filter-modal-details .campaign-filter-modal-field input,
.campaign-filter-modal-details .campaign-filter-modal-field select,
.campaign-filter-modal-details .campaign-filter-modal-field textarea,
.campaign-filter-modal-details .input-select3-seletor-allop {
    border-color: #dce3ea;
    background: #fff;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .02);
}

.campaign-filter-modal-details .campaign-filter-modal-field input:focus,
.campaign-filter-modal-details .campaign-filter-modal-field select:focus,
.campaign-filter-modal-details .campaign-filter-modal-field textarea:focus,
.campaign-filter-modal-details .input-select3-seletor-allop:focus {
    border-color: var(--ks-orange);
    box-shadow: 0 0 0 .2rem rgba(255, 133, 0, .12);
}

.campaign-filter-modal-details .input-select3-lista-allop {
    z-index: 6100;
    border-color: #dce5ef;
    background: #fff;
    box-shadow: 0 12px 26px rgba(18, 38, 63, .06);
}

.campaign-filter-modal-details .select-options-allop {
    z-index: 6100;
}

.campaign-filter-modal-details-heading {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.campaign-filter-modal-details-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ks-orange-dark);
    font-size: 1.05rem;
    line-height: 1;
}

.campaign-filter-modal-details-title > span {
    color: #243140;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
}

.campaign-filter-active-marker {
    display: none;
    flex: 0 0 auto;
    width: .62rem;
    height: .62rem;
    margin-left: .12rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--filter-accent);
    box-shadow: 0 0 0 .22rem var(--filter-accent-soft);
}

.campaign-filter-modal-details.is-filter-active .campaign-filter-active-marker {
    display: inline-flex;
}

.campaign-filter-modal-details .details-allop-toggle {
    border-color: rgba(255, 133, 0, .20);
    background: rgba(255, 133, 0, .08);
    color: var(--ks-orange-dark);
}

.campaign-filter-modal-details .details-allop-toggle::before,
.campaign-filter-modal-details .details-allop-toggle::after {
    background: var(--ks-orange-dark);
}

.campaign-filter-modal-details .details-allop-toggle.btn-expandir::before,
.campaign-filter-modal-details .details-allop-toggle.btn-expandir::after {
    display: none;
}

.campaign-filter-modal-details .details-allop-toggle.btn-expandir i {
    display: inline-block;
    font-size: .95rem;
    line-height: 1;
    transition: transform .18s ease;
}

.campaign-filter-modal-details[open] .details-allop-toggle.btn-expandir i {
    transform: rotate(180deg);
}

.campaign-filter-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    padding: .85rem 0 0;
    border-top: 1px solid #e6edf4;
}

.campaign-filter-section-head {
    display: flex;
    flex-direction: column;
    margin-bottom: .95rem;
}

.campaign-filter-section-head strong {
    color: #35414f;
    font-size: .98rem;
}

.campaign-filter-section-head small {
    color: var(--ks-muted);
}

.campaign-filter-modal-advanced {
    border: 1px solid #e3e8ee;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--ks-shadow-sm);
    overflow: hidden;
}

.campaign-filter-modal-advanced summary {
    list-style: none;
    cursor: pointer;
    padding: 1.25rem 1.3rem;
    background: linear-gradient(180deg, #fbfcfe, #eef3f8);
    border-bottom: 1px solid #e5ebf2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.55rem;
    position: relative;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.campaign-filter-modal-advanced summary:hover {
    background: linear-gradient(180deg, #ffffff, #f4f7fb);
    box-shadow: inset 0 0 0 1px rgba(31, 111, 235, .08);
}

.campaign-filter-modal-advanced summary::-webkit-details-marker {
    display: none;
}

.campaign-filter-modal-advanced summary > div {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.campaign-filter-modal-advanced summary span {
    font-weight: 800;
    color: #2f3a47;
    letter-spacing: .01em;
}

.campaign-filter-modal-advanced summary small {
    color: var(--ks-muted);
}

.campaign-filter-modal-advanced-toggle {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(31, 111, 235, .10);
    border: 1px solid rgba(31, 111, 235, .14);
    position: relative;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.campaign-filter-modal-advanced-toggle::before,
.campaign-filter-modal-advanced-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: .85rem;
    height: 2px;
    background: #1f6feb;
    border-radius: 999px;
    transform: translate(-50%, -50%);
}

.campaign-filter-modal-advanced-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.campaign-filter-modal-advanced[open] summary {
    background: linear-gradient(180deg, #f6f9ff, #ffffff);
}

.campaign-filter-modal-advanced[open] .campaign-filter-modal-advanced-toggle {
    background: rgba(31, 111, 235, .16);
    transform: rotate(180deg);
}

.campaign-filter-modal-advanced[open] .campaign-filter-modal-advanced-toggle::after {
    opacity: 0;
}

.campaign-filter-modal-advanced > .campaign-filter-modal-grid {
    padding: 1.25rem;
}

.campaign-filter-modal-grid {
    display: grid;
    align-items: start;
    justify-content: stretch;
    gap: 1rem 1.1rem;
}

.campaign-filter-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.campaign-filter-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.campaign-filter-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.campaign-filter-modal-grid.campaign-filter-grid-4 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.campaign-filter-modal-grid.campaign-filter-grid-4 > .campaign-filter-modal-field {
    grid-column: span 2;
}

.campaign-filter-modal-details-children .campaign-filter-modal-grid > .campaign-filter-modal-field:last-child {
    grid-column: 7 / span 2;
}

.campaign-filter-modal-details-children .campaign-filter-modal-grid {
    grid-auto-flow: dense;
}

.campaign-filter-age-range {
    display: grid;
    grid-column: 2 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.1rem;
}

.campaign-filter-modal-field {
    display: grid;
    gap: .28rem;
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.campaign-filter-modal-field .invalid-feedback {
    position: absolute;
    top: calc(100% + .18rem);
    left: 0;
    right: 0;
    z-index: 3;
    min-height: 0;
    margin-top: 0;
    line-height: 1.2;
}

.campaign-filter-modal-field label {
    color: #5f6c78;
    font-size: .84rem;
    font-weight: 700;
}

.campaign-filter-modal-field .form-label {
    color: #5f6c78 !important;
    font-size: .84rem;
    font-weight: 700;
}

.campaign-filter-modal-field input,
.campaign-filter-modal-field select,
.campaign-filter-modal-field textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 56px;
    height: 56px;
    padding: .52rem .72rem;
    border: 1px solid #dce3ea;
    border-radius: 10px;
    background: #fff;
    color: #33404e;
    font: inherit;
    font-family: inherit;
    text-align: left;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .02);
}

.campaign-filter-modal-field textarea {
    min-height: 56px;
    resize: vertical;
}

.campaign-filter-modal-field .select-combobox-allop,
.campaign-filter-modal-field .input-select3-seletor-allop {
    min-height: 56px;
    height: 56px;
    align-items: center;
}

.campaign-filter-modal-field .input-select3-seletor-acoes-allop {
    min-width: 44px;
}

.campaign-filter-modal-field .input-select3-limpar-allop {
    display: none;
}

.campaign-filter-modal-field .input-select-allop,
.campaign-filter-modal-field .input-select3-allop {
    gap: .28rem;
}

.campaign-filter-section {
    margin-bottom: .95rem;
}

.campaign-filter-section-head {
    margin-bottom: .5rem;
}

.campaign-filter-modal-field input:focus,
.campaign-filter-modal-field select:focus,
.campaign-filter-modal-field textarea:focus {
    border-color: var(--ks-orange);
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(255, 133, 0, .12);
}

.campaign-filter-feedback {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: .85rem 0 1rem;
    padding: .82rem .95rem;
    border-radius: 14px;
    border: 1px solid transparent;
    font-size: .92rem;
    line-height: 1.35;
    box-shadow: 0 8px 20px rgba(31, 48, 63, .04);
}

.campaign-filter-feedback-icon {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: .1rem;
    border-radius: 999px;
    position: relative;
}

.campaign-filter-feedback-icon::before,
.campaign-filter-feedback-icon::after {
    content: '';
    position: absolute;
    background: currentColor;
    border-radius: 999px;
}

.campaign-filter-feedback.is-error .campaign-filter-feedback-icon {
    color: #b42318;
}

.campaign-filter-feedback.is-error .campaign-filter-feedback-icon::before {
    width: 100%;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(45deg);
}

.campaign-filter-feedback.is-error .campaign-filter-feedback-icon::after {
    width: 100%;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(-45deg);
}

.campaign-filter-feedback.is-success .campaign-filter-feedback-icon {
    color: #146c43;
}

.campaign-filter-feedback.is-success .campaign-filter-feedback-icon::before {
    width: .38rem;
    height: .9rem;
    left: .18rem;
    top: .02rem;
    transform: rotate(35deg);
}

.campaign-filter-feedback.is-success .campaign-filter-feedback-icon::after {
    width: .6rem;
    height: .38rem;
    left: .42rem;
    top: .42rem;
    transform: rotate(-40deg);
}

.campaign-filter-feedback.is-error,
.campaign-filter-feedback.is-success {
    display: flex;
}

.campaign-filter-feedback.is-error {
    background: #fff5f5;
    border-color: rgba(180, 35, 24, .16);
    color: #9f1d17;
}

.campaign-filter-feedback.is-success {
    background: #f0fbf4;
    border-color: rgba(21, 128, 61, .16);
    color: #146c43;
}

.campaign-filter-modal-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1.4rem;
    padding: 1rem 0 .35rem;
    border-top: 1px solid #e9edf1;
    background: #fafbfc;
    box-shadow: 0 -14px 24px rgba(250, 251, 252, .94);
    z-index: 5000;
}

.campaign-contacts-table td.nowrap-cell,
.campaign-contacts-table th.nowrap-cell {
    white-space: nowrap;
}

.campaign-contacts-table td.table-action-cell {
    white-space: nowrap;
    width: 1%;
}

.campaign-contacts-table td.table-action-cell .btn {
    min-width: 2.35rem;
    justify-content: center;
}

@media (max-width: 992px) {
    .campaign-filter-grid-4,
    .campaign-filter-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .campaign-filter-modal-grid.campaign-filter-grid-4 {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .campaign-filter-age-range {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .campaign-filter-modal-grid.campaign-filter-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .campaign-filter-modal-grid.campaign-filter-grid-4 > .campaign-filter-modal-field {
        grid-column: auto;
    }

    .campaign-filter-modal-details-children .campaign-filter-modal-grid > .campaign-filter-modal-field:last-child {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .campaign-filter-modal-body {
        padding: .85rem;
    }
    .campaign-filter-modal-form {
        grid-template-columns: 1fr;
    }
    .campaign-filter-hero {
        flex-direction: column;
        align-items: flex-start;
    }
    .campaign-filter-grid-2,
    .campaign-filter-grid-3,
    .campaign-filter-grid-4 {
        grid-template-columns: 1fr;
    }

    .campaign-filter-age-range {
        grid-column: auto;
        grid-template-columns: 1fr;
    }
}

table{
    width: 100%;
}


.table thead th {
    background: linear-gradient(180deg, rgba(245, 248, 252, .98), rgba(239, 244, 249, .98));
    color: #304050;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .9rem .85rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid #e5eaf0;
}
.table tbody td {
    background: #fff;
    padding: .95rem .85rem;
    border-top: 1px solid #edf0f2;
    border-bottom: 1px solid #edf0f2;
    vertical-align: middle;
}
.table tbody td.table-action-cell {
    white-space: nowrap;
    width: 1%;
}
.table tbody td.table-action-cell .btn {
    white-space: nowrap;
}
.table-container-allop {
    border: 1px solid #e3eaf0;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}
.table-container-allop .table {
    margin-bottom: 0;
}
.tabela-listagem-allop .table-container-allop .table thead th,
.tabela-listagem-allop .table-container-allop .table tbody td,
.tabela-listagem-allop .table-container-allop .table tbody td.text-end,
.tabela-listagem-allop .table-container-allop .table tbody td.align-number-right {
    text-align: left !important;
}
.tabela-listagem-allop .table-container-allop .table tbody td.table-action-cell > * {
    justify-content: flex-start;
}
.table-container-allop .table thead th:first-child,
.table-container-allop .table tbody tr td:first-child {
    padding-left: 1rem;
}
.table-container-allop .table thead th:last-child,
.table-container-allop .table tbody tr td:last-child {
    padding-right: 1rem;
}
.table tbody tr td:first-child { border-left: 4px solid var(--ks-orange); border-radius: 8px 0 0 8px; }
.table tbody tr td:last-child { border-right: 1px solid #edf0f2; border-radius: 0 8px 8px 0; }

.navbar {
    padding: .7rem 1rem;
    color: #fff;
    background: linear-gradient(135deg, #17212b, #243647) !important;
}
.navbar .container-fluid { display: flex; align-items: center; gap: 1rem; }
.navbar-brand { color: #fff; font-weight: 800; text-decoration: none; }
.navbar-nav { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; gap: .35rem; align-items: center; justify-content: center; }
.nav-link { color: rgba(255,255,255,.9); text-decoration: none; padding: .45rem .65rem; border-radius: 6px; font-weight: 600; }
.nav-link:hover { background: rgba(255,255,255,.12); color: #fff; }
.ms-auto { margin-left: auto; }
.me-auto { margin-right: auto; }
.navbar-collapse { display: flex; align-items: center; flex: 1; gap: 1rem; }
.navbar-toggler { display: none; }

.badge { display: inline-flex; border-radius: 999px; padding: .3rem .55rem; color: #fff; font-size: .75rem; }
.list-group { list-style: none; margin: 0; padding: 0; }
.list-group-item { padding: .65rem 0; border-bottom: 1px solid #eef1f3; }

.permission-table th, .permission-table td { white-space: nowrap; }
.form-check-input { width: 1rem; height: 1rem; accent-color: var(--ks-orange); }
.check-card {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    min-height: 72px;
    padding: .6rem;
    border: 1px solid var(--ks-border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}
.check-card small { display: block; color: var(--ks-muted); margin-top: .15rem; }

@media (max-width: 768px) {
    .page-header.d-flex, .d-flex.justify-content-between { align-items: flex-start; flex-direction: column; }
    .navbar .container-fluid, .navbar-collapse, .navbar-nav { align-items: flex-start; flex-direction: column; }
    .table { border-spacing: 0 .65rem; }
    .table thead { display: none; }
    .table tbody tr, .table tbody td { display: block; width: 100%; }
    .table tbody td { border-left: 1px solid #edf0f2 !important; border-right: 1px solid #edf0f2; border-radius: 0 !important; }
    .table tbody tr td:first-child { border-radius: 8px 8px 0 0 !important; }
    .table tbody tr td:last-child { border-radius: 0 0 8px 8px !important; }
}
/* Bootstrap local compatibility layer */
.col-sm-8 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 576px) { .col-sm-8 { flex: 0 0 66.666%; max-width: 66.666%; } }
@media (min-width: 768px) { .col-md-6 { flex: 0 0 50%; max-width: 50%; } }

.align-middle { vertical-align: middle; }
.bg-transparent { background: transparent !important; }
.text-dark { color: var(--ks-text) !important; }
.text-danger { color: #b42318 !important; }
.text-white { color: #fff !important; }
.display-1 { font-size: clamp(3rem, 10vw, 5.5rem); line-height: 1; }
.lead { font-size: 1.15rem; font-weight: 400; }
.font-weight-bold { font-weight: 700; }
.mb-lg-0 { margin-bottom: 0; }
.btn-secondary {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .18);
}
.btn-secondary:hover { background: rgba(255, 255, 255, .22); }

.navbar-dark .navbar-brand,
.navbar-dark .nav-link { color: rgba(255, 255, 255, .92); }
.navbar-expand-lg { width: 100%; }
.navbar-toggler {
    width: 42px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
}
.navbar-toggler-icon,
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    display: block;
    width: 20px;
    height: 2px;
    margin: 0 auto;
    border-radius: 999px;
    background: #fff;
    content: "";
}
.navbar-toggler-icon::before { transform: translateY(-6px); }
.navbar-toggler-icon::after { transform: translateY(4px); }

.dropdown { position: relative; }
.dropdown-toggle::after {
    content: "";
    width: 0;
    height: 0;
    margin-left: .2rem;
    border-left: .28rem solid transparent;
    border-right: .28rem solid transparent;
    border-top: .34rem solid currentColor;
}
.dropdown-menu {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    z-index: 1000;
    display: none;
    min-width: 190px;
    padding: .45rem;
    margin: 0;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(22, 34, 51, .16);
}
.dropdown-menu.show,
.dropdown.show .dropdown-menu { display: block; }
.dropdown-item {
    display: block;
    width: 100%;
    padding: .55rem .75rem;
    border-radius: 10px;
    color: #4b5966;
    text-decoration: none;
    font-size: .9rem;
}
.dropdown-item:hover { background: var(--ks-yellow, #ffe28a); color: var(--ks-blue-dark); }
.dropdown-menu-end { right: 0; left: auto; }
.user-profile-allop .avatar-placeholder {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ks-orange), var(--ks-blue));
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65);
}

@media (max-width: 991.98px) {
    .navbar,
    .navbar.navbar-liquid {
        width: 100%;
        margin: 0;
        min-height: 60px;
        padding: .45rem .7rem;
        border-radius: 0;
        background: linear-gradient(135deg, #1896ae, #0d8ca5) !important;
        border-color: transparent;
        box-shadow: none;
    }

    .navbar .container-fluid {
        align-items: center;
        flex-wrap: nowrap;
        gap: .5rem;
        padding-left: 0;
        padding-right: 0;
    }

    .navbar-brand {
        flex: 1 1 auto;
        min-width: 0;
    }

    .brand-lockup {
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        min-width: 0;
        gap: .25rem;
        padding: .2rem .55rem;
        background: rgba(255, 255, 255, .96);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 10px rgba(10, 35, 50, .08);
    }

    .brand-lockup img {
        display: block;
        flex: 0 1 auto;
        min-width: 0;
        max-height: 28px;
    }

    .brand-lockup img:first-child {
        max-width: 32px;
    }

    .brand-lockup img:last-child {
        max-width: 88px;
    }

    .navbar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        margin-left: 0;
        width: 58px;
        height: 44px;
        border-radius: 12px;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .18);
        box-shadow: none;
    }

    .navbar-toggler .visually-hidden {
        display: none;
    }

    .navbar-toggler .btn-icon-allop {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.4rem;
        line-height: 1;
    }

    .navbar-toggler .navbar-toggler-icon {
        display: none;
    }

    .navbar-toggler .navbar-toggler-icon::before,
    .navbar-toggler .navbar-toggler-icon::after {
        display: none;
    }

    .navbar-toggler .btn-icon-allop {
        margin: 0;
    }

    .navbar-collapse {
        display: none;
        flex-basis: 100%;
        width: 100%;
        padding-top: .75rem;
        padding-bottom: .5rem;
    }
    .navbar-collapse.show { display: flex; }
    .navbar-nav { width: 100%; }
    .nav-item, .nav-link { width: 100%; }
    .user-profile-allop { margin-left: 0; width: 100%; }
    .user-profile-allop .dropdown-toggle { width: 100%; justify-content: flex-start; }
    .dropdown-menu { position: static; width: 100%; margin-top: .4rem; }
}

.module-menu-allop { position: relative; }
.module-menu-button {
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}
.module-menu-dropdown {
    min-width: 230px;
}
.module-menu-dropdown .dropdown-item.active {
    background: rgba(255, 133, 0, .12);
    color: var(--ks-orange-dark) !important;
    font-weight: 700;
}
.nav-link.active,
.module-menu-allop.active > .nav-link {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}
@media (min-width: 992px) {
    .module-menu-allop:hover > .dropdown-menu {
        display: block;
    }
}

/* Liquid glass visual refresh */
body {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(239, 247, 250, .9)),
        linear-gradient(90deg, rgba(255, 133, 0, .08), rgba(0, 158, 195, .08));
}

.navbar,
.navbar.navbar-liquid {
    position: sticky;
    top: 0;
    z-index: 1040;
    margin: .75rem auto 0;
    width: min(calc(100% - 1.5rem), 1420px);
    min-height: 66px;
    padding: .65rem .85rem;
    color: #24313d;
    background: rgba(255, 255, 255, .68) !important;
    border: 1px solid rgba(255, 255, 255, .74);
    border-bottom-color: rgba(0, 158, 195, .16);
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(31, 48, 63, .12);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.navbar .container-fluid {
    max-width: none;
    padding-left: .35rem;
    padding-right: .35rem;
}

.navbar-brand,
.navbar-dark .navbar-brand {
    color: #22313f;
    font-weight: 800;
}

.navbar-brand:hover {
    color: var(--ks-orange-dark);
}

.navbar-dark .nav-link,
.navbar-nav .nav-link,
.nav-link {
    color: #40505f;
    background: transparent;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.nav-link.active,
.module-menu-allop.active > .nav-link {
    color: #173040;
    background: rgba(255, 255, 255, .62);
    box-shadow: inset 0 0 0 1px rgba(0, 158, 195, .12), 0 8px 18px rgba(31, 48, 63, .08);
}

.module-menu-button {
    color: #40505f;
}

.dropdown-menu,
.module-menu-dropdown,
.user-profile-allop .dropdown-menu {
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(255, 255, 255, .78);
    box-shadow: 0 18px 42px rgba(31, 48, 63, .14);
    backdrop-filter: blur(16px) saturate(145%);
    -webkit-backdrop-filter: blur(16px) saturate(145%);
}

.btn-secondary,
.user-profile-allop .dropdown-toggle {
    color: #24313d;
    background: rgba(255, 255, 255, .64);
    border-color: rgba(0, 158, 195, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42);
}

.btn-secondary:hover,
.user-profile-allop .dropdown-toggle:hover {
    background: rgba(255, 255, 255, .82);
    color: var(--ks-orange-dark);
}

.navbar-toggler {
    border-color: rgba(0, 158, 195, .22);
    background: rgba(255, 255, 255, .6);
}

.navbar-toggler-icon,
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    background: #2f3b47;
}

.card,
.card-allop {
    background: rgba(255, 255, 255, .82);
    border-color: rgba(255, 255, 255, .72);
    box-shadow: 0 18px 42px rgba(31, 48, 63, .1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.form-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #607080 50%), linear-gradient(135deg, #607080 50%, transparent 50%);
    background-position: calc(100% - 18px) 19px, calc(100% - 12px) 19px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.25rem;
}

.form-control:focus,
.form-select:focus,
.input-allop:focus {
    border-color: var(--ks-blue);
    box-shadow: 0 0 0 .2rem rgba(0, 158, 195, .16);
}

@media (max-width: 991.98px) {
    .navbar,
    .navbar.navbar-liquid {
        width: calc(100% - 1rem);
        margin-top: .5rem;
        border-radius: 14px;
    }
}

/* User edit permissions and stores */
.permission-help {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .75rem .85rem;
    border: 1px solid rgba(0, 158, 195, .14);
    border-radius: 10px;
    background: rgba(255, 255, 255, .58);
    color: #41515f;
}

.permission-help strong {
    flex: 0 0 auto;
    color: #22313f;
}

.permission-help span {
    font-size: .86rem;
}

.permission-exception-table th,
.permission-exception-table td {
    vertical-align: top;
}

.permission-cell {
    min-width: 126px;
}

.permission-base {
    display: inline-flex;
    justify-content: center;
    min-width: 72px;
    margin-bottom: .35rem;
    padding: .2rem .42rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}

.permission-base.is-allowed {
    color: #1d6f3a;
    background: rgba(25, 135, 84, .12);
}

.permission-base.is-denied {
    color: #7a4650;
    background: rgba(122, 70, 80, .1);
}

.permission-select {
    min-height: 34px;
    padding: .32rem 1.75rem .32rem .5rem;
    border-radius: 10px;
    font-size: .78rem;
    background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px;
    background-size: 5px 5px, 5px 5px;
}

.loja-grid .check-card {
    height: 100%;
    background: rgba(255, 255, 255, .72);
}

.loja-grid .check-card:hover {
    border-color: rgba(0, 158, 195, .34);
    box-shadow: var(--ks-shadow-sm);
}

@media (max-width: 768px) {
    .permission-help {
        flex-direction: column;
        gap: .1rem;
    }

    .permission-cell {
        min-width: 100%;
    }

    .permission-select {
        width: 100%;
    }
}

/* Nielsen usability pass: cleaner, quieter operational UI */
body {
    background: #f6f8fb;
}

.app-page {
    padding-top: 1.25rem;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.55rem;
    margin-bottom: 1rem;
}

.page-header h1,
h1,
h2 {
    color: #26313b;
    font-size: 1.35rem;
    font-weight: 700;
}

.page-kicker {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #607080;
    font-size: .72rem;
    letter-spacing: .04em;
}

.page-kicker .menu-icon-allop {
    font-size: .95rem;
    line-height: 1;
}

.navbar,
.navbar.navbar-liquid {
    position: sticky;
    top: 0;
    z-index: 1040;
    width: 100%;
    margin: 0;
    min-height: 58px;
    padding: .55rem 1rem;
    color: #26313b;
    background: rgba(255, 255, 255, .94) !important;
    border: 0;
    border-bottom: 1px solid #e5eaf0;
    border-radius: 0;
    box-shadow: 0 2px 10px rgba(31, 48, 63, .06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.navbar .container-fluid {
    max-width: 1440px;
    padding-left: 1rem;
    padding-right: 1rem;
}

.navbar-brand,
.navbar-dark .navbar-brand {
    color: #26313b;
}

.navbar-nav .nav-link,
.navbar-dark .nav-link,
.nav-link,
.module-menu-button {
    color: #495866;
    border-radius: 10px;
    box-shadow: none;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.nav-link.active,
.module-menu-allop.active > .nav-link {
    color: #173040;
    background: #eef6f8;
    box-shadow: none;
}

.btn:hover {
    transform: none;
}

.btn-primary,
.btn-allop.btn-primary {
    background: var(--ks-orange);
    box-shadow: none;
}

.card,
.card-allop {
    background: #fff;
    border: 1px solid #e5eaf0;
    box-shadow: 0 1px 3px rgba(31, 48, 63, .06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.card-header {
    padding: .85rem 1rem;
    background: #fff !important;
}

.card-body {
    padding: 1.25rem;
}

.dropdown-menu,
.module-menu-dropdown,
.user-profile-allop .dropdown-menu {
    background: #fff;
    border: 1px solid #e5eaf0;
    box-shadow: 0 8px 22px rgba(31, 48, 63, .12);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.btn-secondary,
.user-profile-allop .dropdown-toggle {
    color: #26313b;
    background: #fff;
    border-color: #d9e1e8;
    box-shadow: none;
}

.btn-secondary:hover,
.user-profile-allop .dropdown-toggle:hover {
    background: #f6f8fb;
    color: #26313b;
}

.table {
    border-spacing: 0;
}

.table thead th {
    background: linear-gradient(180deg, rgba(245, 248, 252, .98), rgba(239, 244, 249, .98));
    border-bottom: 1px solid #e5eaf0;
    color: #304050;
    font-weight: 800;
}

.table tbody td {
    border-top: 0;
    border-bottom: 1px solid #edf0f2;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.table-hover tbody tr:hover td {
    position: relative;
    z-index: 2;
    transform: translateY(-3px);
    background: #fff;
    box-shadow: 0 10px 22px rgba(31, 48, 63, .10);
}

.table tbody tr td:first-child,
.table tbody tr td:last-child {
    border-radius: 0;
}

.table tbody tr td:first-child {
    border-left: 0;
}

.permission-help {
    background: #f8fafc;
    border-color: #e5eaf0;
}

.loja-grid .check-card,
.check-card {
    background: #fff;
    box-shadow: none;
}

@media (max-width: 991.98px) {
    .navbar,
    .navbar.navbar-liquid {
        width: 100%;
        margin-top: 0;
        border-radius: 0;
    }
}

/* User edit contrast and exception-list layout */
.user-edit-page {
    max-width: 1320px;
}

.user-edit-page .card-allop {
    border-color: #dbe3ea;
    box-shadow: 0 6px 18px rgba(31, 48, 63, .07);
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.user-edit-page .campaign-builder-panel-content > .card-allop,
.user-edit-page .campaign-builder-panel-content > .card-container-allop {
    width: 100%;
    max-width: 100%;
}

.user-edit-page .card-header {
    background: #f8fafc !important;
}

.profile-summary {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.profile-summary strong,
.exception-toolbar strong {
    display: block;
    color: #26313b;
    margin-bottom: .15rem;
}

.profile-summary span,
.exception-toolbar span {
    color: #607080;
    font-size: .86rem;
}

.profile-summary-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.profile-summary-list span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: .25rem .55rem;
    border: 1px solid #dbe3ea;
    border-radius: 999px;
    background: #fff;
    color: #40505f;
    font-weight: 600;
}

.profile-review-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.user-review-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.user-review-grid .campaign-review-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 100%;
    padding: 1.1rem 1.15rem;
    border: 1px solid #dbe3ea;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    box-shadow: 0 8px 22px rgba(31, 48, 63, .05);
}

.user-review-grid .campaign-review-card span {
    color: #2b72f6;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.user-review-grid .campaign-review-card strong {
    color: #26313b;
    font-size: 1rem;
    line-height: 1.25;
}

.user-review-grid .campaign-review-card small {
    color: #607080;
    font-size: .88rem;
    line-height: 1.4;
}

.usuario-lista-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    object-fit: cover;
    background: linear-gradient(135deg, #2b72f6, #ff8c00);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 6px 16px rgba(43, 114, 246, .18);
}

.usuario-lista-avatar-placeholder {
    border: 1px solid rgba(255, 255, 255, .4);
}

.usuarios-lista-view .table-container-allop {
    border: 1px solid #dbe3ea;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(31, 48, 63, .05);
}

.usuarios-lista-view .table {
    margin-bottom: 0;
}

.usuarios-lista-view .table thead th {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: .88rem;
    letter-spacing: .02em;
}

.usuarios-lista-view .table tbody td {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.usuarios-lista-view td.table-action-cell {
    min-width: 7rem;
}

.usuarios-lista-view .usuario-lista-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid #fff;
}

@media (max-width: 991.98px) {
    .user-review-grid {
        grid-template-columns: 1fr;
    }
}

.profile-review-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 100%;
    padding: 1.1rem 1.15rem;
    border: 1px solid #dbe3ea;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    box-shadow: 0 8px 22px rgba(31, 48, 63, .05);
}

.profile-review-card span {
    color: #2b72f6;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.profile-review-card strong {
    color: #26313b;
    font-size: 1rem;
    line-height: 1.25;
}

.profile-review-card small {
    color: #607080;
    font-size: .88rem;
    line-height: 1.4;
}

.details-allop {
    border: 1px solid #dbe3ea;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(31, 48, 63, .05);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.details-allop-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    cursor: pointer;
    list-style: none;
    background:
        linear-gradient(90deg, rgba(255, 133, 0, .08), rgba(255, 133, 0, 0) 28%),
        linear-gradient(180deg, #fbfcfe 0%, #f5f8fb 100%);
    transition: background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.details-allop-summary::-webkit-details-marker {
    display: none;
}

.details-allop-head {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.permission-module-summary {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    width: 100%;
}

.permission-module-summary-title {
    min-width: 0;
}

.details-allop-head strong {
    color: #243140;
    font-size: 1rem;
    font-weight: 800;
}

.details-allop-head small {
    color: #607080;
    font-size: .84rem;
}

.details-allop-module-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.details-allop-module-title .menu-icon-allop {
    color: var(--ks-orange-dark);
    font-size: 1rem;
}

.details-allop-module-title i {
    color: var(--ks-orange-dark);
}

.details-allop-module-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.details-allop-module-title span {
    min-width: 0;
}

.details-allop-toggle {
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 133, 0, .20);
    background: rgba(255, 133, 0, .08);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ks-orange-dark);
}

.details-allop-toggle::before,
.details-allop-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: .72rem;
    height: 2px;
    border-radius: 999px;
    background: var(--ks-orange-dark);
    transform: translate(-50%, -50%);
}

.details-allop-toggle i {
    position: relative;
    z-index: 1;
    font-size: .95rem;
    line-height: 1;
    transition: transform .18s ease;
}

.details-allop-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: opacity .18s ease, transform .18s ease;
}

.details-allop[open] .details-allop-toggle::after {
    opacity: 0;
}

.details-allop[open] .details-allop-toggle::before {
    transform: translate(-50%, -50%) rotate(0deg) scale(1.02);
}

.details-allop[open] .details-allop-toggle i {
    transform: rotate(180deg);
}

.details-allop-body {
    padding: 1rem 1.15rem 1.15rem;
    border-top: 1px solid #e7edf3;
    background: #fff;
    animation: details-allop-enter .18s ease-out;
}

.permission-module-details {
    margin-bottom: .9rem;
    align-self: start;
}

.permission-module-details .details-allop-summary {
    padding: .95rem 1rem;
}

.permission-module-details .details-allop-body {
    padding: 1rem;
}

.details-allop:hover {
    border-color: #d6e0ea;
    box-shadow: 0 10px 26px rgba(31, 48, 63, .06);
}

.details-allop[open] {
    box-shadow: 0 12px 28px rgba(31, 48, 63, .07);
}

.details-allop[open] .details-allop-summary {
    border-bottom: 1px solid rgba(231, 237, 243, .92);
}

@keyframes details-allop-enter {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 992px) {
    .profile-review-grid {
        grid-template-columns: 1fr;
    }
}

.exception-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.55rem;
    margin-bottom: .85rem;
}

.exception-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.exception-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.1fr) minmax(170px, .95fr) minmax(240px, 1.2fr) minmax(3rem, 3rem);
    gap: .75rem;
    align-items: end;
    align-content: start;
    padding: 1rem;
    border: 1px solid #dbe3ea;
    border-radius: 14px;
    background: linear-gradient(180deg, #fbfcfe 0%, #f7f9fc 100%);
    box-shadow: 0 1px 2px rgba(38, 49, 59, .03);
    overflow: visible;
}

.exception-field {
    display: flex;
    flex-direction: column;
    gap: .14rem;
    justify-content: center;
    min-width: 0;
}

.exception-field label {
    color: #607080;
    font-size: .76rem;
    font-weight: 700;
}

.exception-field .input-group-allop {
    width: 100%;
    margin: 0;
    overflow: visible;
}

.exception-row .input-allop,
.exception-row .form-select {
    background-color: #fff;
}

.exception-row .input-select-control-allop {
    min-height: 54px;
    align-items: center;
    overflow: visible;
}

.exception-row .select-combobox-allop,
.exception-row .select-native-allop {
    min-height: 54px;
}

.exception-row .input-select-allop {
    overflow: visible;
}

.exception-row .select-options-allop {
    z-index: 5000;
}

.exception-row .input-radio-allop > .d-flex {
    align-items: stretch;
    min-height: 46px;
    min-width: 0;
}

.input-radio-options-allop {
    align-items: stretch;
    min-width: 0;
    width: 100%;
}

.input-radio-options-allop .input-radio-option {
    width: 100%;
}

.input-radio-options-allop.d-flex.flex-row {
    gap: 0 !important;
    flex-wrap: nowrap !important;
}

.exception-row .input-radio-segmented {
    position: relative;
    gap: 0;
    width: 100%;
    min-height: 56px;
    padding: 0;
    border: 1px solid #d8e1ec;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
    box-shadow: 0 1px 2px rgba(38, 49, 59, .04), inset 0 1px 0 rgba(255,255,255,.8);
}

.exception-row .input-radio-segmented .input-radio-option {
    min-width: 0;
}

.exception-row .input-radio-segmented .input-radio-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exception-row .input-radio-segmented .input-radio-control {
    flex: 0 0 auto;
}

.exception-row .input-radio-segmented::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 6px);
    border-radius: 13px;
    background: linear-gradient(180deg, #ffe3c8 0%, #fff6ed 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 133, 0, .36), 0 8px 18px rgba(255, 133, 0, .13);
    transform: translateX(calc(var(--radio-segment-shift, 0) * 100%));
    transition: transform .28s cubic-bezier(.2, .9, .2, 1), background .22s ease, box-shadow .22s ease;
    pointer-events: none;
}

.exception-row .input-radio-segmented .input-radio-option {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    min-height: 56px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: .65rem .9rem;
    gap: .4rem;
    transition: color .18s ease, transform .18s ease, background-color .18s ease;
    position: relative;
    z-index: 1;
    font-weight: 700;
    letter-spacing: .01em;
}

.exception-row .input-radio-segmented .input-radio-option + .input-radio-option {
    border-left: 1px solid #dbe4ee;
}

.exception-row .input-radio-segmented .input-radio-option:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
    background: rgba(255, 133, 0, .02);
}

.exception-row .input-radio-segmented .input-radio-option.active {
    background: linear-gradient(180deg, rgba(255, 133, 0, .10) 0%, rgba(255, 133, 0, .04) 100%);
    box-shadow: none;
}

.exception-row .input-radio-segmented .input-radio-option.active .input-radio-label {
    color: #b95b00;
}

.exception-row .input-radio-segmented .input-radio-option:not(.active) .input-radio-label {
    color: #5a6673;
}

.exception-row .input-radio-segmented .input-radio-option:not(.active) .input-radio-control {
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(148, 163, 184, .82);
}

.exception-row .input-radio-segmented .input-radio-option.active .input-radio-control {
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(255, 133, 0, .98), 0 0 0 4px rgba(255, 133, 0, .08);
}

.exception-row .input-radio-option {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-width: 4rem;
    width: fit-content;
    max-width: 5.75rem;
    white-space: nowrap;
    flex: 0 0 auto;
    padding: .55rem .65rem;
    border: 1px solid #e3e9f0;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
    color: #42505c;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .12s ease;
    box-shadow: 0 1px 2px rgba(38, 49, 59, .04);
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 1px 2px rgba(38, 49, 59, .04);
}

.exception-row .input-radio-option:not(.active) {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.exception-row .input-radio-option:hover {
    border-color: rgba(255, 133, 0, .28);
    box-shadow: 0 6px 18px rgba(31, 48, 63, .07);
    transform: translateY(-1px);
}

.exception-row .input-radio-option.active {
    border-color: #e3e9f0;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    color: #42505c;
    box-shadow: 0 1px 2px rgba(38, 49, 59, .04);
}

.exception-row .input-radio-control {
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--ks-orange);
    width: 13px;
    height: 13px;
    outline: 0;
    background: #fff;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #fff;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    cursor: pointer;
}

.exception-row .input-radio-control::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: #fff;
}

.exception-row .input-radio-control:not(:checked) {
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(148, 163, 184, .9);
}

.exception-row .input-radio-control:checked::before {
    background: var(--ks-orange);
}

.exception-row .input-radio-option.active .input-radio-control:not(:checked) {
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(148, 163, 184, .9);
}

.exception-row .input-radio-label {
    display: block;
    font-size: .95rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 0 1 auto;
    max-width: 100%;
}

.exception-row .input-radio-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1rem;
    color: var(--ks-orange);
    font-size: .95rem;
}

.exception-row .input-radio-option .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.exception-row .input-radio-allop > .d-flex {
    gap: .45rem;
}

.exception-row .input-radio-options-allop {
    gap: .45rem !important;
}

.exception-row .btn-allop[data-remove-exception] {
    align-self: end;
    margin-bottom: .15rem;
    justify-self: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border-radius: 12px;
}

.exception-empty {
    padding: .8rem;
    border: 1px dashed #cbd5df;
    border-radius: 10px;
    background: #f8fafc;
}

body {
    background: #eef2f6;
}

@media (max-width: 992px) {
    .exception-row {
        grid-template-columns: 1fr;
    }

    .exception-row .input-radio-segmented {
        flex-wrap: wrap;
    }

    .exception-row .input-radio-segmented .input-radio-option {
        flex: 1 1 0;
        min-width: 0;
    }

    .exception-row .btn {
        width: 100%;
    }

    .exception-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Brand, staged forms and add-list controls */
body {
    background: #e9eef4;
}

.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-width: 210px;
}

.brand-lockup img {
    display: block;
    max-height: 30px;
    width: auto;
    object-fit: contain;
}

.brand-lockup span {
    width: 1px;
    height: 24px;
    background: #d8e0e8;
}

.login-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    background: #e9eef4;
}

.login-panel {
    width: min(100%, 420px);
}

.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.55rem;
    margin-bottom: 1rem;
}

.login-brand img {
    max-width: 150px;
    max-height: 52px;
    object-fit: contain;
}

.user-step {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.step-heading {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: #26313b;
}

.step-heading > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #26313b;
    color: #fff;
    font-weight: 800;
    font-size: .86rem;
}

.step-heading strong {
    display: block;
    font-size: .98rem;
}

.step-heading small {
    display: block;
    color: #607080;
}

.store-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.usuario-lojas-block [data-store-list] {
    gap: 1rem !important;
}

.store-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    gap: .75rem;
    align-items: end;
    padding: .8rem;
    border: 1px solid #dbe3ea;
    border-radius: 10px;
    background: #f8fafc;
}

.store-field {
    display: flex;
    flex-direction: column;
    gap: .14rem;
    min-width: 0;
}

.store-field-label-placeholder {
    display: block;
    min-height: 1.05rem;
    margin: 0;
    line-height: 1;
    color: transparent;
    user-select: none;
}

.store-field .input-group-allop {
    width: 100%;
    margin: 0;
}

.usuario-lojas-block .store-row + .store-row {
    margin-top: .15rem;
}

@media (max-width: 768px) {
    .brand-lockup {
        min-width: 0;
    }

    .brand-lockup img {
        max-height: 24px;
    }

    .store-row {
        grid-template-columns: 1fr;
    }

    .store-row .btn {
        width: 100%;
    }
}

/* Tabs */
.tabs-allop {
    display: flex;
    flex-direction: column;
    gap: 1.55rem;
}

.tabs-nav-allop {
    display: flex;
    gap: .5rem;
    padding: .28rem;
    border: 1px solid #dbe3ea;
    border-radius: 10px;
    background: #f8fafc;
    overflow-x: auto;
}

.tab-button-allop {
    min-height: 38px;
    padding: .45rem .75rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #52616f;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.tab-button-allop:hover {
    background: #eef3f7;
    color: #26313b;
}

.tab-button-allop.active {
    background: #26313b;
    color: #fff;
}

.tab-panel-allop[hidden] {
    display: none;
}

/* Login refresh */
.login-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(0, 158, 195, .18), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(255, 133, 0, .14), transparent 30rem),
        #e9eef4;
}

.login-panel {
    width: min(100%, 440px);
}

.login-brand {
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(219, 227, 234, .9);
    border-radius: 12px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 10px 28px rgba(31, 48, 63, .08);
}

.login-brand img:first-child {
    max-width: 142px;
}

.login-brand img:last-child {
    max-width: 118px;
}

.login-panel .card-allop {
    border-radius: 12px;
    box-shadow: 0 18px 38px rgba(31, 48, 63, .12);
}

.login-panel .card-header {
    text-align: center;
}

/* Dashboard */
.dashboard-header {
    display: grid;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    gap: 1.55rem;
    align-items: center;
}

.dashboard-header > div:first-child {
    min-width: 0;
}

.dashboard-header .dashboard-filter {
    width: 100%;
    max-width: 100%;
}

.dashboard-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 160px auto;
    gap: .6rem;
    align-items: end;
}

.dashboard-page {
    padding-top: .75rem;
}

#app > .navbar + .dashboard-page {
    padding-top: .75rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.dashboard-grid-sem-whatsapp {
    grid-template-columns: minmax(0, 1fr);
}

.dashboard-grid > * {
    min-width: 0;
}

.phone-shell {
    width: min(100%, 340px);
    margin: 0 auto;
    padding: .55rem;
    border: 1px solid #24313b;
    border-radius: 28px;
    background: #1f2a34;
    box-shadow: 0 14px 28px rgba(31, 48, 63, .14);
}

.phone-speaker {
    width: 72px;
    height: 5px;
    margin: .1rem auto .65rem;
    border-radius: 999px;
    background: #53616e;
}

.phone-screen {
    height: 540px;
    min-height: 0;
    padding: .5rem;
    border-radius: 20px;
    background: #f4f7fa;
}

.phone-header {
    display: flex;
    justify-content: space-between;
    gap: 1.55rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid #dbe3ea;
}

.phone-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #efe8dc;
    background-image:
        radial-gradient(circle at 12px 12px, rgba(110, 121, 118, .08) 0 1.1px, transparent 1.2px),
        radial-gradient(circle at 36px 26px, rgba(110, 121, 118, .055) 0 1px, transparent 1.1px),
        radial-gradient(circle at 58px 10px, rgba(110, 121, 118, .045) 0 .95px, transparent 1.05px),
        radial-gradient(circle at 20px 52px, rgba(110, 121, 118, .06) 0 1px, transparent 1.1px),
        linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06));
    background-size: 72px 72px, 72px 72px, 72px 72px, 72px 72px, 100% 100%;
}

.phone-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 18%, rgba(255,255,255,.35) 0 1px, transparent 1.2px),
        radial-gradient(circle at 78% 12%, rgba(255,255,255,.25) 0 1px, transparent 1.2px),
        radial-gradient(circle at 64% 68%, rgba(255,255,255,.22) 0 1px, transparent 1.2px);
    opacity: .55;
    pointer-events: none;
}

.phone-screen > * {
    position: relative;
    z-index: 1;
}

.phone-header strong,
.phone-header span {
    display: block;
}

.phone-header {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    margin: -.5rem -.5rem 0;
    padding: .7rem .85rem .6rem;
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(180deg, #128c7e 0%, #0d7f72 100%);
    color: #fff;
}

.phone-header strong {
    color: #fff;
}

.phone-header span {
    color: rgba(255,255,255,.82);
    font-size: .78rem;
}

.phone-count {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #26313b;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
}

.celular-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.celular-footer {
    flex: 0 0 auto;
}

.phone-instance-list {
    display: grid;
    flex: 1 1 auto;
    align-content: start;
    align-items: start;
    grid-auto-rows: max-content;
    gap: .5rem;
    margin-top: .7rem;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.phone-instance-list > * {
    min-height: 0;
}

.phone-instance-card {
    display: grid;
    gap: .55rem;
    padding: .8rem;
    border: 1px solid #dbe3ea;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(31, 48, 63, .05);
}

.phone-instance-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.phone-instance-card strong {
    display: block;
    color: #26313b;
    font-size: .95rem;
    line-height: 1.2;
}

.phone-instance-card span,
.phone-instance-card small,
.phone-empty {
    color: #607080;
    font-size: .78rem;
}

.phone-instance-card .status-pill {
    flex: 0 0 auto;
    padding: .24rem .5rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}

.phone-instance-card .status-pill.is-online {
    background: linear-gradient(135deg, #1f9d61 0%, #2bb673 100%);
    color: #fff;
}

.phone-instance-card .status-pill.is-offline {
    background: linear-gradient(135deg, #f3f5f8 0%, #e2e8f0 100%);
    color: #334155;
    border: 1px solid rgba(148, 163, 184, .32);
}

.phone-instance-copy {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.phone-instance-status-text {
    color: #334155;
    font-size: .82rem;
    line-height: 1.25;
}

.phone-instance-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}

.phone-instance-actions:not(:has(button)) {
    display: none;
}

.phone-instance-actions .btn {
    min-width: 0;
}

.phone-instance-actions .btn:disabled {
    opacity: .72;
}

.phone-empty {
    padding: .75rem 0;
    text-align: center;
}

@media (max-width: 1080px) {
    .dashboard-page {
        padding-top: 1rem;
    }

    #app > .navbar + .dashboard-page {
        padding-top: 1rem;
    }
}

@media (max-width: 760px) {
    .dashboard-header {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-header .dashboard-filter {
        width: 100%;
        max-width: 100%;
    }

    .dashboard-filter {
        grid-template-columns: 1fr;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .phone-shell {
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
        transform: none;
    }
}
.qr-box img {
    max-width: 240px;
    max-height: 240px;
}

@media (max-width: 1080px) {
    .dashboard-page {
        padding-top: 1.5rem;
    }
}

@media (max-width: 760px) {
    .dashboard-header {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-header .dashboard-filter {
        width: 100%;
        max-width: 100%;
    }

    .dashboard-filter {
        grid-template-columns: 1fr;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .phone-shell {
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
        transform: none;
    }
}

/* Searchable selects and user photo */
.input-select-allop {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
    overflow: visible;
}

.input-select-static-allop {
    padding: .1rem 0 .15rem;
}

.select-static-native-allop {
    min-height: 56px;
    width: 100%;
    padding: .75rem 2.75rem .75rem 1rem;
    border: 1px solid #dbe3ea;
    border-radius: 10px;
    background-color: #fff;
    color: #26313b;
    font-size: .94rem;
    box-shadow: 0 1px 2px rgba(38, 49, 59, .04);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' stroke='%236b7580' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 1rem 1rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.select-static-native-allop:focus {
    border-color: var(--ks-blue);
    outline: 0;
    box-shadow: 0 0 0 .16rem rgba(0, 158, 195, .12);
}

.input-select-allop > label,
.input-group-allop > label {
    color: #343a40;
    font-size: 1rem;
    font-weight: 700;
}


.input-select-allop.is-open {
    z-index: 5000;
}

.input-select-control-allop {
    position: relative;
    width: 100%;
    overflow: visible;
}

.select-native-allop {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.select-combobox-allop {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 56px;
    padding: .75rem 4.9rem .75rem 1rem;
    border: 1px solid #dbe3ea;
    border-radius: 10px;
    background: #fff;
    color: #26313b;
    font: inherit;
    font-size: .94rem;
    box-shadow: 0 1px 2px rgba(38, 49, 59, .04);
    text-align: left;
    cursor: pointer;
}

.select-static-single-allop {
    margin: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: .55rem .75rem;
    border: 1px solid #d7dee5;
    border-radius: 10px;
    background: #f8fafc;
    color: #5f6c78;
    font-size: .92rem;
    font-weight: 400;
    line-height: 1.2;
    box-shadow: inset 0 1px 2px rgba(38, 49, 59, .03);
    cursor: not-allowed;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.input-select-static-allop[data-select-static-franchise="1"] .select-static-single-allop {
    border-color: #d7dee5;
    background: linear-gradient(180deg, #fafbfc 0%, #f3f6f9 100%);
}

.select-combobox-value-allop {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-combobox-actions-allop {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: .1rem;
    height: 100%;
    padding-right: .15rem;
}

.select-search-icon-allop {
    position: absolute;
    left: .75rem;
    width: 17px;
    height: 17px;
    color: #6b7580;
    pointer-events: none;
    z-index: 1;
}

.select-search-icon-allop svg,
.select-search-clear-allop svg,
.select-toggle-allop svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.select-search-input-allop {
    position: relative;
    z-index: 1;
    height: 56px;
    width: 100%;
    padding: .75rem 4.35rem .75rem 2.35rem;
    border: 1px solid #dbe3ea;
    border-radius: 10px;
    background: #fff;
    color: #26313b;
    font: inherit;
    font-size: .94rem;
    box-shadow: 0 1px 2px rgba(38, 49, 59, .04);
}

.select-search-input-allop::-ms-clear,
.select-search-input-allop::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

.select-search-input-allop::-webkit-search-decoration,
.select-search-input-allop::-webkit-search-cancel-button,
.select-search-input-allop::-webkit-search-results-button,
.select-search-input-allop::-webkit-search-results-decoration {
    display: none;
}

.select-search-input-allop:focus {
    border-color: var(--ks-blue);
    outline: 0;
    box-shadow: 0 0 0 .16rem rgba(0, 158, 195, .12);
}

.select-search-clear-allop,
.select-toggle-allop {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    color: #6b7580;
    cursor: pointer;
    pointer-events: auto;
    z-index: 4;
}

.select-search-clear-allop {
    right: auto;
    border-radius: 999px;
    top: auto;
    transform: none;
}

.select-toggle-allop {
    min-width: 3rem;
    width: 3rem;
    border-left: 1px solid #e5eaf0;
    border-radius: 0 10px 10px 0;
    top: auto;
    height: 100%;
}

.select-search-clear-allop:hover,
.select-search-clear-allop:focus,
.select-toggle-allop:hover,
.select-toggle-allop:focus {
    background: #eef3f6;
    color: #26313b;
    outline: 0;
}

/* Password fields: keep only our custom eye button */
.input-senha-autofill-guard {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    left: -9999px;
    top: auto;
}

.input-senha-campo::-ms-reveal,
.input-senha-campo::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

.input-senha-campo::-webkit-credentials-auto-fill-button,
.input-senha-campo::-webkit-strong-password-auto-fill-button,
.input-senha-campo::-webkit-textfield-decoration-container {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.input-senha-wrapper {
    position: relative;
    width: 100%;
    display: block;
}

.input-senha-toggle {
    position: absolute;
    top: 50%;
    right: .75rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    min-height: 1.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6b7580;
    cursor: pointer;
    z-index: 3;
    border-radius: 999px;
    line-height: 1;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
}

.input-senha-campo {
    padding-right: 3rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

.input-senha-campo.is-visible {
    /* sem efeito visual extra */
}

.select-options-allop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 5100;
    width: 100%;
    box-sizing: border-box;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    border: 1px solid #dbe3ea;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(38, 49, 59, .14);
}

.input-select-allop.is-open-up .select-options-allop {
    top: auto;
    bottom: calc(100% + 4px);
}

.select-options-search-allop {
    position: relative;
    flex: 0 0 auto;
    padding: .45rem .45rem .25rem;
    background: #fff;
    border-bottom: 1px solid #eef2f6;
}

.select-feedback-allop {
    padding: .3rem .55rem .15rem;
    color: #6b7580;
    font-size: .78rem;
    line-height: 1.3;
    background: #fff;
}

.select-feedback-allop:empty {
    display: none;
}

.select-options-list-allop {
    padding: .3rem .45rem .45rem;
    max-height: none;
    overflow-y: visible;
    overflow-x: hidden;
}

.select-option-allop {
    display: flex;
    width: 100%;
    align-items: center;
    min-height: 38px;
    padding: .52rem .65rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #26313b;
    cursor: pointer;
    font: inherit;
    font-size: .9rem;
    text-align: left;
}

.select-option-allop:hover,
.select-option-allop:focus {
    background: #eef7fa;
    outline: 0;
}

.select-option-allop.is-selected {
    background: rgba(0, 158, 195, .1);
    color: #006f8b;
    font-weight: 700;
}

.select-option-allop:disabled {
    color: #9aa6b2;
    cursor: not-allowed;
}

.select-options-allop[hidden] {
    display: none;
}

.select-empty-allop {
    padding: .75rem .6rem;
    color: #6b7580;
    font-size: .86rem;
}

.select-feedback-allop {
    min-height: .95rem;
    margin-top: .1rem;
    color: #6b7580;
    font-size: .78rem;
    line-height: 1.25;
}

.user-profile-allop .avatar-photo,
.user-photo-preview img {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), 0 0 0 1px #dbe3ea;
}

.user-photo-field {
    display: flex;
    gap: .85rem;
    align-items: center;
    min-height: 76px;
    padding: .75rem;
    border: 1px solid #dbe3ea;
    border-radius: 10px;
    background: #f8fafc;
}

.user-photo-preview,
.user-photo-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ks-orange), var(--ks-blue));
    color: #fff;
    font-weight: 800;
}

.user-photo-preview img {
    width: 52px;
    height: 52px;
}

.order-actions-allop {
    display: inline-flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
    border: 1px solid #cdd5dd;
    border-radius: 10px;
    background: #fff;
}

.order-actions-allop .order-button-allop {
    min-width: 34px;
    border: 0;
    border-radius: 0;
    padding-left: .45rem;
    padding-right: .45rem;
}

.order-actions-allop .order-button-allop + .order-button-allop {
    border-left: 1px solid #e5eaf0;
}

.order-actions-allop .order-button-allop .btn-icon-allop {
    margin-right: .2rem;
}

/* Menu icons */
.menu-link-with-icon {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.menu-icon-allop {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    color: currentColor;
}

.dropdown-item.menu-link-with-icon {
    display: flex;
}

.module-menu-button.menu-link-with-icon {
    display: inline-flex;
}

/* Mobile-first usability pass */
img,
svg,
video,
canvas {
    max-width: 100%;
}

.card,
.card-allop,
.table-container-allop,
.modal-dialog-allop,
.phone-shell,
.metric-card,
.exception-row,
.store-row,
.user-photo-field {
    min-width: 0;
}

.table tbody td,
.dropdown-item,
.nav-link,
.btn,
.form-control,
.form-select,
.input-allop {
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    body {
        font-size: 14px;
    }

    .container,
    .container-fluid {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .app-page {
        padding-top: 1rem;
        padding-bottom: 1.5rem;
    }

    .navbar,
    .navbar.navbar-liquid {
        min-height: 56px;
        padding: .5rem .75rem;
    }

    .navbar .container-fluid {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-left: 0;
        padding-right: 0;
        gap: .5rem;
    }

    .brand-lockup {
        flex: 1 1 auto;
        min-width: 0;
        gap: .4rem;
    }

    .brand-lockup img {
        max-width: 108px;
        max-height: 26px;
    }

    .brand-lockup span {
        height: 20px;
    }

    .navbar-collapse.show {
        gap: .75rem;
        padding-top: .75rem;
    }

    .navbar-nav {
        align-items: stretch;
        justify-content: flex-start;
        gap: .5rem;
    }

    .navbar-nav .nav-link,
    .module-menu-button,
    .dropdown-item.menu-link-with-icon {
        width: 100%;
        min-height: 42px;
        justify-content: flex-start;
    }

    .module-menu-dropdown {
        min-width: 100%;
        padding: .28rem;
    }

    .user-profile-allop .dropdown-toggle {
        width: 100%;
        justify-content: flex-start;
    }

    .page-header,
    .dashboard-header,
    .page-header.d-flex,
    .d-flex.justify-content-between {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: .65rem;
    }

    .page-header h1,
    h1,
    h2 {
        font-size: 1.18rem;
        line-height: 1.25;
    }

    .btn,
    button.btn {
        min-height: 42px;
    }

    .btn-sm {
        min-height: 38px;
    }

    .card-header,
    .card-body {
        padding: .6rem;
    }

    .tabs-nav-allop {
        gap: .1rem;
        padding: .25rem;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .tab-button-allop {
        min-height: 40px;
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .dashboard-grid,
    .dashboard-filter,
    .metric-grid,
    .exception-row,
    .store-row {
        grid-template-columns: 1fr !important;
    }

    .dashboard-filter .btn,
    .exception-row .btn,
    .store-row .btn,
    .user-photo-field .form-control {
        width: 100%;
    }

    .phone-shell {
        width: min(100%, 360px);
        border-radius: 22px;
        padding: .55rem;
    }

    .phone-screen {
        height: 480px;
        min-height: 0;
        border-radius: 16px;
        padding: .6rem;
    }

    .phone-instance-card {
        grid-template-columns: 1fr;
    }

    .status-pill {
        width: max-content;
    }

    .metric-card {
        min-height: 82px;
    }

    .metric-card strong {
        font-size: 1.18rem;
    }

    .modal-allop {
        align-items: flex-end;
        padding: .75rem;
    }

    .modal-dialog-allop {
        width: 100%;
        max-height: calc(100vh - 1.5rem);
        overflow: auto;
        border-radius: 12px;
    }

    .whatsapp-modal-dialog {
        width: 100%;
    }

    .whatsapp-modal-title {
        gap: .65rem;
    }

    .whatsapp-modal-badge {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    .whatsapp-modal-layout {
        grid-template-columns: 1fr;
    }

    .whatsapp-qr-box {
        min-height: 200px;
        padding: .5rem;
    }

    .whatsapp-qr-box img {
        max-width: 190px;
        max-height: 190px;
    }

    .qr-box {
        min-height: 220px;
    }

    .qr-box img {
        max-width: 210px;
        max-height: 210px;
    }

    .user-photo-field {
        align-items: flex-start;
    }

    .login-shell {
        min-height: 100svh;
        padding: 1.25rem;
    }

    .login-brand {
        gap: .65rem;
        padding: .6rem;
    }

    .login-brand img:first-child,
    .login-brand img:last-child {
        max-width: 118px;
        max-height: 42px;
    }
}

@media (max-width: 768px) {
    .row {
        margin-left: -.5rem;
        margin-right: -.5rem;
    }

    .row > * {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .table-responsive,
    .table-container-allop {
        overflow: visible;
        box-shadow: none !important;
    }

    .table {
        border-spacing: 0 .65rem;
    }

    .table thead {
        display: none;
    }

    .table tbody,
    .table tbody tr,
    .table tbody td {
        display: block;
        width: 100%;
    }

    td.table-action-cell{
        width: 100% !important;
    }
    .table tbody tr {
        margin-bottom: .65rem;
        border: 1px solid #dbe3ea;
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 1px 3px rgba(31, 48, 63, .05);
    }

    .table tbody td {
        display: grid;
        grid-template-columns: minmax(96px, 40%) minmax(0, 1fr);
        gap: .85rem;
        align-items: start;
        min-height: 42px;
        padding: .7rem .8rem;
        border: 0 !important;
        border-bottom: 1px solid #edf0f2 !important;
        border-radius: 0 !important;
        background: #fff;
        transform: none !important;
        justify-items: end;
        text-align: right;
    }

    .table tbody td:last-child {
        border-bottom: 0 !important;
    }

    .table tbody td::before {
        content: attr(data-label);
        color: #607080;
        font-size: .75rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .02em;
        white-space: nowrap;
        justify-self: start;
        text-align: left;
    }

    .table tbody td .d-flex {
        align-items: stretch;
        flex-direction: column;
        gap: .45rem;
    }

    .table tbody td .btn {
        width: 100%;
    }

    .table tbody td.table-action-cell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .85rem;
    }

    .table tbody td.table-action-cell .btn {
        width: auto;
        min-width: 2.75rem;
        margin-left: auto;
    }

    .permission-table tbody td {
        grid-template-columns: minmax(110px, 42%) minmax(0, 1fr);
    }

    .permission-table .form-check-input {
        justify-self: start;
    }

    .exception-toolbar,
    .profile-summary {
        gap: .65rem;
    }

    .exception-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .exception-toolbar .btn {
        width: 100%;
    }

    .profile-summary-list span {
        max-width: 100%;
    }

    .user-photo-field {
        flex-direction: column;
    }

    .user-photo-preview,
    .user-photo-empty,
    .user-photo-preview img {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }
}

@media (max-width: 480px) {
    .container,
    .container-fluid {
        padding-left: .55rem;
        padding-right: .55rem;
    }

    .card-header,
    .card-body {
        padding: .75rem;
    }

    .brand-lockup img {
        max-width: 84px;
        max-height: 22px;
    }

    .brand-lockup span {
        display: none;
    }

    .navbar-brand {
        max-width: calc(100% - 64px);
    }

    .navbar,
    .navbar.navbar-liquid {
        min-height: 58px;
        padding: .45rem .6rem;
    }

    .brand-lockup {
        padding: .18rem .45rem;
        border-radius: 11px;
    }

    .brand-lockup img:first-child {
        max-width: 30px;
    }

    .brand-lockup img:last-child {
        max-width: 76px;
    }

    .navbar-toggler {
        width: 52px;
        height: 40px;
        border-radius: 10px;
    }

    .navbar-toggler .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .table tbody td {
        grid-template-columns: minmax(92px, 38%) minmax(0, 1fr);
        gap: .55rem;
        min-height: 38px;
        padding: .65rem .75rem;
    }

    .table tbody td::before {
        font-size: .7rem;
    }

    .phone-shell {
        border-radius: 18px;
    }

    .phone-screen {
        height: 440px;
        min-height: 0;
    }

    .login-brand {
        flex-wrap: wrap;
    }

    .login-brand img:first-child,
    .login-brand img:last-child {
        max-width: 104px;
    }
}

.login-page-header {
    text-align: left;
}

.login-page-header h1 {
    font-size: 1.35rem;
    margin-bottom: 0;
}

/* Ajuste final de responsividade geral */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

#app,
.container,
.container-fluid,
.app-page,
.dashboard-page,
.user-edit-page,
.card,
.card-allop,
.card-container-allop,
.formulario-allop {
    min-width: 0;
}

.card,
.card-allop,
.card-container-allop {
    max-width: 100%;
}

.table-responsive {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.permission-matrix-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .25rem;
}

.permission-actions-bar {
    position: sticky;
    top: .75rem;
    z-index: 4;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
    backdrop-filter: blur(6px);
    border: 1px solid rgba(217, 226, 236, .9);
    border-radius: 14px;
    padding: .55rem .75rem;
    box-shadow: 0 10px 22px rgba(31, 48, 63, .05);
}

.permission-builder-shell {
    width: 100%;
}

.permission-matrix-card {
    padding: 1.25rem 1.25rem 1.35rem;
}

.permission-matrix-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .1rem .75rem 1rem;
    border-bottom: 1px solid rgba(217, 226, 236, .7);
    margin-bottom: 1rem;
}

.permission-matrix-card-head h2 {
    margin: 0;
    color: #2b394a;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.permission-modules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 1rem;
    align-items: start;
    align-content: start;
}

.permission-modules.permission-modules-table {
    grid-template-columns: 1fr;
}

.permission-module-section {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem;
    border: 1px solid rgba(217, 226, 236, .85);
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 8px 18px rgba(31, 48, 63, .04);
}

.permission-module-details-table .details-body-allop {
    padding-top: .9rem;
}

.permission-module-details-table .details-body-allop > * {
    width: 100%;
}

.permission-module-details-table.categoria-completa {
    border-left: 4px solid #16a34a;
}

.permission-module-details-table.categoria-parcial {
    border-left: 4px solid #f59e0b;
}

.permission-module-details-table.categoria-vazia {
    border-left: 4px solid transparent;
}

.permission-module-details-table .details-allop-toggle.btn-expandir {
    position: relative;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}

.permission-module-details-table .details-allop-toggle.btn-expandir::before,
.permission-module-details-table .details-allop-toggle.btn-expandir::after {
    display: none;
}

.permission-module-details-table .details-allop-toggle.btn-expandir i {
    display: inline-block;
    font-size: .95rem;
    line-height: 1;
    transition: transform .18s ease;
}

.permission-module-details[open] .details-allop-toggle.btn-expandir i {
    transform: rotate(180deg);
}

.permission-module-table-wrap {
    overflow-x: auto;
}

.permission-module-table {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0 .7rem;
}

.permission-module-table thead th {
    padding: .25rem .85rem .6rem;
    color: #334155;
    font-size: .9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}

.permission-module-table tbody tr {
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(31, 48, 63, .04);
}

.permission-module-table tbody td {
    padding: .95rem .85rem;
    border-top: 1px solid rgba(217, 226, 236, .9);
    border-bottom: 1px solid rgba(217, 226, 236, .9);
    vertical-align: middle;
}

.permission-module-table tbody td:first-child {
    border-left: 1px solid rgba(217, 226, 236, .9);
    border-radius: 18px 0 0 18px;
}

.permission-module-table tbody td:last-child {
    border-right: 1px solid rgba(217, 226, 236, .9);
    border-radius: 0 18px 18px 0;
}

.permission-col-app {
    width: 32%;
}

.permission-col-action {
    width: 12%;
}

.permission-cell-app {
    min-width: 18rem;
}

.permission-app-title-table {
    align-items: center;
}

.permission-app-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.permission-app-text strong {
    color: #243140;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.15;
}

.permission-app-text small {
    margin-top: .15rem;
    color: #64748b;
    font-size: .79rem;
    line-height: 1.2;
    word-break: break-word;
}

.permission-cell-actions {
    width: auto;
    min-width: 5.8rem;
    white-space: nowrap;
}

.permission-app-actions-table {
    justify-content: flex-start;
    gap: .55rem;
    min-width: 0;
}

.permission-app-actions-table .btn {
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
}

.permission-app-actions-table .permission-toggle-chip.btn-ativo .permission-toggle-chip-ui,
.permission-actions-bar-global .permission-toggle-chip.btn-ativo .permission-toggle-chip-ui {
    background: linear-gradient(180deg, rgba(22, 163, 74, .14), rgba(22, 163, 74, .06));
    border-color: rgba(22, 163, 74, .5);
    color: #14532d;
    box-shadow: 0 8px 18px rgba(22, 163, 74, .12);
}

.permission-app-actions-table .permission-toggle-chip.btn-ativo .permission-toggle-chip-ui i,
.permission-actions-bar-global .permission-toggle-chip.btn-ativo .permission-toggle-chip-ui i {
    color: #16a34a;
}

.permission-toggle-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
}

.permission-toggle-chip input {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.permission-toggle-chip-ui {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 2.35rem;
    padding: .45rem .75rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 133, 0, .22);
    background: rgba(255,255,255,.94);
    color: #334155;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
    box-shadow: 0 4px 10px rgba(31, 48, 63, .04);
}

.permission-toggle-chip-ui i {
    font-size: .95rem;
    color: var(--ks-orange-dark);
}

.permission-toggle-chip:hover .permission-toggle-chip-ui {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(31, 48, 63, .07);
}

.permission-toggle-chip input:checked + .permission-toggle-chip-ui {
    background: linear-gradient(180deg, rgba(255, 133, 0, .12), rgba(255, 133, 0, .06));
    border-color: rgba(255, 133, 0, .55);
    color: #243140;
}

.permission-toggle-chip-all .permission-toggle-chip-ui {
    min-width: 8.6rem;
    justify-content: center;
}

.permission-toggle-chip-row .permission-toggle-chip-ui {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 14px;
}

.permission-toggle-chip-row .permission-toggle-chip-ui span {
    display: none;
}

.permission-cell-permission {
    width: 5.25rem;
    min-width: 5.25rem;
    text-align: center;
    vertical-align: middle;
}

.permission-cell-permission .permission-check-card {
    width: 3rem;
    min-width: 3rem;
    max-width: 3rem;
    min-height: 2.6rem;
    padding: .18rem;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.permission-cell-permission .permission-check-card .permission-check-label i {
    display: none;
}

.permission-cell-permission .permission-check-label {
    justify-content: center;
    gap: .35rem;
}

.permission-cell-permission .permission-check-label span {
    display: none;
}

.permission-module-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-width: 0;
    padding: .15rem .2rem .7rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid rgba(43, 57, 74, .08);
    background:
        linear-gradient(90deg, rgba(255, 133, 0, .08), rgba(255, 133, 0, 0) 22%),
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.55));
    border-radius: 14px 14px 0 0;
}

.permission-module-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    background: rgba(255, 133, 0, .08);
    box-shadow: inset 0 0 0 1px rgba(255, 133, 0, .08);
}

.permission-module-title .menu-icon-allop {
    font-size: 1rem;
    line-height: 1;
    color: var(--ks-orange-dark);
}

.permission-module-summary-title {
    display: flex;
    align-items: center;
    width: 100%;
}

.permission-module-head h3 {
    margin: 0;
    color: #243140;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    min-width: 0;
}

.permission-actions-bar-inline {
    position: static;
    top: auto;
    z-index: auto;
    margin: 0;
    flex: 0 0 auto;
    padding: .4rem .65rem;
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: .8rem;
}

.permission-grid-single {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    justify-content: stretch;
}

.permission-app-card {
    border: 1px solid rgba(217, 226, 236, .95);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
    box-shadow: 0 12px 24px rgba(31, 48, 63, .05);
    padding: .85rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    overflow: hidden;
    min-width: 0;
}

.permission-grid-single .permission-app-card {
    width: 100%;
    max-width: none;
}

.permission-app-card.has-permission {
    border-color: rgba(31, 111, 235, .2);
    box-shadow: 0 14px 28px rgba(31, 111, 235, .08);
}

.permission-app-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: .65rem;
    min-width: 0;
}

.permission-app-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.permission-app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.2rem;
    color: #ff8500;
}

.permission-app-head strong {
    color: #243040;
    font-size: .98rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.permission-app-actions {
    display: inline-flex;
    gap: .35rem;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-self: end;
}

.permission-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    min-width: 0;
    align-items: stretch;
}

.permission-check-card {
    display: grid;
    grid-template-columns: 1rem;
    align-items: center;
    justify-items: center;
    min-height: 2.6rem;
    padding: .18rem;
    border: 1px solid #dbe3ea;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    min-width: 0;
    overflow: hidden;
}

.permission-check-card.is-checked {
    border-color: rgba(31, 111, 235, .22);
    background: rgba(31, 111, 235, .05);
}

.permission-module-table tbody tr.linha-ativa {
    box-shadow: 0 10px 24px rgba(31, 111, 235, .08);
}

.permission-module-table tbody tr.linha-ativa td {
    border-top-color: rgba(31, 111, 235, .14);
    border-bottom-color: rgba(31, 111, 235, .14);
}

.permission-module-table tbody tr.linha-ativa .permission-app-icon {
    color: #16a34a;
}

.permission-module-details-table .details-allop-summary {
    cursor: pointer;
}

.permission-module-details-table .details-allop-summary:hover .details-allop-toggle.btn-expandir {
    transform: translateY(-1px);
}

.permission-check-card .form-check-input {
    margin: 0;
    flex: 0 0 auto;
    justify-self: center;
    width: 1.05rem;
    height: 1.05rem;
}

.permission-check-card span {
    font-size: .86rem;
    font-weight: 600;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.permission-check-label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: .45rem;
    width: 100%;
    min-width: 0;
    color: inherit;
}

.permission-check-label i {
    font-size: .9rem;
    color: #ff8500;
    flex: 0 0 auto;
}

.permission-check-label span {
    min-width: 0;
    line-height: 1.1;
}

.permission-app-actions .btn-sm {
    min-width: 34px;
    min-height: 34px;
    padding: .28rem .35rem;
}

@media (max-width: 575.98px) {
    .permission-actions-bar {
        position: static;
    }

    .permission-grid {
        grid-template-columns: 1fr;
    }

    .permission-field-grid {
        grid-template-columns: 1fr;
    }
}

input,
select,
textarea,
button,
.btn {
    max-width: 100%;
}

@media (max-width: 991.98px) {
    .container,
    .container-fluid,
    .app-page,
    .dashboard-page,
    .user-edit-page {
        width: 100%;
        max-width: 100%;
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .row {
        margin-left: -.5rem;
        margin-right: -.5rem;
    }

    .row > * {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .page-header,
    .dashboard-header,
    .page-header.d-flex,
    .d-flex.justify-content-between {
        align-items: stretch;
        flex-direction: column;
        grid-template-columns: 100%;
        gap: .75rem;
    }

    .page-header .btn,
    .dashboard-header .btn,
    .formulario-acoes-allop .btn {
        width: 100%;
    }

    .card-body,
    .card-header {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .table-container-allop {
        border-radius: 12px;
    }
}

@media (max-width: 575.98px) {
    .container,
    .container-fluid,
    .app-page,
    .dashboard-page,
    .user-edit-page {
        padding-left: .65rem;
        padding-right: .65rem;
    }

    .card-body,
    .card-header {
        padding: .8rem;
    }

    .btn,
    button.btn,
    .form-control,
    .form-select,
    .input-allop {
        min-height: 42px;
    }
}

@media (max-width: 480px) {
    .navbar.navbar-liquid {
        min-height: 58px;
        padding: .45rem .6rem;
    }

    .navbar.navbar-liquid .container-fluid {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: .45rem;
    }

    .navbar.navbar-liquid .brand-lockup {
        display: inline-flex;
        align-items: center;
        flex-wrap: nowrap;
        min-width: 0;
        padding: .24rem .7rem;
        min-height: 34px;
        border-radius: 13px;
        overflow: hidden;
    }

    .navbar.navbar-liquid .brand-lockup img:first-child {
        max-width: 30px;
    }

    .navbar.navbar-liquid .brand-lockup img:last-child {
        max-width: 76px;
    }

    .navbar.navbar-liquid .navbar-toggler {
        width: 52px;
        height: 40px;
        border-radius: 10px;
    }

    .navbar.navbar-liquid .navbar-toggler .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .table tbody td {
        grid-template-columns: minmax(92px, 38%) minmax(0, 1fr);
        gap: .55rem;
        min-height: 38px;
        padding: .65rem .75rem;
    }

    .table tbody td.table-action-cell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .85rem;
    }

    .table tbody td.table-action-cell .btn {
        width: auto;
        min-width: 2.75rem;
        margin-left: auto;
    }
}

/* Scroll customizado do sistema */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ks-blue) #f1f5f8;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f5f8;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--ks-blue), var(--ks-orange));
    border: 2px solid #f1f5f8;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--ks-blue-dark), var(--ks-orange-dark));
}

/* Camada de movimento e polimento visual */
:root {
    --motion-fast: 140ms;
    --motion-base: 220ms;
    --motion-slow: 360ms;
    --motion-ease: cubic-bezier(.2, .8, .2, 1);
    --scroll-track: #eef3f7;
    --scroll-thumb: #b8c7d4;
    --scroll-thumb-hover: #7faabd;
}

@keyframes ks-fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ks-soft-pop {
    0% {
        opacity: 0;
        transform: scale(.985);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ks-shimmer {
    from { background-position: 120% 0; }
    to { background-position: -120% 0; }
}

.app-page,
.card,
.card-allop,
.card-container-allop,
.dashboard-card,
.table-responsive,
.alert {
    animation: ks-fade-up var(--motion-slow) var(--motion-ease) both;
}

.card,
.card-allop,
.card-container-allop,
.table tbody tr,
.check-card,


.card:hover,
.card-allop:hover,
.card-container-allop:hover,
.check-card:hover,


.table tbody tr:hover td {
    background: #fbfdff;
}

.table tbody tr:hover {
    transform: translateY(-1px);
}

.btn,
button,
a,
.nav-link,
.dropdown-item,
.form-control,
.form-select,
.input-allop,
.input-anexo-label,
.select-combobox-allop {
    transition:
        background-color var(--motion-fast) var(--motion-ease),
        border-color var(--motion-fast) var(--motion-ease),
        color var(--motion-fast) var(--motion-ease),
        box-shadow var(--motion-fast) var(--motion-ease),
        transform var(--motion-fast) var(--motion-ease),
        opacity var(--motion-fast) var(--motion-ease);
}

.btn:hover,
button.btn:hover,
.nav-link:hover,
.dropdown-item:hover {
    transform: translateY(-1px);
}

.btn:active,
button:active,
.nav-link:active,
.dropdown-item:active,
.input-anexo-label:active {
    transform: scale(.985);
}

.form-control:focus,
.form-select:focus,
.input-allop:focus,
.select-combobox-allop:focus-within {
    transform: translateY(-1px);
}

.dropdown-menu.show,
.dropdown.show > .dropdown-menu {
    animation: ks-soft-pop var(--motion-base) var(--motion-ease) both;
}

.input-anexo-limpar,
.select-option-allop,
.navbar-toggler {
    transition:
        background-color var(--motion-fast) var(--motion-ease),
        border-color var(--motion-fast) var(--motion-ease),
        color var(--motion-fast) var(--motion-ease),
        transform var(--motion-fast) var(--motion-ease),
        box-shadow var(--motion-fast) var(--motion-ease);
}

.input-anexo-limpar:hover,
.select-option-allop:hover {
    transform: translateY(-1px);
}


.alert {
    position: relative;
    overflow: hidden;
}

.alert::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.35) 45%, transparent 70%);
    background-size: 220% 100%;
    animation: ks-shimmer 1.2s var(--motion-ease) 1;
}

/* Scroll mais limpo e leve */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0, 158, 195, .55), rgba(255, 133, 0, .55));
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(0, 127, 160, .8), rgba(232, 111, 0, .8));
    border: 1px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

.table-responsive,
.navbar-collapse,
.dropdown-menu,
.select-options-allop {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 158, 195, .55) transparent;
}

.table-responsive::-webkit-scrollbar,
.navbar-collapse::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar,
.select-options-allop::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.table-responsive::-webkit-scrollbar-thumb,
.navbar-collapse::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb,
.select-options-allop::-webkit-scrollbar-thumb {
    background: rgba(0, 158, 195, .42);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.7);
}

.table-responsive::-webkit-scrollbar-thumb:hover,
.navbar-collapse::-webkit-scrollbar-thumb:hover,
.dropdown-menu::-webkit-scrollbar-thumb:hover,
.select-options-allop::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 133, 0, .62);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Modal customizado para avisos e confirmacoes */
.app-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 7000;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(20, 31, 43, .34);
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity var(--motion-base, 220ms) var(--motion-ease, ease), visibility var(--motion-base, 220ms) var(--motion-ease, ease);
}

.app-modal-backdrop.show {
    opacity: 1;
    visibility: visible;
}

.app-modal-backdrop[hidden] {
    display: none;
}

.app-modal {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: .85rem;
    width: min(100%, 430px);
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 24px 60px rgba(20, 31, 43, .24);
    transform: translateY(10px) scale(.98);
    transition: transform var(--motion-base, 220ms) var(--motion-ease, ease);
}

.app-modal-backdrop.show .app-modal {
    transform: translateY(0) scale(1);
}

.app-modal-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 158, 195, .18), rgba(255, 133, 0, .18));
    position: relative;
}

.app-modal-icon::before {
    content: "!";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--ks-orange-dark);
    font-weight: 800;
    font-size: 1.25rem;
}

.app-modal-backdrop[data-tipo="confirmacao"] .app-modal-icon::before {
    content: "✓";
    color: var(--ks-blue-dark);
}

.app-modal h2 {
    margin: 0 0 .35rem;
    color: #26313b;
    font-size: 1.05rem;
}

.app-modal p {
    margin: 0;
    color: #526274;
    line-height: 1.45;
}

.app-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: .55rem;
    margin-top: 1rem;
}

.is-invalid .select-combobox-allop,
.input-select-allop.is-invalid .select-combobox-allop,
.input-select-allop select.is-invalid + .select-combobox-allop,
.input-select-allop.is-invalid .select-static-single-allop,
.input-select-allop.is-invalid .input-select-control-allop,
.input-group-allop.is-invalid .input-allop,
.form-group-allop.is-invalid .input-allop {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 .18rem rgba(220, 53, 69, .12);
}

.input-select-allop.is-invalid .select-feedback-allop,
.input-select-allop select.is-invalid ~ .select-feedback-allop,
.input-group-allop.is-invalid .invalid-feedback,
.form-group-allop.is-invalid .invalid-feedback {
    display: block;
    color: #b42318;
    font-size: .78rem;
    margin-top: .25rem;
}

.input-select-allop.is-invalid > small.text-muted {
    color: #b42318 !important;
}

@media (max-width: 575.98px) {
    .app-modal {
        grid-template-columns: 1fr;
    }

    .app-modal-actions {
        flex-direction: column-reverse;
    }

    .app-modal-actions .btn {
        width: 100%;
    }
}

/* Dashboard filter polish */
.dashboard-page .dashboard-header .dashboard-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(170px, 230px) minmax(190px, 210px);
    gap: 1rem;
    align-items: start;
    justify-content: start;
    width: 100%;
    padding: .75rem;
    border: 1px solid rgba(219, 227, 234, .9);
    border-radius: 10px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 10px 24px rgba(38, 49, 59, .08);
    backdrop-filter: blur(8px);
}

.dashboard-filter-field,
.dashboard-filter-actions {
    min-width: 0;
}

.dashboard-filter-field .form-label {
    line-height: 1.1;
    font-size: .88rem;
    font-weight: 700;
    color: #34404e;
}

.dashboard-filter-date .form-label {
    margin-bottom: .6rem;
}

.dashboard-filter-field .input-select-allop,
.dashboard-filter-field .input-group-allop {
    margin: 0;
}

.dashboard-filter-date {
    display: flex;
    flex-direction: column;
    gap: .38rem;
}

.dashboard-filter-date .input-allop,
.dashboard-page .dashboard-header .dashboard-filter .select-combobox-allop,
.dashboard-page .dashboard-header .dashboard-filter .btn {
    min-height: 56px;
}

.dashboard-filter-actions {
    display: flex;
    align-items: center;
    height: 100%;
}

.dashboard-filter-actions .btn,
.dashboard-page .dashboard-header .dashboard-filter .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: .4rem .95rem;
    white-space: nowrap;
}

.dashboard-page .dashboard-header .dashboard-filter .select-combobox-allop,
.dashboard-page .dashboard-header .dashboard-filter .select-search-input-allop,
.dashboard-page .dashboard-header .dashboard-filter .select-static-single-allop,
.dashboard-page .dashboard-header .dashboard-filter .form-control.input-allop {
    min-height: 56px;
    height: 56px;
    box-sizing: border-box;
}

.dashboard-page .dashboard-header .dashboard-filter .select-static-single-allop {
    padding-top: 0;
    padding-bottom: 0;
}

.dashboard-page .dashboard-header .dashboard-filter .select-feedback-allop {
    display: none;
}

.dashboard-page .dashboard-header .dashboard-filter .select-options-allop {
    z-index: 3200;
}

@media (max-width: 1180px) {
    .dashboard-page .dashboard-header .dashboard-filter {
        width: 100%;
        grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px);
        justify-self: stretch;
    }

    .dashboard-filter-actions {
        grid-column: 1 / -1;
        justify-self: end;
        width: min(100%, 210px);
        height: auto;
    }
}

@media (max-width: 720px) {
    .dashboard-page .dashboard-header .dashboard-filter {
        grid-template-columns: 1fr;
        padding: .6rem;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .dashboard-filter-store {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .dashboard-filter-actions {
        grid-column: 1 / -1;
        justify-self: stretch;
        align-self: stretch;
        width: 100%;
        min-width: 0;
    }

    .dashboard-filter-actions .btn,
    .dashboard-page .dashboard-header .dashboard-filter .btn {
        width: 100%;
    }
}

@media (max-width: 460px) {
    .dashboard-page .dashboard-header .dashboard-filter {
        grid-template-columns: 1fr;
        gap: .65rem;
        padding: .65rem;
        border-radius: 10px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .dashboard-filter-actions .btn,
    .dashboard-page .dashboard-header .dashboard-filter .btn {
        min-width: 0;
    }
}

/* Dashboard filter dropdown above metric cards */
.dashboard-page .dashboard-header.page-header {
    position: relative;
    z-index: 40;
    overflow: visible;
}

.dashboard-page .dashboard-header .dashboard-filter,
.dashboard-page .dashboard-header .dashboard-filter .dashboard-filter-field,
.dashboard-page .dashboard-header .dashboard-filter .input-data-allop,
.dashboard-page .dashboard-header .dashboard-filter .input-data-control-allop,
.dashboard-page .dashboard-header .dashboard-filter .input-select-allop,
.dashboard-page .dashboard-header .dashboard-filter .input-select-control-allop {
    overflow: visible;
}

.dashboard-page .dashboard-header .dashboard-filter:has(.input-select-allop.is-open) {
    z-index: 4500;
}

.dashboard-page .dashboard-header .dashboard-filter .input-select-allop.is-open {
    z-index: 4600;
}

.dashboard-page .dashboard-header .dashboard-filter .input-data-allop.is-open {
    z-index: 4600;
}

.dashboard-page .dashboard-header .dashboard-filter .select-options-allop {
    z-index: 4700;
}

.dashboard-page .metric-grid,
.dashboard-page .metric-card {
    position: relative;
    z-index: 1;
}

.dashboard-page .metric-card {
    min-height: 72px;
    padding: .7rem .85rem;
}

.dashboard-page .metric-card span {
    font-size: .76rem;
    line-height: 1.15;
}

.dashboard-page .metric-card strong {
    font-size: 1.25rem;
    line-height: 1;
}

.whatsapp-status-badge.bg-secondary {
    background: linear-gradient(135deg, #eef2f7 0%, #dde5ee 100%) !important;
    color: #4b5563 !important;
    border: 1px solid rgba(148, 163, 184, .45);
}

.whatsapp-status-badge.bg-secondary.is-offline {
    background: linear-gradient(135deg, #f4f6f9 0%, #e5ebf2 100%) !important;
    color: #334155 !important;
}

.whatsapp-status-badge.bg-success {
    background: linear-gradient(135deg, #1f9d61 0%, #2bb673 100%) !important;
    color: #fff !important;
}

.mensagem-padrao-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.75rem;
    padding: .38rem .72rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    user-select: none;
    white-space: nowrap;
}

.mensagem-padrao-status-badge.is-active {
    background: linear-gradient(135deg, #1f9d61 0%, #2bb673 100%);
    color: #fff;
    box-shadow: 0 4px 10px rgba(31, 157, 97, .18);
}

.mensagem-padrao-status-badge.is-inactive {
    background: linear-gradient(135deg, #f3f5f8 0%, #e5ebf2 100%);
    color: #475569;
    border: 1px solid rgba(148, 163, 184, .35);
    box-shadow: 0 4px 10px rgba(148, 163, 184, .12);
}

.phone-instance-copy {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.phone-instance-status-text {
    font-size: .9rem;
    color: #334155;
    line-height: 1.25;
}

.phone-instance-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.phone-instance-actions .btn {
    min-width: 0;
}

.phone-instance-actions .btn:disabled {
    opacity: .72;
}

@media (max-width: 576px) {
    .phone-instance-card {
        gap: .65rem;
        padding: .9rem;
    }

    .phone-instance-topline {
        align-items: center;
    }

    .phone-instance-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .phone-instance-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .phone-instance-card .status-pill {
        align-self: flex-start;
    }
}






.campaign-form-page .campaign-message-main {
    display: grid;
    gap: 1.65rem;
    min-width: 0;
}

.campaign-form-page .campaign-message-side {
    display: grid;
    gap: 1.55rem;
    align-self: stretch;
}

.campaign-form-page .campaign-template-block {
    margin-top: .35rem;
    padding: 1.4rem 1.4rem 1.25rem;
    border: 1px solid rgba(222, 226, 230, .85);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
    box-shadow: var(--ks-shadow-sm);
}

.campaign-form-page .campaign-message-panel {
    display: grid;
    gap: 1rem;
    padding: 1.4rem;
    border: 1px solid rgba(222, 226, 230, .78);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--ks-shadow-sm);
}

.campaign-form-page .campaign-message-complementary {
    background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
    border: 1px solid rgba(222, 226, 230, .78);
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: 0 8px 18px rgba(18, 38, 63, .04);
}

.campaign-form-page .campaign-message-complementary textarea {
    min-height: 200px;
    resize: vertical;
    background: #fff;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.campaign-form-page .campaign-message-tips {
    padding: 1.25rem 1.3rem;
    border-radius: 14px;
    border: 1px solid rgba(222, 226, 230, .9);
    background: #fff;
    box-shadow: var(--ks-shadow-sm);
}

.campaign-form-page .campaign-message-tips strong {
    display: block;
    margin-bottom: .55rem;
}

.campaign-form-page .campaign-message-tips ul {
    padding-left: 1.1rem;
    color: #55616d;
    display: grid;
    gap: .5rem;
}

@media (max-width: 991.98px) {
    .campaign-form-page .campaign-message-layout {
        grid-template-columns: 1fr;
    }
    .campaign-phone-preview {
        max-width: none;
        position: static;
        justify-self: stretch;
    }
    .campaign-phone-shell {
        transform: none;
    }
    .campaign-form-page .campaign-message-main,
    .campaign-form-page .campaign-message-side {
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .campaign-form-page .campaign-message-panel,
    .campaign-form-page .campaign-template-block,
    .campaign-form-page .campaign-message-tips {
        padding: 1rem;
    }
}


.campaign-action-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .14rem;
    padding: .42rem .4rem .2rem;
    border-top: 1px solid rgba(222, 226, 230, .8);
    background: linear-gradient(180deg, rgba(248, 250, 252, .92) 0%, rgba(244, 247, 250, .98) 100%);
}

.campaign-toolbar-group {
    display: flex;
    flex-wrap: wrap;
    gap: .14rem;
}

.campaign-toolbar-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(222, 226, 230, .9);
    margin: 0 .1rem;
    opacity: .75;
}

.campaign-toolbar-emojis {
    display: grid;
    gap: .14rem;
}

.campaign-emoji-row {
    display: flex;
    flex-wrap: wrap;
    gap: .14rem;
}

.campaign-toolbar-emojis .campaign-emoji-button {
    min-width: 22px;
    min-height: 22px;
    padding: 0 .12rem;
    border: 1px solid #d8dee5;
    border-radius: 999px;
    background: #fff;
    font-size: .8rem;
    line-height: 1;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, opacity .15s ease;
}

.campaign-toolbar-emojis .campaign-emoji-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    border-color: #c9d2da;
}

@media (max-width: 768px) {
    .campaign-action-toolbar {
        padding: .28rem;
        gap: .1rem;
    }

    .campaign-toolbar-divider {
        display: none;
    }

    .campaign-toolbar-group {
        gap: .15rem;
    }

    .campaign-format-button {
        min-width: 28px;
        min-height: 28px;
        padding: 0 .2rem;
    }

    .campaign-toolbar-emojis {
        gap: .1rem;
    }

    .campaign-emoji-row {
        gap: .1rem;
    }

    .campaign-toolbar-emojis .campaign-emoji-button {
        min-width: 20px;
        min-height: 20px;
        padding: 0 .08rem;
        font-size: .75rem;
    }
}

.campaign-preview-message { display: block; }
.campaign-preview-message-main { font-weight: 700; color: #1f2937; margin-bottom: .35rem; }
.campaign-preview-message-complement { color: #6b7280; font-weight: 500; opacity: .95; }

.campaign-basic-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 1.6rem;
    align-items: start;
}

.campaign-basic-date-time {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.55rem;
    grid-column: 1 / -1;
}
.campaign-basic-field-full {
    grid-column: 1 / -1;
}

.campaign-basic-grid > .input-group-allop,
.campaign-basic-grid > .input-select-allop,
.campaign-basic-field {
    min-width: 0;
}

.campaign-form-page .campaign-basic-field [data-campaign-locked-field],
.campaign-form-page .campaign-basic-field [data-campaign-locked-field][readonly] {
    border-color: #d5dde6;
    background-color: #eef2f6;
    color: #687789;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

.campaign-form-page .campaign-basic-field [data-campaign-locked-field]::placeholder {
    color: #8a97a6;
}

.campaign-form-page .campaign-basic-field [data-campaign-locked-field] + [data-input-data-campo] + .input-data-button-allop {
    color: #9aa6b2;
    cursor: not-allowed;
    opacity: .65;
    pointer-events: none;
}

.campaign-form-page .campaign-basic-field:has([data-campaign-locked-field]) label {
    color: #687789 !important;
}

@media (max-width: 900px) {
    .campaign-basic-grid,
    .campaign-basic-date-time {
        grid-template-columns: 1fr;
    }
}



.campaign-contacts-table {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(217, 226, 236, .95);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,253,.98));
    box-shadow: 0 14px 30px rgba(31, 48, 63, .06);
}

.campaign-contacts-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid rgba(229, 236, 244, .92);
}

.campaign-contacts-table-header strong {
    display: block;
    color: #24313d;
    font-size: 1rem;
    font-weight: 800;
}

.campaign-contacts-table-header span {
    display: block;
    margin-top: .18rem;
    color: #647384;
    font-size: .8rem;
}

.campaign-contacts-table-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}

.campaign-contacts-table .table-container-allop {
    border: 1px solid rgba(217, 226, 236, .95);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.campaign-contacts-table .table {
    margin-bottom: 0;
}

.campaign-contacts-table thead th {
    padding-top: .9rem;
    padding-bottom: .9rem;
    font-size: .78rem;
    letter-spacing: .03em;
}

.campaign-contacts-table tbody td {
    padding-top: .9rem;
    padding-bottom: .9rem;
    color: #24313d;
}

.campaign-contacts-table tbody td.campaign-contact-name-cell {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.campaign-contacts-table tbody tr:hover {
    background: rgba(245, 249, 255, .9);
}

@media (max-width: 991.98px) {
    .campaign-contacts-table-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .campaign-contacts-table-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .campaign-contacts-table .table-container-allop {
        border: 0;
        background: transparent;
        overflow: visible;
    }

    .campaign-contacts-table tbody tr {
        border-radius: 12px;
    }

    .campaign-contacts-table tbody td {
        grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
        min-height: 38px;
        padding: .65rem .8rem;
        text-align: right;
        justify-items: stretch;
    }

    .campaign-contacts-table tbody td::before {
        align-self: center;
    }

    .campaign-contacts-table tbody td:not(.table-action-cell) {
        overflow-wrap: anywhere;
    }

    .campaign-contacts-table tbody td.table-action-cell {
        justify-content: flex-end;
        padding: .7rem .8rem;
    }

    .campaign-contacts-table tbody td.table-action-cell::before {
        display: none;
    }

    .campaign-contacts-table tbody td.table-action-cell .btn {
        width: auto;
        min-width: 2.3rem;
    }

}
/* Mensagens padrão de franquia - editor inspirado na etapa 2 da campanha */
.mensagens-padrao-franquia-page .campaign-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.9fr);
    gap: 1.5rem;
    align-items: start;
    margin-top: 0;
}

.mensagens-padrao-franquia-page .formulario-allop {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .58fr);
    gap: .95rem 1rem;
    align-items: start;
}

.mensagens-padrao-franquia-page .formulario-allop > .input-group-allop,
.mensagens-padrao-franquia-page .formulario-allop > .whatsapp-message-shortcuts,
.mensagens-padrao-franquia-page .formulario-allop > .alert,
.mensagens-padrao-franquia-page .formulario-allop > .form-group-allop,
.mensagens-padrao-franquia-page .formulario-allop > .input-select-allop,
.mensagens-padrao-franquia-page .formulario-allop > .input-anexo-allop {
    grid-column: 1;
}

.mensagens-padrao-franquia-page .formulario-allop > .phone-shell.whatsapp-editor-phone {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
    position: relative;
    top: -.9rem;
    margin-top: 0;
    justify-self: end;
}

.mensagens-padrao-franquia-page .formulario-allop > .formulario-acoes-allop {
    grid-column: 1 / -1;
    justify-self: end;
    width: 100%;
    padding-top: .5rem;
}

.mensagens-padrao-franquia-page .campaign-message-panel,
.mensagens-padrao-franquia-page .campaign-preview-card {
    position: relative;
    overflow: visible;
    border: 1px solid rgba(217, 226, 236, .9);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.99), rgba(247,250,253,.98)),
        radial-gradient(circle at top right, rgba(31, 111, 235, .05), transparent 42%);
    box-shadow: 0 18px 38px rgba(31, 48, 63, .08);
}

.mensagens-padrao-franquia-page .campaign-message-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
}

.mensagens-padrao-franquia-page .campaign-message-panel::before,
.mensagens-padrao-franquia-page .campaign-preview-card::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, rgba(31, 111, 235, .85), rgba(12, 165, 92, .75));
    opacity: .95;
}

.mensagens-padrao-franquia-page .campaign-message-panel-header,
.mensagens-padrao-franquia-page .campaign-preview-card-header {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.mensagens-padrao-franquia-page .campaign-message-panel-header {
    padding-bottom: .15rem;
}

.mensagens-padrao-franquia-page .campaign-panel-kicker,
.mensagens-padrao-franquia-page .campaign-preview-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: .28rem .6rem;
    border-radius: 999px;
    background: rgba(31, 111, 235, .08);
    color: #1c4fb2;
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mensagens-padrao-franquia-page .campaign-panel-title h4,
.mensagens-padrao-franquia-page .campaign-preview-card-header strong {
    margin: 0;
    color: #1d2733;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
}

.mensagens-padrao-franquia-page .campaign-panel-title p,
.mensagens-padrao-franquia-page .campaign-preview-card-header p {
    margin: 0;
    color: #5d6b79;
    font-size: .93rem;
    line-height: 1.45;
}

.mensagens-padrao-franquia-page .campaign-message-panel-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mensagens-padrao-franquia-page .campaign-message-complementary {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(217, 226, 236, .95);
    box-shadow: 0 14px 30px rgba(31, 48, 63, .05);
    overflow: hidden;
}

.mensagens-padrao-franquia-page .campaign-message-complementary textarea {
    min-height: 220px;
    resize: vertical;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 1rem 1rem .9rem;
    background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
}

.mensagens-padrao-franquia-page .campaign-message-complementary textarea:focus {
    box-shadow: none;
}

.mensagens-padrao-franquia-page .campaign-preview-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.15rem;
}

.mensagens-padrao-franquia-page .campaign-phone-preview {
    position: sticky;
    top: 6.5rem;
}

.mensagens-padrao-franquia-page .campaign-phone-shell {
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: 0;
}

.mensagens-padrao-franquia-page .campaign-phone-screen {
    min-height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: .95rem .95rem 1rem;
    border-radius: 28px;
    background-color: #efe8dc;
    background-image:
        radial-gradient(circle at 12px 12px, rgba(110, 121, 118, .08) 0 1.1px, transparent 1.2px),
        radial-gradient(circle at 36px 26px, rgba(110, 121, 118, .055) 0 1px, transparent 1.1px),
        radial-gradient(circle at 58px 10px, rgba(110, 121, 118, .045) 0 .95px, transparent 1.05px),
        radial-gradient(circle at 20px 52px, rgba(110, 121, 118, .06) 0 1px, transparent 1.1px),
        linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06));
    background-size: 72px 72px, 72px 72px, 72px 72px, 72px 72px, 100% 100%;
}

.mensagens-padrao-franquia-page .campaign-phone-header {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem .95rem .75rem;
    margin: -.6rem -.6rem 0;
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(180deg, #128c7e 0%, #0d7f72 100%);
}

.mensagens-padrao-franquia-page .campaign-phone-header strong {
    color: #fff;
}

.mensagens-padrao-franquia-page .campaign-phone-header span {
    color: rgba(255,255,255,.82);
    font-size: .78rem;
}

.mensagens-padrao-franquia-page .campaign-chat-area {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1;
    padding-top: .9rem;
}

.mensagens-padrao-franquia-page .campaign-message-bubble {
    position: relative;
    width: min(100%, 282px);
    align-self: flex-start;
    margin-top: .45rem;
    padding: .86rem .92rem 1.12rem;
    border-radius: 18px 18px 18px 4px;
    background: linear-gradient(180deg, #dcf8c6 0%, #d5f3bb 100%);
    border: 1px solid rgba(84, 160, 75, .08);
    box-shadow: 0 10px 22px rgba(52, 87, 40, .09);
}

.mensagens-padrao-franquia-page .campaign-message-bubble p {
    margin: 0;
    color: #20303a;
    font-size: .79rem;
    line-height: 1.28;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mensagens-padrao-franquia-page .campaign-preview-message { display: block; }
.mensagens-padrao-franquia-page .campaign-preview-message-main { font-weight: 700; color: #1f2937; margin-bottom: .35rem; }

@media (max-width: 991.98px) {
    .mensagens-padrao-franquia-page .campaign-editor-grid {
        grid-template-columns: 1fr;
    }
    .mensagens-padrao-franquia-page .formulario-allop {
        grid-template-columns: 1fr;
    }
    .mensagens-padrao-franquia-page .formulario-allop > .phone-shell.whatsapp-editor-phone {
        grid-column: 1;
        grid-row: auto;
        position: static;
        width: 100%;
        justify-self: stretch;
    }
    .mensagens-padrao-franquia-page .formulario-allop > .formulario-acoes-allop {
        grid-column: 1;
    }
    .mensagens-padrao-franquia-page .campaign-phone-preview {
        max-width: none;
        position: static;
        justify-self: stretch;
    }
    .mensagens-padrao-franquia-page .campaign-phone-shell {
        transform: none;
    }
}

@media (max-width: 768px) {
    .mensagens-padrao-franquia-page .campaign-message-panel,
    .mensagens-padrao-franquia-page .campaign-preview-card {
        padding: 1rem;
    }
}


.whatsapp-section-title {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-bottom: .8rem;
}

.whatsapp-section-title strong {
    color: #24313d;
    font-size: 1rem;
    font-weight: 800;
}

.whatsapp-section-title span {
    color: #607080;
    font-size: .82rem;
}