/* =====================================================================
   OpusFood — retaguarda
   Conceito: o restaurante tem duas vidas (dia e noite). O tema da tela
   acompanha a operação em andamento:
     Dia   → branco de ervas, verde manjericão, açafrão
     Noite → berinjela profunda, âmbar de forno, tomate
   Tipografia: Bricolage Grotesque (títulos) + Figtree (texto).
   ===================================================================== */

:root,
[data-tema="dia"] {
    --of-bg: #F3F5F0;
    --of-surface: #FFFFFF;
    --of-surface-2: #EEF2EA;
    --of-ink: #17231C;
    --of-muted: #5D6B62;
    --of-line: #DCE3D8;
    --of-accent: #2E7D4F;
    --of-accent-hover: #256842;
    --of-accent-ink: #FFFFFF;
    --of-accent-soft: #E1EFE5;
    --of-warm: #D99A00;
    --of-danger: #C2412D;
    --of-sidebar: #17231C;
    --of-sidebar-ink: #DDE6DF;
    --of-sidebar-muted: #8FA396;
    --of-sidebar-active: #2E7D4F;
    --of-shadow: 0 1px 2px rgba(23, 35, 28, .06), 0 8px 24px -12px rgba(23, 35, 28, .18);
}

[data-tema="noite"] {
    --of-bg: #15131F;
    --of-surface: #1E1B2B;
    --of-surface-2: #262236;
    --of-ink: #F3EFE6;
    --of-muted: #A7A2B8;
    --of-line: #322D45;
    --of-accent: #F2A541;
    --of-accent-hover: #F6B862;
    --of-accent-ink: #1B1726;
    --of-accent-soft: #3A2E2A;
    --of-warm: #E4572E;
    --of-danger: #FF7A63;
    --of-sidebar: #0F0D17;
    --of-sidebar-ink: #E9E4F2;
    --of-sidebar-muted: #8A84A0;
    --of-sidebar-active: #F2A541;
    --of-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .6);
}

/* Bootstrap lendo nossas cores */
body {
    --bs-body-bg: var(--of-bg);
    --bs-body-color: var(--of-ink);
    --bs-border-color: var(--of-line);
    --bs-secondary-color: var(--of-muted);
    --bs-primary: var(--of-accent);
    --bs-link-color: var(--of-accent);
    --bs-link-hover-color: var(--of-accent-hover);
    --bs-focus-ring-color: color-mix(in srgb, var(--of-accent) 35%, transparent);
    background: var(--of-bg);
    color: var(--of-ink);
    font-family: "Figtree", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    transition: background-color .4s ease, color .4s ease;
}

h1, h2, h3, h4, .of-titulo {
    font-family: "Bricolage Grotesque", "Figtree", sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--of-ink);
}

h1 { font-size: 1.9rem; line-height: 1.15; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

a { color: var(--of-accent); }
a:hover { color: var(--of-accent-hover); }

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--of-accent) 60%, transparent);
    outline-offset: 2px;
}

/* ---------------- Estrutura ---------------- */
.of-app {
    display: grid;
    grid-template-columns: 248px 1fr;
    min-height: 100vh;
}

.of-sidebar {
    background: var(--of-sidebar);
    color: var(--of-sidebar-ink);
    padding: 22px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.of-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px;
    color: #fff;
    text-decoration: none;
}
.of-marca:hover { color: #fff; }
.of-marca svg { flex: none; }
.of-marca strong {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.03em;
}

.of-empresa {
    padding: 10px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    font-size: .85rem;
    line-height: 1.3;
}
.of-empresa small { color: var(--of-sidebar-muted); display: block; }

.of-nav { display: flex; flex-direction: column; gap: 2px; }
.of-nav-grupo {
    color: var(--of-sidebar-muted);
    font-size: .78rem;
    padding: 14px 10px 4px;
}
.of-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--of-sidebar-ink);
    text-decoration: none;
    font-weight: 500;
    position: relative;
}
.of-nav a i { font-size: 1.05rem; opacity: .85; }
.of-nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.of-nav a.ativo { background: rgba(255, 255, 255, .09); color: #fff; }
.of-nav a.ativo::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--of-sidebar-active);
}
.of-nav a.em-breve { opacity: .45; pointer-events: none; }
.of-nav a.em-breve span::after {
    content: "em breve";
    font-size: .68rem;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .1);
}

.of-main { min-width: 0; display: flex; flex-direction: column; }

.of-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 32px;
    border-bottom: 1px solid var(--of-line);
    background: color-mix(in srgb, var(--of-bg) 88%, transparent);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.of-agora {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 8px;
    border-radius: 999px;
    background: var(--of-surface);
    border: 1px solid var(--of-line);
    font-size: .9rem;
}
.of-agora .ponto {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cor, var(--of-muted));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor, var(--of-muted)) 22%, transparent);
}
.of-agora small { color: var(--of-muted); }

.of-topbar .acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.of-botao-icone {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid var(--of-line);
    background: var(--of-surface);
    color: var(--of-ink);
}
.of-botao-icone:hover { border-color: var(--of-accent); color: var(--of-accent); }

.of-usuario {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px 4px 4px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: none;
    color: var(--of-ink);
    text-align: left;
}
.of-usuario:hover { border-color: var(--of-line); }
.of-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--of-accent);
    color: var(--of-accent-ink);
    font-weight: 700;
}
.of-usuario small { display: block; color: var(--of-muted); font-size: .76rem; line-height: 1.1; }

.of-conteudo { padding: 28px 32px 48px; max-width: 1280px; width: 100%; }

.of-cabecalho {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.of-cabecalho p { color: var(--of-muted); margin: 4px 0 0; max-width: 62ch; }

/* ---------------- Superfícies ---------------- */
.of-painel {
    background: var(--of-surface);
    border: 1px solid var(--of-line);
    border-radius: 16px;
    box-shadow: var(--of-shadow);
}
.of-painel-corpo { padding: 22px 24px; }

/* ---------------- Botões ---------------- */
.btn { border-radius: 10px; font-weight: 600; padding: .5rem 1rem; }
.btn-of {
    background: var(--of-accent);
    border: 1px solid var(--of-accent);
    color: var(--of-accent-ink);
}
.btn-of:hover, .btn-of:focus-visible {
    background: var(--of-accent-hover);
    border-color: var(--of-accent-hover);
    color: var(--of-accent-ink);
}
.btn-of-sec {
    background: transparent;
    border: 1px solid var(--of-line);
    color: var(--of-ink);
}
.btn-of-sec:hover { border-color: var(--of-accent); color: var(--of-accent); }
.btn-sm { padding: .3rem .7rem; font-size: .85rem; }

/* ---------------- Formulários ---------------- */
.form-label { font-weight: 600; font-size: .88rem; margin-bottom: .35rem; }
.form-control, .form-select {
    background-color: var(--of-surface);
    border-color: var(--of-line);
    color: var(--of-ink);
    border-radius: 10px;
    padding: .55rem .8rem;
}
.form-control:focus, .form-select:focus {
    background-color: var(--of-surface);
    color: var(--of-ink);
    border-color: var(--of-accent);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--of-accent) 22%, transparent);
}
.form-text { color: var(--of-muted); }
.form-check-input:checked { background-color: var(--of-accent); border-color: var(--of-accent); }
.text-danger, .field-validation-error { color: var(--of-danger) !important; font-size: .85rem; }

