/* ====================================================================
 * main.css — Tabela Completa Lotofácil
 * Base, container, controles superiores, tabela e cores Caixa.
 * Media queries co-localizadas.
 * ==================================================================== */

:root {
    --tc-cor-primaria:    #2563eb;
    --tc-cor-secundaria:  #64748b;
    --tc-cor-sucesso:     #16a34a;
    --tc-cor-perigo:      #dc2626;
    --tc-cor-aviso:       #f59e0b;
    --tc-cor-fundo:       #f3f4f6;
    --tc-cor-borda:       #e5e7eb;
    --tc-cor-texto:       #1f2937;
    --tc-cor-texto-fraco: #6b7280;
    --tc-sombra-card:     0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
    --tc-sombra-card-lg:  0 4px 6px rgb(0 0 0 / 7%), 0 10px 15px rgb(0 0 0 / 10%);
    --tc-radius:          8px;
    --tc-transicao:       150ms ease;
}

/* ============ Skip link ============ */
.sr-only-focusable {
    position: absolute;
    left: -999px;
    top: -999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.sr-only-focusable:focus {
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    z-index: 999;
    background: var(--tc-cor-primaria);
    color: #fff;
    padding: .5rem 1rem;
    border-radius: var(--tc-radius);
}

/* ============ Container ============ */
.tc-container {
    background: #fff;
    border-radius: var(--tc-radius);
    box-shadow: var(--tc-sombra-card-lg);
}

/* ============ Controles superiores ============ */
.tc-controles-superiores {
    background: #f8fafc;
    padding: 12px 14px;
    border-radius: var(--tc-radius);
    box-shadow: var(--tc-sombra-card);
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.tc-controles-linha-1 {
    display: grid;
    grid-template-columns: 1fr 1fr auto auto;
    gap: 10px;
    align-items: end;
}
.tc-controles-linha-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
}
.tc-controles-spacer { flex: 1; }

.tc-intervalo-field label {
    display: block;
    font-size: .8rem;
    color: var(--tc-cor-texto-fraco);
    margin-bottom: 4px;
    font-weight: 500;
}
.tc-intervalo-field input {
    text-align: center;
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--tc-cor-borda);
    border-radius: var(--tc-radius);
    font-size: 1rem;
}
.tc-intervalo-field input:focus {
    outline: none;
    border-color: var(--tc-cor-primaria);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 20%);
}
.tc-total-concursos {
    text-align: center;
    padding: 7px 10px;
    background: #fff;
    border: 1px solid var(--tc-cor-borda);
    border-radius: var(--tc-radius);
    font-weight: 600;
    color: var(--tc-cor-primaria);
    min-width: 60px;
}
.tc-controles-acoes {
    display: flex;
    gap: 6px;
    align-items: end;
}

