/* ============================================================================
UI ÓPTAGO: Design System v1.2.2
CSS puro, sem dependências. Tema escuro por padrão.
Para tema claro: adicione a classe "light" ao (o ui-optago.js
gerencia isso automaticamente via localStorage).
Convenção de nomes: todas as classes usam o prefixo "op-".
Estados usam "is-" (is-open, is-collapsed, is-active, is-error...).
============================================================================ */
/* ----------------------------------------------------------------------------
1. TOKENS (CSS Custom Properties)
---------------------------------------------------------------------------- */
:root {
/* Marca */
--op-accent: #C0FF6B;
--op-accent-hover: #AEF552;
--op-accent-ink: #000000; /* texto sobre o verde-lima */
--op-cyan: #6BE0FF; /* cor secundária da marca: glow e detalhes */
--op-cyan-hover: #8FE9FF;
--op-cyan-ink: #000000; /* texto sobre o ciano */
/* Cores semânticas */
--op-info: #3B82F6;
--op-success: #10B981;
--op-warning: #F59E0B;
--op-danger: #EF4444;
/* Superfícies: TEMA ESCURO (padrão) */
--op-bg: #050505;
--op-panel: #0A0A0A;
--op-panel-2: #111111;
--op-panel-3: #1A1A1A;
--op-border: #262626;
--op-border-2: #333333;
--op-text: #D5D5D5;
--op-strong: #FFFFFF;
--op-muted: #656565;
/* Botão primário (no escuro = verde-lima; no claro = quase-preto) */
--op-primary: var(--op-accent);
--op-primary-hover: var(--op-accent-hover);
--op-primary-ink: #000000;
/* Tipografia */
--op-font-display: "Chakra Petch", system-ui, sans-serif;
--op-font-sans: "Inter", system-ui, sans-serif;
--op-font-mono: "JetBrains Mono", ui-monospace, monospace;
/* Forma */
--op-radius-sm: 8px;
--op-radius: 12px;
--op-radius-lg: 16px;
--op-oct: polygon(29% 0%, 71% 0%, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0% 71%, 0% 29%);
/* Sombras */
--op-shadow-sm: 0 1px 2px rgba(0,0,0,.3);
--op-shadow: 0 8px 24px -8px rgba(0,0,0,.5);
--op-shadow-lg: 0 25px 50px -12px rgba(0,0,0,.6);
--op-shadow-side: -16px 0 40px rgba(0,0,0,.35);
--op-glow: 0 0 20px rgba(192,255,107,.35);
--op-glow-danger: 0 0 20px rgba(239,68,68,.35);
--op-glow-info: 0 0 20px rgba(59,130,246,.35);
--op-glow-cyan: 0 0 20px rgba(107,224,255,.35);
/* Layout fixo */
--op-header-h: 56px;
--op-footer-h: 42px;
--op-sidebar-w: 260px;
--op-sidebar-w-collapsed: 4.5rem;
/* Transições */
--op-ease: cubic-bezier(.4, 0, .2, 1);
--op-spring: cubic-bezier(.16, 1, .3, 1);
color-scheme: dark;
}
/* Superfícies: TEMA CLARO */
html.light {
--op-bg: #DDE3EA;
--op-panel: #EDF1F5;
--op-panel-2: #D5DCE4;
--op-panel-3: #CDD5DE;
--op-border: #D6DEE7;
--op-border-2: #BDC9D8;
--op-text: #334155;
--op-strong: #0F172A;
--op-muted: #64748B;
--op-primary: #0F172A;
--op-primary-hover: #1E293B;
--op-primary-ink: #FFFFFF;
--op-shadow-sm: 0 1px 3px rgba(15,23,42,.08);
--op-shadow: 0 10px 30px -10px rgba(15,23,42,.16);
--op-shadow-lg: 0 30px 60px -15px rgba(15,23,42,.28);
--op-shadow-side: -16px 0 40px rgba(15,23,42,.10);
--op-glow: 0 4px 14px rgba(15,23,42,.25);
color-scheme: light;
}
/* Fundo do tema claro: gradiente suave com um toque de verde-lima no topo.
Baseado em --op-bg (não em hex fixo) e propositalmente mais escuro que
--op-panel, pra telas (fundo) não ficarem parecidas com cards (painel). */
html.light body {
background:
radial-gradient(900px 420px at 75% -10%, rgba(192,255,107,.20) 0%, transparent 60%),
radial-gradient(700px 380px at 10% 110%, rgba(192,255,107,.10) 0%, transparent 60%),
linear-gradient(180deg, var(--op-bg) 0%, color-mix(in srgb, var(--op-bg) 85%, black) 100%);
}
/* ----------------------------------------------------------------------------
2. RESET & BASE
---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--op-font-sans);
font-size: 14px;
line-height: 1.6;
background: var(--op-bg);
color: var(--op-text);
-webkit-font-smoothing: antialiased;
transition: background-color .3s ease, color .3s ease;
}
::selection { background: var(--op-accent); color: #000; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--op-font-display);
font-weight: 700;
color: var(--op-strong);
line-height: 1.2;
margin: 0 0 .5em;
letter-spacing: -.02em;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 1em; }
a { color: var(--op-accent); }
html.light a:not(.op-btn) {
color: #3F6212;
}
code, kbd { font-family: var(--op-font-mono); font-size: .85em; }
kbd {
padding: 2px 7px;
background: var(--op-panel-3);
border: 1px solid var(--op-border-2);
border-bottom-width: 2px;
border-radius: 6px;
color: var(--op-strong);
font-weight: 600;
}
hr, .op-divider {
border: 0;
height: 1px;
background: var(--op-border);
margin: 1.5rem 0;
}
:focus-visible {
outline: 2px solid color-mix(in srgb, var(--op-accent) 80%, transparent);
outline-offset: 2px;
border-radius: 4px;
}
html.light :focus-visible {
outline-color: color-mix(in srgb, var(--op-info) 70%, transparent);
}
/* Scrollbar própria (Chromium/WebKit: Chrome, Edge, Safari, Opera) - fina,
trilho invisível, "polegar" em pílula que fica sutil em repouso e assume
a cor de marca (verde-lima) ao passar o mouse, pra ter identidade própria
em vez do scrollbar cinza genérico do navegador. `border: transparent` +
`background-clip: padding-box` (em vez de pintar a borda com --op-bg
direto) deixa o "respiro" ao redor do polegar de verdade transparente,
então funciona igual dentro de qualquer container (modal, card, sidebar)
mesmo quando o fundo por trás não é exatamente --op-bg. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--op-border-2);
border-radius: 10px;
border: 2px solid transparent;
background-clip: padding-box;
transition: background-color .15s var(--op-ease);
}
::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, var(--op-accent) 55%, var(--op-muted));
background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }
/* Firefox: única customização que o navegador permite (sem raio/hover
próprios) - ainda assim fica fino e na paleta certa em vez do padrão do
SO. `*` (não só html/body) porque scrollbar-width/-color NÃO herdam pros
containers internos com overflow próprio (.op-main, .op-sidebar-nav,
modais, tabelas com scroll horizontal etc.) do mesmo jeito que o
::-webkit-scrollbar acima já cobre globalmente. */
* { scrollbar-width: thin; scrollbar-color: var(--op-border-2) transparent; }
/* Octógono da marca */
.op-oct { -webkit-clip-path: var(--op-oct); clip-path: var(--op-oct); }
/* Fundo pontilhado decorativo */
.op-bg-pattern {
background-image: radial-gradient(var(--op-border) 1.5px, transparent 1.5px);
background-size: 32px 32px;
}
/* ----------------------------------------------------------------------------
3. LAYOUT: app shell com header, footer e sidebar (direita) fixos.
Somente .op-main rola.
...
---------------------------------------------------------------------------- */
/* overflow:hidden só em .op-app (= ) não basta pra impedir scroll de
verdade: sem restrição também em , o navegador ainda enxerga o
tamanho de layout NÃO cortado do documento (scrollWidth/scrollHeight de
`document.documentElement`) - isso inclui a .op-sidebar mobile fora da
tela (position:fixed + translateX(100%), que desloca sua caixa pra fora
do viewport mas ainda soma no tamanho de layout). Resultado: um espaço
"fantasma" que normalmente fica invisível mas pode ficar alcançável (scroll
por toque em iOS Safari, roda do mouse em alguns casos, etc), revelando um
vão em branco abaixo do rodapé com o cabeçalho fora de vista. */
html { overflow: hidden; overflow: clip; }
.op-app {
display: flex;
height: 100vh;
height: 100dvh;
overflow: hidden;
overflow: clip;
}
.op-app-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
position: relative;
/* Sem overflow:clip aqui (era o comportamento antigo): isso cortava
qualquer coisa que vazasse do header/footer, incluindo tooltips
(data-op-tip) de botões perto da sidebar — a borda direita da
.op-app-body é exatamente onde a sidebar começa. A contenção do
.op-glow (pra não tornar o documento rolável) agora é feita dentro
do .op-main, que é onde o glow realmente é usado. */
}
/* Header */
.op-header {
position: relative;
height: var(--op-header-h);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0 1.25rem;
border-bottom: 1px solid var(--op-border);
background: var(--op-panel);
box-shadow: 0 8px 24px -12px rgba(0,0,0,.5);
z-index: 30; /* precisa ficar abaixo da .op-sidebar (50) no mobile, pra o drawer cobrir o header ao abrir */
}
/* filete de brilho verde-lima sob o header */
.op-header::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 1px;
background: linear-gradient(90deg,
transparent 5%,
color-mix(in srgb, var(--op-accent) 55%, transparent) 50%,
transparent 95%);
pointer-events: none;
}
html.light .op-header { box-shadow: 0 8px 24px -14px rgba(15,23,42,.18); }
.op-header-group { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.op-header-divider { width: 1px; height: 20px; background: var(--op-border-2); }
/* Logo / marca */
.op-brand { display: flex; align-items: center; gap: .625rem; text-decoration: none; transition: opacity .2s; }
.op-brand:hover { opacity: .8; }
.op-brand-mark {
width: 32px; height: 32px;
background: var(--op-accent);
-webkit-clip-path: var(--op-oct); clip-path: var(--op-oct);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
html.light .op-brand-mark::after { background: var(--op-accent); }
.op-brand-name {
font-family: var(--op-font-display);
font-weight: 700;
font-size: 1.25rem;
color: var(--op-strong);
letter-spacing: .02em;
}
/* Conteúdo rolável */
.op-main {
flex: 1;
overflow-y: auto;
overflow-x: clip; /* contém .op-glow (evita que vaze e torne a página rolável) */
padding: 1.5rem;
scroll-behavior: smooth;
position: relative;
z-index: 1; /* mantém o conteúdo acima dos .op-glow do fundo */
}
@media (min-width: 1024px) { .op-main { padding: 1.75rem 2rem; } }
/* header/footer ficam acima da sidebar por padrão (55 > 50): evita que um
tooltip (data-op-tip) de um botão do header/footer fique preso no contexto
de empilhamento do header/footer e acabe renderizado atrás da sidebar,
mesmo com z-index nominal maior que o dela. Isso valia só a partir de
1024px antes, mas o mesmo corte acontecia em qualquer largura abaixo
disso enquanto a sidebar ainda não é o drawer mobile aberto — por isso
agora é incondicional. Quando a sidebar VIRA o drawer mobile (.is-open),
ela sobe pra 60 e volta a cobrir o header normalmente. */
.op-header, .op-footer { z-index: 55; }
/* 1100px é bom pra tela pequena/média (mantém linha de leitura curta), mas
sobra espaço em branco demais nas laterais em monitor grande. Alarga em
dois degraus pra telas maiores em vez de deixar fixo ou 100% fluido (que
deixaria tabelas/formulários exagerados numa tela ultra-wide). */
.op-container { max-width: 1100px; margin: 0 auto; }
@media (min-width: 1440px) { .op-container { max-width: 1320px; } }
@media (min-width: 1800px) { .op-container { max-width: 1600px; } }
/* Footer */
.op-footer {
height: var(--op-footer-h);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0 1.25rem;
border-top: 1px solid var(--op-border);
background: var(--op-panel);
font-family: var(--op-font-mono);
font-size: 11px;
color: var(--op-muted);
z-index: 30; /* mesmo motivo do .op-header */
}
/* ----------------------------------------------------------------------------
4. SIDEBAR (direita, colapsável)
---------------------------------------------------------------------------- */
/* Suprime a transição de width/transform só durante o carregamento inicial
da página (classe "op-preload" no , ver ui-optago.js) - o JS só
consegue aplicar o estado salvo (colapsada ou não) depois que este
elemento existir no DOM, e sem isso essa aplicação inicial ficaria
animada como se fosse um toggle manual do usuário. */
html.op-preload .op-sidebar { transition: none !important; }
.op-sidebar {
width: var(--op-sidebar-w);
flex-shrink: 0;
display: flex;
flex-direction: column;
background: var(--op-panel);
border-left: 1px solid var(--op-border);
box-shadow: var(--op-shadow-side);
transition: width .3s var(--op-ease), transform .3s var(--op-ease);
z-index: 50;
}
.op-sidebar-header {
height: var(--op-header-h);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
border-bottom: 1px solid var(--op-border);
}
.op-sidebar-nav {
flex: 1;
overflow-y: auto;
overflow-x: visible;
padding: 1rem .75rem;
display: flex;
flex-direction: column;
gap: .25rem;
}
.op-sidebar-label {
padding: 0 .75rem;
margin: .5rem 0;
font-family: var(--op-font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .2em;
color: var(--op-muted);
white-space: nowrap;
}
.op-nav-item {
position: relative;
display: flex;
align-items: center;
gap: .75rem;
padding: .625rem .75rem;
/* Borda sutil sempre visível (não só transparent até o hover) - mesma
lógica do ajuste do .op-btn-ghost: sem contorno nenhum em repouso, o
item fica sem nenhuma affordance de que é clicável antes de passar o
mouse. Mesma --op-border-2 usada no :hover (--op-border sozinha ficou
fraca demais em repouso); a diferença de :hover continua vindo do
background com tingimento, não da borda. */
border: 1px solid var(--op-border-2);
border-radius: var(--op-radius);
color: var(--op-text);
text-decoration: none;
font-weight: 600;
font-size: .875rem;
white-space: nowrap;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.op-nav-item i { font-size: 1.25rem; flex-shrink: 0; }
html.light .op-nav-item { color: #000000; }
.op-nav-item:hover {
background: color-mix(in srgb, var(--op-strong) 6%, transparent);
border-color: var(--op-border-2);
color: var(--op-strong);
}
html.light .op-nav-item:hover { color: #000000; }
/* Item ativo: pílula preenchida com a cor de marca (em vez da barra na borda) */
.op-nav-item.is-active {
background: var(--op-accent);
border-color: var(--op-accent);
color: var(--op-accent-ink);
}
.op-nav-item.is-active i { color: var(--op-accent-ink); }
/* Estado colapsado: só ícones */
.op-sidebar.is-collapsed { width: var(--op-sidebar-w-collapsed); }
.op-sidebar.is-collapsed .op-nav-text,
.op-sidebar.is-collapsed .op-sidebar-label,
.op-sidebar.is-collapsed .op-sidebar-header-text { display: none; }
.op-sidebar.is-collapsed .op-nav-item { justify-content: center; padding: .625rem; }
/* Tooltip do item (aparece à esquerda quando colapsada).
position:fixed: o JS calcula top/right no hover, pois o overflow-y:auto
da nav cortaria um tooltip posicionado com absolute. */
.op-nav-tooltip {
position: fixed;
translate: 0 -50%;
background: var(--op-strong);
color: var(--op-bg);
font-family: var(--op-font-mono);
font-size: 11px;
font-weight: 700;
padding: .375rem .75rem;
border-radius: var(--op-radius-sm);
box-shadow: var(--op-shadow);
white-space: nowrap;
visibility: hidden;
opacity: 0;
transform: translateX(-8px) scale(.95);
transform-origin: right center;
transition: all .2s var(--op-spring);
pointer-events: none;
z-index: 60;
}
.op-nav-tooltip::after {
content: "";
position: absolute;
left: 100%;
top: 50%;
translate: 0 -50%;
border: 5px solid transparent;
border-left-color: var(--op-strong);
}
.op-sidebar.is-collapsed .op-nav-item:hover .op-nav-tooltip {
visibility: visible;
opacity: 1;
transform: translateX(0) scale(1);
}
/* Sidebar mobile: vira drawer sobreposto */
.op-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.6);
backdrop-filter: blur(4px);
z-index: 40;
opacity: 0;
visibility: hidden;
transition: opacity .3s ease, visibility .3s ease;
}
.op-overlay.is-open { opacity: 1; visibility: visible; }
@media (max-width: 1023px) {
.op-sidebar {
position: fixed;
top: 0; right: 0; bottom: 0;
transform: translateX(100%);
box-shadow: var(--op-shadow-lg);
}
.op-sidebar.is-open { transform: translateX(0); z-index: 60; }
.op-sidebar.is-collapsed { width: var(--op-sidebar-w); } /* colapso só no desktop */
.op-sidebar.is-collapsed .op-nav-text,
.op-sidebar.is-collapsed .op-sidebar-label,
.op-sidebar.is-collapsed .op-sidebar-header-text { display: block; }
.op-sidebar.is-collapsed .op-nav-item { justify-content: flex-start; padding: .625rem .75rem; }
}
/* ----------------------------------------------------------------------------
5. BOTÕES
---------------------------------------------------------------------------- */
.op-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .625rem 1.25rem;
border: 1px solid transparent;
border-radius: var(--op-radius-sm);
font-family: var(--op-font-mono);
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
text-decoration: none;
cursor: pointer;
user-select: none;
white-space: nowrap;
transition: all .2s var(--op-ease);
}
.op-btn i { font-size: 1rem; }
.op-btn:hover { transform: translateY(-2px); }
.op-btn:active { transform: scale(.96); }
.op-btn:disabled, .op-btn.is-disabled {
opacity: .45;
pointer-events: none;
}
/* Variantes sólidas */
/* Botão primário: sempre verde-lima (marca), igual nos dois temas. */
.op-btn-primary {
background: var(--op-accent);
color: var(--op-accent-ink);
box-shadow: 0 4px 14px color-mix(in srgb, var(--op-accent) 30%, transparent);
}
.op-btn-primary:hover { background: var(--op-accent-hover); box-shadow: var(--op-glow); }
.op-btn-success { background: var(--op-success); color: #fff; box-shadow: 0 4px 14px rgba(16,185,129,.25); }
.op-btn-success:hover { background: color-mix(in srgb, var(--op-success) 85%, #000); box-shadow: 0 0 20px rgba(16,185,129,.35); }
.op-btn-danger { background: var(--op-danger); color: #fff; box-shadow: 0 4px 14px rgba(239,68,68,.25); }
.op-btn-danger:hover { background: color-mix(in srgb, var(--op-danger) 85%, #000); box-shadow: var(--op-glow-danger); }
.op-btn-warning { background: var(--op-warning); color: #000; box-shadow: 0 4px 14px rgba(245,158,11,.25); }
.op-btn-warning:hover { background: color-mix(in srgb, var(--op-warning) 85%, #000); box-shadow: 0 0 20px rgba(245,158,11,.35); }
.op-btn-info { background: var(--op-info); color: #fff; box-shadow: 0 4px 14px rgba(59,130,246,.25); }
.op-btn-info:hover { background: color-mix(in srgb, var(--op-info) 85%, #000); box-shadow: var(--op-glow-info); }
.op-btn-cyan { background: var(--op-cyan); color: var(--op-cyan-ink); box-shadow: 0 4px 14px rgba(107,224,255,.25); }
.op-btn-cyan:hover { background: var(--op-cyan-hover); box-shadow: var(--op-glow-cyan); }
/* Secundário: cor de marca Cinza-chumbo Apoio (#656565), igual nos dois temas. */
.op-btn-secondary {
background: #656565;
border-color: #656565;
color: #FFFFFF;
}
.op-btn-secondary:hover { background: #767676; border-color: #767676; }
/* Ghost (fundo suave) */
/* Sempre com um contorno sutil (--op-border-2) - sem cor de fundo nenhuma,
um .op-btn-ghost fica praticamente invisível sobre fundos claros/neutros,
sem nenhuma affordance de que é clicável até passar o mouse. */
.op-btn-ghost { background: transparent; color: var(--op-text); border-color: var(--op-border-2); }
.op-btn-ghost:hover { background: color-mix(in srgb, var(--op-strong) 7%, transparent); color: var(--op-strong); }
.op-btn-ghost-info { background: color-mix(in srgb, var(--op-info) 12%, transparent); color: color-mix(in srgb, var(--op-info) 70%, var(--op-strong)); }
.op-btn-ghost-info:hover { background: color-mix(in srgb, var(--op-info) 22%, transparent); }
.op-btn-ghost-success { background: color-mix(in srgb, var(--op-success) 12%, transparent); color: color-mix(in srgb, var(--op-success) 70%, var(--op-strong)); }
.op-btn-ghost-success:hover { background: color-mix(in srgb, var(--op-success) 22%, transparent); }
.op-btn-ghost-danger { background: color-mix(in srgb, var(--op-danger) 12%, transparent); color: color-mix(in srgb, var(--op-danger) 70%, var(--op-strong)); }
.op-btn-ghost-danger:hover { background: color-mix(in srgb, var(--op-danger) 22%, transparent); }
.op-btn-ghost-warning { background: color-mix(in srgb, var(--op-warning) 14%, transparent); color: color-mix(in srgb, var(--op-warning) 70%, var(--op-strong)); }
.op-btn-ghost-warning:hover { background: color-mix(in srgb, var(--op-warning) 24%, transparent); }
.op-btn-ghost-cyan { background: color-mix(in srgb, var(--op-cyan) 12%, transparent); color: color-mix(in srgb, var(--op-cyan) 70%, var(--op-strong)); }
.op-btn-ghost-cyan:hover { background: color-mix(in srgb, var(--op-cyan) 22%, transparent); }
html.light .op-btn-ghost-cyan { color: #0E7490; }
/* Tamanhos */
.op-btn-sm { padding: .375rem .875rem; font-size: .6875rem; }
.op-btn-lg { padding: .875rem 1.75rem; font-size: .8125rem; }
/* Somente ícone */
.op-btn-icon {
padding: .625rem;
aspect-ratio: 1;
background: var(--op-panel-2);
border-color: var(--op-border);
color: var(--op-muted);
}
.op-btn-icon:hover { color: var(--op-strong); background: var(--op-panel-3); }
.op-btn-icon i { font-size: 1.125rem; }
/* Loading */
.op-btn.is-loading { pointer-events: none; opacity: .75; }
.op-btn.is-loading::before {
content: "";
width: 14px; height: 14px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: op-spin .7s linear infinite;
}
/* Grupo de botões */
.op-btn-group { display: inline-flex; }
.op-btn-group .op-btn { border-radius: 0; }
.op-btn-group .op-btn:hover { transform: none; }
.op-btn-group .op-btn:first-child { border-radius: var(--op-radius-sm) 0 0 var(--op-radius-sm); }
.op-btn-group .op-btn:last-child { border-radius: 0 var(--op-radius-sm) var(--op-radius-sm) 0; }
.op-btn-group .op-btn-secondary + .op-btn-secondary { border-left-width: 0; }
/* ----------------------------------------------------------------------------
6. BADGES
---------------------------------------------------------------------------- */
.op-badge {
display: inline-flex;
align-items: center;
gap: .375rem;
padding: .1875rem .625rem;
border: 1px solid var(--op-border);
border-radius: 6px;
background: var(--op-panel-3);
color: var(--op-text);
font-family: var(--op-font-mono);
font-size: .6875rem;
font-weight: 700;
line-height: 1.6;
white-space: nowrap;
}
.op-badge-pill { border-radius: 999px; }
.op-badge-brand {
background: color-mix(in srgb, var(--op-accent) 10%, transparent);
border-color: color-mix(in srgb, var(--op-accent) 25%, transparent);
color: var(--op-accent);
}
html.light .op-badge-brand { color: #3F6212; background: #F3FFE0; border-color: #D4F7A5; }
.op-badge-info { background: color-mix(in srgb, var(--op-info) 14%, transparent); border-color: color-mix(in srgb, var(--op-info) 30%, transparent); color: color-mix(in srgb, var(--op-info) 65%, var(--op-strong)); }
.op-badge-success { background: color-mix(in srgb, var(--op-success) 14%, transparent); border-color: color-mix(in srgb, var(--op-success) 30%, transparent); color: color-mix(in srgb, var(--op-success) 65%, var(--op-strong)); }
.op-badge-warning { background: color-mix(in srgb, var(--op-warning) 14%, transparent); border-color: color-mix(in srgb, var(--op-warning) 30%, transparent); color: color-mix(in srgb, var(--op-warning) 65%, var(--op-strong)); }
.op-badge-danger { background: color-mix(in srgb, var(--op-danger) 14%, transparent); border-color: color-mix(in srgb, var(--op-danger) 30%, transparent); color: color-mix(in srgb, var(--op-danger) 65%, var(--op-strong)); }
.op-badge-cyan { background: color-mix(in srgb, var(--op-cyan) 14%, transparent); border-color: color-mix(in srgb, var(--op-cyan) 30%, transparent); color: color-mix(in srgb, var(--op-cyan) 65%, var(--op-strong)); }
html.light .op-badge-cyan { color: #0E7490; }
/* Pontinho de status (com pulso opcional) */
.op-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.op-dot-pulse { animation: op-pulse 1.6s ease-in-out infinite; }
/* ----------------------------------------------------------------------------
7. ALERTAS
---------------------------------------------------------------------------- */
.op-alert {
display: flex;
gap: .75rem;
padding: 1rem;
border: 1px solid var(--op-border);
border-radius: var(--op-radius);
background: var(--op-panel-2);
}
.op-alert > i { font-size: 1.25rem; flex-shrink: 0; margin-top: .125rem; }
.op-alert-title { font-family: var(--op-font-sans); font-weight: 700; font-size: .875rem; margin: 0 0 .125rem; }
.op-alert-text { font-size: .8125rem; margin: 0; opacity: .92; }
.op-alert-close {
margin-left: auto;
background: none; border: 0; cursor: pointer;
color: inherit; opacity: .6;
font-size: 1rem;
padding: .25rem;
border-radius: 6px;
transition: opacity .2s;
align-self: flex-start;
}
.op-alert-close:hover { opacity: 1; }
.op-alert-info { background: color-mix(in srgb, var(--op-info) 28%, var(--op-panel-2)); border-color: color-mix(in srgb, var(--op-info) 45%, transparent); }
.op-alert-info > i, .op-alert-info .op-alert-title { color: color-mix(in srgb, var(--op-info) 65%, var(--op-strong)); }
.op-alert-success { background: color-mix(in srgb, var(--op-success) 28%, var(--op-panel-2)); border-color: color-mix(in srgb, var(--op-success) 45%, transparent); }
.op-alert-success > i, .op-alert-success .op-alert-title { color: color-mix(in srgb, var(--op-success) 65%, var(--op-strong)); }
.op-alert-warning { background: color-mix(in srgb, var(--op-warning) 28%, var(--op-panel-2)); border-color: color-mix(in srgb, var(--op-warning) 45%, transparent); }
.op-alert-warning > i, .op-alert-warning .op-alert-title { color: color-mix(in srgb, var(--op-warning) 65%, var(--op-strong)); }
.op-alert-danger { background: color-mix(in srgb, var(--op-danger) 28%, var(--op-panel-2)); border-color: color-mix(in srgb, var(--op-danger) 45%, transparent); }
.op-alert-danger > i, .op-alert-danger .op-alert-title { color: color-mix(in srgb, var(--op-danger) 65%, var(--op-strong)); }
/* Modo claro: fundo mais saturado e opaco (misturado com --op-panel-2 em vez de
transparent, senão a cor de fundo da página vaza e o alerta fica "aguado") e
texto/ícone numa variante mais escura da cor semântica (em vez do tom vivo,
que perde contraste em fundo claro). Pedido explícito de cor mais forte no
claro (2026-08-14): percentuais aumentados de 34/55/70% pra 46/68/78%. */
html.light .op-alert-info { background: color-mix(in srgb, var(--op-info) 46%, var(--op-panel-2)); border-color: color-mix(in srgb, var(--op-info) 68%, transparent); }
html.light .op-alert-info > i, html.light .op-alert-info .op-alert-title { color: color-mix(in srgb, var(--op-info) 78%, black); }
html.light .op-alert-success { background: color-mix(in srgb, var(--op-success) 46%, var(--op-panel-2)); border-color: color-mix(in srgb, var(--op-success) 68%, transparent); }
html.light .op-alert-success > i, html.light .op-alert-success .op-alert-title { color: color-mix(in srgb, var(--op-success) 78%, black); }
html.light .op-alert-warning { background: color-mix(in srgb, var(--op-warning) 46%, var(--op-panel-2)); border-color: color-mix(in srgb, var(--op-warning) 68%, transparent); }
html.light .op-alert-warning > i, html.light .op-alert-warning .op-alert-title { color: color-mix(in srgb, var(--op-warning) 78%, black); }
html.light .op-alert-danger { background: color-mix(in srgb, var(--op-danger) 46%, var(--op-panel-2)); border-color: color-mix(in srgb, var(--op-danger) 68%, transparent); }
html.light .op-alert-danger > i, html.light .op-alert-danger .op-alert-title { color: color-mix(in srgb, var(--op-danger) 78%, black); }
/* ----------------------------------------------------------------------------
8. FORMULÁRIOS
---------------------------------------------------------------------------- */
.op-field { display: flex; flex-direction: column; gap: .375rem; }
.op-label {
font-family: var(--op-font-mono);
font-size: .6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--op-text);
}
.op-label .req { color: var(--op-danger); }
.op-help { font-size: .75rem; color: var(--op-muted); margin: 0; }
.op-help.is-error { color: var(--op-danger); }
.op-help.is-success { color: var(--op-success); }
.op-input, .op-select, .op-textarea {
width: 100%;
padding: .625rem .875rem;
background: var(--op-panel-2);
border: 1px solid var(--op-border-2);
border-radius: var(--op-radius-sm);
color: var(--op-strong);
font-family: var(--op-font-sans);
font-size: .875rem;
transition: border-color .2s, box-shadow .2s, background .2s;
}
.op-input::placeholder, .op-textarea::placeholder { color: var(--op-muted); }
.op-input:focus, .op-select:focus, .op-textarea:focus {
outline: none;
border-color: var(--op-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--op-accent) 20%, transparent);
}
html.light .op-input:focus, html.light .op-select:focus, html.light .op-textarea:focus {
border-color: var(--op-info);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--op-info) 15%, transparent);
}
.op-input:disabled, .op-select:disabled, .op-textarea:disabled { opacity: .5; cursor: not-allowed; }
.op-textarea { resize: vertical; min-height: 90px; }
.op-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 256 256' fill='%23656565'%3E%3Cpath d='M213.7 101.7l-80 80a8.2 8.2 0 0 1-11.4 0l-80-80a8.1 8.1 0 0 1 11.4-11.4L128 164.7l74.3-74.4a8.1 8.1 0 0 1 11.4 11.4Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .875rem center;
padding-right: 2.5rem;
cursor: pointer;
}
/* Tamanhos: o padrão acima (sem modificador) é o tamanho normal.
op-input-xs < op-input-sm < (normal) < op-input-lg */
.op-input-xs, .op-select-xs, .op-textarea-xs {
padding: .3125rem .625rem;
font-size: .75rem;
border-radius: 6px;
}
.op-select-xs { padding-right: 1.875rem; background-position: right .625rem center; background-size: 10px; }
.op-input-sm, .op-select-sm, .op-textarea-sm {
padding: .5rem .75rem;
font-size: .8125rem;
}
.op-select-sm { padding-right: 2.125rem; background-position: right .75rem center; }
.op-input-lg, .op-select-lg, .op-textarea-lg {
padding: .875rem 1.125rem;
font-size: 1rem;
}
.op-select-lg { padding-right: 2.75rem; background-position: right 1rem center; background-size: 14px; }
/* Estados de validação */
.op-input.is-error, .op-select.is-error, .op-textarea.is-error {
border-color: var(--op-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--op-danger) 15%, transparent);
}
.op-input.is-success, .op-select.is-success, .op-textarea.is-success {
border-color: var(--op-success);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--op-success) 15%, transparent);
}
/* Input com ícone */
.op-input-icon { position: relative; }
.op-input-icon > i {
position: absolute;
left: .875rem;
top: 50%;
translate: 0 -50%;
color: var(--op-muted);
font-size: 1.125rem;
pointer-events: none;
}
.op-input-icon .op-input { padding-left: 2.625rem; }
/* Botão de mostrar/ocultar senha: envolva o input com [data-op-reveal] e
adicione um