/* /Features/Authentication/LoginComponent.razor.rz.scp.css */
.auth-screen[b-n5xx5sj1gb] {
    --auth-ink: #0b1930;
    --auth-muted: #5f6f83;
    --auth-border: #7d8fa4;
    --auth-accent: #0c78f2;
    --auth-accent-strong: #075fc6;
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    overflow: hidden;
    background-color: #031124;
    background-image: url('/img/login-tech-background.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--auth-ink);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.auth-screen__overlay[b-n5xx5sj1gb] {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(2, 11, 28, .08) 0%, rgba(2, 11, 28, .2) 45%, rgba(2, 11, 28, .52) 100%),
        linear-gradient(180deg, rgba(3, 12, 29, .08), rgba(3, 12, 29, .28));
    pointer-events: none;
}

.auth-stage[b-n5xx5sj1gb] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: min(100%, 1440px);
    min-height: 100vh;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    padding: 24px clamp(24px, 7vw, 112px);
}

.login-card[b-n5xx5sj1gb] {
    position: relative;
    width: min(100%, 460px);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow: auto;
    padding: clamp(32px, 4vw, 44px);
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 26px;
    background: rgba(249, 252, 255, .96);
    box-shadow: 0 30px 90px rgba(0, 9, 25, .42), 0 2px 8px rgba(0, 15, 37, .12);
    backdrop-filter: blur(20px) saturate(120%);
    scrollbar-color: rgba(77, 101, 132, .4) transparent;
    scrollbar-width: thin;
}

.auth-screen--register .login-card[b-n5xx5sj1gb] {
    width: min(100%, 680px);
}

.login-card__accent[b-n5xx5sj1gb] {
    position: absolute;
    top: 0;
    left: clamp(32px, 4vw, 44px);
    width: 56px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, #15b9ff, #7158ff);
}

.login-card__header[b-n5xx5sj1gb] {
    margin-bottom: 30px;
}

.login-card__header h1[b-n5xx5sj1gb] {
    margin: 0;
    color: var(--auth-ink);
    font-family: inherit;
    font-size: clamp(1.75rem, 3vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.15;
}

.login-card__header p[b-n5xx5sj1gb] {
    margin: 10px 0 0;
    color: var(--auth-muted);
    font-size: .98rem;
    line-height: 1.55;
}

.login-form[b-n5xx5sj1gb] {
    display: grid;
    gap: 22px;
}

.form-field[b-n5xx5sj1gb] {
    display: grid;
    gap: 8px;
}

.form-field label[b-n5xx5sj1gb] {
    color: #22344b;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.35;
}

.text-field[b-n5xx5sj1gb] {
    position: relative;
    display: flex;
    align-items: center;
}

.text-field[b-n5xx5sj1gb]  .text-field__input {
    width: 100%;
    height: 56px;
    padding: 0 16px;
    border: 1px solid var(--auth-border);
    border-radius: 14px;
    outline: none;
    background: rgba(255, 255, 255, .92);
    color: var(--auth-ink);
    font: inherit;
    font-size: .96rem;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.text-field[b-n5xx5sj1gb]  .text-field__input::placeholder {
    color: #66778b;
    opacity: 1;
}

.text-field[b-n5xx5sj1gb]  .text-field__input--leading {
    padding-left: 46px;
}

.text-field[b-n5xx5sj1gb]  .text-field__input--action {
    padding-right: 52px;
}

.text-field[b-n5xx5sj1gb]  .text-field__input:hover:not(:disabled) {
    border-color: #b8c8da;
}

.text-field[b-n5xx5sj1gb]  .text-field__input:focus {
    border-color: var(--auth-accent);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(12, 120, 242, .12);
}

.text-field[b-n5xx5sj1gb]  .text-field__input.invalid {
    border-color: #d14343;
}

.text-field[b-n5xx5sj1gb]  .text-field__input.invalid:focus {
    box-shadow: 0 0 0 4px rgba(209, 67, 67, .1);
}

.text-field[b-n5xx5sj1gb]  .text-field__input:disabled {
    cursor: not-allowed;
    background: #f1f5f9;
    color: #8290a0;
}

.text-field__leading[b-n5xx5sj1gb] {
    position: absolute;
    left: 17px;
    z-index: 1;
    color: #73849a;
    font-size: 1rem;
    pointer-events: none;
}

.text-field__action[b-n5xx5sj1gb] {
    position: absolute;
    right: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #687b92;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

.text-field__action:hover:not(:disabled)[b-n5xx5sj1gb] {
    background: #edf4fb;
    color: var(--auth-accent-strong);
}

.text-field__action:focus-visible[b-n5xx5sj1gb],
.alternate-action button:focus-visible[b-n5xx5sj1gb] {
    outline: 3px solid rgba(12, 120, 242, .28);
    outline-offset: 2px;
}

.form-field[b-n5xx5sj1gb]  .validation-message {
    color: #b4232f;
    font-size: .8rem;
    line-height: 1.35;
}

.field-error:empty[b-n5xx5sj1gb] {
    display: none;
}

.primary-action[b-n5xx5sj1gb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    margin-top: 4px;
    padding: 12px 20px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #0870d4 0%, #064da8 100%);
    box-shadow: 0 12px 26px rgba(7, 95, 198, .24);
    color: #fff;
    font: inherit;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .005em;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.primary-action:hover:not(:disabled)[b-n5xx5sj1gb] {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(7, 95, 198, .3);
    filter: brightness(1.04);
}

.primary-action:active:not(:disabled)[b-n5xx5sj1gb] {
    transform: translateY(0);
}

.primary-action:focus-visible[b-n5xx5sj1gb] {
    outline: 3px solid rgba(55, 161, 255, .45);
    outline-offset: 3px;
}

.primary-action:disabled[b-n5xx5sj1gb] {
    cursor: wait;
    opacity: .72;
    box-shadow: none;
}

.action-arrow[b-n5xx5sj1gb] {
    font-size: .82rem;
}

.action-spinner[b-n5xx5sj1gb] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .42);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-spin-b-n5xx5sj1gb 700ms linear infinite;
}

.alternate-action[b-n5xx5sj1gb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 28px;
    color: var(--auth-muted);
    font-size: .88rem;
    text-align: center;
}

.alternate-action button[b-n5xx5sj1gb] {
    min-height: 44px;
    padding: 8px 7px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--auth-accent-strong);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.alternate-action button:hover:not(:disabled)[b-n5xx5sj1gb] {
    background: rgba(12, 120, 242, .08);
}

.register-form[b-n5xx5sj1gb] {
    display: grid;
    gap: 30px;
}

.form-section[b-n5xx5sj1gb] {
    display: grid;
    gap: 16px;
}

.form-section + .form-section[b-n5xx5sj1gb] {
    padding-top: 26px;
    border-top: 1px solid #e3eaf2;
}

.form-section h2[b-n5xx5sj1gb] {
    margin: 0;
    color: #26384f;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .1em;
    line-height: 1.4;
    text-transform: uppercase;
}

.form-grid[b-n5xx5sj1gb] {
    display: grid;
    gap: 16px;
}

.form-grid--two-columns[b-n5xx5sj1gb] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid--address[b-n5xx5sj1gb] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid__full[b-n5xx5sj1gb] {
    grid-column: 1 / -1;
}

.form-grid__street[b-n5xx5sj1gb] {
    grid-column: span 2;
}

.mud-field[b-n5xx5sj1gb] {
    min-width: 0;
}

.mud-field[b-n5xx5sj1gb]  .mud-input-control {
    margin: 0;
}

.mud-field[b-n5xx5sj1gb]  .mud-input-outlined {
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
}

.mud-field[b-n5xx5sj1gb]  .mud-input-outlined-border {
    border-color: var(--auth-border);
    border-radius: 14px;
}

.mud-field[b-n5xx5sj1gb]  .mud-input:focus-within .mud-input-outlined-border {
    border-color: var(--auth-accent) !important;
    border-width: 1px;
    box-shadow: 0 0 0 4px rgba(12, 120, 242, .1);
}

.mud-field[b-n5xx5sj1gb]  .mud-input-label,
.mud-field[b-n5xx5sj1gb]  .mud-input-slot {
    font-family: "Inter", system-ui, sans-serif;
}

.phone-field[b-n5xx5sj1gb]  .iti,
.phone-field[b-n5xx5sj1gb]  .iti__tel-input {
    min-height: 54px;
}

.phone-field[b-n5xx5sj1gb]  .mud-input-control {
    margin-bottom: 0 !important;
}

@keyframes auth-spin-b-n5xx5sj1gb {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 900px) {
    .auth-screen__overlay[b-n5xx5sj1gb] {
        background: rgba(2, 11, 28, .5);
    }

    .auth-stage[b-n5xx5sj1gb] {
        justify-content: center;
        padding: 24px;
    }
}

@media (max-width: 640px) {
    .auth-screen[b-n5xx5sj1gb] {
        overflow: auto;
        background-position: 42% center;
    }

    .auth-stage[b-n5xx5sj1gb] {
        align-items: flex-start;
        min-height: 100vh;
        min-height: 100dvh;
        padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    }

    .login-card[b-n5xx5sj1gb] {
        max-height: none;
        padding: 30px 22px 24px;
        border-radius: 20px;
    }

    .login-card__accent[b-n5xx5sj1gb] {
        left: 22px;
    }

    .login-card__header[b-n5xx5sj1gb] {
        margin-bottom: 26px;
    }

    .form-grid--two-columns[b-n5xx5sj1gb],
    .form-grid--address[b-n5xx5sj1gb] {
        grid-template-columns: 1fr;
    }

    .form-grid__street[b-n5xx5sj1gb],
    .form-grid__full[b-n5xx5sj1gb] {
        grid-column: auto;
    }
}

@media (max-height: 720px) and (min-width: 641px) {
    .auth-screen--register .auth-stage[b-n5xx5sj1gb] {
        align-items: flex-start;
        padding-top: 24px;
        padding-bottom: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .text-field[b-n5xx5sj1gb]  .text-field__input,
    .text-field__action[b-n5xx5sj1gb],
    .primary-action[b-n5xx5sj1gb] {
        transition: none;
    }

    .action-spinner[b-n5xx5sj1gb] {
        animation-duration: 1.5s;
    }
}
/* /Features/Errors/NotFoundComponent.razor.rz.scp.css */
.not-found-component[b-16beac8v9e] {
    max-width: 560px;
    padding: var(--espaco-6) var(--espaco-4);
    margin: var(--espaco-6) auto;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-1);
}

.not-found-component .nf-icon[b-16beac8v9e] {
    display: block;
    font-size: 96px;
    line-height: 1;
    color: var(--cor-texto-suave);
    margin-bottom: var(--espaco-4);
}

.not-found-component .nf-title[b-16beac8v9e] {
    margin-bottom: var(--espaco-2);
    font-family: var(--fonte-titulo);
    font-size: var(--texto-2xl);
    color: var(--cor-texto);
}

.not-found-component .nf-message[b-16beac8v9e] {
    margin-bottom: var(--espaco-4);
    color: var(--cor-texto-suave);
}

.not-found-component .nf-button[b-16beac8v9e] {
    min-width: 160px;
    min-height: var(--alvo-toque);
    padding: var(--espaco-2) var(--espaco-5);
    font-family: var(--fonte-corpo);
    font-size: var(--texto-md);
    font-weight: 600;
    color: var(--cor-primaria-contraste);
    background: var(--cor-primaria);
    border: none;
    border-radius: var(--raio);
    cursor: pointer;
    transition: filter var(--transicao);
}

.not-found-component .nf-button:hover[b-16beac8v9e] {
    filter: brightness(1.12);
}

@media (min-width: 768px) {
    .not-found-component[b-16beac8v9e] {
        padding: var(--espaco-7) var(--espaco-6);
    }

    .not-found-component .nf-icon[b-16beac8v9e] {
        font-size: 128px;
    }

    .not-found-component .nf-title[b-16beac8v9e] {
        font-size: var(--texto-3xl);
    }
}
/* /Features/Public/AssinaturaPublicPage.razor.rz.scp.css */
/* ==========================================================================
   Tela "Assinatura PHS" da vitrine (area do gerente).
   Mobile-first de verdade: o layout base e o de celular — uma coluna, cards
   inteiros, botao de acao ocupando a largura toda — e as media queries so
   adicionam colunas quando ha espaco. Nenhuma tabela, nada com rolagem
   horizontal.
   Os tokens --pub-* vem de css/public-admin.css (.public-page).
   ========================================================================== */

.ap-page[b-qzi7z7s7o8] {
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: 44px;
    overflow-x: hidden
}

.ap-sr[b-qzi7z7s7o8] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

/* ---------------------------------------------------------------- cabecalho */

.ap-head[b-qzi7z7s7o8] {
    background: var(--pub-surface);
    border-bottom: 1px solid var(--pub-border)
}

.ap-head-inner[b-qzi7z7s7o8] {
    width: min(1120px,calc(100% - 32px));
    margin-inline: auto;
    padding: 18px 0 22px;
    display: flex;
    flex-direction: column;
    gap: 14px
}

.ap-back[b-qzi7z7s7o8] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    max-width: 100%;
    min-height: 40px;
    padding: 8px 14px 8px 11px;
    border: 1px solid var(--pub-border);
    border-radius: 999px;
    color: var(--pub-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700
}

    .ap-back span:last-child[b-qzi7z7s7o8] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .ap-back:hover[b-qzi7z7s7o8] {
        color: var(--pub-text);
        border-color: var(--pub-accent)
    }

.ap-eyebrow[b-qzi7z7s7o8] {
    display: block;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: 11px;
    font-weight: 800;
    color: var(--pub-accent)
}

.ap-head-title h1[b-qzi7z7s7o8] {
    margin: 5px 0 0;
    font: 800 clamp(24px,5vw,34px)/1.15 var(--pub-display)
}

.ap-head-title p[b-qzi7z7s7o8] {
    margin: 6px 0 0;
    color: var(--pub-muted);
    font-size: 14px
}

.ap-main[b-qzi7z7s7o8] {
    width: min(1120px,calc(100% - 32px));
    margin-inline: auto;
    padding-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 22px
}

/* ------------------------------------------- carregando / erro / permissao */

.ap-skeletons[b-qzi7z7s7o8] {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.ap-skeleton[b-qzi7z7s7o8] {
    height: 148px;
    border-radius: 18px;
    background: linear-gradient(90deg,var(--pub-soft) 25%,color-mix(in srgb,var(--pub-soft) 60%,var(--pub-surface)) 50%,var(--pub-soft) 75%);
    background-size: 400% 100%;
    animation: ap-shimmer-b-qzi7z7s7o8 1.4s ease-in-out infinite
}

@keyframes ap-shimmer-b-qzi7z7s7o8 {
    0% { background-position: 100% 0 }
    100% { background-position: 0 0 }
}

.ap-state[b-qzi7z7s7o8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 46px 22px;
    border: 1px solid var(--pub-border);
    border-radius: 18px;
    background: var(--pub-surface);
    text-align: center
}

    .ap-state > span:first-child[b-qzi7z7s7o8] {
        font-size: 30px;
        color: var(--pub-accent)
    }

    .ap-state h2[b-qzi7z7s7o8] {
        margin: 4px 0 0;
        font: 800 19px/1.25 var(--pub-display)
    }

    .ap-state p[b-qzi7z7s7o8] {
        margin: 0;
        max-width: 46ch;
        color: var(--pub-muted);
        font-size: 14px
    }

.ap-state-acao[b-qzi7z7s7o8] {
    margin-top: 10px;
    text-decoration: none
}

.ap-flash[b-qzi7z7s7o8] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--pub-success-surface);
    color: var(--pub-success)
}

    .ap-flash > span:first-child[b-qzi7z7s7o8] {
        margin-top: 2px
    }

    .ap-flash p[b-qzi7z7s7o8] {
        flex: 1;
        margin: 0;
        font-size: 14px;
        font-weight: 600
    }

    .ap-flash button[b-qzi7z7s7o8] {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: inherit;
        font-size: 15px;
        cursor: pointer
    }

/* -------------------------------------------------------------- cards base */

.ap-card[b-qzi7z7s7o8] {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--pub-border);
    border-radius: 18px;
    background: var(--pub-surface)
}

.ap-card-head[b-qzi7z7s7o8] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px
}

    .ap-card-head h2[b-qzi7z7s7o8] {
        margin: 0;
        font: 800 16px/1.2 var(--pub-display)
    }

        .ap-card-head h2 span[class^=fa-][b-qzi7z7s7o8] {
            margin-right: 8px;
            color: var(--pub-accent)
        }

    .ap-card-head small[b-qzi7z7s7o8] {
        color: var(--pub-muted);
        font-size: 12px
    }

.ap-badge[b-qzi7z7s7o8] {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap
}

    .ap-badge.ativa[b-qzi7z7s7o8] {
        background: var(--pub-success-surface);
        color: var(--pub-success)
    }

    .ap-badge.pendente[b-qzi7z7s7o8] {
        background: color-mix(in srgb,var(--pub-warn) 16%,transparent);
        color: var(--pub-warn)
    }

    .ap-badge.cancelada[b-qzi7z7s7o8] {
        background: var(--pub-danger-surface);
        color: var(--pub-danger-text)
    }

    .ap-badge.neutra[b-qzi7z7s7o8] {
        background: var(--pub-soft);
        color: var(--pub-muted)
    }

/* ------------------------------------------------------------------ status */

.ap-status-topo[b-qzi7z7s7o8] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.ap-status-plano[b-qzi7z7s7o8] {
    font: 800 20px/1.2 var(--pub-display)
}

.ap-status-nota[b-qzi7z7s7o8] {
    margin: 12px 0 0;
    color: var(--pub-muted);
    font-size: 14px;
    line-height: 1.55
}

.ap-status-dados[b-qzi7z7s7o8] {
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px
}

    .ap-status-dados > div[b-qzi7z7s7o8] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        min-width: 0
    }

    .ap-status-dados dt[b-qzi7z7s7o8] {
        color: var(--pub-muted);
        font-size: 13px
    }

    .ap-status-dados dd[b-qzi7z7s7o8] {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        text-align: right
    }

.ap-status-total[b-qzi7z7s7o8] {
    padding-top: 12px;
    border-top: 1px solid var(--pub-border)
}

    .ap-status-total dt[b-qzi7z7s7o8] {
        color: var(--pub-text) !important;
        font-weight: 800
    }

    .ap-status-total dd[b-qzi7z7s7o8] {
        font: 800 22px/1.1 var(--pub-display)
    }

        .ap-status-total dd small[b-qzi7z7s7o8] {
            display: block;
            margin-top: 3px;
            color: var(--pub-muted);
            font: 600 11px/1.3 inherit
        }

/* ----------------------------------------------------------------- consumo */

.ap-medidores[b-qzi7z7s7o8] {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.ap-medidor[b-qzi7z7s7o8] {
    min-width: 0
}

.ap-medidor-rotulo[b-qzi7z7s7o8] {
    display: block;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 10px;
    font-weight: 800;
    color: var(--pub-muted)
}

.ap-medidor strong[b-qzi7z7s7o8] {
    display: block;
    margin: 3px 0 8px;
    font: 800 22px/1.1 var(--pub-display)
}

    .ap-medidor strong small[b-qzi7z7s7o8] {
        font: 600 13px/1 inherit;
        color: var(--pub-muted)
    }

.ap-barra[b-qzi7z7s7o8] {
    height: 8px;
    border-radius: 999px;
    background: var(--pub-soft);
    overflow: hidden
}

    .ap-barra > span[b-qzi7z7s7o8] {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: var(--pub-accent)
    }

    .ap-barra.estourou > span[b-qzi7z7s7o8] {
        background: var(--pub-danger)
    }

.ap-excedente[b-qzi7z7s7o8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
    padding: 14px;
    border-radius: 14px;
    background: color-mix(in srgb,var(--pub-warn) 12%,transparent)
}

    .ap-excedente > div[b-qzi7z7s7o8] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        min-width: 0
    }

    .ap-excedente span[b-qzi7z7s7o8] {
        color: var(--pub-muted);
        font-size: 13px
    }

    .ap-excedente strong[b-qzi7z7s7o8] {
        font-size: 14px;
        font-weight: 800;
        text-align: right
    }

.ap-consumo-ok[b-qzi7z7s7o8] {
    margin: 18px 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--pub-success-surface);
    color: var(--pub-success);
    font-size: 13px;
    font-weight: 600
}

    .ap-consumo-ok span[class^=fa-][b-qzi7z7s7o8] {
        margin-right: 8px
    }

.ap-consumo-nota[b-qzi7z7s7o8] {
    margin: 12px 0 0;
    color: var(--pub-muted);
    font-size: 12px
}

/* ------------------------------------------------------------------ secoes */

.ap-secao[b-qzi7z7s7o8] {
    min-width: 0
}

.ap-secao-titulo[b-qzi7z7s7o8] {
    margin: 0 0 4px;
    font: 800 18px/1.2 var(--pub-display)
}

.ap-secao-sub[b-qzi7z7s7o8] {
    margin: 0 0 14px;
    color: var(--pub-muted);
    font-size: 13px
}

.ap-secao-titulo + .ap-grade[b-qzi7z7s7o8],
.ap-secao-titulo + .ap-lista[b-qzi7z7s7o8] {
    margin-top: 14px
}

.ap-vazio[b-qzi7z7s7o8] {
    margin: 14px 0 0;
    padding: 20px;
    border: 1px dashed var(--pub-border);
    border-radius: 14px;
    color: var(--pub-muted);
    font-size: 14px;
    text-align: center
}

/* Uma coluna no celular; a media query de 760px e quem introduz o grid. */
.ap-grade[b-qzi7z7s7o8],
.ap-lista[b-qzi7z7s7o8] {
    display: flex;
    flex-direction: column;
    gap: 14px
}

/* ------------------------------------------------------------------ planos */

.ap-plano[b-qzi7z7s7o8] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px
}

    .ap-plano.atual[b-qzi7z7s7o8] {
        border-color: var(--pub-success);
        box-shadow: 0 0 0 1px var(--pub-success) inset
    }

    .ap-plano.destaque[b-qzi7z7s7o8] {
        border-color: var(--pub-accent);
        box-shadow: 0 0 0 1px var(--pub-accent) inset
    }

.ap-fita[b-qzi7z7s7o8] {
    align-self: flex-start;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--pub-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em
}

    .ap-fita.atual[b-qzi7z7s7o8] {
        background: var(--pub-success)
    }

.ap-plano h3[b-qzi7z7s7o8] {
    margin: 0;
    font: 800 20px/1.2 var(--pub-display)
}

.ap-plano-desc[b-qzi7z7s7o8] {
    margin: -6px 0 0;
    color: var(--pub-muted);
    font-size: 14px;
    line-height: 1.5
}

.ap-preco[b-qzi7z7s7o8] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    flex-wrap: wrap
}

    .ap-preco strong[b-qzi7z7s7o8] {
        font: 800 28px/1.05 var(--pub-display)
    }

    .ap-preco span[b-qzi7z7s7o8] {
        color: var(--pub-muted);
        font-size: 14px;
        font-weight: 600
    }

    .ap-preco.compacto strong[b-qzi7z7s7o8] {
        font-size: 17px
    }

.ap-limites[b-qzi7z7s7o8],
.ap-recursos[b-qzi7z7s7o8] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px
}

    .ap-limites li[b-qzi7z7s7o8],
    .ap-recursos li[b-qzi7z7s7o8] {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        min-width: 0;
        font-size: 14px;
        line-height: 1.45;
        overflow-wrap: anywhere
    }

    .ap-limites li span[class^=fa-][b-qzi7z7s7o8] {
        flex: 0 0 16px;
        margin-top: 3px;
        color: var(--pub-accent);
        font-size: 12px;
        text-align: center
    }

.ap-limites[b-qzi7z7s7o8] {
    padding: 12px 0;
    border-top: 1px solid var(--pub-border);
    border-bottom: 1px solid var(--pub-border);
    font-weight: 700
}

    .ap-recursos li span[class^=fa-][b-qzi7z7s7o8] {
        flex: 0 0 16px;
        margin-top: 3px;
        color: var(--pub-success);
        font-size: 12px;
        text-align: center
    }

.ap-recursos li[b-qzi7z7s7o8] {
    color: var(--pub-muted)
}

/* Botao sempre no rodape do card e com a largura toda: alvo de toque grande
   e previsivel, independente do tamanho do texto acima. */
.ap-acao[b-qzi7z7s7o8] {
    width: 100%;
    margin-top: auto;
    min-height: 48px
}

/* -------------------------------------------------------------- servicos */

.ap-servico[b-qzi7z7s7o8] {
    display: flex;
    flex-direction: column;
    gap: 12px
}

    .ap-servico.ativo[b-qzi7z7s7o8] {
        border-color: var(--pub-success)
    }

.ap-servico-topo[b-qzi7z7s7o8] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0
}

    .ap-servico-topo > div[b-qzi7z7s7o8] {
        min-width: 0
    }

    .ap-servico-topo h3[b-qzi7z7s7o8] {
        margin: 0;
        font: 800 17px/1.25 var(--pub-display);
        overflow-wrap: anywhere
    }

    .ap-servico-topo p[b-qzi7z7s7o8] {
        margin: 5px 0 0;
        color: var(--pub-muted);
        font-size: 13px;
        line-height: 1.5
    }

.ap-servico-icone[b-qzi7z7s7o8] {
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: color-mix(in srgb,var(--pub-accent) 14%,transparent);
    color: var(--pub-accent-dark);
    font-size: 17px
}

.ap-opcoes[b-qzi7z7s7o8] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px
}

    .ap-opcoes li[b-qzi7z7s7o8] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        min-width: 0;
        padding: 9px 12px;
        border-radius: 10px;
        background: var(--pub-soft);
        font-size: 13px
    }

        .ap-opcoes li.contratada[b-qzi7z7s7o8] {
            background: var(--pub-success-surface);
            color: var(--pub-success)
        }

        .ap-opcoes li strong[b-qzi7z7s7o8] {
            white-space: nowrap;
            font-weight: 800
        }

.ap-obs[b-qzi7z7s7o8] {
    margin: 0;
    color: var(--pub-muted);
    font-size: 12px;
    line-height: 1.5
}

    .ap-obs span[class^=fa-][b-qzi7z7s7o8] {
        margin-right: 7px;
        color: var(--pub-accent)
    }

/* -------------------------------------------------------- solicitacoes */

.ap-solicitacao[b-qzi7z7s7o8] {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.ap-solicitacao-topo[b-qzi7z7s7o8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

    .ap-solicitacao-topo small[b-qzi7z7s7o8] {
        color: var(--pub-muted);
        font-size: 12px
    }

.ap-solicitacao > strong[b-qzi7z7s7o8] {
    font: 800 17px/1.25 var(--pub-display);
    overflow-wrap: anywhere
}

.ap-solicitacao-tipo[b-qzi7z7s7o8] {
    color: var(--pub-muted);
    font-size: 13px
}

.ap-solicitacao-nota[b-qzi7z7s7o8] {
    margin: 0;
    color: var(--pub-muted);
    font-size: 12px;
    line-height: 1.5
}

.ap-solicitacao-cancelar[b-qzi7z7s7o8] {
    width: 100%;
    margin-top: 4px;
    min-height: 46px
}

.ap-contratado[b-qzi7z7s7o8],
.ap-historico[b-qzi7z7s7o8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px
}

    .ap-contratado > div[b-qzi7z7s7o8],
    .ap-historico > div[b-qzi7z7s7o8] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0
    }

    .ap-contratado strong[b-qzi7z7s7o8],
    .ap-historico strong[b-qzi7z7s7o8] {
        font-size: 15px;
        font-weight: 700;
        overflow-wrap: anywhere
    }

    .ap-contratado small[b-qzi7z7s7o8],
    .ap-historico small[b-qzi7z7s7o8] {
        color: var(--pub-muted);
        font-size: 12px
    }

.ap-contratado-valor[b-qzi7z7s7o8] {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
    font-weight: 800 !important
}

.ap-historico-resposta[b-qzi7z7s7o8] {
    margin-top: 4px;
    font-style: italic
}

.ap-rodape[b-qzi7z7s7o8] {
    margin: 0;
    color: var(--pub-muted);
    font-size: 13px;
    line-height: 1.55;
    text-align: center
}

    .ap-rodape span[class^=fa-][b-qzi7z7s7o8] {
        margin-right: 7px;
        color: var(--pub-accent)
    }

/* ------------------------------------------------------------------ modal */

.ap-modal-desc[b-qzi7z7s7o8] {
    margin: 0;
    color: var(--pub-muted);
    line-height: 1.6
}

.ap-modal-preco[b-qzi7z7s7o8] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 16px 0 0;
    flex-wrap: wrap
}

    .ap-modal-preco strong[b-qzi7z7s7o8] {
        font: 800 26px/1.05 var(--pub-display)
    }

    .ap-modal-preco span[b-qzi7z7s7o8] {
        color: var(--pub-muted);
        font-weight: 600
    }

.ap-modal-lista[b-qzi7z7s7o8] {
    margin: 16px 0 0;
    padding: 0 0 0 20px;
    color: var(--pub-muted);
    font-size: 14px;
    line-height: 1.7
}

.ap-modal-opcoes[b-qzi7z7s7o8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px
}

