#fullscreen-toggle {
     cursor: pointer;
 }

 .disabled {
     pointer-events: none;
     opacity: 0.2;
 }

 .select2-container--default .select2-selection--single {
     background-color: #fff !important;
 }

 .bell {
     display: block;
     width: 100%;
     height: 100%;
     font-size: 20px;
     color: #fff;
     -webkit-animation: ring 4s .7s ease-in-out infinite;
     -webkit-transform-origin: 50% 4px;
     -moz-animation: ring 4s .7s ease-in-out infinite;
     -moz-transform-origin: 50% 4px;
     animation: ring 4s .7s ease-in-out infinite;
     transform-origin: 50% 4px;
 }

 @-webkit-keyframes ring {
     0% {
         -webkit-transform: rotateZ(0);
     }

     1% {
         -webkit-transform: rotateZ(30deg);
     }

     3% {
         -webkit-transform: rotateZ(-28deg);
     }

     5% {
         -webkit-transform: rotateZ(34deg);
     }

     7% {
         -webkit-transform: rotateZ(-32deg);
     }

     9% {
         -webkit-transform: rotateZ(30deg);
     }

     11% {
         -webkit-transform: rotateZ(-28deg);
     }

     13% {
         -webkit-transform: rotateZ(26deg);
     }

     15% {
         -webkit-transform: rotateZ(-24deg);
     }

     17% {
         -webkit-transform: rotateZ(22deg);
     }

     19% {
         -webkit-transform: rotateZ(-20deg);
     }

     21% {
         -webkit-transform: rotateZ(18deg);
     }

     23% {
         -webkit-transform: rotateZ(-16deg);
     }

     25% {
         -webkit-transform: rotateZ(14deg);
     }

     27% {
         -webkit-transform: rotateZ(-12deg);
     }

     29% {
         -webkit-transform: rotateZ(10deg);
     }

     31% {
         -webkit-transform: rotateZ(-8deg);
     }

     33% {
         -webkit-transform: rotateZ(6deg);
     }

     35% {
         -webkit-transform: rotateZ(-4deg);
     }

     37% {
         -webkit-transform: rotateZ(2deg);
     }

     39% {
         -webkit-transform: rotateZ(-1deg);
     }

     41% {
         -webkit-transform: rotateZ(1deg);
     }

     43% {
         -webkit-transform: rotateZ(0);
     }

     100% {
         -webkit-transform: rotateZ(0);
     }
 }

 @-moz-keyframes ring {
     0% {
         -moz-transform: rotate(0);
     }

     1% {
         -moz-transform: rotate(30deg);
     }

     3% {
         -moz-transform: rotate(-28deg);
     }

     5% {
         -moz-transform: rotate(34deg);
     }

     7% {
         -moz-transform: rotate(-32deg);
     }

     9% {
         -moz-transform: rotate(30deg);
     }

     11% {
         -moz-transform: rotate(-28deg);
     }

     13% {
         -moz-transform: rotate(26deg);
     }

     15% {
         -moz-transform: rotate(-24deg);
     }

     17% {
         -moz-transform: rotate(22deg);
     }

     19% {
         -moz-transform: rotate(-20deg);
     }

     21% {
         -moz-transform: rotate(18deg);
     }

     23% {
         -moz-transform: rotate(-16deg);
     }

     25% {
         -moz-transform: rotate(14deg);
     }

     27% {
         -moz-transform: rotate(-12deg);
     }

     29% {
         -moz-transform: rotate(10deg);
     }

     31% {
         -moz-transform: rotate(-8deg);
     }

     33% {
         -moz-transform: rotate(6deg);
     }

     35% {
         -moz-transform: rotate(-4deg);
     }

     37% {
         -moz-transform: rotate(2deg);
     }

     39% {
         -moz-transform: rotate(-1deg);
     }

     41% {
         -moz-transform: rotate(1deg);
     }

     43% {
         -moz-transform: rotate(0);
     }

     100% {
         -moz-transform: rotate(0);
     }
 }

 @keyframes ring {
     0% {
         transform: rotate(0);
     }

     1% {
         transform: rotate(30deg);
     }

     3% {
         transform: rotate(-28deg);
     }

     5% {
         transform: rotate(34deg);
     }

     7% {
         transform: rotate(-32deg);
     }

     9% {
         transform: rotate(30deg);
     }

     11% {
         transform: rotate(-28deg);
     }

     13% {
         transform: rotate(26deg);
     }

     15% {
         transform: rotate(-24deg);
     }

     17% {
         transform: rotate(22deg);
     }

     19% {
         transform: rotate(-20deg);
     }

     21% {
         transform: rotate(18deg);
     }

     23% {
         transform: rotate(-16deg);
     }

     25% {
         transform: rotate(14deg);
     }

     27% {
         transform: rotate(-12deg);
     }

     29% {
         transform: rotate(10deg);
     }

     31% {
         transform: rotate(-8deg);
     }

     33% {
         transform: rotate(6deg);
     }

     35% {
         transform: rotate(-4deg);
     }

     37% {
         transform: rotate(2deg);
     }

     39% {
         transform: rotate(-1deg);
     }

     41% {
         transform: rotate(1deg);
     }

     43% {
         transform: rotate(0);
     }

     100% {
         transform: rotate(0);
     }
 }

 @media print {
     #no-print {
         visibility: hidden;
     }
 }

 .clearfix:before,
 .clearfix:after {
     content: " ";
     display: table;
 }

 .clearfix:after {
     clear: both;
 }

 .select2-result-repository {
     padding-top: 4px;
     padding-bottom: 3px
 }

 .select2-result-repository__avatar {
     float: left;
     width: 60px;
     margin-right: 10px
 }

 .select2-result-repository__avatar img {
     width: 100%;
     height: auto;
     border-radius: 2px
 }

 .select2-result-repository__meta {
     margin-left: 70px
 }

 .select2-result-repository__meta2 {
     margin-left: 0px
 }

 .select2-result-repository__titulo {
     color: black;
     font-weight: 700;
     word-wrap: break-word;
     line-height: 1.1;
     margin-bottom: 4px;
     font-size: 16px;
 }

 .select2-result-repository__campo1,
 .select2-result-repository__campo2,
 .select2-result-repository__campo3,
 .select2-result-repository__campo4,
 .select2-result-repository__campo5 {
     margin-right: 1em
 }

 .select2-result-repository__campo1,
 .select2-result-repository__campo2,
 .select2-result-repository__campo3,
 .select2-result-repository__campo4,
 .select2-result-repository__campo5,
 .select2-result-repository__campo6 {
     display: inline-block;
     font-size: 13px
 }

 .select2-result-repository__campo1 {
     color: #039403;
 }

 .select2-result-repository__campo2 {
     color: #ff4700;
 }

 .select2-result-repository__campo3,
 .select2-result-repository__campo4,
 .select2-result-repository__campo5,
 .select2-result-repository__campo6 {
     color: #3c8dbc;
 }

 .select2-result-repository__descricao {
     font-size: 13px;
     color: #777;
     margin-top: 4px
 }

 .select2-results__option--highlighted .select2-result-repository__titulo {
     color: white
 }

 .select2-results__option--highlighted .select2-result-repository__campo1,
 .select2-results__option--highlighted .select2-result-repository__campo2,
 .select2-results__option--highlighted .select2-result-repository__descricao,
 .select2-results__option--highlighted .select2-result-repository__campo3,
 .select2-results__option--highlighted .select2-result-repository__campo4,
 .select2-results__option--highlighted .select2-result-repository__campo5,
 .select2-results__option--highlighted .select2-result-repository__campo6 {
     color: #c6dcef
 }

 .select2-results__options {
     overflow-y: auto;
 }


 /*STYLE CRONOMETRO*/

 #timer-container {
     justify-content: center;
     align-items: center;
 }

 .cronometro-container {
     text-align: center;
     margin: 0 20px;
     transition: all 0.3s ease-in-out;
 }

 .cronometro {
     font-weight: bold;
     color: #343a40;
     border-radius: 70px;
     padding: 20px 0px 20px 0px;
     background: #fff;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     animation: pulse 1.5s infinite;
 }

 .btn-custom {
     padding: 10px 20px;
     margin: 10px;
     border-radius: 50px;
     background-color: #dd4b39;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     border: 0px;
     color: white;
 }

 .title {
     margin-bottom: 10px;
     color: #343a40;
 }

 .segundos-cronometro {
     font-size: 80px;
 }

 .tempo-aviso {
     font-size: 35px;
 }

 @keyframes pulse {
     0% {
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     50% {
         box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
     }

     100% {
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }
 }

 /*BOTÃO RODADAS FECHADAS*/

 /* Aplica a rolagem vertical com scroll na esquerda */
 .dropdown-menu.scroll-esquerda {
     max-height: 40vh;
     overflow-y: auto;
     direction: rtl;
     /* Scroll do lado esquerdo */
     text-align: left;
     /* Mantém o texto corretamente alinhado */
 }

 /* Estiliza a barra de rolagem para navegadores Webkit */
 .dropdown-menu.scroll-esquerda::-webkit-scrollbar {
     width: 6px;
     background-color: transparent;
 }

 .dropdown-menu.scroll-esquerda::-webkit-scrollbar-thumb {
     background-color: #888;
     border-radius: 3px;
 }

 .dropdown-menu.scroll-esquerda::-webkit-scrollbar-thumb:hover {
     background-color: #555;
 }

 /* Remove aquela borda/efeito feio no hover do dropdown de jogos */
.dropdown-menu-clean .dropdown-item {
    border-top: none !important;
    box-shadow: none !important;
}

.dropdown-menu-clean .dropdown-item:hover,
.dropdown-menu-clean .dropdown-item:focus,
.dropdown-menu-clean .dropdown-item:active {
    border-top: none !important;
    box-shadow: none !important;
    outline: none !important;
}

 /*STYLE EXIBIÇÃO TELA DE JOGOS*/
 .table-compact {
     font-size: 12px;
     margin-bottom: 5px;
     width: 100%;
 }

 .table-compact thead,
 .table-compact tbody {
     width: 100%;
     display: table;
 }

 .table-compact th,
 .table-compact td {
     padding: 4px 8px;
 }

 .table-compact tr {
     height: auto;
     line-height: 1;
 }

 .border-right {
     border-right: 1px solid #ccc;
 }

 /*STYLE RODADAS - CARD*/
 .card {
     position: relative;
     z-index: 1;
     /* Contexto padrão */
 }

 .card-tools {
     position: relative;
     right: 5px;
     z-index: 2;
     /* Apenas acima do ribbon */
 }

 .ribbon-wrapper {
     z-index: 1;
     /* Manter abaixo do card-tools */
 }


 /*STYLE CARD RODADAS*/
 .highlight-warning {
     border: 3px solid #ffc107;
     box-shadow: 0 0 15px rgba(255, 193, 7, 0.8);
     transition: border 0.5s, box-shadow 0.5s;
 }

 .card-body {
     overflow: hidden !important;
     /* Remove barras de rolagem */
 }

 .card.card-maximized {
     height: 100vh !important;
     /* O card ocupa toda a altura da janela */
     overflow: hidden !important;
     /* Garante que não haja barras de rolagem no card maximizado */
 }

 .card.card-maximized .card-body {
     max-height: none !important;
     /* Permite que o conteúdo cresça sem limite */
     overflow: hidden !important;
     /* Nenhuma barra de rolagem será exibida */
 }

 /* Estilo para a barra de pesquisa */
 #searchRow {
     margin-top: 15px;
     animation: fadeIn 0.3s ease-in-out;
 }

 /*Style Summernote Configuração*/
 #ajudaTextarea {
     resize: none;
 }

 #editarAjudaBtn {
     z-index: 10;
 }

 .mailbox-attachments {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     justify-content: space-between;
 }

 .mailbox-attachments li {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 45%;
     border: 1px solid #ddd;
     border-radius: 5px;
     background-color: #f9f9f9;
     padding: 10px;
 }

 .mailbox-attachment-icon {
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #f4f4f4;
     border-bottom: 1px solid #ddd;
     width: 100%;
     height: 150px;
     overflow: hidden;
     border-radius: 5px 5px 0 0;
 }

 .mailbox-attachment-icon img {
     max-width: 100%;
     max-height: 100%;
     object-fit: cover;
 }

 .mailbox-attachment-info {
     padding: 10px;
     width: 100%;
 }

 .mailbox-attachment-name {
     display: block;
     color: #333;
     font-weight: bold;
     text-decoration: none;
 }

 .mailbox-attachment-size {
     font-size: 12px;
     color: #666;
     margin-top: 10px;
 }


 /*STYLE EDITAR TIME*/

 /* Transição suave na entrada da linha */
 .fade-in {
     opacity: 0;
     animation: fadeIn 0.5s ease-in forwards;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(-10px);
     }

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

 /* Estilização da tabela */
 .table-hover tbody tr:hover {
     background-color: #f8f9fa;
 }

 .table-bordered th,
 .table-bordered td {
     vertical-align: middle !important;
 }


 /*botão upload inválido*/
 .is-invalid.btn {
     border: 1px solid #ff1b31 !important;
     box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, .25);
 }

 /*Notificações*/

 .marcar-lida-icon:hover {
     color: #28a745 !important;
     /* text-success */
 }

 .marcar-todas:hover {
     background-color: #28a745 !important;
     /* text-success */
     color: white !important;
     /* text-success */
 }

 /*Badge Atalho*/

 .badge-atalho {
     font-size: 10px;
     padding: 2px 4px;
     vertical-align: middle;
     margin-left: 4px;
 }

 /*Header Nome Competição*/
 .header-content-wrapper {
     margin-bottom: 20px;
     padding: 20px 30px;
     z-index: 999999;
 }

 /* No desktop: mantém inline */
 @media (min-width: 576px) {
     .info-bloco {
         display: inline !important;
     }
 }



 /*Cards Navegação Index*/
 /* ====== LAYOUT GERAL ====== */
 .dashboard-wrapper {
     /* se quiser pode até zerar ou diminuir isso */
     padding-bottom: 0;
 }

 /* Header: tira o margin-bottom, deixa só a sombra */
 .header-index {
     box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
     padding: 16px 10px 22px 10px;
     margin-bottom: 0;
     /* <-- ajustado */
 }

 .content-wrapper.dashboard-wrapper .content {
     padding-top: 15px;
 }

 .header-index .event-name {
     font-size: 30px;
     font-weight: 700;
     letter-spacing: .5px;
     text-transform: uppercase;
 }

 .header-index .event-etapa {
     font-size: 14px;
     letter-spacing: .5px;
     text-transform: uppercase;
 }

 @media (max-width: 575.98px) {
     .header-index img {
         width: 72px !important;
         margin-right: 10px !important;
     }

     .header-index .event-name {
         font-size: 22px;
     }

     .header-index .event-etapa {
         font-size: 12px;
     }
 }

 /* ====== GRID DE NAVEGAÇÃO ====== */

 .nav-card-col {
     margin-bottom: 16px;
 }

 /* ====== CARD MODERNO (COR PADRÃO #343a40) ====== */
 .nav-card {
     position: relative;
     border-radius: 8px;
     padding: 10px 12px;
     background: #343a40;
     border: 1px solid #454d55;
     box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
     color: #e5e7eb;
     text-decoration: none !important;
     overflow: hidden;
     transition:
         transform .18s ease-out,
         box-shadow .18s ease-out,
         border-color .18s ease-out,
         background .18s ease-out;
     min-height: 100px;

     /* NOVO: grid fixo */
     display: grid;
     grid-template-columns: 64px 1fr;
     grid-template-areas:
         "icon body"
         "cta  cta";
     align-items: center;
     column-gap: 14px;
 }

 /* Camada de degradê para o hover */
 .nav-card::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(23, 162, 184, .22), rgba(40, 167, 69, .18));
     opacity: 0;
     pointer-events: none;
     transition: opacity .2s ease-out;
 }

 /* Garante que conteúdo fique acima do degradê */
 .nav-card>* {
     position: relative;
     z-index: 1;
 }

 .nav-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 24px rgba(0, 0, 0, .55);
     border-color: #17a2b8;
     background: #3f474f;
     color: #f9fafb;
 }

 .nav-card:hover::before {
     opacity: 1;
     /* Ativa o degradê suave no hover */
 }

 /* Qualquer texto dentro do card fica branco no hover */
 .nav-card:hover .nav-card-title,
 .nav-card:hover .nav-card-subtitle,
 .nav-card:hover .nav-card-meta span,
 .nav-card:hover .nav-card-meta i {
     color: #ffffff !important;
 }

 .nav-card.disabled,
 .nav-card.disabled:hover {
     opacity: .55;
     /* um pouco mais visível que antes */
     cursor: not-allowed;
     transform: none;
     box-shadow: none;
     border-color: #454d55;
     background: #343a40;
 }

 .nav-card.disabled::before {
     opacity: 0;
     /* sem degradê em card desativado */
 }

 .nav-card.disabled a,
 .nav-card.disabled span,
 .nav-card.disabled i {
     pointer-events: none !important;
 }

 .nav-card-icon {
     grid-area: icon;
     width: 64px;
     min-width: 64px;
     height: 64px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 26px;
     background: rgba(0, 0, 0, .25);
 }

 .nav-card-body {
     grid-area: body;
     display: flex;
     flex-direction: column;
     justify-content: center;
     min-width: 0;
 }

 .nav-card-title {
     font-size: 20px;
     font-weight: 700;
     text-transform: uppercase;
     margin-bottom: 4px;
     letter-spacing: .04em;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .nav-card-subtitle {
     font-size: 10px;
     text-transform: uppercase;
     letter-spacing: .12em;
     color: #ced4da;
     margin-bottom: 1px;
 }

 .nav-card-meta {
     font-size: 12px;
     color: #f8f9fa;
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
 }

 .nav-card-meta span {
     display: inline-flex;
     align-items: center;
     gap: 4px;
 }

 .nav-card-meta i {
     font-size: 11px;
     opacity: .85;
 }

 /* Badges de contagem / info */
 .nav-badge {
     display: inline-flex;
     align-items: center;
     border-radius: 999px;
     padding: 2px 8px;
     font-size: 10px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: .08em;
     background: #23272b;
     border: 1px solid #495057;
     color: #e5e7eb;
 }

 .nav-badge-green {
     border-color: #28a745;
     color: #c3e6cb;
 }

 .nav-badge-blue {
     border-color: #17a2b8;
     color: #bee5eb;
 }

 .nav-badge-amber {
     border-color: #ffc107;
     color: #ffe8a1;
 }

 .nav-badge-slate {
     border-color: #6c757d;
     color: #f8f9fa;
 }

 /* Remove sublinhado do link no hover em todo o card */
 .nav-card-link,
 .nav-card-link:hover {
     text-decoration: none !important;
     color: inherit;
     display: block;
     width: 100%;
     height: 100%;
 }

 /* Ajuste para colunas disabled (do PHP) */
 .nav-card-col.disabled .nav-card {
     opacity: .55;
     /* mesmo valor dos cards desabilitados diretos */
     cursor: not-allowed;
     transform: none;
     box-shadow: none;
     border-color: #454d55;
     background: #343a40;
 }

 .nav-card-col.disabled .nav-card * {
     pointer-events: none !important;
 }

 /* --- BOTÕES DA COLUNA DIREITA ----------------------- */
 .nav-card-cta {
     grid-area: cta;
     margin-top: 10px;
     width: 100%;
     display: flex;
     flex-direction: row;
     /* agora lado a lado */
     gap: 8px;
 }

 /* Botões padrão (quadrados) */
 .nav-btn {
     width: 100%;
     text-align: center;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: .45rem .75rem;
     font-size: .78rem;
     font-weight: 600;
     border-radius: .35rem;
     text-transform: uppercase;
     letter-spacing: .03em;
     gap: .35rem;
     text-decoration: none !important;
     transition: all .18s ease-in-out;
     transform: translateY(0);
     opacity: 0.95;
     flex: 1;
     /* cada um pega 50% do espaço */
     text-align: center;
 }

 /* Ícone */
 .nav-btn i {
     font-size: .9rem;
 }

 /* ABRIR = */
 .nav-btn-open {
     background: #007bff;
     color: #fff !important;
     border: 1px solid #007bff;
 }

 .nav-btn-open:hover {
     background: #0069d9;
     border-color: #0062cc;
 }

 .nav-btn-tv {
     background: #ffc107;
     color: #212529 !important;
     border: 1px solid #ffca2c;
 }

 .nav-btn-tv:hover {
     background: #e0a800;
     border-color: #d39e00;
 }

 /* ===== HOVER UNIVERSAL PARA OS BOTÕES ===== */

 .nav-btn {
     transition: all .18s ease-in-out;
     transform: translateY(0);
     opacity: 0.95;
 }

 .nav-btn:hover {
     opacity: 1;
     transform: translateY(-2px);
     box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
 }

 /*====== PILLS NAVS ABAS =====*/
 /* Grupo das pills */
 .tabs-pill-group {
     display: inline-flex;
     flex-wrap: wrap;
     gap: 10px;
 }

 /* Estilo base das pills */
 .tabs-pill.nav-link {
     padding: 8px 18px;
     border-radius: 25px;
     border: 2px solid #007bff;
     background: #ffffff;
     color: #007bff !important;
     font-weight: bold;
     text-decoration: none;
     transition: 0.25s ease;
     font-size: 13px;
 }

 .tabs-pill-group .nav-link.tabs-pill {
     border-radius: 999px;
     padding: 6px 16px;
     margin: 0 3px 6px;
     border: 2px solid transparent;
     font-weight: bold;
     transition: all .15s ease-in-out;
 }

 .tabs-pill-group .nav-link.tabs-pill:hover:not(.active) {
     filter: brightness(0.92);
 }

 /* Hover */
 .tabs-pill.nav-link:hover {
     background: #e6f0ff;
     /* azul bem clarinho */
     color: #0056c7 !important;
 }

 /* Aba ATIVA */
 .tabs-pill.nav-link.active {
     background: #007bff !important;
     color: #ffffff !important;
     border-color: #0056c7 !important;
     box-shadow: 0 0 8px #06070780;
 }

 /* Texto dos botões de rodada em negrito */
 .tabs-pill small,
 .tabs-pill b,
 .tabs-pill strong {
     font-weight: 700;
 }

 /* Remove a linha inferior padrão do nav-tabs */
 .nav-tabs {
     border: none !important;
 }

 /* Mobile */
 @media (max-width: 768px) {
     .tabs-pill-group {
         justify-content: center;
     }
 }


 /* Remove qualquer comportamento de TAB/PILL do botão voltar */
 .btn-voltar,
 .btn-voltar:focus,
 .btn-voltar:hover {
     border: none !important;
     background: transparent !important;
     box-shadow: none !important;
 }

 /* Mantém o hover apenas no texto e ícone */
 .btn-voltar:hover i,
 .btn-voltar:hover span,
 .btn-voltar:hover {
     color: #007bff !important;
     /* Ou a cor que preferir */
 }

 /* Modal rodadas fechadas – visual moderno */
 .modal-rodadas-fechadas {
     border-radius: 12px;
     overflow: hidden;
 }

 .modal-rodadas-fechadas .modal-header {
     background: linear-gradient(135deg, #007bff, #00c6ff);
     color: #fff;
     border-bottom: none;
     padding: 12px 16px;
 }

 .modal-rodadas-fechadas .modal-body {
     padding: 12px 16px 10px;
     max-height: 60vh;
     overflow-y: auto;
     background: #f8f9fa;
 }

 .modal-rodadas-fechadas .modal-footer {
     border-top: none;
     background: #f8f9fa;
     padding: 8px 16px;
 }

 /* Itens da lista – cartãozinho */
 .lista-rodadas-fechadas .list-group-item {
     border: none;
     border-radius: 8px;
     margin-bottom: 6px;
     background: #ffffff;
     box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
     transition: all .15s ease-in-out;
 }

 .lista-rodadas-fechadas .list-group-item:hover {
     transform: translateY(-1px);
     box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
     background: #eef9f1;
 }

 .lista-rodadas-fechadas .badge-success {
     background-color: #28a745 !important;
 }

 /*NOVO HEADER DOS MODAIS MODERNO*/

 .modal-moderno .modal-header {
     background: linear-gradient(135deg, #007bff, #00c6ff);
     color: #fff;
     border-bottom: none;
     padding: 12px 16px;
 }

 /* ===========================
   MODAIS MODERNOS (CORES)
   =========================== */

 /* Azul – igual ao modal-moderno atual, só que com classe própria */
 .modal-moderno-azul .modal-header {
     background: linear-gradient(135deg, #007bff, #00c6ff);
     color: #fff;
     border-bottom: none;
     padding: 12px 16px;
 }

 /* Verde – para jogos FECHADOS, por exemplo */
 .modal-moderno-verde .modal-header {
     background: linear-gradient(135deg, #28a745, #00c851);
     color: #fff;
     border-bottom: none;
     padding: 12px 16px;
 }

 /* Laranja/Amarelo – para avisos, W.O., pendente, etc */
 .modal-moderno-laranja .modal-header {
     background: linear-gradient(135deg, #ff9800, #ffc107);
     color: #fff;
     border-bottom: none;
     padding: 12px 16px;
 }

 .modal-moderno-vermelho .modal-header {
     background: linear-gradient(135deg, #dc3545, #ff6b6b);
     color: #fff;
     border-bottom: none;
     padding: 12px 16px;
 }

 /* ===========================
   MESA MODERNAS (JOGOS)
   =========================== */

 .mesa-moderno-azul {
     background: linear-gradient(135deg, #007bff, #00c6ff);
     color: #fff;
     border-bottom: none;
 }

 .mesa-moderno-verde {
     background: linear-gradient(135deg, #28a745, #06f064);
     color: #fff;
     border-bottom: none;
 }

 .mesa-moderno-laranja {
     background: linear-gradient(135deg, #ff9800, #ffc107);
     color: #212529;
     /* texto mais escuro pra contraste */
     border-bottom: none;
 }

 .mesa-moderno-vermelho {
     background: linear-gradient(135deg, #dc3545, #ff6b6b);
     color: #fff;
     border-bottom: none;
 }

 /* ===========================
   CARDS MODERNOS (JOGOS)
   =========================== */

 .card-moderno-azul .card-header {
     background: linear-gradient(135deg, #007bff, #00c6ff);
     color: #fff;
     border-bottom: none;
 }

 .card-moderno-verde .card-header {
     background: linear-gradient(135deg, #28a745, #06f064);
     color: #fff;
     border-bottom: none;
 }

 .card-moderno-laranja .card-header {
     background: linear-gradient(135deg, #ff9800, #ffc107);
     color: #212529;
     /* texto mais escuro pra contraste */
     border-bottom: none;
 }

 .card-moderno-vermelho .card-header {
     background: linear-gradient(135deg, #dc3545, #ff6b6b);
     color: #fff;
     border-bottom: none;
 }

 /* opcional: reforçar borda/sombra quando quiser deixar mais “moderno” */
 .card-moderno-azul,
 .card-moderno-verde,
 .card-moderno-laranja,
 .card-moderno-vermelho {
     border-radius: 6px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
     border: none;
 }

 /* RESET para impedir interferência do AdminLTE */
 .btn-resultado-modern,
 .btn-resultado-modern:hover,
 .btn-resultado-modern:focus,
 .btn-resultado-modern:active {
     border: none !important;
     box-shadow: none !important;
 }

 /* ESTILO NORMAL */
 .btn-resultado-modern {
     background: #ffffff !important;
     color: #007bff !important;
     border-radius: 999px !important;
     padding: 6px 18px !important;
     font-size: 12px !important;
     font-weight: 700 !important;
     text-transform: uppercase;
     letter-spacing: 0.4px;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     transition: 0.20s ease-in-out;
     box-shadow: 0 2px 6px rgba(0, 123, 255, 0.25) !important;
 }

 .btn-resultado-modern i {
     color: #007bff !important;
 }

 /* HOVER — FUNDO AZUL */
 .btn-resultado-modern:hover {
     background: #007bff !important;
     color: #fff !important;
     transform: translateY(-2px);
     box-shadow: 0 4px 14px rgba(0, 123, 255, 0.45) !important;
 }

 .btn-resultado-modern:hover i {
     color: #fff !important;
 }

 /* RESET */
 .btn-ver-modern,
 .btn-ver-modern:hover,
 .btn-ver-modern:focus,
 .btn-ver-modern:active {
     border: none !important;
     box-shadow: none !important;
 }

 /* ESTILO NORMAL */
 .btn-ver-modern {
     background: #ffffff !important;
     color: #28a745 !important;
     border-radius: 999px !important;
     padding: 6px 18px !important;
     font-size: 12px !important;
     font-weight: 700 !important;
     text-transform: uppercase;
     letter-spacing: 0.4px;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     transition: 0.20s ease-in-out;
     box-shadow: 0 2px 6px rgba(40, 167, 69, 0.25) !important;
 }

 .btn-ver-modern i {
     color: #28a745 !important;
 }

 /* HOVER — FUNDO VERDE */
 .btn-ver-modern:hover {
     background: #28a745 !important;
     color: #fff !important;
     transform: translateY(-2px);
     box-shadow: 0 4px 14px rgba(40, 167, 69, 0.45) !important;
 }

 .btn-ver-modern:hover i {
     color: #fff !important;
 }

 /*BACKGROUND BLACK 2*/

 .bg-black2 {
     background-color: #252b30 !important;
     color: #fff;
 }

 /* Barra do topo da rodada */
 .rodada-header-bar {
     display: flex;
     flex-wrap: wrap;
     align-items: stretch;
     gap: 6px;
 }

 /* Grupo de botões (esquerda) */
 .rodada-header-buttons {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 4px;
 }

 /* Grupo de cards (direita) */
 .rodada-header-cards {
     display: flex;
     flex-wrap: wrap;
     align-items: stretch;
     gap: 6px;
     margin-left: auto;
     /* empurra os cards pro lado direito */
 }

 /* Cada card se ajusta ao conteúdo, sem largura fixa */
 .rodada-header-card {
     flex: 0 0 auto;
 }

 /* Botão interno dos cards – todos com bg-black2 */
 .rodada-header-card>.btn {
     width: 100%;
     height: 100%;
     white-space: normal;
     line-height: 1.2;
 }

 /* Card da busca pode ser menor se quiser */
 .rodada-header-card-small {
     flex: 0 0 auto;
 }

 /*QUEBRA LINHA COM A CLASSE DEFINIDA*/
 .quebralinha {
     display: block;
     width: 100%;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 /* ===========================
    BADGE DA MESA NO CARD
   =========================== */
 /* Mesa badge no CARD*/
 .card-mesa-badge {
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;

     width: 72px;
     min-width: 72px;

     border-radius: 12px;
     padding: 1px;

     font-weight: 900;
     line-height: 1.05;

     color: #111 !important;

     background: rgba(255, 255, 255, 0.92);
     border: 1px solid rgba(0, 0, 0, 0.15);

     box-shadow:
         0 2px 4px rgba(0, 0, 0, .12),
         inset 0 1px 2px rgba(255, 255, 255, 0.55);

     backdrop-filter: blur(3px);
 }

 .card-mesa-badge .card-mesa-label {
     font-size: 8px;
     /* era .50rem */
     text-transform: uppercase;
     opacity: .55;
     letter-spacing: 0.5px;
 }

 .card-mesa-badge .card-mesa-num {
     font-size: 32px;
     /* era 2rem */
     line-height: 1;
 }

 /* Aberto (azul, igual card-moderno-azul / bg-primary) */
 .card-mesa-badge.mesa-aberto {
     border-color: rgba(13, 110, 253, 0.55);
     box-shadow:
         0 2px 4px rgba(13, 110, 253, .18),
         inset 0 1px 2px rgba(255, 255, 255, 0.65);
     color: #0d6efd !important;
 }

 /* Fechado (verde, igual card-moderno-verde / bg-success) */
 .card-mesa-badge.mesa-fechado {
     border-color: rgba(25, 135, 84, 0.55);
     box-shadow:
         0 2px 4px rgba(25, 135, 84, .18),
         inset 0 1px 2px rgba(255, 255, 255, 0.65);
     color: #198754 !important;
 }

 /* Pendente / inativo (vermelho, igual card-moderno-vermelho / bg-danger) */
 .card-mesa-badge.mesa-pendente {
     border-color: rgba(220, 53, 69, 0.55);
     box-shadow:
         0 2px 4px rgba(220, 53, 69, .18),
         inset 0 1px 2px rgba(255, 255, 255, 0.65);
     color: #dc3545 !important;
 }

 /* Chapéu (laranja, igual card-moderno-laranja / bg-warning) */
 .card-mesa-badge.mesa-chapeu {
     border-color: rgba(253, 126, 20, 0.65);
     box-shadow:
         0 2px 4px rgba(253, 126, 20, .22),
         inset 0 1px 2px rgba(255, 255, 255, 0.7);
     color: #fd7e14 !important;
 }

 .card-mesa-badge.mesa-chapeu .card-mesa-num i {
     font-size: 30px;
     line-height: 1;
 }

 /* =========================================================
   TELA JOGOS / TV / TELA PÚBLICA
   Usando variáveis:
   --font-base, --font-info, --font-placar, --font-set
   --badge-size, --divcard, --divlinha
========================================================= */

 /* BOTÃO CRONÔMETRO FLUTUANTE */
 #toggleCronometro {
     position: fixed;
     bottom: 65px;
     right: 10px;
     z-index: 9999;
     border-radius: 50%;
     width: 60px;
     height: 60px;
 }

 /* MODAL CRONÔMETRO CUSTOM */
 .modal-dialog-custom {
     position: fixed;
     min-width: 300px;
     min-height: 200px;
     background: #343a40;
     border-radius: 6px;
     box-shadow: 0 0 15px rgba(0, 0, 0, .5);
     overflow: hidden;
     z-index: 1060;
 }

 .modal-header-custom {
     cursor: move;
     padding: .5rem 1rem;
     background: #007bff;
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .modal-fullscreen {
     width: 100% !important;
     height: 100% !important;
     top: 0 !important;
     left: 0 !important;
     position: fixed !important;
     border-radius: 0 !important;
     z-index: 1060;
 }

 .modal-body-custom {
     padding: 1rem;
     height: calc(100% - 50px);
     overflow: hidden !important;
 }

 #customOverlay {
     background: rgba(0, 0, 0, .5);
     position: fixed;
     z-index: 1055;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 /* =========================================================
   LISTAGEM • NORMAL
========================================================= */

 .tv-title {
     display: flex;
     align-items: center;
     gap: .5rem;
     background: rgba(108, 117, 125, .18);
     border: 1px solid rgba(108, 117, 125, .35);
     color: #e6e6e6;
     padding: .5rem .75rem;
     border-radius: 14px;
     margin: .35rem 0 .65rem;
     box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset;
 }

 .rodada-chip {
     display: block;
     text-align: center;
     color: #d5d9dd;
     padding: .28rem .7rem;
     border-radius: 999px;
     font-weight: 800;
     letter-spacing: .2px;
     margin-bottom: var(--divcard, 0.1rem);
     margin-left: auto;
     margin-right: auto;
 }

 /* container da coluna */
 .games-col {
     background: transparent;
     border: none;
     box-shadow: none;
     padding: 0;
     margin-bottom: 1rem;
 }

 .games-list {
     display: flex;
     flex-direction: column;
     gap: .35rem;
 }

 /* CARD DO JOGO */
 .jogo-item {
     display: grid;
     grid-template-columns:
         var(--badge-size, 56px) minmax(0, 1fr) auto minmax(0, 1fr);
     column-gap: .5rem;
     align-items: center;
     gap: .35rem;

     padding: .28rem .45rem;
     margin-bottom: var(--divcard, 4px);
     margin-top: -5px;

     border-radius: 6px;
     background: #363c42;
     box-shadow: 0 1px 2px rgba(0, 0, 0, .35);

     color: #e6e6e6;
     position: relative;
 }

 .jogo-item .mesa-badge {
     justify-self: center;
     align-self: center;
 }

 .jogo-item+.jogo-item::before {
     content: "";
     position: absolute;
     left: 12px;
     right: 12px;
     top: -.35rem;
     height: 1px;
     background: linear-gradient(90deg, transparent, #363c42, transparent);
 }

 /* MESA */
 .mesa-badge {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;

     width: var(--badge-size, 56px) !important;
     min-width: var(--badge-size, 56px) !important;
     /*min-height: var(--badge-size, 56px) !important;*/
     border-radius: 12px;
     padding: .20rem;
     font-weight: 900;
     line-height: 1.05;
     color: #fff !important;
     border: 1px solid rgba(255, 255, 255, .18);
 }

 .mesa-badge .lbl {
     display: block;
     font-size: calc(var(--badge-size, 60px) * 0.20);
     opacity: .95;
     letter-spacing: .24px;
     text-transform: uppercase;
     margin-bottom: .12rem;
 }

 .mesa-badge .num {
     font-size: calc(var(--badge-size, 60px) * 0.45);
 }

 .mesa-primary {
     background: linear-gradient(180deg, rgba(0, 123, 255, .34), rgba(0, 123, 255, .18));
     border-color: rgba(0, 123, 255, .55);
     box-shadow: 0 0 10px rgba(0, 123, 255, .18) inset;
 }

 .mesa-warning {
     background: linear-gradient(180deg, rgba(255, 193, 7, .38), rgba(255, 193, 7, .20));
     border-color: rgba(255, 193, 7, .55);
     color: #111;
     box-shadow: 0 0 10px rgba(255, 193, 7, .18) inset;
 }

 .mesa-danger {
     background: linear-gradient(180deg, rgba(220, 53, 69, .40), rgba(220, 53, 69, .22));
     border-color: rgba(220, 53, 69, .6);
     box-shadow: 0 0 10px rgba(220, 53, 69, .18) inset;
 }

 .mesa-chapeu {
     border-color: rgba(40, 167, 69, .6);
     box-shadow: 0 0 10px rgba(40, 167, 69, .18) inset;
 }

 .mesa-secondary {
     background: linear-gradient(180deg, rgba(108, 117, 125, .30), rgba(108, 117, 125, .16));
     border-color: rgba(108, 117, 125, .45);
     color: #fff;
     box-shadow: 0 0 8px rgba(108, 117, 125, .12) inset;
 }

 /* COLUNAS TIME / PLACAR */
 .time-col {
     min-width: 0;
 }

 .time-col.left {
     text-align: left !important;
 }

 .time-col.right {
     text-align: right !important;
 }

 .time-col.left .text-right,
 .time-col.left .text-center {
     text-align: left !important;
 }

 .time-col.right .text-left,
 .time-col.right .text-center {
     text-align: right !important;
 }

 /* PLACAR */
 .placar-col {
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 .placar-col .rotulo {
     font-size: .7rem;
     color: #ffffff;
     opacity: .7;
     margin-bottom: .15rem;
 }

 .placar-col .miolo {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: .5rem;
     font-size: var(--font-placar, 18px);
 }

 .placar-col .x {
     opacity: .9;
 }

 .badge-set {
     border-radius: 10px;
     padding: .1rem .45rem;
     line-height: 1;
     font-size: var(--font-set, 16px);
 }

 .pontos-col {
     min-width: 120px;
     text-align: center;
 }

 .pontos-col .valor {
     font-size: calc(var(--badge-size, 60px) * 0.45);
     font-weight: 900;
     line-height: 1;
 }

 .pontos-col .lbl {
     margin-top: 2px;
     line-height: 1;
     display: block;
     opacity: .85;
     font-size: calc(var(--badge-size, 60px) * 0.25);
 }

 /* BLOCO DE LINHAS DO TIME */
 .time-inner {
     display: grid;
     gap: 2px;
     text-align: inherit;
 }

 /* evitar .time-inner aninhado quebrar layout */
 .time-inner .time-inner {
     display: contents;
 }

 /* mini-toolbar genérica (usada em modais) */
 .modal-toolbar {
     display: flex;
     align-items: center;
     gap: .5rem;
     padding: .5rem .6rem;
     border-radius: 10px;
     background: rgba(255, 255, 255, .04);
     border: 1px solid rgba(255, 255, 255, .08);
 }

 .modal-toolbar .btn {
     line-height: 1.2;
     padding: .35rem .7rem;
     border-radius: 999px;
 }

 .modal-toolbar .btn i {
     margin-right: .35rem;
 }

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

 /* ≤ 768px */
 @media (max-width: 768px) {
     .games-col {
         padding: .5rem;
     }

     .jogo-item {
         grid-template-columns:
             var(--badge-size, 48px) 1fr;
         grid-template-areas:
             "mesa mesa"
             "t1 t1"
             "placar placar"
             "t2 t2";
         justify-items: center;
         column-gap: .5rem;
         row-gap: .25rem;
         padding: .35rem .5rem;
     }

     .mesa-badge {
         grid-area: mesa;
         width: var(--badge-size, 56px) !important;
         min-width: var(--badge-size, 56px) !important;
         /*min-height: var(--badge-size, 56px) !important;*/
         padding: .18rem .15rem;
     }

     .mesa-badge .lbl {
         margin-bottom: 2px;
     }

     .time-col {
         min-width: 0;
     }

     .time-col.left {
         grid-area: t1;
         text-align: left !important;
     }

     .time-col.right {
         grid-area: t2;
         text-align: left !important;
     }

     .time-col.right .text-left,
     .time-col.right .text-right,
     .time-col.right .text-center {
         text-align: left !important;
     }

     .placar-col {
         grid-area: placar;
         min-width: 0;
         align-items: center;
     }

     .placar-col .miolo {
         font-size: calc(var(--font-base, 16px) * 0.9);
         gap: .35rem;
     }

     .badge-set {
         font-size: calc(var(--font-base, 16px) * 0.75);
         padding: .06rem .32rem;
     }

     .time-inner {
         gap: 2px;
     }

     .time-line {
         line-height: 1.1em;
     }

     /* FIX: layout jogos/classificados com grid 3 linhas */
     .games-col.compact .jogo-item,
     .tabela-registros .jogo-item {
         grid-template-columns: var(--badge-size, 52px) minmax(0, 1fr) !important;
         grid-template-areas:
             "mesa t1"
             "mesa placar"
             "mesa t2" !important;
         column-gap: .5rem !important;
         row-gap: .25rem !important;
     }

     .games-col.compact .mesa-badge,
     .tabela-registros .jogo-item .mesa-badge {
         grid-area: mesa !important;
         width: var(--badge-size, 56px) !important;
         min-width: var(--badge-size, 56px) !important;
         /*min-height: var(--badge-size, 56px) !important;*/
         padding: .18rem .15rem !important;
     }

     .games-col.compact .time-col.left,
     .tabela-registros .jogo-item .time-col.left {
         grid-area: t1 !important;
         text-align: left !important;
     }

     .games-col.compact .time-col.right,
     .tabela-registros .jogo-item .time-col.right {
         grid-area: t2 !important;
         text-align: right !important;
     }

     .games-col.compact .placar-col,
     .tabela-registros .jogo-item .placar-col {
         grid-area: placar !important;
         min-width: 0 !important;
         align-items: center !important;
     }

     .games-col.compact .time-col,
     .tabela-registros .jogo-item .time-col,
     .games-col.compact .time-inner,
     .tabela-registros .jogo-item .time-inner {
         min-width: 0 !important;
         width: 100% !important;
     }

     .games-col.compact .time-inner .time-line,
     .tabela-registros .jogo-item .time-inner .time-line {
         display: block !important;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         line-height: 1.15em;
     }

     .games-col.compact .time-inner .time-line:nth-child(n+4),
     .tabela-registros .jogo-item .time-inner .time-line:nth-child(n+4) {
         display: none !important;
     }

     .time-box {
         text-align: center !important;
         align-items: center;
     }

     .time-col.left,
     .time-col.right {
         text-align: center !important;
     }

     .time-col.right .text-left,
     .time-col.right .text-right,
     .time-col.right .text-center,
     .time-col.left .text-left,
     .time-col.left .text-right,
     .time-col.left .text-center {
         text-align: center !important;
     }

 }

 /* ≤ 576px */
 @media (max-width: 576px) {
     .games-col {
         padding: .4rem;
     }

     .jogo-item {
         grid-template-columns: var(--badge-size, 56px) minmax(0, 1fr);
         padding: .3rem .45rem;
     }

     .mesa-badge {
         width: var(--badge-size, 56px) !important;
         min-width: var(--badge-size, 56px) !important;
         /*min-height: var(--badge-size, 56px) !important;*/
         padding: .14rem .12rem;
     }

     .placar-col {
         min-width: 0;
     }

     .placar-col .rotulo {
         display: none !important;
     }

     .games-col.compact .placar-col {
         min-width: 96px;
     }

     .time-box {
         text-align: center !important;
         align-items: center;
     }

     .time-col.left,
     .time-col.right {
         text-align: center !important;
     }

     .time-col.right .text-left,
     .time-col.right .text-right,
     .time-col.right .text-center,
     .time-col.left .text-left,
     .time-col.left .text-right,
     .time-col.left .text-center {
         text-align: center !important;
     }

 }

 /* ≤ 420px */
 @media (max-width: 420px) {
     .jogo-item {
         grid-template-columns: var(--badge-size, 48px) minmax(0, 1fr);
     }

     .mesa-badge {
         width: var(--badge-size, 56px) !important;
         min-width: var(--badge-size, 56px) !important;
         /*min-height: var(--badge-size, 56px) !important;*/
         padding: .12rem .1rem;
         border-radius: 9px;
     }

     .placar-col .miolo {
         font-size: calc(var(--font-base, 16px) * 0.8);
         gap: .3rem;
     }

     .badge-set {
         font-size: calc(var(--font-base, 16px) * 0.7);
         padding: .04rem .28rem;
         border-radius: 7px;
     }

     .time-inner {
         gap: 1px;
     }

     .time-line {
         line-height: 1.05em;
     }

     .games-col.compact .time-inner .time-line:nth-child(n+3),
     .tabela-registros .jogo-item .time-inner .time-line:nth-child(n+3) {
         display: none !important;
     }

     .time-box {
         text-align: center !important;
         align-items: center;
     }

     .time-col.left,
     .time-col.right {
         text-align: center !important;
     }

     .time-col.right .text-left,
     .time-col.right .text-right,
     .time-col.right .text-center,
     .time-col.left .text-left,
     .time-col.left .text-right,
     .time-col.left .text-center {
         text-align: center !important;
     }

 }

 /* grupo de legendas + chips individuais */
 .legend-items {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     gap: .35rem .5rem;
 }

 .legend-chip {
     display: inline-flex;
     align-items: center;
     gap: .35rem;
     font-weight: 600;
     font-size: .9rem;
     line-height: 1;
     padding: .22rem .5rem;
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, .12);
     background: rgba(255, 255, 255, .06);
     color: #e6e6e6;
 }

 .legend-chip .dot {
     width: .55rem;
     height: .55rem;
     border-radius: 50%;
     display: inline-block;
     opacity: .95;
 }

 .legend-chip.success .dot {
     background: #28a745;
 }

 .legend-chip.danger .dot {
     background: #dc3545;
 }

 .legend-chip.warning .dot {
     background: #ffc107;
 }

 .legend-chip.primary .dot {
     background: #007bff;
 }

 /* responsivo: em telas pequenas, remove o separador e empilha */
 @media (max-width:576px) {
     .legend-bar {
         flex-direction: column;
         gap: .4rem;
     }

     .legend-bar>*+* {
         padding-left: 0;
         margin-left: 0;
     }

     .legend-bar>*+*::before {
         display: none;
     }
 }

 /* =========================================================
   CONFIG CRONÔMETRO (modal)
========================================================= */

 #configCronometro .section-title {
     font-weight: 800;
     letter-spacing: .3px;
     text-transform: uppercase;
     font-size: .85rem;
     color: #d7e3ff;
     margin: .25rem 0 .75rem;
 }

 #configCronometro .card-lite {
     border: 1px solid rgba(255, 255, 255, .08);
     border-radius: 12px;
     background: rgba(108, 117, 125, .22);
     padding: .9rem;
 }

 #configCronometro .muted {
     opacity: .5;
     pointer-events: none;
 }

 #configCronometro .grid-2 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
 }

 @media (max-width: 992px) {
     #configCronometro .grid-2 {
         grid-template-columns: 1fr;
     }
 }

 #configCronometro .btnbar {
     display: flex;
     gap: .5rem;
     width: 100%;
     justify-content: flex-end;
 }

 #configCronometro .modal-content {
     border: 1px solid rgba(255, 255, 255, .08);
     border-radius: 12px;
 }

 #configCronometro .modal-header,
 #configCronometro .modal-footer {
     border-color: rgba(255, 255, 255, .08);
 }

 #configCronometro .form-control {
     background: rgba(0, 0, 0, .22);
     color: #e5e7eb;
     border-color: rgba(255, 255, 255, .15);
 }

 #configCronometro .form-control:focus {
     color: #e5e7eb;
     background: rgba(0, 0, 0, .22);
     border-color: #80bdff;
     box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
 }

 #configCronometro .input-group-append .input-group-text {
     background: rgba(255, 255, 255, .06);
     border-color: rgba(255, 255, 255, .15);
     color: #e5e7eb;
 }

 #configCronometro .bg-red {
     background: rgba(220, 53, 69, .15) !important;
     border-color: rgba(220, 53, 69, .45) !important;
 }

 #configCronometro .corpicker input.form-control {
     background: rgba(0, 0, 0, .22);
     color: #e5e7eb;
     border-color: rgba(255, 255, 255, .15);
 }

 #configCronometro .corpicker .input-group-text i.fas.fa-square {
     filter: drop-shadow(0 0 2px rgba(0, 0, 0, .3));
 }

 #configCronometro {
     z-index: 2000 !important;
 }

 #configCronometro .modal-dialog {
     z-index: 2001 !important;
 }

 .modal-backdrop.conf-crono {
     z-index: 1999 !important;
 }

 /* =========================================================
   GRID 2 • CLASSIFICADOS (POSIÇÃO + TIME)
   Usado em: .jogo-item.grid2
========================================================= */

 /* Desktop / padrão */
 .jogo-item.grid2 {
     /* Só 2 colunas: posição + conteúdo */
     grid-template-columns: var(--badge-size, 56px) minmax(0, 1fr);
     column-gap: .55rem;
 }

 /* Badge da posição se comporta como a "mesa" */
 .jogo-item.grid2 .mesa-badge {
     justify-self: center;
 }

 /* Todo conteúdo do time fica na segunda coluna */
 .jogo-item.grid2 .time-col {
     grid-column: 2;
     text-align: left !important;
 }

 /* Se existir coluna de critérios, ela vira uma “sub-linha” do time */
 .jogo-item.grid2 .criterios-col {
     grid-column: 2;
     margin-top: .18rem;
 }

 /* Opcional: deixa mais compacto visualmente para classificação */
 .jogo-item.grid2.classif-item {
     padding: .24rem .45rem;
 }

 /* Em grid2 não faz sentido tratarmos "left/right" para times */
 .jogo-item.grid2 .time-col.right .text-left,
 .jogo-item.grid2 .time-col.right .text-right,
 .jogo-item.grid2 .time-col.right .text-center {
     text-align: left !important;
 }

 /* =========================================================
   GRID 2 • RESPONSIVO
   Sobrescreve o comportamento mobile padrão (que assume 4 partes)
========================================================= */

 @media (max-width: 768px) {

     /* Força layout simples 2 colunas também no mobile */
     .tabela-registros .jogo-item.grid2 {
         grid-template-columns: var(--badge-size, 52px) minmax(0, 1fr) !important;
         column-gap: .5rem !important;
         row-gap: .15rem !important;
     }

     .tabela-registros .jogo-item.grid2 .mesa-badge {
         width: var(--badge-size, 52px) !important;
         min-width: var(--badge-size, 52px) !important;
         min-height: var(--badge-size, 52px) !important;
         padding: .16rem .14rem !important;
     }

     .tabela-registros .jogo-item.grid2 .time-col {
         grid-column: 2 !important;
         text-align: left !important;
     }

     .tabela-registros .jogo-item.grid2 .criterios-col {
         grid-column: 1 / -1 !important;
         /* critérios ocupam a linha inteira logo abaixo do time */
         margin-top: .12rem;
     }
 }

 @media (max-width: 576px) {
     .tabela-registros .jogo-item.grid2 {
         grid-template-columns: var(--badge-size, 48px) minmax(0, 1fr) !important;
         padding: .26rem .4rem;
     }

     .tabela-registros .jogo-item.grid2 .mesa-badge {
         width: var(--badge-size, 48px) !important;
         min-width: var(--badge-size, 48px) !important;
         min-height: var(--badge-size, 48px) !important;
     }

     .tabela-registros .jogo-item.grid2 .criterios-col .miolo small {
         font-size: .75rem;
     }
 }

 /* =========================================================
   GRID 3 • PONTUAÇÃO
   Estrutura: POSIÇÃO (badge) | TIME | PONTOS (pontos-col)
========================================================= */

 /* Layout padrão / desktop */
 .jogo-item.grid3 {
     /* 3 colunas: badge | time | pontos */
     grid-template-columns:
         var(--badge-size, 56px) minmax(0, 2.4fr) minmax(0, 1.1fr);
     column-gap: .55rem;
 }

 /* Badge de posição se comporta como "mesa" centralizada */
 .jogo-item.grid3 .mesa-badge {
     justify-self: center;
     align-self: center;
 }

 /* Time sempre na 2ª coluna, alinhado à esquerda */
 .jogo-item.grid3 .time-col {
     grid-column: 2;
     text-align: left !important;
 }

 /* Coluna de pontos na 3ª coluna, centralizada */
 .jogo-item.grid3 .pontos-col {
     grid-column: 3;
     text-align: center;
 }

 /* Dá uma leve compactada no card de pontuação */
 .jogo-item.grid3 {
     padding: .24rem .45rem;
 }

 /* Se vier .time-col.right por herança, mantemos alinhado à esquerda aqui */
 .jogo-item.grid3 .time-col.right .text-left,
 .jogo-item.grid3 .time-col.right .text-right,
 .jogo-item.grid3 .time-col.right .text-center {
     text-align: left !important;
 }

 /* =========================================================
   GRID 3 • RESPONSIVO (tabela-registros)
   Override do comportamento padrão mobile de .jogo-item
========================================================= */

 @media (max-width: 768px) {

     /* Tablet / celular:
       linha 1: badge | time
       linha 2: badge | pontos
    */
     .tabela-registros .jogo-item.grid3 {
         grid-template-columns: var(--badge-size, 52px) minmax(0, 1fr) !important;
         grid-template-areas:
             "mesa time"
             "mesa pontos";
         column-gap: .5rem !important;
         row-gap: .18rem !important;
         padding: .32rem .5rem;
     }

     .tabela-registros .jogo-item.grid3 .mesa-badge {
         grid-area: mesa;
         width: var(--badge-size, 52px) !important;
         min-width: var(--badge-size, 52px) !important;
         min-height: var(--badge-size, 52px) !important;
         padding: .16rem .14rem !important;
     }

     .tabela-registros .jogo-item.grid3 .time-col {
         grid-area: time;
         text-align: left !important;
     }

     .tabela-registros .jogo-item.grid3 .pontos-col {
         grid-area: pontos;
         margin-top: .05rem;
     }

     .tabela-registros .jogo-item.grid3 .pontos-col .valor {
         display: block;
     }

     .tabela-registros .jogo-item.grid3 .pontos-col .lbl small {
         font-size: .8rem;
     }
 }

 @media (max-width: 576px) {
     .tabela-registros .jogo-item.grid3 {
         grid-template-columns: var(--badge-size, 48px) minmax(0, 1fr) !important;
         padding: .26rem .4rem;
     }

     .tabela-registros .jogo-item.grid3 .mesa-badge {
         width: var(--badge-size, 48px) !important;
         min-width: var(--badge-size, 48px) !important;
         min-height: var(--badge-size, 48px) !important;
     }

     .tabela-registros .jogo-item.grid3 .pontos-col .lbl small {
         font-size: .76rem;
     }
 }

 @media (max-width: 420px) {
     .tabela-registros .jogo-item.grid3 {
         grid-template-columns: var(--badge-size, 46px) minmax(0, 1fr) !important;
         padding: .24rem .38rem;
     }

     .tabela-registros .jogo-item.grid3 .mesa-badge {
         width: var(--badge-size, 46px) !important;
         min-width: var(--badge-size, 46px) !important;
         min-height: var(--badge-size, 46px) !important;
         border-radius: 9px;
     }

     .tabela-registros .jogo-item.grid3 .pontos-col .lbl small {
         font-size: .72rem;
     }
 }