/* ==================== RESET & BASE ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Superfícies — uma única escala navy, do fundo do canvas aos painéis elevados */
    --bg-deep:     #070b12;
    --bg-base:     #0b1220;
    --surface-1:   #101a2c;
    --surface-1b:  #0d1626;
    --surface-2:   #16233a;
    --line:        #233756;
    --line-soft:   #1a2940;
    --line-hover:  #2f4a73;

    /* Texto */
    --text-hi:  #e8eef7;
    --text-mid: #93a4bd;
    --text-low: #5b6c86;

    /* Sinalização — a mesma família de cores usada na via e no HMI */
    --signal-green:        #2bd576;
    --signal-green-deep:   #1a9c54;
    --signal-green-bright: #5be89a;
    --signal-amber:        #f5b83d;
    --signal-red:          #f0524d;
    --signal-red-bright:   #ff7a76;

    /* Interação / papel instrutor */
    --accent:      #4fb8ff;
    --accent-deep: #1d6fb8;

    /* Tipografia */
    --mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;
    --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;

    /* Forma — raios pequenos e deliberados, não o padrão "app fofo" */
    --radius-sm: 3px;
    --radius:    4px;
    --radius-lg: 7px;
    --shadow-panel: 0 8px 24px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.02) inset;

    /* Layout */
    --header-height: 60px;
    --panel-width: 320px;
}

body {
    font-family: var(--sans);
    background: var(--bg-base);
    color: var(--text-hi);
    overflow: hidden;
    height: 100vh;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Visibilidade por papel — derivada server-side, nunca client-supplied (ver server/roles.js) */
.so-instrutor { display: none !important; }
body[data-papel="instrutor"] .so-instrutor,
body[data-papel="instrutor-admin"] .so-instrutor { display: revert !important; }
/* revert volta ao display padrão do elemento (block) — sobrescreve para quem precisa de flex */
body[data-papel="instrutor"] .so-instrutor.instr-actions,
body[data-papel="instrutor-admin"] .so-instrutor.instr-actions,
body[data-papel="instrutor"] .so-instrutor.instr-clock-controls,
body[data-papel="instrutor-admin"] .so-instrutor.instr-clock-controls { display: flex !important; }
.so-admin { display: none !important; }
body[data-papel="instrutor-admin"] .so-admin { display: revert !important; }

.hidden { display: none !important; }

/* Painéis da cronologia e editor vencem display: revert de .so-instrutor */
#cronologia-painel-lateral.hidden,
#cronologia-painel-lateral[hidden],
#exercicio-editor-container.hidden,
#exercicio-editor-container[hidden] {
    display: none !important;
}

/* ==================== HEADER ==================== */
.app-header {
    height: var(--header-height);
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--bg-base) 100%);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.room-name {
    padding: 3px 10px;
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-mid);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* Edição inline do relógio — duplo clique em #sim-clock troca para este modo */
#sim-clock-edit {
    display: flex;
    align-items: center;
    gap: 4px;
}

#sim-clock-edit-input {
    background: var(--surface-1);
    color: var(--signal-green);
    border: 1px solid var(--accent-deep);
    border-radius: var(--radius);
    padding: 3px 6px;
    width: 108px;
    font-size: 18px;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

/* Badge "Sala" + popover de participantes revelado ao passar o mouse */
.room-status-group {
    position: relative;
    display: flex;
    align-items: center;
}

#train-tooltip {
    position: fixed;
    display: none;
    pointer-events: none;
    z-index: 3000;
    background: rgba(15, 18, 24, 0.96);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-family: Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-hi);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    max-width: 260px;
}

#train-tooltip .tt-id {
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 2px;
}

#train-tooltip .tt-row span:first-child {
    color: var(--text-mid);
    margin-right: 6px;
}

.control-btn {
    padding: 8px 16px;
    border: 1px solid var(--line);
    background: var(--surface-1);
    color: var(--text-hi);
    font-size: 14px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
}

.control-btn:hover {
    background: var(--surface-2);
    border-color: var(--accent);
}

/* ==================== SINÓTICO (ALUNO) ==================== */
#btn-sinotico {
    display: none;
}