.ap-opcao-btn[b-qzi7z7s7o8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    padding: 12px 14px;
    border: 1px solid var(--pub-border);
    border-radius: 14px;
    background: transparent;
    color: var(--pub-text);
    font: inherit;
    text-align: left;
    cursor: pointer
}

    .ap-opcao-btn.ativa[b-qzi7z7s7o8] {
        border-color: var(--pub-accent);
        background: color-mix(in srgb,var(--pub-accent) 10%,transparent)
    }

    .ap-opcao-btn > span:first-child[b-qzi7z7s7o8] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0
    }

    .ap-opcao-btn strong[b-qzi7z7s7o8] {
        font-size: 15px;
        font-weight: 800
    }

    .ap-opcao-btn small[b-qzi7z7s7o8] {
        color: var(--pub-muted);
        font-size: 12px
    }

.ap-opcao-preco[b-qzi7z7s7o8] {
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: 800
}

.ap-modal-setup[b-qzi7z7s7o8] {
    margin: 12px 0 0;
    color: var(--pub-muted);
    font-size: 13px
}

.ap-modal-campo[b-qzi7z7s7o8] {
    display: block;
    margin-top: 18px;
    font-size: 13px;
    font-weight: 700
}

    .ap-modal-campo textarea[b-qzi7z7s7o8] {
        width: 100%;
        box-sizing: border-box;
        margin-top: 7px;
        padding: 12px 14px;
        border: 1px solid var(--pub-border);
        border-radius: 12px;
        background: var(--pub-soft);
        color: var(--pub-text);
        font: inherit;
        resize: vertical;
        outline: none
    }

        .ap-modal-campo textarea:focus[b-qzi7z7s7o8] {
            border-color: var(--pub-accent);
            box-shadow: 0 0 0 3px color-mix(in srgb,var(--pub-accent) 13%,transparent)
        }

.ap-modal-aviso[b-qzi7z7s7o8] {
    margin: 14px 0 0;
    color: var(--pub-muted);
    font-size: 12px;
    line-height: 1.55
}

    .ap-modal-aviso span[class^=fa-][b-qzi7z7s7o8] {
        margin-right: 7px;
        color: var(--pub-accent)
    }

/* ------------------------------------------------- telas maiores (bonus) */

@media (min-width: 760px) {
    .ap-head-inner[b-qzi7z7s7o8] {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        padding: 26px 0 28px
    }

    .ap-back[b-qzi7z7s7o8] {
        order: 2
    }

    .ap-grade[b-qzi7z7s7o8] {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(268px,1fr));
        align-items: stretch
    }

    .ap-status-dados[b-qzi7z7s7o8] {
        flex-direction: row;
        align-items: stretch;
        gap: 24px
    }

        .ap-status-dados > div[b-qzi7z7s7o8] {
            flex: 1;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 4px
        }

        .ap-status-dados dd[b-qzi7z7s7o8] {
            text-align: left
        }

    .ap-status-total[b-qzi7z7s7o8] {
        padding-top: 0;
        padding-left: 24px;
        border-top: 0;
        border-left: 1px solid var(--pub-border)
    }

    .ap-medidores[b-qzi7z7s7o8] {
        flex-direction: row;
        gap: 28px
    }

    .ap-medidor[b-qzi7z7s7o8] {
        flex: 1
    }

    .ap-excedente[b-qzi7z7s7o8] {
        flex-direction: row;
        gap: 28px
    }

        .ap-excedente > div[b-qzi7z7s7o8] {
            flex: 1;
            flex-direction: column;
            align-items: flex-start;
            gap: 3px
        }

        .ap-excedente strong[b-qzi7z7s7o8] {
            text-align: left
        }
}

@media (prefers-reduced-motion:reduce) {
    .ap-skeleton[b-qzi7z7s7o8] {
        animation: none
    }
}
/* /Features/Public/Components/Admin/FuncionarioHorariosModal.razor.rz.scp.css */
/* Grade semanal do profissional (modal). Mobile-first: cada dia e uma linha
   com o interruptor e, abaixo, os periodos; no desktop os periodos ficam ao
   lado do nome do dia. */

.grade-intro[b-jzrvlbfw4o],
.grade-nota[b-jzrvlbfw4o] {
    margin: 0 0 14px;
    color: var(--pub-muted);
    font-size: 13px;
    line-height: 1.5
}

.grade-nota[b-jzrvlbfw4o] {
    margin: 14px 0 0;
    display: flex;
    gap: 8px
}

    .grade-nota span[b-jzrvlbfw4o] {
        margin-top: 3px;
        color: var(--pub-accent)
    }

.grade-atalho[b-jzrvlbfw4o] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px dashed var(--pub-accent);
    border-radius: 12px;
    background: color-mix(in srgb,var(--pub-accent) 8%,transparent);
    color: var(--pub-accent-dark);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
    cursor: pointer
}

    .grade-atalho:hover[b-jzrvlbfw4o] {
        background: color-mix(in srgb,var(--pub-accent) 14%,transparent)
    }

.grade[b-jzrvlbfw4o] {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.grade-dia[b-jzrvlbfw4o] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--pub-border);
    border-radius: 14px;
    background: var(--pub-surface)
}

    .grade-dia.atende[b-jzrvlbfw4o] {
        border-color: color-mix(in srgb,var(--pub-accent) 45%,var(--pub-border))
    }

.grade-dia-nome[b-jzrvlbfw4o] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 120px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer
}

    .grade-dia-nome input[b-jzrvlbfw4o] {
        width: 20px;
        height: 20px;
        margin: 0;
        accent-color: var(--pub-accent)
    }

.grade-folga[b-jzrvlbfw4o] {
    color: var(--pub-muted);
    font-size: 13px
}

.grade-periodos[b-jzrvlbfw4o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0
}

.grade-periodo[b-jzrvlbfw4o] {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto;
    align-items: center;
    gap: 8px
}

    .grade-periodo input[type=time][b-jzrvlbfw4o] {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 10px 12px;
        border: 1px solid var(--pub-border);
        border-radius: 10px;
        background: var(--pub-soft);
        color: var(--pub-text);
        font: inherit;
        outline: none
    }

        .grade-periodo input[type=time]:focus[b-jzrvlbfw4o] {
            border-color: var(--pub-accent);
            box-shadow: 0 0 0 3px color-mix(in srgb,var(--pub-accent) 13%,transparent)
        }

.grade-ate[b-jzrvlbfw4o] {
    color: var(--pub-muted);
    font-size: 13px
}

.grade-remover[b-jzrvlbfw4o] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--pub-border);
    border-radius: 10px;
    background: transparent;
    color: var(--pub-danger);
    cursor: pointer
}

.grade-erro[b-jzrvlbfw4o] {
    color: var(--pub-danger);
    font-size: 12px;
    font-weight: 700
}

.grade-dia-acoes[b-jzrvlbfw4o] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px
}

.grade-link[b-jzrvlbfw4o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--pub-accent-dark);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer
}

    .grade-link:hover[b-jzrvlbfw4o] {
        text-decoration: underline
    }

    .grade-link:disabled[b-jzrvlbfw4o],
    .grade-remover:disabled[b-jzrvlbfw4o],
    .grade-atalho:disabled[b-jzrvlbfw4o] {
        opacity: .45;
        cursor: not-allowed
    }

@media (min-width: 600px) {
    .grade-dia[b-jzrvlbfw4o] {
        flex-direction: row;
        align-items: flex-start
    }

    .grade-dia-nome[b-jzrvlbfw4o] {
        padding-top: 8px
    }

    .grade-periodos[b-jzrvlbfw4o] {
        flex: 1
    }

    .grade-periodo[b-jzrvlbfw4o] {
        grid-template-columns: 130px auto 130px auto
    }
}
/* /Features/Public/Components/Admin/FuncionarioServicosModal.razor.rz.scp.css */
/* Lista de servicos marcaveis do profissional (modal). */

.sel-intro[b-vjxs8uhavy] {
    margin: 0 0 14px;
    color: var(--pub-muted);
    font-size: 13px;
    line-height: 1.5
}

.sel-acoes[b-vjxs8uhavy] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px
}

    .sel-acoes small[b-vjxs8uhavy] {
        margin-left: auto;
        color: var(--pub-muted);
        font-size: 12px;
        font-weight: 700
    }

.sel-link[b-vjxs8uhavy] {
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--pub-accent-dark);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer
}

    .sel-link:hover[b-vjxs8uhavy] {
        text-decoration: underline
    }

    .sel-link:disabled[b-vjxs8uhavy] {
        opacity: .45;
        cursor: not-allowed
    }

.sel-lista[b-vjxs8uhavy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--pub-border);
    border-radius: 12px
}

.sel-item[b-vjxs8uhavy] {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer
}

    .sel-item:hover[b-vjxs8uhavy] {
        background: var(--pub-soft)
    }

    .sel-item.inativo[b-vjxs8uhavy] {
        color: var(--pub-muted)
    }

    .sel-item input[b-vjxs8uhavy] {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--pub-accent)
    }

    .sel-item em[b-vjxs8uhavy] {
        color: var(--pub-muted);
        font-style: normal;
        font-weight: 500;
        font-size: 12px
    }

    .sel-item small[b-vjxs8uhavy] {
        color: var(--pub-muted);
        font-weight: 500;
        white-space: nowrap
    }

.sel-nome[b-vjxs8uhavy] {
    min-width: 0;
    overflow-wrap: anywhere
}
/* /Features/Public/Components/PublicAgendaHorarios.razor.rz.scp.css */
/* "Gerenciar horarios": mesma linguagem do drawer de agendamento (faixa de
   dias + grade de horarios), com o estado de cada horario visivel de longe. */
.pagenda[b-piv2lnmatn] {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.pagenda-prof[b-piv2lnmatn] {
    display: block;
    font-size: 13px;
    font-weight: 700
}

.pagenda select[b-piv2lnmatn] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 7px;
    padding: 11px 14px;
    border: 1px solid var(--pub-border);
    border-radius: 12px;
    background: var(--pub-soft);
    color: var(--pub-text);
    font: inherit;
    outline: none
}

    .pagenda select:focus[b-piv2lnmatn] {
        border-color: var(--pub-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb,var(--pub-accent) 13%,transparent)
    }

.pagenda-dias[b-piv2lnmatn] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory
}

.pagenda-dia[b-piv2lnmatn] {
    flex: 0 0 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    border: 1px solid var(--pub-border);
    border-radius: 14px;
    background: var(--pub-surface);
    color: var(--pub-text);
    cursor: pointer;
    scroll-snap-align: start;
    text-transform: capitalize
}

    .pagenda-dia small[b-piv2lnmatn] {
        font-size: 10.5px;
        color: var(--pub-muted)
    }

    .pagenda-dia strong[b-piv2lnmatn] {
        font: 700 20px/1.1 var(--pub-display)
    }

    .pagenda-dia.selected[b-piv2lnmatn] {
        background: var(--pub-text);
        border-color: var(--pub-text);
        color: var(--pub-surface)
    }

        .pagenda-dia.selected small[b-piv2lnmatn] {
            color: inherit
        }

.pagenda-atalhos[b-piv2lnmatn] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--pub-border);
    border-radius: 16px;
    background: var(--pub-soft)
}

.pagenda-encerrar label[b-piv2lnmatn] {
    display: block;
    font-size: 13px;
    font-weight: 700
}

.pagenda-encerrar > div[b-piv2lnmatn] {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    align-items: end
}

.pagenda-encerrar select[b-piv2lnmatn] {
    background: var(--pub-surface)
}

.pagenda-acoes[b-piv2lnmatn] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

    .pagenda-acoes .pbtn[b-piv2lnmatn] {
        flex: 1 1 160px
    }

.pagenda-dica[b-piv2lnmatn] {
    margin: 0;
    font-size: 12.5px;
    color: var(--pub-muted)
}

.pagenda-grade[b-piv2lnmatn] {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px
}

.pagenda-slot[b-piv2lnmatn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 54px;
    padding: 8px 4px;
    border: 1px solid var(--pub-border);
    border-radius: 12px;
    background: var(--pub-surface);
    color: var(--pub-text);
    cursor: pointer;
    transition: border-color .15s,background .15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent
}

    .pagenda-slot strong[b-piv2lnmatn] {
        font-size: 14.5px
    }

    .pagenda-slot small[b-piv2lnmatn] {
        font-size: 10.5px;
        color: var(--pub-muted)
    }

    .pagenda-slot.livre:hover:not(:disabled)[b-piv2lnmatn] {
        border-color: var(--pub-accent)
    }

    .pagenda-slot.bloqueado[b-piv2lnmatn] {
        background: color-mix(in srgb,var(--pub-danger,#d64545) 14%,var(--pub-surface));
        border-color: color-mix(in srgb,var(--pub-danger,#d64545) 55%,transparent);
        border-style: dashed
    }

        .pagenda-slot.bloqueado strong[b-piv2lnmatn] {
            text-decoration: line-through;
            text-decoration-thickness: 2px
        }

        .pagenda-slot.bloqueado small[b-piv2lnmatn] {
            color: var(--pub-danger,#d64545);
            font-weight: 700
        }

    .pagenda-slot.agendado[b-piv2lnmatn] {
        background: color-mix(in srgb,var(--pub-accent) 16%,var(--pub-surface));
        border-color: color-mix(in srgb,var(--pub-accent) 45%,transparent);
        cursor: default
    }

        .pagenda-slot.agendado small[b-piv2lnmatn] {
            color: var(--pub-accent);
            font-weight: 700
        }

    .pagenda-slot.passado[b-piv2lnmatn] {
        opacity: .4;
        cursor: default
    }

    .pagenda-slot:disabled[b-piv2lnmatn] {
        cursor: default
    }

.pagenda-grade[aria-busy=true][b-piv2lnmatn] {
    opacity: .7
}

.pagenda-legenda[b-piv2lnmatn] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    color: var(--pub-muted)
}

    .pagenda-legenda li[b-piv2lnmatn] {
        display: flex;
        align-items: center;
        gap: 6px
    }

    .pagenda-legenda span[b-piv2lnmatn] {
        width: 12px;
        height: 12px;
        border-radius: 4px;
        border: 1px solid var(--pub-border);
        background: var(--pub-surface)
    }

        .pagenda-legenda span.bloqueado[b-piv2lnmatn] {
            border: 1px dashed var(--pub-danger,#d64545);
            background: color-mix(in srgb,var(--pub-danger,#d64545) 14%,var(--pub-surface))
        }

        .pagenda-legenda span.agendado[b-piv2lnmatn] {
            border-color: var(--pub-accent);
            background: color-mix(in srgb,var(--pub-accent) 16%,var(--pub-surface))
        }

.pagenda-vazio[b-piv2lnmatn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 34px 12px;
    border: 1px dashed var(--pub-border);
    border-radius: 16px;
    color: var(--pub-muted);
    text-align: center
}

.pagenda-aviso[b-piv2lnmatn], .pagenda-erro[b-piv2lnmatn] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 11px 13px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.4
}

.pagenda-aviso[b-piv2lnmatn] {
    background: color-mix(in srgb,var(--pub-accent) 12%,var(--pub-surface));
    color: var(--pub-text)
}

    .pagenda-aviso .fa-solid[b-piv2lnmatn] {
        color: var(--pub-accent);
        margin-top: 2px
    }

.pagenda-erro[b-piv2lnmatn] {
    background: #fff0ee;
    color: #a62d20
}

@media (max-width:600px) {
    .pagenda-grade[b-piv2lnmatn] {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

    .pagenda-slot[b-piv2lnmatn] {
        min-height: 52px
    }
}
/* /Features/Public/Components/PublicBookingDrawer.razor.rz.scp.css */
.booking-backdrop[b-pmmhdr2zuy]{position:fixed;inset:0;background:rgba(12,16,20,.55);backdrop-filter:blur(4px);z-index:1000;animation:fade-in-b-pmmhdr2zuy .2s ease}.booking-drawer[b-pmmhdr2zuy]{position:fixed;z-index:1001;top:0;right:0;height:100vh;height:100dvh;width:min(520px,100%);background:var(--pub-surface);color:var(--pub-text);box-shadow:-20px 0 60px rgba(0,0,0,.22);display:flex;flex-direction:column;animation:slide-in-b-pmmhdr2zuy .3s cubic-bezier(.2,.8,.2,1)}.booking-head[b-pmmhdr2zuy]{display:flex;align-items:center;justify-content:space-between;padding:26px 28px 18px;border-bottom:1px solid var(--pub-border)}.booking-head h2[b-pmmhdr2zuy]{font:700 25px/1.2 var(--pub-display);margin:4px 0}.booking-eyebrow[b-pmmhdr2zuy]{text-transform:uppercase;letter-spacing:.13em;font-size:11px;font-weight:800;color:var(--pub-accent)}.icon-button[b-pmmhdr2zuy]{border:1px solid var(--pub-border);color:var(--pub-text);background:transparent;width:42px;height:42px;border-radius:50%;font-size:18px;cursor:pointer}.booking-progress[b-pmmhdr2zuy]{height:4px;display:flex;gap:4px;padding:0 28px;margin-top:16px}.booking-progress span[b-pmmhdr2zuy]{height:4px;flex:1;border-radius:99px;background:var(--pub-border)}.booking-progress .active[b-pmmhdr2zuy]{background:var(--pub-accent)}.booking-body[b-pmmhdr2zuy]{flex:1;overflow:auto;padding:24px 28px}.booking-step h3[b-pmmhdr2zuy],.booking-success h3[b-pmmhdr2zuy]{font:700 26px/1.2 var(--pub-display);margin:8px 0}.booking-step>p[b-pmmhdr2zuy],.booking-success>p[b-pmmhdr2zuy]{color:var(--pub-muted);margin:0 0 24px}.professional-option[b-pmmhdr2zuy]{display:grid;grid-template-columns:54px 1fr 26px;align-items:center;gap:14px;width:100%;padding:12px;margin:10px 0;border:1px solid var(--pub-border);border-radius:16px;background:var(--pub-surface);color:var(--pub-text);text-align:left;cursor:pointer;transition:.2s}.professional-option:hover[b-pmmhdr2zuy],.professional-option.selected[b-pmmhdr2zuy]{border-color:var(--pub-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--pub-accent) 13%,transparent)}.professional-option img[b-pmmhdr2zuy],.professional-auto[b-pmmhdr2zuy]{width:54px;height:54px;border-radius:14px;object-fit:cover}.professional-auto[b-pmmhdr2zuy]{display:grid;place-items:center;background:var(--pub-soft);font-size:26px}.professional-option span[b-pmmhdr2zuy]{display:flex;flex-direction:column}.professional-option small[b-pmmhdr2zuy]{color:var(--pub-muted);margin-top:3px}.professional-option .check[b-pmmhdr2zuy]{display:none;color:var(--pub-accent);font-weight:900}.professional-option.selected .check[b-pmmhdr2zuy]{display:block}.date-strip[b-pmmhdr2zuy]{display:flex;gap:9px;overflow:auto;padding:3px 2px 12px;scrollbar-width:none}.date-option[b-pmmhdr2zuy]{min-width:65px;padding:10px 6px;border-radius:15px;border:1px solid var(--pub-border);background:var(--pub-surface);color:var(--pub-text);cursor:pointer;display:flex;flex-direction:column;align-items:center;text-transform:capitalize}.date-option strong[b-pmmhdr2zuy]{font:700 22px var(--pub-display)}.date-option small[b-pmmhdr2zuy],.date-option span[b-pmmhdr2zuy]{font-size:11px;color:var(--pub-muted)}.date-option.selected[b-pmmhdr2zuy],.time-option.selected[b-pmmhdr2zuy]{background:var(--pub-text);color:var(--pub-surface);border-color:var(--pub-text)}.date-option.selected small[b-pmmhdr2zuy],.date-option.selected span[b-pmmhdr2zuy]{color:inherit}.time-grid[b-pmmhdr2zuy]{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}.time-option[b-pmmhdr2zuy]{border:1px solid var(--pub-border);border-radius:11px;padding:12px 8px;background:var(--pub-surface);color:var(--pub-text);font-weight:700;cursor:pointer}.slots-loading[b-pmmhdr2zuy],.empty-slots[b-pmmhdr2zuy]{padding:36px 10px;text-align:center;color:var(--pub-muted)}.slots-loading span[b-pmmhdr2zuy],.button-spinner[b-pmmhdr2zuy]{display:inline-block;width:15px;height:15px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin-b-pmmhdr2zuy .8s linear infinite}.booking-step label[b-pmmhdr2zuy]{display:block;font-size:13px;font-weight:700;margin:15px 0}.booking-step label span[b-pmmhdr2zuy]{font-weight:400;color:var(--pub-muted)}.booking-step input[b-pmmhdr2zuy],.booking-step textarea[b-pmmhdr2zuy]{width:100%;box-sizing:border-box;margin-top:7px;padding:14px;border:1px solid var(--pub-border);border-radius:12px;background:var(--pub-soft);color:var(--pub-text);font:inherit;outline:none}.booking-step input:focus[b-pmmhdr2zuy],.booking-step textarea:focus[b-pmmhdr2zuy]{border-color:var(--pub-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--pub-accent) 13%,transparent)}.review-booking-card[b-pmmhdr2zuy]{display:flex;gap:14px;align-items:center;padding:12px;border:1px solid var(--pub-border);border-radius:16px}.review-item-image[b-pmmhdr2zuy]{width:70px;height:70px;border-radius:12px;background-size:cover;background-position:center}.review-booking-card div:last-child[b-pmmhdr2zuy]{display:flex;flex-direction:column}.review-booking-card span[b-pmmhdr2zuy]{color:var(--pub-muted);margin-top:4px}.booking-summary[b-pmmhdr2zuy]{margin:22px 0}.booking-summary div[b-pmmhdr2zuy]{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--pub-border)}.booking-summary dt[b-pmmhdr2zuy]{color:var(--pub-muted)}.booking-summary dd[b-pmmhdr2zuy]{font-weight:700;text-align:right}.privacy-note[b-pmmhdr2zuy]{background:var(--pub-soft);border-radius:12px;padding:12px!important;font-size:12px}.booking-error[b-pmmhdr2zuy]{margin-top:16px;padding:12px 14px;background:#fff0ee;color:#a62d20;border-radius:10px;font-size:13px}.booking-footer[b-pmmhdr2zuy]{padding:16px 28px max(20px,env(safe-area-inset-bottom));border-top:1px solid var(--pub-border);display:flex;gap:10px;justify-content:flex-end;background:var(--pub-surface)}.primary-button[b-pmmhdr2zuy],.secondary-button[b-pmmhdr2zuy]{border:0;border-radius:12px;padding:14px 20px;font-weight:800;cursor:pointer}.primary-button[b-pmmhdr2zuy]{background:var(--pub-accent);color:#fff;flex:1}.secondary-button[b-pmmhdr2zuy]{background:var(--pub-soft);color:var(--pub-text)}button:disabled[b-pmmhdr2zuy]{opacity:.45;cursor:not-allowed}.booking-success[b-pmmhdr2zuy]{padding:40px 32px;overflow:auto;text-align:center}.success-mark[b-pmmhdr2zuy]{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;margin:10px auto 24px;background:#e2f7e8;color:#1f8b45;font-size:36px}.success-card[b-pmmhdr2zuy]{text-align:left;border:1px solid var(--pub-border);border-radius:18px;padding:8px 18px;margin:28px 0}.success-card div[b-pmmhdr2zuy]{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--pub-border)}.success-card div:last-child[b-pmmhdr2zuy]{border:0}.success-card span[b-pmmhdr2zuy]{color:var(--pub-muted)}.full[b-pmmhdr2zuy]{width:100%}@keyframes fade-in-b-pmmhdr2zuy{from{opacity:0}}@keyframes slide-in-b-pmmhdr2zuy{from{transform:translateX(100%)}}@keyframes spin-b-pmmhdr2zuy{to{transform:rotate(360deg)}}@media(max-width:600px){.booking-head[b-pmmhdr2zuy]{padding:20px}.booking-body[b-pmmhdr2zuy]{padding:22px 20px}.booking-footer[b-pmmhdr2zuy]{padding-left:20px;padding-right:20px}.time-grid[b-pmmhdr2zuy]{grid-template-columns:repeat(3,1fr)}}@media(prefers-reduced-motion:reduce){.booking-drawer[b-pmmhdr2zuy],.booking-backdrop[b-pmmhdr2zuy]{animation:none}}
/* Fluxo móvel: usa a viewport útil, mantém contexto e oferece alvos de toque confortáveis. */
.booking-drawer[b-pmmhdr2zuy],.booking-drawer *[b-pmmhdr2zuy]{box-sizing:border-box}
.booking-drawer button[b-pmmhdr2zuy],.booking-drawer input[b-pmmhdr2zuy],.booking-drawer textarea[b-pmmhdr2zuy]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.booking-success .secondary-button[b-pmmhdr2zuy]{margin-top:10px}

@media (max-width:600px){
    .booking-drawer[b-pmmhdr2zuy]{width:100%;height:100vh;height:100svh;max-height:100vh;max-height:100svh}
    .booking-head[b-pmmhdr2zuy]{padding:14px 16px 12px;gap:12px}
    .booking-head>div[b-pmmhdr2zuy]{min-width:0}
    .booking-head h2[b-pmmhdr2zuy]{font-size:21px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .booking-eyebrow[b-pmmhdr2zuy]{font-size:9px}
    .icon-button[b-pmmhdr2zuy]{width:44px;height:44px;flex:0 0 44px}
    .booking-progress[b-pmmhdr2zuy]{margin-top:10px;padding-inline:16px}
    .booking-body[b-pmmhdr2zuy]{padding:18px 16px 22px;overscroll-behavior:contain}
    .booking-step h3[b-pmmhdr2zuy],.booking-success h3[b-pmmhdr2zuy]{font-size:23px;line-height:1.08;margin-top:6px}
    .booking-step>p[b-pmmhdr2zuy],.booking-success>p[b-pmmhdr2zuy]{font-size:13px;margin-bottom:18px}
    .professional-option[b-pmmhdr2zuy]{min-height:68px;margin:8px 0;padding:10px 12px;border-radius:16px}
    .professional-option img[b-pmmhdr2zuy],.professional-auto[b-pmmhdr2zuy]{width:48px;height:48px}
    .date-strip[b-pmmhdr2zuy]{gap:8px;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;padding-bottom:7px}
    .date-option[b-pmmhdr2zuy]{min-width:62px;height:66px;padding:7px 5px;scroll-snap-align:start}
    .time-grid[b-pmmhdr2zuy]{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
    .time-option[b-pmmhdr2zuy]{min-height:46px;padding:9px 5px;border-radius:13px}
    .booking-step label[b-pmmhdr2zuy]{margin:12px 0}
    .booking-step input[b-pmmhdr2zuy],.booking-step textarea[b-pmmhdr2zuy]{min-height:50px;margin-top:5px;font-size:16px}
    .review-booking-card[b-pmmhdr2zuy]{padding:10px}
    .booking-summary[b-pmmhdr2zuy]{margin:16px 0}
    .booking-summary div[b-pmmhdr2zuy]{padding:11px 0}
    .booking-footer[b-pmmhdr2zuy]{padding:12px 16px calc(12px + env(safe-area-inset-bottom));gap:10px}
    .primary-button[b-pmmhdr2zuy],.secondary-button[b-pmmhdr2zuy]{min-height:48px;padding:12px 16px}
    .booking-success[b-pmmhdr2zuy]{padding:28px 16px calc(28px + env(safe-area-inset-bottom))}
}

@media (max-width:360px){
    .booking-head[b-pmmhdr2zuy],.booking-body[b-pmmhdr2zuy],.booking-footer[b-pmmhdr2zuy]{padding-left:14px;padding-right:14px}
    .booking-step h3[b-pmmhdr2zuy],.booking-success h3[b-pmmhdr2zuy]{font-size:21px}
    .professional-option[b-pmmhdr2zuy]{grid-template-columns:44px 1fr 22px;gap:10px}
    .professional-option img[b-pmmhdr2zuy],.professional-auto[b-pmmhdr2zuy]{width:44px;height:44px}
    .date-option[b-pmmhdr2zuy]{min-width:58px;height:62px}
    .time-grid[b-pmmhdr2zuy]{gap:6px}
    .time-option[b-pmmhdr2zuy]{font-size:12px}
}

@media (max-width:950px) and (max-height:560px) and (orientation:landscape){
    .booking-drawer[b-pmmhdr2zuy]{height:100vh;height:100svh;max-height:100vh;max-height:100svh}
    .booking-head[b-pmmhdr2zuy]{padding-block:9px 7px}
    .booking-head h2[b-pmmhdr2zuy]{font-size:19px}
    .booking-progress[b-pmmhdr2zuy]{margin-top:6px}
    .booking-body[b-pmmhdr2zuy]{padding-block:13px}
    .booking-footer[b-pmmhdr2zuy]{padding-block:8px calc(8px + env(safe-area-inset-bottom))}
}

@media (prefers-reduced-motion:reduce){
    .booking-backdrop[b-pmmhdr2zuy],.booking-drawer[b-pmmhdr2zuy],.booking-drawer *[b-pmmhdr2zuy]{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Aviso de fuso: so aparece quando o relogio do visitante difere do da empresa. */
.booking-timezone[b-pmmhdr2zuy]{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:10px 12px;border-radius:12px;background:var(--pub-soft);color:var(--pub-muted);font-size:12.5px;line-height:1.35}
.booking-success a.secondary-button[b-pmmhdr2zuy]{display:block;box-sizing:border-box;text-align:center;text-decoration:none}

/* Estado vazio da etapa de horario (padrao "proximo disponivel"): em vez de so
   avisar que o dia esta cheio, mostra direto os proximos dias com vaga, cada um
   com os primeiros horarios clicaveis e um atalho para ver o dia inteiro. */
.empty-slots[b-pmmhdr2zuy]{margin-top:18px;padding:0;text-align:left;color:var(--pub-text)}
.empty-slots-head[b-pmmhdr2zuy]{display:flex;gap:12px;align-items:center;padding:14px;border:1px dashed var(--pub-border);border-radius:16px;background:var(--pub-soft)}
.empty-slots-icon[b-pmmhdr2zuy]{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--pub-accent) 16%,transparent);color:var(--pub-accent);font-size:17px}
.empty-slots-head strong[b-pmmhdr2zuy]{display:block;font-size:14.5px;line-height:1.25}
.empty-slots-head strong[b-pmmhdr2zuy]::first-letter{text-transform:uppercase}
.empty-slots-head span[b-pmmhdr2zuy]{display:block;margin-top:3px;color:var(--pub-muted);font-size:12.5px;line-height:1.35}
.next-days[b-pmmhdr2zuy]{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.next-day[b-pmmhdr2zuy]{display:grid;grid-template-columns:86px 1fr;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--pub-border);border-radius:16px;background:var(--pub-surface);animation:fade-in-b-pmmhdr2zuy .25s ease}
.next-day-date[b-pmmhdr2zuy]{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:0;border:0;background:transparent;color:var(--pub-text);cursor:pointer;text-align:left;font:inherit}
.next-day-date small[b-pmmhdr2zuy]{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pub-accent)}
.next-day-date strong[b-pmmhdr2zuy]{font:700 18px/1.1 var(--pub-display);text-transform:capitalize;transition:color .15s}
.next-day-date:hover strong[b-pmmhdr2zuy]{color:var(--pub-accent)}
.next-day-times[b-pmmhdr2zuy]{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.next-day-times .time-option[b-pmmhdr2zuy]{padding:9px 6px;min-width:0;font-size:13px;transition:border-color .15s,background .15s}
.next-day-times .time-option:hover[b-pmmhdr2zuy]{border-color:var(--pub-accent)}
.time-option.more[b-pmmhdr2zuy]{background:var(--pub-soft);color:var(--pub-muted);border-style:dashed}
.next-day.skeleton[b-pmmhdr2zuy]{min-height:66px;pointer-events:none}
.next-day.skeleton span[b-pmmhdr2zuy]{display:block;border-radius:7px;background:var(--pub-soft);animation:pulse-b-pmmhdr2zuy 1.2s ease-in-out infinite}
.next-day.skeleton span:first-child[b-pmmhdr2zuy]{width:60%;height:14px}
.next-day.skeleton span:last-child[b-pmmhdr2zuy]{width:100%;height:36px;border-radius:11px}
.empty-slots-action[b-pmmhdr2zuy]{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px}
@keyframes pulse-b-pmmhdr2zuy{50%{opacity:.4}}
@media (max-width:600px){
    .next-day[b-pmmhdr2zuy]{grid-template-columns:1fr;gap:9px;padding:11px 12px}
    .next-day-date[b-pmmhdr2zuy]{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:8px;width:100%}
    .next-day-times[b-pmmhdr2zuy]{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
    .next-day-times .time-option[b-pmmhdr2zuy]{min-width:0;min-height:40px;padding:8px 4px;font-size:12.5px}
}

/* Dias sem horario livre na faixa: o cliente ve de longe que nao vale tocar, mas o
   botao continua clicavel, porque o estado vazio mostra os proximos dias com vaga. */
.date-option.lotado[b-pmmhdr2zuy]{opacity:.5}
.date-option.lotado strong[b-pmmhdr2zuy]{text-decoration:line-through;text-decoration-thickness:2px}
.date-option.lotado.selected[b-pmmhdr2zuy]{opacity:.75}

/* Visao geral ao entrar na etapa: os proximos dias com vaga (hoje, amanha...) ja
   aparecem com os primeiros horarios, sem o cliente precisar tocar numa data. */
.next-overview[b-pmmhdr2zuy]{margin-top:6px}
.next-overview-head strong[b-pmmhdr2zuy]{display:block;font-size:14.5px;line-height:1.25}
.next-overview-head span[b-pmmhdr2zuy]{display:block;margin-top:3px;color:var(--pub-muted);font-size:12.5px;line-height:1.35}
.next-more[b-pmmhdr2zuy]{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px}
/* /Features/Public/Components/PublicCartDrawer.razor.rz.scp.css */
.pcart-backdrop[b-g683kscuip] {
    position: fixed;
    inset: 0;
    background: rgba(12,16,20,.55);
    backdrop-filter: blur(4px);
    z-index: 1000;
    animation: pcart-fade-b-g683kscuip .2s ease
}

.pcart[b-g683kscuip] {
    position: fixed;
    z-index: 1001;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(430px,100%);
    background: var(--pub-surface);
    color: var(--pub-text);
    box-shadow: -20px 0 60px rgba(0,0,0,.22);
    display: flex;
    flex-direction: column;
    animation: pcart-slide-b-g683kscuip .3s cubic-bezier(.2,.8,.2,1)
}

.pcart-head[b-g683kscuip] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--pub-border)
}

    .pcart-head h2[b-g683kscuip] {
        font: 700 22px/1.2 var(--pub-display);
        margin: 4px 0 0
    }

.pcart-eyebrow[b-g683kscuip] {
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: 11px;
    font-weight: 800;
    color: var(--pub-accent)
}

.pcart-close[b-g683kscuip] {
    width: 42px;
    height: 42px;
    border: 1px solid var(--pub-border);
    border-radius: 50%;
    background: transparent;
    color: var(--pub-text);
    font-size: 17px;
    cursor: pointer
}

.pcart-body[b-g683kscuip] {
    flex: 1;
    overflow: auto;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overscroll-behavior: contain
}

.pcart-empty[b-g683kscuip] {
    margin: auto;
    text-align: center;
    color: var(--pub-muted)
}

    .pcart-empty span[b-g683kscuip] {
        font-size: 34px;
        opacity: .5
    }

    .pcart-empty p[b-g683kscuip] {
        max-width: 220px;
        margin: 14px auto 0
    }

.pcart-item[b-g683kscuip] {
    display: grid;
    grid-template-columns: 64px 1fr 36px;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--pub-border);
    border-radius: 14px
}

    .pcart-item img[b-g683kscuip], .pcart-thumb[b-g683kscuip] {
        width: 64px;
        height: 64px;
        border-radius: 10px;
        object-fit: cover
    }

.pcart-thumb[b-g683kscuip] {
    display: grid;
    place-items: center;
    background: var(--pub-soft);
    color: var(--pub-muted);
    font-size: 20px
}

.pcart-item-info[b-g683kscuip] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0
}

    .pcart-item-info strong[b-g683kscuip] {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .pcart-item-info > span[b-g683kscuip] {
        color: var(--pub-muted);
        font-size: 13px
    }

.pcart-qty[b-g683kscuip] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px
}

    .pcart-qty button[b-g683kscuip] {
        width: 40px;
        height: 40px;
        border: 1px solid var(--pub-border);
        border-radius: 8px;
        background: var(--pub-soft);
        color: var(--pub-text);
        font-size: 16px;
        font-weight: 800;
        cursor: pointer;
        line-height: 1
    }

        .pcart-qty button:disabled[b-g683kscuip] {
            opacity: .4;
            cursor: not-allowed
        }

.pcart-stock-limit[b-g683kscuip] {
    font-size: 11px;
    color: var(--pub-warn)
}

.pcart-remove[b-g683kscuip] {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--pub-danger);
    cursor: pointer
}

.pcart-foot[b-g683kscuip] {
    padding: 16px 24px max(18px,env(safe-area-inset-bottom));
    border-top: 1px solid var(--pub-border);
    display: flex;
    flex-direction: column;
    gap: 12px
}

.pcart-total[b-g683kscuip] {
    display: flex;
    justify-content: space-between;
    align-items: baseline
}

    .pcart-total span[b-g683kscuip] {
        color: var(--pub-muted);
        font-size: 13px
    }

    .pcart-total strong[b-g683kscuip] {
        font: 800 22px var(--pub-display)
    }

.pcart-checkout[b-g683kscuip] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    border: 0;
    border-radius: 12px;
    /* Verde escurecido para contraste AA (>=4.5:1) com o texto branco. */
    background: #1d8348;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer
}

    .pcart-checkout:disabled[b-g683kscuip], .pcart-clear:disabled[b-g683kscuip], .pcart-remove:disabled[b-g683kscuip] {
        opacity: .55;
        cursor: not-allowed
    }

.pcart-error[b-g683kscuip] {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in srgb,var(--pub-danger) 10%,transparent);
    color: var(--pub-danger);
    font-size: 12px
}

.pcart-note[b-g683kscuip] {
    margin: 0;
    font-size: 12px;
    color: var(--pub-muted);
    text-align: center
}

.pcart-clear[b-g683kscuip] {
    border: 0;
    background: transparent;
    color: var(--pub-muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 6px
}

    .pcart-clear:hover[b-g683kscuip] {
        color: var(--pub-danger)
    }

@keyframes pcart-fade-b-g683kscuip {
    from { opacity: 0 }
}

@keyframes pcart-slide-b-g683kscuip {
    from { transform: translateX(100%) }
}

@media (max-width:600px) {
    .pcart[b-g683kscuip] {
        width: 100%
    }
}

@media (prefers-reduced-motion:reduce) {
    .pcart[b-g683kscuip], .pcart-backdrop[b-g683kscuip] {
        animation: none
    }
}
.pcart-schedule[b-g683kscuip] {
    display: block;
    margin-top: 5px;
    color: var(--pub-accent);
    font-weight: 700;
}
/* /Features/Public/Components/PublicConfirm.razor.rz.scp.css */
.pconfirm-msg[b-4xhyb3p9we] {
    margin: 4px 0 0;
    color: var(--pub-muted);
    line-height: 1.6
}

.pconfirm-erro[b-4xhyb3p9we] {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--pub-danger-surface);
    color: var(--pub-danger-text);
    border-radius: 10px;
    font-size: 13px
}

.pbtn-confirm-danger[b-4xhyb3p9we] {
    background: var(--pub-danger);
    color: #fff
}
/* /Features/Public/Components/PublicImagemPicker.razor.rz.scp.css */
.ppicker[b-o1l0abss6w] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 12px;
    border: 1px solid var(--pub-border);
    border-radius: 16px;
    background: var(--pub-soft)
}

