:root {
    --cor-principal: #214ecf;
    --cor-principal-hover: #173ca5;
    --cor-fundo: #f3f6fb;
    --cor-superficie: #ffffff;
    --cor-texto: #1f2937;
    --cor-secundaria: #6b7280;
    --cor-borda: #e5e7eb;
    --cor-sucesso: #166534;
    --cor-sucesso-fundo: #dcfce7;
    --cor-erro: #991b1b;
    --cor-erro-fundo: #fee2e2;
    --sombra: 0 10px 35px rgba(15, 23, 42, .08);
    --raio: 14px;
    --transicao: 180ms ease;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--cor-fundo);
    color: var(--cor-texto);
}

a,
button,
input,
select,
textarea {
    transition:
        background-color var(--transicao),
        border-color var(--transicao),
        color var(--transicao),
        box-shadow var(--transicao),
        transform var(--transicao),
        opacity var(--transicao);
}

button,
.botao {
    -webkit-tap-highlight-color: transparent;
}

button:hover,
.botao:hover {
    transform: translateY(-1px);
}

button:active,
.botao:active {
    transform: translateY(0);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--cor-principal) !important;
    box-shadow: 0 0 0 3px rgba(33, 78, 207, .14);
}

body.carregando {
    cursor: wait;
}

body.carregando::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9997;
    background: rgba(255, 255, 255, .35);
    backdrop-filter: blur(1px);
}

.scc-loading {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 0;
    height: 3px;
    background: var(--cor-principal);
    box-shadow: 0 0 12px rgba(33, 78, 207, .55);
    transition: width 250ms ease;
}

.scc-loading.ativo {
    width: 82%;
}

.scc-loading.finalizando {
    width: 100%;
}

.scc-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10020;
    display: flex;
    width: min(390px, calc(100vw - 32px));
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.scc-toast {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 24px;
    align-items: start;
    gap: 10px;
    padding: 15px;
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    background: var(--cor-superficie);
    box-shadow: 0 18px 55px rgba(15, 23, 42, .18);
    opacity: 0;
    transform: translateX(24px);
    pointer-events: auto;
}

.scc-toast.visivel {
    opacity: 1;
    transform: translateX(0);
}

.scc-toast.saindo {
    opacity: 0;
    transform: translateX(24px);
}

.scc-toast-icone {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: #eef2ff;
    color: var(--cor-principal);
    font-weight: bold;
}

.scc-toast.sucesso .scc-toast-icone {
    background: var(--cor-sucesso-fundo);
    color: var(--cor-sucesso);
}

.scc-toast.erro .scc-toast-icone {
    background: var(--cor-erro-fundo);
    color: var(--cor-erro);
}

.scc-toast-titulo {
    margin-bottom: 3px;
    font-weight: 700;
}

.scc-toast-texto {
    color: var(--cor-secundaria);
    font-size: 14px;
    line-height: 1.45;
}

.scc-toast-fechar {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cor-secundaria);
    cursor: pointer;
    font-size: 18px;
}

.scc-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: grid;
    padding: 20px;
    place-items: center;
    background: rgba(15, 23, 42, .52);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
}

.scc-modal-overlay.aberto {
    opacity: 1;
    visibility: visible;
}

.scc-modal {
    width: min(480px, 100%);
    overflow: hidden;
    border-radius: 16px;
    background: var(--cor-superficie);
    box-shadow: 0 25px 80px rgba(15, 23, 42, .28);
    transform: translateY(18px) scale(.98);
}

.scc-modal-overlay.aberto .scc-modal {
    transform: translateY(0) scale(1);
}

.scc-modal-corpo {
    padding: 25px;
}

.scc-modal-icone {
    display: grid;
    width: 46px;
    height: 46px;
    margin-bottom: 17px;
    place-items: center;
    border-radius: 50%;
    background: #eef2ff;
    color: var(--cor-principal);
    font-size: 22px;
}

.scc-modal h2 {
    margin: 0 0 9px;
    font-size: 21px;
}

.scc-modal p {
    margin: 0;
    color: var(--cor-secundaria);
    line-height: 1.55;
}

.scc-modal-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 25px;
    border-top: 1px solid var(--cor-borda);
    background: #f8fafc;
}

.scc-modal-acoes button {
    padding: 10px 15px;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 700;
}

.scc-modal-cancelar {
    background: #e5e7eb;
    color: #374151;
}

.scc-modal-confirmar {
    background: var(--cor-principal);
    color: #fff;
}

.scc-modal-confirmar.perigo {
    background: #b91c1c;
}

.scc-botao-carregando {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.scc-botao-carregando::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 17px;
    height: 17px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: scc-girar .7s linear infinite;
}

.scc-entrada {
    animation: scc-entrada 260ms ease both;
}

@keyframes scc-girar {
    to {
        transform: rotate(360deg);
    }
}

@keyframes scc-entrada {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

@media (max-width: 720px) {
    .scc-toast-container {
        top: 12px;
        right: 12px;
        left: 12px;
        width: auto;
    }

    .scc-modal-overlay {
        align-items: end;
        padding: 0;
    }

    .scc-modal {
        width: 100%;
        border-radius: 18px 18px 0 0;
    }

    .scc-modal-acoes {
        flex-direction: column-reverse;
    }

    .scc-modal-acoes button {
        width: 100%;
    }
}

.registro-overlay {
    position: fixed;
    inset: 0;
    z-index: 11000;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: 220ms ease;
}

.registro-overlay.aberto {
    opacity: 1;
    visibility: visible;
}

.registro-painel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 11010;
    display: grid;
    width: min(620px, 100vw);
    height: 100vh;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: #fff;
    box-shadow: -20px 0 60px rgba(15, 23, 42, .22);
    transform: translateX(105%);
    transition: transform 260ms cubic-bezier(.22, .61, .36, 1);
}

.registro-painel.aberto {
    transform: translateX(0);
}

.registro-painel-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.registro-painel-legenda {
    display: block;
    margin-bottom: 4px;
    color: #214ecf;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.registro-painel-topo h2 {
    margin: 0;
    font-family: monospace;
    font-size: 20px;
}

.registro-painel-fechar {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: #f3f4f6;
    color: #4b5563;
    cursor: pointer;
    font-size: 26px;
}

.registro-painel-conteudo {
    overflow-y: auto;
    padding: 22px 24px 40px;
}

.registro-painel-rodape {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
}

.registro-painel-rodape button {
    padding: 11px 16px;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 700;
}

.registro-cancelar {
    background: #e5e7eb;
    color: #374151;
}

.registro-salvar {
    background: #214ecf;
    color: #fff;
}

.registro-salvar:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.registro-campo {
    margin-bottom: 18px;
}

.registro-campo > label:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
    color: #1f2937;
    font-size: 14px;
    font-weight: 700;
}

.registro-campo > label:first-child span {
    color: #9ca3af;
    font-family: monospace;
    font-size: 11px;
    font-weight: 400;
}

.registro-campo input[type="text"],
.registro-campo textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    background: #fff;
    font-size: 14px;
}

.registro-campo textarea {
    min-height: 130px;
    resize: vertical;
    font-family: monospace;
    line-height: 1.5;
}

.registro-campo .registro-chave {
    background: #f3f4f6;
    color: #6b7280;
}

.registro-nulo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    color: #6b7280;
    font-size: 13px;
}

.registro-binario {
    padding: 12px 13px;
    border-radius: 9px;
    background: #fef3c7;
    color: #92400e;
    font-size: 13px;
}

.registro-carregando,
.registro-erro {
    padding: 22px;
    border-radius: 12px;
    background: #f3f4f6;
    color: #6b7280;
    text-align: center;
}

.registro-erro {
    background: #fee2e2;
    color: #991b1b;
}

@media (max-width: 720px) {
    .registro-painel {
        top: auto;
        bottom: 0;
        width: 100%;
        height: 92vh;
        border-radius: 18px 18px 0 0;
        transform: translateY(105%);
    }

    .registro-painel.aberto {
        transform: translateY(0);
    }

    .registro-painel-rodape {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .registro-painel-rodape button {
        flex: 1;
    }
}

.tabela-busca-area {
    display: flex;
    min-width: min(440px, 100%);
    flex-direction: column;
    gap: 5px;
}

.tabela-busca {
    width: min(440px, 100%);
    padding: 11px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
}

.tabela-busca-contador {
    min-height: 16px;
    color: #6b7280;
    font-size: 12px;
}

.busca-destaque {
    padding: 1px 2px;
    border-radius: 3px;
    background: #fef08a;
    color: #713f12;
}

@media (max-width: 720px) {
    .tabela-busca-area,
    .tabela-busca {
        width: 100%;
        min-width: 0;
    }
}

.caminho-navegavel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.caminho-navegavel a {
    padding: 3px 5px;
    border-radius: 5px;
    color: #214ecf;
    text-decoration: none;
}

.caminho-navegavel a:hover {
    background: #e8eefc;
}

.caminho-navegavel span {
    color: #9ca3af;
}

.botao-excluir {
    border: 0;
    background: #fee2e2 !important;
    color: #b91c1c !important;
    cursor: pointer;
}

.botao-excluir:hover {
    background: #fecaca !important;
}

.upload-dropzone {
    margin-bottom: 16px;
    padding: 32px 22px;
    border: 2px dashed #b8c5eb;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        #f8faff 0%,
        #eef3ff 100%
    );
    cursor: pointer;
    text-align: center;
    transition: 180ms ease;
}

.upload-dropzone:hover,
.upload-dropzone:focus,
.upload-dropzone.arrastando {
    border-color: #214ecf;
    background: #e8eefc;
    box-shadow: 0 0 0 4px rgba(33, 78, 207, .1);
    transform: translateY(-1px);
}

.upload-dropzone-icone {
    display: grid;
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    place-items: center;
    border-radius: 14px;
    background: #214ecf;
    color: #fff;
    font-size: 27px;
    font-weight: bold;
    box-shadow: 0 10px 25px rgba(33, 78, 207, .24);
}

.upload-dropzone-titulo {
    margin-bottom: 5px;
    color: #1f2937;
    font-size: 16px;
    font-weight: 700;
}

.upload-dropzone-texto {
    color: #6b7280;
    font-size: 13px;
}

.upload-progresso {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
}

.upload-progresso-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 9px;
    font-size: 13px;
}

.upload-progresso-trilho {
    height: 8px;
    overflow: hidden;
    border-radius: 20px;
    background: #e5e7eb;
}

.upload-progresso-barra {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #214ecf;
    transition: width 220ms ease;
}

.upload-resultados {
    display: grid;
    gap: 7px;
    margin-top: 14px;
}

.upload-resultado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 12px;
}

.upload-resultado strong {
    overflow-wrap: anywhere;
}

