/* ============================================================================
 * ESTILO COMPARTILHADO - PAINEL CLIENTE E ADMIN (B2BMail)
 * Identidade visual B2BMail: mesmas cores e fontes da landing (index.html + styles.css).
 * Os tokens --color-* / --font-* / --radius-* / --shadow-* são os oficiais da identidade;
 * as variáveis --cor-* (usadas pelas regras abaixo e por estilos inline das páginas)
 * apontam para eles. Mudar a marca = mudar só este bloco.
 * ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
    /* Tokens oficiais */
    --color-ink: #11243D;            /* Azul B2BMail */
    --color-ink-soft: #233B59;       /* Azul texto */
    --color-text: #66758A;           /* Cinza texto: 4,7:1 no branco */
    --color-text-muted: #8291A0;     /* Cinza auxiliar: 3,2:1 no branco (só bordas e ícones) */
    --color-line: #DFE7EE;
    --color-surface-soft: #F4F7F9;
    --color-white: #FFFFFF;
    --color-primary: #57D7C9;        /* Turquesa B2BMail (fundo de botão só com texto --color-ink) */
    --color-primary-dark: #139E96;   /* Turquesa escuro: 3,3:1 no branco (ícones, destaques, estados ativos) */
    --color-secondary: #8571E8;      /* Violeta apoio */
    --color-coral: #F19472;
    --font-body: "DM Sans", sans-serif;
    --font-display: "Manrope", sans-serif;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-soft: 0 16px 50px rgba(24, 47, 74, .09);
    --shadow-dark: 0 30px 70px rgba(5, 20, 35, .20);

    /* Derivadas (fora da tabela oficial, só para contraste de leitura no painel) */
    --cor-link: #0F7F78;             /* turquesa escuro de texto: 4,9:1 no branco */
    --cor-primaria-hover: #7BE2D8;   /* hover do botão primário, igual ao da landing */
    --cor-info-fundo: #EDEAFC;       /* violeta de apoio a 15% sobre branco */
    --cor-info-texto: #4B3BB8;       /* violeta escuro: 6,79:1 nesse fundo */
    --cor-sucesso-fundo: #DDF7F4;    /* turquesa B2BMail a 20% sobre branco */
    --cor-sucesso-texto: #0C6F69;    /* turquesa escuro de sucesso: 5,35:1 nesse fundo, 6,0:1 no branco */

    /* Nomes usados pelas regras do painel */
    --cor-fundo-escuro: var(--color-ink);
    --cor-petroleo: var(--color-primary-dark);        /* nome histórico: cor de ação/foco */
    --cor-petroleo-escuro: var(--cor-link);
    --cor-dourado: var(--color-primary);              /* nome histórico: cor de destaque */
    --cor-fundo-conteudo: var(--color-surface-soft);
    --cor-texto: var(--color-ink);                    /* valores e texto digitado */
    --cor-rotulo: var(--color-ink-soft);              /* rótulos */
    --cor-texto-auxiliar: var(--color-text);          /* dicas e texto secundário */
    --cor-borda-campo: var(--color-text-muted);       /* borda de campos: 3,2:1 no branco */
    --cor-placeholder: var(--color-text);
    --cor-campo-inativo: #E9EEF3;                     /* fundo de desabilitado/somente leitura */
    --cor-erro: #B02A37;                              /* erro (semântico): 6,5:1 no branco */
    --cor-linha-cartao: var(--color-line);
    --cor-cabecalho-tabela: #EDF2F6;
    --cor-zebra: #F9FBFC;

    /* Bootstrap */
    --bs-body-color: var(--cor-texto);
    --bs-body-font-family: var(--font-body);
    --bs-secondary-color: var(--cor-texto-auxiliar);
    --bs-link-color: var(--cor-link);
    --bs-link-color-rgb: 15, 127, 120;
    --bs-link-hover-color: var(--color-ink);
    --bs-link-hover-color-rgb: 17, 36, 61;
    --bs-border-color: var(--color-line);
}

