/**
 * SPEH-X Design System v1.0 - tokens e componentes base compartilhados
 * (docs/SPEH-X-Design-System-v1.0.md). Aplica-se apenas a superficies de
 * FRONTEND proprio - wp-admin permanece 100% nativo (Design System Sec. 0).
 *
 * Sprint 1 (2026-07-22): primeira aplicacao real dos tokens + componente
 * Tabela (.spx-table), nas 2 telas do Atleta sem CSS proprio encontradas na
 * auditoria (MyAccountEndpoint/PerformanceHistoryShortcode).
 * Sprint 2 (2026-07-22): componentes Card/KPI/Badge/Botao formalizados
 * (Design System Sec. 5.1/5.2/5.5/5.6), consumidos pelo Hub do Atleta
 * ([spehx_athlete_hub]).
 * Fase 3 (2026-07-24): identidade institucional revisada (Preto/Branco/
 * Laranja extraido do logotipo oficial, substitui Indigo/Gold - Design
 * System Sec. 2.2), paleta da Triade resolvida (Sec. 2.5), fonte Outfit
 * auto-hospedada (assets/fonts/, variavel, cobre pesos 100-900 num unico
 * arquivo por subset - Sec. 3), e componentes Notice/Form adicionados
 * (Sec. 5.4/5.7) para cobrir a aplicacao em todas as telas de frontend
 * nesta fase de padronizacao visual.
 */

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/outfit-variable-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/outfit-variable-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Neutros - Slate (Design System 2.1) */
    --spx-slate-900: #0F172A;
    --spx-slate-700: #1E293B;
    --spx-slate-500: #475569;
    --spx-slate-300: #94A3B8;
    --spx-slate-100: #E2E8F0;
    --spx-slate-050: #F8FAFC;
    --spx-white: #FFFFFF;
    --spx-black: #000000;

    /* Identidade institucional - Preto/Branco/Laranja (Design System 2.2,
       revisado na Fase 3 - laranja extraido por amostragem de pixel do
       logotipo oficial, nao aproximado) */
    --spx-orange-700: #A31E01;
    --spx-orange-600: #E22A01;
    --spx-orange-100: #FCE5E1;
    --spx-orange-050: #FEF4F2;

    /* Pilares da Triade - uso exclusivo dentro do modulo Triade (Design
       System 2.5, resolvido na Fase 3) */
    --spx-pillar-strength: #B45309;
    --spx-pillar-potency: #7C3AED;
    --spx-pillar-endurance: #0F766E;

    /* Semanticas - herdadas do Modo Arena, significado fixo (Design System 2.4) */
    --spx-success-700: #15803D;
    --spx-success-100: #DCFCE7;
    --spx-danger-700: #B91C1C;
    --spx-danger-100: #FEE2E2;
    --spx-warning-800: #92400E;
    --spx-warning-100: #FEF3C7;
    --spx-info-700: #1D4ED8;
    --spx-info-100: #DBEAFE;

    /* Tipografia (Design System Sec. 3) */
    --spx-font-display: 'Outfit', system-ui, -apple-system, sans-serif;
}

/* Tabela - componente frontend proprio (Design System Sec. 5.3) */
.spx-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    box-sizing: border-box;
    font-family: var(--spx-font-display);
    font-size: 14px;
    color: var(--spx-slate-700);
}

.spx-table th,
.spx-table td {
    box-sizing: border-box;
}

.spx-table thead th {
    background: var(--spx-slate-050);
    color: var(--spx-slate-700);
    text-align: left;
    padding: 8px 12px;
    font-weight: 600;
}

.spx-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--spx-slate-100);
}

/* Zebrado só quando a tela tem mais de 8 linhas (Design System Sec. 5.3) -
   aplicado condicionalmente pelo PHP via esta classe modificadora, nunca
   incondicional. */
.spx-table-zebra tbody tr:nth-child(even) td {
    background: var(--spx-slate-050);
}

