/* ==========================================================================
   Material Design 3 Theme - Churrasdora
   ========================================================================== */

:root {
    --md-sys-color-primary: #FF4E00;
    --md-sys-color-primary-gradient: linear-gradient(135deg, #FF4E00 0%, #FFA000 100%);
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: rgba(255, 78, 0, 0.15);
    --md-sys-color-on-primary-container: #FFCCBC;
    
    --md-sys-color-surface: #161211;
    --md-sys-color-on-surface: #F5F0EE;
    --md-sys-color-surface-container: #0A0808;
    
    --md-sys-color-background: #0A0808;
    --md-sys-color-on-background: #F5F0EE;
    
    --md-sys-color-outline: rgba(255, 255, 255, 0.08);
    --md-sys-color-secondary-text: rgba(245, 240, 238, 0.6);
    --md-sys-color-error: #CF6679;
    --slider-track-bg: rgba(255, 255, 255, 0.12);

    --md-sys-elevation-1: 0 2px 8px rgba(0, 0, 0, 0.4);
    --md-sys-elevation-2: 0 4px 16px rgba(0, 0, 0, 0.6);
    --md-sys-elevation-3: 0 8px 32px rgba(0, 0, 0, 0.8), 0 0 1px rgba(255, 255, 255, 0.1) inset;

    --md-sys-typescale-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Cor da barrinha de scroll no PC (variável pra herdar tema claro/escuro, ver body.light-theme
       abaixo) -- usada globalmente logo mais nesse arquivo, não só no .main-content. */
    --scrollbar-thumb: rgba(255, 78, 0, 0.35);
    --scrollbar-thumb-hover: rgba(255, 78, 0, 0.55);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    /* Evita rolagem horizontal escondida e o "elastic bounce" que denuncia
       WebView em apps nativos (sensação de app "premium"). */
    overflow-x: hidden;
    overscroll-behavior: none;
}

body {
    font-family: var(--md-sys-typescale-font);
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

button, a, .icon-btn, .text-btn, .profile-item, .top-nav-item, .avatar-btn, .md-checkbox {
    /* Remove o flash cinza/azul de toque do WebView Android e o delay de 300ms. */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Fallback de segurança: se a fonte remota do Google (Material Symbols) demorar ou
   falhar em uma rede mobile, evita que o nome literal do ícone (ex: "child_care")
   estoure containers de tamanho fixo (botões circulares, badges, etc.). */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined', sans-serif;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    /* Some inline com o script no <head> (procure "fonts-ready"): enquanto a fonte
       não confirma que carregou, o ícone fica invisível em vez de mostrar o nome
       literal (ex: "outdoor_grill") piscando na tela por alguns segundos. */
    visibility: hidden;
}
html.fonts-ready .material-symbols-outlined {
    visibility: visible;
}

.app-container {
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
    position: relative;
    background-color: var(--md-sys-color-background);
    padding-bottom: env(safe-area-inset-bottom);
}

.view {
    display: none;
    height: 100%;
    width: 100%;
}
.view.active {
    display: block;
}

.content-section {
    display: none;
    padding: 24px 16px;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 120px;
}
.content-section.active {
    display: block;
    animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.top-app-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* padding-top respeita a status bar/notch quando roda dentro do app nativo (Capacitor) */
    padding: env(safe-area-inset-top) 24px 0 24px;
    background: rgba(22, 18, 17, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--md-sys-color-on-surface);
    height: calc(72px + env(safe-area-inset-top));
    border-bottom: 1px solid var(--md-sys-color-outline);
    box-shadow: var(--md-sys-elevation-1);
    position: relative;
    z-index: 10;
}

.app-title {
    font-size: 24px;
    font-weight: 800;
    margin-left: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--md-sys-color-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.app-title:hover {
    transform: scale(1.02);
    opacity: 0.9;
}

.app-title:active {
    transform: scale(0.98);
}

.app-title .material-symbols-outlined {
    font-size: 28px;
    background: var(--md-sys-color-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.main-content {
    height: calc(100vh - 72px - env(safe-area-inset-top));
    height: calc(100dvh - 72px - env(safe-area-inset-top));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain; /* impede que o scroll "vaze" para o pull-to-refresh do app nativo */
    -webkit-overflow-scrolling: touch;
    background-color: var(--md-sys-color-surface-container);
}

/* Barrinha de scroll customizada (achado do dono: a padrão do navegador não combinava com o
   tema, principalmente no escuro) -- regra GLOBAL (`*`) pra cobrir de uma vez .main-content,
   .modal-body, .modal, #auth-view e qualquer scroll futuro, sem precisar
   repetir em cada seletor. Cor vem de --scrollbar-thumb (:root / body.light-theme), já ajustada
   nos dois temas. Fina (8px) e discreta (opacidade baixa) de propósito, pra não competir
   visualmente com o conteúdo. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

/* Arrastar pra rolar no mouse (PC), imitando o toque no mobile (pedido do dono) -- classe
   aplicada no <body> pelo app.js/c2lmbbva.js enquanto o botão esquerdo está segurado e a pessoa
   arrasta um container com scroll. Cursor de "mão fechada" em tudo (não só no container sendo
   arrastado) e seleção de texto desligada, pra não selecionar tudo sem querer no meio do arraste. */
body.arrastando-scroll-ativo,
body.arrastando-scroll-ativo * {
    cursor: grabbing !important;
    user-select: none !important;
}

.top-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 28px;
    flex: 1;
}

.top-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--md-sys-color-secondary-text);
    font-family: var(--md-sys-typescale-font);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.top-nav-item .material-symbols-outlined {
    font-size: 20px;
}
.top-nav-item:hover {
    background: rgba(128, 128, 128, 0.12);
    color: var(--md-sys-color-on-surface);
}
.top-nav-item.active {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

@media (min-width: 769px) {
    .top-app-bar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
    }
    .top-nav {
        margin-left: 0;
    }
    .app-title {
        justify-self: start;
    }
    .top-bar-right {
        justify-self: end;
    }
}

.avatar-btn {
    display: inline-flex;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}
.avatar-btn:hover {
    box-shadow: 0 0 0 2px rgba(255, 78, 0, 0.5);
}
.avatar-btn.active {
    box-shadow: 0 0 0 2px var(--md-sys-color-primary);
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #6b6663;
    color: #d9d4d1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.avatar .avatar-icon {
    font-size: 22px;
}
.avatar-img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar.com-foto .avatar-img {
    display: block;
}
.avatar.com-foto .avatar-icon {
    display: none;
}
.avatar-lg {
    width: 96px;
    height: 96px;
    margin-bottom: 8px;
}
.avatar-lg .avatar-icon {
    font-size: 56px;
}
body.light-theme .avatar {
    background: #c9c3c0;
    color: #FFFFFF;
}

#profile-section {
    max-width: 560px;
}
.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 24px 16px;
    background-color: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 16px;
}
.profile-card .avatar-lg {
    box-shadow: 0 0 0 3px var(--md-sys-color-primary);
    margin-bottom: 12px;
}
.profile-nome {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--md-sys-color-on-surface);
}
.profile-email {
    max-width: 100%;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--md-sys-color-secondary-text);
}
.profile-tag {
    margin-top: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.15);
    color: var(--md-sys-color-secondary-text);
    font-size: 12px;
    font-weight: 600;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 12px 0 16px;
}
.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 6px;
    background-color: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 14px;
}
.profile-stat strong {
    font-size: 18px;
    font-weight: 800;
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
}
.profile-stat span {
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    color: var(--md-sys-color-secondary-text);
}

.profile-feedback-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    border: none;
    border-radius: 16px;
    background: var(--md-sys-color-primary-gradient);
    box-shadow: 0 6px 20px rgba(255, 78, 0, 0.3);
    color: #FFFFFF;
    font-family: var(--md-sys-typescale-font);
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.profile-feedback-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(255, 78, 0, 0.4);
}
.profile-feedback-card:active {
    transform: translateY(0);
}
.pf-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
}
.pf-icon .material-symbols-outlined {
    font-size: 24px;
}
.pf-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pf-text strong {
    font-size: 16px;
    font-weight: 800;
}
.pf-text span {
    font-size: 13px;
    line-height: 1.3;
    opacity: 0.92;
}
.pf-stars {
    display: inline-flex;
    flex-shrink: 0;
}
.pf-stars .material-symbols-outlined {
    font-size: 16px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.profile-section-title {
    margin: 22px 4px 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--md-sys-color-secondary-text);
}
.profile-list {
    background-color: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 16px;
    overflow: hidden;
}
.profile-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 18px;
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-font);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
a.profile-item,
button.profile-item {
    cursor: pointer;
    transition: background-color 0.2s ease;
}
button.profile-item {
    border: none;
    background: none;
    text-align: left;
}
a.profile-item:hover,
button.profile-item:hover {
    background: rgba(128, 128, 128, 0.08);
}
.profile-item + .profile-item {
    border-top: 1px solid var(--md-sys-color-outline);
}
.profile-item .material-symbols-outlined {
    font-size: 22px;
    color: var(--md-sys-color-secondary-text);
}
.profile-item .pi-text {
    flex: 1;
}
.profile-item .theme-switch .material-symbols-outlined {
    font-size: 16px;
}

.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
}
.profile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    border: 1px solid var(--md-sys-color-error);
    border-radius: 14px;
    background: transparent;
    color: var(--md-sys-color-error);
    font-family: var(--md-sys-typescale-font);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.profile-btn:hover {
    background: rgba(207, 102, 121, 0.1);
}
.profile-btn .material-symbols-outlined {
    font-size: 20px;
}

.profile-footer {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
}
.profile-footer a {
    color: var(--md-sys-color-secondary-text);
}

@media (max-width: 360px) {
    .pf-stars {
        display: none;
    }
}

.material-card {
    background-color: var(--md-sys-color-surface);
    border-radius: 16px;
    box-shadow: var(--md-sys-elevation-1);
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid var(--md-sys-color-outline);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.material-card:hover {
    border-color: rgba(255, 78, 0, 0.2);
    box-shadow: var(--md-sys-elevation-2), 0 0 20px rgba(255, 78, 0, 0.03);
    transform: translateY(-2px);
}

.section-card {
    background: rgba(22, 18, 17, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.3px;
}

.card-title .material-symbols-outlined,
.card-title .title-icon-svg {
    color: var(--md-sys-color-primary);
    font-size: 22px;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: none;
    border: none;
    padding: 2px 0;
    margin: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.accordion-header:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 4px;
    border-radius: 8px;
}

.accordion-header .card-title {
    margin-bottom: 0;
}

.accordion-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.accordion-count {
    display: none;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255, 78, 0, 0.15);
    color: var(--md-sys-color-primary);
    font-size: 13px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.accordion-count.visible {
    display: inline-flex;
}

.accordion-chevron {
    color: var(--md-sys-color-on-surface);
    opacity: 0.55;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-card.open .accordion-chevron {
    transform: rotate(180deg);
}

.accordion-body {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, margin-top 0.35s ease;
}

.accordion-card.open .accordion-body {
    max-height: 2400px;
    margin-top: 16px;
    padding-top: 4px;
    opacity: 1;
}

.page-header {
    margin: 24px 0 32px 0;
}
.page-header h2 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.8px;
    background: var(--md-sys-color-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.page-header .subtitle {
    color: var(--md-sys-color-secondary-text);
    font-size: 15px;
    margin-top: 6px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 14px;
    border: none;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--md-sys-typescale-font);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: 0.3px;
}

/* Nenhum .btn tinha estado visual de desabilitado antes (achado ao implementar a confirmação
   por texto de excluir conta -- o botão ficava disabled de verdade mas parecia clicável do
   mesmo jeito). Opacidade reduzida + cursor "not-allowed" deixa claro que a ação não está
   disponível ainda. */
.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.primary-btn {
    background: var(--md-sys-color-primary-gradient);
    color: var(--md-sys-color-on-primary);
    box-shadow: 0 4px 15px rgba(255, 78, 0, 0.3);
}
.primary-btn:hover {
    box-shadow: 0 6px 20px rgba(255, 78, 0, 0.5), 0 0 0 2px rgba(255, 78, 0, 0.2);
    transform: translateY(-2px);
}
.primary-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(255, 78, 0, 0.3);
}

.btn-whatsapp {
    background: #25D366 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3) !important;
}
.btn-whatsapp:hover {
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5), 0 0 0 2px rgba(37, 211, 102, 0.2) !important;
    transform: translateY(-2px);
}
.btn-whatsapp:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(37, 211, 102, 0.3) !important;
}

.secondary-btn {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border: 1px solid rgba(255, 78, 0, 0.2);
}
.secondary-btn:hover {
    background-color: rgba(255, 78, 0, 0.25);
    border-color: rgba(255, 78, 0, 0.4);
    transform: translateY(-2px);
}

.text-btn {
    background-color: transparent;
    color: var(--md-sys-color-primary);
    padding: 12px 20px;
    border: 1px solid transparent;
}
.text-btn:hover {
    background-color: rgba(255, 78, 0, 0.08);
    border-color: rgba(255, 78, 0, 0.15);
    transform: translateY(-1px);
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; /* tap target mínimo recomendado (44x44px) */
    height: 44px;
    border-radius: 12px; /* Rounded square is very modern */
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(245, 240, 238, 0.8);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.12);
    transform: scale(1.05);
}
.icon-btn:active {
    transform: scale(0.95);
}
.icon-btn.danger {
    color: rgba(207, 102, 121, 0.8);
    border-color: rgba(207, 102, 121, 0.15);
    background: rgba(207, 102, 121, 0.03);
}
.icon-btn.danger:hover {
    color: #FF7B90;
    border-color: rgba(207, 102, 121, 0.4);
    background: rgba(207, 102, 121, 0.08);
}

.btn-full {
    width: 100%;
}

.form-actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
}
.form-actions .md-checkbox {
    margin: 0;
    margin-right: auto;
}
@media (max-width: 600px) {
    .form-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .form-actions .md-checkbox {
        margin-right: 0;
        justify-content: center;
        width: 100%;
    }
}

.input-field {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
}

.input-field label {
    display: block;
    font-size: 13px;
    color: rgba(245, 240, 238, 0.6);
    margin-bottom: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-field input {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--md-sys-typescale-font);
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--md-sys-color-on-surface);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.input-field input::placeholder {
    color: rgba(245, 240, 238, 0.35);
}

.input-field input:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(255, 78, 0, 0.15);
}

