/* CorteNest CPQ — shell estilo CorteOnline (paridade operacional, não clone pixel) */
:root {
    --co-identity: #2f4ec4;
    --co-menubar: #1b2d6b;
    --co-menubar-dark: #14204d;
    --co-logo-corte: #2f6b4f;
    --co-font-body: Arial, Helvetica, sans-serif;
    --co-fs-base: 14px;
    --co-fs-h1: 26px;
    --co-fs-h2: 22px;
    --co-fs-h3: 18px;
    --co-fs-h4: 16px;
    --co-fs-h5: 14px;
    --co-fs-h6: 13px;
    --co-fs-small: 12px;
    --co-fs-button: 13px;
    /* Redesign v2.2 (fase 1, casca sidebar) — paleta neutra dos cards/dashboard */
    --co-bg: #f1f5f9;
    --co-card-border: #e5e7eb;
    --co-text-muted: #6b7280;
    --co-text-body: #1e293b;
    /* Aparência — tokens editáveis em Preferências, ver PricingSetting::THEME_DEFAULTS */
    --co-sidebar-link: rgba(255,255,255,.9);
    --co-topbar-bg: #ffffff;
    --co-content-bg: var(--co-bg);
}

/* Painel Aparência (Preferências) — seletor de cor/fonte com prévia ao vivo */
.co-theme-picker input[type="color"] { width: 64px; height: 38px; padding: 2px; cursor: pointer; }
.co-theme-preview {
    margin-top: 16px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #fff;
}
.co-theme-preview-menu {
    background: var(--p-menubar); color: #1f3d2c; padding: 10px 14px; font-size: 13px; font-weight: 600;
}
.co-theme-preview-body { padding: 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.co-theme-preview-body button {
    background: var(--p-identity); color: #fff; border: 0; border-radius: 4px; padding: 8px 16px;
    font-weight: 600; font-size: 13px; cursor: default;
}
.co-theme-preview-text { font-size: 14px; color: #333; }
.co-typo-sizes { margin-top: 4px; }
.co-typo-size-row { display: flex; align-items: center; gap: 6px; }
.co-typo-size-row input[type="number"] { width: 72px; }
.co-theme-preview-typo {
    padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
    background: #fff; color: #1e293b;
}
.co-preview-h1 { font-size: var(--co-fs-h1); font-weight: 700; line-height: 1.2; }
.co-preview-h2 { font-size: var(--co-fs-h2); font-weight: 700; line-height: 1.25; }
.co-preview-h3 { font-size: var(--co-fs-h3); font-weight: 650; line-height: 1.3; }
.co-preview-h4 { font-size: var(--co-fs-h4); font-weight: 650; line-height: 1.3; }
.co-preview-h5 { font-size: var(--co-fs-h5); font-weight: 600; line-height: 1.35; }
.co-preview-h6 { font-size: var(--co-fs-h6); font-weight: 600; line-height: 1.35; color: #475569; }
.co-preview-p { margin: 6px 0 0; font-size: var(--co-fs-base); line-height: 1.45; color: #333; }
.co-preview-small { margin: 0; font-size: var(--co-fs-small); color: #64748b; }
.co-preview-btn {
    align-self: flex-start; margin-top: 8px;
    background: var(--p-identity); color: #fff; border: 0; border-radius: 4px; padding: 8px 16px;
    font-weight: 600; font-size: var(--co-fs-button); cursor: default;
}
.co-font-picker { position: relative; }
.co-font-picker-search { width: 100%; margin-bottom: 6px; }
.co-font-picker-list {
    max-height: 220px; overflow: auto; border: 1px solid #ddd; border-radius: 6px; background: #fff;
}
.co-font-picker-group {
    padding: 6px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: #64748b; background: #f8fafc; border-bottom: 1px solid #eee;
    position: sticky; top: 0;
}
.co-font-picker-item {
    display: block; width: 100%; text-align: left; border: 0; background: transparent;
    padding: 8px 12px; cursor: pointer; font-size: 14px; color: #1e293b;
}
.co-font-picker-item:hover { background: #f1f5f9; }
.co-font-picker-item.is-active { background: color-mix(in srgb, var(--co-identity, #2f4ec4) 12%, #fff); font-weight: 600; }
.co-font-picker-item .co-font-picker-meta { display: block; font-size: 11px; color: #94a3b8; font-weight: 400; margin-top: 2px; }

* { box-sizing: border-box; }

body.co-app {
    margin: 0;
    background: #f5f5f5;
    min-height: 100vh;
    font-family: var(--co-font-body);
    font-size: var(--co-fs-base);
    color: #222;
    /* Windows: auto = hinting nítido (antialiased deixa texto/ícones moles). */
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-rendering: auto;
    /* Rede de segurança: nenhum elemento interno deveria empurrar a página inteira pra
       largura maior que a tela — se algo (tabela larga etc.) escapar dos containers com
       scroll próprio abaixo, fica só invisível/rolável ali dentro em vez de abrir uma barra
       de rolagem horizontal na página toda. */
    overflow-x: hidden;
}

.co-app h1 { font-size: var(--co-fs-h1); font-weight: 700; line-height: 1.25; margin: 0 0 .4em; }
.co-app h2 { font-size: var(--co-fs-h2); font-weight: 700; line-height: 1.3; margin: 0 0 .4em; }
.co-app h3 { font-size: var(--co-fs-h3); font-weight: 650; line-height: 1.3; margin: 0 0 .35em; }
.co-app h4 { font-size: var(--co-fs-h4); font-weight: 650; line-height: 1.35; margin: 0 0 .3em; }
.co-app h5 { font-size: var(--co-fs-h5); font-weight: 600; line-height: 1.35; margin: 0 0 .25em; }
.co-app h6 { font-size: var(--co-fs-h6); font-weight: 600; line-height: 1.4; margin: 0 0 .25em; }
.co-app p { font-size: var(--co-fs-base); }
.co-app .muted, .co-app .co-text-muted { font-size: var(--co-fs-small); }
.co-app button:not([class*="fa-"]):not(.co-hamburger):not(.co-sidebar-toggle),
.co-app .btn,
.co-app input[type="submit"] {
    font-size: var(--co-fs-button);
}

/* Font Awesome = webfont: tamanho em px inteiro + sem scale no pai evita ícone borrado. */
.fa, .fas, .far, .fal, .fat, .fab, .fa-solid, .fa-regular, .fa-brands,
i[class^="fa-"], i[class*=" fa-"] {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    speak: never;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

.co-topbar { background: #fff; border-bottom: 1px solid #e0e0e0; }
.co-topbar-inner {
    width: 100%; padding: 0 20px; min-height: 52px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; row-gap: 6px;
}
.co-logo {
    display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
    font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 700;
}
.co-logo-corte { color: var(--co-logo-corte); }
.co-logo-online { color: #111; }
.co-logo-icon { color: var(--co-identity); font-size: 18px; }

.co-topnav { display: flex; align-items: center; gap: 20px; font-size: 14px; }
.co-topnav a { color: #444; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.co-topnav a:hover, .co-topnav a.active { color: var(--co-identity); }
.co-topnav a .fa-home { color: var(--co-identity); }

.co-user { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.co-logout { border: none; background: transparent; color: #888; cursor: pointer; }

/* Hamburger: só existe visualmente abaixo do breakpoint mobile (ver media query). */
.co-hamburger {
    display: none; border: 0; background: transparent; color: #333; font-size: 18px;
    padding: 6px; cursor: pointer; order: -1;
}

.co-menubar {
    background: var(--co-menubar); color: #1f3d2c;
    min-height: 46px; border-bottom: 1px solid var(--co-menubar-dark);
}
.co-menubar-inner {
    padding: 0 12px; display: flex; align-items: stretch; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; min-height: 46px;
}
.co-tabs-main { display: flex; align-items: stretch; flex-wrap: wrap; }
.co-tab {
    display: inline-flex; align-items: center; gap: 6px; padding: 0 14px;
    text-decoration: none; color: #1f3d2c; font-size: 13px; font-weight: 600;
    border: 0; background: transparent; cursor: pointer;
}
.co-tab:hover { background: #ffffff55; }
.co-tab.active { background: #fff; color: #111; box-shadow: inset 0 -2px 0 var(--co-identity); }
.co-tab.disabled { opacity: .45; pointer-events: none; }

.co-subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 4px 0 18px; }
.co-subtab {
    display: inline-flex; align-items: center; padding: 8px 16px;
    text-decoration: none; color: #4a5a4e; font-size: 13px; font-weight: 600;
    border: 0; border-bottom: 2px solid transparent; background: transparent;
}
.co-subtab:hover { color: #1f3d2c; }
.co-subtab.active { color: var(--co-identity); border-bottom-color: var(--co-identity); }

.co-menubar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; }
.co-chip {
    background: #ffffffaa; border: 1px solid #ffffff88; border-radius: 3px;
    padding: 2px 8px; font-size: 12px; font-weight: 600;
}
.co-service-row { display: flex; align-items: center; gap: 10px; }
.co-stepper { display: inline-flex; align-items: center; gap: 0; font-size: 12px; padding-bottom: 15px; position: relative; }
.co-step-label { margin-right: 6px; font-weight: 600; }
.co-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.co-dot {
    width: 16px; height: 16px; flex-shrink: 0; border-radius: 4px; background: #dfe8e2; border: 1px solid #7a9a86;
    display: flex; align-items: center; justify-content: center;
}
.co-dot i { font-size: 9px; color: #fff; line-height: 1; }
.co-dot.done { background: var(--co-identity); border-color: var(--co-identity); }
.co-dot.current { background: var(--co-identity); border-color: var(--co-identity); box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-identity) 35%, transparent); }
.co-step-caption {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    margin-top: 3px; font-size: 11px; font-weight: 600; color: var(--co-identity); white-space: nowrap; line-height: 1;
}
.co-dot-line { width: 14px; height: 2px; flex-shrink: 0; background: #dfe8e2; }
.co-dot-line.done { background: var(--co-identity); }

/* Aviso de status mudou (polling ao vivo, co-stepper.blade.php) — ícone pulsando sem parar
   (até a pessoa atualizar a página), cor de alerta tanto no ícone do aviso quanto na
   bolinha atual recém-atualizada. */
@keyframes co-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.6; }
}
.co-stepper-changed i { color: #d9534f; margin-right: 3px; display: inline-block; animation: co-pulse 1s ease-in-out infinite; }
.co-dot.co-just-changed i { color: #ffd400; display: inline-block; animation: co-pulse 1s ease-in-out infinite; }

.co-main { max-width: 1200px; margin: 0 auto; padding: 16px 20px 40px; }
.co-main.co-main-wide { max-width: none; }
@media (max-width: 900px) {
    /* Tabelas largas (Lista de componentes, listagens do catálogo) não têm como caber numa
       tela pequena sem virar cartão por cartão (fora de escopo aqui) — em vez de estourar a
       página inteira pro lado, rola só dentro do conteúdo, mantendo o menu/toolbar fixos. */
    .co-main { padding: 10px 10px 28px; overflow-x: auto; }
}
.co-flash { padding: 10px 14px; border-radius: 4px; margin-bottom: 12px; font-size: 14px; }
.co-flash.ok { background: #e8f5e9; border: 1px solid #a5d6a7; color: #1b5e20; }
.co-flash.err { background: #ffebee; border: 1px solid #ef9a9a; color: #b71c1c; }

.co-novo {
    display: inline-flex; align-items: center; gap: 6px; background: #fff;
    border: 1px solid #ccc; border-radius: 4px; padding: 6px 12px;
    text-decoration: none; color: #222; font-weight: 600; font-size: 13px; margin: 0;
    cursor: pointer; font-family: inherit;
}
.co-novo:hover { background: #f3f3f3; }
.co-novo:disabled, .co-btn:disabled { opacity: .5; cursor: not-allowed; }
.co-novo:disabled:hover { background: #fff; }
.co-novo.co-fechar {
    border-color: var(--co-identity); color: var(--co-identity);
}
.co-novo.co-fechar:hover { background: #f3faf6; }

/* Bot�o Motor + menu de sele��o. */
.co-motor-wrap {
    position: relative;
    display: inline-flex;
    margin: 0;
}
.co-motor-btn { gap: 6px; }
.co-motor-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 200;
    min-width: 220px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    padding: 6px 0 4px;
}
.co-motor-menu-title {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 4px 12px 6px;
}
.co-motor-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 8px 12px;
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    color: #222;
    cursor: pointer;
    text-align: left;
}
.co-motor-option:hover { background: #f3f3f3; }
.co-motor-option.is-active {
    background: #eef6f1;
    color: var(--co-identity, #2e7d4f);
}
.co-motor-option.is-warn .co-motor-option-label { color: #a15c00; }
.co-motor-option .fa-check { color: var(--co-identity, #2e7d4f); font-size: 12px; }
.co-motor-menu-footer {
    margin-top: 4px;
    padding: 6px 8px 2px;
    border-top: 1px solid #eee;
}
.co-motor-machine-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fafafa;
    padding: 8px 10px;
    font: inherit;
    font-weight: 600;
    font-size: 12px;
    color: #222;
    cursor: pointer;
    text-align: left;
}
.co-motor-machine-btn:hover:not(:disabled) {
    background: #eef6f1;
    border-color: var(--co-identity, #2e7d4f);
    color: var(--co-identity, #2e7d4f);
}
.co-motor-machine-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.co-motor-menu-hint {
    margin: 6px 0 0;
    padding: 8px 12px;
    border-top: 1px solid #eee;
    font-size: 11px;
    color: #777;
    line-height: 1.35;
}
.co-motor-menu-hint code { font-size: 10px; }

.co-contentdash { background: #fff; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; }
.co-header-dash {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; border-bottom: 1px solid #eee; background: #fafafa;
}
.co-title { font-weight: 700; font-size: var(--co-fs-h4); }

.co-filter-toggle {
    display: none; width: calc(100% - 28px); margin: 10px 14px 0; align-items: center; justify-content: center;
    gap: 8px; background: #555; color: #fff; border: 0; border-radius: 4px;
    padding: 10px; font-weight: 600; font-size: 13px; cursor: pointer;
}
.co-filter-bar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: end;
    padding: 10px 14px; border-bottom: 1px solid #eee; background: #fcfcfc;
}
.co-filter-bar label { display: block; font-size: 11px; color: #666; margin-bottom: 2px; }
.co-filter-bar input, .co-filter-bar select {
    border: 1px solid #ccc; border-radius: 3px; padding: 4px 8px; font-size: 13px; background: #fff;
}
.co-btn-white {
    border: 1px solid #ccc; background: #fff; border-radius: 3px; padding: 5px 12px;
    font-weight: 600; cursor: pointer; font-size: 13px;
}

.co-table { width: 100%; border-collapse: collapse; background: #fff; }
.co-table thead { display: none; }
.co-table tbody tr.odd { background: #fff; }
.co-table tbody tr.even { background: #fafafa; }
.co-table tbody tr:hover { background: #eef6f1; }
.co-table tbody tr { border-bottom: 1px solid #ddd; }
.co-table td.icons { vertical-align: top; padding: 10px 10px; min-width: 220px; }
.co-table td.infos { vertical-align: top; padding: 8px 12px 8px 4px; }
.co-table tfoot th { text-align: left; padding: 8px 12px; font-weight: 500; color: #666; font-size: 12px; border-top: 1px solid #eee; }

.co-icons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; gap: 4px; align-items: center; flex-wrap: wrap; }
.co-icons a, .co-icons button {
    color: #444; font-size: 14px; width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: none; background: transparent; cursor: pointer; text-decoration: none;
}
.co-icons a:hover, .co-icons button:hover { color: var(--co-identity); }

.co-infos-row { display: flex; flex-wrap: wrap; margin-bottom: 1px; font-size: 13px; line-height: 1.45; }
.co-infos-row .col70 { flex: 1 1 62%; min-width: 220px; display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.co-infos-row .col30 { flex: 1 1 30%; min-width: 140px; display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.co-infos-row label { color: #666; font-weight: 600; white-space: nowrap; }
.co-infos-row p { margin: 0; }
.co-pieces-badge {
    display: inline-block; background: #e8f0ec; color: #1f3d2c;
    border-radius: 3px; padding: 0 6px; font-size: 11px; font-weight: 700; margin-right: 4px;
}

.co-panel { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 14px; margin-bottom: 14px; }
.co-panel h2 { margin: 0 0 10px; font-size: 14px; color: #444; }
.co-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.co-grid .full { grid-column: 1 / -1; }
.co-grid label { display: block; font-size: 11px; color: #666; margin-bottom: 2px; }
.co-grid input, .co-grid select, .co-grid textarea {
    width: 100%; border: 1px solid #ccc; border-radius: 3px; padding: 6px 8px; font: inherit; background: #fff;
}
.co-check { display: flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 13px; }
.co-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.co-btn {
    display: inline-flex; align-items: center; gap: 6px; background: var(--co-identity); color: #fff;
    border: 0; border-radius: 4px; padding: 7px 14px; font-weight: 600; cursor: pointer; text-decoration: none; font-size: 13px;
}
.co-btn.secondary { background: #fff; color: #222; border: 1px solid #ccc; }
.co-btn.danger { background: #c45c5c; }
/* Botões de Adicionar/Remover em "Fitas de borda" e "Material selecionado" (Dados do
   Componente) — mais discretos que o .co-btn padrão, não competem visualmente com
   Confirmar/Sair/Remover no rodapé do modal. */
.co-btn-sm { padding: 4px 10px; font-size: 11px; }
/* Botão só com ícone (ex.: remover material de "Material selecionado") — não compete
   visualmente com o card principal ao lado. */
.co-btn-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #c45c5c; cursor: pointer;
}
.co-btn-icon:hover { background: #fdf3f3; border-color: #c45c5c; }

/* Piece grid */
/* border-collapse:separate (não collapse) de propósito — com collapse, a borda entre
   thead e tbody "gruda" na linha errada quando o thead é position:sticky (bug conhecido
   de renderização), fazendo a borda/sombra do cabeçalho parecer que rola junto com o
   conteúdo em vez de ficar fixa. border-spacing:0 mantém a aparência igual (sem vão
   entre células). */
.co-piece-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.co-piece-table th { text-align: left; font-size: 11px; color: #666; border-bottom: 1px solid #ddd; padding: 6px 4px; }
.co-piece-table td { padding: 8px 4px; border-top: 1px solid transparent; border-bottom: 1px solid #eee; vertical-align: middle; }
.co-piece-table td:first-child { border-left: 1px solid #eee; }
.co-piece-table td:last-child { border-right: 1px solid #eee; }
/* Foco na linha (Ctrl+D/Ctrl+Enter agem na linha focada — ver handleGridKeydown): destaca
   com fundo leve + borda na cor de identidade. tabindex=-1 na <tr> (ver piece-grid.blade.php)
   deixa a linha focável ao clicar em QUALQUER parte dela, não só nos campos — :focus-within
   cobre os dois casos (campo focado dentro, ou a própria <tr> focada). Sem outline nativo
   porque o destaque de fundo/borda já cumpre esse papel. */
.co-piece-table tbody tr:focus { outline: none; }
.co-piece-table tbody tr:focus-within { background: #eef3ff; }
.co-piece-table tbody tr:focus-within td { border-color: var(--co-identity); }
.co-piece-table tbody tr:focus-within td:first-child { border-left-width: 2px; }
.co-piece-table tbody tr:focus-within td:last-child { border-right-width: 2px; }
/* Hover é só visual (puro CSS, sem JS) — ao contrário do foco, NUNCA move o foco de verdade.
   Passar o mouse por cima de outras linhas enquanto edita um campo em outra nunca interrompe
   a edição (era exatamente o problema da tentativa anterior com .focus() via mouseenter).
   :not(:focus-within) evita competir visualmente com o destaque de foco (mais forte) quando
   as duas coisas coincidem na mesma linha. */
.co-piece-table tbody tr:hover:not(:focus-within) { background: #f7f8fa; }
.co-mat-swatch {
    width: 36px; height: 36px; object-fit: cover; border: 1px solid #ccc; border-radius: 3px; background: #eee;
    display: inline-block; vertical-align: middle; flex-shrink: 0;
}
/* Autocomplete inline de MDF (estilo CorteCloud) — dropdown compacto ancorado na própria
   célula, em vez do modal cheio. td[data-label="MDF"] já ganhou position:relative inline
   pra servir de âncora. */
/* position:fixed + top/left inline (via :style, calculados em openMaterialAutocomplete() a
   partir do botão clicado) — é UM elemento só, reposicionado por JS, não um por linha. */
/* z-index acima de .co-modal-backdrop (40) e .co-modal-nested (50) — o popover de MDF/Fita
   também abre de dentro do modal "Dados do Componente" (Material selecionado), senão ficava
   atrás do modal e os cliques nos itens da lista não chegavam a ele. */
.co-mat-auto {
    position: fixed; z-index: 60; width: 260px;
    background: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 6px 20px #0003;
}
.co-mat-auto-head {
    display: flex; align-items: center; gap: 4px; border-bottom: 1px solid #eee;
    border-radius: 4px 4px 0 0;
}
.co-mat-auto-input {
    flex: 1; min-width: 0; box-sizing: border-box; padding: 7px 8px; border: 0; font-size: 12px;
}
.co-mat-auto-input:focus { outline: none; }
.co-mat-auto-close {
    flex: 0 0 auto; border: 0; background: none; color: #999; font-size: 18px; line-height: 1;
    padding: 4px 10px; cursor: pointer;
}
.co-mat-auto-close:hover { color: #333; }
.co-mat-auto-list { max-height: 260px; overflow-y: auto; }
/* Tela de conferência da importação (CorteCloud PDF) — mesma ideia da tela "Materiais na
   importação" do próprio CorteCloud: uma linha por chapa/fita distinta encontrada no PDF,
   com o status do casamento automático e um botão pra trocar. */
.co-import-review-table td { vertical-align: middle; }
.co-import-review-status {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 4px;
    border: 1px solid #ccc; background: #fff; cursor: pointer; font-size: 11px; font-weight: 600; text-align: left;
}
.co-import-review-status.ok { border-color: #2f6b4f; color: #2f6b4f; }
.co-import-review-status.miss { border-color: #c45c5c; color: #c45c5c; }
.co-import-review-status:hover { background: #f7f7f7; }
.co-mat-auto-item {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 8px;
    border: 0; border-bottom: 1px solid #f2f2f2; background: #fff; cursor: pointer; font-size: 12px;
}
.co-mat-auto-item:last-child { border-bottom: 0; }
.co-mat-auto-item:hover { background: #f5f7ff; }
.co-mat-auto-item .co-mat-swatch { width: 28px; height: 28px; }
.co-mat-auto-item-text { min-width: 0; }
.co-mat-auto-item-text strong { display: block; font-size: 12px; }
.co-mat-auto-item-desc { display: block; font-size: 10px; color: #666; overflow-wrap: break-word; }
/* Cor do TIPO da peça (mesma medida em toda a Lista de componentes/Plano de corte/Relatório).
   É um <button> (clique leva pra chapa correspondente em Planos de corte), com reset de estilo
   de botão pra continuar parecendo só um quadradinho de cor. */
.co-piece-color-dot {
    display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid #0002;
    padding: 0; cursor: default;
}
.co-piece-color-dot-clickable { cursor: pointer; }
.co-piece-color-dot-clickable:hover { outline: 2px solid #0004; outline-offset: 1px; }
.co-mat-btn {
    display: inline-flex; align-items: center; gap: 8px; border: 1px solid #ccc; background: #fff;
    border-radius: 4px; padding: 4px 8px; cursor: pointer; font-size: 12px; text-align: left;
    box-shadow: 0 1px 2px #0000000d; transition: border-color .1s, background .1s;
    /* Largura fixa (não só max-width) — MDF e Fita (cor/descrição) usam a mesma classe, mas
       sem isso cada caixa encolhia pro tamanho do próprio texto e ficavam desiguais entre si. */
    width: 190px; box-sizing: border-box;
}
.co-mat-btn > span, .co-mat-btn .co-fita-desc-text { min-width: 0; overflow: hidden; }
/* Affordance sutil de "isto é clicável" pro MDF e pra Fita (cor/descrição) — sem preencher
   com cor, só sombra leve + hover/active discretos. */
.co-mat-btn:hover { border-color: #999; background: #f7f7f7; }
.co-mat-btn:active { background: #eee; }
.co-edge-cell { display: flex; gap: 2px; flex-wrap: wrap; }
.co-edge-chip {
    font-size: 10px; padding: 2px 4px; border: 1px solid #ccc; border-radius: 2px; background: #f7f7f7; cursor: pointer;
}
.co-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.co-th-sort:hover { color: #333; }
.co-th-sort i.fa-sort { opacity: .35; }
.co-fita-desc-list { display: flex; flex-direction: column; gap: 5px; }
/* Altura travada + scroll — só quando a peça TEM DE VERDADE 2+ fitas distintas (classe
   aplicada condicionalmente via :class no blade, ver pieceBands(piece).length > 1). Com só 1
   fita, a célula cresce livre (descrição longa pode quebrar em 2-3 linhas sem cortar nada) —
   um max-height fixo sempre ligado cortava a borda de baixo de descrições longas mesmo com
   uma fita só. Com 2+, trava em 48px e rola dentro da célula em vez de esticar a linha
   inteira (o que quebrava o ritmo visual da tabela). */
.co-fita-desc-list-scroll { max-height: 48px; overflow-y: auto; }
/* Scrollbar fina, sem as setinhas nativas do navegador (grossas demais pra uma célula de 48px). */
.co-fita-desc-list-scroll::-webkit-scrollbar { width: 5px; }
.co-fita-desc-list-scroll::-webkit-scrollbar-button { display: none; }
.co-fita-desc-list-scroll::-webkit-scrollbar-track { background: transparent; }
.co-fita-desc-list-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
/* Reaproveita o card do MDF (.co-mat-btn) igualzinho — deixa o texto quebrar linha em vez de
   alargar o card (min-width:0 é o que destrava quebra de linha dentro de flex item). */
.co-fita-desc-text { min-width: 0; font-size: 9px; line-height: 1.3; overflow-wrap: break-word; }
.co-fita-desc-text strong { font-size: 12px; }
.co-fita-desc-muted { color: #222; }
/* Peça sem nenhuma fita aplicada: mantém a caixa (contorno) igual às outras, só troca o
   conteúdo por um texto — não fica só um traço solto sem moldura. */
.co-fita-desc-empty { color: #999; font-size: 11px; }
/* Medidas do corte sobrepostas na caixa "Prévia" — X (comprimento) horizontal no centro
   inferior (paridade CO), Y (largura) centralizado verticalmente junto à borda esquerda.
   Cor/sombra do texto vêm via :style (dimTextStyle) — claro/escuro conforme o fundo (cor
   cadastrada ou luminância amostrada da foto da textura). */
.co-fita-dim-x, .co-fita-dim-y {
    position: absolute; z-index: 3; font-size: 10px; font-weight: 700; pointer-events: none; line-height: 1;
}
.co-fita-dim-x { bottom: 10px; left: 50%; transform: translateX(-50%); }
.co-fita-dim-y { top: 50%; left: 9px; transform: translateY(-50%); writing-mode: vertical-rl; }
/* Quant./Comp./Larg. da Lista de componentes — o input:not([type=checkbox]) global deixa
   a caixa alta/larga demais nessas 3 colunas estreitas; encolhe só ali. */
.co-piece-table input[type=number] { padding: 4px 6px; font-size: 12px; }
/* Quant./Comp./Larg. cabem em 4 dígitos (até 9999) — a tabela usa table-layout auto, então o
   width do <th> sozinho não limita a coluna se o input não tiver largura própria. */
.co-piece-table td[data-label="Quant."] input,
.co-piece-table td[data-label="Comp."] input,
.co-piece-table td[data-label="Larg."] input { width: 60px; box-sizing: border-box; }
/* Setinhas nativas do type=number tomavam espaço demais na caixa de 60px e cortavam o 4º
   dígito (ex. "1000" virava "100"+seta) — sem elas sobra espaço pros 4 dígitos. */
.co-piece-table td[data-label="Quant."] input::-webkit-outer-spin-button,
.co-piece-table td[data-label="Quant."] input::-webkit-inner-spin-button,
.co-piece-table td[data-label="Comp."] input::-webkit-outer-spin-button,
.co-piece-table td[data-label="Comp."] input::-webkit-inner-spin-button,
.co-piece-table td[data-label="Larg."] input::-webkit-outer-spin-button,
.co-piece-table td[data-label="Larg."] input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.co-piece-table td[data-label="Quant."] input,
.co-piece-table td[data-label="Comp."] input,
.co-piece-table td[data-label="Larg."] input { -moz-appearance: textfield; }
.co-edge-chip.on { background: #e8f0ec; border-color: var(--co-identity); color: var(--co-identity); font-weight: 700; }

/* Modal */
.co-modal-backdrop {
    position: fixed; inset: 0; background: #0006; z-index: 40;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* Modais abertos a partir de outro modal (picker de material/fita dentro de Dados do Componente)
   precisam ficar acima do modal que os chamou — mesma z-index empataria pela ordem no DOM. */
.co-modal-backdrop.co-modal-nested { z-index: 50; }
.co-modal {
    background: #fff; border-radius: 6px; max-width: 720px; width: 100%; max-height: 80vh;
    overflow: auto; box-shadow: 0 12px 40px #0004;
}
.co-modal-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px; border-bottom: 1px solid #eee; font-weight: 700;
}
.co-modal-x {
    border: 0; background: transparent; cursor: pointer; color: #666;
    font-size: 22px; line-height: 1; padding: 0 4px;
}
.co-modal-x:hover { color: #222; }
.co-modal-body { padding: 12px 14px; }

/* Modal "Dados do serviço" (paridade CO), aberto pelo ícone Etiquetas do plano de corte */
.co-service-modal-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.co-service-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.co-service-modal-grid label, .co-service-modal-field {
    display: block; font-size: 12px; color: #666; border: 1px solid #ddd; border-radius: 4px; padding: 8px 10px;
    line-height: 1.45;
}
.co-service-modal-field { margin-bottom: 10px; }
/* Valor na mesma linha, logo após o ":" */
.co-service-modal-grid label strong, .co-service-modal-field strong {
    display: inline; font-size: 13px; color: #222; font-weight: 600; margin-top: 0;
}
.co-service-modal-section {
    background: #f0f1f2; border-radius: 4px; padding: 8px 10px; font-weight: 700; font-size: 13px; margin: 14px 0 8px;
}
.co-service-modal-table { border: 1px solid #eee; border-radius: 4px; margin-bottom: 10px; overflow: hidden; }
.co-service-modal-thead, .co-service-modal-trow {
    display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; font-size: 13px;
}
.co-service-modal-thead { font-weight: 700; background: #fafafa; border-bottom: 1px solid #eee; }
.co-service-modal-trow + .co-service-modal-trow { border-top: 1px solid #f3f3f3; }
.co-service-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.co-service-modal-history summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #444; }
.co-service-modal-history ul { margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: #555; }

/* Modal "Etiquetas" aninhado (iframe) dentro do modal "Dados do serviço" */
.co-modal-tall { display: flex; flex-direction: column; max-height: 85vh; }
.co-modal-tall .co-modal-head { flex: 0 0 auto; }
.co-service-modal-iframe { flex: 1 1 auto; width: 100%; min-height: 60vh; border: 0; }
.co-mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.co-mat-card {
    border: 1px solid #ddd; border-radius: 4px; padding: 8px; cursor: pointer; background: #fff; text-align: left;
}
.co-mat-card:hover { border-color: var(--co-identity); background: #f3faf6; }

/* Lista "Materiais / Produtos" (catálogo de fitas) — cartão em linha, 2 colunas */
.co-mat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.co-mat-row {
    display: flex; align-items: center; gap: 10px; border: 1px solid #ddd; border-radius: 4px;
    padding: 8px 10px; cursor: pointer; background: #fff; text-align: left;
}
.co-mat-row:hover { border-color: var(--co-identity); background: #f3faf6; }
.co-mat-row-icon {
    width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; color: #8a6d1f; font-size: 14px;
}
.co-mat-row-text { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; min-width: 0; }
.co-mat-row-text .name { font-weight: 600; color: #333; }
.co-mat-row-text .dims { color: #888; font-size: 11px; }
.co-mat-card img { width: 100%; height: 72px; object-fit: cover; border-radius: 3px; background: #eee; }
.co-mat-card .code { font-size: 11px; color: #666; }
.co-mat-card .desc { font-size: 12px; font-weight: 600; margin-top: 2px; }

/* Modal de seleção de material — espelha o modal de MDF do simulador: busca arredondada,
   resultados em seções por Categoria com faixa de título, cards com imagem grande + nome. */
.co-mat-modal { max-width: 920px; }
.co-mat-search {
    flex: 1; min-width: 220px; padding: 10px 14px; border: 1px solid #ccc; border-radius: 20px; font-size: 14px;
}
.co-mat-group { margin-bottom: 20px; }
.co-mat-group:last-child { margin-bottom: 0; }
.co-mat-group-head {
    background: #cbbfa0; color: #3a3226; font-weight: 700; text-align: center;
    padding: 8px; border-radius: 3px; margin-bottom: 12px; font-size: 13px; letter-spacing: .02em;
}
.co-mat-group .co-mat-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.co-mat-group .co-mat-card { padding: 0 0 8px; border: 0; background: transparent; }
.co-mat-group .co-mat-card:hover { background: transparent; }
.co-mat-card-img {
    position: relative; height: 110px; border-radius: 4px; overflow: hidden; background: #eee;
    margin-bottom: 6px; border: 1px solid #ddd;
}
.co-mat-group .co-mat-card:hover .co-mat-card-img { border-color: var(--co-identity); }
.co-mat-card-img img, .co-mat-card-color { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-mat-card-brand {
    position: absolute; top: 5px; right: 5px; background: #0007; color: #fff;
    font-size: 9px; padding: 2px 6px; border-radius: 3px; text-transform: lowercase;
}
.co-mat-group .co-mat-card .name {
    font-size: 12px; font-weight: 700; text-align: center; color: var(--co-identity);
}


.co-muted { color: #777; font-size: 12px; }
.co-pager { padding: 10px 14px; }
.co-pagination {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px;
}
.co-pagination-info { margin: 0; font-size: 12px; color: #666; }
.co-pagination-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.co-pagination-list li { list-style: none; margin: 0; padding: 0; }
.co-pagination-list a,
.co-pagination-list span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 28px; padding: 0 8px;
    border: 1px solid #ddd; border-radius: 3px;
    text-decoration: none; color: #333; font-size: 12px; background: #fff;
}
.co-pagination-list a:hover { border-color: var(--co-identity); color: var(--co-identity); }
.co-pagination-list .active span {
    background: var(--co-identity); color: #fff !important; border-color: var(--co-identity);
}
.co-pagination-list .disabled span { color: #aaa; background: #f5f5f5; }

/* legacy */
.co-pager nav { display: flex; gap: 6px; flex-wrap: wrap; }
.co-pager a, .co-pager span {
    display: inline-block; padding: 4px 8px; border: 1px solid #ddd; border-radius: 3px;
    text-decoration: none; color: #333; font-size: 12px; background: #fff;
}
.co-pager .active span { background: var(--co-identity); color: #fff !important; border-color: var(--co-identity); }

[x-cloak] { display: none !important; }

/* Bridge: catalog pages still use layouts.app class names */
.panel {
    background: #fff; border: 1px solid #ddd; border-radius: 4px;
    padding: 14px; margin-bottom: 14px;
}
.panel h1 { font-size: 1.35rem; margin: 0 0 .75rem; }
.panel h2, h2 { font-size: 1.05rem; margin: 0 0 .75rem; color: #444; font-weight: 600; }
.muted, .co-muted { color: #777; font-size: 12px; }
.tag {
    display: inline-block; padding: .15rem .45rem; border-radius: 3px;
    background: #e8f0ec; font-size: .75rem;
}
table:not(.co-table):not(.co-piece-table),
.catalog-table {
    width: 100%; border-collapse: collapse; font-size: .9rem;
}
table:not(.co-table):not(.co-piece-table) th,
table:not(.co-table):not(.co-piece-table) td,
.catalog-table th,
.catalog-table td {
    text-align: left; padding: .55rem .4rem; border-bottom: 1px solid #eee; vertical-align: top;
}
table:not(.co-table):not(.co-piece-table) th,
.catalog-table th {
    color: #444; font-weight: 700; font-size: 12px; background: #f7f7f7;
    border-bottom: 1px solid #ddd;
}
.catalog-table thead { display: table-header-group !important; }

/* Paginação Laravel (default) no shell CO */
.co-pager nav[role="navigation"] span,
.co-pager p {
    font-size: 12px; color: #666;
}
.co-pager a {
    color: var(--co-identity);
}
.grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.grid .full { grid-column: 1 / -1; }
#chapa-only-fields { display: contents; }
label { display: block; font-size: .8rem; color: #666; margin-bottom: .25rem; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
    width: 100%; background: #fff; border: 1px solid #ccc; color: #222;
    border-radius: 4px; padding: .45rem .55rem; font: inherit;
}
.check { display: flex; align-items: center; gap: .4rem; margin-top: 1.4rem; }
.check input { width: auto; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
button:not(.co-logout):not(.co-icons button):not(.co-mat-btn):not(.co-mat-card):not(.co-mat-row):not(.co-btn-white):not(.co-modal-x):not(.co-edge-chip):not(.co-bordermark):not(.co-swap-btn):not(.co-band-chip):not(.co-accordion-btn):not(.co-piece-color-dot):not(.co-btn-add-part):not(.co-novo):not(.co-plan-icon):not(.co-eco-bar):not(.co-hamburger):not(.co-filter-toggle):not(.co-motor-option):not(.co-motor-machine-btn):not(.co-sidebar-group-btn):not(.co-logout-2):not(.co-sidebar-toggle):not(.co-app-menu-btn):not(.co-pwd-eye):not(.co-pwd-gen):not(.co-mat-auto-item):not(.co-import-review-status):not(.co-btn-icon):not(.co-mat-bar-chip),
.btn {
    display: inline-block; background: var(--co-identity); color: #fff; border: 0;
    border-radius: 4px; padding: .45rem .9rem; font-weight: 600; cursor: pointer; font: inherit;
    text-decoration: none;
}
.btn.secondary { background: #fff; color: #222; border: 1px solid #ccc; }
.btn.danger { background: #c45c5c; color: #fff; }
:root {
    --line: #ddd;
    --ink: #222;
    --muted: #777;
    --panel: #fff;
    --bg: #f5f5f5;
    --accent: var(--co-identity);
    --danger: #c45c5c;
    --ok: #2f6b4f;
}

/* ---- Grid de peças CO-like (paridade lista de componentes) ---- */
.co-bandbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.co-band-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
    border: 1px solid #ccc; border-radius: 3px; background: #fff; cursor: pointer; font-size: 12px;
}
.co-band-chip.sel { border-color: var(--co-identity); box-shadow: 0 0 0 1px var(--co-identity); font-weight: 600; }
.co-band-dot { width: 14px; height: 14px; border-radius: 3px; border: 1px solid #999; display: inline-block; flex: 0 0 auto; }
.co-edge-cell { display: flex; gap: 4px; }
.co-bordermark {
    width: 22px; height: 22px; border: 1px solid #ccc; border-radius: 2px;
    background: #fff; cursor: pointer; padding: 0; box-sizing: border-box;
}
.co-bordermark:hover { background: #f0f0f0; }
.co-swap-btn { border: 1px solid #ccc; border-radius: 3px; background: #fff; cursor: pointer; padding: 4px 6px; }
.co-swap-btn:hover { background: #f0f0f0; }
.co-piece-preview {
    position: relative; width: 70px; height: 70px; border: 1px solid #ccc;
    border-radius: 2px; background: #f2f2f2; box-sizing: border-box;
    overflow: hidden;
    /* Sombra interna — sem isso, material com textura bem clara/branca (ex. MDF Branco TX)
       fica visualmente idêntico a "sem textura nenhuma" (mesmo cinza-claro de fundo). */
    box-shadow: inset 0 0 0 1px #0002, inset 0 0 6px #0001;
}
.co-preview-lg { width: 220px; height: 220px; margin: 0 auto; }
.co-piece-preview-img { position: absolute; inset: 0; z-index: 0; }

/* Tracinho de fita — recuado pra dentro da imagem (não cola na borda da caixa).
   Cor vem inline via border-*-color (bandColor). Default transparent — sem isso, o
   currentColor (cinza do texto) aparece como pontilhado fantasma ao clicar/re-render. */
.co-fita-mark {
    position: absolute; z-index: 2; pointer-events: none;
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
}
.co-fita-top, .co-fita-bottom {
    left: 5px; right: 5px; height: 0;
    border-top: 3px dashed transparent;
}
.co-fita-top { top: 4px; }
.co-fita-bottom { bottom: 4px; }
.co-fita-left, .co-fita-right {
    top: 5px; bottom: 5px; width: 0;
    border-left: 3px dashed transparent;
}
.co-fita-left { left: 4px; }
.co-fita-right { right: 4px; }
.co-preview-lg .co-fita-top, .co-preview-lg .co-fita-bottom { left: 10px; right: 10px; border-top-width: 4.5px; }
.co-preview-lg .co-fita-top { top: 8px; }
.co-preview-lg .co-fita-bottom { bottom: 8px; }
.co-preview-lg .co-fita-left, .co-preview-lg .co-fita-right { top: 10px; bottom: 10px; border-left-width: 4.5px; }
.co-preview-lg .co-fita-left { left: 8px; }
.co-preview-lg .co-fita-right { right: 8px; }
/* Caixa grande (220px, modal Dados do Componente) — os offsets do preview pequeno (70px)
   caem em cima do pontilhado de fita aqui; afasta mais pra dentro e aumenta a fonte. */
.co-preview-lg .co-fita-dim-x { bottom: 22px; font-size: 12px; }
.co-preview-lg .co-fita-dim-y { left: 20px; font-size: 12px; }
.co-zone { position: absolute; cursor: pointer; }
.co-zone:hover { background: rgba(237, 124, 48, .25); }
.co-row-pending { background: #fffbe8; }
.co-row-oversize { background: #fff0f0; }
.co-fieldset { border: 1px solid #ddd; border-radius: 4px; padding: 10px 12px; margin: 0 0 12px; }
.co-fieldset legend { font-size: 12px; font-weight: 700; color: #555; padding: 0 6px; }
.co-accent { color: #ED7C30; }
.co-accordion-btn {
    width: 100%; text-align: left; background: #f2f2f2; border: 1px solid #ddd;
    border-radius: 3px; padding: 8px 10px; cursor: pointer; font-weight: 600; font-size: 13px;
}
.co-accordion-panel { border: 1px solid #ddd; border-top: 0; border-radius: 0 0 3px 3px; padding: 10px 12px; }

/* Preferências: seções em acordeão nativo (<details>) */
details.co-accordion {
    border: 1px solid #ddd; border-radius: 4px; margin-bottom: 10px; background: #fafafa;
}
details.co-accordion summary {
    padding: 10px 14px; cursor: pointer; font-weight: 700; font-size: 13px; color: #333;
    list-style: none; display: flex; align-items: center; gap: 8px;
}
details.co-accordion summary::-webkit-details-marker { display: none; }
details.co-accordion summary::before { content: '\25B8'; font-size: 11px; color: #888; transition: transform .15s; }
details.co-accordion[open] summary::before { transform: rotate(90deg); }
details.co-accordion[open] summary { border-bottom: 1px solid #ddd; }
details.co-accordion > *:not(summary) { margin: 0 14px 12px; }
details.co-accordion > *:first-of-type:not(summary) { margin-top: 12px; }

/* ---- Aba Planos (diagrama + sequência de cortes) ---- */
.co-sol-active { background: #eef6f1; }
.co-sol-active td { font-weight: 600; }
.co-util-bar { width: 90px; height: 8px; background: #e6e6e6; border-radius: 4px; overflow: hidden; display: inline-block; vertical-align: middle; }
.co-util-bar span { display: block; height: 100%; background: var(--co-identity); }
.co-plan-svg {
    width: 100%; max-height: 70vh; height: auto; background: #fff;
    border-radius: 4px; border: 1px solid #ccc;
    shape-rendering: geometricPrecision;
}
.co-plan-svg text {
    font-family: Arial, Helvetica, sans-serif;
}
/* Pisca a peça por ~2s ao chegar em Planos de corte pelo botão de cor da Lista de componentes. */
@keyframes co-piece-pulse {
    0%, 100% { fill-opacity: 1; stroke-width: 1.8; }
    50% { fill-opacity: 0.35; stroke: #ED7C30; stroke-width: 3; }
}
.co-piece-highlight { animation: co-piece-pulse .4s ease-in-out 5; }

/* Painel de métricas do plano (paridade CorteOnline — diagrama + sidebar de dados) */
.co-plan-layout { display: flex; gap: 16px; align-items: flex-start; }
.co-plan-main { flex: 1; min-width: 0; }
.co-m2-offer-btns {
    display: flex; flex-direction: column; flex-wrap: nowrap; gap: 6px; align-items: stretch;
    margin: 10px 0 12px;
}
.co-plan-side .co-m2-offer-btns,
.co-max-side .co-m2-offer-btns {
    width: 100%;
}
.co-m2-offer-opt {
    display: flex; align-items: center; gap: 6px;
    margin: 0; width: 100%; flex: 0 0 auto;
}
.co-m2-offer-btns .co-btn {
    white-space: nowrap; flex: 1 1 auto; justify-content: center;
}
.co-m2-offer-btns .co-btn.co-m2-offer-active {
    background: #16a34a; color: #fff; border: 1px solid #15803d;
}
.co-m2-offer-btns .co-btn.co-m2-offer-active:hover {
    background: #15803d;
}
.co-m2-offer-price {
    font-size: 12px; font-weight: 700; color: var(--co-text-body);
    white-space: nowrap; flex: 0 0 auto; min-width: 4.5em; text-align: right;
}
.co-max-side .co-m2-offer-price { color: #eee; }
.co-plan-block { border: 1px solid #ddd; border-radius: 6px; padding: 12px; background: #fff; box-sizing: border-box; }
.co-plan-side {
    width: 220px; flex: 0 0 220px; font-size: 12px; background: #fafafa;
    border: 1px solid #eee; border-radius: 4px; padding: 12px;
}
.co-plan-side .lbl { color: #999; font-size: 10px; text-transform: uppercase; letter-spacing: .02em; margin: 8px 0 1px; }
.co-plan-side .lbl:first-child { margin-top: 0; }
.co-plan-side .val { color: #222; }
.co-plan-side .val.big { font-size: 20px; font-weight: 700; color: var(--co-identity); }
.co-plan-side .val.accent { color: #ED7C30; font-weight: 600; }
.co-plan-side hr { border: 0; border-top: 1px solid #e5e5e5; margin: 10px 0; }
.co-plan-side-planum {
    display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.co-plan-side-planum .co-plan-tex-frame { flex-shrink: 0; }
.co-plan-side-planum-num { min-width: 0; flex: 1; }
.co-plan-side-planum-num .lbl { margin-top: 0; }
@media (max-width: 760px) {
    .co-plan-layout { flex-direction: column; }
    .co-plan-side { width: 100%; }
}

/* Eco — barra verde (antes "Possibilidades") — mantida por compat, botão agora na toolbar */
.co-eco-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    width: 100%; margin: 0 0 12px; padding: 10px 14px;
    background: var(--co-identity); color: #fff; border: 0; border-radius: 4px;
    font-size: 14px; font-weight: 700; cursor: pointer; text-align: left; font-family: inherit;
}
.co-eco-bar:hover { filter: brightness(1.06); }
.co-eco-bar .fa { font-size: 15px; }

/* Barra material + ícones (paridade CO Planos) — também na co-toolbar-actions */
.co-plan-nav {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 10px; padding: 8px 10px;
    background: #efefef; border: 1px solid #ddd; border-radius: 4px;
}
.co-toolbar-actions .co-plan-mat-select {
    flex: 0 1 300px; min-width: 140px; max-width: 300px;
}
.co-toolbar-actions .co-plan-icons {
    display: inline-flex; align-items: center; gap: 2px;
}
.co-plan-mat-select {
    flex: 1; min-width: 180px; max-width: 300px;
    padding: 6px 10px; border: 1px solid #bbb; border-radius: 3px;
    background: #fff; font-size: 13px;
}
.co-plan-icons { display: inline-flex; align-items: center; gap: 2px; }
.co-plan-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; margin: 0;
    border: 0; background: transparent; color: #444; cursor: pointer;
    font-size: 15px; text-decoration: none; border-radius: 3px;
}
.co-plan-icon:hover { background: #fff; color: var(--co-identity); }
.co-plan-icon:disabled { opacity: .35; cursor: default; }
a.co-plan-icon { line-height: 32px; }

.co-stages-warn {
    display: inline-flex; align-items: center; gap: 4px;
    color: #a33; white-space: nowrap; cursor: help;
}

.co-plan-sheet-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px; margin-bottom: 6px;
}
.co-plan-sheet-head-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Frame fixo com overflow — rotate(90°) não vaza pra fora da chapa/cabeçalho. */
.co-plan-tex-frame {
    width: 72px; height: 48px; overflow: hidden; flex-shrink: 0;
    border: 1px solid #888; border-radius: 2px; background: #eee;
    box-shadow: inset 0 0 0 1px #fff8;
}
.co-plan-tex-inner {
    width: 100%; height: 100%;
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.co-plan-tex-inner.is-rot {
    width: 48px; height: 72px;
    transform: rotate(90deg);
    transform-origin: center center;
    position: relative; left: 12px; top: -12px;
}

/* ---- Dados do serviço (paridade CO: Dados | Parâmetros lado a lado) ---- */
.co-toolbar-actions {
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
    margin-bottom: 6px; min-height: 0; line-height: 1.2;
}
.co-toolbar-actions .co-novo,
.co-toolbar-actions .co-btn {
    padding: 3px 8px; font-size: 12px; gap: 4px; border-radius: 3px;
    line-height: 1.2;
}
.co-toolbar-actions .co-plan-icon {
    width: 26px; height: 26px; font-size: 13px;
}
.co-toolbar-actions a.co-plan-icon { line-height: 26px; }
.co-toolbar-actions .co-plan-mat-select {
    padding: 3px 8px; font-size: 12px; line-height: 1.2;
    flex: 0 1 300px; min-width: 120px; max-width: 300px;
}
.co-toolbar-actions select:not(.co-plan-mat-select) {
    padding: 3px 6px; font-size: 12px; line-height: 1.2;
}
.co-toolbar-dados {
    display: inline-flex; align-items: center; gap: 6px 10px;
    flex: 1 1 280px; min-width: 180px; margin: 0;
}
.co-toolbar-dados .co-dados-field {
    display: flex; align-items: center; gap: 4px; min-width: 0;
}
.co-toolbar-dados .co-dados-field > label {
    margin: 0; flex: 0 0 auto; color: #555; font-size: 11px; font-weight: 600;
    line-height: 1.2;
}
.co-toolbar-dados .co-dados-field input {
    flex: 1; min-width: 80px; width: auto;
    border: 1px solid #ccc; border-radius: 3px; padding: 2px 6px;
    background: #faf6f0; font-size: 12px; line-height: 1.2; height: 24px;
    box-sizing: border-box;
}
.co-toolbar-dados .co-dados-field:first-child { flex: 0 1 150px; }
.co-toolbar-dados .co-dados-field--grow { flex: 1 1 160px; }
.co-service-dados { padding: 12px; }
.co-dados-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 900px) {
    .co-dados-grid { grid-template-columns: 1fr; }
}
.co-box-info {
    list-style: none; margin: 0; padding: 0;
    border: 1px solid #ddd; border-radius: 4px; background: #fff;
    overflow: hidden;
}
.co-box-info .co-box-title {
    display: block; font-weight: 700; font-size: 13px; color: #444;
    margin: 0; padding: 8px 12px; background: #ececec; border-bottom: 1px solid #ddd;
}
.co-box-info li {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 6px 12px; font-size: 13px; border-bottom: 1px solid #f0f0f0;
}
.co-box-info li:last-child { border-bottom: 0; }
.co-box-info li > label {
    margin: 0; min-width: 110px; color: #555; font-size: 12px; font-weight: 600;
}
.co-box-info li input, .co-box-info li select {
    flex: 1; min-width: 80px; width: auto;
    border: 1px solid #ccc; border-radius: 3px; padding: 4px 8px;
    background: #faf6f0;
}

/* Dados do serviço — 2 linhas (editáveis + metadados) */
.co-box-info--compact .co-box-title { padding: 6px 12px; font-size: 12px; }
.co-box-info--compact .co-dados-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
    padding: 8px 12px; border-bottom: 1px solid #f0f0f0;
}
.co-box-info--compact .co-dados-row:last-child { border-bottom: 0; }
.co-box-info--compact .co-dados-row--meta {
    background: #fafafa; font-size: 12.5px;
}
.co-dados-field {
    display: flex; align-items: center; gap: 6px; min-width: 0;
}
.co-dados-field > label {
    margin: 0; flex: 0 0 auto; color: #555; font-size: 12px; font-weight: 600;
    min-width: auto;
}
.co-dados-field input {
    flex: 1; min-width: 120px; width: auto;
    border: 1px solid #ccc; border-radius: 3px; padding: 4px 8px;
    background: #faf6f0;
}
.co-dados-field--grow { flex: 1 1 220px; }
.co-dados-row--edit .co-dados-field:first-child { flex: 0 1 220px; }
.co-dados-row--meta .co-dados-field { flex: 1 1 auto; }
@media (max-width: 700px) {
    .co-box-info--compact .co-dados-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .co-dados-field, .co-dados-row--edit .co-dados-field:first-child { flex: 1 1 auto; }
}

.co-param-input { max-width: 120px; flex: 0 0 auto !important; }
.co-box-actions {
    display: flex; gap: 14px; align-items: center; margin-top: 0;
    background: #fafafa;
}

.co-lista-head {
    display: flex; align-items: center; gap: 8px;
    background: #e8e8e8; border-bottom: 1px solid #ddd;
    padding: 8px 12px;
    font-weight: 700; font-size: 14px; color: #333;
}
.co-lista-head .fa { color: #666; }
/* Sem overflow:hidden aqui (no painel) — ele corta o "sticky" do bloco de
   título/Adicionar/Fitas do pedido (position:sticky em elemento comum, não célula de
   tabela, não funciona dentro de um ancestral com overflow diferente de visible). O
   arredondamento de canto e o overflow:hidden das bordas internas agora vivem em
   .co-lista-sticky (ver abaixo) — ali é seguro porque é o próprio elemento sticky, não
   um ancestral dele. */
.co-lista-panel {
    padding: 0;
}
.co-lista-addbar {
    background: var(--co-identity); padding: 6px 10px;
}
/* Bloco fixo ao rolar: título + Adicionar peça + Fitas do pedido + cabeçalho da tabela —
   um cartão SÓ (borda fina em volta de tudo, sombra bem leve), flutuando sobre a lista
   que rola por baixo. O cabeçalho continua sendo um <thead> de verdade (por causa do
   alinhamento de coluna, não dá pra tirar da <table>), então a emenda é visual: sem gap
   entre os dois, cantos quadrados onde se encontram, borda/sombra só fecham no final. */
.co-lista-sticky {
    position: sticky; top: 0; z-index: 10; background: #fff;
    margin: 8px 14px 0; border: 1px solid #ccc; border-bottom: 0; border-radius: 4px 4px 0 0;
    overflow: hidden;
}
/* padding-top zerado de propósito — o cabeçalho da tabela (dentro daqui) precisa
   encostar sem respiro no bloco fixo acima pra parecer um cartão só (ver
   .co-lista-sticky). Mensagens de flash (statusMsg/errorMsg) compensam com margin-top
   próprio quando aparecem. */
.co-lista-body { padding: 0 14px 14px; }
.co-bandbar { padding: 10px 14px 0; }
.co-piece-table thead th:first-child { border-left: 1px solid #ccc; border-bottom-left-radius: 4px; }
.co-piece-table thead th:last-child { border-right: 1px solid #ccc; border-bottom-right-radius: 4px; }
/* Cabeçalho da tabela também fixo, colado embaixo do bloco acima — a distância
   (--sticky-top) é medida via JS (stickyHeaderHeight) porque a altura do bloco muda
   conforme a quantidade de fitas do pedido quebra linha. Sombra (leve) vai em cada th,
   não na tr — box-shadow em <tr> tem suporte inconsistente entre navegadores. */
.co-piece-table thead th {
    position: sticky; top: var(--sticky-top, 0px); z-index: 9; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.co-btn-add-part {
    background: #fff; color: #333; border: 1px solid #ccc; border-radius: 4px;
    padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.co-btn-add-part:hover { background: #f3f3f3; }
.co-btn-add-part:disabled { opacity: 0.6; cursor: wait; }

/* Lista de componentes no celular: a tabela de 13 colunas não cabe de jeito nenhum, vira
   um cartão por peça (linha) — paridade com o cartão do CorteOnline real: índice+MDF juntos
   no topo, Quant./Comp./Larg. numa grade de 3, Descrição larga, e no rodapé Ignorar veio +
   Ações + Prévia lado a lado, com as Fitas por baixo. Cada <td> vira um item flex com
   `order`/`flex-basis` próprios (via data-label) — o <tr> vira o container flex-wrap, então
   a ORDEM VISUAL não depende da ordem real das colunas na tabela/JS. */
@media (max-width: 760px) {
    .co-piece-table thead { display: none; }
    .co-piece-table, .co-piece-table tbody { display: block; width: 100%; }
    .co-piece-table tr {
        display: flex; flex-wrap: wrap; align-items: center;
        border: 1px solid #ddd; border-radius: 8px; margin-bottom: 10px; padding: 10px;
        background: #fff; row-gap: 10px; column-gap: 8px;
    }
    .co-piece-table tr.co-row-pending { border-color: var(--co-identity); }
    .co-piece-table td { padding: 0; border: 0; }

    /* Cada grupo abaixo usa flex-basis EXPLÍCITO (não 0) — é o que faz o wrap acontecer por
       GRUPO (linha visual) em vez de espremer tudo numa linha só só com o texto quebrando
       dentro de cada célula. Basis 0 (flex:1 1 0) faz o navegador tentar caber TODOS os itens
       na mesma linha antes de crescer, que era o bug daqui (MDF virando uma coluna de 4
       linhas de texto espremida do lado de Quant/Comp/Larg). */
    .co-piece-table td[data-label="#"] { order: 1; flex: 0 0 8%; font-weight: 700; }
    .co-piece-table td[data-label="Cor"] { order: 2; flex: 0 0 8%; }
    .co-piece-table td[data-label="MDF"] { order: 3; flex: 1 1 60%; min-width: 0; }
    .co-piece-table td[data-label="MDF"] .co-mat-btn { max-width: 100%; width: 100%; }

    .co-piece-table td[data-label="Quant."] { order: 4; flex: 1 1 28%; }
    .co-piece-table td[data-label="Comp."] { order: 5; flex: 1 1 28%; }
    .co-piece-table td.co-td-swap { order: 6; flex: 0 0 8%; align-self: flex-end; padding-bottom: 6px; text-align: center; }
    .co-piece-table td[data-label="Larg."] { order: 7; flex: 1 1 22%; }
    .co-piece-table td[data-label="Quant."],
    .co-piece-table td[data-label="Comp."],
    .co-piece-table td[data-label="Larg."] {
        display: flex; flex-direction: column; align-items: stretch; gap: 3px;
    }
    .co-piece-table td[data-label="Quant."] input,
    .co-piece-table td[data-label="Comp."] input,
    .co-piece-table td[data-label="Larg."] input {
        width: 100%; max-width: none;
    }

    .co-piece-table td[data-label="Descrição"] { order: 8; flex: 0 0 100%; display: flex; flex-direction: column; gap: 3px; }
    .co-piece-table td[data-label="Descrição"] input { width: 100%; }

    .co-piece-table td[data-label="Fita (cor/descrição)"] { order: 9; flex: 0 0 100%; padding-top: 6px; border-top: 1px dashed #eee; }

    .co-piece-table td[data-label="Ignorar veio"] { order: 10; flex: 1 1 40%; }
    .co-piece-table td[data-label="Ações"] { order: 11; flex: 0 0 auto; }
    .co-piece-table td[data-label="Prévia"] { order: 12; flex: 0 0 auto; margin-left: auto; }
    .co-piece-table td[data-label="Fitas"] { order: 13; flex: 0 0 100%; }

    /* Rótulo em cima do campo (Quant./Comp./Larg./Descrição) em vez de do lado — bate com
       o cartão de referência. Nas demais colunas (ícones/checkbox/botões autoexplicativos)
       não precisa de rótulo nenhum. */
    .co-piece-table td[data-label="Quant."]::before,
    .co-piece-table td[data-label="Comp."]::before,
    .co-piece-table td[data-label="Larg."]::before,
    .co-piece-table td[data-label="Descrição"]::before {
        content: attr(data-label); font-size: 11px; font-weight: 700; color: #777;
    }
    .co-piece-table td[data-label="Descrição"]::before { text-align: center; }
    .co-piece-table td[data-label="Ignorar veio"] {
        display: flex; align-items: center; gap: 6px;
    }
    .co-piece-table td[data-label="Ignorar veio"]::after { content: attr(data-label); font-size: 12px; color: #555; }
    .co-piece-table input, .co-piece-table select { max-width: 140px; }
}

/* Cabeçalho/menu no celular — paridade com o app CorteOnline real: hamburguer no lugar dos
   links Início/Gerenciamento (viram um painel solto embaixo do topo), chips (loja, serviço,
   status) cada um numa linha cheia em vez de espremidos, abas Serviços/Dados/Planos
   distribuídas em partes iguais. */
@media (max-width: 640px) {
    .co-hamburger { display: inline-flex; align-items: center; justify-content: center; }
    .co-topbar-inner { flex-wrap: nowrap; position: relative; }
    .co-logo { font-size: 18px; }
    .co-topnav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: #fff; border: 1px solid #e0e0e0; border-top: 0;
        box-shadow: 0 8px 16px rgba(0,0,0,.08); z-index: 30; padding: 6px 0;
    }
    .co-topnav.is-open { display: flex; }
    .co-topnav a, .co-topnav .co-user { padding: 10px 16px; }
    .co-topnav .co-user { justify-content: space-between; }

    /* Paridade CO: chips (loja / serviço+status) primeiro, sobre o fundo verde; abas
       Serviços/Dados/Planos depois, já em fundo branco — não misturadas na mesma faixa. */
    .co-menubar-inner { flex-direction: column; align-items: stretch; padding: 0; gap: 0; }
    .co-menubar-right { order: 1; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 10px 12px; }
    .co-tabs-main { order: 2; width: 100%; background: #fff; }
    .co-tabs-main .co-tab { flex: 1 1 0; justify-content: center; text-align: center; padding: 12px 4px; }

    .co-menubar-right .co-chip {
        width: 100%; box-sizing: border-box; text-align: center; padding: 8px 12px;
        border-radius: 18px; background: #fff; border: 1px solid #ffffffcc; color: #1f3d2c;
        font-size: 13px;
    }
    /* Serviço # + status (Aberto + bolinhas) numa cartão branco só, lado a lado — igual ao
       CorteOnline real: não fica cada um numa linha cheia separada. */
    .co-service-row {
        width: 100%; box-sizing: border-box; justify-content: space-between; flex-wrap: wrap;
        background: #fff; border: 1px solid #ffffffcc; border-radius: 18px; padding: 8px 14px;
    }
    .co-service-row .co-chip { width: auto; border: 0; padding: 0; background: transparent; font-size: 12px; }
    .co-service-row .co-stepper { flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; }
    .co-service-row .co-step-label { font-size: 11px; }

    /* Toolbar de ações — paridade exata com o CorteOnline real: Novo/Atribuir/Importar/Gravar
       4 numa linha só, Calcular Serviço/Fechar cada um com metade da linha debaixo. */
    .co-toolbar-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .co-toolbar-actions > * { width: 100%; box-sizing: border-box; justify-content: center; margin: 0; }
    .co-toolbar-actions form { width: 100%; }
    .co-toolbar-actions .co-toolbar-dados {
        grid-column: 1 / -1; flex-wrap: wrap; width: 100%;
    }
    .co-toolbar-actions .co-motor-wrap { grid-column: span 2; }
    .co-toolbar-actions .co-motor-btn { width: 100%; justify-content: center; }
    .co-toolbar-actions .co-motor-menu { left: 0; right: 0; min-width: 0; }
    .co-toolbar-actions #btn-calcular-servico,
    .co-toolbar-actions .co-fechar { grid-column: span 2; }
    .co-toolbar-actions .co-prod-cal-embed { grid-column: 1 / -1; width: 100%; }
}

/* Linha do tempo (portal cliente) */
.co-timeline { list-style: none; margin: 0; padding: 0; }
.co-timeline li {
    display: flex; align-items: flex-start; gap: 10px; padding: 6px 0 6px 2px;
    border-left: 2px solid #eee; margin-left: 5px; padding-left: 14px; font-size: 13px;
}
.co-timeline li:last-child { border-left-color: transparent; }
.co-timeline-dot {
    width: 10px; height: 10px; border-radius: 50%; margin-left: -20px; margin-top: 3px;
    flex: 0 0 auto; border: 2px solid #fff; box-shadow: 0 0 0 1px #ccc;
}

/* Lista de serviços no celular — paridade CorteOnline: filtros escondidos atrás de um
   botão "Filtros" (o form em si só abre quando clicado), e cada serviço vira um cartão com
   os ícones de ação numa linha no topo e os campos empilhados um por linha (a versão
   desktop usa colunas col70/col30 lado a lado — min-width:220px cada, que é exatamente o
   que "cortava" a tela: 220+220+140px nunca cabe em 390px). */
@media (max-width: 640px) {
    .co-filter-toggle { display: flex; }
    .co-filter-bar { display: none; }
    .co-filter-bar.is-open { display: flex; flex-direction: column; align-items: stretch; }
    .co-filter-bar > div { width: 100%; }
    .co-filter-bar select, .co-filter-bar input { width: 100%; box-sizing: border-box; }

    .co-table, .co-table tbody, .co-table tr { display: block; width: 100%; }
    .co-table td.icons, .co-table td.infos { display: block; width: 100%; min-width: 0; padding: 8px 12px; box-sizing: border-box; }
    .co-table td.icons { padding-bottom: 0; border-bottom: 1px dashed #eee; padding-bottom: 8px; }
    .co-icons { justify-content: flex-start; gap: 10px; }
    .co-infos-row { flex-direction: column; gap: 2px; }
    .co-infos-row .col70, .co-infos-row .col30 { flex: 0 0 100%; min-width: 0; }
    .co-infos-row label { min-width: 90px; }
}

/* Preferências → Otimizador e máquinas (compacto) */
.co-opt { display: flex; flex-direction: column; gap: 12px; max-width: 960px; }
.co-opt-card {
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 12px 14px;
    background: #fff;
}
.co-opt-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #666;
}
.co-opt-row {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 12px 16px;
    align-items: start;
}
.co-opt-field label {
    display: block;
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: #444;
}
.co-opt-field select,
.co-opt-field input[type="number"],
.co-opt-field input[type="text"] {
    width: 100%;
    max-width: 100%;
    padding: 0.35rem 0.5rem;
    font-size: 13px;
}
.co-opt-field--grow { min-width: 0; }
.co-opt-range {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}
.co-opt-range span { font-size: 11px; color: #888; white-space: nowrap; }
.co-opt-range input[type="range"] { flex: 1; min-width: 0; cursor: pointer; }
.co-opt-hint { margin: 4px 0 0; font-size: 11.5px; color: #777; line-height: 1.35; }
.co-opt-grid3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
}
.co-opt-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 2px;
}
.co-opt-radios label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
}
.co-opt-radios input { width: auto; margin: 0; }
.co-opt-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 8px;
}
.co-opt-checks .check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
}
.co-opt-checks .check input { width: auto; margin: 0; }
.co-opt-rust {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}
.co-opt-table { margin: 0; font-size: 13px; }
.co-opt-table th, .co-opt-table td { padding: 6px 8px; }
.co-opt-preset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.solver-preset-btn {
    text-align: left;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fafafa;
    cursor: pointer;
    font-size: 13px;
}
.solver-preset-btn:hover { border-color: var(--co-identity, #2e7d4f); }
.solver-preset-btn.is-active {
    border-color: var(--co-identity, #2e7d4f);
    background: #f2f8f4;
}
@media (max-width: 720px) {
    .co-opt-row, .co-opt-grid3 { grid-template-columns: 1fr; }
    .co-opt-preset-grid { grid-template-columns: 1fr; }
}

/* Painel Maquinas de corte — layout compacto e alinhado */
.co-machine-form {
    max-width: 920px;
}
.co-machine-form .co-mach-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.co-machine-form .co-mach-head h1 {
    margin: 0;
    font-size: 1.25rem;
}
.co-mach-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 0;
}
.co-mach-top .co-mach-section { margin-bottom: 10px; }
@media (max-width: 800px) {
    .co-mach-top { grid-template-columns: 1fr; }
}
.co-machine-form .co-mach-section {
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #fafafa;
}
.co-machine-form .co-mach-section h2 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    color: #444;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.co-mach-field label {
    margin-bottom: 3px;
    font-size: 11.5px;
}
.co-mach-field input[type="number"],
.co-mach-field input[type="text"],
.co-mach-field input:not([type]) {
    width: 100%;
    max-width: 100%;
    padding: 0.35rem 0.45rem;
    font-size: 13px;
}
.co-mach-field input[type="number"] {
    max-width: 7.5rem;
}
.co-mach-id {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 12px;
    align-items: end;
}
.co-mach-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 10px;
}
.co-mach-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    color: #333;
    cursor: pointer;
}
.co-mach-check input {
    width: auto;
    margin: 0;
    flex: 0 0 auto;
}
.co-mach-row {
    display: flex;
    gap: 16px 28px;
    align-items: center;
    flex-wrap: wrap;
}
.co-mach-radios {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 120px;
}
.co-mach-phases {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 4px 16px;
    min-width: 0;
}
.co-mach-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    cursor: pointer;
    color: #333;
    white-space: nowrap;
}
.co-mach-radio input { margin: 0; width: auto; }
.co-mach-diagrams {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
.co-mach-svg {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 3px;
    padding: 4px;
}

/* Legenda Esquadrado/Acabamento no modal de materiais (mesmo traço visual do N fases). */
.co-mat-trim-legend {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-bottom: 1px solid var(--co-border, #e5e7eb);
    background: rgba(0, 0, 0, 0.02);
}
.co-mat-trim-svg {
    flex: 0 0 auto;
}
.co-mat-trim-explain {
    flex: 1 1 240px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    line-height: 1.45;
}
.co-mat-trim-legend-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.co-mat-trim-swatch {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    border-radius: 2px;
    box-sizing: border-box;
}
.co-mat-trim-swatch--hard {
    background: rgba(192, 57, 43, 0.35);
    border: 1px solid #c0392b;
}
.co-mat-trim-swatch--soft {
    background: rgba(41, 128, 185, 0.35);
    border: 1px solid #2980b9;
}
.co-mat-util-line {
    margin-top: 4px;
}
.co-mat-util-line strong[data-co-mat-util] {
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
}

.co-mach-nums {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    gap: 10px 16px;
    align-items: end;
}
.co-mach-nums--2 {
    grid-template-columns: repeat(2, max-content);
}
.co-mach-outras {
    display: flex;
    gap: 20px 36px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.co-mach-checks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    min-width: 0;
}
.co-mach-hint {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.4;
}
.co-mach-advanced {
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    padding: 8px 12px;
    background: #fff;
    margin-bottom: 4px;
}
.co-mach-advanced summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #555;
}
.co-mach-sliders {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 10px;
    max-width: 420px;
}
.co-mach-sliders input[type="range"] {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 2px 0;
}
.co-mach-range-ends {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #888;
}
@media (max-width: 640px) {
    .co-mach-id { grid-template-columns: 1fr; }
    .co-mach-nums,
    .co-mach-nums--2 { grid-template-columns: repeat(2, max-content); }
    .co-mach-phases { grid-template-columns: 1fr 1fr; }
}

/* —— Editor de etiquetas v2 (3 colunas) —— */
.co-le-page { display:flex; flex-direction:column; min-height:calc(100vh - 48px); margin:-8px -12px 0; }
.co-le-top {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:10px 14px; background:#fff; border-bottom:1px solid #ddd; position:sticky; top:0; z-index:20;
}
.co-le-top a.co-le-back { color:#444; text-decoration:none; font-size:13px; }
.co-le-top a.co-le-back:hover { color:var(--co-identity,#2f6b4f); }
.co-le-body { display:grid; grid-template-columns:220px minmax(0,1fr) 280px; gap:0; flex:1; min-height:0; background:#e8e8e8; }
@media (max-width:1100px) { .co-le-body { grid-template-columns:1fr; } }
.co-le-left, .co-le-right {
    background:#fff; border-right:1px solid #ddd; padding:12px; overflow:auto; max-height:calc(100vh - 56px);
}
.co-le-right { border-right:0; border-left:1px solid #ddd; }
.co-le-center { padding:12px; overflow:auto; display:flex; flex-direction:column; gap:8px; min-height:0; }
.co-le-add { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.co-le-add button {
    display:flex; align-items:center; gap:8px; width:100%; text-align:left;
    padding:8px 10px; border:1px solid #ccc; border-radius:4px; background:#fafafa; cursor:pointer; font:inherit; font-size:13px;
}
.co-le-add button:hover { border-color:var(--co-identity,#2f6b4f); background:#f0f7f3; }
.co-le-layers { list-style:none; margin:0; padding:0; }
.co-le-layers li {
    display:flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid transparent;
    border-radius:3px; cursor:pointer; font-size:12px; margin-bottom:2px;
}
.co-le-layers li:hover { background:#f5f5f5; }
.co-le-layers li.on { background:color-mix(in srgb, var(--co-identity) 12%, white); border-color:var(--co-identity); font-weight:600; }
.co-le-layers .co-le-layer-type { color:#888; font-size:10px; min-width:42px; }
.co-le-canvas-wrap {
    border:1px solid #ccc; background:repeating-conic-gradient(#f0f0f0 0% 25%, #fff 0% 50%) 0 0/16px 16px;
    align-self:flex-start; flex-shrink:0; overflow:visible; position:relative;
}
.co-le-canvas { position:relative; background:#fff; outline:1px dashed #999; transform-origin:top left; }
.co-le-marquee {
    position:absolute; z-index:50; pointer-events:none; box-sizing:border-box;
    border:1px solid var(--co-identity); background:color-mix(in srgb, var(--co-identity) 12%, white);
}
.co-le-ctx {
    display:flex; flex-wrap:wrap; gap:4px; align-items:center;
    background:#fff; border:1px solid #ddd; border-radius:4px; padding:6px 8px;
}
.co-le-ctx button { font-size:12px; padding:4px 8px; }
.co-le-folha {
    position:absolute; top:100%; left:0; margin-top:6px; width:min(420px,92vw);
    background:#fff; border:1px solid #ccc; border-radius:6px; box-shadow:0 8px 24px #0003;
    padding:12px; z-index:30;
}
.co-le-folha .grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.co-le-folha .full { grid-column:1 / -1; }
.co-le-warn { font-size:12px; color:#a33; margin:6px 0 0; }
.co-le-muted { font-size:12px; color:#777; margin:0 0 8px; }
.co-le-props label { font-size:11px; display:block; margin-bottom:2px; }
.co-le-props input[type=text], .co-le-props input[type=number], .co-le-props select {
    width:100%; padding:5px 6px; font-size:13px;
}
.co-le-ph { display:flex; flex-wrap:wrap; gap:3px; margin-top:4px; }
.co-le-ph button {
    font-size:11px; padding:3px 7px; border:1px solid #ddd; background:#f7f7f7;
    border-radius:3px; cursor:pointer; color:#333;
}
.co-le-ph button:hover { border-color:var(--co-identity,#2f6b4f); background:#f0f7f3; }
.co-le-modal-bg {
    position:fixed; inset:0; background:#0006; z-index:50; display:flex; align-items:center; justify-content:center; padding:16px;
}
.co-le-modal {
    background:#fff; border-radius:6px; width:min(960px,96vw); max-height:92vh; display:flex; flex-direction:column;
    box-shadow:0 12px 40px #0004;
}
.co-le-modal-preview { width:min(1100px,96vw); }
.co-le-modal-head { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid #ddd; }
.co-le-preview-layout { display:grid; grid-template-columns:280px minmax(0,1fr); min-height:0; flex:1; }
@media (max-width:800px) { .co-le-preview-layout { grid-template-columns:1fr; } }
.co-le-preview-pick {
    border-right:1px solid #ddd; padding:10px 12px; overflow:auto; max-height:70vh; background:#fafafa;
}
.co-le-preview-search {
    display:flex; align-items:center; gap:6px; border:1px solid #ccc; border-radius:4px; background:#fff; padding:4px 8px;
}
.co-le-preview-search i { color:#888; font-size:12px; }
.co-le-preview-search input {
    border:0; outline:0; width:100%; font-size:13px; background:transparent; padding:4px 0;
}
.co-le-preview-list { list-style:none; margin:0; padding:0; }
.co-le-preview-list li {
    display:flex; flex-direction:column; gap:1px; padding:8px 8px; border:1px solid transparent;
    border-radius:4px; cursor:pointer; margin-bottom:2px; font-size:12px; line-height:1.25;
}
.co-le-preview-list li:hover { background:#f0f7f3; border-color:#cfe0d6; }
.co-le-preview-list li.on { background:color-mix(in srgb, var(--co-identity) 12%, white); border-color:var(--co-identity); }
.co-le-preview-list li strong { font-size:13px; color:#222; }
.co-le-preview-list li span { color:#333; }
.co-le-preview-list li em { font-style:normal; color:#777; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.co-le-preview-list li small { color:#999; font-size:10px; }
.co-le-preview-empty { color:#888; font-size:12px; padding:10px 4px !important; cursor:default !important; }
.co-le-preview-empty:hover { background:transparent !important; border-color:transparent !important; }
.co-le-modal-body { flex:1; min-height:320px; }

/* ==========================================================================
   Redesign v2.2 (fase 1) — casca sidebar (layouts/app.blade.php) + Dashboard.
   Seção nova e isolada: não reaproveita nem sobrescreve .co-menubar/.co-tab/
   .co-topbar (usados por layouts/co.blade.php, que continua intocado).
   ========================================================================== */

.co-app-shell {
    display: flex; height: 100vh; overflow: hidden;
    font-family: var(--co-font-body); background: var(--co-content-bg); color: var(--co-text-body);
}

.co-sidebar {
    width: 200px; flex-shrink: 0; background: var(--co-menubar); color: #fff;
    display: flex; flex-direction: column; overflow-y: auto;
    transition: width .2s ease;
}
.co-sidebar::-webkit-scrollbar { width: 4px; }
.co-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }

.co-sidebar-brand {
    padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--co-menubar-dark);
    flex-shrink: 0; position: relative; min-height: 64px;
}
.co-sidebar-brand-link { text-decoration: none; color: inherit; display: block; }
.co-sidebar-brand .co-logo-corte { font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 700; }
.co-sidebar-brand .co-logo-online { font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 700; color: #dbe6fe; }
.co-sidebar-brand p { font-size: 12px; color: #c7d2fe; margin: 2px 0 0; }
.co-sidebar-brand-mark {
    display: none; font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-weight: 700;
    letter-spacing: .02em; text-align: center;
}

.co-sidebar-toggle {
    position: absolute; top: 10px; right: 8px; width: 28px; height: 28px;
    border: 0; border-radius: 6px; background: var(--co-menubar-dark); color: #fff;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; line-height: 1;
}
.co-sidebar-toggle:hover { background: color-mix(in srgb, var(--co-menubar-dark) 75%, white); }

.co-sidebar-nav { padding: 16px 12px; flex: 1; }

.co-sidebar-link {
    display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 8px 12px;
    font-size: 14px; font-weight: 500; color: var(--co-sidebar-link); text-decoration: none;
    margin-bottom: 4px; transition: background .15s;
}
.co-sidebar-link:hover { background: var(--co-menubar-dark); }
.co-sidebar-link.active { background: var(--co-identity); color: #fff; font-weight: 600; }
.co-sidebar-link i { width: 16px; text-align: center; opacity: .9; flex-shrink: 0; }

.co-sidebar-group { position: relative; }
.co-sidebar-group-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border-radius: 8px; padding: 8px 12px; margin-bottom: 4px;
    font-size: 14px; font-weight: 500; font-family: inherit; text-transform: none; letter-spacing: normal;
    color: var(--co-sidebar-link); background: none; border: 0; cursor: pointer;
    transition: background .15s, color .15s;
}
.co-sidebar-group-btn:hover { background: var(--co-menubar-dark); color: #fff; }
.co-sidebar-group-btn span { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.co-sidebar-group-btn span i { width: 16px; text-align: center; opacity: .9; margin-right: 0; flex-shrink: 0; }
.co-sidebar-group-btn .fa-chevron-right { font-size: 11px; transition: transform .2s; flex-shrink: 0; opacity: .9; }
.co-sidebar-group-btn[aria-expanded="true"] .fa-chevron-right { transform: rotate(90deg); }

.co-sidebar-group-items { margin: 2px 0 8px 12px; padding-left: 8px; border-left: 1px solid var(--co-menubar-dark); }
.co-sidebar-group-btn.is-active { color: #fff; font-weight: 600; }
.co-sidebar-sublink {
    display: block; border-radius: 8px; padding: 8px 12px; font-size: 14px; font-weight: 500; margin-bottom: 2px;
    color: var(--co-sidebar-link); text-decoration: none; transition: background .15s, color .15s;
}
.co-sidebar-sublink:hover { background: var(--co-menubar-dark); color: #fff; }
.co-sidebar-sublink.active { background: var(--co-identity); color: #fff; font-weight: 600; }

.co-sidebar-section-label {
    margin: 0 0 4px 4px; padding: 0; font-size: 14px; font-weight: 500; letter-spacing: normal;
    text-transform: none; color: var(--co-sidebar-link); opacity: .75;
}
.co-sidebar-settings-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.co-sidebar-settings-list a {
    display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 8px 12px; font-size: 14px; font-weight: 500;
    color: var(--co-sidebar-link); text-decoration: none;
    transition: background .15s, color .15s;
}
.co-sidebar-settings-list a i { width: 16px; text-align: center; font-size: 14px; opacity: .9; }
.co-sidebar-settings-list a:hover { background: var(--co-menubar-dark); color: #fff; }
.co-sidebar-settings-list a.active { background: var(--co-identity); color: #fff; font-weight: 600; }

.co-sidebar-footer { border-top: 1px solid var(--co-menubar-dark); padding: 12px 16px; font-size: 12px; flex-shrink: 0; }
.co-sidebar-footer .name { font-weight: 600; color: #fff; }
.co-sidebar-footer .role { color: #c7d2fe; }
.co-sidebar-footer .co-logout-2 {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px;
    border-radius: 4px; background: var(--co-menubar-dark);
    color: #fff; padding: 4px 10px; font-weight: 600; text-decoration: none; border: 0; cursor: pointer;
}
.co-sidebar-footer .co-logout-2:hover { background: color-mix(in srgb, var(--co-menubar-dark) 80%, white); }

/* Recolhida (estilo WP admin): só ícones no desktop.
   html.co-sidebar-pref-collapsed = preferência do localStorage aplicada no <head>
   ANTES do Alpine — evita o flash “abre e fecha” a cada navegação. */
@media (min-width: 861px) {
    .co-sidebar.is-collapsed,
    html.co-sidebar-pref-collapsed .co-sidebar {
        width: 56px; overflow: visible;
    }
    .co-sidebar.is-collapsed .co-sidebar-brand,
    html.co-sidebar-pref-collapsed .co-sidebar .co-sidebar-brand {
        padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 8px;
    }
    .co-sidebar.is-collapsed .co-logo-corte,
    .co-sidebar.is-collapsed .co-logo-online,
    .co-sidebar.is-collapsed .co-sidebar-label,
    html.co-sidebar-pref-collapsed .co-sidebar .co-logo-corte,
    html.co-sidebar-pref-collapsed .co-sidebar .co-logo-online,
    html.co-sidebar-pref-collapsed .co-sidebar .co-sidebar-label { display: none !important; }
    .co-sidebar.is-collapsed .co-sidebar-brand-mark,
    html.co-sidebar-pref-collapsed .co-sidebar .co-sidebar-brand-mark { display: block; }
    .co-sidebar.is-collapsed .co-sidebar-toggle,
    html.co-sidebar-pref-collapsed .co-sidebar .co-sidebar-toggle { position: static; }
    .co-sidebar.is-collapsed .co-sidebar-nav,
    html.co-sidebar-pref-collapsed .co-sidebar .co-sidebar-nav { padding: 12px 6px; overflow: visible; }
    .co-sidebar.is-collapsed .co-sidebar-link,
    html.co-sidebar-pref-collapsed .co-sidebar .co-sidebar-link {
        justify-content: center; padding: 10px 0; gap: 0; margin-bottom: 2px;
    }
    .co-sidebar.is-collapsed .co-sidebar-link i,
    html.co-sidebar-pref-collapsed .co-sidebar .co-sidebar-link i { width: auto; margin: 0; font-size: 15px; }
    .co-sidebar.is-collapsed .co-sidebar-group-btn,
    html.co-sidebar-pref-collapsed .co-sidebar .co-sidebar-group-btn {
        justify-content: center; padding: 10px 0; margin-top: 4px; font-size: 14px;
        text-transform: none; letter-spacing: 0;
    }
    .co-sidebar.is-collapsed .co-sidebar-group-btn span i,
    html.co-sidebar-pref-collapsed .co-sidebar .co-sidebar-group-btn span i { margin: 0; width: auto; }
    .co-sidebar.is-collapsed .co-sidebar-group-items,
    html.co-sidebar-pref-collapsed .co-sidebar .co-sidebar-group-items {
        display: none !important;
        position: absolute; left: calc(100% + 6px); top: 0; z-index: 50;
        min-width: 220px; max-height: min(70vh, 480px); overflow-y: auto;
        margin: 0; padding: 8px; border: 0; border-radius: 8px;
        background: var(--co-menubar); box-shadow: 0 8px 24px rgba(0,0,0,.28);
    }
    .co-sidebar.is-collapsed .co-sidebar-group:hover > .co-sidebar-group-items,
    .co-sidebar.is-collapsed .co-sidebar-group:focus-within > .co-sidebar-group-items,
    html.co-sidebar-pref-collapsed .co-sidebar .co-sidebar-group:hover > .co-sidebar-group-items,
    html.co-sidebar-pref-collapsed .co-sidebar .co-sidebar-group:focus-within > .co-sidebar-group-items {
        display: block !important;
    }
    .co-sidebar.is-collapsed .co-sidebar-settings .co-sidebar-section-label,
    html.co-sidebar-pref-collapsed .co-sidebar .co-sidebar-settings .co-sidebar-section-label {
        display: block !important; margin: 8px 4px 4px;
    }
    .co-sidebar.is-collapsed .co-sidebar-footer,
    html.co-sidebar-pref-collapsed .co-sidebar .co-sidebar-footer {
        padding: 10px 6px; display: flex; flex-direction: column; align-items: center;
    }
    .co-sidebar.is-collapsed .co-logout-2,
    html.co-sidebar-pref-collapsed .co-sidebar .co-logout-2 { width: 36px; height: 36px; padding: 0; margin-top: 0; }
}

.co-app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.co-app-topbar {
    background: var(--co-topbar-bg); border-bottom: 1px solid var(--co-card-border); padding: 10px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0;
}
.co-app-topbar-left {
    display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1;
}
.co-app-topbar-identity {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.co-app-topbar h1 {
    font-size: 18px; font-weight: 700; margin: 0; color: var(--co-text-body);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
}
.co-app-topbar-right {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0; justify-content: flex-end;
}
.co-app-topbar-right .co-stepper { padding-bottom: 12px; margin-bottom: -2px; }
.co-svc-head-meta {
    display: flex; align-items: center; gap: 0; min-width: 0;
    font-size: 12px; color: var(--co-text-body); line-height: 1.3;
}
.co-svc-head-meta-item {
    display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; max-width: 220px;
}
.co-svc-head-meta-item + .co-svc-head-meta-item::before {
    content: "·"; margin: 0 8px; color: var(--co-text-muted); font-weight: 700;
}
.co-svc-head-meta-lbl {
    color: var(--co-text-muted); font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em;
}
.co-svc-head-meta-item strong {
    font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.co-app-menu-btn {
    display: none; border: 1px solid var(--co-card-border); border-radius: 8px;
    width: 38px; height: 38px; background: #fff; cursor: pointer; flex-shrink: 0;
}
.co-app-content { flex: 1; overflow-y: auto; padding: 12px; }
.co-app-content.co-main-wide { max-width: none; }

.co-sidebar-overlay {
    position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.4);
}

.co-app-subnav {
    display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 24px;
    background: var(--co-topbar-bg); border-bottom: 1px solid var(--co-card-border); flex-shrink: 0;
}
.co-app-subtab {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px;
    font-size: 13px; font-weight: 500; color: var(--co-text-muted); text-decoration: none;
    transition: background .15s, color .15s;
}
.co-app-subtab:hover { background: #f1f5f9; color: var(--co-text-body); }
.co-app-subtab.active { background: color-mix(in srgb, var(--co-identity) 12%, white); color: var(--co-identity); font-weight: 600; }
.co-app-subtab i { font-size: 12px; opacity: .85; }

/* Dashboard */
.co-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.co-kpi-card {
    background: #fff; border-radius: 10px; padding: 20px; border: 1px solid var(--co-card-border);
    box-shadow: 0 1px 3px rgba(0,0,0,.05); text-decoration: none; color: inherit; display: block;
    transition: border-color .15s;
}
a.co-kpi-card:hover { border-color: var(--co-identity); }
.co-kpi-card .top { display: flex; align-items: center; justify-content: space-between; }
.co-kpi-card .value { font-size: 26px; font-weight: 700; color: var(--co-identity); margin: 0; }
.co-kpi-card .icon { font-size: 20px; opacity: .55; }
.co-kpi-card .label { font-size: 13px; color: var(--co-text-muted); margin: 4px 0 0; }
.co-kpi-card .sub { font-size: 11px; color: var(--co-text-muted); margin: 2px 0 0; }

.co-stage-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.co-stage-pill {
    display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 14px;
    font-size: 13px; font-weight: 600;
}

.co-dash-card {
    background: #fff; border-radius: 10px; border: 1px solid var(--co-card-border);
    box-shadow: 0 1px 3px rgba(0,0,0,.05); padding: 20px; margin-bottom: 24px;
}
.co-dash-card h3 { font-size: 14px; font-weight: 700; color: #374151; margin: 0 0 14px; }

.co-recent-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.co-recent-table th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--co-text-muted); padding: 8px 10px; border-bottom: 1px solid var(--co-card-border);
}
.co-recent-table td { padding: 10px; border-bottom: 1px solid #f1f5f9; }
.co-recent-table a { color: var(--co-identity); font-weight: 600; text-decoration: none; }
.co-recent-table a:hover { text-decoration: underline; }

/* Coluna de categorias de Configurações (nav persistente, estilo Perfex) */
.co-settings-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.co-settings-nav-list a {
    display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px;
    font-size: 13px; color: var(--co-text-muted); text-decoration: none; transition: background .15s, color .15s;
}
.co-settings-nav-list a i { width: 14px; text-align: center; font-size: 12px; }
.co-settings-nav-list a:hover { background: #f1f5f9; color: var(--co-text-body); }
.co-settings-nav-list a.active { color: var(--co-text-body); font-weight: 600; background: #f1f5f9; }

.co-settings-shell { display: flex; gap: 20px; align-items: flex-start; }
.co-settings-nav-col { width: 260px; flex-shrink: 0; }
.co-settings-content-col { flex: 1; min-width: 0; }

@media (max-width: 860px) {
    .co-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; transform: translateX(-100%); transition: transform .2s; width: 200px; }
    .co-sidebar.is-open { transform: translateX(0); }
    .co-sidebar-toggle { display: none; }
    .co-app-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
    .co-app-content { padding: 4px; }
    .co-app-subnav { padding: 8px 16px; }
    .co-app-topbar { padding: 10px 16px; }
    .co-settings-shell { flex-direction: column; }
    .co-settings-nav-col { width: 100%; }
}
.co-le-modal-body iframe { width:100%; height:70vh; border:0; background:#e9eaec; }