/* =========================================================================
   ui.css - design system do Hora a Hora (identidade shadcn em CSS puro).
   Base para padronizar as demais páginas. Carregue DEPOIS do Bootstrap.
   ========================================================================= */

:root {
    /* Faz o navegador desenhar controles nativos (popup de select, scrollbar,
       date picker) no tema certo. Sem isto, a lista do <select> no tema escuro
       sai com texto claro sobre fundo branco. */
    color-scheme: light;

    --background: #ffffff;
    --foreground: #09090b;
    --card: #ffffff;
    --card-foreground: #09090b;
    --muted: #f4f4f5;
    --muted-foreground: #71717a;
    --border: #e4e4e7;
    --input: #e4e4e7;
    --primary: #1428a0;
    --primary-foreground: #fafafa;
    --accent: #f4f4f5;
    --accent-foreground: #18181b;
    --destructive: #dc2626;
    --destructive-foreground: #fafafa;
    --ring: #1428a0;
    --radius: 0.75rem;
}

[data-theme="dark"] {
    color-scheme: dark;

    --background: #09090b;
    --foreground: #fafafa;
    --card: rgba(24, 24, 27, 0.72);
    --card-foreground: #fafafa;
    --muted: #27272a;
    --muted-foreground: #a1a1aa;
    --border: rgba(255, 255, 255, 0.12);
    --input: rgba(255, 255, 255, 0.16);
    --primary: #3b6dff;
    --primary-foreground: #ffffff;
    --accent: rgba(255, 255, 255, 0.08);
    --accent-foreground: #fafafa;
    --destructive: #ef4444;
    --destructive-foreground: #fafafa;
    --ring: #3b6dff;
}

/* ---------- Card ---------- */
.ui-card {
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 32px rgba(0, 0, 0, .12);
}

.ui-card-header { padding: 1.5rem 1.5rem 1.25rem; }
.ui-card-content { padding: 0 1.5rem 1.5rem; }
.ui-card-footer { padding: 0 1.5rem 1.5rem; display: flex; align-items: center; }

.ui-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0;
}

.ui-card-description {
    font-size: .875rem;
    color: var(--muted-foreground);
    margin: .375rem 0 0;
}

/* ---------- Form ---------- */
.ui-label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: .5rem;
    color: var(--card-foreground);
}

.ui-input,
.ui-select {
    display: block;
    width: 100%;
    height: 2.75rem;
    padding: 0 .875rem;
    font-size: .9375rem;
    font-family: inherit;
    color: var(--card-foreground);
    background: var(--background);
    border: 1px solid var(--input);
    border-radius: var(--radius);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

[data-theme="dark"] .ui-input,
[data-theme="dark"] .ui-select {
    background: rgba(255, 255, 255, .04);
}

.ui-input::placeholder { color: var(--muted-foreground); }

.ui-input:focus,
.ui-select:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
}

.ui-select option,
.ui-select optgroup {
    background-color: var(--background);
    color: var(--card-foreground);
}

.ui-select optgroup { font-weight: 700; }

.ui-field { margin-bottom: 1rem; }

/* ---------- Button ---------- */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 2.75rem;
    padding: 0 1.25rem;
    font-size: .9375rem;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--primary-foreground);
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, transform .1s, box-shadow .2s, border-color .2s;
}

.ui-btn:hover { background: color-mix(in srgb, var(--primary) 88%, black); color: var(--primary-foreground); }
.ui-btn:active { transform: scale(.985); }
.ui-btn:disabled { opacity: .5; pointer-events: none; }
.ui-btn-block { width: 100%; }

.ui-btn-outline {
    background: transparent;
    color: var(--card-foreground);
    border-color: var(--border);
}
.ui-btn-outline:hover { background: var(--accent); color: var(--accent-foreground); }

.ui-btn-ghost { background: transparent; color: var(--muted-foreground); }
.ui-btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); }

.ui-btn-destructive { background: var(--destructive); color: var(--destructive-foreground); }
.ui-btn-destructive:hover { background: color-mix(in srgb, var(--destructive) 88%, black); }

.ui-btn-sm { height: 2.25rem; padding: 0 .875rem; font-size: .8125rem; }

/* ---------- Badge ---------- */
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 9999px;
    border: 1px solid var(--border);
    background: var(--accent);
    color: var(--accent-foreground);
}

