:root {
    --fundo: #071016;
    --fundo-profundo: #050a0f;
    --painel: #0b171f;
    --painel-2: #10212b;
    --painel-3: #142a35;
    --linha: #2a4554;
    --linha-forte: #3e6678;
    --texto: #f2f7f9;
    --apoio: #b5c4cc;
    --ciano: #43e8ef;
    --verde: #79e7a2;
    --amarelo: #ffe078;
    --vermelho: #ff7785;
    --azul: #75adff;
    --lilas: #d4a4ff;
    --sombra-ciano: 0 0 22px rgba(67, 232, 239, .16);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--fundo); }
body {
    margin: 0;
    min-width: 320px;
    background: var(--fundo);
    color: var(--texto);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    letter-spacing: 0;
}
button, input, textarea, select { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }
small { color: var(--apoio); }

input, textarea, select {
    width: 100%;
    border: 1px solid var(--linha);
    border-radius: 6px;
    outline: none;
    background: #09151d;
    color: var(--texto);
    transition: border-color .16s ease, box-shadow .16s ease;
}
input, select { min-height: 42px; padding: 8px 10px; }
textarea { resize: vertical; padding: 10px; line-height: 1.55; }
input:focus, textarea:focus, select:focus {
    border-color: var(--ciano);
    box-shadow: 0 0 0 3px rgba(67, 232, 239, .1);
}
input:disabled, textarea:disabled, select:disabled { opacity: .7; cursor: not-allowed; }
label {
    display: grid;
    gap: 6px;
    color: #d6e1e6;
    font-size: .76rem;
    font-weight: 750;
}

