/* =====================================================
   VARIÁVEIS DO TEMA ESCURO
===================================================== */

:root {
    color-scheme: dark;

    /* Tema escuro */
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --text-color: #e0e0e0;
    --muted-color: #aaaaaa;
    --input-bg: #2c2c2c;
    --secondary-bg: #252525;
    --hover-bg: #353535;
    --button-secondary-bg: #333333;
    --border-color: #333333;
    --border-light: #444444;

    --accent-color: #4caf50;
    --accent-hover: #45a049;
    --info-color: #2196f3;
    --whatsapp-color: #25d366;
    --warning-color: #ff9800;
    --purple-color: #bb86fc;
    --danger-color: #d32f2f;

    --bottom-bar-bg: rgba(30, 30, 30, 0.96);
    --bottom-bar-border: #3a3a3a;

    --overlay-color: rgba(0, 0, 0, 0.6);
    --shadow-color: rgba(0, 0, 0, 0.5);
    --progress-bg: #333333;
    --button-on-accent: #ffffff;
    --button-on-warning: #000000;
    --danger-bg: #5b2525;
    --danger-border: #733030;
    --danger-hover: #713030;
    --backup-bg: #607d8b;
    --backup-hover: #546e7a;
}

:root[data-theme="claro"] {
    color-scheme: light;

    /* Tema claro */
    --bg-color: #f5f5f5;
    --card-bg: #ffffff;
    --text-color: #222222;
    --muted-color: #666666;
    --input-bg: #ffffff;
    --secondary-bg: #f5f5f5;
    --hover-bg: #eeeeee;
    --button-secondary-bg: #eeeeee;
    --border-color: #dddddd;
    --border-light: #cccccc;

    --accent-color: #2e7d32;
    --accent-hover: #1b5e20;
    --info-color: #1976d2;
    --whatsapp-color: #25d366;
    --warning-color: #f57c00;
    --purple-color: #7b1fa2;
    --danger-color: #c62828;

    --bottom-bar-bg: rgba(255, 255, 255, 0.96);
    --bottom-bar-border: #d9d9d9;

    --overlay-color: rgba(0, 0, 0, 0.35);
    --shadow-color: rgba(0, 0, 0, 0.20);
    --progress-bg: #dddddd;
    --button-on-accent: #ffffff;
    --button-on-warning: #000000;
    --danger-bg: #fdecec;
    --danger-border: #e0aaaa;
    --danger-hover: #f8dada;
    --backup-bg: #607d8b;
    --backup-hover: #546e7a;
}

/* =====================================================
   BASE
===================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;

    background-color: var(--bg-color);
    color: var(--text-color);

    margin: 0;

    padding:
        16px 16px calc(105px + env(safe-area-inset-bottom));

    display: flex;
    justify-content: center;
}

.container {
    width: 100%;
    max-width: 500px;
}

/* =====================================================
   CABEÇALHO
===================================================== */

.app-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 15px;
}

.app-header-titles {
    min-width: 0;
}

.app-header-titles h1 {
    font-size: 1.5rem;
    margin: 0 0 4px 0;
    color: var(--text-color);
}


/* =====================================================
   BOTÃO HAMBURGER
===================================================== */

.btn-hamburger {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1.4rem;
    color: var(--text-color);
    cursor: pointer;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    margin-top: 0 !important;
    flex-shrink: 0;
}

.btn-hamburger:hover {
    background-color: var(--hover-bg);
}



.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-color);
    backdrop-filter: blur(2px);
    z-index: 998;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.menu-overlay.ativo {
    display: block;
    opacity: 1;
}

.menu-lateral {
    position: fixed;
    top: 0;
    left: -320px;
    width: min(290px, 88vw);
    height: 100%;
    background-color: var(--card-bg);
    border-right: 1px solid var(--border-color);
    z-index: 999;
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-shadow: 5px 0 25px var(--shadow-color);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.menu-lateral.ativo {
    left: 0;
}

.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
    position: sticky;
    top: -20px;
    background: var(--card-bg);
    z-index: 2;
    padding-top: 20px;
}

.menu-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-color);
}


/* =====================================================
   CARDS
===================================================== */

.card {
    background-color: var(--card-bg);
   /** border: 1px solid var(--border-color);**/
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

label {
    display: block;
    font-size: 0.85rem;
    color: var(--muted-color);
    margin-bottom: 6px;
}

input,
textarea {
    width: 100%;
    padding: 12px;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 1rem;
    box-sizing: border-box;
    margin-bottom: 12px;
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.15);
}

textarea {
    height: 100px;
    resize: vertical;
}

button {
    width: 100%;
    padding: 14px;
    background-color: var(--accent-color);
    color: var(--button-on-accent);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 4px;
    transition:
        background 0.15s ease,
        transform 0.1s ease;
}

button:hover {
    background-color: var(--accent-hover);
}

button:active {
    transform: scale(0.98);
}

/* =====================================================
   HISTÓRICO
===================================================== */

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.history-item:last-child {
    border-bottom: none;
}

ul {
    padding-left: 20px;
    margin: 4px 0;
    color: var(--muted-color);
}

/* =====================================================
   RESUMO POR VALOR UNITÁRIO
===================================================== */