.ui-badge-admin { background: color-mix(in srgb, var(--destructive) 18%, transparent); border-color: color-mix(in srgb, var(--destructive) 45%, transparent); color: #fca5a5; }
.ui-badge-gerente { background: color-mix(in srgb, var(--primary) 22%, transparent); border-color: color-mix(in srgb, var(--primary) 50%, transparent); color: #93b4ff; }
.ui-badge-promotor { background: rgba(34, 197, 94, .16); border-color: rgba(34, 197, 94, .42); color: #86efac; }

/* ---------- Alert ---------- */
.ui-alert {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .75rem .875rem;
    font-size: .875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--card-foreground);
}

.ui-alert-destructive {
    border-color: color-mix(in srgb, var(--destructive) 45%, transparent);
    background: color-mix(in srgb, var(--destructive) 12%, transparent);
    color: color-mix(in srgb, var(--destructive) 70%, var(--foreground));
}

.ui-alert-success {
    border-color: rgba(34, 197, 94, .45);
    background: rgba(34, 197, 94, .12);
}

/* ---------- Utilitários ---------- */
.ui-muted { color: var(--muted-foreground); }
.ui-separator { height: 1px; background: var(--border); border: 0; margin: 1.25rem 0; }

/* ---------- Motion (substitui o framer-motion) ---------- */
@keyframes ui-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.ui-animate { animation: ui-fade-up .45s cubic-bezier(.22, 1, .36, 1) both; }
.ui-delay-1 { animation-delay: .06s; }
.ui-delay-2 { animation-delay: .12s; }
.ui-delay-3 { animation-delay: .18s; }
.ui-delay-4 { animation-delay: .24s; }
.ui-delay-5 { animation-delay: .30s; }
.ui-delay-6 { animation-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
    .ui-animate { animation: none; }
    .ui-btn:active { transform: none; }
}


/* =========================================================================
   Compat Bootstrap 5.3
   Alinha a paleta escura do Bootstrap a do hub e conserta a elevacao: por
   padrao o card usa --bs-body-bg e a pagina usa --bs-tertiary-bg, o que no
   escuro deixa o card MAIS ESCURO que a pagina — o inverso do que acontece
   no claro. Superficie elevada tem de clarear no escuro.
   ========================================================================= */
[data-bs-theme="dark"] {
    --bs-body-bg: #09090b;
    --bs-body-color: #e4e4e7;
    --bs-emphasis-color: #fafafa;
    --bs-secondary-bg: #18181b;
    --bs-tertiary-bg: #27272a;
    --bs-border-color: rgba(255, 255, 255, .12);
    --bs-secondary-color: rgba(250, 250, 250, .62);
}

/* Pagina no tom mais escuro; card e demais superficies sobem um degrau.
   .bg-transparent fica de fora: e o que o funil usa nos cards internos. */
[data-bs-theme="dark"] body.bg-body-tertiary {
    background-color: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .card:not(.bg-transparent):not(.bg-dark),
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .upload-box,
[data-bs-theme="dark"] #funnel-content,
[data-bs-theme="dark"] .bg-body {
    background-color: var(--bs-secondary-bg) !important;
}

[data-bs-theme="dark"] .upload-box:hover {
    background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .swal2-container .swal2-popup {
    background: var(--bs-secondary-bg);
}


/* =========================================================================
   SweetAlert2 na identidade do sistema.
   O Swal injeta o CSS dele em runtime, no fim do <head>, entao vem DEPOIS
   deste arquivo. Por isso os seletores abaixo sobem a especificidade
   (.swal2-container .swal2-x) em vez de usar !important espalhado.
   ========================================================================= */
.swal2-container.swal2-backdrop-show { background: rgba(9, 9, 11, .6); }

.swal2-container .swal2-popup {
    /* Superficie elevada, mesmo criterio dos cards: branco no claro, um degrau
       acima do fundo no escuro (a regra do escuro vem mais abaixo). */
    background: var(--bs-body-bg, var(--card));
    color: var(--bs-body-color, var(--card-foreground));
    border: 1px solid var(--bs-border-color, var(--border));
    border-radius: calc(var(--radius) * 1.35);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 16px 48px rgba(0, 0, 0, .22);
    font-family: 'SamsungSharpSans', Inter, -apple-system, sans-serif;
    padding: 1.75rem;
}

.swal2-container .swal2-title {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--bs-emphasis-color, var(--foreground));
    padding: 0;
}

.swal2-container .swal2-html-container {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--bs-secondary-color, var(--muted-foreground));
    margin: .75rem 0 0;
}

.swal2-container .swal2-actions { margin-top: 1.5rem; gap: .5rem; }

/* Forma e cor dos botoes. O Swal grava --swal2-confirm-button-background-color
   em TODO dialogo, inclusive com o roxo padrao dele, entao nao da para usar
   essa variavel como "o autor escolheu". A cor vem daqui, e a acao destrutiva
   pede a classe .swal-destrutivo no call site. */
.swal2-container .swal2-styled {
    border-radius: var(--radius);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    padding: .55rem 1.1rem;
    margin: 0;
    box-shadow: none;
}
.swal2-container .swal2-styled:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 30%, transparent); }
.swal2-container .swal2-styled.swal2-confirm { background-color: var(--primary); }
.swal2-container .swal2-styled.swal2-confirm.swal-destrutivo { background-color: var(--destructive); }
.swal2-container .swal2-styled.swal2-confirm.swal-sucesso { background-color: #16a34a; }
.swal2-container .swal2-styled.swal2-confirm.swal-neutro {
    background-color: transparent;
    color: var(--bs-body-color, var(--card-foreground));
    border: 1px solid var(--bs-border-color, var(--border));
}
.swal2-container .swal2-styled.swal2-cancel {
    background-color: transparent;
    color: var(--bs-body-color, var(--card-foreground));
    border: 1px solid var(--bs-border-color, var(--border));
}
.swal2-container .swal2-styled.swal2-cancel:hover { background-color: var(--bs-tertiary-bg, var(--accent)); }

.swal2-container .swal2-input,
.swal2-container .swal2-select,
.swal2-container .swal2-textarea {
    border: 1px solid var(--bs-border-color, var(--input));
    border-radius: var(--radius);
    background: var(--bs-body-bg, var(--background));
    color: var(--bs-body-color, var(--card-foreground));
    box-shadow: none;
    font-family: inherit;
    font-size: .9rem;
}
.swal2-container .swal2-input:focus,
.swal2-container .swal2-select:focus,
.swal2-container .swal2-textarea:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
}
.swal2-container .swal2-input-label { color: var(--bs-secondary-color, var(--muted-foreground)); font-size: .8125rem; }

