/*
 * Componentes do padrão visual Support aplicados ao SEV (etapa 2). Esta camada vem DEPOIS de supportsev.css e leva os componentes que
 * as telas já usam (sp-btn, sp-table, sp-card, sp-empty-state, janelas, menu) para as medidas do padrão, que é o do SupportERP:
 * botão de 36 px com cantos de 8 px (44 px em tela de toque), tabela compacta (folgada no toque), cartão com borda suave,
 * estado vazio sem borda, janela que vira folha de baixo no celular. Os valores vêm só dos tokens --ss-*.
 * Quando as telas migrarem para as classes ss-*, estas regras passam a ser o próprio CSS do componente.
 */

/* ── Botões ── */
.sp-btn {
    min-height: 36px;
    padding: 0 16px;
    border-radius: var(--ss-radius-btn);
    font-size: .93rem;
    font-weight: 600;
    transition: background var(--ss-transition), border-color var(--ss-transition), color var(--ss-transition), box-shadow var(--ss-transition);
}

.sp-btn:focus-visible {
    outline: none;
    box-shadow: var(--ss-ux-focus-ring);
}

.sp-btn:disabled,
.sp-btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}

.sp-btn-sm {
    min-height: 30px;
    padding: 0 12px;
    font-size: .86rem;
}

.sp-btn-lg {
    min-height: 44px;
    padding: 0 24px;
    font-size: 1rem;
}

.sp-btn-ghost:hover {
    background: var(--ss-bg-soft);
    color: var(--ss-primary);
}

.sp-icon-btn {
    width: 36px;
    padding: 0;
}

a, button, summary, label, .sp-btn {
    touch-action: manipulation;
}

/* tela de toque (inclusive o campo): alvos de 44 px */
@media (pointer: coarse) {
    .sp-btn { min-height: 44px; }
    .sp-btn-sm { min-height: 40px; }
    .sp-btn-lg { min-height: 48px; }
    .sp-icon-btn { width: 44px; }
    .sp-nav-link { min-height: 44px; }
    .sp-table th,
    .sp-table td { padding: 13px 14px; }
}

/* ── Tabela: compacta no computador, cabeçalho sem fundo ── */
.sp-table-wrap {
    border-color: var(--ss-border);
}

.sp-table th,
.sp-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--ss-border-soft);
}

.sp-table td {
    font-variant-numeric: tabular-nums;
}

.sp-table th {
    border-bottom: 1px solid var(--ss-border);
    background: transparent;
    color: var(--ss-text-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    white-space: nowrap;
}

.sp-table tbody tr {
    transition: background var(--ss-transition);
}

.sp-table tbody tr:hover {
    background: var(--ss-bg-soft);
}

.sp-table .sp-num {
    text-align: right;
    white-space: nowrap;
}

/* ── Cartão: borda suave e contorno leve ── */
.sp-card {
    border-color: var(--ss-border-soft);
    box-shadow: var(--ss-shadow-sm), 0 0 0 1px color-mix(in srgb, var(--ss-border) 35%, transparent);
}

/* ── Estado vazio: sem borda, centralizado, com ícone ── */
.sp-empty-state {
    justify-items: center;
    gap: 6px;
    padding: 40px 20px;
    border: 0;
    background: transparent;
    color: var(--ss-text-secondary);
    text-align: center;
}

.sp-empty-state strong {
    color: var(--ss-text-primary);
    font-size: 1rem;
}

.sp-empty-state > span:not(.sp-empty-state-icon) {
    max-width: 420px;
    font-size: .88rem;
}

.sp-empty-state-icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin-bottom: 4px;
    place-items: center;
    border-radius: var(--ss-radius-full);
    background: var(--ss-primary-light);
    color: var(--ss-primary);
}

/* ── Ação em ícone (editar, excluir, ver) ── */
.sp-icon-action {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--ss-radius-sm);
    background: transparent;
    color: var(--ss-text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--ss-transition), color var(--ss-transition);
}

.sp-icon-action:hover,
.sp-icon-action:focus-visible {
    background: var(--ss-bg-soft);
    color: var(--ss-text-primary);
}

