/* ==================================================================== */
/* Base Toast Notification Styles                                       */
/* ==================================================================== */

.toast-notification {
    /* Positioning and Layering */
    position: fixed;
    z-index: 999999;
    /* Ensures the toast appears on top of other elements */

    /* Box Model and Appearance */
    /* Tecto de segurança: um toast nunca passa da largura do ecrã, seja qual for
       o `width` que lhe passem. Havia avisos a 60% da largura (1020px num ecrã
       de 1700) — para duas linhas e dois botões, o que tapava a página em vez de
       avisar ao canto. Um aviso com acção anda pelos 400-500px. */
    max-width: min(560px, calc(100vw - 32px));
    background-color: #fff;
    box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    display: flex;
    padding: 10px 20px 15px 20px;
    overflow: hidden;
    /* Essential for containing the progress bar and respecting border-radius */

    /* Initial state for animation (positioned off-screen at the top) */
    transform: translate(0, -150%);

    /* Removes text decoration if the toast is a link */
    text-decoration: none;
}

/* Specific style for toasts that are links */
a.toast-notification {
    /* Default text color for the link, can be overridden by theme styles */
    color: #bbbbbb;
    text-decoration: none;
}


/* ==================================================================== */
/* Inner Toast Structure                                                */
/* ==================================================================== */

.toast-notification .toast-notification-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    /* Takes up available space */
    padding-right: 10px;
    overflow: hidden;
}

.toast-notification .toast-notification-wrapper .toast-notification-header {
    padding: 0;
    margin: 0;
    font-weight: 500;
    font-size: var(--text-lg, 14px);
    color: #bbbbbb;
    /* IMPROVEMENT: `overflow-wrap` is better than `word-break` for wrapping long text without breaking words */
    overflow-wrap: break-word;
}

.toast-notification .toast-notification-wrapper .toast-notification-content {
    margin: 15px 0 0 0;
    font-size: 12px;
    line-height: normal;
    padding: 0;
    color: #bbbbbb;
}

.toast-notification .toast-notification-close {
    position: absolute;
    top: 5px;
    right: 10px;

    /* Reset button styles */
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;

    /* Text styles */
    font-size: 15px;
    line-height: normal;
    font-weight: 600;
    color: #eeeeee;
    outline: none;
}

