/* ============================================================
   LETHOR UI · PALLETGO
   Referência oficial: PalletGo-todas-as-telas.html

   Regras:
   - cabeçalho = navegação e identidade
   - contexto = dado da operação
   - conteúdo = tarefa
   - ação = o que fazer agora
   - tema claro como padrão
   ============================================================ */

:root {
    --lt-fonte:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --lt-fonte-mono:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    --lt-t-11: .6875rem;
    --lt-t-12: .75rem;
    --lt-t-13: .8125rem;
    --lt-t-14: .875rem;
    --lt-t-15: .9375rem;
    --lt-t-16: 1rem;
    --lt-t-18: 1.125rem;
    --lt-t-21: 1.3125rem;
    --lt-t-26: 1.625rem;
    --lt-t-32: 2rem;

    --lt-peso-normal: 400;
    --lt-peso-medio: 500;
    --lt-peso-forte: 600;
    --lt-peso-maximo: 700;

    --lt-fundo: #f4f5f2;
    --lt-superficie: #ffffff;
    --lt-sup-2: #f8f8f6;
    --lt-sup-3: #eceee9;

    --lt-texto: #19201d;
    --lt-texto-2: #4f5954;
    --lt-apagado: #75807a;

    --lt-borda: #dfe3de;
    --lt-borda-forte: #cbd2cc;

    --lt-acao: #1d4234;
    --lt-acao-hover: #17362b;
    --lt-acao-suave: #e8f0ec;

    --lt-acento: #d9a441;
    --lt-acento-suave: #fff6e3;

    --lt-ok: #277548;
    --lt-ok-bg: #e9f6ee;

    --lt-aten: #9a6717;
    --lt-aten-bg: #fff5df;

    --lt-erro: #a83d3d;
    --lt-erro-bg: #fceaea;

    --lt-info: #426887;
    --lt-info-bg: #eaf2f8;

    --lt-sombra:
        0 1px 2px rgba(25,32,29,.04),
        0 10px 32px rgba(25,32,29,.06);

    --lt-r-1: 8px;
    --lt-r-2: 12px;
    --lt-r-3: 16px;
    --lt-r-4: 20px;
    --lt-r-pilula: 999px;

    --lt-e-1: 4px;
    --lt-e-2: 8px;
    --lt-e-3: 12px;
    --lt-e-4: 16px;
    --lt-e-5: 20px;
    --lt-e-6: 24px;
    --lt-e-8: 32px;

    --pg-topo-h: 56px;
    --pg-contexto-h: 44px;
    --pg-alvo-op: 56px;
    --pg-tela-max: 520px;
}


/* Reset controlado */

html {
    min-height: 100%;
    background: var(--lt-fundo);
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;

    background: var(--lt-fundo) !important;
    color: var(--lt-texto) !important;

    font-family: var(--lt-fonte) !important;
    font-size: var(--lt-t-14);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

* {
    box-sizing: border-box;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: inherit;
}


/* ============================================================
   CABEÇALHOS
   ============================================================ */

.pgx-top,
.pg-dashboard-header,
.admin-header,
.detail-header,
.pga-header,
.pg-admin-top,
.admin-topbar {
    min-height: var(--pg-topo-h) !important;

    background: var(--lt-superficie) !important;
    color: var(--lt-texto) !important;

    border: 0 !important;
    border-bottom: 1px solid var(--lt-borda) !important;

    box-shadow: none !important;

    display: flex;
    align-items: center;

    padding:
        max(6px, env(safe-area-inset-top))
        max(12px, env(safe-area-inset-right))
        6px
        max(12px, env(safe-area-inset-left)) !important;
}

.pgx-top a,
.pgx-top .top-user,
.pga-header a,
.pg-admin-top a {
    color: var(--lt-texto) !important;
}

.pgx-brand,
.pga-brand,
.admin-brand,
.detail-brand,
.consulta-brand,
.result-brand {
    font-weight: var(--lt-peso-maximo) !important;
    letter-spacing: -.02em !important;
}

.pgx-brand img,
.pga-logo img,
.pg-admin-logo img,
.admin-brand-icon img,
.detail-brand-icon img {
    object-fit: contain;
}


/* botão de navegação sempre 44x44 */

.pg-back,
.nc-back-btn,
.pg-menu-btn,
.pga-menu-button,
.pg-main-menu-button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;

    padding: 0 !important;

    border-radius: var(--lt-r-2) !important;
    border: 1px solid var(--lt-borda) !important;

    background: var(--lt-superficie) !important;
    color: var(--lt-texto) !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    box-shadow: none !important;
    text-decoration: none !important;
}