.ppicker-preview[b-o1l0abss6w] {
    position: relative;
    flex: 0 0 116px;
    width: 116px;
    height: 92px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    display: grid;
    place-items: center;
    color: var(--pub-muted);
    font-size: 26px
}

    .ppicker-preview img[b-o1l0abss6w] {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.ppicker-loading[b-o1l0abss6w] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.35)
}

    .ppicker-loading span[b-o1l0abss6w] {
        width: 22px;
        height: 22px;
        border: 3px solid #fff;
        border-top-color: transparent;
        border-radius: 50%;
        animation: ppicker-spin-b-o1l0abss6w .8s linear infinite
    }

.ppicker-actions[b-o1l0abss6w] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0
}

.ppicker-label[b-o1l0abss6w] {
    font-size: 13px;
    font-weight: 700
}

.ppicker-select[b-o1l0abss6w] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 9px 14px;
    border: 1px solid var(--pub-border);
    border-radius: 10px;
    background: var(--pub-surface);
    color: var(--pub-text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer
}

    .ppicker-select:hover[b-o1l0abss6w] {
        border-color: var(--pub-accent)
    }

    .ppicker-select.disabled[b-o1l0abss6w] {
        opacity: .45;
        cursor: not-allowed
    }

    .ppicker-select[b-o1l0abss6w]  input[type=file] {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        overflow: hidden
    }

.ppicker-remove[b-o1l0abss6w] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pub-danger);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer
}

.ppicker-pending[b-o1l0abss6w] {
    color: var(--pub-warn);
    font-size: 12px
}

.ppicker-error[b-o1l0abss6w] {
    color: var(--pub-danger);
    font-size: 12px
}

.ppicker-help[b-o1l0abss6w] {
    color: var(--pub-muted);
    font-size: 11px
}

@keyframes ppicker-spin-b-o1l0abss6w {
    to { transform: rotate(360deg) }
}
/* /Features/Public/Components/PublicLoginModal.razor.rz.scp.css */
.plogin-form label[b-7xu7spescu] {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 16px
}

.plogin-form input[type=text][b-7xu7spescu],
.plogin-form input[type=email][b-7xu7spescu],
.plogin-form input[type=tel][b-7xu7spescu],
.plogin-form input[type=password][b-7xu7spescu] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 7px;
    padding: 14px;
    border: 1px solid var(--pub-border);
    border-radius: 12px;
    background: var(--pub-soft);
    color: var(--pub-text);
    font: inherit;
    outline: none
}

    .plogin-form input[type=text]:focus[b-7xu7spescu],
    .plogin-form input[type=email]:focus[b-7xu7spescu],
    .plogin-form input[type=tel]:focus[b-7xu7spescu],
    .plogin-form input[type=password]:focus[b-7xu7spescu] {
        border-color: var(--pub-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb,var(--pub-accent) 13%,transparent)
    }

.plogin-modes[b-7xu7spescu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 5px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: var(--pub-soft);
}

.plogin-modes button[b-7xu7spescu] {
    min-height: 42px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--pub-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.plogin-modes button.active[b-7xu7spescu] {
    background: var(--pub-surface);
    color: var(--pub-text);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--pub-text) 10%, transparent);
}

.password-wrap[b-7xu7spescu] {
    position: relative;
    display: block
}

    .password-wrap input[b-7xu7spescu] {
        padding-right: 52px !important
    }

.toggle-password[b-7xu7spescu] {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(calc(-50% + 3px));
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--pub-muted);
    font-size: 16px;
    cursor: pointer
}

    .toggle-password:hover[b-7xu7spescu] {
        color: var(--pub-text)
    }

.field-error[b-7xu7spescu] {
    display: block;
    margin-top: 6px;
    font-weight: 400;
    color: var(--pub-danger)
}

.plogin-error[b-7xu7spescu] {
    margin: 4px 0 14px;
    padding: 12px 14px;
    background: var(--pub-danger-surface);
    color: var(--pub-danger-text);
    border-radius: 10px;
    font-size: 13px
}

.plogin-submit[b-7xu7spescu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 12px;
    background: var(--pub-accent);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer
}

    .plogin-submit:disabled[b-7xu7spescu] {
        opacity: .45;
        cursor: not-allowed
    }

.plogin-spinner[b-7xu7spescu] {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: plogin-spin-b-7xu7spescu .8s linear infinite
}

.plogin-hint[b-7xu7spescu] {
    margin: 16px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--pub-muted)
}

@keyframes plogin-spin-b-7xu7spescu {
    to { transform: rotate(360deg) }
}

@media (prefers-reduced-motion:reduce) {
    .plogin-spinner[b-7xu7spescu] {
        animation-duration: 2s
    }
}
/* /Features/Public/Components/PublicModal.razor.rz.scp.css */
.pmodal-backdrop[b-9go3eefe95] {
    position: fixed;
    inset: 0;
    background: rgba(12,16,20,.55);
    backdrop-filter: blur(4px);
    z-index: 1000;
    animation: pmodal-fade-b-9go3eefe95 .2s ease
}

.pmodal[b-9go3eefe95] {
    position: fixed;
    z-index: 1001;
    inset: 50% auto auto 50%;
    transform: translate(-50%,-50%);
    width: min(560px,calc(100% - 28px));
    max-height: min(92vh,760px);
    max-height: min(92dvh,760px);
    display: flex;
    flex-direction: column;
    background: var(--pub-surface);
    color: var(--pub-text);
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(0,0,0,.3);
    animation: pmodal-pop-b-9go3eefe95 .25s cubic-bezier(.2,.8,.2,1);
    outline: none
}

    .pmodal.larga[b-9go3eefe95] {
        width: min(720px,calc(100% - 28px))
    }

.pmodal-head[b-9go3eefe95] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 24px 26px 16px;
    border-bottom: 1px solid var(--pub-border)
}

    .pmodal-head > div[b-9go3eefe95] {
        min-width: 0
    }

    .pmodal-head h2[b-9go3eefe95] {
        font: 700 23px/1.2 var(--pub-display);
        margin: 4px 0 0
    }

.pmodal-eyebrow[b-9go3eefe95] {
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: 11px;
    font-weight: 800;
    color: var(--pub-accent)
}

.pmodal-close[b-9go3eefe95] {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--pub-border);
    border-radius: 50%;
    background: transparent;
    color: var(--pub-text);
    font-size: 17px;
    cursor: pointer
}

.pmodal-body[b-9go3eefe95] {
    flex: 1;
    overflow: auto;
    padding: 20px 26px;
    overscroll-behavior: contain
}

.pmodal-foot[b-9go3eefe95] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 16px 26px max(18px,env(safe-area-inset-bottom));
    border-top: 1px solid var(--pub-border);
    background: var(--pub-surface);
    border-radius: 0 0 22px 22px
}

@keyframes pmodal-fade-b-9go3eefe95 {
    from { opacity: 0 }
}

@keyframes pmodal-pop-b-9go3eefe95 {
    from { opacity: 0; transform: translate(-50%,-48%) scale(.98) }
}

@media (max-width:600px) {
    .pmodal[b-9go3eefe95] {
        inset: auto 0 0 0;
        transform: none;
        width: 100%;
        max-height: 94vh;
        max-height: 94svh;
        border-radius: 22px 22px 0 0;
        animation: pmodal-rise-b-9go3eefe95 .3s cubic-bezier(.2,.8,.2,1)
    }

        .pmodal.larga[b-9go3eefe95] {
            width: 100%
        }

    .pmodal-head[b-9go3eefe95] {
        padding: 18px 18px 12px
    }

        .pmodal-head h2[b-9go3eefe95] {
            font-size: 20px
        }

    .pmodal-body[b-9go3eefe95] {
        padding: 16px 18px
    }

    .pmodal-foot[b-9go3eefe95] {
        padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
        border-radius: 0
    }
}

@keyframes pmodal-rise-b-9go3eefe95 {
    from { transform: translateY(40px); opacity: 0 }
}

@media (prefers-reduced-motion:reduce) {
    .pmodal[b-9go3eefe95], .pmodal-backdrop[b-9go3eefe95] {
        animation: none
    }
}
/* /Features/Public/Components/PublicNotificationsDrawer.razor.rz.scp.css */
.pnotif-backdrop[b-438xe0hsyq] {
    position: fixed;
    inset: 0;
    background: rgba(12,16,20,.55);
    backdrop-filter: blur(4px);
    z-index: 1000;
    animation: pnotif-fade-b-438xe0hsyq .2s ease
}

.pnotif[b-438xe0hsyq] {
    position: fixed;
    z-index: 1001;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(400px,100%);
    background: var(--pub-surface);
    color: var(--pub-text);
    box-shadow: -20px 0 60px rgba(0,0,0,.22);
    display: flex;
    flex-direction: column;
    animation: pnotif-slide-b-438xe0hsyq .3s cubic-bezier(.2,.8,.2,1)
}

.pnotif-head[b-438xe0hsyq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--pub-border)
}

    .pnotif-head h2[b-438xe0hsyq] {
        font: 700 22px/1.2 var(--pub-display);
        margin: 4px 0 0
    }

.pnotif-eyebrow[b-438xe0hsyq] {
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: 11px;
    font-weight: 800;
    color: var(--pub-accent)
}

.pnotif-close[b-438xe0hsyq] {
    width: 42px;
    height: 42px;
    border: 1px solid var(--pub-border);
    border-radius: 50%;
    background: transparent;
    color: var(--pub-text);
    font-size: 17px;
    cursor: pointer
}

.pnotif-body[b-438xe0hsyq] {
    flex: 1;
    overflow: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overscroll-behavior: contain
}

.pnotif-empty[b-438xe0hsyq] {
    margin: auto;
    text-align: center;
    color: var(--pub-muted)
}

    .pnotif-empty span[b-438xe0hsyq] {
        font-size: 34px;
        opacity: .5
    }

    .pnotif-empty p[b-438xe0hsyq] {
        max-width: 230px;
        margin: 14px auto 0
    }

.pnotif-item[b-438xe0hsyq] {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--pub-border);
    border-radius: 14px
}

    .pnotif-item.unread[b-438xe0hsyq] {
        background: color-mix(in srgb,var(--pub-accent) 6%,var(--pub-surface))
    }

/* Aviso que leva a algum lugar e um botao: precisa herdar a tipografia da lista
   (senao vem com a fonte do user agent) e alinhar o texto a esquerda. */
.pnotif-item.com-link[b-438xe0hsyq] {
    width: 100%;
    align-items: center;
    background: var(--pub-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer
}

    .pnotif-item.com-link:hover[b-438xe0hsyq] {
        border-color: var(--pub-accent)
    }

    .pnotif-item.com-link > div[b-438xe0hsyq] {
        flex: 1;
        min-width: 0
    }

.pnotif-ir[b-438xe0hsyq] {
    flex: 0 0 auto;
    color: var(--pub-muted);
    font-size: 12px
}

.pnotif-dot[b-438xe0hsyq] {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--pub-border)
}

.pnotif-item.unread .pnotif-dot[b-438xe0hsyq] {
    background: var(--pub-accent)
}

.pnotif-item strong[b-438xe0hsyq] {
    font-size: 14px
}

.pnotif-item p[b-438xe0hsyq] {
    margin: 4px 0 6px;
    font-size: 13px;
    color: var(--pub-muted);
    line-height: 1.5
}

.pnotif-item time[b-438xe0hsyq] {
    font-size: 11px;
    color: var(--pub-muted)
}

.pnotif-foot[b-438xe0hsyq] {
    padding: 12px 20px max(14px,env(safe-area-inset-bottom));
    border-top: 1px solid var(--pub-border);
    text-align: center
}

    .pnotif-foot button[b-438xe0hsyq] {
        border: 0;
        background: transparent;
        color: var(--pub-muted);
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        padding: 6px
    }

        .pnotif-foot button:hover[b-438xe0hsyq] {
            color: var(--pub-danger)
        }

@keyframes pnotif-fade-b-438xe0hsyq {
    from { opacity: 0 }
}

@keyframes pnotif-slide-b-438xe0hsyq {
    from { transform: translateX(100%) }
}

@media (max-width:600px) {
    .pnotif[b-438xe0hsyq] {
        width: 100%
    }
}

@media (prefers-reduced-motion:reduce) {
    .pnotif[b-438xe0hsyq], .pnotif-backdrop[b-438xe0hsyq] {
        animation: none
    }
}
/* /Features/Public/Components/PublicProximosAgendamentos.razor.rz.scp.css */
/* Faixa de proximos agendamentos. As variaveis --pub-* vem do .public-page
   (tema da empresa e dark mode), herdadas pelo DOM. */
.upcoming[b-qkn8lw8p31] {
    padding-top: 34px
}

.upcoming-head[b-qkn8lw8p31] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px
}

.upcoming-eyebrow[b-qkn8lw8p31] {
    display: block;
    color: var(--pub-accent-dark);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .16em;
    margin-bottom: 6px
}

.upcoming-head h2[b-qkn8lw8p31] {
    font: 800 clamp(22px,2.4vw,28px)/1.15 var(--pub-display);
    letter-spacing: -.03em;
    margin: 0
}

.upcoming-all[b-qkn8lw8p31] {
    color: var(--pub-accent-dark);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap
}

    .upcoming-all:hover[b-qkn8lw8p31] {
        text-decoration: underline
    }

    .upcoming-all span[b-qkn8lw8p31] {
        margin-left: 4px
    }

.upcoming-empty[b-qkn8lw8p31] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 18px;
    border: 1px dashed var(--pub-border);
    border-radius: 16px;
    color: var(--pub-muted)
}

.upcoming-list[b-qkn8lw8p31] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(300px,1fr);
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px
}

.upcoming-card[b-qkn8lw8p31] {
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    gap: 12px 16px;
    min-width: 0;
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    border-radius: 20px;
    padding: 16px
}

.upcoming-when[b-qkn8lw8p31] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 10px 8px;
    border-radius: 14px;
    background: color-mix(in srgb,var(--pub-accent) 12%,var(--pub-surface));
    color: var(--pub-text);
    text-align: center
}

.upcoming-day[b-qkn8lw8p31] {
    color: var(--pub-accent-dark);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em
}

.upcoming-when strong[b-qkn8lw8p31] {
    font: 800 22px/1.15 var(--pub-display)
}

.upcoming-when small[b-qkn8lw8p31] {
    color: var(--pub-muted);
    font-size: 12px
}

.upcoming-info[b-qkn8lw8p31] {
    min-width: 0
}

    .upcoming-info h3[b-qkn8lw8p31] {
        font: 750 17px/1.25 var(--pub-display);
        margin: 6px 0 4px;
        overflow-wrap: anywhere
    }

    .upcoming-info p[b-qkn8lw8p31] {
        margin: 0;
        color: var(--pub-muted);
        font-size: 13px
    }

.upcoming-client[b-qkn8lw8p31] {
    margin-top: 2px !important;
    color: var(--pub-text) !important;
    font-weight: 650
}

.upcoming-badge[b-qkn8lw8p31] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--pub-soft);
    color: var(--pub-warn);
    font-size: 11px;
    font-weight: 800
}

    .upcoming-badge.ok[b-qkn8lw8p31] {
        background: var(--pub-success-surface);
        color: var(--pub-success)
    }

.upcoming-actions[b-qkn8lw8p31] {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px
}

.upcoming-btn[b-qkn8lw8p31] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 11px;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap
}

    .upcoming-btn.whatsapp[b-qkn8lw8p31] {
        border: 0;
        background: #1f8b45;
        color: #fff
    }

        .upcoming-btn.whatsapp:hover[b-qkn8lw8p31] {
            background: #18733a
        }

    .upcoming-btn.cancel[b-qkn8lw8p31] {
        border: 1px solid var(--pub-border);
        background: transparent;
        color: var(--pub-danger-text)
    }

        .upcoming-btn.cancel:hover[b-qkn8lw8p31] {
            border-color: var(--pub-danger);
            background: var(--pub-danger-surface)
        }

    .upcoming-btn:focus-visible[b-qkn8lw8p31], .upcoming-all:focus-visible[b-qkn8lw8p31] {
        outline: 2px solid var(--pub-accent);
        outline-offset: 2px
    }

@media (max-width:720px) {
    .upcoming[b-qkn8lw8p31] {
        padding-top: 24px
    }

    .upcoming-head[b-qkn8lw8p31] {
        align-items: start;
        flex-direction: column;
        gap: 6px
    }

    .upcoming-list[b-qkn8lw8p31] {
        grid-auto-columns: 86%
    }

    .upcoming-btn[b-qkn8lw8p31] {
        min-height: 44px
    }
}

/* Atalho da equipe para tirar horarios do ar (abre "Gerenciar horarios"). */
.upcoming-links[b-qkn8lw8p31] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.upcoming-manage[b-qkn8lw8p31] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--pub-accent);
    border-radius: 999px;
    background: color-mix(in srgb,var(--pub-accent) 12%,transparent);
    color: var(--pub-text);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap
}

    .upcoming-manage .fa-solid[b-qkn8lw8p31] {
        color: var(--pub-accent)
    }

    .upcoming-manage:hover[b-qkn8lw8p31] {
        background: color-mix(in srgb,var(--pub-accent) 22%,transparent)
    }

    .upcoming-manage:focus-visible[b-qkn8lw8p31] {
        outline: 2px solid var(--pub-accent);
        outline-offset: 2px
    }

@media (max-width:600px) {
    .upcoming-head[b-qkn8lw8p31] {
        flex-wrap: wrap;
        align-items: flex-start
    }

    .upcoming-links[b-qkn8lw8p31] {
        width: 100%;
        justify-content: space-between
    }
}
/* /Features/Public/Components/PublicTopBar.razor.rz.scp.css */
/* O `box-sizing: border-box` da pagina e escopado nela e nao alcanca este
   componente, entao as medidas declaradas abaixo (46px do botao, min-height do
   pill) so batem com o render se o guard existir aqui tambem. */
.ptop[b-jqdalj0q4k], .ptop *[b-jqdalj0q4k] {
    box-sizing: border-box
}

.ptop[b-jqdalj0q4k] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* A barra fica sobre a capa e, quando o menu/scrim abre, precisa vencer a
       navegacao sticky de categorias. */
    z-index: 930;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px max(20px,calc((100vw - 1180px)/2))
}

.ptop-left[b-jqdalj0q4k], .ptop-right[b-jqdalj0q4k] {
    display: flex;
    flex: 0 0 auto;
    gap: 9px
}

/* Pill de status ("Aberto hoje" / "Fechado hoje"). Vive nesta barra desde que
   saiu do hero-copy, entao o estilo mora aqui — o CSS isolado da pagina nao
   alcanca a marcacao deste componente. */
.open-pill[b-jqdalj0q4k] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.19);
    border-radius: 99px;
    padding: 6px 10px;
    color: #fff
}

    .open-pill i[b-jqdalj0q4k] {
        flex: 0 0 auto;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #55d282;
        box-shadow: 0 0 0 4px rgba(85,210,130,.15)
    }

/* No fluxo do flex: ocupa a faixa livre entre o menu (esquerda) e os icones
   de usuario/carrinho/notificacoes (direita), encolhendo antes de empurrar. */