/* Ícone nativo de calendário/relógio já ocupa espaço; o padding lateral padrão (18px)
   cortaria "dd/mm/aaaa" em telas estreitas (campos dividem a linha em 2 colunas). */
.input-field input[type="date"],
.input-field input[type="time"] {
    padding-left: 14px;
    padding-right: 8px;
}

/* Setinhas nativas de +/- do input[type="number"] (achado do dono: "esse negócio feio")
   destoam completamente do resto do design (sem cantos arredondados, sem cor do tema) --
   removidas em todos os campos numéricos do app (convidados, ajustar preço). Digitar o valor
   direto continua funcionando normal, teclado numérico no celular também (isso não muda com
   type="number"), só perde o clique de incrementar/decrementar de 1 em 1 -- pouco útil aqui
   (campos vão até 1000, ou aceitam centavos). */
.input-field input[type="number"]::-webkit-outer-spin-button,
.input-field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.input-field input[type="number"] {
    -moz-appearance: textfield;
}

.data-horario-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.data-horario-row .input-field {
    flex: 1;
    margin-bottom: 0;
}

.campo-data-evento {
    min-width: 130px;
}

.campo-horario-evento {
    min-width: 110px;
}

.campo-duracao-evento {
    margin-bottom: 20px;
}

.duracao-dica {
    margin: 10px 0 0;
    font-size: 11px;
    color: var(--md-sys-color-secondary-text);
}

.duracao-valor {
    color: var(--md-sys-color-primary);
    font-weight: 700;
    margin-left: 6px;
}

.duracao-marcas {
    position: relative;
    height: 16px;
    font-size: 11px;
    color: var(--md-sys-color-secondary-text);
}

/* A bolinha (22px) percorre a linha só do centro de uma ponta ao da outra: as marcas seguem o mesmo trajeto. */
.duracao-marcas span {
    position: absolute;
    left: calc(11px + (100% - 22px) * var(--p));
    transform: translateX(-50%);
}

/* Depois que uma data é escolhida, o campo <input type="date"> some com o placeholder
   "DD/MM/AAAA" e passa a mostrar o texto formatado pelo NAVEGADOR (ex: "18 de set. de
   2026" no iOS) -- bem mais largo que o placeholder, e o campo nunca mais volta pra
   type="text" enquanto tiver valor (ver onblur no index.html). Lado a lado, isso
   sobrepõe/aperta demais os dois campos numa tela estreita (achado pelo dono via print).
   Empilhar verticalmente resolve porque dá a largura inteira do card pro texto formatado. */
@media (max-width: 400px) {
    .data-horario-row {
        flex-direction: column;
    }

    .campo-data-evento,
    .campo-horario-evento {
        min-width: 0;
        width: 100%;
    }
}

.input-field input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: linear-gradient(to right, var(--md-sys-color-primary) var(--pct, 0%), var(--slider-track-bg) var(--pct, 0%));
    cursor: pointer;
    margin: 14px 0 6px 0;
}
.input-field input[type="range"]:focus {
    border: none;
    box-shadow: none;
    background-color: var(--slider-track-bg);
}
.input-field input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    border: 3px solid var(--md-sys-color-surface-container);
    box-shadow: 0 2px 8px rgba(255, 78, 0, 0.5);
    cursor: pointer;
    transition: transform 0.15s ease;
}
.input-field input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}
.input-field input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    border: 3px solid var(--md-sys-color-surface-container);
    box-shadow: 0 2px 8px rgba(255, 78, 0, 0.5);
    cursor: pointer;
}
.input-field input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: transparent;
    border: none;
}

.guests-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 768px) {
    .guests-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.md-checkbox {
    overflow-wrap: anywhere;
}
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.md-checkbox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    user-select: none;
    color: rgba(245, 240, 238, 0.85);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 16px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.md-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.md-checkbox:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 78, 0, 0.3);
    transform: translateY(-2px);
    color: #FFFFFF;
}

.md-checkbox:has(input:checked) {
    background: rgba(255, 78, 0, 0.08);
    border-color: var(--md-sys-color-primary);
    color: #FFFFFF;
    box-shadow: 0 4px 15px rgba(255, 78, 0, 0.12);
}

.md-checkbox input:checked ~ .checkmark {
    background-color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 8px rgba(255, 78, 0, 0.4);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 4px;
    top: 1px;
    width: 3px;
    height: 6px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.md-checkbox input:checked ~ .checkmark:after {
    display: block;
}

#auth-view {
    background-color: var(--md-sys-color-surface-container);
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 0;
    box-sizing: border-box;
}
#auth-view.active {
    display: flex;
}

.auth-card {
    width: 90%;
    max-width: 400px;
    padding: 16px 24px;
}

/* Card #11: depois de adicionar o botão do Google + "ou" + "Esqueci minha senha" embaixo, a
   tela (principalmente a aba Registrar, que já tinha um campo a mais) passou a exigir rolagem
   em celulares mais baixos (ex: 375x667) -- achado pelo dono. Reduzido o espaçamento entre os
   elementos (aqui e nas regras de auth-header/auth-tabs/auth-divider abaixo) pra caber sem
   cortar nada, sem precisar esconder ou remover nenhum campo. */
.auth-card .input-field {
    margin-bottom: 10px;
}

.auth-card .error-msg {
    margin-bottom: 8px;
}

.auth-register-hint .auth-divider {
    margin: 14px 0 10px 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.auth-register-btn {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-primary);
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 8px;
    font-size: clamp(11px, 3.9vw, 15px);
}
.auth-register-btn:hover {
    background: var(--md-sys-color-primary-container);
}

/* Divisor "ou" entre o formulário de e-mail/senha e o botão do Google (card #11) --
   mesma cor/estilo da borda já usada em .auth-tabs, só deitada. */
.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 12px 0 10px 0;
    color: var(--md-sys-color-secondary-text);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--md-sys-color-outline);
}
.auth-divider span {
    padding: 0 12px;
}

/* Botão do Google customizado (card #11, ajustado depois do dono achar o padrão do Google feio
   perto do resto do app): o VISÍVEL é nosso (.secondary-btn, mesmo estilo de outros botões
   secundários do app), o de verdade (iframe do Google, renderButton em app.js) fica por cima,
   quase invisível, só pra capturar o clique -- técnica oficial do próprio Google pra isso, ver
   comentário em index.html. */
.google-signin-wrapper {
    position: relative;
}
.google-btn-visual {
    /* pointer-events:none porque quem recebe o clique de verdade é o overlay do Google por cima
       -- sem isso o clique pararia aqui e nunca chegaria no botão real. */
    pointer-events: none;
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 8px;
    font-size: clamp(11px, 3.9vw, 15px);
}
.google-btn-visual svg {
    flex-shrink: 0;
}
.google-signin-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.001;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Card #57: dentro do app nativo não existe iframe do Google nenhum (o overlay acima fica
   sempre vazio, ver renderGoogleButtonNativo em app.js) -- inverte quem recebe o clique, o botão
   visual vira o botão de verdade. */
.is-native-app .google-btn-visual {
    pointer-events: auto;
}
.is-native-app .google-signin-overlay {
    pointer-events: none;
}

.auth-header {
    text-align: center;
    margin-bottom: 10px;
}
.auth-header .logo-icon {
    font-size: 30px;
    color: var(--md-sys-color-primary);
}
.auth-header h1 {
    font-size: 19px;
    margin-top: 2px;
}
.auth-header p {
    color: var(--md-sys-color-secondary-text);
    font-size: 13px;
}

.auth-tabs {
    display: flex;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    margin-bottom: 12px;
}

.auth-tabs .tab-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--md-sys-color-secondary-text);
    cursor: pointer;
    position: relative;
}

.auth-tabs .tab-btn.active {
    color: var(--md-sys-color-primary);
}

.auth-tabs .tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--md-sys-color-primary);
}

.error-msg {
    color: var(--md-sys-color-error);
    font-size: 12px;
    min-height: 18px;
    margin-bottom: 16px;
    text-align: center;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.history-item {
    background-color: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--md-sys-elevation-1);
}

.history-item:hover {
    border-color: rgba(255, 78, 0, 0.25);
    box-shadow: var(--md-sys-elevation-2);
    transform: translateY(-2px);
}

.history-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0; /* permite que os filhos flex (.history-info) encolham em vez de estourar a linha */
}

.history-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 78, 0, 0.15) 0%, rgba(255, 160, 0, 0.05) 100%);
    border: 1px solid rgba(255, 78, 0, 0.25);
    color: var(--md-sys-color-primary);
    flex-shrink: 0;
}
.history-icon-badge span {
    font-size: 24px;
}

.history-info {
    min-width: 0; /* permite encolher/quebrar em vez de estourar a linha (item flex) */
}

.history-info h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    margin-bottom: 6px;
    letter-spacing: -0.3px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.history-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(245, 240, 238, 0.65);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 6px 12px;
    border-radius: 8px;
    line-height: 1;
}
.meta-item span.material-symbols-outlined {
    font-size: 16px;
    color: rgba(245, 240, 238, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.meta-item.cost {
    background: rgba(76, 175, 80, 0.06);
    border-color: rgba(76, 175, 80, 0.15);
    color: #81C784;
}
.meta-item.cost span.material-symbols-outlined {
    color: #81C784;
}

.history-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Mesmo efeito nos cinco botões (fundo e borda neutros mais claros, leve aumento do .icon-btn); só a cor do ícone muda. */
.history-actions .view-btn:hover {
    color: #ffd54f;
}
.history-actions .checklist-btn:hover {
    color: #BA68C8;
}
.history-actions .divisao-btn:hover {
    color: #81C784;
}
.history-actions .convidados-btn:hover {
    color: var(--md-sys-color-primary);
}
.history-actions .edit-btn:hover {
    color: #4fc3f7;
}
.history-actions .delete-btn:hover {
    color: #FF7B90;
    border-color: rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.06);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(245, 240, 238, 0.5);
    font-size: 15px;
    font-weight: 500;
    border: 2px dashed rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.01);
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    align-items: safe center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.modal.active {
    display: flex;
    animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-surface {
    width: 100%;
    max-width: 540px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #161211;
    border: 1px solid var(--md-sys-color-outline);
    box-shadow: var(--md-sys-elevation-3);
    border-radius: 20px;
    overflow: hidden;
    animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideUp {
    from { transform: translateY(20px); }
    to { transform: translateY(0); }
}

.modal-header {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--md-sys-color-outline);
    background: rgba(255, 78, 0, 0.03);
}
.modal-header h2 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--md-sys-color-on-surface);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    color: var(--md-sys-color-on-surface);
    /* Mesma correção do menu lateral: garante que este item flex encolha e role por dentro
       em telas baixas, em vez de empurrar o rodapé do modal pra fora. */
    min-height: 0;
}

/* Mantém o total sempre visível, grudado no rodapé do modal, mesmo com lista de compras longa. */
.modal-totais-fixos {
    position: sticky;
    bottom: -24px;
    margin: 0 -24px -24px -24px;
    padding: 0 24px 24px 24px;
    background: #161211;
    z-index: 2;
}

body.light-theme .modal-totais-fixos {
    background: #FFFFFF;
}

.modal-footer {
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--md-sys-color-outline);
    background: rgba(0, 0, 0, 0.1);
}

/* Compartilhado pelos modais de confirmação: Sair, Excluir Evento, Excluir Conta */
.confirm-modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.confirm-icon-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
    margin-bottom: 12px;
    flex-shrink: 0;
}

.confirm-icon-badge .material-symbols-outlined {
    font-size: 32px;
}

.confirm-icon-badge.danger {
    background: rgba(207, 102, 121, 0.15);
    color: var(--md-sys-color-error);
}

.confirm-modal-text {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 8px 0;
    color: rgba(245, 240, 238, 0.85);
}
body.light-theme .confirm-modal-text {
    color: rgba(31, 27, 26, 0.85);
}

.confirm-modal-body .input-field {
    width: 100%;
    text-align: left;
    margin-top: 8px;
}

/* Mais compacto que os outros modais: sem isso, o teclado virtual força rolagem ao tocar na mensagem. */
#feedback-modal .modal-header {
    padding: 16px 20px;
}
#feedback-modal .modal-body {
    padding: 12px 20px 12px;
}
#feedback-modal .confirm-modal-text {
    margin-bottom: 0;
    font-size: 14px;
}
#feedback-modal .modal-footer {
    padding: 12px 20px 16px;
}
#feedback-estrelas-erro {
    min-height: 0;
    margin-bottom: 4px;
}
#feedback-mensagem {
    min-height: 56px;
}
#feedback-modal .input-field label {
    margin-bottom: 4px;
}

.star-rating-label {
    min-height: 16px;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-primary);
}

.star-rating {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 4px 0 12px 0;
}
#feedback-modal .star-rating {
    margin: 10px 0 2px 0;
}
.star-rating .material-symbols-outlined {
    font-size: 40px;
    color: rgba(245, 240, 238, 0.25);
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
#feedback-modal .star-rating .material-symbols-outlined {
    font-size: 38px;
}
.star-rating .material-symbols-outlined:hover {
    transform: scale(1.1);
}
.star-rating .material-symbols-outlined.filled {
    color: #FFA000;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body.light-theme .star-rating .material-symbols-outlined {
    color: rgba(31, 27, 26, 0.2);
}

.input-field textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--md-sys-typescale-font);
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--md-sys-color-on-surface);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    resize: vertical;
    min-height: 90px;
}
.input-field textarea::placeholder {
    color: rgba(245, 240, 238, 0.35);
}
.input-field textarea:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(255, 78, 0, 0.15);
}
body.light-theme .input-field textarea {
    background-color: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--md-sys-color-on-surface);
}
body.light-theme .input-field textarea:focus {
    background-color: #FFFFFF;
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 3px rgba(216, 67, 21, 0.12);
}
body.light-theme .input-field textarea::placeholder {
    color: rgba(31, 27, 26, 0.4);
}

.item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 14px;
    font-weight: 500;
    color: rgba(245, 240, 238, 0.9);
}

.item-row b {
    color: var(--md-sys-color-primary);
}

/* Checklist de compras (card #25) */
.item-row-checkbox {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    accent-color: var(--md-sys-color-primary);
    cursor: pointer;
}

.item-row-nome {
    flex: 1;
    min-width: 0;
}

.item-row.item-comprado {
    opacity: 0.5;
}

.item-row.item-comprado .item-row-nome {
    text-decoration: line-through;
}

/* Tela de checklist de compras (card #25) */
.checklist-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
}