.upload-resultado span {
    text-align: right;
}

.upload-resultado.sucesso {
    background: #dcfce7;
    color: #166534;
}

.upload-resultado.erro {
    background: #fee2e2;
    color: #991b1b;
}

@media (max-width: 720px) {
    .upload-dropzone {
        padding: 27px 16px;
    }

    .upload-resultado {
        flex-direction: column;
        gap: 3px;
    }

    .upload-resultado span {
        text-align: left;
    }
}

.acoes-arquivos-topo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.botao-acao-principal,
.botao-acao-secundario {
    padding: 11px 16px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
}

.botao-acao-principal {
    background: #214ecf;
    color: #fff;
}

.botao-acao-secundario {
    background: #e8eefc;
    color: #214ecf;
}

.arquivo-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    padding: 20px;
    place-items: center;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: 200ms ease;
}

.arquivo-modal-overlay.aberto {
    opacity: 1;
    visibility: visible;
}

.arquivo-modal {
    width: min(510px, 100%);
    overflow: hidden;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 28px 90px rgba(15, 23, 42, .32);
    transform: translateY(16px) scale(.98);
    transition: 220ms ease;
}

.arquivo-modal-overlay.aberto .arquivo-modal {
    transform: translateY(0) scale(1);
}

.arquivo-modal-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.arquivo-modal-topo span {
    display: block;
    margin-bottom: 4px;
    color: #214ecf;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.arquivo-modal-topo h2 {
    margin: 0;
    font-size: 21px;
}

.arquivo-modal-fechar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: #f3f4f6;
    color: #4b5563;
    cursor: pointer;
    font-size: 25px;
}

.arquivo-modal-corpo {
    padding: 24px;
}

.arquivo-modal-corpo label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
}

.arquivo-modal-corpo input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 15px;
}

.arquivo-sugestoes {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.arquivo-sugestoes button {
    padding: 7px 10px;
    border: 1px solid #dbe3f8;
    border-radius: 20px;
    background: #f4f7ff;
    color: #214ecf;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.arquivo-modal-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
}

.arquivo-modal-acoes button {
    padding: 11px 16px;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 700;
}

.arquivo-modal-cancelar {
    background: #e5e7eb;
    color: #374151;
}

.arquivo-modal-criar {
    background: #214ecf;
    color: #fff;
}

@media (max-width: 720px) {
    .arquivo-modal-overlay {
        align-items: end;
        padding: 0;
    }

    .arquivo-modal {
        width: 100%;
        border-radius: 18px 18px 0 0;
    }

    .arquivo-modal-acoes {
        flex-direction: column-reverse;
    }

    .arquivo-modal-acoes button {
        width: 100%;
    }
}

.editor-ferramentas {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    min-height: 42px;
    margin-bottom: 8px;
}

.editor-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    color: #6b7280;
    font-size: 12px;
}

#editorEstado {
    padding: 5px 9px;
    border-radius: 20px;
    font-weight: 700;
}

#editorEstado.salvo {
    background: #dcfce7;
    color: #166534;
}

#editorEstado.alterado {
    background: #fef3c7;
    color: #92400e;
}

.editor-area {
    display: grid;
    overflow: hidden;
    grid-template-columns: auto minmax(0, 1fr);
    border: 1px solid #374151;
    border-radius: 11px;
    background: #111827;
}

.editor-linhas {
    min-width: 54px;
    max-height: calc(100vh - 300px);
    overflow: hidden;
    padding: 18px 12px;
    border-right: 1px solid #374151;
    background: #0f172a;
    color: #64748b;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 14px;
    line-height: 1.55;
    text-align: right;
    user-select: none;
    white-space: pre;
}

.editor-area textarea {
    min-height: calc(100vh - 300px);
    max-height: calc(100vh - 300px);
    margin: 0;
    overflow: auto;
    border: 0 !important;
    border-radius: 0;
    outline: none !important;
    box-shadow: none !important;
    resize: none;
    white-space: pre;
}

.editor-acoes {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 15px;
}

.editor-atalho {
    color: #6b7280;
    font-size: 12px;
}

.editor-busca {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}

.editor-busca.aberta {
    display: flex;
}

.editor-busca input {
    width: 230px;
    padding: 7px 9px;
    border: 0;
    outline: 0;
    font-size: 13px;
}

.editor-busca span {
    min-width: 80px;
    color: #6b7280;
    font-size: 11px;
    text-align: center;
}

.editor-busca button {
    display: grid;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: #eef2ff;
    color: #214ecf;
    cursor: pointer;
}

@media (max-width: 720px) {
    .editor-ferramentas {
        align-items: stretch;
        flex-direction: column;
    }

    .editor-busca {
        width: 100%;
    }

    .editor-busca input {
        min-width: 0;
        flex: 1;
        width: auto;
    }

    .editor-status {
        justify-content: space-between;
    }

    .editor-linhas {
        min-width: 42px;
        padding-right: 8px;
        padding-left: 5px;
        font-size: 12px;
    }

    .editor-area textarea {
        font-size: 12px;
    }

    .editor-acoes {
        align-items: stretch;
        flex-direction: column;
    }

    .editor-acoes button {
        width: 100%;
    }
}

.editor-layout {
    display: grid;
    grid-template-columns: 285px minmax(0, 1fr);
    align-items: stretch;
    gap: 18px;
}

.editor-painel-principal {
    min-width: 0;
}

.editor-arvore {
    position: sticky;
    top: 18px;
    display: flex;
    height: calc(100vh - 55px);
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .07);
}

.editor-arvore-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px;
    border-bottom: 1px solid #e5e7eb;
}

.editor-arvore-topo span {
    display: block;
    margin-bottom: 3px;
    color: #214ecf;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.editor-arvore-topo strong {
    font-size: 15px;
}

.editor-arvore-topo button {
    display: grid;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: #eef2ff;
    color: #214ecf;
    cursor: pointer;
    font-size: 18px;
}

.editor-arvore-caminho {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 3px;
    overflow-x: auto;
    padding: 9px 11px;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.editor-arvore-caminho button {
    margin: 0;
    padding: 4px 5px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #214ecf;
    cursor: pointer;
    font-size: 11px;
}

.editor-arvore-caminho button:hover {
    background: #eef2ff;
}

.editor-arvore-caminho span {
    color: #9ca3af;
    font-size: 11px;
}

.editor-arvore-lista {
    flex: 1;
    overflow-y: auto;
    padding: 7px;
}

.editor-arvore-item {
    display: grid;
    width: 100%;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 8px 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #374151;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    text-align: left;
    text-decoration: none;
}

.editor-arvore-item:hover {
    background: #f1f5f9;
    transform: none;
}

.editor-arvore-item.ativo {
    background: #e8eefc;
    color: #214ecf;
    font-weight: 700;
}

.editor-arvore-item.desabilitado {
    cursor: default;
    opacity: .5;
}

.editor-arvore-icone {
    color: #d97706;
    font-size: 16px;
    text-align: center;
}

.editor-arvore-tipo {
    display: inline-grid;
    height: 24px;
    place-items: center;
    border-radius: 5px;
    background: #eef2ff;
    color: #214ecf;
    font-family: monospace;
    font-size: 8px;
    font-weight: 700;
}

.editor-arvore-item > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editor-arvore-carregando,
.editor-arvore-vazio,
.editor-arvore-erro {
    padding: 20px 12px;
    color: #6b7280;
    font-size: 12px;
    text-align: center;
}

.editor-arvore-erro {
    color: #991b1b;
}

@media (max-width: 900px) {
    .editor-layout {
        grid-template-columns: 1fr;
    }

    .editor-arvore {
        position: relative;
        top: auto;
        height: 290px;
    }
}

.editor-arvore-acoes {
    display: flex;
    align-items: center;
    gap: 6px;
}

.editor-arvore-busca-area {
    padding: 9px 10px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
}

.editor-arvore-busca-area input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
}

.editor-arvore-busca-area span {
    display: block;
    min-height: 14px;
    margin-top: 4px;
    color: #6b7280;
    font-size: 10px;
}

.editor-layout.editor-arvore-recolhida {
    grid-template-columns: 58px minmax(0, 1fr);
}

.editor-layout.editor-arvore-recolhida .editor-arvore {
    overflow: visible;
}

.editor-layout.editor-arvore-recolhida
.editor-arvore-topo {
    justify-content: center;
    padding: 12px 8px;
}

.editor-layout.editor-arvore-recolhida
.editor-arvore-topo > div:first-child,
.editor-layout.editor-arvore-recolhida
#editorArvoreAtualizar,
.editor-layout.editor-arvore-recolhida
.editor-arvore-caminho,
.editor-layout.editor-arvore-recolhida
.editor-arvore-busca-area,
.editor-layout.editor-arvore-recolhida
.editor-arvore-lista {
    display: none;
}

.editor-layout.editor-arvore-recolhida
.editor-arvore-acoes {
    display: block;
}

.editor-layout.editor-arvore-recolhida
#editorArvoreRecolher {
    display: grid;
}

.editor-arvore-item[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    .editor-layout.editor-arvore-recolhida {
        grid-template-columns: 1fr;
    }

    .editor-layout.editor-arvore-recolhida
    .editor-arvore {
        height: 58px;
    }
}

.editor-abas {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: stretch;
    margin: -22px -22px 20px;
    border-bottom: 1px solid #dbe1ea;
    border-radius: 15px 15px 0 0;
    background: #e9edf3;
}

.editor-abas-lista {
    display: flex;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.editor-aba {
    position: relative;
    display: flex;
    min-width: 155px;
    max-width: 245px;
    align-items: stretch;
    border-right: 1px solid #d5dbe5;
    background: #e9edf3;
}

.editor-aba:hover {
    background: #f3f5f8;
}

.editor-aba.ativa {
    background: #fff;
}

.editor-aba.ativa::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: #214ecf;
}

.editor-aba a {
    display: grid;
    min-width: 0;
    flex: 1;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    padding: 10px 4px 10px 10px;
    color: #4b5563;
    text-decoration: none;
}

.editor-aba.ativa a {
    color: #1f2937;
}

.editor-aba-tipo {
    display: inline-grid;
    width: 28px;
    height: 22px;
    place-items: center;
    border-radius: 5px;
    background: #dde5fb;
    color: #214ecf;
    font-family: monospace;
    font-size: 8px;
    font-weight: 700;
}