.ptop-status[b-jqdalj0q4k] {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 46px;
    max-width: 340px;
    padding-inline: 14px;
    justify-content: center;
    margin: 0
}

    .ptop-status > span[b-jqdalj0q4k] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

.ptop-btn[b-jqdalj0q4k] {
    position: relative;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 14px;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .2s
}

    .ptop-btn:hover[b-jqdalj0q4k] {
        background: rgba(255,255,255,.22)
    }

.ptop-avatar[b-jqdalj0q4k], .perfil-avatar[b-jqdalj0q4k] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pub-accent);
    color: #fff;
    font: 800 12px var(--pub-display);
    letter-spacing: .02em
}

.ptop-badge[b-jqdalj0q4k] {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 99px;
    background: var(--pub-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.35)
}

/* z acima do mobile-cta (100): sem o isolation:isolate do hero, estes valores
   valem no contexto raiz, entao o scrim realmente cobre a pagina inteira. */
.ptop-scrim[b-jqdalj0q4k] {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: transparent
}

.ptop-panel[b-jqdalj0q4k] {
    position: absolute;
    z-index: 901;
    top: calc(100% + 2px);
    min-width: 230px;
    background: var(--pub-surface);
    color: var(--pub-text);
    border: 1px solid var(--pub-border);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,.22);
    padding: 10px;
    display: flex;
    flex-direction: column;
    animation: ptop-pop-b-jqdalj0q4k .18s ease
}

    .ptop-panel.menu[b-jqdalj0q4k] {
        left: max(20px,calc((100vw - 1180px)/2))
    }

    .ptop-panel.perfil-panel[b-jqdalj0q4k] {
        right: max(20px,calc((100vw - 1180px)/2));
        min-width: 260px
    }

    .ptop-panel a[b-jqdalj0q4k], .ptop-panel button[b-jqdalj0q4k] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 12px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--pub-text);
        font: inherit;
        font-weight: 600;
        font-size: 14px;
        text-decoration: none;
        text-align: left;
        cursor: pointer
    }

        .ptop-panel a:hover[b-jqdalj0q4k], .ptop-panel button:hover[b-jqdalj0q4k] {
            background: var(--pub-soft)
        }

.panel-sep[b-jqdalj0q4k] {
    height: 1px;
    background: var(--pub-border);
    margin: 8px 4px
}

.perfil-info[b-jqdalj0q4k] {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 12px 6px
}

.perfil-avatar[b-jqdalj0q4k] {
    width: 44px;
    height: 44px;
    font-size: 15px
}

.perfil-info div[b-jqdalj0q4k] {
    display: flex;
    flex-direction: column;
    min-width: 0
}

.perfil-info strong[b-jqdalj0q4k] {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.perfil-info small[b-jqdalj0q4k] {
    color: var(--pub-muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.perfil-papel[b-jqdalj0q4k] {
    margin-top: 4px;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--pub-accent);
    background: color-mix(in srgb,var(--pub-accent) 12%,transparent);
    border-radius: 99px;
    padding: 3px 8px
}

@keyframes ptop-pop-b-jqdalj0q4k {
    from { opacity: 0; transform: translateY(-6px) }
}

/* Celular: cabecalho enxuto (~44px de altura) para sobrar capa. */
@media (max-width:720px) {
    .ptop[b-jqdalj0q4k] {
        gap: 8px;
        padding: 6px 12px
    }

    .ptop-left[b-jqdalj0q4k], .ptop-right[b-jqdalj0q4k] {
        gap: 7px
    }

    .open-pill[b-jqdalj0q4k] {
        font-size: 10px;
        gap: 6px
    }

    .ptop-status[b-jqdalj0q4k] {
        min-height: 32px;
        max-width: none;
        padding-inline: 10px
    }

    .ptop-btn[b-jqdalj0q4k] {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: 14px
    }

    .ptop-avatar[b-jqdalj0q4k] {
        width: 26px;
        height: 26px;
        font-size: 10px
    }

    .ptop-badge[b-jqdalj0q4k] {
        top: -4px;
        right: -4px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 9px
    }

    .ptop-panel.menu[b-jqdalj0q4k] {
        left: 12px
    }

    .ptop-panel.perfil-panel[b-jqdalj0q4k] {
        right: 12px
    }
}

/* Celular de tela curta (retrato): o pill afina junto com o resto do topo. */
@media (max-width:720px) and (max-height:650px) and (orientation:portrait) {
    .open-pill[b-jqdalj0q4k] {
        padding: 4px 8px;
        font-size: 9px
    }

    .ptop-status[b-jqdalj0q4k] {
        min-height: 30px;
        padding-inline: 9px
    }
}

@media (prefers-reduced-motion:reduce) {
    .ptop-panel[b-jqdalj0q4k] {
        animation: none
    }
}
/* /Features/Public/Configuracoes/ConfiguracoesAssinaturasSecao.razor.rz.scp.css */
/* Secao Assinaturas: so o que nao existe nos estilos cfg-* globais
   (miniatura/icone do plano e o botao do estado vazio). */

.plano-miniatura[b-w8h3fo3k1t],
.plano-icone[b-w8h3fo3k1t] {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--pub-soft)
}

.plano-icone[b-w8h3fo3k1t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pub-accent-dark);
    font-size: 16px
}

.assinaturas-vazio-acao[b-w8h3fo3k1t] {
    margin-top: 14px
}
/* /Features/Public/Configuracoes/ConfiguracoesClientesSecao.razor.rz.scp.css */
/* Secao Clientes: so o que nao vem dos estilos cfg-* globais (public-admin.css). */

.cfg-clientes-resumo[b-tgbke5ev2v] {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr);
    align-items: center;
    gap: 12px
}

    .cfg-clientes-resumo strong[b-tgbke5ev2v] {
        display: block;
        font-size: 17px;
        font-weight: 800
    }

    .cfg-clientes-resumo small[b-tgbke5ev2v] {
        display: block;
        margin-top: 2px;
        color: var(--pub-muted);
        font-size: 12px;
        line-height: 1.4
    }

.cfg-clientes-icone[b-tgbke5ev2v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: color-mix(in srgb,var(--pub-accent) 13%,transparent);
    color: var(--pub-accent-dark);
    font-size: 17px
}

/* Na lista a inicial e menor que no cartao da equipe. */
.cfg-item .cfg-clientes-avatar[b-tgbke5ev2v] {
    width: 40px;
    height: 40px;
    font-size: 14px
}

.cfg-clientes-regras[b-tgbke5ev2v] {
    margin-bottom: 12px
}

.cfg-clientes-ajustar[b-tgbke5ev2v] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pub-accent-dark);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none
}

    .cfg-clientes-ajustar:hover[b-tgbke5ev2v] {
        text-decoration: underline
    }
/* /Features/Public/Configuracoes/ConfiguracoesIntegracoesSecao.razor.rz.scp.css */
/* Secao Integracoes: so o que nao existe nos estilos globais cfg-* (texto de
   introducao, cabecalho do detalhe, abas com contagem e listas de registros). */

.int-intro[b-uhyd9ja0wc] {
    margin: 0;
    color: var(--pub-muted);
    font-size: 14px;
    line-height: 1.5
}

.int-voltar[b-uhyd9ja0wc] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    min-height: 40px;
    padding: 8px 14px 8px 10px;
    border: 1px solid var(--pub-border);
    border-radius: 999px;
    background: transparent;
    color: var(--pub-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer
}

    .int-voltar:hover[b-uhyd9ja0wc] {
        color: var(--pub-text);
        border-color: var(--pub-accent)
    }

.int-status.ativa[b-uhyd9ja0wc] {
    background: var(--pub-success-surface);
    color: var(--pub-success)
}

.int-status.encerrada[b-uhyd9ja0wc] {
    background: color-mix(in srgb,var(--pub-danger) 12%,transparent);
    color: var(--pub-danger)
}

.int-status-alerta[b-uhyd9ja0wc] {
    margin-left: 6px;
    background: color-mix(in srgb,var(--pub-warn) 14%,transparent);
    color: var(--pub-warn)
}

.int-cabecalho .cfg-card-head[b-uhyd9ja0wc] {
    align-items: flex-start
}

.int-cabecalho-acoes[b-uhyd9ja0wc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px
}

.int-switch[b-uhyd9ja0wc] {
    margin: 0
}

.int-cabecalho-botoes[b-uhyd9ja0wc] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

    .int-cabecalho-botoes .pbtn[b-uhyd9ja0wc] {
        flex: 1 1 auto
    }

.int-abas[b-uhyd9ja0wc] {
    margin-bottom: 0
}

.int-nova[b-uhyd9ja0wc] {
    flex: 0 0 auto
}

.cfg-icone-btn.int-abrir[b-uhyd9ja0wc] {
    width: auto;
    padding: 0 14px;
    font: inherit;
    font-size: 12px;
    font-weight: 800
}

.int-registros[b-uhyd9ja0wc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none
}

    .int-registros li[b-uhyd9ja0wc] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 10px 12px;
        border: 1px solid var(--pub-border);
        border-radius: 12px;
        background: var(--pub-soft)
    }

    .int-registros strong[b-uhyd9ja0wc] {
        font-size: 13px
    }

    .int-registros span[b-uhyd9ja0wc],
    .int-registros small[b-uhyd9ja0wc] {
        color: var(--pub-muted);
        font-size: 12px;
        overflow-wrap: anywhere
    }

@media (min-width: 720px) {
    .int-cabecalho-acoes[b-uhyd9ja0wc] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between
    }

    .int-cabecalho-botoes .pbtn[b-uhyd9ja0wc] {
        flex: 0 0 auto
    }
}
/* /Features/Public/Configuracoes/ConfiguracoesPermissoesSecao.razor.rz.scp.css */
/* Secao Permissoes: explicacao dos dois papeis e o seletor de papel por
   pessoa. Cartoes, lista, badges e avisos vem dos estilos cfg-* globais. */

.perm-papeis[b-tptoww4rtv] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px
}

.perm-explica[b-tptoww4rtv] {
    padding: 14px;
    border: 1px solid var(--pub-border);
    border-radius: 14px;
    background: var(--pub-soft)
}

    .perm-explica strong[b-tptoww4rtv] {
        display: block;
        margin-top: 8px;
        font-size: 14px
    }

    .perm-explica ul[b-tptoww4rtv] {
        margin: 8px 0 0;
        padding-left: 18px;
        color: var(--pub-muted);
        font-size: 13px;
        line-height: 1.45
    }

    .perm-explica li + li[b-tptoww4rtv] {
        margin-top: 4px
    }

.cfg-item .perm-avatar[b-tptoww4rtv] {
    width: 44px;
    height: 44px;
    font-size: 15px
}

.perm-voce[b-tptoww4rtv] {
    margin-left: 6px;
    color: var(--pub-muted);
    font-style: normal;
    font-size: 12px;
    font-weight: 600
}

.cfg-item-texto small .cfg-badge[b-tptoww4rtv] {
    margin-right: 8px;
    vertical-align: middle
}

.perm-cargo[b-tptoww4rtv] {
    vertical-align: middle
}

.perm-papel[b-tptoww4rtv] {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--pub-border);
    border-radius: 999px;
    background: var(--pub-soft)
}

    .perm-papel button[b-tptoww4rtv] {
        min-height: 34px;
        padding: 6px 12px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--pub-muted);
        font: inherit;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer
    }

        .perm-papel button.ativo[b-tptoww4rtv] {
            background: var(--pub-accent);
            color: #fff
        }

        .perm-papel button:disabled[b-tptoww4rtv] {
            opacity: .55;
            cursor: not-allowed
        }

        .perm-papel button:focus-visible[b-tptoww4rtv] {
            outline: 2px solid var(--pub-accent);
            outline-offset: 2px
        }

@media (min-width: 600px) {
    .perm-papeis[b-tptoww4rtv] {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}
/* /Features/Public/Configuracoes/ConfiguracoesProdutosSecao.razor.rz.scp.css */
/* Secao Produtos: so o que nao existe nos estilos cfg-* globais (foto do
   item, controle de estoque e avisos de estoque). */

.cfg-produto-foto[b-6ghggu5594] {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--pub-soft)
}

.cfg-produto-sem-foto[b-6ghggu5594] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pub-accent-dark);
    font-size: 18px
}

.cfg-item-status.cfg-estoque-alerta[b-6ghggu5594] {
    margin-left: 6px;
    background: var(--pub-danger-surface);
    color: var(--pub-danger-text)
}

.cfg-item-status.cfg-estoque-aviso[b-6ghggu5594] {
    margin-left: 6px;
    background: color-mix(in srgb,var(--pub-warn) 14%,transparent);
    color: var(--pub-warn)
}

.cfg-produto-estoque[b-6ghggu5594] {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.cfg-estoque-rotulo[b-6ghggu5594] {
    margin-right: 2px;
    color: var(--pub-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em
}

.cfg-icone-btn.cfg-estoque-btn[b-6ghggu5594] {
    width: 34px;
    height: 34px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1
}

.cfg-estoque-qtd[b-6ghggu5594] {
    min-width: 30px;
    text-align: center;
    font-size: 15px;
    font-weight: 800
}

.cfg-estoque-ajustar[b-6ghggu5594] {
    padding: 6px 8px;
    border: 0;
    background: transparent;
    color: var(--pub-accent-dark);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer
}

    .cfg-estoque-ajustar:hover[b-6ghggu5594] {
        text-decoration: underline
    }

    .cfg-estoque-ajustar:disabled[b-6ghggu5594] {
        opacity: .45;
        cursor: not-allowed
    }

.cfg-vazio-acao[b-6ghggu5594] {
    margin-top: 14px
}

@media (max-width: 600px) {
    /* No celular o controle de estoque ganha a linha inteira, abaixo do nome. */
    .cfg-produto-estoque[b-6ghggu5594] {
        flex: 1 1 100%;
        order: 3
    }

    .cfg-item-acoes[b-6ghggu5594] {
        order: 2
    }
}
/* /Features/Public/Configuracoes/ConfiguracoesSegurancaSecao.razor.rz.scp.css */
/* Secao Seguranca das configuracoes. Os cartoes, avisos e botoes vem dos
   estilos globais cfg-*/pbtn (public-admin.css); aqui so o que e proprio. */

.seg-dados[b-sg0meztsww] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 16px;
    margin: 0 0 14px;
    padding: 14px;
    border-radius: 12px;
    background: var(--pub-soft)
}

    .seg-dados div[b-sg0meztsww] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0
    }

    .seg-dados dt[b-sg0meztsww] {
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .09em;
        color: var(--pub-muted)
    }

    .seg-dados dd[b-sg0meztsww] {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        overflow-wrap: anywhere
    }

.seg-acoes[b-sg0meztsww] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

    .seg-acoes .pbtn[b-sg0meztsww] {
        flex: 1 1 200px;
        text-decoration: none
    }

.seg-gerentes[b-sg0meztsww] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 14px
}

    .seg-gerentes span[b-sg0meztsww] {
        margin-top: 3px;
        color: var(--pub-accent)
    }

.seg-link[b-sg0meztsww] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: var(--pub-accent-dark);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none
}

    .seg-link:hover[b-sg0meztsww] {
        text-decoration: underline
    }

@media (min-width: 600px) {
    .seg-dados[b-sg0meztsww] {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}
/* /Features/Public/Configuracoes/ConfiguracoesVitrineSecao.razor.rz.scp.css */
/* Secao Vitrine das configuracoes: resumos do que o cliente ve e atalhos
   para o editor. Os cartoes, campos e estados vem dos estilos cfg-* globais
   (public-admin.css); aqui ficam so os pedacos proprios desta secao. */

.vit-url strong[b-3znzsx1zdm] {
    overflow-wrap: anywhere
}

.vit-acoes[b-3znzsx1zdm] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px
}

    .vit-acoes .pbtn[b-3znzsx1zdm] {
        flex: 1 1 160px;
        text-decoration: none
    }

.vit-editar[b-3znzsx1zdm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid var(--pub-border);
    border-radius: 999px;
    background: transparent;
    color: var(--pub-accent-dark);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer
}

    .vit-editar:hover[b-3znzsx1zdm] {
        border-color: var(--pub-accent)
    }

.vit-texto[b-3znzsx1zdm] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere
}

.vit-vazio[b-3znzsx1zdm] {
    color: var(--pub-muted)
}

.vit-chips[b-3znzsx1zdm] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px
}

.vit-meta[b-3znzsx1zdm] {
    margin: 10px 0 0;
    color: var(--pub-muted);
    font-size: 13px
}

dl.vit-detalhe[b-3znzsx1zdm] {
    margin: 0
}

.vit-horarios[b-3znzsx1zdm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none
}

    .vit-horarios li[b-3znzsx1zdm] {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 12px;
        border-radius: 10px;
        background: var(--pub-soft);
        font-size: 14px
    }

        .vit-horarios li strong[b-3znzsx1zdm] {
            font-weight: 800
        }

        .vit-horarios li.fechado span[b-3znzsx1zdm] {
            color: var(--pub-muted)
        }

.vit-imagens[b-3znzsx1zdm] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.vit-imagem[b-3znzsx1zdm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--pub-muted);
    font-size: 12px;
    font-weight: 700
}

    .vit-imagem.logo[b-3znzsx1zdm] {
        flex: 0 0 96px
    }

    .vit-imagem.capa[b-3znzsx1zdm] {
        flex: 1 1 200px
    }

    .vit-imagem img[b-3znzsx1zdm],
    .vit-imagem-vazia[b-3znzsx1zdm] {
        width: 96px;
        height: 96px;
        border: 1px solid var(--pub-border);
        border-radius: 16px;
        background: var(--pub-soft);
        object-fit: cover
    }

    .vit-imagem.capa img[b-3znzsx1zdm],
    .vit-imagem.capa .vit-imagem-vazia[b-3znzsx1zdm] {
        width: 100%
    }

.vit-imagem-vazia[b-3znzsx1zdm] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--pub-muted);
    font-size: 12px;
    font-weight: 700
}

    .vit-imagem-vazia > span[b-3znzsx1zdm] {
        font-size: 20px
    }

.vit-imagem-nota[b-3znzsx1zdm] {
    margin: 10px 0 0;
    color: var(--pub-muted);
    font-size: 12px;
    line-height: 1.4
}

.vit-link-identidade[b-3znzsx1zdm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--pub-accent-dark);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none
}

    .vit-link-identidade:hover[b-3znzsx1zdm] {
        text-decoration: underline
    }

    .vit-link-identidade > span:last-child[b-3znzsx1zdm] {
        font-size: 11px;
        color: var(--pub-muted)
    }
/* /Features/Public/Configuracoes/IntegracaoChaveModal.razor.rz.scp.css */
.chave-acoes[b-xsrsfntpwg] {
    display: flex;
    gap: 14px;
    margin-top: 6px
}

.chave-link[b-xsrsfntpwg] {
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--pub-accent-dark);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer
}

    .chave-link:hover[b-xsrsfntpwg] {
        text-decoration: underline
    }

    .chave-link:disabled[b-xsrsfntpwg] {
        opacity: .45;
        cursor: not-allowed
    }

.pcheck-list.chave-escopos[b-xsrsfntpwg] {
    max-height: 260px
}
/* /Features/Public/Configuracoes/IntegracaoSegredoModal.razor.rz.scp.css */
.segredo-intro[b-u6rji6z7j8] {
    margin: 0 0 14px;
    color: var(--pub-muted);
    font-size: 13px;
    line-height: 1.5
}

.segredo-lista[b-u6rji6z7j8] {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.segredo-item[b-u6rji6z7j8] {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.segredo-rotulo[b-u6rji6z7j8] {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pub-muted)
}

.segredo-linha[b-u6rji6z7j8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px
}

.segredo-valor[b-u6rji6z7j8] {
    flex: 1 1 200px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--pub-border);
    border-radius: 10px;
    background: var(--pub-soft);
    color: var(--pub-text);
    font-size: 13px;
    overflow-wrap: anywhere;
    user-select: all
}

.segredo-copiar[b-u6rji6z7j8] {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 14px
}

.segredo-aviso[b-u6rji6z7j8] {
    margin-top: 14px
}
/* /Features/Public/MeusPedidosPublicPage.razor.rz.scp.css */
/* ==========================================================================
   Tela "Meus pedidos" da vitrine publica.
   Mobile-first: o layout base e o de celular (cards empilhados, rotulos
   visiveis) e a media query de 900px o converte em linhas de tabela.
   Os tokens --pub-* vem de css/public-admin.css (.public-page).
   ========================================================================== */

.mp-page[b-qw1e3q79ya] {
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: 40px
}

.mp-sr[b-qw1e3q79ya] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

/* ---------------------------------------------------------------- cabecalho */

.mp-head[b-qw1e3q79ya] {
    background: var(--pub-surface);
    border-bottom: 1px solid var(--pub-border)
}

.mp-head-inner[b-qw1e3q79ya] {
    width: min(1120px,calc(100% - 32px));
    margin-inline: auto;
    padding: 18px 0 22px;
    display: flex;
    flex-direction: column;
    gap: 14px
}

.mp-back[b-qw1e3q79ya] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    max-width: 100%;
    padding: 8px 14px 8px 11px;
    border: 1px solid var(--pub-border);
    border-radius: 999px;
    color: var(--pub-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700
}

    .mp-back span:last-child[b-qw1e3q79ya] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .mp-back:hover[b-qw1e3q79ya] {
        color: var(--pub-text);
        border-color: var(--pub-accent)
    }

.mp-eyebrow[b-qw1e3q79ya] {
    display: block;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: 11px;
    font-weight: 800;
    color: var(--pub-accent)
}

.mp-head-title h1[b-qw1e3q79ya] {
    margin: 5px 0 0;
    font: 800 clamp(24px,5vw,34px)/1.15 var(--pub-display)
}

.mp-head-title p[b-qw1e3q79ya] {
    margin: 6px 0 0;
    color: var(--pub-muted);
    font-size: 14px
}

.mp-main[b-qw1e3q79ya] {
    width: min(1120px,calc(100% - 32px));
    margin-inline: auto;
    padding-top: 20px
}

/* ------------------------------------------------------------------ filtros */

.mp-filtros[b-qw1e3q79ya] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px
}

.mp-busca[b-qw1e3q79ya] {
    position: relative;
    display: flex;
    align-items: center
}

    .mp-busca > span[b-qw1e3q79ya] {
        position: absolute;
        left: 15px;
        color: var(--pub-muted);
        font-size: 14px;
        pointer-events: none
    }

    .mp-busca input[b-qw1e3q79ya] {
        width: 100%;
        padding: 13px 16px 13px 40px;
        border: 1px solid var(--pub-border);
        border-radius: 12px;
        background: var(--pub-surface);
        color: var(--pub-text);
        font: inherit;
        outline: none
    }

        .mp-busca input:focus[b-qw1e3q79ya] {
            border-color: var(--pub-accent);
            box-shadow: 0 0 0 3px color-mix(in srgb,var(--pub-accent) 13%,transparent)
        }

.mp-filtros-linha[b-qw1e3q79ya] {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}

.mp-campo[b-qw1e3q79ya] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--pub-muted)
}

    .mp-campo select[b-qw1e3q79ya],
    .mp-campo input[b-qw1e3q79ya] {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--pub-border);
        border-radius: 10px;
        background: var(--pub-surface);
        color: var(--pub-text);
        font: 400 14px/1.4 inherit;
        outline: none
    }

        .mp-campo select:focus[b-qw1e3q79ya],
        .mp-campo input:focus[b-qw1e3q79ya] {
            border-color: var(--pub-accent)
        }

.mp-limpar[b-qw1e3q79ya] {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px dashed var(--pub-border);
    border-radius: 10px;
    background: transparent;
    color: var(--pub-muted);
    font: 700 13px/1 inherit;
    cursor: pointer
}

    .mp-limpar:hover[b-qw1e3q79ya] {
        color: var(--pub-text);
        border-color: var(--pub-accent)
    }

.mp-contagem[b-qw1e3q79ya] {
    margin: 0 0 12px;
    color: var(--pub-muted);
    font-size: 13px;
    font-weight: 600
}

/* --------------------------------------------------- carregando / vazio / erro */

.mp-skeletons[b-qw1e3q79ya] {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.mp-skeleton[b-qw1e3q79ya] {
    height: 116px;
    border-radius: 16px;
    background: linear-gradient(90deg,var(--pub-soft) 25%,color-mix(in srgb,var(--pub-soft) 60%,var(--pub-surface)) 50%,var(--pub-soft) 75%);
    background-size: 400% 100%;
    animation: mp-shimmer-b-qw1e3q79ya 1.4s ease-in-out infinite
}

@keyframes mp-shimmer-b-qw1e3q79ya {
    0% { background-position: 100% 0 }
    100% { background-position: 0 0 }
}

.mp-state[b-qw1e3q79ya] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 46px 22px;
    border: 1px solid var(--pub-border);
    border-radius: 18px;
    background: var(--pub-surface);
    text-align: center
}

    .mp-state > span:first-child[b-qw1e3q79ya] {
        font-size: 30px;
        color: var(--pub-accent)
    }

    .mp-state h2[b-qw1e3q79ya] {
        margin: 4px 0 0;
        font: 800 19px/1.25 var(--pub-display)
    }

    .mp-state p[b-qw1e3q79ya] {
        margin: 0;
        max-width: 46ch;
        color: var(--pub-muted);
        font-size: 14px
    }

.mp-state-acao[b-qw1e3q79ya] {
    margin-top: 10px;
    text-decoration: none
}

/* -------------------------------------------------------------------- lista */

.mp-lista[b-qw1e3q79ya] {
    display: flex;
    flex-direction: column;
    gap: 12px
}

/* Cabecalho de colunas so existe no layout de tabela (>=900px). */
.mp-cabecalho[b-qw1e3q79ya] {
    display: none
}

.mp-card[b-qw1e3q79ya] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 14px;
    padding: 16px;
    border: 1px solid var(--pub-border);
    border-radius: 16px;
    background: var(--pub-surface)
}

.mp-cel[b-qw1e3q79ya] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center
}

.mp-rotulo[b-qw1e3q79ya] {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 10px;
    font-weight: 800;
    color: var(--pub-muted)
}

.mp-cel-pedido strong[b-qw1e3q79ya] {
    font: 800 15px/1.2 var(--pub-display)
}

.mp-cel-pedido small[b-qw1e3q79ya] {
    color: var(--pub-muted);
    font-size: 12px
}

.mp-cel-status[b-qw1e3q79ya] {
    align-items: flex-end;
    text-align: right
}

.mp-cel-cliente[b-qw1e3q79ya],
.mp-cel-itens[b-qw1e3q79ya] {
    grid-column: 1 / -1
}

.mp-cel-itens ul[b-qw1e3q79ya] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.mp-item-nome[b-qw1e3q79ya] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mp-item-agenda[b-qw1e3q79ya] {
    display: block;
    color: var(--pub-muted);
    font-size: 12px
}

    .mp-item-agenda span[class^=fa-][b-qw1e3q79ya] {
        margin-right: 5px
    }

.mp-item-mais[b-qw1e3q79ya] {
    color: var(--pub-muted);
    font-size: 12px;
    font-weight: 700
}

.mp-badge[b-qw1e3q79ya] {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap
}

    .mp-badge.pendente[b-qw1e3q79ya] {
        background: color-mix(in srgb,var(--pub-warn) 16%,transparent);
        color: var(--pub-warn)
    }

    .mp-badge.confirmado[b-qw1e3q79ya] {
        background: color-mix(in srgb,var(--pub-accent) 16%,transparent);
        color: var(--pub-accent-dark)
    }

    .mp-badge.concluido[b-qw1e3q79ya] {
        background: var(--pub-success-surface);
        color: var(--pub-success)
    }

    .mp-badge.cancelado[b-qw1e3q79ya] {
        background: var(--pub-danger-surface);
        color: var(--pub-danger-text)
    }

.mp-tipo[b-qw1e3q79ya] {
    color: var(--pub-muted);
    font-size: 12px
}

/* No celular o total fica na mesma linha do rotulo: uma linha a menos por
   card, sem perder o rotulo que orienta a leitura. */
.mp-cel-total[b-qw1e3q79ya] {
    flex-direction: row;
    align-items: baseline;
    gap: 8px
}

    .mp-cel-total strong[b-qw1e3q79ya] {
        font: 800 17px/1.2 var(--pub-display)
    }

.mp-cel-acoes[b-qw1e3q79ya] {
    align-items: flex-end;
    justify-content: center
}

.mp-detalhes[b-qw1e3q79ya] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--pub-border);
    border-radius: 10px;
    background: transparent;
    color: var(--pub-text);
    font: 700 13px/1 inherit;
    cursor: pointer
}

    .mp-detalhes:hover[b-qw1e3q79ya] {
        border-color: var(--pub-accent);
        color: var(--pub-accent-dark)
    }

/* --------------------------------------------------------------- paginacao */

.mp-paginacao[b-qw1e3q79ya] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
    color: var(--pub-muted);
    font-size: 13px;
    font-weight: 700
}

    .mp-paginacao button[b-qw1e3q79ya] {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 10px 14px;
        border: 1px solid var(--pub-border);
        border-radius: 10px;
        background: var(--pub-surface);
        color: var(--pub-text);
        font: 700 13px/1 inherit;
        cursor: pointer
    }

        .mp-paginacao button:disabled[b-qw1e3q79ya] {
            opacity: .4;
            cursor: not-allowed
        }

/* ------------------------------------------------------------------ drawer */