.resumo-preco {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.resumo-preco-titulo {
    color: var(--purple-color);
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.resumo-preco-grupo {
    background: var(--secondary-bg);
    border: 1px solid var(--border-light);
    border-radius: 9px;
    padding: 10px;
    margin-bottom: 10px;
}

.resumo-preco-grupo-titulo {
    color: var(--text-color);
    font-weight: bold;
    margin-bottom: 7px;
}

.resumo-preco-item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 0;
    color: var(--muted-color);
    font-size: 0.82rem;
    border-bottom: 1px solid var(--border-color);
}

.resumo-preco-item:last-child {
    border-bottom: none;
}

.resumo-preco-total {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid var(--border-light);
    color: var(--accent-color);
    font-size: 0.84rem;
    font-weight: bold;
}


/* =====================================================
   WHATSAPP
===================================================== */

.btn-whatsapp {
    background-color: var(--whatsapp-color);
    color: #fff;
    font-size: 0.85rem;
    padding: 8px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* =====================================================
   ARQUIVO / BACKUP
===================================================== */

.archive-box {
    background-color: var(--secondary-bg);
    padding: 12px;
    border-radius: 8px;
    margin-top: 10px;
    border-left: 4px solid var(--info-color);
}

.btn-close {
    background-color: var(--info-color);
    margin-top: 12px;
}


/* =====================================================
   PREVIEW
===================================================== */

.preview-box {
    display: none;
    background-color: var(--secondary-bg);
    padding: 12px;
    border-radius: 8px;
    margin-top: 12px;
    font-size: 0.95rem;
    border-left: 4px solid var(--accent-color);
}

.preview-box span {
    font-weight: bold;
    color: var(--accent-color);
}

/* =====================================================
   TUTORIAIS
===================================================== */

.btn-link-tutoriais {
    background-color: var(--info-color);
    color: var(--button-on-accent);
    font-size: 0.9rem;
    font-weight: bold;
    padding: 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    text-decoration: none;
    box-sizing: border-box;
    margin-top: 4px;
    transition: opacity 0.2s;
}

.btn-link-tutoriais:hover {
    opacity: 0.9;
}

/* =====================================================
   CONFIGURAÇÃO
===================================================== */
.config-menu-button {
    background: var(--secondary-bg);
    border: 1px solid var(--border-light);
    color: var(--text-color);
}

.config-menu-button:hover {
    background: var(--hover-bg);
}

.config-header {
    background: var(--secondary-bg);
}

.config-header h4 {
    color: var(--text-color);
}

.config-header p {
    color: var(--muted-color);
}

.config-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    margin-bottom: 5px;
}

.config-section-button {
    width: 100%;
    padding: 12px;
    margin: 0;
    background: var(--secondary-bg);
    color: var(--text-color);
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 8px;
}

.config-section-button:hover {
    background: var(--hover-bg);
}

.config-item {
    border-bottom: 1px solid var(--border-color);
}

.config-item-title {
    color: var(--text-color);
}

.config-item-description {
    color: var(--muted-color);
}

.config-switch {
    background: var(--button-secondary-bg);
}

.config-button {
    background: var(--button-secondary-bg);
    border: 1px solid var(--border-light);
    color: var(--text-color);
}

.config-button:hover {
    background: var(--hover-bg);
}

.config-info {
    color: var(--muted-color);
}


/* =====================================================
   PAINEL PRINCIPAL DE CONFIGURAÇÃO
===================================================== */

.configuracao-panel {
    display: none;
    margin-top: 8px;
}

.configuracao-panel.ativo {
    display: block;
    animation: aparecerConfig 0.18s ease;
}

@keyframes aparecerConfig {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

.config-menu-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.config-menu-button .config-arrow {
    font-size: 1.2rem;
    transition: transform 0.2s ease;
}

.config-menu-button.aberto .config-arrow {
    transform: rotate(90deg);
}

/* =====================================================
   BOTÕES EXPANSÍVEIS
===================================================== */

.config-section-button {
    width: 100%;
    padding: 12px;
    margin: 0;
    background: var(--secondary-bg);
    color: var(--text-color);
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    font-size: 0.88rem;
    font-weight: bold;
}

.config-section-button:hover {
    background: var(--hover-bg);
}

.config-section-button .section-arrow {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.config-section-button.aberto .section-arrow {
    transform: rotate(90deg);
}

.config-section-panel {
    display: none;
}

.config-section-panel.ativo {
    display: block;
    animation: aparecerConfig 0.18s ease;
}

/* =====================================================
   ITENS DA CONFIGURAÇÃO
===================================================== */

.config-item {
    padding: 11px 12px;
    border-bottom: 1px solid var(--border-color);
}

.config-item:last-child {
    border-bottom: none;
}

.config-item-title {
    color: var(--text-color);
    font-size: 0.84rem;
    font-weight: 600;
    margin-bottom: 3px;
}

.config-item-description {
    color: var(--muted-color);
    font-size: 0.74rem;
    line-height: 1.35;
}

.config-switch-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 !important;
    cursor: pointer;
}

.config-switch-row .config-item-text {
    flex: 1;
}

.config-switch {
    position: relative;
    width: 42px !important;
    height: 23px;
    min-width: 42px;
    margin: 0 !important;
    padding: 0 !important;
    appearance: none;
    -webkit-appearance: none;
    background: var(--button-secondary-bg);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.config-switch::before {
    content: "";
    position: absolute;
    width: 17px;
    height: 17px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.config-switch:checked {
    background: var(--accent-color);
}

.config-switch:checked::before {
    transform: translateX(19px);
}

.config-number {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    font-size: 0.85rem !important;
    padding: 9px !important;
}

.config-button {
    background: var(--button-secondary-bg);
    border: 1px solid var(--border-light);
    color: var(--text-color);
    font-size: 0.82rem;
    padding: 10px;
    margin-top: 6px;
}

.config-button:hover {
    background: var(--hover-bg);
}

.config-button.danger {
    background: var(--danger-bg);
    border-color: var(--danger-border);
}

.config-button.danger:hover {
    background: var(--danger-hover);
}

.config-info {
    color: var(--muted-color);
    font-size: 0.76rem;
    line-height: 1.4;
}






.menu-section-button {
    width: 100%;
    padding: 11px 12px;
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--secondary-bg);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    font-size: 0.9rem;
    font-weight: bold;
}

.menu-section-button:hover {
    background: var(--hover-bg);
}

.menu-section-button .section-arrow {
    transition: transform 0.2s ease;
}

.menu-section-button.aberto .section-arrow {
    transform: rotate(90deg);
}

.menu-section-panel {
    display: none;
    padding-top: 8px;
}

.menu-section-panel.ativo {
    display: block;
    animation: aparecerConfig 0.18s ease;
}

/* =====================================================
   BARRA INFERIOR
===================================================== */

.bottom-bar {
    position: fixed;
    z-index: 997;
    left: 50%;

    bottom: max(10px,
            env(safe-area-inset-bottom));

    transform: translateX(-50%);

    width: min(calc(100% - 20px),
            500px);

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 6px;
    padding: 7px;

    background: var(--bottom-bar-bg);
    border: 1px solid var(--bottom-bar-border);

    border-radius: 16px;

    box-shadow:
        0 8px 30px var(--shadow-color);

    backdrop-filter: blur(10px);
}

.bottom-item {
    min-height: 58px;
    background: transparent;
    color: var(--muted-color);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 2px;

    border-radius: 11px;

    transition:
        background 0.15s ease,
        color 0.15s ease;

    margin-top: 0;
    padding: 6px;
}

.bottom-item:hover,
.bottom-item:focus-visible {
    background: var(--hover-bg);
    color: var(--text-color);
    outline: none;
}

.bottom-icon {
    font-size: 1.35rem;
    line-height: 1;
}

.bottom-label {
    font-size: 0.68rem;
    font-weight: bold;
}



/* =====================================================
   RESPONSIVO
===================================================== */

@media (min-width: 700px) {
    body {
        padding-bottom: 110px;
    }
}


/* =====================================================
   TAMANHO DO TEXTO
===================================================== */

html[data-text-size="pequeno"] {
    font-size: 14px;
}

html[data-text-size="normal"] {
    font-size: 16px;
}

html[data-text-size="grande"] {
    font-size: 18px;
}

/* Elementos que usam tamanhos fixos passam a acompanhar
   a preferência de tamanho do texto. */
html[data-text-size="pequeno"] body {
    font-size: 14px;
}

html[data-text-size="normal"] body {
    font-size: 16px;
}

html[data-text-size="grande"] body {
    font-size: 18px;
}

html[data-text-size="pequeno"] button,
html[data-text-size="pequeno"] input,
html[data-text-size="pequeno"] textarea,
html[data-text-size="pequeno"] select {
    font-size: 0.9rem;
}

html[data-text-size="normal"] button,
html[data-text-size="normal"] input,
html[data-text-size="normal"] textarea,
html[data-text-size="normal"] select {
    font-size: 1rem;
}

html[data-text-size="grande"] button,
html[data-text-size="grande"] input,
html[data-text-size="grande"] textarea,
html[data-text-size="grande"] select {
    font-size: 1.1rem;
}

/* =====================================================
   ANIMAÇÕES / EFEITOS
===================================================== */

html.sem-animacoes,
html.sem-animacoes * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
    caret-color: transparent;
}

html.sem-animacoes input,
html.sem-animacoes textarea,
html.sem-animacoes select {
    caret-color: currentColor;
}



.menu-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
}

.menu-profile-photo {
    width: 44px;
    height: 44px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    background: var(--secondary-bg);
    color: var(--text-color);
    font-size: 1.3rem;
}

.menu-profile-info {
    min-width: 0;
}

.menu-profile-name {
    font-weight: 600;
    color: var(--text-color);
}

.menu-profile-status {
    margin-top: 3px;
    font-size: 0.8rem;
    color: var(--muted-color);
}

\n
/* =====================================================
   DASHBOARD FINANCEIRO
===================================================== */

.financeiro-subtitulo {
    margin: 4px 0 0;
    opacity: 0.75;
}

.financeiro-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 5px;
}