body { background-color: var(--cor-fundo-conteudo); color: var(--cor-texto); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { font-family: var(--font-display); color: var(--cor-texto); font-weight: 700; letter-spacing: -.03em; }
a { font-weight: 600; }
a.btn { font-weight: 700; }
a.nav-link, a.calendario-dia { font-weight: inherit; }
:focus-visible { outline-color: var(--color-primary-dark); }

/* ===== MARCA B2BMail (mesma construção da landing: três barras inclinadas + wordmark) =====
 * Fundo claro: barras turquesa / azul / violeta, "Mail" em turquesa escuro.
 * Fundo escuro (.marca-clara): barra do meio e texto brancos, "Mail" em turquesa. */
.marca { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -.06em; line-height: 1; white-space: nowrap; color: var(--color-ink); text-decoration: none; }
a.marca { font-weight: 800; }
a.marca:hover { color: var(--color-ink); }
.marca-destaque { color: var(--color-primary-dark); }
.marca-simbolo { height: 26px; width: 28px; display: flex; align-items: flex-end; gap: 3px; transform: skew(-12deg); flex-shrink: 0; }
.marca-simbolo span { display: block; width: 7px; border-radius: 4px 4px 1px 1px; }
.marca-simbolo span:nth-child(1) { height: 15px; background: var(--color-primary); }
.marca-simbolo span:nth-child(2) { height: 22px; background: var(--color-ink); }
.marca-simbolo span:nth-child(3) { height: 12px; background: var(--color-secondary); }
.marca-clara, a.marca-clara:hover { color: var(--color-white); }
.marca-clara .marca-destaque { color: var(--color-primary); }
.marca-clara .marca-simbolo span:nth-child(2) { background: var(--color-white); }
.marca-rotulo { font-family: var(--font-body); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }

/* ===== LAYOUT: o conteúdo nunca alarga a página =====
 * Num contêiner flex, o <main> cresce até a largura da maior tabela; com min-width: 0 a
 * .table-responsive rola por dentro e a página não ganha rolagem horizontal. */
.d-lg-flex > main { min-width: 0; }

/* ===== FORMULÁRIOS =====
 * Rótulo: menor, cinza-azulado escuro, peso 600. Valor digitado: maior e quase preto.
 * Campos: fundo branco, borda visível, mesma altura, anel de foco; erro, desabilitado e
 * somente leitura diferentes (o erro sempre vem com texto, nunca só a cor). */
.form-label, .col-form-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--cor-rotulo);
    margin-bottom: .3rem;
    text-transform: none;
}
.form-text { font-size: .8125rem; color: var(--cor-texto-auxiliar); }
.form-control, .form-select {
    background-color: #fff;
    color: var(--cor-texto);
    font-size: 1rem;
    border: 1px solid var(--cor-borda-campo);
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
    min-height: 2.75rem;
}
.form-select { padding-right: 2.25rem; }
textarea.form-control { min-height: 6rem; }
.form-control-sm, .form-select-sm { font-size: .875rem; min-height: 2.25rem; padding-top: .3rem; padding-bottom: .3rem; border-radius: .4rem; }
.form-control::placeholder { color: var(--cor-placeholder); opacity: 1; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--cor-petroleo);
    box-shadow: 0 0 0 .2rem rgba(19, 158, 150, .30);
    outline: 2px solid transparent;   /* modo de alto contraste do sistema continua vendo o foco */
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] {
    background-color: var(--cor-campo-inativo);
    color: var(--cor-rotulo);
    border-style: dashed;
}
.form-control:disabled, .form-select:disabled { cursor: not-allowed; }
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid {
    border-color: var(--cor-erro);
    border-width: 2px;
}
.invalid-feedback, .text-danger { color: var(--cor-erro) !important; }
.form-check-input { border: 1px solid var(--cor-borda-campo); width: 1.15em; height: 1.15em; }
.form-check-input:checked { background-color: var(--color-ink); border-color: var(--color-ink); }
.form-check-label { color: var(--cor-texto); }