.mp-drawer-backdrop[b-qw1e3q79ya] {
    position: fixed;
    inset: 0;
    background: rgba(12,16,20,.55);
    backdrop-filter: blur(4px);
    z-index: 1000
}

.mp-drawer[b-qw1e3q79ya] {
    position: fixed;
    z-index: 1001;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(460px,100%);
    background: var(--pub-surface);
    color: var(--pub-text);
    box-shadow: -20px 0 60px rgba(0,0,0,.22);
    display: flex;
    flex-direction: column;
    animation: mp-slide-b-qw1e3q79ya .28s cubic-bezier(.2,.8,.2,1)
}

@keyframes mp-slide-b-qw1e3q79ya {
    from { transform: translateX(100%) }
    to { transform: none }
}

.mp-drawer-head[b-qw1e3q79ya] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 22px 16px;
    border-bottom: 1px solid var(--pub-border)
}

    .mp-drawer-head h2[b-qw1e3q79ya] {
        margin: 4px 0 0;
        font: 800 21px/1.2 var(--pub-display)
    }

    .mp-drawer-head small[b-qw1e3q79ya] {
        display: block;
        margin-top: 3px;
        color: var(--pub-muted);
        font-size: 12px
    }

.mp-drawer-close[b-qw1e3q79ya] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1px solid var(--pub-border);
    border-radius: 50%;
    background: transparent;
    color: var(--pub-text);
    font-size: 16px;
    cursor: pointer
}

.mp-drawer-body[b-qw1e3q79ya] {
    flex: 1;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 18px 22px 24px
}

.mp-drawer-resumo[b-qw1e3q79ya] {
    display: flex;
    align-items: center;
    gap: 10px
}

.mp-drawer-sync[b-qw1e3q79ya] {
    color: var(--pub-muted);
    font-size: 12px
}

.mp-drawer-sub[b-qw1e3q79ya] {
    margin: 22px 0 10px;
    font: 800 13px/1 var(--pub-display);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--pub-muted)
}

.mp-dados[b-qw1e3q79ya] {
    margin: 16px 0 0;
    display: grid;
    gap: 2px
}

    .mp-dados dt[b-qw1e3q79ya] {
        font-size: 12px;
        font-weight: 700;
        color: var(--pub-muted)
    }

    .mp-dados dd[b-qw1e3q79ya] {
        margin: 0;
        font-size: 15px;
        font-weight: 600
    }

.mp-drawer-itens[b-qw1e3q79ya] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px
}

    .mp-drawer-itens li[b-qw1e3q79ya] {
        padding: 13px 14px;
        border: 1px solid var(--pub-border);
        border-radius: 12px;
        background: var(--pub-soft)
    }

.mp-drawer-item-topo[b-qw1e3q79ya] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px
}

    .mp-drawer-item-topo strong[b-qw1e3q79ya] {
        font-size: 15px
    }

    .mp-drawer-item-topo span[b-qw1e3q79ya] {
        font-weight: 800;
        white-space: nowrap
    }

.mp-drawer-item-meta[b-qw1e3q79ya],
.mp-drawer-item-agenda[b-qw1e3q79ya],
.mp-drawer-item-obs[b-qw1e3q79ya] {
    display: block;
    margin-top: 5px;
    color: var(--pub-muted);
    font-size: 12px
}

.mp-drawer-item-agenda span[class^=fa-][b-qw1e3q79ya] {
    margin-right: 5px
}

.mp-drawer-item-agenda span + span[class^=fa-][b-qw1e3q79ya] {
    margin-left: 10px
}

.mp-drawer-obs[b-qw1e3q79ya] {
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--pub-soft);
    font-size: 14px
}

.mp-totais[b-qw1e3q79ya] {
    margin: 22px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--pub-border);
    display: flex;
    flex-direction: column;
    gap: 7px
}

    .mp-totais > div[b-qw1e3q79ya] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px
    }

    .mp-totais dt[b-qw1e3q79ya] {
        color: var(--pub-muted);
        font-size: 13px
    }

    .mp-totais dd[b-qw1e3q79ya] {
        margin: 0;
        font-size: 14px;
        font-weight: 700
    }

.mp-totais-final dt[b-qw1e3q79ya] {
    color: var(--pub-text) !important;
    font-weight: 800
}

.mp-totais-final dd[b-qw1e3q79ya] {
    font: 800 19px/1 var(--pub-display)
}

.mp-drawer-foot[b-qw1e3q79ya] {
    padding: 16px 22px;
    border-top: 1px solid var(--pub-border);
    display: flex;
    flex-direction: column;
    gap: 12px
}

.mp-drawer-nota[b-qw1e3q79ya] {
    margin: 0;
    color: var(--pub-muted);
    font-size: 13px
}

    .mp-drawer-nota span[class^=fa-][b-qw1e3q79ya] {
        margin-right: 7px;
        color: var(--pub-accent)
    }

.mp-drawer-contato[b-qw1e3q79ya] {
    text-decoration: none;
    justify-content: center
}

/* ------------------------------------------------------- layout de tabela */

@media (min-width: 900px) {
    .mp-head-inner[b-qw1e3q79ya] {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        padding: 26px 0 28px
    }

    .mp-back[b-qw1e3q79ya] {
        order: 2
    }

    .mp-filtros[b-qw1e3q79ya] {
        flex-direction: row;
        align-items: flex-end;
        flex-wrap: wrap;
        gap: 12px
    }

    .mp-busca[b-qw1e3q79ya] {
        flex: 1 1 260px
    }

    .mp-filtros-linha[b-qw1e3q79ya] {
        display: flex;
        align-items: flex-end;
        flex-wrap: wrap;
        gap: 12px
    }

    .mp-campo[b-qw1e3q79ya] {
        flex: 0 0 auto;
        width: 150px
    }

    .mp-limpar[b-qw1e3q79ya] {
        width: auto
    }

    .mp-cabecalho[b-qw1e3q79ya],
    .mp-card[b-qw1e3q79ya] {
        display: grid;
        grid-template-columns: minmax(130px,.85fr) minmax(0,2fr) 130px 120px 120px;
        align-items: center;
        gap: 16px
    }

        .mp-cabecalho.com-cliente[b-qw1e3q79ya],
        .mp-card.com-cliente[b-qw1e3q79ya] {
            grid-template-columns: minmax(130px,.85fr) minmax(0,1fr) minmax(0,1.6fr) 130px 120px 120px
        }

    .mp-cabecalho[b-qw1e3q79ya] {
        /* Borda transparente + mesmo padding do card: sem isso a borda de 1px
           do card desloca as colunas em relacao ao cabecalho. */
        padding: 0 16px 8px;
        border: 1px solid transparent;
        border-bottom: 0;
        text-transform: uppercase;
        letter-spacing: .1em;
        font-size: 10px;
        font-weight: 800;
        color: var(--pub-muted)
    }

    .mp-rotulo[b-qw1e3q79ya] {
        display: none
    }

    .mp-cel-cliente[b-qw1e3q79ya],
    .mp-cel-itens[b-qw1e3q79ya] {
        grid-column: auto
    }

    .mp-cel-status[b-qw1e3q79ya] {
        align-items: flex-start;
        text-align: left
    }

    .mp-cel-total[b-qw1e3q79ya] {
        flex-direction: column;
        align-items: flex-end;
        text-align: right
    }
}
/* /Features/Public/PublicEmpresaPage.razor.rz.scp.css */
.public-page[b-mm2i9giy3k] {
    --pub-accent: var(--cor-acento,#c57b48);
    --pub-accent-dark: var(--cor-secundaria,#9f5f36);
    --pub-bg: var(--cor-fundo,#f6f5f2);
    --pub-surface: var(--cor-superficie,#fff);
    --pub-soft: var(--cor-superficie-2,#f1efeb);
    --pub-text: var(--cor-texto,#17201d);
    --pub-muted: var(--cor-texto-suave,#69716e);
    --pub-border: var(--cor-borda,rgba(23,32,29,.12));
    --pub-display: var(--fonte-titulo,"DM Sans","Inter",sans-serif);
    /* Cores funcionais tematizadas (contraste AA nos dois temas).
       Os componentes/modais da area autenticada usam estas vars em vez de hex
       fixos, que reprovavam no dark mode. */
    --pub-danger: #c0392b;
    --pub-danger-surface: #fff0ee;
    --pub-danger-text: #a62d20;
    --pub-warn: #8a5a10;
    --pub-success: #1f8b45;
    --pub-success-surface: #e2f7e8;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--pub-bg);
    color: var(--pub-text);
    font: 400 15px/1.6 var(--fonte-corpo,"Inter",sans-serif);
    transition: background .25s,color .25s
}

    .public-page[data-theme=dark][b-mm2i9giy3k] {
        --pub-bg: #101513;
        --pub-surface: #171d1a;
        --pub-soft: #202824;
        --pub-text: #f1f2ef;
        --pub-muted: #a6ada9;
        --pub-border: rgba(255,255,255,.12);
        --pub-accent: var(--cor-acento,#db9160);
        --pub-accent-dark: var(--cor-acento,#e4a47b);
        /* Tons mais claros para atingir >=4.5:1 sobre as superficies escuras. */
        --pub-danger: #e8887b;
        --pub-danger-surface: #3a201d;
        --pub-danger-text: #f0a99f;
        --pub-warn: #d9a45a;
        --pub-success: #5fbf85;
        --pub-success-surface: #16301f
    }

    .public-page *[b-mm2i9giy3k] {
        box-sizing: border-box
    }

    .public-page > main[b-mm2i9giy3k] {
        flex: 1 0 auto
    }

.page-shell[b-mm2i9giy3k] {
    width: min(1180px,calc(100% - 40px));
    margin-inline: auto
}

.site-header[b-mm2i9giy3k] {
    height: 76px;
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 0 max(24px,calc((100vw - 1180px)/2));
    background: color-mix(in srgb,var(--pub-surface) 94%,transparent);
    border-bottom: 1px solid var(--pub-border);
    position: relative;
    z-index: 20
}

.powered-brand[b-mm2i9giy3k] {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--pub-text);
    text-decoration: none;
    min-width: 230px
}

    .powered-brand > span[b-mm2i9giy3k] {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        background: var(--pub-text);
        color: var(--pub-surface);
        border-radius: 12px;
        font: 800 18px var(--pub-display)
    }

    .powered-brand div[b-mm2i9giy3k] {
        display: flex;
        flex-direction: column;
        line-height: 1.25
    }

    .powered-brand strong[b-mm2i9giy3k] {
        font: 700 14px var(--pub-display);
        white-space: nowrap
    }

    .powered-brand small[b-mm2i9giy3k] {
        font-size: 10px;
        color: var(--pub-muted);
        text-transform: uppercase;
        letter-spacing: .08em
    }

.site-header nav[b-mm2i9giy3k] {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: auto
}

    .site-header nav a[b-mm2i9giy3k] {
        color: var(--pub-muted);
        font-size: 13px;
        font-weight: 700;
        text-decoration: none
    }

        .site-header nav a:hover[b-mm2i9giy3k] {
            color: var(--pub-accent)
        }

.header-actions[b-mm2i9giy3k] {
    display: flex;
    gap: 9px
}

.round-action[b-mm2i9giy3k], .header-book[b-mm2i9giy3k] {
    height: 40px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 800
}

.round-action[b-mm2i9giy3k] {
    width: 40px;
    border: 1px solid var(--pub-border);
    background: var(--pub-surface);
    color: var(--pub-text);
    font-size: 17px
}

.header-book[b-mm2i9giy3k] {
    border: 0;
    background: var(--pub-text);
    color: var(--pub-surface);
    padding: 0 18px
}

/* Navegacao de categorias gruda no topo durante a rolagem.
   z acima de qualquer conteudo da pagina e abaixo dos modais/drawers
   (.detail-backdrop 900, drawers 1000). */
.public-sticky-head[b-mm2i9giy3k] {
    position: sticky;
    top: 0;
    z-index: 110
}

.hero[b-mm2i9giy3k] {
    position: relative;
    height: 301px;
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center 42%
    /* Sem isolation:isolate: os menus sobrepostos (PublicTopBar) precisam
       escapar do stacking do hero para cobrir a nav sticky e o mobile-cta.
       Por isso o shade usa z-index positivo (nao -1) e o conteudo fica acima. */
}

.hero-shade[b-mm2i9giy3k] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(9,14,12,.87) 0%,rgba(9,14,12,.56) 52%,rgba(9,14,12,.18) 100%);
    z-index: 1
}

.hero-content[b-mm2i9giy3k] {
    position: relative;
    z-index: 2;
    height: 100%;
    display: grid;
    grid-template-columns: 132px 1fr auto;
    align-items: end;
    gap: 28px;
    padding-bottom: 46px;
    color: #fff
}

.company-logo-wrap[b-mm2i9giy3k] {
    position: relative
}

    .company-logo-wrap img[b-mm2i9giy3k] {
        width: 132px;
        height: 132px;
        border-radius: 26px;
        object-fit: cover;
        border: 5px solid rgba(255,255,255,.9);
        box-shadow: 0 15px 35px rgba(0,0,0,.24);
        background: #fff
    }

/* .open-pill mora em PublicTopBar.razor.css: o status saiu do hero-copy e foi
   para a barra de icones, e o CSS isolado desta pagina nao alcanca aquele
   componente. */

.hero-copy h1[b-mm2i9giy3k] {
    font: 800 clamp(35px,5vw,56px)/1.05 var(--pub-display);
    letter-spacing: -.045em;
    margin: 12px 0 10px
}

.rating-line[b-mm2i9giy3k] {
    display: flex;
    align-items: center;
    gap: 10px
}

    .rating-line > a[b-mm2i9giy3k] {
        color: rgba(255,255,255,.8);
        font-size: 13px;
        text-underline-offset: 3px
    }

.stars[b-mm2i9giy3k] {
    color: #f4b740;
    letter-spacing: 1px;
    white-space: nowrap
}

.address-button[b-mm2i9giy3k] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.82);
    padding: 0;
    font: inherit;
    text-align: left;
    cursor: pointer
}

    .address-button:hover[b-mm2i9giy3k] {
        text-decoration: underline
    }

    .address-button span[b-mm2i9giy3k] {
        font-size: 20px
    }

.hero-actions[b-mm2i9giy3k] {
    display: flex;
    gap: 10px
}

.glass-action[b-mm2i9giy3k] {
    width: 84px;
    height: 76px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 16px;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(12px);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer
}

    .glass-action span[b-mm2i9giy3k] {
        font-size: 25px;
        line-height: 1
    }

    .glass-action small[b-mm2i9giy3k] {
        font-size: 10px
    }

    .glass-action.favorite span[b-mm2i9giy3k] {
        color: #ff6b74
    }

.content-nav-wrap[b-mm2i9giy3k] {
    z-index: 10;
    background: color-mix(in srgb,var(--pub-surface) 95%,transparent);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--pub-border);
    box-shadow: 0 8px 24px rgba(19,14,11,.06)
}

.content-nav[b-mm2i9giy3k] {
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.content-links[b-mm2i9giy3k] {
    display: flex;
    align-self: stretch;
    gap: 30px;
    overflow: auto
}

    .content-links a[b-mm2i9giy3k] {
        height: 100%;
        display: flex;
        align-items: center;
        color: var(--pub-muted);
        text-decoration: none;
        font-weight: 700;
        font-size: 13px;
        white-space: nowrap;
        border-bottom: 2px solid transparent
    }

        .content-links a:hover[b-mm2i9giy3k], .content-links a.active[b-mm2i9giy3k] {
            color: var(--pub-text);
            border-color: var(--pub-accent)
        }

.nav-cta[b-mm2i9giy3k] {
    border: 0;
    border-radius: 11px;
    background: var(--pub-accent);
    color: #fff;
    padding: 12px 17px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap
}

    .nav-cta span[b-mm2i9giy3k] {
        margin-left: 8px
    }

.main-grid[b-mm2i9giy3k] {
    display: grid;
    grid-template-columns: minmax(0,1fr) 330px;
    gap: 46px;
    padding-top: 62px;
    padding-bottom: 90px
}

/* A capa + a nav ficam presas no topo: a ancora precisa parar abaixo do
   conjunto todo (hero 301 + nav 70), senao a secao abre por baixo dele. */
.content-section[b-mm2i9giy3k] {
    scroll-margin-top: 386px;
    margin-bottom: 82px
}

.section-heading[b-mm2i9giy3k] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 24px
}

.eyebrow[b-mm2i9giy3k] {
    display: block;
    color: var(--pub-accent-dark);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .16em;
    margin-bottom: 7px
}

.section-heading h2[b-mm2i9giy3k], .about-card h2[b-mm2i9giy3k] {
    font: 800 clamp(27px,3vw,35px)/1.15 var(--pub-display);
    letter-spacing: -.035em;
    margin: 0
}

.result-count[b-mm2i9giy3k] {
    color: var(--pub-muted);
    font-size: 12px
}

.service-list[b-mm2i9giy3k] {
    display: flex;
    flex-direction: column;
    gap: 13px
}

.service-card[b-mm2i9giy3k] {
    display: grid;
    grid-template-columns: 132px 1fr auto;
    gap: 20px;
    align-items: center;
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    border-radius: 20px;
    padding: 13px 15px 13px 13px;
    transition: .22s
}

    .service-card:hover[b-mm2i9giy3k] {
        transform: translateY(-2px);
        box-shadow: 0 12px 35px rgba(21,27,24,.08);
        border-color: color-mix(in srgb,var(--pub-accent) 40%,var(--pub-border))
    }

    .service-card > img[b-mm2i9giy3k] {
        width: 132px;
        height: 112px;
        object-fit: cover;
        border-radius: 14px
    }

.category[b-mm2i9giy3k] {
    color: var(--pub-accent-dark);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 900
}

.service-info h3[b-mm2i9giy3k], .combo-card h3[b-mm2i9giy3k], .product-card h3[b-mm2i9giy3k], .team-card h3[b-mm2i9giy3k], .plan-card h3[b-mm2i9giy3k] {
    font: 750 19px/1.2 var(--pub-display);
    margin: 4px 0
}

.service-info p[b-mm2i9giy3k], .combo-body > p[b-mm2i9giy3k], .product-card p[b-mm2i9giy3k], .plan-card > p[b-mm2i9giy3k] {
    color: var(--pub-muted);
    font-size: 13px;
    margin: 5px 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.service-meta[b-mm2i9giy3k] {
    display: flex;
    gap: 22px;
    align-items: center
}

    .service-meta span[b-mm2i9giy3k] {
        font-size: 12px;
        color: var(--pub-muted)
    }

    .service-meta strong[b-mm2i9giy3k] {
        font-size: 15px
    }

.book-button[b-mm2i9giy3k] {
    align-self: stretch;
    min-width: 112px;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-weight: 850;
    cursor: pointer
}

.service-actions[b-mm2i9giy3k] {
    align-self: stretch;
    min-width: 118px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px
}

.plan-cart-actions[b-mm2i9giy3k] {
    display: grid;
    gap: 7px;
    margin-top: auto
}

    .book-button span[b-mm2i9giy3k] {
        display: block;
        font-size: 22px;
        color: var(--pub-accent)
    }

.combo-grid[b-mm2i9giy3k] {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px
}

.combo-card[b-mm2i9giy3k] {
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    border-radius: 22px;
    overflow: hidden
}

.combo-image[b-mm2i9giy3k] {
    height: 180px;
    background-size: cover;
    background-position: center;
    padding: 14px;
    display: flex;
    align-items: flex-start
}

    .combo-image span[b-mm2i9giy3k] {
        background: #233f33;
        color: #fff;
        border-radius: 99px;
        padding: 6px 10px;
        font-size: 10px;
        font-weight: 850
    }

.combo-body[b-mm2i9giy3k] {
    padding: 22px
}

    .combo-body ul[b-mm2i9giy3k], .plan-card ul[b-mm2i9giy3k] {
        list-style: none;
        padding: 0;
        margin: 14px 0
    }

    .combo-body li[b-mm2i9giy3k] {
        display: flex;
        justify-content: space-between;
        padding: 7px 0;
        font-size: 12px;
        border-bottom: 1px dashed var(--pub-border)
    }

        .combo-body li small[b-mm2i9giy3k] {
            color: var(--pub-muted)
        }

.combo-price[b-mm2i9giy3k] {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin: 17px 0
}

    .combo-price > span[b-mm2i9giy3k] {
        display: flex;
        flex-direction: column
    }

    .combo-price s[b-mm2i9giy3k] {
        color: var(--pub-muted);
        font-size: 11px
    }

    .combo-price strong[b-mm2i9giy3k] {
        font: 800 23px var(--pub-display)
    }

    .combo-price > small[b-mm2i9giy3k] {
        color: var(--pub-muted)
    }

.primary-wide[b-mm2i9giy3k], .outline-wide[b-mm2i9giy3k] {
    width: 100%;
    border-radius: 12px;
    padding: 13px;
    font-weight: 850;
    cursor: pointer
}

.primary-wide[b-mm2i9giy3k] {
    border: 0;
    background: var(--pub-text);
    color: var(--pub-surface)
}

    .primary-wide span[b-mm2i9giy3k] {
        float: right
    }

.plans-grid[b-mm2i9giy3k] {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px
}

.plan-card[b-mm2i9giy3k] {
    position: relative;
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    border-radius: 22px;
    padding: 25px
}

    .plan-card:first-child[b-mm2i9giy3k] {
        border-color: var(--pub-accent);
        box-shadow: 0 12px 40px color-mix(in srgb,var(--pub-accent) 10%,transparent)
    }

.plan-badge[b-mm2i9giy3k] {
    display: inline-block;
    border-radius: 99px;
    padding: 5px 9px;
    background: var(--pub-soft);
    color: var(--pub-accent-dark);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 900
}

/* So aparece pro gerente logado (o backend so devolve item inativo pra ele):
   acusa que aquele item esta desligado da vitrine para o publico geral. */
.hidden-pill[b-mm2i9giy3k] {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 9px;
    border-radius: 99px;
    background: #3a3f47;
    color: #fff;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
    vertical-align: middle
}

.plan-price strong[b-mm2i9giy3k] {
    font: 800 28px var(--pub-display)
}

.plan-price span[b-mm2i9giy3k] {
    color: var(--pub-muted)
}

.plan-card li[b-mm2i9giy3k] {
    font-size: 12px;
    padding: 6px 0
}

.limits[b-mm2i9giy3k] {
    display: block;
    color: var(--pub-muted);
    border-top: 1px solid var(--pub-border);
    padding-top: 10px
}

.annual[b-mm2i9giy3k] {
    font-size: 12px
}

.outline-wide[b-mm2i9giy3k] {
    background: transparent;
    border: 1px solid var(--pub-text);
    color: var(--pub-text)
}

.products-grid[b-mm2i9giy3k] {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px
}

.product-card[b-mm2i9giy3k] {
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    border-radius: 18px;
    overflow: hidden
}

.clickable-card[b-mm2i9giy3k] {
    cursor: pointer
}

    .clickable-card:focus-visible[b-mm2i9giy3k] {
        outline: 3px solid color-mix(in srgb,var(--pub-accent) 55%,transparent);
        outline-offset: 3px
    }

.product-image[b-mm2i9giy3k] {
    height: 190px;
    position: relative
}

    .product-image img[b-mm2i9giy3k] {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.stock[b-mm2i9giy3k] {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255,255,255,.9);
    color: #26342e;
    border-radius: 99px;
    padding: 4px 8px;
    font-size: 9px;
    font-weight: 800
}

    .stock.out[b-mm2i9giy3k] {
        color: #aa382d
    }

.product-card > .product-body[b-mm2i9giy3k] {
    padding: 16px
}

.product-card h3[b-mm2i9giy3k] {
    font-size: 16px
}

.product-card > .product-body > strong[b-mm2i9giy3k] {
    font-size: 16px
}

.team-grid[b-mm2i9giy3k] {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 14px
}

.team-card[b-mm2i9giy3k] {
    display: flex;
    gap: 16px;
    align-items: center;
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    border-radius: 18px;
    padding: 14px
}

    .team-card img[b-mm2i9giy3k] {
        width: 86px;
        height: 98px;
        border-radius: 13px;
        object-fit: cover
    }

    .team-card h3[b-mm2i9giy3k] {
        font-size: 17px
    }

    .team-card div > span[b-mm2i9giy3k], .team-card p[b-mm2i9giy3k], .team-card small[b-mm2i9giy3k] {
        font-size: 11px;
        color: var(--pub-muted);
        margin: 3px 0
    }

        .team-card small b[b-mm2i9giy3k] {
            color: #d08d1f
        }

.reviews-summary[b-mm2i9giy3k] {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 35px;
    padding: 26px;
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    border-radius: 20px
}

.rating-big[b-mm2i9giy3k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--pub-border)
}

    .rating-big > strong[b-mm2i9giy3k] {
        font: 800 52px/1 var(--pub-display)
    }

    .rating-big small[b-mm2i9giy3k] {
        color: var(--pub-muted);
        margin-top: 5px
    }

.rating-bars button[b-mm2i9giy3k] {
    width: 100%;
    display: grid;
    grid-template-columns: 34px 1fr 22px;
    align-items: center;
    gap: 10px;
    padding: 5px;
    border: 0;
    background: transparent;
    color: var(--pub-muted);
    cursor: pointer
}

    .rating-bars button.selected[b-mm2i9giy3k] {
        color: var(--pub-text)
    }

.rating-bars i[b-mm2i9giy3k] {
    height: 6px;
    border-radius: 99px;
    background: var(--pub-soft);
    overflow: hidden
}

.rating-bars b[b-mm2i9giy3k] {
    display: block;
    height: 100%;
    background: #f2b43f;
    border-radius: 99px
}

.review-filters[b-mm2i9giy3k] {
    display: flex;
    gap: 8px;
    overflow: auto;
    margin: 20px 0 12px
}

    .review-filters button[b-mm2i9giy3k] {
        border: 1px solid var(--pub-border);
        background: var(--pub-surface);
        color: var(--pub-muted);
        border-radius: 99px;
        padding: 8px 13px;
        white-space: nowrap;
        cursor: pointer;
        font-size: 11px
    }

        .review-filters button.active[b-mm2i9giy3k] {
            background: var(--pub-text);
            color: var(--pub-surface)
        }

.reviews-list[b-mm2i9giy3k] {
    display: flex;
    flex-direction: column
}

.review-card[b-mm2i9giy3k] {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    padding: 22px 0;
    border-bottom: 1px solid var(--pub-border)
}

.review-avatar[b-mm2i9giy3k] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--pub-soft);
    font-weight: 800
}

.review-content header[b-mm2i9giy3k] {
    display: flex;
    justify-content: space-between
}

    .review-content header > div[b-mm2i9giy3k] {
        display: flex;
        flex-direction: column
    }

.review-content time[b-mm2i9giy3k] {
    font-size: 11px;
    color: var(--pub-muted)
}

.review-content p[b-mm2i9giy3k] {
    margin: 9px 0;
    color: var(--pub-muted)
}

.review-photos[b-mm2i9giy3k] {
    display: flex;
    gap: 8px
}

    .review-photos img[b-mm2i9giy3k] {
        width: 76px;
        height: 76px;
        border-radius: 10px;
        object-fit: cover
    }

.side-column[b-mm2i9giy3k] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-margin-top: 90px
}

.about-card[b-mm2i9giy3k], .info-card[b-mm2i9giy3k], .map-card[b-mm2i9giy3k] {
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    border-radius: 20px;
    padding: 24px
}

    .about-card > p[b-mm2i9giy3k] {
        color: var(--pub-muted);
        font-size: 13px
    }

.stats-grid[b-mm2i9giy3k] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 22px 0
}

    .stats-grid div[b-mm2i9giy3k] {
        display: flex;
        flex-direction: column;
        background: var(--pub-soft);
        border-radius: 13px;
        padding: 12px
    }

    .stats-grid strong[b-mm2i9giy3k] {
        font: 800 21px var(--pub-display)
    }

    .stats-grid span[b-mm2i9giy3k] {
        font-size: 9px;
        color: var(--pub-muted);
        text-transform: uppercase
    }

.specialties[b-mm2i9giy3k] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

    .specialties span[b-mm2i9giy3k] {
        padding: 5px 8px;
        border: 1px solid var(--pub-border);
        border-radius: 99px;
        font-size: 9px
    }

.info-card h3[b-mm2i9giy3k] {
    font: 750 16px var(--pub-display);
    margin: 0 0 14px
}

.schedule-list div[b-mm2i9giy3k] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 7px 0
}

.schedule-list span[b-mm2i9giy3k] {
    color: var(--pub-muted)
}

.schedule-list .closed[b-mm2i9giy3k] {
    opacity: .5
}

.contact-card > a[b-mm2i9giy3k] {
    display: flex;
    gap: 11px;
    align-items: center;
    color: var(--pub-text);
    text-decoration: none;
    padding: 9px 0
}

    .contact-card > a > span[b-mm2i9giy3k] {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        background: var(--pub-soft);
        border-radius: 10px;
        color: var(--pub-accent)
    }

    .contact-card > a div[b-mm2i9giy3k] {
        display: flex;
        flex-direction: column
    }

.contact-card small[b-mm2i9giy3k] {
    font-size: 9px;
    color: var(--pub-muted);
    text-transform: uppercase
}

.contact-card strong[b-mm2i9giy3k] {
    font-size: 12px
}

