/* ==========================================================================
   Formularios da area autenticada da pagina publica (modais de login/CRUD).
   Escopado sob .public-page para herdar as variaveis --pub-* e o dark mode.
   Compartilhado entre os modais para nao duplicar CSS isolado por componente.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens --pub-*: base de QUALQUER tela publica, nao so da vitrine. Ficam
   aqui (e nao no CSS isolado de uma pagina) porque as regras abaixo e os
   componentes compartilhados (.pmodal, .pcart, .pbtn) dependem deles.
   A vitrine repete a mesma declaracao no proprio CSS isolado — valores
   identicos, e o isolado vence por especificidade sem mudar nada.
   -------------------------------------------------------------------------- */
.public-page {
    --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);
    --pub-danger: #c0392b;
    --pub-danger-surface: #fff0ee;
    --pub-danger-text: #a62d20;
    --pub-warn: #8a5a10;
    --pub-success: #1f8b45;
    --pub-success-surface: #e2f7e8;
    min-height: 100%;
    background: var(--pub-bg);
    color: var(--pub-text);
    font: 400 15px/1.6 var(--fonte-corpo,"Inter",sans-serif)
}

    .public-page[data-theme=dark] {
        --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);
        --pub-danger: #e8887b;
        --pub-danger-surface: #3a201d;
        --pub-danger-text: #f0a99f;
        --pub-warn: #d9a45a;
        --pub-success: #5fbf85;
        --pub-success-surface: #16301f
    }

    .public-page * {
        box-sizing: border-box
    }

.public-page .pform {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.public-page .pform-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.public-page .pform label {
    display: block;
    font-size: 13px;
    font-weight: 700
}

.public-page .pform label small.hint {
    display: block;
    font-weight: 400;
    color: var(--pub-muted);
    margin-top: 2px
}

.public-page .pform input[type=text],
.public-page .pform input[type=email],
.public-page .pform input[type=tel],
.public-page .pform input[type=url],
.public-page .pform input[type=number],
.public-page .pform input[type=date],
.public-page .pform input[type=password],
.public-page .pform input[type=search],
.public-page .pform select,
.public-page .pform textarea {
    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;
    outline: none
}

    .public-page .pform input:focus,
    .public-page .pform select:focus,
    .public-page .pform textarea:focus {
        border-color: var(--pub-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb,var(--pub-accent) 13%,transparent)
    }

.public-page .pform .field-error {
    display: block;
    margin-top: 6px;
    font-weight: 400;
    font-size: 12px;
    color: var(--pub-danger)
}

.public-page .pform-check {
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-weight: 600 !important;
    cursor: pointer
}

    .public-page .pform-check input {
        width: 18px;
        height: 18px;
        accent-color: var(--pub-accent)
    }

.public-page .pform-alert {
    padding: 12px 14px;
    background: var(--pub-danger-surface);
    color: var(--pub-danger-text);
    border-radius: 10px;
    font-size: 13px
}

.public-page .pform-success {
    padding: 12px 14px;
    background: var(--pub-success-surface);
    color: var(--pub-success);
    border-radius: 10px;
    font-size: 13px
}

/* Detalhe somente leitura dentro de um modal (rotulo em cima, valor embaixo) */
.public-page .pdetalhe {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 16px;
    padding: 16px;
    background: var(--pub-soft);
    border-radius: 12px
}

    .public-page .pdetalhe div {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0
    }

    .public-page .pdetalhe dt {
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .09em;
        color: var(--pub-muted)
    }

    .public-page .pdetalhe dd {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        overflow-wrap: anywhere
    }

/* Campo de senha com botao mostrar/ocultar */
.public-page .pform-senha {
    position: relative;
    display: block
}

    .public-page .pform-senha input {
        padding-right: 52px !important
    }

.public-page .pform-senha-toggle {
    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
}

    .public-page .pform-senha-toggle:hover {
        color: var(--pub-text)
    }

/* Secao recolhivel do formulario: mantem a tela curta no celular exibindo
   um grupo de campos (endereco, dados avancados) so quando pedido. */
.public-page .pform-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid var(--pub-border);
    border-radius: 12px;
    background: transparent;
    color: var(--pub-text);
    font: inherit;
    font-weight: 700;
    font-size: 13px;
    text-align: left;
    cursor: pointer
}

    .public-page .pform-toggle:hover {
        border-color: var(--pub-accent)
    }

    .public-page .pform-toggle .pform-toggle-seta {
        margin-left: auto;
        color: var(--pub-muted)
    }

    .public-page .pform-toggle small {
        font-weight: 400;
        color: var(--pub-muted)
    }