@media (max-width: 600px) {
    .spx-table {
        display: block;
        overflow-x: auto;
    }
}

/* Card - Design System Sec. 5.5 */
.spx-card {
    background: var(--spx-white);
    border: 1px solid var(--spx-slate-100);
    border-radius: 10px;
    padding: 16px 24px;
    margin-bottom: 16px;
    font-family: var(--spx-font-display);
    box-sizing: border-box;
}

.spx-card h3 {
    margin-top: 0;
}

/* KPI tile - Design System Sec. 5.6 */
.spx-kpi {
    background: var(--spx-white);
    border: 1px solid var(--spx-slate-100);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    font-family: var(--spx-font-display);
}

.spx-kpi-label {
    font-size: 12px;
    color: var(--spx-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.spx-kpi-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--spx-slate-900);
    font-variant-numeric: tabular-nums;
}

.spx-kpi-headline {
    max-width: 320px;
}

.spx-kpi-reserved {
    opacity: 0.6;
}

/* Modificador pra KPI cujo valor e texto longo (nome de competicao/evento)
   em vez de numero curto - mesmo tile, so reduz o tamanho da fonte pra nao
   estourar o card (Arena Experience, rodada 10). */
.spx-kpi-value-text {
    font-size: 16px;
    font-weight: 600;
}

/* Arena Experience (rodada 10) - cabecalho de identidade do atleta +
   Cronometro SPEH-X (Modo Treino), reaproveitando os mesmos tokens/tiles
   (.spx-card/.spx-kpi/.spx-btn/.spx-notice) do resto da plataforma. */
.spehx-arena-experience-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.spehx-arena-experience-header img {
    border-radius: 50%;
}

.spehx-arena-experience-meta {
    color: var(--spx-slate-500);
    margin: 4px 0;
}

.spehx-arena-experience-mode {
    margin: 20px 0 12px;
    font-weight: 600;
}

.spehx-arena-experience-cta {
    margin-top: 12px;
}

.spehx-arena-experience-nav {
    margin-top: 24px;
}

.spehx-timer {
    text-align: center;
    padding: 24px 0;
}

.spehx-timer-display {
    font-family: var(--spx-font-display);
    font-size: 56px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--spx-slate-900);
    letter-spacing: 0.02em;
    margin-bottom: 16px;
}

.spehx-timer-controls {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.spehx-timer form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Badge / status pill - Design System Sec. 5.1 */
.spx-badge {
    display: inline-block;
    border-radius: 999px;
    padding: 2px 12px;
    background: var(--spx-slate-100);
    color: var(--spx-slate-700);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    font-family: var(--spx-font-display);
}

.spx-badge-success { background: var(--spx-success-100); color: var(--spx-success-700); }
.spx-badge-danger { background: var(--spx-danger-100); color: var(--spx-danger-700); }
.spx-badge-warning { background: var(--spx-warning-100); color: var(--spx-warning-800); }
.spx-badge-info { background: var(--spx-info-100); color: var(--spx-info-700); }

/* Badges dos pilares da Triade - uso exclusivo dentro do modulo Triade
   (Design System 2.5) */
.spx-badge-pillar-strength { background: color-mix(in srgb, var(--spx-pillar-strength) 15%, white); color: var(--spx-pillar-strength); }
.spx-badge-pillar-potency { background: color-mix(in srgb, var(--spx-pillar-potency) 15%, white); color: var(--spx-pillar-potency); }
.spx-badge-pillar-endurance { background: color-mix(in srgb, var(--spx-pillar-endurance) 15%, white); color: var(--spx-pillar-endurance); }

/* Botão - Design System Sec. 5.2 */
.spx-btn {
    display: inline-block;
    border-radius: 6px;
    padding: 8px 16px;
    font-family: var(--spx-font-display);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid transparent;
}

/* "Leitura rápida" (Painel Operacional do Juiz, pedido explícito do
   Master) - um botão desabilitado precisa ficar obviamente diferente à
   distância/no touchscreen, não só via atributo invisível. */
.spx-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.spx-btn-primary {
    background: var(--spx-orange-600);
    color: var(--spx-white);
}

.spx-btn-primary:hover {
    background: var(--spx-orange-700);
    color: var(--spx-white);
}

.spx-btn-secondary {
    background: transparent;
    border-color: var(--spx-slate-300);
    color: var(--spx-slate-700);
}

.spx-btn-secondary:hover {
    border-color: var(--spx-orange-600);
    color: var(--spx-orange-600);
}

.spx-btn-danger {
    background: transparent;
    border-color: var(--spx-danger-700);
    color: var(--spx-danger-700);
}

.spx-btn-danger:hover {
    background: var(--spx-danger-100);
}

/* Formulário - Design System Sec. 5.4 */
.spx-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    font-family: var(--spx-font-display);
}

