/*
 * Site público — página "Aumente o OEE" (public/solucoes_oee).
 * Só o que é exclusivo da página; o comum está em site.css.
 */

/* Cor de cada categoria de perda. Segue a categoria (nunca a posição) e é a
   mesma no gráfico, na tabela e nas ilustrações. Paleta categórica validada
   (lightness band, croma, separação para daltonismo, contraste): claro
   contra o card #fff, escuro contra o card #2f3349. No claro, as cores 3–5
   ficam abaixo de 3:1 → nunca usar só a cor; sempre há rótulo ao lado. */
.mc-site {
    --mc-perda-1: #0088cc;
    --mc-perda-2: #eb6834;
    --mc-perda-3: #1baf7a;
    --mc-perda-4: #eda100;
    --mc-perda-5: #e87ba4;
}

.mc-site [data-bs-theme="dark"] {
    --mc-perda-1: #0088cc;
    --mc-perda-2: #d95926;
    --mc-perda-3: #199e70;
    --mc-perda-4: #c98500;
    --mc-perda-5: #d55181;
}

/* ------------------------------------------------------------------
   Hero
------------------------------------------------------------------ */
.mc-migalhas {
    --bs-breadcrumb-divider-color: var(--bs-secondary-color);
    --bs-breadcrumb-item-active-color: var(--bs-heading-color);
    font-size: 0.8125rem;
}

.mc-migalhas a {
    color: var(--bs-body-color);
}

.mc-migalhas a:hover,
.mc-migalhas a:focus-visible {
    color: var(--bs-primary);
}