/* ============================================================
   MENU
   ============================================================ */

.pg-dropdown-menu,
.pga-menu-panel,
.pga-user-panel {
    background: var(--lt-superficie) !important;
    color: var(--lt-texto) !important;

    border: 1px solid var(--lt-borda) !important;
    border-radius: var(--lt-r-3) !important;

    box-shadow: var(--lt-sombra) !important;
}

.pg-dropdown-menu a,
.pga-menu-panel a {
    color: var(--lt-texto) !important;
    text-transform: none !important;
}

.pg-dropdown-menu a:hover,
.pga-menu-panel a:hover {
    background: var(--lt-sup-2) !important;
}


/* ============================================================
   CONTEÚDO / CARDS
   ============================================================ */

.pgx-shell {
    background: var(--lt-fundo) !important;
}

.pgx-card,
.pg-card,
.card,
.admin-card,
.detail-card,
.result-card,
.info-card,
.consulta-title-card,
.result-title-card,
.admin-title-card,
.pga-panel,
.pga-metric,
.pgv-load-card,
.pg-corp-kpi-card,
.pg-corp-flow-panel,
.pg-corp-stage-card,
.pg-corp-secondary-card,
.pg-welcome-card,
.pg-journey-card {
    background: var(--lt-superficie) !important;
    color: var(--lt-texto) !important;

    border: 1px solid var(--lt-borda) !important;
    border-radius: var(--lt-r-3) !important;

    box-shadow: var(--lt-sombra) !important;
}

.pgx-card {
    padding: var(--lt-e-5) !important;
}

.pgx-card.compact {
    width: min(100%, var(--pg-tela-max)) !important;
}

h1,
h2,
h3 {
    color: var(--lt-texto);
    letter-spacing: -.025em;
}

h1 {
    font-weight: var(--lt-peso-maximo) !important;
}

p,
.subtitle,
.muted,
.pg-muted {
    color: var(--lt-texto-2) !important;
}


/* ============================================================
   ETAPAS E CONTEXTO
   ============================================================ */

.steps,
.journey {
    gap: var(--lt-e-2) !important;
}

.steps span,
.steps b,
.journey span,
.journey b {
    min-height: 40px;

    background: var(--lt-sup-2) !important;
    color: var(--lt-texto-2) !important;

    border: 1px solid var(--lt-borda) !important;
    border-radius: var(--lt-r-2) !important;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    font-weight: var(--lt-peso-forte) !important;
}

.steps .active,
.journey b {
    background: var(--lt-acao-suave) !important;
    color: var(--lt-acao) !important;
    border-color: #bfd1c7 !important;
}

.eyebrow,
.stage,
.pg-corp-eyebrow,
.pg-eyebrow {
    color: var(--lt-acao) !important;
    font-size: var(--lt-t-12) !important;
    font-weight: var(--lt-peso-maximo) !important;

    letter-spacing: 0 !important;
    text-transform: none !important;
}

.summary-line {
    min-height: var(--pg-contexto-h);

    background: var(--lt-sup-2) !important;
    color: var(--lt-texto-2) !important;

    border: 1px solid var(--lt-borda) !important;
    border-radius: var(--lt-r-2) !important;

    display: flex;
    align-items: center;
}


/* ============================================================
   MÉTRICAS
   ============================================================ */

.metrics,
.summary,
.macro-grid {
    gap: var(--lt-e-2) !important;
}