.spx-form-field label {
    font-size: 14px;
    font-weight: 500;
    color: var(--spx-slate-700);
}

.spx-form-field input,
.spx-form-field select,
.spx-form-field textarea {
    border: 1px solid var(--spx-slate-100);
    border-radius: 6px;
    padding: 8px 12px;
    font-family: var(--spx-font-display);
    font-size: 14px;
    color: var(--spx-slate-900);
    box-sizing: border-box;
}

.spx-form-field input:focus,
.spx-form-field select:focus,
.spx-form-field textarea:focus {
    outline: 2px solid var(--spx-orange-600);
    outline-offset: 1px;
    border-color: var(--spx-orange-600);
}

.spx-form-help {
    font-size: 12px;
    color: var(--spx-slate-500);
}

.spx-form-error {
    font-size: 12px;
    color: var(--spx-danger-700);
}

/* Notice / Alerta - Design System Sec. 5.7 */
.spx-notice {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 12px 16px;
    border-radius: 6px;
    border-left: 3px solid;
    font-family: var(--spx-font-display);
    font-size: 14px;
    margin-bottom: 16px;
}

.spx-notice-success { background: var(--spx-success-100); border-left-color: var(--spx-success-700); color: var(--spx-success-700); }
.spx-notice-danger { background: var(--spx-danger-100); border-left-color: var(--spx-danger-700); color: var(--spx-danger-700); }
.spx-notice-warning { background: var(--spx-warning-100); border-left-color: var(--spx-warning-800); color: var(--spx-warning-800); }
.spx-notice-info { background: var(--spx-info-100); border-left-color: var(--spx-info-700); color: var(--spx-info-700); }

/* Compatibilidade com botoes/campos nativos do WordPress e WooCommerce
   (Fase 3) - so entra em vigor nas paginas onde este arquivo e carregado
   (Frontend proprio + Minha Conta + WooCommerce, ver DesignSystemAssets),
   nunca no wp-admin. Reaproveita o `.button-primary`/`.button` nativo em vez
   de forcar cada shortcode a trocar de marcacao - "Padronizar paginas
   WooCommerce" sem reescrever os templates do WooCommerce.

   Minha Conta (Fase 3, achado real de execucao): os templates de "Detalhes
   da conta"/"Endereços" da WooCommerce NAO adicionam `.button-primary` no
   botao de salvar (so `.button`, herdando o preto padrao do tema de blocos)
   - por isso `body.woocommerce-account .button` (sem exigir `.button-primary`)
   tambem entra na regra, ja que e sempre a acao principal de cada formulario
   daquela tela. */
.woocommerce .button.button-primary,
.woocommerce-page .button.button-primary,
body.woocommerce-account .button,
.spehx-login-hub .button.button-primary {
    background-color: var(--spx-orange-600);
    border-color: var(--spx-orange-600);
    color: var(--spx-white);
}