.toast-notification .toast-notification-close:focus-visible {
  outline: calc(var(--focus-ring-width) * 2) solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* Hover effect */
.toast-notification .toast-notification-close:hover {
    color: rgba(0, 0, 0, 0.4);
}


/* ==================================================================== */
/* Positioning Classes                                                  */
/* Defines the initial off-screen state for different positions.        */
/* The JavaScript will calculate the final animated position.           */
/* ==================================================================== */

.toast-notification.toast-notification-top-center {
    /* CORRECTION: Uses translate(-50%) with `left: 50%` from JS for perfect horizontal centering. */
    transform: translate(-50%, -150%);
}

.toast-notification.toast-notification-bottom-left,
.toast-notification.toast-notification-bottom-right {
    transform: translate(0, 150%);
}

.toast-notification.toast-notification-bottom-center {
    /* CORRECTION: Uses translate(-50%) with `left: 50%` from JS for perfect horizontal centering. */
    transform: translate(-50%, 150%);
}


/* ====================================================================
   TEMAS — fundo sólido colorido, ícone em medalhão, texto branco
   ====================================================================
   Desenho escolhido pelo Jorge (2026-08-27), a partir de uma referência que
   enviou. O que muda em relação ao anterior:

     antes                          agora
     fundo claro pastel             fundo SÓLIDO da cor
     filete de 10px à esquerda      sem filete
     texto na cor escura            texto branco
     barra de progresso escura      barra clara, no fundo, a toda a largura
     (sem ícone)                    ícone em medalhão translúcido à esquerda

   Continua a valer a regra de sempre: **estas cores são FIXAS e não seguem o
   tema** (ver a nota no fim do ficheiro). O que mudou foi o desenho, não a
   natureza — um toast é a mesma coisa em claro e em escuro.

   O ícone é desenhado no `::before` do próprio toast, porque o markup do
   Toast.js não tem elemento para ele e não se toca no componente por causa de
   uma decoração. Vai como SVG em data-URI, branco: não depende da fonte de
   ícones estar carregada no momento em que o toast aparece.
   ==================================================================== */

/* Cada tema declara a SUA cor e o SEU glifo; tudo o resto é comum.

   AS CORES SÃO AS DA REFERÊNCIA, UM TOM MAIS FUNDAS. Nas cores exactas da
   imagem, o texto branco não é legível — medido, nenhuma das cinco chega ao
   mínimo (4,5:1):

       success #57bb6e  2,40:1      error #e9584a  3,52:1
       info    #0c8ce0  3,59:1      warning #fdc00c  1,65:1

   Baixar a luminosidade entre 6% e 17% — mantendo matiz e saturação — põe as
   três acima de 4,5:1 sem mudar a cor de família: continua a ler-se "o verde",
   "o vermelho", "o azul". O amarelo não se resolve assim (teria de ficar
   castanho): é a excepção, e leva tinta escura em vez de branca.

   ERAM CINCO. O laranja saiu (2026-09-01): entre o amarelo do `warning` e o
   vermelho do `error` não havia um terceiro grau de urgência para dizer — quem
   escolhia entre os dois escolhia à sorte, e quem lia não distinguia o que os
   separava. Um `style: 'orange'` esquecido em qualquer lado cai no amarelo: o
   alias vive no `push()` do Toast.js. */
.toast-notification.toast-notification-success { --toast-cor: #368548; }  /* 4,56:1 */
.toast-notification.toast-notification-error   { --toast-cor: #e22d1b; }  /* 4,54:1 */
.toast-notification.toast-notification-info    { --toast-cor: #0b7bc5; }  /* 4,51:1 */
.toast-notification.toast-notification-warning { --toast-cor: #fdc00c; }  /* tinta escura */

.toast-notification.toast-notification-success,
.toast-notification.toast-notification-error,
.toast-notification.toast-notification-info,
.toast-notification.toast-notification-warning {
    background-color: var(--toast-cor);
    border-left: none;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px 16px 18px;
    color: #fff;
}

/* O medalhão do ícone. `flex-shrink: 0` porque o texto pode ser longo.
   32px (era 44) e glifo de 18 (era 24): a 44 o medalhão era mais alto do que as
   duas linhas de texto que acompanha — o aviso lia-se como um cartaz, e o olho
   ia para o símbolo em vez de ir para a frase. */
.toast-notification.toast-notification-success::before,
.toast-notification.toast-notification-error::before,
.toast-notification.toast-notification-info::before,
.toast-notification.toast-notification-warning::before {
    content: '';
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin-top: 1px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.22);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
}

/* ✓ */
.toast-notification.toast-notification-success::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
/* × */
.toast-notification.toast-notification-error::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
/* i */
.toast-notification.toast-notification-info::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16v-5M12 8h.01'/%3E%3C/svg%3E");
}
/* O glifo do `warning` é o triângulo, e está lá em baixo, no bloco do amarelo:
   é a única cor com tinta escura, e um `background-image` branco aqui seria
   sempre sobreposto — regra morta a fingir que desenha alguma coisa. */

/* Texto: tudo branco. O título destaca-se pelo peso e pelo tamanho, não pela
   cor — sobre um fundo saturado, dois brancos diferentes leem-se como um
   engano de renderização. */
.toast-notification.toast-notification-success .toast-notification-wrapper .toast-notification-header,
.toast-notification.toast-notification-error   .toast-notification-wrapper .toast-notification-header,
.toast-notification.toast-notification-info    .toast-notification-wrapper .toast-notification-header,
.toast-notification.toast-notification-warning .toast-notification-wrapper .toast-notification-header {
    color: #fff;
    font-size: var(--text-lg, 14px);
    font-weight: var(--weight-bold, 700);
    letter-spacing: -0.01em;
}

.toast-notification.toast-notification-success .toast-notification-wrapper .toast-notification-content,
.toast-notification.toast-notification-error   .toast-notification-wrapper .toast-notification-content,
.toast-notification.toast-notification-info    .toast-notification-wrapper .toast-notification-content,
.toast-notification.toast-notification-warning .toast-notification-wrapper .toast-notification-content {
    color: #fff;
    margin-top: 5px;
    font-size: var(--text-sm, 12px);
    line-height: 1.5;
}

/* O × de fechar: branco esbatido, cheio no hover. */
.toast-notification.toast-notification-success .toast-notification-close,
.toast-notification.toast-notification-error   .toast-notification-close,
.toast-notification.toast-notification-info    .toast-notification-close,
.toast-notification.toast-notification-warning .toast-notification-close {
    color: rgba(255, 255, 255, 0.75);
    top: 6px;
    right: 10px;
    font-size: 15px;
}

.toast-notification.toast-notification-success .toast-notification-close:hover,
.toast-notification.toast-notification-error   .toast-notification-close:hover,
.toast-notification.toast-notification-info    .toast-notification-close:hover,
.toast-notification.toast-notification-warning .toast-notification-close:hover {
    color: #fff;
}

/* ── Amarelo: a excepção ───────────────────────────────────────────────
   Branco sobre #fdc00c dá 1,65:1 — ilegível. O amarelo é a única das quatro
   cores clara o bastante para exigir tinta ESCURA; o desenho é o mesmo, muda
   só a tinta. Medido: 6,92:1 no texto.

   E é aqui que mora o TRIÂNGULO. Um "!" solto dentro do medalhão redondo
   diferia do "i" do `info` só pela ordem do ponto e da haste — a 18px ninguém
   lê essa diferença, e os dois avisos passavam a valer o mesmo. O triângulo
   distingue-se pela FORMA, que se apanha antes de se ler o símbolo. */
.toast-notification.toast-notification-warning {
    color: #4a3702;
}
.toast-notification.toast-notification-warning .toast-notification-wrapper .toast-notification-header,
.toast-notification.toast-notification-warning .toast-notification-wrapper .toast-notification-content {
    color: #4a3702;
}
.toast-notification.toast-notification-warning::before {
    background-color: rgba(74, 55, 2, 0.16);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a3702' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}
.toast-notification.toast-notification-warning .toast-notification-close {
    color: rgba(74, 55, 2, 0.7);
}
.toast-notification.toast-notification-warning .toast-notification-close:hover {
    color: #4a3702;
}

/* ── Barra de progresso ────────────────────────────────────────────────
   No fundo, de ponta a ponta, um branco sobre a cor — em vez da barra escura
   que havia. A calha é o próprio fundo, um pouco escurecido. */
.toast-notification.toast-notification-success .progress,
.toast-notification.toast-notification-error   .progress,
.toast-notification.toast-notification-info    .progress,
.toast-notification.toast-notification-warning .progress {
    height: 4px;
    background-color: rgba(0, 0, 0, 0.12);
}

.toast-notification.toast-notification-success .progress-bar-inner,
.toast-notification.toast-notification-error   .progress-bar-inner,
.toast-notification.toast-notification-info    .progress-bar-inner {
    background-color: rgba(255, 255, 255, 0.55);
}

.toast-notification.toast-notification-warning .progress-bar-inner {
    background-color: rgba(74, 55, 2, 0.35);
}

/* ── Ritmo vertical ────────────────────────────────────────────────────
   Quatro medidas, e cada uma diz o que separa:

     título → texto      6px    são a mesma frase, dita em dois tempos
     linha → linha       1,5    dentro do texto, é o line-height que separa
     texto → botões     16px    aqui muda a natureza: deixa de se ler e passa
                                a decidir-se, e o olho precisa da pausa
     botões → fundo     20px    o padding do toast

   O `<i>` do conteúdo (a segunda linha, em itálico) é um bloco com 4px por
   cima: escrito a seguir a um `<br>`, ficava colado à linha anterior. */

.toast-notification .toast-notification-wrapper .toast-notification-content > i,
.toast-notification .toast-notification-wrapper .toast-notification-content > em {
    display: block;
    margin-top: 4px;
}

/* ── Botões dentro do toast ────────────────────────────────────────────
   O LAYOUT (flex, gap, margem de cima) e as cores. O fundo passou a ser a cor
   saturada, por isso a tinta escura que aqui estava — feita para o pastel
   claro — deixou de servir: contornado a branco, cheio a branco com a letra na
   cor do toast. Funciona nas cinco. */

.toast-notification .toast-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}
.toast-notification .toast-buttons .bt-outline,
.toast-notification .toast-buttons .bt-outline.dark {
    color: #fff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.6);
}

.toast-notification .toast-buttons .bt-outline:hover,
.toast-notification .toast-buttons .bt-outline.dark:hover:not(.disabled, [disabled]) {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border-color: #fff;
}

.toast-notification .toast-buttons .bt-filled,
.toast-notification .toast-buttons .bt-filled.dark {
    color: var(--toast-cor, #1c1917);
    background: #fff;
    border-color: #fff;
}

.toast-notification .toast-buttons .bt-filled:hover:not(.active, .disabled, [disabled]),
.toast-notification .toast-buttons .bt-filled.dark:hover:not(.active, .disabled, [disabled]) {
    color: var(--toast-cor, #1c1917);
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(255, 255, 255, 0.86);
}

/* No amarelo o texto do botão cheio é a tinta escura, não o amarelo (que sobre
   branco seria ilegível). */
.toast-notification.toast-notification-warning .toast-buttons .bt-outline,
.toast-notification.toast-notification-warning .toast-buttons .bt-outline.dark {
    color: #4a3702;
    border-color: rgba(74, 55, 2, 0.4);
}
.toast-notification.toast-notification-warning .toast-buttons .bt-outline:hover,
.toast-notification.toast-notification-warning .toast-buttons .bt-outline.dark:hover:not(.disabled, [disabled]) {
    color: #4a3702;
    background: rgba(74, 55, 2, 0.1);
    border-color: #4a3702;
}
.toast-notification.toast-notification-warning .toast-buttons .bt-filled,
.toast-notification.toast-notification-warning .toast-buttons .bt-filled.dark {
    color: #4a3702;
    background: #fff;
    border-color: #fff;
}
.toast-notification.toast-notification-warning .toast-buttons .bt-filled:hover:not(.active, .disabled, [disabled]),
.toast-notification.toast-notification-warning .toast-buttons .bt-filled.dark:hover:not(.active, .disabled, [disabled]) {
    color: #4a3702;
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(255, 255, 255, 0.86);
}


/* ====================================================================
   AVISOS: a outra família de toasts (decisão do Jorge, 2026-09-16)
   ====================================================================
   Os quatro de cima contam o resultado de uma operação e vão-se embora. Os
   avisos (`style: 'alert'`) dizem que alguma coisa espera por alguém: um
   pedido de apoio à direção, uma cotação a rever, um pedido urgente sem dono.
   Vieram substituir o balão que flutuava ao centro, para haver um sítio só
   onde se avisa. Seis níveis, do menos ao mais importante: azul, verde,
   amarelo, laranja, roxo e vermelho, e é o nível que diz a cor. O mesmo
   desenho dos outros (fundo sólido, medalhão, texto branco, cores FIXAS que
   não seguem o tema), com o que os distingue à primeira vista: o ícone é da
   família dos avisos, não o visto, a cruz ou o «i», e cresce com o escalão
   (sino, sino a tocar, altifalante, sirene), para quem não distingue cores
   ler o nível na forma. O vermelho pulsa: é o urgente.

   Contraste medido com o branco: azul 4,51:1, verde 4,56:1, laranja 4,56:1,
   roxo 5,70:1, vermelho 4,54:1. O amarelo leva tinta escura, como o `warning`
   (6,92:1). O azul, o verde, o amarelo e o vermelho são as mesmas cores dos
   toasts de operação, de propósito: é a mesma casa, e o que muda é o ícone.
   O laranja voltou (tinha saído dos de operação a 2026-09-01) porque aqui há
   uma escala de seis a dizer, e não dois graus a confundir. */
.toast-notification.toast-notification-alert--blue   { --toast-cor: #0b7bc5; }
.toast-notification.toast-notification-alert--green  { --toast-cor: #368548; }
.toast-notification.toast-notification-alert--yellow { --toast-cor: #fdc00c; }
.toast-notification.toast-notification-alert--orange { --toast-cor: #c8500a; }
.toast-notification.toast-notification-alert--purple { --toast-cor: #7c3aed; }
.toast-notification.toast-notification-alert--red    { --toast-cor: #e22d1b; }

.toast-notification.toast-notification-alert {
    background-color: var(--toast-cor);
    border-left: none;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px 16px 18px;
    color: #fff;
}
.toast-notification.toast-notification-alert::before {
    content: '';
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin-top: 1px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.22);
    background-repeat: no-repeat;
    background-position: center;
    /* 16px e não 18px, ao contrário dos toasts de operação, e é isso que os faz
       parecer do MESMO tamanho (2026-09-17). O medalhão é o mesmo (32px) e a
       caixa do toast é a mesma; o que muda é o desenho lá dentro: um sino, um
       megafone ou uma sirene preenchem quase todo o viewBox de 24, enquanto um
       visto ocupa 11 unidades e um «i» oito. À mesma medida, o aviso lia-se
       maior do que o sucesso ao lado. Alinhamento óptico: iguala-se o que se
       vê, não o número. */
    background-size: 16px 16px;
}
/* O sino: azul e verde, algo espera. */
.toast-notification.toast-notification-alert--blue::before,
.toast-notification.toast-notification-alert--green::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E");
}
/* O sino a tocar: amarelo e laranja, pede atenção. No amarelo é a tinta escura. */
.toast-notification.toast-notification-alert--orange::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 9a5.5 5.5 0 0 0-11 0c0 6-2.5 7.5-2.5 7.5h16s-2.5-1.5-2.5-7.5'/%3E%3Cpath d='M13.6 20.5a1.8 1.8 0 0 1-3.2 0'/%3E%3Cpath d='M2.5 6.5A9 9 0 0 1 5 3.2'/%3E%3Cpath d='M21.5 6.5A9 9 0 0 0 19 3.2'/%3E%3C/svg%3E");
}
.toast-notification.toast-notification-alert--yellow::before {
    background-color: rgba(74, 55, 2, 0.16);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a3702' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 9a5.5 5.5 0 0 0-11 0c0 6-2.5 7.5-2.5 7.5h16s-2.5-1.5-2.5-7.5'/%3E%3Cpath d='M13.6 20.5a1.8 1.8 0 0 1-3.2 0'/%3E%3Cpath d='M2.5 6.5A9 9 0 0 1 5 3.2'/%3E%3Cpath d='M21.5 6.5A9 9 0 0 0 19 3.2'/%3E%3C/svg%3E");
}
/* O altifalante: roxo, a direção chama. */
.toast-notification.toast-notification-alert--purple::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4V5z'/%3E%3Cpath d='M15.5 9.5a3.5 3.5 0 0 1 0 5'/%3E%3Cpath d='M18.5 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E");
}
/* A sirene: vermelho, urgente. */
.toast-notification.toast-notification-alert--red::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21h14'/%3E%3Cpath d='M7 21v-7a5 5 0 0 1 10 0v7'/%3E%3Cpath d='M12 5V2.5'/%3E%3Cpath d='M5.5 8 3.7 6.2'/%3E%3Cpath d='M18.5 8l1.8-1.8'/%3E%3Cpath d='M12 12v3'/%3E%3C/svg%3E");
}

.toast-notification.toast-notification-alert .toast-notification-wrapper .toast-notification-header {
    color: #fff;
    font-size: var(--text-lg, 14px);
    font-weight: var(--weight-bold, 700);
    letter-spacing: -0.01em;
}
.toast-notification.toast-notification-alert .toast-notification-wrapper .toast-notification-content {
    color: #fff;
    margin-top: 5px;
    font-size: var(--text-sm, 12px);
    line-height: 1.5;
}
.toast-notification.toast-notification-alert .toast-notification-close {
    color: rgba(255, 255, 255, 0.75);
    top: 6px;
    right: 10px;
    font-size: 15px;
}
.toast-notification.toast-notification-alert .toast-notification-close:hover { color: #fff; }

/* O amarelo com tinta escura, pela mesma razão do `warning`. */
.toast-notification.toast-notification-alert--yellow,
.toast-notification.toast-notification-alert--yellow .toast-notification-wrapper .toast-notification-header,
.toast-notification.toast-notification-alert--yellow .toast-notification-wrapper .toast-notification-content { color: #4a3702; }
.toast-notification.toast-notification-alert--yellow .toast-notification-close { color: rgba(74, 55, 2, 0.7); }
.toast-notification.toast-notification-alert--yellow .toast-notification-close:hover { color: #4a3702; }
.toast-notification.toast-notification-alert--yellow .toast-buttons .bt-outline { color: #4a3702; border-color: rgba(74, 55, 2, 0.4); }
.toast-notification.toast-notification-alert--yellow .toast-buttons .bt-filled  { color: #4a3702; }

/* Um aviso fixo com endereço é uma ligação: o cursor diz-o, e o hover não muda
   a cor (é um fundo sólido, e um fundo que muda lê-se como outro nível). */
a.toast-notification.toast-notification-alert { cursor: pointer; }
a.toast-notification.toast-notification-alert:focus-visible {
    outline: calc(var(--focus-ring-width, 2px) * 2) solid #fff;
    outline-offset: 2px;
}

/* SEM PULSAR, em nenhum nível (decisão do Jorge, 2026-09-17). O urgente nasceu
   a pulsar, herdado do balão que substituiu; num aviso que fica no ecrã
   enquanto o motivo durar, o anel a bater ao lado do trabalho cansa e deixa de
   se ver ao fim de meia hora. O vermelho e a sirene dizem o nível, e ficam
   quietos. A classe `is-urgent` continua a marcar o vermelho para quem precise
   de lhe pegar, mas não desenha movimento nenhum. */

/* O modal da escolha ao fechar um aviso fixo (Services/AlertCenter.js): o
   respiro do corpo alinha pelo cabeçalho, como nos outros modais da casa, que
   declaram o seu pelo data-modal-id. A frase, o botão de abrir o local e a
   pergunta separam-se pelo ritmo do formulário. */
.modal-window-container[data-modal-id="alert-snooze"] > .modal-content-wrapper > .modal-content {
    padding: var(--space-2) var(--space-4) var(--space-3);
}
.modal-window-container[data-modal-id="alert-snooze"] .modal-content > p { margin: 0 0 var(--space-3); }
/* A coluna do formulário traz 5px de cada lado; aqui a pergunta alinha pela frase. */
.modal-window-container[data-modal-id="alert-snooze"] .modal-content .form-row { margin-top: var(--space-2); margin-inline: -5px; width: auto; }

/* A barra de progresso, se um aviso levar tempo (não é o caso dos fixos). */
.toast-notification.toast-notification-alert .progress { height: 4px; background-color: rgba(0, 0, 0, 0.12); }
.toast-notification.toast-notification-alert .progress-bar-inner { background-color: rgba(255, 255, 255, 0.55); }
.toast-notification.toast-notification-alert--yellow .progress-bar-inner { background-color: rgba(74, 55, 2, 0.35); }


/* --- Dimmed State --- */
/* Dims toasts that are behind a new one */
.toast-notification.toast-notification-dimmed {
    opacity: 0.3;
}

.toast-notification.toast-notification-dimmed:hover,
.toast-notification.toast-notification-dimmed:active {
    opacity: 1;
}


/* ==================================================================== */
/* Action Buttons and Progress Bar                                      */
/* ==================================================================== */

/* Style for the revert action button */
.toast-notification .revert-action-button {
    color: #000000;
    cursor: pointer;
    text-decoration: underline;
    margin-left: 10px;
}

.toast-notification .revert-action-button:hover {
    text-decoration: underline;
}

/* --- Progress Bar Styles --- */
/* The progress bar container */
.toast-notification .progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* CORRECTION/IMPROVEMENT: The height is defined on the container. */
    height: 4px;
    display: flex;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.1);
}

/* The inner progress bar that gets animated */
.toast-notification .progress-bar-inner {
    /* The inner bar fills 100% of the container's height. */
    height: 100%;
    background-color: #000000;
    animation: progress_bar-countdown linear 1 forwards;
    animation-play-state: paused;
    /* Will be set to 'running' by JS */
}

/* Sets the progress bar color for each theme */

.progress-bar-inner.progress-error {
    background-color: #a75151;
}


/* ==================================================================== */
/* Animations and Other Rules                                           */
/* ==================================================================== */

/* Progress Bar Animation */
@keyframes progress_bar-countdown {

    /* Animates the width from 100% to 0% */
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

/* Ícone inline no conteúdo do toast (ex.: avisos de ligação em layout.js) */
.toast-inline-icon {
    font-size: 1.1em;
    vertical-align: middle;
    margin-right: 6px;
}

/*
    COMMENTED-OUT RULE: This rule probably doesn't work as intended.
    1. The main class is `.toast-notification`, not `.toast`.
    2. The `~` (general sibling) selector would only affect buttons that are siblings
       to the toast element in the `<body>`.
    3. It's very specific and brittle. Uncomment with care if you know what you are doing.
  */
/*
  .toast.active~button {
    pointer-events: none;
  }
  */