.editor-aba-nome {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editor-aba-fechar {
    width: 31px;
    margin: 7px 5px 7px 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    font-size: 18px;
    opacity: 0;
}

.editor-aba:hover .editor-aba-fechar,
.editor-aba.ativa .editor-aba-fechar {
    opacity: 1;
}

.editor-aba-fechar:hover {
    background: #dce1e8;
    color: #1f2937;
    transform: none;
}

.editor-abas-menu {
    display: grid;
    width: 42px;
    height: 100%;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-left: 1px solid #d5dbe5;
    border-radius: 0 15px 0 0;
    background: #e9edf3;
    color: #4b5563;
    cursor: pointer;
    font-size: 21px;
}

.editor-abas-menu:hover {
    background: #dfe4eb;
    transform: none;
}

@media (max-width: 720px) {
    .editor-abas {
        margin-right: -22px;
        margin-left: -22px;
    }

    .editor-aba {
        min-width: 140px;
    }

    .editor-aba-fechar {
        opacity: 1;
    }
}

.acoes-item-transferencia {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
}

.acoes-item-transferencia button {
    border: 0;
    cursor: pointer;
}

.transferencia-overlay {
    position: fixed;
    inset: 0;
    z-index: 12500;
    display: grid;
    padding: 20px;
    place-items: center;
    background: rgba(15, 23, 42, .56);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: 200ms ease;
}

.transferencia-overlay.aberto {
    opacity: 1;
    visibility: visible;
}

.transferencia-modal {
    display: grid;
    width: min(680px, 100%);
    max-height: min(760px, 92vh);
    grid-template-rows: auto auto minmax(180px, 1fr) auto;
    overflow: hidden;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .32);
    transform: translateY(16px) scale(.98);
    transition: 220ms ease;
}

.transferencia-overlay.aberto .transferencia-modal {
    transform: translateY(0) scale(1);
}

.transferencia-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.transferencia-topo span {
    display: block;
    margin-bottom: 4px;
    color: #214ecf;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.transferencia-topo h2 {
    margin: 0;
    font-size: 20px;
    overflow-wrap: anywhere;
}

.transferencia-fechar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: #f3f4f6;
    color: #4b5563;
    cursor: pointer;
    font-size: 25px;
}

.transferencia-caminho {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding: 11px 18px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    white-space: nowrap;
}

.transferencia-caminho button {
    padding: 5px 7px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #214ecf;
    cursor: pointer;
    font-size: 12px;
}

.transferencia-caminho button:hover {
    background: #e8eefc;
}

.transferencia-caminho span {
    color: #9ca3af;
}

.transferencia-lista {
    overflow-y: auto;
    padding: 12px;
}

.transferencia-pasta {
    display: grid;
    width: 100%;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    margin: 0 0 6px;
    padding: 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #374151;
    cursor: pointer;
    text-align: left;
}

.transferencia-pasta:hover {
    background: #eef2ff;
    transform: none;
}

.transferencia-pasta > span {
    font-size: 21px;
    text-align: center;
}

.transferencia-pasta strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transferencia-pasta small {
    color: #9ca3af;
}

.transferencia-pasta.voltar {
    color: #214ecf;
}

.transferencia-carregando,
.transferencia-vazio,
.transferencia-erro {
    padding: 35px 20px;
    color: #6b7280;
    text-align: center;
}

.transferencia-erro {
    color: #991b1b;
}

.transferencia-rodape {
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
}

.transferencia-destino-atual {
    margin-bottom: 13px;
    color: #6b7280;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.transferencia-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.transferencia-acoes button {
    padding: 11px 16px;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 700;
}

.transferencia-cancelar {
    background: #e5e7eb;
    color: #374151;
}

.transferencia-confirmar {
    background: #214ecf;
    color: #fff;
}