.metrics > div,
.summary .metric,
.macro-item,
.result-info-item,
.info-card {
    background: var(--lt-sup-2) !important;
    border: 1px solid var(--lt-borda) !important;
    border-radius: var(--lt-r-2) !important;
    box-shadow: none !important;
}

.metrics strong,
.metric strong,
.macro-value {
    color: var(--lt-texto) !important;
    font-variant-numeric: tabular-nums;
}

.metrics small,
.metric span,
.macro-label {
    color: var(--lt-apagado) !important;
    text-transform: none !important;
}


/* ============================================================
   FORMULÁRIOS
   ============================================================ */

label {
    color: var(--lt-texto-2);
    font-weight: var(--lt-peso-forte);
    text-transform: none !important;
    letter-spacing: 0 !important;
}

input,
select,
textarea,
.scan-form input,
.param-input,
.admin-field input,
.admin-field select {
    width: 100%;

    min-height: 44px;

    background: var(--lt-superficie) !important;
    color: var(--lt-texto) !important;

    border: 1px solid var(--lt-borda-forte) !important;
    border-radius: var(--lt-r-2) !important;

    box-shadow: none !important;
    outline: none !important;
}

input:focus,
select:focus,
textarea:focus,
.scan-form input:focus {
    border-color: var(--lt-acao) !important;

    box-shadow:
        0 0 0 3px rgba(29, 66, 52, .13) !important;
}


/* Operação/coletor */

.scan-form input {
    min-height: var(--pg-alvo-op) !important;
    font-size: var(--lt-t-18) !important;
    font-weight: var(--lt-peso-forte) !important;
}


/* ============================================================
   BOTÕES
   ============================================================ */

button,
.button,
.btn,
.admin-btn,
.pg-admin-btn,
.detail-btn,
.pg-btn {
    min-height: 44px;

    border-radius: var(--lt-r-2) !important;

    font-weight: var(--lt-peso-forte) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;

    box-shadow: none !important;
}

button,
.button,
.btn.primary,
.admin-btn-primary,
.pg-btn-primary {
    background: var(--lt-acao) !important;
    color: #fff !important;

    border: 1px solid var(--lt-acao) !important;
}

button:hover,
.button:hover,
.btn.primary:hover {
    background: var(--lt-acao-hover) !important;
}

button.secondary,
.btn.secondary,
.btn-blue,
.pg-btn-secondary,
.admin-btn-secondary {
    background: var(--lt-superficie) !important;
    color: var(--lt-acao) !important;

    border: 1px solid var(--lt-borda-forte) !important;
}

.pgx-card .scan-form button,
.camera-layout .scan-form button {
    min-height: var(--pg-alvo-op) !important;
}


/* ============================================================
   FEEDBACK E STATUS
   ============================================================ */