.checklist-header h2 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: var(--md-sys-color-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.checklist-header .subtitle {
    color: var(--md-sys-color-secondary-text);
    font-size: 14px;
    margin-top: 4px;
}

.checklist-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.checklist-progress-bar {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.checklist-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--md-sys-color-primary-gradient);
    transition: width 0.3s ease;
}

.checklist-progress span {
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-secondary-text);
    white-space: nowrap;
}

.checklist-acoes {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.checklist-btn-tudo {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 10px;
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border: 1px solid rgba(255, 78, 0, 0.3);
}
.checklist-btn-tudo:hover {
    background-color: rgba(255, 78, 0, 0.25);
    border-color: rgba(255, 78, 0, 0.45);
    transform: translateY(-1px);
}

.checklist-grupo-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--md-sys-color-primary);
    margin: 24px 0 4px 0;
}

.checklist-grupo-titulo-texto {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checklist-grupo-checkbox {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: currentColor;
    cursor: pointer;
}

.checklist-grupo-titulo:first-child {
    margin-top: 0;
}

.checklist-grupo-progresso {
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--md-sys-color-secondary-text);
}

/* Cores por categoria. Suíno foi trocado de laranja pra rosa em relação ao cat-badge do
   painel admin -- aqui o texto não tem fundo colorido (só cor da fonte), então laranja
   (suíno) e amarelo (frango) ficavam parecidos demais pra diferenciar de relance. */
.checklist-grupo-bovino  { color: #ef9a9a; }
.checklist-grupo-suino   { color: #f48fb1; }
.checklist-grupo-frango  { color: #fff176; }
.checklist-grupo-petisco { color: #90caf9; }
.checklist-grupo-outros  { color: #e0e0e0; }
.checklist-grupo-bebida  { color: #4dd0e1; }
.checklist-grupo-molho    { color: #ce93d8; }
.checklist-grupo-tempero  { color: #a5d6a7; }
.checklist-grupo-cordeiro { color: #bcaaa4; }

body.light-theme .checklist-grupo-bovino   { color: #c62828; }
body.light-theme .checklist-grupo-suino    { color: #ad1457; }
body.light-theme .checklist-grupo-frango   { color: #9e8b00; }
body.light-theme .checklist-grupo-petisco  { color: #1565c0; }
body.light-theme .checklist-grupo-outros   { color: #616161; }
body.light-theme .checklist-grupo-bebida   { color: #00838f; }
body.light-theme .checklist-grupo-molho    { color: #6a1b9a; }
body.light-theme .checklist-grupo-tempero  { color: #2e7d32; }
body.light-theme .checklist-grupo-cordeiro { color: #5d4037; }

.checklist-remover-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

/* Ajustar preço por item na Lista de Compras final (card #22) -- mesmo tamanho reduzido do
   botão de remover do checklist, pra caber ao lado do valor sem esticar a linha no mobile. */
.item-preco-editar-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
/* Indica visualmente que esse item já teve o preço ajustado pelo usuário nesse churrasco
   (ver ItemCompra.AjustadoPeloUsuario) -- mesma cor primária usada pro nome/quantidade em
   negrito no item-row, pra não introduzir uma cor nova só pra isso. */
.item-preco-editar-btn-ajustado,
.item-editar-btn-ajustado {
    color: var(--md-sys-color-primary);
    border-color: rgba(216, 67, 21, 0.25);
}

/* Botões de ajuste do item (quantidade + valor [+ remover no checklist]) agrupados pra caberem no mobile. */
.item-row-acoes {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.item-row-acoes .icon-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .item-row-acoes .icon-btn {
        width: 32px;
        height: 32px;
    }
    .item-row-acoes .icon-btn .material-symbols-outlined {
        font-size: 20px;
    }
}

/* Hover sem "pulinho" (o .icon-btn global cresce 5%) e com uma cor por ação. */
.item-row-acoes .icon-btn:hover,
.resumo-carnes .icon-btn:hover {
    transform: none;
}
.item-row-acoes .item-editar-btn:hover,
.resumo-carnes .item-editar-btn:hover {
    color: #5AB0FF;
    border-color: rgba(90, 176, 255, 0.45);
    background-color: rgba(90, 176, 255, 0.1);
}
.item-row-acoes .item-preco-editar-btn:hover {
    color: #4CD97B;
    border-color: rgba(76, 217, 123, 0.45);
    background-color: rgba(76, 217, 123, 0.1);
}
.item-row-acoes .item-reset-btn:hover {
    color: #FFB84D;
    border-color: rgba(255, 184, 77, 0.45);
    background-color: rgba(255, 184, 77, 0.1);
}
.item-row-acoes .checklist-remover-btn:hover {
    color: #FF7B90;
    border-color: rgba(207, 102, 121, 0.45);
    background-color: rgba(207, 102, 121, 0.1);
}
body.light-theme .item-row-acoes .item-editar-btn:hover,
body.light-theme .resumo-carnes .item-editar-btn:hover {
    color: #1565C0;
    border-color: rgba(21, 101, 192, 0.35);
    background-color: rgba(21, 101, 192, 0.08);
}
body.light-theme .item-row-acoes .item-preco-editar-btn:hover {
    color: #1B8F4E;
    border-color: rgba(27, 143, 78, 0.35);
    background-color: rgba(27, 143, 78, 0.08);
}
body.light-theme .item-row-acoes .item-reset-btn:hover {
    color: #B26A00;
    border-color: rgba(178, 106, 0, 0.35);
    background-color: rgba(178, 106, 0, 0.08);
}
body.light-theme .item-row-acoes .checklist-remover-btn:hover {
    color: #C62828;
    border-color: rgba(198, 40, 40, 0.35);
    background-color: rgba(198, 40, 40, 0.08);
}

/* Redefinir só aparece em item alterado; nas telas largas guarda o lugar pra os ícones não pularem de linha pra linha. */
.item-reset-btn.oculto,
html.fonts-ready .item-reset-btn.oculto .material-symbols-outlined {
    visibility: hidden;
    pointer-events: none;
}
@media (max-width: 480px) {
    .item-reset-btn.oculto {
        display: none;
    }
}

.ajustar-quantidade-previa {
    margin-top: 8px;
    font-size: 13px;
    color: var(--md-sys-color-secondary-text);
}
.ajustar-quantidade-previa b {
    color: var(--md-sys-color-primary);
}

.checklist-resumo {
    margin-top: 16px;
}

.detalhes-info-linha {
    margin-bottom: 8px;
    color: var(--md-sys-color-secondary-text);
    font-size: 14px;
}

.detalhes-info-linha:last-child {
    margin-bottom: 0;
}

.detalhes-info-linha .material-symbols-outlined {
    vertical-align: middle;
    font-size: 18px;
    margin-right: 4px;
}

.detalhes-totais {
    margin-top: 20px;
}

.resumo-carnes {
    margin-top: 16px;
}

.resumo-carnes-total {
    border-bottom: none;
    border-top: 1px solid rgba(255, 78, 0, 0.2);
    font-weight: 700;
    padding-bottom: 0;
}

.detalhes-acoes {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.detalhes-acoes .btn {
    flex: 1 1 auto;
    justify-content: center;
    white-space: nowrap;
    padding-left: 14px;
    padding-right: 14px;
}

@media (max-width: 600px) {
    .detalhes-acoes {
        flex-direction: column;
    }
}

.checklist-resumo-linha {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: var(--md-sys-color-secondary-text);
}

body.light-theme .checklist-progress-bar {
    background: rgba(0, 0, 0, 0.08);
}

.total-row {
    display: flex;
    justify-content: space-between;
    padding: 20px 0 8px 0;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.5px;
    color: #FFFFFF;
    border-top: 2px solid rgba(255, 78, 0, 0.2);
    margin-top: 16px;
}

.total-row span:last-child {
    background: var(--md-sys-color-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.light-theme {
    --md-sys-color-primary: #D84315; /* Warm churrasco orange */
    --md-sys-color-primary-gradient: linear-gradient(135deg, #D84315 0%, #FF5722 100%);
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #FFDBCF;
    --md-sys-color-on-primary-container: #3B0900;
    
    --md-sys-color-surface: #FFFFFF;
    --md-sys-color-on-surface: #1F1B1A;
    --md-sys-color-surface-container: #F6F1EE; /* Soft warm grey background */
    
    --md-sys-color-background: #FDFBFA;
    --md-sys-color-on-background: #1F1B1A;
    
    --md-sys-color-outline: rgba(0, 0, 0, 0.08);
    --md-sys-color-secondary-text: rgba(31, 27, 26, 0.6);
    --md-sys-color-error: #BA1A1A;
    --slider-track-bg: rgba(0, 0, 0, 0.1);

    /* Tom mais escuro que no dark -- rgba(255,78,0,...) do :root ficava claro/lavado demais em
       cima do fundo branco do tema claro (achado do dono: "a barrinha não combina no dark",
       conferido nos dois temas -- essa é a correção pro claro, a de cima já servia pro escuro). */
    --scrollbar-thumb: rgba(216, 67, 21, 0.3);
    --scrollbar-thumb-hover: rgba(216, 67, 21, 0.5);

    --md-sys-elevation-1: 0 2px 8px rgba(0, 0, 0, 0.06);
    --md-sys-elevation-2: 0 4px 16px rgba(0, 0, 0, 0.1);
    --md-sys-elevation-3: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.05) inset;
}

body.light-theme .top-app-bar {
    background: rgba(253, 251, 250, 0.8);
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light-theme .top-app-bar .icon-btn {
    color: var(--md-sys-color-on-surface);
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
}
body.light-theme .top-app-bar .icon-btn:hover {
    background: rgba(216, 67, 21, 0.08);
    color: var(--md-sys-color-primary);
    border-color: rgba(216, 67, 21, 0.2);
}

body.light-theme .icon-btn {
    color: rgba(31, 27, 26, 0.7);
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.06);
}
body.light-theme .icon-btn:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: var(--md-sys-color-primary);
    border-color: rgba(0, 0, 0, 0.12);
}

body.light-theme .section-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.06);
}

body.light-theme .input-field label {
    color: rgba(31, 27, 26, 0.6);
}

body.light-theme .input-field input {
    background-color: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--md-sys-color-on-surface);
}
body.light-theme .input-field input:focus {
    background-color: #FFFFFF;
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 3px rgba(216, 67, 21, 0.12);
}
body.light-theme .input-field input::placeholder {
    color: rgba(31, 27, 26, 0.4);
}

body.light-theme .md-checkbox {
    background: rgba(0, 0, 0, 0.015);
    border-color: rgba(0, 0, 0, 0.05);
    color: rgba(31, 27, 26, 0.8);
}
body.light-theme .md-checkbox:hover {
    background: rgba(0, 0, 0, 0.035);
    border-color: rgba(216, 67, 21, 0.2);
    color: var(--md-sys-color-primary);
}
body.light-theme .md-checkbox:has(input:checked) {
    background: rgba(216, 67, 21, 0.06);
    border-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-primary);
}
body.light-theme .checkmark {
    border-color: rgba(0, 0, 0, 0.25);
}

body.light-theme .history-item {
    border-color: rgba(0, 0, 0, 0.06);
}
body.light-theme .history-item:hover {
    border-color: rgba(216, 67, 21, 0.2);
}
body.light-theme .history-info p {
    color: rgba(31, 27, 26, 0.55);
}

body.light-theme .meta-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.04);
    color: rgba(31, 27, 26, 0.65);
}
body.light-theme .meta-item span.material-symbols-outlined {
    color: rgba(31, 27, 26, 0.4);
}
body.light-theme .meta-item.cost {
    background: rgba(76, 175, 80, 0.08);
    border-color: rgba(76, 175, 80, 0.2);
    color: #2E7D32;
}
body.light-theme .meta-item.cost span.material-symbols-outlined {
    color: #2E7D32;
}

body.light-theme .history-actions .icon-btn {
    border-color: rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.01);
    color: rgba(31, 27, 26, 0.7);
}
body.light-theme .history-actions .icon-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--md-sys-color-on-surface);
}
body.light-theme .history-actions .view-btn:hover {
    color: #b8860b;
}
body.light-theme .history-actions .checklist-btn:hover {
    color: #7b1fa2;
}
body.light-theme .history-actions .divisao-btn:hover {
    color: #2e7d32;
}
body.light-theme .history-actions .convidados-btn:hover {
    color: var(--md-sys-color-primary);
}
body.light-theme .history-actions .edit-btn:hover {
    color: #0288d1;
}
body.light-theme .history-actions .delete-btn:hover {
    color: var(--md-sys-color-error);
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.04);
}

body.light-theme .modal-surface {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.08);
}
body.light-theme .modal-header {
    background: rgba(216, 67, 21, 0.02);
}
body.light-theme .item-row {
    border-bottom-color: rgba(0, 0, 0, 0.05);
    color: var(--md-sys-color-on-surface);
}
body.light-theme .total-row {
    color: var(--md-sys-color-on-surface);
}

body.light-theme .empty-state {
    color: rgba(31, 27, 26, 0.5);
    border-color: rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.005);
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 32px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.theme-switch input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.theme-switch input:focus,
.theme-switch input:focus-visible,
.theme-switch input:active {
    outline: none !important;
    box-shadow: none !important;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: .4s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    overflow: hidden;
    pointer-events: none; /* Let clicks pass through to the input */
}

.slider::before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 3px;
    bottom: 3px;
    background-color: #FFFFFF;
    transition: .4s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.slider .material-symbols-outlined {
    font-size: 14px;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    user-select: none;
    z-index: 1;
    transition: opacity 0.3s;
}

.slider .icon-sun {
    color: #FFA000;
    opacity: 0.3;
}

.slider .icon-moon {
    color: #FF4E00;
    opacity: 1;
}

.theme-switch input:checked + .slider {
    background-color: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

.theme-switch input:checked + .slider::before {
    transform: translateX(28px);
    background-color: #D84315;
    box-shadow: 0 2px 6px rgba(216, 67, 21, 0.3);
}

.theme-switch input:checked + .slider .icon-sun {
    opacity: 1;
}

.theme-switch input:checked + .slider .icon-moon {
    opacity: 0.3;
    color: rgba(31, 27, 26, 0.4);
}

body.light-theme .slider {
    background-color: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}
body.light-theme .slider::before {
    background-color: #D84315;
}

@media (max-width: 600px) {
    .content-section {
        padding: 16px 10px;
        padding-bottom: 140px;
    }

    .page-header {
        margin: 16px 0 24px 0;
    }

    .page-header h2 {
        font-size: 26px;
    }

    .page-header .subtitle {
        font-size: 14px;
    }

    .material-card {
        padding: 16px;
        margin-bottom: 16px;
        border-radius: 12px;
    }

    .card-title {
        font-size: 16px;
        margin-bottom: 16px;
    }

    .accordion-card.open .accordion-body {
        margin-top: 12px;
    }

    .accordion-count {
        font-size: 12px;
        min-width: 22px;
        height: 22px;
    }

    .top-app-bar {
        height: calc(64px + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) 12px 0 12px;
    }

    .main-content {
        height: calc(100vh - 64px - env(safe-area-inset-top));
        height: calc(100dvh - 64px - env(safe-area-inset-top));
    }

    .app-title {
        font-size: 20px;
    }

    .checkbox-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 8px;
    }

    .md-checkbox {
        padding: 12px 12px; /* tap target mínimo recomendado (44x44px) */
        font-size: 13px;
        border-radius: 10px;
    }

    .checkmark {
        width: 14px;
        height: 14px;
        margin-right: 8px;
    }

    .checkmark:after {
        left: 3px;
        top: 0px;
        width: 2px;
        height: 5px;
    }

    .history-item {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 16px;
        border-radius: 12px;
    }

    .history-left {
        gap: 12px;
        align-items: flex-start;
    }

    .history-icon-badge {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .history-icon-badge span {
        font-size: 20px;
    }

    .history-info h4 {
        font-size: 16px;
        margin-bottom: 4px;
    }

    .history-meta {
        gap: 6px;
    }

    .meta-item {
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 6px;
    }

    .meta-item span.material-symbols-outlined {
        font-size: 14px;
    }

    .history-actions {
        justify-content: flex-end;
        border-top: 1px solid var(--md-sys-color-outline);
        padding-top: 12px;
        margin-top: 4px;
        gap: 8px;
    }

    .history-actions .icon-btn {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

    .modal-surface {
        max-height: 90vh;
        max-height: 90dvh;
        border-radius: 16px;
    }

    .modal-header {
        padding: 16px;
    }

    .modal-header h2 {
        font-size: 18px;
    }

    .modal-body {
        padding: 16px;
    }

    .modal-totais-fixos {
        bottom: -16px;
        margin: 0 -16px -16px -16px;
        padding: 0 16px 16px 16px;
    }

    .modal-footer {
        padding: 16px;
        flex-direction: column;
        gap: 12px;
    }

    /* column-reverse só nos modais do padrão "Cancelar + 1 ação" (Sair, Excluir Conta,
       Esqueci a Senha, Feedback etc.) -- o HTML sempre tem "Cancelar" primeiro no DOM, então
       empilhar sem reverter deixava "Cancelar" em cima da ação principal no mobile (achado
       pelo dono no modal de Esqueci a Senha, mesmo problema nos outros desse padrão). Não
       aplica no modal de exportar (3 botões: Imagem/WhatsApp/Copiar, sem "Cancelar") pra não
       inverter uma ordem que não tem esse problema. */
    .modal-footer-confirm {
        flex-direction: column-reverse;
    }
    
    .modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    .item-row {
        padding: 8px 0;
        font-size: 13px;
    }

    .total-row {
        font-size: 18px;
        padding: 12px 0 4px 0;
        margin-top: 12px;
    }

    .home-hero-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px 20px;
    }
    
    .home-hero-banner h2 {
        font-size: 22px;
    }
    
    .hero-subtitle {
        font-size: 13.5px;
    }

    .home-metrics-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 20px;
    }

    .metric-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 12px 6px;
        gap: 6px;
        border-radius: 12px;
    }

    .metric-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .metric-icon span {
        font-size: 18px;
    }

    .metric-info {
        gap: 2px;
    }

    .metric-label {
        font-size: 9px;
        letter-spacing: 0.2px;
    }

    .metric-value {
        font-size: 14px;
    }

    .home-card-premium {
        min-height: auto;
        padding: 18px;
        border-radius: 16px;
    }

    .home-card-body {
        margin-bottom: 12px;
        gap: 12px;
    }

    .home-card-icon-wrapper {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .home-card-icon-wrapper span {
        font-size: 20px;
    }

    .home-card-text h3 {
        font-size: 16px;
    }

    .home-card-text p {
        font-size: 12.5px;
    }

    .recent-activity-item {
        padding: 12px 14px;
        border-radius: 12px;
    }

    .activity-icon-indicator {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .activity-icon-indicator span {
        font-size: 16px;
    }

    .activity-details h4 {
        font-size: 14px;
    }

    .activity-details span {
        font-size: 11px;
    }

    .activity-cost {
        font-size: 14px;
    }
}

@media (max-width: 400px) {
    .top-app-bar {
        padding: env(safe-area-inset-top) 8px 0 8px;
    }

    .app-title {
        font-size: 18px;
        margin-left: 4px;
        gap: 6px;
    }

    .app-title .material-symbols-outlined {
        font-size: 22px;
    }

    .guests-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .history-info h4 {
        font-size: 15px;
    }

    .meta-item {
        font-size: 11px;
        padding: 3px 6px;
    }
}

.home-hero-banner {
    background: linear-gradient(135deg, rgba(255, 78, 0, 0.15) 0%, rgba(255, 160, 0, 0.03) 100%);
    border: 1px solid rgba(255, 78, 0, 0.15);
    border-radius: 20px;
    padding: 32px 28px;
    margin-bottom: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--md-sys-elevation-2);
}

.home-hero-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 78, 0, 0.2) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}

.hero-content {
    flex: 1;
    z-index: 1;
}

.home-hero-banner h2 {
    font-size: 28px;
    font-weight: 850;
    letter-spacing: -0.8px;
    background: var(--md-sys-color-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.hero-subtitle {
    font-size: 15px;
    color: var(--md-sys-color-secondary-text);
    max-width: 500px;
    line-height: 1.6;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 160, 0, 0.15);
    border: 1px solid rgba(255, 160, 0, 0.3);
    color: #FFB300;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    z-index: 1;
}

.hero-badge span.material-symbols-outlined {
    font-size: 16px;
}

.home-proximo-evento {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--md-sys-color-primary-gradient);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 28px;
    cursor: pointer;
    box-shadow: var(--md-sys-elevation-2);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-proximo-evento:hover {
    transform: translateY(-2px);
    box-shadow: var(--md-sys-elevation-3);
}

.home-proximo-evento > .material-symbols-outlined {
    font-size: 32px;
    color: #FFFFFF;
    flex-shrink: 0;
}

.home-proximo-evento .chevron {
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

.proximo-evento-info {
    flex: 1;
    min-width: 0;
}

.proximo-evento-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 2px;
}

.proximo-evento-info h3 {
    font-size: 17px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.proximo-evento-quando {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.home-dica-dia {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: rgba(255, 78, 0, 0.06);
    border: 1px solid rgba(255, 78, 0, 0.15);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 8px;
}

.home-dica-dia .material-symbols-outlined {
    color: var(--md-sys-color-primary);
    font-size: 20px;
    flex-shrink: 0;
}

.home-dica-dia p {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--md-sys-color-secondary-text);
    margin: 0;
}

.section-subtitle {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(245, 240, 238, 0.45);
    margin: 32px 0 16px 0;
}

.home-metrics-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

@media (max-width: 768px) {
    .home-metrics-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.metric-card {
    background-color: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--md-sys-elevation-1);
}

.metric-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 78, 0, 0.2);
    box-shadow: var(--md-sys-elevation-2);
}

.metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: rgba(255, 78, 0, 0.12);
    color: var(--md-sys-color-primary);
    border: 1px solid rgba(255, 78, 0, 0.2);
    flex-shrink: 0;
}

.metric-icon.green {
    background-color: rgba(76, 175, 80, 0.12);
    color: #81C784;
    border-color: rgba(76, 175, 80, 0.2);
}

.metric-icon.blue {
    background-color: rgba(3, 169, 244, 0.12);
    color: #4fc3f7;
    border-color: rgba(3, 169, 244, 0.2);
}

.metric-icon span {
    font-size: 22px;
}

.metric-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metric-label {
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--md-sys-color-secondary-text);
}

.metric-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--md-sys-color-on-surface);
    letter-spacing: -0.5px;
}

.home-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 600px) {
    .home-menu-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.home-card-premium {
    background: rgba(22, 18, 17, 0.4);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    min-height: 180px;
    box-shadow: var(--md-sys-elevation-1);
    position: relative;
    overflow: hidden;
}

.home-card-premium::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255, 78, 0, 0.05) 0%, transparent 70%);
    filter: blur(20px);
    transition: transform 0.4s ease;
    pointer-events: none;
}

