/* =====================================================================
     Cores do AEMWord
     ---------------------------------------------------------------------
     Saíram todas do logótipo: o azul do M, o verde do A e o laranja do
     traço do E. Os tons foram escurecidos o suficiente para o texto se
     ler sobre branco — as cores do logótipo são vivas de mais para letra
     pequena, e o que importa aqui é quem passa horas a escrever.
     ===================================================================== */
  :root{
    --azul:#0a6bc4;          /* o azul do M */
    --azul-escuro:#075293;
    --azul-claro:#7fb6e6;
    --verde:#5a9410;         /* o verde do A */
    --verde-escuro:#436f0c;
    --laranja:#e06a00;       /* o laranja do E */
    --laranja-claro:#fb8b1e;

    /* nomes antigos, mantidos para o resto do CSS não ter de mudar todo */
    --ink:var(--azul);
    --ink-dark:var(--azul-escuro);
    --ink-soft:var(--azul-claro);
    --paper:#ffffff;
    --chrome:#f3f6f9;
    --chrome-border:#d7dfe7;
    --text:#232a31;
    --text-soft:#65727e;
    --rust:var(--laranja);
    --sage:var(--verde);
    --mustard:#e8a317;
    --graphite:#414a53;
    --highlight:#fff2c9;
    --radius:3px;
  }

  *{box-sizing:border-box;}

  html,body{
    margin:0;
    padding:0;
    background:var(--chrome);
    color:var(--text);
    font-family:"Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size:15px;
    -webkit-font-smoothing:antialiased;
  }

  button, input, select{
    font-family:inherit;
    font-size:14px;
  }

  /* ---------- cabeçalho ---------- */
  header.marca{
    background:var(--chrome);
    border-bottom:1px solid var(--chrome-border);
    padding:14px clamp(10px,3vw,28px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
  }

  .logotipo{
    display:flex;
    align-items:baseline;
    gap:8px;
  }

  .logotipo .nome{
    font-family:Georgia, "Times New Roman", serif;
    font-style:italic;
    font-size:clamp(20px,4vw,26px);
    color:var(--ink);
    font-weight:700;
    letter-spacing:-0.3px;
  }

  .logotipo .pinta{
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--rust);
    transform:translateY(-9px);
  }

  .logotipo .lema{
    font-size:12px;
    color:var(--text-soft);
    display:none;
  }
  @media (min-width:560px){
    .logotipo .lema{display:inline;}
  }

  .zona-titulo{
    display:flex;
    align-items:center;
    gap:10px;
    flex:1;
    min-width:180px;
    justify-content:flex-end;
    flex-wrap:wrap;
  }

  #tituloDocumento{
    border:none;
    border-bottom:1px dashed var(--chrome-border);
    background:transparent;
    padding:4px 2px;
    font-size:14px;
    color:var(--text);
    width:min(240px, 45vw);
    text-align:right;
  }
  #tituloDocumento:focus{
    outline:none;
    border-bottom:1px solid var(--ink);
  }

  .selo{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--ink);
    color:var(--paper);
    border:none;
    border-radius:20px;
    padding:9px 18px;
    cursor:pointer;
    font-weight:600;
    letter-spacing:0.2px;
    box-shadow:0 2px 0 var(--ink-dark);
    transition:transform .08s ease, box-shadow .08s ease;
    white-space:nowrap;
  }
  .selo:hover{transform:translateY(-1px);}
  .selo:active{transform:translateY(1px); box-shadow:0 1px 0 var(--ink-dark);}
  .selo svg{width:15px;height:15px;flex:none;}

  .selo-secundario{
    background:transparent;
    color:var(--ink);
    border:1.5px solid var(--ink);
    box-shadow:none;
    padding:7.5px 16px;
  }
  .selo-secundario:hover{background:rgba(31,58,95,.06);}
  .selo-secundario:active{box-shadow:none;}

  /* ---------- barra de ferramentas ---------- */
  .ferramentas{
    background:var(--chrome);
    border-bottom:1px solid var(--chrome-border);
    padding:8px clamp(6px,2vw,20px);
    display:flex;
    flex-wrap:wrap;
    gap:4px 10px;
    align-items:center;
    position:sticky;
    top:0;
    z-index:20;
  }

  .grupo{
    display:flex;
    align-items:center;
    gap:3px;
    padding:2px 10px 2px 0;
    border-right:1px solid var(--chrome-border);
  }
  .grupo:last-child{border-right:none;}

  .ferramentas button.icone{
    background:transparent;
    border:1px solid transparent;
    border-radius:var(--radius);
    width:32px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:var(--graphite);
  }
  .ferramentas button.icone:hover{
    background:#e7e3d6;
    border-color:var(--chrome-border);
  }
  .ferramentas button.icone.activo{
    background:var(--ink);
    color:var(--paper);
  }
  .ferramentas button.icone svg{width:16px;height:16px;}
  .ferramentas button.icone:disabled{
    opacity:.32;
    cursor:not-allowed;
  }
  .ferramentas button.icone:disabled:hover{background:transparent;}

  .ferramentas select, .ferramentas input[type=number]{
    border:1px solid var(--chrome-border);
    border-radius:var(--radius);
    background:var(--paper);
    padding:5px 6px;
    color:var(--text);
    height:30px;
  }
  #selectFonte{width:130px;}
  #selectTamanho{width:62px;}
  #selectEstilo{width:118px;}

  input[type=color]{
    width:30px;
    height:30px;
    border:1px solid var(--chrome-border);
    border-radius:var(--radius);
    padding:2px;
    background:var(--paper);
    cursor:pointer;
  }

  /* ---------- área de trabalho ---------- */
  main{
    padding:clamp(14px,4vw,40px) 8px 70px;
    display:flex;
    justify-content:center;
    overflow-x:auto;
  }

  .area-regua-pagina{
    width:100%;
    max-width:100%;
    /* sem isto, o filho não encolhe abaixo dos 21 cm da folha e a área
       toda passa a ser mais larga do que o ecrã */
    min-width:0;
  }

  .area-regua-pagina{
    display:grid;
    grid-template-columns:0px 1fr;
    grid-template-rows:0px auto;
    width:100%;
  }
  body.reguas-visiveis .area-regua-pagina{
    grid-template-columns:22px 1fr;
    grid-template-rows:22px auto;
  }

  .canto-regua{
    grid-column:1; grid-row:1;
    display:none;
    background:var(--chrome);
    border-bottom:1px solid var(--chrome-border);
    border-right:1px solid var(--chrome-border);
  }
  body.reguas-visiveis .canto-regua{ display:block; }

  .regua-horizontal{
    grid-column:2; grid-row:1;
    display:none;
    justify-self:center;
    background:var(--chrome);
    border-bottom:1px solid var(--chrome-border);
    overflow:hidden;
  }
  body.reguas-visiveis .regua-horizontal{ display:block; }

  .regua-vertical{
    grid-column:1; grid-row:2;
    display:none;
    background:var(--chrome);
    border-right:1px solid var(--chrome-border);
    overflow:hidden;
  }
  body.reguas-visiveis .regua-vertical{ display:block; }

  .regua-horizontal svg, .regua-vertical svg{ display:block; }

  .invólucro-pagina{
    grid-column:2; grid-row:2;
    display:flex;
    justify-content:flex-start;
    /* a largura e a altura passam a ser dadas pelo JavaScript, já com a
       redução aplicada: assim a caixa que ocupa espaço é do tamanho da
       folha que se vê, e as barras de deslocamento acertam */
    width:auto;
    max-width:100%;
    min-width:0;
    margin-inline:auto;
  }

  .folha{
    position:relative;
    background:var(--paper);
    box-sizing:border-box;
    box-shadow:0 1px 3px rgba(31,58,95,.08), 0 10px 30px rgba(31,58,95,.12);
    line-height:1.55;
    color:var(--text);
    flex:none;
  }
  .folha:focus-within{box-shadow:0 1px 3px rgba(31,58,95,.1), 0 10px 34px rgba(31,58,95,.18);}

  .moldura-capa-overlay{
    position:absolute;
    top:0; left:0;
    box-sizing:border-box;
    pointer-events:none;
    z-index:1;
  }

  .folha h1{font-size:1.7em; margin:.6em 0 .35em; color:var(--text);}
  .folha h2{font-size:1.35em; margin:.6em 0 .3em; color:var(--text);}
  .folha h3{font-size:1.12em; margin:.55em 0 .3em; color:var(--text);}
  .folha p{margin:0 0 .8em;}
  .folha table{border-collapse:collapse; margin:.6em 0; width:100%;}
  .folha table td, .folha table th{
    border:1px solid #b9b3a0;
    padding:6px 9px;
    min-width:26px;
  }
  .folha table th{background:#f4f1e7; text-align:left;}
  .folha img{
    max-width:100%;
    resize:both;
    overflow:hidden;
    cursor:default;
  }
  .folha img.imagem-seleccionada{
    outline:2px solid var(--ink);
    outline-offset:2px;
  }
  .folha img[data-disposicao="frente"]{
    position:absolute;
    z-index:5;
    cursor:move;
    max-width:none;
  }
  .folha img[data-disposicao="tras"]{
    position:absolute;
    z-index:0;
    cursor:move;
    max-width:none;
  }

  .forma-geometrica{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    resize:both;
    overflow:hidden;
    vertical-align:middle;
    min-width:60px;
    min-height:40px;
    max-width:100%;
    box-sizing:border-box;
    outline:none;
    -webkit-user-modify:read-write;
  }
  .forma-geometrica:focus{ box-shadow:0 0 0 2px rgba(31,58,95,.35); }
  .forma-geometrica p{ margin:0; }
  .forma-rectangulo{ border-radius:14px; padding:14px 18px; }
  .forma-circulo{ border-radius:50%; padding:18px; }
  .forma-triangulo{ clip-path:polygon(50% 0%, 0% 100%, 100% 100%); padding:56px 20px 14px; }
  .forma-seta{ clip-path:polygon(0% 32%, 58% 32%, 58% 10%, 100% 50%, 58% 90%, 58% 68%, 0% 68%); padding:10px 46px 10px 14px; }
  .forma-losango{ clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); padding:38px 30px; }
  .forma-pentagono{ clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); padding:34px 22px 14px; }
  .forma-hexagono{ clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); padding:16px 40px; }
  .forma-estrela{ clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); padding:46px 34px 14px; }

  .barra-imagem-flutuante{
    position:fixed;
    display:none;
    align-items:center;
    gap:2px;
    background:var(--ink-dark);
    border-radius:8px;
    padding:4px;
    box-shadow:0 6px 18px rgba(0,0,0,.28);
    z-index:500;
  }
  .barra-imagem-flutuante.aberta{display:flex;}
  .barra-imagem-flutuante button{
    background:transparent;
    border:none;
    color:#fff;
    width:30px;
    height:28px;
    border-radius:5px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .barra-imagem-flutuante button:hover{background:rgba(255,255,255,.15);}
  .barra-imagem-flutuante button.activo{background:var(--ink-soft);}
  .barra-imagem-flutuante button svg{width:15px;height:15px;}
  .folha hr{border:none; border-top:1px solid #cfc9b8; margin:1.2em 0;}
  /* =====================================================================
     Fim de página
     ---------------------------------------------------------------------
     Deixou de ser um risco tracejado com a palavra "fim de página" e
     passou a ser o vão entre duas folhas, como no Word: a folha de cima
     acaba, há um intervalo com a cor da mesa de trabalho, e a de baixo
     começa. Sangra para fora das margens, senão ficavam duas tiras
     brancas nos lados.
     ===================================================================== */
  .quebra-pagina{
    height:30px;
    margin:var(--margem-baixo, 2cm) calc(var(--margem-dir, 2cm) * -1)
           var(--margem-topo, 2cm)  calc(var(--margem-esq, 2cm) * -1);
    background:var(--chrome);
    border-top:1px solid rgba(31,58,95,.13);
    border-bottom:1px solid rgba(31,58,95,.13);
    box-shadow:inset 0 6px 8px -8px rgba(31,58,95,.35),
               inset 0 -6px 8px -8px rgba(31,58,95,.35);
    page-break-after:always;
    break-after:page;
    user-select:none;
    position:relative;
  }
  /* a quebra posta à mão distingue-se por um traço ao meio */
  .quebra-pagina:not([data-auto])::after{
    content:"";
    position:absolute;
    left:50%; top:50%;
    width:44px;
    margin-left:-22px;
    border-top:1px dashed var(--ink-soft);
  }
  .indice-automatico{
    border-left:3px solid var(--ink);
    padding:2px 0 2px 16px;
    margin:0 0 1.2em;
  }
  .indice-automatico .indice-titulo{
    font-weight:700;
    color:var(--ink);
    margin-bottom:6px;
    font-family:Georgia, serif;
    font-style:italic;
  }
  .indice-automatico ul{list-style:none; margin:0; padding:0;}
  .indice-automatico li{margin:3px 0;}
  .indice-automatico li a{color:var(--text); text-decoration:none; border-bottom:1px dotted var(--chrome-border);}
  .indice-automatico li.nivel-2{padding-left:16px;}
  .indice-automatico li.nivel-3{padding-left:32px; font-size:.92em; color:var(--text-soft);}

  .legenda-grafico{
    font-size:12px;
    color:var(--text-soft);
    text-align:center;
    margin-top:-4px;
    margin-bottom:1em;
  }

  /* ---------- cabeçalho e rodapé do documento (repetem em cada página no Word) ---------- */
  .cabecalho-documento, .rodape-documento{
    min-height:22px;
    padding:6px 2px;
    font-size:12px;
    color:var(--text-soft);
    border:1px dashed transparent;
    outline:none;
  }
  .cabecalho-documento{
    border-bottom:1px dashed var(--chrome-border);
    margin-bottom:1.4em;
  }
  .rodape-documento{
    border-top:1px dashed var(--chrome-border);
    margin-top:1.4em;
  }
  .cabecalho-documento:focus, .rodape-documento:focus{
    border-color:var(--ink-soft);
  }
  .cabecalho-documento:empty:before, .rodape-documento:empty:before{
    content:attr(data-placeholder);
    opacity:.55;
  }
  .etiqueta-zona{
    font-size:9.5px;
    letter-spacing:.6px;
    text-transform:uppercase;
    color:var(--text-soft);
    opacity:.7;
    margin-bottom:2px;
  }

  /* ---------- rodapé ---------- */
  footer.rodape{
    position:fixed;
    left:0; right:0; bottom:0;
    background:var(--chrome);
    border-top:1px solid var(--chrome-border);
    padding:7px clamp(10px,3vw,24px);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:6px 14px;
    flex-wrap:wrap;
    font-size:11.5px;
    color:var(--text-soft);
    z-index:15;
  }
  footer.rodape .versao{font-weight:600; color:var(--ink);}

  .indicador-erros{
    display:none;
    align-items:center;
    gap:5px;
    background:#fdf1e6;
    color:var(--rust);
    border:1px solid #e8c9b8;
    border-radius:20px;
    padding:3px 10px;
    font-size:10.5px;
    font-weight:600;
    cursor:pointer;
  }
  .indicador-erros:hover{background:#fbe4d3;}

  /* ---------- modal ---------- */
  .sobreposicao{
    position:fixed; inset:0;
    background:rgba(30,28,22,.42);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:100;
    padding:16px;
  }
  .sobreposicao.aberta{display:flex;}
  .modal{
    background:var(--paper);
    border-radius:6px;
    width:100%;
    max-width:420px;
    max-height:88vh;
    overflow-y:auto;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
  }
  .modal .cabecalho-modal{
    padding:16px 20px;
    border-bottom:1px solid var(--chrome-border);
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .modal .cabecalho-modal h3{
    margin:0;
    font-family:Georgia, serif;
    font-style:italic;
    color:var(--ink);
    font-size:18px;
  }
  .modal .fechar{
    background:none; border:none; cursor:pointer;
    font-size:20px; color:var(--text-soft); line-height:1;
    padding:4px;
  }
  .modal .corpo-modal{padding:18px 20px;}
  .modal label{
    display:block;
    font-size:12.5px;
    color:var(--text-soft);
    margin:12px 0 4px;
  }
  .modal label:first-child{margin-top:0;}
  .modal input[type=text], .modal input[type=number]{
    width:100%;
    padding:8px 10px;
    border:1px solid var(--chrome-border);
    border-radius:var(--radius);
    background:#fcfbf7;
  }
  .modal input:focus, .modal select:focus{outline:2px solid var(--ink-soft); outline-offset:1px;}
  .linha-dupla{display:flex; gap:10px;}
  .linha-dupla > div{flex:1;}
  .modal select{
    width:100%;
    padding:8px 10px;
    border:1px solid var(--chrome-border);
    border-radius:var(--radius);
    background:#fcfbf7;
  }
  .paleta{display:flex; gap:8px; margin-top:4px; flex-wrap:wrap;}
  .paleta button{
    width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
  }
  .paleta button.seleccionada{border-color:var(--text);}
  .rodape-modal{
    padding:14px 20px 20px;
    display:flex;
    justify-content:flex-end;
    gap:10px;
    border-top:1px solid var(--chrome-border);
  }
  .botao-secundario{
    background:transparent;
    border:1px solid var(--chrome-border);
    color:var(--text);
    padding:9px 16px;
    border-radius:20px;
    cursor:pointer;
  }
  .botao-primario{
    background:var(--ink);
    border:none;
    color:var(--paper);
    padding:9px 18px;
    border-radius:20px;
    cursor:pointer;
    font-weight:600;
  }
  .botao-primario:hover{background:var(--ink-dark);}

  .nota-modal{
    font-size:11.5px;
    color:var(--text-soft);
    background:#f4f1e7;
    border-radius:var(--radius);
    padding:8px 10px;
    margin-top:10px;
    line-height:1.4;
  }
  .linha-caixa{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:12px;
    font-size:13px;
  }
  .linha-caixa input[type=checkbox]{width:16px; height:16px;}

  .linhas-dados{display:flex; flex-direction:column; gap:8px;}
  .linha-dado{display:flex; gap:8px; align-items:center;}
  .linha-dado input[type=text]{flex:2;}
  .linha-dado input[type=number]{flex:1;}
  .linha-dado button{
    background:transparent; border:none; color:var(--rust); cursor:pointer; font-size:16px; padding:4px 6px;
  }
  .adicionar-linha{
    background:transparent;
    border:1px dashed var(--chrome-border);
    color:var(--ink);
    border-radius:var(--radius);
    padding:7px 10px;
    cursor:pointer;
    width:100%;
    margin-top:6px;
  }

  @media (max-width:480px){
    .grupo{padding-right:6px;}
    .ferramentas button.icone{width:29px; height:28px;}
    footer.rodape{font-size:10.5px;}
    .logotipo .nome{font-size:19px;}
  }

  @media print{
    header.marca, .ferramentas, footer.rodape, .sobreposicao{display:none !important;}
    body, main{background:#fff; padding:0; margin:0;}
    .invólucro-pagina{height:auto !important; width:auto !important; max-width:none !important;}
    .folha{box-shadow:none; transform:none !important;}
    .etiqueta-zona{display:none !important;}
    .cabecalho-documento, .rodape-documento{border:none !important;}
    .cabecalho-documento:empty:before, .rodape-documento:empty:before{content:none !important;}
    .quebra-pagina{
      border:none !important;
      color:transparent !important;
      font-size:0 !important;
      line-height:0 !important;
      height:0 !important;
      margin:0 !important;
      padding:0 !important;
      overflow:hidden;
    }
    .barra-imagem-flutuante{display:none !important;}
    .forma-geometrica:focus{box-shadow:none !important;}
    .forma-geometrica{resize:none !important;}
    .area-regua-pagina{grid-template-columns:0 1fr !important; grid-template-rows:0 auto !important;}
    .canto-regua, .regua-horizontal, .regua-vertical{display:none !important;}
    .folha img.imagem-seleccionada{outline:none !important;}
  }

  /* =====================================================================
     Friso ao estilo do Word 2007 — separadores, painéis e grupos.
     ===================================================================== */

  .separadores{
    background:var(--chrome);
    border-bottom:1px solid var(--chrome-border);
    display:flex;
    align-items:flex-end;
    gap:2px;
    padding:0 clamp(6px,2vw,20px);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    position:sticky;
    top:0;
    z-index:22;
  }
  .separadores::-webkit-scrollbar{display:none;}

  .botao-ficheiro{
    background:var(--ink);
    color:var(--paper);
    border:none;
    border-radius:3px 3px 0 0;
    padding:8px 16px;
    margin-right:6px;
    cursor:pointer;
    font-weight:600;
    letter-spacing:.2px;
    white-space:nowrap;
  }
  .botao-ficheiro:hover{background:var(--ink-dark);}

  .separador{
    background:transparent;
    border:1px solid transparent;
    border-bottom:none;
    border-radius:3px 3px 0 0;
    padding:8px 13px;
    cursor:pointer;
    color:var(--text-soft);
    white-space:nowrap;
  }
  .separador:hover{background:rgba(31,58,95,.06); color:var(--ink);}
  .separador.activo{
    background:var(--paper);
    border-color:var(--chrome-border);
    color:var(--ink);
    font-weight:600;
    position:relative;
    top:1px;
  }
  .separador-matematica.activo{color:var(--rust);}

  .encolher-friso{
    margin-left:auto;
    background:transparent;
    border:none;
    color:var(--text-soft);
    cursor:pointer;
    padding:6px 8px;
    font-size:13px;
  }

  .menu-ficheiro{
    position:absolute;
    z-index:40;
    background:var(--paper);
    border:1px solid var(--chrome-border);
    border-radius:3px;
    box-shadow:0 8px 26px rgba(31,58,95,.18);
    min-width:250px;
    padding:6px 0;
    display:flex;
    flex-direction:column;
  }
  .menu-ficheiro button, .menu-ficheiro a{
    background:transparent;
    border:none;
    text-align:left;
    padding:9px 16px;
    cursor:pointer;
    color:var(--text);
    font-size:14px;
    text-decoration:none;
    font-family:inherit;
  }
  .menu-ficheiro button:hover, .menu-ficheiro a:hover{background:#f0ece0; color:var(--ink);}
  .menu-ficheiro hr{border:none; border-top:1px solid var(--chrome-border); margin:5px 0;}

  /* o contentor deixa de ser uma linha só e passa a conter painéis */
  .ferramentas{
    display:block;
    padding:0;
    top:39px;
    z-index:21;
  }
  .ferramentas.encolhido .painel{display:none;}

  .painel{
    display:none;
    flex-wrap:wrap;
    align-items:stretch;
    gap:2px 8px;
    padding:7px clamp(6px,2vw,20px) 4px;
    background:var(--paper);
    overflow-x:auto;
  }
  .painel.activo{display:flex;}

  .painel .grupo{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
    padding:2px 10px 0 0;
    border-right:1px solid var(--chrome-border);
  }
  .painel .grupo.sem-risco, .painel .grupo:last-child{border-right:none;}

  .linha-grupo{
    display:flex;
    align-items:center;
    gap:3px;
    flex-wrap:nowrap;
  }

  .legenda-grupo{
    font-size:10.5px;
    color:var(--text-soft);
    letter-spacing:.2px;
    margin-top:1px;
    white-space:nowrap;
  }

  .ferramentas button.texto-icone{
    width:auto;
    min-width:32px;
    padding:0 7px;
    font-size:12.5px;
    font-family:Georgia,"Times New Roman",serif;
    color:var(--graphite);
  }
  .ferramentas button.texto-icone sup{font-size:.7em;}
  .ferramentas button.texto-icone sub{font-size:.7em;}
  .ferramentas button.destaque{
    background:var(--ink);
    color:var(--paper);
    border-color:var(--ink);
    padding:0 12px;
  }
  .ferramentas button.destaque:hover{background:var(--ink-dark); color:var(--paper);}

  .ferramentas button.mat{
    font-family:"Cambria Math",Cambria,Georgia,serif;
    font-size:14px;
    min-width:36px;
  }

  .mini-campo{
    display:flex;
    flex-direction:column;
    font-size:10.5px;
    color:var(--text-soft);
    gap:2px;
  }
  .mini-campo input{width:66px;}

  .valor-zoom{
    font-size:12px;
    color:var(--text-soft);
    min-width:40px;
    text-align:center;
  }

  .paleta-simbolos{
    display:grid;
    grid-template-columns:repeat(10, 26px);
    gap:2px;
    max-height:58px;
    overflow-y:auto;
  }
  .paleta-simbolos.grande{
    grid-template-columns:repeat(auto-fill, minmax(34px, 1fr));
    max-height:230px;
    margin-top:6px;
  }
  .paleta-simbolos button{
    background:var(--paper);
    border:1px solid var(--chrome-border);
    border-radius:2px;
    height:26px;
    cursor:pointer;
    font-family:"Cambria Math",Cambria,Georgia,serif;
    font-size:14px;
    color:var(--text);
    padding:0;
  }
  .paleta-simbolos.grande button{height:34px; font-size:16px;}
  .paleta-simbolos button:hover{background:#efe9d9; border-color:var(--ink-soft);}

  /* =====================================================================
     Equações
     ===================================================================== */

  .eq{
    display:inline-block;
    font-family:"Cambria Math",Cambria,"Latin Modern Math",Georgia,serif;
    font-style:italic;
    vertical-align:middle;
    padding:1px 3px;
    line-height:1.25;
    white-space:nowrap;
  }
  .eq.eq-bloco{display:block; text-align:center; margin:.7em 0; white-space:normal;}
  .eq:focus-within{background:#fdf8e8; border-radius:3px;}

  .eq .fenda{
    display:inline-block;
    min-width:.85em;
    min-height:1em;
    padding:0 1px;
    outline:none;
  }
  .eq .fenda:empty::before{
    content:"▫";
    color:#bdb7a5;
    font-style:normal;
  }
  .eq .fenda:focus{background:#fdf1b8; border-radius:2px;}
  .eq .simbolo, .eq .operador{font-style:normal;}

  .eq .mfrac{
    display:inline-flex;
    flex-direction:column;
    vertical-align:middle;
    text-align:center;
    margin:0 2px;
  }
  .eq .mfrac > .mnum{border-bottom:1px solid currentColor; padding:0 4px 1px;}
  .eq .mfrac > .mden{padding:1px 4px 0;}

  .eq .msup > .mexp, .eq .msub > .mind{font-size:.72em;}
  .eq .msup > .mexp{vertical-align:super;}
  .eq .msub > .mind{vertical-align:sub;}
  .eq .msubsup{display:inline-flex; flex-direction:column; vertical-align:middle; font-size:.72em; text-align:left;}

  .eq .mraiz{display:inline-flex; align-items:flex-start; margin:0 1px;}
  .eq .mraiz > .mindice{font-size:.6em; transform:translateY(-.25em); margin-right:-.35em;}
  .eq .mraiz > .msinal{font-style:normal; font-size:1.15em; line-height:1;}
  .eq .mraiz > .mradicando{border-top:1px solid currentColor; padding:1px 3px 0; margin-top:.12em;}

  .eq .mnary{display:inline-flex; align-items:center; vertical-align:middle; margin:0 2px;}
  .eq .mnary > .mcoluna{display:inline-flex; flex-direction:column; align-items:center;}
  .eq .mnary .msinal{font-style:normal; font-size:1.6em; line-height:.95;}
  .eq .mnary .mlim{font-size:.62em;}
  .eq .mnary > .mcorpo{padding-left:3px;}

  /* =====================================================================
     Parênteses, chavetas e barras que acompanham a altura
     ---------------------------------------------------------------------
     Antes eram a letra "(" e a letra ")", com a altura de uma letra. À
     volta de uma matriz de três linhas ficavam a meio, com os números a
     saírem por cima e por baixo. Agora são traço desenhado, e o traço
     estica com o que está lá dentro.
     ===================================================================== */
  .eq .mfence{
    display:inline-flex;
    align-items:stretch;
    vertical-align:middle;
    margin:0 1px;
  }
  .eq .mfence > .mconteudo,
  .eq .mfence > .mmatriz{align-self:center; padding:2px 4px;}

  .eq .mdelim{
    flex:0 0 auto;
    width:.34em;
    min-height:1.1em;
    border:1.5px solid currentColor;
    align-self:stretch;
  }
  .eq .mdelim-abre{border-right:none;}
  .eq .mdelim-fecha{border-left:none;}

  /* parênteses curvos */
  .eq .mdelim-abre[data-sinal="("]{border-radius:70% 0 0 70% / 50% 0 0 50%;}
  .eq .mdelim-fecha[data-sinal=")"]{border-radius:0 70% 70% 0 / 0 50% 50% 0;}

  /* parênteses rectos */
  .eq .mdelim-abre[data-sinal="["],
  .eq .mdelim-fecha[data-sinal="]"]{border-radius:0;}

  /* chavetas: o mesmo traço, com um bico ao meio */
  .eq .mdelim-abre[data-sinal="{"]{border-radius:45% 0 0 45% / 22% 0 0 22%; position:relative;}
  .eq .mdelim-fecha[data-sinal="}"]{border-radius:0 45% 45% 0 / 0 22% 22% 0; position:relative;}
  .eq .mdelim-abre[data-sinal="{"]::after,
  .eq .mdelim-fecha[data-sinal="}"]::after{
    content:"";
    position:absolute;
    top:50%;
    width:.16em;
    border-top:1.5px solid currentColor;
  }
  .eq .mdelim-abre[data-sinal="{"]::after{left:-.16em;}
  .eq .mdelim-fecha[data-sinal="}"]::after{right:-.16em;}

  /* barras verticais do módulo e da norma */
  .eq .mdelim[data-sinal="|"]{width:0; border-radius:0; border-width:0 0 0 1.5px;}
  .eq .mdelim-fecha[data-sinal="|"]{border-width:0 0 0 1.5px; margin-left:.28em;}
  .eq .mdelim-abre[data-sinal="|"]{margin-right:.28em;}

  /* delimitador vazio: o lado aberto de um sistema de equações */
  .eq .mdelim:not([data-sinal]), .eq .mdelim[data-sinal=""]{display:none;}

  .eq .mmatriz{display:inline-grid; gap:3px 12px; vertical-align:middle; text-align:center;}
  .eq .mmatriz > .fenda{min-width:1.1em;}
  .eq .mbarra{border-top:1px solid currentColor; display:inline-block; padding-top:1px;}
  .eq .mvector{position:relative; display:inline-block; padding-top:.15em;}
  .eq .mvector::before{content:"→"; position:absolute; top:-.55em; left:0; right:0; font-size:.7em; font-style:normal; text-align:center;}
  .eq .mfuncao{font-style:normal; margin-right:2px;}
  .eq .numero-eq{font-style:normal; float:right; color:var(--text-soft);}

  .previsao-latex{
    border:1px solid var(--chrome-border);
    border-radius:3px;
    background:#fbfaf5;
    padding:12px;
    min-height:44px;
    font-family:"Cambria Math",Cambria,Georgia,serif;
    font-size:17px;
    overflow-x:auto;
  }

  /* =====================================================================
     Elementos novos dentro da folha
     ===================================================================== */

  .folha .caixa-texto{
    border:1px solid var(--graphite);
    padding:8px 10px;
    margin:.7em 0;
    border-radius:2px;
    background:transparent;
    min-height:2.4em;
  }
  .folha .nota-rodape-marca{font-size:.72em; vertical-align:super; color:var(--rust); font-weight:600;}
  .folha .zona-notas{
    border-top:1px solid #cfc9b8;
    margin-top:1.6em;
    padding-top:.5em;
    font-size:.82em;
    color:var(--text-soft);
  }
  .folha .zona-notas p{margin:.2em 0;}
  .folha .legenda-figura{font-size:.86em; text-align:center; color:var(--text-soft); margin:.2em 0 1em;}
  .folha .comentario{
    background:#fdf1b8;
    border-bottom:1px dotted var(--mustard);
    cursor:help;
  }
  .folha .capitular{
    float:left;
    font-size:3.1em;
    line-height:.82;
    padding:.05em .12em 0 0;
    font-family:Georgia,"Times New Roman",serif;
  }
  .folha .indice-automatico{margin:0 0 1.2em;}
  .folha .indice-automatico .entrada-indice{display:flex; gap:6px; align-items:baseline;}
  .folha .indice-automatico .pontos{flex:1; border-bottom:1px dotted #b7b1a0; transform:translateY(-3px);}
  .folha.duas-colunas #corpo{column-count:2; column-gap:1.2cm;}
  .folha.tres-colunas #corpo{column-count:3; column-gap:.9cm;}
  .folha .marca-agua{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    font-size:clamp(38px,9vw,86px);
    font-family:Georgia,serif;
    letter-spacing:.08em;
    transform:rotate(-32deg);
    opacity:.32;
    z-index:0;
    user-select:none;
  }
  .folha{position:relative;}
  #corpo, .cabecalho-documento, .rodape-documento{position:relative; z-index:1;}
  .folha.marcas-visiveis #corpo p::after{content:"¶"; color:#c3bdaa;}
  .folha.marcas-visiveis #corpo h1::after,
  .folha.marcas-visiveis #corpo h2::after,
  .folha.marcas-visiveis #corpo h3::after{content:"¶"; color:#c3bdaa; font-weight:normal;}
  .folha .paragrafo-limitado{border:1px solid #b7b1a0; padding:6px 8px;}

  body.ecra-inteiro header.marca,
  body.ecra-inteiro .separadores,
  body.ecra-inteiro .ferramentas,
  body.ecra-inteiro footer.rodape{display:none;}
  body.zonas-ocultas .etiqueta-zona,
  body.zonas-ocultas .cabecalho-documento,
  body.zonas-ocultas .rodape-documento{display:none;}

  /* =====================================================================
     Cabeçalho: conta, estado, avisos
     ===================================================================== */

  .nome-ligacao{text-decoration:none;}
  .estado-gravacao{
    font-size:11px;
    color:var(--sage);
    opacity:0;
    transition:opacity .25s;
    white-space:nowrap;
  }
  .estado-gravacao.visivel{opacity:1;}

  .selo-conta{background:transparent; color:var(--ink); border:1px solid var(--ink); box-shadow:none;}
  .selo-conta:hover{background:rgba(31,58,95,.07);}
  .conta-visitante{position:relative;}
  .menu-conta{
    position:absolute;
    right:0;
    top:calc(100% + 6px);
    background:var(--paper);
    border:1px solid var(--chrome-border);
    border-radius:3px;
    box-shadow:0 8px 22px rgba(31,58,95,.16);
    display:flex;
    flex-direction:column;
    min-width:200px;
    z-index:40;
  }
  .menu-conta a, .menu-conta button{
    padding:9px 14px;
    background:transparent;
    border:none;
    text-align:left;
    color:var(--text);
    text-decoration:none;
    cursor:pointer;
    font-size:13.5px;
    font-family:inherit;
  }
  .menu-conta a:hover, .menu-conta button:hover{background:#f0ece0;}

  .aviso-sistema{
    background:#fdf6e0;
    border-bottom:1px solid #e6dcbb;
    padding:8px clamp(10px,3vw,28px);
    font-size:13px;
    color:var(--graphite);
  }

  .ligacoes-rodape{display:flex; gap:12px;}
  .ligacoes-rodape a{color:var(--text-soft); text-decoration:none;}
  .ligacoes-rodape a:hover{color:var(--ink); text-decoration:underline;}

  /* =====================================================================
     Aviso de cookies
     ===================================================================== */

  .aviso-cookies{
    position:fixed;
    left:10px;
    right:10px;
    bottom:10px;
    max-width:min(620px, calc(100vw - 20px));
    margin:0 auto;
    background:var(--paper);
    border:1px solid var(--chrome-border);
    border-left:3px solid var(--ink);
    border-radius:3px;
    box-shadow:0 10px 30px rgba(31,58,95,.2);
    padding:14px 16px;
    z-index:80;
    font-size:13px;
    line-height:1.55;
  }
  .aviso-cookies p{margin:0 0 10px;}
  .aviso-cookies a{color:var(--ink);}
  .botoes-cookies{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}

  /* =====================================================================
     Peças reutilizadas dentro dos diálogos
     ===================================================================== */

  .tabela-simples{width:100%; border-collapse:collapse; font-size:13.5px;}
  .tabela-simples td{padding:6px 4px; border-bottom:1px solid var(--chrome-border);}
  .tabela-simples td:first-child{color:var(--text-soft); width:45%;}

  .ligacao-texto{
    background:none;
    border:none;
    color:var(--ink);
    text-decoration:underline;
    cursor:pointer;
    font-family:inherit;
    font-size:inherit;
    padding:0;
  }
  .troca-modo{font-size:13px; color:var(--text-soft); margin:14px 0 0;}
  .aviso-conta{
    background:#fbeae7;
    border-left:3px solid var(--rust);
    padding:8px 11px;
    font-size:13px;
    margin-top:12px;
    border-radius:2px;
  }
  .aviso-conta.bem{background:#eef3ec; border-left-color:var(--sage);}

  .linha-guardar{display:flex; gap:8px; margin:14px 0 4px;}
  .linha-guardar input{flex:1;}
  .modal input[type=url], .modal input[type=email], .modal input[type=password]{
    width:100%;
    border:1px solid var(--chrome-border);
    border-radius:var(--radius);
    padding:8px 9px;
    background:var(--paper);
    color:var(--text);
    font-family:inherit;
    font-size:14px;
  }
  .como-botao{text-decoration:none; display:inline-flex; align-items:center;}

  .lista-trabalhos{margin-top:16px; max-height:34vh; overflow-y:auto;}
  .lista-trabalhos .trabalho{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:10px;
    padding:9px 2px;
    border-bottom:1px solid var(--chrome-border);
  }
  .lista-trabalhos .trabalho strong{font-weight:600; font-size:14px;}
  .lista-trabalhos .trabalho .meta{font-size:11.5px; color:var(--text-soft); white-space:nowrap;}
  .lista-trabalhos .trabalho button{
    background:none; border:none; color:var(--rust); cursor:pointer; font-size:12px; font-family:inherit;
  }
  .lista-trabalhos .vazio{color:var(--text-soft); font-size:13px; text-align:center; padding:18px 0;}

  /* =====================================================================
     Ecrãs pequenos — a partir de 4 polegadas (≈320 px)
     ===================================================================== */

  @media (max-width:640px){
    .zona-titulo{gap:6px;}
    #tituloDocumento{width:min(150px, 40vw);}
    .selo span:not(#textoBotaoTransferir):not(.marca-tema){display:none;}
    .legenda-grupo{display:none;}
    .painel{flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px;}
    .painel .grupo{flex-shrink:0;}
    .ferramentas{top:37px;}
    .paleta-simbolos{grid-template-columns:repeat(6, 26px); max-height:56px;}
    .mini-campo input{width:56px;}
  }

  @media (max-width:400px){
    .botao-ficheiro{padding:8px 11px;}
    .separador{padding:8px 9px; font-size:13px;}
    .ferramentas button.icone{width:30px; height:29px;}
    .aviso-cookies{font-size:12.5px; padding:12px;}
    .estado-gravacao{display:none;}
  }

  @media print{
    .separadores, .menu-ficheiro, .aviso-cookies, .menu-conta, .aviso-sistema{display:none !important;}
    .folha .marca-agua{opacity:.25 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
    .eq .fenda:empty::before{content:"" !important;}
    .folha.marcas-visiveis #corpo p::after,
    .folha.marcas-visiveis #corpo h1::after,
    .folha.marcas-visiveis #corpo h2::after,
    .folha.marcas-visiveis #corpo h3::after{content:"" !important;}
  }

  @media print{
  }

  /* listas de vários níveis */
  .folha ol.multinivel{counter-reset:nivel1; list-style:none; padding-left:1.4em;}
  .folha ol.multinivel > li{counter-increment:nivel1;}
  .folha ol.multinivel > li::marker{content:"";}
  .folha ol.multinivel > li::before{content:counter(nivel1) ". "; font-weight:600;}
  .folha ol.multinivel ol{counter-reset:nivel2; list-style:none; padding-left:1.3em;}
  .folha ol.multinivel ol > li{counter-increment:nivel2;}
  .folha ol.multinivel ol > li::before{content:counter(nivel1) "." counter(nivel2) ". "; font-weight:400;}
  .folha ol.multinivel ol ol{counter-reset:nivel3; list-style:none;}
  .folha ol.multinivel ol ol > li{counter-increment:nivel3;}
  .folha ol.multinivel ol ol > li::before{content:counter(nivel1) "." counter(nivel2) "." counter(nivel3) ". ";}
  .folha .marcador-interno{display:inline;}
  .folha .bibliografia h2{margin-top:1.4em;}

  /* =====================================================================
     O atributo "hidden" tem de ganhar sempre.
     ---------------------------------------------------------------------
     Os menus e os avisos são escondidos com hidden, mas as regras que lhes
     dão display:flex venciam-no por especificidade — e o menu Ficheiro
     aparecia aberto logo ao carregar a página, sem forma de o fechar.
     ===================================================================== */
  [hidden]{display:none !important;}
  .selo-tema:hover{background:rgba(31,58,95,.07); transform:none;}
  .selo-tema:active{transform:none; box-shadow:none;}
  .selo-tema .marca-tema{font-size:14px; line-height:1;}
  @media (max-width:640px){
    .selo-tema .rotulo-tema{display:none;}
  }

  /* =====================================================================
     Ecrãs pequenos — reforço
     ---------------------------------------------------------------------
     A folha tem largura fixa de papel A4. Numa tela de 4 polegadas isso é
     mais do dobro do espaço disponível, por isso tudo o que a segura tem
     de poder encolher, e o que sobrar tem de ter barra para lá chegar.
     ===================================================================== */

  /* nenhuma caixa da cadeia pode recusar-se a encolher */
  main > *, .area-regua-pagina > *{min-width:0;}

  /* o deslocamento horizontal vive no main, não no corpo da página:
     assim o friso e o cabeçalho ficam quietos enquanto se arrasta a folha */
  html{overflow-x:hidden;}
  main{-webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;}

  @media (max-width:640px){
    main{padding:12px 6px 84px;}

    /* o rodapé fixo não pode comer o documento quando parte em três linhas */
    footer.rodape{padding:5px 8px; font-size:11px; gap:3px 10px;}
    footer.rodape .versao{display:none;}

    /* o título do documento deixa de empurrar os botões para fora */
    .zona-titulo{min-width:0; gap:6px; justify-content:flex-start;}
    #tituloDocumento{flex:1 1 110px; min-width:0; width:auto;}
    header.marca{padding:10px 8px; gap:8px;}
    .logotipo .lema{display:none;}

    /* diálogos: ocupam o ecrã quase todo e deslocam-se por dentro */
    .sobreposicao{padding:8px; align-items:flex-start;}
    .modal{max-height:92vh; margin-top:6vh;}
    .corpo-modal{padding:14px;}
    .rodape-modal{flex-wrap:wrap; gap:8px;}
    .rodape-modal button, .rodape-modal .como-botao{flex:1 1 auto;}
  }

  @media (max-width:400px){
    main{padding:10px 4px 88px;}
    footer.rodape{font-size:10.5px;}
    footer.rodape .ligacoes-rodape{gap:8px;}
    .modal{border-radius:4px;}
    .paleta-simbolos.grande{grid-template-columns:repeat(auto-fill, minmax(30px,1fr));}
  }

  /* ecrãs baixos e deitados: o diálogo não pode ficar mais alto do que a tela */
  @media (max-height:460px){
    .sobreposicao{align-items:flex-start; padding:6px;}
    .modal{max-height:96vh; margin-top:2vh;}
    .paleta-simbolos.grande{max-height:34vh;}
    .lista-trabalhos{max-height:26vh;}
  }

  .logotipo{flex:0 0 auto; min-width:0;}

  header.marca .zona-titulo{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    flex-wrap:nowrap;
  }

  header.marca #tituloDocumento{
    width:min(340px, 100%);
    min-width:0;
    text-align:center;
    border:1px solid transparent;
    background:transparent;
    font-size:14.5px;
    padding:6px 10px;
    border-radius:3px;
    transition:background .15s, border-color .15s;
  }
  header.marca #tituloDocumento:hover{border-color:var(--chrome-border);}
  header.marca #tituloDocumento:focus{
    background:var(--paper);
    border-color:var(--ink-soft);
    text-align:left;
    outline:none;
  }

  .zona-conta{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
  }

  .accoes-ocultas{display:none;}

  @media (max-width:640px){
    header.marca{gap:8px;}
    header.marca .zona-titulo{justify-content:flex-start;}
    header.marca #tituloDocumento{width:100%; font-size:13.5px; padding:5px 7px;}
    .zona-conta{gap:6px;}
  }

  /* =====================================================================
     Vista de telemóvel
     ---------------------------------------------------------------------
     A folha larga a largura de papel e ocupa o ecrã. A letra volta ao
     tamanho de leitura, o cursor toca onde deve e escreve-se com o dedo.
     Continua a ser o mesmo documento: ao transferir para Word ou PDF, sai
     em A4 com as margens configuradas, como sempre.
     ===================================================================== */

  body.vista-movel .folha{
    width:100% !important;
    max-width:100% !important;
    /* Tirei a altura de papel para o texto poder fluir, mas passei ao
       extremo oposto: com o documento vazio a folha ficava uma tira de
       três dedos no topo do ecrã, com o resto em vazio. Continua a
       crescer com o texto, mas nunca é mais baixa do que o ecrã. */
    min-height:calc(100vh - 230px) !important;
    height:auto !important;
    transform:none !important;
    padding:16px 14px !important;
    box-shadow:0 1px 2px rgba(31,58,95,.10);
    border-radius:3px;
  }
  body.vista-movel .invólucro-pagina{
    width:100% !important;
    height:auto !important;
    max-width:100%;
  }
  body.vista-movel main{padding:8px 6px 84px; overflow-x:hidden;}
  body.vista-movel #corpo{font-size:16px; line-height:1.6;}
  body.vista-movel #corpo h1{font-size:1.5rem;}
  body.vista-movel #corpo h2{font-size:1.28rem;}
  body.vista-movel #corpo h3{font-size:1.12rem;}

  /* as marcas de fim de página não fazem sentido quando não há página */
  body.vista-movel .quebra-automatica{display:none !important;}
  body.vista-movel .canto-regua,
  body.vista-movel .regua-horizontal,
  body.vista-movel .regua-vertical{display:none !important;}
  body.vista-movel .area-regua-pagina{grid-template-columns:0 1fr; grid-template-rows:0 auto;}

  /* tabelas largas deixam de rebentar a folha: deslocam-se por dentro */
  body.vista-movel #corpo table{display:block; overflow-x:auto; max-width:100%;}
  body.vista-movel #corpo img{max-width:100%; height:auto;}
  body.vista-movel .eq{white-space:normal;}

  /* alvos maiores para o dedo */
  @media (pointer:coarse){
    .ferramentas button.icone{min-width:34px; height:34px;}
    .separador{padding:10px 12px;}
    .menu-ficheiro button, .menu-ficheiro a{padding:12px 16px;}
    .menu-conta a, .menu-conta button{padding:12px 14px;}
  }

  /* =====================================================================
     Documento vazio: frase esbatida por cima, como no Word
     ---------------------------------------------------------------------
     Em vez de vir texto lá dentro para a pessoa apagar, a folha começa
     vazia e a frase é só uma sombra por cima, que não se selecciona, não
     se apaga e não vai para o ficheiro.
     ===================================================================== */
  #corpo{position:relative;}
  #corpo.sem-conteudo::before{
    content:attr(data-exemplo);
    position:absolute;
    top:0; left:0;
    color:var(--text-soft);
    opacity:.45;
    pointer-events:none;
    user-select:none;
  }

  /* As zonas de cabeçalho e rodapé do documento deixam de estar sempre à
     mostra. Aparecem quando se carrega em "Cab." ou "Rod." no separador
     Inserir, ou no botão das zonas no separador Ver — que é o que o Word
     faz: quem não usa cabeçalho nunca vê caixa nenhuma. */
  body.zonas-ocultas .etiqueta-zona,
  body.zonas-ocultas .cabecalho-documento,
  body.zonas-ocultas .rodape-documento{display:none !important;}

  /* dois campos lado a lado, no diálogo da matriz */
  .linha-dupla{display:flex; gap:12px;}
  .linha-dupla > div{flex:1; min-width:0;}
  .linha-dupla input{width:100%;}

  /* =====================================================================
     Pré-visualização da impressão
     ---------------------------------------------------------------------
     Mostra o documento cortado pelas quebras, folha a folha, com a
     proporção verdadeira do papel escolhido. Serve para ver quantas
     páginas são e onde é que elas partem, antes de gastar tinta.
     ===================================================================== */
  .modal-previsao{
    max-width:min(980px, 96vw);
    width:100%;
    max-height:92vh;
    display:flex;
    flex-direction:column;
  }
  .barra-previsao{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    padding:10px 18px;
    border-bottom:1px solid var(--chrome-border);
    font-size:13px;
    color:var(--text-soft);
  }
  .barra-previsao label{margin:0; font-size:12px;}
  .barra-previsao select{padding:4px 6px;}
  .contagem-previsao{margin-right:auto; color:var(--ink); font-weight:600;}

  .folhas-previsao{
    display:grid;
    gap:16px;
    padding:18px;
    overflow-y:auto;
    background:var(--chrome);
    flex:1 1 auto;
  }
  .folha-previsao{
    background:#fffefb;
    border:1px solid var(--chrome-border);
    box-shadow:0 2px 8px rgba(31,58,95,.12);
    position:relative;
    overflow:hidden;
  }
  .dentro-previsao{
    padding:7%;
    font-size:7px;
    line-height:1.45;
    color:#2a2a26;
    height:100%;
    overflow:hidden;
  }
  .dentro-previsao h1{font-size:12px; margin:0 0 .5em;}
  .dentro-previsao h2{font-size:10px; margin:.6em 0 .3em;}
  .dentro-previsao h3{font-size:9px;}
  .dentro-previsao p{margin:0 0 .5em;}
  .dentro-previsao img{max-width:100%;}
  .dentro-previsao table{width:100%; border-collapse:collapse; font-size:6px;}
  .dentro-previsao table td, .dentro-previsao table th{border:1px solid #b9b3a0; padding:1px 2px;}
  .previsao-cabecalho{border-bottom:1px solid #ddd8c9; margin-bottom:6px; padding-bottom:3px; font-size:6px; color:#726c5c;}
  .previsao-rodape{border-top:1px solid #ddd8c9; margin-top:6px; padding-top:3px; font-size:6px; color:#726c5c;}
  .numero-previsao{
    position:absolute;
    right:6px; bottom:4px;
    font-size:9px;
    color:var(--text-soft);
    background:rgba(255,255,255,.85);
    padding:0 4px;
    border-radius:2px;
  }

  /* várias páginas lado a lado, dentro do editor */
  body.varias-paginas .folha{box-shadow:0 2px 10px rgba(31,58,95,.16);}
  body.varias-paginas .quebra-pagina{height:44px;}

  @media (max-width:640px){
    .folhas-previsao{grid-template-columns:1fr !important; padding:10px; gap:10px;}
    .barra-previsao{padding:8px 12px; font-size:12px;}
    .modal-previsao{max-height:96vh;}
  }

  /* =====================================================================
     Quebras de secção e numeração visível
     ---------------------------------------------------------------------
     A quebra de secção é o mesmo vão entre folhas, mas com uma etiqueta a
     dizer que regras de numeração começam ali. O número de cada página
     aparece do lado direito do vão, que é onde ele fica no papel.
     ===================================================================== */
  .quebra-pagina[data-numero-pagina]:not([data-numero-pagina=""])::before{
    content:attr(data-numero-pagina);
    position:absolute;
    right:14px;
    top:-22px;
    font-size:10.5px;
    color:var(--text-soft);
    font-family:Georgia,"Times New Roman",serif;
  }

  .quebra-seccao{
    height:38px;
    cursor:pointer;
    border-top:1px solid var(--ink-soft);
    border-bottom:1px solid var(--ink-soft);
  }
  .quebra-seccao::after{
    content:attr(data-etiqueta);
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    font-size:10.5px;
    letter-spacing:.4px;
    color:var(--ink);
    background:var(--chrome);
    padding:1px 10px;
    border:1px solid var(--ink-soft);
    border-radius:11px;
    white-space:nowrap;
    max-width:90%;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .quebra-seccao:hover::after{background:var(--paper);}

  /* =====================================================================
     Capas
     ===================================================================== */
  .capa-documento{text-align:center; padding:1.2em 0;}
  .capa-documento p{margin:.32em 0;}
  .capa-instituicao{text-transform:uppercase; letter-spacing:1.2px; font-size:.95em;}
  .capa-curso{font-size:.95em; color:var(--text-soft);}
  .capa-titulo{font-size:1.9em; margin:.35em 0; line-height:1.28;}
  .capa-titulo-esquerda{text-align:left;}
  .capa-subtitulo{font-size:1.08em; font-style:italic;}
  .capa-autor{font-weight:600;}
  .capa-data{font-size:.95em;}
  .capa-espaco{height:1.6em;}
  .capa-esquerda{text-align:left;}
  .capa-risca{border-top:2px solid currentColor; width:120px; margin:.7em 0 1em;}
  .capa-caixa{
    border:1px solid currentColor;
    padding:1.2em .8em;
    margin:1.6em 0;
  }

  .modal-capa{max-width:520px;}
  .previa-capa{
    border:1px solid var(--chrome-border);
    background:#fffefb;
    padding:14px 10px;
    margin:8px 0 14px;
    font-size:7.5px;
    line-height:1.4;
    color:#2a2a26;
    text-align:center;
    max-height:190px;
    overflow:hidden;
    font-family:"Times New Roman",serif;
  }
  .previa-capa h1{font-size:13px; margin:.3em 0;}
  .previa-capa p{margin:.2em 0;}
  .previa-capa .capa-espaco{height:10px;}
  .previa-capa .capa-caixa{padding:6px 4px; margin:8px 0;}
  .previa-capa .capa-risca{width:40px; margin:4px 0 6px;}

  /* na impressão, a etiqueta da secção e o número do editor não saem */
  @media print{
    .quebra-seccao::after,
    .quebra-pagina::before{content:"" !important; display:none !important;}
    .quebra-seccao{height:0 !important; border:none !important;}
  }

  /* =====================================================================
     Ecrãs intermédios — entre o telemóvel e o portátil
     ---------------------------------------------------------------------
     Entre os 640 e os 1024 píxeis o friso não cabia numa linha e
     embrulhava para uma segunda, deixando buracos entre os grupos e
     empurrando a folha para baixo. Passa a deslocar-se de lado, como já
     fazia nos telemóveis, mas guardando as legendas dos grupos, que
     nestas larguras ainda há espaço para elas.
     ===================================================================== */
  @media (max-width:1024px){
    .painel{
      flex-wrap:nowrap;
      overflow-x:auto;
      padding-bottom:6px;
      scrollbar-width:thin;
    }
    .painel .grupo{flex-shrink:0;}
    .painel::-webkit-scrollbar{height:6px;}
    .painel::-webkit-scrollbar-thumb{background:var(--chrome-border); border-radius:3px;}
  }

  /* a régua vertical rouba largura e, nestes ecrãs, atrapalha mais do que
     ajuda: fica só a horizontal */
  @media (max-width:900px){
    .regua-vertical, .canto-regua{display:none !important;}
    .area-regua-pagina{grid-template-columns:0 1fr;}
  }

  /* com o friso encolhido sobra mais ecrã para a folha */
  body.vista-movel .ferramentas.encolhido ~ main .folha{min-height:calc(100vh - 150px) !important;}
  body.vista-movel main{min-height:calc(100vh - 120px);}
  /* em ecrãs muito baixos, deitados, a conta acima deixaria a folha
     esmagada: aqui vale a altura do conteúdo */
  @media (max-height:460px){
    body.vista-movel .folha{min-height:calc(100vh - 150px) !important;}
  }

  /* Na vista de telemóvel o friso comporta-se sempre como em ecrã
     estreito, mesmo que a janela declare ser larga — que é o caso de
     quem pede "versão para computador" no telefone. Sem isto, as
     legendas dos grupos e o embrulho em duas linhas comiam um terço da
     altura útil e a folha ficava espremida no que sobrava. */
  body.vista-movel .legenda-grupo{display:none;}
  body.vista-movel .painel{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:5px;
  }
  body.vista-movel .painel .grupo{flex-shrink:0; padding-bottom:0;}
  body.vista-movel .logotipo .lema{display:none;}
  body.vista-movel .separadores{padding:0 8px;}

  /* =====================================================================
     Logótipo
     ---------------------------------------------------------------------
     A marca deixou de ser texto e passou a ser a imagem. A altura é fixa
     e a largura acompanha, para o desenho nunca sair esticado.
     ===================================================================== */
  .marca-imagem{
    height:38px;
    width:auto;
    display:block;
  }
  .logotipo .lema{
    font-size:12px;
    color:var(--text-soft);
    white-space:nowrap;
  }
  @media (max-width:900px){ .marca-imagem{height:32px;} }
  @media (max-width:640px){ .marca-imagem{height:28px;} }
  @media (max-width:400px){ .marca-imagem{height:24px;} }

  /* =====================================================================
     Cores da marca aplicadas à interface
     ---------------------------------------------------------------------
     Azul para o que comanda, verde para o que guarda e confirma, laranja
     para o que chama a atenção. Sempre sobre branco, que é onde a letra
     pequena se lê melhor.
     ===================================================================== */
  .botao-ficheiro{background:var(--azul);}
  .botao-ficheiro:hover{background:var(--azul-escuro);}

  .separador.activo{
    color:var(--azul);
    border-bottom:2px solid var(--azul);
    box-shadow:0 1px 0 var(--paper);
  }
  .separador-matematica.activo{color:var(--laranja); border-bottom-color:var(--laranja);}

  .selo{background:var(--verde); border-color:var(--verde);}
  .selo:hover{background:var(--verde-escuro); border-color:var(--verde-escuro);}
  .selo-secundario{background:transparent; color:var(--azul); border:1px solid var(--azul);}
  .selo-secundario:hover{background:rgba(10,107,196,.08); color:var(--azul-escuro);}
  .selo-conta{background:transparent; color:var(--azul); border:1px solid var(--azul);}
  .selo-conta:hover{background:rgba(10,107,196,.08);}

  .botao-primario{background:var(--azul); border-color:var(--azul);}
  .botao-primario:hover{background:var(--azul-escuro); border-color:var(--azul-escuro);}

  .ferramentas button.icone.activo,
  .ferramentas button.icone[aria-pressed="true"]{
    background:rgba(10,107,196,.12);
    border-color:var(--azul-claro);
    color:var(--azul-escuro);
  }
  .ferramentas button.destaque{background:var(--laranja); border-color:var(--laranja);}
  .ferramentas button.destaque:hover{background:#c85d00; border-color:#c85d00;}

  .estado-gravacao{color:var(--verde);}
  .indicador-erros{background:#fff3e6; color:#a24f00; border-color:#f5c99b;}
  .quebra-seccao{border-color:var(--azul-claro);}
  .quebra-seccao::after{color:var(--azul); border-color:var(--azul-claro);}
  .capa-risca{border-top-color:var(--laranja);}
  .aviso-cookies{border-left-color:var(--verde);}

  /* =====================================================================
     Imagens: pegas em todos os cantos
     ---------------------------------------------------------------------
     O resize do CSS só funcionava no Firefox e dava uma pega ao canto.
     Estas oito são desenhadas por cima da imagem, acompanham-na quando a
     página se desloca e trabalham em qualquer navegador.
     ===================================================================== */
  .folha img{resize:none;}

  .moldura-imagem{
    position:fixed;
    z-index:60;
    pointer-events:none;
    outline:1.5px solid var(--azul);
    outline-offset:1px;
  }
  .moldura-imagem .pega{
    position:absolute;
    width:12px;
    height:12px;
    margin:-6px 0 0 -6px;
    background:var(--paper);
    border:1.5px solid var(--azul);
    border-radius:2px;
    pointer-events:auto;
    touch-action:none;
  }
  .moldura-imagem .pega:hover{background:var(--azul);}
  .moldura-imagem.a-ajustar{outline-style:dashed;}

  .moldura-imagem .pega-no{top:0;    left:0;    cursor:nwse-resize;}
  .moldura-imagem .pega-n {top:0;    left:50%;  cursor:ns-resize;}
  .moldura-imagem .pega-ne{top:0;    left:100%; cursor:nesw-resize;}
  .moldura-imagem .pega-e {top:50%;  left:100%; cursor:ew-resize;}
  .moldura-imagem .pega-se{top:100%; left:100%; cursor:nwse-resize;}
  .moldura-imagem .pega-s {top:100%; left:50%;  cursor:ns-resize;}
  .moldura-imagem .pega-so{top:100%; left:0;    cursor:nesw-resize;}
  .moldura-imagem .pega-o {top:50%;  left:0;    cursor:ew-resize;}

  .medida-imagem{
    position:absolute;
    bottom:-26px;
    left:50%;
    transform:translateX(-50%);
    background:var(--azul);
    color:var(--paper);
    font-size:11px;
    padding:2px 8px;
    border-radius:3px;
    white-space:nowrap;
    opacity:0;
    transition:opacity .12s;
  }
  .medida-imagem.visivel{opacity:1;}

  /* em ecrãs de toque, pegas maiores para o dedo acertar */
  @media (pointer:coarse){
    .moldura-imagem .pega{width:18px; height:18px; margin:-9px 0 0 -9px;}
  }

  @media print{ .moldura-imagem{display:none !important;} }

  /* =====================================================================
     Tabelas: pintar o texto e o fundo das células
     ===================================================================== */
  .cor-celula{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:29px;
    border:1px solid var(--chrome-border);
    border-radius:var(--radius);
    background:var(--paper);
    cursor:pointer;
  }
  .cor-celula:hover{border-color:var(--azul-claro);}
  .cor-celula .marca-cor{
    font-family:Georgia,serif;
    font-size:13px;
    color:var(--graphite);
    pointer-events:none;
  }
  .cor-celula input[type=color]{
    position:absolute;
    inset:auto 0 -2px 0;
    width:100%;
    height:7px;
    padding:0;
    border:none;
    background:none;
    cursor:pointer;
  }
  .cor-celula input[type=color]:disabled{opacity:.35; cursor:not-allowed;}
  .cor-celula:has(input:disabled){opacity:.5;}

  /* =====================================================================
     Rodapé: parágrafos e zoom
     ===================================================================== */
  .zoom-rodape{
    display:inline-flex;
    align-items:center;
    gap:4px;
  }
  .zoom-rodape button{
    background:transparent;
    border:1px solid var(--chrome-border);
    border-radius:var(--radius);
    width:22px;
    height:20px;
    line-height:1;
    cursor:pointer;
    color:var(--graphite);
    font-size:13px;
    padding:0;
  }
  .zoom-rodape button:hover{background:var(--paper); border-color:var(--azul-claro); color:var(--azul);}
  #zoomRodapeValor{min-width:38px; text-align:center;}

  @media (max-width:640px){
    #contagemParagrafos{display:none;}
  }
  @media (max-width:400px){
    #contagemPalavras{display:none;}
  }