.feedback,
.status,
.badge,
.status-badge,
.chip,
.pgv-status,
.pg-badge,
.user-status {
    border-radius: var(--lt-r-pilula) !important;

    font-weight: var(--lt-peso-forte) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.feedback {
    border-radius: var(--lt-r-2) !important;
}

.feedback.neutral,
.status.neutral,
.badge-neutral {
    background: var(--lt-sup-3) !important;
    color: var(--lt-texto-2) !important;
}

.feedback.success,
.status.success,
.badge-ok,
.status-badge.ok,
.pgv-status.done,
.user-active {
    background: var(--lt-ok-bg) !important;
    color: var(--lt-ok) !important;
}

.feedback.warning,
.status.warning,
.badge-warn,
.status-badge.partial,
.pgv-status.open {
    background: var(--lt-aten-bg) !important;
    color: var(--lt-aten) !important;
}

.feedback.error,
.status.danger,
.badge-error,
.user-inactive {
    background: var(--lt-erro-bg) !important;
    color: var(--lt-erro) !important;
}

.status.info {
    background: var(--lt-info-bg) !important;
    color: var(--lt-info) !important;
}


/* ============================================================
   PROGRESSO
   ============================================================ */

.progress,
.pgv-progress-bar,
.pg-corp-progress-track {
    background: var(--lt-sup-3) !important;
    border-radius: var(--lt-r-pilula) !important;
    overflow: hidden;
}

.progress i,
.pgv-progress-bar i,
.pg-corp-progress-track i {
    background: var(--lt-acao) !important;
    border-radius: inherit;
}


/* ============================================================
   TABELAS
   ============================================================ */

.table-wrap,
.responsive-table,
.pga-table-wrap,
.pg-table-shell {
    width: 100%;
    overflow: auto;

    border: 1px solid var(--lt-borda) !important;
    border-radius: var(--lt-r-3) !important;

    background: var(--lt-superficie);
}

table,
.pg-table,
.admin-table,
.pga-table {
    border-collapse: collapse !important;
    background: var(--lt-superficie) !important;
}

th {
    background: var(--lt-sup-2) !important;
    color: var(--lt-apagado) !important;

    font-size: var(--lt-t-11) !important;
    font-weight: var(--lt-peso-maximo) !important;

    text-transform: none !important;
    letter-spacing: .01em !important;
}

td {
    color: var(--lt-texto) !important;
}

th,
td {
    border-color: var(--lt-borda) !important;
}

tr:hover td {
    background: #fafbf9 !important;
}


/* ============================================================
   CÂMERA
   ============================================================ */

.camera-layout {
    width: min(100%, var(--pg-tela-max)) !important;
}

.camera-box {
    background: #111714 !important;

    border: 0 !important;
    border-radius: var(--lt-r-3) !important;

    box-shadow: none !important;
}

.camera-box .target {
    border-color: #fff !important;
}

#cameraStatus {
    background: rgba(15, 20, 18, .82) !important;
    color: #fff !important;
}


/* ============================================================
   PAINEL ADMINISTRATIVO
   ============================================================ */

.pg-admin-home,
.pg-admin-dashboard,
.pg-corporate-dashboard,
.dashboard-shell,
.consulta-shell,
.result-shell,
.admin-shell,
.detail-shell,
.pga-shell {
    background: var(--lt-fundo) !important;
}

.pg-corp-header,
.pg-admin-hero,
.pga-welcome {
    background: var(--lt-superficie) !important;
    color: var(--lt-texto) !important;

    border: 1px solid var(--lt-borda) !important;
    border-radius: var(--lt-r-3) !important;

    box-shadow: var(--lt-sombra) !important;
}

.pg-corp-header h1,
.pg-corp-header p,
.pg-admin-hero h1,
.pg-admin-hero p,
.pga-welcome h1,
.pga-welcome p {
    color: inherit !important;
}

.pg-corp-primary-action,
.pg-dashboard-action {
    background: var(--lt-acao) !important;
    color: #fff !important;
}


/* ============================================================
   LICENÇA
   ============================================================ */

.trial-banner {
    background: var(--lt-acento-suave) !important;
    color: var(--lt-aten) !important;
    border-bottom: 1px solid #ecd9ae !important;
}

.trial-banner.danger {
    background: var(--lt-erro-bg) !important;
    color: var(--lt-erro) !important;
}


/* ============================================================
   MOBILE / COLETOR
   ============================================================ */

@media (max-width: 640px) {

    .pgx-shell {
        min-height: calc(100dvh - var(--pg-topo-h)) !important;

        padding:
            var(--lt-e-3)
            max(var(--lt-e-3), env(safe-area-inset-right))
            calc(var(--lt-e-4) + env(safe-area-inset-bottom))
            max(var(--lt-e-3), env(safe-area-inset-left)) !important;

        align-items: start !important;
    }

    .pgx-card,
    .pgx-card.compact,
    .camera-layout {
        width: 100% !important;
        max-width: var(--pg-tela-max) !important;
    }

    .pgx-card {
        min-height: auto !important;
        border-radius: var(--lt-r-3) !important;
        padding: var(--lt-e-4) !important;
    }

    .metrics {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    }

    .metrics > div {
        padding: 8px 5px !important;
    }

    .metrics strong {
        font-size: var(--lt-t-18) !important;
    }

    .camera-box {
        min-height: 210px !important;
        height: min(42dvh, 390px) !important;
    }

    .top-user {
        display: none !important;
    }
}