.home-card-premium:hover::after {
    transform: scale(1.3);
}

.home-card-premium.new-churras:hover {
    border-color: rgba(255, 78, 0, 0.35);
    box-shadow: var(--md-sys-elevation-2), 0 0 25px rgba(255, 78, 0, 0.08);
    transform: translateY(-4px);
}

.home-card-premium.view-history:hover {
    border-color: rgba(255, 160, 0, 0.35);
    box-shadow: var(--md-sys-elevation-2), 0 0 25px rgba(255, 160, 0, 0.08);
    transform: translateY(-4px);
}

.home-card-body {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 440px) {
    .home-card-body {
        flex-direction: column;
        gap: 12px;
    }
}

.home-card-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 78, 0, 0.12);
    color: var(--md-sys-color-primary);
    border: 1px solid rgba(255, 78, 0, 0.2);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.view-history .home-card-icon-wrapper {
    background: rgba(255, 160, 0, 0.12);
    color: #FFB300;
    border-color: rgba(255, 160, 0, 0.2);
}

.home-card-premium:hover .home-card-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
}

.home-card-text {
    flex: 1;
}

.home-card-text h3 {
    font-size: 18px;
    font-weight: 750;
    color: var(--md-sys-color-on-surface);
    margin-bottom: 6px;
    letter-spacing: -0.3px;
}

.home-card-text p {
    font-size: 13.5px;
    color: var(--md-sys-color-secondary-text);
    line-height: 1.5;
}

.home-card-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--md-sys-color-primary);
    transition: gap 0.2s ease;
}

.view-history .home-card-action {
    color: #FFB300;
}

.home-card-premium:hover .home-card-action {
    gap: 10px;
}

.home-card-action span.material-symbols-outlined {
    font-size: 16px;
}