/* ============ Dropdowns ============ */
.tc-dropdown {
    position: relative;
    display: inline-block;
}
.tc-btn-dropdown {
    background: #fff;
    color: var(--tc-cor-texto);
    border: 1px solid var(--tc-cor-borda);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.tc-btn-dropdown:hover { background: #0b00b5; }
.tc-dropdown.is-open .tc-btn-dropdown {
    background: #eff6ff;
    border-color: var(--tc-cor-primaria);
    color: var(--tc-cor-primaria);
}
.tc-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--tc-cor-borda);
    border-radius: var(--tc-radius);
    box-shadow: 0 10px 25px rgb(0 0 0 / 12%);
    overflow: hidden;
    animation: tc-fade-in .12s ease;
}
.tc-dropdown-section {
    padding: 8px;
    border-bottom: 1px solid var(--tc-cor-borda);
}
.tc-dropdown-section:last-child { border-bottom: 0; }
.tc-dropdown-section-footer { background: #f8fafc; }
.tc-dropdown-label {
    font-size: .7rem;
    font-weight: 700;
    color: var(--tc-cor-texto-fraco);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 6px;
}
.tc-dropdown-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 6px;
}
.tc-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: var(--tc-cor-texto);
    font-size: .9rem;
    border-radius: 4px;
    transition: background var(--tc-transicao);
}
.tc-dropdown-item:hover { background: #f1f5f9; }
.tc-dropdown-item.is-padrao { color: var(--tc-cor-primaria); font-weight: 600; }
.tc-dropdown-item.is-sistema i { color: #2563eb; }
.tc-dropdown-item i { width: 18px; text-align: center; }
.tc-dropdown-tag {
    margin-left: auto;
    background: #dbeafe;
    color: #1e40af;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.tc-dropdown-empty {
    padding: 12px;
    color: var(--tc-cor-texto-fraco);
    text-align: center;
    font-size: .85rem;
}

.tc-checkbox-inline { font-size: .85rem; color: var(--tc-cor-texto-fraco); }
.tc-btn-icon {
    background: var(--tc-cor-texto);
    color: #fff;
    padding: 7px 10px;
}

/* ============ Botões ============ */
.tc-btn {
    cursor: pointer;
    border: 0;
    border-radius: var(--tc-radius);
    padding: 8px 14px;
    font-weight: 600;
    font-size: .9rem;
    transition: transform var(--tc-transicao), box-shadow var(--tc-transicao), background var(--tc-transicao);
    color: #fff;
    background: var(--tc-cor-secundaria);
}
.tc-btn:hover    { transform: translateY(-1px); box-shadow: 0 2px 4px rgb(0 0 0 / 15%); }
.tc-btn:active   { transform: translateY(0); }
.tc-btn:focus    { outline: 3px solid rgb(37 99 235 / 40%); outline-offset: 2px; }
.tc-btn-primary  { background: var(--tc-cor-primaria); }
.tc-btn-secondary{ background: #e5e7eb; color: #1f2937; }
.tc-btn-danger   { background: var(--tc-cor-perigo); }
.tc-btn-sm       { padding: 4px 10px; font-size: .8rem; }
.tc-btn-mini     { padding: 4px 8px; font-size: .75rem; background: #e5e7eb; color: #1f2937; }
.tc-btn-up       { background: #16a34a; padding: 8px 10px; }
.tc-btn-down     { background: #dc2626; padding: 8px 10px; }
.tc-btn-preset   { background: #db2777; min-width: 42px; }
.tc-btn-preset.is-active { background: #7c3aed; }
.tc-btn-mais     { background: #1e293b; font-weight: 700; }
.tc-btn-export   { background: #16a34a; }
.tc-btn-excel    { background: #1d4ed8; }
.tc-btn-ods      { background: #9333ea; }
.tc-btn-html     { background: #9333ea; }
.tc-btn-pdf      { background: #dc2626; }
.tc-btn-config   { background: #1f2937; padding: 8px 12px; }

.tc-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
}
.tc-checkbox input { transform: scale(1.1); }

.tc-aviso {
    margin: 12px 0;
    padding: 10px 14px;
    background: #fef3c7;
    color: #92400e;
    border-radius: var(--tc-radius);
    border-left: 4px solid #f59e0b;
}
.tc-aviso.hidden { display: none; }

/* ============ Toast (feedback de copiar/colar) ============ */
.tc-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 20px);
    z-index: 2000;
    max-width: min(90vw, 460px);
    padding: 10px 16px;
    border-radius: var(--tc-radius);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.tc-toast.is-visivel { opacity: 1; transform: translate(-50%, 0); }
.tc-toast.is-ok   { background: #16a34a; }
.tc-toast.is-erro { background: #dc2626; }

/* ============ Tabela ============ */
.tc-table-wrapper {
    margin-top: 6px;
}
.tc-table-container {
    overflow-x: auto;
    border-radius: var(--tc-radius);
    box-shadow: var(--tc-sombra-card);
    padding: 4px;
}
.tc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
}
.tc-table th, .tc-table td {
    text-align: center;
    padding: 4px 2px;
    font-size: 1rem;
    border: 1px solid rgb(219 234 254 / 50%);
    background: #fff;
    white-space: nowrap;
}
.tc-table th {
    background: #f8fafc;
    font-weight: 600;
}
.tc-th-concurso, .tc-td-concurso {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #f8fafc;
    font-weight: 600;
}
.tc-td-concurso { background: #f8fafc; }
/* Hover da linha: overlay translúcido (box-shadow inset) em vez de background,
 * para NÃO apagar as cores das dezenas (rosa, cores Caixa), totais e filtros. */
.tc-table tbody tr:hover td { box-shadow: inset 0 0 0 9999px rgb(0 0 0 / 7%); }

/* Realce da coluna do filtro/dinâmico selecionado — moldura vertical azul,
 * para o usuário saber qual padrão está analisando. Combina com o hover. */
.tc-table td.tc-coluna-filtro-ativa,
.tc-table th.tc-coluna-filtro-ativa {
    box-shadow: inset 2px 0 0 var(--tc-cor-primaria), inset -2px 0 0 var(--tc-cor-primaria);
}
.tc-table tbody tr:hover td.tc-coluna-filtro-ativa {
    box-shadow: inset 0 0 0 9999px rgb(0 0 0 / 7%), inset 2px 0 0 var(--tc-cor-primaria), inset -2px 0 0 var(--tc-cor-primaria);
}

/* ============ Apontamentos diagonais (vindos da aba Padrões) ============
 * Diagonal de presença = verde; de ausência = vermelho (como no projeto de
 * Padrões Visuais). !important para vencer numero-presente e cores Caixa. */
.tc-table td.tc-apont-pres {
    background: #16a34a !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 2px #064e3b;
    font-weight: 700;
}
.tc-table td.tc-apont-aus {
    background: #dc2626 !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 2px #7f1d1d;
}
/* "Mostrar Todos": evidencia os apontamentos esmaecendo as demais dezenas */
.tc-table-container.tc-apont-evidencia td.number-cell { opacity: .22; transition: opacity .15s ease; }
.tc-table-container.tc-apont-evidencia td.tc-apont-pres,
.tc-table-container.tc-apont-evidencia td.tc-apont-aus { opacity: 1; }
.tc-table-container.tc-apont-evidencia #linha-projecao td { opacity: 1; }

.tc-table td.number-cell { min-width: 1.8rem; font-weight: 500; }

/* Núcleo: dezena presente — especificidade alta para vencer .tc-table td { background:#fff } */
.tc-table td.numero-presente {
    background: #c90070;
    color: #fff;
    font-weight: 600;
}

/* Total colorido (dynamic via JS) */
.tc-table td.tc-td-total { font-weight: bold; }

/* Linha de Proj. */
.tc-table .linha-projecao-destaque td {
    background: #fffbeb;
    border-top: 2px solid #f59e0b;
    border-bottom: 2px solid #f59e0b;
}
.tc-table .linha-projecao-destaque .tc-td-concurso {
    color: #92400e;
    background: #fef3c7;
}

/* Destaque de coluna */
.tc-table .coluna-destacada .numero-presente {
    background: #c90070;
    color: #fff;
}
.tc-table td.coluna-esmaecida {
    background: #f1f5f9;
    opacity: 0.7;
}
.tc-table td.coluna-esmaecida.numero-presente {
    background: #e2e8f0;
    color: #64748b;
}

/* Destaque de filtro fixo (numeros do filtro selecionado) */
.tc-table td.numero-destacado.numero-presente {
    background: #c90070;
    color: #fff;
}
.tc-table td.numero-nao-destacado.numero-presente {
    background: #e9e9e9;
    color: #858585;
}

/* Destaque dinâmico (Seq/Rep/Soma) */
.tc-table td.filtro-destaque {
    outline-offset: -2px;
}
.tc-table td.filtro-esmaecido {
    background: #e9e9e9;
    color: #858585;
}

/* ============ Cores graduadas dos filtros (baixo / médio / alto)
 * Especificidade reforçada e desligável via classe .tc-sem-cores-filtros no tbody.
 *
 * Duas PALETAS INDEPENDENTES (via CSS variables, ajustadas por TC.cores):
 *   --cf-*  → células de filtros/dinâmicos (corpo da tabela + linha Projeção)
 *   --cp-*  → linha "%" por dezena (rodapé)
 * Assim, mudar a cor das células NÃO afeta a linha "%", e vice-versa.
 * Os valores abaixo são apenas FALLBACKS; o JS sobrescreve no .tc-table-container.
 * ============ */
.tc-table-container {
    --cf-below-bg: #ff4040; --cf-below-fg: #ffffff;
    --cf-avg-bg:   #fff3bf; --cf-avg-fg:   #5b4708;   /* média suave (meio-termo) */
    --cf-above-bg: #00ff59; --cf-above-fg: #166534;
    --cp-below-bg: #ff4040; --cp-below-fg: #ffffff;
    --cp-avg-bg:   #e2e8f0; --cp-avg-fg:   #1f2937;   /* média neutra (clássico) */
    --cp-above-bg: #00ff59; --cp-above-fg: #166534;
}

/* Células de filtros e dinâmicos (corpo + linha projeção) */
.tc-table tbody:not(.tc-sem-cores-filtros) td.tc-td-filtro.filter-below,
.tc-table tbody:not(.tc-sem-cores-filtros) td.tc-td-dinamico.filter-below   { background: var(--cf-below-bg) !important; color: var(--cf-below-fg) !important; }
.tc-table tbody:not(.tc-sem-cores-filtros) td.tc-td-filtro.filter-average,
.tc-table tbody:not(.tc-sem-cores-filtros) td.tc-td-dinamico.filter-average { background: var(--cf-avg-bg) !important; color: var(--cf-avg-fg) !important; }
.tc-table tbody:not(.tc-sem-cores-filtros) td.tc-td-filtro.filter-above,
.tc-table tbody:not(.tc-sem-cores-filtros) td.tc-td-dinamico.filter-above   { background: var(--cf-above-bg) !important; color: var(--cf-above-fg) !important; }

/* Linha "%" por dezena (rodapé) — paleta independente */
.tc-table tfoot td.tc-td-pct.filter-below   { background: var(--cp-below-bg) !important; color: var(--cp-below-fg) !important; }
.tc-table tfoot td.tc-td-pct.filter-average { background: var(--cp-avg-bg) !important; color: var(--cp-avg-fg) !important; }
.tc-table tfoot td.tc-td-pct.filter-above   { background: var(--cp-above-bg) !important; color: var(--cp-above-fg) !important; }

/* Desligar cores via toggle na config */
.tc-table tbody.tc-sem-cores-filtros td.tc-td-filtro,
.tc-table tbody.tc-sem-cores-filtros td.tc-td-dinamico {
    background: #fff !important;
    color: var(--tc-cor-texto);
}

/* ============ Cores Oficiais da Caixa — cor por dezena (ciclo de 10)
 * Replica a regra da tabela original: cada dezena tem sua cor, repetindo o
 * ciclo a cada 10 (01-10 == 11-20 == 21-25). Aplica às dezenas presentes
 * (td.numero-presente) e ao cabeçalho (th.number-cell) para identificação.
 * ============ */
.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="01"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="01"],
.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="11"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="11"],
.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="21"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="21"] { background: #ff0000; color: #fff; }   /* vermelho */

.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="02"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="02"],
.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="12"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="12"],
.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="22"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="22"] { background: #ffff00; color: #000; }   /* amarelo */

.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="03"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="03"],
.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="13"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="13"],
.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="23"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="23"] { background: #008000; color: #fff; }   /* verde */

.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="04"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="04"],
.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="14"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="14"],
.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="24"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="24"] { background: #8b4513; color: #fff; }   /* marrom */

.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="05"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="05"],
.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="15"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="15"],
.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="25"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="25"] { background: #0000ff; color: #fff; }   /* azul */

.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="06"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="06"],
.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="16"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="16"] { background: #ff69b4; color: #fff; }   /* rosa */

.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="07"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="07"],
.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="17"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="17"] { background: #000000; color: #fff; }   /* preto */

.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="08"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="08"],
.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="18"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="18"] { background: #808080; color: #fff; }   /* cinza */

.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="09"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="09"],
.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="19"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="19"] { background: #ffa500; color: #fff; }   /* laranja */

.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="10"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="10"],
.tc-table-container.cores-caixa-ativas td.numero-presente[data-numero="20"],
.tc-table-container.cores-caixa-ativas th.number-cell[data-numero="20"] { background: #ffffff; color: #000; border-color: #cbd5e1; }  /* branco */

/* Esmaecimento das dezenas NÃO selecionadas no modo Cores Caixa.
 * Usa opacity (ortogonal ao background) porque as regras de cor por dezena
 * têm especificidade alta e venceriam um background cinza. As células das
 * colunas selecionadas não recebem .coluna-esmaecida, então ficam em opacity 1. */
.tc-table-container.cores-caixa-ativas td.coluna-esmaecida { opacity: .28; }

/* ============ X flutuante no cabeçalho para ocultar coluna ============ */
.tc-table thead th.tc-col-filtro,
.tc-table thead th.tc-col-dinamico {
    position: relative;
    overflow: visible;
}
.tc-col-x {
    position: absolute;
    top: -10px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 0;
    background: #dc2626;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--tc-transicao), transform var(--tc-transicao);
    z-index: 10;
    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    padding: 0;
    display: grid;
    place-items: center;
}
.tc-table thead th:hover .tc-col-x { opacity: 1; }
.tc-col-x:hover { transform: scale(1.15); background: #b91c1c; }

/* ============ Loading overlay ============ */
.tc-loading-overlay {
    position: fixed; inset: 0;
    background: rgb(0 0 0 / 40%);
    display: grid;
    place-items: center;
    z-index: 9000;
}
.tc-loading-card {
    background: #fff;
    padding: 24px 32px;
    border-radius: var(--tc-radius);
    box-shadow: var(--tc-sombra-card-lg);
    text-align: center;
}
.tc-loading-spinner {
    width: 36px; height: 36px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--tc-cor-primaria);
    border-radius: 50%;
    margin: 0 auto 12px;
    animation: tc-spin 0.8s linear infinite;
}
@keyframes tc-spin { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 768px) {
    .tc-intervalo {
        grid-template-columns: 1fr 1fr;
    }
    .tc-intervalo-actions {
        grid-column: 1 / -1;
        flex-wrap: wrap;
    }
    .tc-presets, .tc-exportacoes { gap: 4px; }
    .tc-btn { padding: 6px 10px; font-size: .85rem; }
}

.max-w-full {
    max-width: fit-content !important; 
}

.tc-pt-baixa td {
    white-space: nowrap;
}

.tc-pt-media td {
    white-space: nowrap;
}

.tc-pt-alta td {
    white-space: nowrap;
}