@media (max-width: 360px) {

    .pgx-card {
        padding: 12px !important;
    }

    .steps span,
    .steps b {
        font-size: var(--lt-t-11) !important;
    }

    .metrics small {
        font-size: 10px !important;
    }
}


/* ============================================================
   ACESSIBILIDADE
   ============================================================ */

:focus-visible {
    outline: 3px solid rgba(29, 66, 52, .28) !important;
    outline-offset: 2px !important;
}

[disabled] {
    opacity: .48;
    cursor: not-allowed;
}


/* ============================================================
   PALLETGO · ESTRUTURA OPERACIONAL APROVADA
   ============================================================ */

.pg-app-operacional {
    display: block !important;
    min-height: calc(100dvh - var(--pg-topo-h)) !important;
    padding: 0 !important;
}

.pg-operacao {
    width: min(100%, var(--pg-tela-max));
    min-height: calc(100dvh - var(--pg-topo-h));
    margin: 0 auto;
    background: var(--lt-fundo);
}


/* topo */

.pg-topo {
    height: var(--pg-topo-h) !important;
    min-height: var(--pg-topo-h) !important;
    gap: 10px !important;
}

.pg-topo__inicio {
    display: flex;
    align-items: center;
}

.pg-topo__marca {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    min-width: 0;
    text-decoration: none;
    color: var(--lt-texto) !important;
}

.pg-topo__marca img {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    object-fit: contain;
}

.pg-topo__marca span {
    font-size: 15px;
    font-weight: var(--lt-peso-maximo);
    letter-spacing: -.02em;
}

.pg-topo__meio {
    flex: 1 1 auto;
}

.pg-topo__usuario {
    max-width: 180px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--lt-texto-2) !important;
    font-size: 12px;
}

.pg-topo__sair {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    color: var(--lt-texto-2) !important;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
}


/* contexto */

.pg-contexto {
    min-height: var(--pg-contexto-h);
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    background: var(--lt-sup-2);
    border-bottom: 1px solid var(--lt-borda);
}

.pg-contexto::-webkit-scrollbar {
    display: none;
}

.pg-dado {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex: 0 0 auto;
    padding: 4px 9px;
    border-radius: var(--lt-r-1);
    background: var(--lt-superficie);
    border: 1px solid var(--lt-borda);
}

.pg-dado__rotulo {
    color: var(--lt-apagado);
    font-size: 10px;
    font-weight: var(--lt-peso-forte);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.pg-dado__valor {
    color: var(--lt-texto);
    font-size: var(--lt-t-13);
    font-weight: var(--lt-peso-forte);
    font-variant-numeric: tabular-nums;
}


/* corpo */

.pg-corpo {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
}

.pg-corpo--rolagem {
    overflow-y: auto;
}

.pg-corpo--acoes {
    padding-bottom: 26px;
}


/* etapas */

.pg-etapas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 7px;
}

.pg-etapas--2 {
    grid-template-columns: repeat(2, minmax(0,1fr));
}

.pg-etapa {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--lt-borda);
    border-radius: var(--lt-r-2);
    background: var(--lt-superficie);
    color: var(--lt-apagado);
    font-size: 11px;
    font-weight: var(--lt-peso-forte);
}

.pg-etapa b {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--lt-sup-3);
    color: var(--lt-texto-2);
    font-size: 10px;
}

.pg-etapa.is-active {
    border-color: #b9cec3;
    background: var(--lt-acao-suave);
    color: var(--lt-acao);
}

.pg-etapa.is-active b {
    background: var(--lt-acao);
    color: #fff;
}

.pg-etapa.is-done {
    color: var(--lt-ok);
}

.pg-etapa.is-done b {
    background: var(--lt-ok-bg);
    color: var(--lt-ok);
}


/* tarefa */