.sp-icon-action--edit:hover { color: var(--ss-info); }
.sp-icon-action--danger:hover { color: var(--ss-danger); }
.sp-icon-action--success:hover { color: var(--ss-success); }
.sp-icon-action--warning:hover { color: var(--ss-warning); }

/* ação principal do bloco: ícone preenchido na cor da marca (ou da situação) */
.sp-icon-action--primary,
.sp-icon-action--primary:hover,
.sp-icon-action--primary:focus-visible { background: var(--ss-primary); color: var(--ss-on-primary); }
.sp-icon-action--primary:hover { background: var(--ss-primary-dark); }
.sp-icon-action--primary.sp-icon-action--success { background: var(--ss-success); }
.sp-icon-action--primary.sp-icon-action--danger { background: var(--ss-danger); }
.sp-icon-action--primary.sp-icon-action--warning { background: var(--ss-warning); }

/* botão que liga e desliga (marcar foto como duplicada etc.) */
.sp-icon-action.is-active { background: var(--ss-primary-light); color: var(--ss-primary); }
.sp-icon-action.is-active.sp-icon-action--danger { background: color-mix(in srgb, var(--ss-danger) 14%, transparent); color: var(--ss-danger); }

.sp-icon-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sp-icon-action:disabled, .sp-icon-action[disabled] { opacity: .5; cursor: not-allowed; }

.sp-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

@media (pointer: coarse) {
    .sp-icon-action { width: 40px; height: 40px; }
}

/* ── Janela: no celular vira folha vinda de baixo ── */
@media (max-width: 920px) {
    .sp-modal-backdrop {
        align-items: end;
        padding: 0;
    }

    .sp-modal {
        width: 100%;
        max-height: 92dvh;
        overflow-y: auto;
        border-radius: 18px 18px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ── Título da página, conteúdo e topo: medidas do padrão ── */
.sp-page-title h1 {
    font-size: 1.6rem;
    font-weight: 800;
}

.sp-sidebar .sp-nav-link {
    border-radius: var(--ss-radius-input);
}

/* Estrutura (celular): topo compacto e barra de navegação inferior, como no ERP (o fundo do menu lateral já vem do app.css) */
.sp-bottom-nav {
    display: none;
}

.sp-pwa-install-btn[hidden] {
    display: none;
}

@media (max-width: 920px) {
    body.sp-sidebar-open {
        overflow: hidden;
    }

    .sp-topbar {
        flex-direction: row;
        align-items: center;
        min-height: 52px;
        gap: 10px;
        padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left));
    }

    .sp-topbar > div:first-child {
        flex: 1;
        min-width: 0;
    }

    .sp-page-title h1 {
        margin: 0;
        font-size: 1.05rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sp-page-title p {
        display: none;
    }

    .sp-topbar .sp-actions {
        flex-wrap: nowrap;
        gap: 6px;
    }

    /* o menu fica na barra inferior */
    .sp-topbar .sp-menu-toggle {
        display: none;
    }

    .sp-content {
        padding: 14px calc(14px + env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
    }

    .sp-bottom-nav {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        position: fixed;
        inset: auto 0 0 0;
        z-index: 50;
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--ss-bg-surface);
        border-top: 1px solid var(--ss-border);
        box-shadow: 0 -2px 14px rgba(0, 0, 0, .08);
    }

    .sp-bottom-nav a,
    .sp-bottom-nav button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 58px;
        padding: 6px 2px;
        border: 0;
        background: transparent;
        color: var(--ss-text-muted);
        font: inherit;
        font-size: .68rem;
        font-weight: 600;
        text-decoration: none;
        position: relative;
    }

    .sp-bottom-nav svg {
        width: 22px;
        height: 22px;
    }

    .sp-bottom-nav__burger {
        font-size: 20px;
        line-height: 22px;
    }

    .sp-bottom-nav [aria-current="page"] {
        color: var(--ss-primary);
    }

    .sp-bottom-nav [aria-current="page"]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 28%;
        right: 28%;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--ss-primary);
    }

    /* botões flutuantes acima da barra inferior */
    .sp-topbar .sp-user-chip {
        display: none;
    }

    .sp-pwa-install-btn {
        bottom: calc(74px + env(safe-area-inset-bottom));
    }
}