.financeiro-indicador {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.financeiro-indicador-titulo {
    font-size: 0.9rem;
    opacity: 0.75;
}

.financeiro-indicador strong {
    font-size: 1.45rem;
}

.financeiro-indicador small {
    opacity: 0.7;
}

.financeiro-progresso-card {
    margin-bottom: 20px;
}

.financeiro-progresso {
    margin-top: 18px;
}

.financeiro-progresso-barra {
    width: 100%;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(127, 127, 127, 0.18);
}

.financeiro-progresso-barra div {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #6d28d9,
        #a855f7
    );
    transition: width 0.4s ease;
}

.financeiro-progresso-legenda {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 10px;
    font-size: 0.9rem;
}

.financeiro-status {
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    font-weight: 700;
    text-align: center;
    background: rgba(127, 127, 127, 0.1);
}

.financeiro-resumo {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.financeiro-resumo > div,
.financeiro-despesas-info > div,
.financeiro-despesas-resumo-grid > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.financeiro-resumo span,
.financeiro-despesas-info span,
.financeiro-despesas-resumo-grid span {
    font-size: 0.85rem;
    opacity: 0.7;
}

.financeiro-resumo strong,
.financeiro-despesas-info strong,
.financeiro-despesas-resumo-grid strong {
    font-size: 1rem;
}

.financeiro-despesas-resumo {
    margin-top: 20px;
}

.financeiro-secao-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.financeiro-secao-cabecalho h3 {
    margin-bottom: 6px;
}

.financeiro-secao-cabecalho p {
    margin: 0;
    opacity: 0.7;
}

.financeiro-despesas-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.financeiro-despesas-resumo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
}

.financeiro-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.financeiro-filtros button {
    padding: 8px 14px;
    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.financeiro-filtros button:hover,
.financeiro-filtros button:focus-visible {
    background: rgba(127, 127, 127, 0.1);
}

.financeiro-tipo-despesa {
    display: flex;
    gap: 18px;
    margin: 12px 0;
    padding: 12px;
    border: 1px solid rgba(127, 127, 127, 0.2);
    border-radius: 8px;
}

.lista-despesas-pessoais {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (max-width: 900px) {
    .financeiro-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .financeiro-despesas-resumo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .financeiro-grid,
    .financeiro-resumo,
    .financeiro-despesas-resumo-grid,
    .financeiro-despesas-info {
        grid-template-columns: 1fr;
    }

    .financeiro-secao-cabecalho {
        flex-direction: column;
        align-items: flex-start;
    }

    .financeiro-progresso-legenda {
        flex-direction: column;
        gap: 5px;
    }
}



/* =====================================================
   DESPESAS PESSOAIS — MODELO APROVADO
===================================================== */

#telaDespesasPessoais {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    box-sizing: border-box;
}

.financeiro-despesas-page {
    width: 100%;
}

.financeiro-despesas-header {
    margin-bottom: 24px;
}

.financeiro-despesas-header h2 {
    margin: 0 0 6px;
}

.financeiro-despesas-header p {
    margin: 0;
    opacity: 0.7;
}

.financeiro-despesas-periodo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(127, 127, 127, 0.1);
    font-size: 0.9rem;
}

.financeiro-despesas-resumo-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-bottom: 5px;
}

.financeiro-despesas-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.financeiro-despesas-card span {
    font-size: 0.88rem;
    opacity: 0.7;
}

.financeiro-despesas-card strong {
    font-size: 1.45rem;
}

.financeiro-despesas-card small {
    opacity: 0.65;
}