.social-links[b-mm2i9giy3k] {
    display: flex;
    gap: 7px;
    padding-top: 12px
}

    .social-links a[b-mm2i9giy3k] {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        display: grid;
        place-items: center !important;
        background: var(--pub-soft);
        font-weight: 900;
        text-transform: uppercase
    }

.map-card[b-mm2i9giy3k] {
    border: 0;
    text-align: left;
    color: var(--pub-text);
    cursor: pointer;
    display: flex;
    flex-direction: column
}

    .map-card > div[b-mm2i9giy3k] {
        height: 92px;
        margin: -24px -24px 16px;
        border-radius: 20px 20px 0 0;
        display: grid;
        place-items: center
    }

.map-pin[b-mm2i9giy3k] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--pub-accent);
    color: #fff;
    font-size: 22px
}

    .map-pin[b-mm2i9giy3k]::before {
        display: block;
        transform: rotate(45deg)
    }

.map-card strong[b-mm2i9giy3k] {
    font: 750 16px var(--pub-display)
}

.map-card small[b-mm2i9giy3k] {
    color: var(--pub-muted);
    margin: 5px 0 12px
}

.map-card b[b-mm2i9giy3k] {
    color: var(--pub-accent-dark);
    font-size: 11px
}

.site-footer[b-mm2i9giy3k] {
    background: #111815;
    color: #fff;
    padding: 32px 0
}

    .site-footer > div[b-mm2i9giy3k] {
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .site-footer div > div[b-mm2i9giy3k] {
        display: flex;
        flex-direction: column
    }

    .site-footer span[b-mm2i9giy3k], .site-footer p[b-mm2i9giy3k] {
        font-size: 10px;
        color: rgba(255,255,255,.6)
    }

.mobile-cta[b-mm2i9giy3k] {
    display: none
}

.public-error[b-mm2i9giy3k] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--pub-bg);
    color: var(--pub-text);
    padding: 30px
}

.public-error p[b-mm2i9giy3k] {
    color: var(--pub-muted)
}

.public-error > div[b-mm2i9giy3k] {
    color: var(--pub-accent);
    font-size: 40px
}

.public-error h1[b-mm2i9giy3k] {
    font: 800 34px var(--pub-display)
}

.public-error a[b-mm2i9giy3k] {
    background: var(--pub-text);
    color: var(--pub-surface);
    padding: 12px 18px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800
}

.detail-backdrop[b-mm2i9giy3k] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    z-index: 900
}

.product-detail[b-mm2i9giy3k] {
    position: fixed;
    z-index: 901;
    inset: 50% auto auto 50%;
    transform: translate(-50%,-50%);
    width: min(720px,calc(100% - 32px));
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--pub-surface);
    color: var(--pub-text);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.3)
}

    .product-detail > img[b-mm2i9giy3k] {
        width: 100%;
        height: 400px;
        object-fit: cover
    }

    .product-detail > div[b-mm2i9giy3k] {
        padding: 38px;
        display: flex;
        flex-direction: column;
        justify-content: center
    }

    .product-detail h2[b-mm2i9giy3k] {
        font: 800 30px var(--pub-display);
        margin: 5px 0
    }

    .product-detail p[b-mm2i9giy3k], .product-detail small[b-mm2i9giy3k] {
        color: var(--pub-muted)
    }

    .product-detail > div > strong[b-mm2i9giy3k] {
        font: 800 25px var(--pub-display);
        margin: 15px 0
    }

.detail-close[b-mm2i9giy3k] {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--pub-surface);
    color: var(--pub-text);
    cursor: pointer
}

.public-toast[b-mm2i9giy3k] {
    position: fixed;
    z-index: 1200;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    background: #1f3028;
    color: #fff;
    border-radius: 12px;
    padding: 11px 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,.2);
    max-width: min(360px,calc(100vw - 32px));
    pointer-events: none
}

@media(max-width:1000px) {
    .site-header nav[b-mm2i9giy3k] {
        display: none
    }

    .main-grid[b-mm2i9giy3k] {
        grid-template-columns: 1fr
    }

    .side-column[b-mm2i9giy3k] {
        display: grid;
        grid-template-columns: repeat(2,1fr)
    }

    .map-card[b-mm2i9giy3k] {
        min-height: 230px
    }

    .hero-content[b-mm2i9giy3k] {
        grid-template-columns: 110px 1fr
    }

    .company-logo-wrap img[b-mm2i9giy3k] {
        width: 110px;
        height: 110px
    }

    .hero-actions[b-mm2i9giy3k] {
        grid-column: 2;
        position: absolute;
        right: 28px;
        bottom: 42px
    }

    .content-links[b-mm2i9giy3k] {
        gap: 22px
    }

    .nav-cta[b-mm2i9giy3k] {
        display: none
    }
}

@media(max-width:720px) {
    .page-shell[b-mm2i9giy3k] {
        width: min(100% - 28px,1180px)
    }

    .site-header[b-mm2i9giy3k] {
        height: 64px;
        padding: 0 14px
    }

    .powered-brand[b-mm2i9giy3k] {
        min-width: 0
    }

        .powered-brand > span[b-mm2i9giy3k] {
            width: 36px;
            height: 36px
        }

        .powered-brand div[b-mm2i9giy3k] {
            display: none
        }

    .header-book[b-mm2i9giy3k] {
        display: none
    }

    .header-actions[b-mm2i9giy3k] {
        margin-left: auto
    }

    .hero-shade[b-mm2i9giy3k] {
        background: linear-gradient(0deg,rgba(9,14,12,.9),rgba(9,14,12,.18))
    }

    /* Alinhamento inferior + respiro no rodape da capa; o bloco mobile mais
       abaixo troca o alinhamento para central e mantem estes paddings. O
       padding-top reserva a faixa do cabecalho (44px do .ptop): sem ele a
       centralizacao precisaria de capa alta so para o titulo nao entrar
       debaixo dos botoes. */
    .hero-content[b-mm2i9giy3k] {
        align-items: flex-end;
        gap: 15px;
        padding-top: 44px;
        padding-bottom: 12px
    }

    .company-logo-wrap img[b-mm2i9giy3k] {
        width: 84px;
        height: 84px;
        border-radius: 19px;
        border-width: 4px
    }

    .hero-copy[b-mm2i9giy3k] {
        min-width: 0
    }

        .hero-copy h1[b-mm2i9giy3k] {
            font-size: 31px;
            margin: 8px 0
        }

    .rating-line[b-mm2i9giy3k] {
        gap: 7px;
        font-size: 12px
    }

        .rating-line a[b-mm2i9giy3k] {
            font-size: 11px
        }

    .address-button[b-mm2i9giy3k] {
        font-size: 11px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden
    }

    .hero-actions[b-mm2i9giy3k] {
        top: 18px;
        right: 14px;
        bottom: auto;
        grid-column: auto
    }

    .glass-action[b-mm2i9giy3k] {
        width: 51px;
        height: 48px;
        border-radius: 13px
    }

        .glass-action small[b-mm2i9giy3k] {
            display: none
        }

        .glass-action span[b-mm2i9giy3k] {
            font-size: 22px
        }

    .content-nav[b-mm2i9giy3k] {
        height: 52px;
        width: 100%;
        padding-left: 14px
    }

    .content-links[b-mm2i9giy3k] {
        gap: 23px;
        padding-right: 15px
    }

        .content-links a[b-mm2i9giy3k] {
            font-size: 12px
        }

    .main-grid[b-mm2i9giy3k] {
        padding-top: 42px;
        padding-bottom: 80px
    }

    .content-section[b-mm2i9giy3k] {
        margin-bottom: 62px
    }

    .section-heading[b-mm2i9giy3k] {
        margin-bottom: 18px
    }

    .result-count[b-mm2i9giy3k] {
        display: none
    }

    .service-card[b-mm2i9giy3k] {
        grid-template-columns: 92px 1fr;
        padding: 10px;
        gap: 13px
    }

        .service-card > img[b-mm2i9giy3k] {
            width: 92px;
            height: 104px
        }

    .service-info h3[b-mm2i9giy3k] {
        font-size: 16px
    }

    .service-info p[b-mm2i9giy3k] {
        font-size: 11px;
        -webkit-line-clamp: 1
    }

    .service-meta[b-mm2i9giy3k] {
        gap: 12px
    }

    .book-button[b-mm2i9giy3k] {
        grid-column: 1/-1;
        min-height: 42px;
        border-left: 0;
        border-top: 1px solid var(--pub-border);
        margin: 0 -10px -10px
    }

    .service-actions[b-mm2i9giy3k] {
        grid-column: 1/-1;
        min-width: 0
    }

        .book-button span[b-mm2i9giy3k] {
            display: inline;
            margin-left: 8px;
            font-size: 16px
        }

    .combo-grid[b-mm2i9giy3k], .plans-grid[b-mm2i9giy3k], .products-grid[b-mm2i9giy3k], .team-grid[b-mm2i9giy3k] {
        grid-template-columns: 1fr
    }

    .combo-image[b-mm2i9giy3k] {
        height: 210px
    }

    .products-grid[b-mm2i9giy3k] {
        grid-template-columns: repeat(2,1fr)
    }

    .product-image[b-mm2i9giy3k] {
        height: 160px
    }

    .team-card img[b-mm2i9giy3k] {
        width: 78px;
        height: 88px
    }

    .reviews-summary[b-mm2i9giy3k] {
        grid-template-columns: 1fr;
        padding: 20px
    }

    .rating-big[b-mm2i9giy3k] {
        border-right: 0;
        border-bottom: 1px solid var(--pub-border);
        padding-bottom: 18px
    }

    .side-column[b-mm2i9giy3k] {
        display: flex
    }

    .stats-grid[b-mm2i9giy3k] {
        grid-template-columns: repeat(4,1fr);
        overflow: auto
    }

        .stats-grid div[b-mm2i9giy3k] {
            min-width: 95px
        }

    .site-footer[b-mm2i9giy3k] {
        padding-bottom: 95px
    }

        .site-footer > div[b-mm2i9giy3k] {
            align-items: flex-start;
            gap: 20px
        }

    .mobile-cta[b-mm2i9giy3k] {
        position: fixed;
        z-index: 100;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 14px max(11px,env(safe-area-inset-bottom));
        background: var(--pub-surface);
        border-top: 1px solid var(--pub-border);
        box-shadow: 0 -8px 30px rgba(0,0,0,.08)
    }

        .mobile-cta div[b-mm2i9giy3k] {
            display: flex;
            flex-direction: column
        }

        .mobile-cta small[b-mm2i9giy3k] {
            font-size: 9px;
            color: var(--pub-muted)
        }

        .mobile-cta button[b-mm2i9giy3k] {
            border: 0;
            border-radius: 11px;
            background: var(--pub-accent);
            color: #fff;
            padding: 12px 22px;
            font-weight: 850
        }

    .product-detail[b-mm2i9giy3k] {
        display: block;
        max-height: 88vh;
        max-height: 88dvh;
        overflow: auto
    }

        .product-detail > img[b-mm2i9giy3k] {
            height: 280px
        }

        .product-detail > div[b-mm2i9giy3k] {
            padding: 25px
        }

    .public-toast[b-mm2i9giy3k] {
        top: calc(88px + env(safe-area-inset-top));
        bottom: auto;
        width: max-content;
        text-align: center
    }
}

@media(max-width:420px) {
    .products-grid[b-mm2i9giy3k] {
        grid-template-columns: 1fr
    }

    .stats-grid[b-mm2i9giy3k] {
        grid-template-columns: repeat(2,1fr)
    }

    .site-footer p[b-mm2i9giy3k] {
        display: none
    }
}

@media(prefers-reduced-motion:reduce) {
    .service-card[b-mm2i9giy3k], .public-page[b-mm2i9giy3k] {
        transition: none
    }
}
/* Guardas de responsividade para conteúdo rolável e textos longos.
   `clip` (e nao `hidden`): overflow-x:hidden faria o overflow-y virar `auto` e
   transformaria .public-page num scroller, quebrando o sticky da capa. */
.public-page[b-mm2i9giy3k] {
    overflow-x: clip
}

.content-links[b-mm2i9giy3k] {
    scrollbar-width: none
}

    .content-links[b-mm2i9giy3k]::-webkit-scrollbar {
        display: none
    }

.content-nav[b-mm2i9giy3k] {
    overflow: hidden
}

.service-info[b-mm2i9giy3k] {
    min-width: 0
}

.book-button[b-mm2i9giy3k] {
    color: var(--pub-accent-dark)
}

/* Layout adaptativo: mais conteúdo útil por tela sem reduzir legibilidade ou áreas de toque. */
.public-page img[b-mm2i9giy3k] {
    max-width: 100%
}

.main-grid > *[b-mm2i9giy3k], .content-section[b-mm2i9giy3k], .service-card > *[b-mm2i9giy3k], .product-card[b-mm2i9giy3k], .combo-card[b-mm2i9giy3k], .plan-card[b-mm2i9giy3k], .team-card[b-mm2i9giy3k] {
    min-width: 0
}

.content-links[b-mm2i9giy3k] {
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain
}

    .content-links a[b-mm2i9giy3k] {
        scroll-snap-align: start
    }

.public-page button[b-mm2i9giy3k], .public-page a[b-mm2i9giy3k] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent
}

@media (min-width:721px) and (max-width:1100px) {
    .page-shell[b-mm2i9giy3k] {
        width: min(100% - 48px,1180px)
    }

    .hero[b-mm2i9giy3k] {
        height: clamp(259px,33vw,301px)
    }

    .main-grid[b-mm2i9giy3k] {
        gap: 30px
    }

    .products-grid[b-mm2i9giy3k] {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

    .combo-grid[b-mm2i9giy3k], .plans-grid[b-mm2i9giy3k], .team-grid[b-mm2i9giy3k], .side-column[b-mm2i9giy3k] {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media (max-width:720px) {
    .public-page[b-mm2i9giy3k] {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
        scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom))
    }

    .page-shell[b-mm2i9giy3k] {
        width: calc(100% - clamp(28px,8vw,40px))
    }

    .site-header[b-mm2i9giy3k] {
        height: 58px;
        gap: 10px
    }

    .powered-brand[b-mm2i9giy3k] {
        flex: 1;
        min-width: 0;
        gap: 9px
    }

        .powered-brand > span[b-mm2i9giy3k] {
            width: 34px;
            height: 34px;
            flex: 0 0 34px;
            font-size: 11px
        }

    .site-header .powered-brand div[b-mm2i9giy3k] {
        display: flex;
        min-width: 0
    }

    .site-header .powered-brand strong[b-mm2i9giy3k] {
        max-width: 46vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px
    }

    .site-header .powered-brand small[b-mm2i9giy3k] {
        display: none
    }

    .round-action[b-mm2i9giy3k] {
        width: 44px;
        height: 44px;
        flex: 0 0 44px
    }

    /* Altura responsiva com piso: encolhe em telas baixas sem nunca esmagar o
       logo/titulo (a capa fica presa no topo, entao nao pode roubar a tela).
       O teto e o menor valor que ainda deixa o conteudo centralizado abaixo
       do cabecalho de 44px. */
    .hero[b-mm2i9giy3k] {
        height: clamp(178px,25vh,196px);
        height: clamp(178px,25svh,196px);
        min-height: 178px
    }

    .hero-shade[b-mm2i9giy3k] {
        background: linear-gradient(0deg,rgba(9,14,12,.96),rgba(9,14,12,.43) 47%,rgba(9,14,12,.12))
    }

    /* Alinhamento central; o padding inferior fica por conta da regra mobile
       anterior — sem declarar padding-bottom aqui. */
    .hero-content[b-mm2i9giy3k] {
        left: auto;
        right: auto;
        gap: 12px;
        align-items: center
    }

    .company-logo-wrap img[b-mm2i9giy3k] {
        width: clamp(70px,20vw,84px);
        height: clamp(70px,20vw,84px);
        border-radius: 18px;
        border-width: 3px
    }

    .hero-copy h1[b-mm2i9giy3k] {
        font-size: clamp(26px,7.7vw,34px);
        line-height: 1.02;
        letter-spacing: -.04em;
        overflow-wrap: anywhere
    }

    .rating-line[b-mm2i9giy3k] {
        gap: 7px;
        flex-wrap: wrap;
        line-height: 1.2
    }

    .address-button[b-mm2i9giy3k] {
        margin-top: 8px;
        line-height: 1.35;
        -webkit-line-clamp: 2
    }

    .hero-actions[b-mm2i9giy3k] {
        top: 12px;
        right: 14px;
        gap: 8px
    }

    .glass-action[b-mm2i9giy3k] {
        width: 44px;
        height: 44px;
        min-height: 44px;
        flex: 0 0 44px
    }

    .content-nav-wrap[b-mm2i9giy3k] {
        box-shadow: 0 7px 20px rgba(19,14,11,.06)
    }

    .content-nav[b-mm2i9giy3k] {
        height: 54px
    }

    .content-links[b-mm2i9giy3k] {
        gap: 22px;
        padding-right: 22px;
        mask-image: linear-gradient(to right,#000 0,#000 calc(100% - 24px),transparent 100%)
    }

        .content-links a[b-mm2i9giy3k] {
            height: 54px;
            font-size: 12px
        }

    .main-grid[b-mm2i9giy3k] {
        padding-top: 30px;
        gap: 42px
    }

    .content-section[b-mm2i9giy3k] {
        margin-bottom: 48px;
        /* capa (ate 196) + nav (54) presas no topo */
        scroll-margin-top: 256px
    }

    .section-heading[b-mm2i9giy3k] {
        margin-bottom: 18px
    }

        .section-heading h2[b-mm2i9giy3k], .about-card h2[b-mm2i9giy3k] {
            font-size: clamp(24px,7vw,29px)
        }

    .service-list[b-mm2i9giy3k] {
        gap: 12px
    }

    .service-card[b-mm2i9giy3k] {
        grid-template-columns: clamp(82px,24vw,104px) minmax(0,1fr);
        gap: 12px;
        padding: 10px;
        border-radius: 18px;
        align-items: center
    }

        .service-card > img[b-mm2i9giy3k] {
            width: 100%;
            height: clamp(82px,24vw,104px);
            border-radius: 14px
        }

    .service-info h3[b-mm2i9giy3k] {
        font-size: 15px;
        line-height: 1.2
    }

    .service-info p[b-mm2i9giy3k] {
        font-size: 12px;
        line-height: 1.4;
        -webkit-line-clamp: 2;
        margin-block: 4px 7px
    }

    .service-meta[b-mm2i9giy3k] {
        gap: 6px 12px;
        flex-wrap: wrap
    }

    .book-button[b-mm2i9giy3k] {
        grid-column: 1 / -1;
        min-height: 44px;
        margin: 0 -10px -10px;
        border-left: 0;
        border-top: 1px solid var(--pub-border)
    }

    .products-grid[b-mm2i9giy3k] {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 12px
    }

    .product-card[b-mm2i9giy3k] {
        border-radius: 18px
    }

    .product-image[b-mm2i9giy3k] {
        height: clamp(140px,38vw,188px)
    }

    .product-card > .product-body[b-mm2i9giy3k] {
        padding: 14px
    }

    .product-card p[b-mm2i9giy3k] {
        font-size: 12px;
        line-height: 1.4
    }

    .combo-grid[b-mm2i9giy3k], .plans-grid[b-mm2i9giy3k], .team-grid[b-mm2i9giy3k] {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .combo-card[b-mm2i9giy3k], .plan-card[b-mm2i9giy3k], .team-card[b-mm2i9giy3k] {
        border-radius: 20px
    }

    .team-card[b-mm2i9giy3k] {
        align-items: flex-start;
        padding: 14px
    }

        .team-card img[b-mm2i9giy3k] {
            width: 68px;
            height: 76px;
            flex: 0 0 68px
        }

    .about-card[b-mm2i9giy3k], .info-card[b-mm2i9giy3k], .map-card[b-mm2i9giy3k] {
        padding: 20px;
        border-radius: 20px
    }

    .contact-card > a[b-mm2i9giy3k] {
        min-height: 48px
    }

    .schedule-list div[b-mm2i9giy3k] {
        min-height: 40px;
        align-items: center
    }

    .stats-grid[b-mm2i9giy3k] {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 10px;
        overflow: visible
    }

        .stats-grid div[b-mm2i9giy3k] {
            min-width: 0;
            padding: 14px 10px
        }

    .reviews-summary[b-mm2i9giy3k] {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 20px
    }

    .rating-big[b-mm2i9giy3k] {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 14px;
        align-items: center;
        text-align: left;
        border-bottom: 1px solid var(--pub-border);
        padding-bottom: 18px
    }

        .rating-big > strong[b-mm2i9giy3k] {
            grid-row: 1 / span 2;
            font-size: 46px
        }

    .review-filters[b-mm2i9giy3k] {
        gap: 7px;
        margin-top: 16px;
        padding-bottom: 6px;
        scrollbar-width: none
    }

        .review-filters[b-mm2i9giy3k]::-webkit-scrollbar {
            display: none
        }

        .review-filters button[b-mm2i9giy3k] {
            min-width: 48px;
            min-height: 42px;
            flex: 0 0 auto
        }

    .review-card[b-mm2i9giy3k] {
        padding-block: 18px
    }

    .review-content[b-mm2i9giy3k] {
        min-width: 0
    }

    .mobile-cta[b-mm2i9giy3k] {
        min-height: 72px;
        height: auto;
        padding: 10px clamp(14px,4vw,20px) calc(10px + env(safe-area-inset-bottom));
        gap: 12px;
        background: color-mix(in srgb,var(--pub-surface) 92%,transparent);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-top-color: var(--pub-border);
        box-shadow: 0 -10px 28px rgba(35,23,16,.12)
    }

        .mobile-cta > div[b-mm2i9giy3k] {
            min-width: 0;
            line-height: 1.1
        }

        .mobile-cta strong[b-mm2i9giy3k] {
            font-size: 18px;
            white-space: nowrap
        }

        .mobile-cta button[b-mm2i9giy3k] {
            min-height: 48px;
            flex: 1 1 190px;
            padding: 0 18px;
            border-radius: 14px
        }

    .site-footer[b-mm2i9giy3k] {
        padding: 28px 0 calc(25px + env(safe-area-inset-bottom))
    }

        .site-footer > div[b-mm2i9giy3k] {
            flex-wrap: wrap
        }
}

@media (max-width:440px) {
    .page-shell[b-mm2i9giy3k] {
        width: calc(100% - 28px)
    }

    .products-grid[b-mm2i9giy3k] {
        grid-template-columns: 1fr
    }

    .product-card[b-mm2i9giy3k] {
        display: grid;
        grid-template-columns: 112px minmax(0,1fr)
    }

    .product-image[b-mm2i9giy3k] {
        width: 112px;
        height: 100%;
        min-height: 154px
    }

        .product-image img[b-mm2i9giy3k] {
            border-radius: 18px 0 0 18px
        }

    .product-card > .product-body[b-mm2i9giy3k] {
        min-width: 0;
        padding: 13px
    }

    .product-card p[b-mm2i9giy3k] {
        -webkit-line-clamp: 2
    }

    .review-card[b-mm2i9giy3k] {
        grid-template-columns: 40px minmax(0,1fr);
        gap: 10px
    }

    .review-avatar[b-mm2i9giy3k] {
        width: 40px;
        height: 40px
    }
}

@media (max-width:360px) {
    .site-header .powered-brand strong[b-mm2i9giy3k] {
        max-width: 45vw;
        font-size: 11px
    }

    .hero[b-mm2i9giy3k] {
        height: 184px;
        min-height: 184px
    }

    .company-logo-wrap img[b-mm2i9giy3k] {
        width: 66px;
        height: 66px
    }

    .hero-copy h1[b-mm2i9giy3k] {
        font-size: 25px
    }

    .rating-line[b-mm2i9giy3k], .rating-line > a[b-mm2i9giy3k], .address-button[b-mm2i9giy3k] {
        font-size: 10px
    }

    .service-card[b-mm2i9giy3k] {
        grid-template-columns: 78px minmax(0,1fr);
        gap: 10px;
        padding: 9px
    }

        .service-card > img[b-mm2i9giy3k] {
            height: 78px
        }

    .service-info p[b-mm2i9giy3k] {
        -webkit-line-clamp: 1
    }

    .book-button[b-mm2i9giy3k] {
        margin: 0 -9px -9px
    }

    .mobile-cta strong[b-mm2i9giy3k] {
        font-size: 16px
    }

    .mobile-cta button[b-mm2i9giy3k] {
        font-size: 12px;
        padding-inline: 12px
    }
}

@media (max-width:950px) and (max-height:560px) and (orientation:landscape) {
    .site-header[b-mm2i9giy3k] {
        height: 52px
    }

    .hero[b-mm2i9giy3k] {
        height: 161px;
        min-height: 161px
    }

    .hero-content[b-mm2i9giy3k] {
        padding-bottom: 14px
    }

    .company-logo-wrap img[b-mm2i9giy3k] {
        width: 68px;
        height: 68px
    }

    .hero-copy h1[b-mm2i9giy3k] {
        font-size: 27px
    }

    .hero-actions[b-mm2i9giy3k] {
        bottom: 22px
    }

    .content-nav[b-mm2i9giy3k], .content-links a[b-mm2i9giy3k] {
        height: 50px
    }

    .main-grid[b-mm2i9giy3k] {
        padding-top: 24px
    }
}

@media (prefers-reduced-motion:reduce) {
    .public-page *[b-mm2i9giy3k] {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }
}

@media (max-width:720px) and (max-height:650px) and (orientation:portrait) {
    .site-header[b-mm2i9giy3k] {
        height: 54px
    }

    .hero[b-mm2i9giy3k] {
        height: 172px;
        min-height: 172px
    }

    .hero-content[b-mm2i9giy3k] {
        padding-bottom: 14px
    }

    .company-logo-wrap img[b-mm2i9giy3k] {
        width: 62px;
        height: 62px
    }

    .hero-copy h1[b-mm2i9giy3k] {
        font-size: 24px;
        margin-block: 6px
    }

    .content-nav[b-mm2i9giy3k], .content-links a[b-mm2i9giy3k] {
        height: 50px
    }

    .main-grid[b-mm2i9giy3k] {
        padding-top: 20px
    }
}

/* ==========================================================================
   Area autenticada: controles de administracao sobrepostos e carrinho.
   Renderizados por esta pagina (CSS isolado); os modais tem folhas proprias.
   ========================================================================== */

/* Botao de edicao (lapis/camera) sobreposto aos elementos editaveis */
.admin-fab[b-mm2i9giy3k] {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--pub-accent);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    transition: transform .15s, filter .15s
}

    .admin-fab:hover[b-mm2i9giy3k] {
        transform: scale(1.08);
        filter: brightness(1.05)
    }

/* Toggle de exibir/ocultar secao na vitrine: neutro quando visivel, cinza quando oculto */
.visibility-fab[b-mm2i9giy3k] {
    background: #fff;
    color: var(--pub-accent-dark);
    border: 2px solid var(--pub-accent)
}

    .visibility-fab.off[b-mm2i9giy3k] {
        background: #9aa1a9;
        color: #fff;
        border-color: #9aa1a9
    }

/* Ancora dos cards editaveis: o lapis fica no canto superior direito */
.admin-anchor[b-mm2i9giy3k] {
    position: relative
}

/* Agrupa o toggle de visibilidade e o lapis de edicao no mesmo canto */
.card-fab-group[b-mm2i9giy3k] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    display: flex;
    gap: 8px
}

.card-fab[b-mm2i9giy3k] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5
}

/* O nome do profissional comeca na mesma altura do card-fab-group e, quando e
   longo, passa por baixo do olho/lapis (os demais cards tem imagem ou etiqueta
   curta nesse canto). Reserva a largura do par de botoes so quando eles
   existem, para o visitante comum manter a linha inteira. */
.team-card:has(.card-fab-group) h3[b-mm2i9giy3k] {
    padding-right: 80px
}

/* Wrapper de posicionamento do endereco: o card-fab-group (olho/editar) fica
   ancorado no canto, sem disputar largura com o texto (que pode quebrar em
   2-3 linhas) como um flex-sibling faria. */
.address-line[b-mm2i9giy3k] {
    position: relative
}

/* address-button e paragrafo puro (padding:0), sem a folga que about-card/
   info-card ja tem "de graca"; sem isso o card-fab-group (96px com gap, no
   mobile) cobre a ultima linha do endereco quando ele quebra em 2-3 linhas. */
.address-line:has(.card-fab-group) .address-button[b-mm2i9giy3k] {
    padding-right: 100px
}

/* Botao fantasma para preencher dados ausentes (ex.: endereco) */
.admin-ghost-btn[b-mm2i9giy3k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px dashed rgba(255,255,255,.45);
    border-radius: 10px;
    background: transparent;
    color: rgba(255,255,255,.85);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer
}

/* Botao "+ Novo ..." nos titulos de secao */
.heading-actions[b-mm2i9giy3k] {
    display: flex;
    align-items: center;
    gap: 12px
}

.admin-add[b-mm2i9giy3k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px dashed var(--pub-accent);
    border-radius: 11px;
    background: color-mix(in srgb,var(--pub-accent) 8%,transparent);
    color: var(--pub-accent-dark);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap
}

    .admin-add:hover[b-mm2i9giy3k] {
        background: color-mix(in srgb,var(--pub-accent) 16%,transparent)
    }