.mc-sobretitulo {
    display: inline-block;
    margin-bottom: 0.75rem;
    color: var(--bs-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mc-destaques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    list-style: none;
}

.mc-destaques li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Altura da arte do hero: acompanha a coluna de texto no xl e evita a imagem
   gigante quando as colunas empilham (abaixo do xl ela ocuparia a largura toda). */
.mc-hero__imagem {
    --mc-hero-imagem-altura: 30rem;
}

/* ------------------------------------------------------------------
   Mockup do painel de OEE
------------------------------------------------------------------ */
.mc-mock__titulo {
    color: var(--bs-heading-color);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.mc-mock__filtro {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    color: var(--bs-body-color);
    font-size: 0.625rem;
    white-space: nowrap;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.mc-oee__principal,
.mc-oee__evolucao,
.mc-oee__perdas {
    grid-column: span 12;
}

.mc-oee__principal {
    text-align: center;
}

.mc-oee__principal .mc-mock__rotulo {
    text-align: left;
}

.mc-oee__indicador {
    display: flex;
    flex-direction: column;
    grid-column: span 4;
}

@media (max-width: 575.98px) {
    .mc-oee__indicador .mc-mock__valor {
        font-size: 1.125rem;
    }
}

@media (min-width: 768px) {
    .mc-oee__principal,
    .mc-oee__indicador {
        grid-column: span 3;
    }

    .mc-oee__evolucao {
        grid-column: span 7;
    }

    .mc-oee__perdas {
        grid-column: span 5;
    }
}

/* Gráfico de linha (série única, eixo Y de 70% a 100%) */
.mc-linha {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.mc-linha__grade {
    stroke: var(--bs-border-color);
    stroke-width: 0.5;
}

.mc-linha__eixo {
    fill: var(--bs-secondary-color);
    font-size: 7px;
    font-variant-numeric: tabular-nums;
}

.mc-linha__meta {
    stroke: var(--bs-secondary-color);
    stroke-width: 0.75;
    stroke-dasharray: 3 3;
}

.mc-linha__meta-rotulo {
    fill: var(--bs-body-color);
    font-size: 7px;
}

.mc-linha__serie {
    fill: none;
    stroke: var(--bs-primary);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mc-linha__ponto {
    fill: var(--bs-primary);
    stroke: var(--bs-paper-bg);
    stroke-width: 2;
}

.mc-linha__valor {
    fill: var(--bs-white);
    font-size: 8px;
    font-weight: 600;
}

/* Rosca (fatias com respiro de 1 unidade entre si) */
.mc-rosca {
    flex-shrink: 0;
    width: 5.25rem;
    height: 5.25rem;
    transform: rotate(-90deg);
}

.mc-rosca circle {
    fill: none;
    stroke-width: 6;
}

.mc-rosca--pequena {
    width: 4.5rem;
    height: 4.5rem;
}

.mc-legenda {
    display: grid;
    flex: 1;
    gap: 0.3125rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: 0.625rem;
    list-style: none;
}

.mc-legenda li {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--bs-body-color);
}

.mc-legenda__marca {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0.125rem;
}

.mc-legenda__nome {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mc-legenda__valor {
    margin-left: auto;
    color: var(--bs-heading-color);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
   Como ajudamos (passos)
------------------------------------------------------------------ */
.mc-passos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 576px) {
    .mc-passos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .mc-passos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.mc-passos__seta {
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
}

@media (min-width: 1200px) {
    .mc-passos {
        grid-template-columns: repeat(4, minmax(0, 1fr) 1.25rem) minmax(0, 1fr);
        gap: 0.625rem;
    }

    .mc-passos__seta {
        display: flex;
    }
}

.mc-passo__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: 0.875rem;
    color: var(--bs-white);
    font-size: 0.875rem;
    font-weight: 700;
    background-color: var(--bs-primary);
    border-radius: 50%;
}

/* ------------------------------------------------------------------
   Ilustrações dos cards (x-public.ilustracao)
------------------------------------------------------------------ */
.mc-ilustracao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    height: 7.5rem;
    margin-top: auto;
}

.mc-ilustracao .mc-placeholder {
    height: 100%;
    aspect-ratio: auto;
}

.mc-ilustracao--formula {
    flex-direction: column;
    gap: 0.625rem;
}

.mc-ilustracao__painel {
    display: grid;
    flex: 1;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.75rem;
    background-color: var(--bs-paper-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow-xs);
}

.mc-ilustracao__linha {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.mc-ilustracao__ponto {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0.125rem;
}

.mc-ilustracao__texto {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--bs-heading-color);
    font-size: 0.75rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mc-ilustracao__tempo {
    color: var(--bs-body-color);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.mc-ilustracao__icone {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    background-color: var(--bs-paper-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow-xs);
}

.mc-esqueleto {
    display: block;
    height: 0.375rem;
    background-color: var(--bs-gray-200);
    border-radius: 1rem;
}

/* Fórmula D × P × Q */
.mc-formula {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.mc-formula__termo {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.25rem;
    padding: 0.375rem 0.25rem;
    color: var(--bs-heading-color);
    font-size: 0.6875rem;
    font-weight: 500;
    background-color: var(--bs-paper-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.mc-formula__letra {
    color: var(--bs-primary);
    font-size: 0.875rem;
    font-weight: 700;
}

.mc-formula__op {
    color: var(--bs-secondary-color);
}

.mc-formula__resultado {
    padding: 0.3125rem 0.875rem;
    color: var(--bs-heading-color);
    font-size: 0.875rem;
    font-weight: 600;
    background-color: rgba(var(--bs-success-rgb), 0.08);
    border: 1px solid var(--bs-success);
    border-radius: var(--bs-border-radius);
}

/* Barras decorativas (uma cor; pontas de 4px arredondadas na base) */
.mc-barras {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    height: 5.5rem;
    padding-inline: 0.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.mc-barras span {
    width: 0.75rem;
    background-color: rgba(var(--bs-primary-rgb), 0.45);
    border-radius: 4px 4px 0 0;
}

.mc-barras span.is-destaque {
    background-color: var(--bs-primary);
}

.mc-barras--larga {
    justify-content: space-between;
    width: 100%;
}

.mc-barras--larga span {
    width: 0.625rem;
}

.mc-barras--pares span:nth-child(odd) {
    background-color: var(--bs-primary);
}

.mc-barras--pares span:nth-child(even) {
    margin-right: 0.625rem;
    background-color: rgba(var(--bs-primary-rgb), 0.35);
}

/* Alerta */
.mc-alerta {
    display: flex;
    gap: 0.625rem;
    width: 100%;
    padding: 0.75rem;
    font-size: 0.75rem;
    line-height: 1.4;
    background-color: rgba(var(--bs-warning-rgb), 0.1);
    border: 1px solid rgba(var(--bs-warning-rgb), 0.4);
    border-radius: var(--bs-border-radius-lg);
}

.mc-alerta .ti {
    color: var(--bs-warning);
}

/* Meta x atual */
.mc-meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--bs-paper-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow-xs);
}

.mc-meta__rotulo {
    display: block;
    color: var(--bs-body-color);
    font-size: 0.6875rem;
}

.mc-meta__valor {
    display: block;
    color: var(--bs-heading-color);
    font-size: 1.125rem;
    font-weight: 600;
}

.mc-meia-lua {
    width: 5.5rem;
    height: auto;
}

.mc-meia-lua path {
    fill: none;
    stroke-width: 9;
    stroke-linecap: round;
}

.mc-meia-lua__trilho {
    stroke: var(--bs-gray-200);
}

.mc-meia-lua__valor {
    stroke: var(--bs-primary);
}

/* Integrações */
.mc-integracoes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
}

.mc-integracoes .mc-logo-marca {
    width: 100%;
    min-height: 3rem;
    padding-inline: 0.25rem;
    background-color: var(--bs-paper-bg);
}

/* ------------------------------------------------------------------
   Perdas (tabela + OEE potencial)
------------------------------------------------------------------ */
.mc-tabela-perdas {
    font-size: 0.875rem;
}

.mc-tabela-perdas > :not(caption) > * > * {
    padding-block: 0.75rem;
    vertical-align: middle;
}

/* O Vuexy põe todo `th` em caixa alta; aqui há th no corpo e no rodapé. */
.mc-tabela-perdas th {
    letter-spacing: 0;
    text-transform: none;
}

.mc-tabela-perdas thead th {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.mc-tabela-perdas tbody th {
    min-width: 13rem;
    font-size: 0.875rem;
    font-weight: 400;
}

.mc-tabela-perdas tfoot th {
    font-size: 0.875rem;
}

.mc-tabela-perdas td {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mc-tabela-perdas tfoot th {
    color: var(--bs-heading-color);
    font-weight: 600;
    border-bottom-width: 0;
}

.mc-tabela-perdas caption {
    caption-side: bottom;
    padding-block: 0.75rem;
    color: var(--bs-body-color);
    font-size: 0.75rem;
}

.mc-perda-marca {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    color: var(--mc-serie);
    background-color: color-mix(in srgb, var(--mc-serie) 14%, var(--bs-paper-bg));
    border-radius: var(--bs-border-radius);
}

.mc-perda-barra {
    display: block;
    width: 6rem;
    height: 0.375rem;
    overflow: hidden;
    background-color: var(--bs-gray-100);
    border-radius: 1rem;
}

.mc-perda-barra span {
    display: block;
    height: 100%;
    background-color: var(--mc-serie);
    border-radius: 1rem;
}

.mc-potencial {
    background-color: var(--mc-fundo-profundo);
    background-image: radial-gradient(22rem 16rem at 100% 0%, rgba(var(--bs-primary-rgb), 0.25), transparent 70%);
    border: 1px solid var(--bs-border-color);
}

.mc-potencial__valor {
    margin-bottom: 0.5rem;
    color: var(--bs-success);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.mc-potencial__ganho {
    color: var(--bs-white);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
}

.mc-potencial__ganho small {
    color: var(--bs-body-color);
    font-size: 0.8125rem;
    font-weight: 400;
}

/* ------------------------------------------------------------------
   Resultados + CTA
------------------------------------------------------------------ */
.mc-resultado__valor {
    margin-bottom: 0.25rem;
    color: var(--bs-primary);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.mc-cta--vertical {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
}

.mc-cta--vertical .btn {
    margin-top: auto;
}