/* ===== CARTÕES E SEÇÕES ===== */
.card { border-radius: 14px; --bs-card-border-color: var(--cor-linha-cartao); }
.card.border-0 { border: 1px solid var(--cor-linha-cartao) !important; }
.card.shadow-sm { box-shadow: 0 1px 2px rgba(24, 47, 74, .05) !important; }
.card-header {
    background-color: #fff;
    color: var(--cor-texto);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.02em;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--cor-linha-cartao);
}
.card-header:first-child { border-radius: 13px 13px 0 0; }
.card-body { padding: 1.25rem; }
.card-title, .card-body > h2, .card-body > h3 { color: var(--cor-texto); font-weight: 600; }
.card-footer { background-color: #fff; border-top: 1px solid var(--cor-linha-cartao); }
@media (max-width: 575.98px) {
    .card-body { padding: 1rem; }
    .card-header { padding: .75rem 1rem; }
}

/* ===== BOTÕES =====
 * Primário (.btn-petroleo, .btn-primary): fundo turquesa com texto azul (nunca texto branco no turquesa).
 * Secundário (.btn-outline-primary): contorno e texto azul; no hover, preenchido de azul. */
.btn { border-radius: var(--radius-sm); font-weight: 700; transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.btn:not(.btn-sm):not(.btn-lg):not(.btn-close) { min-height: 2.75rem; padding: .5rem 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.btn-sm { border-radius: var(--radius-sm); }
.btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(19, 158, 150, .45); }
.btn-primary, .btn-petroleo {
    --bs-btn-color: var(--color-ink); --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-ink); --bs-btn-hover-bg: var(--cor-primaria-hover); --bs-btn-hover-border-color: var(--cor-primaria-hover);
    --bs-btn-active-color: var(--color-ink); --bs-btn-active-bg: var(--cor-primaria-hover); --bs-btn-active-border-color: var(--cor-primaria-hover);
    --bs-btn-disabled-color: var(--color-ink); --bs-btn-disabled-bg: var(--color-primary); --bs-btn-disabled-border-color: var(--color-primary);
}
.btn-primary:not(:disabled):hover, .btn-petroleo:not(:disabled):hover { box-shadow: 0 8px 20px rgba(87, 215, 201, .28); }
.btn-outline-primary {
    --bs-btn-color: var(--color-ink); --bs-btn-border-color: var(--color-ink);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--color-ink); --bs-btn-hover-border-color: var(--color-ink);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--color-ink); --bs-btn-active-border-color: var(--color-ink);
    --bs-btn-disabled-color: var(--color-text); --bs-btn-disabled-border-color: var(--color-text-muted);
}
.btn-outline-secondary {
    --bs-btn-color: var(--color-ink-soft); --bs-btn-border-color: var(--cor-borda-campo);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--color-ink-soft); --bs-btn-hover-border-color: var(--color-ink-soft);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--color-ink-soft); --bs-btn-active-border-color: var(--color-ink-soft);
}
.btn-link { --bs-btn-color: var(--cor-link); --bs-btn-hover-color: var(--color-ink); }
.btn-danger {
    --bs-btn-bg: var(--cor-erro); --bs-btn-border-color: var(--cor-erro);
    --bs-btn-hover-bg: #8E1F2B; --bs-btn-hover-border-color: #8E1F2B;
}
.btn-outline-danger {
    --bs-btn-color: var(--cor-erro); --bs-btn-border-color: var(--cor-erro);
    --bs-btn-hover-bg: var(--cor-erro); --bs-btn-hover-border-color: var(--cor-erro);
}