/* Toggle com rotulo (quando duas secoes independentes ficam lado a lado, ex.: Resumo/Comentarios) */
.visibility-pill[b-mm2i9giy3k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--pub-accent);
    border-radius: 11px;
    background: color-mix(in srgb,var(--pub-accent) 8%,transparent);
    color: var(--pub-accent-dark);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap
}

    .visibility-pill:hover[b-mm2i9giy3k] {
        background: color-mix(in srgb,var(--pub-accent) 16%,transparent)
    }

    .visibility-pill.off[b-mm2i9giy3k] {
        border-color: #9aa1a9;
        background: color-mix(in srgb,#9aa1a9 14%,transparent);
        color: #6b7280
    }

.admin-empty[b-mm2i9giy3k] {
    padding: 26px 18px;
    border: 1px dashed var(--pub-border);
    border-radius: 16px;
    color: var(--pub-muted);
    text-align: center
}

/* Acoes do card de produto: o card abre detalhes; aqui fica somente a compra. */
.product-actions[b-mm2i9giy3k] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px
}

.cart-add[b-mm2i9giy3k] {
    flex: 0 0 auto;
    min-width: 112px;
    height: 38px;
    border: 1px solid var(--pub-border);
    border-radius: 10px;
    background: var(--pub-surface);
    color: var(--pub-accent-dark);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    white-space: nowrap
}

    .cart-add:hover[b-mm2i9giy3k] {
        border-color: var(--pub-accent);
        background: color-mix(in srgb,var(--pub-accent) 10%,transparent)
    }

.detail-cart-add[b-mm2i9giy3k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 14px;
    min-height: 46px;
    border: 0;
    border-radius: 12px;
    background: var(--pub-accent);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    padding: 10px 18px
}

@media (max-width:720px) {
    .admin-fab[b-mm2i9giy3k] {
        width: 30px;
        height: 30px;
        font-size: 15px
    }

    .card-fab[b-mm2i9giy3k] {
        top: 8px;
        right: 8px
    }

    .card-fab-group[b-mm2i9giy3k] {
        top: 8px;
        right: 8px;
        gap: 6px
    }

    .team-card:has(.card-fab-group) h3[b-mm2i9giy3k] {
        padding-right: 68px
    }

    .cart-add[b-mm2i9giy3k] {
        min-height: 44px
    }
}

@media (prefers-reduced-motion:reduce) {
    .admin-fab[b-mm2i9giy3k] {
        transition: none
    }
}
/* /Features/Public/SuportePublicPage.razor.rz.scp.css */
/* ==========================================================================
   Tela "Suporte" da vitrine: chat da equipe da empresa com a PHS.
   Mobile-first: o layout base e o de celular (uma coluna; a conversa ocupa a
   tela inteira e o campo de texto fica fixo no rodape). A partir de 900px vira
   lista lateral + painel de chat.
   Os tokens --pub-* vem de css/public-admin.css (.public-page).
   ========================================================================== */

.sup-page[b-qck20x3wrm] {
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: 24px
}

.sup-sr[b-qck20x3wrm] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

/* ---------------------------------------------------------------- cabecalho */

.sup-head[b-qck20x3wrm] {
    background: var(--pub-surface);
    border-bottom: 1px solid var(--pub-border)
}

.sup-head-inner[b-qck20x3wrm] {
    width: min(1120px,calc(100% - 32px));
    margin-inline: auto;
    padding: 16px 0 18px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.sup-back[b-qck20x3wrm] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    max-width: 100%;
    padding: 8px 14px 8px 11px;
    border: 1px solid var(--pub-border);
    border-radius: 999px;
    color: var(--pub-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700
}

    .sup-back span:last-child[b-qck20x3wrm] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .sup-back:hover[b-qck20x3wrm] {
        color: var(--pub-text);
        border-color: var(--pub-accent)
    }

.sup-eyebrow[b-qck20x3wrm] {
    display: block;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: 11px;
    font-weight: 800;
    color: var(--pub-accent)
}

.sup-head-title h1[b-qck20x3wrm] {
    margin: 5px 0 0;
    font: 800 clamp(24px,5vw,32px)/1.15 var(--pub-display)
}

/* Status do suporte: bolinha + rotulo + frase honesta de expectativa. */
.sup-online[b-qck20x3wrm] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding: 7px 13px;
    border: 1px solid var(--pub-border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700
}

    .sup-online i[b-qck20x3wrm] {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--pub-muted)
    }

    .sup-online.on[b-qck20x3wrm] {
        border-color: color-mix(in srgb,var(--pub-success) 45%,transparent);
        color: var(--pub-success)
    }

        .sup-online.on i[b-qck20x3wrm] {
            background: var(--pub-success);
            box-shadow: 0 0 0 3px color-mix(in srgb,var(--pub-success) 22%,transparent)
        }

    .sup-online.off[b-qck20x3wrm] {
        color: var(--pub-muted)
    }

    .sup-online small[b-qck20x3wrm] {
        font-weight: 400;
        color: var(--pub-muted)
    }

.sup-main[b-qck20x3wrm] {
    width: min(1120px,calc(100% - 32px));
    margin-inline: auto;
    padding-top: 18px
}

/* --------------------------------------------------- carregando / erro / vazio */

.sup-skeletons[b-qck20x3wrm] {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.sup-skeleton[b-qck20x3wrm] {
    height: 84px;
    border-radius: 16px;
    background: linear-gradient(90deg,var(--pub-soft) 25%,color-mix(in srgb,var(--pub-soft) 60%,var(--pub-surface)) 50%,var(--pub-soft) 75%);
    background-size: 400% 100%;
    animation: sup-shimmer-b-qck20x3wrm 1.4s ease-in-out infinite
}

@keyframes sup-shimmer-b-qck20x3wrm {
    0% { background-position: 100% 0 }
    100% { background-position: 0 0 }
}

.sup-state[b-qck20x3wrm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 46px 22px;
    border: 1px solid var(--pub-border);
    border-radius: 18px;
    background: var(--pub-surface);
    text-align: center
}

    .sup-state > span:first-child[b-qck20x3wrm] {
        font-size: 30px;
        color: var(--pub-accent)
    }

    .sup-state h2[b-qck20x3wrm] {
        margin: 4px 0 0;
        font: 800 19px/1.25 var(--pub-display)
    }

    .sup-state p[b-qck20x3wrm] {
        margin: 0;
        max-width: 46ch;
        color: var(--pub-muted);
        font-size: 14px
    }

.sup-state-acao[b-qck20x3wrm] {
    margin-top: 10px;
    text-decoration: none
}

/* -------------------------------------------------------------------- lista */

.sup-layout[b-qck20x3wrm] {
    display: block
}

.sup-lista[b-qck20x3wrm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0
}

    .sup-lista.oculta-mobile[b-qck20x3wrm] {
        display: none
    }

.sup-tabs[b-qck20x3wrm] {
    margin-bottom: 2px
}

.sup-vazio[b-qck20x3wrm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 22px;
    border: 1px dashed var(--pub-border);
    border-radius: 18px;
    text-align: center
}

    .sup-vazio > span:first-child[b-qck20x3wrm] {
        font-size: 28px;
        color: var(--pub-accent)
    }

    .sup-vazio strong[b-qck20x3wrm] {
        font: 800 16px/1.3 var(--pub-display)
    }

    .sup-vazio p[b-qck20x3wrm] {
        margin: 0;
        max-width: 40ch;
        color: var(--pub-muted);
        font-size: 13px
    }

.sup-cards[b-qck20x3wrm] {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.sup-card[b-qck20x3wrm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--pub-border);
    border-radius: 16px;
    background: var(--pub-surface);
    color: var(--pub-text);
    font: inherit;
    text-align: left;
    cursor: pointer
}

    .sup-card:hover[b-qck20x3wrm] {
        border-color: var(--pub-accent)
    }

    .sup-card.ativa[b-qck20x3wrm] {
        border-color: var(--pub-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb,var(--pub-accent) 13%,transparent)
    }

.sup-card-topo[b-qck20x3wrm] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0
}

    .sup-card-topo strong[b-qck20x3wrm] {
        flex: 1;
        min-width: 0;
        font: 800 15px/1.3 var(--pub-display);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

.sup-badge-nao-lidas[b-qck20x3wrm] {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--pub-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-align: center
}

.sup-card-empresa[b-qck20x3wrm],
.sup-card-preview[b-qck20x3wrm] {
    display: block;
    min-width: 0;
    color: var(--pub-muted);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sup-card-meta[b-qck20x3wrm] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 2px
}

    .sup-card-meta time[b-qck20x3wrm] {
        margin-left: auto;
        color: var(--pub-muted);
        font-size: 12px
    }

.sup-status[b-qck20x3wrm] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap
}

    .sup-status.aberto[b-qck20x3wrm],
    .sup-status.aguardando-phs[b-qck20x3wrm] {
        background: color-mix(in srgb,var(--pub-warn) 16%,transparent);
        color: var(--pub-warn)
    }

    .sup-status.aguardando-cliente[b-qck20x3wrm],
    .sup-status.em-atendimento[b-qck20x3wrm] {
        background: color-mix(in srgb,var(--pub-accent) 16%,transparent);
        color: var(--pub-accent-dark)
    }

    .sup-status.resolvido[b-qck20x3wrm] {
        background: var(--pub-success-surface);
        color: var(--pub-success)
    }

    .sup-status.fechado[b-qck20x3wrm] {
        background: var(--pub-soft);
        color: var(--pub-muted)
    }

/* --------------------------------------------------------------------- chat */

/* No celular a conversa e uma tela inteira: o campo de texto fica colado no
   rodape (com area segura do iOS) e a lista some por baixo. */
.sup-chat[b-qck20x3wrm] {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    background: var(--pub-bg);
    color: var(--pub-text)
}

.sup-chat-head[b-qck20x3wrm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--pub-border);
    background: var(--pub-surface)
}

.sup-chat-voltar[b-qck20x3wrm],
.sup-chat-acoes[b-qck20x3wrm] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1px solid var(--pub-border);
    border-radius: 12px;
    background: transparent;
    color: var(--pub-text);
    font-size: 15px;
    cursor: pointer
}

.sup-chat-titulo[b-qck20x3wrm] {
    flex: 1;
    min-width: 0
}

    .sup-chat-titulo strong[b-qck20x3wrm] {
        display: block;
        font: 800 15px/1.25 var(--pub-display);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .sup-chat-titulo small[b-qck20x3wrm] {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 4px
    }

.sup-atendente[b-qck20x3wrm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pub-muted);
    font-size: 12px
}

.sup-avatar[b-qck20x3wrm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pub-accent);
    color: #fff;
    font-size: 9px;
    font-weight: 800
}

.sup-acoes[b-qck20x3wrm] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-bottom: 1px solid var(--pub-border);
    background: var(--pub-surface)
}

.sup-acao-campo[b-qck20x3wrm] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--pub-muted)
}

    .sup-acao-campo select[b-qck20x3wrm] {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--pub-border);
        border-radius: 10px;
        background: var(--pub-bg);
        color: var(--pub-text);
        font: 400 14px/1.4 inherit
    }

/* ---- mensagens ---- */

/* Palco da conversa: a lista rola por dentro e o aviso de "digitando" fica
   ancorado no rodape, por cima das mensagens. */
.sup-conversa[b-qck20x3wrm] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column
}

.sup-mensagens[b-qck20x3wrm] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px 8px;
    /* Sem trilho de rolagem: no celular o chat ocupa a tela inteira e a barra
       so atrapalha. A rolagem em si (roda, toque, teclado) continua igual. */
    scrollbar-width: none;
    -ms-overflow-style: none
}

    .sup-mensagens[b-qck20x3wrm]::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none
    }

.sup-carregar-mais[b-qck20x3wrm] {
    align-self: center;
    padding: 8px 14px;
    border: 1px solid var(--pub-border);
    border-radius: 999px;
    background: transparent;
    color: var(--pub-muted);
    font: 700 12px/1 inherit;
    cursor: pointer
}

.sup-msg[b-qck20x3wrm] {
    position: relative;
    max-width: min(82%,520px);
    min-width: 0;
    padding: 10px 13px;
    border-radius: 16px;
    background: var(--pub-surface);
    border: 1px solid var(--pub-border)
}

    .sup-msg.minha[b-qck20x3wrm] {
        align-self: flex-end;
        background: var(--pub-accent);
        border-color: transparent;
        color: #fff;
        border-bottom-right-radius: 6px
    }

    .sup-msg.outra[b-qck20x3wrm] {
        align-self: flex-start;
        border-bottom-left-radius: 6px
    }

    /* Mensagem ainda nao lida ganha um fio na lateral — leitura rapida de
       "o que chegou desde a ultima vez". */
    .sup-msg.nova[b-qck20x3wrm]::before {
        content: "";
        position: absolute;
        left: -1px;
        top: 10px;
        bottom: 10px;
        width: 3px;
        border-radius: 999px;
        background: var(--pub-accent)
    }

.sup-msg-autor[b-qck20x3wrm] {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 800;
    color: var(--pub-accent-dark)
}

.sup-msg-texto[b-qck20x3wrm] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere
}

.sup-msg-hora[b-qck20x3wrm] {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    opacity: .75;
    text-align: right
}

    .sup-msg-hora span[class^=fa-][b-qck20x3wrm] {
        margin-left: 5px
    }

.sup-anexos[b-qck20x3wrm] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 8px
}

.sup-anexo[b-qck20x3wrm] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb,currentColor 22%,transparent);
    border-radius: 11px;
    background: color-mix(in srgb,currentColor 8%,transparent);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer
}

.sup-anexo-nome[b-qck20x3wrm] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sup-anexo small[b-qck20x3wrm] {
    flex: 0 0 auto;
    font-size: 11px;
    opacity: .75
}

.sup-anexo-img[b-qck20x3wrm] {
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
    cursor: pointer;
    line-height: 0
}

    .sup-anexo-img img[b-qck20x3wrm] {
        display: block;
        max-width: 100%;
        max-height: 220px;
        object-fit: cover
    }

/* Mesmo canto de sempre — mas colado no rodape da conversa, sobreposto a
   ultima mensagem, sem entrar na rolagem. */
.sup-digitando[b-qck20x3wrm] {
    position: absolute;
    left: 14px;
    bottom: 8px;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 16px;
    background: var(--pub-surface);
    border: 1px solid var(--pub-border)
}

    .sup-digitando span[b-qck20x3wrm] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--pub-muted);
        animation: sup-pulso-b-qck20x3wrm 1.2s infinite ease-in-out
    }

    .sup-digitando span:nth-child(2)[b-qck20x3wrm] { animation-delay: .15s }
    .sup-digitando span:nth-child(3)[b-qck20x3wrm] { animation-delay: .3s }

    .sup-digitando small[b-qck20x3wrm] {
        margin-left: 6px;
        color: var(--pub-muted);
        font-size: 12px
    }

@keyframes sup-pulso-b-qck20x3wrm {
    0%, 60%, 100% { opacity: .3 }
    30% { opacity: 1 }
}

.sup-novas[b-qck20x3wrm] {
    position: absolute;
    left: 50%;
    bottom: 128px;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--pub-text);
    color: var(--pub-surface);
    font: 800 13px/1 inherit;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    cursor: pointer
}

/* ---- campo de mensagem ---- */

.sup-composer[b-qck20x3wrm] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--pub-border);
    background: var(--pub-surface)
}

.sup-erro-envio[b-qck20x3wrm],
.sup-bloqueio[b-qck20x3wrm] {
    margin: 0;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13px
}

.sup-erro-envio[b-qck20x3wrm] {
    background: var(--pub-danger-surface);
    color: var(--pub-danger-text)
}

.sup-bloqueio[b-qck20x3wrm] {
    background: var(--pub-soft);
    color: var(--pub-muted)
}

    .sup-bloqueio.atencao[b-qck20x3wrm] {
        background: color-mix(in srgb,var(--pub-warn) 14%,transparent);
        color: var(--pub-warn)
    }

    .sup-erro-envio span[class^=fa-][b-qck20x3wrm],
    .sup-bloqueio span[class^=fa-][b-qck20x3wrm] {
        margin-right: 7px
    }

.sup-anexos-fila[b-qck20x3wrm] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

/* Arquivo carregado, botao de anexar e caixa de texto ficam em BRANCO (e nao no
   cinza da superficie): o composer precisa se destacar do fio de mensagens
   acima dele, como no chat do painel. A cor do texto e fixada junto — no tema
   escuro o texto padrao e claro e sumiria sobre o branco. */
.sup-anexo-chip[b-qck20x3wrm] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 6px 8px 6px 11px;
    border: 1px solid var(--pub-border);
    border-radius: 999px;
    background: #fff;
    color: #17201d;
    font-size: 12px
}

    .sup-anexo-chip small[b-qck20x3wrm] {
        color: #69716e
    }

    .sup-anexo-chip button[b-qck20x3wrm] {
        width: 24px;
        height: 24px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: #69716e;
        cursor: pointer
    }

.sup-composer-linha[b-qck20x3wrm] {
    display: flex;
    align-items: flex-end;
    gap: 8px
}

.sup-anexar[b-qck20x3wrm] {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--pub-border);
    border-radius: 14px;
    background: #fff;
    color: #69716e;
    cursor: pointer;
    overflow: hidden
}

    .sup-anexar:hover[b-qck20x3wrm] {
        color: var(--pub-accent-dark);
        border-color: var(--pub-accent)
    }

    .sup-anexar.desabilitado[b-qck20x3wrm] {
        opacity: .45;
        cursor: not-allowed
    }

    /* O input real fica invisivel por cima do rotulo: alvo de toque cheio,
       sem depender de label[for] com id gerado. O ::deep e obrigatorio — quem
       renderiza o <input> e o componente InputFile, que nao carrega o atributo
       de escopo desta pagina; sem ele a regra nao casa e o seletor de arquivo
       nativo aparece dentro do botao. */
    .sup-anexar[b-qck20x3wrm]  input[type=file] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: inherit
    }

.sup-composer-linha textarea[b-qck20x3wrm] {
    flex: 1;
    min-width: 0;
    min-height: 46px;
    max-height: 120px;
    padding: 12px 14px;
    border: 1px solid var(--pub-border);
    border-radius: 14px;
    background: #fff;
    color: #17201d;
    font: inherit;
    line-height: 1.45;
    resize: none;
    outline: none
}

    .sup-composer-linha textarea[b-qck20x3wrm]::placeholder {
        color: #8b918e
    }

    .sup-composer-linha textarea:focus[b-qck20x3wrm] {
        border-color: var(--pub-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb,var(--pub-accent) 13%,transparent)
    }

    .sup-composer-linha textarea:disabled[b-qck20x3wrm] {
        opacity: .6
    }

.sup-enviar[b-qck20x3wrm] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 14px;
    background: var(--pub-accent);
    color: #fff;
    font-size: 16px;
    cursor: pointer
}

    .sup-enviar:disabled[b-qck20x3wrm] {
        opacity: .4;
        cursor: not-allowed
    }

.sup-contador[b-qck20x3wrm] {
    align-self: flex-end;
    color: var(--pub-muted);
    font-size: 11px
}

.sup-modo[b-qck20x3wrm] {
    color: var(--pub-muted)
}

/* ---------------------------------------------- duas colunas no desktop */

@media (min-width: 900px) {
    .sup-head-inner[b-qck20x3wrm] {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        padding: 24px 0 26px
    }

    .sup-back[b-qck20x3wrm] {
        order: 2
    }

    .sup-layout[b-qck20x3wrm] {
        display: grid;
        grid-template-columns: minmax(280px,360px) minmax(0,1fr);
        gap: 18px;
        align-items: start
    }

    .sup-lista.oculta-mobile[b-qck20x3wrm] {
        display: flex
    }

    .sup-chat[b-qck20x3wrm] {
        position: static;
        height: min(72vh,720px);
        border: 1px solid var(--pub-border);
        border-radius: 18px;
        overflow: hidden;
        background: var(--pub-surface)
    }

    .sup-chat-voltar[b-qck20x3wrm] {
        display: none
    }

    .sup-mensagens[b-qck20x3wrm] {
        background: var(--pub-bg)
    }

    .sup-novas[b-qck20x3wrm] {
        bottom: 120px
    }

    .sup-acoes[b-qck20x3wrm] {
        flex-direction: row;
        align-items: flex-end;
        flex-wrap: wrap
    }

    .sup-acao-campo[b-qck20x3wrm] {
        width: 190px
    }

    /* Chat unico da empresa: sem lista, o chat vira um painel unico centrado
       (um pouco mais alto que o de duas colunas, ja que ele e a tela toda). */
    .sup-layout.chat-unico[b-qck20x3wrm] {
        display: block
    }

        .sup-layout.chat-unico .sup-chat[b-qck20x3wrm] {
            max-width: 860px;
            margin-inline: auto;
            height: min(78vh,780px)
        }
}

/* ==========================================================================
   Atendimento pessoal: a empresa fala direto com o desenvolvedor do sistema.
   A foto dele aparece no cabecalho do chat, nas boas-vindas e ao lado das
   respostas — e qualquer uma delas amplia em tela cheia ao clicar.
   ========================================================================== */

.sup-dev-foto[b-qck20x3wrm] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid color-mix(in srgb,var(--pub-accent) 55%,transparent);
    border-radius: 50%;
    background: var(--pub-soft);
    overflow: hidden;
    cursor: zoom-in
}

    .sup-dev-foto img[b-qck20x3wrm] {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%
    }

    .sup-dev-foto:hover[b-qck20x3wrm],
    .sup-dev-foto:focus-visible[b-qck20x3wrm] {
        border-color: var(--pub-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb,var(--pub-accent) 18%,transparent)
    }

    .sup-dev-foto.grande[b-qck20x3wrm] {
        width: 96px;
        height: 96px;
        border-width: 3px
    }

.sup-dev-cargo[b-qck20x3wrm] {
    color: var(--pub-muted);
    font-size: 12px;
    font-weight: 700
}

/* Primeira visita: apresentacao de quem atende, antes de qualquer mensagem. */
.sup-boas-vindas[b-qck20x3wrm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 26px auto 10px;
    padding: 24px 20px;
    max-width: 430px;
    border: 1px dashed var(--pub-border);
    border-radius: 20px;
    text-align: center
}

    .sup-boas-vindas strong[b-qck20x3wrm] {
        margin-top: 8px;
        font: 800 17px/1.3 var(--pub-display)
    }

    .sup-boas-vindas > span[b-qck20x3wrm] {
        color: var(--pub-accent);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .1em
    }

    .sup-boas-vindas p[b-qck20x3wrm] {
        margin: 7px 0 0;
        max-width: 38ch;
        color: var(--pub-muted);
        font-size: 13.5px;
        line-height: 1.55
    }

/* Avatar ao lado das respostas do desenvolvedor. O balao ganha margem e a
   foto ocupa esse recuo — nada fica fora do container de rolagem. */
.sup-msg.outra.com-foto[b-qck20x3wrm] {
    margin-left: 44px
}

.sup-msg-foto[b-qck20x3wrm] {
    position: absolute;
    left: -44px;
    bottom: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--pub-border);
    border-radius: 50%;
    background: var(--pub-soft);
    overflow: hidden;
    cursor: zoom-in
}

    .sup-msg-foto img[b-qck20x3wrm] {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%
    }

    .sup-msg-foto:hover[b-qck20x3wrm] {
        border-color: var(--pub-accent)
    }

/* ---- foto ampliada (lightbox) ---- */

.sup-foto-lightbox[b-qck20x3wrm] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    background: rgba(9,11,17,.84);
    backdrop-filter: blur(4px);
    cursor: zoom-out;
    animation: sup-foto-surgir-b-qck20x3wrm .16s ease-out
}

@keyframes sup-foto-surgir-b-qck20x3wrm {
    from { opacity: 0 }
    to { opacity: 1 }
}

.sup-foto-lightbox figure[b-qck20x3wrm] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0;
    max-width: min(92vw,540px);
    cursor: default;
    animation: sup-foto-aproximar-b-qck20x3wrm .16s ease-out
}

@keyframes sup-foto-aproximar-b-qck20x3wrm {
    from { transform: scale(.94) }
    to { transform: scale(1) }
}

.sup-foto-lightbox img[b-qck20x3wrm] {
    width: 100%;
    max-height: 72vh;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 28px 80px rgba(0,0,0,.55)
}

.sup-foto-lightbox figcaption[b-qck20x3wrm] {
    text-align: center;
    color: #fff
}

    .sup-foto-lightbox figcaption strong[b-qck20x3wrm] {
        display: block;
        font: 800 18px/1.3 var(--pub-display)
    }

    .sup-foto-lightbox figcaption span[b-qck20x3wrm] {
        font-size: 13px;
        opacity: .8
    }

.sup-foto-fechar[b-qck20x3wrm] {
    position: absolute;
    top: -12px;
    right: -12px;
    z-index: 1;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #111;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.35)
}

    .sup-foto-fechar:hover[b-qck20x3wrm] {
        transform: scale(1.06)
    }

/* ---- anexo ampliado ---- */

.sup-anexo-modal[b-qck20x3wrm] {
    position: fixed;
    inset: 0;
    z-index: 1320;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(9,11,17,.84);
    backdrop-filter: blur(4px);
    cursor: zoom-out;
    animation: sup-foto-surgir-b-qck20x3wrm .16s ease-out
}

.sup-anexo-modal-card[b-qck20x3wrm] {
    width: min(94vw,980px);
    max-height: min(88vh,760px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: var(--pub-surface);
    color: var(--pub-text);
    box-shadow: 0 28px 80px rgba(0,0,0,.55);
    cursor: default;
    animation: sup-foto-aproximar-b-qck20x3wrm .16s ease-out
}

    .sup-anexo-modal-card.imagem[b-qck20x3wrm] {
        background: #0c0d12;
        color: #fff
    }

.sup-anexo-modal-head[b-qck20x3wrm] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid color-mix(in srgb,currentColor 14%,transparent)
}

    .sup-anexo-modal-head strong[b-qck20x3wrm],
    .sup-anexo-modal-head span[b-qck20x3wrm] {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .sup-anexo-modal-head strong[b-qck20x3wrm] {
        font-size: 14px
    }

    .sup-anexo-modal-head span[b-qck20x3wrm] {
        margin-top: 2px;
        font-size: 11px;
        opacity: .7
    }

.sup-anexo-modal-acoes[b-qck20x3wrm] {
    flex: 0 0 auto;
    display: flex;
    gap: 8px
}

    .sup-anexo-modal-acoes button[b-qck20x3wrm] {
        width: 38px;
        height: 38px;
        border: 1px solid color-mix(in srgb,currentColor 18%,transparent);
        border-radius: 50%;
        background: color-mix(in srgb,currentColor 8%,transparent);
        color: inherit;
        cursor: pointer
    }

.sup-anexo-modal-corpo[b-qck20x3wrm] {
    min-height: 0;
    overflow: auto;
    padding: 14px
}

    .sup-anexo-modal-corpo img[b-qck20x3wrm] {
        display: block;
        max-width: 100%;
        max-height: calc(88vh - 88px);
        margin: 0 auto;
        object-fit: contain
    }

    .sup-anexo-modal-corpo pre[b-qck20x3wrm] {
        margin: 0;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        font: 13px/1.55 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace
    }
/* /Features/Public/UsuarioPublicPage.razor.rz.scp.css */
/* ==========================================================================
   Pagina "Usuário" da area publica. Mobile-first: o layout base e o do
   celular e so cresce em telas maiores. Os tokens --pub-* vem de
   css/public-admin.css (base global de .public-page).
   ========================================================================== */

.usuario-page[b-awl8h8pu7e] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    /* Nenhum filho pode empurrar a pagina para os lados no celular. */
    overflow-x: hidden
}

.ushell[b-awl8h8pu7e] {
    width: min(1180px,calc(100% - 32px));
    margin-inline: auto
}

/* ---------------------------------------------------------------- Cabecalho */

.uhead[b-awl8h8pu7e] {
    /* Ancora a PublicTopBar, que se posiciona em absolute sobre o topo. */
    position: relative;
    padding: 74px 0 26px;
    background: linear-gradient(135deg,#101617 0%,color-mix(in srgb,var(--pub-accent) 62%,#101617) 100%);
    color: #fff
}

.uhead-content[b-awl8h8pu7e] {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.uback[b-awl8h8pu7e] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    max-width: 100%;
    min-height: 40px;
    padding: 8px 14px 8px 12px;
    margin-bottom: 8px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 99px;
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none
}

    .uback span:last-child[b-awl8h8pu7e] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .uback:hover[b-awl8h8pu7e] {
        background: rgba(255,255,255,.2)
    }

.ueyebrow[b-awl8h8pu7e] {
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: 11px;
    font-weight: 800;
    color: rgba(255,255,255,.78)
}

.uhead h1[b-awl8h8pu7e] {
    margin: 0;
    font: 700 28px/1.15 var(--pub-display)
}

/* -------------------------------------------------------------- Conteudo */

.umain[b-awl8h8pu7e] {
    flex: 1;
    padding: 18px 0 max(28px,env(safe-area-inset-bottom))
}

.ugrid[b-awl8h8pu7e] {
    display: grid;
    gap: 16px;
    align-items: start
}

.ucard[b-awl8h8pu7e] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 18px;
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    border-radius: 20px
}

.ucard h2[b-awl8h8pu7e] {
    margin: 0;
    font: 700 19px/1.25 var(--pub-display);
    overflow-wrap: anywhere
}

.usub[b-awl8h8pu7e] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--pub-muted)
}