.botao {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: .76rem;
    font-weight: 800;
    text-decoration: none;
}
.botao:disabled { cursor: not-allowed; filter: grayscale(.5); opacity: .5; }
.botao.primario {
    border-color: #39cdd4;
    background: #20cbd3;
    color: #021014;
    box-shadow: 0 0 18px rgba(32, 203, 211, .2);
}
.botao.primario:hover:not(:disabled) { background: #55edf3; }
.botao.secundario { border-color: var(--linha-forte); background: #10212a; color: var(--texto); }
.botao.secundario:hover:not(:disabled) { border-color: #6a94a7; background: #172d38; }
.botao.piloto { border-color: #87732f; background: #28250e; color: var(--amarelo); }
.botao.imagem { border-color: #5a8f73; background: #112a20; color: var(--verde); }
.botao.perigo, .menu-flutuante .perigo { color: #ffbbc2; }
.largura-total { width: 100%; }
.botao-icone {
    display: inline-grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--linha);
    border-radius: 6px;
    background: #0e1d26;
    color: var(--texto);
}
.botao-icone:hover { border-color: var(--ciano); color: var(--ciano); }

.tela-carregando {
    display: grid;
    min-height: 100vh;
    place-content: center;
    justify-items: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
}
.tela-carregando img { width: 70px; height: 70px; border-radius: 18px; }
.tela-carregando > i {
    margin-top: 10px;
    color: var(--ciano);
    font-size: 1.8rem;
    filter: drop-shadow(0 0 12px rgba(67, 232, 239, .55));
    animation: pulsar 1.5s infinite;
}
.tela-carregando h1 { margin: 4px 0 0; font-size: 1.12rem; }
.tela-carregando p { max-width: 420px; margin: 0; color: var(--apoio); font-size: .8rem; }
@keyframes pulsar { 50% { opacity: .45; transform: scale(.94); } }

.editor-layout {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 268px minmax(0, 1fr);
}
.painel-biblioteca {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    display: flex;
    width: 268px;
    flex-direction: column;
    border-right: 1px solid #263e4a;
    background: #081219;
}
.marca-editor {
    display: grid;
    min-height: 76px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #263e4a;
}
.marca-editor a { display: block; width: 42px; height: 42px; }
.marca-editor img { width: 42px; height: 42px; border-radius: 12px; }
.marca-editor strong, .marca-editor span { display: block; }
.marca-editor strong { font-size: .91rem; }
.marca-editor span { margin-top: 3px; color: var(--apoio); font-size: .67rem; }
.biblioteca-acoes { display: grid; gap: 8px; padding: 14px; }
.filtros-biblioteca {
    display: grid;
    gap: 6px;
    padding: 0 14px 14px;
    border-bottom: 1px solid #203743;
}
.check-filtro {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 3px 0 5px;
    color: var(--apoio);
    font-size: .67rem;
    font-weight: 700;
    cursor: pointer;
}
.check-filtro input { width: 16px; height: 16px; accent-color: var(--ciano); }
.campo-busca { position: relative; }
.campo-busca i {
    position: absolute;
    top: 50%;
    left: 11px;
    color: #71909f;
    transform: translateY(-50%);
}
.campo-busca input { padding-left: 34px; }
.lista-documentos {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}
.documento-item {
    display: grid;
    width: 100%;
    grid-template-columns: 5px minmax(0, 1fr);
    gap: 9px;
    margin-bottom: 5px;
    padding: 9px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--texto);
    text-align: left;
}
.documento-item::before {
    content: "";
    width: 4px;
    min-height: 100%;
    border-radius: 2px;
    background: #4f6874;
}
.documento-item[data-status="PUBLICADO"]::before { background: var(--verde); box-shadow: 0 0 10px rgba(121,231,162,.35); }
.documento-item[data-status="EM_REVISAO"]::before { background: var(--amarelo); }
.documento-item[data-status="APROVADO"]::before { background: var(--azul); }
.documento-item[data-status="ARQUIVADO"] { opacity: .72; }
.documento-item[data-status="ARQUIVADO"]::before { background: #71818a; }
.documento-item:hover, .documento-item.ativo { border-color: #345465; background: #0e2029; }
.documento-item strong, .documento-item span, .documento-item small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.documento-item strong { font-size: .75rem; }
.documento-item span { margin-top: 5px; color: var(--apoio); font-size: .63rem; }
.documento-item small { margin-top: 4px; color: #76909e; font-size: .59rem; }
.biblioteca-rodape {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-top: 1px solid #263e4a;
}
.biblioteca-rodape a {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 8px;
    border-radius: 5px;
    color: var(--apoio);
    font-size: .7rem;
    font-weight: 750;
    text-decoration: none;
}
.biblioteca-rodape a:hover { background: #10212a; color: var(--texto); }
.biblioteca-rodape i { width: 18px; color: var(--ciano); text-align: center; }

.area-editor { min-width: 0; grid-column: 2; }
.barra-superior {
    position: sticky;
    top: 0;
    z-index: 25;
    display: flex;
    min-height: 64px;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #29434f;
    background: rgba(7, 16, 22, .96);
    backdrop-filter: blur(12px);
}
.contexto-documento { min-width: 0; }
.contexto-documento span, .contexto-documento strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contexto-documento span { color: var(--ciano); font-size: .58rem; font-weight: 900; }
.contexto-documento strong { margin-top: 4px; font-size: .86rem; }
.acoes-documento { display: flex; flex: 0 0 auto; gap: 8px; align-items: center; }
.estado-salvamento { color: var(--apoio); font-size: .66rem; }
.estado-salvamento.alterado { color: var(--amarelo); }
.estado-salvamento.salvando { color: var(--ciano); }
.menu-flutuante {
    position: fixed;
    top: 58px;
    right: 12px;
    z-index: 90;
    display: grid;
    width: 230px;
    overflow: hidden;
    border: 1px solid var(--linha-forte);
    border-radius: 7px;
    background: #0b1820;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .45);
}
.menu-flutuante button {
    display: grid;
    min-height: 42px;
    grid-template-columns: 24px 1fr;
    gap: 8px;
    align-items: center;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid #203944;
    background: transparent;
    color: var(--texto);
    text-align: left;
    font-size: .72rem;
    font-weight: 750;
}
.menu-flutuante button:hover { background: #142731; }
.menu-flutuante i { color: var(--ciano); text-align: center; }

.estado-vazio {
    display: grid;
    min-height: calc(100vh - 64px);
    place-content: center;
    justify-items: center;
    gap: 10px;
    padding: 30px;
    text-align: center;
}
.estado-vazio > i { color: var(--ciano); font-size: 2.2rem; filter: drop-shadow(0 0 12px rgba(67,232,239,.3)); }
.estado-vazio h1 { margin: 6px 0 0; font-size: 1.15rem; }
.estado-vazio p { max-width: 480px; margin: 0 0 8px; color: var(--apoio); line-height: 1.55; font-size: .8rem; }

.espaco-trabalho {
    display: grid;
    min-height: calc(100vh - 64px);
    grid-template-columns: minmax(460px, 1fr) 340px;
}
.canvas-documento {
    min-width: 0;
    padding: 24px clamp(16px, 4vw, 54px) 70px;
}
.cabecalho-documento {
    max-width: 840px;
    margin: 0 auto 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--linha);
}
.marcadores-documento { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.etiqueta {
    display: inline-flex;
    min-height: 23px;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid #746527;
    border-radius: 12px;
    background: #27230d;
    color: var(--amarelo);
    font-size: .58rem;
    font-weight: 900;
    text-transform: uppercase;
}
.etiqueta.publicado { border-color: #3e7d5a; background: #0d281a; color: var(--verde); }
.etiqueta.aprovado { border-color: #476c9f; background: #101f34; color: #9bc3ff; }
.etiqueta.revisao { border-color: #8e7430; background: #2a220d; color: var(--amarelo); }
.etiqueta.arquivado { border-color: #63454a; background: #231619; color: #e6a9b0; }
.etiqueta.neutra { border-color: #3c5765; background: #10212a; color: #bdd0d8; }
.cabecalho-documento > label { margin: 12px 0 6px; }
.titulo-documento {
    min-height: 55px;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid var(--linha);
    border-radius: 0;
    background: transparent;
    font-size: 1.65rem;
    font-weight: 800;
}
.titulo-documento:focus { box-shadow: none; border-bottom-color: var(--ciano); }
.metadados-documento {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 14px;
    color: var(--apoio);
    font-size: .68rem;
}
.metadados-documento span { display: inline-flex; gap: 7px; align-items: center; }
.metadados-documento i { color: var(--ciano); }
.metadados-documento b { color: #d9e5e9; font-weight: 700; }
.aviso-contextual, .aviso-dialogo {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 11px 12px;
    border: 1px solid #385566;
    border-radius: 6px;
    background: #0f2029;
    color: #dbe8ec;
    font-size: .7rem;
    line-height: 1.5;
}
.aviso-contextual i, .aviso-dialogo i { margin-top: 2px; color: var(--ciano); }
.aviso-contextual strong, .aviso-contextual span { display: block; }
.aviso-contextual span { margin-top: 3px; color: var(--apoio); }
.aviso-dialogo.destaque { border-color: #53743e; background: #152414; }
.aviso-dialogo.destaque i { color: var(--verde); }
.divisor-blocos {
    display: flex;
    max-width: 840px;
    gap: 12px;
    align-items: end;
    justify-content: space-between;
    margin: 0 auto 12px;
}
.divisor-blocos span { color: var(--ciano); font-size: .58rem; font-weight: 900; }
.divisor-blocos h2 { margin: 4px 0 0; font-size: 1rem; }
.lista-blocos { display: grid; max-width: 840px; gap: 8px; margin: 0 auto; }
.bloco-editor {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid #2b4653;
    border-radius: 6px;
    background: #0b1820;
    transition: border-color .16s ease, background .16s ease;
}
.bloco-editor:hover, .bloco-editor.ativo { border-color: #5c8395; background: #0e2029; }
.bloco-editor.ativo { box-shadow: 0 0 0 2px rgba(67, 232, 239, .08); }
.bloco-icone {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 5px;
    background: #142a34;
    color: var(--ciano);
}
.bloco-editor[data-tipo="DICA"] .bloco-icone { background: #2a260e; color: var(--amarelo); }
.bloco-editor[data-tipo="ATENCAO"] .bloco-icone { background: #2b1519; color: var(--vermelho); }
.bloco-editor[data-tipo="PRATICA"] .bloco-icone,
.bloco-editor[data-tipo="EXERCICIO"] .bloco-icone,
.bloco-editor[data-tipo="DESAFIO"] .bloco-icone { background: #10271b; color: var(--verde); }
.bloco-editor[data-tipo="REVISAO"] .bloco-icone,
.bloco-editor[data-tipo="CONQUISTA"] .bloco-icone { background: #21172d; color: var(--lilas); }
.bloco-corpo { min-width: 0; }
.bloco-corpo > span { color: #7d98a5; font-size: .56rem; font-weight: 900; text-transform: uppercase; }
.bloco-corpo h3 { margin: 4px 0; font-size: .82rem; }
.bloco-corpo p { margin: 0; overflow: hidden; color: var(--apoio); font-size: .7rem; line-height: 1.48; text-overflow: ellipsis; }
.bloco-miniatura {
    width: min(220px, 100%);
    max-height: 112px;
    margin-top: 9px;
    border: 1px solid #355463;
    border-radius: 5px;
    object-fit: cover;
}
.bloco-acoes { display: flex; gap: 4px; }
.bloco-acoes button {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    padding: 0;
    border: 1px solid #2d4855;
    border-radius: 5px;
    background: #0d1b23;
    color: #acc0c9;
}
.bloco-acoes button:hover { border-color: var(--ciano); color: var(--ciano); }
.bloco-acoes button[data-excluir-bloco]:hover { border-color: var(--vermelho); color: var(--vermelho); }
.adicionar-final {
    display: flex;
    width: min(840px, 100%);
    min-height: 46px;
    gap: 9px;
    align-items: center;
    justify-content: center;
    margin: 10px auto 0;
    border: 1px dashed #3a5b6b;
    border-radius: 6px;
    background: transparent;
    color: var(--apoio);
    font-size: .72rem;
    font-weight: 800;
}
.adicionar-final:hover { border-color: var(--ciano); color: var(--ciano); background: #0d1c24; }

.painel-inspetor {
    position: sticky;
    top: 64px;
    height: calc(100vh - 64px);
    overflow-y: auto;
    border-left: 1px solid #29434f;
    background: #09151d;
}
.abas-inspetor {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--linha);
    background: #09151d;
}
.abas-inspetor button {
    min-height: 44px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--apoio);
    font-size: .7rem;
    font-weight: 850;
}
.abas-inspetor button.ativo { border-bottom-color: var(--ciano); color: var(--texto); }
.conteudo-inspetor { padding: 15px; }
.inspetor-vazio {
    display: grid;
    min-height: 260px;
    place-content: center;
    justify-items: center;
    gap: 8px;
    color: var(--apoio);
    text-align: center;
}
.inspetor-vazio i { color: var(--ciano); font-size: 1.5rem; }
.inspetor-vazio strong { color: var(--texto); font-size: .82rem; }
.inspetor-vazio span { font-size: .68rem; }
#formBloco { display: grid; gap: 10px; }
.inspetor-topo { display: flex; align-items: center; justify-content: space-between; }
.inspetor-topo > span { color: var(--ciano); font-size: .6rem; font-weight: 900; }
.check-linha {
    display: flex;
    min-height: 42px;
    grid-template-columns: auto 1fr;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--linha);
    border-radius: 6px;
    background: #0d1b23;
}
.check-linha input { width: 17px; min-height: 17px; margin: 0; accent-color: var(--ciano); }
.campos-conteudo-bloco { display: grid; gap: 10px; padding-top: 4px; }
.grupo-array {
    display: grid;
    gap: 7px;
    padding-top: 9px;
    border-top: 1px solid #243e4a;
}
.grupo-array > header { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.grupo-array > header strong { font-size: .7rem; }
.grupo-array > header button {
    border: 0;
    background: transparent;
    color: var(--ciano);
    font-size: .65rem;
    font-weight: 800;
}
.item-estruturado {
    display: grid;
    gap: 6px;
    padding: 9px;
    border: 1px solid var(--linha);
    border-radius: 5px;
    background: #0c1921;
}
.item-estruturado input, .item-estruturado textarea { min-height: 36px; font-size: .7rem; }
.item-estruturado > button {
    justify-self: end;
    border: 0;
    background: transparent;
    color: var(--vermelho);
    font-size: .64rem;
}
.acoes-imagem-inspetor { padding-top: 7px; border-top: 1px solid #29434f; }
.acoes-imagem-inspetor p { margin: 7px 0 0; color: var(--apoio); font-size: .62rem; text-align: center; }
.historico-cabecalho {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--linha);
}
.historico-cabecalho i { color: var(--ciano); }
.historico-cabecalho strong, .historico-cabecalho span { display: block; }
.historico-cabecalho strong { font-size: .78rem; }
.historico-cabecalho span { margin-top: 4px; color: var(--apoio); font-size: .64rem; line-height: 1.4; }
.lista-historico { display: grid; gap: 0; }
.historico-item {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
    padding: 13px 0;
    border-bottom: 1px solid #203944;
}
.historico-item > i { color: var(--ciano); text-align: center; }
.historico-item strong, .historico-item span, .historico-item small { display: block; }
.historico-item strong { font-size: .7rem; }
.historico-item span { margin-top: 4px; color: var(--apoio); font-size: .64rem; line-height: 1.45; }
.historico-item small { margin-top: 5px; color: #7894a0; font-size: .58rem; }

.dialogo {
    width: min(560px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 0;
    border: 1px solid var(--linha-forte);
    border-radius: 8px;
    background: #0b1820;
    color: var(--texto);
    box-shadow: 0 22px 70px rgba(0,0,0,.65);
}
.dialogo::backdrop { background: rgba(1, 5, 8, .78); backdrop-filter: blur(3px); }
.dialogo { padding: 18px; }
.dialogo > form { margin: -18px; padding: 18px; }
.dialogo form { display: grid; gap: 11px; }
.dialogo-largo { width: min(720px, calc(100vw - 24px)); }
.dialogo-topo {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 5px;
}
.dialogo-topo span { color: var(--ciano); font-size: .59rem; font-weight: 900; }
.dialogo-topo h2 { margin: 4px 0 0; font-size: 1rem; }
.grade-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.erro-form {
    margin: 0;
    padding: 9px 10px;
    border: 1px solid #733d46;
    border-radius: 5px;
    background: #2b1519;
    color: #ffd4d8;
    font-size: .7rem;
    line-height: 1.45;
}
.dialogo-acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.grade-tipos-bloco {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.tipo-bloco-opcao {
    display: grid;
    min-height: 96px;
    place-content: center;
    justify-items: center;
    gap: 7px;
    padding: 10px 7px;
    border: 1px solid var(--linha);
    border-radius: 6px;
    background: #0e2029;
    color: var(--texto);
    text-align: center;
}
.tipo-bloco-opcao i { color: var(--ciano); font-size: 1.2rem; }
.tipo-bloco-opcao span { font-size: .65rem; font-weight: 800; }
.tipo-bloco-opcao:hover { border-color: var(--ciano); box-shadow: var(--sombra-ciano); }
.origens-imagem { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.origem-imagem {
    min-height: 126px;
    place-content: center;
    justify-items: center;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--linha);
    border-radius: 6px;
    background: #0f2129;
    text-align: center;
    cursor: pointer;
}
.origem-imagem input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.origem-imagem i { color: var(--verde); font-size: 1.45rem; }
.origem-imagem strong { color: var(--texto); font-size: .75rem; }
.origem-imagem span { color: var(--apoio); font-size: .63rem; }
.origem-imagem:hover { border-color: var(--verde); box-shadow: 0 0 18px rgba(121,231,162,.1); }
.previa-imagem {
    overflow: hidden;
    border: 1px solid var(--linha-forte);
    border-radius: 6px;
    background: #050a0f;
}
.previa-imagem img { display: block; width: 100%; max-height: 280px; object-fit: contain; }
.lista-destinos {
    display: grid;
    max-height: 260px;
    gap: 5px;
    overflow-y: auto;
}
.destino-check {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    padding: 9px;
    border: 1px solid #294653;
    border-radius: 5px;
    background: #0d1c24;
}
.destino-check input { width: 17px; min-height: 17px; accent-color: var(--ciano); }
.destino-check strong, .destino-check span { display: block; }
.destino-check strong { color: var(--texto); font-size: .7rem; }
.destino-check span { margin-top: 3px; color: var(--apoio); font-size: .61rem; }
.resultado-publico {
    padding: 12px;
    border: 1px solid #4a745b;
    border-radius: 6px;
    background: #10251a;
}
.resultado-publico strong { display: block; color: var(--verde); font-size: .82rem; }
.resultado-publico p { margin: 6px 0; color: #d4e7da; font-size: .68rem; line-height: 1.45; }
.resultado-publico ul { margin: 8px 0 0; padding-left: 18px; color: var(--apoio); font-size: .64rem; line-height: 1.55; }
.dialogo-confirmacao p { color: #d5e1e6; font-size: .78rem; line-height: 1.6; }

.toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 150;
    display: flex;
    width: min(390px, calc(100vw - 28px));
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid #477184;
    border-radius: 7px;
    background: #10242d;
    color: var(--texto);
    box-shadow: 0 18px 42px rgba(0,0,0,.45);
    font-size: .72rem;
    line-height: 1.45;
}
.toast i { margin-top: 2px; color: var(--ciano); }
.toast.sucesso { border-color: #4d8061; background: #11291b; }
.toast.sucesso i { color: var(--verde); }
.toast.erro { border-color: #7b424b; background: #2b171b; }
.toast.erro i { color: var(--vermelho); }
.vazio-lista { padding: 26px 12px; color: var(--apoio); font-size: .7rem; line-height: 1.5; text-align: center; }
.somente-mobile { display: none; }

@media (max-width: 1080px) {
    .espaco-trabalho { grid-template-columns: minmax(420px, 1fr) 310px; }
    .canvas-documento { padding-inline: 18px; }
    .estado-salvamento { display: none; }
}

@media (max-width: 860px) {
    .somente-mobile { display: inline-grid; }
    .editor-layout { grid-template-columns: 1fr; }
    .painel-biblioteca {
        width: min(310px, 88vw);
        transform: translateX(-102%);
        transition: transform .2s ease;
        box-shadow: 20px 0 50px rgba(0,0,0,.5);
    }
    .painel-biblioteca.aberto { transform: translateX(0); }
    .area-editor { grid-column: 1; }
    .espaco-trabalho { display: block; }
    .canvas-documento { padding: 18px 12px 86px; }
    .painel-inspetor {
        position: fixed;
        inset: auto 0 0;
        z-index: 70;
        height: min(78vh, 680px);
        border: 1px solid var(--linha-forte);
        border-radius: 8px 8px 0 0;
        transform: translateY(102%);
        transition: transform .2s ease;
        box-shadow: 0 -20px 55px rgba(0,0,0,.62);
    }
    .painel-inspetor.aberto { transform: translateY(0); }
    .barra-superior { padding-inline: 10px; }
    .barra-superior .botao span { display: none; }
    .barra-superior .botao { width: 40px; padding-inline: 0; }
    .contexto-documento strong { max-width: 44vw; }
    .bloco-editor { grid-template-columns: 34px minmax(0, 1fr); }
    .bloco-acoes { grid-column: 1 / -1; justify-content: flex-end; border-top: 1px solid #253e49; padding-top: 7px; }
}

@media (max-width: 560px) {
    .titulo-documento { font-size: 1.28rem; }
    .divisor-blocos { align-items: center; }
    .divisor-blocos .botao { width: 38px; padding: 0; }
    .divisor-blocos .botao { font-size: 0; }
    .divisor-blocos .botao i { font-size: .76rem; }
    .grade-dupla, .grade-tipos-bloco, .origens-imagem { grid-template-columns: 1fr; }
    .grade-tipos-bloco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .origem-imagem { min-height: 102px; }
    .dialogo {
        width: calc(100vw - 12px);
        max-height: calc(100vh - 12px);
    }
    .dialogo { padding: 14px; }
    .dialogo > form { margin: -14px; padding: 14px; }
    .acoes-documento { gap: 5px; }
    .contexto-documento strong { max-width: 34vw; }
    .toast { right: 7px; bottom: 8px; }
}

@media print {
    .painel-biblioteca, .barra-superior, .painel-inspetor, .bloco-acoes,
    .adicionar-final, .divisor-blocos .botao, .toast { display: none !important; }
    .editor-layout, .area-editor, .espaco-trabalho { display: block; }
    .canvas-documento { padding: 0; }
    body { background: #fff; color: #111; }
}
