/* ════════════════════════════════════════════════════════════
   sollas-orderpage.css — sistema global de "página de documento"
   (OS, Pedido e futuros módulos: Orçamento, Agendamento…)

   Extraído da implementação original de NovaOsPage para que todo
   formulário de página completa (hero + stepper + módulos em card)
   compartilhe exatamente o mesmo desenho, sem duplicar CSS por tela.
   Cada página define apenas o SEU conteúdo (.osp-page / .osx-card /
   .osx-grid-N / .osx-tbl / etc. já vêm prontos daqui).

   Coluna única fluida (sem sidebar) — nada depende de duas colunas
   para caber, então a tela nunca "quebra" por falta de espaço
   lateral. Container queries adaptam cada módulo à largura real
   disponível (mede a própria página, não o monitor).
   ════════════════════════════════════════════════════════════ */

.osp-page {
    min-height: 100vh;
    padding: 20px 24px 44px;
    background:
        radial-gradient(ellipse at 20% 10%, rgba(16,185,129,0.06) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 80%, rgba(139,92,246,0.05) 0%, transparent 55%),
        var(--sollas-bg);
    box-sizing: border-box;
    container-type: inline-size;
}

.osp-container {
/*    max-width: 1400px;*/
    margin: 0 auto;
    animation: osx-fade .2s ease-out;
}

@keyframes osx-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .osp-container { animation: none; }
    .osp-page *, .osp-page *::before, .osp-page *::after {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
    }
}

/* ════════════════════════════════════════════════════════════
   CABEÇALHO DO DOCUMENTO
   ════════════════════════════════════════════════════════════ */
.osp-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.osp-hero-left { display: flex; align-items: center; gap: 13px; min-width: 0; }

.osp-hero-icon {
    width: 44px; height: 44px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--sollas-primary-light), rgba(29,158,117,.22));
    border: 1.5px solid rgba(29,158,117,.32);
    color: var(--sollas-primary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(29,158,117,.12);
}
.osp-hero-icon i { font-size: 19px; }

.osp-hero-text { display: flex; flex-direction: column; min-width: 0; }

.osp-titulo-row { display: flex; align-items: center; gap: 9px; min-width: 0; }

.osp-titulo {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--sollas-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Informativo compacto: ícone ⓘ com tooltip (evita parágrafo largo) */
.osp-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--sollas-text-muted);
    cursor: help;
    flex-shrink: 0;
}
.osp-info > i { font-size: 14px; transition: color .16s ease; }
.osp-info:hover > i { color: var(--sollas-primary); }

.osp-tooltip {
    position: absolute;
    top: calc(100% + 9px);
    left: -8px;
    z-index: 95;
    width: max-content;
    max-width: 300px;
    padding: 9px 13px;
    border-radius: 10px;
    background: #0F172A;
    border: 1px solid rgba(255,255,255,.08);
    color: #E2E8F0;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.45;
    box-shadow: 0 10px 26px rgba(0,0,0,.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    pointer-events: none;
}
.osp-info:hover .osp-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.osp-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    font-size: .7rem;
    font-weight: 600;
    margin-top: 3px;
}
.osp-breadcrumb a,
.osp-breadcrumb span { color: var(--sollas-text-muted); text-decoration: none; transition: color .16s; white-space: nowrap; }
.osp-breadcrumb a:hover { color: var(--sollas-primary); }
.osp-bc-sep   { opacity: .5; }
.osp-bc-atual { color: var(--sollas-primary) !important; }

.osp-hero-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ── Botões do header — padrão pill do sistema ──────────── */
.osp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    width: auto;
    padding: 0 16px;
    border-radius: 10px;
    border: 1.5px solid var(--sollas-border);
    background: var(--sollas-surface);
    color: var(--sollas-text-main);
    font-size: .78rem;
    font-weight: 700;
    font-family: var(--sollas-font);
    letter-spacing: .01em;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color .17s ease, background .17s ease, box-shadow .17s ease, transform .17s ease;
}
.osp-btn i { font-size: 12px; color: var(--sollas-primary); }
.osp-btn:hover { border-color: rgba(29,158,117,.5); background: var(--sollas-primary-light); }
.osp-btn:active { transform: scale(.98); }
.osp-btn:disabled { opacity: .6; cursor: not-allowed; }

.osp-btn.primario {
    border: none;
    border-radius: 999px;
    padding: 0 20px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #fff;
    box-shadow:
        0 2px 6px rgba(16,185,129,.3),
        0 8px 20px rgba(16,185,129,.22),
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -1px 0 rgba(0,0,0,.08);
}
.osp-btn.primario i { color: #fff; }
.osp-btn.primario:hover {
    background: linear-gradient(135deg, #0EA97A 0%, #048560 100%);
    transform: translateY(-1px);
    box-shadow:
        0 4px 10px rgba(16,185,129,.35),
        0 10px 24px rgba(16,185,129,.26),
        inset 0 1px 0 rgba(255,255,255,.18);
}
.osp-btn.primario:active { transform: translateY(0); }

.osp-spin {
    width: 13px; height: 13px;
    border: 2px solid rgba(255,255,255,.35);
    border-radius: 50%;
    border-top-color: #fff;
    animation: osp-spin .8s linear infinite;
    flex-shrink: 0;
}
@keyframes osp-spin { to { transform: rotate(360deg); } }

/* Dropdown "Mais ações" */
.osp-mais-wrap { position: relative; }

.osp-menu-backdrop { position: fixed; inset: 0; z-index: 90; }

.osp-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 91;
    min-width: 205px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--sollas-border);
    background: var(--sollas-surface);
    box-shadow: 0 12px 32px rgba(15,23,42,.14);
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: osx-fade .16s ease-out;
}

.osp-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 11px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--sollas-text-main);
    font-size: .76rem;
    font-weight: 600;
    font-family: var(--sollas-font);
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.osp-menu-item i { width: 16px; text-align: center; font-size: 13px; color: var(--sollas-primary); }
.osp-menu-item:hover { background: var(--sollas-primary-light); }

/* ════════════════════════════════════════════════════════════
   STEPPER DO CICLO
   ════════════════════════════════════════════════════════════ */
.oss-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 22px;
    border: 1px solid var(--sollas-border);
    border-radius: 14px;
    background: var(--sollas-surface);
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    overflow-x: auto;
    scrollbar-width: thin;
}

.oss-step {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    padding: 6px 11px;
    border-radius: 11px;
    border: 1.5px solid transparent;
    transition: all .18s ease;
}

.oss-step-ico {
    width: 30px; height: 30px;
    border-radius: 9px;
    border: 1.5px solid var(--sollas-border);
    background: var(--sollas-bg);
    color: var(--sollas-text-muted);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all .18s ease;
}
.oss-step-ico i { font-size: 12px; }

.oss-step-info { display: flex; flex-direction: column; }

.oss-step-nome {
    font-size: .72rem;
    font-weight: 700;
    color: var(--sollas-text-muted);
    white-space: nowrap;
    transition: color .16s;
}

.oss-step-sub {
    font-size: .63rem;
    color: var(--sollas-text-muted);
    opacity: .8;
    white-space: nowrap;
}

.oss-step.done {
    border-color: rgba(29,158,117,.28);
    background: var(--sollas-primary-light);
}
.oss-step.done .oss-step-ico {
    background: var(--sollas-primary);
    border-color: var(--sollas-primary);
    color: #fff;
}
.oss-step.done .oss-step-nome { color: var(--sollas-text-main); }
.oss-step.done .oss-step-sub  { color: var(--sollas-primary); opacity: 1; }

.oss-step.atual {
    border-color: var(--sollas-primary);
    background: var(--sollas-surface);
    box-shadow: 0 0 0 4px rgba(29,158,117,.14);
}
.oss-step.atual .oss-step-ico {
    border-color: var(--sollas-primary);
    color: var(--sollas-primary);
    background: var(--sollas-primary-light);
}
.oss-step.atual .oss-step-nome { color: var(--sollas-text-main); }
.oss-step.atual .oss-step-sub  { color: var(--sollas-primary); opacity: 1; }

.oss-linha {
    flex: 1;
    min-width: 14px;
    height: 2px;
    border-radius: 1px;
    background: var(--sollas-border);
    transition: background .2s ease;
}
.oss-linha.on { background: rgba(29,158,117,.45); }

/* ── Skeleton ────────────────────────────────────────────── */
.osp-skel-grid { display: flex; flex-direction: column; gap: 20px; }
.osp-skel {
    border-radius: 16px;
    background: linear-gradient(90deg, var(--sollas-border) 25%, var(--sollas-surface) 50%, var(--sollas-border) 75%);
    background-size: 200% 100%;
    animation: osp-shimmer 1.5s infinite linear;
}
@keyframes osp-shimmer { to { background-position: -200% 0; } }

/* ════════════════════════════════════════════════════════════
   COLUNA ÚNICA — todos os módulos empilhados, sem sidebar
   ════════════════════════════════════════════════════════════ */
.osx-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* ── Card modular ────────────────────────────────────────── */
.osx-card {
    border: 1px solid var(--sollas-border);
    border-radius: 16px;
    background: var(--sollas-surface);
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 28px rgba(15,23,42,.04);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.osx-card:hover {
    border-color: rgba(29,158,117,.28);
    box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 14px 34px rgba(15,23,42,.07);
}

.osx-card-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--sollas-border);
}

.osx-head-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--sollas-primary-light);
    color: var(--sollas-primary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.osx-head-icon i { font-size: 14px; }

.osx-head-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.osx-head-titulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--sollas-text-main);
}

.osx-head-desc {
    font-size: .72rem;
    font-weight: 500;
    color: var(--sollas-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.osx-head-error {
    margin-left: auto;
    font-size: .7rem;
    font-weight: 600;
    color: #EF4444;
}

.os-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--sollas-primary-light);
    color: var(--sollas-primary);
    font-size: .64rem;
    font-weight: 700;
}

.osx-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 18px 18px;
}

.osx-side-body { gap: 11px; padding: 14px 16px 16px; }

/* ── Grids fluidos (adaptam a qualquer largura) ──────────── */
.osx-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.osx-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 14px; }
.osx-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); gap: 14px; }
.osx-grid-5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 155px), 1fr)); gap: 14px; }
.osx-grid-6 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 14px; }

.osx-span-2 { grid-column: span 1; }
@container (min-width: 700px) {
    .osx-span-2 { grid-column: span 2; }
}

.osx-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.osx-label {
    font-size: .74rem;
    font-weight: 600;
    color: var(--sollas-text-main);
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.osx-req { color: #EF4444; font-weight: 700; }

.osx-select { width: 100%; }

/* Inputs — 42px, radius 11, hover verde, focus glow discreto */
.osx-body .form-input,
.osx-body .form-select {
    height: 42px;
    border-radius: 11px;
    padding: 0 14px;
    box-sizing: border-box;
    width: 100%;
    font-size: .82rem;
    transition: border-color .17s ease, box-shadow .17s ease, background .17s ease;
}
.osx-body .form-input:hover,
.osx-body .form-select:hover { border-color: rgba(29,158,117,.5); }
.osx-body .form-input:focus,
.osx-body .form-select:focus {
    outline: none;
    border-color: var(--sollas-primary);
    box-shadow: 0 0 0 4px rgba(29,158,117,.10);
}
.osx-body .form-input::placeholder { color: var(--sollas-text-muted); opacity: .55; }

.osx-body .osx-textarea {
    height: auto !important;
    resize: vertical;
    line-height: 1.5;
    padding: 10px 14px !important;
}

.osx-body .osx-readonly {
    background: var(--sollas-bg);
    color: var(--sollas-text-muted);
    cursor: default;
}

.osx-body .pk-trigger {
    min-height: 42px;
    border-radius: 11px;
    transition: border-color .17s ease, box-shadow .17s ease;
}
.osx-body .pk-trigger:hover { border-color: rgba(29,158,117,.5); }

.osx-field .form-field { margin: 0; }

/* ── Aviso de regra de negócio ───────────────────────────── */
.osx-status-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 11px;
    border-radius: 10px;
    background: rgba(245,158,11,.1);
    border: 1px solid rgba(245,158,11,.35);
    color: #F59E0B;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;
}
.osx-status-warn i { flex-shrink: 0; margin-top: 2px; font-size: 12px; }

/* ════════════════════════════════════════════════════════════
   MÓDULO ITENS
   ════════════════════════════════════════════════════════════ */
.osx-actionbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 18px;
    border-bottom: 1px solid var(--sollas-border);
    background: rgba(0,0,0,.008);
}

.osx-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 33px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1.5px solid var(--sollas-border);
    background: var(--sollas-surface);
    color: var(--sollas-text-main);
    font-size: .72rem;
    font-weight: 700;
    font-family: var(--sollas-font);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .17s ease, background .17s ease, transform .17s ease;
}
.osx-action-btn i { font-size: 11px; color: var(--sollas-primary); }
.osx-action-btn:hover { border-color: rgba(29,158,117,.5); background: var(--sollas-primary-light); }
.osx-action-btn:active { transform: scale(.98); }

.osx-action-btn.primario {
    border-color: rgba(29,158,117,.35);
    background: var(--sollas-primary-light);
    color: var(--sollas-primary);
}
.osx-action-btn.primario:hover { border-color: var(--sollas-primary); background: rgba(29,158,117,.18); }

.osx-add-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1.5px solid rgba(29,158,117,.35);
    background: var(--sollas-primary-light);
    color: var(--sollas-primary);
    font-size: .72rem;
    font-weight: 700;
    font-family: var(--sollas-font);
    cursor: pointer;
    white-space: nowrap;
    transition: background .17s ease, border-color .17s ease, transform .17s ease;
}
.osx-add-btn i { font-size: 10px; }
.osx-add-btn:hover { background: rgba(29,158,117,.18); border-color: var(--sollas-primary); }
.osx-add-btn:active { transform: scale(.98); }

.osx-head-error + .osx-add-btn { margin-left: 12px; }

/* ── Tabela — o próprio container mede a largura; colunas
      se ocultam progressivamente conforme aperta ──────────── */
.osx-tbl-scroll {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-width: thin;
    container-type: inline-size;
}

.osx-tbl { width: 100%; border-collapse: collapse; }

.osx-tbl-itens { min-width: 880px; table-layout: fixed; }

.osx-tbl th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 9px 12px;
    font-size: .6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--sollas-text-muted);
    text-align: left;
    background: var(--sollas-bg);
    border-bottom: 1px solid var(--sollas-border);
    white-space: nowrap;
}
.osx-tbl-itens th:nth-child(1) { width: 17%; }  /* Item        */
.osx-tbl-itens th:nth-child(2) { width: 14%; }  /* Descrição   */
.osx-tbl-itens th:nth-child(3) { width: 12%; }  /* Técnico     */
.osx-tbl-itens th:nth-child(4) { width: 7%;  }  /* Qtd         */
.osx-tbl-itens th:nth-child(5) { width: 11%; }  /* Valor Unit  */
.osx-tbl-itens th:nth-child(6) { width: 11%; }  /* Desconto    */
.osx-tbl-itens th:nth-child(7) { width: 11%; }  /* Subtotal    */
.osx-tbl-itens th:nth-child(8) { width: 9%;  }  /* Status      */
.osx-tbl-itens th:nth-child(9) { width: 8%;  }  /* Ações       */

/* Largura apertada: some a Descrição (o nome do item já identifica) */
@container (max-width: 1020px) {
    .osx-tbl-itens th:nth-child(2),
    .osx-tbl-itens td:nth-child(2) { display: none; }
    .osx-tbl-itens { min-width: 720px; }
}

/* Muito apertada: some também o Status do item */
@container (max-width: 800px) {
    .osx-tbl-itens th:nth-child(8),
    .osx-tbl-itens td:nth-child(8) { display: none; }
    .osx-tbl-itens { min-width: 600px; }
}

/* Variante enxuta — Pedido (sem Técnico/Desconto/Status por item) */
.osx-tbl-pedido { min-width: 640px; table-layout: fixed; }
.osx-tbl-pedido th:nth-child(1) { width: 26%; }  /* Produto     */
.osx-tbl-pedido th:nth-child(2) { width: 24%; }  /* Descrição   */
.osx-tbl-pedido th:nth-child(3) { width: 10%; }  /* Qtd         */
.osx-tbl-pedido th:nth-child(4) { width: 16%; }  /* Valor Unit  */
.osx-tbl-pedido th:nth-child(5) { width: 16%; }  /* Subtotal    */
.osx-tbl-pedido th:nth-child(6) { width: 8%;  }  /* Ações       */

@container (max-width: 720px) {
    .osx-tbl-pedido th:nth-child(2),
    .osx-tbl-pedido td:nth-child(2) { display: none; }
    .osx-tbl-pedido { min-width: 480px; }
}

.osx-tbl td {
    padding: 8px 12px;
    font-size: .76rem;
    color: var(--sollas-text-main);
    border-bottom: 1px solid var(--sollas-border);
    vertical-align: middle;
}

.osx-tbl tbody tr { transition: background .14s ease; }
.osx-tbl tbody tr:nth-child(even) { background: rgba(0,0,0,.012); }
.osx-tbl tbody tr:hover { background: rgba(29,158,117,.05); }
.osx-tbl tbody tr:last-child td { border-bottom: none; }

.osx-tc { text-align: center; }
.osx-tr { text-align: right; white-space: nowrap; }

.osx-td-nome {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.osx-item-tipo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 7px;
    margin-right: 7px;
    vertical-align: middle;
}
.osx-item-tipo i { font-size: 10px; }
.osx-item-tipo.servico { background: var(--sollas-primary-light); color: var(--sollas-primary); }
.osx-item-tipo.produto { background: rgba(59,130,246,.12); color: #3B82F6; }

.osx-td-desc-txt {
    color: var(--sollas-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.osx-td-total { font-weight: 700; }

.osx-row-select {
    width: 100%;
    max-width: 140px;
    height: 30px;
    padding: 0 7px;
    border-radius: 8px;
    border: 1.5px solid var(--sollas-border);
    background: var(--sollas-surface);
    color: var(--sollas-text-main);
    font-size: .72rem;
    font-weight: 600;
    font-family: var(--sollas-font);
    transition: border-color .17s ease;
}
.osx-row-select:hover { border-color: rgba(29,158,117,.5); }
.osx-row-select:focus { outline: none; border-color: var(--sollas-primary); }

.osx-qty {
    width: 48px;
    height: 30px;
    text-align: center;
    border-radius: 8px;
    border: 1.5px solid var(--sollas-border);
    background: var(--sollas-surface);
    color: var(--sollas-text-main);
    font-size: .74rem;
    font-weight: 700;
    font-family: var(--sollas-font);
    transition: border-color .17s ease, box-shadow .17s ease;
}
.osx-qty:hover { border-color: rgba(29,158,117,.5); }
.osx-qty:focus { outline: none; border-color: var(--sollas-primary); box-shadow: 0 0 0 3px rgba(29,158,117,.10); }

.osx-td-desc .form-field { margin: 0; display: inline-block; }
.osx-td-desc .form-input {
    height: 30px !important;
    width: 92px;
    padding: 0 9px !important;
    border-radius: 8px !important;
    font-size: .74rem !important;
    text-align: right;
}

.osx-item-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.3);
    color: #F59E0B;
    font-size: .64rem;
    font-weight: 700;
}

.osx-td-acoes { display: inline-flex; gap: 5px; }

.osx-mini-btn {
    width: 26px; height: 26px;
    border-radius: 8px;
    border: 1.5px solid var(--sollas-border);
    background: var(--sollas-surface);
    color: var(--sollas-text-muted);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.osx-mini-btn i { font-size: 11px; }
.osx-mini-btn:hover { border-color: rgba(29,158,117,.5); background: var(--sollas-primary-light); color: var(--sollas-primary); }
.osx-mini-btn.danger:hover { border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.1); color: #EF4444; }

.osx-tbl-empty {
    text-align: center;
    color: var(--sollas-text-muted);
    font-size: .74rem;
    padding: 22px 14px;
}
.osx-tbl-empty i { margin-right: 6px; opacity: .7; }

/* ════════════════════════════════════════════════════════════
   MÓDULO FINANCEIRO — campos numa única linha + parcelas
   compactas em chips horizontais (sem empilhar)
   ════════════════════════════════════════════════════════════ */
.osx-parcelas-sec {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

.osx-sec-titulo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--sollas-text-muted);
}
.osx-sec-titulo i { color: var(--sollas-primary); font-size: 12px; }

.osx-parcelas-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 130px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.osx-parcela-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid var(--sollas-border);
    background: var(--sollas-bg);
    font-size: .74rem;
    white-space: nowrap;
    transition: border-color .15s ease;
}
.osx-parcela-chip:hover { border-color: rgba(29,158,117,.4); }
.osx-parcela-chip b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    border-radius: 6px;
    background: var(--sollas-primary-light);
    color: var(--sollas-primary);
    font-size: .66rem;
    font-weight: 800;
}
.osx-parcela-chip span { color: var(--sollas-text-muted); font-weight: 600; }
.osx-parcela-chip em { font-style: normal; font-weight: 800; color: var(--sollas-text-main); }