.home-recent-activity {
    margin-top: 36px;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.activity-header h3 {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(245, 240, 238, 0.45);
}

.recent-list-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recent-activity-item {
    background: rgba(22, 18, 17, 0.3);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.recent-activity-item:hover {
    background: rgba(22, 18, 17, 0.6);
    border-color: rgba(255, 78, 0, 0.2);
    transform: translateX(4px);
}

.activity-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.activity-icon-indicator {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 78, 0, 0.08);
    color: var(--md-sys-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon-indicator span {
    font-size: 18px;
}

.activity-details h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    margin-bottom: 2px;
}

.activity-details span {
    font-size: 12px;
    color: var(--md-sys-color-secondary-text);
}

.activity-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.activity-cost {
    font-size: 15px;
    font-weight: 750;
    color: #81C784;
    white-space: nowrap;
}

.activity-right span.chevron {
    font-size: 18px;
    color: rgba(245, 240, 238, 0.3);
    transition: transform 0.2s ease, color 0.2s ease;
}

.recent-activity-item:hover .chevron {
    transform: translateX(2px);
    color: var(--md-sys-color-primary);
}

.recent-empty-state {
    text-align: center;
    padding: 36px 20px;
    color: rgba(245, 240, 238, 0.4);
    font-size: 14px;
    border: 1px dashed var(--md-sys-color-outline);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.recent-empty-state span {
    font-size: 32px;
    color: rgba(245, 240, 238, 0.2);
}

body.light-theme .home-hero-banner {
    background: linear-gradient(135deg, rgba(216, 67, 21, 0.08) 0%, rgba(216, 67, 21, 0.02) 100%);
    border-color: rgba(216, 67, 21, 0.12);
}

body.light-theme .home-hero-banner h2 {
    background: var(--md-sys-color-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.light-theme .hero-badge {
    background: rgba(255, 160, 0, 0.1);
    border-color: rgba(255, 160, 0, 0.2);
    color: #B26A00;
}

body.light-theme .section-subtitle,
body.light-theme .activity-header h3 {
    color: rgba(31, 27, 26, 0.5);
}

body.light-theme .home-card-premium {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-theme .home-card-premium.new-churras:hover {
    border-color: rgba(216, 67, 21, 0.3);
    box-shadow: var(--md-sys-elevation-2), 0 0 25px rgba(216, 67, 21, 0.06);
}

body.light-theme .home-card-premium.view-history:hover {
    border-color: rgba(255, 160, 0, 0.35);
    box-shadow: var(--md-sys-elevation-2), 0 0 25px rgba(255, 160, 0, 0.06);
}

body.light-theme .recent-activity-item {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(0, 0, 0, 0.06);
}

body.light-theme .recent-activity-item:hover {
    background: #FFFFFF;
    border-color: rgba(216, 67, 21, 0.2);
}

body.light-theme .activity-icon-indicator {
    background: rgba(216, 67, 21, 0.06);
}

body.light-theme .activity-cost {
    color: #2E7D32;
}

body.light-theme .recent-empty-state {
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(31, 27, 26, 0.4);
}

.password-input-wrapper {
    position: relative;
    width: 100%;
}

.password-input-wrapper input {
    padding-right: 52px;
}

.password-toggle-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(245, 240, 238, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px; /* tap target ~44x44px */
    border-radius: 50%;
    transition: color 0.2s, background-color 0.2s;
}

.password-toggle-btn:hover {
    color: var(--md-sys-color-primary);
    background-color: rgba(255, 255, 255, 0.05);
}

.light-theme .password-toggle-btn {
    color: rgba(22, 18, 17, 0.4);
}

.light-theme .password-toggle-btn:hover {
    color: var(--md-sys-color-primary);
    background-color: rgba(0, 0, 0, 0.05);
}

.aviso-servidor-lento {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 12px);
    left: 12px;
    right: 12px;
    width: fit-content;
    max-width: min(420px, calc(100vw - 24px));
    margin: 0 auto;
    transform: translateY(-16px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 18px;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
    box-shadow: var(--md-sys-elevation-2);
    color: var(--md-sys-color-on-surface);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.aviso-servidor-lento.visivel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.aviso-servidor-lento .material-symbols-outlined {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--md-sys-color-primary);
    animation: avisoServidorPulsa 1.2s ease-in-out infinite;
}
@keyframes avisoServidorPulsa {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .aviso-servidor-lento .material-symbols-outlined {
        animation: none;
    }
}

.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

@media (max-width: 600px) {
    .toast-container {
        top: auto;
        bottom: calc(24px + env(safe-area-inset-bottom));
        left: 24px;
        right: 24px;
    }
}

.toast {
    pointer-events: auto;
    min-width: 280px;
    max-width: 380px;
    padding: 16px 20px;
    border-radius: 14px;
    background: rgba(22, 18, 17, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--md-sys-color-outline);
    box-shadow: var(--md-sys-elevation-3);
    color: var(--md-sys-color-on-surface);
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateY(-20px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.toast-message {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.toast.success {
    border-color: rgba(76, 175, 80, 0.3);
    background: rgba(22, 18, 17, 0.9);
}
.toast.success .toast-icon {
    color: #81C784;
}

.toast.error {
    border-color: rgba(207, 102, 121, 0.3);
    background: rgba(22, 18, 17, 0.9);
}
.toast.error .toast-icon {
    color: var(--md-sys-color-error);
}

.light-theme .toast {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.08);
}
.light-theme .toast.success {
    border-color: rgba(76, 175, 80, 0.2);
}
.light-theme .toast.error {
    border-color: rgba(207, 102, 121, 0.2);
}

/* Toast de "desfazer" (excluir churrasco, remover item do checklist) -- pedido do dono, só pra
   ações que considerou realmente importantes (perder um churrasco inteiro ou um item já
   calculado), não em toda ação pra não ficar repetitivo. A barra fina embaixo é o cronômetro
   visual dos 5s -- a duração real vem de JS (showUndoToast), setada como --toast-undo-duracao. */
.toast-undo {
    position: relative;
    overflow: hidden;
    padding-bottom: 20px;
    /* NUNCA flex-wrap aqui (achado do dono: nome de churrasco/item grande jogava o botão
       "Desfazer" pra uma segunda linha, feio e inconsistente) -- ícone, texto e botão sempre
       numa linha só; quem cede espaço é o texto (ver .toast-undo .toast-message), truncado com
       reticências no fim em vez de quebrar. */
}
/* .toast-message vira um mini flex row: só o NOME (tamanho variável, pode ser bem grande)
   trunca com reticências -- o sufixo fixo ("excluído.", "removido.") nunca encolhe, sempre
   continua legível por inteiro (achado do dono: truncar a frase toda cortava no meio da
   palavra do sufixo, ex: "festa do vicente remov..." em vez de "festa do vi... removido!"). */
.toast-undo .toast-message {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}
.toast-undo .toast-message-nome {
    flex-shrink: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.toast-undo .toast-message-sufixo {
    flex-shrink: 0;
    white-space: nowrap;
}
.toast-aviso .toast-message-nome {
    white-space: normal;
}
.toast-undo-btn {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--md-sys-color-primary);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
}
.toast-undo-btn:hover {
    background: rgba(255, 78, 0, 0.12);
}
.toast-undo-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--md-sys-color-primary);
    opacity: 0.6;
    animation: toastUndoProgress linear forwards;
    animation-duration: var(--toast-undo-duracao, 5000ms);
}
@keyframes toastUndoProgress {
    from { width: 100%; }
    to { width: 0%; }
}

.cookie-consent-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 10000;
    max-width: 560px;
    margin: 0 auto;
    padding: 18px 20px;
    border-radius: 16px;
    background: rgba(22, 18, 17, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--md-sys-color-outline);
    box-shadow: var(--md-sys-elevation-3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    animation: cookieConsentIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes cookieConsentIn {
    from {
        transform: translateY(24px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.cookie-consent-text {
    flex: 1 1 auto;
    min-width: 200px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--md-sys-color-on-surface);
    margin: 0;
}

.cookie-consent-text a {
    color: var(--md-sys-color-primary);
    font-weight: 600;
}

.cookie-consent-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

.cookie-consent-actions .btn {
    padding: 8px 16px;
    font-size: 13px;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .cookie-consent-banner {
        flex-direction: column;
        align-items: stretch;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
    }

    .cookie-consent-actions {
        margin-left: 0;
        justify-content: flex-end;
    }
}

.light-theme .cookie-consent-banner {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(0, 0, 0, 0.08);
}

.per-person-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 8px 0;
    margin-top: 8px;
    font-weight: 700;
    font-size: 16px;
    color: var(--md-sys-color-secondary-text);
    border-top: 1px dashed var(--md-sys-color-outline);
}

.per-person-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Card #52: quando o valor por pessoa é diferente pra quem bebe/não bebe álcool, o valor
   principal vira uma média (idêntico ao valor de sempre) com uma etiqueta "média" + seta ao
   lado -- o PRÓPRIO valor é o botão que expande o detalhe (.per-person-detalhe) por baixo.
   Antes existia um botão de seta separado ao lado do rótulo "Total por Pessoa", mas isso
   espremia 2 botões (esse + o de incluir crianças, .child-toggle-btn) numa linha só e quebrava
   feio no mobile (achado ao vivo, 2026-09-21) -- por isso a interação foi movida pro lado do
   valor, que tem espaço sobrando por ser sozinho naquele lado da linha. */
#modal-per-person-value {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: default;
}

#modal-per-person-value.clickable {
    cursor: pointer;
    position: relative;
}

.per-person-media-tag {
    font-size: 11px;
    font-weight: 400;
    color: var(--md-sys-color-secondary-text);
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.per-person-chevron {
    font-size: 14px;
    transform: rotate(90deg);
    transition: transform 0.2s ease;
}

#modal-per-person-value.active .per-person-chevron {
    transform: rotate(-90deg);
}

#modal-per-person-value.clickable[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%;
    right: 0;
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-background);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    box-shadow: var(--md-sys-elevation-1);
    z-index: 5;
}

#modal-per-person-value.clickable:hover[data-tooltip]::before {
    opacity: 1;
}

.per-person-detalhe {
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--md-sys-color-outline);
    font-size: 12px;
    font-weight: 400;
    color: var(--md-sys-color-secondary-text);
}

.per-person-detalhe .bebe {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--md-sys-color-primary);
}

.per-person-detalhe .bebe .material-symbols-outlined {
    font-size: 14px;
}

.child-toggle-btn {
    background: rgba(255, 78, 0, 0.05);
    border: 2px solid var(--md-sys-color-outline);
    border-radius: 50%;
    width: 44px; /* tap target mínimo recomendado (44x44px) */
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(245, 240, 238, 0.6);
    transition: all 0.25s ease;
    position: relative;
}

.child-toggle-btn .material-symbols-outlined {
    font-size: 20px;
    /* Contém o fallback de texto do ícone (ex: "child_care") se a fonte falhar/demorar,
       pra não estourar o círculo de 44px; escopado só ao ícone pra não afetar o texto
       "Meio dia/Noite" do botão de turno, que reusa essa classe. */
    display: inline-block;
    width: 22px;
    height: 22px;
    overflow: hidden;
    text-align: center;
}

.child-toggle-btn:hover {
    color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
    background-color: rgba(255, 78, 0, 0.15);
    box-shadow: 0 0 8px rgba(255, 78, 0, 0.3);
}

.child-toggle-btn.active {
    color: #FFFFFF;
    background-color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 2px 12px rgba(255, 78, 0, 0.4);
}

.child-toggle-btn[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    max-width: 160px;
    width: max-content;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1001;
}

/* :active cobre o toque em telas touch, já que :hover não é confiável nelas */
.child-toggle-btn[data-tooltip]:hover::before,
.child-toggle-btn[data-tooltip]:active::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.light-theme .per-person-row {
    color: var(--md-sys-color-secondary-text);
}
.light-theme .child-toggle-btn {
    color: rgba(31, 27, 26, 0.4);
}
.light-theme .child-toggle-btn:hover {
    color: var(--md-sys-color-primary);
    background-color: rgba(216, 67, 21, 0.08);
    border-color: var(--md-sys-color-primary);
}
.light-theme .child-toggle-btn.active {
    color: #FFFFFF;
    background-color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
}

@media print {
    body * {
        visibility: hidden;
    }
    #export-print-content,
    #export-print-content * {
        visibility: visible;
    }
    #export-print-content {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        white-space: pre-wrap;
        word-break: break-word;
        font-family: 'Courier New', monospace;
        font-size: 13px;
        line-height: 1.5;
        color: #000;
        background: #fff;
        padding: 24px;
        box-sizing: border-box;
    }
}



/* Barra de abas inferior (só mobile) */
.bottom-tabbar {
    display: none;
}

@media (max-width: 768px) {
    :root {
        --tabbar-altura: 64px;
        --topbar-h: 72px;
    }

    .top-nav,
    .avatar-btn,
    .top-bar-right .theme-switch {
        display: none;
    }

    .main-content {
        height: calc(100vh - var(--topbar-h) - env(safe-area-inset-top) - var(--tabbar-altura) - env(safe-area-inset-bottom));
        height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top) - var(--tabbar-altura) - env(safe-area-inset-bottom));
    }

    body.teclado-aberto .main-content {
        height: calc(100vh - var(--topbar-h) - env(safe-area-inset-top));
        height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top));
    }

    .content-section {
        padding-bottom: 40px;
    }

    .bottom-tabbar {
        --tabbar-indice: 0;
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        height: calc(var(--tabbar-altura) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--md-sys-color-surface);
        border-top: 1px solid var(--md-sys-color-outline);
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.22);
        overflow: hidden;
    }

    body.teclado-aberto .bottom-tabbar {
        display: none;
    }

    .tabbar-indicador {
        position: absolute;
        top: 0;
        left: 0;
        width: 25%;
        height: 3px;
        display: flex;
        justify-content: center;
        transform: translateX(calc(var(--tabbar-indice) * 100%));
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
    }

    .tabbar-indicador::before {
        content: '';
        width: 56%;
        height: 100%;
        border-radius: 0 0 4px 4px;
        background: var(--md-sys-color-primary-gradient);
    }

    .tabbar-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 2px 0;
        border: none;
        background: none;
        font-family: var(--md-sys-typescale-font);
        color: var(--md-sys-color-secondary-text);
        cursor: pointer;
        transition: color 0.2s ease;
    }

    .tabbar-item .material-symbols-outlined {
        font-size: 24px;
        transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .tabbar-label {
        font-size: 11px;
        font-weight: 600;
        line-height: 1.1;
        letter-spacing: 0.1px;
    }

    .tabbar-item.active {
        color: var(--md-sys-color-primary);
    }

    .tabbar-item.active .material-symbols-outlined {
        font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
        transform: translateY(-1px);
    }

    .tabbar-item:active .material-symbols-outlined {
        transform: scale(0.92);
    }
}

@media (max-width: 600px) {
    :root {
        --topbar-h: 64px;
    }
}

/* Modais de conta (alterar nome/senha, link enviado): mais compactos, sem sobrar espaço em branco */
#alterar-nome-modal .modal-header,
#alterar-senha-modal .modal-header,
#link-enviado-modal .modal-header {
    padding: 16px 20px;
}
#alterar-nome-modal .modal-body,
#alterar-senha-modal .modal-body {
    padding: 16px 20px 8px;
}
#alterar-nome-modal .modal-footer,
#alterar-senha-modal .modal-footer {
    padding: 12px 20px 16px;
}
#alterar-senha-modal .input-field {
    margin-bottom: 14px;
}
#alterar-senha-modal .input-field label {
    margin-bottom: 6px;
}
.modal-intro {
    margin: 0 0 14px 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--md-sys-color-secondary-text);
}
.field-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--md-sys-color-secondary-text);
}
.link-btn {
    display: block;
    margin: 6px 0 0 auto;
    padding: 4px 0;
    border: none;
    background: none;
    color: var(--md-sys-color-primary);
    font-family: var(--md-sys-typescale-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.link-btn:hover {
    text-decoration: underline;
}

#link-enviado-texto,
#link-enviado-modal .modal-intro {
    text-wrap: balance;
}
#alterar-senha-intro {
    text-align: center;
    text-wrap: balance;
}
.email-chip {
    max-width: 100%;
    margin: 0 0 14px;
    padding: 6px 14px;
    border-radius: 14px;
    background: rgba(128, 128, 128, 0.15);
    color: var(--md-sys-color-on-surface);
    font-size: 14px;
    font-weight: 700;
    word-break: break-all;
}
#link-enviado-modal .modal-body {
    padding: 20px 24px 8px;
}
#link-enviado-modal .modal-footer {
    padding: 12px 20px 16px;
}
#link-enviado-modal .modal-surface {
    position: relative;
    overflow: hidden;
}
.auto-close-bar {
    height: 3px;
    width: 100%;
    flex-shrink: 0;
    background: var(--md-sys-color-primary);
    transform-origin: left;
}
.auto-close-bar.rodando {
    animation: linkEnviadoBarra 10s linear forwards;
}
@keyframes linkEnviadoBarra {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (max-width: 600px) {
    .modal-footer.modal-footer-lado-a-lado {
        flex-direction: row;
        gap: 12px;
    }
    .modal-footer.modal-footer-lado-a-lado .btn {
        flex: 1;
        width: auto;
        white-space: nowrap;
    }
}

.top-titulo-tela {
    display: none;
}

@media (max-width: 768px) {
    .top-app-bar {
        padding-left: 18px;
        padding-right: 22px;
    }
    .top-titulo-tela {
        display: block;
        max-width: 55vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 7px 14px;
        border-radius: 999px;
        background: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-primary);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
    }
    .top-titulo-tela.troca {
        animation: tituloTelaEntra 0.25s ease;
    }
}
@keyframes tituloTelaEntra {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Celular deitado: barras mais baixas pra sobrar espaço pro conteúdo */
@media (max-width: 768px) and (max-height: 500px) {
    :root {
        --topbar-h: 52px;
        --tabbar-altura: 48px;
    }

    .top-app-bar {
        height: calc(var(--topbar-h) + env(safe-area-inset-top));
    }

    .bottom-tabbar {
        border-radius: 16px 16px 0 0;
    }

    .tabbar-item {
        flex-direction: row;
        gap: 6px;
        padding-top: 3px;
    }

    .tabbar-label {
        font-size: 12px;
    }
}

/* Combos de itens: chips no topo do formulário, tela "Meus combos" e editor */
.combo-bar {
    margin: 0 0 16px;
}
.combo-bar-titulo {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--md-sys-color-secondary-text);
    margin: 0 2px 8px;
}
.combo-chips {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px;
}
.combo-chips.recolhido {
    overflow: hidden;
}
.combo-chips-mais {
    margin: 4px 2px 0;
    padding: 6px 2px;
    border: none;
    background: none;
    color: var(--md-sys-color-primary);
    font-family: var(--md-sys-typescale-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.combo-chips-mais[hidden] {
    display: none;
}
.combo-chip-nome {
    overflow: hidden;
    text-overflow: ellipsis;
}
.combo-chip {
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 15px;
    border-radius: 999px;
    border: 1px solid var(--md-sys-color-outline);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-font);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.combo-chip:hover {
    border-color: var(--md-sys-color-primary);
}
.combo-chip .material-symbols-outlined {
    font-size: 18px;
}
.combo-chip.ativo {
    background: var(--md-sys-color-primary-container);
    border-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-primary);
}
.combo-chip-zero {
    border-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-primary);
}
.combo-chip-zero.ativo {
    background: var(--md-sys-color-primary);
    color: #fff;
}
#churrasco-form.modo-edicao .combo-bar {
    display: none;
}
.combo-editor-itens {
    margin-top: 16px;
}
.combo-sel-grupo {
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 12px;
    margin: 0 0 10px;
    padding: 6px 12px 12px;
    min-width: 0;
}
.combo-sel-grupo legend {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--md-sys-color-primary);
    padding: 0 6px;
}
.combo-sel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px 10px;
}
.combo-sel-item {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    min-height: 28px;
}
.combo-sel-item span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.combo-sel-item input {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--md-sys-color-primary);
}

