/* =============================================================================
   chrome.css - Cromo compartilhado por TODA pagina logada: o cabecalho de
   _partials/header.html, os dropdowns, o botao de tema e o toast unico.

   Carregado por _partials/head.html em todas as paginas, inclusive
   simulacao_risco_pert.html - diferente de componentes.css, que aquela pagina
   nao carrega. O motivo de estar separado e' exatamente esse: o cabecalho
   aparece lá, o toast e' usado lá, mas `.modal`/`.panel`/`.tag` daquela pagina
   sao outra coisa e colidiriam.

   Estilo usa so' seletor de classe/id (nunca elemento solto tipo body/button)
   para nao sobrescrever CSS proprio de cada pagina - regra herdada do
   header.html original.
   ============================================================================= */

header.mes-header {
    min-height: 70px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 28px;
    background: #1f3d5c;
    color: #fff;
    box-shadow: 0 3px 12px rgba(31, 61, 92, 0.24);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

header.mes-header .header-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
header.mes-header .header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Titulo/subtitulo de pagina (MELHORIAS_ADICIONAIS_MES.md secao 1): dado
   pronto em _contexto_pagina (Server/server.py) desde sempre, nunca
   desenhado em nenhum template - so' comentado em header.html. Fallback de
   cor explicito (mesmo padrao de Dashboard/pagina_inicial/pagina_inicial.html)
   porque este arquivo carrega tambem em simulacao_risco_pert.html, cujo
   design system proprio nao define --navy/--muted. */
.mes-page-header {
    padding: 14px 28px 2px;
}
.mes-page-header h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--navy, #23364d);
}
.mes-page-header p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--muted, #657381);
}

header.mes-header.mes-header-minimal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    background: transparent;
    box-shadow: none;
    padding: 16px 20px;
    min-height: auto;
}
header.mes-header.mes-header-minimal .mes-dropdown-trigger,
header.mes-header.mes-header-minimal #themeToggle {
    background: rgba(31, 61, 92, 0.92);
    border-color: rgba(31, 61, 92, 0.92);
    box-shadow: 0 4px 14px rgba(31, 61, 92, 0.25);
}
header.mes-header.mes-header-minimal .mes-dropdown-trigger:hover,
header.mes-header.mes-header-minimal #themeToggle:hover {
    background: #2d557d;
}

header.mes-header nav { display: flex; align-items: center; gap: 8px; overflow-x: auto; }
header.mes-header nav a {
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    padding: 9px 11px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
}
header.mes-header nav a:hover,
header.mes-header nav a.active { background: rgba(255, 255, 255, 0.15); }

#themeToggle {
    width: 38px;
    min-height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}
#themeToggle:hover { background: rgba(255, 255, 255, 0.2); }

.mes-dropdown { position: relative; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }

.mes-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.mes-dropdown-trigger:hover { background: rgba(255, 255, 255, 0.2); }
.mes-dropdown.open .mes-dropdown-caret { transform: rotate(180deg); }
.mes-dropdown-caret { display: inline-block; transition: .15s ease; }

.mes-dropdown-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.mes-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 6px;
    display: none;
    z-index: 60;
}
.mes-dropdown.open .mes-dropdown-menu { display: block; }
.mes-dropdown-menu-right { left: auto; right: 0; }