/* ── Paginação (resources/views/vendor/livewire/tailwind.blade.php): números das páginas, setas e total ── */
.sp-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 14px;
}
.sp-pagination__info { margin: 0; color: var(--ss-text-secondary); font-size: .85rem; }
.sp-pagination__info strong { color: var(--ss-text-primary); font-weight: 600; }
.sp-pagination__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sp-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-btn);
    background: var(--ss-bg-surface);
    color: var(--ss-text-primary);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ss-transition), border-color var(--ss-transition), color var(--ss-transition);
}
.sp-pagination__item:hover:not(.is-current):not(.is-disabled):not(.is-gap) {
    border-color: var(--ss-primary);
    color: var(--ss-primary);
}
.sp-pagination__item:focus-visible { outline: 2px solid var(--ss-primary); outline-offset: 2px; }
.sp-pagination__item.is-current {
    border-color: var(--ss-primary);
    background: var(--ss-primary);
    color: var(--ss-on-primary);
    cursor: default;
}
.sp-pagination__item.is-disabled { opacity: .45; cursor: default; }
.sp-pagination__item.is-gap { min-width: 24px; padding: 0 2px; border-color: transparent; background: transparent; color: var(--ss-text-muted); cursor: default; }
@media (pointer: coarse) {
    .sp-pagination__item { min-width: 44px; height: 44px; }
}
@media (max-width: 560px) {
    .sp-pagination { justify-content: center; }
    .sp-pagination__info { width: 100%; text-align: center; }
    .sp-pagination__far { display: none; }
}

/* ── Obra: faixa de KPIs, filtros, cabeçalho, abas, progresso e linhas de lista ── */
.sp-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.sp-kpi-mini { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); background: var(--sp-bg-surface); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.sp-kpi-mini:hover { border-color: var(--sp-primary); }
.sp-kpi-mini.is-active { border-color: var(--sp-primary); box-shadow: 0 0 0 2px var(--sp-primary-soft); }
.sp-kpi-mini__label { font-size: .78rem; color: var(--sp-text-muted); }
.sp-kpi-mini__value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.sp-kpi-mini--success .sp-kpi-mini__value { color: var(--sp-success); }
.sp-kpi-mini--warning .sp-kpi-mini__value { color: var(--sp-warning); }
.sp-kpi-mini--danger .sp-kpi-mini__value { color: var(--sp-danger); }
[x-cloak] { display: none !important; }
.sp-filterbar { padding: 12px 18px; background: var(--sp-bg-page); border-bottom: 1px solid var(--sp-border); }
.sp-filterbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sp-filterbar__search { position: relative; display: block; flex: 1 1 220px; max-width: 340px; margin: 0; }
.sp-filterbar__search > svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--sp-text-faint); pointer-events: none; }
.sp-filterbar .sp-input, .sp-filterbar .sp-select { min-height: 34px; padding: 5px 10px; font-size: .88rem; width: auto; }
.sp-filterbar__search > .sp-input { width: 100%; padding-left: 32px; }
.sp-filterbar__row > select { max-width: 200px; }
.sp-filterbar__toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm, 8px); background: var(--sp-bg-surface); color: var(--sp-text-muted); font-size: .86rem; font-weight: 600; cursor: pointer; }
.sp-filterbar__toggle:hover { background: var(--sp-bg-muted); color: var(--sp-text-primary); }
.sp-filterbar__count { display: inline-grid; min-width: 18px; height: 18px; place-items: center; border-radius: 9px; background: var(--sp-primary); color: #fff; font-size: .72rem; font-weight: 700; }
.sp-filterbar__clear { border: 0; background: none; color: var(--sp-text-muted); font-size: .84rem; font-weight: 600; text-decoration: underline; cursor: pointer; }
.sp-filterbar__actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.sp-filterbar__panel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-top: 8px; padding: 10px; border: 1px solid var(--sp-border-soft); border-radius: var(--sp-radius-md); background: var(--sp-bg-surface); }
.sp-filterbar__field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-filterbar__field .sp-label { font-size: .76rem; }
.sp-filterbar__field .sp-input { width: 168px; max-width: 100%; }
.sp-filterbar__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid color-mix(in srgb, var(--sp-primary) 35%, var(--sp-border)); border-radius: 999px; background: color-mix(in srgb, var(--sp-primary) 10%, transparent); color: var(--sp-text-primary); font-size: .78rem; font-weight: 600; cursor: pointer; }
.sp-chip:hover { background: color-mix(in srgb, var(--sp-danger) 12%, transparent); }
@media (max-width: 640px) { .sp-filterbar__row > .sp-filterbar__search { max-width: none; flex-basis: 100%; } .sp-filterbar__actions { margin-left: 0; } }
.sp-progress { display: inline-block; width: 100%; max-width: 160px; height: 8px; border-radius: 99px; background: var(--sp-border-soft); overflow: hidden; vertical-align: middle; }
.sp-progress__bar { display: block; height: 100%; border-radius: 99px; background: var(--sp-primary); }
.sp-note { font-size: .8rem; color: var(--sp-text-muted); }
.sp-obra-head { display: grid; gap: 14px; padding: 20px 24px; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); background: var(--sp-bg-surface); box-shadow: var(--sp-shadow-sm); }
.sp-obra-head__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sp-obra-head__title { margin: 0; font-size: 1.25rem; }
.sp-obra-head__sub { margin: 4px 0 0; color: var(--sp-text-muted); font-size: .9rem; }
.sp-obra-head__progress { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sp-obra-head__progress .sp-progress { max-width: 280px; }
.sp-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--sp-border); padding-bottom: 8px; overflow-x: auto; }
.sp-tabs .sp-btn { background: transparent; border-color: transparent; box-shadow: none; color: var(--sp-text-muted); }
.sp-tabs .sp-btn.is-active { background: var(--sp-primary-soft); color: var(--sp-primary-dark); border-color: transparent; font-weight: 600; }
.sp-tabs__badge { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: 99px; background: var(--sp-warning); color: #fff; font-size: .72rem; text-align: center; }
.sp-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sp-border-soft); color: inherit; text-decoration: none; }
.sp-list-row:last-child { border-bottom: 0; }
.sp-list-row__end { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sp-section-card-title { margin: 0 0 8px; font-size: .95rem; font-weight: 600; }
.sp-cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 900px) { .sp-cards-2 { grid-template-columns: 1fr; } }