.woocommerce .button.button-primary:hover,
.woocommerce-page .button.button-primary:hover,
body.woocommerce-account .button:hover,
.spehx-login-hub .button.button-primary:hover {
    background-color: var(--spx-orange-700);
    border-color: var(--spx-orange-700);
    color: var(--spx-white);
}

.woocommerce a.button:not(.button-primary),
.woocommerce-page a.button:not(.button-primary) {
    color: var(--spx-slate-700);
    border-color: var(--spx-slate-300);
}

/* Medalhas/conquistas do Perfil Público do Atleta (Design System 2.2/2.4) -
   classes `.spehx-achievement-*` existiam sem nenhum CSS associado
   (CHECKLIST_HOMOLOGACAO.md #65); usam o KPI tile (.spx-kpi) como base, so
   coloridas por conquista. */
.spehx-achievement-gold .spx-kpi-value { color: #B45309; }
.spehx-achievement-silver .spx-kpi-value { color: var(--spx-slate-500); }
.spehx-achievement-bronze .spx-kpi-value { color: #92400E; }
.spehx-achievement-champion .spx-kpi-value { color: var(--spx-orange-600); }

/* Hub do Atleta / Hub do Box - layout (Sprint 2, generalizado na Fase 3) */
.spx-hub-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.spx-hub-header-meta {
    color: var(--spx-slate-500);
}

/* Polimento de apresentacao (rodada P2/P3, 2026-08-06) - cabecalho do Hub
   ganha "Sair" ao lado do titulo, sem empurrar o meta pra baixo dele. */
.spehx-hub-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.spehx-hub-header-top h2 {
    margin: 0;
}

.spx-hub-tabs {
    margin-bottom: 16px;
}

.spx-hub-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 16px;
    font-family: var(--spx-font-display);
    font-size: 14px;
}

.spx-hub-filter-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--spx-slate-700);
}

/* Achado real de auditoria visual (rodada 8, 2026-08-05) - .spx-hub-filter-form
   sempre estilizou o label/layout flex, mas nunca os proprios campos: sem
   nenhuma regra de input/select aqui, o navegador cai pro estilo global de
   bloco do tema (herdado, nao definido por nos), que renderiza cada campo
   como uma caixa enorme tipo textarea. Mesma declaracao ja usada por
   `.spx-form-field input` (Design System Sec. 5), so escopada pra este
   seletor - nao e um estilo novo, e preencher uma lacuna. */
.spx-hub-filter-form input,
.spx-hub-filter-form select {
    border: 1px solid var(--spx-slate-100);
    border-radius: 6px;
    padding: 8px 12px;
    font-family: var(--spx-font-display);
    font-size: 14px;
    color: var(--spx-slate-900);
    box-sizing: border-box;
    height: auto;
    width: 100%;
    max-width: 220px;
}

.spx-hub-filter-form input:focus,
.spx-hub-filter-form select:focus {
    outline: 2px solid var(--spx-orange-600);
    outline-offset: 1px;
    border-color: var(--spx-orange-600);
}

.spx-hub-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.spx-hub-recent-list li {
    padding: 6px 0;
    border-bottom: 1px solid var(--spx-slate-100);
}

.spx-hub-pagination a {
    color: var(--spx-orange-600);
}

@media (max-width: 600px) {
    .spx-hub-cards {
        grid-template-columns: 1fr;
    }

    .spx-hub-filter-form {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Componente reutilizável de listagem do Painel Arena Master (busca
   instantânea + ordenação + paginação + contador) - estreado no Centro de
   Participantes (`arena-master-table-tools.js`), sem nenhuma dependência
   daquele módulo especificamente. */
.spx-table-tools-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.spx-table-tools-search {
    flex: 1;
    min-width: 220px;
    padding: 8px 12px;
    border: 1px solid var(--spx-slate-300);
    border-radius: 6px;
    font-family: var(--spx-font-display);
    font-size: 14px;
}

.spx-table-tools-search:focus {
    outline: none;
    border-color: var(--spx-orange-600);
}

.spx-table-tools-counter {
    color: var(--spx-slate-500);
    font-size: 13px;
    white-space: nowrap;
}

.spx-table-tools-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.spx-table-tools-pagination .spx-table-tools-page-info {
    color: var(--spx-slate-500);
    font-size: 13px;
}

/* "Adicionar Participantes" - 3 opções lado a lado (Selecionar Usuários /
   Cadastro Rápido / Link de Inscrição), reaproveita o mesmo grid dos cards
   do Hub em vez de inventar outro layout. */
.spx-acp-option-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--spx-slate-100);
}