@media (max-width: 400px) {
    #combo-editor-modal .modal-body {
        padding: 16px;
    }
    .combo-sel-grupo {
        padding: 4px 10px 10px;
    }
}
@media (max-height: 500px) {
    #combo-editor-modal .modal-header {
        padding: 10px 20px;
    }
    #combo-editor-modal .modal-body {
        padding: 12px 20px;
    }
    #combo-editor-modal .modal-footer {
        padding: 10px 20px;
    }
    #combo-editor-modal .combo-editor-itens {
        margin-top: 10px;
    }
}

.btn-combo-destaque {
    border: 1px dashed var(--md-sys-color-primary);
    color: var(--md-sys-color-primary);
}
.combo-salvar-ajuda {
    font-size: 12px;
    line-height: 1.5;
    color: var(--md-sys-color-secondary-text);
    margin: 10px 2px 0;
}
#combo-salvar-modal .combo-salvar-rodape {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 16px 24px 20px;
}
#combo-salvar-modal .combo-salvar-rodape .btn {
    width: 100%;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 360px) {
    #combo-salvar-modal .combo-salvar-rodape .btn {
        font-size: 13px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

.btn.btn-combo-salvo {
    border: 1px solid rgba(76, 175, 80, 0.55);
    background: rgba(76, 175, 80, 0.14);
    color: #81C784;
}
.light-theme .btn.btn-combo-salvo {
    border-color: rgba(46, 125, 50, 0.5);
    background: rgba(76, 175, 80, 0.12);
    color: #2E7D32;
}

.btn.btn-combo-atualizar {
    border: 1px solid var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
}
#combo-salvar-modal .combo-salvar-rodape .text-btn {
    order: 3;
}

.combo-chip-favorito:not(.ativo) {
    border-color: #E0A800;
}
.combo-chip-favorito .material-symbols-outlined {
    color: #F5B301;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.icon-btn.favorito-ativo {
    color: #F5B301;
    border-color: rgba(245, 179, 1, 0.55);
    background: rgba(245, 179, 1, 0.12);
}
.icon-btn.favorito-ativo .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.combos-resumo {
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-secondary-text);
    margin: 0 2px 12px;
}
.combos-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.combos-lista[hidden] {
    display: none;
}
.combo-card {
    background-color: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
}
.combo-card-topo {
    display: flex;
    align-items: center;
    gap: 8px;
}
.combo-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.combo-card-info strong {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.combo-card-sub {
    font-size: 12px;
    color: var(--md-sys-color-secondary-text);
}
.combo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.combo-tag {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.12);
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
}
.combo-card-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
}
.combo-usar-btn {
    flex: 1 1 90px;
    min-height: 44px;
    padding: 0 16px;
    border: none;
    border-radius: 12px;
    background: var(--md-sys-color-primary);
    color: #fff;
    font-family: var(--md-sys-typescale-font);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.combo-acao-texto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 12px;
    background: none;
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.combo-acao-texto .material-symbols-outlined {
    font-size: 18px;
}
.combo-vazio-card {
    text-align: center;
    padding: 24px 18px;
    border: 1px dashed var(--md-sys-color-outline);
    border-radius: 16px;
    color: var(--md-sys-color-secondary-text);
    font-size: 14px;
    line-height: 1.5;
}
.combo-vazio-card .material-symbols-outlined {
    font-size: 40px;
    color: var(--md-sys-color-primary);
    margin-bottom: 6px;
}
.combo-vazio-card .combo-usar-btn {
    margin-top: 14px;
    width: 100%;
}
.combos-ocultos {
    margin-top: 18px;
}
.combos-ocultos-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 2px;
    border: none;
    background: none;
    color: var(--md-sys-color-secondary-text);
    font-family: var(--md-sys-typescale-font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}
.combos-ocultos-toggle .material-symbols-outlined {
    font-size: 20px;
    transition: transform 0.2s ease;
}
.combos-ocultos-toggle[aria-expanded="true"] .material-symbols-outlined {
    transform: rotate(180deg);
}
.combos-ocultos[hidden] {
    display: none;
}
.combos-lista-aviso {
    font-size: 13px;
    color: var(--md-sys-color-secondary-text);
    padding: 4px 2px;
}
@media (max-width: 360px) {
    .combo-card {
        padding: 12px;
    }
}

/* No desktop os cartões de combo ficam em duas colunas (a página encurta e o botão Usar não estica demais). */
@media (min-width: 769px) {
    .combos-lista {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 12px;
    }
    .combos-lista > .combo-vazio-card,
    .combos-lista > .combos-lista-aviso {
        grid-column: 1 / -1;
    }
}

.combos-secao-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin: 36px 2px 14px;
}
.combos-secao-cab-primeira {
    margin-top: 8px;
}
.combos-secao-cab .combos-resumo {
    margin: 0;
}
.combos-secao-titulo {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--md-sys-color-on-surface);
}
.combos-ocultos {
    margin-top: 28px;
}
.combos-lista {
    gap: 12px;
}
@media (min-width: 769px) {
    .combos-lista {
        gap: 14px;
    }
}
body.light-theme .icon-btn.favorito-ativo,
body.light-theme .icon-btn.favorito-ativo:hover {
    color: #B88400;
    border-color: rgba(184, 132, 0, 0.55);
    background: rgba(245, 179, 1, 0.18);
}

/* Sino de notificações (cabeçalho) e painel */
.sino-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}
.sino-bell[hidden] {
    display: none;
}
.sino-bell:hover,
.sino-bell.aberto {
    background: rgba(128, 128, 128, 0.14);
}
.sino-bell .material-symbols-outlined {
    font-size: 24px;
}
.sino-badge {
    position: absolute;
    top: -1px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #ff5252;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--md-sys-color-surface);
}
.sino-badge[hidden] {
    display: none;
}

.sino-panel {
    position: fixed;
    top: calc(72px + env(safe-area-inset-top) + 8px);
    right: 24px;
    width: 380px;
    max-width: calc(100vw - 24px);
    max-height: min(560px, calc(100dvh - 72px - env(safe-area-inset-top) - 24px));
    display: flex;
    flex-direction: column;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 16px;
    box-shadow: var(--md-sys-elevation-3);
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.sino-panel.aberto {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}
.sino-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline);
    font-size: 15px;
}
.sino-link {
    background: none;
    border: none;
    padding: 4px 0;
    color: var(--md-sys-color-primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.sino-link:hover {
    text-decoration: underline;
}
.sino-link[hidden],
.sino-panel-footer[hidden] {
    display: none;
}
.sino-lista {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sino-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 12px 12px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.sino-item:last-child {
    border-bottom: none;
}
.sino-item:hover {
    background: rgba(128, 128, 128, 0.08);
}
.sino-item.nao-lida {
    background: rgba(255, 78, 0, 0.06);
}
.sino-item.nao-lida:hover {
    background: rgba(255, 78, 0, 0.1);
}
.sino-icone {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(128, 128, 128, 0.16);
    color: var(--md-sys-color-secondary-text);
}
.sino-icone .material-symbols-outlined {
    font-size: 19px;
}
.sino-tipo-novidade .sino-icone {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
}
.sino-tipo-churrasco .sino-icone {
    background: rgba(46, 204, 113, 0.16);
    color: #2ecc71;
}
body.light-theme .sino-tipo-churrasco .sino-icone {
    color: #1b8f4e;
}
.sino-corpo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sino-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}
.sino-ponto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    flex-shrink: 0;
}
.sino-texto {
    font-size: 13px;
    color: var(--md-sys-color-secondary-text);
    overflow-wrap: anywhere;
}
.sino-rodape-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 10px;
    font-size: 12px;
    color: var(--md-sys-color-secondary-text);
}
.sino-acao {
    display: inline-flex;
    align-items: center;
    color: var(--md-sys-color-primary);
    font-weight: 600;
}
.sino-acao .material-symbols-outlined {
    font-size: 16px;
    margin-left: 1px;
    transition: transform 0.15s ease;
}
.sino-item:hover .sino-acao {
    text-decoration: underline;
}
.sino-item:hover .sino-acao .material-symbols-outlined {
    transform: translateX(2px);
}
.sino-etiqueta {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--md-sys-color-primary);
}
.sino-titulo-texto {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sino-remover {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: -3px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--md-sys-color-secondary-text);
    cursor: pointer;
}
.sino-remover:hover {
    background: rgba(128, 128, 128, 0.16);
    color: var(--md-sys-color-on-surface);
}
.sino-remover .material-symbols-outlined {
    font-size: 18px;
}
.sino-panel-footer {
    padding: 8px;
    text-align: center;
    border-top: 1px solid var(--md-sys-color-outline);
}
.sino-vazio {
    padding: 36px 24px;
    text-align: center;
    color: var(--md-sys-color-secondary-text);
    font-size: 13px;
}
.sino-vazio .material-symbols-outlined {
    display: block;
    margin-bottom: 8px;
    font-size: 34px;
    opacity: 0.6;
}
.sino-vazio strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    color: var(--md-sys-color-on-surface);
}

@media (max-width: 768px) {
    .sino-bell {
        width: 40px;
        height: 40px;
        margin-left: -6px;
    }
    .sino-panel {
        top: calc(var(--topbar-h, 72px) + env(safe-area-inset-top) + 6px);
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - var(--topbar-h, 72px) - env(safe-area-inset-top) - var(--tabbar-altura, 64px) - env(safe-area-inset-bottom) - 24px);
    }
}

/* Cabeçalho no celular: respiro entre logo, título da tela e sino (em 360px os três ficavam colados) */
@media (max-width: 768px) {
    .top-app-bar {
        gap: 12px;
        padding-left: 14px;
        padding-right: 8px;
    }
    .app-title {
        flex-shrink: 0;
    }
    .top-bar-right {
        gap: 8px;
        min-width: 0;
    }
    .top-titulo-tela {
        max-width: none;
        padding: 6px 12px;
        font-size: 12px;
    }
    .sino-bell {
        width: 36px;
        height: 36px;
        margin-left: 0;
    }
    .sino-bell .material-symbols-outlined {
        font-size: 22px;
    }
}

/* Chips de combo no celular: grade de 2 colunas, todos do mesmo tamanho */
@media (max-width: 600px) {
    .combo-chips {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .combo-chip {
        justify-content: center;
        gap: 5px;
        min-height: 40px;
        padding: 8px 6px;
        max-width: none;
        white-space: normal;
        text-align: center;
        line-height: 1.15;
    }
    .combo-chip-nome {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

@media (max-width: 340px) {
    .app-title {
        font-size: 16px;
        gap: 4px;
    }
    .app-title .material-symbols-outlined {
        font-size: 20px;
    }
}

.guests-grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 420px) {
    .guests-grid .input-field input {
        padding-left: 12px;
        padding-right: 12px;
    }
}

.export-agenda-botoes {
    display: contents;
}

.export-agenda-botoes.oculto {
    display: none;
}

@media (max-width: 600px) {
    .export-agenda-botoes {
        display: flex;
        gap: 12px;
        width: 100%;
    }

    .export-agenda-botoes.oculto {
        display: none;
    }

    .export-agenda-botoes .btn {
        flex: 1;
        width: auto;
        min-width: 0;
        padding: 12px 8px;
        gap: 6px;
        font-size: 13px;
    }
}

#export-modal .modal-footer .btn {
    padding-left: 20px;
    padding-right: 20px;
}

@media (max-width: 600px) {
    #export-modal .modal-footer .btn {
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (min-width: 601px) {
    #export-modal .modal-footer .btn {
        flex: 1 1 auto;
    }
}

.item-row.item-row-parcial {
    flex-wrap: wrap;
    row-gap: 2px;
}

.item-row .item-parcial {
    flex: 1 1 100%;
    padding-left: 32px;
    font-size: 12px;
    font-weight: 500;
    color: var(--md-sys-color-secondary-text);
}

.input-field input.input-erro {
    border-color: var(--md-sys-color-error);
    box-shadow: 0 0 0 3px rgba(207, 102, 121, 0.18);
}

.campo-erro {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-error);
    scroll-margin-top: 96px;
}

.campo-erro .material-symbols-outlined {
    font-size: 18px;
}

body.light-theme .input-field input.input-erro {
    border-color: var(--md-sys-color-error);
    box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.14);
}

/* Lista de convidados nominal (card #56) */
.abas-churrasco {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 20px;
    border-radius: 14px;
    background: var(--md-sys-color-outline);
}

.aba-churrasco {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--md-sys-color-secondary-text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.aba-churrasco .material-symbols-outlined {
    font-size: 20px;
}

.aba-churrasco.ativa {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
    cursor: default;
}

.aba-churrasco:not(.ativa):hover {
    color: var(--md-sys-color-on-surface);
}

.convidados-resumo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.convidados-resumo:empty {
    display: none;
}

.convidados-stat {
    position: relative;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
}

.convidados-stat-valor {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
}

.convidados-stat-valor small {
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-secondary-text);
}