.swal2-container .swal2-validation-message {
    background: color-mix(in srgb, var(--destructive) 12%, transparent);
    color: var(--destructive);
    border-radius: var(--radius);
}

/* O icone de aviso do Swal ja tem contraste nos dois temas; so os de
   info/pergunta pedem ajuste no escuro. */
[data-bs-theme="dark"] .swal2-container .swal2-icon.swal2-question,
[data-bs-theme="dark"] .swal2-container .swal2-icon.swal2-info {
    color: #93b4ff;
    border-color: rgba(147, 180, 255, .4);
}
.swal2-container .swal2-close { color: var(--bs-secondary-color, var(--muted-foreground)); }
.swal2-container .swal2-close:hover { color: var(--bs-emphasis-color, var(--foreground)); }


/* =========================================================================
   Barra de progresso moderna: fina, arredondada, sem listra animada.
   O percentual fica no rotulo ao lado, nao dentro da barra — em barra fina
   nao cabe, e o numero fora e mais legivel.
   ========================================================================= */
.progress.barra-moderna {
    height: 8px;
    border-radius: 999px;
    /* O trilho usa o tom terciario: no escuro o secundario e o mesmo fundo do
       card em que a barra costuma ficar, e ela sumia. */
    background-color: var(--bs-tertiary-bg);
    overflow: hidden;
}

.progress.barra-moderna .progress-bar {
    border-radius: 999px;
    background-color: var(--bs-primary);
    transition: width .45s cubic-bezier(.22, 1, .36, 1), background-color .3s;
}

/* =========================================================================
   Tabulacao E-Promoter: era bg-dark fixo, escuro ate no tema claro. Agora
   segue o tema como qualquer superficie elevada. As regras internas cobrem os
   utilitarios de cor fixa que o JS injeta la dentro.
   ========================================================================= */