.public-page .pform-secao {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--pub-border);
    border-radius: 12px;
    background: color-mix(in srgb,var(--pub-soft) 55%,transparent)
}

/* Botoes dos rodapes de modal */
.public-page .pbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 11px 18px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-weight: 800;
    cursor: pointer
}

    .public-page .pbtn:disabled {
        opacity: .45;
        cursor: not-allowed
    }

.public-page .pbtn-primary {
    background: var(--pub-accent);
    color: #fff;
    flex: 1
}

.public-page .pbtn-secondary {
    background: var(--pub-soft);
    color: var(--pub-text)
}

.public-page .pbtn-danger {
    background: transparent;
    color: var(--pub-danger);
    border: 1px solid color-mix(in srgb,var(--pub-danger) 35%,transparent)
}

.public-page .pbtn-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: pbtn-spin .8s linear infinite
}

@keyframes pbtn-spin {
    to { transform: rotate(360deg) }
}

/* Editor de listas de texto (beneficios, limites, especialidades, redes) */
.public-page .plist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 7px
}

.public-page .plist-item {
    display: flex;
    gap: 8px;
    align-items: center
}

    .public-page .plist-item input {
        margin-top: 0 !important;
        flex: 1
    }

    .public-page .plist-item .plist-remove {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        border: 1px solid var(--pub-border);
        border-radius: 10px;
        background: transparent;
        color: var(--pub-danger);
        cursor: pointer
    }

.public-page .plist-add {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px dashed var(--pub-border);
    border-radius: 10px;
    background: transparent;
    color: var(--pub-accent-dark);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer
}

    .public-page .plist-add:hover {
        border-color: var(--pub-accent)
    }

/* Lista de opcoes marcaveis (servicos do combo, profissionais do servico) */
.public-page .pcheck-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow: auto;
    margin-top: 7px;
    padding: 6px;
    border: 1px solid var(--pub-border);
    border-radius: 12px
}

    .public-page .pcheck-list label {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        border-radius: 9px;
        font-weight: 600;
        cursor: pointer
    }

        .public-page .pcheck-list label:hover {
            background: var(--pub-soft)
        }

        .public-page .pcheck-list label input {
            width: 17px;
            height: 17px;
            accent-color: var(--pub-accent)
        }

        .public-page .pcheck-list label small {
            margin-left: auto;
            color: var(--pub-muted);
            font-weight: 400
        }

/* Abas/tabs simples dos modais com secoes */
.public-page .ptabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px
}

    .public-page .ptabs button {
        padding: 8px 13px;
        border: 1px solid var(--pub-border);
        border-radius: 99px;
        background: transparent;
        color: var(--pub-muted);
        font-size: 12px;
        font-weight: 800;
        cursor: pointer
    }

        .public-page .ptabs button.active {
            background: var(--pub-text);
            border-color: var(--pub-text);
            color: var(--pub-surface)
        }

/* Auxiliares dos modais administrativos */
.public-page .modal-loading {
    padding: 26px 6px;
    text-align: center;
    color: var(--pub-muted)
}

.public-page .ativo-check {
    align-self: end;
    padding-bottom: 12px
}

.public-page .ordem-badge {
    margin-left: 8px;
    font-size: 10px;
    font-weight: 900;
    color: var(--pub-accent)
}