body[data-papel="aluno"] #btn-sinotico {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-2);
    color: var(--text-hi);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

body[data-papel="aluno"] #btn-sinotico:hover {
    background: var(--surface-3, rgba(255, 255, 255, 0.08));
    border-color: var(--line-bright, #3b4252);
}

body[data-papel="aluno"] #btn-sinotico.ativo {
    background: rgba(79, 184, 255, 0.15);
    border-color: var(--accent);
    color: var(--accent);
}

#sinotico-container {
    display: none;
    width: 100%;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

#sinotico-svg {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

#sinotico-svg text {
    display: none !important;
}

#sinotico-svg .sinotico-tracks,
#sinotico-svg .sinotico-signals {
    pointer-events: none;
}

.sinotico-janela {
    fill: rgba(234, 179, 8, 0.12);
    stroke: #facc15;
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

body.sinotico-ativo .canvas-container {
    height: calc(100vh - var(--header-height) - var(--sinotico-height, 0px));
}

/* ==================== MODO PROJEÇÃO ==================== */
.selo-projecao {
    display: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #0b0f19;
    background: #fbbf24;
    padding: 2px 7px;
    border-radius: var(--radius-sm, 3px);
    margin-left: 10px;
    vertical-align: middle;
}

#btn-projecao-trens {
    display: none;
    align-items: center;
    gap: 6px;
    background: var(--surface-2);
    color: var(--text-hi);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#btn-projecao-trens:hover {
    background: var(--surface-3, rgba(255, 255, 255, 0.08));
    border-color: var(--line-bright, #3b4252);
}

#btn-projecao-trens.ativo {
    background: rgba(79, 184, 255, 0.15);
    border-color: var(--accent);
    color: var(--accent);
}

#projecao-trens-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: linear-gradient(0deg, rgba(8,12,20,.97) 60%, rgba(8,12,20,.85));
    border-top: 1px solid var(--line);
    backdrop-filter: blur(6px);
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 12px;
    max-height: 140px;
    overflow-y: auto;
}

.projecao-trem-item {
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 5px 9px;
    font-family: var(--mono);
    font-size: 11px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: var(--text-hi);
}

.projecao-trem-item .trem-prefixo {
    font-weight: 700;
    color: var(--accent);
}

.projecao-trem-item .trem-posicao {
    color: var(--text-mid);
}

.projecao-trem-item .trem-destino {
    color: #a78bfa;
}

.btn-projecao-login {
    width: 100%;
    margin-top: 10px;
    background: var(--surface-2);
    color: var(--text-hi);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.btn-projecao-login:hover {
    background: rgba(79, 184, 255, 0.15);
}

/* Regras quando body[data-papel="projecao"] */
body[data-papel="projecao"] .selo-projecao {
    display: inline-block;
}

body[data-papel="projecao"] #btn-projecao-trens {
    display: inline-flex;
}

body[data-papel="projecao"] #btn-sinotico,
body[data-papel="projecao"] .so-instrutor,
body[data-papel="projecao"] .instr-actions,
body[data-papel="projecao"] #acoes-menu,
body[data-papel="projecao"] #alert-bottom-bar,
body[data-papel="projecao"] #instr-trens-bar {
    display: none !important;
}

body[data-papel="projecao"] .room-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-hi);
    background: rgba(79, 184, 255, 0.12);
    border: 1px solid var(--accent);
    padding: 4px 12px;
}

body[data-papel="projecao"] #sim-clock {
    font-size: 20px;
    font-weight: 700;
    color: #4ade80;
    width: auto;
    padding: 4px 10px;
    border-color: rgba(74, 222, 128, 0.3);
}

/* ==================== CANVAS ==================== */
.canvas-container {
    height: calc(100vh - var(--header-height));
    overflow: hidden;
    background: var(--bg-deep);
    position: relative;
}

/* ==================== PANELS ==================== */
.snapshot-panel,
.history-panel {
    position: fixed;
    right: 0;
    top: var(--header-height);
    width: var(--panel-width);
    height: calc(100vh - var(--header-height));
    background: var(--surface-1);
    border-left: 2px solid var(--line);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.4);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