.financeiro-despesas-conteudo {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.financeiro-despesas-form,
.financeiro-despesas-resumo-card {
    min-width: 0;
}

.financeiro-despesas-form h3,
.financeiro-despesas-resumo-card h3 {
    margin-top: 0;
}

.financeiro-despesas-form .campo {
    margin-bottom: 14px;
}

.financeiro-despesas-form input,
.financeiro-despesas-form select,
.financeiro-despesas-form textarea {
    width: 100%;
    box-sizing: border-box;
}

.financeiro-despesas-form textarea {
    min-height: 80px;
    resize: vertical;
}

.financeiro-despesas-resumo-lista {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.financeiro-despesas-resumo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(127, 127, 127, 0.16);
}

.financeiro-despesas-resumo-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.financeiro-despesas-resumo-item span {
    opacity: 0.7;
}

.financeiro-despesas-resumo-item strong {
    text-align: right;
}

.financeiro-despesas-lista-card {
    margin-top: 20px;
}

.financeiro-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.financeiro-filtros button {
    padding: 8px 14px;
    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.financeiro-filtros button.active {
    background: #6d28d9;
    color: #fff;
    border-color: #6d28d9;
}

.lista-despesas-pessoais {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.expense {
    display: grid;
    grid-template-columns:
        minmax(180px, 1fr)
        minmax(120px, auto)
        minmax(90px, auto)
        minmax(110px, auto);
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(127, 127, 127, 0.16);
    border-radius: 10px;
}

.expense-name {
    min-width: 0;
}

.expense-name strong {
    display: block;
}

.expense-name small {
    display: block;
    margin-top: 3px;
    opacity: 0.6;
}

.tag {
    justify-self: start;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(127, 127, 127, 0.1);
    font-size: 0.85rem;
}

.date {
    opacity: 0.65;
    font-size: 0.9rem;
}

.amount {
    text-align: right;
}

.financeiro-despesas-vazio {
    padding: 30px 20px;
    text-align: center;
    opacity: 0.65;
}

@media (max-width: 900px) {
    .financeiro-despesas-resumo-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .financeiro-despesas-conteudo {
        grid-template-columns: 1fr;
    }

    .expense {
        grid-template-columns:
            1fr auto;
    }

    .expense .tag {
        grid-column: 1;
    }

    .expense .date {
        grid-column: 1;
    }

    .expense .amount {
        grid-column: 2;
        grid-row: 1 / span 3;
    }
}

@media (max-width: 600px) {
    .financeiro-despesas-resumo-grid {
        grid-template-columns: 1fr;
    }

    .expense {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .expense .tag,
    .expense .date,
    .expense .amount {
        grid-column: auto;
        grid-row: auto;
    }

    .expense .amount {
        text-align: left;
    }
}


/* RESUMO DESPESAS — APRESENTAÇÃO APROVADA */

.financeiro-despesas-resumo-card {
    padding: 22px;
}

.financeiro-despesas-resumo-card h3 {
    margin: 0 0 20px;
    font-size: 1.05rem;
}

.financeiro-despesas-resumo-lista {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.financeiro-despesas-resumo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 48px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(127, 127, 127, 0.16);
}

.financeiro-despesas-resumo-item:first-child {
    padding-top: 0;
}

.financeiro-despesas-resumo-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.financeiro-despesas-resumo-item span {
    font-size: 0.92rem;
    opacity: 0.7;
}

.financeiro-despesas-resumo-item strong {
    font-size: 1rem;
    font-weight: 700;
    text-align: right;
}

.financeiro-despesas-observacao {
    margin: 22px 0 0;
    padding: 13px 14px;
    border-radius: 10px;
    background: rgba(127, 127, 127, 0.08);
    font-size: 0.85rem;
    line-height: 1.45;
    opacity: 0.72;
}

@media (max-width: 600px) {
    .financeiro-despesas-resumo-item {
        gap: 12px;
    }

    .financeiro-despesas-resumo-item strong {
        max-width: 55%;
    }
}


/* =====================================================
   EVOLUÇÃO DAS ÚLTIMAS SEMANAS
===================================================== */

.financeiro-evolucao-card {
    margin-top: 20px;
}

.financeiro-evolucao-card h3 {
    margin-bottom: 6px;
}

.financeiro-evolucao-card p {
    margin: 0;
    opacity: 0.7;
}

.financeiro-evolucao-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.financeiro-evolucao-item {
    display: grid;
    grid-template-columns:
        minmax(90px, 130px)
        minmax(0, 1fr)
        minmax(90px, 120px);
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(127, 127, 127, 0.07);
}

.financeiro-evolucao-semana {
    font-weight: 700;
}

.financeiro-evolucao-barra {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(127, 127, 127, 0.18);
}

.financeiro-evolucao-barra div {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #6d28d9,
        #a855f7
    );
    transition: width 0.4s ease;
}

.financeiro-evolucao-valor {
    text-align: right;
    font-weight: 700;
}

.financeiro-evolucao-vazio {
    padding: 24px;
    text-align: center;
    opacity: 0.65;
}

@media (max-width: 600px) {
    .financeiro-evolucao-item {
        grid-template-columns: 1fr auto;
    }

    .financeiro-evolucao-barra {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .financeiro-evolucao-valor {
        text-align: right;
    }
}



/* =====================================================
   NOVA INTERFACE ANOTEI — fiel ao protótipo aprovado
   Escopo isolado para não alterar os componentes antigos.
===================================================== */
body.dashboard-active {
    display: block;
    padding: 0;
    background: #f5f5fa;
    color: #211d35;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
body.dashboard-active #telaProducao,
body.dashboard-active .bottom-bar { display: none !important; }
body:not(.dashboard-active) .dashboard-view { display: none !important; }
body.dashboard-active #telaInicio { display: block; }
body.dashboard-active #telaConfiguracoes[hidden] { display: none !important; }
.dashboard-view {
    --dash-bg: #f5f5fa;
    --dash-surface: #fff;
    --dash-ink: #211d35;
    --dash-muted: #77748a;
    --dash-purple: #6c45d9;
    --dash-purple2: #5030b5;
    --dash-line: #ece9f4;
    --dash-green: #17885e;
    --dash-shadow: 0 12px 34px #2a1c550d;
    box-sizing: border-box;
    width: 100%;
    max-width: 1180px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 26px 28px 40px;
    background: var(--dash-bg);
    color: var(--dash-ink);
    font: 16px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.dashboard-view *, .dashboard-view *::before, .dashboard-view *::after { box-sizing: border-box; }
.dashboard-view button, .dashboard-view input { font: inherit; }
.dashboard-view button { cursor: pointer; }
.dashboard-view button:focus-visible, .dashboard-view input:focus-visible { outline: 3px solid #b9a7ff; outline-offset: 3px; }
.dashboard-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:30px; }
.dashboard-brand { display:flex; align-items:center; gap:11px; font-size:1.4rem; font-weight:850; letter-spacing:-.04em; }
.dashboard-logo { width:42px; height:42px; display:grid; place-items:center; background:var(--dash-purple); color:#fff; border-radius:14px; font-size:1.3rem; box-shadow:0 7px 18px #6c45d933; }
.dashboard-actions { display:flex; align-items:center; gap:10px; }
.dashboard-icon-btn { width:42px; height:42px; border:1px solid var(--dash-line); background:#fff; border-radius:14px; color:var(--dash-ink); font-size:1.1rem; display:grid; place-items:center; }
.dashboard-profile { width:42px; height:42px; border:0; border-radius:50%; display:grid; place-items:center; background:#e8e0ff; color:var(--dash-purple2); font-weight:800; }
.dashboard-eyebrow { color:var(--dash-purple); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; font-weight:800; margin:0 0 8px; }
.dashboard-intro h1 { font-size:clamp(1.7rem,4vw,2.5rem); letter-spacing:-.055em; line-height:1.12; margin:0 0 10px; color:var(--dash-ink); }
.dashboard-subtitle { margin:0; color:var(--dash-muted); }
.dashboard-hero { display:grid; grid-template-columns:1.25fr .75fr; gap:18px; margin:25px 0; }
.dashboard-balance { padding:27px; border-radius:26px; background:linear-gradient(125deg,#6d47dc,#5132b6); color:#fff; min-height:220px; position:relative; overflow:hidden; box-shadow:0 15px 35px #5132b626; }
.dashboard-balance::after { content:""; position:absolute; width:230px; height:230px; border:1px solid #ffffff26; border-radius:50%; right:-55px; top:-90px; box-shadow:0 0 0 28px #ffffff0b,0 0 0 58px #ffffff08; pointer-events:none; }
.dashboard-balance .dashboard-eyebrow { color:#e1d8ff; }
.dashboard-balance-label { opacity:.88; font-size:.94rem; }
.dashboard-amount { font-size:clamp(2.2rem,5vw,3.2rem); font-weight:850; letter-spacing:-.055em; margin:7px 0 17px; position:relative; z-index:1; }
.dashboard-progress-row { display:flex; justify-content:space-between; gap:10px; font-size:.83rem; margin-bottom:8px; position:relative; z-index:1; }
.dashboard-progress { height:8px; background:#ffffff45; border-radius:99px; overflow:hidden; max-width:440px; position:relative; z-index:1; }
.dashboard-progress span { display:block; height:100%; width:0; background:#fff; border-radius:99px; transition:width .25s; }
.dashboard-summary { display:flex; flex-direction:column; justify-content:space-between; gap:14px; padding:23px; background:var(--dash-surface); border:1px solid var(--dash-line); border-radius:26px; box-shadow:var(--dash-shadow); }
.dashboard-summary-top { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--dash-muted); font-size:.9rem; }
.dashboard-status { font-size:.8rem; color:var(--dash-green); font-weight:750; background:#e7f7ef; padding:5px 9px; border-radius:99px; white-space:nowrap; }
.dashboard-summary strong { font-size:1.8rem; letter-spacing:-.04em; }
.dashboard-summary small { color:var(--dash-muted); }
.dashboard-section-head { display:flex; align-items:end; justify-content:space-between; gap:14px; margin:30px 0 16px; }
.dashboard-section-head h2 { font-size:1.25rem; letter-spacing:-.035em; margin:0; color:var(--dash-ink); }
.dashboard-section-head p { margin:5px 0 0; color:var(--dash-muted); font-size:.92rem; }
.dashboard-menu-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.dashboard-menu-card { position:relative; text-align:left; display:flex; align-items:center; gap:15px; padding:20px; border:1px solid var(--dash-line); background:var(--dash-surface); border-radius:21px; min-height:112px; color:var(--dash-ink); box-shadow:0 4px 16px #26134b05; transition:transform .16s,border-color .16s,box-shadow .16s; }
.dashboard-menu-card:hover { transform:translateY(-2px); border-color:#d7ccfb; box-shadow:var(--dash-shadow); }
.dashboard-tile-icon { flex:0 0 52px; width:52px; height:52px; border-radius:17px; display:grid; place-items:center; background:#f0ebff; color:var(--dash-purple); font-size:1.45rem; }
.dashboard-menu-card:nth-child(2) .dashboard-tile-icon { background:#e8f7f0; color:#16865d; }
.dashboard-menu-card:nth-child(3) .dashboard-tile-icon { background:#fff2df; color:#b66a0b; }
.dashboard-menu-card:nth-child(4) .dashboard-tile-icon { background:#e7f4ff; color:#2377b9; }
.dashboard-menu-card:nth-child(5) .dashboard-tile-icon { background:#ffeaf0; color:#c54870; }
.dashboard-menu-card:nth-child(6) .dashboard-tile-icon { background:#f0eff4; color:#656074; }
.dashboard-tile-copy { min-width:0; flex:1; }
.dashboard-tile-copy strong { display:block; font-size:1rem; margin-bottom:4px; }
.dashboard-tile-copy small { display:block; color:var(--dash-muted); font-size:.82rem; line-height:1.35; }
.dashboard-arrow { color:#a29db2; font-size:1.2rem; }
.dashboard-tip { display:flex; align-items:center; gap:12px; background:#f0ebff; border:1px solid #e2d9ff; border-radius:18px; padding:16px 18px; margin-top:20px; color:#48338e; }
.dashboard-tip span { font-size:1.25rem; }
.dashboard-tip p { margin:0; font-size:.9rem; }
.dashboard-footer { margin-top:26px; text-align:center; color:#9995a8; font-size:.8rem; }
.dashboard-settings-view .dashboard-settings-content { display:grid; gap:14px; }
.dashboard-settings-view .config-card { margin:0; border:1px solid var(--dash-line); border-radius:18px; background:var(--card-bg); color:var(--text-color); border-color:var(--border-color); box-shadow:var(--dash-shadow); padding:14px; }
.dashboard-settings-view .config-section-button { border-radius:13px; }
.dashboard-back-button { border:1px solid var(--dash-line); background:#fff; color:#211d35; border-radius:12px; padding:10px 13px; width:auto; margin:0; font-weight:700; }
body.dashboard-active #menuLateral, body.dashboard-active #menuOverlay { visibility:hidden; pointer-events:none; }
@media(max-width:760px) {
 .dashboard-view { padding:18px 16px 30px; }
 .dashboard-topbar { margin-bottom:25px; }
 .dashboard-hero { grid-template-columns:1fr; }
 .dashboard-balance { min-height:210px; }
 .dashboard-summary { min-height:150px; }
 .dashboard-menu-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .dashboard-menu-card { padding:15px; min-height:132px; align-items:flex-start; flex-direction:column; gap:10px; }
 .dashboard-tile-icon { width:44px; height:44px; flex-basis:44px; border-radius:14px; }
 .dashboard-arrow { position:absolute; right:15px; top:18px; }
 .dashboard-tile-copy small { font-size:.79rem; }
 .dashboard-section-head { align-items:flex-start; flex-direction:column; }
}
@media(max-width:390px) {
 .dashboard-menu-grid { grid-template-columns:1fr; }
 .dashboard-menu-card { min-height:90px; flex-direction:row; align-items:center; }
 .dashboard-arrow { position:static; margin-left:auto; }
 .dashboard-actions { gap:6px; }
}

.dashboard-settings-view .dashboard-meta-settings-card {
    margin: 0;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    color: var(--text-color);
    box-shadow: var(--dash-shadow);
}
.dashboard-settings-view .dashboard-meta-settings-card > .menu-section-button {
    border-radius: 13px;
}


/* ETAPA 2 — sub-telas de configurações no mesmo sistema visual do protótipo */
.dashboard-settings-home[hidden], .dashboard-settings-subview[hidden] { display: none !important; }
.dashboard-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.dashboard-settings-content { display: grid; gap: 14px; }
.dashboard-settings-subview .dashboard-topbar { align-items: center; }
.dashboard-settings-subview .dashboard-intro { margin-bottom: 24px; }
.dashboard-settings-subview .config-card { margin: 0; padding: 16px; border: 1px solid var(--dash-line); border-radius: 21px; background: var(--dash-surface); color: var(--dash-ink); box-shadow: var(--dash-shadow); }
.dashboard-settings-subview .config-section-button, .dashboard-settings-subview .menu-section-button { width: 100%; text-align: left; }
.dashboard-settings-subview .config-section-panel.ativo, .dashboard-settings-subview .menu-section-panel.ativo { display: block; }
.dashboard-settings-subview .dashboard-settings-content > div > .menu-section-button { margin-bottom: 10px; }
.dashboard-settings-subview .dashboard-settings-content .config-item { border-color: var(--dash-line); }
@media(max-width:760px) { .dashboard-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media(max-width:390px) { .dashboard-settings-grid { grid-template-columns: 1fr; } }

/* ANOTEI-DESIGN-LANCAMENTO-VIOLETA */
/* Design visual da tela de produção: CSS somente. */

body[data-view="production"] {
    background: #f5f5fa;
    color: #24213a;
}

body[data-view="production"] #telaProducao {
    width: min(100% - 32px, 900px);
    margin-inline: auto;
    padding-bottom: 32px;
}

body[data-view="production"] #telaProducao .app-header,
body[data-view="production"] #telaProducao header {
    border-bottom: 1px solid #e8e5f2;
}

body[data-view="production"] #telaProducao h1,
body[data-view="production"] #telaProducao h2,
body[data-view="production"] #telaProducao h3 {
    color: #292344;
    letter-spacing: -0.025em;
}

body[data-view="production"] #telaProducao #btnMenuHamburger {
    border-radius: 14px;
}

body[data-view="production"] #telaProducao #valorUnitario,
body[data-view="production"] #telaProducao #textoProducao,
body[data-view="production"] #telaProducao #inputBusca {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 12px 15px;
    color: #292344;
    background: #f8f7fd;
    border: 1px solid #e1dcf2;
    border-radius: 14px;
    transition: border-color .2s, box-shadow .2s;
}

body[data-view="production"] #telaProducao #valorUnitario:focus,
body[data-view="production"] #telaProducao #textoProducao:focus,
body[data-view="production"] #telaProducao #inputBusca:focus {
    outline: none;
    border-color: #8870e8;
    box-shadow: 0 0 0 4px rgb(136 112 232 / 15%);
}

body[data-view="production"] #telaProducao #btnSalvar {
    min-height: 50px;
    padding: 13px 22px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg, #7857df, #6240c4);
    border: 0;
    border-radius: 15px;
    box-shadow: 0 7px 18px rgb(98 64 196 / 22%);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}

body[data-view="production"] #telaProducao #btnSalvar:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgb(98 64 196 / 28%);
}

body[data-view="production"] #telaProducao #btnSalvar:active {
    transform: translateY(0);
}

body[data-view="production"] #telaProducao #cardSemanaAtual,
body[data-view="production"] #telaProducao #cardArquivo {
    padding: 20px;
    background: #fff;
    border: 1px solid #ebe8f4;
    border-radius: 22px;
    box-shadow: 0 8px 28px rgb(45 32 87 / 6%);
}

body[data-view="production"] #telaProducao #previewResult {
    gap: 12px;
}

body[data-view="production"] #telaProducao #previewPecas,
body[data-view="production"] #telaProducao #previewValor {
    padding: 16px;
    background: #f2efff;
    border: 1px solid #e3dcff;
    border-radius: 16px;
}

body[data-view="production"] #telaProducao #btnFecharSemana {
    border-radius: 13px;
}

body[data-view="production"] #telaProducao #listaHistorico,
body[data-view="production"] #telaProducao #listaArquivo {
    display: grid;
    gap: 10px;
}

@media (max-width: 600px) {
    body[data-view="production"] #telaProducao {
        width: calc(100% - 20px);
    }

    body[data-view="production"] #telaProducao #cardSemanaAtual,
    body[data-view="production"] #telaProducao #cardArquivo {
        padding: 15px;
        border-radius: 18px;
    }

    body[data-view="production"] #telaProducao #btnSalvar {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-view="production"] #telaProducao * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ANOTEI-DESIGN-LANCAMENTO-REFERENCIA-APROVADA */

/* DESIGN — LANÇAMENTO DE PRODUÇÃO */
body:not(.dashboard-active) {
    display: block;
    min-height: 100vh;
    padding: 0 16px calc(105px + env(safe-area-inset-bottom));
    background: #f5f5fa;
    color: #211d35;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body:not(.dashboard-active) #telaProducao {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 0 36px;
}

body:not(.dashboard-active) #telaProducao .app-header {
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

body:not(.dashboard-active) #telaProducao .btn-hamburger {
    width: 46px !important;
    height: 46px;
    margin: 0 !important;
    padding: 0;
    border: 1px solid #ece9f4;
    border-radius: 15px;
    background: #fff;
    color: #5030b5;
    box-shadow: 0 4px 14px #2a1c5508;
}

body:not(.dashboard-active) #telaProducao .app-header-titles h1 {
    margin: 0;
    color: #211d35;
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 850;
    letter-spacing: -.045em;
}

body:not(.dashboard-active) #telaProducao .card {
    margin-bottom: 20px;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid #ece9f4;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 34px #2a1c5509;
}

/* Formulário */
body:not(.dashboard-active) #telaProducao > .card:first-of-type > label {
    margin: 0 0 8px;
    color: #514b68;
    font-size: .9rem;
    font-weight: 750;
}

body:not(.dashboard-active) #telaProducao #valorUnitario,
body:not(.dashboard-active) #telaProducao #textoProducao,
body:not(.dashboard-active) #telaProducao #inputBusca {
    width: 100%;
    margin: 0 0 22px;
    padding: 14px 16px;
    border: 1px solid #e5e0f0;
    border-radius: 14px;
    background: #fbfaff;
    color: #211d35;
    font: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body:not(.dashboard-active) #telaProducao #valorUnitario {
    min-height: 52px;
    max-width: 260px;
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

body:not(.dashboard-active) #telaProducao #textoProducao {
    min-height: 150px;
    line-height: 1.6;
    resize: vertical;
}

body:not(.dashboard-active) #telaProducao #valorUnitario:focus,
body:not(.dashboard-active) #telaProducao #textoProducao:focus,
body:not(.dashboard-active) #telaProducao #inputBusca:focus {
    border-color: #8b70e8;
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 4px #6c45d91a;
}

body:not(.dashboard-active) #telaProducao #btnSalvar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    margin: 2px 0 0;
    padding: 15px 20px;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(120deg, #704be0, #5836c0);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: 0 9px 20px #6c45d92b;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

body:not(.dashboard-active) #telaProducao #btnSalvar:hover {
    background: linear-gradient(120deg, #6540d2, #4f2eb4);
    box-shadow: 0 12px 24px #6c45d936;
    transform: translateY(-1px);
}

body:not(.dashboard-active) #telaProducao #btnSalvar:active {
    transform: translateY(0);
}

body:not(.dashboard-active) #telaProducao #previewResult {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
    padding: 0;
    border: 0;
    background: transparent;
}

body:not(.dashboard-active) #telaProducao #previewResult > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 17px 18px;
    border: 1px solid #e8e1fb;
    border-radius: 17px;
    background: #f6f2ff;
    color: #6e6687;
    font-size: .84rem;
    font-weight: 650;
}

body:not(.dashboard-active) #telaProducao #previewResult > div span {
    color: #5938c1;
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    font-weight: 850;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

/* Semana, histórico e arquivo */
body:not(.dashboard-active) #telaProducao #cardSemanaAtual h3,
body:not(.dashboard-active) #telaProducao #cardArquivo h3 {
    margin: 0 0 18px !important;
    color: #211d35 !important;
    font-size: 1.2rem;
    font-weight: 850;
    letter-spacing: -.025em;
}

body:not(.dashboard-active) #telaProducao #inputBusca {
    margin-bottom: 16px !important;
    font-size: .92rem !important;
}

body:not(.dashboard-active) #telaProducao #listaHistorico > *,
body:not(.dashboard-active) #telaProducao .resumo-preco-grupo,
body:not(.dashboard-active) #telaProducao .archive-box {
    border-radius: 14px;
}

body:not(.dashboard-active) #telaProducao #resumoSemanalPreco {
    margin-top: 18px;
}

body:not(.dashboard-active) #telaProducao #resumoSemanalPreco .resumo-preco-titulo {
    margin-bottom: 12px;
    color: #51436f;
    font-size: .95rem;
    font-weight: 800;
}