#funnel-content {
    /* Superficie elevada, mesmo criterio dos cards: branco no claro, um degrau
       acima do fundo no escuro (regra do escuro no bloco de compat). */
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
}
#funnel-content .text-white,
#funnel-content .text-dark { color: var(--bs-body-color) !important; }
#funnel-content .border-secondary { border-color: var(--bs-border-color) !important; }
#funnel-content .bg-black { background-color: var(--bs-tertiary-bg) !important; }
#funnel-content .bg-white { background-color: var(--bs-body-bg) !important; }
#funnel-content .table-dark {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: var(--bs-tertiary-bg);
    --bs-table-striped-color: var(--bs-body-color);
}
/* Badge do funil: um so tratamento, em vez de bg-black com texto branco (que
   sumia no claro) e bg-white com texto escuro (que sumia no escuro). */
#funnel-content .badge-funil {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
    border: 1px solid var(--bs-border-color);
}

/* =========================================================================
   Linha de TOTAL / OPERACIONAL.
   A inversao total (fundo branco no tema escuro) apagava a separacao entre as
   linhas. Agora e um degrau de fundo com filete de acento, que destaca sem
   estourar.
   ========================================================================= */
.row-summary td {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-emphasis-color) !important;
    font-weight: 700;
    border-top: 2px solid var(--bs-border-color) !important;
    border-bottom: 2px solid var(--bs-border-color) !important;
}

/* Links dentro das tabelas herdam a cor da celula: fixar text-dark sumia no
   tema escuro e text-white sumia na linha de total. */
#teamTable a,
#hourlyTable a { color: inherit; }

/* Card-header que colapsa um card-body (Importar Relatorios, no epromoter,
   maraberto e storeplus). O Bootstrap sempre desenha border-bottom no
   card-header, para separa-lo do corpo — faz sentido aberto, mas fechado
   sobra como uma linha solta, ja que o body continua no DOM (so oculto) e o
   header nunca vira "ultimo filho visivel" pra ganhar canto arredondado
   embaixo (so o de cima vem de fabrica, via :first-child). Bootstrap
   atualiza aria-expanded sozinho ao abrir/fechar, entao o CSS acompanha sem
   precisar de JS. */
.card-header[data-bs-toggle="collapse"][aria-expanded="false"] {
    border-bottom-color: transparent;
    border-radius: var(--bs-card-inner-border-radius);
}


/* =========================================================================
   Cards da Visao por Equipe.
   Antes eram card-header + card-body do Bootstrap com as metricas soltas numa
   grade de duas colunas: muito alto e com o valor distante do rotulo. Agora e
   um bloco compacto, com rotulo e valor colados e numeros alinhados.
   ========================================================================= */
.card-equipe {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
    padding: .875rem 1rem;
    box-shadow: none;
}

.card-equipe-topo {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .75rem;
    padding-bottom: .625rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.card-equipe-titulo {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-equipe-topo .btn { flex: none; padding: .1rem .35rem; line-height: 1; border: 0; }
.card-equipe-topo .badge { flex: none; font-size: .625rem; }

/* Duas colunas de par rotulo/valor, com o valor encostado a direita: o olho
   corre pela coluna de numeros em vez de cacar cada valor. */
.card-equipe-metricas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.25rem;
    row-gap: .3rem;
}

.card-equipe-metricas .metrica {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    min-width: 0;
}

.card-equipe-metricas .metrica-rotulo {
    font-size: .6875rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-equipe-metricas .metrica-valor {
    font-size: .8125rem;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575px) {
    .card-equipe-metricas { grid-template-columns: 1fr; }
}

[data-bs-theme="dark"] .card-equipe { background-color: var(--bs-secondary-bg); }

/* =========================================================================
   Identidade das paginas de modulo (Bootstrap): epromoter, storeplus e as
   proximas a padronizar. Nasceu inline no epromoter.php, movida pra ca pra
   nao duplicar essas ~90 linhas em cada pagina nova. O que fica de fora
   (glow, .tipos-relatorio) e especifico do epromoter e continua la.
   ========================================================================= */
:root {
    --bs-border-radius: .75rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: 1rem;
}

body { -webkit-font-smoothing: antialiased; }

h1, h2, h3, .h4, .card-title, .modal-title { letter-spacing: -.02em; }

/* Cabecalho: barra de acento a esquerda, titulo alinhado, acao a direita */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: .5rem 0 1.75rem;
}
.page-header-texto { position: relative; padding-left: 1rem; }
.page-header-texto::before {
    content: "";
    position: absolute;
    left: 0;
    top: .15rem;
    bottom: .15rem;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #3b6dff, #1428a0);
}
.page-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    color: var(--bs-emphasis-color);
}
.page-header p {
    margin: .2rem 0 0;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

/* Barra de controles: campos e acoes numa linha so */
.barra-controles {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}
.barra-controles .campo { display: flex; flex-direction: column; gap: .35rem; }
.barra-controles .campo > label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-secondary-color);
}
.barra-controles .acoes { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 720px) {
    .barra-controles .acoes { margin-left: 0; width: 100%; }
    .barra-controles .acoes .btn { flex: 1; }
}