.convidados-stat-rotulo {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-secondary-text);
}

.convidados-stat .checklist-progress-bar {
    margin-top: 10px;
}

.convidados-barra {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.convidados-novo-botao {
    flex: 1 1 auto;
    min-height: 52px;
    white-space: nowrap;
}

@media (min-width: 601px) {
    .convidados-novo-botao {
        flex: 0 0 auto;
        min-width: 260px;
    }
}

.convidados-filtro {
    margin-bottom: 16px;
}

.convidados-lote-toggle {
    margin: 4px 0 16px;
    padding-left: 0;
    padding-right: 0;
    font-size: 13px;
}

.convidados-lote:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.convidados-lote .input-field {
    margin-bottom: 0;
}

.segmentado {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--md-sys-color-outline);
}

.segmentado label {
    position: relative;
    flex: 1;
}

.segmentado input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.segmentado span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    color: var(--md-sys-color-secondary-text);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.segmentado input:checked + span {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
}

.segmentado input:focus-visible + span {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 1px;
}

.convidados-limpar {
    margin-left: auto;
    white-space: nowrap;
    color: var(--md-sys-color-error);
}

.convidados-limpar[hidden] {
    display: none;
}

.convidado-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: 14px;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
}

.convidado-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.convidado-info {
    flex: 1;
    min-width: 0;
}

.convidado-nome {
    display: block;
    font-size: 16px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.convidado-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.convidado-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 14px;
    background: var(--md-sys-color-outline);
    color: var(--md-sys-color-on-surface);
    font-size: 14px;
    font-weight: 700;
}

.convidado-tag .material-symbols-outlined {
    font-size: 18px;
}

.convidado-tag-alcool {
    background: rgba(255, 167, 38, 0.18);
    color: #ffb74d;
}

.convidado-tag-carne {
    background: rgba(206, 147, 216, 0.18);
    color: #ce93d8;
}

body.light-theme .convidado-tag-alcool {
    background: rgba(230, 126, 0, 0.14);
    color: #a35a00;
}

body.light-theme .convidado-tag-carne {
    background: rgba(123, 31, 162, 0.12);
    color: #7b1fa2;
}

.convidado-acoes {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}

.convidado-marcas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.convidado-marca {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 20px;
    border: 1px solid var(--md-sys-color-outline);
    background: transparent;
    color: var(--md-sys-color-secondary-text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.convidado-marca .material-symbols-outlined {
    font-size: 18px;
}

.convidado-marca.ativa {
    background: rgba(76, 175, 80, 0.16);
    border-color: rgba(76, 175, 80, 0.5);
    color: #7bd88f;
}

.convidado-marca.ativa .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

body.light-theme .convidado-marca.ativa {
    background: rgba(46, 125, 50, 0.12);
    border-color: rgba(46, 125, 50, 0.45);
    color: #2e7d32;
}

.convidado-leva {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border-left: 3px solid var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
    font-size: 14px;
}

.convidado-leva .material-symbols-outlined {
    font-size: 20px;
    color: var(--md-sys-color-primary);
}

.convidado-leva-rotulo {
    font-weight: 800;
    color: var(--md-sys-color-primary);
}

.convidado-leva-chip {
    padding: 4px 12px;
    border-radius: 14px;
    background: var(--md-sys-color-surface);
    border: 1px solid rgba(255, 78, 0, 0.4);
    color: var(--md-sys-color-on-surface);
    font-weight: 700;
}

.convidado-bloco {
    margin-bottom: 16px;
}

.convidado-bloco-titulo {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--md-sys-color-secondary-text);
}

.convidado-opcao {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.convidado-opcao input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    accent-color: var(--md-sys-color-primary);
    cursor: pointer;
}

.convidado-leva-lista {
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 12px 12px;
    border-radius: 12px;
    border: 1px solid var(--md-sys-color-outline);
}

.convidado-leva-grupo {
    margin: 10px 0 2px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--md-sys-color-primary);
}

.convidado-leva-vazio {
    padding: 8px 0;
    font-size: 13px;
    color: var(--md-sys-color-secondary-text);
}

@media (max-width: 420px) {
    .convidados-stat-valor {
        font-size: 20px;
    }

    .convidados-novo-botao {
        padding-left: 14px;
        padding-right: 14px;
        font-size: 14px;
    }

    .convidados-limpar {
        padding-left: 8px;
        padding-right: 8px;
    }
}

.convidados-calculo-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.convidados-calculo-footer .btn {
    width: 100%;
}

.segmentado.input-erro {
    outline: 1px solid var(--md-sys-color-error);
}

.convidado-cadeado {
    display: none;
    font-size: 18px;
    color: var(--md-sys-color-secondary-text);
}

.convidado-opcao-travada {
    cursor: not-allowed;
}

.convidado-opcao-travada input {
    cursor: not-allowed;
}

.convidado-opcao-travada .convidado-cadeado {
    display: inline-block;
}

#convidado-novo-nome-campo {
    margin-bottom: 4px;
}

.checklist-header .subtitle {
    text-wrap: balance;
}

@media (max-width: 359px) {
    .convidados-botao-complemento {
        display: none;
    }
}

.convidados-progresso {
    margin-bottom: 20px;
}

.convidados-progresso[hidden] {
    display: none;
}

.convidados-progresso-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}

.convidados-prog-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
}

.convidados-prog-rotulo {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-secondary-text);
}

.convidados-prog-item strong {
    font-size: 16px;
    font-weight: 800;
}

.convidados-prog-status {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-sys-color-secondary-text);
}

.convidados-prog-item.completo .convidados-prog-status {
    color: var(--md-sys-color-primary);
}

.convidados-prog-item.acima .convidados-prog-status {
    color: var(--md-sys-color-error);
}

.convidado-editar-rotulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.convidado-editar-rotulo label {
    margin-bottom: 0;
}

.convidado-tipo-selo {
    padding: 3px 12px;
    border-radius: 12px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
    font-size: 12px;
    font-weight: 700;
}

.convidado-bloco-linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.convidado-bloco-contagem {
    font-size: 12px;
    font-weight: 700;
    color: var(--md-sys-color-primary);
}

.convidado-pilulas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.convidado-pilula {
    position: relative;
}

.convidado-pilula input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.convidado-pilula span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 19px;
    border: 1px solid var(--md-sys-color-outline);
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-secondary-text);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.convidado-pilula input:checked + span {
    background: var(--md-sys-color-primary-container);
    border-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-primary);
}

.convidado-pilula input:checked + span::before {
    content: '✓';
    font-weight: 800;
}

.convidado-pilula input:focus-visible + span {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 1px;
}

/* Pop-up de editar: só "O que leva" rola; o resto do pop-up cabe na tela e a lista usa o espaço que sobrar. */
#convidado-editar-modal .modal-body {
    display: flex;
    flex-direction: column;
}

#convidado-editar-modal .convidado-bloco:last-child {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
}

#convidado-editar-modal .convidado-leva-lista {
    flex: 1 1 auto;
    min-height: 80px;
    max-height: 360px;
}

@media (max-width: 600px) {
    #convidado-editar-modal .convidado-leva-lista {
        max-height: none;
    }

    #convidado-editar-modal .modal-header {
        padding: 16px 20px;
    }

    #convidado-editar-modal .modal-body {
        padding: 16px 20px;
    }

    #convidado-editar-modal .modal-footer {
        flex-direction: row;
        align-items: center;
        padding: 12px 20px;
    }

    #convidado-editar-modal .modal-footer .primary-btn {
        flex: 1;
    }
}

.convidados-stat-icone {
    position: absolute;
    top: 12px;
    right: 14px;
    display: flex;
    color: var(--md-sys-color-secondary-text);
}

.convidados-stat-icone .material-symbols-outlined {
    font-size: 34px;
}

.convidado-tag-naopaga {
    background: rgba(100, 181, 246, 0.18);
    color: #64b5f6;
}

body.light-theme .convidado-tag-naopaga {
    background: rgba(21, 101, 192, 0.12);
    color: #1565c0;
}

@media (max-width: 400px) {
    .aba-churrasco {
        padding: 0 6px;
        font-size: 13px;
    }

    .aba-churrasco .material-symbols-outlined {
        display: none;
    }
}

.divisao-bloco {
    margin-bottom: 16px;
}

.divisao-nota {
    margin-top: 8px;
    font-size: 13px;
    color: var(--md-sys-color-secondary-text);
}

.divisao-pergunta .divisao-nota:first-of-type {
    margin-top: 0;
}

.divisao-botoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.divisao-total-sozinho {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
}

.divisao-sem-valor {
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-secondary-text);
}





.divisao-pessoa {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    margin-bottom: 8px;
    border-radius: 14px;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
    transition: border-color 0.3s ease;
}

.divisao-pessoa.pago {
    border-color: rgba(76, 175, 80, 0.45);
}

.divisao-pessoa-sub {
    font-size: 12px;
    color: var(--md-sys-color-secondary-text);
}

.divisao-pessoa-valor {
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.divisao-pessoa-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.divisao-pessoa-nome {
    font-weight: 700;
    overflow-wrap: anywhere;
}


.divisao-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.divisao-pergunta,
.divisao-sozinho {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.divisao-pergunta .card-title,
.divisao-sozinho .card-title,
.divisao-pergunta > .divisao-nota,
.divisao-sozinho > .divisao-nota,
.divisao-pergunta .divisao-bloco {
    margin: 0;
}

.divisao-sozinho .btn {
    align-self: flex-start;
}

.per-person-row #modal-per-person-value {
    display: inline-flex;
    align-items: center;
    color: var(--md-sys-color-primary);
    font-weight: 700;
}

.divisao-bloco .divisao-nota {
    margin-top: 10px;
}

.divisao-modo {
    margin-bottom: 16px;
}

.divisao-perfis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.divisao-perfil-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px;
    border-radius: 14px;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
}

.divisao-perfil-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.divisao-perfil-tags .convidado-tag {
    padding: 3px 9px;
    font-size: 12px;
}

.divisao-perfil-tags .convidado-tag .material-symbols-outlined {
    font-size: 15px;
}

.divisao-perfil-valor {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--md-sys-color-primary);
}

.divisao-perfil-sub {
    margin-top: -6px;
    font-size: 12px;
    color: var(--md-sys-color-secondary-text);
}

.divisao-recebido {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
    border-radius: 14px;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
}

.divisao-recebido-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    font-size: 14px;
    color: var(--md-sys-color-secondary-text);
}

.divisao-recebido-linha strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--md-sys-color-on-surface);
}

.divisao-recebido-contagem {
    font-size: 13px;
    color: var(--md-sys-color-secondary-text);
}

.divisao-recebido-aviso {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 4px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--md-sys-color-primary-container);
    font-size: 13px;
    line-height: 1.4;
}

.divisao-recebido-aviso .material-symbols-outlined {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--md-sys-color-primary);
}

.divisao-recebido .checklist-progress-bar {
    flex: none;
    height: 10px;
}

.convidados-restricoes {
    margin-bottom: 20px;
}

.convidados-restricoes[hidden] {
    display: none;
}

.convidados-restricoes-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px;
}

.restricao-bloco {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
}

.restricao-pergunta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.restricao-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
}

.restricao-icone .material-symbols-outlined {
    font-size: 18px;
}

.restricao-bloco .segmentado span {
    min-height: 40px;
}

.restricao-campos {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.restricao-campo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.restricao-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.restricao-texto strong {
    font-size: 14px;
}

.restricao-sub {
    font-size: 12px;
    color: var(--md-sys-color-secondary-text);
}

.restricao-stepper {
    display: flex;
    align-items: center;
    gap: 2px;
}

.restricao-valor {
    min-width: 28px;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
}

.restricao-stepper .icon-btn {
    width: 40px;
    height: 40px;
}

.restricao-stepper .icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.despesa-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 6px 6px 14px;
    margin-bottom: 8px;
    border-radius: 14px;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
}

.despesa-nome {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.despesa-linha strong {
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.divisao-pessoa-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.divisao-pessoa-valor {
    font-size: 18px;
}

.divisao-pessoa-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.divisao-pessoa-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}

.divisao-pessoa-status.ok {
    background: rgba(76, 175, 80, 0.12);
    color: #7bd88f;
}

.divisao-pessoa-status.falta {
    background: rgba(244, 67, 54, 0.12);
    color: #ff8a80;
}

.divisao-pessoa-status.extra {
    background: rgba(100, 181, 246, 0.12);
    color: #64b5f6;
}

body.light-theme .divisao-pessoa-status.ok {
    background: rgba(46, 125, 50, 0.1);
    color: #2e7d32;
}

body.light-theme .divisao-pessoa-status.falta {
    background: rgba(198, 40, 40, 0.08);
    color: #c62828;
}

body.light-theme .divisao-pessoa-status.extra {
    background: rgba(21, 101, 192, 0.08);
    color: #1565c0;
}

.divisao-acertar {
    flex-shrink: 0;
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid currentColor;
    border-radius: 16px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.valores-parte {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--md-sys-color-primary-container);
    font-size: 14px;
}

.valores-parte strong {
    font-size: 18px;
    color: var(--md-sys-color-primary);
}

#convidado-valores-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.campo-dica {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--md-sys-color-secondary-text);
}

.convidado-motivo {
    margin-top: 4px;
}

.convidado-motivo[hidden] {
    display: none;
}