body:not(.dashboard-active) #telaProducao #cardSemanaAtual > div[style*="border-top"] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px !important;
    padding-top: 17px !important;
    border-top-color: #ece9f4 !important;
    color: #514b68;
}

body:not(.dashboard-active) #telaProducao #totalGeralValor {
    margin-left: auto;
    color: #5938c1 !important;
    font-size: 1.15rem;
    font-weight: 850;
}

body:not(.dashboard-active) #telaProducao #totalGeralPecas {
    color: #77748a;
    font-size: .9rem;
}

body:not(.dashboard-active) #telaProducao .btn-close {
    min-height: 50px;
    margin-top: 18px;
    border-radius: 14px;
    background: #f0ebff;
    color: #5030b5;
    font-weight: 800;
    box-shadow: none;
}

body:not(.dashboard-active) #telaProducao .btn-close:hover {
    background: #e6ddff;
}

body:not(.dashboard-active) #telaProducao #cardArquivo {
    border-top: 3px solid #8b70e8;
}

body:not(.dashboard-active) #telaProducao .archive-box {
    border: 1px solid #ece9f4;
    border-left: 3px solid #8b70e8;
    background: #fbfaff;
}

body:not(.dashboard-active) #telaProducao .archive-box summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #403657;
    font-weight: 750;
}