.public-page .combo-total {
    margin: 0;
    font-size: 13px;
    color: var(--pub-muted)
}

    .public-page .combo-total.inline {
        display: block;
        margin-top: 6px;
        font-weight: 500
    }

.public-page .hint-senha,
.public-page .hint-nova-foto,
.public-page .hint-imagens,
.public-page .hint-horarios {
    margin: 0;
    font-size: 12px;
    color: var(--pub-muted);
    line-height: 1.5
}

.public-page .horario-linha {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    gap: 12px;
    align-items: center
}

    .public-page .horario-linha strong {
        font-size: 13px
    }

    .public-page .horario-linha input[type=text] {
        margin-top: 0
    }

.public-page .plist-item.rede-item {
    display: grid;
    grid-template-columns: 1fr 1.6fr 40px
}

@media (max-width:600px) {
    .public-page .pform-row {
        grid-template-columns: 1fr
    }

    .public-page .ativo-check {
        padding-bottom: 0
    }

    .public-page .horario-linha {
        grid-template-columns: 78px 1fr auto;
        gap: 8px
    }

    .public-page .plist-item.rede-item {
        grid-template-columns: 1fr;
        gap: 6px
    }

        .public-page .plist-item.rede-item .plist-remove {
            justify-self: end
        }
}

@media (prefers-reduced-motion:reduce) {
    .public-page .pbtn-spinner {
        animation-duration: 2s
    }
}

/* ==========================================================================
   Tela de configuracoes (/configuracoes e suas secoes). Estilos cfg-* sao
   globais (escopados sob .public-page) para que cada secao possa ser um
   componente proprio e ainda usar os mesmos cartoes, campos e estados.
   ========================================================================== */
/* Tela de configurações da vitrine. Mobile-first: a lista funciona como um
   painel de ajustes de celular, com navegação por seções e botão voltar. */

.public-page.cfg-page {
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: 44px;
    overflow-x: hidden
}

.public-page .cfg-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

.public-page .cfg-head {
    background: var(--pub-surface);
    border-bottom: 1px solid var(--pub-border)
}

.public-page .cfg-head-inner {
    width: min(940px,calc(100% - 32px));
    margin-inline: auto;
    padding: 16px 0 20px;
    display: flex;
    flex-direction: column;
    gap: 14px
}

.public-page .cfg-back {
    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;
    text-decoration: none;
    cursor: pointer
}

    .public-page .cfg-back:hover {
        color: var(--pub-text);
        border-color: var(--pub-accent)
    }

.public-page .cfg-eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: 11px;
    font-weight: 800;
    color: var(--pub-accent)
}

.public-page .cfg-head-title h1 {
    margin: 5px 0 0;
    font: 800 clamp(24px,5vw,34px)/1.15 var(--pub-display)
}

.public-page .cfg-head-title p {
    margin: 6px 0 0;
    color: var(--pub-muted);
    font-size: 14px
}

.public-page .cfg-main {
    width: min(940px,calc(100% - 32px));
    margin-inline: auto;
    padding-top: 18px
}

.public-page .cfg-skeletons,
.public-page .cfg-lista,
.public-page .cfg-geral {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.public-page .cfg-skeleton {
    height: 78px;
    border-radius: 14px;
    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: cfg-shimmer 1.4s ease-in-out infinite
}

@keyframes cfg-shimmer {
    0% { background-position: 100% 0 }
    100% { background-position: 0 0 }
}

.public-page .cfg-state {
    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
}

    .public-page .cfg-state > span:first-child {
        font-size: 30px;
        color: var(--pub-accent)
    }

    .public-page .cfg-state h2 {
        margin: 4px 0 0;
        font: 800 19px/1.25 var(--pub-display)
    }

    .public-page .cfg-state p {
        margin: 0;
        max-width: 46ch;
        color: var(--pub-muted);
        font-size: 14px
    }

.public-page .cfg-state-acao {
    margin-top: 10px;
    text-decoration: none
}

.public-page .cfg-link {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) auto auto;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 13px 14px;
    border: 1px solid var(--pub-border);
    border-radius: 16px;
    background: var(--pub-surface);
    color: var(--pub-text);
    text-decoration: none
}

    .public-page .cfg-link:hover {
        border-color: var(--pub-accent)
    }