.convidado-motivo-sugestoes {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.motivo-sugestao {
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 16px;
    background: transparent;
    color: var(--md-sys-color-secondary-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn[hidden] {
    display: none;
}

.pix-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: 14px;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
}

.pix-card-chave {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.pix-tipo {
    padding: 2px 10px;
    border-radius: 12px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
    font-size: 12px;
    font-weight: 700;
}

.pix-valor {
    font-size: 16px;
    overflow-wrap: anywhere;
}

.pix-card-definida {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "tipo icones" "valor valor" "acoes acoes";
    align-items: center;
    gap: 10px 12px;
}

.pix-card-definida .pix-tipo {
    grid-area: tipo;
    justify-self: start;
}

.pix-card-definida .pix-valor {
    grid-area: valor;
}

.pix-card-definida .pix-card-acoes {
    grid-area: acoes;
}

.pix-card-definida .pix-card-icones {
    grid-area: icones;
}

.pix-card-pergunta .pix-card-acoes .btn {
    flex: 1 1 140px;
    justify-content: center;
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
}

@media (min-width: 700px) {
    .pix-card-definida {
        grid-template-columns: auto 1fr auto auto;
        grid-template-areas: "tipo valor acoes icones";
        gap: 12px 16px;
    }

    .pix-card-pergunta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .pix-card-pergunta .pix-card-acoes {
        flex-wrap: nowrap;
        flex-shrink: 0;
    }

    .pix-card-pergunta .pix-card-acoes .btn {
        flex: 0 0 auto;
        min-width: 150px;
    }
}

.pix-card-icones {
    display: flex;
    flex-shrink: 0;
    gap: 4px;
}

.pix-pergunta-texto {
    flex-basis: 100%;
    font-weight: 700;
}

.pix-card-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#btn-pix-remover {
    white-space: nowrap;
    color: var(--md-sys-color-error);
}

@media (min-width: 601px) {
    #btn-pix-remover {
        flex: 0 0 auto;
        margin-right: auto;
    }
}

.pix-qr-corpo {
    text-align: center;
}

.pix-qr-canvas {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: 0 auto 8px;
    border: 1px solid #000000;
    border-radius: 12px;
}

.pix-qr-edicao {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
    text-align: left;
}

.pix-qr-edicao[hidden] {
    display: none;
}

#pix-qr-modal .modal-footer {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

#pix-qr-modal .modal-footer[hidden] {
    display: none;
}

#pix-qr-modal .modal-footer .btn {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

.pix-qr-editar {
    flex-shrink: 0;
    margin-right: auto;
}

.pix-qr-corpo.editando .pix-qr-canvas {
    max-width: clamp(140px, 28vh, 220px);
    margin-bottom: 0;
}

.pix-qr-corpo.editando .pix-qr-edicao {
    gap: 10px;
    margin-top: 6px;
}

@media (min-width: 601px) {
    .pix-qr-corpo.editando .pix-qr-canvas {
        max-width: clamp(160px, 30vh, 260px);
    }
}

@media (max-width: 600px) {
    #pix-qr-modal .modal-footer {
        padding: 12px 16px;
        gap: 8px !important;
    }

    #pix-qr-modal .modal-footer .btn {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 14px;
    }

    .pix-qr-editar {
        margin-right: 0;
    }
}

.pix-qr-cor-grupo {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pix-qr-cor-rotulo {
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-secondary-text);
}

.pix-qr-cor-rotulo strong {
    color: var(--md-sys-color-on-surface);
}

.pix-qr-cor {
    border: 2px solid rgba(255, 255, 255, 0.28);
    cursor: pointer;
}

.pix-qr-cores {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.pix-qr-cor {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
}

.pix-qr-cor.selecionada {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.divisao-perfil-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.divisao-perfil-qr {
    margin-top: 2px;
}

.divisao-perfil-qr .material-symbols-outlined {
    font-size: 20px;
}

/* Poucos cards: o QR Code vira um bloco à direita; com quatro, um botão pequeno no canto. */
.divisao-perfis[data-qtd="4"] .divisao-perfil-card {
    position: relative;
}

.divisao-perfis[data-qtd="4"] .divisao-perfil-qr {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.divisao-perfis[data-qtd="4"] .divisao-perfil-qr-texto {
    display: none;
}

.divisao-perfis[data-qtd="4"] .divisao-perfil-tags {
    padding-right: 34px;
}

.divisao-perfis[data-qtd="1"] .divisao-perfil-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.divisao-perfis[data-qtd="1"] .divisao-perfil-qr {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 104px;
    min-height: 104px;
    margin: 0;
    border-radius: 16px;
    background: var(--md-sys-color-primary-container);
    border-color: transparent;
    color: var(--md-sys-color-primary);
    font-weight: 700;
}

.divisao-perfis[data-qtd="1"] .divisao-perfil-qr .material-symbols-outlined {
    font-size: 44px;
}

@media (min-width: 601px) {
    .divisao-perfis[data-qtd="2"] .divisao-perfil-card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .divisao-perfis[data-qtd="2"] .divisao-perfil-qr {
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 84px;
        min-height: 84px;
        margin: 0;
        border-radius: 14px;
        background: var(--md-sys-color-primary-container);
        border-color: transparent;
        color: var(--md-sys-color-primary);
        font-weight: 700;
    }

    .divisao-perfis[data-qtd="2"] .divisao-perfil-qr .material-symbols-outlined {
        font-size: 34px;
    }

    .divisao-perfis[data-qtd="1"] .divisao-perfil-qr {
        width: 150px;
        min-height: 150px;
    }

    .divisao-perfis[data-qtd="1"] .divisao-perfil-qr .material-symbols-outlined {
        font-size: 64px;
    }
}

body.light-theme .pix-qr-cor {
    border-color: rgba(0, 0, 0, 0.22);
}

@media (max-width: 400px) {
    #pix-qr-modal .modal-footer {
        padding: 12px;
        gap: 6px !important;
    }

    #pix-qr-modal .modal-footer .btn {
        flex: 1 1 auto;
        padding-left: 4px;
        padding-right: 4px;
        font-size: 13px;
    }

    #pix-qr-modal .pix-qr-editar {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 340px) {
    #pix-qr-modal .modal-footer .btn {
        font-size: 12px;
    }
}

@media (min-width: 601px) {
    .pix-qr-cores {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

.divisao-perfil-qr-texto {
    white-space: nowrap;
}

.divisao-perfis[data-qtd="1"] .divisao-perfil-qr,
.divisao-perfis[data-qtd="2"] .divisao-perfil-qr {
    padding-left: 6px;
    padding-right: 6px;
}

#pix-qr-valor-campo[hidden] {
    display: none;
}

@media (min-width: 761px) {
    #pix-qr-modal.editando .modal-surface {
        max-width: 740px !important;
    }

    .pix-qr-corpo.editando {
        display: grid;
        grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
        gap: 24px;
        align-items: start;
        text-align: left;
    }

    .pix-qr-corpo.editando .pix-qr-canvas {
        max-width: 100%;
    }

    .pix-qr-corpo.editando .pix-qr-edicao {
        margin-top: 0;
        gap: 14px;
    }
}

@media (min-width: 761px) {
    .pix-qr-corpo.editando.com-valor {
        column-gap: 24px;
        row-gap: 14px;
    }

    .pix-qr-corpo.editando.com-valor .pix-qr-edicao {
        display: contents;
    }

    .pix-qr-corpo.editando.com-valor .pix-qr-previa {
        grid-column: 1;
        grid-row: 1 / span 3;
    }

    .pix-qr-corpo.editando.com-valor .pix-qr-edicao > .input-field {
        grid-column: 2;
    }

    .pix-qr-corpo.editando.com-valor .pix-qr-cor-grupo {
        grid-column: 1 / -1;
    }

    .pix-qr-corpo.editando.com-valor .pix-qr-cores {
        grid-template-columns: repeat(14, minmax(0, 1fr));
    }
}

#pix-qr-modal .modal-surface {
    max-height: min(85vh, calc(var(--qr-altura, 100dvh) - 32px));
}

.pix-qr-copiar {
    width: 100%;
    margin-top: 8px;
}

.pix-qr-copiar[hidden] {
    display: none;
}

.pix-qr-corpo.editando .pix-qr-copiar {
    display: none;
}

.history-btn-texto {
    display: none;
}

@media (max-width: 600px) {
    .history-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .history-actions .icon-btn {
        width: auto;
        height: 58px;
        flex-direction: column;
        gap: 4px;
        padding: 0 4px;
    }

    .history-btn-texto {
        display: block;
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
    }
}

.convite-bloco {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.convite-copiar {
    width: 100%;
    justify-content: center;
    gap: 8px;
}

.convite-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.convite-acoes .btn {
    width: auto;
    min-height: 40px;
    padding: 0 12px;
}

.convite-pendentes-titulo {
    margin-top: 6px;
}

.convite-pendente {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
}

.convite-pendente-info {
    display: flex;
    flex: 1 1 140px;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.convite-pendente-nome {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.convite-pendente-sub {
    font-size: 13px;
    color: var(--md-sys-color-secondary-text);
}

.convite-pendente-acoes {
    display: flex;
    gap: 8px;
}

.convite-pendente-acoes .btn {
    width: auto;
    min-height: 40px;
    padding: 0 16px;
}

.export-convite {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    font-size: 14px;
    cursor: pointer;
}

.export-convite input {
    width: 18px;
    height: 18px;
    accent-color: var(--md-sys-color-primary);
}

.convite-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
}

.convite-copiar {
    min-height: 52px;
    padding: 10px 16px;
    line-height: 1.25;
}

.convite-copiar-texto {
    text-align: center;
    text-wrap: balance;
}

.convite-card .convite-acoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.convite-sec {
    width: auto;
    min-height: 44px;
    padding: 0 12px;
    gap: 6px;
    justify-content: center;
    font-size: 14px;
    white-space: nowrap;
}

.convite-sec .material-symbols-outlined {
    font-size: 20px;
}

.leva-detalhe {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--md-sys-color-outline);
}

.leva-detalhe:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
}

.leva-detalhe-nome {
    font-size: 14px;
}

.leva-detalhe .divisao-nota {
    margin-top: 0;
}

.leva-detalhe .input-field {
    margin-bottom: 0;
}

.segmentado.leva-modos span {
    min-height: 40px;
    padding: 4px 6px;
    font-size: 13px;
    line-height: 1.15;
    text-align: center;
}

.convidado-leva-chip small {
    font-weight: 600;
    opacity: 0.75;
}

.convite-linha {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.convite-linha .convite-copiar {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

.convite-compartilhar {
    flex: 0 0 auto;
    width: auto;
    min-height: 52px;
    padding: 0 14px;
    gap: 6px;
    justify-content: center;
    white-space: nowrap;
}

.convite-linha .material-symbols-outlined,
.convite-sec .material-symbols-outlined {
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .convite-compartilhar-texto {
        display: none;
    }

    .convite-compartilhar {
        width: 52px;
        padding: 0;
    }
}

@media (max-width: 340px) {
    .convite-sec {
        padding: 0 8px;
        gap: 4px;
        font-size: 13px;
    }
}

.convite-pagamento-acao {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.convite-pergunta {
    color: var(--md-sys-color-primary);
    font-size: 14px;
    font-weight: 700;
}

.pix-publico-opcao {
    margin-top: 0;
}

.campo-com-botao {
    position: relative;
}

.campo-com-botao input {
    padding-right: 56px;
}

.btn-mapa-local {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--md-sys-color-secondary-text);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-mapa-local .material-symbols-outlined {
    font-size: 24px;
    font-variation-settings: 'FILL' 0, 'wght' 500;
}

.btn-mapa-local.marcado .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 500;
}

.btn-mapa-local:hover,
.btn-mapa-local:focus-visible {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
}

.btn-mapa-local.marcado {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
}

.mapa-card {
    display: flex;
    flex-direction: column;
    width: min(96vw, 680px);
    max-width: 680px;
    height: min(92vh, 720px);
    padding: 0;
}

.mapa-corpo {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 4px 16px 0;
}

.mapa-busca {
    position: relative;
}

.mapa-busca input {
    width: 100%;
    min-height: 48px;
    padding: 0 52px 0 16px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 14px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font: inherit;
    font-size: 16px;
}

.mapa-busca input:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 0;
}

.mapa-busca input::-webkit-search-cancel-button {
    display: none;
}

.mapa-busca-botao {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--md-sys-color-primary);
    cursor: pointer;
}

.mapa-busca-botao:hover,
.mapa-busca-botao:focus-visible {
    background: var(--md-sys-color-primary-container);
}

.mapa-resultados {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    max-height: 168px;
    overflow-y: auto;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 14px;
    background: var(--md-sys-color-surface);
}

.mapa-resultados:empty {
    display: none;
}

.mapa-resultado {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--md-sys-color-outline);
    background: none;
    color: var(--md-sys-color-on-surface);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.mapa-resultado .material-symbols-outlined {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--md-sys-color-primary);
}

.mapa-resultado:last-child {
    border-bottom: 0;
}

.mapa-aviso {
    padding: 14px;
    font-size: 13px;
    color: var(--md-sys-color-secondary-text);
}

.mapa-leaflet {
    flex: 1 1 auto;
    min-height: 200px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline);
}

.mapa-rodape {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px 16px;
}

.mapa-rodape .btn {
    width: auto;
    height: 44px;
    min-height: 44px;
    padding: 0 14px;
    gap: 6px;
}

.mapa-rodape .secondary-btn {
    margin-right: auto;
}

.mapa-rodape .primary-btn {
    min-width: 150px;
    padding: 0 32px;
}

.mapa-pino {
    background: none;
    border: 0;
}

.mapa-pino .material-symbols-outlined {
    font-size: 44px;
    color: #ff4e00;
    font-variation-settings: 'FILL' 1;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.detalhes-mapa-botao {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: 4px;
    margin-left: 8px;
    padding: 4px 12px;
    border: 1px solid var(--md-sys-color-primary);
    border-radius: 16px;
    background: none;
    color: var(--md-sys-color-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.detalhes-mapa-botao .material-symbols-outlined {
    font-size: 18px;
}

@media (max-width: 480px) {
    .mapa-card {
        width: 100vw;
        height: 100dvh;
        max-width: none;
        border-radius: 0;
    }

    .mapa-rodape .secondary-btn {
        flex: 1 1 100%;
        margin-right: 0;
    }

    .mapa-rodape .primary-btn {
        flex: 1 1 0;
    }
}

.mapa-leaflet .leaflet-control-attribution {
    padding: 1px 6px;
    border-radius: 8px 0 0 0;
    background: rgba(255, 255, 255, 0.6);
    font-size: 9px;
    line-height: 1.4;
}

.mapa-leaflet .leaflet-bar {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.mapa-leaflet .leaflet-bar.leaflet-control a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-bottom: 1px solid var(--md-sys-color-outline);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font: 500 24px/1 var(--font-family, 'Plus Jakarta Sans', system-ui, sans-serif);
    text-indent: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mapa-leaflet .leaflet-bar.leaflet-control a:last-child {
    border-bottom: 0;
}

.mapa-leaflet .leaflet-bar.leaflet-control a:hover,
.mapa-leaflet .leaflet-bar.leaflet-control a:focus-visible {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
}

.mapa-leaflet .leaflet-bar.leaflet-control a.leaflet-disabled {
    opacity: 0.45;
    cursor: default;
}

.mapa-leaflet .leaflet-top.leaflet-left {
    top: 4px;
    left: 4px;
}