/* ==========================================================================
   Opperi — identidade visual v1 (14/09/2026)

   Este arquivo NAO reescreve o Bootstrap: ele redefine o significado das
   classes que os templates ja usam. Trocar "bg-success" aqui muda o badge
   de Faturado, o de Pago e o de Entregue de uma vez, nas 30 telas.

   Por que ha blocos repetindo cores: no Bootstrap 5.3 os utilitarios
   (.text-*, .bg-*) leem variaveis CSS e mudam sozinhos, mas os botoes e
   algumas tabelas trazem a cor escrita no proprio arquivo compilado. Esses
   precisam ser sobrescritos um a um — e so por isso.

   Paleta oficial: vendas/static/marca/LEIA-ME.md
   ========================================================================== */

:root {
    /* ----- Marca (logo e destaque; estilo Apple com azul Opperi) ----- */
    --op-petroleo:    #0F2B3D;   /* simbolo do logo */
    --op-azul:        #1B6FA8;   /* destaque do sistema */
    --op-azul-escuro: #145683;   /* hover do destaque */
    /* Texto/hover com AA; preenchimento de meta usa --op-meta-aberto. */
    --op-azul-claro:  #2F6F96;
    --op-verde:       #16B8A6;   /* acento: so formas, nunca texto */
    --op-verde-txt:   #1F7A36;   /* positivo (pedido #248A3D; este passa AA) */

    /* ----- Neutros (Apple HIG, claro) ----- */
    --op-branco:   #FFFFFF;
    --op-fundo:    #F2F2F7;      /* fundo da pagina */
    --op-borda:    #D1D1D6;      /* separador */
    --op-cinza-cl: #6E6E73;      /* legenda; chevron usa --op-chevron */
    --op-cinza:    #6E6E73;      /* texto secundario (opaco, passa AA) */
    --op-chevron:  #C7C7CC;
    --op-lateral:  #EBEBF0;      /* barra lateral */
    --op-lateral-borda: #D1D1D6;   /* igual --op-borda */
    --op-preenchimento: rgba(118, 118, 128, 0.12); /* segmentado, busca */
    --op-trilho:   #E5E5EA;      /* interruptor off / progresso */

    /* ----- Estado (texto / fundo) — pares conferidos em WCAG AA ----- */
    --op-ok-txt:      #1F7A36;  --op-ok-bg:      #E3F5EA;
    /* Janela de pulverização: amarelo mais claro que o marrom do alerta
       (precisa diferir em claridade do vermelho --op-erro-txt). */
    --op-janela-cuidado: #E5A100;
    --op-info-txt:    #145683;  --op-info-bg:    #E7F1F8;
    --op-alerta-txt:  #965900;  --op-alerta-bg:  #FBF0DF;
    --op-erro-txt:    #D70015;  --op-erro-bg:    #FBEAE8;

    /* Sinal de emissão de NF (.op-sinal): reaproveita os pares de estado
       acima, que já são conferidos em WCAG AA. A bolinha usa a cor forte. */
    --op-sinal-verde-bg:    var(--op-ok-bg);
    --op-sinal-verde-txt:   var(--op-ok-txt);
    --op-sinal-verde-ponto: var(--op-verde-bt);
    --op-sinal-amarelo-bg:    var(--op-alerta-bg);
    --op-sinal-amarelo-txt:   var(--op-alerta-txt);
    --op-sinal-amarelo-ponto: var(--op-janela-cuidado);
    --op-sinal-vermelho-bg:    var(--op-erro-bg);
    --op-sinal-vermelho-txt:   var(--op-erro-txt);
    --op-sinal-vermelho-ponto: var(--op-erro-bt);

    /* ----- Papeis --------------------------------------------------------
       Quem pinta uma tela nova usa daqui para baixo. */
    --op-texto:       #1D1D1F;
    --op-superficie:  #FFFFFF;   /* cartao e grupo de lista */
    --op-superficie-2:#F5F5F7;   /* hover de linha */
    --op-neutro:      #F2F2F7;   /* cabecalho/selo; lateral fica em --op-lateral */
    --op-borda-forte: #8A8A8E;   /* contorno de campo (3:1 sobre fundo) */
    --op-link:        #1B6FA8;

    --op-azul-bt:     #1B6FA8;   --op-azul-mais:  #145683;
    --op-verde-bt:    #1F7A36;   --op-verde-mais: #18662D;
    --op-erro-bt:     #D70015;   --op-erro-mais:  #B00012;

    --op-ok-borda:     #C6E8D2;
    --op-info-borda:   #CFE0EF;
    --op-alerta-borda: #F0E0C4;
    --op-erro-borda:   #F2D5D2;
    --op-erro-bg2:     #F7E2E0;
    --op-erro-bg3:     #F5DBD9;

    --op-torre-cinza: #C7C7CC;
    --op-ditado:      #F2FCFA;

    /* Sombra Apple: cartoes leves; veu e foco. */
    --op-sombra-1: rgba(0, 0, 0, 0.04);
    --op-sombra-2: rgba(0, 0, 0, 0.03);
    --op-sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 10px rgba(0, 0, 0, 0.03);
    --op-sombra-pop: rgba(0, 0, 0, 0.12);
    --op-sombra-3: rgba(0, 0, 0, 0.25);
    --op-veu:      rgba(0, 0, 0, 0.35);
    --op-foco:     rgba(27, 111, 168, 0.25);
    --op-pulso:    rgba(215, 0, 21, 0.13);

    --op-balao-eu:       #DDF3EF;
    --op-balao-eu-borda: #BFE6DF;
    --op-sobre-escuro:   #C6D5DF;
    --op-kicker:         #8FD9CF;
    --op-avatar-ambar:   #965900;

    /* Linguagem Apple (28/10). Landing nao usa .op-app. */
    --op-campo-borda:    #D1D1D6;
    --op-linha:          #D1D1D6;
    --op-foco-anel:      rgba(27, 111, 168, 0.25);
    --op-opcao-borda:    #A9CBE3;
    --op-opcao-fundo:    #F5F9FC;
    /* Barra lateral (acabamento de 10/11): seleção em azul-claro, nunca cheio. */
    --op-cat-atual-bg:   #DCEAF5;
    --op-cat-atual-txt:  #145683;
    --op-cat-nome:       #3A3A3F;
    --op-painel-atual-bg:  #E7F1F8;
    --op-painel-atual-txt: #145683;
    --op-sombra-painel:  4px 0 16px rgba(0, 0, 0, 0.04);
    --op-selo-fat-txt:   #4A4FA3;
    --op-selo-fat-bg:    #EEF0FA;
    --op-meta-fat:       #1B6FA8;
    --op-meta-aberto:    #9CC5E2;
    --op-meta-falta:     #E5E5EA;
    --op-fluxo-fundo:    #FFFFFF;
    --op-fluxo-texto:    #1D1D1F;
    --op-fluxo-fraco:    #6E6E73;
    --op-fluxo-entrada:  #0E8F81;
    --op-fluxo-saida:    #D9622B;
    --op-fluxo-saldo:    #1B6FA8;

    /* Cantos e movimento (Parte 1). */
    --op-raio-cartao: 16px;
    --op-raio-grupo:  12px;
    --op-raio-busca:  10px;
    --op-raio-seg:    9px;
    --op-raio-seg-bt: 7px;
    --op-raio-pilula: 999px;
    --op-raio-item:   8px;
    --op-ease:        cubic-bezier(0.25, 0.1, 0.25, 1);
    --op-duracao:     200ms;

    /* Tipografia: San Francisco no Apple; Inter no resto (woff2 local). */
    --op-fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
                "Helvetica Neue", Arial, sans-serif;
    --op-fonte-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

    /* ----- Repasse ao Bootstrap ----- */
    --bs-body-font-family: var(--op-fonte);
    --bs-body-color: var(--op-texto);
    --bs-body-bg: var(--op-fundo);
    --bs-emphasis-color: var(--op-texto);
    --bs-secondary-color: var(--op-cinza);
    --bs-border-color: var(--op-borda);
    --bs-tertiary-bg: var(--op-neutro);

    --bs-primary: #1B6FA8;          --bs-primary-rgb: 27, 111, 168;
    --bs-success: #1F7A36;          --bs-success-rgb: 31, 122, 54;
    --bs-danger:  #D70015;          --bs-danger-rgb: 215, 0, 21;
    --bs-warning: #965900;          --bs-warning-rgb: 150, 89, 0;
    --bs-info:    #1B6FA8;          --bs-info-rgb: 27, 111, 168;
    --bs-dark:    #0F2B3D;          --bs-dark-rgb: 15, 43, 61;
    --bs-secondary: #6E6E73;        --bs-secondary-rgb: 110, 110, 115;

    --bs-link-color: #1B6FA8;       --bs-link-color-rgb: 27, 111, 168;
    --bs-link-hover-color: #145683;
    --bs-focus-ring-color: rgba(27, 111, 168, .25);
}

/* ==========================================================================
   MODO ESCURO

   Ligado pelo atributo data-bs-theme="dark" no <html> — o mesmo que o
   Bootstrap 5.3 usa. Isso e de proposito: com o atributo posto, o Bootstrap
   ja escurece sozinho o que e dele (campo, menu suspenso, modal, paginacao),
   e aqui embaixo fica so o que e nosso. Sem isso, cada componente do
   framework precisaria ser reescrito a mao.

   Nao ha @media (prefers-color-scheme) de proposito: o modo e escolhido no
   botao da barra lateral e lembrado no navegador. Foi decisao de produto.

   Os pares abaixo passam WCAG AA, e nao e preciso lembrar de conferir: o
   teste `vendas/test_contraste.py` roda o conferidor a cada
   `python manage.py test`, e ele LE as cores daqui — nao guarda copia.
   Para ver a lista inteira com os numeros:
   ./venv/bin/python ferramentas/contraste_escuro.py
   ========================================================================== */
[data-bs-theme="dark"] {
    /* Avisa o NAVEGADOR (calendario, barra de rolagem, seletor de arquivo). */
    color-scheme: dark;

    /* Base escura da Apple + azul Opperi mais claro (passa AA). */
    --op-petroleo:    #000000;
    --op-texto:       #FFFFFF;
    --op-fundo:       #000000;
    --op-superficie:  #1C1C1E;
    --op-superficie-2:#2C2C2E;
    --op-neutro:      #2C2C2E;
    --op-borda:       #38383A;
    --op-borda-forte: #8E8E93;   /* contorno 3:1 nos fundos escuros */
    --op-cinza:       #98989D;
    --op-cinza-cl:    #98989D;
    --op-chevron:     #636366;
    --op-lateral:     #1C1C1E;
    --op-lateral-borda: #38383A;
    --op-preenchimento: rgba(118, 118, 128, 0.24);
    --op-trilho:      #39393D;

    --op-link:        #7FC0EA;
    --op-azul:        #7FC0EA;
    --op-azul-claro:  #A8D6F2;
    --op-azul-escuro: #9CC5E2;
    --op-azul-bt:     #2478AE;   --op-azul-mais:  #3AA0DE;
    --op-verde-bt:    #1F7A36;   --op-verde-mais: #30A04A;
    --op-erro-bt:     #D70015;   --op-erro-mais:  #FF6961;
    --op-verde-txt:   #30D158;

    --op-ok-txt:      #30D158;  --op-ok-bg:      #0E2A18;  --op-ok-borda:     #1A4A28;
    --op-janela-cuidado: #FFD60A;
    --op-info-txt:    #7FC0EA;  --op-info-bg:    #0E2436;  --op-info-borda:   #1A3A52;
    --op-alerta-txt:  #FFD60A;  --op-alerta-bg:  #2A2400;  --op-alerta-borda: #4A4000;
    --op-erro-txt:    #FF6961;  --op-erro-bg:    #3A1010;  --op-erro-borda:   #5A2020;
    --op-erro-bg2:    #451818;  --op-erro-bg3:   #522020;

    /* Sinal de emissão: mesmos nomes do claro, pares de estado do escuro. */
    --op-sinal-verde-bg:    var(--op-ok-bg);
    --op-sinal-verde-txt:   var(--op-ok-txt);
    --op-sinal-verde-ponto: var(--op-ok-txt);
    --op-sinal-amarelo-bg:    var(--op-alerta-bg);
    --op-sinal-amarelo-txt:   var(--op-alerta-txt);
    --op-sinal-amarelo-ponto: var(--op-janela-cuidado);
    --op-sinal-vermelho-bg:    var(--op-erro-bg);
    --op-sinal-vermelho-txt:   var(--op-erro-txt);
    --op-sinal-vermelho-ponto: var(--op-erro-txt);

    --op-torre-cinza: #48484A;
    --op-ditado:      #12332F;

    --op-sombra-1: rgba(0, 0, 0, .40);
    --op-sombra-2: rgba(0, 0, 0, .50);
    --op-sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.40), 0 2px 10px rgba(0, 0, 0, 0.30);
    --op-sombra-pop: rgba(0, 0, 0, .60);
    --op-sombra-3: rgba(0, 0, 0, .70);
    --op-veu:      rgba(0, 0, 0, .62);
    --op-foco:     rgba(127, 192, 234, .35);
    --op-pulso:    rgba(255, 105, 97, .20);

    --op-balao-eu:       #123E36;
    --op-balao-eu-borda: #1E5C50;
    --op-verde:          #16B8A6;
    --op-kicker:         #8FD9CF;
    --op-sobre-escuro:   #C6D5DF;
    /* Mesmo ambar do claro: branco sobre amarelo Apple nao passa AA. */
    --op-avatar-ambar:   #965900;

    --op-campo-borda:    #48484A;
    --op-linha:          #38383A;
    --op-foco-anel:      rgba(127, 192, 234, 0.35);
    --op-opcao-borda:    #2F6F96;
    --op-opcao-fundo:    #163244;
    --op-cat-atual-bg:   #163244;
    --op-cat-atual-txt:  #7FC0EA;
    --op-cat-nome:       #EBEBF0;
    --op-painel-atual-bg:  var(--op-opcao-fundo);
    --op-painel-atual-txt: var(--op-azul);
    --op-sombra-painel:  4px 0 16px rgba(0, 0, 0, 0.40);
    --op-selo-fat-txt:   #C5C8F2;
    --op-selo-fat-bg:    #2A2E52;
    --op-meta-fat:       #7CC0EA;
    --op-meta-aberto:    #2F6F96;
    --op-meta-falta:     #2C2C2E;
    --op-fluxo-fundo:    #1C1C1E;
    --op-fluxo-texto:    #FFFFFF;
    --op-fluxo-fraco:    #98989D;
    --op-fluxo-entrada:  #30D158;
    --op-fluxo-saida:    #FF9F0A;
    --op-fluxo-saldo:    #7FC0EA;

    --bs-primary: #7FC0EA;          --bs-primary-rgb: 127, 192, 234;
    --bs-success: #30D158;          --bs-success-rgb: 48, 209, 88;
    --bs-danger:  #FF6961;          --bs-danger-rgb: 255, 105, 97;
    --bs-warning: #FFD60A;          --bs-warning-rgb: 255, 214, 10;
    --bs-info:    #7FC0EA;          --bs-info-rgb: 127, 192, 234;
    --bs-dark:    #000000;          --bs-dark-rgb: 0, 0, 0;
    --bs-secondary: #98989D;        --bs-secondary-rgb: 152, 152, 157;

    --bs-link-color: #7FC0EA;       --bs-link-color-rgb: 127, 192, 234;
    --bs-link-hover-color: #A8D6F2;
    --bs-focus-ring-color: rgba(127, 192, 234, .30);
    --bs-tertiary-bg: var(--op-neutro);
}

/* O Bootstrap escurece o campo sozinho, mas com o cinza DELE. Aqui ele passa
   a usar a superficie da marca, para o campo ficar da mesma familia do card
   em que esta. */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--op-superficie-2);
    color: var(--op-texto);
}
[data-bs-theme="dark"] .form-control::placeholder { color: var(--op-cinza-cl); }

/* A seta do <select> e uma imagem embutida, escura, desenhada para fundo
   claro: no escuro ela some. Esta e a mesma seta, clara. */