.of-secao-form { padding: 22px 24px; border-bottom: 1px solid var(--of-line); }
.of-secao-form:last-of-type { border-bottom: 0; }
.of-secao-form > h3 { margin-bottom: 4px; }
.of-secao-form > p { color: var(--of-muted); font-size: .9rem; margin-bottom: 16px; }
.of-rodape-form {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 16px 24px;
    background: var(--of-surface-2);
    border-radius: 0 0 16px 16px;
}

/* Checkbox em formato de pílula (dias, modalidades) */
.of-pilulas { display: flex; flex-wrap: wrap; gap: 8px; }
.of-pilula input { position: absolute; opacity: 0; pointer-events: none; }
.of-pilula span {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--of-line);
    background: var(--of-surface);
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    transition: background-color .15s, border-color .15s, color .15s;
}
.of-pilula input:checked + span {
    background: var(--of-accent);
    border-color: var(--of-accent);
    color: var(--of-accent-ink);
}
.of-pilula input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--of-accent) 60%, transparent); }

/* ---------------- Tabelas ---------------- */
.of-tabela { width: 100%; border-collapse: collapse; }
.of-tabela th {
    font-size: .8rem;
    font-weight: 600;
    color: var(--of-muted);
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--of-line);
}
.of-tabela td { padding: 13px 16px; border-bottom: 1px solid var(--of-line); vertical-align: middle; }
.of-tabela tr:last-child td { border-bottom: 0; }
.of-tabela tr.inativo td { opacity: .5; }
.of-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.of-tabela .acoes-linha { text-align: right; white-space: nowrap; }

.of-etiqueta {
    display: inline-block;
    font-size: .76rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--of-surface-2);
    color: var(--of-muted);
    border: 1px solid var(--of-line);
}
.of-etiqueta.ok { background: var(--of-accent-soft); color: var(--of-accent); border-color: transparent; }
.of-etiqueta.off { background: transparent; }

.of-vazio { text-align: center; padding: 48px 20px; color: var(--of-muted); }
.of-vazio i { font-size: 2rem; display: block; margin-bottom: 8px; }

/* ---------------- Mensagens ---------------- */
.of-aviso {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 18px;
    border: 1px solid var(--of-line);
    background: var(--of-surface);
}
.of-aviso.sucesso { border-left: 4px solid var(--of-accent); }
.of-aviso.erro { border-left: 4px solid var(--of-danger); }
.of-aviso ul { margin: 0; padding-left: 18px; }

/* ---------------- Régua do dia (painel) ---------------- */
.of-regua-bloco { padding: 26px 28px 22px; }
.of-regua-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.of-relogio {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(2.6rem, 6vw, 4.2rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: .9;
    font-variant-numeric: tabular-nums;
}
.of-regua-topo .situacao { text-align: right; }
.of-regua-topo .situacao strong { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.3rem; display: block; }
.of-regua-topo .situacao span { color: var(--of-muted); }

.of-regua { position: relative; height: 58px; margin: 0 2px; }
.of-regua .trilho {
    position: absolute;
    inset: 18px 0 18px 0;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, var(--of-line) 0 1px, transparent 1px calc(100% / 24));
    background-color: var(--of-surface-2);
}
.of-regua .faixa {
    position: absolute;
    top: 14px;
    bottom: 14px;
    border-radius: 10px;
    background: var(--cor);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    padding: 0 10px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.of-regua .faixa.fora { opacity: .55; }
.of-regua .agora {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--of-ink);
    transform: translateX(-1px);
}
.of-regua .agora::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--of-ink);
}
.of-regua-horas {
    display: flex;
    justify-content: space-between;
    color: var(--of-muted);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}

@media (prefers-reduced-motion: no-preference) {
    .of-regua .faixa { animation: of-crescer .7s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; }
    @keyframes of-crescer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* Números rápidos do painel */
.of-numeros { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--of-line); }
.of-numeros a {
    padding: 18px 28px;
    text-decoration: none;
    color: var(--of-ink);
    border-right: 1px solid var(--of-line);
}
.of-numeros a:last-child { border-right: 0; }
.of-numeros a:hover { background: var(--of-surface-2); }
.of-numeros strong { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.7rem; display: block; line-height: 1.1; }
.of-numeros span { color: var(--of-muted); font-size: .88rem; }

/* Lista de operações */
.of-operacao {
    display: grid;
    grid-template-columns: 6px 1fr auto;
    gap: 18px;
    padding: 18px 22px 18px 0;
    border-bottom: 1px solid var(--of-line);
    align-items: center;
}
.of-operacao:last-child { border-bottom: 0; }
.of-operacao .cor { align-self: stretch; border-radius: 0 6px 6px 0; background: var(--cor); }
.of-operacao h3 { margin: 0 0 4px; }
.of-operacao .detalhes { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--of-muted); font-size: .9rem; }
.of-operacao.inativo { opacity: .5; }

/* ---------------- Mapa de mesas ---------------- */
.of-area-titulo { font-size: .95rem; color: var(--of-muted); margin: 22px 0 10px; font-weight: 600; }
.of-area-titulo:first-child { margin-top: 0; }
.of-mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.of-mesa {
    position: relative;
    aspect-ratio: 1;
    border-radius: 18px;
    background: var(--of-surface);
    border: 1px solid var(--of-line);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 14px;
    color: var(--of-ink);
    text-decoration: none;
    box-shadow: var(--of-shadow);
}
.of-mesa:hover { border-color: var(--of-accent); color: var(--of-ink); }
.of-mesa .numero {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}
.of-mesa .info { font-size: .8rem; color: var(--of-muted); }
.of-mesa .lugares { display: flex; gap: 3px; }
.of-mesa .lugares i { width: 7px; height: 7px; border-radius: 50%; background: var(--of-accent); display: block; }
.of-mesa.inativa { opacity: .45; box-shadow: none; border-style: dashed; }

