/* =============================================================================
   componentes.css - Componentes de tela compartilhados pelas paginas do MES.

   NAO e' carregado por simulacao_risco_pert.html, e isso e' deliberado: aquela
   pagina tem design system proprio (--bg/--panel/--txt/--cyan, radios --rad,
   fonte Inter) e usa `.modal` com OUTRO significado - lá `.modal` e' o cartao
   em si (`display:flex`, `max-width:860px`), aqui e' o overlay de tela cheia
   (`position:fixed; inset:0`). Carregar este arquivo lá vazaria o
   `position:fixed` para o cartao dela. O cromo comum (cabecalho, dropdown,
   toast) mora em chrome.css justamente para poder ser carregado lá tambem.

   Cada regra abaixo e' a variante MAIORITARIA entre as paginas que a definiam.
   Quem divergia manteve so' o delta no proprio <style> (que carrega depois e
   portanto vence). O caso mais divergente e' cadastro.html, cuja tela e' um
   grid de tres colunas com paddings proprios.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Painel - estava em 7 arquivos (2 corpos distintos para `.panel`, 4 para
   `.panel-head`, 3 para `.panel-body`)
   -------------------------------------------------------------------------- */

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.panel-head {
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}

.panel-head h1,
.panel-head h2 {
    color: var(--navy);
    font-size: 19px;
    line-height: 1.25;
}

.panel-head p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.panel-body {
    padding: 18px;
}

/* -----------------------------------------------------------------------------
   Tag - estava em 4 arquivos. As cinco variantes de cor eram IDENTICAS nos
   quatro (20 regras -> 5); so' a base `.tag` divergia.
   -------------------------------------------------------------------------- */

.tag {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border-radius: 999px;
    padding: 0 9px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.tag.blue { background: var(--blue-soft); color: var(--blue); }
.tag.green { background: var(--green-soft); color: var(--green); }
.tag.amber { background: var(--amber-soft); color: var(--amber); }
.tag.red { background: var(--red-soft); color: var(--red); }
.tag.violet { background: var(--violet-soft); color: var(--violet); }

/* -----------------------------------------------------------------------------
   Modal - estava em 3 arquivos do MES (cadastro/configuracoes/qualidade)
   -------------------------------------------------------------------------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(16, 29, 43, 0.5);
}

.modal.open {
    display: flex;
}

.modal-card {
    width: min(640px, 100%);
    background: var(--surface);
    border-radius: 10px;
    box-shadow: var(--shadow);
    max-height: 90vh;
    overflow: auto;
}

.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}

.modal-body {
    padding: 18px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
}

/* -----------------------------------------------------------------------------
   Segmented control - estava em 3 arquivos
   -------------------------------------------------------------------------- */

.segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.segmented button {
    min-height: 34px;
    border: none;
    border-radius: 6px;
    padding: 0 12px;
    color: var(--muted);
    background: transparent;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.15s ease;
}

/* Fixo (nao var(--blue)) - a variavel clareia no tema escuro pra continuar
   legivel como texto sobre --surface; contra texto branco fixo isso perde
   contraste (mesmo motivo de .btn-primary em base.css). */
.segmented button.active {
    background: #2d6ea8;
    color: #fff;
}

/* Variante <a> do segmented control: navegacao de pagina inteira entre
   paginas-irmas de um mesmo grupo (ex.: Qualidade <-> Inspecoes, Ocorrencias
   <-> Filas), com a mesma cara de abas client-side. Ver
   _partials/subtabs.html. */
.segmented a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border-radius: 6px;
    padding: 0 12px;
    color: var(--muted);
    background: transparent;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: 0.15s ease;
}

/* Fixo, mesmo motivo de .segmented button.active acima. */
.segmented a.active {
    background: #2d6ea8;
    color: #fff;
}

/* -----------------------------------------------------------------------------
   Toggle switch - estava duplicado por pagina que precisava dele
   -------------------------------------------------------------------------- */