/* Área do Juiz / Arena Live (`ArenaLiveJudgeAreaShortcode`/
   `ArenaLiveTvShortcode`) - tela cheia, poucos cliques, botões grandes
   (pedido explícito do Master), preparada pra notebook/tablet. Nenhuma
   dependência do resto do Painel Arena Master (páginas próprias, fora do
   shell/menu lateral). */
.spx-judge-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    font-family: var(--spx-font-display);
    color: var(--spx-slate-900);
}

.spx-judge-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.spx-judge-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 13px;
    color: var(--spx-slate-500);
}

.spx-judge-title {
    font-size: 32px;
    margin: 4px 0 0;
}

.spx-judge-status {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    background: var(--spx-slate-100);
    color: var(--spx-slate-700);
    white-space: nowrap;
}

.spx-judge-status-preparando { background: var(--spx-warning-100); color: var(--spx-warning-800); }
.spx-judge-status-em_andamento { background: var(--spx-info-100); color: var(--spx-info-700); }
.spx-judge-status-finalizada { background: var(--spx-success-100); color: var(--spx-success-700); }
.spx-judge-status-cancelada { background: var(--spx-danger-100); color: var(--spx-danger-700); }

.spx-judge-timer {
    text-align: center;
    background: var(--spx-slate-900);
    color: var(--spx-white);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.spx-judge-timer-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 13px;
    opacity: 0.7;
    margin-bottom: 8px;
}

.spx-judge-timer-display {
    font-size: clamp(48px, 10vw, 96px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    line-height: 1;
}

.spx-judge-timer .spx-btn {
    margin-top: 16px;
}

.spx-judge-lanes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.spx-judge-lane-card {
    border: 2px solid var(--spx-slate-100);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    background: var(--spx-white);
}

.spx-judge-lane-empty {
    border-style: dashed;
    color: var(--spx-slate-300);
}

.spx-judge-lane-number {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--spx-slate-500);
    margin-bottom: 6px;
}

.spx-judge-lane-name {
    font-size: 18px;
    font-weight: 600;
}

.spx-judge-lane-category {
    font-size: 13px;
    color: var(--spx-slate-500);
    margin-top: 4px;
}

/* Painel Operacional do Juiz (2026-08-03) - dropdown rápido de status por
   raia (fora do modal) + linha de resultado já registrado (Tempo). */
.spx-judge-lane-status-select {
    width: 100%;
    margin-top: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--spx-slate-300);
    font-family: var(--spx-font-display);
    font-size: 13px;
}

.spx-judge-lane-result {
    margin-top: 6px;
    font-size: 12px;
    color: var(--spx-slate-500);
}

.spx-judge-lane-participant-status {
    font-size: 13px;
    margin-top: 6px;
}

/* Modal de Resultados (Painel Operacional do Juiz) - "não abrir outra
   página, abrir apenas um modal" (pedido explícito do Master). Sempre no
   DOM, `hidden` controla a visibilidade. */
.spx-judge-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1000;
}

.spx-judge-modal-overlay[hidden] {
    display: none;
}

.spx-judge-modal {
    background: var(--spx-white);
    border-radius: 16px;
    padding: 24px;
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    font-family: var(--spx-font-display);
}

.spx-judge-modal-body {
    margin-top: 12px;
}

.spx-judge-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
}

.spx-judge-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 16px;
}

.spx-judge-control-form {
    margin: 0;
}

.spx-judge-btn-lg {
    font-size: 18px;
    padding: 18px 28px;
    min-width: 140px;
}

.spx-judge-footer {
    text-align: center;
    margin-top: 8px;
}

.spx-judge-result-card {
    margin-bottom: 16px;
}

.spx-judge-result-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

/* Arena TV - mesmo shell, sem controles, fontes um pouco maiores pra
   leitura à distância (telão) - tema ESCURO de verdade (o layout Kiosk,
   `ArenaKioskTemplate`, já deixa o <body> preto; os cards/textos aqui
   precisam acompanhar, senão sobra um cartão claro flutuando num fundo
   preto). */
.spx-judge-tv {
    color: var(--spx-white);
}

.spx-judge-tv .spx-judge-title {
    font-size: 40px;
}

.spx-judge-tv .spx-judge-eyebrow {
    color: rgba(255, 255, 255, 0.6);
}

.spx-judge-tv .spx-judge-timer {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.spx-judge-tv .spx-judge-lane-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--spx-white);
}

.spx-judge-tv .spx-judge-lane-empty {
    border-style: dashed;
    color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

.spx-judge-tv .spx-judge-lane-number,
.spx-judge-tv .spx-judge-lane-category {
    color: rgba(255, 255, 255, 0.55);
}

.spx-judge-tv .spx-judge-lane-name {
    font-size: 22px;
}

/* Centro de Controle da Competição (2026-08-03) - componentes reutilizáveis
   pedidos explicitamente pelo Master (cards de indicadores/timeline/
   alertas/painel operacional/status), pensados pra reuso futuro em Arena
   Console/Painel do Box/Painel do Professor/Painel do Usuário/Painel
   Público - por isso namespace próprio (`.spx-cc-*`), nenhuma regra aqui
   depende de nada específico do Centro de Controle além do HTML que ela
   mesma estiliza. */
.spx-cc-shell {
    max-width: 1200px;
}

.spx-cc-section-title {
    font-size: 18px;
    margin: 28px 0 12px;
}

/* Cockpit Operacional (2026-08-03) - faixa de alertas SEMPRE visível no
   topo (pedido explícito do Master), margem negativa pra encostar nas
   bordas do `.spx-judge-shell` (mesmo padding daquela regra, 24px/16px). */
.spx-cc-alert-banner {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: -24px -16px 20px;
    padding: 10px 16px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
}

.spx-cc-alert-banner-normal {
    background: var(--spx-success-100);
    color: var(--spx-success-700);
}

.spx-cc-alert-banner-active {
    background: var(--spx-danger-100);
    color: var(--spx-danger-700);
}

/* Indicadores de conexão (Arena TV/Área do Juiz/Banco/Cronômetro) */
.spx-cc-sync-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
}

.spx-cc-sync-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--spx-slate-500);
}

.spx-cc-sync-dot::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--spx-slate-300);
    flex-shrink: 0;
}

.spx-cc-sync-ok::before {
    background: var(--spx-success-700);
}

.spx-cc-sync-down::before {
    background: var(--spx-danger-700);
}

/* Prova Atual/Bateria Atual - linha secundária "Próxima: ..." */
.spx-cc-card-secondary {
    margin-top: 6px;
    font-size: 12px;
    color: var(--spx-slate-500);
}

/* Cronômetro Oficial - "o maior componente da página" (pedido explícito do
   Master), quase largura total, elemento central assim que o Evento inicia. */
.spx-cc-timer-hero {
    margin: 20px 0 24px;
    padding: 32px 24px;
}

.spx-cc-timer-hero .spx-judge-timer-display {
    font-size: clamp(40px, 15vw, 160px);
}

/* Indicadores operacionais - "cards pequenos e compactos" (pedido
   explícito do Master), menores que os cards de Prova/Bateria Atual. */
.spx-cc-cards-compact {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.spx-cc-card-compact {
    padding: 10px 12px;
}

.spx-cc-card-compact .spx-cc-card-label {
    font-size: 10px;
    margin-bottom: 2px;
}

.spx-cc-card-compact .spx-cc-card-value {
    font-size: 20px;
}

.spx-cc-shortcut-disabled {
    opacity: 0.5;
    cursor: default;
}

/* Timeline horizontal - liga os marcadores numa linha só, "mostrar
   claramente qual etapa está ativa" (pedido explícito do Master). Único
   bloco de regras `.spx-cc-timeline*` do arquivo - substitui o design
   antigo de "bolinha preenchida" por bolinhas contornadas + linha de
   conexão. */
.spx-cc-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    position: relative;
    margin: 0 0 8px;
    padding: 6px 0 0;
}

.spx-cc-timeline::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 6px;
    right: 6px;
    height: 2px;
    background: var(--spx-slate-100);
}

.spx-cc-timeline-stage {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 10px 0;
    font-size: 13px;
    color: var(--spx-slate-500);
}

.spx-cc-timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--spx-white);
    border: 2px solid var(--spx-slate-300);
}

.spx-cc-timeline-concluido .spx-cc-timeline-dot {
    border-color: var(--spx-success-700);
}

.spx-cc-timeline-concluido .spx-cc-timeline-label {
    color: var(--spx-success-700);
}

.spx-cc-timeline-em_andamento .spx-cc-timeline-dot {
    border-color: var(--spx-info-700);
    box-shadow: 0 0 0 4px var(--spx-info-100);
}

.spx-cc-timeline-em_andamento .spx-cc-timeline-label {
    color: var(--spx-info-700);
    font-weight: 600;
}

/* Abaixo de 480px os 6 estágios quebram em várias linhas (flex-wrap) - a
   linha de conexão única deixa de fazer sentido visualmente e some. */
@media (max-width: 480px) {
    .spx-cc-timeline::before {
        display: none;
    }
}

/* Cards de indicadores - componente independente, cada card é só
   rótulo+valor. */
.spx-cc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.spx-cc-card {
    background: var(--spx-white);
    border: 1px solid var(--spx-slate-100);
    border-radius: 12px;
    padding: 16px;
}

.spx-cc-card-wide {
    grid-column: span 1;
}

.spx-cc-card-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--spx-slate-500);
    margin-bottom: 6px;
}

.spx-cc-card-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--spx-slate-900);
}

/* Atalhos operacionais */
.spx-cc-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

/* Estado operacional do Evento (Iniciar/Pausar/Encerrar) - mesma família
   visual dos badges de status de Bateria. */
.spx-cc-operational-status-nao_iniciado { background: var(--spx-slate-100); color: var(--spx-slate-700); }
.spx-cc-operational-status-em_andamento { background: var(--spx-info-100); color: var(--spx-info-700); }
.spx-cc-operational-status-pausado { background: var(--spx-warning-100); color: var(--spx-warning-800); }
.spx-cc-operational-status-encerrado { background: var(--spx-success-100); color: var(--spx-success-700); }

/* Painel de alertas - componente independente; alertas sem dado ainda
   ficam esmaecidos mas visíveis ("arquitetura preparada"). */
.spx-cc-alerts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.spx-cc-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--spx-slate-050);
    border: 1px solid var(--spx-slate-100);
    font-size: 14px;
}

.spx-cc-alert-count {
    font-weight: 700;
}

.spx-cc-alert-active {
    background: var(--spx-danger-100);
    border-color: var(--spx-danger-700);
    color: var(--spx-danger-700);
}

.spx-cc-alert-unavailable {
    opacity: 0.5;
}

.spx-cc-alert-unavailable .spx-cc-alert-count {
    font-weight: 400;
    font-style: italic;
}

@media (max-width: 640px) {
    .spx-judge-lanes {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }

    .spx-judge-btn-lg {
        flex: 1 1 45%;
    }
}