/* ---------------- Login ---------------- */
.of-login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
}
.of-login-arte {
    position: relative;
    overflow: hidden;
    background: #17231C;
    color: #F3EFE6;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.of-login-arte::after {
    /* metade dia / metade noite */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0 55%, #15131F 55% 100%);
    z-index: 0;
}
.of-login-arte > * { position: relative; z-index: 1; }
.of-login-arte h1 {
    color: #F3EFE6;
    font-size: clamp(2.2rem, 4.4vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -.04em;
    max-width: 13ch;
    line-height: 1;
}
.of-login-arte p { color: #B8C4BB; max-width: 40ch; font-size: 1.05rem; }
.of-turnos { display: flex; gap: 28px; font-size: .9rem; }
.of-turnos div { display: flex; align-items: center; gap: 10px; }
.of-turnos i.bola { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }

.of-login-form { display: grid; place-items: center; padding: 40px 24px; background: var(--of-bg); }
.of-login-form form { width: 100%; max-width: 380px; }

/* ---------------- Responsivo ---------------- */
@media (max-width: 991.98px) {
    .of-app { grid-template-columns: 1fr; }
    .of-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: 270px;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform .25s ease;
    }
    .of-sidebar.aberta { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); }
    .of-topbar { padding: 12px 16px; }
    .of-conteudo { padding: 20px 16px 40px; }
    .of-numeros { grid-template-columns: 1fr; }
    .of-numeros a { border-right: 0; border-bottom: 1px solid var(--of-line); }
    .of-login { grid-template-columns: 1fr; }
    .of-login-arte { min-height: 280px; padding: 32px 24px; }
    .of-regua-bloco { padding: 20px 16px; }
    .of-regua-topo .situacao { text-align: left; }
    .of-usuario .nome { display: none; }
    .of-tabela-wrap { overflow-x: auto; }
}

@media (min-width: 992px) {
    .of-so-mobile { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* =====================================================================
   V2 — Cardápio
   ===================================================================== */
.of-etiqueta.of-alerta { color: var(--of-warm); border-color: color-mix(in srgb, var(--of-warm) 40%, transparent); background: transparent; }

/* Mostrar/esconder campos conforme o tipo */
[data-form-categoria]:not([data-tipo="Pizza"]) .so-pizza { display: none !important; }
[data-form-categoria][data-tipo="Pizza"] .so-comum { display: none !important; }
[data-form-grupo][data-tipo="Remocao"] .sem-remocao { visibility: hidden; }

/* Listas dinâmicas (tamanhos, opções) */
.of-linhas { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.of-linha { display: flex; align-items: center; gap: 10px; }
.of-linha > .form-control { flex: 1 1 0; min-width: 0; }
.of-linha > input[type="number"] { flex: 0 0 110px; }
.of-linha > .form-check-input { flex: 0 0 auto; margin: 0 14px; width: 1.2em; height: 1.2em; }
.of-linha-titulo { font-size: .8rem; color: var(--of-muted); font-weight: 600; }
.of-linha-titulo > span:nth-child(1), .of-linha-titulo > span:nth-child(2) { flex: 1 1 0; }
.of-linha-titulo > span.so-pizza { flex: 0 0 110px; }
.of-linha-titulo > span:nth-last-child(2) { flex: 0 0 auto; width: 48px; text-align: center; }
.of-linha-titulo > span:last-child { flex: 0 0 38px; }

/* Filtros */
.of-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.of-filtros .form-select { max-width: 260px; }
.of-filtros input[type="search"] { max-width: 320px; }

/* Grupos de complementos */
.of-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.of-grupo { padding: 18px 20px; }
.of-grupo.inativo { opacity: .55; }
.of-grupo-topo { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }

/* Produtos: miniatura e preços */
.of-miniatura {
    width: 48px; height: 48px; border-radius: 12px; object-fit: cover; display: grid; place-items: center;
    background: var(--of-accent-soft); color: var(--of-accent); font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.2rem;
}
.of-precos { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.of-precos small { color: var(--of-muted); margin-right: 3px; }

.of-produto-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.of-foto-produto { padding: 20px; position: sticky; top: 90px; }
.of-foto-moldura { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--of-surface-2); display: grid; place-items: center; }
.of-foto-moldura img { width: 100%; height: 100%; object-fit: cover; }
.of-foto-vazia { color: var(--of-muted); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.of-foto-vazia i { font-size: 2rem; }

.of-precos-tamanhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.of-preco-tamanho {
    display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--of-line); background: var(--of-surface-2);
}
.of-campo-moeda { display: flex; align-items: center; gap: 8px; }
.of-campo-moeda > span { color: var(--of-muted); font-weight: 600; }

/* Prévia do cardápio */
.of-abas { display: flex; gap: 8px; flex-wrap: wrap; }
.of-aba {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
    border: 1px solid var(--of-line); background: var(--of-surface); color: var(--of-ink); text-decoration: none; font-weight: 600;
}
.of-aba small { color: var(--of-muted); font-weight: 500; }
.of-aba .ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--cor); }
.of-aba.ativa { border-color: var(--cor); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor) 25%, transparent); color: var(--of-ink); }

.of-menu-indice { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; font-weight: 600; }
.of-menu-indice a { color: var(--of-muted); text-decoration: none; }
.of-menu-indice a:hover { color: var(--of-accent); }

.of-menu-secao { padding-top: 26px; scroll-margin-top: 80px; }
.of-menu-secao > header { margin-bottom: 14px; }
.of-menu-secao h2 { font-size: 1.6rem; margin-bottom: 2px; }
.of-menu-secao header p { color: var(--of-muted); margin: 0; }
.of-menu-tamanhos { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .88rem; margin-top: 6px !important; }

.of-menu-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.of-prato {
    display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden;
    border: 1px solid var(--of-line); border-radius: 18px; background: var(--of-surface); color: var(--of-ink);
    box-shadow: var(--of-shadow); transition: transform .15s ease, border-color .15s ease;
}
.of-prato:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--of-accent); }
.of-prato .foto { position: relative; aspect-ratio: 16 / 10; background: var(--of-surface-2); display: grid; place-items: center; }
.of-prato .foto img { width: 100%; height: 100%; object-fit: cover; }
.of-prato .inicial { font-family: "Bricolage Grotesque", sans-serif; font-size: 3.4rem; font-weight: 800; color: var(--of-accent); opacity: .6; }
.of-prato .selo {
    position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 999px;
    background: var(--of-warm); color: #fff; font-size: .74rem; font-weight: 700;
}
.of-prato.esgotado { opacity: .55; cursor: not-allowed; }
.of-prato.esgotado .selo { background: var(--of-ink); color: var(--of-bg); }
.of-prato .corpo { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; flex: 1; }
.of-prato .nome { font-weight: 700; font-size: 1.05rem; }
.of-prato .desc { color: var(--of-muted); font-size: .86rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.of-prato .preco { margin-top: auto; padding-top: 8px; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--of-accent); }
.of-prato .preco small { display: block; font-family: "Figtree", sans-serif; font-size: .74rem; font-weight: 500; color: var(--of-muted); }

