:root {
    --cor-primaria: #1d4ed8;
    --cor-primaria-escura: #1e3a8a;
    --cor-sucesso: #15803d;
    --cor-erro: #b91c1c;
    --cor-aviso: #b45309;
    --cor-fundo: #f4f6f9;
    --cor-superficie: #ffffff;
    --cor-borda: #e2e8f0;
    --cor-texto: #1e293b;
    --cor-texto-suave: #64748b;
    --sidebar-largura: 240px;
    --topbar-altura: 60px;
    --raio: 8px;
    --sombra: 0 1px 3px rgba(15, 23, 42, .08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-size: 14px;
}

a { color: var(--cor-primaria); text-decoration: none; }
a:hover { text-decoration: underline; }

.tela-guest {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cor-primaria-escura), var(--cor-primaria));
}

.cartao-guest {
    background: var(--cor-superficie);
    padding: 40px;
    border-radius: var(--raio);
    width: 100%;
    max-width: 380px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}

.cartao-guest h1 {
    font-size: 22px;
    margin: 0 0 4px;
}

.cartao-guest p.subtitulo {
    color: var(--cor-texto-suave);
    margin: 0 0 24px;
}

.layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-largura);
    background: #0f172a;
    color: #cbd5e1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 20;
    transition: transform .2s ease, width .2s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

.sidebar__marca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    font-weight: 700;
    font-size: 17px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    flex-shrink: 0;
}
.sidebar__marca-sigla { display: none; }

.sidebar__busca {
    position: relative;
    margin: 12px 14px 0;
    flex-shrink: 0;
}
.sidebar__busca svg {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: #64748b;
    pointer-events: none;
}
.sidebar__busca input {
    width: 100%;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 13px;
    padding: 7px 10px 7px 30px;
}
.sidebar__busca input::placeholder { color: #64748b; }
.sidebar__busca input:focus {
    outline: none;
    border-color: var(--cor-primaria);
    background: rgba(255, 255, 255, .1);
}
.sidebar__busca-atalho { display: none; }

.sidebar__nav { padding: 12px 10px 20px; flex: 1; }

.icone { width: 18px; height: 18px; flex-shrink: 0; }

.sidebar__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Categorias ---------- */
.sidebar__grupo { --cor-grupo: #94a3b8; margin-top: 2px; }

.sidebar__grupo-titulo {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    font-size: 14px;
    font-weight: 600;
    color: #e2e8f0;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background .15s ease;
}
.sidebar__grupo-titulo:hover { background: rgba(255, 255, 255, .06); }
.sidebar__grupo.aberto > .sidebar__grupo-titulo { background: rgba(255, 255, 255, .05); }

.sidebar__grupo-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    color: var(--cor-grupo);
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
@supports (background: color-mix(in srgb, red 10%, blue)) {
    .sidebar__grupo-icone { background: color-mix(in srgb, var(--cor-grupo) 20%, transparent); }
}
.sidebar__grupo.aberto > .sidebar__grupo-titulo .sidebar__grupo-icone {
    background: var(--cor-grupo);
    color: #0f172a;
}

.sidebar__grupo-rotulo { flex: 1; min-width: 0; }

.sidebar__chevron {
    width: 14px;
    height: 14px;
    color: #64748b;
    transition: transform .2s ease;
}
.sidebar__grupo.aberto > .sidebar__grupo-titulo .sidebar__chevron { transform: rotate(90deg); color: #cbd5e1; }

/* Abre/fecha animado: a linha do grid vai de 0fr a 1fr (sem precisar saber a altura). */
.sidebar__grupo-painel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .22s ease, visibility 0s linear .22s;
}
.sidebar__grupo.aberto > .sidebar__grupo-painel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition-delay: 0s;
}
.sidebar__grupo-links {
    min-height: 0;
    overflow: hidden;
    margin-left: 22px;
    padding-left: 6px;
    border-left: 2px solid rgba(255, 255, 255, .08);
}
.sidebar__grupo.aberto > .sidebar__grupo-painel > .sidebar__grupo-links { margin-top: 2px; margin-bottom: 6px; }
@supports (border-color: color-mix(in srgb, red 10%, blue)) {
    .sidebar__grupo.aberto > .sidebar__grupo-painel > .sidebar__grupo-links {
        border-left-color: color-mix(in srgb, var(--cor-grupo) 45%, transparent);
    }
}
.sidebar__flyout-titulo { display: none; }

.sidebar__grupo--sem-resultado { display: none; }

/* ---------- Itens ---------- */
.sidebar__item { position: relative; display: flex; align-items: center; }

.sidebar__link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 30px 7px 8px;
    color: #cbd5e1;
    font-size: 13.5px;
    line-height: 1.3;
    border-radius: 6px;
    transition: background .15s ease, color .15s ease;
}
.sidebar__link:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.sidebar__link-icone { width: 16px; height: 16px; color: var(--cor-grupo); opacity: .9; }
.sidebar__link-texto { flex: 1; min-width: 0; }
.sidebar__link-texto mark {
    background: rgba(250, 204, 21, .35);
    color: #fff;
    border-radius: 2px;
    padding: 0 1px;
}