/* ===== SELOS (badges): peso forte; "info" em tom claro do violeta ===== */
.badge { font-weight: 700; letter-spacing: .01em; }
.badge.text-bg-primary { background-color: var(--color-ink) !important; color: #fff !important; }
.badge.text-bg-info { background-color: var(--cor-info-fundo) !important; color: var(--cor-info-texto) !important; }
.badge.text-bg-light { color: var(--color-ink-soft) !important; }

/* ===== TABELAS: cabeçalho destacado, zebra leve, números à direita ===== */
.table { --bs-table-color: var(--cor-texto); --bs-table-border-color: var(--color-line); --bs-table-hover-bg: rgba(87, 215, 201, .10); margin-bottom: 0; }
.table > thead > tr > th, .table > thead.table-light > tr > th {
    background-color: var(--cor-cabecalho-tabela);
    color: var(--color-ink-soft);
    font-size: .8125rem;
    font-weight: 700;
    border-bottom: 2px solid var(--color-line);
    white-space: nowrap;
    vertical-align: middle;
}
.table > tbody > tr:nth-of-type(even) > * { --bs-table-bg-type: var(--cor-zebra); }
.table td, .table th { padding: .65rem .75rem; }
.table .text-end { font-variant-numeric: tabular-nums; }
.table-sm td, .table-sm th { padding: .4rem .6rem; }

/* ===== ABAS ===== */
.nav-tabs { border-bottom-color: var(--cor-linha-cartao); gap: .15rem; }
.nav-tabs .nav-link { color: var(--cor-texto-auxiliar); font-weight: 600; }
.nav-tabs .nav-link:hover { color: var(--cor-texto); }
.nav-tabs .nav-link.active {
    color: var(--cor-texto);
    font-weight: 700;
    box-shadow: inset 0 3px 0 var(--color-primary);
    border-color: var(--cor-linha-cartao) var(--cor-linha-cartao) #fff;
}
@media (max-width: 575.98px) {
    .nav-tabs .nav-link { padding: .45rem .6rem; font-size: .875rem; }
}

/* ===== TELAS SÓ DE LEITURA: rótulo pequeno em cima, valor embaixo ===== */
dl.row > dt[class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--cor-rotulo);
    margin-bottom: .15rem;
}
dl.row > dd[class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    font-size: 1rem;
    color: var(--cor-texto);
    margin-bottom: .9rem;
}
dl.row > dd[class*="col-"]:last-child { margin-bottom: 0; }
.valor-destaque { font-size: 1.125rem; font-weight: 600; color: var(--cor-texto); }

/* ===== ABA PLANOS: no celular, cada serviço vira um bloco (sem rolagem lateral) ===== */
@media (max-width: 575.98px) {
    #tabela-planos thead { display: none; }
    #tabela-planos, #tabela-planos tbody, #tabela-planos tr, #tabela-planos td { display: block; width: 100%; }
    #tabela-planos tr { border: 1px solid var(--cor-linha-cartao); border-radius: .5rem; padding: .5rem .75rem; margin-bottom: .75rem; }
    #tabela-planos td { border: 0; padding: .3rem 0; text-align: left !important; }
    #tabela-planos td[data-rotulo]::before {
        content: attr(data-rotulo);
        display: block;
        font-size: .8125rem;
        font-weight: 600;
        color: var(--cor-rotulo);
        margin-bottom: .15rem;
    }
    #tabela-planos > tbody > tr:nth-of-type(even) > * { --bs-table-bg-type: transparent; }
}

/* ===== ABA PLANOS: totais ===== */
.totais-planos > div { padding: .3rem 0; border-bottom: 1px dashed var(--cor-linha-cartao); }
.totais-planos dt { font-weight: 500; color: var(--cor-rotulo); }
.totais-planos dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--cor-texto); }
.totais-planos .total-final { border-bottom: 0; border-top: 2px solid var(--cor-texto); margin-top: .25rem; padding-top: .5rem; }
.totais-planos .total-final dt, .totais-planos .total-final dd { font-size: 1.125rem; font-weight: 700; color: var(--cor-texto); }