/* Simulador */
.of-montagem { background: var(--of-surface); color: var(--of-ink); border: 1px solid var(--of-line); border-radius: 18px; }
.of-montagem .modal-header, .of-montagem .modal-footer { border-color: var(--of-line); }
.of-montagem-bloco { margin-bottom: 18px; }
.of-montagem-bloco legend { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.of-montagem-bloco legend small { color: var(--of-muted); font-weight: 500; margin-left: 6px; }
.of-pilula input:disabled + span { opacity: .4; cursor: not-allowed; }
.of-qtd { display: flex; align-items: center; }
.of-qtd .form-control { width: 90px; }
.of-montagem-total strong { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.6rem; display: block; line-height: 1.1; }
.of-montagem-total span { color: var(--of-muted); font-size: .88rem; }
.of-montagem-erros { color: var(--of-danger); font-size: .9rem; }

@media (max-width: 991.98px) {
    .of-produto-grid { grid-template-columns: 1fr; }
    .of-foto-produto { position: static; }
    .of-linha > input[type="number"] { flex-basis: 80px; }
}

/* =====================================================================
   V3 — Estoque e compras
   ===================================================================== */
.of-texto-alerta { color: var(--of-warm); font-weight: 600; }
.of-texto-saida { color: var(--of-danger); }
.of-texto-entrada { color: var(--of-accent); }

/* Importar XML */
.of-importar {
    display: flex; align-items: center; gap: 18px; padding: 20px 24px;
    border: 2px dashed var(--of-line); box-shadow: none; transition: border-color .15s, background-color .15s;
}
.of-importar > i { font-size: 2.2rem; color: var(--of-accent); }
.of-importar > div { display: flex; flex-direction: column; flex: 1; }
.of-importar.arrastando { border-color: var(--of-accent); background: var(--of-accent-soft); }

/* Compra */
.of-tabela-compra tr.pendente td:first-child { box-shadow: inset 4px 0 0 var(--of-warm); }
.of-tabela-compra .form-select-sm, .of-tabela-compra .form-control-sm { border-radius: 8px; }
.of-linhas-compra { max-width: none; }
.of-linhas-compra .of-linha > :nth-child(1) { flex: 3 1 0; }
.of-linhas-compra .of-linha > :nth-child(2) { flex: 0 0 70px; }
.of-linhas-compra .of-linha > :nth-child(3),
.of-linhas-compra .of-linha > :nth-child(4),
.of-linhas-compra .of-linha > :nth-child(6) { flex: 0 0 100px; }
.of-linhas-compra .of-linha > :nth-child(5) { flex: 2 1 0; min-width: 0; }
.of-linhas-compra .of-linha > :nth-child(7) { flex: 0 0 120px; }
.of-linhas-compra .of-linha > :nth-child(8) { flex: 0 0 38px; }
.of-linhas-compra .of-linha-titulo > span { font-size: .8rem; }

.of-barra-acoes {
    position: sticky; bottom: 0; z-index: 10; display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 0; background: linear-gradient(transparent, var(--of-bg) 35%);
}

/* Ficha técnica */
.of-linha-ficha > :nth-child(1) { flex: 3 1 0; min-width: 0; }
.of-linha-ficha > :nth-child(2) { flex: 0 0 170px; }
.of-linha-ficha > :nth-child(3) { flex: 0 0 100px; text-align: right; font-variant-numeric: tabular-nums; }
.of-linha-ficha > :nth-child(4) { flex: 0 0 38px; }
.of-linha-ficha.of-linha-titulo > :nth-child(3) { text-align: right; }
.of-resumo-custo dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 12px 0; }
.of-resumo-custo dt { font-weight: 500; color: var(--of-muted); }
.of-resumo-custo dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.of-cmv {
    display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px; margin-bottom: 12px;
    border-radius: 14px; background: var(--of-surface-2);
}
.of-cmv strong { font-family: "Bricolage Grotesque", sans-serif; font-size: 2.2rem; line-height: 1; }
.of-cmv[data-faixa="bom"] strong { color: var(--of-accent); }
.of-cmv[data-faixa="atencao"] strong { color: var(--of-warm); }
.of-cmv[data-faixa="alto"] strong { color: var(--of-danger); }

/* CMV */
.of-numeros-5 { grid-template-columns: repeat(5, 1fr); }
.of-numeros a.of-alerta-numero strong { color: var(--of-warm); }
.of-cmv-etiqueta { display: inline-block; min-width: 56px; padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: .82rem; text-align: center; }
.of-cmv-etiqueta.bom { background: var(--of-accent-soft); color: var(--of-accent); }
.of-cmv-etiqueta.atencao { background: color-mix(in srgb, var(--of-warm) 16%, transparent); color: var(--of-warm); }
.of-cmv-etiqueta.alto { background: color-mix(in srgb, var(--of-danger) 16%, transparent); color: var(--of-danger); }
.of-barra-turno { display: grid; grid-template-columns: 140px 1fr 120px; align-items: center; gap: 14px; padding: 6px 0; }
.of-barra-turno .trilho { height: 12px; border-radius: 999px; background: var(--of-surface-2); overflow: hidden; }
.of-barra-turno .trilho span { display: block; height: 100%; border-radius: 999px; }
.of-barra-turno strong { text-align: right; font-variant-numeric: tabular-nums; }

/* Opções de complemento com insumo */
.of-linha > .form-select { flex: 1 1 0; min-width: 0; }
.of-linha-titulo > .of-flex { flex: 1 1 0; }
.of-linha > .of-qtd-insumo { flex: 0 0 100px; }

@media (max-width: 991.98px) {
    .of-numeros-5 { grid-template-columns: 1fr 1fr; }
    .of-linhas-compra .of-linha, .of-linha-ficha { flex-wrap: wrap; }
    .of-linhas-compra .of-linha > * , .of-linha-ficha > * { flex: 1 1 45% !important; }
    .of-barra-turno { grid-template-columns: 90px 1fr 90px; }
}