@media (max-width: 720px) {
    .transferencia-overlay {
        align-items: end;
        padding: 0;
    }

    .transferencia-modal {
        width: 100%;
        max-height: 94vh;
        border-radius: 18px 18px 0 0;
    }

    .transferencia-pasta {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .transferencia-pasta small {
        display: none;
    }

    .transferencia-acoes {
        flex-direction: column-reverse;
    }

    .transferencia-acoes button {
        width: 100%;
    }
}

.busca-global-overlay {
    position: fixed;
    inset: 0;
    z-index: 13000;
    display: grid;
    padding: 28px 20px;
    align-items: start;
    justify-items: center;
    background: rgba(15, 23, 42, .62);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: 180ms ease;
}

.busca-global-overlay.aberto {
    opacity: 1;
    visibility: visible;
}

.busca-global-modal {
    display: grid;
    width: min(850px, 100%);
    max-height: calc(100vh - 56px);
    grid-template-rows: auto auto auto minmax(160px, 1fr);
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 35px 110px rgba(15, 23, 42, .38);
    transform: translateY(-12px) scale(.985);
    transition: 220ms ease;
}

.busca-global-overlay.aberto .busca-global-modal {
    transform: translateY(0) scale(1);
}

.busca-global-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.busca-global-topo span {
    display: block;
    margin-bottom: 4px;
    color: #214ecf;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.busca-global-topo h2 {
    margin: 0;
    font-size: 22px;
}

.busca-global-fechar {
    display: grid;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: #f3f4f6;
    color: #4b5563;
    cursor: pointer;
    font-size: 25px;
}

.busca-global-campo-area {
    padding: 18px 24px 13px;
}

.busca-global-campo {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    border: 2px solid #cbd5e1;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(15, 23, 42, .06);
}

.busca-global-campo:focus-within {
    border-color: #214ecf;
    box-shadow: 0 0 0 4px rgba(33, 78, 207, .12);
}

.busca-global-campo > span {
    color: #64748b;
    font-size: 24px;
    text-align: center;
}

.busca-global-campo input {
    width: 100%;
    padding: 14px 5px;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-size: 16px;
}

.busca-global-campo button {
    display: grid;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: #eef2f7;
    color: #64748b;
    cursor: pointer;
    font-size: 18px;
}

.busca-global-ajuda {
    margin-top: 8px;
    color: #94a3b8;
    font-size: 11px;
}

.busca-global-status {
    min-height: 42px;
    padding: 11px 24px;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
}

.busca-global-resultados {
    overflow-y: auto;
    padding: 10px;
}

.busca-global-resultado {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border-radius: 11px;
    color: #1f2937;
    text-decoration: none;
}

.busca-global-resultado:hover,
.busca-global-resultado.selecionado {
    background: #eef2ff;
    transform: none;
}

.busca-global-icone {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 11px;
    background: #f1f5f9;
    font-size: 20px;
}

.busca-global-dados {
    min-width: 0;
}

.busca-global-dados strong {
    display: block;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.busca-global-caminho {
    display: block;
    overflow: hidden;
    color: #64748b;
    font-family: monospace;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.busca-global-metadados {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 5px;
    color: #94a3b8;
    font-size: 10px;
}

.busca-global-acao {
    color: #214ecf;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.busca-global-vazio,
.busca-global-carregando,
.busca-global-erro {
    padding: 55px 22px;
    color: #64748b;
    text-align: center;
}

.busca-global-erro {
    color: #991b1b;
}

.busca-global-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 7px;
    border: 2px solid #cbd5e1;
    border-top-color: #214ecf;
    border-radius: 50%;
    vertical-align: -2px;
    animation: scc-girar .7s linear infinite;
}

@media (max-width: 720px) {
    .busca-global-overlay {
        align-items: end;
        padding: 0;
    }

    .busca-global-modal {
        width: 100%;
        max-height: 94vh;
        border-radius: 18px 18px 0 0;
    }

    .busca-global-resultado {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .busca-global-acao {
        display: none;
    }

    .busca-global-ajuda {
        line-height: 1.4;
    }
}

.botao-download {
    display: inline-block;
    margin-top: 8px;
    border: 0;
    background: #e0f2fe !important;
    color: #0369a1 !important;
}

.botao-download:hover {
    background: #bae6fd !important;
}

.botao-download-pasta {
    display: inline-block;
    margin-top: 8px;
    background: #ede9fe !important;
    color: #6d28d9 !important;
}

.botao-download-pasta:hover {
    background: #ddd6fe !important;
}

.botao-visualizar {
    display: inline-block;
    margin-top: 8px;
    border: 0;
    background: #dcfce7 !important;
    color: #166534 !important;
    cursor: pointer;
}

.visualizador-overlay {
    position: fixed;
    inset: 0;
    z-index: 13500;
    display: grid;
    padding: 24px;
    place-items: center;
    background: rgba(15, 23, 42, .68);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: 180ms ease;
}

.visualizador-overlay.aberto {
    opacity: 1;
    visibility: visible;
}

.visualizador-modal {
    display: grid;
    width: min(1150px, 100%);
    height: min(850px, 94vh);
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 35px 110px rgba(15, 23, 42, .42);
    transform: scale(.985);
    transition: 200ms ease;
}

.visualizador-overlay.aberto .visualizador-modal {
    transform: scale(1);
}

.visualizador-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 21px;
    border-bottom: 1px solid #e5e7eb;
}

.visualizador-topo span {
    display: block;
    margin-bottom: 3px;
    color: #214ecf;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.visualizador-topo h2 {
    margin: 0;
    font-size: 18px;
    overflow-wrap: anywhere;
}

.visualizador-fechar {
    display: grid;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: #f3f4f6;
    color: #4b5563;
    cursor: pointer;
    font-size: 25px;
}

.visualizador-conteudo {
    position: relative;
    min-height: 0;
    background: #e5e7eb;
}

.visualizador-conteudo iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.visualizador-carregando {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: #f8fafc;
    color: #64748b;
}

@media (max-width: 720px) {
    .visualizador-overlay {
        align-items: end;
        padding: 0;
    }

    .visualizador-modal {
        width: 100%;
        height: 94vh;
        border-radius: 18px 18px 0 0;
    }
}

/* Tabela compacta de arquivos */
.tabela .linha {
    position: relative;
    grid-template-columns:
        minmax(260px, 1fr)
        90px
        125px
        42px;
    gap: 8px;
    min-height: 34px;
    padding: 3px 8px;
}

.tabela .linha-cabecalho {
    min-height: 31px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 11px;
}

.tabela .nome {
    gap: 7px;
    min-height: 27px;
    font-size: 12px;
}

.tabela .nome a,
.tabela .nome > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabela .icone {
    width: 20px;
    font-size: 15px;
    text-align: center;
}

.tabela .secundario {
    overflow: hidden;
    color: #64748b;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabela .linha:not(.linha-cabecalho):hover {
    background: #f5f8ff;
}

.tabela .linha.selecionada {
    background: #e8eefc;
    box-shadow: inset 3px 0 0 #214ecf;
}

/* Coluna de ações */
.coluna-acoes {
    display: flex;
    justify-content: flex-end;
}

.menu-item-arquivo {
    position: relative;
}

.botao-menu-arquivo {
    display: grid;
    width: 29px;
    height: 27px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #475569;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.botao-menu-arquivo:hover,
.menu-item-arquivo.aberto .botao-menu-arquivo {
    background: #dce5fb;
    color: #214ecf;
    transform: none;
}

.menu-arquivo-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    z-index: 14000;
    display: none;
    width: 225px;
    max-height: min(430px, 75vh);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #dbe1ea;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(15, 23, 42, .22);
}

.menu-item-arquivo.aberto .menu-arquivo-dropdown {
    display: block;
    animation: menuArquivoEntrada 130ms ease;
}

.menu-arquivo-dropdown.abrir-acima {
    top: auto;
    bottom: calc(100% + 5px);
}

.menu-arquivo-opcao {
    display: grid;
    width: 100%;
    grid-template-columns: 27px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 8px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #334155;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
}

.menu-arquivo-opcao:hover {
    background: #eef2ff;
    color: #214ecf;
    transform: none;
}

.menu-arquivo-opcao > span:first-child {
    text-align: center;
}

.menu-arquivo-separador {
    height: 1px;
    margin: 5px 3px;
    background: #e5e7eb;
}

.form-menu-arquivo {
    margin: 0 !important;
}

.form-menu-arquivo .menu-arquivo-opcao {
    display: grid;
}

.menu-arquivo-perigo {
    color: #b91c1c;
}

.menu-arquivo-perigo:hover {
    background: #fee2e2;
    color: #991b1b;
}

@keyframes menuArquivoEntrada {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(.98);
    }

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

@media (max-width: 760px) {
    .tabela .linha {
        grid-template-columns:
            minmax(0, 1fr)
            38px;
        gap: 5px;
        min-height: 38px;
        padding: 4px 7px !important;
    }

    .tabela .linha > .secundario {
        display: none;
    }

    .menu-arquivo-dropdown {
        position: fixed;
        right: 10px;
        bottom: 10px;
        left: 10px;
        top: auto;
        width: auto;
        max-height: 72vh;
        padding: 8px;
        border-radius: 15px;
    }

    .menu-arquivo-dropdown.abrir-acima {
        top: auto;
        bottom: 10px;
    }

    .menu-arquivo-opcao {
        min-height: 41px;
        font-size: 14px;
    }
}

/*
|--------------------------------------------------------------------------
| Tabela compacta, mas confortável para toque
|--------------------------------------------------------------------------
*/

.tabela .linha {
    min-height: 44px;
    padding: 5px 9px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(33, 78, 207, .10);
    touch-action: manipulation;
}

.tabela .linha-cabecalho {
    min-height: 34px;
    cursor: default;
}

.tabela .nome {
    min-height: 32px;
    font-size: 13px;
}

.tabela .icone {
    width: 24px;
    font-size: 17px;
}

.tabela .secundario {
    font-size: 12px;
}

.botao-menu-arquivo {
    width: 38px;
    height: 36px;
    font-size: 23px;
}

.menu-arquivo-opcao {
    min-height: 42px;
    padding: 9px 11px;
    font-size: 13px;
}

.menu-arquivo-opcao > span:first-child {
    font-size: 16px;
}

/*
 * Evita que o texto seja selecionado acidentalmente ao tocar rapidamente.
 */
.tabela .linha:not(.linha-cabecalho) {
    user-select: none;
}

.tabela .linha:not(.linha-cabecalho):active {
    background: #dce6fd;
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (min-width: 761px) and (max-width: 1100px) {
    .tabela .linha {
        grid-template-columns:
            minmax(220px, 1fr)
            80px
            115px
            46px;
        min-height: 48px;
        padding: 6px 10px;
    }

    .botao-menu-arquivo {
        width: 42px;
        height: 40px;
    }

    .menu-arquivo-dropdown {
        width: 245px;
    }

    .menu-arquivo-opcao {
        min-height: 46px;
        font-size: 14px;
    }
}

/*
|--------------------------------------------------------------------------
| iPhone e telas pequenas
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {
    .tabela {
        border-radius: 11px;
    }

    .tabela .linha {
        grid-template-columns:
            minmax(0, 1fr)
            48px;
        min-height: 52px;
        padding: 6px 8px !important;
    }

    .tabela .nome {
        min-height: 38px;
        gap: 9px;
        font-size: 14px;
    }

    .tabela .icone {
        width: 27px;
        font-size: 19px;
    }

    .botao-menu-arquivo {
        width: 44px;
        height: 42px;
        font-size: 25px;
    }

    .menu-arquivo-dropdown {
        right: 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
        left: 8px;
        max-height: calc(
            80vh - env(safe-area-inset-bottom)
        );
        padding: 9px;
    }

    .menu-arquivo-opcao {
        min-height: 50px;
        grid-template-columns: 34px minmax(0, 1fr);
        padding: 10px 13px;
        font-size: 15px;
    }

    .menu-arquivo-opcao > span:first-child {
        font-size: 19px;
    }
}

/*
|--------------------------------------------------------------------------
| Corrige o recorte do menu de ações
|--------------------------------------------------------------------------
*/

.tabela {
    overflow: visible !important;
}

.tabela .linha {
    position: relative;
    z-index: 1;
}

.tabela .linha:has(.menu-item-arquivo.aberto) {
    z-index: 15000;
}

.menu-item-arquivo.aberto {
    z-index: 15001;
}

.menu-arquivo-dropdown {
    z-index: 99999 !important;
}

/*
 * Mantém os cantos arredondados sem cortar o menu.
 */
.tabela .linha:first-child {
    border-radius: 15px 15px 0 0;
}

.tabela .linha:last-child {
    border-radius: 0 0 15px 15px;
}

.tabela .linha.menu-aberto {
    z-index: 15000 !important;
}

.tabela .linha.menu-aberto .menu-item-arquivo {
    z-index: 15001;
}

.visualizador-conteudo {
    overflow: auto;
}

.visualizador-codigo {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 20px;
    overflow: auto;
    background: #0f172a;
    color: #e2e8f0;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    line-height: 1.55;
    tab-size: 4;
    white-space: pre;
}

.visualizador-imagem {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    object-fit: contain;
}

.visualizador-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.visualizador-mensagem {
    display: grid;
    min-height: 100%;
    padding: 30px;
    place-items: center;
    background: #fff;
    color: #991b1b;
    text-align: center;
}

.visualizador-codigo[hidden],
.visualizador-imagem[hidden],
.visualizador-frame[hidden],
.visualizador-mensagem[hidden],
.visualizador-carregando[hidden] {
    display: none !important;
}

@media (max-width: 760px) {
    .visualizador-codigo {
        padding: 14px;
        font-size: 12px;
        line-height: 1.5;
    }
}

/*
|--------------------------------------------------------------------------
| Barra de ações do gerenciador
|--------------------------------------------------------------------------
*/

.acoes-arquivos-topo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin: 14px 0 16px;
}

.acoes-arquivos-topo button,
.acoes-arquivos-topo a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 9px 13px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    touch-action: manipulation;
}

.botao-acao-principal {
    background: #214ecf;
    color: #fff;
}

.botao-acao-secundario,
.botao-acao-link {
    background: #e8eefc;
    color: #214ecf;
}

.botao-acao-secundario:hover,
.botao-acao-link:hover,
.botao-acao-secundario.ativo {
    background: #d9e3fc;
    transform: none;
}

.icone-acao {
    display: inline-grid;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    place-items: center;
}

.icone-acao svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
|--------------------------------------------------------------------------
| Upload recolhível
|--------------------------------------------------------------------------
*/

.secao-upload-retratil {
    scroll-margin-top: 95px;
    margin-bottom: 16px;
    opacity: 0;
    transform: translateY(-7px);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.secao-upload-retratil.aberta {
    opacity: 1;
    transform: translateY(0);
}

.secao-upload-retratil[hidden] {
    display: none !important;
}

.upload-topo-retratil {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px;
}

.upload-topo-retratil h2 {
    margin: 0;
}

.fechar-upload {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: #eef2f7;
    color: #475569;
    cursor: pointer;
    font-size: 24px;
}

/*
|--------------------------------------------------------------------------
| Breadcrumb fixo
|--------------------------------------------------------------------------
*/

.breadcrumb-sticky {
    position: sticky;
    top: 0;
    z-index: 9000;
    margin-right: -10px;
    margin-left: -10px;
    padding: 8px 10px;
    border-bottom: 1px solid #dbe2ec;
    background: rgba(243, 246, 251, .96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.breadcrumb-sticky .caminho-navegavel {
    min-height: 36px;
    margin: 0;
    padding: 4px 6px;
    border: 1px solid #dbe2ec;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(15, 23, 42, .06);
}

.breadcrumb-sticky .caminho-navegavel a {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 4px 7px;
    font-size: 12px;
}

/*
|--------------------------------------------------------------------------
| Tablet e celular
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {
    .acoes-arquivos-topo {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .acoes-arquivos-topo button,
    .acoes-arquivos-topo a {
        width: 100%;
        min-height: 48px;
        padding: 10px;
        font-size: 13px;
    }

    .acoes-arquivos-topo
    .botao-acao-principal {
        grid-column: span 2;
    }

    .icone-acao,
    .icone-acao svg {
        width: 22px;
        height: 22px;
    }

    .breadcrumb-sticky {
        top: 0;
        margin-right: -4px;
        margin-left: -4px;
        padding: 6px 4px;
    }

    .breadcrumb-sticky .caminho-navegavel {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .secao-upload-retratil {
        scroll-margin-top: 80px;
    }
}

@media (min-width: 761px) and (max-width: 1100px) {
    .acoes-arquivos-topo button,
    .acoes-arquivos-topo a {
        min-height: 46px;
        padding: 10px 14px;
        font-size: 14px;
    }
}

.busca-conteudo-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 13px;
}

.busca-conteudo-acoes button {
    min-width: 120px;
    min-height: 42px;
    padding: 10px 16px;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 700;
}

.busca-conteudo-buscar {
    background: #214ecf;
    color: #fff;
}

.busca-conteudo-interromper {
    background: #fee2e2;
    color: #b91c1c;
}

.busca-conteudo-acoes button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.resultado-busca-conteudo {
    display: block;
    margin-bottom: 8px;
    padding: 13px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #fff;
    color: #1e293b;
    text-decoration: none;
}

.resultado-busca-conteudo:hover {
    border-color: #b8c8f5;
    background: #f8faff;
    transform: none;
}

.resultado-busca-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.resultado-busca-cabecalho strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resultado-busca-cabecalho span {
    flex: 0 0 auto;
    color: #214ecf;
    font-size: 11px;
    font-weight: 700;
}

.resultado-busca-caminho {
    margin-top: 4px;
    overflow-wrap: anywhere;
    color: #64748b;
    font-family: monospace;
    font-size: 11px;
}

.resultado-busca-conteudo pre {
    margin: 10px 0 7px;
    padding: 10px;
    overflow-x: auto;
    border-radius: 7px;
    background: #0f172a;
    color: #e2e8f0;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.resultado-busca-conteudo mark {
    padding: 1px 2px;
    border-radius: 3px;
    background: #fde68a;
    color: #713f12;
}

.resultado-busca-rodape {
    color: #64748b;
    font-size: 10px;
}

@media (max-width: 760px) {
    .busca-conteudo-acoes {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .busca-conteudo-acoes button {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        font-size: 14px;
    }

    .resultado-busca-conteudo {
        padding: 12px;
    }

    .resultado-busca-conteudo pre {
        font-size: 10px;
    }
}

.busca-conteudo-substituir {
    min-width: 120px;
    min-height: 42px;
    padding: 10px 16px;
    border: 0;
    border-radius: 9px;
    background: #fef3c7;
    color: #92400e;
    cursor: pointer;
    font-weight: 700;
}

.busca-conteudo-substituir:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.busca-substituicao-area {
    margin-top: 14px;
    padding: 15px;
    border: 1px solid #dbe2ec;
    border-radius: 12px;
    background: #f8fafc;
}

.busca-substituicao-area[hidden] {
    display: none !important;
}

.busca-substituicao-topo,
.busca-substituicao-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.busca-substituicao-topo label {
    font-size: 13px;
    font-weight: 700;
}

.busca-substituicao-fechar {
    display: grid;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: #e5e7eb;
    color: #475569;
    cursor: pointer;
    font-size: 21px;
}

.busca-substituicao-area textarea {
    width: 100%;
    margin-top: 10px;
    padding: 11px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    resize: vertical;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
}

.busca-substituicao-opcoes {
    margin: 11px 0;
    font-size: 12px;
}

.busca-substituicao-opcoes label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.busca-substituicao-executar {
    min-height: 42px;
    padding: 10px 16px;
    border: 0;
    border-radius: 9px;
    background: #b45309;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
}

.resultado-busca-wrapper {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: stretch;
    gap: 5px;
}

.resultado-busca-selecao {
    display: grid;
    place-items: start center;
    padding-top: 17px;
}

.resultado-busca-selecao input {
    width: 18px;
    height: 18px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

@media (max-width: 760px) {
    .busca-conteudo-acoes {
        grid-template-columns: 1fr 1fr;
    }

    .busca-conteudo-substituir {
        grid-column: span 2;
        min-height: 48px;
    }

    .busca-substituicao-rodape {
        align-items: stretch;
        flex-direction: column;
    }

    .busca-substituicao-executar {
        width: 100%;
        min-height: 48px;
    }

    .resultado-busca-wrapper {
        grid-template-columns: 34px minmax(0, 1fr);
    }
}

/*
|--------------------------------------------------------------------------
| Editor responsivo para iPhone e iPad
|--------------------------------------------------------------------------
*/

:root {
    --altura-visual-editor: 100vh;
    --topo-visual-editor: 0px;
}

.alternar-arvore-mobile {
    display: none;
}

.editor-area textarea {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.editor-abas-lista {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

.editor-aba {
    scroll-snap-align: start;
}

/*
|--------------------------------------------------------------------------
| iPad e tablets
|--------------------------------------------------------------------------
*/

@media (min-width: 761px) and (max-width: 1100px) {
    .editor-layout {
        grid-template-columns: 245px minmax(0, 1fr);
        gap: 12px;
    }

    .editor-arvore {
        height: calc(
            var(--altura-visual-editor) - 36px
        );
    }

    .editor-area textarea,
    .editor-linhas {
        min-height: calc(
            var(--altura-visual-editor) - 330px
        );
        max-height: calc(
            var(--altura-visual-editor) - 330px
        );
    }

    .editor-linhas {
        min-width: 48px;
        padding-right: 9px;
        padding-left: 6px;
    }

    .editor-area textarea {
        padding: 16px 14px;
        font-size: 15px;
        line-height: 1.6;
    }

    .editor-ferramentas {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .editor-status {
        min-height: 38px;
        align-items: center;
    }

    .editor-acoes button {
        min-height: 46px;
        padding: 11px 18px;
        font-size: 14px;
    }

    .editor-arvore-item {
        min-height: 43px;
        font-size: 13px;
    }

    .editor-arvore-topo button {
        width: 40px;
        height: 40px;
    }

    .editor-aba {
        min-width: 175px;
    }

    .editor-aba a {
        min-height: 46px;
    }

    .editor-aba-fechar {
        width: 36px;
        opacity: 1;
    }
}

/*
|--------------------------------------------------------------------------
| iPhone e telas de até 760px
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }

    main {
        padding-right: 8px;
        padding-bottom: 90px;
        padding-left: 8px;
    }

    .editor-layout {
        display: block;
    }

    .editor-painel-principal {
        border-radius: 11px;
    }

    /*
     * Botão para abrir a árvore.
     */
    .alternar-arvore-mobile {
        display: inline-flex;
        min-height: 46px;
        align-items: center;
        gap: 8px;
        margin: 0 0 10px;
        padding: 10px 14px;
        border: 0;
        border-radius: 10px;
        background: #e8eefc;
        color: #214ecf;
        cursor: pointer;
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
    }

    .alternar-arvore-mobile svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
    }

    /*
     * Árvore como painel lateral flutuante.
     */
    .editor-arvore {
        position: fixed;
        top: max(
            8px,
            calc(
                var(--topo-visual-editor)
                + env(safe-area-inset-top)
            )
        );
        bottom: max(
            8px,
            env(safe-area-inset-bottom)
        );
        left: 8px;
        z-index: 16000;
        width: min(86vw, 360px);
        height: auto;
        border-radius: 15px;
        box-shadow: 0 20px 70px rgba(15, 23, 42, .35);
        opacity: 0;
        visibility: hidden;
        transform: translateX(calc(-100% - 20px));
        transition:
            transform 220ms ease,
            opacity 180ms ease,
            visibility 180ms ease;
    }

    .editor-layout.editor-arvore-mobile-aberta
    .editor-arvore {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    body.editor-arvore-mobile-visivel::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 15900;
        background: rgba(15, 23, 42, .52);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .editor-arvore-item {
        min-height: 48px;
        padding: 10px;
        font-size: 14px;
    }

    .editor-arvore-busca-area input {
        min-height: 44px;
        font-size: 16px;
    }

    /*
     * Abas roláveis.
     */
    .editor-abas {
        margin: 0 0 10px;
        border: 1px solid #dbe1ea;
        border-radius: 10px;
    }

    .editor-abas-menu {
        width: 44px;
        min-height: 48px;
        border-radius: 0 10px 10px 0;
    }

    .editor-aba {
        min-width: 155px;
        max-width: 200px;
    }

    .editor-aba a {
        min-height: 48px;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .editor-aba-nome {
        font-size: 13px;
    }

    .editor-aba-fechar {
        width: 36px;
        min-height: 36px;
        opacity: 1;
    }

    /*
     * Cabeçalho e ferramentas.
     */
    .topo-editor {
        display: block;
        padding: 11px 10px;
    }

    .topo-editor h1,
    .topo-editor h2 {
        font-size: 16px;
        overflow-wrap: anywhere;
    }

    .editor-ferramentas {
        position: sticky;
        top: 0;
        z-index: 500;
        display: block;
        margin: 0;
        padding: 8px;
        border-bottom: 1px solid #dbe2ec;
        background: rgba(255, 255, 255, .97);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .editor-busca {
        width: 100%;
        margin-bottom: 7px;
    }

    .editor-busca input {
        min-height: 42px;
        font-size: 16px;
    }

    .editor-status {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 5px 9px;
        font-size: 10px;
    }

    #editorCaracteres {
        grid-column: 2;
    }

    /*
     * Área de código.
     */
    .editor-area {
        grid-template-columns: 38px minmax(0, 1fr);
        border-radius: 8px;
    }

    .editor-linhas {
        min-width: 38px;
        min-height: calc(
            var(--altura-visual-editor) - 310px
        );
        max-height: calc(
            var(--altura-visual-editor) - 310px
        );
        padding: 14px 6px 14px 3px;
        font-size: 11px;
        line-height: 1.6;
    }

    .editor-area textarea {
        min-height: calc(
            var(--altura-visual-editor) - 310px
        );
        max-height: calc(
            var(--altura-visual-editor) - 310px
        );
        padding: 14px 10px;
        font-size: 16px;
        line-height: 1.6;
        tab-size: 4;
    }

    /*
     * Barra de salvar fixa na parte inferior.
     */
    .editor-acoes {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 8000;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding:
            9px
            10px
            calc(
                9px + env(safe-area-inset-bottom)
            );
        border-top: 1px solid #dbe2ec;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 -8px 28px rgba(15, 23, 42, .12);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .editor-acoes button {
        width: 100%;
        min-height: 48px;
        padding: 11px 16px;
        font-size: 15px;
    }

    .editor-atalho {
        max-width: 105px;
        font-size: 9px;
        line-height: 1.3;
        text-align: right;
    }

    body.editor-salvando .editor-acoes {
        pointer-events: none;
        opacity: .75;
    }
}

/*
|--------------------------------------------------------------------------
| iPhone em orientação horizontal
|--------------------------------------------------------------------------
*/

@media (
    max-height: 500px
)
and (
    orientation: landscape
)
and (
    pointer: coarse
) {
    main {
        padding-bottom: 70px;
    }

    .editor-area textarea,
    .editor-linhas {
        min-height: calc(
            var(--altura-visual-editor) - 190px
        );
        max-height: calc(
            var(--altura-visual-editor) - 190px
        );
    }

    .editor-ferramentas {
        padding: 5px 7px;
    }

    .editor-status {
        display: none;
    }

    .editor-acoes {
        padding-top: 5px;
        padding-bottom: calc(
            5px + env(safe-area-inset-bottom)
        );
    }

    .editor-acoes button {
        min-height: 42px;
    }
}

/*
|--------------------------------------------------------------------------
| Editor extremamente enxuto no iPhone
|--------------------------------------------------------------------------
*/

.editor-barra-iphone {
    display: none;
}

@media (max-width: 760px) and (pointer: coarse) {
    body.editor-modo-iphone {
        min-height: var(--altura-visual-editor);
        overflow: hidden;
        background: #0f172a;
    }

    /*
     * Esconde toda a interface secundária.
     */
    body.editor-modo-iphone > header,
    body.editor-modo-iphone .voltar,
    body.editor-modo-iphone .editor-arvore,
    body.editor-modo-iphone .alternar-arvore-mobile,
    body.editor-modo-iphone .editor-abas,
    body.editor-modo-iphone .topo-editor,
    body.editor-modo-iphone .editor-ferramentas,
    body.editor-modo-iphone .editor-status,
    body.editor-modo-iphone .editor-linhas,
    body.editor-modo-iphone .editor-atalho {
        display: none !important;
    }

    body.editor-modo-iphone main {
        width: 100%;
        height: var(--altura-visual-editor);
        margin: 0;
        padding:
            calc(58px + env(safe-area-inset-top))
            0
            calc(68px + env(safe-area-inset-bottom));
        overflow: hidden;
    }

    body.editor-modo-iphone .editor-layout,
    body.editor-modo-iphone .editor-painel-principal,
    body.editor-modo-iphone #formEditor {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: #0f172a;
        box-shadow: none;
    }

    /*
     * Área preta ocupa todo o espaço disponível.
     */
    body.editor-modo-iphone .editor-area {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: #0f172a;
    }

    body.editor-modo-iphone .editor-area textarea {
        display: block;
        width: 100%;
        min-width: 0;
        height: 100%;
        min-height: 100%;
        max-height: none;
        margin: 0;
        padding: 16px 14px 30px;
        overflow: auto;
        border: 0 !important;
        border-radius: 0;
        outline: 0;
        background: #0f172a;
        color: #e2e8f0;
        caret-color: #fff;
        box-shadow: none !important;
        font-family:
            Menlo,
            Monaco,
            Consolas,
            monospace;
        font-size: 16px;
        line-height: 1.55;
        resize: none;
        tab-size: 4;
        white-space: pre;
        -webkit-overflow-scrolling: touch;
    }

    /*
     * Barra superior: somente Voltar e PHP.
     */
    body.editor-modo-iphone .editor-barra-iphone {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 18000;
        display: flex;
        min-height: calc(
            56px + env(safe-area-inset-top)
        );
        align-items: flex-end;
        justify-content: space-between;
        gap: 10px;
        padding:
            calc(8px + env(safe-area-inset-top))
            10px
            8px;
        border-bottom: 1px solid #263247;
        background: rgba(15, 23, 42, .98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    body.editor-modo-iphone
    .editor-barra-iphone button {
        display: inline-flex;
        min-width: 100px;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin: 0;
        padding: 8px 13px;
        border: 1px solid #334155;
        border-radius: 9px;
        background: #1e293b;
        color: #e2e8f0;
        cursor: pointer;
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        touch-action: manipulation;
    }

    body.editor-modo-iphone
    .editor-iphone-voltar svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    body.editor-modo-iphone
    .editor-iphone-php {
        border-color: #315acb;
        background: #214ecf;
        color: #fff;
    }

    .editor-iphone-php-icone {
        font-family:
            Menlo,
            Monaco,
            Consolas,
            monospace;
        font-size: 13px;
    }

    /*
     * Somente o botão Salvar na parte inferior.
     */
    body.editor-modo-iphone .editor-acoes {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 18000;
        display: block;
        margin: 0;
        padding:
            8px
            10px
            calc(8px + env(safe-area-inset-bottom));
        border-top: 1px solid #263247;
        background: rgba(15, 23, 42, .98);
        box-shadow: 0 -5px 20px rgba(0, 0, 0, .22);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    body.editor-modo-iphone
    .editor-acoes #editorSalvar {
        display: block;
        width: 100%;
        min-height: 48px;
        margin: 0;
        padding: 11px 16px;
        border: 0;
        border-radius: 10px;
        background: #214ecf;
        color: #fff;
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        touch-action: manipulation;
    }

    body.editor-modo-iphone.editor-salvando
    .editor-acoes {
        pointer-events: none;
        opacity: .7;
    }
}

/*
 * Orientação horizontal: barras ainda menores.
 */
@media (
    max-height: 500px
)
and (
    max-width: 900px
)
and (
    orientation: landscape
)
and (
    pointer: coarse
) {
    body.editor-modo-iphone main {
        padding-top: calc(
            49px + env(safe-area-inset-top)
        );
        padding-bottom: calc(
            57px + env(safe-area-inset-bottom)
        );
    }

    body.editor-modo-iphone .editor-barra-iphone {
        min-height: calc(
            47px + env(safe-area-inset-top)
        );
        padding-bottom: 5px;
    }

    body.editor-modo-iphone
    .editor-barra-iphone button {
        min-height: 36px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    body.editor-modo-iphone .editor-acoes {
        padding-top: 5px;
        padding-bottom: calc(
            5px + env(safe-area-inset-bottom)
        );
    }

    body.editor-modo-iphone
    .editor-acoes #editorSalvar {
        min-height: 40px;
    }
}

/*
|--------------------------------------------------------------------------
| Card de módulo do dashboard
|--------------------------------------------------------------------------
*/

.card-modulo {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
}

.card-modulo-icone {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 14px;
    background: #e8eefc;
    color: #214ecf;
}

.card-modulo-icone svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.card-modulo-acao {
    margin-top: 18px !important;
}

.card-modulo-acao a {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border-radius: 9px;
    background: #214ecf;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.card-modulo-acao a:hover {
    background: #183ca8;
}

.card-modulo-acao a span {
    font-size: 17px;
}

@media (max-width: 600px) {
    .card-modulo {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 11px;
    }

    .card-modulo-icone {
        width: 44px;
        height: 44px;
        border-radius: 11px;
    }

    .card-modulo-icone svg {
        width: 23px;
        height: 23px;
    }

    .card-modulo-acao a {
        width: 100%;
        min-height: 46px;
        justify-content: center;
    }
}

/*
|--------------------------------------------------------------------------
| Atalhos para as raízes dos sistemas
|--------------------------------------------------------------------------
*/

.atalhos-sipos-cabecalho {
    margin-bottom: 10px;
    padding: 11px;
}

.atalhos-sipos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.atalho-sipos {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid #dbe2ec;
    border-radius: 9px;
    background: #fff;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    touch-action: manipulation;
}

.atalho-sipos:hover {
    border-color: #b9c8f3;
    background: #eef2ff;
    color: #214ecf;
}

.atalho-sipos.ativo {
    border-color: #214ecf;
    background: #214ecf;
    color: #fff;
}

.atalho-sipos-icone {
    display: inline-grid;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    place-items: center;
}

.atalho-sipos-icone svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
 * No iPad e no iPhone os atalhos ficam em uma faixa rolável,
 * evitando ocupar muitas linhas.
 */
@media (max-width: 1100px) {
    .atalhos-sipos-cabecalho {
        padding: 8px;
    }

    .atalhos-sipos {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: thin;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .atalho-sipos {
        min-width: max-content;
        min-height: 46px;
        padding: 10px 14px;
        scroll-snap-align: start;
        font-size: 13px;
    }

    .atalho-sipos-icone,
    .atalho-sipos-icone svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 600px) {
    .atalhos-sipos-cabecalho {
        margin-right: -4px;
        margin-left: -4px;
        border-radius: 10px;
    }

    .atalho-sipos {
        min-height: 48px;
        padding-right: 15px;
        padding-left: 15px;
    }
}

.acoes-banco-topo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
}

.acoes-banco-topo a,
.acoes-banco-topo button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 9px 14px;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    touch-action: manipulation;
}

.acao-banco-principal {
    background: #214ecf;
    color: #fff;
}

.acao-banco-principal:hover {
    background: #183da8;
}

.acao-banco-secundaria {
    background: #e8eefc;
    color: #214ecf;
}

.acao-banco-secundaria:hover {
    background: #d9e3fc;
}

.acao-banco-icone {
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
}

.acao-banco-icone svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 600px) {
    .acoes-banco-topo {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .acoes-banco-topo a,
    .acoes-banco-topo button {
        width: 100%;
        min-height: 48px;
        font-size: 14px;
    }
}

/*
|--------------------------------------------------------------------------
| Tabelas abertas dentro da visão geral de bancos
|--------------------------------------------------------------------------
*/

.banco-area-trabalho {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    min-height: 520px;
}

.banco-tabelas-internas {
    min-width: 0;
    border-right: 1px solid #e5e7eb;
    background: #fbfcfe;
}

.banco-tabelas-internas .lista-tabelas-geral {
    max-height: calc(100vh - 290px);
}

.banco-tabelas-internas .linha-tabela-geral {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 39px;
    padding: 4px 9px;
}

.banco-tabelas-internas
.linha-tabela-geral .dado-tabela {
    display: none;
}

.banco-tabelas-internas .linha-tabela-geral.ativa {
    background: #e8eefc;
    color: #214ecf;
    box-shadow: inset 3px 0 0 #214ecf;
}

.painel-tabela-banco {
    min-width: 0;
    background: #fff;
}

.painel-tabela-vazio,
.painel-tabela-carregando,
.painel-tabela-erro {
    display: grid;
    min-height: 520px;
    padding: 30px;
    place-content: center;
    text-align: center;
}

.painel-tabela-vazio h3,
.painel-tabela-vazio p {
    margin: 0;
}

.painel-tabela-vazio p {
    margin-top: 7px;
    color: #64748b;
}

.painel-tabela-vazio-icone {
    display: grid;
    width: 58px;
    height: 58px;
    margin: 0 auto 15px;
    place-items: center;
    border-radius: 16px;
    background: #e8eefc;
    color: #214ecf;
}

.painel-tabela-vazio-icone svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.painel-tabela-carregando {
    gap: 12px;
    color: #64748b;
}

.spinner-tabela {
    width: 34px;
    height: 34px;
    margin: 0 auto;
    border: 3px solid #dbe3f6;
    border-top-color: #214ecf;
    border-radius: 50%;
    animation: girarTabela .75s linear infinite;
}

@keyframes girarTabela {
    to {
        transform: rotate(360deg);
    }
}

.painel-tabela-erro {
    background: #fef2f2;
    color: #991b1b;
}

.painel-tabela-erro p {
    max-width: 650px;
    overflow-wrap: anywhere;
}

.painel-tabela-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.painel-tabela-topo span {
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.painel-tabela-topo h3 {
    margin: 3px 0 0;
    font-family: monospace;
    font-size: 18px;
    overflow-wrap: anywhere;
}

.painel-tabela-acoes a {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    background: #214ecf;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.abas-tabela-painel {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 8px 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

.abas-tabela-painel button {
    min-height: 39px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-weight: 700;
}

.abas-tabela-painel button.ativa {
    background: #e8eefc;
    color: #214ecf;
}

.abas-tabela-painel button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.ferramentas-tabela-painel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid #eef0f4;
}

.ferramentas-tabela-painel > div:first-child {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.ferramentas-tabela-painel input {
    width: min(340px, 100%);
    min-height: 39px;
    padding: 8px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}

.ferramentas-tabela-painel select {
    min-height: 37px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
}

.tabela-painel-limite {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
}

.resumo-registros-painel {
    padding: 7px 12px;
    border-bottom: 1px solid #eef0f4;
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
}

.tabela-registros-scroll {
    max-height: calc(100vh - 390px);
    overflow: auto;
}

.tabela-registros-scroll table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
    font-size: 11px;
}

.tabela-registros-scroll th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 7px 9px;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #d1d5db;
    background: #f8fafc;
    color: #475569;
    font-family: monospace;
    text-align: left;
}

.tabela-registros-scroll th span,
.tabela-registros-scroll th small {
    display: block;
}

.tabela-registros-scroll th small {
    margin-top: 2px;
    color: #94a3b8;
    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: 400;
}

.tabela-registros-scroll td {
    max-width: 300px;
    padding: 6px 9px;
    overflow: hidden;
    border-right: 1px solid #eef0f4;
    border-bottom: 1px solid #eef0f4;
    text-overflow: ellipsis;
    vertical-align: top;
}

.tabela-registros-scroll td[data-valor-registro] {
    cursor: pointer;
}

.tabela-registros-scroll td.valor-expandido {
    max-width: 600px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.tabela-registros-scroll tr:hover td {
    background: #f8fafc;
}

.coluna-acao-registro {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 70px;
    background: #fff;
}

th.coluna-acao-registro {
    z-index: 3;
    background: #f8fafc;
}

.botao-editar-registro-painel {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 5px 9px;
    border-radius: 7px;
    background: #e8eefc;
    color: #214ecf;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}

.tabela-registros-vazia {
    padding: 28px !important;
    color: #64748b;
    text-align: center;
}

.paginacao-tabela-painel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid #e5e7eb;
}

.paginacao-tabela-painel > span {
    color: #64748b;
    font-size: 11px;
}

.paginacao-tabela-painel > div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.paginacao-tabela-painel button {
    min-width: 33px;
    min-height: 33px;
    padding: 5px 8px;
    border: 0;
    border-radius: 7px;
    background: #eef2ff;
    color: #214ecf;
    cursor: pointer;
    font-weight: 700;
}

.paginacao-tabela-painel button.ativo {
    background: #214ecf;
    color: #fff;
}

@media (max-width: 1100px) {
    .banco-area-trabalho {
        grid-template-columns: 240px minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .banco-area-trabalho {
        display: block;
    }

    .banco-tabelas-internas {
        border-right: 0;
        border-bottom: 1px solid #e5e7eb;
    }

    .banco-tabelas-internas .lista-tabelas-geral {
        display: flex;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 7px;
    }

    .banco-tabelas-internas .linha-tabela-geral {
        min-width: 190px;
        margin-right: 5px;
        border: 1px solid #e5e7eb;
        border-radius: 9px;
    }

    .painel-tabela-topo {
        align-items: stretch;
        flex-direction: column;
    }

    .painel-tabela-acoes a {
        width: 100%;
        min-height: 46px;
        justify-content: center;
    }

    .ferramentas-tabela-painel {
        align-items: stretch;
        flex-direction: column;
    }

    .ferramentas-tabela-painel > div:first-child {
        display: block;
    }

    .ferramentas-tabela-painel input {
        width: 100%;
        min-height: 46px;
        font-size: 16px;
    }

    .tabela-painel-limite {
        justify-content: space-between;
    }

    .tabela-painel-limite select {
        min-width: 90px;
        min-height: 44px;
        font-size: 16px;
    }

    .tabela-registros-scroll {
        max-height: 58vh;
    }

    .paginacao-tabela-painel {
        align-items: stretch;
        flex-direction: column;
    }

    .paginacao-tabela-painel button {
        min-height: 42px;
    }
}

/*
|--------------------------------------------------------------------------
| Aba Estrutura das tabelas
|--------------------------------------------------------------------------
*/

.conteudo-aba-tabela {
    display: none;
}

.conteudo-aba-tabela.ativa {
    display: block;
}

.estrutura-tabela-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.estrutura-tabela-topo h4 {
    margin: 0;
    font-size: 15px;
}

.estrutura-tabela-topo p {
    margin: 3px 0 0;
    color: #64748b;
    font-size: 11px;
}

.estrutura-tabela-cabecalho,
.estrutura-coluna-linha {
    display: grid;
    grid-template-columns:
        35px
        minmax(150px, 1fr)
        minmax(140px, 1fr)
        120px
        150px
        150px;
    align-items: center;
    gap: 9px;
}

.estrutura-tabela-cabecalho {
    padding: 8px 12px;
    border-bottom: 1px solid #dbe2ec;
    background: #f8fafc;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.estrutura-tabela-lista {
    max-height: calc(100vh - 390px);
    overflow: auto;
}

.estrutura-coluna-linha {
    min-height: 45px;
    padding: 6px 12px;
    border-bottom: 1px solid #eef0f4;
    font-size: 11px;
}

.estrutura-coluna-linha:hover {
    background: #f8fafc;
}

.estrutura-coluna-icone {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 7px;
    background: #eef2ff;
    color: #214ecf;
}

.estrutura-coluna-icone.primaria {
    background: #fef3c7;
    color: #92400e;
}

.estrutura-coluna-nome {
    min-width: 0;
}

.estrutura-coluna-nome strong {
    display: block;
    overflow: hidden;
    font-family: monospace;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.estrutura-coluna-nome span {
    display: inline-block;
    margin-top: 2px;
    padding: 2px 5px;
    border-radius: 10px;
    background: #fef3c7;
    color: #92400e;
    font-size: 8px;
    font-weight: 700;
}

.estrutura-coluna-tipo {
    overflow-wrap: anywhere;
    color: #214ecf;
    font-family: monospace;
    font-weight: 700;
}

.estrutura-coluna-dado,
.estrutura-coluna-extra {
    color: #64748b;
}

.estrutura-coluna-dado code {
    font-size: 10px;
}

.estrutura-tabela-vazia {
    padding: 28px;
    color: #64748b;
}

@media (max-width: 760px) {
    .estrutura-tabela-cabecalho {
        display: none;
    }

    .estrutura-coluna-linha {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 6px 9px;
        min-height: 70px;
        padding: 10px;
    }

    .estrutura-coluna-tipo,
    .estrutura-coluna-dado,
    .estrutura-coluna-extra {
        grid-column: 2;
    }

    .estrutura-coluna-tipo {
        font-size: 11px;
    }

    .estrutura-coluna-dado,
    .estrutura-coluna-extra {
        font-size: 10px;
    }

    .estrutura-tabela-lista {
        max-height: 58vh;
    }
}

/*
|--------------------------------------------------------------------------
| Aba Índices
|--------------------------------------------------------------------------
*/

.indices-tabela-topo {
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.indices-tabela-topo h4 {
    margin: 0;
    font-size: 15px;
}

.indices-tabela-topo p {
    margin: 3px 0 0;
    color: #64748b;
    font-size: 11px;
}

.indices-tabela-cabecalho,
.indice-tabela-item {
    display: grid;
    grid-template-columns:
        38px
        minmax(150px, .8fr)
        minmax(220px, 1.5fr)
        110px
        130px;
    align-items: center;
    gap: 10px;
}

.indices-tabela-cabecalho {
    padding: 8px 12px;
    border-bottom: 1px solid #dbe2ec;
    background: #f8fafc;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.indices-tabela-lista {
    max-height: calc(100vh - 390px);
    overflow: auto;
}

.indice-tabela-item {
    min-height: 50px;
    padding: 7px 12px;
    border-bottom: 1px solid #eef0f4;
}

.indice-tabela-item:hover {
    background: #f8fafc;
}

.indice-tabela-icone {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 8px;
    background: #e8eefc;
    color: #214ecf;
}

.indice-tabela-icone.primario {
    background: #fef3c7;
    color: #92400e;
}

.indice-tabela-icone.unico {
    background: #dcfce7;
    color: #166534;
}

.indice-tabela-nome strong {
    display: block;
    overflow: hidden;
    font-family: monospace;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.indice-tabela-nome span {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 6px;
    border-radius: 10px;
    background: #eef2ff;
    color: #214ecf;
    font-size: 8px;
    font-weight: 700;
}

.indice-tabela-colunas {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.indice-coluna {
    padding: 4px 7px;
    border: 1px solid #dbe2ec;
    border-radius: 7px;
    background: #fff;
    font-family: monospace;
    font-size: 10px;
}

.indice-tabela-dado {
    color: #64748b;
    font-size: 11px;
}

.indices-tabela-vazio {
    padding: 28px;
    color: #64748b;
}

@media (max-width: 760px) {
    .indices-tabela-cabecalho {
        display: none;
    }

    .indice-tabela-item {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 7px 10px;
        min-height: 80px;
        padding: 10px;
    }

    .indice-tabela-colunas,
    .indice-tabela-dado {
        grid-column: 2;
    }

    .indices-tabela-lista {
        max-height: 58vh;
    }
}

/* Inserção de registros */
.insercao-registro-topo {
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.insercao-registro-topo h4 {
    margin: 0;
    font-size: 15px;
}

.insercao-registro-topo p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 11px;
}

.campos-insercao-registro {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-height: calc(100vh - 420px);
    padding: 14px;
    overflow-y: auto;
}

.campo-insercao-registro {
    min-width: 0;
    padding: 11px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #f8fafc;
}

.campo-insercao-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}

.campo-insercao-topo label {
    overflow: hidden;
    font-family: monospace;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
}

.campo-insercao-topo span {
    color: #64748b;
    font-family: monospace;
    font-size: 9px;
}

.campo-insercao-registro input[type="text"],
.campo-insercao-registro input[type="number"],
.campo-insercao-registro input[type="date"],
.campo-insercao-registro input[type="datetime-local"],
.campo-insercao-registro textarea {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
    font-family: monospace;
    font-size: 12px;
}

.campo-insercao-registro textarea {
    resize: vertical;
}

.campo-insercao-opcoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 7px;
    color: #64748b;
    font-size: 10px;
}

.campo-insercao-opcoes label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.campo-insercao-opcoes .obrigatorio {
    color: #b91c1c;
    font-weight: 700;
}

.acoes-insercao-registro {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 12px 14px;
    border-top: 1px solid #e5e7eb;
}

.acoes-insercao-registro button {
    min-height: 42px;
    padding: 9px 14px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
}

.limpar-insercao-registro {
    background: #e5e7eb;
    color: #475569;
}

.salvar-insercao-registro {
    background: #214ecf;
    color: #fff;
}

.mensagem-insercao-registro {
    margin: 0 14px 12px;
    padding: 11px 12px;
    border-radius: 8px;
    font-size: 12px;
}

.mensagem-insercao-registro.sucesso {
    background: #dcfce7;
    color: #166534;
}

.mensagem-insercao-registro.erro {
    background: #fee2e2;
    color: #991b1b;
}

@media (max-width: 760px) {
    .campos-insercao-registro {
        grid-template-columns: 1fr;
        max-height: 55vh;
        padding: 10px;
    }

    .campo-insercao-registro input,
    .campo-insercao-registro textarea {
        min-height: 46px;
        font-size: 16px;
    }

    .acoes-insercao-registro {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .acoes-insercao-registro button {
        width: 100%;
        min-height: 48px;
    }
}

/*
|--------------------------------------------------------------------------
| Editor CodeMirror
|--------------------------------------------------------------------------
*/

.editor-area {
    display: block !important;
    min-width: 0;
    height: calc(100vh - 315px);
    min-height: 480px;
    overflow: hidden;
    border: 1px solid #273449;
    border-radius: 10px;
    background: #212121;
}

.editor-area > .editor-linhas {
    display: none !important;
}

.editor-area > textarea#editorConteudo {
    display: none;
}

.editor-area .CodeMirror {
    width: 100%;
    height: 100%;
    min-width: 0;
    border: 0;
    background: #212121;
    font-family:
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;
    font-size: 13px;
    line-height: 1.55;
}

.editor-area .CodeMirror-scroll {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.editor-area .CodeMirror-wrap pre.CodeMirror-line,
.editor-area .CodeMirror-wrap pre.CodeMirror-line-like {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.editor-area .CodeMirror-lines {
    padding: 12px 0 28px;
}

.editor-area .CodeMirror pre.CodeMirror-line,
.editor-area .CodeMirror pre.CodeMirror-line-like {
    padding-right: 14px;
    padding-left: 10px;
}

.editor-area .CodeMirror-gutters {
    border-right: 1px solid #30363d;
    background: #171717;
}

.editor-area .CodeMirror-linenumber {
    padding: 0 8px 0 5px;
    color: #6b7280;
}

.editor-area .CodeMirror-activeline-background {
    background: rgba(255, 255, 255, .035);
}

.editor-area .CodeMirror-selected {
    background: rgba(66, 133, 244, .35) !important;
}

.editor-area .CodeMirror-cursor {
    border-left: 2px solid #fff;
}

.editor-status #editorEstado.alterado {
    color: #b45309;
    font-weight: 700;
}

/*
 * Cores PHP e HTML mais próximas dos editores tradicionais.
 */
.cm-s-material-darker .cm-keyword {
    color: #c792ea;
}

.cm-s-material-darker .cm-variable,
.cm-s-material-darker .cm-variable-2 {
    color: #f8c555;
}

.cm-s-material-darker .cm-def,
.cm-s-material-darker .cm-property {
    color: #82aaff;
}

.cm-s-material-darker .cm-string,
.cm-s-material-darker .cm-string-2 {
    color: #c3e88d;
}

.cm-s-material-darker .cm-comment {
    color: #676e95;
    font-style: italic;
}

.cm-s-material-darker .cm-tag {
    color: #f07178;
}

.cm-s-material-darker .cm-attribute {
    color: #ffcb6b;
}

.cm-s-material-darker .cm-number {
    color: #f78c6c;
}

.cm-s-material-darker .cm-operator {
    color: #89ddff;
}

.cm-s-material-darker .cm-meta {
    color: #89ddff;
}

@media (max-width: 1100px) {
    .editor-area {
        height: calc(100vh - 285px);
        min-height: 420px;
    }

    .editor-area .CodeMirror {
        font-size: 14px;
    }
}

@media (max-width: 760px) {
    body.editor-modo-iphone .editor-area {
        width: 100%;
        height: 100% !important;
        min-height: 100%;
        border: 0;
        border-radius: 0;
    }

    body.editor-modo-iphone .editor-area .CodeMirror {
        width: 100%;
        height: 100% !important;
        font-size: 16px;
        line-height: 1.55;
    }

    body.editor-modo-iphone .editor-area .CodeMirror-scroll {
        padding-bottom: 24px;
        -webkit-overflow-scrolling: touch;
    }

    body.editor-modo-iphone .editor-area
    .CodeMirror-gutters {
        display: none;
    }

    body.editor-modo-iphone .editor-area
    .CodeMirror-lines {
        padding-top: 12px;
    }

    body.editor-modo-iphone .editor-area
    .CodeMirror pre.CodeMirror-line,
    body.editor-modo-iphone .editor-area
    .CodeMirror pre.CodeMirror-line-like {
        padding-right: 12px;
        padding-left: 12px;
    }
}

/* Edição estrutural de colunas */

.estrutura-tabela-cabecalho,
.estrutura-coluna-linha {
    grid-template-columns:
        35px
        minmax(150px, 1fr)
        minmax(140px, 1fr)
        120px
        150px
        130px
        80px;
}

.nova-coluna-tabela,
.estrutura-coluna-acoes button {
    min-height: 38px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: #214ecf;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
}

.estrutura-coluna-acoes button {
    min-height: 32px;
    padding: 6px 10px;
    background: #e8eefc;
    color: #214ecf;
    font-size: 10px;
}

.modal-coluna-tabela[hidden] {
    display: none !important;
}

.modal-coluna-tabela {
    position: fixed;
    inset: 0;
    z-index: 30000;
}

.modal-coluna-tabela-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(2px);
}

.modal-coluna-tabela-caixa {
    position: relative;
    z-index: 1;
    width: min(720px, calc(100% - 28px));
    max-height: calc(100vh - 28px);
    margin: 14px auto;
    overflow-y: auto;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(15, 23, 42, .35);
}

.modal-coluna-tabela-topo {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
    align-items: center;
    justify-content: space-between;
    padding: 15px 17px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.modal-coluna-tabela-topo span {
    color: #64748b;
    font-size: 10px;
    text-transform: uppercase;
}

.modal-coluna-tabela-topo h3 {
    margin: 3px 0 0;
}

.modal-coluna-tabela-topo > button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 9px;
    background: #e5e7eb;
    cursor: pointer;
    font-size: 22px;
}

.campos-modal-coluna {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    padding: 17px;
}

.campos-modal-coluna label > span {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
}

.campos-modal-coluna input,
.campos-modal-coluna select {
    width: 100%;
    min-height: 43px;
    padding: 9px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
}

.opcoes-modal-coluna {
    display: flex;
    gap: 20px;
    padding: 0 17px 17px;
}

.opcoes-modal-coluna label {
    display: flex;
    align-items: center;
    gap: 7px;
}

.mensagem-modal-coluna {
    margin: 0 17px 14px;
    padding: 11px 12px;
    border-radius: 8px;
}

.mensagem-modal-coluna.erro {
    background: #fee2e2;
    color: #991b1b;
}

.acoes-modal-coluna {
    display: flex;
    position: sticky;
    bottom: 0;
    justify-content: flex-end;
    gap: 9px;
    padding: 13px 17px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

.acoes-modal-coluna button {
    min-height: 43px;
    padding: 9px 15px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
}

.acoes-modal-coluna button[type="button"] {
    background: #e5e7eb;
    color: #475569;
}

.salvar-coluna-tabela {
    background: #214ecf;
    color: #fff;
}

body.modal-coluna-aberto {
    overflow: hidden;
}

@media (max-width: 760px) {
    .estrutura-coluna-linha {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .estrutura-coluna-acoes {
        grid-column: 2;
    }

    .campos-modal-coluna {
        grid-template-columns: 1fr;
        padding: 13px;
    }

    .campos-modal-coluna input,
    .campos-modal-coluna select {
        min-height: 48px;
        font-size: 16px;
    }

    .opcoes-modal-coluna {
        align-items: flex-start;
        flex-direction: column;
        padding: 0 13px 13px;
    }

    .acoes-modal-coluna {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding-bottom: calc(
            13px + env(safe-area-inset-bottom)
        );
    }
}

.estrutura-coluna-acoes {
    display: flex;
    align-items: center;
    gap: 5px;
}

.estrutura-coluna-acoes
.excluir-coluna-tabela {
    background: #fee2e2;
    color: #b91c1c;
}

.estrutura-coluna-acoes
.excluir-coluna-tabela:hover {
    background: #fecaca;
}

@media (max-width: 760px) {
    .estrutura-coluna-acoes {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .estrutura-coluna-acoes button {
        min-height: 42px;
    }
}

.estrutura-coluna-acoes {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 145px;
}

.estrutura-coluna-acoes button {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
}

.estrutura-coluna-acoes .excluir-coluna-tabela {
    background: #fee2e2;
    color: #b91c1c;
}

.estrutura-coluna-acoes .excluir-coluna-tabela:hover {
    background: #fecaca;
}

/*
|--------------------------------------------------------------------------
| Cabeçalho global
|--------------------------------------------------------------------------
*/

.cabecalho-global {
    position: relative;
    z-index: 8000;
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 22px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .04);
}

.cabecalho-global-esquerda {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 24px;
}

.cabecalho-global-marca {
    flex: 0 0 auto;
    color: #214ecf;
    font-size: 21px;
    font-weight: 800;
    text-decoration: none;
}

.menu-global {
    display: flex;
    align-items: center;
    gap: 4px;
}

.menu-global-link {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 9px;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.menu-global-link svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.menu-global-link:hover {
    background: #f1f5f9;
    color: #214ecf;
}

.menu-global-link.ativo {
    background: #e8eefc;
    color: #214ecf;
}

.cabecalho-global-usuario {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
}

.cabecalho-global-nome {
    max-width: 190px;
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cabecalho-global-sair {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: 7px 11px;
    border-radius: 8px;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.cabecalho-global-sair:hover {
    background: #fee2e2;
    color: #b91c1c;
}

@media (max-width: 900px) {
    .cabecalho-global {
        align-items: stretch;
        flex-direction: column;
        gap: 7px;
        padding: 10px 13px;
    }

    .cabecalho-global-esquerda {
        align-items: center;
        gap: 13px;
    }

    .menu-global {
        flex: 1;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .menu-global::-webkit-scrollbar {
        display: none;
    }

    .menu-global-link {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 9px 12px;
    }

    .cabecalho-global-usuario {
        display: none;
    }
}

@media (max-width: 520px) {
    .cabecalho-global {
        padding: 7px 8px;
    }

    .cabecalho-global-esquerda {
        gap: 6px;
    }

    .cabecalho-global-marca {
        padding: 0 6px;
        font-size: 18px;
    }

    .menu-global {
        gap: 2px;
    }

    .menu-global-link {
        min-width: 48px;
        min-height: 46px;
        justify-content: center;
        padding: 8px 10px;
    }

    .menu-global-link span {
        display: none;
    }

    .menu-global-link svg {
        width: 21px;
        height: 21px;
    }
}