/* ===== ALERTAS: texto escuro sobre o fundo claro ===== */
.alert { border-radius: var(--radius-md); }
.alert-info { --bs-alert-color: var(--cor-info-texto); --bs-alert-bg: var(--cor-info-fundo); --bs-alert-border-color: #C8BFF5; --bs-alert-link-color: var(--cor-info-texto); }
.alert-warning { --bs-alert-color: #5C4300; }
.alert-danger { --bs-alert-color: #6E1A23; }
.alert-success { --bs-alert-color: var(--cor-sucesso-texto); --bs-alert-bg: var(--cor-sucesso-fundo); --bs-alert-border-color: var(--color-primary-dark); --bs-alert-link-color: var(--cor-sucesso-texto); }

/* ===== SUCESSO (ativo, enviado, pago, ligado): família do turquesa, sem o verde do Bootstrap ===== */
:root { --bs-success: var(--cor-sucesso-texto); --bs-success-rgb: 12, 111, 105; --bs-success-text-emphasis: var(--cor-sucesso-texto); --bs-success-bg-subtle: var(--cor-sucesso-fundo); --bs-success-border-subtle: var(--color-primary-dark); --bs-form-valid-color: var(--cor-sucesso-texto); --bs-form-valid-border-color: var(--color-primary-dark); }
.badge.text-bg-success, .badge.bg-success { background-color: var(--cor-sucesso-fundo) !important; color: var(--cor-sucesso-texto) !important; box-shadow: inset 0 0 0 1px var(--color-primary-dark); }
.text-success { color: var(--cor-sucesso-texto) !important; }
.btn-success {
    --bs-btn-color: #fff; --bs-btn-bg: var(--cor-sucesso-texto); --bs-btn-border-color: var(--cor-sucesso-texto);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0A5F5A; --bs-btn-hover-border-color: #0A5F5A;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #0A5F5A; --bs-btn-active-border-color: #0A5F5A;
    --bs-btn-disabled-bg: var(--cor-sucesso-texto); --bs-btn-disabled-border-color: var(--cor-sucesso-texto);
}
.btn-outline-success {
    --bs-btn-color: var(--cor-sucesso-texto); --bs-btn-border-color: var(--color-primary-dark);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--cor-sucesso-texto); --bs-btn-hover-border-color: var(--cor-sucesso-texto);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--cor-sucesso-texto); --bs-btn-active-border-color: var(--cor-sucesso-texto);
    --bs-btn-disabled-color: var(--cor-sucesso-texto); --bs-btn-disabled-border-color: var(--color-primary-dark);
}

.text-dourado { color: var(--color-primary-dark); }   /* nome histórico: ícone de destaque em fundo claro */

/* ===== LOGIN: fundo azul B2BMail, cartão branco com a marca (link para a landing) ===== */
.pagina-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: var(--color-ink);
    background-image: radial-gradient(circle at 85% 10%, rgba(87, 215, 201, .16), transparent 42%), radial-gradient(circle at 10% 95%, rgba(133, 113, 232, .14), transparent 40%);
}
.cartao-login {
    width: 100%;
    max-width: 400px;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dark) !important;
}
.cartao-login h1 { letter-spacing: 0; }
.cartao-login .marca { font-size: 28px; gap: 12px; }
.cartao-login .marca-simbolo { height: 32px; width: 35px; gap: 4px; }
.cartao-login .marca-simbolo span { width: 9px; }
.cartao-login .marca-simbolo span:nth-child(1) { height: 19px; }
.cartao-login .marca-simbolo span:nth-child(2) { height: 28px; }
.cartao-login .marca-simbolo span:nth-child(3) { height: 15px; }
.cartao-login .form-control:focus {
    border-color: var(--cor-petroleo);
    box-shadow: 0 0 0 .2rem rgba(19, 158, 150, .25);
}

/* ===== LAYOUT COM MENU LATERAL =====
 * .sidebar-wrapper é o <aside class="offcanvas-lg">: no desktop o Bootstrap
 * força fundo transparente nele, por isso o fundo fica no .sidebar interno. */