@media print {
    .of-sidebar, .of-topbar, .of-barra-acoes, .of-cabecalho .btn, .of-cabecalho form, .of-filtros { display: none !important; }
    .of-app { display: block; }
    .of-painel { box-shadow: none; border: 0; }
    body { background: #fff; color: #000; }
}

/* =====================================================================
   V4 — Menu com submenus
   ===================================================================== */
.of-nav-grupo-fixo { color: var(--of-sidebar-muted); font-size: .78rem; padding: 14px 10px 4px; }
.of-submenu { margin-top: 2px; }
.of-submenu > summary {
    list-style: none; display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px;
    color: var(--of-sidebar-ink); font-weight: 600; cursor: pointer; user-select: none;
}
.of-submenu > summary::-webkit-details-marker { display: none; }
.of-submenu > summary i { font-size: 1.05rem; opacity: .85; }
.of-submenu > summary::after {
    content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; font-size: .75rem; opacity: .6;
    transition: transform .2s ease;
}
.of-submenu[open] > summary::after { transform: rotate(180deg); }
.of-submenu > summary:hover { background: rgba(255, 255, 255, .06); }
.of-submenu > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--of-sidebar-active) 60%, transparent); }
.of-submenu > a { padding: 7px 10px 7px 40px; font-weight: 500; font-size: .93rem; color: var(--of-sidebar-muted); }
.of-submenu > a:hover, .of-submenu > a.ativo { color: #fff; }
.of-submenu > a.ativo::before { left: -14px; }

/* =====================================================================
   V4 — Salão, comanda e cozinha
   ===================================================================== */
/* Mapa de mesas */
.of-salao-resumo { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-bottom: 6px; font-weight: 500; }
.of-salao-resumo .ponto { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; }
.ponto.livre { background: var(--of-line); border: 1px solid var(--of-muted); }
.ponto.ocupada { background: var(--of-accent); }
.ponto.conta { background: var(--of-warm); }

.of-mapa { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.of-mesa-mapa {
    display: flex; flex-direction: column; justify-content: space-between; min-height: 132px; padding: 12px 14px;
    border-radius: 18px; border: 1px solid var(--of-line); background: var(--of-surface); color: var(--of-ink);
    text-align: left; text-decoration: none; box-shadow: var(--of-shadow); transition: transform .12s ease, border-color .12s ease;
}
.of-mesa-mapa:hover { transform: translateY(-2px); color: var(--of-ink); }
.of-mesa-mapa .topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.of-mesa-mapa .numero { font-family: "Bricolage Grotesque", sans-serif; font-size: 2.2rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.of-mesa-mapa .numero.pequeno { font-size: 1.15rem; letter-spacing: 0; }
.of-mesa-mapa .info { display: flex; flex-direction: column; font-size: .82rem; color: var(--of-muted); }
.of-mesa-mapa .info strong { font-size: 1.05rem; color: var(--of-ink); font-variant-numeric: tabular-nums; }
.of-mesa-mapa.livre { border-style: dashed; box-shadow: none; background: transparent; }
.of-mesa-mapa.livre .numero { color: var(--of-muted); }
.of-mesa-mapa.ocupada { border: 2px solid var(--of-accent); background: var(--of-accent-soft); }
.of-mesa-mapa.conta { border: 2px solid var(--of-warm); background: color-mix(in srgb, var(--of-warm) 14%, var(--of-surface)); }
.of-mesa-mapa.conta .info .fw-semibold { color: var(--of-warm); }
.selo-pronto { font-size: .7rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--of-warm); color: #fff; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
    .selo-pronto { animation: of-pulso 1.6s ease-in-out infinite; }
    @keyframes of-pulso { 50% { opacity: .55; } }
}

/* Comanda */
.of-comanda { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
.of-lancar { padding: 16px; position: sticky; top: 86px; max-height: calc(100vh - 110px); display: flex; flex-direction: column; }
.of-lancar-topo { display: grid; grid-template-columns: 1fr 210px; gap: 10px; margin-bottom: 12px; }
.of-campo-icone { position: relative; }
.of-campo-icone > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--of-muted); }
.of-campo-icone > .form-control { padding-left: 36px; }
.of-abas-compactas { gap: 6px; margin-bottom: 12px; }
.of-abas-compactas .of-aba { padding: 5px 12px; font-size: .86rem; background: var(--of-surface); }
.of-grade-lancar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; overflow-y: auto; padding-right: 4px; }
.of-produto-botao {
    display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; text-align: left; border-radius: 12px;
    border: 1px solid var(--of-line); background: var(--of-surface-2); color: var(--of-ink); min-height: 64px;
}
.of-produto-botao:hover:not(:disabled) { border-color: var(--of-accent); }
.of-produto-botao:disabled { opacity: .45; }
.of-produto-botao .nome { font-weight: 600; line-height: 1.2; }
.of-produto-botao .detalhe { font-size: .78rem; color: var(--of-muted); }