.pg-tarefa {
    display: grid;
    gap: 4px;
}

.pg-tarefa__rotulo {
    color: var(--lt-acao);
    font-size: var(--lt-t-12);
    font-weight: var(--lt-peso-maximo);
}

.pg-tarefa h1 {
    margin: 0;
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.06;
}

.pg-tarefa p {
    margin: 0;
    max-width: 440px;
    line-height: 1.42;
    font-size: var(--lt-t-14);
}


/* indicadores */

.pg-indicadores {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
}

.pg-indicador {
    min-width: 0;
    padding: 10px 7px;
    border: 1px solid var(--lt-borda);
    border-radius: var(--lt-r-2);
    background: var(--lt-superficie);
    text-align: center;
}

.pg-indicador span {
    display: block;
    color: var(--lt-apagado);
    font-size: 10px;
    font-weight: var(--lt-peso-forte);
}

.pg-indicador strong {
    display: block;
    margin-top: 3px;
    color: var(--lt-texto);
    font-size: 20px;
    line-height: 1;
    font-weight: var(--lt-peso-maximo);
    font-variant-numeric: tabular-nums;
}


/* bipagem */

.pg-bipagem {
    margin: 0 !important;
}

.pg-bipagem label {
    display: grid;
    gap: 6px;
    margin: 0;
    color: var(--lt-texto-2);
    font-size: var(--lt-t-12);
    font-weight: var(--lt-peso-forte);
}

.pg-bipagem input {
    min-height: var(--pg-alvo-op) !important;
    margin: 0 !important;
    padding: 0 14px !important;
    font-family: var(--lt-fonte-mono) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
}

.pg-ajuda-operacional {
    margin-top: -6px;
    color: var(--lt-apagado);
    font-size: 11px;
    line-height: 1.4;
}


/* progresso */

.pg-progresso {
    height: 7px !important;
    margin: -3px 0 0 !important;
}


/* última leitura */

.pg-ultima-leitura {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    padding: 8px 11px;
    border-radius: var(--lt-r-2);
    border: 1px solid var(--lt-borda);
    background: var(--lt-sup-2);
}

.pg-ultima-leitura span {
    color: var(--lt-apagado);
    font-size: 11px;
}

.pg-ultima-leitura strong {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--lt-texto);
    font-family: var(--lt-fonte-mono);
    font-size: 12px;
}


/* histórico */

.pg-historico {
    overflow: hidden;
    border: 1px solid var(--lt-borda);
    border-radius: var(--lt-r-3);
    background: var(--lt-superficie);
}

.pg-historico > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    cursor: pointer;
    list-style: none;
    color: var(--lt-texto);
    font-size: 12px;
    font-weight: var(--lt-peso-forte);
}

.pg-historico > summary::-webkit-details-marker {
    display: none;
}

.pg-historico > summary::after {
    content: "⌄";
    margin-left: auto;
    color: var(--lt-apagado);
}

.pg-historico[open] > summary::after {
    transform: rotate(180deg);
}

.pg-historico .history-columns {
    border-top: 1px solid var(--lt-borda);
    padding: 10px;
}


/* câmera */

.pg-distribuicao .camera-box {
    width: 100%;
    height: min(42dvh, 340px) !important;
    min-height: 220px !important;
    border-radius: var(--lt-r-3) !important;
}

.pg-distribuicao .target {
    inset: 25% 8%;
}

.pg-manual-panel {
    overflow: hidden;
    border: 1px solid var(--lt-borda);
    border-radius: var(--lt-r-3);
    background: var(--lt-superficie);
}

.pg-manual-panel > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    list-style: none;
    cursor: pointer;
    color: var(--lt-texto-2);
    font-size: 12px;
    font-weight: var(--lt-peso-forte);
}

.pg-manual-panel > summary::-webkit-details-marker {
    display: none;
}

.pg-manual-panel > summary::after {
    content: "⌄";
    margin-left: auto;
}

.pg-manual-panel[open] > summary {
    border-bottom: 1px solid var(--lt-borda);
}