.public-page .cfg-link-icone {
    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
}

.public-page .cfg-link-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}

    .public-page .cfg-link-texto strong {
        font-size: 15px;
        font-weight: 800;
        overflow-wrap: anywhere
    }

    .public-page .cfg-link-texto small {
        color: var(--pub-muted);
        font-size: 12px;
        line-height: 1.35
    }

.public-page .cfg-link-status {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--pub-soft);
    color: var(--pub-muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap
}

.public-page .cfg-link-seta {
    color: var(--pub-muted);
    font-size: 12px
}

.public-page .cfg-card {
    padding: 16px;
    border: 1px solid var(--pub-border);
    border-radius: 18px;
    background: var(--pub-surface)
}

.public-page .cfg-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px
}

    .public-page .cfg-card-head h2 {
        margin: 0;
        font: 800 17px/1.25 var(--pub-display)
    }

    .public-page .cfg-card-head p {
        margin: 4px 0 0;
        color: var(--pub-muted);
        font-size: 13px;
        line-height: 1.45
    }

.public-page .cfg-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px
}

.public-page .cfg-campo {
    display: block;
    min-width: 0;
    font-size: 13px;
    font-weight: 800
}

    .public-page .cfg-campo > span {
        display: block
    }

    .public-page .cfg-campo input,
    .public-page .cfg-campo select,
    .public-page .cfg-campo textarea {
        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;
        outline: none
    }

        .public-page .cfg-campo input:focus,
        .public-page .cfg-campo select:focus,
        .public-page .cfg-campo textarea:focus {
            border-color: var(--pub-accent);
            box-shadow: 0 0 0 3px color-mix(in srgb,var(--pub-accent) 13%,transparent)
        }

    .public-page .cfg-campo small {
        display: block;
        margin-top: 5px;
        color: var(--pub-muted);
        font-size: 12px;
        font-weight: 500
    }

.public-page .cfg-hint {
    margin: 12px 0 0;
    color: var(--pub-muted);
    font-size: 13px
}

    .public-page .cfg-hint span {
        margin-right: 6px;
        color: var(--pub-accent)
    }

.public-page .cfg-switches {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px
}

.public-page .cfg-switch {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--pub-border);
    border-radius: 14px;
    cursor: pointer
}

    .public-page .cfg-switch input {
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        margin-top: 2px;
        accent-color: var(--pub-accent)
    }

    .public-page .cfg-switch span {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0
    }

    .public-page .cfg-switch strong {
        font-size: 14px;
        font-weight: 800
    }

    .public-page .cfg-switch small {
        color: var(--pub-muted);
        font-size: 12px;
        line-height: 1.4
    }

.public-page .cfg-save-indicador,
.public-page .cfg-campo small.salvando,
.public-page .cfg-campo small.salvo,
.public-page .cfg-campo small.erro {
    font-size: 12px;
    font-weight: 800
}

.public-page .cfg-save-indicador.salvando,
.public-page .cfg-campo small.salvando {
    color: var(--pub-warn)
}

.public-page .cfg-save-indicador.salvo,
.public-page .cfg-campo small.salvo {
    color: var(--pub-success)
}

.public-page .cfg-save-indicador.erro,
.public-page .cfg-campo small.erro {
    color: var(--pub-danger)
}

.public-page .cfg-campo em {
    color: var(--pub-muted);
    font-style: normal;
    font-weight: 500
}

.public-page .cfg-campo input[aria-invalid="true"],
.public-page .cfg-campo textarea[aria-invalid="true"] {
    border-color: var(--pub-danger)
}

.public-page .cfg-aviso {
    display: flex;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb,var(--pub-warn) 12%,transparent);
    color: var(--pub-text);
    font-size: 13px;
    line-height: 1.45
}

    .public-page .cfg-aviso span {
        margin-top: 2px;
        color: var(--pub-warn)
    }