/* Lista de participantes da simulação — oculta por padrão, revelada ao
   passar o mouse sobre o badge da Sala (ver .room-status-group). */
#instructor-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 210px;
    max-height: 220px;
    background: linear-gradient(180deg, var(--surface-1), var(--surface-1b));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-panel);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease;
}
.room-status-group:hover #instructor-panel:not(.hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modal-fade-in 0.25s ease-out;
}

/* Barra horizontal de trens do instrutor (rodapé, fora da sidebar para não
   disputar espaço com o menu ⋮ no header). */
#instr-trens-bar {
    display: none; /* só aparece para o instrutor, ver regra abaixo */
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: linear-gradient(0deg, rgba(8,12,20,.97) 60%, rgba(8,12,20,.85));
    border-top: 1px solid var(--line);
    backdrop-filter: blur(6px);
    flex-direction: column; gap: 4px;
    padding: 6px 10px;
    max-height: 168px;
}
body[data-papel="instrutor"] #instr-trens-bar { display: flex; }
.trem-linha { display: flex; align-items: center; gap: 8px; }
.trem-linha-titulo {
    flex: 0 0 auto; width: 64px;
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    font-family: monospace;
}
.trem-linha-chips {
    display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
}
.trem-linha-chips::-webkit-scrollbar { height: 5px; }
.trem-linha-chips::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--radius-sm); }

.trem-chip {
    flex: 0 0 auto; width: 168px;
    background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 5px 7px; cursor: pointer;
    font-family: monospace; font-size: 10px;
}
.trem-chip:hover { background: var(--surface-2); border-color: var(--line); }
.trem-chip-top { display: flex; justify-content: space-between; align-items: baseline; }
.trem-chip-info { color: var(--text-mid); margin-top: 2px; }
.trem-chip-status { font-weight: bold; }
.trem-chip-destino { color: #8b5cf6; }
.trem-chip-acoes { display: flex; justify-content: flex-end; gap: 4px; margin-top: 3px; }
.trem-chip-acoes button {
    background: none; border: none; cursor: pointer;
    font-size: 11px; padding: 1px 3px; line-height: 1;
}

.snapshot-panel:not(.hidden),
.history-panel:not(.hidden) {
    transform: translateX(0);
}

.panel-content {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

/* ==================== REPLAY PANEL ==================== */
.replay-speed {
    padding: 8px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-hi);
    border-radius: var(--radius);
    margin-left: auto;
}

.replay-timeline {
    padding: 20px;
    border-bottom: 1px solid var(--line);
}

/* ==================== SNAPSHOT PANEL ==================== */
.snapshot-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

/* ==================== HISTORY PANEL ==================== */
.history-events {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

/* ==================== SVG ELEMENT STATES ==================== */
/* AMV Blinking Animation for Estado 0 */
@keyframes blink-hmi {

    0%,
    100% {
        stroke: #ff0000;
        /* Vermelho */
        opacity: 1;
        /* Visível */
    }

    50% {
        stroke: #ff0000;
        /* Vermelho */
        opacity: 0;
        /* Invisível */
    }
}

/* AMV States - controlled via data-state attribute on group */
g[data-state="0"] .s0 {
    display: inline;
}

g[data-state="0"] .s0 .linha-base {
    animation: blink-hmi 0.8s infinite;
}

g[data-state="0"] .s1,
g[data-state="0"] .s2 {
    display: none;
}

g[data-state="1"] .s1 {
    display: inline;
}

g[data-state="1"] .s1 .linha-base {
    stroke: #6b7280;
    /* Mesma cor dos CDVs estado 0 */
}

g[data-state="1"] .s0,
g[data-state="1"] .s2 {
    display: none;
}

g[data-state="2"] .s2 {
    display: inline;
}

g[data-state="2"] .s0,
g[data-state="2"] .s1 {
    display: none;
}

/* AMV Authorized Line Colors */
.linha-base[data-authorized="true"] {
    transition: stroke 0.3s;
}

/* AMV Movement Transition - Progressive blink (starts fast, slows down) */
.amv-transitioning {
    animation: progressiveBlink 5s steps(1, end) infinite;
}

@keyframes progressiveBlink {

    /* Ciclo 1: 0.25s (rápido) */
    0% {
        opacity: 1;
    }

    2.5% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    /* Ciclo 2: 0.5s */
    5% {
        opacity: 1;
    }

    10% {
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    /* Ciclo 3: 0.75s */
    15% {
        opacity: 1;
    }

    22.5% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    /* Ciclo 4: 1.0s */
    30% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    /* Ciclo 5: 1.25s */
    50% {
        opacity: 1;
    }

    62.5% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    /* Ciclo 6: 1.5s (final) */
    75% {
        opacity: 1;
    }

    87.5% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* CDV path styling is now inline, but keep these for reference */
.cdv-path {
    transition: stroke 0.3s;
}

/* Element Hover & Selection */
.railway-element {
    cursor: pointer;
    transition: opacity 0.2s;
}

.railway-element:hover {
    opacity: 0.8;
}

.railway-element.selected {
    filter: drop-shadow(0 0 6px var(--accent));
}

/* Element ID Labels */
.element-id-label {
    pointer-events: none;
    user-select: none;
    vector-effect: non-scaling-stroke;
}

/* ==================== UTILITY ==================== */
/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--surface-1);
}

::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: var(--radius);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-low);
}

/* ==================== CONTEXT MENU ==================== */
.context-menu {
    position: fixed;
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    min-width: 200px;
    z-index: 1000;
    overflow: hidden;
}

.context-menu-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-hi);
    background: var(--surface-2);
}

.context-menu-item {
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 13px;
    color: var(--text-hi);
}

.context-menu-item:hover {
    background: var(--surface-2);
}

.context-menu-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.context-menu-item.disabled:hover {
    background: transparent;
}

.context-menu-separator {
    height: 1px;
    background: var(--line);
    margin: 4px 0;
}

/* ==================== SELECTION MODE INDICATOR ==================== */
.selection-mode-indicator {
    position: fixed;
    top: calc(var(--header-height) + 20px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: white;
    padding: 12px 24px;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 999;
    font-size: 14px;
    font-weight: 600;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Flashing Signal for Route Selection */
.flashing-signal {
    animation: signal-flash 0.6s infinite alternate;
    cursor: cell !important;
}

@keyframes signal-flash {
    0% { 
        filter: drop-shadow(0 0 2px var(--signal-green-bright)); 
        opacity: 0.4;
        fill: var(--signal-green-bright);
    }
    100% { 
        filter: drop-shadow(0 0 12px var(--signal-green-bright)); 
        opacity: 1;
        fill: var(--signal-green);
    }
}

.selectable-target {
    cursor: cell !important;
}

/* ==================== RE-DESPACHO POPUP ==================== */
.re-despacho-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
}

.re-despacho-modal {
    background: var(--bg-base);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    color: white;
    text-align: center;
}

.re-despacho-modal h3 {
    margin-top: 0;
    color: var(--signal-green-bright);
    font-size: 18px;
}

.re-despacho-modal p {
    color: var(--text-mid);
    font-size: 14px;
    line-height: 1.5;
}

.re-despacho-modal .actions {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.btn-primary {
    background: var(--accent);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;
}

.btn-primary:hover {
    background: var(--accent-deep);
}

button#btn-redespacho-ok {
    background: var(--signal-green-deep);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 600;
}

button#btn-redespacho-ok:hover {
    background: var(--signal-green-deep);
}

/* ==================== SINAL FLASHING & SELECTION ==================== */
.flashing {
    animation: flash-animation 1s infinite;
    cursor: pointer;
}

@keyframes flash-animation {
    0% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0.3; filter: brightness(2); }
    100% { opacity: 1; filter: brightness(1); }
}

.selectable-target {
    cursor: pointer;
    filter: drop-shadow(0 0 5px var(--accent));
}

.selected {
    filter: drop-shadow(0 0 8px var(--signal-green-bright));
    stroke-width: 3px;
}

/* Ensure signal icons are visible when flashing */
.flashing circle, .flashing path, .selectable-target circle, .selectable-target path {
    stroke: var(--accent) !important;
    stroke-width: 2px;
}