.pg-manual-panel .scan-form {
    padding: 12px;
}


/* motorista */

.pg-motorista {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--lt-apagado);
    font-size: 11px;
}

.pg-motorista strong {
    color: var(--lt-texto);
    font-size: 12px;
}


/* comprovante */

.pg-proof-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--lt-borda);
    border-radius: var(--lt-r-3);
    background: var(--lt-superficie);
}

.pg-proof-card h2 {
    margin: 0;
    font-size: 17px;
}

.pg-proof-card label:not(.accept-row) {
    display: grid;
    gap: 5px;
}

.pg-proof-card input[type="text"],
.pg-proof-card input:not([type]) {
    min-height: 46px;
}


/* ações */

.pg-acoes {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    padding-bottom:
        calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--lt-superficie);
    border-top: 1px solid var(--lt-borda);
    box-shadow: 0 -6px 18px rgba(25,32,29,.05);
}

.pg-acoes--unica > * {
    width: 100%;
}

.pg-acoes .lt-btn,
.lt-btn--op {
    min-height: var(--pg-alvo-op) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px !important;
    border-radius: var(--lt-r-2) !important;
    text-decoration: none;
    font-size: var(--lt-t-15);
    font-weight: var(--lt-peso-forte);
}

.pg-acoes .lt-btn--primario,
.lt-btn--primario {
    background: var(--lt-acao) !important;
    color: #fff !important;
    border: 1px solid var(--lt-acao) !important;
}

.pg-sticky-finish-bar.pg-acoes {
    position: sticky !important;
    bottom: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
}

.pg-sticky-finish-info.pg-acao-contexto {
    flex: 1 1 auto;
    min-width: 0;
}

.pg-sticky-finish-info.pg-acao-contexto span {
    display: block;
    color: var(--lt-apagado);
    font-size: 10px;
}

.pg-sticky-finish-info.pg-acao-contexto strong {
    display: block;
    margin-top: 2px;
    color: var(--lt-texto);
    font-size: 12px;
}

.pg-sticky-finish-form {
    flex: 0 0 auto;
}

.pg-sticky-finish-button {
    width: auto !important;
    min-width: 148px;
}


/* resultado */

.pg-resultado-card {
    margin: auto 0;
    padding: 24px 18px;
    border: 1px solid var(--lt-borda);
    border-radius: var(--lt-r-3);
    background: var(--lt-superficie);
    text-align: center;
    box-shadow: var(--lt-sombra);
}

.pg-resultado-icone {
    margin: 0 auto 14px !important;
    background: var(--lt-ok-bg) !important;
    color: var(--lt-ok) !important;
}

.pg-resultado-card h1 {
    margin: 6px 0 8px;
}

.pg-resultado-card p {
    margin: 0;
}


/* telas baixas */

@media (max-height: 650px) {

    .pg-corpo {
        gap: 10px;
        padding-top: 10px;
    }

    .pg-tarefa p {
        font-size: 12px;
    }

    .pg-distribuicao .camera-box {
        min-height: 170px !important;
        height: 28dvh !important;
    }

    .pg-etapa {
        min-height: 34px;
    }

}


/* celulares pequenos */

@media (max-width: 380px) {

    .pg-topo__usuario {
        display: none !important;
    }

    .pg-topo__marca span {
        display: none;
    }

    .pg-corpo {
        padding-left: 11px;
        padding-right: 11px;
    }

    .pg-contexto {
        padding-left: 9px;
        padding-right: 9px;
    }

    .pg-sticky-finish-bar.pg-acoes {
        align-items: stretch;
        flex-direction: column;
    }

    .pg-sticky-finish-form,
    .pg-sticky-finish-button {
        width: 100% !important;
    }

}


/* desktop: mantém operação com largura de dispositivo */

@media (min-width: 700px) {

    .pg-operacao {
        min-height: calc(100dvh - var(--pg-topo-h));
        border-left: 1px solid var(--lt-borda);
        border-right: 1px solid var(--lt-borda);
    }

}