/* Barra de salvar: so aparece com alteracoes pendentes e fica presa ao pe da
   tela, para o dono nao precisar rolar ate o fim do formulario. E fixed, nao
   sticky: o overflow-x da .public-page anula o sticky. */
.public-page .cfg-form-empresa,
.public-page .cfg-form-servico {
    padding-bottom: 96px
}

.public-page .cfg-acoes {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: min(940px,calc(100% - 32px));
    box-sizing: border-box;
    z-index: 20;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--pub-border);
    border-radius: 16px;
    background: var(--pub-surface);
    box-shadow: 0 10px 30px rgba(0,0,0,.18)
}

    .public-page .cfg-acoes.visivel {
        display: flex
    }

.public-page .cfg-acoes-texto {
    flex: 1 1 auto;
    color: var(--pub-muted);
    font-size: 13px;
    font-weight: 700
}

    .public-page .cfg-acoes-texto.salvo {
        color: var(--pub-success)
    }

.public-page .cfg-campo textarea {
    resize: vertical;
    min-height: 84px
}

/* Secao Servicos: busca + botao novo, lista com pausar/editar/excluir. */
.public-page .cfg-servicos-barra {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.public-page .cfg-busca {
    display: flex;
    flex: 1 1 220px;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0 14px;
    border: 1px solid var(--pub-border);
    border-radius: 12px;
    background: var(--pub-surface);
    color: var(--pub-muted)
}

    .public-page .cfg-busca input {
        flex: 1;
        min-width: 0;
        padding: 12px 0;
        border: 0;
        background: transparent;
        color: var(--pub-text);
        font: inherit;
        outline: none
    }

.public-page .cfg-novo {
    flex: 0 0 auto
}

.public-page .cfg-mensagem {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb,var(--pub-success) 12%,transparent);
    color: var(--pub-text);
    font-size: 13px;
    line-height: 1.45
}

    .public-page .cfg-mensagem span {
        margin-top: 2px;
        color: var(--pub-success)
    }

.public-page .cfg-vazio {
    padding: 28px 16px;
    border: 1px dashed var(--pub-border);
    border-radius: 18px;
    color: var(--pub-muted);
    text-align: center
}

    .public-page .cfg-vazio > span {
        display: block;
        margin-bottom: 8px;
        color: var(--pub-accent);
        font-size: 22px
    }

    .public-page .cfg-vazio strong {
        display: block;
        color: var(--pub-text)
    }

    .public-page .cfg-vazio p {
        margin: 4px 0 0;
        font-size: 13px
    }

.public-page .cfg-itens {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none
}

.public-page .cfg-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 12px 14px;
    border: 1px solid var(--pub-border);
    border-radius: 16px;
    background: var(--pub-surface)
}

    .public-page .cfg-item.inativo .cfg-item-texto strong {
        color: var(--pub-muted)
    }

.public-page .cfg-item-texto {
    flex: 1 1 200px;
    min-width: 0
}

    .public-page .cfg-item-texto strong {
        display: block;
        overflow-wrap: anywhere
    }

    .public-page .cfg-item-texto small {
        display: block;
        margin-top: 3px;
        color: var(--pub-muted);
        font-size: 12px
    }

.public-page .cfg-item-status {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--pub-soft);
    color: var(--pub-muted);
    font-size: 11px;
    font-weight: 800
}

.public-page .cfg-item-acoes,
.public-page .cfg-item-confirmar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto
}

.public-page .cfg-item-confirmar {
    flex-wrap: wrap;
    justify-content: flex-end;
    font-size: 13px;
    font-weight: 700
}

    .public-page .cfg-item-confirmar .pbtn {
        flex: 0 0 auto
    }