.card {
    border-color: var(--bs-border-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .06);
}
[data-bs-theme="dark"] .card { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35); }

/* Titulo de secao: mesma pesagem tipografica dos cards do hub */
section > .d-flex > h2.h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
}
section > .d-flex.border-bottom { border-color: var(--bs-border-color) !important; }

.table-responsive { border-radius: var(--bs-border-radius); }

.upload-box { border-radius: var(--bs-border-radius); }

.btn { font-weight: 600; }

/* Botao de tema: discreto, mesmo peso dos outros do cabecalho */
.btn-tema { line-height: 1; }

/* Tipo de relatorio (Hora / Fechamento / Consolidado): cada opcao e um cartao
   proprio. Escolher errado distorce o dado — o relatorio vai para o lugar
   errado do historico —, entao vale a area de clique maior. Usado pelo
   epromoter e pelo storeplus. */
.tipos-relatorio { display: flex; gap: .5rem; flex-wrap: wrap; }
.tipos-relatorio > input { position: absolute; opacity: 0; pointer-events: none; }

.tipos-relatorio .tipo {
    --tipo-cor: var(--bs-primary);
    --tipo-cor-rgb: var(--bs-primary-rgb);
    /* A borda usa a cor cheia; o texto usa o tom -text-emphasis, que troca
       junto com o tema. Com a cor cheia o rotulo do tipo escolhido ficava em
       3,5:1 no escuro e o "Consolidado" em 1,5:1 no claro — amarelo sobre
       branco, ilegivel. */
    --tipo-cor-texto: var(--bs-primary-text-emphasis);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    /* Mesma altura do .form-control-sm ao lado. A formula do Bootstrap usa
       1.5em, entao o font-size tem de ser o mesmo (.875rem) para os dois
       baterem. */
    font-size: .875rem;
    height: calc(1.5em + .5rem + 2px);
    padding: 0 .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    cursor: pointer;
    position: relative;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.tipos-relatorio .tipo i { font-size: .875rem; line-height: 1; color: var(--bs-secondary-color); }
.tipos-relatorio .tipo-nome { font-size: .8125rem; font-weight: 600; line-height: 1.2; }

.tipos-relatorio .tipo:hover { border-color: var(--tipo-cor); }

.tipos-relatorio .tipo-fechamento {
    --tipo-cor: var(--bs-danger);  --tipo-cor-rgb: var(--bs-danger-rgb);
    --tipo-cor-texto: var(--bs-danger-text-emphasis);
}
.tipos-relatorio .tipo-consolidado {
    --tipo-cor: var(--bs-warning); --tipo-cor-rgb: var(--bs-warning-rgb);
    --tipo-cor-texto: var(--bs-warning-text-emphasis);
}

.tipos-relatorio > input:checked + .tipo {
    border-color: var(--tipo-cor);
    /* Nao usa color-mix(): o epromoter e o storeplus copiam blocos da tela
       como imagem pelo html2canvas 1.4.1, que nao le o color(srgb ...) que o
       navegador devolve como valor computado e aborta a captura inteira. O
       elemento esta sobre o fundo do corpo, entao a tinta translucida da o
       mesmo resultado. Ver test_print_css.php. */
    background: rgba(var(--tipo-cor-rgb), .12);
    box-shadow: inset 0 0 0 1px var(--tipo-cor);
}
.tipos-relatorio > input:checked + .tipo i,
.tipos-relatorio > input:checked + .tipo .tipo-nome { color: var(--tipo-cor-texto); }
.tipos-relatorio > input:focus-visible + .tipo {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}