.of-lista-itens { list-style: none; margin: 0; padding: 0; }
.of-lista-itens li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--of-line); }
.of-lista-itens li.cancelado { opacity: .5; }
.of-lista-itens li.cancelado strong { text-decoration: line-through; }
.of-lista-itens .qtd { flex: 0 0 54px; font-weight: 700; font-variant-numeric: tabular-nums; }
.of-lista-itens .desc { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.of-lista-itens .desc small { color: var(--of-muted); }
.of-lista-itens .desc small.obs { color: var(--of-warm); font-weight: 600; }
.of-lista-itens .valor { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.of-status-item { flex: 0 0 auto; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--of-line); white-space: nowrap; }
.of-status-item.fila { color: var(--of-muted); }
.of-status-item.preparo { color: var(--of-warm); border-color: currentColor; }
.of-status-item.pronto { background: var(--of-warm); border-color: var(--of-warm); color: #fff; }
.of-status-item.entregue { background: var(--of-accent-soft); color: var(--of-accent); border-color: transparent; }
.of-status-item.cancelado { text-decoration: line-through; }

.of-totais { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; font-variant-numeric: tabular-nums; }
.of-totais > div { display: flex; justify-content: space-between; gap: 10px; }
.of-totais .total { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.6rem; font-weight: 800; padding-top: 6px; border-top: 1px solid var(--of-line); margin-top: 4px; }
.of-acoes-comanda { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.of-acoes-comanda .btn { padding: .8rem 1rem; }

.of-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
    padding: 12px 20px; border-radius: 12px; background: var(--of-ink); color: var(--of-bg); font-weight: 600;
    box-shadow: var(--of-shadow); z-index: 2000; transition: opacity .2s ease, transform .2s ease; max-width: min(560px, 92vw);
}
.of-toast.visivel { opacity: 1; transform: translate(-50%, 0); }
.of-toast.erro { background: var(--of-danger); color: #fff; }

/* Cozinha (KDS) — alto contraste, para ler de longe */
.of-kds { display: flex; flex-direction: column; gap: 16px; }
.of-kds:fullscreen { background: var(--of-bg); padding: 20px; overflow: auto; }
.of-kds-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.of-kds-colunas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.of-kds-coluna > h2 { font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.of-kds-coluna > h2 span { font-size: .85rem; padding: 2px 10px; border-radius: 999px; background: var(--of-surface-2); }
.of-kds-coluna > div { display: flex; flex-direction: column; gap: 10px; }
.of-kds-vazio { color: var(--of-muted); text-align: center; padding: 24px 0; }
.of-kds-cartao {
    border-radius: 14px; background: var(--of-surface); border: 1px solid var(--of-line); border-left: 6px solid var(--of-accent);
    padding: 12px 14px; box-shadow: var(--of-shadow);
}
/* Semáforo fixo (igual no tema claro e escuro): até 10 min, até 20 min, atrasado */
.of-kds-cartao.ok { border-left-color: #3BA55C; }
.of-kds-cartao.atencao { border-left-color: #E0A100; }
.of-kds-cartao.atencao .tempo { color: #E0A100; }
.of-kds-cartao.atraso { border-left-color: #E5484D; }
.of-kds-cartao.atraso .tempo { color: #E5484D; }
.of-kds-cartao header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.of-kds-cartao header strong { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.25rem; }
.of-kds-cartao .tempo { font-weight: 700; font-variant-numeric: tabular-nums; }
.of-kds-cartao .item { font-size: 1.12rem; font-weight: 600; }
.of-kds-cartao .item .qtd { font-weight: 800; margin-right: 4px; }
.of-kds-cartao .comp { color: var(--of-muted); margin-top: 2px; }
.of-kds-cartao .obs { margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--of-warm) 15%, transparent); color: var(--of-warm); font-weight: 700; }
.of-kds-cartao footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; color: var(--of-muted); }
.of-kds-cartao footer .btn { min-width: 110px; padding: .5rem 1rem; font-size: 1rem; }

@media (max-width: 1199.98px) {
    .of-comanda { grid-template-columns: 1fr; }
    .of-lancar { position: static; max-height: none; }
    .of-kds-colunas { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .of-lancar-topo { grid-template-columns: 1fr; }
    .of-acoes-comanda { grid-template-columns: 1fr; }
}

/* ======================= V5 — Caixa ======================= */
.of-selo-aberto, .of-selo-fechado {
    display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 10px; border-radius: 999px;
    font-family: "Figtree", sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}
.of-selo-aberto { background: color-mix(in srgb, #3BA55C 18%, transparent); color: #2E8B4A; }
.of-selo-fechado { background: var(--of-surface-2); color: var(--of-muted); }

.of-kpis { display: grid; grid-template-columns: repeat(4, 1fr); }
.of-kpis > div { padding: 18px 24px; border-right: 1px solid var(--of-line); }
.of-kpis > div:last-child { border-right: 0; }
.of-kpis span { display: block; color: var(--of-muted); font-size: .88rem; }
.of-kpis strong { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.6rem; line-height: 1.15; }
@media (max-width: 900px) {
    .of-kpis { grid-template-columns: repeat(2, 1fr); }
    .of-kpis > div:nth-child(2) { border-right: 0; }
    .of-kpis > div:nth-child(-n+2) { border-bottom: 1px solid var(--of-line); }
}

.of-caixas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.of-caixa-opcao {
    display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; cursor: pointer;
    border: 2px solid var(--of-line); background: var(--of-surface); transition: border-color .15s, background .15s;
}
.of-caixa-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.of-caixa-opcao .icone {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem;
    background: var(--of-accent-soft); color: var(--of-accent);
}
.of-caixa-opcao .texto { display: flex; flex-direction: column; }
.of-caixa-opcao small { color: var(--of-muted); }
.of-caixa-opcao:has(input:checked) { border-color: var(--of-accent); background: var(--of-accent-soft); }
.of-caixa-opcao.ocupado { opacity: .55; cursor: not-allowed; }

.of-linha-contagem { display: grid; grid-template-columns: 1fr 220px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--of-line); }
.of-linha-contagem:last-of-type { border-bottom: 0; }
.of-linha-contagem label { font-weight: 600; }
.of-linha-contagem label small { display: block; font-weight: 400; color: var(--of-muted); margin-left: 26px; }
@media (max-width: 600px) { .of-linha-contagem { grid-template-columns: 1fr; } }

.of-notas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.of-notas label { display: flex; align-items: center; gap: 6px; }
.of-notas span { min-width: 44px; font-weight: 700; font-family: "Bricolage Grotesque", sans-serif; text-align: right; }

.of-cancelar-venda { display: inline-block; position: relative; }
.of-cancelar-venda summary { list-style: none; }
.of-cancelar-venda summary::-webkit-details-marker { display: none; }
.of-cancelar-venda[open] form {
    position: absolute; right: 0; top: 110%; z-index: 5; width: 260px; display: grid; gap: 6px; padding: 10px;
    background: var(--of-surface); border: 1px solid var(--of-line); border-radius: 12px; box-shadow: var(--of-shadow);
}
.of-aviso.ok { border-left: 4px solid #3BA55C; }
.of-aviso.ok i { color: #3BA55C; }
.of-aviso.alerta { border-left: 4px solid var(--of-warm); }
.of-aviso.alerta i { color: var(--of-warm); }
.of-aviso > i { font-size: 1.2rem; line-height: 1.3; }

/* ---------------- Fiscal (V5.1) ---------------- */
.of-situacao {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
    font-size: .78rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; vertical-align: middle;
    background: var(--of-bg); color: var(--of-muted); border: 1px solid var(--of-line);
}
.of-situacao::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.of-situacao.ok { color: #2B8A4B; background: rgba(59, 165, 92, .12); border-color: rgba(59, 165, 92, .3); }
.of-situacao.alerta { color: #9A6A00; background: rgba(217, 154, 0, .14); border-color: rgba(217, 154, 0, .35); }
.of-situacao.erro { color: var(--of-danger); background: rgba(194, 65, 45, .1); border-color: rgba(194, 65, 45, .3); }
h1 .of-situacao { font-size: .8rem; margin-left: 8px; }
.of-dados { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 10px 18px; margin: 0; }
.of-dados dt { color: var(--of-muted); font-weight: 500; }
.of-dados dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 575px) { .of-dados { grid-template-columns: 1fr; gap: 2px; } .of-dados dd { margin-bottom: 10px; } }

/* Página do PDV (a tela em si é React: wwwroot/pdv/pdv.css) */
.of-pdv-corpo { margin: 0; min-height: 100vh; background: var(--of-bg); }
.of-pdv-carregando { display: grid; place-items: center; min-height: 100vh; color: var(--of-muted); font-size: 1.1rem; }
[data-tema="noite"] .of-situacao.ok { color: #6FD394; }
[data-tema="noite"] .of-situacao.alerta { color: #F2C14E; }

/* ---------------- Delivery (V6) ---------------- */
.of-ao-vivo { font-size: .75rem; font-weight: 600; color: var(--of-muted); vertical-align: middle; margin-left: 8px; }
.of-delivery { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.of-delivery-quadro { display: grid; grid-template-columns: repeat(4, minmax(210px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.of-delivery-quadro section { background: var(--of-surface); border: 1px solid var(--of-line); border-radius: 14px; padding: 10px; min-height: 260px; }
.of-delivery-quadro h2 { font-size: .95rem; margin: 2px 4px 10px; display: flex; align-items: center; gap: 6px; }
.of-delivery-quadro h2 span { margin-left: auto; background: var(--of-bg); border-radius: 999px; padding: 0 9px; font-size: .8rem; }
.of-delivery-quadro section[data-coluna="0"] h2 span:not(:empty) { background: var(--of-danger); color: #fff; }
.of-delivery-quadro .vazio, .of-concluidos .vazio { color: var(--of-muted); font-size: .85rem; text-align: center; margin: 18px 0; }
.of-pedido { border: 1px solid var(--of-line); border-left: 4px solid var(--of-accent); border-radius: 12px; padding: 10px; margin-bottom: 10px; background: var(--of-surface); display: grid; gap: 4px; font-size: .88rem; }
.of-pedido.online { border-left-color: var(--of-warm); }
.of-pedido.atrasado { box-shadow: 0 0 0 2px color-mix(in srgb, var(--of-danger) 45%, transparent); }
.of-pedido header { display: flex; align-items: center; gap: 6px; }
.of-pedido header .selo { font-size: .68rem; font-weight: 700; text-transform: uppercase; color: var(--of-warm); border: 1px solid currentColor; border-radius: 999px; padding: 0 6px; }
.of-pedido header .tempo { margin-left: auto; color: var(--of-muted); font-size: .78rem; font-weight: 600; }
.of-pedido .cliente { font-weight: 600; }
.of-pedido .cliente small, .of-pedido .endereco small { color: var(--of-muted); font-weight: 400; }
.of-pedido .itens { color: var(--of-ink); }
.of-pedido .obs { color: var(--of-warm); font-size: .82rem; }
.of-pedido .progresso { height: 5px; border-radius: 99px; background: var(--of-bg); overflow: hidden; margin-top: 2px; }
.of-pedido .progresso span { display: block; height: 100%; background: var(--of-accent); }
.of-pedido footer { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.of-pedido .despacho { display: flex; gap: 6px; width: 100%; }
.of-pedido .entregador { font-weight: 600; font-size: .82rem; margin-right: auto; }
.of-mapa { height: 320px; border-radius: 14px 14px 0 0; z-index: 0; }
.of-entregadores { padding: 10px 14px; display: grid; gap: 4px; font-size: .88rem; }
.of-concluidos summary { padding: 12px 14px; font-weight: 600; cursor: pointer; }
.of-concluidos > div { padding: 0 14px 12px; display: grid; gap: 8px; max-height: 420px; overflow: auto; font-size: .86rem; }
.of-pino { display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 17px; box-shadow: 0 4px 12px rgba(0,0,0,.3); border: 2px solid #fff; }
.of-pino.loja { background: var(--of-accent); }
.of-pino.moto { background: var(--of-warm); }
.of-loja-aberta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; cursor: pointer; user-select: none; }
.of-loja-aberta input { position: absolute; opacity: 0; }
.of-loja-aberta .trilho { width: 40px; height: 22px; border-radius: 99px; background: var(--of-line); position: relative; transition: background .2s; }
.of-loja-aberta .trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.of-loja-aberta input:checked + .trilho { background: #3BA55C; }
.of-loja-aberta input:checked + .trilho::after { transform: translateX(18px); }
.of-loja-aberta input:focus-visible + .trilho { outline: 2px solid var(--of-accent); outline-offset: 2px; }
@media (max-width: 1280px) { .of-delivery { grid-template-columns: 1fr; } }

/* ---------------- V7 — Financeiro e contabilidade ---------------- */
.of-filtros input[type="date"], .of-filtros input[type="month"] { max-width: 180px; }
.of-lista-fin { list-style: none; padding: 0; margin: 0 0 12px; }
.of-lista-fin li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--of-line); }
.of-lista-fin li:last-child { border-bottom: 0; }
.of-lista-fin a { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--of-ink); text-decoration: none; }
.of-lista-fin a:hover span { text-decoration: underline; }
.of-lista-fin a > i { color: var(--of-muted); font-size: 1.1rem; }
.of-lista-fin strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.of-venc { display: inline-block; min-width: 46px; padding: 2px 8px; border-radius: 6px; background: var(--of-surface-2); font-size: .85rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.of-venc.hoje { background: rgba(217, 154, 0, .16); color: #9A6A00; }
.of-venc.vencido { background: rgba(194, 65, 45, .12); color: var(--of-danger); }
[data-tema="noite"] .of-venc.hoje { color: #F2C14E; }
.of-tabela tfoot th { border-top: 2px solid var(--of-line); font-variant-numeric: tabular-nums; }
.of-tabela .of-linha-grupo td { background: var(--of-surface-2); font-size: .9rem; }
.of-detalhes-form > summary { cursor: pointer; list-style: none; font-weight: 600; }
.of-detalhes-form > summary::-webkit-details-marker { display: none; }
.of-detalhes-form[open] > summary { padding-bottom: 8px; }

/* Fluxo de caixa */
.of-fluxo .of-futuro td { color: var(--of-muted); }
.of-fluxo .of-futuro td strong { color: var(--of-ink); }
.of-fluxo .of-dia-vazio td { padding-top: 4px; padding-bottom: 4px; font-size: .85rem; }
.of-barra-saldo { height: 10px; width: var(--p); max-width: 100%; border-radius: 5px; background: var(--of-accent); opacity: .75; }
.of-barra-saldo.neg { background: var(--of-danger); }

/* DRE */
.of-dre td { padding-top: 7px; padding-bottom: 7px; }
.of-dre .of-dre-grupo td { font-weight: 600; }
.of-dre .of-dre-detalhe td { color: var(--of-muted); font-size: .9rem; }
.of-dre .of-dre-detalhe td:first-child { padding-left: 34px; }
.of-dre .of-dre-total td { font-weight: 700; background: var(--of-accent-soft); border-top: 2px solid var(--of-line); }
.of-dre .of-dre-fora td { border-top: 2px dashed var(--of-line); }
[data-tema="noite"] .of-dre .of-dre-total td { background: var(--of-surface-2); }

/* Lançamentos contábeis */
.of-lanc td { font-size: .92rem; vertical-align: top; }
.of-lanc .of-situacao { margin-bottom: 3px; }
@media print { .of-dre .of-dre-total td { background: #eee !important; } }
.of-kpis.of-kpis-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 575px) {
    .of-kpis.of-kpis-3 { grid-template-columns: 1fr; }
    .of-kpis.of-kpis-3 > div { border-right: 0; border-bottom: 1px solid var(--of-line); padding: 12px 18px; }
    .of-kpis.of-kpis-3 > div:last-child { border-bottom: 0; }
}

/* ---------------- V8 — Indicadores ---------------- */
.of-var { display: block; margin-top: 4px; font-size: .82rem; font-weight: 600; color: var(--of-muted); }
.of-var em { font-style: normal; font-weight: 400; margin-left: 4px; }
.of-var.sobe { color: #2B8A4B; }
.of-var.desce { color: var(--of-danger); }
[data-tema="noite"] .of-var.sobe { color: #6FD394; }
.of-mini-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.of-mini-kpis > div { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; background: var(--of-surface); border: 1px solid var(--of-line); border-radius: 14px; padding: 14px 18px; box-shadow: var(--of-shadow); }
.of-mini-kpis i { grid-row: span 3; font-size: 1.5rem; color: var(--of-accent); }
.of-mini-kpis span { color: var(--of-muted); font-size: .85rem; }
.of-mini-kpis strong { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.3rem; line-height: 1.2; }
.of-mini-kpis small { color: var(--of-muted); font-size: .8rem; }
@media (max-width: 1100px) { .of-mini-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .of-mini-kpis { grid-template-columns: 1fr; } }
.of-grafico { position: relative; height: 260px; }
.of-grafico-alto { height: 320px; }
.of-barras { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.of-barra { height: 10px; border-radius: 5px; background: var(--of-surface-2); margin: 6px 0 4px; overflow: hidden; }
.of-barra > span { display: block; height: 100%; border-radius: 5px; }
.of-hoje { display: grid; grid-template-columns: repeat(4, 1fr); }
.of-hoje > a { padding: 16px 22px; border-right: 1px solid var(--of-line); color: var(--of-ink); text-decoration: none; }
.of-hoje > a:last-child { border-right: 0; }
.of-hoje > a:hover { background: var(--of-surface-2); }
.of-hoje span { display: block; color: var(--of-muted); font-size: .85rem; }
.of-hoje strong { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.45rem; }
@media (max-width: 900px) { .of-hoje { grid-template-columns: repeat(2, 1fr); } .of-hoje > a:nth-child(2) { border-right: 0; } .of-hoje > a:nth-child(-n+2) { border-bottom: 1px solid var(--of-line); } }
[data-tema="noite"] .of-barra > span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }

/* V8.1 — Assinatura, auditoria, perfis e plataforma */
.of-situacao.neutro { color: var(--of-muted); background: var(--of-surface-2); border-color: var(--of-line); }
.of-barra { height: 6px; border-radius: 999px; background: var(--of-surface-2); overflow: hidden; margin-top: 8px; }
.of-barra span { display: block; height: 100%; border-radius: 999px; }
.of-plano-mini { height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 14px; border: 1px solid var(--of-line); background: var(--of-surface); }
.of-plano-mini.destaque { border-color: var(--of-accent); }
.of-plano-mini.atual { background: var(--of-surface-2); }
.of-plano-mini .preco { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.35rem; font-weight: 700; }
.of-plano-mini ul { padding-left: 18px; margin: 0 0 auto; color: var(--of-muted); font-size: .88rem; }
.of-dialogo { border: 0; border-radius: 18px; padding: 0; max-width: 420px; width: calc(100% - 32px); background: var(--of-surface); color: var(--of-ink); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.of-dialogo::backdrop { background: rgba(10, 12, 20, .55); }
.of-dialogo-corpo { padding: 24px; }
.of-qr-pix { width: 220px; height: 220px; margin: 8px auto 14px; background: #fff; border-radius: 12px; padding: 6px; }
.of-qr-pix svg { width: 100%; height: 100%; }
.of-auditoria td { vertical-align: top; }
.of-auditoria-det summary { cursor: pointer; color: var(--of-accent); font-size: .85rem; margin-top: 4px; }
.of-auditoria-det table { margin-top: 6px; font-size: .85rem; }
.of-auditoria-det th { font-weight: 600; color: var(--of-muted); padding: 2px 12px 2px 0; white-space: nowrap; }
.of-auditoria-det td { padding: 2px 0; word-break: break-word; }
.of-auditoria-det .de { text-decoration: line-through; color: var(--of-muted); }
.of-auditoria-det .para { font-weight: 600; }
.of-matriz th, .of-matriz td { text-align: center; }
.of-matriz th:first-child, .of-matriz td:first-child { text-align: left; }
.of-matriz .sim { color: #2B8A4B; font-size: 1.1rem; }
.of-matriz .parcial { color: #9A6A00; font-size: 1.1rem; }
.of-matriz .nao { color: var(--of-line); }
.of-plat-abas { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--of-line); margin-bottom: 18px; }
.of-plat-abas a { padding: 10px 16px; color: var(--of-muted); text-decoration: none; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.of-plat-abas a:hover { color: var(--of-ink); }
.of-plat-abas a.ativa { color: var(--of-accent); border-bottom-color: var(--of-accent); }
.of-plat-abas a .badge { background: var(--of-accent); font-size: .7rem; margin-left: 4px; }
.of-pilulas { display: flex; gap: 6px; flex-wrap: wrap; }
.of-pilulas a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--of-line); background: var(--of-surface); color: var(--of-ink); text-decoration: none; font-size: .88rem; font-weight: 600; }
.of-pilulas a small { color: var(--of-muted); margin-left: 4px; }
.of-pilulas a.ativa { background: var(--of-ink); color: var(--of-surface); border-color: var(--of-ink); }
.of-pilulas a.ativa small { color: inherit; opacity: .7; }
.of-uso-cheio { color: var(--of-danger); font-weight: 700; }
.of-licenca-banner { display: flex; gap: 10px; align-items: center; padding: 9px 18px; font-size: .9rem; font-weight: 600; background: rgba(217,154,0,.14); color: #7a5500; border-bottom: 1px solid rgba(217,154,0,.3); }
.of-licenca-banner.erro { background: rgba(194,65,45,.12); color: var(--of-danger); border-bottom-color: rgba(194,65,45,.3); }
.of-licenca-banner a { margin-left: auto; color: inherit; white-space: nowrap; }
[data-tema="noite"] .of-licenca-banner { color: #f3c560; }