.public-page .cfg-toggle {
    display: inline-flex;
    padding: 6px;
    cursor: pointer
}

    .public-page .cfg-toggle input {
        appearance: none;
        position: relative;
        width: 40px;
        height: 22px;
        margin: 0;
        border-radius: 999px;
        background: var(--pub-border);
        cursor: pointer;
        transition: background .15s
    }

        .public-page .cfg-toggle input::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #fff;
            transition: transform .15s
        }

        .public-page .cfg-toggle input:checked {
            background: var(--pub-success)
        }

            .public-page .cfg-toggle input:checked::after {
                transform: translateX(18px)
            }

        .public-page .cfg-toggle input:focus-visible {
            outline: 2px solid var(--pub-accent);
            outline-offset: 2px
        }

.public-page .cfg-icone-btn {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--pub-border);
    border-radius: 12px;
    background: var(--pub-soft);
    color: var(--pub-text);
    cursor: pointer
}

    .public-page .cfg-icone-btn.perigo {
        color: var(--pub-danger)
    }

    .public-page .cfg-icone-btn:disabled {
        opacity: .45;
        cursor: not-allowed
    }

@media (min-width: 720px) {
    .public-page .cfg-campo-largo {
        grid-column: 1 / -1
    }

    .public-page .cfg-head-inner {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        padding: 24px 0 26px
    }

    .public-page .cfg-back {
        order: 2
    }

    .public-page .cfg-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media (max-width: 520px) {
    .public-page .cfg-link {
        grid-template-columns: 40px minmax(0,1fr) auto
    }

    .public-page .cfg-link-icone {
        width: 40px;
        height: 40px
    }

    .public-page .cfg-link-status {
        display: none
    }
}

@media (prefers-reduced-motion:reduce) {
    .public-page .cfg-skeleton {
        animation: none
    }
}

/* --------------------------------------------------------------------------
   Secao Funcionarios: um cartao por pessoa com o resumo do que falta para ela
   aparecer na agenda (horarios e servicos) e o interruptor de ativo.
   -------------------------------------------------------------------------- */
.public-page .cfg-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.public-page .cfg-toolbar-acao {
    flex: 0 0 auto;
    text-decoration: none
}

.public-page .cfg-passos h2 {
    margin: 0 0 12px;
    font: 800 18px/1.25 var(--pub-display)
}

.public-page .cfg-passos ol {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: passo
}

.public-page .cfg-passos li {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    gap: 4px 12px;
    counter-increment: passo
}

    .public-page .cfg-passos li::before {
        content: counter(passo);
        grid-row: 1 / span 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: color-mix(in srgb,var(--pub-accent) 13%,transparent);
        color: var(--pub-accent-dark);
        font-weight: 900
    }

    .public-page .cfg-passos li strong {
        font-size: 15px
    }

    .public-page .cfg-passos li small {
        color: var(--pub-muted);
        font-size: 13px;
        line-height: 1.4
    }

.public-page .cfg-pessoa {
    display: flex;
    flex-direction: column;
    gap: 14px
}

    .public-page .cfg-pessoa.inativa {
        background: color-mix(in srgb,var(--pub-surface) 70%,var(--pub-soft))
    }

        .public-page .cfg-pessoa.inativa .cfg-avatar,
        .public-page .cfg-pessoa.inativa .cfg-pessoa-info h2 {
            opacity: .65
        }

.public-page .cfg-pessoa-topo {
    display: grid;
    grid-template-columns: 52px minmax(0,1fr) auto;
    align-items: center;
    gap: 12px
}

.public-page .cfg-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--pub-soft)
}

.public-page .cfg-avatar-iniciais {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb,var(--pub-accent) 16%,transparent);
    color: var(--pub-accent-dark);
    font-size: 17px;
    font-weight: 900;
    letter-spacing: .02em
}

.public-page .cfg-pessoa-info {
    min-width: 0
}

    .public-page .cfg-pessoa-info h2 {
        margin: 0;
        font: 800 17px/1.25 var(--pub-display);
        overflow-wrap: anywhere
    }

    .public-page .cfg-pessoa-info p {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
        margin: 4px 0 0;
        color: var(--pub-muted);
        font-size: 13px
    }