.sidebar__link.ativo { color: #fff; background: rgba(255, 255, 255, .08); font-weight: 600; }
@supports (background: color-mix(in srgb, red 10%, blue)) {
    .sidebar__link.ativo { background: color-mix(in srgb, var(--cor-grupo) 20%, transparent); }
}
.sidebar__link.ativo .sidebar__link-icone { opacity: 1; }

.sidebar__link--oculto, .sidebar__item--oculto { display: none; }

.sidebar__item--painel { margin-bottom: 6px; }
.sidebar__link--painel { --cor-grupo: #60a5fa; padding: 8px 8px; font-size: 14px; font-weight: 600; color: #e2e8f0; }
.sidebar__link--painel .sidebar__link-icone { width: 18px; height: 18px; margin: 0 6px; }

.sidebar__link:focus-visible,
.sidebar__grupo-titulo:focus-visible,
.sidebar__fav:focus-visible,
.sidebar__busca-atalho:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: -2px;
}

/* ---------- Bolinhas (contadores) ---------- */
.sidebar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: 10px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}
.sidebar__badge--info { background: #f59e0b; color: #1c1917; }

/* ---------- Favoritos ---------- */
.sidebar__fav {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 5px;
    color: #64748b;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, color .15s ease;
}
.sidebar__fav .icone { width: 14px; height: 14px; }
.sidebar__item:hover .sidebar__fav,
.sidebar__fav:focus-visible,
.sidebar__fav[aria-pressed="true"] { opacity: 1; }
.sidebar__fav:hover { color: #facc15; background: rgba(255, 255, 255, .08); }
.sidebar__fav[aria-pressed="true"] { color: #facc15; }
.sidebar__fav[aria-pressed="true"] .icone { fill: #facc15; }
@media (hover: none) {
    .sidebar__fav { opacity: .55; }
}

.sidebar__favoritos { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sidebar__secao-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 8px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94a3b8;
}
.sidebar__secao-titulo .icone { width: 12px; height: 12px; color: #facc15; fill: #facc15; }

.sidebar__busca-vazio {
    padding: 10px 8px;
    font-size: 12px;
    color: #64748b;
}

/* Estado inicial do menu nao anima (so os cliques do usuario) */
.sidebar--inicializando, .sidebar--inicializando * { transition: none !important; }

.topbar__menu { display: inline-flex; align-items: center; gap: 6px; }
.topbar__menu .icone { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
    .sidebar, .sidebar *, .conteudo { transition: none !important; }
}

/* ---------- Modo compacto (so desktop): so icones; a categoria abre como painel flutuante ---------- */
@media (min-width: 901px) {
    html.menu-compacto { --sidebar-largura: 68px; }

    html.menu-compacto .sidebar__marca { justify-content: center; padding: 18px 0; }
    html.menu-compacto .sidebar__marca-texto { display: none; }
    html.menu-compacto .sidebar__marca-sigla { display: inline; font-size: 20px; }

    html.menu-compacto .sidebar__busca { display: none; }
    html.menu-compacto .sidebar__busca-atalho {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 36px;
        margin: 12px auto 0;
        flex-shrink: 0;
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 8px;
        color: #94a3b8;
        cursor: pointer;
    }
    html.menu-compacto .sidebar__busca-atalho:hover { background: rgba(255, 255, 255, .12); color: #fff; }

    html.menu-compacto .sidebar__nav { padding: 12px 8px 20px; }

    html.menu-compacto .sidebar__grupo-titulo { justify-content: center; padding: 6px 0; }
    html.menu-compacto .sidebar__grupo-rotulo,
    html.menu-compacto .sidebar__chevron { display: none; }
    html.menu-compacto .sidebar__grupo--atual > .sidebar__grupo-titulo .sidebar__grupo-icone {
        box-shadow: 0 0 0 2px var(--cor-grupo);
    }
    html.menu-compacto .sidebar__grupo-titulo > .sidebar__badge {
        position: absolute;
        top: 1px;
        right: 8px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 10px;
        box-shadow: 0 0 0 2px #0f172a;
    }

    /* Painel flutuante (position: fixed escapa do overflow da barra; o topo vem do JS) */
    html.menu-compacto .sidebar__grupo-painel {
        display: block;
        position: fixed;
        left: 74px;
        top: var(--flyout-top, 0);
        width: 260px;
        max-height: calc(100vh - 16px);
        overflow-y: auto;
        padding: 8px;
        background: #1e293b;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 10px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
        opacity: 0;
        transform: translateX(-6px);
        transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
        z-index: 30;
    }
    html.menu-compacto .sidebar__grupo.aberto > .sidebar__grupo-painel {
        opacity: 1;
        transform: none;
        transition-delay: 0s;
    }
    html.menu-compacto .sidebar__grupo-links,
    html.menu-compacto .sidebar__grupo.aberto > .sidebar__grupo-painel > .sidebar__grupo-links {
        margin: 0;
        padding: 0;
        border: 0;
        overflow: visible;
    }
    html.menu-compacto .sidebar__flyout-titulo {
        display: block;
        margin: 2px 8px 6px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--cor-grupo);
    }

    /* Painel e favoritos viram so icone */
    html.menu-compacto .sidebar__item--painel .sidebar__link,
    html.menu-compacto .sidebar__favoritos .sidebar__link { justify-content: center; padding: 8px 0; }
    html.menu-compacto .sidebar__item--painel .sidebar__link-texto,
    html.menu-compacto .sidebar__favoritos .sidebar__link-texto,
    html.menu-compacto .sidebar__favoritos .sidebar__fav,
    html.menu-compacto .sidebar__secao-titulo span,
    html.menu-compacto .sidebar__favoritos .sidebar__badge { display: none; }
    html.menu-compacto .sidebar__secao-titulo { justify-content: center; margin-left: 0; margin-right: 0; }
    html.menu-compacto .sidebar__item--painel .sidebar__link-icone,
    html.menu-compacto .sidebar__favoritos .sidebar__link-icone { width: 20px; height: 20px; margin: 0; }
    html.menu-compacto .sidebar__busca-vazio { display: none; }
}

.conteudo {
    margin-left: var(--sidebar-largura);
    transition: margin-left .2s ease;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    height: var(--topbar-altura);
    background: var(--cor-superficie);
    border-bottom: 1px solid var(--cor-borda);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar__usuario { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.topbar__empresa { color: var(--cor-texto-suave); }

.pagina { padding: 24px; max-width: 1200px; width: 100%; margin: 0 auto; }

.pagina__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.pagina__cabecalho h1 { font-size: 20px; margin: 0; }

.cartao {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 20px;
    margin-bottom: 20px;
}

.cartao a { overflow-wrap: anywhere; }

.grade-formulario {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.grade-formulario--1col { grid-template-columns: minmax(0, 1fr); }

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; min-width: 0; }
.campo input, .campo select, .campo textarea { max-width: 100%; min-width: 0; }
.campo label { font-weight: 600; font-size: 13px; }
.campo--checkbox { flex-direction: row; align-items: center; }

input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=date],
input[type=tel],
select,
textarea {
    padding: 9px 11px;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: var(--cor-texto);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}

.checkbox-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
}

.checkbox-lista label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    font-size: 13px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: var(--cor-primaria);
    color: #fff;
}

.btn:hover { background: var(--cor-primaria-escura); text-decoration: none; }
.btn--secundario { background: #fff; color: var(--cor-texto); border-color: var(--cor-borda); }
.btn--secundario:hover { background: #f1f5f9; }
.btn--perigo { background: var(--cor-erro); }
.btn--perigo:hover { background: #7f1d1d; }
.btn--bloco { width: 100%; }
.btn--pequeno { padding: 5px 10px; font-size: 12px; }

.alerta {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 13px;
}

.alerta--erro { background: #fef2f2; color: var(--cor-erro); border: 1px solid #fecaca; }
.alerta--aviso { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.alerta--sucesso { background: #f0fdf4; color: var(--cor-sucesso); border: 1px solid #bbf7d0; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
    text-align: left;
    padding: 10px 12px;
    color: var(--cor-texto-suave);
    border-bottom: 2px solid var(--cor-borda);
    font-weight: 600;
    white-space: nowrap;
}
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--cor-borda); vertical-align: middle; }
tbody tr:hover { background: #f8fafc; }

/* Tabela de itens (PDV, OS, Orcamento): largura fixa evita que o select de produto
   (que cresceria ate o nome mais longo) estoure a largura do cartao. */
.item-produto-select { width: 220px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-campo-calculo, .item-preco-input { width: 80px; }

.selo {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.selo--verde { background: #dcfce7; color: #166534; }
.selo--vermelho { background: #fee2e2; color: #991b1b; }
.selo--cinza { background: #e2e8f0; color: #475569; }
.selo--azul { background: #dbeafe; color: #1e40af; }
.selo--laranja { background: #ffedd5; color: #9a3412; }
.selo--roxo { background: #ede9fe; color: #5b21b6; }

.btn--whatsapp { background: #16a34a; }
.btn--whatsapp:hover { background: #15803d; }

.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.kanban__coluna {
    background: #eef2f7;
    border-radius: var(--raio);
    min-width: 260px;
    max-width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
}
.kanban__coluna-titulo {
    padding: 12px 14px 8px;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.kanban__coluna-corpo { padding: 0 10px 10px; overflow-y: auto; flex: 1; transition: background-color .1s ease; }
.kanban__coluna-corpo--sobre { background: rgba(29, 78, 216, .1); border-radius: 6px; }
.kanban__cartao {
    background: #fff;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 12px;
}
a[data-os-cartao] { cursor: grab; }
a[data-os-cartao]:active { cursor: grabbing; }
.kanban__cartao strong { display: block; font-size: 13px; margin-bottom: 2px; }
.kanban__cartao-acoes { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.kanban__cartao select { font-size: 11px; padding: 3px 4px; }

.doc-publico {
    max-width: 760px;
    margin: 30px auto;
    background: var(--cor-superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 32px;
}
.doc-publico__cabecalho { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.doc-publico__total { font-size: 22px; font-weight: 700; }

@media print {
    .sidebar, .topbar, .no-print { display: none !important; }
    .conteudo { margin-left: 0 !important; }
    body { background: #fff; }
}

.grade-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.cartao-metrica { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 18px; }
.cartao-metrica__rotulo { color: var(--cor-texto-suave); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.cartao-metrica__valor { font-size: 26px; font-weight: 700; margin-top: 6px; }

.vazio { text-align: center; padding: 40px 20px; color: var(--cor-texto-suave); }

.acoes-linha { display: flex; gap: 8px; flex-wrap: wrap; }

.form-inline { display: inline; }

/* Painel (dashboard) — Fase 10 */

.painel-secao__titulo {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cor-texto-suave);
    margin: 24px 0 10px;
}
.painel-secao__titulo:first-child { margin-top: 0; }

.painel-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.kpi-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.kpi-cartao {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 18px;
}
.kpi-cartao__icone {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kpi-cartao__icone svg { width: 22px; height: 22px; }
.kpi-cartao__icone--azul { background: #dbeafe; color: #1d4ed8; }
.kpi-cartao__icone--verde { background: #dcfce7; color: #15803d; }
.kpi-cartao__icone--roxo { background: #ede9fe; color: #6d28d9; }
.kpi-cartao__rotulo { color: var(--cor-texto-suave); font-size: 12px; }
.kpi-cartao__valor { font-size: 22px; font-weight: 700; margin-top: 2px; }

.painel-colunas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
    align-items: stretch;
}

.painel-lista { list-style: none; margin: 0; padding: 0; }
.painel-lista li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--cor-borda);
}
.painel-lista li:last-child { border-bottom: none; }

.ranking-posicao {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--cor-fundo);
    color: var(--cor-texto-suave);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.painel-lista__principal { flex: 1; min-width: 0; }
.painel-lista__titulo { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-lista__subtitulo { font-size: 12px; color: var(--cor-texto-suave); }
.painel-lista__valor { flex: none; font-size: 13px; font-weight: 700; text-align: right; }

.grafico-receita-despesa { display: block; width: 100%; height: auto; }

.personalizar-lista { list-style: none; margin: 0; padding: 0; }
.personalizar-lista li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--cor-borda);
    background: var(--cor-superficie);
}
.personalizar-lista li:last-child { border-bottom: none; }
.personalizar-alca { flex: none; color: var(--cor-texto-suave); cursor: grab; display: flex; }
.personalizar-alca:active { cursor: grabbing; }
.grafico-legenda { display: flex; gap: 18px; margin-top: 6px; font-size: 12px; color: var(--cor-texto-suave); }
.grafico-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafico-legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.grafico-legenda i.receita { background: #16a34a; }
.grafico-legenda i.despesa { background: #dc2626; }

/* Modal generico */

.modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}
.modal[hidden] { display: none; }
.modal__conteudo {
    background: var(--cor-superficie);
    border-radius: var(--raio);
    box-shadow: 0 10px 40px rgba(15, 23, 42, .25);
    padding: 22px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}
.modal__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.modal__cabecalho h2 { margin: 0; font-size: 16px; }
.modal__fechar {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--cor-texto-suave);
    cursor: pointer;
    padding: 2px 6px;
}
.modal__fechar:hover { color: var(--cor-texto); }
.modal__erro {
    background: #fef2f2;
    color: var(--cor-erro);
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    margin-bottom: 12px;
}
.modal__acoes {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* Cadastro rapido de cliente (modal) */
.modal__aviso {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    margin-bottom: 12px;
}
.modal__aviso[hidden], .modal__erro[hidden], .modal__info[hidden] { display: none; }
.modal__aviso ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.modal__aviso li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.modal__info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    margin: 10px 0 0;
}
.modal__info--alerta { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.campo__ajuda { font-size: 12px; color: var(--cor-texto-suave); min-height: 14px; }
.campo__ajuda--erro { color: var(--cor-erro); }
.campo input.campo--invalido { border-color: var(--cor-erro); }
.campo__linha { display: flex; gap: 6px; }
.campo__linha input { flex: 1; }
.campo__linha .btn { flex: none; }
.campo[hidden], .btn[hidden], .btn--link[hidden] { display: none; }
.btn--link {
    background: none;
    border: none;
    color: var(--cor-primaria);
    cursor: pointer;
    padding: 0;
    font: inherit;
    font-size: 13px;
}
.btn--link:hover { text-decoration: underline; }
.modal__consentimento { margin-top: 12px; font-size: 13px; display: flex; gap: 8px; align-items: flex-start; }
.modal__consentimento input { margin-top: 2px; }
.tabela-rolagem { overflow-x: auto; }
.aviso-whatsapp { margin-bottom: 16px; }
.aviso-whatsapp form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.aviso-whatsapp input[type=tel] { max-width: 200px; }
.dica-cliente { font-size: 12px; margin-top: 4px; color: var(--cor-aviso); }
.dica-cliente[hidden] { display: none; }

.autocomplete { position: relative; }
.autocomplete-lista {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    box-shadow: var(--sombra);
    margin-top: 2px;
    max-height: 220px;
    overflow-y: auto;
}
.autocomplete-item {
    padding: 8px 10px;
    font-size: 13px;
    cursor: pointer;
}
.autocomplete-item:hover, .autocomplete-item.autocomplete-item--ativo { background: var(--cor-fundo); }
.autocomplete-vazio { padding: 8px 10px; font-size: 12px; color: var(--cor-texto-suave); }

.botao-adicionar-linha { display: none; margin-top: 4px; }

.sidebar__fechar { display: none; }
.sidebar-fundo { display: none; }

@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.aberta { transform: translateX(0); }
    .sidebar { max-width: 85vw; }
    .sidebar__fechar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: -6px -8px -6px 0;
        background: none;
        border: none;
        border-radius: 6px;
        color: #cbd5e1;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
    }
    .sidebar__fechar:hover { background: rgba(255, 255, 255, .08); color: #fff; }
    .sidebar.aberta + .sidebar-fundo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 15;
        background: rgba(15, 23, 42, .5);
    }
    .conteudo { margin-left: 0; }
    .grade-formulario { grid-template-columns: minmax(0, 1fr); }
}

/* Celular: tabelas marcadas com .tabela-empilhada viram uma lista de cartoes
   (cada linha vira um bloco; o rotulo da coluna vem de data-label na <td>). */
@media (max-width: 640px) {
    .pagina { padding: 16px 12px; }
    .cartao { padding: 14px; }
    .topbar { padding: 0 12px; gap: 8px; }
    .topbar__usuario { gap: 8px; min-width: 0; }
    .topbar__usuario > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }
    .doc-publico { margin: 12px; padding: 18px; }

    .tela-guest { padding: 12px; }
    .cartao-guest { padding: 24px; }

    .kanban { scroll-snap-type: x proximity; align-items: flex-start; }
    .kanban__coluna { min-width: 82vw; max-width: 82vw; scroll-snap-align: start; max-height: none; }

    /* Formularios/linhas com display:flex inline (sem flex-wrap) quebram linha em vez de estourar */
    [style*="display:flex"], [style*="display: flex"] { flex-wrap: wrap; }
    input[type=file] { max-width: 100%; }
    .topbar .btn { flex: none; }

    .tabela-empilhada,
    .tabela-empilhada tbody,
    .tabela-empilhada tr,
    .tabela-empilhada td { display: block; width: 100%; }
    .tabela-empilhada thead { display: none; }
    .tabela-empilhada tbody tr {
        border: 1px solid var(--cor-borda);
        border-radius: 6px;
        padding: 4px 12px;
        margin-bottom: 10px;
        background: var(--cor-superficie);
    }
    .tabela-empilhada tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 7px 0;
        border-bottom: 1px dashed var(--cor-borda);
        text-align: right;
    }
    .tabela-empilhada tbody td:last-child { border-bottom: none; }
    .tabela-empilhada tbody tr.linha-extra { display: none; }
    .botao-adicionar-linha { display: inline-flex; width: 100%; }
    .tabela-empilhada tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 38%;
        max-width: 38%;
        font-size: 12px;
        font-weight: 600;
        color: var(--cor-texto-suave);
        text-align: left;
    }
    .tabela-empilhada tbody td { overflow-wrap: anywhere; }
    .tabela-empilhada tbody td:not([data-label]) { justify-content: flex-end; }
    .tabela-empilhada .celula-valor { flex: 1; min-width: 0; text-align: right; }
    .tabela-empilhada tbody td.celula-larga { display: block; text-align: center; }
    .tabela-empilhada td input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
    .tabela-empilhada td select,
    .tabela-empilhada td textarea { width: 100%; max-width: 100%; text-align: right; }
    .tabela-empilhada .item-produto-select,
    .tabela-empilhada .item-campo-calculo,
    .tabela-empilhada .item-preco-input { width: 100%; max-width: 100%; }
    .tabela-empilhada tfoot { display: block; }
    .tabela-empilhada tfoot tr {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 12px;
        border-top: 2px solid var(--cor-borda);
    }
    .tabela-empilhada tfoot th, .tabela-empilhada tfoot td { display: block; width: auto; padding: 0; }
}

/* Miniatura da arte anexada a um item (orcamento/OS/PDV) — ver arte-miniatura.js */
.arte-miniatura-link {
    display: block;
    width: 64px;
    height: 64px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    overflow: hidden;
    background: #fff;
}
.arte-miniatura-imagem, .arte-miniatura-pdf {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.arte-miniatura-generica {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--cor-texto-suave);
    background: var(--cor-fundo);
}
.arte-sem-anexo {
    font-size: 12px;
    color: var(--cor-texto-suave);
}

/* Impressao da OS: botao com opcoes (ver os/mostrar.php) */
.menu-suspenso { position: relative; display: inline-flex; }
.menu-suspenso > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.menu-suspenso__mais { position: relative; }
.menu-suspenso__mais > summary {
    list-style: none;
    height: 100%;
    padding: 9px 10px;
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.menu-suspenso__mais > summary::-webkit-details-marker { display: none; }
.menu-suspenso__painel {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    min-width: 270px;
    background: #fff;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .15);
    padding: 4px;
}
.menu-suspenso__painel a { display: block; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--cor-texto); text-decoration: none; }
.menu-suspenso__painel a:hover { background: var(--cor-fundo); }

/* Kanban: selecao de OS para impressao em lote (ver os/index.php) */
.kanban__cartao { position: relative; }
.kanban__selecionar { position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; cursor: pointer; }
.kanban__selecionar-coluna { margin-right: 6px; vertical-align: middle; cursor: pointer; }
.barra-lote {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    max-width: calc(100vw - 24px);
    background: #0f172a;
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .35);
    font-size: 13px;
}
.barra-lote[hidden] { display: none; }