/* ==================== TREM AGUARDANDO DESTINO (FLASHING) ==================== */
@keyframes train-waiting-blink {
    0%, 100% {
        fill: var(--signal-red-bright); /* Vermelho vibrante */
        opacity: 1;
    }
    50% {
        fill: var(--signal-amber); /* Âmbar */
        opacity: 0.5;
    }
}

.trem-aguardando-destino .element-id-label,
.trem-aguardando-destino .label-id {
    animation: train-waiting-blink 1.2s infinite !important;
    font-weight: bold !important;
}

/* ==================== MODAL DE EXERCÍCIOS ==================== */
#exercise-modal {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modal-fade-in 0.25s ease-out;
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.exercise-modal-content {
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px;
    width: 480px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: var(--shadow-panel);
    animation: content-scale-in 0.18s ease-out;
}

@keyframes content-scale-in {
    from { transform: scale(0.98); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.exercise-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
}

.exercise-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-hi);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.exercise-modal-close {
    cursor: pointer;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-mid);
    transition: color 0.2s, transform 0.2s;
    line-height: 1;
}

.exercise-modal-close:hover {
    color: var(--text-hi);
    transform: scale(1.1);
}

#exercise-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    max-height: 50vh;
    padding-right: 4px;
}

#exercise-list::-webkit-scrollbar {
    width: 6px;
}

#exercise-list::-webkit-scrollbar-track {
    background: var(--bg-deep);
    border-radius: var(--radius-sm);
}

#exercise-list::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: var(--radius-sm);
}

#exercise-list::-webkit-scrollbar-thumb:hover {
    background: var(--line-hover);
}

.exercise-card {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.exercise-card:hover {
    background: var(--line);
    border-color: var(--line-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.exercise-card-title {
    color: var(--signal-green-bright);
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 4px;
}

.exercise-card-desc {
    color: var(--text-mid);
    font-size: 12px;
    line-height: 1.4;
}

/* ==================== LOADING OVERLAY ==================== */
#loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500;
}

#loading-status {
    background: var(--surface-1);
    border: 1px solid var(--line);
    padding: 16px 32px;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    animation: pulse-opacity 2s infinite ease-in-out;
}

@keyframes pulse-opacity {
    0%   { opacity: .4; }
    50%  { opacity: 1; }
    100% { opacity: .4; }
}

/* ==================== IDENTIDADE / MARCA ==================== */
button { font-family: var(--sans); }

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
    width: 30px; height: 30px; flex: none;
    display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: linear-gradient(160deg, var(--surface-2), var(--surface-1));
    color: var(--signal-green);
}
.brand h1 {
    margin: 0; font-size: 14px; font-weight: 700;
    letter-spacing: .14em; color: var(--text-hi); white-space: nowrap;
}
.brand h1 small {
    display: block; font-size: 10px; font-weight: 500;
    letter-spacing: .18em; color: var(--text-low); text-transform: uppercase;
}

select, .header-btn { font-size: 12.5px; }
select {
    padding: 6px 10px; border-radius: var(--radius);
    background: var(--surface-2); color: var(--text-hi);
    border: 1px solid var(--line); cursor: pointer;
}
select:hover { border-color: var(--accent-deep); }

.header-btn {
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-hi);
    padding: 7px 13px; border-radius: var(--radius);
    cursor: pointer; font-weight: 600;
    transition: background .15s ease, border-color .15s ease;
}
.header-btn:hover { background: var(--line-hover); border-color: var(--accent-deep); }
.header-btn:active { transform: translateY(1px); }

.icon-btn {
    background: var(--surface-2); border: 1px solid var(--line);
    color: var(--text-hi); width: 30px; height: 30px;
    border-radius: var(--radius); cursor: pointer; font-size: 13px;
    display: inline-grid; place-items: center;
    transition: background .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: var(--line-hover); border-color: var(--accent-deep); }