.sidebar {
    background-color: var(--cor-fundo-escuro);
    color: #fff;
    width: 100%;
    min-height: 100%;
}
@media (min-width: 992px) {
    .sidebar-wrapper {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
    }
    .sidebar { overflow-y: auto; }
}
.sidebar-cabecalho {
    padding: 22px 20px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.sidebar-cabecalho small { display: block; margin-top: 8px; color: rgba(255, 255, 255, .62); font-size: .8125rem; overflow-wrap: anywhere; }
.sidebar .nav-link {
    color: rgba(255, 255, 255, .78);
    font-weight: 600;
    font-size: .9375rem;
    padding: 12px 20px;
    border-left: 4px solid transparent;
    transition: .2s;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    color: var(--cor-dourado);
    background-color: rgba(255, 255, 255, .05);
    border-left-color: var(--cor-dourado);
}
.sidebar .nav-link i { margin-right: 10px; }
.sidebar .nav-link.text-danger { color: var(--color-coral) !important; }
.sidebar .nav-link.text-danger:hover { border-left-color: var(--color-coral); }

.topbar-mobile { background-color: var(--cor-fundo-escuro); min-height: 56px; }
.topbar-mobile .navbar-brand { display: inline-flex; align-items: center; gap: 10px; }

.card-indicador {
    border: none;
    border-left: 4px solid var(--color-primary);
}
.card-indicador .valor {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--color-ink);
}

/* ===== HISTÓRICO DE ENVIOS (calendário mensal) ===== */
.historico-card-resumo { border: none; border-left: 4px solid var(--cor-dourado); }
.calendario-scroll { overflow-x: auto; }
.calendario-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(92px, 1fr));
    gap: 6px;
    min-width: 650px;
}
.calendario-cabecalho {
    text-align: center;
    font-weight: 700;
    font-size: .8rem;
    color: var(--cor-fundo-escuro);
    padding: 4px 0 8px;
}
.calendario-dia, .calendario-dia-futuro, .calendario-dia-vazia {
    border-radius: 8px;
    padding: 6px 8px;
    min-height: 86px;
}
.calendario-dia-vazia { visibility: hidden; }
.calendario-dia-futuro { background: var(--color-surface-soft); border: 1px solid var(--color-line); color: var(--color-text-muted); }
.calendario-dia {
    display: block;
    background: #fff;
    border: 1.5px solid #C5D0DA;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    transition: box-shadow .15s, border-color .15s;
}
.calendario-dia:hover { border-color: var(--color-primary-dark); box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .12); color: inherit; }
.calendario-dia.calendario-hoje { border-color: var(--color-primary-dark); border-width: 2px; }
.calendario-dia.calendario-selecionado { background: #E6F8F6; border-color: var(--color-primary-dark); }
.calendario-dia .num-dia, .calendario-dia-futuro .num-dia { font-weight: 700; font-size: .9rem; display: block; margin-bottom: 2px; }
.calendario-dia .linha-campanha {
    font-size: .7rem;
    color: var(--cor-fundo-escuro);
    font-weight: 700;
    line-height: 1.3;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.calendario-dia .linha-mais { font-size: .68rem; color: var(--color-text); line-height: 1.3; display: block; }
.calendario-dia .linha-falha { font-size: .7rem; color: var(--cor-erro); font-weight: 400; line-height: 1.3; display: block; }
.campanha-dia-card {
    border-left: 5px solid var(--cor-dourado);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    padding: 10px 14px;
    margin-bottom: 8px;
}
.campanha-dia-nome { font-size: 1.05rem; font-weight: 700; color: var(--cor-fundo-escuro); }
.campanha-dia-progresso { font-size: .9rem; color: var(--color-ink-soft); margin-top: 6px; }
.campanha-dia-progresso .sep { color: var(--color-text-muted); margin: 0 2px; }
.campanha-dia-metricas {
    font-size: .85rem;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--color-line);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.campanha-dia-metricas span { font-weight: 600; }
@media (max-width: 768px) {
    .calendario-grid { grid-template-columns: repeat(7, minmax(64px, 1fr)); min-width: 460px; }
    .calendario-dia, .calendario-dia-futuro, .calendario-dia-vazia { min-height: 64px; padding: 4px 5px; }
    .calendario-dia .num-dia, .calendario-dia-futuro .num-dia { font-size: .8rem; }
    .calendario-dia .linha-campanha, .calendario-dia .linha-mais, .calendario-dia .linha-falha { font-size: .62rem; }
}

/* ===== MOVIMENTO: respeita a preferência do sistema ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}