/* ==========================================================
    ESTADO PROGRAMAS
   ========================================================== */

.programas .col-ordem {
    text-align: center;
}

.programas td:nth-child(2),
.programas th:nth-child(2) {
    padding-left: 8px;
}

.programas td:nth-child(3),
.programas th:nth-child(3) {
    text-align: left;
    padding-left: 2px;
}



/* ==========================================================
    ÁREA DE ANÁLISE
   ========================================================== */

#area-analise {
    width: 100%;
    height: 100%;
    padding: 8px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}


/* ==========================================================
    PAINEL ESQUERDO
   ========================================================== */

#painel-pareos {
    width: 100%;
    height: 270px;
    overflow: hidden;
    border: 1px solid #c8c8c8;
    background: white;
}

/* ==========================================================
   PAINEL DE RETROSPECTOS
   ========================================================== */
#painel-retrospectos {
    flex: 1;
    height: 640px;
    /*background: white;*/
    height: calc(100vh - 56px);
    border: 1px solid #c8c8c8;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ==========================================================
   TABELA
   ========================================================== */

#tabela-principal {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}


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

#tabela-principal thead {
    position: sticky;
    top: 0;
    background: #455a64;
    color: white;
}


#tabela-principal th {
    height: 22px;
    padding: 0 6px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}


/* ==========================================================
   LINHAS
   ========================================================== */
#tabela-principal td {
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    border-bottom: 1px solid #ededed;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

/* ==========================================================
    GRADE DE RETROSPECTOS
   ========================================================== */
#grade-retrospectos {
    width: 100% !important;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
}

#grade-retrospectos th {
    height: 20px;
    padding: 0 4px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    background: #455a64;
    color: white;

    position: sticky;
    top: 0;
    z-index: 10;
}

#grade-retrospectos td {
    height: 18px;
    padding: 0 4px;
    font-size: 12px;
    border-bottom: 1px solid #ececec;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

/*
#grade-retrospectos td {
    height: 18px;
    padding: 0 4px;
    font-size: 10px;
    border-bottom: 1px solid #ececec;
}
*/
/* ==========================================================
    LARGURA DAS COLUNAS
   ========================================================== */
.col-ordem {
    width: 40px;
}

.col-raia {
    width: 55px;
}

.col-bolsa {
    width: 90px;
}

.col-prova {
    width: auto;
}

/* ==========================================================
    ALINHAMENTO DAS COLUNAS
   ========================================================== */

#tabela-principal .col-ordem {
    text-align: center;
}

#tabela-principal .col-raia {
    text-align: center;
}

#tabela-principal .col-bolsa {
    text-align: center;
}

/* ==========================================================
   COLUNAS - COMPETIDORES
   ========================================================== */
.col-numero {
    width: 28px;
    text-align: center;
}

.col-cavalo {
    width: 145px;
}

.col-joquei {
    width: 200px;
}

.col-treinador {
    width: 120px;
}

.col-ano {
    width: 38px;
    text-align: center;
}

.col-sexo {
    width: 28px;
    text-align: center;
}


/* ==========================================================
   LARGURA DAS COLUNAS - GRADE RETROSPECTOS
   ========================================================== */

.col-data {
    width: 100px;
    /* Aumentada para exibir a data sem cortes */
}

.col-pos {
    width: 35px;
    /* Reduzida para o tamanho ideal de "4ºL" */
}

.col-raia-ret {
    width: 60px;
    /* Reduzida (ex: GP1000) */
}

.col-crono {
    width: 60px;
    /* Reduzida (ex: 56s81) */
}

.col-joquei-ret {
    /* Nova classe exclusiva para o retrospecto */
    width: 110px;
    /* Aumentada para o nome do Jóquei */
}

.col-corpo {
    width: 65px;
    /* Largura ideal para "2 1/4" ou "CABEÇ" */
}

.col-er {
    width: 35px;
    /* Reduzida para "2º", "8º" */
}

.col-treinador-ret {
    /* Nova classe exclusiva para o retrospecto */
    width: 110px;
    /* Aumentada para o nome do Treinador */
}

.col-rateio {
    width: 55px;
}

.col-prova-ret {
    width: auto;
    /* Ocupa o restante do espaço */
}

/* Container da linha divisória do Cavalo */
.linha-cavalo td {
    height: 28px;
    /* Um pouco mais alta para dar respiro */
    background-color: #f1f5f9;
    /* Um tom cinza-claro moderno e suave */
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding-left: 8px !important;
    /* Afasta o texto da borda esquerda */
}

/* O texto do nome do Cavalo com estilo atual */
.nome-cavalo-titulo {
    font-size: 11px;
    /* Fonte um pouco menor, mas extremamente legível */
    font-weight: 600;
    /* Peso semipesado (médio), muito elegante[cite: 6] */
    color: #334155;
    /* Azul escuro acinzentado (menos agressivo que o preto puro) */
    letter-spacing: 0.08em;
    /* Espaçamento sutil entre as letras (padrão de dashboards) */
    text-transform: uppercase;
    /* Garante que sempre fique em caixa alta */
}

/* ==========================================================
   PAINEL DE FERRAMENTAS
   ========================================================== */

#painel-ferramentas {
    width: 420px;
    height: 240px;
    margin-top: 8px;
    border: 1px solid #c8c8c8;
    background: white;
}