/* Estados: carregando / erro */
.uestado[b-awl8h8pu7e] {
    align-items: center;
    text-align: center;
    padding: 40px 20px
}

    .uestado p[b-awl8h8pu7e] {
        margin: 0;
        color: var(--pub-muted)
    }

    .uestado > span[class*=fa-][b-awl8h8pu7e] {
        font-size: 30px;
        color: var(--pub-muted)
    }

    .uestado.erro > span[class*=fa-][b-awl8h8pu7e] {
        color: var(--pub-danger)
    }

.uspinner[b-awl8h8pu7e] {
    width: 26px;
    height: 26px;
    border: 3px solid var(--pub-border);
    border-top-color: var(--pub-accent);
    border-radius: 50%;
    animation: uspin-b-awl8h8pu7e .9s linear infinite
}

@keyframes uspin-b-awl8h8pu7e {
    to { transform: rotate(360deg) }
}

/* ------------------------------------------------------------- Meus dados */

.uperfil[b-awl8h8pu7e] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0
}

.uperfil-info[b-awl8h8pu7e] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0
}

.uavatar[b-awl8h8pu7e] {
    flex: 0 0 56px;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--pub-accent);
    color: #fff;
    font: 800 18px var(--pub-display)
}

    .uavatar.sm[b-awl8h8pu7e] {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        font-size: 13px
    }

.udados[b-awl8h8pu7e] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 16px;
    background: var(--pub-soft);
    border-radius: 14px
}

    .udados div[b-awl8h8pu7e] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0
    }

    .udados dt[b-awl8h8pu7e] {
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .09em;
        color: var(--pub-muted)
    }

    .udados dd[b-awl8h8pu7e] {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        overflow-wrap: anywhere
    }

.uacoes[b-awl8h8pu7e] {
    display: flex;
    flex-direction: column;
    gap: 10px
}

    .uacoes .pbtn[b-awl8h8pu7e] {
        width: 100%;
        min-height: 50px
    }

/* --------------------------------------------------- Usuarios da empresa */

.usecao-topo[b-awl8h8pu7e] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px
}

.ucontador[b-awl8h8pu7e] {
    flex: 0 0 auto;
    padding: 5px 11px;
    border-radius: 99px;
    background: var(--pub-soft);
    color: var(--pub-muted);
    font-size: 12px;
    font-weight: 800
}

.ubusca[b-awl8h8pu7e] {
    position: relative;
    display: block
}

    .ubusca > span[class*=fa-][b-awl8h8pu7e] {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--pub-muted);
        font-size: 14px;
        pointer-events: none
    }

    .ubusca input[b-awl8h8pu7e] {
        width: 100%;
        min-height: 50px;
        padding: 12px 14px 12px 42px;
        border: 1px solid var(--pub-border);
        border-radius: 14px;
        background: var(--pub-soft);
        color: var(--pub-text);
        font: inherit;
        outline: none
    }

        .ubusca input:focus[b-awl8h8pu7e] {
            border-color: var(--pub-accent);
            box-shadow: 0 0 0 3px color-mix(in srgb,var(--pub-accent) 13%,transparent)
        }

.uvazio[b-awl8h8pu7e] {
    margin: 0;
    padding: 26px 6px;
    text-align: center;
    color: var(--pub-muted);
    font-size: 14px
}

.ulista[b-awl8h8pu7e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none
}

.ulinha[b-awl8h8pu7e] {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    /* Sem espaco entre as linhas do grid: a faixa de etiquetas ja tem a propria
       margem, e o row-gap so tornaria o item alto demais na lista do celular. */
    gap: 0 12px;
    width: 100%;
    min-height: 68px;
    padding: 12px 14px;
    border: 1px solid var(--pub-border);
    border-radius: 14px;
    background: transparent;
    color: var(--pub-text);
    font: inherit;
    text-align: left;
    cursor: pointer
}

    .ulinha:hover[b-awl8h8pu7e], .ulinha:focus-visible[b-awl8h8pu7e] {
        background: var(--pub-soft);
        border-color: var(--pub-accent)
    }

.ulinha-main[b-awl8h8pu7e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}

    .ulinha-main strong[b-awl8h8pu7e] {
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .ulinha-main small[b-awl8h8pu7e] {
        color: var(--pub-muted);
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

/* No celular as etiquetas descem para a proxima linha, abaixo do nome, para
   nao espremer o texto nem criar rolagem horizontal. */
.ulinha-tags[b-awl8h8pu7e] {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px
}

.ulinha-seta[b-awl8h8pu7e] {
    grid-row: 1;
    grid-column: 3;
    color: var(--pub-muted);
    font-size: 13px
}

.utag[b-awl8h8pu7e] {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space: nowrap
}

    .utag.papel[b-awl8h8pu7e], .utag.gerente[b-awl8h8pu7e] {
        background: color-mix(in srgb,var(--pub-accent) 14%,transparent);
        color: var(--pub-accent-dark)
    }

    .utag.funcionario[b-awl8h8pu7e] {
        background: var(--pub-soft);
        color: var(--pub-text)
    }

    .utag.cliente[b-awl8h8pu7e] {
        background: color-mix(in srgb,var(--pub-success) 14%,transparent);
        color: var(--pub-success)
    }

    .utag.off[b-awl8h8pu7e] {
        background: var(--pub-danger-surface);
        color: var(--pub-danger-text)
    }

    .utag.voce[b-awl8h8pu7e] {
        border: 1px dashed var(--pub-border);
        color: var(--pub-muted)
    }

.umais[b-awl8h8pu7e] {
    width: 100%;
    min-height: 48px
}

/* ------------------------------------------------------------------ Toast */

.utoast[b-awl8h8pu7e] {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 1200;
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 12px 18px;
    border-radius: 14px;
    background: var(--pub-text);
    color: var(--pub-surface);
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 14px 40px rgba(0,0,0,.28)
}

/* ------------------------------------------------------------ Telas largas */

@media (min-width:720px) {
    .ushell[b-awl8h8pu7e] {
        width: min(1180px,calc(100% - 48px))
    }

    .uhead[b-awl8h8pu7e] {
        padding: 84px 0 34px
    }

        .uhead h1[b-awl8h8pu7e] {
            font-size: 34px
        }

    .ucard[b-awl8h8pu7e] {
        padding: 24px;
        gap: 20px
    }

    .uacoes[b-awl8h8pu7e] {
        flex-direction: row
    }

        .uacoes .pbtn[b-awl8h8pu7e] {
            width: auto;
            flex: 1
        }

    /* Com espaco sobrando, nome, contato e etiquetas cabem na mesma linha. */
    .ulinha[b-awl8h8pu7e] {
        grid-template-columns: auto minmax(0,1fr) auto auto
    }

    .ulinha-tags[b-awl8h8pu7e] {
        grid-column: 3;
        margin-top: 0
    }

    .ulinha-seta[b-awl8h8pu7e] {
        grid-column: 4
    }
}

@media (min-width:1024px) {
    .ugrid.com-gestao[b-awl8h8pu7e] {
        grid-template-columns: minmax(320px,380px) minmax(0,1fr);
        gap: 20px
    }
}

@media (prefers-reduced-motion:reduce) {
    .uspinner[b-awl8h8pu7e] {
        animation-duration: 2.5s
    }
}
/* /Features/Support/SuportePhsPage.razor.rz.scp.css */
/* Caixa de entrada do suporte da PHS.

   Celular primeiro: em telas estreitas a tela mostra UMA coisa por vez (a lista
   ou o chat). Do tablet para cima as duas convivem em duas colunas. As cores
   saem dos tokens da marca (css/tema-phs.css), nao de valores soltos. */

.sp-page[b-ldzzqfcha2] {
    --sp-borda: var(--cor-borda, rgba(42, 37, 32, .14));
    --sp-superficie: var(--cor-superficie, #fff);
    --sp-superficie-2: var(--cor-superficie-2, #fbf8f3);
    --sp-texto-suave: var(--cor-texto-suave, #5c5249);
    --sp-acento: var(--cor-assinatura, #b08d57);
}

.sp-sr[b-ldzzqfcha2] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- presenca */

.sp-presenca[b-ldzzqfcha2] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--sp-borda);
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}

.sp-presenca i[b-ldzzqfcha2] {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: currentColor;
}

.sp-presenca.on[b-ldzzqfcha2] {
    color: var(--cor-sucesso, #5b8a5a);
    background: rgba(91, 138, 90, .12);
    border-color: rgba(91, 138, 90, .35);
}

.sp-presenca.on i[b-ldzzqfcha2] {
    box-shadow: 0 0 0 .22rem rgba(91, 138, 90, .22);
}

.sp-presenca.off[b-ldzzqfcha2] {
    color: var(--sp-texto-suave);
    background: var(--sp-superficie-2);
}

/* ---------------------------------------------------------------- metricas */

.sp-metricas[b-ldzzqfcha2] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .85rem;
}

.sp-metrica[b-ldzzqfcha2] {
    padding: .3rem .7rem;
    border-radius: .6rem;
    background: var(--sp-superficie-2);
    border: 1px solid var(--sp-borda);
    font-size: .82rem;
    color: var(--sp-texto-suave);
}

.sp-metrica strong[b-ldzzqfcha2] {
    color: var(--cor-texto, #1a1a1a);
    font-size: .95rem;
}

.sp-metrica.alerta[b-ldzzqfcha2] {
    background: rgba(176, 141, 87, .14);
    border-color: rgba(176, 141, 87, .4);
}

/* ------------------------------------------------------------------- grade */

.sp-grid[b-ldzzqfcha2] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

/* No celular, quem tem uma conversa aberta ve o chat; sem conversa, a lista. */
.sp-grid.com-conversa .sp-lista[b-ldzzqfcha2] {
    display: none;
}

.sp-grid:not(.com-conversa) .sp-chat[b-ldzzqfcha2] {
    display: none;
}

@media (min-width: 900px) {
    .sp-grid[b-ldzzqfcha2] {
        grid-template-columns: minmax(280px, 360px) 1fr;
    }

    .sp-grid.com-conversa .sp-lista[b-ldzzqfcha2],
    .sp-grid:not(.com-conversa) .sp-chat[b-ldzzqfcha2] {
        display: block;
    }
}

.sp-lista[b-ldzzqfcha2],
.sp-chat[b-ldzzqfcha2] {
    background: var(--sp-superficie);
    border: 1px solid var(--sp-borda);
    border-radius: .75rem;
    overflow: hidden;
}

/* -------------------------------------------------------------- lista */

/* Barra de rolagem escondida nas areas que rolam sozinhas (lista e chat): o
   conteudo continua rolando normalmente por roda, toque e teclado — some
   apenas o trilho, que no meio de um chat vira ruido visual. */
.sp-cards[b-ldzzqfcha2],
.sp-mensagens[b-ldzzqfcha2] {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .sp-cards[b-ldzzqfcha2]::-webkit-scrollbar,
    .sp-mensagens[b-ldzzqfcha2]::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

.sp-cards[b-ldzzqfcha2] {
    display: flex;
    flex-direction: column;
    max-height: min(70vh, 640px);
    overflow-y: auto;
}

/* Avatar: logo da empresa ou foto de quem escreveu. O fallback e as iniciais,
   nunca um espaco vazio — a lista fica alinhada mesmo sem imagem nenhuma. */
.sp-avatar[b-ldzzqfcha2] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--sp-superficie-2);
    border: 1px solid var(--sp-borda);
    color: var(--sp-texto-suave);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
}

.sp-avatar img[b-ldzzqfcha2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sp-avatar.pequeno[b-ldzzqfcha2] {
    width: 1.4rem;
    height: 1.4rem;
    font-size: .58rem;
}

.sp-card[b-ldzzqfcha2] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    width: 100%;
    padding: .8rem .9rem;
    border: 0;
    border-bottom: 1px solid var(--sp-borda);
    border-left: 3px solid transparent;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.sp-card:hover[b-ldzzqfcha2] {
    background: var(--sp-superficie-2);
}

.sp-card.ativa[b-ldzzqfcha2] {
    background: rgba(176, 141, 87, .12);
    border-left-color: var(--sp-acento);
}

.sp-card.pendente strong[b-ldzzqfcha2] {
    font-weight: 700;
}

/* A coluna de texto precisa de min-width:0 para o ellipsis funcionar dentro
   do flex — sem isso o nome longo empurra o cartao e some com a data. */
.sp-card-corpo[b-ldzzqfcha2] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.sp-card-topo[b-ldzzqfcha2] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sp-card-preview em[b-ldzzqfcha2] {
    opacity: .8;
}

.sp-card-topo strong[b-ldzzqfcha2] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-badge[b-ldzzqfcha2] {
    flex: none;
    min-width: 1.35rem;
    padding: .05rem .35rem;
    border-radius: 999px;
    background: var(--cor-erro, #c0392b);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
}

.sp-card-preview[b-ldzzqfcha2] {
    display: block;
    font-size: .82rem;
    color: var(--sp-texto-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-card-meta[b-ldzzqfcha2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    color: var(--sp-texto-suave);
}

.sp-card-meta time[b-ldzzqfcha2] {
    margin-left: auto;
}

/* ------------------------------------------------------------------ status */

.sp-status[b-ldzzqfcha2],
.sp-resp[b-ldzzqfcha2] {
    padding: .1rem .45rem;
    border-radius: 999px;
    border: 1px solid var(--sp-borda);
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.sp-status.aberto[b-ldzzqfcha2],
.sp-status.aguardando-phs[b-ldzzqfcha2] {
    color: #8a5a12;
    background: rgba(208, 140, 52, .16);
    border-color: rgba(208, 140, 52, .35);
}

.sp-status.em-atendimento[b-ldzzqfcha2] {
    color: #2f5470;
    background: rgba(65, 96, 122, .14);
    border-color: rgba(65, 96, 122, .32);
}

.sp-status.aguardando-cliente[b-ldzzqfcha2],
.sp-status.resolvido[b-ldzzqfcha2] {
    color: #3f6b3e;
    background: rgba(91, 138, 90, .14);
    border-color: rgba(91, 138, 90, .32);
}

.sp-status.fechado[b-ldzzqfcha2] {
    color: var(--sp-texto-suave);
    background: var(--sp-superficie-2);
}

.sp-resp[b-ldzzqfcha2] {
    color: var(--sp-texto-suave);
    background: var(--sp-superficie-2);
    font-weight: 500;
}

/* --------------------------------------------------------- estados vazios */

.sp-estado[b-ldzzqfcha2],
.sp-vazio[b-ldzzqfcha2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--sp-texto-suave);
}

.sp-estado > span[class*="fa-"][b-ldzzqfcha2],
.sp-vazio > span[class*="fa-"][b-ldzzqfcha2] {
    font-size: 1.75rem;
    color: var(--sp-acento);
}

.sp-vazio p[b-ldzzqfcha2] {
    margin: 0;
    font-size: .85rem;
    max-width: 34ch;
}

.sp-vazio-chat[b-ldzzqfcha2] {
    min-height: 240px;
    justify-content: center;
}

.sp-skeletons[b-ldzzqfcha2] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .9rem;
}

.sp-skeleton[b-ldzzqfcha2] {
    height: 4.25rem;
    border-radius: .5rem;
    background: linear-gradient(90deg, var(--sp-superficie-2) 25%, rgba(0, 0, 0, .05) 50%, var(--sp-superficie-2) 75%);
    background-size: 200% 100%;
    animation: sp-brilho-b-ldzzqfcha2 1.4s infinite;
}

@keyframes sp-brilho-b-ldzzqfcha2 {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sp-skeleton[b-ldzzqfcha2] {
        animation: none;
    }
}

/* -------------------------------------------------------------------- chat */

.sp-chat[b-ldzzqfcha2] {
    display: flex;
    flex-direction: column;
    min-height: min(70vh, 640px);
    max-height: min(70vh, 640px);
    position: relative;
}

.sp-chat-head[b-ldzzqfcha2] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--sp-borda);
    background: var(--sp-superficie-2);
}

.sp-voltar[b-ldzzqfcha2],
.sp-acoes-btn[b-ldzzqfcha2] {
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    border: 1px solid var(--sp-borda);
    background: var(--sp-superficie);
    color: inherit;
    cursor: pointer;
}

.sp-voltar:hover[b-ldzzqfcha2],
.sp-acoes-btn:hover[b-ldzzqfcha2] {
    background: var(--sp-superficie-2);
}

/* Do tablet para cima a lista fica visivel ao lado: a seta perde o sentido. */
@media (min-width: 900px) {
    .sp-voltar[b-ldzzqfcha2] {
        display: none;
    }
}

.sp-chat-titulo[b-ldzzqfcha2] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.sp-chat-titulo strong[b-ldzzqfcha2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-chat-titulo small[b-ldzzqfcha2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

.sp-chat-info[b-ldzzqfcha2] {
    font-size: .72rem;
    color: var(--sp-texto-suave);
}

.sp-acoes[b-ldzzqfcha2] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem;
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--sp-borda);
    background: var(--sp-superficie);
}

.sp-acao-campo[b-ldzzqfcha2] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .75rem;
    color: var(--sp-texto-suave);
}

.sp-acao-campo select[b-ldzzqfcha2] {
    padding: .4rem .5rem;
    border-radius: .4rem;
    border: 1px solid var(--sp-borda);
    background: var(--sp-superficie);
    color: inherit;
    font: inherit;
    font-size: .85rem;
}

/* ---------------------------------------------------------------- mensagens */

/* Palco da conversa: a lista rola por dentro e o aviso de "digitando" fica
   ancorado no rodape, por cima das mensagens. */
.sp-conversa[b-ldzzqfcha2] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sp-mensagens[b-ldzzqfcha2] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .9rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sp-chat-nota[b-ldzzqfcha2] {
    margin: 0;
    padding: .6rem .75rem;
    border-radius: .5rem;
    background: var(--sp-superficie-2);
    border: 1px dashed var(--sp-borda);
    font-size: .82rem;
    color: var(--sp-texto-suave);
    text-align: center;
}

.sp-carregar-mais[b-ldzzqfcha2] {
    align-self: center;
    padding: .35rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--sp-borda);
    background: var(--sp-superficie);
    color: var(--sp-texto-suave);
    font-size: .78rem;
    cursor: pointer;
}

.sp-msg[b-ldzzqfcha2] {
    max-width: min(78%, 46rem);
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .55rem .7rem;
    border-radius: .75rem;
    border: 1px solid var(--sp-borda);
    background: var(--sp-superficie-2);
}

/* Minha = equipe da PHS. Alinhada a direita, como em qualquer chat. */
.sp-msg.minha[b-ldzzqfcha2] {
    align-self: flex-end;
    background: rgba(176, 141, 87, .16);
    border-color: rgba(176, 141, 87, .38);
}

.sp-msg.outra[b-ldzzqfcha2] {
    align-self: flex-start;
}

.sp-msg.nova[b-ldzzqfcha2] {
    box-shadow: inset 3px 0 0 0 var(--cor-erro, #c0392b);
}

.sp-msg-autor[b-ldzzqfcha2] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 700;
    color: var(--sp-texto-suave);
}

.sp-msg-texto[b-ldzzqfcha2] {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .9rem;
    line-height: 1.4;
}

.sp-msg-hora[b-ldzzqfcha2] {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .68rem;
    color: var(--sp-texto-suave);
}

/* ----------------------------------------------------------------- anexos */

.sp-anexos[b-ldzzqfcha2] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .2rem;
}

.sp-anexo[b-ldzzqfcha2],
.sp-anexo-chip[b-ldzzqfcha2] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
    padding: .35rem .55rem;
    border-radius: .5rem;
    border: 1px solid var(--sp-borda);
    background: var(--sp-superficie);
    color: inherit;
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}

.sp-anexo-chip[b-ldzzqfcha2] {
    cursor: default;
}

.sp-anexo-nome[b-ldzzqfcha2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14rem;
}

.sp-anexo-chip button[b-ldzzqfcha2] {
    border: 0;
    background: transparent;
    color: var(--sp-texto-suave);
    cursor: pointer;
    padding: 0 .1rem;
}

.sp-anexo-img[b-ldzzqfcha2] {
    padding: 0;
    border: 1px solid var(--sp-borda);
    border-radius: .5rem;
    background: none;
    cursor: zoom-in;
    overflow: hidden;
    line-height: 0;
}

.sp-anexo-img img[b-ldzzqfcha2] {
    max-width: 12rem;
    max-height: 12rem;
    object-fit: cover;
}

/* ----------------------------------------------------------- modal anexo */

.sp-anexo-modal[b-ldzzqfcha2] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(12, 11, 10, .82);
    backdrop-filter: blur(4px);
    cursor: zoom-out;
}

.sp-anexo-modal-card[b-ldzzqfcha2] {
    width: min(94vw, 60rem);
    max-height: min(88vh, 46rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: .85rem;
    background: var(--sp-superficie);
    color: var(--cor-texto, #1a1a1a);
    box-shadow: 0 1.7rem 5rem rgba(0, 0, 0, .48);
    cursor: default;
}

.sp-anexo-modal-card.imagem[b-ldzzqfcha2] {
    background: #101010;
    color: #fff;
}

.sp-anexo-modal-head[b-ldzzqfcha2] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    padding: .75rem .85rem;
    border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.sp-anexo-modal-head strong[b-ldzzqfcha2],
.sp-anexo-modal-head span[b-ldzzqfcha2] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-anexo-modal-head strong[b-ldzzqfcha2] {
    font-size: .92rem;
}

.sp-anexo-modal-head span[b-ldzzqfcha2] {
    margin-top: .1rem;
    font-size: .72rem;
    opacity: .72;
}

.sp-anexo-modal-acoes[b-ldzzqfcha2] {
    flex: 0 0 auto;
    display: flex;
    gap: .45rem;
}

.sp-anexo-modal-acoes button[b-ldzzqfcha2] {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    background: color-mix(in srgb, currentColor 8%, transparent);
    color: inherit;
    cursor: pointer;
}

.sp-anexo-modal-corpo[b-ldzzqfcha2] {
    min-height: 0;
    overflow: auto;
    padding: .85rem;
}

.sp-anexo-modal-corpo img[b-ldzzqfcha2] {
    display: block;
    max-width: 100%;
    max-height: calc(88vh - 5.5rem);
    margin: 0 auto;
    object-fit: contain;
}

.sp-anexo-modal-corpo pre[b-ldzzqfcha2] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font: .82rem/1.55 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

/* --------------------------------------------------------------- digitando */

/* Mesmo canto de sempre — mas colado no rodape da conversa, sobreposto a
   ultima mensagem, sem entrar na rolagem. */
.sp-digitando[b-ldzzqfcha2] {
    position: absolute;
    left: .9rem;
    bottom: .5rem;
    z-index: 2;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    background: var(--sp-superficie-2);
    border: 1px solid var(--sp-borda);
}

.sp-digitando span[b-ldzzqfcha2] {
    width: .35rem;
    height: .35rem;
    border-radius: 50%;
    background: var(--sp-texto-suave);
    animation: sp-pulo-b-ldzzqfcha2 1s infinite;
}

.sp-digitando span:nth-child(2)[b-ldzzqfcha2] { animation-delay: .15s; }
.sp-digitando span:nth-child(3)[b-ldzzqfcha2] { animation-delay: .3s; }

.sp-digitando small[b-ldzzqfcha2] {
    margin-left: .3rem;
    font-size: .72rem;
    color: var(--sp-texto-suave);
}

@keyframes sp-pulo-b-ldzzqfcha2 {
    0%, 100% { transform: translateY(0); opacity: .5; }
    50% { transform: translateY(-.2rem); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .sp-digitando span[b-ldzzqfcha2] {
        animation: none;
    }
}

.sp-novas[b-ldzzqfcha2] {
    position: absolute;
    left: 50%;
    bottom: 7.5rem;
    transform: translateX(-50%);
    padding: .35rem .8rem;
    border-radius: 999px;
    border: 0;
    background: var(--cor-primaria, #1a1a1a);
    color: var(--cor-primaria-contraste, #f5f1ea);
    font-size: .78rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

/* -------------------------------------------------------------- composer */

.sp-composer[b-ldzzqfcha2] {
    border-top: 1px solid var(--sp-borda);
    padding: .6rem .9rem .75rem;
    background: var(--sp-superficie);
}

.sp-erro[b-ldzzqfcha2] {
    margin: 0 0 .5rem;
    font-size: .8rem;
    color: var(--cor-erro, #c0392b);
}

.sp-anexos-fila[b-ldzzqfcha2] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .5rem;
}

.sp-composer-linha[b-ldzzqfcha2] {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
}

.sp-anexar[b-ldzzqfcha2] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid var(--sp-borda);
    background: var(--sp-superficie-2);
    color: var(--sp-texto-suave);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.sp-anexar.desabilitado[b-ldzzqfcha2] {
    opacity: .5;
    cursor: not-allowed;
}

/* O InputFile real fica invisivel sobre o rotulo: o alvo de toque continua
   sendo o circulo inteiro, que no celular e o que importa. */
.sp-anexar[b-ldzzqfcha2]  input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: inherit;
}

.sp-composer-linha textarea[b-ldzzqfcha2] {
    flex: 1;
    min-height: 2.4rem;
    max-height: 8.75rem;
    padding: .55rem .7rem;
    border-radius: 1.2rem;
    border: 1px solid var(--sp-borda);
    background: var(--sp-superficie);
    color: inherit;
    font: inherit;
    font-size: .9rem;
    resize: none;
}

.sp-composer-linha textarea:focus[b-ldzzqfcha2] {
    outline: 2px solid var(--sp-acento);
    outline-offset: 1px;
}

.sp-enviar[b-ldzzqfcha2] {
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 0;
    background: var(--cor-primaria, #1a1a1a);
    color: var(--cor-primaria-contraste, #f5f1ea);
    cursor: pointer;
}

.sp-enviar:disabled[b-ldzzqfcha2] {
    opacity: .45;
    cursor: not-allowed;
}

.sp-spinner[b-ldzzqfcha2] {
    display: inline-block;
    width: .9rem;
    height: .9rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: sp-gira-b-ldzzqfcha2 .7s linear infinite;
}

@keyframes sp-gira-b-ldzzqfcha2 {
    to { transform: rotate(360deg); }
}

.sp-contador[b-ldzzqfcha2] {
    display: block;
    margin-top: .35rem;
    font-size: .7rem;
    color: var(--sp-texto-suave);
    text-align: right;
}
/* /Features/Theme/IdentidadeVisualPrevia.razor.rz.scp.css */
/* Acompanha a rolagem do formulario, que e mais alto que o painel */
.previa-wrapper[b-41b3r04eyu] {
    position: sticky;
    top: 76px;
}

.previa[b-41b3r04eyu] {
    container-type: inline-size;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: var(--fonte-corpo);
}

.previa-appbar[b-41b3r04eyu] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 1rem;
    background: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
    border-bottom: 2px solid var(--cor-acento);
}

.previa-logo[b-41b3r04eyu] {
    height: 24px;
    width: auto;
}

.previa-titulo[b-41b3r04eyu] {
    font-family: var(--fonte-titulo);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.previa-spacer[b-41b3r04eyu] {
    flex: 1;
}

.previa-corpo[b-41b3r04eyu] {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
}

.previa-drawer[b-41b3r04eyu] {
    background: var(--mud-palette-drawer-background);
    color: var(--mud-palette-drawer-text);
    border-right: 1px solid var(--cor-borda);
    padding-top: .5rem;
}

.previa-conteudo[b-41b3r04eyu] {
    padding: .75rem;
    min-width: 0;
}

.previa-linha[b-41b3r04eyu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.previa-vitrine[b-41b3r04eyu] {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    padding: 1rem;
}

.previa-vitrine-titulo[b-41b3r04eyu] {
    font-family: var(--fonte-titulo);
    font-size: 1.15em;
}

.previa-vitrine-texto[b-41b3r04eyu] {
    color: var(--cor-texto-suave);
}

.previa-vitrine-preco[b-41b3r04eyu] {
    font-weight: 600;
    color: var(--cor-acento);
}

.previa-vitrine-botao[b-41b3r04eyu] {
    background: var(--cor-acento);
    color: var(--mud-palette-tertiary-text);
    border-radius: 8px;
    padding: .4rem .9rem;
}

.previa-estados[b-41b3r04eyu] {
    margin-top: .75rem;
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

/* Painel estreito (o que importa e a largura dele, nao a da tela):
   menu de exemplo vira uma faixa acima do conteudo */
@container (max-width: 560px) {
    .previa-corpo[b-41b3r04eyu] {
        grid-template-columns: minmax(0, 1fr);
    }

    .previa-drawer[b-41b3r04eyu] {
        border-right: 0;
        border-bottom: 1px solid var(--cor-borda);
        padding-top: 0;
    }

    .previa-drawer .mud-navmenu[b-41b3r04eyu] {
        display: flex;
        flex-wrap: wrap;
    }

    .previa-drawer .mud-nav-item[b-41b3r04eyu] {
        width: auto;
    }
}

/* Em telas estreitas o painel vem abaixo do formulario, sem fixar */
@media (max-width: 959px) {
    .previa-wrapper[b-41b3r04eyu] {
        position: static;
    }

    .previa[b-41b3r04eyu] {
        max-height: none;
    }
}
/* /Shared/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout — estilos próprios do shell do app.
   (As cores/tokens da marca vêm de css/tema-phs.css.)
   Os ajustes que precisam alcançar componentes MudBlazor renderizados
   ficam em css/app.css, pois CSS isolado não atravessa componentes
   filhos sem ::deep e o conteúdo deste layout é todo MudBlazor. */

.main-content[b-8fin0bdx4y] {
    min-height: 100%;
}