/* ============================================================================
UI ÓPTAGO — Design System v1.0.1
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 */
/* 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);
/* 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: #EEF2F7;
--op-panel: #FFFFFF;
--op-panel-2: #F6F8FB;
--op-panel-3: #EDF1F6;
--op-border: #DFE6EE;
--op-border-2: #C6D2DF;
--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 */
html.light body {
background:
radial-gradient(900px 420px at 75% -10%, rgba(192,255,107,.30) 0%, transparent 60%),
radial-gradient(700px 380px at 10% 110%, rgba(192,255,107,.14) 0%, transparent 60%),
linear-gradient(180deg, #F2F5F9 0%, #E9EEF5 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 { 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 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--op-border);
border-radius: 10px;
border: 2px solid var(--op-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--op-muted); }
/* 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.
...
---------------------------------------------------------------------------- */
.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;
/* "clip" impede que .op-glow (ou qualquer filho absoluto) vaze para fora e
torne o documento rolável — sem isso, clicar em âncoras rola o viewport
e esconde o header. Nota: overflow no é propagado ao viewport
pelo navegador, então o clip do .op-app sozinho não resolve. */
overflow: clip;
}
/* 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: color-mix(in srgb, var(--op-panel) 85%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 8px 24px -12px rgba(0,0,0,.5);
z-index: 30;
}
/* 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; }
.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;
padding: 2rem 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: 2.5rem; } }
.op-container { max-width: 1100px; margin: 0 auto; }
/* 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;
}
/* ----------------------------------------------------------------------------
4. SIDEBAR (direita, colapsável)
---------------------------------------------------------------------------- */
.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;
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;
}
.op-nav-item i { font-size: 1.25rem; flex-shrink: 0; }
.op-nav-item:hover {
background: color-mix(in srgb, var(--op-strong) 6%, transparent);
color: var(--op-strong);
}
.op-nav-item.is-active {
background: color-mix(in srgb, var(--op-accent) 12%, transparent);
color: var(--op-strong);
box-shadow: inset -3px 0 0 var(--op-accent);
}
html.light .op-nav-item.is-active { box-shadow: inset -3px 0 0 #84CC16; }
.op-nav-item.is-active i { color: var(--op-accent); }
html.light .op-nav-item.is-active i { color: #3F6212; }
/* 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-left: 0; padding-right: 0; }
/* 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); }
.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 */
.op-btn-primary {
background: var(--op-primary);
color: var(--op-primary-ink);
box-shadow: 0 4px 14px color-mix(in srgb, var(--op-primary) 30%, transparent);
}
.op-btn-primary:hover { background: var(--op-primary-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); }
/* Secundário (outline) */
.op-btn-secondary {
background: var(--op-panel-2);
border-color: var(--op-border-2);
color: var(--op-text);
}
.op-btn-secondary:hover { background: var(--op-panel-3); color: var(--op-strong); }
/* Ghost (fundo suave) */
.op-btn-ghost { background: transparent; color: var(--op-text); }
.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); }
/* 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)); }
/* 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: .85; }
.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) 10%, transparent); border-color: color-mix(in srgb, var(--op-info) 25%, transparent); }
.op-alert-info > i, .op-alert-info .op-alert-title { color: color-mix(in srgb, var(--op-info) 60%, var(--op-strong)); }
.op-alert-success { background: color-mix(in srgb, var(--op-success) 10%, transparent); border-color: color-mix(in srgb, var(--op-success) 25%, transparent); }
.op-alert-success > i, .op-alert-success .op-alert-title { color: color-mix(in srgb, var(--op-success) 60%, var(--op-strong)); }
.op-alert-warning { background: color-mix(in srgb, var(--op-warning) 10%, transparent); border-color: color-mix(in srgb, var(--op-warning) 25%, transparent); }
.op-alert-warning > i, .op-alert-warning .op-alert-title { color: color-mix(in srgb, var(--op-warning) 60%, var(--op-strong)); }
.op-alert-danger { background: color-mix(in srgb, var(--op-danger) 10%, transparent); border-color: color-mix(in srgb, var(--op-danger) 25%, transparent); }
.op-alert-danger > i, .op-alert-danger .op-alert-title { color: color-mix(in srgb, var(--op-danger) 60%, var(--op-strong)); }
/* ----------------------------------------------------------------------------
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-muted);
}
.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;
}
/* 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; }
/* Input group (prefixo/sufixo) */
.op-input-group { display: flex; }
.op-input-group .op-input { border-radius: 0; }
.op-input-group > :first-child { border-radius: var(--op-radius-sm) 0 0 var(--op-radius-sm); }
.op-input-group > :last-child { border-radius: 0 var(--op-radius-sm) var(--op-radius-sm) 0; }
.op-input-addon {
display: flex; align-items: center;
padding: 0 .875rem;
background: var(--op-panel-3);
border: 1px solid var(--op-border-2);
color: var(--op-muted);
font-family: var(--op-font-mono);
font-size: .75rem;
font-weight: 600;
white-space: nowrap;
}
.op-input-group .op-input-addon:first-child { border-right: 0; }
.op-input-group .op-input-addon:last-child { border-left: 0; }
/* Checkbox & Radio */
.op-check {
display: inline-flex;
align-items: center;
gap: .625rem;
cursor: pointer;
font-size: .875rem;
color: var(--op-text);
user-select: none;
}
.op-check input[type="checkbox"], .op-check input[type="radio"] {
appearance: none;
width: 18px; height: 18px;
margin: 0;
border: 1.5px solid var(--op-border-2);
background: var(--op-panel-2);
cursor: pointer;
transition: all .2s var(--op-ease);
flex-shrink: 0;
display: grid;
place-content: center;
}
.op-check input[type="checkbox"] { border-radius: 5px; }
.op-check input[type="radio"] { border-radius: 50%; }
.op-check input:checked {
background: var(--op-accent);
border-color: var(--op-accent);
}
html.light .op-check input:checked { background: var(--op-primary); border-color: var(--op-primary); }
.op-check input[type="checkbox"]:checked::before {
content: "";
width: 10px; height: 10px;
background: var(--op-accent-ink);
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
html.light .op-check input[type="checkbox"]:checked::before { background: #fff; }
.op-check input[type="radio"]:checked::before {
content: "";
width: 8px; height: 8px;
border-radius: 50%;
background: var(--op-accent-ink);
}
html.light .op-check input[type="radio"]:checked::before { background: #fff; }
.op-check input:disabled { opacity: .4; cursor: not-allowed; }
.op-check input:disabled + span { opacity: .4; }
/* Switch */
.op-switch {
display: inline-flex;
align-items: center;
gap: .625rem;
cursor: pointer;
font-size: .875rem;
user-select: none;
}
.op-switch input {
appearance: none;
width: 40px; height: 22px;
margin: 0;
border-radius: 999px;
background: var(--op-panel-3);
border: 1px solid var(--op-border-2);
position: relative;
cursor: pointer;
transition: background .25s var(--op-ease), border-color .25s;
flex-shrink: 0;
}
.op-switch input::before {
content: "";
position: absolute;
top: 2px; left: 2px;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--op-muted);
transition: all .25s var(--op-spring);
}
.op-switch input:checked {
background: var(--op-accent);
border-color: var(--op-accent);
}
html.light .op-switch input:checked { background: var(--op-primary); border-color: var(--op-primary); }
.op-switch input:checked::before {
left: 20px;
background: var(--op-accent-ink);
}
html.light .op-switch input:checked::before { background: #fff; }
/* Range */
.op-range {
appearance: none;
width: 100%;
height: 6px;
border-radius: 999px;
background: var(--op-panel-3);
border: 1px solid var(--op-border);
outline: none;
cursor: pointer;
}
.op-range::-webkit-slider-thumb {
appearance: none;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--op-accent);
border: 2px solid var(--op-bg);
box-shadow: var(--op-shadow-sm);
transition: transform .15s;
}
html.light .op-range::-webkit-slider-thumb { background: var(--op-primary); }
.op-range::-webkit-slider-thumb:hover { transform: scale(1.2); }
/* ----------------------------------------------------------------------------
9. TABELAS
---------------------------------------------------------------------------- */
.op-table-wrap {
overflow-x: auto;
border: 1px solid var(--op-border);
border-radius: var(--op-radius);
background: var(--op-panel);
box-shadow: var(--op-shadow);
}
.op-table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-size: .875rem;
}
.op-table thead tr {
background: var(--op-panel-2);
border-bottom: 1px solid var(--op-border);
}
.op-table th {
padding: .875rem 1.25rem;
font-family: var(--op-font-mono);
font-size: .6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .15em;
color: var(--op-muted);
white-space: nowrap;
}
.op-table td { padding: .875rem 1.25rem; }
.op-table tbody tr { border-bottom: 1px solid var(--op-border); transition: background .15s; }
.op-table tbody tr:last-child { border-bottom: 0; }
.op-table-hover tbody tr:hover { background: color-mix(in srgb, var(--op-strong) 4%, transparent); }
.op-table-striped tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--op-strong) 2.5%, transparent); }
/* ----------------------------------------------------------------------------
10. CARDS
---------------------------------------------------------------------------- */
.op-card {
background: var(--op-panel);
border: 1px solid var(--op-border);
border-radius: var(--op-radius-lg);
padding: 1.5rem;
box-shadow: var(--op-shadow);
transition: transform .25s var(--op-ease), box-shadow .25s, border-color .25s;
}
.op-card-hover:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--op-accent) 30%, var(--op-border));
box-shadow: var(--op-shadow-lg), 0 0 24px color-mix(in srgb, var(--op-accent) 8%, transparent);
}
.op-card-icon {
width: 48px; height: 48px;
border-radius: var(--op-radius);
background: var(--op-panel-3);
border: 1px solid var(--op-border-2);
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem;
color: var(--op-strong);
margin-bottom: 1rem;
transition: transform .25s var(--op-spring);
}
.op-card-hover:hover .op-card-icon { transform: scale(1.1); }
.op-card-title { font-size: 1.125rem; margin-bottom: .375rem; }
.op-card-text { font-size: .8125rem; color: var(--op-muted); line-height: 1.6; margin-bottom: 1rem; }
.op-card-link {
font-family: var(--op-font-mono);
font-size: .6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--op-accent);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: .375rem;
transition: gap .2s;
}
html.light .op-card-link { color: #3F6212; }
.op-card-link:hover { gap: .625rem; }
/* Card de estatística (KPI) */
.op-stat { display: flex; flex-direction: column; gap: .25rem; }
.op-stat-label {
font-family: var(--op-font-mono);
font-size: .6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--op-muted);
}
.op-stat-value {
font-family: var(--op-font-display);
font-size: 2rem;
font-weight: 700;
color: var(--op-strong);
line-height: 1.1;
}
.op-stat-delta {
font-family: var(--op-font-mono);
font-size: .75rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: .25rem;
}
.op-stat-delta.is-up { color: var(--op-success); }
.op-stat-delta.is-down { color: var(--op-danger); }
/* ----------------------------------------------------------------------------
11. AVATAR
---------------------------------------------------------------------------- */
.op-avatar {
width: 40px; height: 40px;
border-radius: 50%;
overflow: hidden;
background: var(--op-panel-3);
border: 1px solid var(--op-border-2);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--op-font-mono);
font-size: .75rem;
font-weight: 700;
color: var(--op-accent);
flex-shrink: 0;
}
html.light .op-avatar { color: #3F6212; }
.op-avatar img { width: 100%; height: 100%; object-fit: cover; }
.op-avatar-sm { width: 30px; height: 30px; font-size: .625rem; }
.op-avatar-lg { width: 56px; height: 56px; font-size: 1rem; }
.op-avatar-ring { border: 2px solid var(--op-accent); }
.op-avatar-group { display: inline-flex; }
.op-avatar-group .op-avatar { margin-left: -10px; border: 2px solid var(--op-panel); }
.op-avatar-group .op-avatar:first-child { margin-left: 0; }
/* ----------------------------------------------------------------------------
12. PROGRESSO, SPINNERS & SKELETON
---------------------------------------------------------------------------- */
.op-progress {
height: 10px;
background: var(--op-panel-3);
border: 1px solid var(--op-border);
border-radius: 999px;
overflow: hidden;
}
.op-progress-bar {
height: 100%;
background: var(--op-accent);
border-radius: 999px;
transition: width .6s var(--op-ease);
position: relative;
overflow: hidden;
}
html.light .op-progress-bar { background: var(--op-primary); }
.op-progress-bar.is-animated::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
animation: op-shimmer 1.6s ease-in-out infinite;
}
.op-progress-bar.is-info { background: var(--op-info); }
.op-progress-bar.is-success { background: var(--op-success); }
.op-progress-bar.is-warning { background: var(--op-warning); }
.op-progress-bar.is-danger { background: var(--op-danger); }
.op-progress-header {
display: flex;
justify-content: space-between;
margin-bottom: .5rem;
font-family: var(--op-font-mono);
font-size: .6875rem;
font-weight: 700;
}
.op-progress-header .lbl { color: var(--op-muted); text-transform: uppercase; letter-spacing: .1em; }
.op-progress-header .val { color: var(--op-strong); }
/* Spinner circular */
.op-spinner {
width: 24px; height: 24px;
border: 2.5px solid var(--op-border-2);
border-top-color: var(--op-accent);
border-radius: 50%;
animation: op-spin .7s linear infinite;
display: inline-block;
}
html.light .op-spinner { border-top-color: var(--op-primary); }
.op-spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.op-spinner-lg { width: 40px; height: 40px; border-width: 3px; }
/* Spinner de pontos */
.op-spinner-dots { display: inline-flex; gap: .375rem; }
.op-spinner-dots span {
width: 9px; height: 9px;
border-radius: 50%;
background: var(--op-accent);
animation: op-bounce 1s ease-in-out infinite;
}
html.light .op-spinner-dots span { background: var(--op-primary); }
.op-spinner-dots span:nth-child(2) { animation-delay: .15s; }
.op-spinner-dots span:nth-child(3) { animation-delay: .3s; }
/* Skeleton */
.op-skeleton {
background: var(--op-panel-3);
border-radius: var(--op-radius-sm);
position: relative;
overflow: hidden;
}
.op-skeleton::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--op-strong) 6%, transparent), transparent);
animation: op-shimmer 1.5s ease-in-out infinite;
}
.op-skeleton-text { height: 12px; margin-bottom: .625rem; }
.op-skeleton-circle { border-radius: 50%; }
/* ----------------------------------------------------------------------------
13. TABS
---------------------------------------------------------------------------- */
.op-tabs {
display: flex;
gap: .25rem;
border-bottom: 1px solid var(--op-border);
overflow-x: auto;
}
.op-tab {
padding: .625rem 1.125rem;
background: none;
border: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
color: var(--op-muted);
font-family: var(--op-font-mono);
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: .5rem;
white-space: nowrap;
transition: color .2s, border-color .2s;
}
.op-tab:hover { color: var(--op-text); }
.op-tab.is-active {
color: var(--op-strong);
border-bottom-color: var(--op-accent);
}
html.light .op-tab.is-active { border-bottom-color: var(--op-primary); }
.op-tab-panel { display: none; padding: 1.25rem 0; }
.op-tab-panel.is-active { display: block; animation: op-fade-in .25s ease; }
/* Tabs estilo "pill" */
.op-tabs-pills {
display: inline-flex;
gap: .25rem;
padding: .25rem;
background: var(--op-panel-2);
border: 1px solid var(--op-border);
border-radius: var(--op-radius);
box-shadow: var(--op-shadow-sm);
}
.op-tabs-pills .op-tab {
border: 0;
margin: 0;
border-radius: var(--op-radius-sm);
padding: .5rem 1rem;
}
.op-tabs-pills .op-tab.is-active {
background: var(--op-accent);
color: var(--op-accent-ink);
}
html.light .op-tabs-pills .op-tab.is-active { background: var(--op-primary); color: var(--op-primary-ink); }
/* ----------------------------------------------------------------------------
14. ACCORDION (usa nativo)
---------------------------------------------------------------------------- */
.op-accordion {
border: 1px solid var(--op-border);
border-radius: var(--op-radius);
overflow: hidden;
background: var(--op-panel);
box-shadow: var(--op-shadow);
}
.op-accordion details { border-bottom: 1px solid var(--op-border); }
.op-accordion details:last-child { border-bottom: 0; }
.op-accordion summary {
padding: 1rem 1.25rem;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
font-weight: 700;
font-size: .875rem;
color: var(--op-strong);
transition: background .2s;
}
.op-accordion summary::-webkit-details-marker { display: none; }
.op-accordion summary::after {
content: "";
width: 8px; height: 8px;
border-right: 2px solid var(--op-muted);
border-bottom: 2px solid var(--op-muted);
transform: rotate(45deg);
transition: transform .25s var(--op-ease);
flex-shrink: 0;
}
.op-accordion details[open] summary::after { transform: rotate(-135deg); }
.op-accordion summary:hover { background: color-mix(in srgb, var(--op-strong) 4%, transparent); }
.op-accordion-body {
padding: 0 1.25rem 1.25rem;
font-size: .8125rem;
color: var(--op-muted);
line-height: 1.7;
}
/* ----------------------------------------------------------------------------
15. DROPDOWN
---------------------------------------------------------------------------- */
.op-dropdown { position: relative; display: inline-block; }
.op-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 200px;
background: var(--op-panel);
border: 1px solid var(--op-border-2);
border-radius: var(--op-radius);
box-shadow: var(--op-shadow-lg);
padding: .375rem;
z-index: 80;
opacity: 0;
visibility: hidden;
transform: translateY(-6px) scale(.98);
transform-origin: top right;
transition: all .2s var(--op-spring);
}
.op-dropdown.is-open .op-menu {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.op-menu-item {
display: flex;
align-items: center;
gap: .625rem;
width: 100%;
padding: .5625rem .75rem;
background: none;
border: 0;
border-radius: var(--op-radius-sm);
color: var(--op-text);
font-family: var(--op-font-sans);
font-size: .8125rem;
font-weight: 500;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background .15s, color .15s;
}
.op-menu-item i { font-size: 1rem; color: var(--op-muted); }
.op-menu-item:hover { background: color-mix(in srgb, var(--op-strong) 6%, transparent); color: var(--op-strong); }
.op-menu-item:hover i { color: var(--op-strong); }
.op-menu-item.is-danger { color: var(--op-danger); }
.op-menu-item.is-danger i { color: var(--op-danger); }
.op-menu-item.is-danger:hover { background: color-mix(in srgb, var(--op-danger) 12%, transparent); color: var(--op-danger); }
.op-menu-divider { height: 1px; background: var(--op-border); margin: .375rem .25rem; }
.op-menu-label {
padding: .375rem .75rem .125rem;
font-family: var(--op-font-mono);
font-size: .625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .15em;
color: var(--op-muted);
}
/* ----------------------------------------------------------------------------
16. TOOLTIP (CSS puro via atributo data-op-tip)
---------------------------------------------------------------------------- */
[data-op-tip] { position: relative; }
[data-op-tip]::after {
content: attr(data-op-tip);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
translate: -50% 0;
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);
white-space: nowrap;
box-shadow: var(--op-shadow);
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: all .2s var(--op-spring);
pointer-events: none;
z-index: 70;
}
[data-op-tip]::before {
content: "";
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
translate: -50% 0;
border: 5px solid transparent;
border-top-color: var(--op-strong);
opacity: 0;
visibility: hidden;
transition: all .2s var(--op-spring);
pointer-events: none;
z-index: 70;
}
[data-op-tip]:hover::after, [data-op-tip]:hover::before {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Variante: tooltip abaixo do elemento (para itens colados no topo da tela) */
.op-tip-bottom::after {
bottom: auto;
top: calc(100% + 10px);
transform: translateY(-4px);
}
.op-tip-bottom::before {
bottom: auto;
top: calc(100% + 2px);
border-top-color: transparent;
border-bottom-color: var(--op-strong);
}
/* ----------------------------------------------------------------------------
17. BREADCRUMB & PAGINAÇÃO
---------------------------------------------------------------------------- */
.op-breadcrumb {
display: flex;
align-items: center;
gap: .5rem;
font-family: var(--op-font-mono);
font-size: .75rem;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
.op-breadcrumb li { display: flex; align-items: center; gap: .5rem; }
.op-breadcrumb li:not(:last-child)::after {
content: "/";
color: var(--op-border-2);
}
.op-breadcrumb a { color: var(--op-muted); text-decoration: none; transition: color .2s; }
.op-breadcrumb a:hover { color: var(--op-strong); }
.op-breadcrumb li:last-child { color: var(--op-accent); font-weight: 700; }
html.light .op-breadcrumb li:last-child { color: #3F6212; }
.op-pagination { display: inline-flex; gap: .25rem; list-style: none; padding: 0; margin: 0; }
.op-page {
min-width: 36px; height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 .5rem;
border: 1px solid var(--op-border);
border-radius: var(--op-radius-sm);
background: var(--op-panel-2);
color: var(--op-text);
font-family: var(--op-font-mono);
font-size: .75rem;
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition: all .2s;
}
.op-page:hover { border-color: var(--op-border-2); color: var(--op-strong); background: var(--op-panel-3); }
.op-page.is-active {
background: var(--op-accent);
border-color: var(--op-accent);
color: var(--op-accent-ink);
}
html.light .op-page.is-active { background: var(--op-primary); border-color: var(--op-primary); color: var(--op-primary-ink); }
.op-page.is-disabled { opacity: .4; pointer-events: none; }
/* ----------------------------------------------------------------------------
18. MODAL
---------------------------------------------------------------------------- */
.op-modal {
position: fixed;
inset: 0;
z-index: 100;
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(0,0,0,.7);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
html.light .op-modal { background: rgba(15,23,42,.5); }
.op-modal.is-open { display: flex; }
.op-modal-box {
width: 100%;
max-width: 520px;
max-height: calc(100vh - 2rem);
display: flex;
flex-direction: column;
background: var(--op-panel);
border: 1px solid var(--op-border-2);
border-radius: var(--op-radius-lg);
box-shadow: var(--op-shadow-lg);
overflow: hidden;
}
.op-modal-sm .op-modal-box { max-width: 400px; }
.op-modal-lg .op-modal-box { max-width: 760px; }
.op-modal.is-open .op-modal-box { animation: op-modal-in .3s var(--op-spring); }
.op-modal.is-closing .op-modal-box { animation: op-modal-out .2s ease-in forwards; }
.op-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--op-border);
background: var(--op-panel-2);
}
.op-modal-title {
display: flex;
align-items: center;
gap: .75rem;
font-family: var(--op-font-display);
font-size: 1.25rem;
font-weight: 700;
color: var(--op-strong);
margin: 0;
}
.op-modal-close {
background: none;
border: 0;
color: var(--op-muted);
font-size: 1.375rem;
cursor: pointer;
padding: .25rem;
border-radius: var(--op-radius-sm);
display: flex;
transition: all .2s;
}
.op-modal-close:hover { color: var(--op-strong); background: color-mix(in srgb, var(--op-strong) 8%, transparent); }
.op-modal-close:active { transform: scale(.9); }
.op-modal-body { padding: 1.5rem; overflow-y: auto; }
.op-modal-footer {
display: flex;
justify-content: flex-end;
gap: .75rem;
padding: 1.25rem 1.5rem;
border-top: 1px solid var(--op-border);
background: var(--op-panel-2);
}
/* ----------------------------------------------------------------------------
19. TOASTS (criados via OptagoUI.toast)
---------------------------------------------------------------------------- */
.op-toast-container {
position: fixed;
top: 1.5rem;
left: 50%;
translate: -50% 0;
z-index: 110;
display: flex;
flex-direction: column;
align-items: center;
gap: .625rem;
pointer-events: none;
width: min(420px, calc(100vw - 2rem));
}
.op-toast {
pointer-events: auto;
display: flex;
align-items: center;
gap: .75rem;
width: 100%;
padding: .875rem 1rem;
background: var(--op-panel);
border: 1px solid var(--op-border-2);
border-radius: var(--op-radius);
box-shadow: var(--op-shadow-lg);
font-family: var(--op-font-mono);
font-size: .8125rem;
font-weight: 600;
color: var(--op-strong);
opacity: 0;
transform: translateY(-16px) scale(.97);
transition: all .3s var(--op-spring);
}
.op-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.op-toast > span { flex: 1; }
.op-toast-close {
background: none;
border: 0;
color: var(--op-muted);
font-size: 1.125rem;
cursor: pointer;
padding: .25rem;
border-radius: 6px;
display: flex;
flex-shrink: 0;
transition: color .2s, background .2s;
}
.op-toast-close:hover {
color: var(--op-strong);
background: color-mix(in srgb, var(--op-strong) 8%, transparent);
}
.op-toast-icon {
width: 32px; height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
flex-shrink: 0;
border: 1px solid transparent;
}
.op-toast-info { border-color: color-mix(in srgb, var(--op-info) 35%, var(--op-border)); }
.op-toast-info .op-toast-icon { background: color-mix(in srgb, var(--op-info) 15%, transparent); color: var(--op-info); border-color: color-mix(in srgb, var(--op-info) 30%, transparent); }
.op-toast-success { border-color: color-mix(in srgb, var(--op-success) 35%, var(--op-border)); }
.op-toast-success .op-toast-icon { background: color-mix(in srgb, var(--op-success) 15%, transparent); color: var(--op-success); border-color: color-mix(in srgb, var(--op-success) 30%, transparent); }
.op-toast-warning { border-color: color-mix(in srgb, var(--op-warning) 35%, var(--op-border)); }
.op-toast-warning .op-toast-icon { background: color-mix(in srgb, var(--op-warning) 15%, transparent); color: var(--op-warning); border-color: color-mix(in srgb, var(--op-warning) 30%, transparent); }
.op-toast-danger { border-color: color-mix(in srgb, var(--op-danger) 35%, var(--op-border)); }
.op-toast-danger .op-toast-icon { background: color-mix(in srgb, var(--op-danger) 15%, transparent); color: var(--op-danger); border-color: color-mix(in srgb, var(--op-danger) 30%, transparent); }
/* ----------------------------------------------------------------------------
20. BLOCO DE DEMONSTRAÇÃO (showcase: preview + copiar + ver código)
---------------------------------------------------------------------------- */
.op-demo {
background: var(--op-panel);
border: 1px solid var(--op-border);
border-radius: var(--op-radius-lg);
overflow: hidden;
box-shadow: var(--op-shadow);
}
.op-demo-preview {
padding: 2rem;
background:
radial-gradient(color-mix(in srgb, var(--op-border) 55%, transparent) 1px, transparent 1px);
background-size: 22px 22px;
}
.op-demo-bar {
display: flex;
justify-content: flex-end;
gap: .5rem;
padding: .625rem .875rem;
border-top: 1px solid var(--op-border);
background: var(--op-panel-2);
}
.op-demo-code {
display: none;
margin: 0;
padding: 1.25rem;
background: #0D1117;
border-top: 1px solid var(--op-border);
color: #A5D6FF;
font-family: var(--op-font-mono);
font-size: .75rem;
line-height: 1.6;
overflow-x: auto;
tab-size: 2;
white-space: pre;
}
.op-demo-code.is-visible { display: block; }
/* Cabeçalho de seção do showcase */
.op-section-head {
display: flex;
align-items: center;
gap: .75rem;
padding-bottom: 1rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--op-border);
}
.op-section-head i {
font-size: 1.375rem;
color: var(--op-accent);
width: 44px; height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--op-accent) 10%, transparent);
-webkit-clip-path: var(--op-oct); clip-path: var(--op-oct);
flex-shrink: 0;
}
html.light .op-section-head i { color: #3F6212; background: var(--op-accent); }
.op-section-head h2 { margin: 0; font-size: 1.5rem; }
/* ----------------------------------------------------------------------------
20b. GLOW — manchas de verde-lima desfocadas no fundo.
Use dentro de um container com position:relative (ou no .op-app-body).
O conteúdo por cima deve ter z-index maior (o .op-main já tem z-index:1).
---------------------------------------------------------------------------- */
.op-glow {
position: absolute;
width: 460px;
height: 340px;
max-width: 70vw;
background: var(--op-accent);
opacity: .07;
filter: blur(110px);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.op-glow-info { background: var(--op-info); }
.op-glow-sm { width: 260px; height: 200px; }
.op-glow-lg { width: 700px; height: 460px; }
.op-glow-strong { opacity: .12; }
/* No tema claro o verde-lima #C0FF6B é claro demais para aparecer sobre fundo
branco com opacidade baixa. Usamos um verde mais saturado + mix-blend-mode:
multiply (tinge o fundo em vez de clarear) para o glow ficar visível. */
html.light .op-glow {
background: #9AE600;
opacity: .40;
mix-blend-mode: multiply;
}
html.light .op-glow-info { background: #3B82F6; opacity: .28; }
html.light .op-glow-strong { opacity: .55; }
/* ----------------------------------------------------------------------------
20c. MODAIS — VARIANTES EXTRAS
---------------------------------------------------------------------------- */
/* Drawer lateral (desliza da direita) */
.op-modal-drawer { justify-content: flex-end; align-items: stretch; padding: 0; }
.op-modal-drawer .op-modal-box {
max-width: 440px;
height: 100%;
max-height: none;
border-radius: 0;
border-top: 0;
border-bottom: 0;
border-right: 0;
}
.op-modal-drawer .op-modal-body { flex: 1; }
.op-modal-drawer.is-open .op-modal-box { animation: op-drawer-in .35s var(--op-spring); }
.op-modal-drawer.is-closing .op-modal-box { animation: op-drawer-out .25s ease-in forwards; }
/* Modal centrado (confirmações e sucesso, sem header) */
.op-modal-centered .op-modal-box { max-width: 400px; text-align: center; }
.op-modal-centered .op-modal-body {
padding: 2.25rem 1.75rem 1rem;
display: flex;
flex-direction: column;
align-items: center;
}
.op-modal-centered .op-modal-footer {
justify-content: center;
border-top: 0;
background: transparent;
padding-top: .5rem;
}
.op-modal-icon {
width: 68px; height: 68px;
-webkit-clip-path: var(--op-oct); clip-path: var(--op-oct);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin-bottom: 1rem;
}
.op-modal-icon.is-success { background: color-mix(in srgb, var(--op-success) 15%, transparent); color: var(--op-success); }
.op-modal-icon.is-danger { background: color-mix(in srgb, var(--op-danger) 15%, transparent); color: var(--op-danger); }
.op-modal-icon.is-warning { background: color-mix(in srgb, var(--op-warning) 15%, transparent); color: var(--op-warning); }
.op-modal-icon.is-brand { background: color-mix(in srgb, var(--op-accent) 14%, transparent); color: var(--op-accent); }
html.light .op-modal-icon.is-brand { color: #3F6212; }
@keyframes op-drawer-in {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@keyframes op-drawer-out {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
/* ----------------------------------------------------------------------------
20d. TABS VERTICAIS
---------------------------------------------------------------------------- */
.op-tabs-vertical { display: flex; gap: 1.5rem; align-items: flex-start; }
.op-tabs-vertical .op-tabs-col {
display: flex;
flex-direction: column;
gap: .25rem;
min-width: 190px;
flex-shrink: 0;
}
.op-tabs-col .op-tab {
justify-content: flex-start;
border: 0;
margin: 0;
border-radius: var(--op-radius-sm);
padding: .625rem .875rem;
text-align: left;
}
.op-tabs-col .op-tab.is-active {
background: color-mix(in srgb, var(--op-accent) 12%, transparent);
color: var(--op-strong);
box-shadow: inset 3px 0 0 var(--op-accent);
}
html.light .op-tabs-col .op-tab.is-active { box-shadow: inset 3px 0 0 #84CC16; }
.op-tabs-vertical .op-tab-panels { flex: 1; min-width: 0; }
.op-tabs-vertical .op-tab-panel { padding: 0; }
@media (max-width: 640px) {
.op-tabs-vertical { flex-direction: column; }
.op-tabs-vertical .op-tabs-col { flex-direction: row; flex-wrap: wrap; min-width: 0; }
}
/* ----------------------------------------------------------------------------
20e. SKELETON — variações extras
---------------------------------------------------------------------------- */
.op-skeleton-thumb { aspect-ratio: 16 / 9; width: 100%; border-radius: var(--op-radius); margin-bottom: 1rem; }
.op-skeleton-title { height: 16px; width: 55%; margin-bottom: .75rem; }
.op-skeleton-btn { height: 36px; width: 116px; }
.op-skeleton-badge { height: 22px; width: 68px; border-radius: 999px; }
.op-skeleton-row {
display: flex;
align-items: center;
gap: .875rem;
padding: .625rem 0;
}
/* ----------------------------------------------------------------------------
20f. TIMELINE
---------------------------------------------------------------------------- */
.op-timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 2rem; }
.op-timeline::before {
content: "";
position: absolute;
left: 7px;
top: 6px;
bottom: 6px;
width: 2px;
background: var(--op-border);
}
.op-timeline-item { position: relative; padding-bottom: 1.75rem; }
.op-timeline-item:last-child { padding-bottom: 0; }
.op-timeline-marker {
position: absolute;
left: -2rem;
top: 3px;
width: 16px; height: 16px;
background: var(--op-border-2);
-webkit-clip-path: var(--op-oct); clip-path: var(--op-oct);
}
.op-timeline-marker.is-brand { background: var(--op-accent); }
.op-timeline-marker.is-success { background: var(--op-success); }
.op-timeline-marker.is-warning { background: var(--op-warning); }
.op-timeline-marker.is-danger { background: var(--op-danger); }
.op-timeline-marker.is-info { background: var(--op-info); }
.op-timeline-marker.is-pulse { animation: op-pulse 1.6s ease-in-out infinite; }
.op-timeline-time {
font-family: var(--op-font-mono);
font-size: .6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--op-muted);
display: block;
margin-bottom: .125rem;
}
.op-timeline-title {
font-weight: 700;
font-size: .9375rem;
color: var(--op-strong);
margin: 0 0 .25rem;
display: flex;
align-items: center;
gap: .5rem;
flex-wrap: wrap;
}
.op-timeline-text { font-size: .8125rem; color: var(--op-muted); margin: 0; line-height: 1.6; }
/* ----------------------------------------------------------------------------
20g. TABULATOR — tema Óptago
Aplicado quando a tabela é criada via OptagoUI.tabulator() (o JS injeta o
CSS base do Tabulator ANTES deste arquivo, então estas regras vencem).
---------------------------------------------------------------------------- */
.op-tabulator.tabulator {
background: var(--op-panel);
border: 1px solid var(--op-border);
border-radius: var(--op-radius);
box-shadow: var(--op-shadow);
font-family: var(--op-font-sans);
font-size: .875rem;
overflow: hidden;
}
.op-tabulator.tabulator .tabulator-header {
background: var(--op-panel-2);
border-bottom: 1px solid var(--op-border);
color: var(--op-muted);
}
.op-tabulator.tabulator .tabulator-header .tabulator-col {
background: transparent;
border-right: 1px solid var(--op-border);
}
.op-tabulator.tabulator .tabulator-header .tabulator-col:last-of-type { border-right: 0; }
.op-tabulator.tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: .875rem 1rem; }
.op-tabulator.tabulator .tabulator-header .tabulator-col-title {
font-family: var(--op-font-mono);
font-size: .6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--op-muted);
}
.op-tabulator.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
background: var(--op-panel-3);
}
/* setas de ordenação */
.op-tabulator.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter .tabulator-arrow {
border-bottom-color: var(--op-muted);
}
.op-tabulator.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-sorter .tabulator-arrow {
border-bottom-color: var(--op-accent);
}
.op-tabulator.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-sorter .tabulator-arrow {
border-top-color: var(--op-accent);
}
html.light .op-tabulator.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-sorter .tabulator-arrow { border-bottom-color: #65A30D; }
html.light .op-tabulator.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-sorter .tabulator-arrow { border-top-color: #65A30D; }
.op-tabulator.tabulator .tabulator-tableholder { background: var(--op-panel); }
.op-tabulator.tabulator .tabulator-tableholder .tabulator-table {
background: transparent;
color: var(--op-text);
}
.op-tabulator.tabulator .tabulator-row {
background: transparent;
border-bottom: 1px solid var(--op-border);
color: var(--op-text);
min-height: 0;
}
.op-tabulator.tabulator .tabulator-row .tabulator-cell {
padding: .75rem 1rem;
border-right: 0;
}
.op-tabulator.tabulator .tabulator-row.tabulator-row-even { background: color-mix(in srgb, var(--op-strong) 2.5%, transparent); }
.op-tabulator.tabulator .tabulator-row.tabulator-selectable:hover {
background: color-mix(in srgb, var(--op-accent) 6%, transparent);
cursor: pointer;
}
.op-tabulator.tabulator .tabulator-row.tabulator-selected {
background: color-mix(in srgb, var(--op-accent) 14%, transparent);
}
.op-tabulator.tabulator .tabulator-placeholder .tabulator-placeholder-contents {
color: var(--op-muted);
font-family: var(--op-font-mono);
font-size: .8125rem;
}
/* rodapé / paginação */
.op-tabulator.tabulator .tabulator-footer {
background: var(--op-panel-2);
border-top: 1px solid var(--op-border);
color: var(--op-muted);
padding: .5rem .75rem;
}
.op-tabulator.tabulator .tabulator-footer .tabulator-footer-contents { padding: 0; }
.op-tabulator.tabulator .tabulator-footer .tabulator-page-counter,
.op-tabulator.tabulator .tabulator-footer .tabulator-page-size {
font-family: var(--op-font-mono);
font-size: .6875rem;
color: var(--op-muted);
}
.op-tabulator.tabulator .tabulator-footer .tabulator-page-size {
background: var(--op-panel);
border: 1px solid var(--op-border-2);
border-radius: 6px;
color: var(--op-text);
padding: .25rem .5rem;
}
.op-tabulator.tabulator .tabulator-footer .tabulator-page {
background: var(--op-panel);
border: 1px solid var(--op-border);
border-radius: var(--op-radius-sm);
color: var(--op-text);
font-family: var(--op-font-mono);
font-size: .6875rem;
font-weight: 700;
padding: .3125rem .625rem;
margin: 0 .125rem;
transition: all .2s;
}
.op-tabulator.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
background: var(--op-panel-3);
border-color: var(--op-border-2);
color: var(--op-strong);
}
.op-tabulator.tabulator .tabulator-footer .tabulator-page.active {
background: var(--op-accent);
border-color: var(--op-accent);
color: var(--op-accent-ink);
}
html.light .op-tabulator.tabulator .tabulator-footer .tabulator-page.active {
background: var(--op-primary);
border-color: var(--op-primary);
color: var(--op-primary-ink);
}
.op-tabulator.tabulator .tabulator-footer .tabulator-page.disabled { opacity: .4; }
/* barra de progresso interna usada em células formatadas */
.op-tabulator .op-progress { min-width: 90px; }
/* ----------------------------------------------------------------------------
21. UTILITÁRIOS
---------------------------------------------------------------------------- */
.op-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.op-stack { display: flex; flex-direction: column; gap: 1rem; }
.op-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.op-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; }
.op-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
/* Visível apenas no mobile (ex.: hamburguer que abre a sidebar) */
.op-mobile-only { display: none !important; }
@media (max-width: 1023px) { .op-mobile-only { display: inline-flex !important; } }
.op-text-muted { color: var(--op-muted); }
.op-text-accent { color: var(--op-accent); }
html.light .op-text-accent { color: #3F6212; }
.op-text-mono { font-family: var(--op-font-mono); }
.op-text-sm { font-size: .8125rem; }
.op-text-xs { font-size: .6875rem; }
.op-mt-1 { margin-top: .5rem; } .op-mt-2 { margin-top: 1rem; } .op-mt-3 { margin-top: 1.5rem; } .op-mt-4 { margin-top: 2.5rem; }
.op-mb-1 { margin-bottom: .5rem; } .op-mb-2 { margin-bottom: 1rem; } .op-mb-3 { margin-bottom: 1.5rem; } .op-mb-4 { margin-bottom: 2.5rem; }
/* ----------------------------------------------------------------------------
22. ANIMAÇÕES
---------------------------------------------------------------------------- */
@keyframes op-spin { to { transform: rotate(360deg); } }
@keyframes op-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
@keyframes op-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .35; }
}
@keyframes op-shimmer {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
@keyframes op-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes op-modal-in {
from { opacity: 0; transform: scale(.95) translateY(12px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes op-modal-out {
from { opacity: 1; transform: scale(1) translateY(0); }
to { opacity: 0; transform: scale(.95) translateY(12px); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}