@media (max-width: 600px) {
    body:not(.dashboard-active) {
        padding: 0 12px calc(100px + env(safe-area-inset-bottom));
    }

    body:not(.dashboard-active) #telaProducao {
        padding-top: 20px;
    }

    body:not(.dashboard-active) #telaProducao .app-header {
        margin-bottom: 20px;
    }

    body:not(.dashboard-active) #telaProducao .card {
        padding: 18px;
        border-radius: 20px;
    }

    body:not(.dashboard-active) #telaProducao #valorUnitario {
        max-width: none;
    }

    body:not(.dashboard-active) #telaProducao #previewResult {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.dashboard-active) #telaProducao #btnSalvar,
    body:not(.dashboard-active) #telaProducao #valorUnitario,
    body:not(.dashboard-active) #telaProducao #textoProducao,
    body:not(.dashboard-active) #telaProducao #inputBusca {
        transition: none;
    }
}

/* ANOTEI-GESTAO-FINANCEIRA-DESIGN-ATUAL */
/* Ajustes visuais isolados. Não alteram comportamento nem cálculos. */

body.gestao-financeira-page {
    min-height: 100vh;
    margin: 0;
    padding: 24px;
    background: #f5f5fa;
    color: #211d35;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.gestao-financeira-page #telaGestaoFinanceira {
    display: block;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 0 36px;
    background: transparent;
    color: #211d35;
}