.toggle-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--ink); font-weight: 600; }
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.toggle-slider {
    position: relative;
    flex: 0 0 42px;
    width: 42px;
    height: 22px;
    border-radius: 999px;
    background: var(--line-strong);
    transition: background 0.18s ease;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.18s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.toggle-switch input:checked + .toggle-slider { background: var(--green); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* -----------------------------------------------------------------------------
   Layout auxiliar
   -------------------------------------------------------------------------- */

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* -----------------------------------------------------------------------------
   Icone de ajuda inline (sigla ou regra de negocio) - achados 02/07 da
   auditoria de usabilidade "MES sob Lupa" (2026-08-16): explicacao so' em
   tooltip (title=) nao existe em tela de toque, o hardware mais comum no
   chao de fabrica. Reaproveita o MESMO par abre/fecha de .mes-dropdown que
   ja existe em chrome.css/mes.js (o listener em document so' depende do
   atributo [data-mes-dropdown-trigger] e da classe .mes-dropdown no
   ancestral - nao precisa de JS novo nenhum) - so' o botao-gatilho e o
   conteudo do menu tem estilo proprio, pensado pra um texto curto em vez de
   uma lista de itens.

   Uso:
     <span class="mes-dropdown mes-info" data-mes-dropdown>
         <button type="button" class="mes-info-trigger" data-mes-dropdown-trigger
                 aria-haspopup="true" aria-expanded="false" aria-label="O que e OEE?">ⓘ</button>
         <span class="mes-dropdown-menu mes-info-menu" role="tooltip">Texto aqui.</span>
     </span>
   -------------------------------------------------------------------------- */

.mes-info { display: inline-flex; vertical-align: middle; margin-left: 3px; }

.mes-info-trigger {
    /* min-width/min-height explicitos: sem eles, o `button { min-height: 40px }`
       generico de algumas paginas (ex: cadastro.html) vence height:17px (min-height
       nao perde de height) e o circulo de 17x17 vira uma capsula/oval de 17x40. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    min-width: 17px;
    height: 17px;
    min-height: 17px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    padding: 0;
}

.mes-info-trigger:hover,
.mes-info.open .mes-info-trigger {
    border-color: var(--blue);
    color: var(--blue);
    background: var(--blue-soft);
}

.mes-info-menu {
    min-width: 220px;
    max-width: 300px;
    padding: 10px 12px;
    font-size: 12.5px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ink);
    line-height: 1.45;
    white-space: normal;
}

/* -----------------------------------------------------------------------------
   TABLET / TELA ESTREITA - achado 2026-09-07 (auditoria pre-piloto)

   Os 3 arquivos de CSS compartilhados tinham 2 regras @media no total, as duas
   escopadas a um unico componente (.mes-dialog). Nenhuma tocava tabela, painel
   ou o grid .two-col na faixa de tablet - e o chao de fabrica do piloto usa
   tablet, nao o monitor largo de quem desenvolveu. Sem contencao, qualquer
   tabela com mais de 5-6 colunas fazia a PAGINA INTEIRA rolar de lado: o
   cabecalho de navegacao saia da tela ao arrastar a tabela, e rolagem por
   toque numa pagina inteira e' bem mais dificil de controlar do que dentro de
   uma caixa.

   `.panel-body` e' o wrapper de tabela do design system (19 paginas usam), por
   isso a contencao entra NELE em vez de exigir edicao pagina por pagina;
   `.table-scroll` fica pra quem precisa conter uma tabela fora de painel.
   -------------------------------------------------------------------------- */

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
    .panel-body {
        padding: 14px;
        /* A rolagem lateral fica AQUI, na caixa - nao no <body> */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Duas colunas em 1024px de largura deixam cada campo com ~470px menos o
       padding; em retrato (768px) fica ilegivel. Empilha. */
    .two-col {
        grid-template-columns: 1fr;
    }

    .panel-head {
        padding: 14px 14px 10px;
    }

    /* Alvo de toque: 32x32 e' o tamanho de .btn-icon (base.css), abaixo dos
       ~44px recomendados pra dedo - e as tabelas de manutencao/ferramentaria
       chegam a expor 3 desses lado a lado na mesma celula. */
    .btn-icon {
        width: 40px;
        height: 40px;
        min-height: 40px;
    }

    td .btn-icon + .btn-icon {
        margin-left: 6px;
    }
}