/* Relógio simulado — o instrumento central do painel */
#sim-clock-panel {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-deep);
    padding: 6px 18px; border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: inset 0 2px 8px rgba(0,0,0,.5);
}
#sim-clock {
    font-family: var(--mono); font-size: 22px; font-weight: 500;
    color: var(--signal-green);
    letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.clock-label {
    font-size: 9px; letter-spacing: .2em; color: var(--text-low);
    text-transform: uppercase; font-weight: 600; line-height: 1.2;
}
.instr-clock-controls {
    display: flex; align-items: center; gap: 8px;
    border-left: 1px solid var(--line); padding-left: 12px;
}
.speed-group { display: flex; align-items: center; gap: 6px; margin-left: 8px; }
.speed-group .speed-label { font-size: 11px; color: var(--text-mid); letter-spacing: .04em; }
.speed-group select { color: var(--signal-green); font-family: var(--mono); padding: 4px 8px; }

/* Sala + status são visíveis a todos os papéis; menu e controles de tempo são so-instrutor */
.header-right {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface-1);
    padding: 6px 14px; border-radius: var(--radius-lg);
    border: 1px solid var(--line);
}
.instr-actions {
    position: relative; display: flex; gap: 6px;
    border-left: 1px solid var(--line); padding-left: 12px;
}

.acoes-menu {
    display: none; position: absolute; top: calc(100% + 6px); right: 0;
    z-index: 1001; min-width: 210px;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 6px; flex-direction: column; gap: 2px;
    box-shadow: var(--shadow-panel);
}
.instr-actions.acao-open .acoes-menu { display: flex; }
.acoes-menu-select-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 10px 10px; margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
}
.acoes-menu-select-item label {
    font-size: 11px; color: var(--text-mid); font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
}
.acoes-menu-select-item select { flex: 1; min-width: 0; }
.acoes-menu-item {
    background: transparent; border: none; color: var(--text-hi);
    text-align: left; padding: 8px 10px; border-radius: var(--radius);
    cursor: pointer; font-size: 12.5px; font-weight: 600;
    letter-spacing: .02em;
    transition: background .12s ease;
}
.acoes-menu-item:hover { background: var(--line-hover); }
.acoes-menu-item.is-recording {
    color: var(--signal-red-bright);
}
.acoes-menu-item.is-recording::before {
    content: ""; display: inline-block; width: 7px; height: 7px;
    border-radius: 50%; background: var(--signal-red);
    margin-right: 7px; animation: blink-lost 1s infinite;
}

/* Indicador de enlace — LED de estado sólido, sem animação decorativa */
#heartbeat-wrap { display: flex; align-items: center; gap: 9px; }
.status-label {
    font-size: 10px; color: var(--text-mid); font-weight: 700;
    letter-spacing: .18em;
}
.conn-bar-container {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
}
.conn-bar-fill {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--signal-green);
    box-shadow: 0 0 5px var(--signal-green);
}
.conn-bar-fill.disconnected {
    background: var(--signal-red);
    box-shadow: 0 0 5px var(--signal-red);
    animation: blink-lost 1s infinite;
}
@keyframes blink-lost {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* ==================== CANVAS — grade de fundo ==================== */
#railway-canvas {
    width: 100%; height: 100%; display: block;
    cursor: grab;
    background:
        linear-gradient(rgba(35,55,86,.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(35,55,86,.10) 1px, transparent 1px),
        var(--bg-deep);
    background-size: 44px 44px, 44px 44px, auto;
}
#railway-canvas:active { cursor: grabbing; }

/* ==================== OVERLAY "AGUARDANDO MALHA" ==================== */
#no-layout-overlay {
    position: fixed; inset: 60px 0 0 0; z-index: 400;
    background: rgba(7,11,18,.85); backdrop-filter: blur(10px);
    align-items: center; justify-content: center; flex-direction: column;
    gap: 18px;
}
.wait-title { font-size: 16px; font-weight: 600; color: var(--text-hi); letter-spacing: .02em; }
.wait-sub { font-size: 13px; color: var(--text-low); }
.wait-track {
    width: 220px; height: 2px; border-radius: var(--radius-sm);
    background: repeating-linear-gradient(90deg, var(--line) 0 14px, transparent 14px 22px);
    position: relative; overflow: visible; margin-top: 6px;
}
.wait-track::after {
    content: ""; position: absolute; top: -3px; left: 0;
    width: 26px; height: 8px; border-radius: var(--radius-sm);
    background: var(--accent);
    animation: ride-track 3.2s infinite ease-in-out;
}
@keyframes ride-track {
    0%   { left: 0; }
    50%  { left: calc(100% - 26px); }
    100% { left: 0; }
}