body.gestao-financeira-page #telaGestaoFinanceira .app-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 28px;
    padding: 8px 0 22px;
    background: transparent;
    border-bottom: 1px solid #ece9f4;
    box-shadow: none;
}

body.gestao-financeira-page #telaGestaoFinanceira .app-header-titles {
    min-width: 0;
}

body.gestao-financeira-page #telaGestaoFinanceira .app-header h1 {
    margin: 0;
    color: #211d35;
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.2;
}

body.gestao-financeira-page #telaGestaoFinanceira .financeiro-subtitulo {
    margin: 8px 0 0;
    color: #77748a;
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 1;
}

body.gestao-financeira-page #btnVoltarProducao {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 1px solid #ece9f4;
    border-radius: 14px;
    background: #fff;
    color: #5030b5;
    font-size: 1.4rem;
    box-shadow: 0 4px 14px #2a1c5508;
}

body.gestao-financeira-page #btnVoltarProducao:hover {
    background: #f0ebff;
}

body.gestao-financeira-page #telaGestaoFinanceira .card {
    min-width: 0;
    margin: 0 0 18px;
    padding: 22px;
    border: 1px solid #ece9f4;
    border-radius: 22px;
    background: #fff;
    color: #211d35;
    box-shadow: 0 8px 28px #2a1c5509;
}