#barra-ferramentas {
    display: flex;
    height: 34px;
    border-bottom: 1px solid #d8d8d8;
}

#barra-ferramentas button {
    flex: 1;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, .25);
    background: #2f4b67;
    color: white;
    font-size: 11px;
    cursor: pointer;
    transition: background .15s;
}

#barra-ferramentas button:last-child {
    border-right: none;
}

#barra-ferramentas button:hover {
    background: #41617f;
}

/* ==========================================================
    BOTÃO EM DESTAQUE
   ========================================================== */

#barra-ferramentas .aba-ativa {
    background: #38556f;
    color: white;
    font-weight: 700;
}

#conteudo-ferramentas {
    display: flex;
    height: calc(100% - 34px);
}

.grupo {
    flex: 1;
    padding: 6px;
}

.grupo ul {
    width: 58px;
    list-style: none;
    font-size: 11px;
    border: 1px solid #d8d8d8;
    height: 185px;
    overflow-y: auto;
}

.grupo li {
    padding: 3px 6px;
    cursor: default;
    user-select: none;
}

.grupo li:hover {
    background: #dce8f5;
}

.grupo li.selecionado {
    background: #2f6db3;
    color: white;
}

.grupo li.intervalo {
    background: #6e9ed4;
    color: white;
}

.grupo button {
    width: 100%;
    height: 26px;
    margin-bottom: 6px;
    font-size: 11px;
}

/* ==========================================================
   LADO ESQUERDO
   ========================================================== */

#lado-esquerdo {
    width: 420px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#painel-pareos tbody {
    display: block;
    height: 245px;
    overflow-y: auto;
}

#painel-pareos thead,
#painel-pareos tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* ==========================================================
   LINHAS DE PROGRAMAS
   ========================================================== */

.linha-programa {
    cursor: pointer;
}

.linha-programa:hover {
    background: #e8f2fb;
}

/* ==========================================================
   CABEÇALHO DOS PÁREOS
   ========================================================== */

.linha-cabecalho {
    background: #455a64;
    color: #ffffff;
    font-weight: 600;
}

.linha-cabecalho td {
    border-bottom: 1px solid #34495e;
}

/* ==========================================================
   TRAVA RÍGIDA PARA O MODO CAVALOS (Estilo Java Swing)
   ========================================================== */

/* Força a tabela a obedecer rigidamente aos pixels do JavaScript */
.modo-cavalos {
    table-layout: fixed !important;
    width: 100% !important;
}

/* Se o nome for maior que a coluna, o texto excedente simplesmente 
   NÃO APARECE (corte seco), eliminando o scroll horizontal de vez */
.modo-cavalos td,
.modo-cavalos th {
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

/* Força as colunas internas a respeitarem os tamanhos da trava no modo cavalos */
.modo-cavalos .col-numero {
    width: 30px !important;
}

.modo-cavalos .col-cavalo {
    width: 155px !important;
}

.modo-cavalos .col-joquei {
    width: 85px !important;
}

.modo-cavalos .col-treinador {
    width: 85px !important;
}

.modo-cavalos .col-ano {
    width: 35px !important;
}

.modo-cavalos .col-sexo {
    width: 28px !important;
}


/* ==========================================================
   CORES DO RADAR
   ========================================================== */
/* ==========================================================
   CORES DO RADAR (Padrão Original Intensificado)
   ========================================================== */

.linha-azul td {
    background-color: #4da1ff !important;
    /* Azul mais vivo */
}

.linha-verde td {
    background-color: #5cd65c !important;
    /* Verde mais aceso */
}

.linha-amarela td {
    background-color: #ffcc00 !important;
    /* Amarelo ouro puro */
}

.linha-laranja td {
    background-color: #ff941a !important;
    /* Laranja bem vibrante */
}

.linha-marrom td {
    background-color: #ba8d5d !important;
    /* Marrom mais encorpado */
}

.linha-vermelha td {
    background-color: #ff5c5c !important;
    /* Vermelho alerta vivo */
}

/* ==========================================================
   LARGURA DAS COLUNAS - MESMO PÁREO (Ajustado)
   ========================================================== */
#cabecalho-mesmo-pareo .col-mp-col {
    width: 36px;
    text-align: center;
}

#cabecalho-mesmo-pareo .col-mp-cavalo {
    width: 150px;
}

#cabecalho-mesmo-pareo .col-mp-crono {
    width: 80px;
}

#cabecalho-mesmo-pareo .col-mp-joquei {
    width: 105px;
}

#cabecalho-mesmo-pareo .col-mp-corpo {
    width: 45px;
}

#cabecalho-mesmo-pareo .col-mp-er {
    width: 30px;
    text-align: center;
}

#cabecalho-mesmo-pareo .col-mp-treinador {
    width: 120px;
}

#cabecalho-mesmo-pareo .col-mp-rateio {
    width: 45px;
}

/* Garante que a última coluna ("Prova") ocupe todo o restante da página */
#cabecalho-mesmo-pareo .col-mp-prova {
    width: auto !important;
}

/* ==========================================================
   AJUSTE DE PREENCHIMENTO ATÉ A BORDA
   ========================================================== */
#painel-retrospectos table {
    width: 100% !important;
    table-layout: fixed;
}

#cabecalho-mesmo-pareo .col-mp-prova,
#corpo-retrospectos td:nth-child(9) {
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}