[data-bs-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239FB6C4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Imagem de marca em PNG/JPG tem fundo branco assado dentro. Um cartao claro
   atras dela e mais honesto que a foto brilhando sozinha no escuro. */
[data-bs-theme="dark"] .op-marca-img { background: #E9EFF3; }

/* Previa da logo na tela de perfil. Branco nos DOIS modos de proposito: ela
   mostra como a logo sai no recibo, e papel e branco. Vale so quando ha logo
   — a caixa branca vazia escondia o aviso "sem logo" no escuro. */
.op-logo-previa { background: #FFFFFF; }

/* Avatar de quem nao pos foto: as iniciais dentro de um circulo.
   Era .bg-secondary do Bootstrap, e aquele token INVERTE no escuro — de
   cinza escuro para cinza claro. As iniciais brancas em cima ficavam em
   2,1:1, ilegiveis. Aqui o par e escolhido em cada modo. */
.op-avatar { background: var(--op-cinza); color: #FFFFFF; }
[data-bs-theme="dark"] .op-avatar {
    background: var(--op-torre-cinza);
    color: var(--op-texto);
}

/* Inter (woff2 local) e IBM Plex Mono. A landing nao tem .op-app e continua
   em Poppins / IBM Plex no proprio landing.html. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../marca/fontes/Inter-Regular.da03732a27e1.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../marca/fontes/Inter-Medium.51205681a1ba.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../marca/fontes/Inter-SemiBold.2ede57db1a3a.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fontes/IBMPlexMono-Regular.3c3264dd5ca0.ttf") format('truetype');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fontes/IBMPlexMono-SemiBold.f63211d4931e.ttf") format('truetype');
}

body { -webkit-font-smoothing: antialiased; }

/* San Francisco no Apple; Inter no resto. 15 px no computador, 17 no celular. */
.op-app {
    font-family: var(--op-fonte);
    font-size: 15px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    -webkit-font-smoothing: antialiased;
    transition: color var(--op-duracao) var(--op-ease),
                background-color var(--op-duracao) var(--op-ease),
                border-color var(--op-duracao) var(--op-ease),
                box-shadow var(--op-duracao) var(--op-ease),
                transform var(--op-duracao) var(--op-ease);
}
/* 17 px no celular: entra no @media do rail (abaixo), para o teste do menu
   continuar lendo o mesmo bloco. */
@media (prefers-reduced-motion: reduce) {
    .op-app { transition: none; }
}

/* Titulos: Poppins so na landing/logo; dentro do .op-app usa a fonte do sistema. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Poppins', var(--bs-body-font-family);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--op-texto);
}
.op-app h1, .op-app h2, .op-app h3, .op-app h4, .op-app h5, .op-app h6,
.op-app .h1, .op-app .h2, .op-app .h3, .op-app .h4, .op-app .h5, .op-app .h6,
.op-app .op-painel-cab strong,
.op-app .op-marca b,
.op-app .op-empresa-txt b,
.op-app .op-ditar-nome,
.op-app .op-nota-centro strong,
.op-app .op-treino-numeros b {
    font-family: var(--op-fonte);
}

/* Titulo grande da pagina (34 px / 700). Escopo em .op-conteudo: a landing
   nao tem essa classe e mantem a manchete dela. */
.op-conteudo h1 {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.6px;
    line-height: 1.15;
}
.op-titulo-cartao { font-size: 20px; font-weight: 600; }
.op-numero-destaque { font-size: 28px; font-weight: 600; }
.op-legenda, .op-ajuda, .op-rotulo-num {
    font-size: 13px;
    font-weight: 400;
    color: var(--op-cinza);
}
.op-grupo-titulo {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--op-cinza);
}

table { font-variant-numeric: tabular-nums; }

/* Valores e datas: tabulares. Mono so em chave NF-e, codigo de barras, boleto. */
.num { font-variant-numeric: tabular-nums; }
.op-mono, #linha-boleto {
    font-family: var(--op-fonte-mono);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- NAVBAR */
.navbar.bg-dark {
    background-color: var(--op-petroleo) !important;
    border-bottom: 3px solid var(--op-verde);
}
.navbar-dark .navbar-nav .nav-link          { color: rgba(255,255,255,.82); }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus    { color: #fff; }
.navbar-brand img { display: block; }

/* --------------------------------------------------------------- BOTOES */
/* Cores escritas no Bootstrap compilado — precisam ser trocadas uma a uma */
.btn-primary {
    --bs-btn-bg: var(--op-azul-bt);   --bs-btn-border-color: var(--op-azul-bt);
    --bs-btn-hover-bg: var(--op-azul-escuro); --bs-btn-hover-border-color: var(--op-azul-mais);
    --bs-btn-active-bg: var(--op-azul-mais);  --bs-btn-active-border-color: var(--op-azul-mais);
    --bs-btn-disabled-bg: var(--op-azul-bt); --bs-btn-disabled-border-color: var(--op-azul-bt);
}
.btn-success {
    --bs-btn-bg: var(--op-verde-bt);  --bs-btn-border-color: var(--op-verde-bt);
    --bs-btn-hover-bg: var(--op-verde-mais); --bs-btn-hover-border-color: var(--op-verde-mais);
    --bs-btn-active-bg: var(--op-verde-mais); --bs-btn-active-border-color: var(--op-verde-mais);
    --bs-btn-disabled-bg: var(--op-verde-bt); --bs-btn-disabled-border-color: var(--op-verde-bt);
}
.btn-danger {
    --bs-btn-bg: var(--op-erro-bt);   --bs-btn-border-color: var(--op-erro-bt);
    --bs-btn-hover-bg: var(--op-erro-mais); --bs-btn-hover-border-color: var(--op-erro-mais);
    --bs-btn-active-bg: var(--op-erro-mais); --bs-btn-active-border-color: var(--op-erro-mais);
}
.btn-outline-primary {
    --bs-btn-color: var(--op-link);   --bs-btn-border-color: var(--op-link);
    --bs-btn-hover-bg: var(--op-azul-bt);  --bs-btn-hover-border-color: var(--op-azul-bt);
    --bs-btn-active-bg: var(--op-azul-escuro); --bs-btn-active-border-color: var(--op-azul-escuro);
}
.btn-outline-secondary {
    --bs-btn-color: var(--op-cinza);  --bs-btn-border-color: var(--op-borda-forte);
    --bs-btn-hover-bg: var(--op-cinza); --bs-btn-hover-border-color: var(--op-cinza);
}
.btn { font-weight: 600; border-radius: var(--op-raio-pilula); }
.op-app .btn-primary,
.op-app .btn-success,
.op-app .btn-danger {
    min-height: 36px; padding-inline: 16px; font-weight: 600;
}
.op-app .btn-primary:active,
.op-app .btn-success:active,
.op-app .btn-danger:active,
.op-app .op-bt:active:not(:disabled) {
    transform: scale(0.98);
}
@media (prefers-reduced-motion: reduce) {
    .op-app .btn-primary:active,
    .op-app .btn-success:active,
    .op-app .btn-danger:active,
    .op-app .op-bt:active:not(:disabled) { transform: none; }
}

/* --------------------------------------------------------------- BADGES */
/* Os templates usam badge solido. A marca pede o par claro: fundo suave e
   texto escuro — le melhor numa tabela cheia e nao briga com o Petroleo. */
.badge { font-weight: 600; letter-spacing: .01em; }

.badge.bg-success  { background-color: var(--op-ok-bg)     !important; color: var(--op-ok-txt); }
.badge.bg-primary  { background-color: var(--op-info-bg)   !important; color: var(--op-info-txt); }
.badge.bg-info     { background-color: var(--op-info-bg)   !important; color: var(--op-info-txt); }
.badge.bg-warning  { background-color: var(--op-alerta-bg) !important; color: var(--op-alerta-txt) !important; }
.badge.bg-danger   { background-color: var(--op-erro-bg)   !important; color: var(--op-erro-txt); }
.badge.bg-secondary{ background-color: var(--op-neutro)   !important; color: var(--op-cinza); }
.badge.bg-dark     { background-color: var(--op-petroleo)  !important; color: #fff; }

/* Os templates escrevem "bg-info text-dark" e "bg-warning text-dark". O par
   da marca ja define a cor certa, entao o text-dark nao pode vencer. */
.badge.bg-info.text-dark    { color: var(--op-info-txt)   !important; }
.badge.bg-warning.text-dark { color: var(--op-alerta-txt) !important; }

/* -------------------------------------------------------------- TABELAS */
.table { --bs-table-border-color: var(--op-borda); }
.table > thead {
    --bs-table-bg: var(--op-neutro);
    --bs-table-color: var(--op-cinza);
}
.table > thead th {
    font-weight: 600; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .04em;
    border-bottom-width: 1px;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: var(--op-superficie-2); }

.table-danger {
    --bs-table-color: var(--op-erro-txt);
    --bs-table-bg: var(--op-erro-bg);
    --bs-table-border-color: var(--op-erro-borda);
    --bs-table-striped-bg: var(--op-erro-bg2);
    --bs-table-hover-bg: var(--op-erro-bg3);
}
.table-warning {
    --bs-table-color: var(--op-alerta-txt);
    --bs-table-bg: var(--op-alerta-bg);
    --bs-table-border-color: var(--op-alerta-borda);
}
.table-success {
    --bs-table-color: var(--op-ok-txt);
    --bs-table-bg: var(--op-ok-bg);
    --bs-table-border-color: var(--op-ok-borda);
}

/* ------------------------------------------------- CARDS, FORMS, MENUS */
.card {
    border-color: var(--op-borda);
    border-radius: .6rem;
    box-shadow: 0 1px 2px var(--op-sombra-1);
}
.card-header { background-color: var(--op-superficie-2); border-bottom-color: var(--op-borda); font-weight: 600; }

.form-control, .form-select {
    border-color: var(--op-borda-forte);
    border-radius: .45rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--op-azul);
    box-shadow: 0 0 0 .2rem var(--op-foco);
}
.form-label { font-weight: 500; color: var(--op-cinza); font-size: .9rem; }

/* ---------------------------------------------------- FORMULARIO DE CADASTRO
   Largura de leitura, nao largura de tela. A area de conteudo vai ate 1480px
   porque listagem e painel precisam disso — mas um campo de nome com 1380px
   nao e grande, e sem limite: o olho percorre a tela inteira para ler tres
   palavras, e o formulario parece solto no meio do nada.

   O texto dos campos tambem desce para .92rem. Ele era o unico 16px que
   sobrou numa tela onde rotulo, tabela e menu ja foram calibrados para
   .8-.9rem — por isso os campos pareciam maiores que tudo em volta.

   Vale so onde a classe .op-form for escrita no template, tela por tela.
   Aplicar em todo <form> apertaria tambem a barra de filtro das listagens,
   que e larga de proposito. */
.op-form { max-width: 860px; }
.op-form .form-label { font-size: .82rem; margin-bottom: .25rem; }
.op-form .form-control, .op-form .form-select { font-size: .92rem; padding: .4rem .7rem; }
.op-form .form-text { font-size: .76rem; }
.op-form .card-body { padding: 1.1rem 1.2rem; }
.form-check-input:checked { background-color: var(--op-azul); border-color: var(--op-azul); }
.form-check-input:focus   { border-color: var(--op-azul); box-shadow: 0 0 0 .2rem var(--op-foco); }

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--op-azul);
    --bs-dropdown-border-color: var(--op-borda);
    --bs-dropdown-header-color: var(--op-cinza-cl);
    box-shadow: 0 6px 20px var(--op-sombra-2);
}
.dropdown-header { text-transform: uppercase; font-size: .72rem; letter-spacing: .05em; font-weight: 600; }

.alert-success { --bs-alert-bg: var(--op-ok-bg);     --bs-alert-color: var(--op-ok-txt);     --bs-alert-border-color: var(--op-ok-borda); }
.alert-danger  { --bs-alert-bg: var(--op-erro-bg);   --bs-alert-color: var(--op-erro-txt);   --bs-alert-border-color: var(--op-erro-borda); }
.alert-warning { --bs-alert-bg: var(--op-alerta-bg); --bs-alert-color: var(--op-alerta-txt); --bs-alert-border-color: var(--op-alerta-borda); }
.alert-info    { --bs-alert-bg: var(--op-info-bg);   --bs-alert-color: var(--op-info-txt);   --bs-alert-border-color: var(--op-info-borda); }

a { text-underline-offset: .15em; }


/* ----------------------------------------------------- LISTA DE PEDIDOS */
/* A tabela rola dentro do proprio container: no celular, a pagina nunca
   rola para o lado. */
.tabela-pedidos-rolagem {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Nome do cliente cortado com reticencias. O nome completo fica no title,
   que aparece ao passar o mouse. */
.pedido-cliente {
    display: block;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bolinha de status, com as cores da marca - nunca o verde generico do
   Bootstrap. */
.bolinha-status {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    margin-right: .4rem;
    vertical-align: baseline;
}

/* Coluna das caixas de selecao na lista de pedidos: estreita, para nao
   roubar espaco do nome do cliente no celular. */
.coluna-marcar {
    width: 2.5rem;
    text-align: center;
}

/* Ícone de alerta na Consulta/Emissão: botão de verdade (toque e teclado),
   mas sem cara de botão — não pode aumentar a altura da linha. */
.alerta-emissao {
    background: none;
    border: 0;
    padding: 0 0 0 .25rem;
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
}
.alerta-emissao:focus-visible {
    outline: 2px solid var(--op-azul);
    outline-offset: 2px;
}

/* ------------------------------------------------------- BARRA LATERAL */
/* Substituiu a navbar de topo em 16/09/2026. Com oito areas o menu suspenso
   pedia dois cliques por tela; a lateral mostra tudo com um.

   No computador a lateral e SEMPRE o rail (88px): html[data-lateral="0"]
   vem fixo no base.html. Nao ha botao nem localStorage para abrir/recolher.
   No celular (< 992px) a gaveta mostra a lista completa com titulos.

   ATENCAO: .op-lateral nao pode ganhar overflow:hidden. Os dropdowns de
   empresa e de conta sao filhos dela e seriam cortados. Quem rola e so a
   faixa do meio. */

.op-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.op-casca { display: flex; align-items: stretch; min-height: 100vh; }

.op-lateral {
    flex: 0 0 auto;
    width: 88px;
    background: var(--op-lateral);
    border-right: 0.5px solid var(--op-lateral-borda);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    transition: width .2s ease;
    z-index: 1045;
}
/* data-lateral="0" e o unico modo no computador (atributo fixo no <html>). */
html[data-lateral="0"] .op-lateral { width: 88px; }
html[data-lateral="0"] .op-rotulo  { display: none; }
/* Seção e lista abertas somem no rail; o .op-cat assume o lugar. */
html[data-lateral="0"] .op-lateral .op-bloco > .op-secao,
html[data-lateral="0"] .op-lateral .op-bloco > .op-grupo { display: none; }

/* Botão de categoria: só no menu recolhido (tela larga). */
.op-cat { display: none; }
/* Bloco de 76 px centrado no trilho de 88 px (6 px de cada lado). Nome em
   11 px, que quebra em duas linhas se um dia não couber — nunca corta. */
html[data-lateral="0"] .op-lateral .op-cat {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative; width: 76px; margin: 0 auto; gap: 4px;
    min-height: 44px; padding: 8px 0 7px;
    background: none; border: 0; border-radius: 12px;
    color: var(--op-cat-nome); cursor: pointer;
    font: inherit;
}
html[data-lateral="0"] .op-lateral .op-cat:hover,
html[data-lateral="0"] .op-lateral .op-cat:focus-visible {
    background: var(--op-preenchimento);
}
html[data-lateral="0"] .op-lateral .op-cat:focus-visible,
html[data-lateral="0"] .op-grupo-inicio .op-item:focus-visible {
    outline: 2px solid var(--op-azul); outline-offset: 1px;
}
/* Selecionada: azul-claro com texto azul-escuro. Nada de bloco azul cheio. */
html[data-lateral="0"] .op-lateral .op-cat[aria-expanded="true"],
html[data-lateral="0"] .op-lateral .op-cat.op-cat-atual {
    background: var(--op-cat-atual-bg); color: var(--op-cat-atual-txt);
}
html[data-lateral="0"] .op-lateral .op-cat[aria-expanded="true"] .op-ic svg,
html[data-lateral="0"] .op-lateral .op-cat.op-cat-atual .op-ic svg,
html[data-lateral="0"] .op-grupo-inicio .op-item[aria-current="page"] .op-ic svg {
    stroke-width: 1.9;
}
html[data-lateral="0"] .op-lateral .op-cat .op-ic {
    flex: 0 0 auto; width: 24px; height: 24px; position: relative;
}
html[data-lateral="0"] .op-lateral .op-cat-nome {
    display: block; font-size: 11px; font-weight: 500; line-height: 1.15;
    text-align: center; white-space: normal; color: inherit;
}
html[data-lateral="0"] .op-lateral .op-cat[aria-expanded="true"] .op-cat-nome,
html[data-lateral="0"] .op-lateral .op-cat.op-cat-atual .op-cat-nome {
    font-weight: 600;
}

/* Contador da categoria: bolinha vermelha no canto do ícone, com contorno na
   cor do trilho para separar do desenho. Mora DENTRO do .op-ic. */
.op-cat-badge {
    position: absolute; top: -7px; right: -7px;
    box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--op-erro-bt); color: var(--op-branco);
    font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px var(--op-lateral);
}

/* Sinal sem número do Fiscal (HTML em _lateral.html, só quando o sinal de
   emissão não está verde). Bolinha de 8 px no mesmo canto: aviso (amarelo)
   ou erro (vermelho). */
.op-cat-sinal {
    position: absolute; top: -3px; right: -3px;
    width: 8px; height: 8px; border-radius: 50%;
    box-shadow: 0 0 0 2px var(--op-lateral);
}
.op-cat-sinal-aviso { background: var(--op-janela-cuidado); }
.op-cat-sinal-erro  { background: var(--op-erro-bt); }

/* Início no rail: mesmo visual da categoria (link direto, sem painel). */
html[data-lateral="0"] .op-grupo-inicio .op-item {
    flex-direction: column; justify-content: center; gap: 4px;
    width: 76px; margin: 0 auto;
    min-height: 44px; padding: 8px 0 7px; border-radius: 12px;
    color: var(--op-cat-nome);
}
html[data-lateral="0"] .op-grupo-inicio .op-item:hover,
html[data-lateral="0"] .op-grupo-inicio .op-item:focus-visible {
    background: var(--op-preenchimento); color: var(--op-cat-nome);
}
html[data-lateral="0"] .op-grupo-inicio .op-item[aria-current="page"] {
    background: var(--op-cat-atual-bg); color: var(--op-cat-atual-txt);
}
html[data-lateral="0"] .op-grupo-inicio .op-item .op-ic { flex: 0 0 auto; width: 24px; height: 24px; }
html[data-lateral="0"] .op-grupo-inicio .op-item .op-rotulo {
    display: block; font-size: 11px; font-weight: 500; line-height: 1.15;
    text-align: center; padding-right: 0; white-space: normal;
}
html[data-lateral="0"] .op-grupo-inicio .op-item[aria-current="page"] .op-rotulo {
    font-weight: 600;
}
/* Separador depois do Início: 40 px x 0,5 px. */
.op-rail-sep {
    list-style: none; width: 40px; height: 0.5px; margin: 6px auto;
    background: var(--op-borda);
}

/* Painel ao lado do rail (computador sempre; celular com a gaveta aberta). */
.op-painel-cat {
    display: none;
    position: fixed; top: 0; bottom: 0; left: 88px; width: 248px;
    background: var(--op-superficie); border-right: 0.5px solid var(--op-borda);
    box-shadow: var(--op-sombra-painel);
    z-index: 1046; flex-direction: column;
    padding: 16px 12px 16px;
}
html[data-lateral="0"] .op-painel-cat:not([hidden]) {
    display: flex;
}
.op-painel-cab {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 4px 8px 12px;
    margin-bottom: 4px;
}
.op-painel-cab strong {
    font-family: var(--op-fonte);
    font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--op-texto);
}
.op-painel-fechar {
    background: none; border: 0; border-radius: 6px;
    color: var(--op-cinza-cl); font-size: 1.25rem; line-height: 1;
    width: 28px; height: 28px; cursor: pointer;
}
.op-painel-fechar:hover { background: var(--op-fundo); color: var(--op-texto); }
#op-painel-lista { overflow-y: auto; flex: 1 1 auto; }
html[data-lateral="0"] .op-painel-cat .op-rotulo { display: revert; }
html[data-lateral="0"] .op-painel-cat .op-contador { display: revert; }
/* Opções do painel: 15 px só texto, cantos de 8 px, padding de 10 px. */
.op-painel-cat .op-item {
    min-height: 40px; padding: 10px; border-radius: var(--op-raio-item);
    font-size: 15px;
}
.op-painel-cat .op-item .op-rotulo { padding-right: 0; }
/* Configuração da categoria (ex.: Parâmetros financeiros) no fim do painel,
   depois de um separador fino. Sozinho no topo, o separador não aparece. */
.op-painel-sep {
    list-style: none; height: 0.5px; margin: 8px 10px;
    background: var(--op-borda);
}
.op-painel-sep:first-child { display: none; }

/* Bloco do menu na lateral: sem o visual de cartão do .op-bloco da home. */
.op-lateral .op-bloco {
    background: transparent; border: 0; border-radius: 0;
    box-shadow: none; overflow: visible;
}

.op-lateral .op-ic {
    flex: 0 0 44px;
    display: grid;
    place-content: center;
}
/* Todos os ícones: mesma caixa de 24 px e mesmo traço (1,75), estilo SF Symbols. */
.op-lateral .op-ic svg {
    width: 24px; height: 24px;
    fill: none; stroke: currentColor;
    stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* ----- empresa ativa e troca ----- */
/* Topo do trilho: marca do Opperi (quadrado de 36 px) e, abaixo, a pílula com
   as iniciais da empresa ativa — ela abre a troca de empresa. O logo da
   empresa saiu do trilho: a marca de cima é sempre a do sistema. */
.op-empresa {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 14px 6px 8px;
}
.op-marca-opperi {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
    background: var(--op-azul-bt); display: grid; place-content: center;
}
.op-marca-opperi img { width: 20px; height: 20px; display: block; }
.op-empresa-bt {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    height: 28px; padding: 0 8px; margin: 0 auto;
    background: var(--op-superficie); border: 0.5px solid var(--op-borda);
    border-radius: var(--op-raio-pilula);
    color: var(--op-cat-nome); font: inherit; font-size: 12px; font-weight: 600;
    line-height: 1;
}
.op-empresa-bt:hover,
.op-empresa-bt:focus-visible,
.op-empresa-bt[aria-expanded="true"] { background: var(--op-preenchimento); }
.op-empresa-bt:focus-visible { outline: 2px solid var(--op-azul); outline-offset: 1px; }
.op-empresa-bt::after { display: none; }   /* seta do Bootstrap: usamos a nossa */
.op-empresa-seta {
    width: 10px; height: 10px; flex: 0 0 auto;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}

/* ----- itens ----- */
.op-rolagem { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 6px; }
.op-grupo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
/* Entre as categorias do trilho, um respiro de 2 px. */
html[data-lateral="0"] .op-rolagem > .op-bloco { margin-bottom: 2px; }
.op-secao {
    font-size: .63rem; letter-spacing: .13em; text-transform: uppercase;
    font-weight: 600; color: var(--op-cinza-cl); padding: 14px 10px 5px;
}
.op-item {
    display: flex; align-items: center; min-height: 38px;
    border-radius: 9px; color: var(--op-cinza); text-decoration: none;
    font-size: .865rem; font-weight: 500;
    transition: background .12s, color .12s;
}
.op-item:hover, .op-item:focus-visible { background: var(--op-fundo); color: var(--op-texto); }
/* Submenu sem ícone: só texto (e contador). Padding no lugar da coluna do ícone. */
.op-bloco .op-grupo .op-item { padding: 0 10px 0 12px; }
.op-item .op-rotulo { padding-right: 10px; }
.op-bloco .op-grupo .op-item .op-rotulo { padding-right: 0; flex: 1 1 auto; }
.op-contador {
    margin-left: auto; margin-right: 0; min-width: 20px; height: 20px; padding: 0 6px;
    box-sizing: border-box; border-radius: 999px;
    background: var(--op-erro-bt); color: var(--op-branco);
    font-size: 11px; font-weight: 600; line-height: 20px; text-align: center;
}
html[data-lateral="0"] .op-bloco .op-contador { display: none; }
/* Opção da tela atual no painel (e na gaveta): fundo e texto do painel. */
.op-item[aria-current="page"] {
    background: var(--op-painel-atual-bg); color: var(--op-painel-atual-txt); font-weight: 600;
}

/* ----- rodape: Clara, conta e tema ----- */
/* Separado das categorias por um fio de 0,5 px. Botões de 44 px centrados.
   A assinatura do Opperi saiu daqui: a marca agora mora no topo do trilho. */
.op-pe {
    border-top: 0.5px solid var(--op-lateral-borda); padding: 8px 6px 10px;
    display: grid; justify-items: center; gap: 4px;
}
.op-clara-atalho {
    display: flex; align-items: center; justify-content: center;
    width: 76px; min-height: 44px; padding: 8px 4px;
    background: var(--op-superficie); color: var(--op-azul);
    border-radius: 12px; text-decoration: none;
    font-size: 11px; font-weight: 600; text-align: center; line-height: 1.2;
    box-shadow: var(--op-sombra-cartao);
}
.op-clara-atalho:hover { color: var(--op-azul-escuro); }
.op-conta { display: flex; justify-content: center; width: 100%; }
.op-conta-bt {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    background: none; border: 0; border-radius: 12px;
    color: var(--op-cat-nome);
}
.op-conta-bt:hover, .op-conta-bt:focus-visible { background: var(--op-preenchimento); }
.op-conta-bt:focus-visible { outline: 2px solid var(--op-azul); outline-offset: 1px; }
.op-conta-bt::after { display: none; }
.op-rodape-bt {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    background: none; border: 0; border-radius: 12px;
    color: var(--op-cat-nome); font-size: .8rem; font-weight: 500;
}
.op-rodape-bt:hover, .op-rodape-bt:focus-visible { background: var(--op-preenchimento); }
.op-rodape-bt:focus-visible { outline: 2px solid var(--op-azul); outline-offset: 1px; }
/* Recolher/abrir o menu: o botão fica reservado no HTML, mas o trilho é fixo
   (sem modo largo), então ele não aparece nem recebe foco. */
.op-rodape-bt.op-recolher { display: none; }

/* ----- claro / escuro -----
   Os dois icones existem no HTML e o CSS escolhe qual aparece. Fosse o
   JavaScript a desenhar, o botao piscaria o icone errado ate o script rodar —
   justo o defeito que o script no <head> existe para evitar. */
.op-tema-sol { display: none; }
[data-bs-theme="dark"] .op-tema-lua { display: none; }
[data-bs-theme="dark"] .op-tema-sol { display: block; }

/* Mesmo arranjo para o logotipo da tela de entrar: as duas versoes estao no
   HTML e o CSS escolhe. O logo normal tem o nome em petroleo escuro e sumia
   no fundo escuro; a versao negativa mantem o azul da marca, coisa que um
   filtro que pinta tudo de branco nao faria. */
.op-logo-escuro { display: none; }
[data-bs-theme="dark"] .op-logo-claro { display: none; }
[data-bs-theme="dark"] .op-logo-escuro { display: inline-block; }
.op-tema svg { fill: none; stroke: currentColor; stroke-width: 2;
               stroke-linecap: round; stroke-linejoin: round; }
.op-tema .op-tema-lua { fill: currentColor; stroke: none; }

/* ----- area de conteudo ----- */
.op-principal { flex: 1 1 auto; min-width: 0; }
.op-conteudo {
    max-width: 1480px;
    padding: 1.25rem clamp(1rem, 2.4vw, 1.75rem) 3rem;
}

/* ----- barra de topo: so no celular ----- */
.op-topo-movel { display: none; }
.op-fundo-gaveta { display: none; }

@media (max-width: 991.98px) {
    .op-app { font-size: 17px; }
    .op-topo { display: none; }
    .op-topo-movel {
        display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
        min-height: 60px;
        background: var(--op-superficie);
        border-bottom: 1px solid var(--op-borda);
        padding: 8px 14px;
        position: sticky; top: 0; z-index: 1030;
    }
    .op-topo-movel .op-busca { flex: 1 0 100%; max-width: none; }
    .op-topo-movel .op-hamburguer {
        background: none; border: 0; color: var(--op-texto); padding: 6px;
        display: grid; place-content: center;
    }
    .op-topo-movel .op-hamburguer svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
    .op-topo-movel img.op-logo { height: 24px; }
    .op-topo-movel .op-topo-perfil { margin-left: auto; }
    /* Logo e avatar são links, mas não levam sublinhado (passada visual do Agro). */
    .op-topo-movel a, .op-topo-movel a:hover { text-decoration: none; }

    /* Gaveta = mesmo rail do computador (88px). Painel ao lado quando aberto.
       Sombra só com a gaveta aberta — fechada, translateX some o rail e a
       sombra não pode vazar na borda esquerda da tela. O -8px evita a
       lingueta de 1 px que alguns navegadores deixam na borda. */
    .op-lateral,
    html[data-lateral="0"] .op-lateral {
        position: fixed; top: 0; bottom: 0; left: 0; height: 100%;
        width: 88px;
        transform: translateX(calc(-100% - 8px));
        transition: transform .2s ease, visibility .2s ease;
        box-shadow: none;
        visibility: hidden;
        pointer-events: none;
        z-index: 1045;
    }
    /* Painel só com a gaveta aberta (no desktop ele abre sem data-gaveta). */
    html[data-lateral="0"] .op-painel-cat:not([hidden]) { display: none; }
    html[data-gaveta="1"][data-lateral="0"] .op-painel-cat:not([hidden]) {
        display: flex;
        left: 88px;
        /* Cabe em 360px: rail 88 + painel + faixa do fundo para fechar. */
        width: min(248px, calc(100vw - 136px));
        z-index: 1046;
        box-shadow: var(--op-sombra-painel);
    }
    html[data-gaveta="1"][data-lateral="0"] .op-painel-cat .op-item {
        min-height: 44px;
    }
    html[data-gaveta="1"] .op-lateral {
        transform: none;
        visibility: visible;
        pointer-events: auto;
        box-shadow: 0 0 40px var(--op-sombra-3);
    }
    html[data-gaveta="1"] .op-fundo-gaveta {
        display: block; position: fixed; inset: 0;
        background: var(--op-veu); z-index: 1040;
    }
    /* Tema volta a aparecer no rodapé do rail (só o ícone; rótulo já some). */
    .op-conteudo { padding: 1rem 1rem calc(2.5rem + 49px + env(safe-area-inset-bottom, 0px)); }
    .op-tabbar { display: flex; }
}

/* Barra de abas do celular: 49 px + área segura. */
.op-tabbar {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
    height: calc(49px + env(safe-area-inset-bottom, 0px));
    padding: 0 4px env(safe-area-inset-bottom, 0px);
    background: var(--op-superficie);
    border-top: 0.5px solid var(--op-borda);
    align-items: stretch; justify-content: space-around;
}
.op-tabbar-item {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 4px 2px;
    background: none; border: 0; color: var(--op-cinza);
    text-decoration: none; font-size: 10px; font-weight: 500;
    cursor: pointer;
}
.op-tabbar-item svg {
    width: 24px; height: 24px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.op-tabbar-item.ativo,
.op-tabbar-item[aria-current="page"] {
    color: var(--op-azul); font-weight: 600;
}
.op-tabbar-item.ativo svg,
.op-tabbar-item[aria-current="page"] svg { stroke-width: 2.2; }

@media (prefers-reduced-motion: reduce) {
    .op-lateral { transition: none; }
}

/* -------------------------------------------------------- PAINEL INICIO */
/* Cartoes e blocos da tela de Inicio. Nada aqui e generico de proposito:
   os nomes comecam com op-inicio/op-tile/op-bloco para nao colidir com o
   Bootstrap nem com as outras telas. */

/* A area de conteudo ganha fundo: cartao branco sobre branco nao existe.
   A lateral continua branca, entao a divisa entre as duas fica visivel
   sem precisar de sombra. */
.op-principal { background: var(--op-fundo); }

.op-inicio-topo {
    display: flex; flex-wrap: wrap; align-items: flex-end;
    justify-content: space-between; gap: 12px; margin-bottom: 18px;
}
.op-inicio-tit h1 { margin: 0; font-size: 22px; color: var(--op-texto); }
.op-inicio-tit p  { margin: 2px 0 0; font-size: .82rem; color: var(--op-cinza-cl); }
.op-atalhos { display: flex; flex-wrap: wrap; gap: 8px; }

/* ----- cartoes de numero ----- */
.op-tiles {
    display: grid; gap: 14px; margin-bottom: 18px;
    grid-template-columns: repeat(auto-fit, minmax(min(196px, 100%), 1fr));
}
.op-tile {
    background: var(--op-superficie); border: 1px solid var(--op-borda);
    border-radius: 12px; padding: 15px 16px;
    display: flex; flex-direction: column; gap: 5px;
    text-decoration: none; color: inherit;
    transition: border-color .15s, transform .15s;
}
a.op-tile:hover { border-color: var(--op-azul-claro); transform: translateY(-1px); }
.op-tile-topo { display: flex; align-items: center; justify-content: space-between; }
.op-tile h2 {
    margin: 0; font-family: var(--bs-body-font-family);
    font-size: 13px; font-weight: 500; color: var(--op-cinza);
    letter-spacing: 0;
}
.op-tile .v {
    font-size: 28px; font-weight: 600; line-height: 1.15;
    letter-spacing: -.02em; color: var(--op-texto);
}
.op-tile .d { font-size: 13px; color: var(--op-cinza-cl); }
.op-tile .d.melhorou { color: var(--op-ok-txt); }
.op-tile .d.piorou { color: var(--op-erro-txt); }

.op-selo {
    width: 32px; height: 32px; border-radius: 9px;
    display: grid; place-content: center; flex: 0 0 auto;
    background: var(--op-fundo); color: var(--op-cinza);
}
.op-selo svg {
    width: 17px; height: 17px; fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.op-bloco-cab-clara { flex-wrap: wrap; }
.op-bloco-acoes {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 8px; margin-left: auto; flex-wrap: wrap;
}

/* ----- duas colunas ----- */
.op-colunas {
    display: grid; gap: 18px; align-items: start;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
}
@media (max-width: 991.98px) { .op-colunas { grid-template-columns: 1fr; } }
/* Sem financeiro nem contas a pagar a coluna da direita fica vazia: a lista
   de pedidos ocupa a largura toda em vez de deixar um buraco ao lado. */
.op-colunas-unica { grid-template-columns: 1fr; }
/* As duas colunas empilham blocos e precisam do MESMO respiro. Sem isto a
   esquerda nao tinha nenhum: os sete blocos dela encostavam um no outro, e a
   direita, que ja era flex com gap, respirava. No claro a borda ainda separava
   os cartoes; no escuro, onde cartao e pagina estao mais proximos em
   luminosidade, dois cartoes colados viram um borrao so. O modo escuro nao
   criou o defeito — mostrou ele. */
.op-coluna, .op-lado {
    min-width: 0; display: flex; flex-direction: column; gap: 18px;
}

.op-bloco {
    background: var(--op-superficie); border: 0;
    border-radius: var(--op-raio-cartao);
    box-shadow: var(--op-sombra-cartao);
    overflow: hidden;
}
.op-bloco-cab {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--op-borda);
}
.op-bloco-cab h3 { margin: 0; font-size: .95rem; color: var(--op-texto); }
.op-graficos .op-bloco-cab { gap: 8px; }
.op-graficos .op-bloco-cab h3 { font-size: .88rem; }
.op-link { font-size: .8rem; font-weight: 500; color: var(--op-azul); text-decoration: none; }
.op-link:hover { text-decoration: underline; }
.op-vazio { margin: 0; padding: 18px 16px; font-size: .85rem; color: var(--op-cinza-cl); }

/* ----- cartao do Ricardo (CFO virtual), so para administrador -----
   Cada par de cor aqui e um dos conferidos por ferramentas/contraste_escuro.py
   (texto/neutro, texto/fundo, erro/superficie). A resposta vem em texto puro,
   com as quebras de linha preservadas pelo pre-wrap. */
.op-ricardo { margin-bottom: 18px; }
.op-ricardo-historico {
    max-height: 460px; overflow-y: auto; padding: 14px 16px;
    display: flex; flex-direction: column; gap: 10px;
}
.op-ricardo-historico .op-vazio { padding: 4px 0; }
/* Balão único do Opperi: o treino e a Clara usam as mesmas classes.
   A altura é a do texto mais o horário — sem min-height e sem a margem
   que o navegador põe no <p>. Quem fala fica no verde-água; o cliente, no card. */
.op-balao,
.op-ricardo-msg {
    flex: 0 0 auto; width: fit-content; max-width: 78%;
    margin: 0; padding: 10px 14px; border-radius: 16px;
    font-size: .94rem; line-height: 1.45; color: var(--op-texto);
    overflow-wrap: anywhere;
}
/* O pre-wrap fica no texto, não na caixa. Na caixa, a quebra de linha
   do HTML vira linha em branco e o balão cresce. */
.op-balao p,
.op-ricardo-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.op-balao.eu,
.op-ricardo-msg.eu {
    align-self: flex-end; background: var(--op-balao-eu); color: var(--op-texto);
    border: 1px solid var(--op-balao-eu-borda); border-radius: 16px 4px 16px 16px;
}
.op-balao.ele,
.op-ricardo-msg.ele {
    align-self: flex-start; background: var(--op-superficie);
    border: 1px solid var(--op-borda); border-radius: 4px 16px 16px 16px;
}
.op-balao.agrupada,
.op-ricardo-msg.agrupada { margin-top: -0.35rem; border-radius: 16px; }
.op-balao .quem,
.op-ricardo-msg .quem { display: block; font-size: .72rem; font-weight: 600; margin-bottom: 2px; }
.op-balao-hora {
    display: block; text-align: right; font-size: .68rem; margin-top: 4px;
    color: var(--op-cinza);
}
.op-balao.eu .op-balao-hora,
.op-ricardo-msg.eu .op-balao-hora { color: var(--op-verde-txt); }
.op-ricardo-form {
    display: flex; gap: 8px; align-items: flex-end;
    padding: 12px 16px; border-top: 1px solid var(--op-borda);
}
.op-ricardo-form textarea { flex: 1 1 auto; resize: vertical; }
.op-ricardo-erro { margin: 0; padding: 0 16px 12px; font-size: .82rem; color: var(--op-erro-txt); }
.op-lado .op-ricardo { margin-bottom: 0; }
.op-lado .op-ricardo-historico { max-height: 340px; padding: 12px 14px; }
.op-lado .op-ricardo-msg { max-width: 100%; }
.op-lado .op-ricardo-form { flex-direction: column; align-items: stretch; padding: 12px 14px; }
.op-lado .op-ricardo-form .btn { align-self: flex-end; }

/* ----- linha de pedido ----- */
.op-mov {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px; border-bottom: 1px solid var(--op-borda);
    text-decoration: none; color: inherit; transition: background .12s;
}
.op-mov:last-child { border-bottom: 0; }
.op-mov:hover { background: var(--op-fundo); }
.op-mov .op-selo { width: 34px; height: 34px; }
.op-mov .txt { flex: 1 1 auto; min-width: 0; }
/* Nome longo de cliente nao pode empurrar o valor para cima do texto:
   corta com reticencias, como o resto da linha. */
.op-mov .txt b {
    display: block; font-size: .87rem; font-weight: 500; color: var(--op-texto);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.op-mov .txt > span {
    display: block; font-size: .77rem; color: var(--op-cinza-cl);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.op-mov-val { flex: 0 0 auto; text-align: right; }
.op-mov-val b { display: block; font-size: .86rem; font-weight: 600; color: var(--op-texto); }
.op-mov-val span { display: block; font-size: .72rem; color: var(--op-cinza-cl); }

.s-ok     { background: var(--op-ok-bg);     color: var(--op-ok-txt); }
.s-azul   { background: var(--op-info-bg);   color: var(--op-info-txt); }
.s-erro   { background: var(--op-erro-bg);   color: var(--op-erro-txt); }
.s-neutro { background: var(--op-fundo);     color: var(--op-cinza); }

/* ----- filtro de tempo do "a receber" ----- */
/* Cada clique recarrega a pagina: sao links com ?receber=, nao botao de JS.
   E o mesmo desenho do resto do sistema, onde filtro e sempre parametro de
   URL — da para guardar nos favoritos e voltar no historico. */
.op-filtro {
    display: flex; gap: 4px; padding: 10px 16px 0; flex-wrap: wrap;
}
.op-filtro a {
    font-size: .74rem; font-weight: 500; text-decoration: none;
    color: var(--op-cinza); background: var(--op-fundo);
    border: 1px solid var(--op-borda); border-radius: 99px;
    padding: 3px 10px; white-space: nowrap;
}
.op-filtro a:hover { border-color: var(--op-azul-claro); color: var(--op-texto); }
.op-filtro a.ativo {
    background: var(--op-info-bg); border-color: var(--op-info-bg);
    color: var(--op-info-txt); font-weight: 600;
}

/* O calendario e um <details> nativo: o resumo e mais uma pilula, so que
   quadrada e sem texto, e o formulario abre por cima das barras.

   Por isso #a-receber precisa de overflow visivel — o .op-bloco corta o que
   transborda, e cortaria o formulario pela metade. Este bloco nao tem nada
   mais que possa vazar. */
#a-receber { overflow: visible; }
.op-filtro { position: relative; }
.op-cal > summary {
    list-style: none; cursor: pointer;
    font-size: .74rem; color: var(--op-cinza); background: var(--op-fundo);
    border: 1px solid var(--op-borda); border-radius: 99px;
    padding: 4px 8px; display: inline-flex; align-items: center;
}
.op-cal > summary::-webkit-details-marker { display: none; }
.op-cal > summary:hover { border-color: var(--op-azul-claro); color: var(--op-texto); }
.op-cal[open] > summary {
    background: var(--op-info-bg); border-color: var(--op-info-bg);
    color: var(--op-info-txt);
}
.op-cal summary svg {
    width: 14px; height: 14px; fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.op-intervalo {
    position: absolute; top: calc(100% + 7px); right: 0; z-index: 20;
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px;
    width: max-content; max-width: 100%;
    background: var(--op-superficie); border: 1px solid var(--op-borda);
    border-radius: 10px; padding: 11px 12px;
    box-shadow: 0 10px 26px var(--op-sombra-pop);
}
.op-intervalo label {
    display: flex; flex-direction: column; gap: 3px;
    font-size: .72rem; color: var(--op-cinza-cl);
}
.op-intervalo input[type="date"] {
    font-family: inherit; font-size: .78rem; color: var(--op-texto);
    border: 1px solid var(--op-borda); border-radius: 7px;
    padding: 4px 7px; background: var(--op-superficie);
}
.op-intervalo input[type="date"]:focus { outline: none; border-color: var(--op-azul); }

.op-rodape {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; padding: 11px 16px; border-top: 1px solid var(--op-borda);
    font-size: .8rem; color: var(--op-cinza);
}
.op-rodape b { font-size: .92rem; font-weight: 600; color: var(--op-texto); }

/* ----- barras por forma de pagamento ----- */
.op-barras { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.op-barra .topo {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 10px; margin-bottom: 5px;
}
.op-barra .topo span { font-size: .81rem; color: var(--op-cinza); }
.op-barra .topo b    { font-size: .81rem; font-weight: 600; color: var(--op-texto); }
.op-barra .trilho {
    height: 7px; border-radius: 99px; background: var(--op-fundo);
    border: 1px solid var(--op-borda); overflow: hidden;
}
.op-barra .preenche { display: block; height: 100%; border-radius: 99px; background: var(--op-azul); }
.op-barra .preenche.f-pix      { background: var(--op-verde); }
.op-barra .preenche.f-boleto   { background: var(--op-azul); }
.op-barra .preenche.f-cartao   { background: var(--op-meta-aberto); }
.op-barra .preenche.f-dinheiro { background: var(--op-cinza-cl); }

/* ----- cartão de implantação (Início + Configurações) ----- */
.op-implantacao { margin-bottom: 1.25rem; }
.op-implantacao-lista {
    list-style: none; margin: 0; padding: 0;
}
.op-implantacao-lista li {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; padding: 12px 16px;
    border-top: 1px solid var(--op-borda);
}
.op-implantacao-lista li.feito { opacity: .72; }
.op-implantacao-txt {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.op-implantacao-txt strong {
    font-size: .88rem; font-weight: 600; color: var(--op-texto);
}
.op-implantacao-txt span {
    font-size: .78rem; color: var(--op-cinza);
}
/* Recolhido (padrão no Início): só o próximo passo pendente. */
.op-implantacao[data-aberta="0"] .op-implantacao-lista li:not(.proximo) {
    display: none;
}
.op-implantacao-pe {
    padding: 8px 16px 12px; border-top: 1px solid var(--op-borda);
}
.op-implantacao-toggle {
    background: none; border: 0; padding: 0;
    color: var(--op-azul); font-size: .82rem; font-weight: 500;
    cursor: pointer; text-decoration: underline;
}
.op-implantacao-toggle:hover { color: var(--op-texto); }

/* ----- par de numeros (contas a pagar) ----- */
.op-duplo { display: grid; grid-template-columns: 1fr 1fr; }
.op-duplo > div { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.op-duplo > div + div { border-left: 1px solid var(--op-borda); }
.op-duplo .rot { font-size: .73rem; color: var(--op-cinza-cl); }
.op-duplo b { font-size: 1.02rem; font-weight: 600; color: var(--op-texto); }
.op-duplo b.neg { color: var(--op-erro-txt); }

.op-atalhos-lista { display: flex; flex-direction: column; }
.op-atalhos-lista a {
    padding: 11px 16px; font-size: .85rem; color: var(--op-azul);
    text-decoration: none; border-bottom: 1px solid var(--op-borda);
}
.op-atalhos-lista a:last-child { border-bottom: 0; }
.op-atalhos-lista a:hover { background: var(--op-fundo); }

/* ----- graficos de venda: torres (SVG gerado na view) ----- */
/* Quatro cartoes quase quadrados, em grade 2x2: semana, mes, mesmo mes do ano
   anterior e o ano mes a mes. Empilhados eles faziam a coluna esquerda ficar
   com o dobro da altura da direita, e um vazio enorme ao lado. */
.op-graficos {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* Sem biblioteca: as coordenadas das barras vem prontas do Python, em texto.
   Cada <rect> carrega um <title>, que o navegador mostra ao passar o mouse —
   e a unica forma de ler 31 torres sem poluir o eixo com 31 numeros. */
/* A torre de comparacao precisa de um cinza mais firme que o --op-borda,
   que some no fundo branco do cartao; e mais apagado que o --op-cinza-cl,
   que competiria com a torre azul do mes atual. */
.op-gr { padding: 14px 16px 16px; --op-torre-antes: var(--op-torre-cinza); }
.op-gr svg { display: block; width: 100%; height: auto; }
.gr-grade { stroke: var(--op-borda); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gr-agora { fill: var(--op-azul); }
.gr-antes { fill: var(--op-torre-antes); }
.gr-corrente { fill: var(--op-meta-aberto); }
.op-gr rect { transition: opacity .12s; }
.op-gr svg:hover rect { opacity: .55; }
.op-gr svg rect:hover { opacity: 1; }

.op-eixo {
    display: flex; justify-content: space-between;
    font-size: .7rem; color: var(--op-cinza-cl); margin-top: 5px;
    padding: 0 2px;
}
/* Um rotulo por torre: cada um ocupa a mesma fatia que a barra acima dele.
   O padding tem que bater com a margem do SVG (GRAFICO_MARGEM). */
.op-eixo-torres { padding: 0 10px; min-width: 0; }
.op-eixo-torres span {
    flex: 1 1 0; min-width: 0; overflow: hidden;
    text-align: center; font-size: .66rem;
}
.op-eixo-torres .op-mes-atual { color: var(--op-azul); font-weight: 600; }

/* Empilhada: no cartao estreito as duas legendas lado a lado quebravam em
   quatro linhas tortas. */
.op-legenda {
    display: flex; flex-direction: column; gap: 3px; margin-top: 12px;
    font-size: .76rem; color: var(--op-cinza); line-height: 1.45;
}
.op-legenda > span { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.op-legenda i { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.op-legenda i.ag { background: var(--op-azul); }
.op-legenda i.an { background: var(--op-torre-cinza); }
.op-legenda i.ac { background: var(--op-meta-aberto); }
.op-legenda b  { font-weight: 600; color: var(--op-texto); }
.op-legenda em { font-style: normal; color: var(--op-cinza-cl); }
.op-link-morto { font-size: .75rem; color: var(--op-cinza-cl); }

.op-sobe  { color: var(--op-ok-txt);  font-weight: 600; white-space: nowrap; }
.op-desce { color: var(--op-erro-txt); font-weight: 600; white-space: nowrap; }

/* O rodape do cartao duplo agora carrega a variacao: precisa respirar. */
.op-duplo .rot { line-height: 1.45; }

@media (max-width: 575.98px) {
    .op-inicio-topo { align-items: stretch; }
    .op-atalhos .btn { flex: 1 1 auto; text-align: center; }
    .op-mov { gap: 10px; padding: 11px 13px; }
    .op-mov .op-selo { display: none; }
    .op-duplo { grid-template-columns: 1fr; }
    .op-duplo > div + div { border-left: 0; border-top: 1px solid var(--op-borda); }
}

@media (prefers-reduced-motion: reduce) {
    .op-tile { transition: none; }
    a.op-tile:hover { transform: none; }
}

/* ------------------------------------------------------------- DITAR PEDIDO
   Painel que preenche o formulario a partir de uma frase falada ou colada.
   Fica ao lado do formulario, no espaco que sobrava a direita.

   A largura do formulario aqui e 660px, e nao os 860px do .op-form sozinho:
   com o painel de 400px ao lado, 860+400 nao cabe em tela de 1440. */
.op-lado-a-lado { display: flex; gap: 20px; align-items: flex-start; }
.op-lado-a-lado .op-form { flex: 1 1 620px; max-width: 660px; min-width: 0; }

.op-ditar {
    flex: 0 0 400px;
    background: var(--op-superficie); border: 1px solid var(--op-borda);
    border-radius: 12px; display: flex; flex-direction: column;
    position: sticky; top: 20px; max-height: calc(100vh - 120px);
}

/* Abaixo de 1200px os dois nao cabem lado a lado: o painel desce e vira uma
   caixa normal acima do formulario nao — abaixo, para o formulario continuar
   sendo a primeira coisa que a pessoa ve. */
@media (max-width: 1199.98px) {
    .op-lado-a-lado { flex-direction: column; }
    .op-lado-a-lado .op-form { max-width: 860px; width: 100%; }
    .op-ditar {
        position: static; flex: 1 1 auto; width: 100%; max-width: 860px;
        max-height: none; order: 2;
    }
    .op-ditar-corpo { max-height: 320px; }
}

.op-ditar-cab {
    display: flex; align-items: center; gap: 9px;
    padding: 12px 14px; border-bottom: 1px solid var(--op-borda);
}
.op-ditar-selo {
    width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
    background: var(--op-info-bg); color: var(--op-info-txt);
    display: grid; place-content: center;
}
.op-ditar-selo svg {
    width: 15px; height: 15px; fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.op-ditar-nome {
    margin: 0; font-size: .92rem;
    font-family: 'Poppins', var(--bs-body-font-family); font-weight: 600;
}
/* A empresa ativa fica escrita no painel: trocar de empresa muda o que ele
   enxerga, e isso precisa estar visivel onde se usa. */
.op-ditar-emp {
    margin-left: auto; font-size: .68rem; color: var(--op-cinza-cl);
    background: var(--op-fundo); border: 1px solid var(--op-borda);
    border-radius: 99px; padding: 2px 8px; white-space: nowrap;
}

.op-ditar-corpo {
    flex: 1 1 auto; overflow-y: auto; padding: 14px;
    display: flex; flex-direction: column; gap: 10px; min-height: 180px;
}
.op-bolha {
    max-width: 90%; padding: 9px 12px; border-radius: 12px;
    font-size: .85rem; line-height: 1.45; white-space: pre-wrap;
}
.op-eu {
    align-self: flex-end; background: var(--op-info-bg);
    color: var(--op-info-txt); border-bottom-right-radius: 4px;
}
.op-ia {
    align-self: flex-start; background: var(--op-fundo);
    border: 1px solid var(--op-borda); border-bottom-left-radius: 4px;
}
.op-ditar-titulo { font-weight: 500; margin-bottom: 5px; }
.op-achou {
    display: flex; align-items: flex-start; gap: 7px;
    font-size: .79rem; margin-top: 5px; color: var(--op-ok-txt);
}
.op-achou i {
    flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%;
    background: var(--op-ok-bg); display: grid; place-content: center;
    font-style: normal; font-size: .6rem; margin-top: 1px;
}
.op-achou b { color: var(--op-texto); }
.op-falta { color: var(--op-alerta-txt); }
.op-falta i { background: var(--op-alerta-bg); }
.op-aumento {
    display: flex; align-items: flex-start; gap: .4rem;
    margin: .35rem 0 0; padding: .4rem .55rem;
    background: var(--op-alerta-bg); color: var(--op-alerta-txt);
    border: 1px solid var(--op-alerta-borda); border-radius: .4rem;
    font-weight: 700;
}
.op-aumento svg {
    width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin-top: .1rem;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}

.op-ditar-pe { border-top: 1px solid var(--op-borda); padding: 11px 12px; }
.op-ditar-entrada { display: flex; gap: 7px; align-items: flex-end; flex-wrap: wrap; }
.op-ditar-texto {
    flex: 1 1 100%; font: inherit; font-size: .86rem;
    border: 1px solid var(--op-borda-forte); border-radius: .6rem; padding: .45rem .65rem;
    resize: vertical; min-height: 56px;
}
.op-ditar-texto:focus { outline: none; border-color: var(--op-azul); }
.op-ditar-enviar { margin-left: auto; }
.op-ditar-mic {
    width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
    border: 1px solid var(--op-borda); background: var(--op-fundo);
    color: var(--op-cinza); display: grid; place-content: center; cursor: pointer;
}
.op-ditar-mic svg {
    width: 17px; height: 17px; fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.op-ditar-mic:hover { border-color: var(--op-azul-claro); color: var(--op-texto); }
/* Gravando: vermelho e pulsando. Ficar em duvida se o microfone esta ligado e
   pior do que nao ter microfone. */
.op-ditar-mic.gravando {
    background: var(--op-erro-bg); border-color: var(--op-erro-borda); color: var(--op-erro-txt);
    animation: op-pulsa 1.2s ease-in-out infinite;
}
@keyframes op-pulsa { 50% { box-shadow: 0 0 0 5px var(--op-pulso); } }
@media (prefers-reduced-motion: reduce) { .op-ditar-mic.gravando { animation: none; } }

.op-ditar-aviso {
    margin: 8px 0 0; font-size: .7rem; color: var(--op-cinza-cl); line-height: 1.4;
}

/* Páginas 400/403/404/500 — sem estilo embutido no HTML (ajuda o CSP). */
.op-pagina-erro {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.op-pagina-erro-caixa { max-width: 28rem; }

/* Campo preenchido pelo painel. A marca some assim que a pessoa mexe nele —
   dali em diante o campo e dela. */
.op-ditado {
    border-color: var(--op-verde) !important;
    background-color: var(--op-ditado);
}

/* Escolha entre candidatos: a duvida vira botao em vez de ficar so no texto.
   Quem decide ve a lista inteira e resolve com um clique, sem ir ate o campo. */
.op-escolhas { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.op-escolhas-tit { font-size: .8rem; font-weight: 500; color: var(--op-texto); }
.op-escolha {
    text-align: left; font: inherit; font-size: .81rem;
    background: var(--op-superficie); color: var(--op-texto);
    border: 1px solid var(--op-borda); border-radius: 8px;
    padding: 6px 10px; cursor: pointer; transition: border-color .12s, background .12s;
}
.op-escolha:hover, .op-escolha:focus-visible {
    border-color: var(--op-azul); background: var(--op-info-bg); color: var(--op-info-txt);
}

/* Resultado de pergunta sobre cliente. Nada de financeiro aparece aqui:
   o painel nao tem consulta de dinheiro no repertorio. */
.op-achado {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    padding: 6px 0; border-bottom: 1px solid var(--op-borda); font-size: .82rem;
}
.op-achado:last-child { border-bottom: 0; }
.op-achado b { color: var(--op-texto); font-weight: 500; }
.op-ver-ficha {
    font: inherit; font-size: .74rem; color: var(--op-azul);
    background: none; border: 0; padding: 0; cursor: pointer;
    text-decoration: underline; margin-left: auto;
}
.op-ver-ficha:disabled { color: var(--op-cinza-cl); cursor: default; text-decoration: none; }
.op-ficha {
    flex: 1 1 100%; font-size: .76rem; color: var(--op-cinza); line-height: 1.45;
}


/* ----- painel financeiro (23/09) -----
   Listas em cartoes iguais. Cada lista mostra ate 10 linhas e rola por
   dentro, com o cabecalho parado; a pagina nao cresce com o volume de
   titulos. Linhas baixas, letra menor e uma linha por item: o nome longo e
   cortado com reticencias (o nome inteiro fica no title), e a tabela cabe na
   largura do cartao, sem rolagem para o lado. */
.op-painel-duas {
    display: grid; gap: 18px; align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
/* Listagem padrão (Parte 5 Apple): bloco branco 12 px, cabeçalho 13 px
   cinza sem fundo, linhas 52 px, separador 0,5 px, hover --op-superficie-2. */
.op-tabela-bloco {
    background: var(--op-superficie);
    border-radius: var(--op-raio-grupo);
    overflow: hidden;
}
.op-tabela { font-size: 13px; margin-bottom: 0; }
.op-tabela > thead th {
    background: transparent; color: var(--op-cinza);
    font-size: 13px; font-weight: 500;
    text-transform: none; letter-spacing: 0;
    border-bottom: 0.5px solid var(--op-linha);
}
.op-tabela > :not(caption) > * > * {
    padding: 0 12px; height: 52px; line-height: 1.35; vertical-align: middle;
    border-bottom: 0.5px solid var(--op-linha);
}
.op-tabela > tbody > tr:last-child > * { border-bottom: 0; }
.op-tabela > tbody > tr.op-tabela-clicavel { cursor: pointer; }
.op-tabela > tbody > tr.op-tabela-clicavel:hover > * {
    background: var(--op-superficie-2);
}
.op-tabela .badge { font-size: .64rem; padding: 2px 5px; }
.op-tabela .btn { padding: 1px 8px; font-size: .72rem; }
.op-tabela .form-select,
.op-tabela .form-control {
    font-size: .75rem; padding-top: .1rem; padding-bottom: .1rem;
    min-height: calc(1.2em + .4rem);
}
.op-tabela-cartao { max-height: 318px; overflow-y: auto; overflow-x: hidden; }
.op-tabela-cartao .op-tabela {
    table-layout: fixed; width: 100%; margin-bottom: 0;
}
.op-tabela-cartao .op-tabela > thead th { position: sticky; top: 0; z-index: 1; }
.op-tabela-cartao .op-tabela td:first-child,
.op-tabela-cartao .op-tabela th:first-child { padding-left: 14px; }
.op-tabela-cartao .op-tabela td:last-child,
.op-tabela-cartao .op-tabela th:last-child { padding-right: 14px; }
.op-tabela-cartao .c-data  { width: 118px; }
.op-tabela-cartao .c-valor { width: 108px; }
.op-tabela-cartao .c-acao  { width: 66px; }
.op-tabela-cartao .op-tabela td { white-space: nowrap; }
.op-trunca {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 280px;
}
.op-trunca small {
    display: block; overflow: hidden; text-overflow: ellipsis;
    font-size: .7rem; color: var(--op-cinza);
}
.op-lista-aviso { margin: 0; padding: 8px 16px 0; font-size: .78rem; color: var(--op-cinza); }
.op-ordem-0 { order: 0; }
.op-ordem-1 { order: 1; }
.op-ordem-2 { order: 2; }
.op-ordem-3 { order: 3; }
.op-ordem-4 { order: 4; }
.op-ordem-5 { order: 5; }

/* DRE mês a mês: a primeira coluna fica no lugar quando a tabela rola. */
.op-dre-nota { max-width: 720px; }
.op-dre-rolagem { overflow-x: auto; }
.op-dre-rolagem th:first-child,
.op-dre-rolagem td:first-child {
    position: sticky;
    left: 0;
    background: var(--op-superficie);
    z-index: 1;
}
.op-dre-subtotal { font-weight: 700; }
.op-dre-rolagem tr.op-dre-subtotal td:first-child { background: var(--op-neutro); }
.op-dre-categoria td:first-child { padding-left: 1.5rem; }

/* Treino: conversa no formato de aplicativo de mensagem.
   A coluna da esquerda é a lista; a da direita é a conversa ativa.
   No celular a lista aparece primeiro e a conversa abre por cima. */
.op-chat {
    display: flex;
    height: calc(100dvh - 5.75rem);
    max-height: calc(100dvh - 5.75rem);
    min-height: 0;
    border: 1px solid var(--op-borda);
    border-radius: 12px;
    overflow: hidden;
    background: var(--op-superficie);
}
.op-chat-lista {
    width: 17rem;
    flex: 0 0 17rem;
    border-right: 1px solid var(--op-borda);
    overflow-y: auto;
    background: var(--op-superficie);
}
.op-chat-item {
    display: flex; gap: .6rem; align-items: center; width: 100%;
    text-align: left; border: 0; border-bottom: 1px solid var(--op-borda);
    background: transparent; color: var(--op-texto); padding: .7rem .8rem;
}
.op-chat-item.ativa { background: var(--op-fundo); }
.op-chat-item:focus-visible,
.op-chat-enviar:focus-visible,
.op-chat-voltar:focus-visible,
.op-chat-novas:focus-visible { outline: 2px solid var(--op-azul); outline-offset: 2px; }
.op-chat-avatar {
    width: 2.3rem; height: 2.3rem; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center; font-weight: 700;
    background: var(--op-verde); color: var(--op-petroleo);
}
.op-chat-avatar.cor-1 { background: var(--op-azul-bt); color: var(--op-branco); }
.op-chat-avatar.cor-2 { background: var(--op-avatar-ambar); color: var(--op-branco); }
.op-chat-selo {
    flex: 0 0 auto; white-space: nowrap;
    font-size: .72rem; font-weight: 600; line-height: 1;
    padding: .2rem .5rem; border-radius: 999px;
    background: var(--op-alerta-bg); color: var(--op-alerta-txt);
    border: 1px solid var(--op-alerta-borda);
}
.op-chat-selo[hidden] { display: none !important; }
.op-chat-item-txt { min-width: 0; flex: 1 1 auto; }
.op-chat-item-txt strong,
.op-chat-item-txt span { display: block; }
.op-chat-item-txt strong {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.op-chat-previa {
    font-size: .78rem; color: var(--op-cinza);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.op-chat-painel {
    flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column;
    background-color: var(--op-fundo);
    background-image: radial-gradient(circle, var(--op-borda) 1px, transparent 1px);
    background-size: 16px 16px;
}
.op-chat-cab {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .8rem; background: var(--op-superficie);
    border-bottom: 1px solid var(--op-borda);
}
.op-chat-cab-txt { flex: 1 1 auto; min-width: 0; }
.op-chat-cab-txt strong,
.op-chat-estado { display: block; }
.op-chat-cab-txt strong {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.op-chat-estado { font-size: .78rem; color: var(--op-cinza); }
.op-chat-estado.op-digitando { color: var(--op-verde-txt); font-weight: 500; }
.op-chat-voltar { display: none; }
.op-encerrar-curto { display: none; }
.op-chat-paciencia-bloco {
    display: flex; flex-direction: column; gap: .15rem;
    width: 9.4rem; flex: 0 0 auto;
}
.op-chat-paciencia-rotulo { font-size: .75rem; color: var(--op-cinza); white-space: nowrap; }
.op-chat-paciencia { width: 100%; height: .4rem; appearance: none; border: 0; }
.op-chat-paciencia::-webkit-progress-bar { background: var(--op-neutro); border-radius: 4px; }
.op-chat-paciencia::-webkit-progress-value { background: var(--op-verde); border-radius: 4px; }
.op-chat-paciencia::-moz-progress-bar { background: var(--op-verde); }
.op-chat-desafio {
    flex: 0 0 auto;
    margin: .7rem .9rem 0; padding: .7rem .9rem;
    border-radius: 12px; background: var(--op-info-bg);
    border: 1px solid var(--op-info-borda); font-size: .85rem; color: var(--op-texto);
}
.op-chat-desafio summary {
    cursor: pointer; display: flex; align-items: flex-start; gap: .6rem;
    list-style: none; font-weight: 600; color: var(--op-info-txt);
}
.op-chat-desafio summary::-webkit-details-marker { display: none; }
.op-chat-desafio summary::marker { content: ''; }
.op-chat-desafio .op-alvo { flex: 0 0 auto; margin-top: 1px; }
.op-chat-desafio .op-alvo svg { display: block; }
.op-desafio-titulo { flex: 1 1 auto; min-width: 0; }
.op-desafio-acao { flex: 0 0 auto; font-weight: 500; font-size: .8rem; color: var(--op-link); }
.op-chat-desafio p { margin: .35rem 0 0 1.7rem; }
.op-chat-faixa {
    margin: 0; text-align: center; font-size: .8rem; font-weight: 600;
    padding: .35rem .6rem; background: var(--op-superficie); color: var(--op-cinza);
    border-bottom: 1px solid var(--op-borda);
}
.op-chat-msgs {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .8rem 1rem;
    display: flex; flex-direction: column; gap: .55rem;
}
.op-chat-sep {
    align-self: center; font-size: .72rem; color: var(--op-cinza);
    background: var(--op-superficie); border: 1px solid var(--op-borda);
    border-radius: 999px; padding: .1rem .55rem;
}
.op-chat-aviso {
    margin: 0; padding: .35rem .8rem; font-size: .82rem;
    color: var(--op-erro-txt); background: var(--op-erro-bg);
}
.op-chat-aviso:empty { display: none; }
.op-chat-caixa[hidden],
.op-chat-paciencia-bloco[hidden] { display: none !important; }
.op-chat-caixa {
    display: flex; gap: .5rem; align-items: flex-end; flex: 0 0 auto;
    padding: .6rem .8rem; background: var(--op-superficie);
    border-top: 1px solid var(--op-borda);
}
.op-chat-caixa textarea {
    flex: 1 1 auto; resize: none; max-height: 7.5rem;
    border-radius: 1.2rem; padding: .55rem .9rem;
}
.op-chat-enviar {
    width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0;
    background: var(--op-verde-bt); color: var(--op-branco);
    display: grid; place-items: center; flex: 0 0 auto;
}
.op-chat-enviar:disabled { opacity: .55; }
.op-chat-conta {
    position: absolute; right: 4.2rem; bottom: .2rem;
    font-size: .7rem; color: var(--op-cinza);
}
.op-chat-rodape { position: relative; }
.op-chat-novas {
    position: absolute; left: 50%; bottom: .4rem; transform: translateX(-50%);
    border: 1px solid var(--op-borda); background: var(--op-superficie);
    color: var(--op-texto); border-radius: 999px; padding: .2rem .7rem;
    font-size: .78rem;
}
.op-digitando-bolha { display: flex; gap: .25rem; align-items: center; min-height: 1.2rem; }
.op-ponto {
    width: .4rem; height: .4rem; border-radius: 50%; background: var(--op-cinza);
    animation: op-ponto 1s infinite;
}
.op-ponto:nth-child(2) { animation-delay: .15s; }
.op-ponto:nth-child(3) { animation-delay: .3s; }
@keyframes op-ponto {
    0%, 80%, 100% { opacity: .25; }
    40% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .op-ponto { animation: none; opacity: .7; }
}
.op-chat-conversa {
    display: none; flex: 1 1 auto; min-width: 0; min-height: 0;
    flex-direction: column; overflow: hidden;
}
.op-chat-conversa.ativa { display: flex; }
.op-nao-lidas {
    display: inline-block; min-width: 1.2rem; padding: 0 .3rem;
    border-radius: 999px; background: var(--op-azul-bt); color: var(--op-branco);
    font-size: .75rem; text-align: center;
}
@media (max-width: 767.98px) {
    .op-chat { height: calc(100dvh - 8.5rem); max-height: calc(100dvh - 8.5rem); }
    .op-chat-lista { width: 100%; flex-basis: 100%; border-right: 0; }
    .op-chat-painel { display: none; }
    .op-chat.mostra-conversa .op-chat-lista { display: none; }
    .op-chat.mostra-conversa .op-chat-painel { display: flex; }
    .op-chat-voltar { display: inline-flex; }
    .op-chat[data-um="1"] .op-chat-lista { display: none; }
    .op-chat[data-um="1"] .op-chat-painel { display: flex; }
    .op-chat[data-um="1"] .op-chat-voltar { display: none; }
    .op-encerrar-longo { display: none; }
    .op-encerrar-curto { display: inline; }
    .op-chat-cab { flex-wrap: wrap; align-items: center; }
    .op-chat-encerrar { order: 4; margin-left: auto; flex: 0 0 auto; }
    .op-chat-paciencia-bloco {
        order: 5; flex: 1 1 100%; width: auto;
        flex-direction: row; align-items: center; gap: .45rem;
    }
    .op-chat-desafio:not([open]) .op-desafio-titulo {
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
}
@media (min-width: 768px) {
    .op-chat-lista:only-child,
    .op-chat[data-um="1"] .op-chat-lista { display: none; }
}
.op-chat-lado {
    display: none; width: 300px; flex: 0 0 300px;
    flex-direction: column; gap: 1.1rem;
    padding: 1.1rem; border-left: 1px solid var(--op-borda);
    background: var(--op-superficie); overflow-y: auto;
}
.op-chat-lado h2 {
    margin: 0; font-size: 1rem; line-height: 1.35;
}
.op-chat-lado-rotulo {
    display: block; margin-bottom: .35rem;
    font-size: .72rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--op-cinza);
}
.op-chat-lado p { margin: 0; font-size: .88rem; line-height: 1.45; }
.op-chat-lado progress { width: 100%; height: .5rem; }
.op-chat-lado progress::-webkit-progress-bar { background: var(--op-neutro); border-radius: 4px; }
.op-chat-lado progress::-webkit-progress-value { background: var(--op-azul); border-radius: 4px; }
.op-chat-lado progress::-moz-progress-bar { background: var(--op-azul); }
.op-chat-lado-conta { margin-top: auto; font-size: .75rem; color: var(--op-cinza); }
@media (min-width: 1200px) {
    .op-chat-lado { display: flex; }
}

/* Telas do treino: nota, cards e o painel do gestor. */
.op-nota-selo {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .1rem .45rem; border-radius: 999px; font-size: .75rem;
    background: var(--op-superficie); color: var(--op-texto); border: 1px solid var(--op-borda);
}
.op-nota-alta { background: var(--op-ok-bg); color: var(--op-ok-txt); border-color: var(--op-ok-borda); }
.op-nota-media { background: var(--op-alerta-bg); color: var(--op-alerta-txt); border-color: var(--op-alerta-borda); }
.op-nota-baixa { background: var(--op-erro-bg); color: var(--op-erro-txt); border-color: var(--op-erro-borda); }
.op-resultado { margin-top: 0; display: grid; gap: 1rem; }
.op-resultado-barra {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; margin-bottom: .8rem;
}
.op-resultado-topo {
    display: grid; gap: 1rem; align-items: start;
}
.op-nota-cartao {
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
    text-align: center;
    background: var(--op-superficie); border: 1px solid var(--op-borda);
    border-radius: 16px; padding: 1.4rem 1.2rem;
}
.op-nota-kicker {
    font-size: .72rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--op-cinza);
}
.op-nota-anel-caixa { position: relative; width: 200px; height: 200px; }
.op-nota-anel { width: 200px; height: 200px; display: block; }
.op-nota-trilho { fill: none; stroke: var(--op-neutro); stroke-width: 16; }
.op-nota-valor {
    fill: none; stroke-width: 16; stroke-linecap: round;
    transform: rotate(-90deg); transform-origin: 100px 100px;
}
.op-nota-baixa .op-nota-valor { stroke: var(--op-erro-txt); }
.op-nota-media .op-nota-valor { stroke: var(--op-alerta-txt); }
.op-nota-alta .op-nota-valor { stroke: var(--op-ok-txt); }
.op-nota-centro {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.op-nota-centro strong {
    font-family: 'Poppins', var(--bs-body-font-family);
    font-size: 3.5rem; font-weight: 700; line-height: 1; color: var(--op-texto);
}
.op-nota-centro span { font-size: .8rem; color: var(--op-cinza); }
.op-nota-resultado { margin: 0; font-size: 1.05rem; font-weight: 600; }
.op-resultado-venda_realizada { color: var(--op-ok-txt); }
.op-resultado-venda_perdida { color: var(--op-erro-txt); }
.op-resultado-indeciso { color: var(--op-alerta-txt); }
.op-nota-meta { margin: 0; font-size: .8rem; color: var(--op-cinza); }
.op-comp-cartao {
    background: var(--op-superficie); border: 1px solid var(--op-borda);
    border-radius: 16px; padding: 1.1rem 1.3rem;
}
.op-comp-cartao h2 { margin: 0 0 .7rem; font-size: 1.125rem; }
.op-comp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.op-comp { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr auto; gap: .5rem; align-items: center; }
.op-comp.foco { background: var(--op-alerta-bg); color: var(--op-alerta-txt); border-radius: 8px; padding: .25rem .4rem; }
.op-comp progress { width: 100%; height: .55rem; }
.op-comp progress::-webkit-progress-bar { background: var(--op-neutro); border-radius: 4px; }
.op-comp progress::-webkit-progress-value { background: var(--op-azul); border-radius: 4px; }
.op-comp progress::-moz-progress-bar { background: var(--op-azul); }
.op-comp.alta progress::-webkit-progress-value,
.op-comp.alta progress::-moz-progress-bar { background: var(--op-verde); }
.op-comp.foco progress::-webkit-progress-bar { background: var(--op-alerta-bg); }
.op-comp.foco progress::-webkit-progress-value,
.op-comp.foco progress::-moz-progress-bar { background: var(--op-alerta-txt); }
.op-comp small { display: block; font-size: .68rem; }
.op-comp.sem-nota { color: var(--op-cinza); grid-template-columns: minmax(8rem, 14rem) 1fr; }
.op-comp-vazia { color: var(--op-cinza); }
.op-exemplo-disse { margin: 0 0 .45rem; color: var(--op-cinza); }
.op-exemplo-disse b { color: var(--op-texto); }
.op-resultado-tres { display: grid; gap: .7rem; }
.op-resultado-card {
    background: var(--op-superficie); border: 1px solid var(--op-borda);
    border-radius: 16px; padding: 1.1rem 1.2rem;
}
.op-resultado-card h3 { display: flex; align-items: center; gap: .35rem; font-size: 1rem; margin: 0 0 .4rem; }
.op-resultado-card .op-balao { max-width: 100%; }
.op-resultado-acoes { display: flex; gap: .5rem; align-items: center; }
.op-ver-conversa { margin-top: .4rem; }
.op-ver-conversa > summary {
    cursor: pointer; list-style: none; width: fit-content;
    height: 2.4rem; padding: 0 1rem; border-radius: 10px;
    border: 1px solid var(--op-borda-forte); background: var(--op-superficie);
    color: var(--op-texto); font-weight: 500; display: inline-flex; align-items: center;
}
.op-ver-conversa > summary::-webkit-details-marker { display: none; }
.op-ver-conversa .op-chat { height: 32rem; max-height: 70dvh; margin-top: .7rem; }
.op-resultado-espera {
    text-align: center; padding: 1.2rem; background: var(--op-superficie);
    border: 1px solid var(--op-borda); border-radius: 12px; color: var(--op-texto);
}
.op-treino-faixa {
    margin: 0 0 .7rem; padding: .6rem .8rem; border-radius: 8px;
    background: var(--op-alerta-bg); color: var(--op-alerta-txt); border: 1px solid var(--op-alerta-borda);
}
.op-treino-ola {
    display: flex; justify-content: space-between; gap: 1rem; align-items: flex-end;
    margin-bottom: .8rem; flex-wrap: wrap;
}
.op-treino-ola h1 { margin: 0; font-size: 1.75rem; }
.op-treino-ola p { margin: .15rem 0 0; color: var(--op-cinza); }
.op-treino-meta { width: min(100%, 16rem); display: grid; gap: .3rem; }
.op-treino-meta div { display: flex; justify-content: space-between; font-size: .8rem; }
.op-treino-meta progress { width: 100%; height: .5rem; }
.op-treino-meta progress::-webkit-progress-bar { background: var(--op-borda); border-radius: 4px; }
.op-treino-meta progress::-webkit-progress-value { background: var(--op-azul); border-radius: 4px; }
.op-treino-meta progress::-moz-progress-bar { background: var(--op-azul); }
.op-treino-trilha {
    padding: .55rem .8rem; border-radius: 12px;
    background: var(--op-superficie); border: 1px solid var(--op-borda);
    display: grid; gap: .1rem;
}
.op-treino-trilha span { font-size: .75rem; color: var(--op-cinza); }
.op-treino-sugerido {
    background: var(--op-petroleo); color: var(--op-branco);
    border-radius: 18px; padding: 1.4rem 1.6rem; margin-bottom: 1rem;
    display: flex; align-items: center; gap: 1.2rem;
}
.op-treino-alvo {
    width: 4rem; height: 4rem; border-radius: 16px; flex: 0 0 auto;
    display: grid; place-items: center; background: rgba(22, 184, 166, .18); color: var(--op-verde);
}
.op-treino-sugerido h2 { margin: .15rem 0 .3rem; color: var(--op-branco); font-size: 1.35rem; }
.op-treino-kicker {
    margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--op-kicker);
}
.op-treino-sugerido p { margin: 0; color: var(--op-sobre-escuro); }
.op-treino-sugerido .op-treino-selos { margin-top: .45rem; }
.op-treino-sugerido .op-nota-selo {
    background: rgba(255, 255, 255, .12); color: var(--op-branco); border-color: transparent;
}
.op-comecar {
    flex: 0 0 auto; height: 3.2rem; padding: 0 1.4rem; border: 0; border-radius: 12px;
    background: var(--op-verde); color: var(--op-petroleo);
    font-weight: 700; font-size: 1rem;
}
.op-pilulas { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .2rem 0 .8rem; }
.op-pilulas h2 { margin: 0  auto 0 0; font-size: 1.125rem; }
.op-pilula {
    height: 2.1rem; padding: 0 .8rem; border-radius: 999px;
    border: 1px solid var(--op-borda-forte); background: var(--op-superficie);
    color: var(--op-texto); font-size: .8rem; font-weight: 500;
    text-decoration: none; display: inline-flex; align-items: center;
}
.op-pilula.ativa {
    border-color: var(--op-azul); background: var(--op-info-bg); color: var(--op-azul-escuro);
}
.op-treino-ir {
    align-self: flex-start; background: none; border: 0; padding: 0;
    color: var(--op-azul-bt); font-weight: 700; font-size: .9rem;
}
.op-treino-filtros { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin: .8rem 0; }
.op-treino-filtros label { display: grid; gap: .2rem; font-size: .78rem; color: var(--op-cinza); }
.op-treino-grade { display: grid; gap: .7rem; }
.op-treino-card {
    display: block; background: var(--op-superficie); color: var(--op-texto);
    border: 1px solid var(--op-borda); border-radius: 12px; padding: .8rem; text-decoration: none;
}
.op-treino-card h3 { font-size: 1rem; margin: 0 0 .35rem; }
.op-treino-selos { display: flex; flex-wrap: wrap; gap: .3rem; }
.op-canal svg { vertical-align: -2px; }
.op-treino-numeros { display: grid; gap: .6rem; margin-bottom: 1rem; }
.op-treino-numeros article {
    background: var(--op-superficie); border: 1px solid var(--op-borda);
    border-radius: 12px; padding: .7rem .8rem;
}
.op-treino-numeros b {
    display: block; font-family: 'Poppins', var(--bs-body-font-family);
    font-size: 1.5rem; font-weight: 600; color: var(--op-texto);
}
.op-treino-numeros span { color: var(--op-cinza); font-size: .78rem; }
.op-treino-grafico { width: 100%; height: 220px; display: block; }
.op-treino-grafico polyline { fill: none; stroke: var(--op-azul); stroke-width: 2; }
.op-treino-grafico circle { fill: var(--op-azul); }
.op-treino-grafico text { fill: var(--op-cinza); font-size: 12px; }
.op-treino-grafico line.op-treino-base { stroke: var(--op-borda-forte); stroke-width: 1.5; }
.op-treino-grafico line.op-treino-haste { stroke: var(--op-azul); stroke-width: 2; }
.op-treino-grafico text.op-treino-valor { fill: var(--op-texto); font-size: 13px; font-weight: 600; }
.op-bloco > .op-tabela { width: 100%; margin-bottom: 0; }
.op-treino-grafico-bloco { margin: 1.4rem 0 .4rem; }
.op-treino-grafico-bloco h2,
.op-treino-secao h2 { font-size: 1.125rem; margin: 0 0 .7rem; }
.op-tabela tr.op-treino-falta td { background: var(--op-alerta-bg); color: var(--op-alerta-txt); }
.op-treino-cards { display: none; }
.op-treino-vazio { text-align: center; padding: 2rem 1rem; color: var(--op-cinza); }
.op-treino-acoes { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; margin-bottom: .8rem; }
.op-form-layout { display: grid; gap: 1rem; }
.op-form-secao {
    background: var(--op-superficie); border: 1px solid var(--op-borda);
    border-radius: 12px; padding: .9rem; margin-bottom: .8rem;
}
.op-form-secao h2 { font-size: 1rem; margin: 0 0 .6rem; }
.op-campo-ajuda { display: block; color: var(--op-cinza); font-size: .78rem; }
.op-teste-pagina { max-width: 720px; margin: 0 auto; padding: 1rem; }
.op-teste-marca { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.op-teste-consentimento {
    background: var(--op-superficie); color: var(--op-texto);
    border: 1px solid var(--op-borda); border-radius: 12px; padding: 1rem;
}
.op-copiar { display: grid; gap: .4rem; margin-bottom: .8rem; }
@media (min-width: 900px) {
    .op-form-layout { grid-template-columns: minmax(0, 1.4fr) minmax(16rem, .7fr); align-items: start; }
    .op-resultado-topo { grid-template-columns: 420px minmax(0, 1fr); }
}
@media (min-width: 768px) {
    .op-treino-grade { grid-template-columns: repeat(2, 1fr); }
    .op-resultado-tres { grid-template-columns: repeat(3, 1fr); }
    .op-treino-numeros { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1100px) {
    .op-treino-grade { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
    .op-treino-tabela { display: none; }
    .op-treino-cards { display: grid; gap: .6rem; }
    .op-treino-sugerido { flex-wrap: wrap; }
    .op-comecar { width: 100%; }
    .op-comp { grid-template-columns: 1fr auto; }
    .op-comp.sem-nota { grid-template-columns: 1fr auto; }
    .op-comp progress { grid-column: 1 / -1; }
}

/* ---- Rota otimizada (roteirização) ---- */
.op-rota {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 6rem);
    margin: -0.25rem -0.5rem 0;
}
.op-rota-abas {
    display: none;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.op-rota-aba {
    flex: 1;
    border: 1px solid var(--op-borda);
    background: var(--op-superficie);
    color: var(--op-texto);
    border-radius: 0.375rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
}
.op-rota-aba.ativo {
    background: var(--op-azul);
    color: var(--op-branco);
    border-color: var(--op-azul);
}
.op-rota-colunas {
    display: grid;
    grid-template-columns: minmax(18rem, 26rem) 1fr;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
}
.op-rota-formulario {
    overflow: auto;
    max-height: calc(100vh - 6rem);
    padding: 0.25rem 0.5rem 5rem;
    background: var(--op-superficie);
    border: 1px solid var(--op-borda);
    border-radius: 0.5rem;
}
.op-rota-mapa {
    min-height: 24rem;
    border: 1px solid var(--op-borda);
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--op-neutro);
}
.op-rota-mapa-folha {
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 6.5rem);
}
.op-rota-lista { padding-bottom: 1rem; }
.op-rota-cartao {
    background: var(--op-fundo);
    border: 1px solid var(--op-borda);
}
.op-rota-rodape {
    position: sticky;
    bottom: 0;
    padding: 0.75rem 0 0.25rem;
    background: linear-gradient(transparent, var(--op-superficie) 30%);
}
.leaflet-container {
    background: var(--op-neutro);
    font: inherit;
}
.op-rota-tooltip {
    background: var(--op-superficie);
    color: var(--op-texto);
    border: 1px solid var(--op-borda);
    box-shadow: none;
}
.op-rota-sugestoes {
    position: absolute;
    z-index: 20;
    width: calc(100% - 1rem);
    max-height: 12rem;
    overflow: auto;
    margin-top: 0.15rem;
    background: var(--op-superficie);
    border: 1px solid var(--op-borda);
    border-radius: 0.375rem;
    box-shadow: 0 0.25rem 0.5rem color-mix(in srgb, var(--op-texto) 12%, transparent);
}
.op-rota-sugestoes li button {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--op-texto);
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}
.op-rota-sugestoes li button:hover,
.op-rota-sugestoes li button:focus {
    background: var(--op-superficie-2);
}
.op-rota-formulario .mb-3,
.op-rota-cartao .col-8 {
    position: relative;
}
.op-rota-cartao.op-rota-selecionada {
    outline: 2px solid var(--op-azul);
}
.op-rota-cartao.op-rota-fora {
    border-color: var(--op-vermelho, #b02a37);
}
.op-rota-cartao.op-rota-arrastando {
    opacity: 0.6;
}
.op-rota-resultado {
    margin-bottom: 0.75rem;
}
.op-rota-motorista {
    margin: 0;
    background: var(--op-fundo);
    color: var(--op-texto);
    font-family: inherit;
}
.op-rota-motorista-caixa {
    max-width: 32rem;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}
.op-rota-motorista-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}
.op-rota-motorista-parada {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--op-borda);
}
.op-rota-motorista-num {
    flex: 0 0 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--op-azul);
    color: var(--op-branco);
    text-align: center;
    line-height: 1.75rem;
    font-size: 0.85rem;
    font-weight: 600;
}
@media (max-width: 991.98px) {
    .op-rota-abas { display: flex; }
    .op-rota-colunas {
        display: block;
    }
    .op-rota-formulario,
    .op-rota-mapa {
        display: none;
        max-height: none;
        min-height: 60vh;
    }
    .op-rota-formulario.op-rota-painel-ativo,
    .op-rota-mapa.op-rota-painel-ativo {
        display: block;
    }
    .op-rota-formulario.op-rota-painel-ativo { display: block; }
    .op-rota-mapa-folha { min-height: 60vh; }
}
@media (min-width: 992px) {
    .op-rota-formulario,
    .op-rota-mapa {
        display: block !important;
    }
}

/* Treino por voz: atendimento frente a frente. A cor continua nas variáveis. */
.op-modo-escolha {
    display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
    margin: 0 0 .8rem;
}
.op-modo-escolha legend, .op-modo-rotulo { font-size: .8rem; color: var(--op-cinza); margin-right: .2rem; }
.op-modo-btn {
    border: 1px solid var(--op-borda-forte); background: var(--op-superficie);
    color: var(--op-texto); border-radius: 999px; padding: .35rem .8rem;
    font-size: .85rem; cursor: pointer;
}
.op-modo-btn.ativo, .op-modo-escolha label.ativo {
    background: var(--op-petroleo); color: var(--op-branco); border-color: var(--op-verde);
}
.op-modo-btn:disabled, .op-modo-off { opacity: .55; cursor: not-allowed; }
.op-voz-sem-navegador, .op-voz-privacidade, .op-voz-negado, .op-voz-aviso {
    flex: 1 1 100%; margin: 0; font-size: .8rem; color: var(--op-cinza);
}
.op-voz-negado, .op-voz-aviso { color: var(--op-alerta-txt); }
.op-voz {
    display: flex; flex-direction: column; align-items: center; gap: .8rem;
    min-height: calc(100dvh - 8rem); padding: .4rem 0 1.5rem;
}
.op-voz-clientes { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.op-voz-troca {
    display: inline-flex; align-items: center; gap: .35rem;
    border: 1px solid var(--op-borda); background: var(--op-superficie);
    color: var(--op-texto); border-radius: 999px; padding: .2rem .6rem .2rem .2rem;
}
.op-voz-troca.ativa { border-color: var(--op-verde); }
.op-voz-palco { text-align: center; display: grid; justify-items: center; gap: .35rem; }
.op-voz-avatar {
    width: 8rem; height: 8rem; border-radius: 999px; position: relative;
    display: grid; place-items: center; font-size: 3rem; font-weight: 600;
    background: var(--op-verde); color: var(--op-petroleo);
}
.op-voz-avatar.cor-1 { background: var(--op-azul-bt); color: var(--op-branco); }
.op-voz-avatar.cor-2 { background: var(--op-avatar-ambar); color: var(--op-branco); }
.op-voz-anel {
    position: absolute; inset: -.45rem; border-radius: 999px;
    border: 3px solid var(--op-verde); opacity: 0;
}
.op-voz-palco.falando .op-voz-anel { animation: op-voz-pulso 1.1s ease-out infinite; }
@keyframes op-voz-pulso {
    from { opacity: .75; transform: scale(1); }
    to { opacity: 0; transform: scale(1.16); }
}
@media (prefers-reduced-motion: reduce) {
    .op-voz-palco.falando .op-voz-anel { animation: none; opacity: .8; }
}
.op-voz-nome { margin: 0; font-size: 1.35rem; }
.op-voz-legenda, .op-voz-ao-vivo {
    margin: 0; max-width: 28rem; min-height: 1.4rem; text-align: center;
}
.op-voz-ao-vivo { color: var(--op-cinza); }
.op-voz-mic {
    width: 5.5rem; height: 5.5rem; border-radius: 999px; border: 0;
    background: var(--op-verde); color: var(--op-petroleo); cursor: pointer;
    display: grid; place-items: center;
}
.op-voz-mic.gravando {
    background: var(--op-erro-bg); color: var(--op-erro-txt);
    border: 1px solid var(--op-erro-borda);
    animation: op-pulsa 1.2s ease-in-out infinite;
}
.op-voz-jeito, .op-voz-corrigir-caixa { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.op-voz-corrigir-caixa { width: min(100%, 28rem); }
.op-voz-corrigir-caixa textarea { flex: 1 1 100%; }
.op-voz-escrita { width: min(100%, 40rem); }
.op-voz-escrita > summary { cursor: pointer; color: var(--op-azul-bt); }
/* Só com o bloco aberto. Sem o [open], este display:flex vence a regra
   do navegador que esconde o miolo de um <details> fechado. A conversa
   escrita entrava no layout da chamada, o meio encolhia até zero e a
   esfera sumia. */
.op-voz-escrita[open] .op-chat-msgs, .op-voz-escrita[open] [data-escrita] {
    display: flex; flex-direction: column; gap: .35rem; margin-top: .6rem;
}

/* Chamada: preto nos dois temas, esfera da prévia.
   As cores da nuvem ficam presas aqui para o modo escuro não trocá-las. */
.op-chamada {
    --op-chamada-fundo: #000000;
    --op-esfera-base: #0D766A;
    --op-esfera-verde: #16B8A6;
    --op-esfera-azul: #1B6FA8;
    --op-esfera-clara: #E9FBF8;
    --op-esfera-ceu: #A8D6F2;
    --op-chamada-trilho: #2A2A2A;
    position: fixed; inset: 0; z-index: 1100;
    display: flex; flex-direction: column; align-items: center;
    box-sizing: border-box;
    padding: 1.25rem 1.25rem 2rem;
    background: var(--op-chamada-fundo);
    color: var(--op-sobre-escuro);
    overflow: auto;
}
.op-chamada-topo, .op-chamada-rodape {
    width: 100%; max-width: 28rem;
    display: flex; align-items: center; gap: .75rem;
}
.op-chamada-quem { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.op-chamada-nome { font-size: 1rem; font-weight: 500; }
.op-chamada-sub, .op-chamada-privacidade {
    font-size: .8rem; color: var(--op-kicker);
}
.op-chamada-estado {
    font-size: 1.35rem; color: var(--op-kicker); text-align: center;
}
.op-chamada-em-curso .op-chamada-estado { font-size: .8rem; letter-spacing: .02em; }
.op-chamada-meio {
    /* align-self: stretch: o pai centraliza os filhos na horizontal e,
       sem isto, o meio não cresce na vertical e a esfera fica no topo. */
    flex: 1 1 auto; align-self: stretch; width: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1.75rem;
}
.op-esfera {
    --op-vol: 1;
    /* overflow:hidden recorta a nuvem no círculo. Num flex, isso deixa
       a altura mínima virar 0 e o encolher apaga a esfera. Não encolhe. */
    flex-shrink: 0;
    position: relative; width: 220px; height: 220px; border-radius: 50%;
    overflow: hidden; border: 0; padding: 0; cursor: pointer;
    background: var(--op-esfera-base); color: transparent;
    box-shadow: 0 0 60px rgba(22, 184, 166, .25);
    animation: op-respira 2.4s ease-in-out infinite;
}
@media (min-width: 768px) {
    .op-esfera { width: 280px; height: 280px; }
}
.op-esfera.vendedor { background: var(--op-esfera-azul); }
.op-esfera-camada { position: absolute; inset: -25%; filter: blur(18px); }
.op-esfera .c1 {
    background:
        radial-gradient(circle at 30% 30%, var(--op-esfera-verde) 0, transparent 55%),
        radial-gradient(circle at 75% 25%, var(--op-esfera-azul) 0, transparent 50%);
    animation: op-onda 6s ease-in-out infinite;
}
.op-esfera .c2 {
    background: radial-gradient(ellipse at 50% 65%, var(--op-esfera-clara) 0, rgba(233, 251, 248, .7) 18%, transparent 45%);
    animation: op-onda2 5s ease-in-out infinite;
}
.op-esfera .c3 {
    background: radial-gradient(circle at 60% 85%, var(--op-esfera-ceu) 0, transparent 55%);
    animation: op-gira 14s linear infinite;
}
.op-chamada-legenda {
    margin: 0 0 1rem; max-width: 22rem; min-height: 1.5em; text-align: center;
    font-size: .95rem; line-height: 1.5; color: var(--op-sobre-escuro);
}
.op-chamada:not(.op-chamada-em-curso) .op-chamada-legenda { display: none; }
.op-chamada-privacidade { margin: 0 0 .75rem; text-align: center; max-width: 22rem; }
.op-chamada-paciencia {
    flex: 1; height: 56px; border-radius: 28px;
    background: transparent; color: var(--op-sobre-escuro);
    border: 1px solid var(--op-kicker);
    display: flex; align-items: center; gap: .6rem; padding: 0 1rem;
    font-size: .75rem;
}
.op-chamada-trilho { flex: 1; height: 5px; border-radius: 3px; background: var(--op-chamada-trilho); }
.op-chamada-pac { height: 5px; border-radius: 3px; background: var(--op-verde); }
.op-chamada-voltar, .op-chamada-cc, .op-chamada-mudo {
    width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto;
    background: transparent; color: var(--op-sobre-escuro);
    border: 1px solid var(--op-kicker);
    display: flex; align-items: center; justify-content: center;
}
.op-chamada-voltar, .op-chamada-cc { width: 44px; height: 44px; }
.op-chamada-cc { font-weight: 600; font-size: .75rem; }
.op-chamada-mudo .op-mic-off { display: none; }
.op-chamada-mudo.ativo .op-mic-on { display: none; }
.op-chamada-mudo.ativo .op-mic-off { display: block; }
.op-chamada-desligar {
    width: 56px; height: 56px; border-radius: 50%; border: 0;
    background: var(--op-erro-bt); color: var(--op-branco);
    display: flex; align-items: center; justify-content: center;
}
.op-chamada .op-voz-aviso, .op-chamada .op-voz-negado, .op-chamada .op-voz-sem-navegador {
    /* Fora da chamada estes parágrafos pedem flex 1 1 100%. Aqui isso
       come a altura da tela, o meio não cresce e a esfera fica no topo
       — ou some, se o meio puder encolher. */
    flex: 0 0 auto;
    text-align: center; max-width: 22rem;
}
.op-chamada .op-voz-aviso:empty { display: none; }
.op-chamada .op-voz-escrita { width: min(100%, 28rem); color: var(--op-sobre-escuro); }
@keyframes op-respira { 0%, 100% { transform: scale(var(--op-vol)); } 50% { transform: scale(calc(var(--op-vol) * 1.045)); } }
@keyframes op-onda { 0%, 100% { transform: translate(-8%, 0) scale(1.05); } 50% { transform: translate(8%, -6%) scale(1.12); } }
@keyframes op-onda2 { 0%, 100% { transform: translate(6%, 4%) scale(1.1); } 50% { transform: translate(-10%, -4%) scale(1); } }
@keyframes op-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .op-esfera, .op-esfera .c1, .op-esfera .c2, .op-esfera .c3 { animation: none; }
}

/* Zona de soltar o XML da nota de entrada. A cor vem da variável do tema. */
.op-zona-arquivo {
    border: 1px dashed var(--op-borda);
    border-radius: 0.75rem;
    padding: 1rem;
}

/* Zona de soltar o XML da nota de entrada. A cor vem da variável do tema. */
.op-zona-arquivo {
    border: 1px dashed var(--op-borda);
    border-radius: 0.5rem;
    padding: 1rem;
}

/* Painel do item ainda sem cadastro. No celular ocupa a tela inteira. */
.op-ficha-veu {
    position: fixed;
    inset: 0;
    background: var(--op-veu);
    z-index: 1050;
}
.op-ficha-nota {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(32rem, 100%);
    overflow: auto;
    padding: 1rem 1.25rem;
    background: var(--op-superficie);
    color: var(--op-texto);
    border-left: 1px solid var(--op-borda);
    z-index: 1051;
}
@media (max-width: 575.98px) {
    .op-ficha-nota {
        width: 100%;
        border-left: 0;
    }
}
#quadro-assinatura {
    border: 1px solid var(--op-borda-forte);
    background: var(--op-superficie);
    touch-action: none;
    max-width: 100%;
}

/* No celular o espelho e o Pagar hoje viram lista, sem tabela larga. */
.op-so-celular { display: none; }
.op-pagar-cartao,
.op-espelho-dia {
    margin: 0 0 .75rem;
    padding: .75rem;
    border: 1px solid var(--op-borda);
    border-radius: .5rem;
    background: var(--op-superficie);
    max-width: 100%;
    overflow-wrap: anywhere;
}
.op-pagar-valor { font-size: 1.25rem; font-weight: 700; }
.op-promessa-vencida { color: var(--op-erro-txt); font-weight: 600; }
.op-aviso-recebedor { color: var(--op-erro-txt); font-weight: 600; }
@media (max-width: 767.98px) {
    .op-so-computador { display: none; }
    .op-so-celular { display: block; }
    .op-conteudo:has(.op-so-celular) { overflow-x: clip; }
    /* Fechamento e caixa: a linha vira cartão, senão a data e a
       situação são espremidas até quebrar no meio da palavra. */
    .op-tabela-cartoes thead { display: none; }
    .op-tabela-cartoes,
    .op-tabela-cartoes tbody,
    .op-tabela-cartoes tr,
    .op-tabela-cartoes td { display: block; width: auto; }
    .op-tabela-cartoes tr {
        margin: 0 0 .75rem;
        padding: .75rem;
        border: 1px solid var(--op-borda);
        border-radius: .5rem;
        background: var(--op-superficie);
    }
    .op-tabela-cartoes td {
        padding: .15rem 0;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: left;
    }
    .op-tabela-cartoes td[data-rotulo]:not([data-rotulo=""])::before {
        content: attr(data-rotulo);
        display: block;
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--op-cinza);
    }
}

/* Rota no celular: paradas primeiro, blocos recolhíveis, sem tabela larga. */
.op-rota-abre {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.op-rota-corpo { display: none; }
.op-rota-abre:checked + .op-rota-titulo + .op-rota-corpo { display: block; }
.op-rota-titulo { margin-bottom: .5rem; }
.op-previa { max-width: 100%; overflow-x: clip; }
.op-previa table { width: 100%; }
.op-previa th,
.op-previa td { white-space: normal; overflow-wrap: anywhere; }
.op-botoes-empilhados form { display: block; margin: 0; }
.op-botoes-empilhados .btn { display: block; width: 100%; margin-top: .5rem; }
@media (max-width: 767.98px) {
    .op-rota-titulo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0;
        padding: .65rem 0;
        border-bottom: 1px solid var(--op-borda);
        cursor: pointer;
    }
    .op-rota-titulo::after { content: "▸"; }
    .op-rota-abre:checked + .op-rota-titulo::after { content: "▾"; }
    .op-rota-abre:checked + .op-rota-titulo { border-bottom: 0; }
    .op-rota-corpo { padding-bottom: .75rem; }
}
@media (min-width: 768px) {
    .op-rota-miolo {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        align-items: start;
    }
    .op-rota-paradas { grid-column: 1 / -1; order: 4; }
    .op-rota-km { order: 1; }
    .op-rota-entrega { order: 2; }
    .op-rota-abast { order: 3; }
    .op-rota-bloco .op-rota-corpo { display: block; }
    .op-rota-titulo { pointer-events: none; }
}

/* Certificado digital: cartão verde / amarelo / vermelho. */
.op-certificado-verde .op-certificado-status { color: var(--op-ok-txt); }
.op-certificado-verde { border-left: 4px solid var(--op-ok-txt); }
.op-certificado-amarelo .op-certificado-status { color: var(--op-alerta-txt); }
.op-certificado-amarelo { border-left: 4px solid var(--op-alerta-txt); }
.op-certificado-vermelho .op-certificado-status { color: var(--op-erro-txt); }
.op-certificado-vermelho { border-left: 4px solid var(--op-erro-txt); }
.op-aviso-certificado {
    border: 1px solid var(--op-erro-borda);
    background: var(--op-erro-bg);
    color: var(--op-erro-txt);
    padding: .75rem 1rem;
    border-radius: .5rem;
    margin-bottom: 1rem;
}

/* Boletos: tabela no computador; cartões no celular (sem rolagem lateral). */
.op-boletos-cartoes { display: none; }
.op-boleto-cartao {
    border: 1px solid var(--op-borda);
    border-radius: .5rem;
    padding: .85rem 1rem;
    margin-bottom: .75rem;
    background: var(--op-superficie);
}
.op-boleto-cartao-cliente { font-weight: 600; }
.op-boleto-cartao-valor { font-size: 1.25rem; margin: .25rem 0; }
@media (max-width: 767.98px) {
    .op-boletos-tabela { display: none; }
    .op-boletos-cartoes { display: block; }
}

/* ==========================================================================
   Visual novo — componentes (20/10/2026)

   Componentes estilo Apple (Parte 2). Classes op- mantidas; muda o desenho.
   Formulário (grupo de lista) liga na Parte 3.
   ========================================================================== */

.op-bt {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 36px; padding: 0 16px; border-radius: var(--op-raio-pilula);
    font-family: var(--op-fonte); font-size: 15px; font-weight: 600; line-height: 1;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color var(--op-duracao) var(--op-ease),
                color var(--op-duracao) var(--op-ease),
                transform var(--op-duracao) var(--op-ease),
                box-shadow var(--op-duracao) var(--op-ease);
}
.op-bt-lg { height: 44px; padding: 0 20px; } /* cabeçalho da página */
.op-bt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--op-foco); }
.op-bt:disabled { opacity: .55; cursor: default; }
.op-bt-primario {
    background: var(--op-azul-bt); color: #fff; border-color: var(--op-azul-bt);
}
.op-bt-primario:hover { background: var(--op-azul-mais); border-color: var(--op-azul-mais); color: #fff; }
.op-bt-secundario {
    background: rgba(27, 111, 168, 0.10); color: var(--op-azul); border-color: transparent;
}
.op-bt-secundario:hover {
    background: rgba(27, 111, 168, 0.16); color: var(--op-azul-escuro);
}
[data-bs-theme="dark"] .op-bt-secundario {
    background: rgba(127, 192, 234, 0.16); color: var(--op-azul);
}
.op-bt-redondo {
    width: 36px; height: 36px; padding: 0; border-radius: 50%;
    background: var(--op-preenchimento); color: var(--op-texto); border: 0;
}
.op-bt-redondo:hover { background: var(--op-trilho); color: var(--op-texto); }
@media (max-width: 991.98px) {
    .op-bt-redondo { width: 44px; height: 44px; }
}

/* ---- Sinal de emissão de NF (pílula do cabeçalho + popover) -------------
   Spec fiscal/sinal-emissao.md. Fundo claro da cor, bolinha de 8 px na cor
   forte e texto que passa em AA nos dois temas. O texto sempre diz o estado:
   a cor sozinha nunca carrega o significado. */
.op-sinal {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 28px; padding: 4px 12px; border: 1px solid transparent;
    border-radius: var(--op-raio-pilula);
    font-family: var(--op-fonte); font-size: 13px; font-weight: 600; line-height: 1.2;
    cursor: pointer; white-space: nowrap;
}
.op-sinal:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--op-foco); }
.op-sinal-bolinha {
    flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--op-cinza);
}
.op-sinal-verde    { background: var(--op-sinal-verde-bg);    color: var(--op-sinal-verde-txt); }
.op-sinal-amarelo  { background: var(--op-sinal-amarelo-bg);  color: var(--op-sinal-amarelo-txt); }
.op-sinal-vermelho { background: var(--op-sinal-vermelho-bg); color: var(--op-sinal-vermelho-txt); }
.op-sinal-verde .op-sinal-bolinha    { background: var(--op-sinal-verde-ponto); }
.op-sinal-amarelo .op-sinal-bolinha  { background: var(--op-sinal-amarelo-ponto); }
.op-sinal-vermelho .op-sinal-bolinha { background: var(--op-sinal-vermelho-ponto); }

.op-sinal-caixa { display: inline-block; }
.op-sinal-pop {
    width: 320px; max-width: calc(100vw - 32px); padding: 14px 16px;
    background: var(--op-superficie); color: var(--op-texto);
    border: 1px solid var(--op-borda); border-radius: 12px;
    box-shadow: 0 8px 24px var(--op-sombra-pop);
    font-size: 13px; white-space: normal;
}
.op-sinal-dados { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 0 0 8px; }
.op-sinal-dados dt { margin-top: 8px; font-size: 11px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; color: var(--op-cinza); }
.op-sinal-dados dt:first-child { margin-top: 0; }
.op-sinal-dados dd { margin: 0; }
.op-sinal-txt-verde    { color: var(--op-sinal-verde-txt); font-weight: 600; }
.op-sinal-txt-amarelo  { color: var(--op-sinal-amarelo-txt); font-weight: 600; }
.op-sinal-txt-vermelho { color: var(--op-sinal-vermelho-txt); font-weight: 600; }
.op-sinal-problemas { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.op-sinal-problema { padding: 8px 10px; border-radius: 8px; }
.op-sinal-problema-vermelho { background: var(--op-sinal-vermelho-bg); color: var(--op-sinal-vermelho-txt); }
.op-sinal-problema-amarelo  { background: var(--op-sinal-amarelo-bg);  color: var(--op-sinal-amarelo-txt); }
.op-sinal-nota { margin: 6px 0; color: var(--op-cinza); }
.op-sinal-resolver { margin-top: 6px; }
@media (max-width: 991.98px) {
    .op-sinal { min-height: 44px; }
}

/* Linha de grupo de lista: rótulo 130 px à esquerda, valor à direita. */
.op-grupo-bloco { display: grid; gap: 6px; margin-bottom: 18px; }
.op-grupo-bloco .op-grupo-titulo { margin: 0 0 0 16px; }
.op-entrada {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    min-height: 48px; padding: 8px 16px;
    background: var(--op-superficie);
}
.op-entrada-bloco {
    flex-wrap: wrap; align-items: flex-start;
}
.op-entrada-bloco .op-entrada-rotulo { flex: 1 0 100%; margin-bottom: 4px; }
.op-entrada-bloco .op-entrada-caixa { width: 100%; }
.op-entrada-rotulo {
    flex: 0 0 130px; max-width: 40%;
    font-size: 15px; font-weight: 400; color: var(--op-texto);
}
.op-interruptor .op-entrada-rotulo { flex: 1 1 auto; max-width: none; }
.op-entrada-caixa {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; min-height: 32px;
    background: transparent; border: 0; border-radius: 0; overflow: visible;
}
.op-entrada:focus-within {
    box-shadow: inset 0 0 0 3px var(--op-foco);
    border-radius: 0;
    z-index: 1;
}
.op-grupo-lista > .op-entrada:first-child:focus-within,
.op-grupo-lista > .op-interruptor:first-child:focus-within,
.op-grupo-lista > .op-escolha:first-child:focus-within {
    border-radius: var(--op-raio-grupo) var(--op-raio-grupo) 0 0;
}
.op-grupo-lista > .op-entrada:last-child:focus-within,
.op-grupo-lista > .op-interruptor:last-child:focus-within,
.op-grupo-lista > .op-escolha:last-child:focus-within {
    border-radius: 0 0 var(--op-raio-grupo) var(--op-raio-grupo);
}
.op-grupo-lista > :only-child:focus-within {
    border-radius: var(--op-raio-grupo);
}
.op-entrada-caixa input,
.op-entrada-caixa select,
.op-entrada-caixa .form-select,
.op-entrada-caixa .form-control {
    flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent;
    color: var(--op-texto); font-family: var(--op-fonte); font-size: 15px; font-weight: 400;
    padding: 0; outline: none; text-align: right;
    appearance: none; -webkit-appearance: none;
}
.op-entrada-caixa input.num, .op-entrada-caixa input[inputmode="decimal"] { text-align: right; }
.op-entrada-caixa select {
    color: var(--op-cinza); padding-right: 8px; cursor: pointer;
    background-image: none;
}
.op-entrada-caixa .op-chevron {
    flex: 0 0 auto; margin-left: 6px; color: var(--op-cinza);
}
.op-entrada-caixa-livre { justify-content: flex-end; }
.op-entrada-caixa-livre .op-segmentado { margin-left: auto; }
.op-entrada-caixa:has(textarea) { height: auto; align-items: stretch; }
.op-entrada-caixa textarea {
    border: 0; min-height: 4.5rem; width: 100%; resize: vertical;
    padding: 4px 0; background: transparent; color: var(--op-texto);
    font-family: var(--op-fonte); font-size: 15px; line-height: 1.4;
    outline: none; text-align: left;
}
.op-entrada .errorlist, .op-escolha + .errorlist, .op-interruptor + .errorlist {
    flex: 1 0 100%; margin: 0; padding: 0 0 4px 130px;
    color: var(--op-erro-txt); font-size: 13px; list-style: none;
}
.op-entrada-prefixo, .op-entrada-sufixo {
    flex: 0 0 auto; color: var(--op-cinza); font-size: 15px; padding: 0 4px;
}
.op-entrada-ajuda { font-size: 13px; color: var(--op-cinza); }

/* Separador 0,5 px recuado entre linhas do grupo (formulario).
   Também cobre o caso em que uma .op-grupo-nota (ajuda) fica entre
   duas entradas — a divisória continua sob cada entrada. */
.op-grupo-lista > .op-entrada:not(:last-child)::after,
.op-grupo-lista > .op-interruptor:not(:last-child)::after,
.op-grupo-lista > .op-escolha:not(:last-child)::after {
    content: ""; position: absolute; left: 16px; right: 0; bottom: 0;
    height: 0.5px; background: var(--op-linha); z-index: 1;
}
/* Insumo: garante traço entre Ingrediente ativo, Registro MAPA e Classe
   mesmo com Formulação escondida no meio do grupo. */
#op-agro-form-insumo .op-grupo-lista > .op-entrada:has(#id_ingrediente_ativo)::after,
#op-agro-form-insumo .op-grupo-lista > .op-entrada:has(#id_registro_mapa)::after,
#op-agro-form-insumo .op-grupo-lista > .op-entrada:has(#id_classe_defensivo)::after {
    content: ""; position: absolute; left: 16px; right: 0; bottom: 0;
    height: 0.5px; background: var(--op-linha); z-index: 1;
}
.op-grupo-lista > .op-interruptor,
.op-grupo-lista > .op-escolha {
    width: 100%; margin: 0; box-sizing: border-box;
}
/* A pergunta da água só aparece com "Só para a água" ligado. */
.op-grupo-lista:not(:has(#id_custo_pela_fatura:checked)) > .op-so-com-agua {
    display: none;
}
.op-grupo-lista:not(:has(#id_custo_pela_fatura:checked)) > .op-escolha:has(#id_custo_pela_fatura)::after {
    content: none;
}

/* Interruptor iOS: 51×31, bolinha 27, azul ligado / trilho desligado. */
.op-interruptor {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
    min-height: 44px;
}
.op-interruptor input {
    position: absolute; opacity: 0; width: 51px; height: 31px; margin: 0;
}
.op-interruptor-trilho {
    flex: 0 0 auto; width: 51px; height: 31px; border-radius: 999px;
    background: var(--op-trilho); position: relative;
    transition: background var(--op-duracao) var(--op-ease);
}
.op-interruptor-trilho::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 27px; height: 27px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform var(--op-duracao) var(--op-ease);
}
.op-interruptor input:checked + .op-interruptor-trilho,
.op-interruptor input:checked + .op-escolha-texto + .op-interruptor-trilho {
    background: var(--op-azul-bt);
}
.op-interruptor input:checked + .op-interruptor-trilho::after,
.op-escolha input:checked ~ .op-interruptor-trilho::after { transform: translateX(20px); }
.op-interruptor input:focus-visible + .op-interruptor-trilho {
    box-shadow: 0 0 0 3px var(--op-foco);
}

/* Linha com explicação (titulo + ajuda + interruptor). */
.op-escolha {
    position: relative;
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    min-height: 48px; padding: 10px 16px;
    background: transparent; border: 0; border-radius: 0;
}
.op-escolha:has(input:checked) {
    border-color: transparent; background: transparent;
}
.op-escolha-texto { display: grid; gap: 2px; flex: 1 1 auto; }
.op-escolha-titulo { font-weight: 400; font-size: 15px; color: var(--op-texto); }
.op-escolha-ajuda { font-size: 13px; color: var(--op-cinza); }
.op-escolha input { position: absolute; opacity: 0; }
.op-escolha .op-interruptor-trilho { margin-left: auto; }
.op-escolha input:checked + .op-escolha-texto + .op-interruptor-trilho,
.op-escolha input:checked ~ .op-interruptor-trilho { background: var(--op-azul-bt); }

/* Segmentado: trilho de preenchimento, botão branco com sombra. */
.op-segmentado {
    display: inline-flex; padding: 2px; gap: 0;
    background: var(--op-preenchimento); border: 0;
    border-radius: var(--op-raio-seg);
}
.op-segmentado label { position: relative; margin: 0; cursor: pointer; }
.op-segmentado input { position: absolute; opacity: 0; }
.op-segmentado span {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 28px; padding: 0 12px;
    border-radius: var(--op-raio-seg-bt);
    font-size: 13px; font-weight: 400; color: var(--op-texto);
    transition: background var(--op-duracao) var(--op-ease),
                box-shadow var(--op-duracao) var(--op-ease),
                font-weight var(--op-duracao) var(--op-ease);
}
.op-segmentado input:checked + span {
    background: var(--op-superficie); color: var(--op-texto); font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}
[data-bs-theme="dark"] .op-segmentado input:checked + span {
    background: var(--op-torre-cinza);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.op-segmentado input:focus-visible + span { box-shadow: 0 0 0 3px var(--op-foco); }

/* Cartão: branco, 16 px, sombra leve, 20 px interno. */
.op-cartao,
.op-quadro {
    background: var(--op-superficie); border: 0;
    border-radius: var(--op-raio-cartao);
    box-shadow: var(--op-sombra-cartao);
}
.op-quadro-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px 0; border-bottom: 0;
}
.op-quadro-topo h2 {
    margin: 0; font-size: 20px; font-weight: 600;
}
.op-quadro-corpo { display: grid; gap: 18px; padding: 16px 20px 20px; }

/* Grupo de lista Apple (Parte 2). Nome novo: .op-grupo-lista — nao misturar
   com .op-lista-grupo do RH (details/acordeao). Menu: .op-lateral /.op-bloco. */
.op-conteudo .op-grupo-lista {
    background: var(--op-superficie);
    border-radius: var(--op-raio-grupo);
    box-shadow: none;
    overflow: hidden;
    list-style: none; margin: 0; padding: 0;
}
.op-conteudo .op-grupo-lista > li,
.op-conteudo .op-grupo-linha {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    min-height: 48px; padding: 10px 16px;
    background: var(--op-superficie);
}
/* Divisória só no <li>: border-bottom igual em todas as linhas (o ::after
   de 0,5 px falhava em umas e sobrava em outras no celular). */
.op-conteudo .op-grupo-lista > li {
    border-bottom: 0.5px solid var(--op-linha);
}
.op-conteudo .op-grupo-lista > li:last-child {
    border-bottom: 0;
}
.op-conteudo .op-grupo-lista > li:not(:last-child)::after {
    content: none;
}
.op-conteudo .op-grupo-lista > li > a.op-agro-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    min-height: 44px; padding: 0; margin: 0;
    text-decoration: none; color: inherit; background: transparent;
}
.op-conteudo .op-grupo-lista:not(ul) > .op-grupo-linha:not(:last-child)::after {
    content: ""; position: absolute; left: 16px; right: 0; bottom: 0;
    height: 0.5px; background: var(--op-linha);
}
.op-grupo-nota {
    margin: 6px 16px 0; font-size: 13px; color: var(--op-cinza);
}
.op-chevron {
    margin-left: auto; color: var(--op-chevron);
    font-size: 18px; line-height: 1; font-weight: 400;
}

.op-barra-acoes {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 16px;
}
.op-barra-acoes-nota { margin: 0; font-size: 12px; color: var(--op-cinza-cl); }
.op-barra-acoes-botoes { display: flex; gap: 8px; margin-left: auto; }

.op-cabecalho {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 12px; margin-bottom: 16px;
}
.op-trilha { margin: 0 0 2px; font-size: 12px; color: var(--op-cinza-cl); }
.op-cabecalho h1 { margin: 0; }
.op-cabecalho-acoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* Selo de situação: pílula 22px com bolinha (cores do canvas Apple). */
.op-situacao {
    display: inline-flex; align-items: center; gap: 6px;
    height: 22px; padding: 0 8px; border-radius: var(--op-raio-pilula);
    font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
}
.op-situacao .bolinha-status { width: 6px; height: 6px; margin: 0; border-radius: 50%; }
.op-situacao-em_aberto { background: #E7F1F8; color: #145683; }
.op-situacao-em_aberto .bolinha-status { background: #145683 !important; }
.op-situacao-faturado { background: #EEF0FA; color: #4A4FA3; }
.op-situacao-faturado .bolinha-status { background: #4A4FA3 !important; }
.op-situacao-entregue { background: #E3F5EA; color: #1E6B35; }
.op-situacao-entregue .bolinha-status { background: #1E6B35 !important; }
.op-situacao-cancelado { background: #F0F0F2; color: #545458; }
.op-situacao-cancelado .bolinha-status { background: #545458 !important; }
.op-situacao-vencido { background: var(--op-erro-bg); color: var(--op-erro-txt); }
.op-situacao-vencido .bolinha-status { background: var(--op-erro-txt) !important; }
[data-bs-theme="dark"] .op-situacao-em_aberto {
    background: var(--op-info-bg); color: var(--op-info-txt);
}
[data-bs-theme="dark"] .op-situacao-em_aberto .bolinha-status {
    background: var(--op-info-txt) !important;
}
[data-bs-theme="dark"] .op-situacao-faturado {
    background: var(--op-selo-fat-bg); color: var(--op-selo-fat-txt);
}
[data-bs-theme="dark"] .op-situacao-faturado .bolinha-status {
    background: var(--op-selo-fat-txt) !important;
}
[data-bs-theme="dark"] .op-situacao-entregue {
    background: var(--op-ok-bg); color: var(--op-ok-txt);
}
[data-bs-theme="dark"] .op-situacao-entregue .bolinha-status {
    background: var(--op-ok-txt) !important;
}
[data-bs-theme="dark"] .op-situacao-cancelado {
    background: var(--op-neutro); color: var(--op-cinza);
}
[data-bs-theme="dark"] .op-situacao-cancelado .bolinha-status {
    background: var(--op-cinza) !important;
}

/* ----- topo da casca (computador): 60px; a empresa mora no trilho ----- */
.op-topo {
    display: none;
}
@media (min-width: 992px) {
    .op-topo {
        display: flex; align-items: center; justify-content: flex-end;
        height: 60px; padding: 0 20px;
        background: var(--op-superficie); border-bottom: 1px solid var(--op-borda);
        position: sticky; top: 0; z-index: 1030;
    }
    /* Antes a empresa era uma barra fixa de 220 px ao lado do trilho, e o painel
       começava abaixo dela (top: 60px). Agora a empresa é a pílula no topo do
       trilho; o painel ocupa a altura toda, como no pedido visual. */
}
.op-topo-avisos { display: flex; align-items: center; gap: 8px; }
.op-topo-aviso {
    position: relative;
    display: inline-flex; align-items: center; height: 32px; padding: 0 10px;
    border-radius: 7px; border: 1px solid var(--op-borda);
    color: var(--op-cinza); text-decoration: none; font-size: 13px; font-weight: 500;
}
.op-topo-aviso:hover { color: var(--op-texto); border-color: var(--op-campo-borda); }
/* Rodada 3 C1: mesma bolinha do menu (.op-cat-badge), contorno no fundo do topo. */
.op-topo-aviso .op-cat-badge {
    top: -6px; right: -6px;
    box-shadow: 0 0 0 2px var(--op-fundo);
}

/* Busca: preenchimento de controle, cantos 10 px, ⌘K à direita no computador. */
.op-busca {
    position: relative; flex: 1 1 280px; max-width: 420px; margin-right: auto;
}
.op-busca-campo {
    width: 100%; height: 36px; padding: 0 44px 0 36px;
    border: 0; border-radius: var(--op-raio-busca);
    background: var(--op-preenchimento); color: var(--op-texto);
    font: inherit; font-size: 15px;
}
.op-busca-campo:focus {
    outline: none; box-shadow: 0 0 0 3px var(--op-foco);
    background: var(--op-superficie);
}
.op-busca-campo::placeholder { color: var(--op-cinza); }
.op-busca::before {
    content: ""; position: absolute; left: 12px; top: 50%;
    width: 14px; height: 14px; margin-top: -7px;
    border: 1.5px solid var(--op-cinza); border-radius: 50%;
    pointer-events: none; box-sizing: border-box;
}
.op-busca::after {
    content: ""; position: absolute; left: 24px; top: 50%;
    width: 6px; height: 1.5px; margin-top: 4px;
    background: var(--op-cinza); transform: rotate(45deg);
    pointer-events: none;
}
.op-busca-atalho {
    position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
    font-size: 11px; font-weight: 600; color: var(--op-cinza);
    pointer-events: none;
    background: var(--op-superficie); border-radius: 4px; padding: 2px 5px;
}
.op-busca-lista {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--op-superficie); border: 1px solid var(--op-borda);
    border-radius: 10px; max-height: 360px; overflow: auto; z-index: 1040;
}
.op-busca-tipo {
    padding: 8px 12px 4px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--op-cinza);
}
.op-busca-item {
    display: block; padding: 8px 12px; text-decoration: none; color: var(--op-texto);
}
.op-busca-item:hover, .op-busca-item.ativo { background: var(--op-neutro); }
.op-busca-detalhe { display: block; color: var(--op-cinza); font-size: 12px; }

/* ----- lista de pedidos: abas = segmentado com contador ----- */
.op-abas {
    display: inline-flex; flex-wrap: nowrap; gap: 0; overflow-x: auto;
    margin: 0 0 14px; padding: 2px;
    background: var(--op-preenchimento); border: 0;
    border-radius: var(--op-raio-seg); max-width: 100%;
}
.op-aba {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    min-height: 28px; padding: 0 12px; margin: 0;
    border: 0; border-radius: var(--op-raio-seg-bt);
    color: var(--op-texto); text-decoration: none; font-size: 13px; font-weight: 400;
    background: transparent; white-space: nowrap;
    transition: background var(--op-duracao) var(--op-ease),
                box-shadow var(--op-duracao) var(--op-ease),
                font-weight var(--op-duracao) var(--op-ease);
}
.op-aba.ativa {
    background: var(--op-superficie); color: var(--op-texto); font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}
/* No escuro a superfície (#1C1C1E) some no trilho. O cinza do tema destaca o escolhido. */
[data-bs-theme="dark"] .op-aba.ativa {
    background: var(--op-torre-cinza);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.op-aba-n {
    min-width: 0; padding: 0; border-radius: 0;
    background: transparent; color: inherit;
    font-size: 13px; font-weight: inherit; line-height: 1; text-align: center;
}
.op-aba.ativa .op-aba-n { background: transparent; color: inherit; }

.op-lista-barra {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
    gap: 10px; margin-bottom: 12px;
}
.op-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.op-chip {
    border: 0; border-radius: var(--op-raio-pilula);
    background: var(--op-preenchimento); color: var(--op-cinza);
}
.op-chip.cheio {
    border: 0;
    background: var(--op-info-bg); color: var(--op-info-txt);
}
.op-chip > summary {
    list-style: none; cursor: pointer; padding: 8px 14px;
    font-size: 13px; font-weight: 500;
}
.op-chip > summary::-webkit-details-marker { display: none; }
.op-chip-corpo { padding: 0 10px 10px; min-width: 180px; }
.op-lista-grupo {
    border: 1px solid var(--op-borda); border-radius: 8px;
    background: var(--op-superficie); margin: 0 0 10px; padding: 0 12px 8px;
}
.op-lista-grupo > summary {
    list-style: none; cursor: pointer; font-weight: 600;
    padding: 10px 0;
}
.op-lista-grupo > summary::-webkit-details-marker { display: none; }
.op-lista-sub { margin: 0 0 8px 12px; }
a.op-chip {
    display: inline-block; padding: 6px 10px; text-decoration: none;
    font-size: 13px; font-weight: 500;
}
.op-folha-envio {
    border: 1px dashed var(--op-azul-claro); border-radius: 10px;
    padding: 16px; background: var(--op-superficie);
}
.op-folha-icone {
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--op-info-bg); color: var(--op-info-txt);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
}
.op-folha-grade {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.op-folha-destaque {
    background: var(--op-petroleo); color: var(--op-branco);
}
.op-folha-destaque p { color: var(--op-branco); }
.op-selo-holerite {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    background: var(--op-info-bg); color: var(--op-info-txt); font-size: 12px;
}
.op-selo-estimado {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    background: var(--op-fundo); color: var(--op-cinza); font-size: 12px;
}
.op-folha-ok { color: var(--op-ok-txt); font-weight: 600; }
.op-folha-alerta { color: var(--op-alerta-txt); }
.op-folha-barra {
    position: sticky; bottom: 0; z-index: 2;
    display: flex; flex-wrap: wrap; justify-content: space-between;
    align-items: center; gap: 8px; padding: 10px 0;
    background: var(--op-superficie); border-top: 1px solid var(--op-borda);
}
.op-folha-grade .op-quadro { padding: 16px 18px; }
.op-folha-titulo { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.op-folha-fraco { color: var(--op-cinza); font-size: 12.5px; margin: 4px 0 0; }
.op-folha-destaque .op-folha-fraco { color: var(--op-branco); }
.op-selo-lido {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    background: var(--op-ok-bg); color: var(--op-ok-txt);
    font-size: 12px; font-weight: 600;
}
.op-folha-arquivo {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
.op-folha-data {
    width: 7.2rem; border: 0; background: transparent; color: inherit;
    font: inherit; padding: 0;
}
.op-folha-visto { display: none; }
.op-folha-abre {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
.op-folha-cargo { display: block; color: var(--op-cinza); font-size: 12.5px; font-weight: 400; }
@media (max-width: 700px) {
    .op-folha-grade { grid-template-columns: 1fr 1fr; }
    .op-folha-barra .btn-primary { width: 100%; }
}
@media (max-width: 767.98px) {
    .op-folha-tabela thead { display: none; }
    .op-folha-tabela,
    .op-folha-tabela tbody,
    .op-folha-tabela tr,
    .op-folha-tabela td { display: block; width: auto; }
    .op-folha-tabela tr.op-folha-pessoa {
        display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
        margin: 0 0 .75rem; padding: 12px;
        border: 1px solid var(--op-borda); border-radius: .5rem;
        background: var(--op-superficie);
    }
    .op-folha-check { grid-column: 1 / -1; }
    .op-folha-quem { grid-column: 1; }
    .op-folha-liq { grid-column: 2; text-align: right; }
    .op-folha-salario { display: none; }
    .op-folha-origem, .op-folha-conf { grid-column: 1 / -1; }
    .op-folha-visto { display: inline; }
    .op-folha-edicao {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }
    .op-folha-pessoa:has(.op-folha-abre:checked) .op-folha-edicao {
        position: static; width: auto; height: auto; overflow: visible; clip: auto;
    }
    .op-folha-pessoa:has(.op-folha-abre:checked) .op-folha-visto { display: none; }
}
.op-lista-sub > summary { font-weight: 500; }
.op-lista-resumo { margin: 6px 0 0; font-size: 13px; color: var(--op-cinza); white-space: nowrap; }
.op-busca-pedido { max-width: 16rem; min-width: 0; }
.op-ped-cidade { display: block; font-size: 12px; color: var(--op-cinza-cl); font-weight: 400; }
.op-ped-quebra { display: none; }
.op-menu-acoes {
    width: 32px; height: 32px; padding: 0; border-radius: 7px;
    border: 1px solid transparent; background: transparent; color: var(--op-cinza);
}
.op-menu-acoes:hover { background: var(--op-fundo); color: var(--op-texto); }

.op-lista-rodape {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px; margin-top: 12px; font-size: 13px; color: var(--op-cinza);
}
.op-lista-paginas { display: flex; gap: 8px; }
.op-lista-paginas a, .op-lista-paginas span {
    display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
    border-radius: 7px; border: 1px solid var(--op-borda);
    background: var(--op-superficie); color: var(--op-texto); text-decoration: none;
    font-size: 13px;
}
.op-lista-paginas span { color: var(--op-cinza-cl); }

/* Cabeçalho de dia: só no celular (grupo de lista por dia). */
.op-ped-dia { display: none; }
/* + redondo: escondido no computador; o @media abaixo mostra no celular. */
.op-ped-novo-redondo { display: none; }

@media (max-width: 991.98px) {
    .op-pedidos { overflow-x: clip; }
    .op-lista-resumo { white-space: normal; }
    .op-busca-pedido { max-width: 100%; flex: 1 1 12rem; }
    /* O + redondo no cabeçalho substitui o botão fixo embaixo (Parte 4/5). */
    .op-ped-novo { display: none; }
    .op-ped-novo-redondo { display: inline-flex; }
    .op-pedidos .tabela-pedidos-rolagem,
    .op-pedidos .op-tabela-bloco {
        overflow-x: clip; background: transparent; border-radius: 0;
    }
    .op-pedidos .op-tabela thead { display: none; }
    .op-pedidos .op-tabela,
    .op-pedidos .op-tabela tbody { display: block; width: 100%; }
    .op-pedidos .op-tabela tr.op-ped-dia {
        display: block; height: auto; padding: 16px 4px 8px;
        border: 0; background: transparent; cursor: default;
    }
    .op-pedidos .op-tabela tr.op-ped-dia td {
        display: block; height: auto; padding: 0; border: 0;
        font-size: 13px; font-weight: 500; letter-spacing: 0.3px;
        text-transform: uppercase; color: var(--op-cinza);
    }
    .op-pedidos .op-tabela tr.op-ped-dia:first-child { padding-top: 4px; }
    .op-pedidos .op-tabela tr:not(.op-ped-dia) {
        display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
        min-height: 48px; height: auto; padding: 12px 14px;
        margin: 0; border: 0; border-bottom: 0.5px solid var(--op-linha);
        background: var(--op-superficie);
    }
    .op-pedidos .op-tabela tr:not(.op-ped-dia):hover > * {
        background: transparent;
    }
    /* Cantos do grupo: primeira e última linha depois de um cabeçalho de dia. */
    .op-pedidos .op-tabela tr.op-ped-dia + tr:not(.op-ped-dia) {
        border-radius: var(--op-raio-grupo) var(--op-raio-grupo) 0 0;
    }
    .op-pedidos .op-tabela tr:not(.op-ped-dia):has(+ tr.op-ped-dia),
    .op-pedidos .op-tabela tr:not(.op-ped-dia):last-child {
        border-bottom: 0;
        border-radius: 0 0 var(--op-raio-grupo) var(--op-raio-grupo);
    }
    .op-pedidos .op-tabela tr.op-ped-dia + tr:not(.op-ped-dia):last-child,
    .op-pedidos .op-tabela tr.op-ped-dia + tr:not(.op-ped-dia):has(+ tr.op-ped-dia) {
        border-radius: var(--op-raio-grupo);
    }
    .op-pedidos .op-tabela td {
        display: block; width: auto; height: auto; padding: 0; border: 0;
        background: transparent;
    }
    .op-pedidos .op-ped-marcar { order: 0; }
    .op-pedidos .op-ped-cliente { order: 1; flex: 1 1 auto; min-width: 0; }
    .op-pedidos .op-ped-valor { order: 2; margin-left: auto; font-weight: 600; }
    .op-pedidos .op-ped-quebra { display: block; order: 3; flex-basis: 100%; height: 0; padding: 0; }
    .op-pedidos .op-ped-emissao,
    .op-pedidos [data-col="emissao"] { display: none; }
    .op-pedidos .op-ped-num,
    .op-pedidos .op-ped-entrega,
    .op-pedidos .op-ped-status { order: 4; color: var(--op-cinza); font-size: 13px; }
    .op-pedidos .op-ped-acoes { order: 5; margin-left: auto; }
    .op-abas { display: flex; width: 100%; -webkit-overflow-scrolling: touch; }
    .op-aba { flex: 1 1 auto; justify-content: center; min-height: 44px; }
}

.op-formulario { display: grid; gap: 8px; max-width: 720px; }
/* Coluna única que nunca passa da tela. Sem o minmax(0, …) a coluna "auto"
   cresce até o texto mais comprido (título sem quebra, campo com valor
   longo) e o fim das linhas some em 360 px (passada visual do Agro, F). */
.op-formulario { grid-template-columns: minmax(0, 1fr); }
/* Ajuda de campo que mora dentro do cartão do grupo (ex.: Finalidade do
   talhão): recuo dos quatro lados, para o texto não encostar na borda. */
.op-formulario .op-grupo-lista > .op-grupo-nota { margin: 0; padding: 6px 16px 12px; }

/* Barra de ferramentas da tela de edição (56 px). */
.op-barra-edicao {
    display: flex; align-items: center; gap: 12px;
    min-height: 56px; padding: 8px 0 16px;
    background: transparent; border-bottom: 0.5px solid var(--op-linha);
    margin-bottom: 8px;
}
.op-barra-edicao-miolo { flex: 1 1 auto; min-width: 0; }
.op-barra-edicao-miolo .op-trilha { margin: 0 0 2px; font-size: 13px; color: var(--op-cinza); }
.op-barra-edicao-miolo h1 {
    margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.op-barra-edicao-acoes { display: flex; gap: 8px; flex: 0 0 auto; }

.op-insumo-pagina {
    display: grid; gap: 16px; align-items: start;
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.7fr);
}
.op-insumo-lado { display: grid; gap: 16px; }
.op-custo-efetivo { padding: 20px; }
.op-custo-efetivo .op-legenda { margin: 0 0 4px; }
.op-custo-efetivo .op-numero-destaque { margin: 0 0 16px; }
.op-custo-conta { display: grid; gap: 8px; }
.op-custo-linha {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 13px; color: var(--op-cinza);
}
.op-custo-total { font-weight: 600; padding-top: 8px; border-top: 0.5px solid var(--op-linha); }
.op-usado-em { margin: 0; padding-left: 1.1rem; }
@media (max-width: 991.98px) {
    .op-insumo-pagina { grid-template-columns: 1fr; }
    .op-barra-edicao { flex-wrap: wrap; }
    .op-barra-edicao-acoes { width: 100%; justify-content: flex-end; }
    .op-entrada-rotulo { flex-basis: 110px; }
}

.op-meta-periodo { display: inline-flex; }
.op-meta-periodo a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 28px; padding: 0 12px; border-radius: var(--op-raio-seg-bt);
    color: var(--op-texto); text-decoration: none; font-size: 13px; font-weight: 400;
}
.op-meta-periodo a.ativo {
    background: var(--op-superficie); font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}
.op-meta-miolo { position: relative; }
.op-meta-anel-miolo {
    width: 180px; height: 180px; margin: 8px auto 0;
}
.op-meta-anel { width: 180px; height: 180px; display: block; }
.op-meta-anel-trilho { stroke: var(--op-meta-falta); }
.op-meta-anel-aberto { stroke: var(--op-meta-aberto); }
.op-meta-anel-fat { stroke: var(--op-meta-fat); }
.op-meta-arco { width: 100%; height: auto; display: block; }
.op-meta-bloco.op-meta-fat { fill: var(--op-meta-fat); }
.op-meta-bloco.op-meta-aberto { fill: var(--op-meta-aberto); }
.op-meta-bloco.op-meta-falta { fill: var(--op-meta-falta); }
.op-meta-pct {
    position: absolute; left: 0; right: 0; top: 50%; margin: 0;
    transform: translateY(-50%); text-align: center;
}
.op-meta-pct b { display: block; font-size: 34px; font-weight: 700; }
.op-meta-pct span { color: var(--op-cinza); font-size: 13px; }
.op-meta-linhas {
    list-style: none; margin: 16px 0 0; padding: 0;
    background: var(--op-preenchimento); border-radius: var(--op-raio-grupo);
}
.op-meta-linhas .op-grupo-linha,
.op-meta-linhas li {
    display: flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 14px; font-size: 13px;
    border-bottom: 0.5px solid var(--op-linha);
}
.op-meta-linhas .op-grupo-linha:last-child,
.op-meta-linhas li:last-child { border-bottom: 0; }
.op-meta-linhas b { margin-left: auto; }
.op-meta-linhas i {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto;
}
.op-meta-linhas .op-meta-fat { background: var(--op-meta-fat); }
.op-meta-linhas .op-meta-aberto { background: var(--op-meta-aberto); }
.op-meta-linhas .op-meta-falta { background: var(--op-meta-falta); }
.op-meta-form { max-width: none; }
.op-meta-valor {
    width: 7.5rem; border: 1px solid var(--op-campo-borda); border-radius: 7px;
    background: var(--op-superficie); color: var(--op-texto); padding: 4px 8px;
    font: 400 13px/1.2 'Inter', system-ui, sans-serif; text-align: right;
}
.op-meta-anos { display: flex; gap: 8px; }

.op-fluxo {
    background: var(--op-fluxo-fundo); color: var(--op-fluxo-texto);
    border-radius: var(--op-raio-cartao); padding: 16px 20px;
    display: grid; gap: 12px;
    box-shadow: var(--op-sombra-cartao);
}
.op-fluxo h3 { margin: 0; font-size: 20px; font-weight: 600; color: var(--op-fluxo-texto); }
.op-fluxo-cab, .op-fluxo-form {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.op-fluxo-cab { justify-content: space-between; }
.op-fluxo-modo, .op-fluxo-series {
    display: inline-flex; flex-wrap: wrap; gap: 0; padding: 2px;
    background: var(--op-preenchimento); border-radius: var(--op-raio-seg);
}
.op-fluxo a {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 28px; padding: 0 12px; border-radius: var(--op-raio-seg-bt);
    color: var(--op-fluxo-texto); text-decoration: none; font-size: 13px; font-weight: 400;
}
.op-fluxo a.ativo {
    background: var(--op-superficie); font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}
.op-fluxo-series i {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.op-fluxo-series .op-fluxo-entrada { background: var(--op-fluxo-entrada); }
.op-fluxo-series .op-fluxo-saida { background: var(--op-fluxo-saida); }
.op-fluxo-series .op-fluxo-saldo { background: var(--op-fluxo-saldo); }
.op-fluxo-resumo, .op-fluxo-nota, .op-fluxo-aviso { margin: 0; font-size: 13px; }
.op-fluxo-aviso { font-weight: 600; }
.op-fluxo-nota { color: var(--op-fluxo-fraco); }
.op-fluxo-miolo { position: relative; }
.op-fluxo-svg { width: 100%; height: auto; display: block; }
.op-fluxo-linha { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.op-fluxo-svg.saldo .op-fluxo-linha,
.op-fluxo-svg.saldo .op-fluxo-stop { stroke: var(--op-fluxo-saldo); stop-color: var(--op-fluxo-saldo); }
.op-fluxo-svg.entradas .op-fluxo-linha,
.op-fluxo-svg.entradas .op-fluxo-stop { stroke: var(--op-fluxo-entrada); stop-color: var(--op-fluxo-entrada); }
.op-fluxo-svg.saidas .op-fluxo-linha,
.op-fluxo-svg.saidas .op-fluxo-stop { stroke: var(--op-fluxo-saida); stop-color: var(--op-fluxo-saida); }
.op-fluxo-linha.tracejada { stroke-dasharray: 5 4; }
.op-fluxo-area { stroke: none; opacity: .22; }
.op-fluxo-area.fraca { opacity: .1; }
.op-fluxo-grade { stroke: var(--op-linha); stroke-width: 0.5; fill: none; opacity: .6; }
.op-fluxo-hoje, .op-fluxo-zero, .op-fluxo-guia { stroke: var(--op-fluxo-fraco); fill: none; }
.op-fluxo-hoje, .op-fluxo-zero { stroke-dasharray: 3 3; }
.op-fluxo-hoje-rotulo {
    fill: var(--op-fluxo-fraco); font-size: 12px;
    font-family: Inter, system-ui, sans-serif;
}
.op-fluxo-ponto { fill: var(--op-fluxo-texto); stroke: var(--op-fluxo-fundo); stroke-width: 2; }
.op-fluxo-hover[hidden], .op-fluxo-etiqueta[hidden] { display: none; }
.op-fluxo-etiqueta {
    position: absolute; top: 8px; margin: 0; padding: 4px 8px;
    border: 1px solid var(--op-fluxo-fraco); border-radius: 7px;
    background: var(--op-fluxo-fundo); color: var(--op-fluxo-texto);
    font-size: 12px; white-space: nowrap; pointer-events: none;
}
.op-fluxo-pe {
    display: grid; gap: 10px; padding-top: 12px;
    border-top: 0.5px solid var(--op-linha);
}
.op-fluxo .op-interruptor span { color: var(--op-fluxo-texto); }

/* Abas do Início = segmentado abaixo do título. */
.op-abas-inicio {
    display: inline-flex; flex-wrap: wrap; gap: 0; margin: 0 0 18px; padding: 2px;
    background: var(--op-preenchimento); border-radius: var(--op-raio-seg);
    max-width: 100%;
}
.op-abas-inicio a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 32px; padding: 0 14px; border-radius: var(--op-raio-seg-bt);
    background: transparent; color: var(--op-texto); border: 0;
    text-decoration: none; font: 400 13px/1 Inter, system-ui, sans-serif;
}
.op-abas-inicio a.ativo {
    background: var(--op-superficie); color: var(--op-texto); font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}
.op-equipe-lista { margin: 0; padding: 0; list-style: none; }
.op-equipe-linha {
    display: flex; align-items: center; gap: 12px;
    min-height: 56px; padding: 10px 14px;
}
.op-equipe-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-content: center;
    background: var(--op-info-bg); color: var(--op-info-txt);
    font-size: 14px; font-weight: 600;
}
.op-equipe-miolo-txt { flex: 1 1 auto; min-width: 0; display: grid; gap: 6px; }
.op-equipe-pct { flex: 0 0 auto; font-size: 15px; font-weight: 600; }
.op-equipe-barra {
    display: flex; height: 4px; border-radius: 999px; overflow: hidden;
    background: var(--op-meta-falta);
}
.op-equipe-barra-fat { background: var(--op-meta-fat); height: 100%; }
.op-equipe-barra-aberto { background: var(--op-meta-aberto); height: 100%; }
.op-equipe-tipo { color: var(--op-cinza); font-weight: 400; }
.op-equipe-escolha, .op-equipe-nome {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin: 0; font-size: 13px; color: var(--op-texto);
}
.op-equipe-escolha select {
    flex: 1 1 8rem; min-width: 0; height: 32px;
    border: 1px solid var(--op-campo-borda); border-radius: 7px;
    background: var(--op-superficie); color: var(--op-texto);
    font: 400 13px/1.2 'Inter', system-ui, sans-serif;
}
.op-pagar-inicio .op-grupo-lista { margin: 0; padding: 0; list-style: none; }
.op-pagar-inicio .op-grupo-linha {
    display: flex; align-items: center; gap: 10px;
    min-height: 48px; padding: 0 4px; text-decoration: none; color: inherit;
}
.op-pagar-nome { flex: 1 1 auto; min-width: 0; font-size: 15px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-pagar-venc { font-size: 13px; color: var(--op-cinza); flex: 0 0 auto; }
.op-pagar-venc.vencida { color: var(--op-erro-txt); }
.op-equipe-nome { font-weight: 600; color: var(--op-texto); }
.op-equipe-nome span, .op-equipe-escolha > span { font-weight: 500; color: var(--op-cinza); }
.op-equipe-miolo { padding-top: 0; }
.op-equipe-miolo .op-meta-arco { width: 100%; max-width: 200px; height: auto; }
@media (max-width: 991.98px) {
    .op-equipe-grade { grid-template-columns: 1fr; }
}
.op-pesos { display: flex; flex-wrap: wrap; gap: 12px; }
.op-pesos .op-entrada { flex: 1 1 9rem; min-width: 9rem; }
.op-medalhas { display: flex; flex-wrap: wrap; gap: 6px; }
.op-medalha {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    background: var(--op-info-bg); color: var(--op-info-txt);
    font-size: 12px; line-height: 1.3;
}
.op-tabela-cartao .op-tabela td.op-medalhas,
.op-tabela-cartao .op-tabela td.op-time { white-space: normal; }
.op-telao .op-tabela-cartao { max-height: none; overflow: visible; }
.op-telao h1 { font-size: 3.5rem; }
.op-telao .op-tabela { font-size: 2.4rem; }
.op-telao .op-tabela th,
.op-telao .op-tabela td { padding: 16px 12px; }
.op-telao .op-equipe-nome { font-size: 2.6rem; }
.op-telao .op-meta-pct b { font-size: 4.5rem; }
.op-telao .op-meta-pct span { font-size: 1.5rem; }
.op-telao .op-meta-linhas li { font-size: 1.8rem; }
.op-telao .op-equipe-miolo .op-meta-arco { max-width: 420px; }
.op-telao .op-medalha { font-size: 1.5rem; padding: 6px 14px; }

/* CRM: colunas no cinza da página, cartão branco com raio 12. */
.op-crm-acoes { display: flex; gap: 8px; align-items: center; }
.op-crm-quadros { margin: 12px 0; }
.op-crm-quadros a,
.op-crm-colunas-movel a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 32px; padding: 0 12px; text-decoration: none;
    border-radius: var(--op-raio-seg-bt);
    font-size: 13px; color: var(--op-texto);
}
.op-crm-quadros a.escolhido,
.op-crm-colunas-movel a.escolhido {
    background: var(--op-superficie); font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}
.op-crm-colunas-movel { display: none; max-width: 100%; overflow-x: auto; }
.op-crm-metricas {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px; margin: 12px 0;
}
.op-crm-metricas article {
    background: var(--op-superficie); border-radius: 12px; padding: 12px;
}
.op-crm-metricas span { display: block; color: var(--op-cinza); font-size: 13px; }
.op-crm-metricas strong { font-size: 22px; }
.op-crm-metricas details { grid-column: 1 / -1; }
.op-crm-quadro {
    display: flex; gap: 12px; align-items: flex-start;
    overflow-x: auto; padding-bottom: 12px;
}
.op-crm-coluna {
    flex: 0 0 260px; background: var(--op-fundo);
    border-radius: 12px; padding: 8px; min-height: 180px;
}
.op-crm-coluna-topo {
    display: flex; gap: 8px; align-items: baseline;
    font-size: 13px; color: var(--op-cinza); margin-bottom: 8px;
}
.op-crm-coluna-topo strong { color: var(--op-texto); font-size: 15px; margin-right: auto; }
.op-crm-cartao {
    background: var(--op-superficie); border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 10px rgba(0, 0, 0, 0.03);
    margin-bottom: 8px;
}
.op-crm-cartao-link {
    display: grid; grid-template-columns: auto 1fr auto;
    gap: 6px 8px; padding: 12px; color: inherit; text-decoration: none;
}
.op-crm-iniciais {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--op-info-bg); color: var(--op-info-txt);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600;
}
.op-crm-loja { display: flex; flex-direction: column; min-width: 0; }
.op-crm-loja small { color: var(--op-cinza); font-size: 13px; }
.op-crm-valor { font-variant-numeric: tabular-nums; font-weight: 600; }
.op-crm-dias { font-size: 13px; font-weight: 600; }
.op-crm-cinza { color: var(--op-cinza); }
.op-crm-amarelo { color: var(--op-alerta-txt); }
.op-crm-vermelho, .op-crm-proximo.atrasado, .op-crm-aviso { color: var(--op-erro-txt); }
.op-crm-proximo, .op-crm-volta { font-size: 13px; grid-column: 2; }
.op-crm-mover-lista { display: none; padding: 0 12px 12px; }
.op-crm-painel {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
    background: var(--op-superficie); padding: 20px; overflow: auto;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08); z-index: 20;
}
.op-crm-painel label, .op-crm-mover-lista label, .op-crm-coluna-form label {
    display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 13px;
}
.op-crm-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.op-crm-tempo { padding-left: 18px; }
#op-crm-motivo {
    border: 0; border-radius: 12px; padding: 20px; max-width: 420px;
    background: var(--op-superficie); color: var(--op-texto);
}
#op-crm-motivo label { display: block; margin: 8px 0; }
@media (max-width: 991.98px) {
    .op-crm-colunas-movel { display: inline-flex; margin-bottom: 12px; }
    .op-crm-metricas { grid-template-columns: 1fr 1fr; }
    .op-crm-quadro { display: block; overflow: visible; }
    .op-crm-coluna { display: none; flex: none; width: 100%; }
    .op-crm-coluna.escolhida { display: block; }
    .op-crm-mover-lista { display: block; }
    .op-crm-mover-lista button,
    .op-crm-painel button,
    .op-crm-painel a.op-bt { min-height: 44px; }
    .op-crm-painel { position: static; width: auto; box-shadow: none; margin-top: 12px; }
}

/* Agro — Talhões: lista + ficha (pedido_agro_telas + correções commit 1) */
.op-agro-duas {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.op-agro-ficha { display: flex; flex-direction: column; gap: 12px; }
.op-agro-mapa-caixa { position: relative; }
.op-agro-mapa {
    height: 280px;
    border-radius: 12px;
    background: var(--op-superficie-2);
    z-index: 0;
}
/* Marcador numerado do plano (C4): bolinha azul com número. */
.op-agro-planta-marcador {
    background: var(--op-azul);
    color: #fff;
    border-radius: 50%;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600;
    border: 2px solid var(--op-superficie);
    box-shadow: 0 1px 3px rgba(15, 43, 61, 0.25);
    cursor: pointer;
}
.op-agro-planta-marcador span { line-height: 1; }
.op-agro-planta-marcador-ativo {
    background: var(--op-azul-escuro, #145683);
    box-shadow: 0 0 0 3px var(--op-foco);
}
/* Correção rodada 3b: formulário e mapa na mesma largura (lado a lado). */
.op-agro-plano-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
}
.op-agro-plano-mapa-bloco { margin-top: 24px; }
.op-agro-plano-linha { cursor: pointer; }
.op-agro-plano-linha-ativa {
    background: var(--op-info-bg);
}
@media (min-width: 992px) {
    .op-agro-plano-grade {
        grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
        gap: 24px;
    }
    .op-agro-plano-mapa-bloco { margin-top: 0; }
}
.op-agro-mapa-vazio {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px;
    pointer-events: none;
    border-radius: 12px;
    background: color-mix(in srgb, var(--op-superficie-2) 72%, transparent);
}
.op-agro-mapa-vazio p {
    margin: 0; font-size: 15px; font-weight: 600; color: var(--op-texto);
}
.op-agro-mapa-vazio form,
.op-agro-mapa-vazio label { pointer-events: auto; }
.op-agro-mapa-acoes {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin: 8px 0 0;
}
.op-entrada-valor {
    margin-left: auto; text-align: right;
    color: var(--op-cinza); font-variant-numeric: tabular-nums;
}
.op-tabela tr.op-linha-ativa td {
    background: var(--op-info-bg);
}
.op-tabela tr.op-agro-linha { cursor: pointer; }
.op-tabela tr.op-agro-linha td,
.op-tabela tr.op-agro-linha .op-agro-codigo,
.op-tabela tr.op-agro-linha .op-agro-nome,
.op-tabela tr.op-agro-linha a {
    font-weight: inherit; color: var(--op-texto); text-decoration: none;
}
.op-tabela tr.op-agro-linha .op-agro-codigo { font-weight: 600; }
/* Listas de cadastro do Agro: o cartão cresce; a página rola (sem cortar linha). */
.op-tabela-cartao.op-agro-lista-cheia {
    max-height: none; overflow: visible;
}
.op-tabela.op-agro-tabela-manejo {
    table-layout: fixed; width: 100%;
}
.op-tabela-cartao.op-agro-lista-cheia .op-tabela.op-agro-tabela-manejo th,
.op-tabela-cartao.op-agro-lista-cheia .op-tabela.op-agro-tabela-manejo td {
    white-space: normal; vertical-align: middle; overflow: visible;
    text-overflow: unset;
}
.op-tabela.op-agro-tabela-manejo td .op-agro-nome,
.op-tabela.op-agro-tabela-manejo td .op-agro-produto-det {
    display: block; white-space: normal; overflow-wrap: anywhere;
}
.op-tabela.op-agro-tabela-manejo .op-selo-estimado {
    white-space: nowrap;
}
.op-agro-lista-movel { display: none; }
.op-agro-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    text-decoration: none; color: inherit;
}
.op-agro-item .op-chevron {
    flex: 0 0 auto; margin-left: auto; color: var(--op-cinza-cl);
    font-size: 20px; line-height: 1;
}
.op-agro-item-corpo {
    display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
}
.op-agro-item-topo {
    display: flex; align-items: flex-start; gap: 8px;
}
.op-agro-item-topo > strong {
    flex: 1 1 auto; min-width: 0;
    overflow-wrap: anywhere; word-break: break-word;
}
.op-agro-item-topo .op-selo-estimado,
.op-agro-item-topo .op-agro-semaforo-verde,
.op-agro-item-topo .op-agro-semaforo-amarelo,
.op-agro-item-topo .op-agro-semaforo-vermelho {
    flex: 0 0 auto; white-space: nowrap; align-self: flex-start;
}
.op-agro-item-sub { font-size: 13px; }
.op-agro-ponto-extenso {
    display: block; font-size: 13px; margin-top: 2px; font-weight: 400;
}
.op-agro-praga-liga .op-entrada-rotulo {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 2px; max-width: none; flex: 1 1 auto;
}
.op-agro-item-ativo {
    background: var(--op-info-bg);
}
.op-agro-cartoes {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px; margin: 0 0 16px;
}
.op-agro-cartao { padding: 16px 18px; }
.op-agro-cartao p { margin: 0; }
.op-agro-cartao-num { font-size: 1.35rem; font-weight: 600; margin-top: 4px !important; }
.op-agro-cartao-link {
    text-decoration: none; color: inherit; display: block;
}
.op-agro-barra-filtros { align-items: center; gap: 12px; }
.op-agro-filtros-pilula {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.op-agro-filtros-pilula .op-pilula {
    gap: 6px; cursor: default;
}
.op-agro-filtros-pilula select {
    border: 0; background-color: transparent; color: inherit;
    font: inherit; max-width: 14rem;
    /* Sem a seta do sistema: a mesma seta do .form-select, clara no escuro. */
    appearance: none; -webkit-appearance: none; cursor: pointer;
    padding: 0 1.1rem 0 0;
    background-repeat: no-repeat; background-position: right center;
    background-size: .7rem .7rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236E6E73' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .op-agro-filtros-pilula select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239FB6C4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.op-agro-filtros-pilula select:focus-visible {
    outline: 2px solid var(--op-azul); outline-offset: 2px; border-radius: 4px;
}
.op-agro-produto { display: block; }
.op-agro-produto-det { display: block; font-size: 12px; }
.op-agro-selo-aviso {
    margin: 2px 4px 2px 0; display: inline-flex;
    background: var(--op-alerta-bg); color: var(--op-alerta-txt);
    white-space: nowrap; flex-shrink: 0;
}
/* Carência / colhido em carência — tokens de alerta do design system. */
.op-agro-selo-carencia {
    margin: 2px 4px 2px 0; display: inline-flex;
    background: var(--op-alerta-bg); color: var(--op-alerta-txt);
    white-space: nowrap; flex-shrink: 0;
}
.op-agro-item-selos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.op-agro-detalhe-selos { margin: 0 0 12px; }
.op-agro-tabela-caderno td, .op-agro-tabela-insumo td { vertical-align: top; }
.op-agro-cel-avisos {
    display: flex; flex-wrap: wrap; gap: 4px;
    min-width: 9rem; max-width: 14rem; white-space: normal;
}
.op-agro-form-pagina { max-width: none; overflow-x: clip; }
/* Passada visual (F): a coluna única vale para todo .op-formulario (regra
   perto de `.op-formulario { display: grid }`); aqui só a escolha curta. */
@media (max-width: 480px) {
    /* Escolha curta (segmentado): rótulo em cima, opções embaixo. */
    .op-agro-form-pagina .op-entrada:has(.op-segmentado) { flex-wrap: wrap; }
    .op-agro-form-pagina .op-entrada:has(.op-segmentado) .op-entrada-rotulo {
        flex: 1 0 100%; max-width: none;
    }
    .op-agro-form-pagina .op-entrada:has(.op-segmentado) .op-entrada-caixa {
        width: 100%;
    }
    .op-agro-form-pagina .op-segmentado {
        flex-wrap: wrap; width: 100%; margin-left: 0;
    }
    .op-agro-form-pagina .op-segmentado label { flex: 1 1 auto; }
    .op-agro-form-pagina .op-segmentado span { text-align: center; }
    /* Rodada 3 B: Tipo com 4 opções — rolagem horizontal, sem quebrar linha. */
    #op-agro-form-aplicacao .op-entrada:has(input[name="tipo"]) .op-entrada-caixa {
        position: relative;
    }
    #op-agro-form-aplicacao .op-entrada:has(input[name="tipo"]) .op-segmentado {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        margin-left: 0;
        mask-image: linear-gradient(to right, #000 85%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
    }
    #op-agro-form-aplicacao .op-entrada:has(input[name="tipo"]) .op-segmentado label {
        flex: 0 0 auto;
    }
    #op-agro-form-aplicacao .op-entrada:has(input[name="tipo"]) .op-segmentado span {
        white-space: nowrap;
    }
}
/* Correção 3b: Ao salvar com título fora do cartão, como os outros grupos. */
.op-agro-ao-salvar.op-grupo-bloco .op-grupo-lista {
    background: var(--op-superficie);
    border: 1px solid var(--op-borda);
    border-radius: var(--op-raio-grupo);
}
/* Rodada 3 B: valores à direita; cinza só quando não há alerta. */
.op-agro-ao-salvar .op-grupo-linha > :last-child {
    margin-left: auto;
    text-align: right;
}
.op-agro-ao-salvar .op-grupo-linha .op-cinza {
    font-weight: 400;
    color: var(--op-cinza);
}
.op-agro-ao-salvar .op-grupo-linha .op-agro-falha-neg,
.op-agro-ao-salvar .op-grupo-linha .op-crm-aviso {
    color: var(--op-erro-txt);
    font-weight: 600;
}
.op-agro-form-duas {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 16px;
    align-items: start;
}
.op-agro-form-miolo { min-width: 0; }
.op-agro-form-lado { display: grid; gap: 16px; min-width: 0; }
.op-agro-ao-salvar .op-grupo-linha,
.op-agro-condicoes .op-grupo-linha {
    justify-content: space-between;
}
.op-agro-ao-salvar .op-folha-fraco,
.op-agro-clima-breve { padding: 8px 16px 16px; margin: 0; }
/* O motivo ("Vento acima de 15 km/h") fecha o cartão: respira embaixo. */
.op-agro-condicoes > .op-grupo-nota { margin: 0; padding: 8px 16px 16px; }
/* Níveis e demais cadastros em tabela: nome em até três linhas, sem encostar
   na linha de cima e de baixo; a coluna do nome ganha mais largura. */
.op-tabela-cartao.op-agro-lista-cheia .op-tabela.op-agro-tabela-manejo td {
    padding-top: 10px; padding-bottom: 10px;
}
.op-tabela.op-agro-tabela-manejo th:first-child { width: 30%; }
.op-agro-dose-caixa { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* Vários produtos na Nova aplicação: cada bloco com dose/selo próprios. */
.op-agro-produto {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid var(--op-borda);
    padding-bottom: 8px;
    margin-bottom: 4px;
}
.op-agro-produto:last-child { border-bottom: 0; padding-bottom: 0; }
.op-agro-produto .op-agro-produto-remover {
    align-self: flex-start;
    margin: 8px 16px;
}
.op-agro-selo-ok {
    background: var(--op-ok-bg); color: var(--op-ok-txt);
    white-space: nowrap; flex-shrink: 0;
}
.op-agro-tarefa-data {
    color: var(--op-azul); font-weight: 600; flex: 0 0 auto; min-width: 2.6rem;
}
/* Resumo longo: rótulo em cima, texto à esquerda, sem alça de arrastar. */
#op-agro-form-corrigir .op-entrada-bloco .op-entrada-rotulo {
    flex: 1 0 100%; max-width: none;
}
#op-agro-form-corrigir textarea.op-agro-resumo {
    text-align: left; resize: none;
}
.op-agro-selo-alerta {
    background: var(--op-alerta-bg); color: var(--op-alerta-txt);
}
/* Quantidade e demais campos: sem borda própria dentro da linha. */
.op-agro-form-pagina .op-entrada-caixa input.form-control,
.op-agro-form-pagina .op-entrada-caixa input {
    border: 0 !important;
    box-shadow: none !important;
    outline: none;
    background: transparent;
    border-radius: 0;
}
#op-agro-form-aplicacao:not(:has(#id_tem_receituario:checked)) .op-agro-receituario-extra {
    display: none;
}
/* Rateio e ano agrícola só com o Agro ligado. */
#op-form-modulos:not(:has(#id_agro:checked)) .op-so-com-agro {
    display: none;
}
.op-agro-receituario-extra .op-entrada:first-child { border-radius: 0; }
@media (max-width: 720px) {
    .op-agro-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .op-agro-form-duas { grid-template-columns: 1fr; }
    .op-agro-cancelar { display: none; }
}
@media (max-width: 991.98px) {
    .op-agro-tabela-caderno,
    .op-agro-tabela-insumo,
    .op-agro-tabela-resultado,
    .op-agro-tabela-manejo,
    .op-agro-tabela-carencia { display: none; }
    .op-bloco-tabela-cartao .op-agro-lista-movel,
    .op-tabela-cartao .op-agro-lista-movel { display: block; }
}
/* Insumo agrícola: Formulação só fertilizante; Defensivo só defensivo.
   A ajuda (.op-grupo-nota) some junto com o campo. */
#op-agro-form-insumo:not(:has(#id_tipo_agricola option[value="fertilizante"]:checked))
    .op-entrada:has(#id_formulacao),
#op-agro-form-insumo:not(:has(#id_tipo_agricola option[value="fertilizante"]:checked))
    .op-entrada:has(#id_formulacao) + .op-grupo-nota { display: none; }
#op-agro-form-insumo:not(:has(#id_tipo_agricola option[value="defensivo"]:checked))
    .op-grupo-defensivo { display: none; }
/* Máximo + período na mesma linha visual. */
#op-agro-form-insumo .op-entrada:has(#id_max_aplicacoes_periodo) .op-entrada-rotulo {
    flex: 0 0 auto; max-width: none;
}
/* R$ colado no valor, à direita. */
#op-agro-form-insumo .op-entrada:has(#id_preco_compra) .op-entrada-caixa {
    justify-content: flex-end; gap: 2px;
}
#op-agro-form-insumo .op-entrada:has(#id_preco_compra) input {
    flex: 0 1 auto; width: 6.5rem; max-width: 40%;
}
/* Modalidades e alvos: uma opção por linha com divisória. */
#op-agro-form-insumo .op-entrada-caixa-livre ul {
    list-style: none; margin: 0; padding: 0; width: 100%;
}
#op-agro-form-insumo .op-entrada-caixa-livre li {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    min-height: 40px; padding: 4px 0;
    border-bottom: 0.5px solid var(--op-linha);
}
#op-agro-form-insumo .op-entrada-caixa-livre li:last-child { border-bottom: 0; }
.op-agro-tabela .op-selo-estimado {
    white-space: nowrap; line-height: 1.2;
}
.op-agro-tabela th.op-agro-col-situacao,
.op-agro-tabela td.op-agro-col-situacao { width: 7.5rem; }
/* Semáforo do monitoramento (só tokens do tema). */
.op-agro-semaforo-verde {
    background: var(--op-ok-bg); color: var(--op-ok-txt);
}
.op-agro-semaforo-amarelo {
    background: var(--op-alerta-bg); color: var(--op-alerta-txt);
}
.op-agro-semaforo-vermelho {
    background: var(--op-erro-bg, var(--op-alerta-bg));
    color: var(--op-erro-txt, var(--op-alerta-txt));
}
.op-agro-atrasada { color: var(--op-alerta-txt); font-weight: 600; }
/* Monitoramento: matriz em largura total; alertas acima; selos no celular. */
.op-agro-monitor-seg { margin-bottom: 16px; }
.op-agro-monitor-alertas {
    display: grid; gap: 12px; margin: 0 0 16px;
}
.op-agro-alerta-caso .op-agro-alerta-txt {
    margin: 8px 0 12px; font-size: 14px; line-height: 1.35;
}
.op-agro-cartao-sub { font-size: 12px; margin-top: 2px !important; }
.op-agro-monitor-matriz { width: 100%; }
.op-agro-matriz-th {
    vertical-align: bottom; max-width: 7.5rem;
}
.op-agro-matriz-th .op-agro-matriz-nome {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 12px; font-weight: 600; line-height: 1.25;
}
.op-agro-matriz-th .op-agro-ponto {
    display: block; font-size: 12px; font-weight: 400; margin-top: 2px;
}
.op-agro-matriz-mais {
    margin: 8px 0 16px; padding: 0 4px; font-size: 14px;
}
.op-agro-selos-praga {
    display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
}
/* Clima e risco (commit 8 + correções). */
.op-agro-clima-dias-rolagem {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 0 0 8px;
}
.op-agro-clima-dias {
    display: grid; grid-template-columns: repeat(7, minmax(104px, 1fr));
    gap: 8px; min-width: min(100%, 760px);
}
.op-agro-clima-dia {
    display: block; padding: 12px; text-decoration: none; color: inherit;
    text-align: center; min-width: 0;
}
.op-agro-clima-dia p { margin: 0 0 4px; }
.op-agro-clima-dia-nome { font-weight: 600; font-size: 13px; }
.op-agro-clima-dia-ativa {
    box-shadow: 0 0 0 2px var(--op-azul);
}
.op-agro-risco-baixo { background: var(--op-ok-bg); color: var(--op-ok-txt); }
.op-agro-risco-moderado {
    background: var(--op-alerta-bg); color: var(--op-alerta-txt);
}
.op-agro-risco-alto {
    background: var(--op-erro-bg, var(--op-alerta-bg));
    color: var(--op-erro-txt, var(--op-alerta-txt));
}
/* Janela: uma linha + eixo; no celular rola só a faixa. */
.op-agro-janela-melhor-txt { margin: 0 0 8px; padding: 0 16px; }
.op-agro-janela-rolagem {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 8px 0 4px; padding: 0 16px;
}
.op-agro-janela-trilha {
    display: flex; flex-direction: column; gap: 4px;
    width: max-content; min-width: 100%;
}
.op-agro-janela {
    display: flex; flex-wrap: nowrap; gap: 2px; margin: 0;
}
.op-agro-janela-bloco {
    flex: 0 0 auto; width: 14px; height: 28px; border-radius: 3px;
    font-size: 0; overflow: hidden; border: 0; padding: 0;
    cursor: pointer;
}
/* Claridade distinta: verde escuro, amarelo claro, vermelho vivo. */
.op-agro-janela-verde { background: var(--op-ok-txt); }
.op-agro-janela-amarelo { background: var(--op-janela-cuidado); }
.op-agro-janela-vermelho { background: var(--op-erro-txt); }
.op-agro-janela-melhor {
    outline: 2px solid var(--op-azul); outline-offset: 1px;
}
.op-agro-janela-eixo {
    position: relative; height: 28px; margin: 0;
}
.op-agro-janela-marca {
    position: absolute; top: 0; left: calc(var(--op-i) * 16px);
    font-size: 11px; color: var(--op-cinza); white-space: nowrap;
    transform: translateX(-40%);
}
.op-agro-janela-marca-dia {
    top: 12px; font-weight: 600; color: var(--op-texto);
    border-left: 1px solid var(--op-linha); padding-left: 4px;
    transform: translateX(0);
}
.op-agro-janela-detalhe {
    margin: 4px 16px 8px; font-size: 13px; line-height: 1.35;
    min-height: 1.2em;
}
.op-agro-legenda .op-agro-janela-bloco {
    width: 14px; height: 14px; cursor: default; pointer-events: none;
}
.op-agro-conduta {
    flex-direction: column; align-items: flex-start !important;
    gap: 4px !important;
}
.op-agro-conduta-rotulo {
    font-weight: 600; font-size: 13px; color: var(--op-cinza);
}
.op-agro-conduta-texto { font-size: 15px; line-height: 1.35; }
.op-agro-condicoes .op-bloco-cab {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding-right: 16px;
}
.op-agro-condicoes .op-grupo-lista { border-radius: 0; }
.op-grupo-lista > .op-grupo-linha > b.op-cinza,
.op-grupo-lista > .op-grupo-linha > b.num,
.op-grupo-lista > .op-grupo-linha > span.op-cinza,
.op-grupo-lista > .op-grupo-linha > span.num {
    margin-left: auto; text-align: right; font-weight: 500;
}
.op-grupo-lista > .op-grupo-linha > b.op-cinza,
.op-grupo-lista > .op-grupo-linha > span.op-cinza {
    color: var(--op-cinza); font-weight: 400;
}
@media (max-width: 720px) {
    .op-agro-clima-dias {
        grid-template-columns: repeat(7, minmax(112px, 1fr));
        min-width: 800px;
    }
}
.op-agro-barra-progresso {
    height: 4px; background: var(--op-preenchimento); border-radius: 999px;
    margin: 0 0 16px; overflow: hidden;
}
.op-agro-barra-progresso > span {
    display: block; height: 100%; min-width: 0; background: var(--op-azul);
}
/* Rodada 3 A: fixed no rodapé — overflow-x:clip do form-pagina quebra sticky. */
.op-agro-form-pagina.op-agro-inspecao {
    overflow: visible;
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}
.op-agro-inspecao-barra {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: flex; gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--op-fundo);
    border-top: 1px solid var(--op-borda);
    box-sizing: border-box;
}
.op-agro-inspecao-barra .op-bt { flex: 1; min-height: 44px; }
.op-agro-foto-input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
.op-agro-foto-campo .op-entrada-caixa {
    position: relative; flex-direction: column; align-items: flex-start; gap: 12px;
}
.op-agro-foto-bt {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.op-agro-foto-previa img {
    width: 96px; height: 96px; object-fit: cover;
    border-radius: 8px; background: var(--op-preenchimento);
}
.op-agro-resultado-acoes {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 16px; padding: 0;
}
.op-agro-resultado-acoes .op-bt { flex: 1 1 auto; min-width: 140px; }
/* Inspeção no celular: tipografia e toque do desenho (17 px / 44 px). */
.op-agro-inspecao {
    font-size: 17px;
}
.op-agro-inspecao .op-entrada-rotulo,
.op-agro-inspecao .op-grupo-titulo,
.op-agro-inspecao .op-agro-inspecao-pct {
    font-size: 17px;
}
.op-agro-inspecao .op-interruptor {
    min-height: 44px;
}
.op-agro-inspecao .op-agro-praga-liga:has(input:checked) .op-interruptor-trilho {
    background: var(--op-erro-bt);
}
.op-agro-inspecao .op-agro-praga-liga:has(input:checked) .op-interruptor-trilho::after {
    background: #fff;
}
.op-agro-praga-liga:has(input:checked) .op-entrada-rotulo {
    color: var(--op-erro-txt); font-weight: 600;
}
.op-agro-contador-linha {
    display: flex; align-items: center; gap: 12px;
}
.op-agro-contador-bt {
    min-width: 44px; min-height: 44px; font-size: 22px; padding: 0;
}
.op-agro-contador-num {
    min-width: 2.5rem; text-align: center; font-size: 22px; font-weight: 600;
}
.op-agro-inspecao-pct {
    margin: 0 16px 12px; color: var(--op-cinza);
}
.op-agro-infestacao-alerta {
    color: var(--op-erro-txt); font-weight: 600;
}
.op-agro-inspecao-fotos {
    display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 16px 16px;
}
.op-agro-inspecao-foto {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    text-decoration: none; color: var(--op-texto); font-size: 13px;
}
.op-agro-inspecao-foto img {
    width: 96px; height: 96px; object-fit: cover;
    border-radius: 8px; background: var(--op-preenchimento);
}
.op-agro-barras { padding: 8px 0; }
.op-agro-barra-linha {
    display: grid; grid-template-columns: 3rem 1fr 3.5rem;
    gap: 10px; align-items: center; padding: 8px 16px;
}
.op-agro-barra-rotulo { font-weight: 600; }
.op-agro-barra-trilho {
    position: relative; height: 12px; border-radius: 999px;
    background: var(--op-preenchimento); overflow: hidden;
}
.op-agro-barra-ant {
    position: absolute; left: 0; top: 0; bottom: 0; z-index: 1;
    background: var(--op-trilho); border-radius: 999px;
}
.op-agro-barra-atual {
    position: absolute; left: 0; top: 0; bottom: 0; z-index: 2;
    background: var(--op-azul); border-radius: 999px;
    min-width: 2px;
}
.op-agro-barra-caiu { background: var(--op-meta-aberto); }
/* Custos por talhão: barra de composição empilhada. Quatro cores, só tokens
   do tema (claro e escuro). A largura de cada fatia vem do servidor, em %
   com ponto decimal; cada talhão ocupa 100% da trilha. */
.op-agro-composicao {
    display: flex; height: 12px; width: 100%; min-width: 120px;
    border-radius: 999px; overflow: hidden;
    background: var(--op-preenchimento);
}
.op-agro-seg { display: block; height: 100%; min-width: 2px; }
.op-agro-seg-azul { background: var(--op-azul); }
.op-agro-seg-verde { background: var(--op-verde-txt); }
.op-agro-seg-alerta { background: var(--op-alerta-txt); }
.op-agro-seg-cinza { background: var(--op-cinza); }
.op-agro-seg-vermelho { background: var(--op-erro-txt, #E03131); }
.op-agro-seg-ponto {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    flex: none;
}
.op-agro-rolagem { overflow-x: auto; }
.op-agro-tabela-custos .op-tabela td:nth-child(2) { min-width: 140px; width: 18%; }
.op-tabela tr.op-agro-total > td {
    background: var(--op-neutro); font-weight: 600;
}
.op-agro-legenda {
    list-style: none; margin: 0; padding: 12px 16px 16px;
    display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px;
}
.op-agro-legenda li { display: flex; align-items: center; gap: 6px; }
.op-agro-margem-rs {
    display: block; margin-top: 2px;
    font-size: 12px; font-weight: 400; color: var(--op-cinza);
}
.op-agro-item-custo .op-agro-item-corpo { gap: 8px; }
.op-agro-rolagem .op-tabela { width: 100%; }
.op-grupo-nota a.op-link,
.op-grupo-nota a.op-link:hover,
.op-grupo-nota a.op-link:focus {
    text-decoration: none;
}
/* Apontamento: mostra só horas ou só diárias conforme o Segmentado.
   A ajuda do campo fica fora do .op-entrada (irmão seguinte). */
#op-agro-form-mao-obra:has(input[name="modo"][value="horas"]:checked)
    .op-entrada:has(#id_diarias),
#op-agro-form-mao-obra:has(input[name="modo"][value="horas"]:checked)
    .op-entrada:has(#id_diarias) + .op-grupo-nota { display: none; }
#op-agro-form-mao-obra:has(input[name="modo"][value="diaria"]:checked)
    .op-entrada:has(#id_horas),
#op-agro-form-mao-obra:has(input[name="modo"][value="diaria"]:checked)
    .op-entrada:has(#id_horas) + .op-grupo-nota { display: none; }
.op-agro-falha-neg { color: var(--op-erro-txt); font-weight: 600; } /* #D70015 no claro */
/* Nutrição (commit 9): trilho da faixa com ponto do valor. */
.op-agro-nutri-topo {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    margin: 0 0 16px;
}
.op-agro-nutri-topo .op-agro-monitor-seg { margin-bottom: 0; }
.op-agro-nutri-laudo-data { margin: 0; font-size: 13px; }
.op-agro-nutri-cartao { margin-top: 20px; }
.op-agro-nutri-acoes {
    padding: 16px; display: flex; justify-content: flex-end;
}
.op-agro-alerta-faixa {
    display: flex; gap: 12px; align-items: flex-start;
    margin: 0 0 16px; padding: 14px 16px;
    background: var(--op-alerta-bg); color: var(--op-alerta-txt);
    border: 1px solid var(--op-alerta-borda); border-radius: 12px;
}
.op-agro-alerta-faixa-icone {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
    background: var(--op-alerta-borda); color: var(--op-alerta-txt);
}
.op-agro-alerta-faixa-corpo { min-width: 0; flex: 1; }
.op-agro-alerta-faixa-titulo {
    display: block; margin: 0 0 4px; font-size: 15px;
}
.op-agro-alerta-faixa-texto {
    margin: 0; font-size: 14px; line-height: 1.35;
}
.op-agro-faixa-linha {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.op-agro-faixa-num { font-size: 12px; white-space: nowrap; }
.op-agro-faixa-trilho {
    position: relative; display: block; height: 10px; width: 120px;
    max-width: 100%; border-radius: 999px;
    background: var(--op-preenchimento, var(--op-neutro));
}
.op-agro-faixa-trilho-movel { width: 100%; margin-top: 8px; }
.op-agro-faixa-verde {
    position: absolute; top: 0; bottom: 0;
    background: var(--op-ok-bg); border-radius: 999px;
}
.op-agro-faixa-marcador {
    position: absolute; top: 50%; width: 10px; height: 10px;
    margin-left: -5px; margin-top: -5px;
    background: var(--op-azul); border-radius: 999px;
    box-shadow: 0 0 0 2px var(--op-fundo, #fff);
}
.op-agro-analise-atual { font-weight: 700; }
.op-agro-sit-dentro { background: var(--op-ok-bg); color: var(--op-ok-txt); }
.op-agro-sit-abaixo, .op-agro-sit-acima {
    background: var(--op-alerta-bg); color: var(--op-alerta-txt);
}
.op-agro-sit-sem_faixa {
    background: var(--op-neutro); color: var(--op-cinza);
}
.op-agro-laudo-ilegivel,
.op-agro-laudo-campo-vazio {
    background: var(--op-alerta-bg);
}
.op-agro-resistencia-avisos { margin-top: 12px; }
.op-agro-laudo-previa .op-grupo-linha {
    align-items: center;
}
.op-agro-laudo-campo {
    display: inline-flex; align-items: center; gap: 8px;
}
.op-agro-laudo-previa .op-entrada-valor {
    border: 0 !important; box-shadow: none !important;
    background: transparent; width: 5.5rem; text-align: right;
}
.op-agro-laudo-un { font-size: 13px; min-width: 3.2rem; }
.op-agro-pista {
    padding-top: 0 !important; min-height: 0;
}
.op-agro-pista .op-cinza {
    font-size: 13px; font-weight: 400; padding-left: 0;
}
.op-agro-historico-bloco { margin-top: 24px; }
.op-agro-historico-bloco .op-grupo-titulo {
    margin: 12px 16px 0; padding: 0;
}
.op-agro-historico-bloco .op-bloco-cab + .op-grupo-titulo {
    margin-top: 8px;
}
.op-agro-historico-bloco .op-grupo-lista {
    margin-top: 4px;
}
.op-grupo-linha.op-agro-linha {
    cursor: pointer; text-decoration: none;
}
.op-grupo-linha.op-agro-linha a,
.op-grupo-linha.op-agro-linha b,
.op-grupo-linha.op-agro-linha span {
    text-decoration: none;
}
.op-agro-encerrar {
    overflow: hidden; max-width: 100%;
}
.op-agro-encerrar .op-entrada-caixa {
    min-width: 0; max-width: 100%;
}
.op-agro-encerrar .op-entrada-caixa input,
.op-agro-encerrar .op-entrada-caixa select {
    min-width: 0; max-width: 100%;
}
.op-agro-duas > .op-grupo-bloco {
    min-width: 0; max-width: 100%; overflow-x: clip;
}
.op-agro-duas .op-agro-janela-rolagem {
    max-width: 100%; box-sizing: border-box;
}
.op-agro-fotos {
    display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px 12px;
}
.op-agro-foto {
    display: block; width: 72px; height: 72px; border-radius: 8px;
    overflow: hidden; background: var(--op-fundo-2);
}
.op-agro-foto img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.op-agro-camadas-scroll {
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
}
.op-agro-camadas-scroll .op-aba { flex: 0 0 auto; white-space: nowrap; }
.op-agro-atalhos-topo {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.op-agro-mapa-badge {
    background: transparent; border: 0;
}
.op-agro-mapa-badge span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 999px;
    background: var(--op-erro-txt, #E03131); color: #fff;
    font-size: 12px; font-weight: 600;
}
.op-agro-grafico { padding: 8px 0 4px; }
.op-agro-grafico-svg { width: 100%; max-width: 360px; height: auto; }
.op-agro-grafico-eixo { stroke: var(--op-linha); stroke-width: 1; }
.op-agro-grafico-ponto { fill: var(--op-azul); }
/* Rodada 3 C2: captura (azul) e chuva (cinza) no mesmo SVG. */
.op-agro-captura-linha {
    stroke: var(--op-azul); stroke-width: 2; stroke-linejoin: round;
    stroke-linecap: round;
}
.op-agro-chuva-linha {
    stroke: var(--op-cinza); stroke-width: 2; stroke-linejoin: round;
    stroke-linecap: round; stroke-dasharray: 4 3;
}
.op-agro-chuva-ponto { fill: var(--op-cinza); }
.op-agro-captura-legenda {
    display: flex; flex-wrap: wrap; gap: 12px 16px;
    margin: 0 0 12px; padding: 0 16px; font-size: 13px; color: var(--op-cinza);
}
.op-agro-captura-legenda-item {
    display: inline-flex; align-items: center; gap: 6px;
}
.op-agro-captura-legenda-item::before {
    content: ""; width: 16px; height: 2px; background: currentColor;
}
.op-agro-captura-legenda-captura { color: var(--op-azul); }
.op-agro-captura-legenda-chuva { color: var(--op-cinza); }
.op-agro-captura-legenda-chuva::before { border-top: 2px dashed currentColor; height: 0; background: none; }
.op-agro-falha { margin: 0; }
.op-agro-falha > summary {
    list-style: none; cursor: pointer;
}
.op-agro-falha > summary::-webkit-details-marker { display: none; }
.op-agro-falha[open] > summary .op-chevron {
    transform: rotate(90deg);
}
.op-agro-falha .op-barra-acoes {
    padding: 8px 16px 16px; justify-content: flex-end;
}
@media (max-width: 991.98px) {
    .op-agro-duas { grid-template-columns: 1fr; }
    .op-agro-mapa { height: 220px; }
    .op-agro-tabela { display: none; }
    .op-agro-lista-movel { display: block; }
}

/* Painel da plataforma — moldura própria + componentes Apple.
   Causa do commit 1: as telas estendiam base.html (menu da empresa);
   .op-quadro sem padding (só .op-quadro-corpo tem); interruptores sem
   .op-interruptor-trilho (input com opacity 0); .op-so-cel/.op-so-pc com
   especificidade fraca e quebra em 768 px em vez de 992. */

.op-plataforma-app .op-principal { background: var(--op-fundo); }
.op-plataforma-app .op-conteudo { overflow-x: clip; max-width: 100%; }
/* Largura de menu de verdade — não o rail de 64 px da empresa. */
.op-plataforma-lateral,
html.op-plataforma .op-plataforma-lateral {
    display: flex; flex-direction: column;
    width: 240px; flex: 0 0 240px;
    background: var(--op-neutro);
    box-sizing: border-box;
}
.op-plataforma-lateral-topo { padding: 16px 14px 8px; }
.op-plataforma-marca { display: inline-flex; align-items: center; }
.op-plataforma-marca .op-logo {
    height: 22px; width: auto; max-width: 140px;
    display: block; object-fit: contain;
}
.op-plataforma-lateral-sub {
    margin: 8px 0 0; font-size: 12px; font-weight: 600;
    color: var(--op-cinza); letter-spacing: .02em;
}
.op-plataforma-nav {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px; flex: 1 1 auto;
}
.op-plataforma-nav-item {
    display: flex; align-items: center; min-height: 36px;
    padding: 0 12px; border-radius: 10px;
    color: var(--op-texto); text-decoration: none;
    font-size: 14px; font-weight: 500; border: 0; background: transparent;
    text-align: left; width: 100%; cursor: pointer;
}
a.op-plataforma-nav-item:hover { background: var(--op-superficie); }
.op-plataforma-nav-item.ativa {
    background: var(--op-azul-bt); color: #fff;
}
.op-plataforma-nav-off {
    color: var(--op-cinza-cl); cursor: default; opacity: .7;
}
.op-plataforma-lateral-rodape {
    padding: 10px 12px 16px; display: grid; gap: 4px;
    border-top: 0.5px solid var(--op-borda);
}
.op-plataforma-sair { font: inherit; }
.op-plataforma-topo-movel .op-plataforma-marca-topo {
    display: flex; align-items: center; gap: 8px; text-decoration: none;
}
.op-plataforma-selo {
    display: inline-flex; align-items: center; height: 22px;
    padding: 0 8px; border-radius: 999px;
    background: var(--op-info-bg); color: var(--op-info-txt);
    font-size: 11px; font-weight: 600;
}

.op-plataforma-cartoes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 1rem 0;
}
.op-plataforma-cartao {
    padding: 16px 20px;
    box-sizing: border-box;
    min-width: 0;
}
.op-plataforma-cartao-rotulo {
    margin: 0; font-size: 13px; color: var(--op-cinza);
}
.op-plataforma-cartao-num {
    margin: 6px 0 0; font-size: 28px; font-weight: 700;
    line-height: 1.15; color: var(--op-texto);
    font-variant-numeric: tabular-nums;
}
.op-plataforma-cartao-sub {
    margin: 4px 0 0; font-size: 13px; color: var(--op-cinza);
}
.op-plataforma-secao { margin-top: 24px; }
.op-plataforma-secao > .op-grupo-titulo { margin: 0 0 16px 16px; }

.op-plataforma-linha { cursor: pointer; }
.op-plataforma-linha:focus { outline: 2px solid var(--op-foco); outline-offset: 2px; }
.op-plataforma-atraso { color: var(--op-erro-txt); }
.op-plataforma-bt-perigo {
    background: var(--op-erro-bg); color: var(--op-erro-txt);
    border: 0;
}
.op-plataforma-bt-perigo:hover {
    background: var(--op-erro-bg); color: var(--op-erro-txt); filter: brightness(0.96);
}
.op-plataforma-barra-seg { margin: 0.5rem 16px 0.75rem; }
.op-plataforma-barra-rotulo {
    display: flex; justify-content: space-between; font-size: 0.85rem;
    margin-bottom: 4px; color: var(--op-cinza);
}
.op-plataforma-atencao-linha {
    display: flex; align-items: center; gap: 12px; width: 100%;
}
.op-plataforma-atencao-miolo {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
}
.op-plataforma-atencao-miolo .op-grupo-nota { margin: 2px 0 0; }
.op-plataforma-selo-sem_acesso {
    background: var(--op-erro-bg); color: var(--op-erro-txt);
}
.op-plataforma-selo-convite {
    background: var(--op-alerta-bg); color: var(--op-alerta-txt);
}
.op-plataforma-selo-implantacao {
    background: var(--op-alerta-bg); color: var(--op-alerta-txt);
}
.op-plataforma-selo-sem_2fa,
.op-plataforma-selo-sem_admin {
    background: var(--op-info-bg); color: var(--op-info-txt);
}
.op-plataforma-selo-seg {
    background: var(--op-info-bg); color: var(--op-info-txt);
}

.op-plataforma-barra-filtros {
    display: flex; flex-wrap: wrap; gap: 12px;
    align-items: center; justify-content: space-between;
    margin: 0 0 1rem;
    max-width: 100%;
}
.op-plataforma-barra-filtros .op-segmentado {
    flex-wrap: wrap; max-width: 100%;
}
.op-plataforma-filtros-pilula {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.op-plataforma-filtros-pilula .op-pilula { gap: 6px; cursor: default; }
.op-plataforma-filtros-pilula select {
    border: 0; background: transparent; color: inherit;
    font: inherit; max-width: 12rem;
}
.op-plataforma-busca input {
    height: 2.1rem; min-width: 12rem; padding: 0 14px 0 14px;
    border-radius: 999px; border: 1px solid var(--op-borda-forte);
    background: var(--op-superficie); color: var(--op-texto);
    font-size: .85rem;
}
.op-plataforma-seg {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 28px; padding: 0 12px; border-radius: var(--op-raio-seg-bt);
    font-size: 13px; color: var(--op-texto); text-decoration: none;
}
.op-plataforma-seg.ativa {
    background: var(--op-superficie); font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.op-plataforma-cnpj {
    display: block; font-size: 12px; color: var(--op-cinza);
    margin: 2px 0 0; padding: 0; text-indent: 0;
}
.op-plataforma-imp {
    display: flex; align-items: center; gap: 8px;
}
.op-plataforma-imp-trilho {
    flex: 1 1 4rem; max-width: 6rem; height: 6px;
    border-radius: 999px; background: var(--op-preenchimento);
    overflow: hidden;
}
.op-plataforma-imp-preenche {
    display: block; height: 100%;
    background: var(--op-azul-bt); border-radius: 999px;
}
.op-plataforma-imp-ficha {
    margin: 0 16px 12px; max-width: none;
}
.op-plataforma-imp-ficha .op-plataforma-imp-trilho { max-width: none; }

.op-plataforma-ficha-duas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px; align-items: start;
    width: 100%;
}
@media (min-width: 992px) {
    .op-plataforma-ficha-duas {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}
.op-plataforma-dado {
    display: flex; justify-content: space-between; gap: 12px;
    align-items: baseline;
}
.op-plataforma-dado-val { color: var(--op-cinza); text-align: right; }
.op-plataforma-fich-selos { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.op-plataforma-usuario {
    display: flex; align-items: center; gap: 12px; width: 100%;
}
.op-plataforma-avatar {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--op-info-bg); color: var(--op-info-txt);
    font-size: 12px; font-weight: 600;
}
.op-plataforma-usuario-miolo { flex: 1 1 auto; min-width: 0; }
.op-plataforma-usuario-miolo .op-grupo-nota { margin: 2px 0 0; }
.op-plataforma-mod-off { opacity: .65; }
.op-plataforma-passo {
    display: flex; align-items: center; gap: 10px;
}
.op-plataforma-passo.feito { color: var(--op-cinza); }
.op-plataforma-passo-ok {
    color: var(--op-ok-txt); font-weight: 700; width: 1.2rem; text-align: center;
}
.op-plataforma-passo-vazio {
    width: 14px; height: 14px; border-radius: 50%;
    border: 1.5px solid var(--op-borda-forte); box-sizing: border-box;
}
.op-plataforma-aud {
    display: flex; align-items: baseline; gap: 12px; width: 100%;
}
.op-plataforma-aud-miolo { flex: 1 1 auto; min-width: 0; }
.op-plataforma-lista-miolo {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
}
.op-plataforma-lista-miolo .op-grupo-nota { margin: 2px 0 0; }

/* Quebra 992 px: no PC só tabela; no celular só lista. */
.op-conteudo .op-grupo-lista.op-plataforma-lista-movel { display: none !important; }
.op-plataforma-tabela { display: block; width: 100%; }

@media (max-width: 991.98px) {
    .op-plataforma-cartoes { grid-template-columns: 1fr 1fr; }
    .op-plataforma-ficha-duas { grid-template-columns: 1fr; }
    .op-plataforma-tabela { display: none !important; }
    .op-conteudo .op-grupo-lista.op-plataforma-lista-movel {
        display: block !important;
    }
    .op-plataforma-app .op-tabbar { display: none; }
    /* Gaveta do celular: mesma regra da casca da empresa. */
    html.op-plataforma .op-plataforma-lateral {
        position: fixed; top: 0; bottom: 0; left: 0;
        width: min(300px, 86vw); flex-basis: auto;
        z-index: 40; transform: translateX(-105%);
        transition: transform .2s ease;
    }
    html.op-plataforma[data-gaveta="1"] .op-plataforma-lateral {
        transform: translateX(0);
    }
}