:root {
    --primary-accent: #0f172a;
    --secondary-accent: #FFCD28;
    --bg-surface: #f8fafc;
    --border-color: #FFCD28;
    --editable-border: #1e293b;
    --focus-ring: #5f4900;
    --app-muted: #0f253a;
    --backgroundCodigos: #0f0f0f;
    }

    body {
            background-color: #f1f5f9;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            color: #334155;
           
        }
        .config-card {
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            background-color: #ffffff;
        }
        .code-output {
            background-color: var(--backgroundCodigos);
            color: #d4d4d4;
            font-family: 'Courier New', Courier, monospace;
            border-radius: 8px;
            padding: 15px;
            position: relative;
        }
        .copy-btn {
            position: absolute;
            top: 10px;
            right: 10px;
        }


   

    
    .main-card {
      border: none;
      border-radius: 12px;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
      background: #ffffff;
     
      overflow: hidden;
    }

    

    .grid-container {
      max-height: 72vh;
      overflow: auto;
      position: relative;
    }

    table.custom-table {
      border-collapse: separate;
      border-spacing: 0;
      width: 100%;
    }

    table.custom-table th {
      position: sticky;
      top: 0;
      z-index: 20;
      background: #f8fafc;
      border-bottom: 2px solid var(--border-color);
      font-weight: 600;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #64748b;
      padding: 10px 6px;
      text-align: center;
      user-select: none;
    }

    /* Editable Columns Container Styling */
    .th-editable-group {
      background-color: #FFCD28 !important;
      color: #0f172a !important;
      border-top: 3px solid #0f172a !important;
    }

    .th-output-group {
      background-color: #ffcd283d !important;
      color: #201E1E !important;
      border-top: 3px solid #FFCD28 !important;
    }

    .row-num-col {
      width: 50px;
      background-color: #f8fafc;
      color: #94a3b8;
      font-size: 0.75rem;
      font-weight: 600;
      text-align: center;
      vertical-align: middle;
      border-right: 1px solid var(--border-color);
      user-select: none;
    }

    /* Grid Cell Custom Styles */
    .custom-table td {
      border-bottom: 1px solid #e2e8f0;
      border-right: 1px solid #e2e8f0;
      padding: 0;
      vertical-align: middle;
      height: 34px;
    }

    /* Visual boundary for editable area */
    .editable-start {
      border-left: 2px solid var(--editable-border) !important;
    }
    .editable-end {
      border-right: 2px solid var(--editable-border) !important;
    }

    /* Inputs styled as seamless grid cells */
    .cell-input {
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      background: transparent;
      text-align: center;
      font-size: 0.85rem;
      font-weight: 500;
      color: #1e293b;
      transition: background 0.15s ease;
    }

    .cell-input:focus {
      background-color: #ffcd2865;
      box-shadow: inset 0 0 0 2px var(--focus-ring);
    }

    .cell-input.invalid-ms {
      background-color: #fef2f2 !important;
      color: #dc2626 !important;
      font-weight: bold;
    }

    /* Custom Checkbox Design */
    .cell-checkbox-container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      cursor: pointer;
    }

    .cell-checkbox-container:focus-within {
      background-color: #e0f2fe;
      box-shadow: inset 0 0 0 2px var(--focus-ring);
    }

    .cell-checkbox {
      width: 16px;
      height: 16px;
      cursor: pointer;
      accent-color: #FFCD28;
    }

    /* Output Columns Styling */
    .output-cell {
      background-color: #f8fafc;
      font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
      font-size: 0.8rem;
      font-weight: 600;
      color: #FFCD28;
      padding-left: 12px;
      user-select: text;
    }

    .comment-cell {
      background-color: #f8fafc;
      font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
      font-size: 0.8rem;
      font-weight: 600;
      color: #059669;
      padding-left: 12px;
      user-select: text;
    }

    /* Styles for inactive/truncated rows after last FIM */
    tr.row-truncated td {
      opacity: 0.35;
      background-color: #f1f5f9 !important;
    }
    
    tr.row-truncated .output-cell,
    tr.row-truncated .comment-cell {
      color: #94a3b8 !important;
    }

    .bit-badge {
      font-size: 0.65rem;
      font-weight: normal;
      display: block;
      color: #64748b;
    }

    .sticky-actions {
      background-color: #ffffff;
      border-top: 1px solid var(--border-color);
      padding: 1rem 2rem;
    }


    #conteudo {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            min-height: 50px;
            white-space: pre-wrap; /* Mantém as quebras de linha do texto original */
        }

       
        .hero {
            position: relative;
            overflow: hidden;
           /* border: 1px solid rgba(55, 73, 4, 0.7);*/
            border-radius: 22px;
            background: linear-gradient(177deg, #201E1E 75%, #FFCD28 95% );            
            box-shadow: 5px 5px 10px 5px rgba(32, 30, 30, 0.3);
            color: rgba(255, 204, 37, 0.9);
        }

        .hero::after {
            content: "";
            position: absolute;
            width: 260px;
            height: 260px;
            right: -120px;
            top: -120px;
            border-radius: 50%;
            box-shadow: 5px 5px 10px 5px rgba(32, 30, 30, 0.3);
            background: rgba(32, 30, 30, 1);
            background-image: url('img/logoFlash.png');             
            background-repeat: no-repeat;
            background-position: left bottom;
            opacity: 0.2;
        }

        .divRodape{
            margin-right: auto; 
            margin-left: auto; 
            background: linear-gradient(3deg, #201E1E , #FFCD28  );
            width: 100%;
        }

        .hero-icon {
            width: 58px;
            height: 58px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            border-color: #575656;
            border-width: 1px;
            border-style: solid;
            /*box-shadow: 0px 0px 5px 1px rgba(255, 204, 37, 0.795);*/
            background: linear-gradient(0deg, #201E1E 0%, #201E1E 55%, #FFCD28 100%);
            font-size: 1.65rem;
            flex-shrink: 0;
        }

        .hero code {
            color: #dfdcdc;
        } 

        .card {
            border: 1px solid var(--app-border);
            border-radius: 18px;
            box-shadow: 0 10px 30px rgba(15, 23, 42, .07);
            overflow: hidden;
        }

        .card-header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--app-border);
            background: #fff;
            /*background: var(--bs-tertiary-bg);*/
        }

        .section-number {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            background: #FFCD28;
            color: var(--app-primary-dark);
            font-weight: 800;
        }

        .form-label {
           color: #334155;
           margin-bottom: .45rem;
        }

        .form-control {
            border-color: #dbe3ee;
            border-radius: 10px;
            min-height: 44px;
        }

        /* Campo de arquivo: o botão "Escolher arquivo" ocupa toda a altura mínima do campo */
        .form-control[type="file"] {
            padding-top: 0;
            padding-bottom: 0;
            line-height: 42px;
        }

        .form-control[type="file"]::file-selector-button {
            height: 42px;
            margin-top: 0;
            margin-bottom: 0;
            padding-top: 0;
            padding-bottom: 0;
        }

        .form-control:focus {
            border-color: #FFCD28;
            box-shadow: 0 0 0 .22rem rgba(37, 99, 235, .12);
        }

        .input-group-text {
            border-color: #FFCD28;
            background: #f8fafc;
            color: var(--app-muted);
        }

        .form-control::placeholder {
        color: #FFCD28;
        opacity: 1;
        }

        textarea.code-area {
            min-height: 180px;
            resize: vertical;
            font-family: "Cascadia Code", "Consolas", "Courier New", monospace;
            font-size: .86rem;
            line-height: 1.55;
            background-color: var(--backgroundCodigos);
            color: #dbeafe;
            border: 0;
            border-radius: 12px;
            tab-size: 4;
        }

        textarea.code-area:focus {
            background: #0f172a;
            color: #dbeafe;
            box-shadow: 0 0 0 .22rem rgba(37, 99, 235, .15);
        }

        .code-wrapper {
            padding: 4px;
            border-radius: 14px;
            color: #dbeafe;
            background-color: var(--backgroundCodigos);
        }

        #outputContent {
            min-height: 430px;
        }

        .btn {
            border-radius: 10px;
            font-weight: 600;
            min-height: 42px;
        }

        .divParaConfis{
            border: 1px solid #dee2e6;
            height: 100% !important;
            padding: 1rem !important;
            border-radius:  0.375rem !important;
            background-color: rgba(248, 249, 250, 1) !important;
        }

        .bordasDivsPadrao{
            border: 1px solid #dee2e6;
            border-radius:  0.375rem !important;
            background-color: rgba(248, 249, 250, 1) !important;
        }
        

        .process-btn {
            min-width: 250px;
            box-shadow: 0 8px 18px rgba(37, 99, 235, .20);
        }

        .file-drop {
            border: 1.5px dashed #cbd5e1;
            border-radius: 12px;
            background: #f8fafc;
            padding: 12px;
        }

        .file-drop:hover {
            border-color: #FFCD28;
            background: #ffcd2846;
        }

        .hint {
            color: var(--app-muted);
            font-size: .82rem;
        }

        .status {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            padding: .38rem .7rem;
            border-radius: 999px;
            background: #f1f5f9;
            color: #64748b;
            font-size: .78rem;
            font-weight: 600;
        }

        .status.ready {
            background: #dcfce7;
            color: #166534;
        }

        .status.error {
            background: #fee2e2;
            color: #991b1b;
        }

        .footer-note {
            color: #94a3b8;
            font-size: .78rem;
        }

        @media (max-width: 767.98px) {
            body {
                padding-top: 1rem !important;
            }

            .hero {
                border-radius: 16px;
            }

            .hero h1 {
                font-size: 1.45rem;
            }

            .process-btn {
                width: 100%;
            }

            #outputContent {
                min-height: 300px;
            }
        }


        .status-fp-vd {
        width: 125px;
        display: inline-flex;
        align-items: center;
        justify-content: center;

        padding: 0.375rem 0.75rem;
        min-height: 38px;

        border: 1px solid #00381e;
       
        border-radius: 0.5rem;

        color: #056d3d;        

        font-size: 1rem;
        font-weight: 500;

        user-select: none;
        cursor: default;
        }

        .status-fp-vm{
            width: 125px;
             display: inline-flex;
        align-items: center;
        justify-content: center;

        padding: 0.375rem 0.75rem;
        min-height: 38px;

        border: 1px solid #a00000;
        background-color: #ad0000;        
        border-radius: 0.5rem;

        color: #ff0101;

        font-size: 1rem;
        font-weight: 500;

        user-select: none;
        cursor: default;
        }




    .channel {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #6c757d;
      transition: background-color 0.1s ease;
    }
    .channel.active {
      background-color: #fdda14;
    }
    .code-preview {
      background-color: #1e1e1e;
      color: #d4d4d4;
      font-family: 'Courier New', Courier, monospace;
      max-height: 200px;
      overflow-y: auto;
      text-align: left;
    }
    
    .btn-pattern{
        margin: 5px;
    }

    .tab-content{
        color: #000;
    }

    .nav-link  {
    color: #2e2d2d;             /* Replace with your choice text color */
    background: #eeecec;
    border: solid #000  1px;
    /*background-color: #003163;  /* Optional: Replace with background color */
    /*background: linear-gradient(180deg, #fafafa 0%, #dadada 50%, #fafafa 100%); 
    */
    }  

    .nav-item{
       margin: 3px;
    }

    .nav-link:hover{
    color: #FFCD28; 
     background: #201E1E;   
    }

    .nav-link:active{
         background: #FFCD28;  
             color: #201E1E; 

    }

    .nav-item.show .nav-link, .nav-tabs .nav-link.active{
        background: #FFCD28;  
             color: #201E1E; 
             font-weight: bold;
    }
    


    .text-Flash{
        color: #FFCD28;
    }

    .bg-Flash{
        background-color: #FFCD28;
    }

     
    /* Colunas Texto Saída / Comentário ocultáveis */
    table.custom-table.saida-oculta .col-saida {
      display: none;
    }

    /* ===== Layout em tela cheia: a página não rola, só o conteúdo ===== */
    html, body.app-shell {
      height: 100%;
    }

    body.app-shell {
      overflow: hidden;
      padding: 0 0 0.75rem;
    }

    .app-main {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    /* ===== Cabeçalho: faixa cheia no topo ===== */
    .topbar {
      flex-shrink: 0;
      min-height: 52px;
      margin: 0 -1.5rem;            /* anula o px-4 do container: ocupa a largura toda */
      padding: 0 1.5rem;
      background: linear-gradient(180deg, #201E1E 0%, #2b2828 100%);
      border-bottom: 3px solid #FFCD28;
      color: #f1f1f1;
    }

    .topbar-brand {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding-right: 1.25rem;
      margin-right: 0.25rem;
      border-right: 1px solid rgba(255, 255, 255, 0.15);
      align-self: center;
    }

    /* Logo escuro fica branco sobre o fundo cinza */
    .topbar-brand img {
      height: 26px;
      filter: brightness(0) invert(1);
    }

    .topbar-brand .titulo {
      font-weight: 700;
      font-size: 1.05rem;
      letter-spacing: 0.02em;
      color: #fff;
    }

    .topbar-brand .badge {
      font-size: 0.65rem;
      vertical-align: middle;
    }

    /* Abas: texto simples, a ativa ganha sublinhado amarelo */
    .topbar .nav-tabs {
      border-bottom: none;
      align-self: stretch;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: thin;
    }

    .topbar .nav-item {
      margin: 0;
    }

    .topbar .nav-link {
      height: 100%;
      display: flex;
      align-items: center;
      white-space: nowrap;
      padding: 0 1rem;
      margin: 0;
      color: rgba(255, 255, 255, 0.7);
      background: transparent;
      border: none;
      border-radius: 0;
      border-bottom: 3px solid transparent;
      margin-bottom: -3px;          /* sublinhado encosta na faixa amarela */
      transition: color .15s, background-color .15s;
    }

    .topbar .nav-link:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.06);
    }

    .topbar .nav-tabs .nav-link.active,
    .topbar .nav-link:active {
      color: #FFCD28;
      background: rgba(255, 205, 40, 0.08);
      border-bottom-color: #FFCD28;
      font-weight: 600;
    }

    .topbar-versao {
      align-self: center;
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.45);
    }

    .tab-content {
      flex: 1;
      min-height: 0;
    }

    /* Abas comuns: o conteúdo rola dentro da área */
    .tab-content > .tab-pane {
      height: 100%;
      overflow: auto;
    }

    /* Aba Flash Pattern: a tabela ocupa o espaço restante */
    #aba1.active {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .tabelator-card {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .tabelator-card .grid-wrap {
      flex: 1;
      min-height: 0;
      display: flex;
      gap: 6px;
    }

    .tabelator-card .grid-container {
      flex: 1;
      min-width: 0;
      min-height: 0;
      max-height: none;
    }

    /* Linhas da tabela mais compactas */
    .custom-table td {
      height: 25px;
    }

    table.custom-table th {
      padding: 6px 6px;
    }

    @media (max-width: 767.98px) {
      body.app-shell {
        overflow: auto;
        height: auto;
      }

      .app-main,
      .tab-content > .tab-pane {
        height: auto;
      }
    }

    /* ===== Tabelator: visual da tabela ===== */

    /* Barra de ferramentas: botões compactos e uniformes */
    .tabelator-card .header-panel .btn {
      min-height: 32px;
      border-radius: 8px;
      padding: 0.25rem 0.75rem;
      font-size: 0.8rem;
      border: 1px solid #dbe1e8;
      background: #fff;
      color: #334155;
      transition: background-color .15s, border-color .15s, color .15s;
    }

    .tabelator-card .header-panel .btn:hover {
      background: #f8fafc;
      border-color: #FFCD28;
      color: #201E1E;
    }

    .tabelator-card .header-panel .btn i {
      color: #8a94a3;
    }

    .tabelator-card .header-panel .btn:hover i {
      color: #201E1E;
    }

    /* Ações principais (importar / colar) com o cinza original */
    .tabelator-card .header-panel .btn-secondary {
      background: #3f4448;
      border-color: #3f4448;
      color: #fff;
    }

    .tabelator-card .header-panel .btn-secondary i {
      color: #fff;
    }

    .tabelator-card .header-panel .btn-secondary:hover {
      background: #201E1E;
      border-color: #201E1E;
      color: #fff;
    }

    .tabelator-card .header-panel .btn-secondary:hover i {
      color: #fff;
    }

    .tabelator-card .header-panel .btn.text-danger:hover {
      background: #fef2f2;
      border-color: #fca5a5;
    }

    .tabelator-card .header-panel .btn.text-danger i {
      color: inherit;
    }

    .tabelator-card .status-fp-vd,
    .tabelator-card .status-fp-vm {
      min-height: 32px;
      width: auto;
      padding: 0.25rem 0.75rem;
      font-size: 0.8rem;
      border-radius: 8px;
    }

    /* Contêiner da tabela com borda suave */
    .tabelator-card .grid-container {
      border: 1px solid #e2e8f0;
      border-radius: 10px;
    }

    /* Bordas: cinza claro no lugar do preto */
    .custom-table td {
      border-bottom: 1px solid #edf0f4;
      border-right: 1px solid #edf0f4;
    }

    table.custom-table th {
      border-bottom: 1px solid #e2e8f0;
      border-right: 1px solid #edf0f4;
    }

    table.custom-table thead tr:last-child th {
      border-bottom: 1px solid #d5dbe3;
    }

    .editable-start {
      border-left: 1px solid #d5dbe3 !important;
    }

    .editable-end {
      border-right: 1px solid #d5dbe3 !important;
    }

    .th-editable-group {
      background-color: #201E1E !important;
      color: #FFCD28 !important;
      border-top: none !important;
      font-size: 0.7rem !important;
    }

    table.custom-table thead tr:first-child th.row-num-col {
      background-color: #201E1E;
      color: #8a94a3;
    }

    table.custom-table thead tr:last-child th {
      background-color: #f4f6f9;
      color: #475569;
    }

    .th-output-group {
      border-top: none !important;
    }

    .row-num-col {
      border-right: 1px solid #e2e8f0;
    }

    /* Linhas alternadas e hover */
    .custom-table tbody tr:nth-child(even) td {
      background-color: #fbfcfd;
    }

    .custom-table tbody tr:hover td {
      background-color: #f1f4f8;
    }

    /* Linha selecionada (com foco em alguma célula) */
    .custom-table tbody tr:focus-within td {
      background-color: #e8edf3;
    }

    .custom-table tbody tr:focus-within td.row-num-col {
      background-color: #201E1E;
      color: #FFCD28;
      font-weight: 700;
    }

    /* Célula em edição */
    .cell-input:focus {
      background-color: #ffe08a;
      box-shadow: inset 0 0 0 3px #201E1E;
      font-weight: 700;
    }

    /* Destaca levemente a linha da célula selecionada */
    #tableBody tr:focus-within td {
      background-color: #fff8e1;
    }

    .cell-checkbox-container:focus-within {
      background-color: #fff;
      box-shadow: inset 0 0 0 2px #201E1E;
    }

    /* Bits ligados (valor 1) em destaque */
    .cell-input::placeholder {
      color: #cbd2db;
    }

    .cell-input.bit-active {
      color: #201E1E;
      font-weight: 700;
      background-color: #FFCD28;
    }

    .custom-table tbody tr:focus-within .cell-input.bit-active {
      background-color: #f5bf0f;
    }

    /* Botões mais fortes */
    .tabelator-card .header-panel .btn {
      font-weight: 700;
      min-height: 34px;
    }

    .tabelator-card .header-panel .btn.text-danger {
      border-color: #dc3545;
      color: #dc3545 !important;
    }

    .tabelator-card .header-panel .btn.text-danger:hover {
      background: #dc3545;
      border-color: #dc3545;
      color: #fff !important;
    }

    .tabelator-card .status-fp-vd,
    .tabelator-card .status-fp-vm {
      min-height: 34px;
      font-weight: 700;
      color: #fff;
    }

    .tabelator-card .status-fp-vd {
      background-color: #198754;
      border-color: #198754;
    }

    /* Aba lateral para mostrar/ocultar o texto de saída */
    .btn-saida-toggle {
      flex-shrink: 0;
      width: 28px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      background: #f4f6f9;
      color: #475569;
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      transition: background-color .15s, color .15s;
    }

    .btn-saida-toggle span {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
    }

    .btn-saida-toggle:hover,
    .btn-saida-toggle.aberto {
      background: #201E1E;
      border-color: #201E1E;
      color: #FFCD28;
    }

    /* ===== Abas dos Flash Patterns ===== */
    .fp-tabs {
      display: flex;
      align-items: flex-end;
      gap: 4px;
      overflow-x: auto;
      flex-shrink: 0;
      padding: 0 2px;
      border-bottom: 2px solid #201E1E;
      margin-bottom: 6px;
      scrollbar-width: thin;
    }

    .fp-tab {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 0.35rem 0.5rem 0.35rem 0.85rem;
      border: 1px solid #dbe1e8;
      border-bottom: none;
      border-radius: 8px 8px 0 0;
      background: #f4f6f9;
      color: #475569;
      font-size: 0.8rem;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      user-select: none;
      transition: background-color .15s, color .15s;
    }

    .fp-tab:only-of-type,
    .fp-tab:not(:has(.fp-tab-close)) {
      padding-right: 0.85rem;
    }

    .fp-tab:hover {
      background: #e8edf3;
      color: #201E1E;
    }

    .fp-tab.active {
      background: #201E1E;
      border-color: #201E1E;
      color: #FFCD28;
    }

    .fp-tab-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      padding: 0;
      border: none;
      border-radius: 4px;
      background: transparent;
      color: inherit;
      opacity: 0.55;
      font-size: 0.95rem;
    }

    .fp-tab-close:hover {
      opacity: 1;
      background: rgba(220, 53, 69, 0.85);
      color: #fff;
    }

    .fp-tab-add {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: 4px;
      margin-bottom: 4px;
      padding: 0.25rem 0.75rem;
      border: 1px dashed #b8900a;
      border-radius: 8px;
      background: #fffbea;
      color: #8a6a00;
      font-size: 0.78rem;
      font-weight: 700;
      white-space: nowrap;
    }

    .fp-tab-add:hover {
      background: #FFCD28;
      border-style: solid;
      border-color: #FFCD28;
      color: #201E1E;
    }

    /* Linha final "Adicionar linha" */
    .custom-table tbody tr.row-add td {
      height: 32px;
      background: #fff !important;
      border-right: none;
    }

    .btn-add-linha {
      width: 100%;
      height: 100%;
      border: none;
      background: transparent;
      color: #8a94a3;
      font-size: 0.78rem;
      font-weight: 600;
    }

    .btn-add-linha:hover {
      background: #f4f6f9;
      color: #201E1E;
    }

    /* Avisos do FP atual */
    .fp-aviso {
      flex-shrink: 0;
      margin-bottom: 6px;
      padding: 0.4rem 0.75rem;
      border: 1px solid #f5c26b;
      border-left: 4px solid #e8a317;
      border-radius: 8px;
      background: #fff8e6;
      color: #7a5200;
      font-size: 0.8rem;
    }

    .fp-tab-alerta {
      color: #e8a317;
      font-size: 0.75rem;
    }

    /* Tempo faltando numa linha que tem canais marcados */
    .cell-input.input-tempo.falta-tempo {
      box-shadow: inset 0 0 0 2px #e8a317;
      background-color: #fff8e6;
    }

    .cell-input.input-tempo.falta-tempo::placeholder {
      color: #e8a317;
    }

    /* Cabeçalho inteiro (faixa escura + nomes das colunas) fixo ao rolar */
    table.custom-table thead {
      position: sticky;
      top: 0;
      z-index: 20;
    }

    table.custom-table thead th {
      position: static;
    }