/* ── Telas de configuração: cartões sempre abertos, grades alinhadas ao topo e barra de salvar fixa ── */
.sp-settings-form { display: grid; gap: 16px; align-items: start; }
.sp-form-grid { display: grid; gap: 16px; align-items: start; }
.sp-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-form-grid .sp-field, .sp-form-grid .sp-field-wide { align-content: start; }
.sp-form-grid .sp-field-wide { grid-column: 1 / -1; }
@media (max-width: 900px) { .sp-form-grid--3, .sp-form-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sp-form-grid--2, .sp-form-grid--3, .sp-form-grid--4 { grid-template-columns: 1fr; } }
.sp-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 18px; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); background: color-mix(in srgb, var(--sp-bg-surface) 94%, transparent); backdrop-filter: blur(6px); box-shadow: 0 -4px 16px rgba(0, 0, 0, .06); }
.sp-upload-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sp-upload-preview { display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--sp-border); border-radius: 8px; background: var(--sp-bg-page); flex-shrink: 0; }
.sp-upload-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 220px; min-width: 0; }
/* indicadores mais compactos em todas as telas */
.sp-kpi { min-height: 0; gap: 6px; padding: 14px 18px; }
.sp-kpi-value { font-size: 1.7rem; line-height: 1.1; margin: 0; }

.sp-kpi .sp-card-body { padding: 0; }