body.gestao-financeira-page #telaGestaoFinanceira .financeiro-grid {
    gap: 5px;
    margin-bottom: 5px;
}

body.gestao-financeira-page #telaGestaoFinanceira .financeiro-indicador {
    gap: 10px;
    padding: 20px;
    border-radius: 20px;
}

body.gestao-financeira-page .financeiro-indicador-titulo {
    color: #77748a;
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.4;
    opacity: 1;
}

body.gestao-financeira-page .financeiro-indicador strong {
    color: #5030b5;
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    overflow-wrap: anywhere;
}

body.gestao-financeira-page .financeiro-indicador small {
    color: #77748a;
    font-size: 0.82rem;
    line-height: 1.45;
    opacity: 1;
}

body.gestao-financeira-page #telaGestaoFinanceira h3 {
    margin: 0 0 16px;
    color: #211d35;
    font-size: 1.1rem;
    font-weight: 750;
    letter-spacing: -0.025em;
    line-height: 1.4;
}

body.gestao-financeira-page .financeiro-progresso-card {
    padding: 24px;
}

body.gestao-financeira-page .financeiro-progresso {
    margin-top: 20px;
}

body.gestao-financeira-page .financeiro-progresso-barra {
    height: 12px;
    background: #eeeaf8;
}

body.gestao-financeira-page .financeiro-progresso-barra div {
    background: linear-gradient(90deg, #6d47dc, #9b7bf5);
}

body.gestao-financeira-page .financeiro-progresso-legenda {
    color: #77748a;
    font-size: 0.88rem;
}

body.gestao-financeira-page .financeiro-progresso-legenda strong {
    color: #211d35;
}

body.gestao-financeira-page .financeiro-status {
    border: 1px solid #ece9f4;
    border-radius: 13px;
    background: #f8f6fd;
    color: #5030b5;
    font-size: 0.88rem;
}

body.gestao-financeira-page .financeiro-resumo {
    gap: 12px;
}

body.gestao-financeira-page .financeiro-resumo > div,
body.gestao-financeira-page .financeiro-despesas-info > div {
    min-width: 0;
    padding: 16px;
    border: 1px solid #ece9f4;
    border-radius: 15px;
    background: #faf9fd;
}

body.gestao-financeira-page .financeiro-resumo span,
body.gestao-financeira-page .financeiro-despesas-info span {
    color: #77748a;
    font-size: 0.82rem;
    line-height: 1.45;
    opacity: 1;
}

body.gestao-financeira-page .financeiro-resumo strong,
body.gestao-financeira-page .financeiro-despesas-info strong {
    color: #211d35;
    font-size: 1.05rem;
    font-weight: 750;
    overflow-wrap: anywhere;
}

body.gestao-financeira-page .financeiro-secao-cabecalho {
    align-items: center;
    gap: 16px;
}

body.gestao-financeira-page .financeiro-secao-cabecalho h3 {
    margin-bottom: 6px;
}

body.gestao-financeira-page .financeiro-secao-cabecalho p {
    color: #77748a;
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 1;
}

body.gestao-financeira-page #btnAbrirDespesasPessoais {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid #e2d9ff;
    border-radius: 13px;
    background: #f0ebff;
    color: #5030b5;
    font-size: 0.9rem;
    font-weight: 750;
    white-space: nowrap;
}

body.gestao-financeira-page #btnAbrirDespesasPessoais:hover {
    background: #e6ddff;
}

body.gestao-financeira-page .financeiro-evolucao-lista {
    gap: 12px;
}

body.gestao-financeira-page .financeiro-evolucao-vazio {
    padding: 20px;
    border: 1px dashed #dcd5ee;
    border-radius: 15px;
    background: #faf9fd;
    color: #77748a;
    text-align: center;
}

@media (max-width: 900px) {
    body.gestao-financeira-page {
        padding: 20px;
    }

    body.gestao-financeira-page #telaGestaoFinanceira .financeiro-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    body.gestao-financeira-page {
        padding: 16px 14px 28px;
    }

    body.gestao-financeira-page #telaGestaoFinanceira .app-header {
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 20px;
        padding-bottom: 18px;
    }

    body.gestao-financeira-page #telaGestaoFinanceira .app-header h1 {
        font-size: 1.55rem;
    }

    body.gestao-financeira-page #telaGestaoFinanceira .card,
    body.gestao-financeira-page #telaGestaoFinanceira .financeiro-indicador {
        padding: 18px;
        border-radius: 18px;
    }

    body.gestao-financeira-page #telaGestaoFinanceira .financeiro-grid,
    body.gestao-financeira-page #telaGestaoFinanceira .financeiro-resumo,
    body.gestao-financeira-page #telaGestaoFinanceira .financeiro-despesas-info {
        grid-template-columns: 1fr;
    }

    body.gestao-financeira-page .financeiro-secao-cabecalho {
        align-items: stretch;
        flex-direction: column;
    }

    body.gestao-financeira-page #btnAbrirDespesasPessoais {
        width: 100%;
    }

    body.gestao-financeira-page .financeiro-progresso-legenda {
        gap: 8px;
    }
}

/* ANOTEI-BOTTOM-ICONS-LINEARES */
/* Ícones leves para a navegação inferior. */
.bottom-bar .bottom-icon {
    display: grid;
    place-items: center;
    font-size: 0;
    line-height: 1;
}

.bottom-bar .bottom-icon svg {
    display: block;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    color: currentColor;
    transition: opacity 160ms ease;
}

.bottom-bar .bottom-item {
    gap: 5px;
}

.bottom-bar .bottom-item:active .bottom-icon svg {
    opacity: 0.65;
}

.bottom-bar .bottom-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
}