/* ---------- Aba Configurações ---------- */
.cfg-titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-accent);
  margin-bottom: 0.75rem;
}

.cfg-titulo i { color: #201E1E; }

.cfg-subtitulo {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 0.35rem;
  margin-bottom: 0.6rem;
}

.cfg-bloco {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  padding: 0.75rem 0.9rem;
}

.cfg-grid-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 1rem;
}

.cfg-switch .form-check-input:checked {
  background-color: var(--primary-accent);
  border-color: var(--primary-accent);
}

.cfg-faixa {
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 0.15rem;
}

/* Sistema/PWM sem nenhum campo habilitado aparece apagado */
.sys-card:not(:has(input:enabled)),
#conteudoPWM:not(:has(:is(input, select):enabled)) {
  opacity: 0.5;
}

.cfg-reservados { background: transparent; }

.cfg-grid-b {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.25rem;
  font-size: 0.75rem;
}

.cfg-page .code-output { font-size: 0.8rem; }

@media (max-width: 576px) {
  .cfg-grid-switch { grid-template-columns: 1fr; }
  .cfg-grid-b { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Configurações: campos em linha e código ocupando a coluna toda */
.cfg-campo {
  display: grid;
  grid-template-columns: 1fr 120px 80px;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.cfg-campo label { font-size: 0.85rem; }
.cfg-campo .cfg-faixa { margin-top: 0; text-align: right; }

.cfg-page .copy-btn {
  position: static;
  min-height: 0;
}

.cfg-page .code-output {
  flex: 1 1 auto;
  font-size: 0.85rem;
  overflow: auto;
}

.cfg-page .cfg-sanity .badge { white-space: normal; }

/* Arquivo de Texto: área de saída ocupa a altura disponível */
.txt-card { height: calc(100vh - 140px); }
.txt-card .code-output {
  flex: 1 1 auto;
  overflow: auto;
}
.txt-btn { min-height: 0; }

/* Transplante: log ocupa o resto da altura, sem scroll na página */
.tp-page { height: calc(100vh - 140px); }
.tp-log-card { min-height: 160px; }
.tp-page .log-wrapper {
  background-color: var(--backgroundCodigos);
  color: #d4d4d4;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.85rem;
  border-radius: 8px;
  padding: 15px;
  overflow: auto;
  min-height: 0;
}
.tp-page #log { white-space: pre-wrap; word-break: break-all; }
.tp-page .process-btn { min-height: 0; }

/* Disassembly: entrada e saída lado a lado, áreas de código ocupam a altura */
.ds-page { height: calc(100vh - 140px); }
.ds-area {
  flex: 1 1 auto;
  min-height: 120px;
  resize: none;
  background-color: var(--backgroundCodigos);
  color: #d4d4d4;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.8rem;
  border-radius: 8px;
}
.ds-area:focus { background-color: var(--backgroundCodigos); color: #d4d4d4; }
.ds-area::placeholder { color: #6b7280; }
.ds-btn, .ds-page .process-btn { min-height: 0; }
@media (max-width: 991px) {
  .ds-page { height: auto; }
  .ds-page > div { height: auto !important; }
  .ds-area { min-height: 260px; }
}

/* ===== Padrão de botões =====
   Primário  (amarelo): ação final da tela — processar, exportar, reproduzir, confirmar
   Secundário (grafite): ações de apoio — importar, colar, gerar GIF, carregar
   Neutro    (contorno): utilidades — copiar, salvar, baixar, cancelar
   Perigo    (vermelho): limpar / parar */
.btn {
  border-radius: 8px;
  min-height: 34px;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

.btn-primary {
  --bs-btn-bg: #FFCD28;
  --bs-btn-border-color: #FFCD28;
  --bs-btn-color: #201E1E;
  --bs-btn-hover-bg: #f5bf0f;
  --bs-btn-hover-border-color: #f5bf0f;
  --bs-btn-hover-color: #201E1E;
  --bs-btn-active-bg: #e0ad00;
  --bs-btn-active-border-color: #e0ad00;
  --bs-btn-active-color: #201E1E;
  --bs-btn-disabled-bg: #fde68a;
  --bs-btn-disabled-border-color: #fde68a;
  --bs-btn-disabled-color: #6b6250;
  --bs-btn-focus-shadow-rgb: 255, 205, 40;
}

.btn-secondary {
  --bs-btn-bg: #3f4448;
  --bs-btn-border-color: #3f4448;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #201E1E;
  --bs-btn-hover-border-color: #201E1E;
  --bs-btn-hover-color: #FFCD28;
  --bs-btn-active-bg: #201E1E;
  --bs-btn-active-border-color: #201E1E;
  --bs-btn-active-color: #FFCD28;
  --bs-btn-disabled-bg: #9ca3af;
  --bs-btn-disabled-border-color: #9ca3af;
}

.btn-outline-secondary {
  --bs-btn-bg: #fff;
  --bs-btn-color: #201E1E;
  --bs-btn-border-color: #3f4448;
  --bs-btn-border-width: 1.5px;
  font-weight: 600;
  --bs-btn-hover-bg: #fffbeb;
  --bs-btn-hover-color: #201E1E;
  --bs-btn-hover-border-color: #FFCD28;
  --bs-btn-active-bg: #fff3c4;
  --bs-btn-active-color: #201E1E;
  --bs-btn-active-border-color: #FFCD28;
}

.btn-danger {
  --bs-btn-bg: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-bg: #b91c1c;
  --bs-btn-hover-border-color: #b91c1c;
}

.process-btn { box-shadow: 0 6px 14px rgba(255, 205, 40, .30); }
.ds-btn { padding: 0.3rem 0.75rem; }

/* Ícone do botão neutro em amarelo escuro para destacar a ação */
.btn-outline-secondary i { color: #201E1E; }

/* LEDs da prévia de simulação */
.sim-leds { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem; }
.sim-led { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.sim-led span { font-size: 0.72rem; font-weight: 700; color: #64748b; letter-spacing: 0.03em; }

/* Prévia do FP numa faixa abaixo da tabela (compacta para não gerar scroll) */
.mini-sim {
  display: flex; align-items: center; justify-content: center; gap: 2rem;
  margin-top: 0.5rem; padding: 0.4rem 1rem;
  border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc;
}
.mini-sim .sim-leds { gap: 1.25rem; }
.mini-sim .sim-led { gap: 0.2rem; }
.mini-sim .sim-led span { font-size: 0.65rem; }
.mini-sim .channel { width: 40px; height: 40px; }
.mini-sim-ctrl { display: flex; align-items: center; gap: 0.35rem; }
.mini-sim-ctrl .btn { padding: 0.1rem 0.45rem; line-height: 1.2; }
.mini-sim-ctrl .mini-sim-play { width: 32px; height: 32px; padding: 0; border-radius: 50%; margin-left: 0.4rem; }
.mini-sim-fp { min-width: 2.6rem; text-align: center; font-weight: 700; color: #201E1E; }
.mini-sim-info { font-size: 0.8rem; color: #64748b; min-width: 4.5rem; }
.mini-sim-linha { font-weight: 700; color: #201E1E; }

/* Linha que a prévia está simulando */
#tableBody tr.linha-simulando td { box-shadow: inset 0 2px 0 #FFCD28, inset 0 -2px 0 #FFCD28; }
#tableBody tr.linha-simulando td.row-num-col { background: #FFCD28; color: #201E1E; font-weight: 700; }

/* Linha com FIM marcado: última linha do FP */
#tableBody tr.linha-fim td { border-bottom: 3px solid #201E1E !important; }
#tableBody tr.linha-fim td.row-num-col { background: #201E1E; color: #FFCD28; font-weight: 800; }

/* Configuração de módulos por canal (engrenagem no cabeçalho) */
.canal-cfg-info { display: block; font-size: 0.6rem; font-weight: 600; color: #94a3b8; }
th.canal-off { opacity: 0.55; }
td.canal-off { background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 4px, #e2e8f0 4px, #e2e8f0 8px) !important; }
td.canal-off .cell-input { opacity: 0.35; cursor: not-allowed; background: transparent; }
.cfg-canal-pop {
  position: absolute; z-index: 2000; width: 280px; padding: 0.75rem;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .15); font-size: 0.85rem;
}
.cfg-canais { width: 100%; text-align: center; }
.cfg-canais th { font-size: 0.7rem; color: #64748b; font-weight: 600; padding: 0 0.25rem 0.3rem; }
.cfg-canais td { padding: 0.15rem 0.25rem; }
.cfg-canais select { width: 60px; margin: 0 auto; }

/* Módulos no rodapé: grupos por canal, cada módulo é um LED */
.grupo-canal .modulos { display: flex; gap: 0.3rem; }
.modulo { display: flex; gap: 4px; padding: 5px; background: #2b2f33; border-radius: 5px; }
.modulo .luz { width: 22px; height: 22px; border-radius: 50%; background: #6c757d; transition: background-color 0.1s ease; }
.grupo-canal.active .luz { background: #fdda14; }
.grupo-canal span { padding: 0.05rem 0.35rem; border-radius: 4px; transition: background-color 0.1s ease; }
.grupo-canal.active span { color: #201E1E; background: #fdda14; }
.modulo-wrap { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.modulo-wrap small { font-size: 0.6rem; color: #94a3b8; white-space: nowrap; }