#no-layout-modal-box {
    background: #0b111e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    width: 90%;
    max-width: 600px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: modal-zoom-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modal-zoom-in {
    0% { transform: scale(0.92); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.modal-header-simple {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 12px;
    text-align: center;
}
.modal-title-simple {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.modal-body-simple {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#instructor-layout-select-container {
    display: none;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 8px;
    max-width: 500px;
}
.layout-card-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md, 8px);
    width: 180px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.layout-card-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 122, 204, 0.25);
}
.layout-card-icon {
    font-size: 28px;
}
.layout-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-hi);
    letter-spacing: .01em;
}
.layout-card-file {
    font-size: 11px;
    color: var(--text-low);
}


/* ==================== SINALIZAÇÃO DE UI (rótulos piscantes) ==================== */
@keyframes blink-animation { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.blink-prefix { animation: blink-animation 1s infinite; }
@keyframes blink-red-animation {
    0%, 100% { fill: var(--signal-red); opacity: 1; }
    50%      { fill: var(--signal-red); opacity: .3; }
}
.blink-red { animation: blink-red-animation 1s infinite; }

/* ==================== LOGIN ==================== */
#connection-overlay {
    position: fixed; inset: 0; z-index: 9998;
    align-items: center; justify-content: center;
    background:
        linear-gradient(rgba(35,55,86,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(35,55,86,.08) 1px, transparent 1px),
        var(--bg-deep);
    background-size: 44px 44px, 44px 44px, auto;
}
.login-card {
    background: linear-gradient(180deg, var(--surface-1), var(--surface-1b));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 30px; width: 360px;
    box-shadow: var(--shadow-panel);
}
.login-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.login-head .brand-mark { width: 38px; height: 38px; }
.login-title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .1em; }
.login-sub { margin: 0 0 20px; font-size: 12px; color: var(--text-low); }
.field { margin-bottom: 12px; }
.field label {
    display: block; font-size: 10.5px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-mid); margin-bottom: 5px;
}
.field input {
    width: 100%; padding: 10px 12px;
    background: var(--bg-deep); border: 1px solid var(--line);
    color: var(--text-hi); border-radius: var(--radius); font-size: 13.5px;
    font-family: var(--sans);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder { color: var(--text-low); }
.field input:focus {
    border-color: var(--accent-deep);
    box-shadow: 0 0 0 3px rgba(79,184,255,.12);
    outline: none;
}
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }
#conn-erro { color: var(--signal-red); font-size: 12px; min-height: 15px; margin: 2px 0 10px; }
.login-actions { display: flex; gap: 8px; }
#conn-btn {
    flex: 1; padding: 11px;
    background: var(--accent-deep);
    color: #fff; border: 1px solid var(--accent-deep); border-radius: var(--radius);
    cursor: pointer; font-size: 14px; font-weight: 700; letter-spacing: .04em;
    transition: filter .15s ease, transform .1s ease;
}
#conn-btn:hover { filter: brightness(1.12); }
#conn-btn:active { transform: translateY(1px); }

/* ==================== PAINEL DO INSTRUTOR ==================== */
.instr-section {
    padding: 9px 14px; border-bottom: 1px solid var(--line-soft);
    font-weight: 700; font-size: 10.5px; letter-spacing: .14em;
    background: var(--surface-1b);
}
.instr-section.operadores { color: var(--accent); }
#instr-operadores { flex: 1; overflow-y: auto; }