/* Personalização: formulário + prévia ao vivo */
.sp-settings-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.sp-settings-preview { position: sticky; top: 16px; }
@media (max-width: 1000px) { .sp-settings-split { grid-template-columns: 1fr; } .sp-settings-preview { position: static; } }
.sp-color-input { display: flex; gap: 8px; align-items: center; }
.sp-color-input input[type="color"] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--sp-border); border-radius: 6px; background: var(--sp-bg-surface); flex-shrink: 0; }
.sp-image-slot { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--sp-border); border-radius: 8px; }
.sp-preview { border: 1px solid var(--sp-border); border-radius: 10px; overflow: hidden; background: var(--sp-bg-surface); }
.sp-preview__bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--pv-primary); color: #fff; font-size: .9em; }
.sp-preview__bar span { opacity: .8; }
.sp-preview__body { display: grid; gap: 10px; padding: 14px; }
.sp-preview__text { margin: 0; }
.sp-preview__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-preview__btn { padding: 6px 14px; border-radius: 8px; color: #fff; font-weight: 600; font-size: .9em; }
.sp-preview__link { margin: 0; font-weight: 600; }
.sp-preview__chip { width: fit-content; padding: 2px 10px; border: 1px solid; border-radius: 999px; font-size: .82em; font-weight: 600; }


/* Saúde do Sistema */
.sp-health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.sp-health-item { padding: 12px 14px; border: 1px solid var(--sp-border); border-left: 4px solid var(--sp-success); border-radius: 8px; background: var(--sp-bg-surface); }
.sp-health-item--warning { border-left-color: var(--sp-warning); }
.sp-health-item--danger { border-left-color: var(--sp-danger); }
.sp-health-item__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp-health-item__msg { margin: 6px 0 0; font-size: .88rem; color: var(--sp-text-muted); }
.sp-health-item .sp-note { margin: 4px 0 0; }


/* Relatórios: cartões de trabalho com a mesma altura e ação no rodapé */
.sp-work-grid { align-items: stretch; }
.sp-work-card .sp-desc { min-height: 4.6em; }
.sp-work-card > .sp-icon-action { margin-top: auto; align-self: flex-start; }
.sp-field-help--inline { align-self: end; padding-bottom: 8px; }


/* Fluxo da campanha: linha do tempo das etapas */
.sp-flow-steps { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; overflow-x: auto; }
.sp-flow-step { flex: 1 1 0; min-width: 110px; display: grid; gap: 6px; justify-items: center; text-align: center; position: relative; color: var(--sp-text-faint); font-size: .8rem; }
.sp-flow-step::before { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 2px; background: var(--sp-border); z-index: 0; }
.sp-flow-step:first-child::before { display: none; }
.sp-flow-step__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--sp-border); background: var(--sp-bg-surface); font-weight: 700; font-size: .8rem; }
.sp-flow-step.is-done { color: var(--sp-text-muted); }
.sp-flow-step.is-done::before, .sp-flow-step.is-current::before { background: var(--sp-primary); }
.sp-flow-step.is-done .sp-flow-step__dot { background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; }
.sp-flow-step.is-current { color: var(--sp-text-primary); font-weight: 700; }
.sp-flow-step.is-current .sp-flow-step__dot { border-color: var(--sp-primary); color: var(--sp-primary); box-shadow: 0 0 0 3px var(--sp-primary-soft); }

.sp-readiness { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--sp-border); border-radius: 8px; background: var(--sp-bg-surface); }
.sp-readiness .sp-list-row { padding: 8px 0; }

/* Colaboradores: foto e pessoa */
.sp-person { display: flex; align-items: center; gap: 10px; }
.sp-person--large { align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.sp-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--sp-bg-muted); border: 1px solid var(--sp-border); }
.sp-avatar--large { width: 96px; height: 96px; }
.sp-avatar--initials { display: inline-grid; place-items: center; font-weight: 700; color: var(--sp-primary-dark); background: var(--sp-primary-soft); }
.sp-avatar--large.sp-avatar--initials { font-size: 1.6rem; }

/* cartão sem margem interna: filtro e tabela ocupam toda a largura */
.sp-card--flush > .sp-card-body { padding: 0; }
.sp-card--flush .sp-filterbar { border-radius: var(--sp-radius-md) var(--sp-radius-md) 0 0; border-bottom: 1px solid var(--sp-border); }
.sp-card--flush .sp-table-wrap { border: 0; border-radius: 0; box-shadow: none; }
.sp-card--flush .sp-pagination { padding: 12px 18px; }