.osx-parcela-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    margin-left: 2px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--sollas-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}
.osx-parcela-remove:hover { background: rgba(239,68,68,.12); color: #EF4444; }

.osx-parcelas-hint {
    font-size: .74rem;
    color: var(--sollas-text-muted);
    font-style: italic;
}

/* ════════════════════════════════════════════════════════════
   MÓDULO TOTALIZADORES — consolida todos os valores do documento
   (elimina a duplicação entre Itens e Financeiro)
   ════════════════════════════════════════════════════════════ */
.osx-totz-grid {
    display: flex;
    gap: 18px;
    align-items: stretch;
    flex-wrap: wrap;
}

.osx-tiles {
    flex: 1 1 420px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
    gap: 12px;
    align-content: start;
}

.osx-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--sollas-border);
    background: rgba(0,0,0,.012);
    min-width: 0;
}

.osx-tile-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .68rem;
    font-weight: 600;
    color: var(--sollas-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.osx-tile-label i { font-size: 10px; color: var(--sollas-primary); flex-shrink: 0; }

.osx-tile-valor {
    font-size: .92rem;
    font-weight: 800;
    color: var(--sollas-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.osx-valor-pago   { color: #10B981 !important; }
.osx-valor-devido { color: #EF4444 !important; }

.osx-total-final {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 220px;
    padding: 16px 22px;
    border-radius: 14px;
    border: 1px solid rgba(29,158,117,.32);
    background: linear-gradient(160deg, var(--sollas-primary-light), rgba(29,158,117,.03));
}

.osx-total-final-label {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--sollas-primary);
}

.osx-total-final-valor {
    font-size: clamp(1.7rem, 3cqw, 2.3rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--sollas-primary);
    white-space: nowrap;
}

.osx-total-final-sub {
    font-size: .72rem;
    font-weight: 600;
    color: var(--sollas-text-muted);
}

/* ════════════════════════════════════════════════════════════
   RODAPÉ: Timeline · Ações Rápidas · Arquivos (fluido)
   ════════════════════════════════════════════════════════════ */
.osx-bottom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 22px;
    align-items: start;
}

.osx-res-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.osx-res-key {
    font-size: .7rem;
    font-weight: 600;
    color: var(--sollas-text-muted);
    flex-shrink: 0;
}

.osx-res-val {
    font-size: .74rem;
    font-weight: 700;
    color: var(--sollas-text-main);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Timeline ────────────────────────────────────────────── */
.osx-hist-item { display: flex; align-items: flex-start; gap: 10px; transition: opacity .16s ease; }
.osx-hist-item.pendente { opacity: .45; }

.osx-hist-ico {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--sollas-primary-light);
    color: var(--sollas-primary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.osx-hist-ico i { font-size: 10px; }
.osx-hist-ico.autorizada { background: rgba(20,184,166,.12);  color: #14B8A6; }
.osx-hist-ico.execucao   { background: rgba(59,130,246,.12);  color: #3B82F6; }
.osx-hist-ico.pagamento  { background: rgba(139,92,246,.12);  color: #8B5CF6; }
.osx-hist-ico.concluida  { background: rgba(16,185,129,.14);  color: #10B981; }

.osx-hist-titulo { display: block; font-size: .76rem; font-weight: 700; color: var(--sollas-text-main); }
.osx-hist-quando { display: block; font-size: .68rem; color: var(--sollas-text-muted); margin-top: 1px; }

/* ── Ações rápidas ───────────────────────────────────────── */
.osx-acoes { gap: 9px; }

.osx-acoes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr));
    gap: 7px;
}

.osx-acao {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1.5px solid var(--sollas-border);
    background: var(--sollas-bg);
    cursor: pointer;
    font-family: var(--sollas-font);
    text-align: left;
    transition: border-color .17s ease, background .17s ease, transform .17s ease;
    min-width: 0;
}
.osx-acao:hover { border-color: rgba(29,158,117,.4); background: var(--sollas-primary-light); }
.osx-acao:active { transform: scale(.99); }

.osx-acao-icon {
    width: 26px; height: 26px;
    border-radius: 8px;
    background: var(--sollas-primary-light);
    color: var(--sollas-primary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.osx-acao-icon i { font-size: 11px; }

.osx-acao-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.osx-acao-titulo { font-size: .72rem; font-weight: 700; color: var(--sollas-text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osx-acao-sub    { font-size: .66rem; color: var(--sollas-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.osx-acao-plus { font-size: 1rem; font-weight: 700; color: var(--sollas-primary); flex-shrink: 0; }

.osx-acao-destaque {
    border-color: rgba(29,158,117,.45);
    background: var(--sollas-primary-light);
}

.osx-acao-mini { padding: 7px 9px; gap: 7px; }

/* ── Arquivos ────────────────────────────────────────────── */
.osx-btn-visualizar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    height: 34px;
    border-radius: 9px;
    border: 1.5px solid rgba(29,158,117,.35);
    background: var(--sollas-primary-light);
    color: var(--sollas-primary);
    font-size: .72rem;
    font-weight: 700;
    font-family: var(--sollas-font);
    cursor: pointer;
    transition: background .17s ease, border-color .17s ease;
}
.osx-btn-visualizar:hover { background: rgba(29,158,117,.18); border-color: var(--sollas-primary); }
.osx-btn-visualizar i { font-size: 11px; }

/* ════════════════════════════════════════════════════════════
   ADAPTAÇÃO POR LARGURA REAL DA PÁGINA
   ════════════════════════════════════════════════════════════ */
@container (max-width: 1180px) {
    .oss-step-sub { display: none; }
    .oss-step { padding: 6px 9px; }
}

@container (max-width: 640px) {
    .oss-step-info { display: none; }
    .osp-hero-acoes { width: 100%; justify-content: flex-end; }
    .osx-total-final { min-width: 0; width: 100%; }
}

@media (max-width: 760px) {
    .osp-page { padding: 14px 12px 90px; }
}

/* ════════════════════════════════════════════════════════════
   DARK MODE
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] .osp-page {
    background:
        radial-gradient(ellipse at 20% 10%, rgba(16,185,129,0.06) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 80%, rgba(139,92,246,0.05) 0%, transparent 55%),
        var(--sollas-bg);
}
[data-theme="dark"] .osp-btn { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .osp-btn.primario { background: linear-gradient(135deg, #10B981 0%, #059669 100%); border: none; }
[data-theme="dark"] .osp-tooltip { background: #1a2332; border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .osp-menu { background: #1a2332; border-color: rgba(255,255,255,.1); box-shadow: 0 12px 32px rgba(0,0,0,.4); }
[data-theme="dark"] .oss-stepper { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .oss-step-ico { background: rgba(0,0,0,.3); }
[data-theme="dark"] .oss-step.done .oss-step-ico { background: var(--sollas-primary); }
[data-theme="dark"] .oss-step.done { background: rgba(29,158,117,.1); }
[data-theme="dark"] .oss-step.atual { background: rgba(255,255,255,.02); }
[data-theme="dark"] .osx-card {
    background: rgba(255,255,255,.015);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 10px 28px rgba(0,0,0,.18);
}
[data-theme="dark"] .osx-card:hover { border-color: rgba(29,158,117,.35); }
[data-theme="dark"] .osx-card-head { border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .osx-actionbar { background: rgba(255,255,255,.015); border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .osx-action-btn { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .osx-action-btn.primario { background: rgba(29,158,117,.12); border-color: rgba(29,158,117,.35); }
[data-theme="dark"] .osx-tbl th { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .osx-tbl td { border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .osx-tbl tbody tr:nth-child(even) { background: rgba(255,255,255,.015); }
[data-theme="dark"] .osx-qty,
[data-theme="dark"] .osx-row-select { background: rgba(0,0,0,.3); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .osx-mini-btn { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .osx-parcela-chip { background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .osx-tile { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .osx-total-final {
    background: linear-gradient(160deg, rgba(29,158,117,.12), rgba(29,158,117,.03));
    border-color: rgba(29,158,117,.3);
}
[data-theme="dark"] .osx-acao { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .osx-body .osx-readonly { background: rgba(0,0,0,.25); }