.mes-dropdown-item {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border: none;
    background: transparent;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    border-radius: 6px;
    cursor: pointer;
}
.mes-dropdown-item:hover { background: var(--surface-soft); }
.mes-dropdown-item-danger:hover { background: var(--red-soft); color: var(--red); }
.mes-dropdown-label { padding: 8px 10px 4px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.mes-dropdown-divider { height: 1px; background: var(--line); margin: 6px 2px; }

/* -----------------------------------------------------------------------------
   Sino da Central de Alertas (PROPOSTA_EVOLUCAO_MES.md item 1.3) - mesmo
   `.mes-dropdown` de cima (abre/fecha de graca), so' o conteudo do menu e' a
   lista de alertas em vez de item de navegacao. `.alerta-card` herda
   `.mes-dropdown-item` (linha/hover iguais) e so' acrescenta a cor por
   severidade - antes essas 2 classes existiam so' em
   Dashboard/pagina_inicial/pagina_inicial.html, num layout de pill
   horizontal (removido dali: o sino no header substitui o painel).
   ----------------------------------------------------------------------------- */

/* `.mes-dropdown-trigger` base e' pensado pra botao COM TEXTO (padding
   0 12px, largura livre) - "🔀 Trocar de área", avatar+nome. So' com o
   emoji dentro, isso teria sobrado padding horizontal e viraria um
   retangulo largo em vez de um botao de icone. Largura fixa igual a
   #themeToggle (38px) + padding zerado + centralizado = mesmo quadrado. */
.mes-alert-trigger {
    position: relative;
    width: 38px;
    padding: 0;
    justify-content: center;
    font-size: 16px;
}

/* Vermelho FIXO (nao var(--red)) de proposito: --red e' pensado pra ser TEXTO
   sobre --surface, entao no tema escuro ele clareia bastante (#a43d2a claro ->
   #e0665a escuro, ver base.css) - contra texto branco fixo isso perde
   contraste justo no tema escuro. Mesmo motivo de .mes-toast-erro (chrome.css
   abaixo) usar cor fixa em vez de var(): selo/toast sempre carrega texto
   branco, independente do tema da pagina, entao precisa de uma cor que
   funcione sozinha nos dois. */
.mes-alert-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #c0392b;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

.mes-alertas-menu { min-width: 220px; max-width: 260px; }
/* Mais estreita que o padrao (280-340px): o texto de cada alerta quebra em
   2 linhas com mais frequencia, entao cada linha ganha um pouco mais de
   padding vertical (11px, contra os 9px de .mes-dropdown-item) pra nao
   ficar apertado. */
.mes-alertas-menu .alerta-card { padding: 11px 10px; }

.mes-alertas-menu .alerta-card.critico { color: var(--red, #c0392b); }
.mes-alertas-menu .alerta-card.atencao { color: var(--amber, #b8860b); }

/* -----------------------------------------------------------------------------
   Botao "❓ Ajuda" (Shared/ajuda_paginas.py) - mesmo `.mes-dropdown-trigger`
   de icone que `.mes-alert-trigger`, sem badge nem dropdown: abre o modal
   `.mes-ajuda-modal` abaixo (reusa `.modal`/`.modal-card`/etc. de
   componentes.css - so' carrega junto com este botao, nunca em
   /simulacoes).
   ----------------------------------------------------------------------------- */
.mes-ajuda-trigger {
    width: 38px;
    padding: 0;
    justify-content: center;
    font-size: 16px;
}

/* Cartao mais estreito que o `.modal-card` padrao (640px) e mais alto que
   largo de proposito: e' um tour de passos curtos, nao um formulario - um
   cartao baixo e largo deixava o emoji/frase perdidos no meio do espaco
   vazio horizontal; estreito e alto concentra o olhar no selo+texto.

   Seletor duplo (".modal-card.mes-ajuda-card"), NAO so' ".mes-ajuda-card":
   _partials/head.html carrega chrome.css ANTES de componentes.css (nesta
   ordem, de proposito - ver o comentario lá), entao o `.modal-card` de
   componentes.css vem DEPOIS deste arquivo na cascata e, com a MESMA
   especificidade (0,1,0 os dois), venceria por ordem de fonte - o cartao
   ficaria nos 640px do padrao mesmo com esta regra aqui. Combinar as duas
   classes sobe a especificidade pra (0,2,0), que ganha independente da
   ordem. */
.modal-card.mes-ajuda-card { width: min(360px, 100%); }

/* Altura FIXA (nao min-height): com min-height, o card inteiro mudava de
   tamanho de pagina pra pagina, porque cada slide tem um texto de
   comprimento diferente - o card "respirava" junto com o texto em vez de
   ter um padrao unico. Fixando aqui, o card fica do MESMO tamanho em
   qualquer pagina; overflow-y:auto e' so' rede de seguranca caso algum
   texto futuro seja longo demais pro espaco (nao deve acontecer com as
   dicas atuais, todas curtas de proposito). */
.mes-ajuda-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    height: 320px;
    overflow-y: auto;
}

/* So' o slide .active ocupa espaco - os outros ficam prontos no DOM (sem
   fetch nem re-render a cada Avancar/Voltar), so' escondidos. */
.mes-ajuda-slide {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.mes-ajuda-slide.active { display: flex; }

/* Slide 1 (visao geral): emoji grande solto, sem selo - mesmo emoji que
   ja aparece no header/nav daquela pagina. */
.mes-ajuda-imagem { font-size: 64px; line-height: 1; }

/* Slides de dica: selo circular com o icone SVG do sprite (ver os
   <symbol id="cena-..."> em header.html) - cor unica (--blue) de proposito,
   pra nao competir com a cor semantica que cada pagina ja usa em tabelas/
   tags proprias. */
.mes-ajuda-selo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue-soft);
    color: var(--blue);
}
.mes-ajuda-selo svg { width: 34px; height: 34px; }

.mes-ajuda-texto {
    margin: 0;
    max-width: 290px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
}

/* Grid de 3 colunas (nao flex + space-between) pra centralizar as bolinhas
   DE VERDADE: com space-between, um item do meio so' fica visualmente no
   centro se os 2 vizinhos tiverem a MESMA largura - "← Voltar"/"Avançar →"
   nao tem, e o botao vira "Concluir" no ultimo slide (ainda mais assimetrico).
   As 2 colunas 1fr absorvem o espaco sobrando em partes iguais; cada botao
   fica no proprio canto (justify-self) independente do texto dele.

   Seletor duplo pelo mesmo motivo de `.modal-card.mes-ajuda-card` acima:
   `.modal-actions` de componentes.css (display:flex) carrega DEPOIS deste
   arquivo e tem a MESMA especificidade - sem o `.modal-actions` aqui na
   frente, esta regra perderia por ordem de fonte e o layout voltava a
   flex/justify-content:flex-end. */
.modal-actions.mes-ajuda-actions {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}
.mes-ajuda-actions #mesAjudaVoltar { justify-self: start; }
.mes-ajuda-actions #mesAjudaAvancar { justify-self: end; }

.mes-ajuda-pontos { display: flex; align-items: center; gap: 6px; justify-self: center; }
.mes-ajuda-ponto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--line-strong, #b8c8d8);
}
.mes-ajuda-ponto.active { background: var(--blue, #2d6ea8); }

/* -----------------------------------------------------------------------------
   Toast unico (MES.notificar)

   Substitui QUATRO implementacoes divergentes - `.toast`/`.show` em
   configuracoes.html e qualidade.html, `.toast`/`.aparece` em inspecoes.html e
   `#toast`/`.show` em simulacao_risco_pert.html (esta com paleta e markup
   proprios) - e as mensagens nativas, que estavam justamente nas paginas que NAO
   tinham toast nenhum (cadastro, producao, ocorrencias, filas).

   Classe prefixada `mes-` de proposito: nao colide com nenhum `.toast` que
   sobre em pagina alguma, e nao vaza para simulacao_risco_pert.html (que tem
   design system proprio).

   `aria-live="polite"` + `role="status"` no container: mensagens nativas eram sincronas e
   bloqueante, o que ao menos garantia que leitor de tela anunciasse o erro.
   Um <div> que aparece nao anuncia nada sem isso - trocar sem a regiao viva
   seria regressao de acessibilidade disfarcada de melhoria.
   -------------------------------------------------------------------------- */

.mes-toast-regiao {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    width: min(520px, calc(100vw - 32px));
}

.mes-toast {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #1f3d5c;
    color: #fff;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: auto;
}

.mes-toast.mes-toast-visivel {
    opacity: 1;
    transform: translateY(0);
}

.mes-toast-erro { background: #8f2f1f; }
.mes-toast-ok { background: #216146; }
.mes-toast-aviso { background: #7c4d0d; }

.mes-toast-icone { flex: none; font-size: 15px; line-height: 1.3; }

/* pre-wrap porque varias mensagens vinham com \n - listas de erro
   de validacao em cadastro.html, por exemplo. Perder a quebra de linha
   transformaria a lista num paragrafo ilegivel. */
.mes-toast-texto { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.mes-toast-fechar {
    flex: none;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}
.mes-toast-fechar:hover { background: rgba(255, 255, 255, 0.3); }

/* -----------------------------------------------------------------------------
   Dialogo proprio (MES.confirm / MES.prompt / MES.informar)

   Prefixo mes- e necessario: simulacao_risco_pert.html possui outro design
   systema e outra semantica para `.modal`. O fallback para --panel/--txt
   permite que este dialogo tambem funcione nessa pagina sem carregar
   componentes.css.
   -------------------------------------------------------------------------- */

.mes-dialog-root {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 20, 30, 0.58);
    opacity: 0;
    transition: opacity 0.16s ease;
}

.mes-dialog-root.mes-dialog-aberto { opacity: 1; }

.mes-dialog-card {
    width: min(520px, 100%);
    max-height: min(90vh, 620px);
    overflow: auto;
    border: 1px solid var(--line, rgba(150, 170, 190, 0.45));
    border-radius: 12px;
    background: var(--surface, var(--panel, #fff));
    color: var(--ink, var(--txt, #1f2933));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: translateY(8px) scale(0.98);
    transition: transform 0.16s ease;
}

.mes-dialog-aberto .mes-dialog-card { transform: translateY(0) scale(1); }

.mes-dialog-head {
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--line, rgba(150, 170, 190, 0.45));
}

.mes-dialog-title {
    margin: 0;
    color: var(--navy, var(--txt, #1f3d5c));
    font-size: 17px;
    line-height: 1.3;
}

.mes-dialog-body { padding: 18px 20px; }

.mes-dialog-message {
    margin: 0;
    color: var(--ink, var(--txt, #1f2933));
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.mes-dialog-input {
    width: 100%;
    min-height: 42px;
    margin-top: 14px;
    padding: 9px 11px;
    border: 1px solid var(--line-strong, #b8c8d8);
    border-radius: 7px;
    background: var(--surface, var(--panel, #fff));
    color: var(--ink, var(--txt, #1f2933));
    font: inherit;
}

.mes-dialog-input:focus,
.mes-dialog-button:focus,
.mes-dialog-copy-button:focus {
    outline: 2px solid var(--blue, #2d6ea8);
    outline-offset: 2px;
}

.mes-dialog-copy {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 14px;
}

.mes-dialog-copy .mes-dialog-input {
    flex: 1;
    min-width: 0;
    margin-top: 0;
    overflow-wrap: anywhere;
}

.mes-dialog-copy-button,
.mes-dialog-button {
    min-height: 40px;
    border-radius: 7px;
    padding: 0 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.mes-dialog-copy-button {
    flex: none;
    border: 1px solid var(--line-strong, #b8c8d8);
    background: var(--surface-soft, #f7fafc);
    color: var(--navy, #1f3d5c);
}

.mes-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--line, rgba(150, 170, 190, 0.45));
}

.mes-dialog-button {
    border: 1px solid transparent;
    cursor: pointer;
}

.mes-dialog-button-secondary {
    border-color: var(--line-strong, #b8c8d8);
    background: var(--surface, var(--panel, #fff));
    color: var(--navy, var(--txt, #1f3d5c));
}

.mes-dialog-button-primary {
    border-color: #2d6ea8;
    background: #2d6ea8;
    color: #fff;
}

.mes-dialog-button-danger {
    border-color: #8f2f1f;
    background: #8f2f1f;
    color: #fff;
}

.mes-dialog-button-primary:hover { background: #245d90; }
.mes-dialog-button-danger:hover { background: #742619; }

@media (max-width: 520px) {
    .mes-dialog-root { padding: 12px; }
    .mes-dialog-copy { flex-direction: column; }
    .mes-dialog-copy-button { width: 100%; }
    .mes-dialog-actions { flex-direction: column-reverse; }
    .mes-dialog-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .mes-dialog-root,
    .mes-dialog-card { transition: none; }
}

/* -----------------------------------------------------------------------------
   Faixa de fim do periodo de teste - achado 2026-09-07 (auditoria pre-piloto).
   Aparece a partir de 14 dias do vencimento (ver _partials/header.html): antes
   disso a empresa nao tinha nenhum sinal dentro do sistema, e no dia do
   vencimento a sessao de todo mundo caia com a mensagem generica de suporte.
   -------------------------------------------------------------------------- */

.mes-faixa-trial {
    padding: 10px 18px;
    background: var(--amber-soft, #fff3dc);
    color: var(--amber, #9f6515);
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    text-align: center;
}

.mes-faixa-trial-critica {
    background: var(--red-soft, #fdeaea);
    color: var(--red, #b3261e);
    font-weight: 600;
}