.public-page .cfg-badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--pub-soft);
    color: var(--pub-muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap
}

    .public-page .cfg-badge.gerente {
        background: color-mix(in srgb,var(--pub-accent) 14%,transparent);
        color: var(--pub-accent-dark)
    }

    .public-page .cfg-badge.inativo {
        background: color-mix(in srgb,var(--pub-warn) 14%,transparent);
        color: var(--pub-warn)
    }

.public-page .cfg-pessoa-cargo {
    overflow-wrap: anywhere
}

.public-page .cfg-pessoa-resumos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px
}

.public-page .cfg-resumo {
    display: grid;
    grid-template-columns: 36px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--pub-border);
    border-radius: 14px;
    background: var(--pub-soft);
    color: var(--pub-text);
    font: inherit;
    text-align: left;
    cursor: pointer
}

    .public-page .cfg-resumo:hover {
        border-color: var(--pub-accent)
    }

    .public-page .cfg-resumo.alerta {
        border-color: color-mix(in srgb,var(--pub-warn) 55%,transparent);
        background: color-mix(in srgb,var(--pub-warn) 9%,var(--pub-surface))
    }

.public-page .cfg-resumo-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--pub-surface);
    color: var(--pub-accent-dark);
    font-size: 15px
}

.public-page .cfg-resumo.alerta .cfg-resumo-icone {
    color: var(--pub-warn)
}

.public-page .cfg-resumo-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}

    .public-page .cfg-resumo-texto strong {
        font-size: 13px;
        font-weight: 800
    }

    .public-page .cfg-resumo-texto small {
        color: var(--pub-muted);
        font-size: 12px;
        line-height: 1.35
    }

.public-page .cfg-resumo.alerta .cfg-resumo-texto small {
    color: var(--pub-text)
}

.public-page .cfg-resumo-acao {
    color: var(--pub-accent-dark);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap
}

.public-page .cfg-pessoa-ativo {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer
}

    .public-page .cfg-pessoa-ativo input {
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        margin: 0;
        accent-color: var(--pub-accent)
    }

    .public-page .cfg-pessoa-ativo span {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0
    }

    .public-page .cfg-pessoa-ativo strong {
        font-size: 13px;
        font-weight: 800
    }

    .public-page .cfg-pessoa-ativo small {
        color: var(--pub-muted);
        font-size: 12px
    }

@media (min-width: 720px) {
    .public-page .cfg-toolbar {
        flex-direction: row;
        align-items: center
    }

    .public-page .cfg-toolbar-acao {
        margin-left: auto
    }

    .public-page .cfg-pessoa-resumos {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

/* Primeiros passos (topo da lista de configuracoes) */
.public-page .cfg-primeiros {
    margin-bottom: 12px;
    border-color: color-mix(in srgb,var(--pub-accent) 45%,var(--pub-border))
}

.public-page .cfg-primeiros-contagem {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb,var(--pub-accent) 14%,transparent);
    color: var(--pub-accent-dark);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap
}

.public-page .cfg-primeiros-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none
}

    .public-page .cfg-primeiros-lista li {
        display: grid;
        grid-template-columns: 32px minmax(0,1fr);
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid var(--pub-border);
        border-radius: 12px;
        background: var(--pub-soft)
    }

        .public-page .cfg-primeiros-lista li.feito {
            opacity: .7
        }

    .public-page .cfg-primeiros-lista a {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        color: var(--pub-text);
        text-decoration: none
    }

        .public-page .cfg-primeiros-lista a strong {
            font-size: 14px;
            font-weight: 800
        }

        .public-page .cfg-primeiros-lista a small {
            color: var(--pub-muted);
            font-size: 12px;
            line-height: 1.35
        }

        .public-page .cfg-primeiros-lista li.feito a strong {
            text-decoration: line-through
        }

.public-page .cfg-primeiros-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pub-surface);
    color: var(--pub-accent-dark);
    font-size: 13px
}

    .public-page .cfg-primeiros-lista li.feito .cfg-primeiros-icone {
        background: var(--pub-success-surface);
        color: var(--pub-success)
    }