/* ==================== ALERTAS DE DESTINO ==================== */
#alert-bottom-bar {
    position: fixed; bottom: 22px; left: 22px; z-index: 1500;
    flex-direction: column-reverse; align-items: flex-start;
    font-family: var(--sans);
}
#alert-header {
    padding: 11px 18px; display: flex; justify-content: center; align-items: center;
    gap: 8px; cursor: pointer; pointer-events: auto;
    color: var(--signal-amber); font-weight: 700; font-size: 13px;
    border: 1px solid rgba(245,184,61,.5); border-radius: var(--radius-lg);
    background: var(--surface-1);
    animation: alert-pulse 1.6s infinite;
    transition: filter .15s ease;
}
#alert-header:hover { filter: brightness(1.15); }
@keyframes alert-pulse {
    0%, 100% { background: var(--surface-1); }
    50%      { background: #3a2a0e; }
}
#alert-list-container {
    display: none; max-height: 250px; overflow-y: auto;
    background: rgba(11,18,32,.96); backdrop-filter: blur(8px);
    padding: 10px; gap: 8px; flex-direction: column;
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    margin-bottom: 10px; width: 290px;
    box-shadow: var(--shadow-panel); pointer-events: auto;
}

/* ==================== ACESSIBILIDADE ==================== */
@media (prefers-reduced-motion: reduce) {
    .conn-bar-fill.disconnected, .wait-track::after,
    #alert-header, .blink-prefix, .blink-red { animation: none !important; }
}
@media (max-width: 920px) {
    .clock-label { display: none; }
    .brand h1 small { display: none; }
}

/* ==================== CAMPOS DE FORMULÁRIO EM MODAIS ==================== */
/* Substitui os estilos inline repetidos em cada campo dos modais de instrutor. */
.field-inline { display: block; font-size: 12px; color: var(--text-mid); }
.field-inline input,
.field-inline select,
.field-inline textarea,
.input-inline {
    width: 100%; margin-top: 4px; padding: 6px 8px;
    border-radius: var(--radius); border: 1px solid var(--line);
    background: var(--surface-1); color: var(--text-hi);
    font-family: var(--sans); font-size: 13px;
}
.field-inline textarea { resize: vertical; }
.modal-section-label { font-size: 12px; color: var(--text-mid); margin-top: 4px; }
.modal-row { padding: 12px 16px; display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.modal-body { padding: 12px 16px; max-height: 60vh; overflow: auto; }
.modal-footer { padding: 0 16px 16px; display: flex; justify-content: flex-end; gap: 8px; }
.mini-btn {
    font-size: 11px; padding: 4px 8px;
    background: var(--surface-2); border: 1px solid var(--line);
    color: var(--text-hi); border-radius: var(--radius); cursor: pointer;
}
.mini-btn:hover { background: var(--line-hover); }
.frota-inp, .ex-cdv, .ex-sentido, .ex-frota, .ex-destino, .usr-editar-papel {
    background: var(--surface-1); border: 1px solid var(--line);
    color: var(--text-hi); border-radius: var(--radius);
    font-family: var(--sans); padding: 5px 8px;
}
.modal-error-text { color: var(--signal-red-bright); font-size: 12px; padding: 0 16px; min-height: 14px; }

/* ==================== BARRA DE REPLAY FLUTUANTE ==================== */
#replay-controls-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.85); /* Slate escuro com transparência */
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

#replay-controls-bar.hidden {
    display: none !important;
}

.replay-bar-content {
    display: flex;
    align-items: center;
    gap: 24px;
}

.replay-status-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: 20px;
}

.replay-badge {
    background: var(--signal-red-bright, #ef4444);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
    font-family: var(--font-sans);
    animation: replay-badge-pulse 2s infinite;
}

#replay-bar-session-name {
    color: var(--text-hi);
    font-weight: 500;
    font-size: 13px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.replay-bar-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.replay-bar-buttons .control-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-hi);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.replay-bar-buttons .control-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.replay-bar-buttons .control-btn:active {
    transform: scale(0.95);
}

.replay-bar-buttons .control-btn.active {
    background: var(--accent, #4f46e5);
    border-color: var(--accent, #4f46e5);
    color: white;
    box-shadow: 0 0 12px rgba(79, 70, 229, 0.4);
}

#replay-bar-play.active {
    background: #10b981 !important; /* Green for play active */
    border-color: #10b981 !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

#replay-bar-pause.active {
    background: #f59e0b !important; /* Amber for pause active */
    border-color: #f59e0b !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

@keyframes replay-badge-pulse {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 2px rgba(239, 68, 68, 0.4)); }
    50%      { opacity: 0.7; filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.8)); }
}