/* tabelas de lista mais compactas para caber sem rolagem */
.sp-card--flush .sp-table th, .sp-card--flush .sp-table td { padding-left: 8px; padding-right: 8px; }
.sp-card--flush .sp-table th:first-child, .sp-card--flush .sp-table td:first-child { padding-left: 16px; }
.sp-card--flush .sp-table th:last-child, .sp-card--flush .sp-table td:last-child { padding-right: 16px; }

.sp-table td.sp-cell-wrap { white-space: normal; }

/* Mapas dos ensaios (Leaflet) */
.sp-map { height: 340px; width: 100%; border-radius: 10px; border: 1px solid var(--sp-border); background: var(--sp-surface-soft, #f1f3f5); z-index: 0; }
.sp-map-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--sp-text-muted); font-size: .8rem; margin-top: 8px; }
.sp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; background: #8a94a3; }
.sp-dot--previsto { background: #2f6fed; }
.sp-dot--executado { background: #1f9d57; }
.sp-dot--outro { background: #8a94a3; }
.sp-dot--planejado { background: #c98a05; }
.sp-dot--pronto { background: #1f9d57; }
.sp-dot--campo { background: #2f6fed; }
.sp-dot--revisao { background: #0d9488; }
@media (max-width: 920px) { .sp-map { height: 280px; } }

/* Central de Configurações */
.sp-hub-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sp-hub-item { background: var(--ss-bg-surface); border: 1px solid var(--ss-border); border-left: 4px solid var(--ss-border); border-radius: 10px; color: inherit; display: grid; gap: 6px; padding: 12px 14px; text-decoration: none; }
.sp-hub-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.sp-hub-item--ok { border-left-color: #16a34a; }
.sp-hub-item--warn { border-left-color: #b45309; }
.sp-hub-item--bad { border-left-color: #b91c1c; }
.sp-hub-item__head { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
.sp-hub-item__text { color: var(--ss-text-muted); font-size: .85rem; line-height: 1.35; }
.sp-nav-label { color: var(--ss-sidebar-muted, var(--ss-text-muted)); display: block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; margin: 10px 12px 2px; text-transform: uppercase; }

.sp-nav-badge{margin-left:auto;min-width:20px;padding:1px 6px;border-radius:999px;background:#b54a3a;color:#fff;font-size:.7rem;font-weight:700;text-align:center;line-height:1.4}
a.sp-kpi-mini{text-decoration:none;color:inherit}

/* Abas entre telas irmãs de Configurações (SEV) */
.sp-tabs { border-bottom: 1px solid var(--ss-border); display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.sp-tab { border-bottom: 3px solid transparent; color: var(--ss-text-muted); font-weight: 600; padding: 8px 14px; text-decoration: none; }
.sp-tab:hover { color: var(--ss-text-primary); }
.sp-tab.is-active { border-bottom-color: var(--ss-primary, #15803d); color: var(--ss-text-primary); }

/* Dados da Empresa (SEV): colunas, painel de cadastro completo e prévia do documento */
.pc-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:20px;align-items:start}
@media (max-width:1180px){.pc-layout{grid-template-columns:1fr}.pc-aside{position:static!important}}
.pc-main,.pc-form{display:grid;gap:16px;min-width:0}
.pc-stack{display:grid;gap:8px}
.pc-main .sp-grid{align-items:start;gap:16px 18px}
.pc-main .sp-field{align-content:start;gap:7px}
.pc-main .sp-field .sp-input{width:100%;box-sizing:border-box}
.pc-main .sp-field-help{min-height:1.1em;margin:0}
.pc-muted{color:var(--sp-text-muted);font-size:.82rem;margin:0}
.pc-logo{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.pc-logo__box{width:140px;height:140px;border:1px solid var(--sp-border);border-radius:var(--sp-radius);display:flex;align-items:center;justify-content:center;overflow:hidden;background:conic-gradient(#e5e7eb 25%,#f8fafc 0 50%,#e5e7eb 0 75%,#f8fafc 0) 0 0/16px 16px;flex:none}
.pc-logo__box img{max-width:100%;max-height:100%;object-fit:contain}
.pc-logo__form{flex:1;min-width:240px;max-width:420px}
.pc-picked{margin:0;font-size:.82rem;padding:8px 10px;border-radius:var(--sp-radius);background:color-mix(in srgb,#2f6fed 10%,transparent)}
.pc-picked.is-warn{background:color-mix(in srgb,#c98a05 16%,transparent)}
.pc-chip{flex:none;white-space:nowrap;font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--sp-bg-soft,#eef1f4);color:var(--sp-text-muted)}
.pc-chip--ok{background:color-mix(in srgb,#1f9d57 16%,transparent);color:#157a43}
.pc-chip--warn{background:color-mix(in srgb,#c98a05 18%,transparent);color:#8a5d00}
.pc-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:14px}
.pc-images>*,.pc-stack>*{min-width:0}
.pc-img input[type=file],.pc-logo__form input[type=file]{max-width:100%}
.pc-img{display:grid;gap:8px;align-content:start;min-width:0;overflow:hidden;padding:12px;border:1px solid var(--sp-border);border-radius:var(--sp-radius-lg,var(--sp-radius))}
.pc-img__head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pc-img__head strong{min-width:0;overflow-wrap:anywhere}
.pc-img__stage{height:110px;border:1px dashed var(--sp-border);border-radius:var(--sp-radius);display:flex;align-items:center;justify-content:center;overflow:hidden;background:conic-gradient(#e5e7eb 25%,#f8fafc 0 50%,#e5e7eb 0 75%,#f8fafc 0) 0 0/16px 16px}
.pc-img__stage.is-dark{background:#1f2937}
.pc-img__stage img{max-width:100%;max-height:100%;object-fit:contain}
.pc-savebar{position:sticky;bottom:0;z-index:5;display:flex;justify-content:flex-end;align-items:center;gap:14px;padding:12px 16px;background:var(--sp-bg-surface);border:1px solid var(--sp-border);border-radius:var(--sp-radius);box-shadow:var(--sp-shadow-lg,0 8px 24px rgba(0,0,0,.12))}
.pc-dirty{color:#b45309;font-weight:600;font-size:.85rem}
.pc-aside{position:sticky;top:12px;display:grid;gap:14px;min-width:0}
.pc-panel{padding:14px;border:1px solid var(--sp-border);border-radius:var(--sp-radius-lg,var(--sp-radius));background:var(--sp-bg-surface);display:grid;gap:10px}
.pc-panel__head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pc-meter{height:8px;border-radius:999px;background:var(--sp-bg-soft,#eef1f4);overflow:hidden}
.pc-meter span{display:block;height:100%;background:var(--sp-primary);border-radius:999px}
.pc-checks{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:.88rem}
.pc-checks .is-ok{color:var(--sp-text-primary)}.pc-checks .is-ok span{color:#1f9d57;font-weight:700}
.pc-checks .is-missing{color:var(--sp-text-muted)}
.pc-doc{border:1px solid var(--sp-border);border-radius:8px;padding:14px;background:#fff;color:#18202b;display:grid;gap:6px;font-size:.82rem}
.pc-doc__top{display:flex;gap:12px;align-items:center}
.pc-doc__logo{width:64px;height:64px;display:flex;align-items:center;justify-content:center;flex:none}
.pc-doc__logo img{max-width:100%;max-height:100%;object-fit:contain}
.pc-doc__mark{display:grid;place-items:center;width:56px;height:56px;border-radius:10px;background:#eef1f4;color:#8a93a0;font-weight:800;font-size:.7rem}
.pc-doc__id{display:grid;gap:1px;min-width:0}.pc-doc__id b{font-size:.95rem;color:#0E2841}.pc-doc__id span{color:#5a6472}
.pc-doc__line{margin:0;color:#5a6472}
.pc-doc hr{border:0;border-top:3px solid #E97132;margin:4px 0}
.pc-doc__sign{display:grid;justify-items:center;gap:2px;text-align:center;margin-top:4px}
.pc-doc__sig{height:46px;max-width:100%;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.pc-doc__sig img{max-height:46px;max-width:160px;object-fit:contain}
.pc-doc__rule{width:180px;border-top:1px solid #334155}
.pc-doc__sign span{color:#5a6472}


/* ===== Alinhamento das telas de Ensaios (2026-10-22) ===== */
/* campos de uma mesma linha da grade ficam colados no topo: o campo mais curto não é esticado quando o vizinho tem texto de ajuda */
.sp-field { align-content: start; }
/* rótulo + valor somente leitura, com a mesma altura de um campo de formulário */
.sp-field-static { display: grid; gap: 9px; align-content: start; min-width: 0; }
.sp-field-static > .sp-static-value { margin: 0; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; overflow-wrap: anywhere; }
/* abas em grade: colunas de mesma largura, mesmo quando passam de uma linha */
.sp-tabs--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 6px; overflow: visible; }
.sp-tabs--grid .sp-btn { width: 100%; justify-content: center; text-align: center; white-space: normal; line-height: 1.2; min-height: 40px; }
/* faixa de resumo com textos: todos os valores no mesmo tamanho e no topo */
.sp-kpi-strip--text .sp-kpi-mini { min-height: 82px; align-content: start; }
.sp-kpi-strip--text .sp-kpi-mini__value { font-size: 1.15rem; overflow-wrap: anywhere; }
/* cartões lado a lado com a mesma altura */
.sp-grid--equal { align-items: stretch; }
.sp-grid--equal > .sp-card { height: 100%; }
/* linha de contexto (ex.: modelo do boletim do ensaio) */
.sp-meta-strip { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); background: var(--sp-bg-surface); font-size: .9rem; }
.sp-meta-strip > strong { font-weight: 600; color: var(--sp-text-muted); }
.sp-meta-strip .sp-btn { margin-left: auto; }
/* botão com ícone e texto (ação principal isolada) */
.sp-btn--icon-text { display: inline-flex; align-items: center; gap: 8px; }
.sp-btn--icon-text svg { flex: none; }
/* barra de salvar dentro do fluxo da página, alinhada à direita do cartão */
.sp-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.sp-tabs--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sp-tabs--cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1100px) {
    .sp-tabs--cols-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .sp-tabs--grid, .sp-tabs--cols-6, .sp-tabs--cols-7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-meta-strip .sp-btn { margin-left: 0; }
}
.sp-progress { display: block; height: 6px; margin: 4px 0 2px; border-radius: 99px; background: var(--sp-border); overflow: hidden; }
.sp-progress > span { display: block; height: 100%; background: var(--sp-primary); border-radius: 99px; }

/* ===== Relatórios de trabalho: ferramentas em cartões de mesma altura (2026-10-22) ===== */
.sp-tool-group { margin: 18px 0 8px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-text-muted); }
.sp-tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: stretch; }
.sp-tool { --tool-accent: var(--sp-border); display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 18px; border: 1px solid var(--sp-border); border-left: 4px solid var(--tool-accent); border-radius: var(--sp-radius-md); background: var(--sp-bg-surface); box-shadow: var(--sp-shadow-sm); }
.sp-tool--clay { --tool-accent: #c98a05; }
.sp-tool--moss { --tool-accent: var(--sp-primary); }
.sp-tool--slate { --tool-accent: #3b5b78; }
.sp-tool-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-tool-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-tool__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp-tool__head h4 { margin: 0; font-size: 1rem; }
.sp-tool__desc { margin: 0; color: var(--sp-text-muted); font-size: .88rem; line-height: 1.45; }
.sp-tool__actions { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 4px; }
.sp-tool__more > summary { cursor: pointer; font-weight: 600; font-size: .86rem; color: var(--sp-text-muted); }
.sp-tool__checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px 14px; margin-top: 8px; }
.sp-tool__checks label { display: flex; gap: 6px; align-items: center; font-size: .9rem; }
.sp-btn.is-disabled, .sp-btn[disabled] { opacity: .45; pointer-events: none; cursor: not-allowed; }
.sp-list-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--sp-border); }
.sp-list-filters .sp-input { flex: 1; min-width: 220px; }
.sp-list-filters .sp-select { width: auto; min-width: 170px; }
.sp-list-filters__check { display: inline-flex; gap: 6px; align-items: center; font-size: .9rem; }
@media (max-width: 1180px) { .sp-tool-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .sp-tool-grid--4, .sp-tool-grid--2 { grid-template-columns: 1fr; } }
.sp-kpi-strip--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1100px) { .sp-kpi-strip--7 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }