/* TheVoid — Where Nothing Hides
Design System: Eclipse Dark Theme by Duranium */
/* Fontes carregadas via no de cada pagina (inclui Geist Mono,
que este @import nao cobria) — nao duplicar aqui, senao a familia
basica e buscada duas vezes e o @import bloqueia o parse do CSS. */
:root {
/* Primary */
--void-black: #0A0A0A;
--eclipse-gold: #FBE491;
--signal-white: #FFFFFF;
/* Gold Spectrum */
--gold-bright: #FBD758;
--gold-standard: #FBE491;
--gold-soft: #FCE79F;
--gold-muted: #D4A843;
--gold-dim: #B49137;
/* Neutrals */
--dark-surface: #111111;
--dark-card: #0E0E0E;
--charcoal: #2A2A2A;
--ash: #626262;
--smoke: #808080;
--fog: #888888;
/* Semantic */
--accent-red: #ef5350;
--accent-orange: #ff9800;
--accent-yellow: #ffd54f;
--accent-green: #66bb6a;
--accent-purple: #ab47bc;
--accent-blue: #42a5f5;
/* Typography */
--font-the: 'Jura', sans-serif;
--font-void: 'Big Shoulders Display', sans-serif;
--font-body: 'Work Sans', sans-serif;
--font-mono: 'Geist Mono', 'Courier New', monospace;
/* Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
/* Borders */
--radius-sm: 4px;
--radius-none: 0px;
/* Transitions */
--transition: 300ms ease;
/* Sidebar */
--sidebar-w: 224px;
--sidebar-w-collapsed: 60px;
/* Focus ring (teclado) */
--focus-ring: 0 0 0 3px rgba(251, 228, 145, 0.45);
}
/* --- Light Theme --- */
[data-theme="light"] {
--void-black: #F5F5F5;
--eclipse-gold: #B8860B;
--signal-white: #1A1A1A;
--gold-bright: #A67B00;
--gold-standard: #B8860B;
--gold-soft: #C99B1D;
--gold-muted: #8B6914;
--gold-dim: #7A5C10;
--dark-surface: #FFFFFF;
--dark-card: #FAFAFA;
--charcoal: #E0E0E0;
--ash: #909090;
--smoke: #555555;
--fog: #333333;
--accent-red: #D32F2F;
--accent-orange: #E65100;
--accent-yellow: #F9A825;
--accent-green: #2E7D32;
--accent-purple: #7B1FA2;
--accent-blue: #1565C0;
--focus-ring: 0 0 0 3px rgba(184, 134, 11, 0.35);
}
[data-theme="light"] header {
border-bottom-color: var(--gold-dim);
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
[data-theme="light"] .dim-tooltip {
background: #FFFFFF;
border-color: #B8860B;
color: #222;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
[data-theme="light"] .btn-icon,
[data-theme="light"] .btn-search {
color: #333;
border-color: #CCC;
}
[data-theme="light"] .btn-icon:hover,
[data-theme="light"] .btn-search:hover {
background: #E8E8E8;
}
[data-theme="light"] input[type="text"] {
background: #FFF;
color: #333;
border-color: #CCC;
}
[data-theme="light"] table th {
background: #E8E8E8;
color: #333;
}
[data-theme="light"] table td {
color: #444;
border-color: #E0E0E0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Anel de foco padrao para links/botoes que nao definem :focus proprio
(a maioria do sidebar, tabs, botoes de icone). Componentes com regra
:focus especifica (inputs) continuam prevalecendo por especificidade. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: var(--radius-sm);
}
body {
font-family: var(--font-body);
background: var(--void-black);
color: var(--fog);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
/* --- Layout Grid --- */
.app {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"footer";
min-height: 100vh;
margin-left: var(--sidebar-w);
transition: margin-left var(--transition);
}
/* Esconde a app ate o boot revelar (auth ok). Sem esta regra, paginas
standalone (pesos.html, integration.html) renderizavam antes da auth e
um boot que falha mostrava a UI presa em "Carregando..." em vez de nada.
O sidebar fica dentro de .app para herdar o mesmo ciclo de vida
(escondido ate a sessao ser validada). */
.app.hidden { display: none; }
body.sidebar-collapsed .app { margin-left: var(--sidebar-w-collapsed); }
/* --- Sidebar --- */
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var(--sidebar-w);
display: flex;
flex-direction: column;
background: var(--dark-surface);
border-right: 1.5px solid var(--eclipse-gold);
overflow-x: hidden;
z-index: 100;
transition: width var(--transition), transform var(--transition);
}
body.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
.sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding: 14px var(--space-md);
min-height: 60px;
border-bottom: 1px solid var(--charcoal);
flex-shrink: 0;
}
.sidebar-brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
overflow: hidden;
}
.sidebar-eclipse {
width: 36px;
height: 36px;
object-fit: contain;
flex-shrink: 0;
}
.sidebar-wordmark {
display: flex;
flex-direction: column;
line-height: 1;
white-space: nowrap;
}
body.sidebar-collapsed .sidebar-wordmark { display: none; }
.sidebar-toggle {
background: none;
border: 1px solid var(--charcoal);
color: var(--smoke);
width: 24px;
height: 24px;
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 0.9rem;
line-height: 1;
transition: var(--transition);
}
.sidebar-toggle:hover {
background: var(--charcoal);
color: var(--signal-white);
border-color: var(--gold-dim);
}
.sidebar-toggle-icon { display: inline-block; transition: transform var(--transition); }
body.sidebar-collapsed .sidebar-toggle-icon { transform: rotate(180deg); }
.sidebar-nav {
display: flex;
flex-direction: column;
padding: var(--space-sm) 0;
gap: 2px;
}
.sidebar-link,
.sidebar-theme-toggle,
.sidebar-logout {
display: flex;
align-items: center;
gap: 12px;
padding: 10px var(--space-md);
color: var(--smoke);
text-decoration: none;
font-size: 0.875rem;
font-family: var(--font-body);
font-weight: 500;
border: none;
background: none;
width: 100%;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
transition: var(--transition);
}
.sidebar-link:hover,
.sidebar-theme-toggle:hover,
.sidebar-logout:hover {
background: var(--charcoal);
color: var(--signal-white);
}
.sidebar-link.active {
color: var(--eclipse-gold);
background: rgba(251, 228, 145, 0.08);
border-left: 2px solid var(--eclipse-gold);
padding-left: calc(var(--space-md) - 2px);
}
.sidebar-link-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--gold-dim);
}
.sidebar-link-icon svg {
width: 16px;
height: 16px;
}
.sidebar-link-label {
overflow: hidden;
text-overflow: ellipsis;
}
body.sidebar-collapsed .sidebar-link-label { display: none; }
.sidebar-spacer { flex: 1; }
.sidebar-theme-toggle { border-top: 1px solid var(--charcoal); }
.sidebar-footer {
border-top: 1px solid var(--charcoal);
padding: var(--space-md);
display: flex;
flex-direction: column;
gap: 8px;
flex-shrink: 0;
}
.sidebar-user {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 8px;
overflow: hidden;
}
.sidebar-user-name {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--eclipse-gold);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
/* Nome e badge ficam lado a lado (nome trunca, badge nao encolhe).
.role-badge tem margin-left pra quando usado logo apos texto corrido
no header — aqui o espacamento ja vem do gap do flex, entao zera. */
.sidebar-role-badge {
flex-shrink: 0;
margin-left: 0;
}
body.sidebar-collapsed .sidebar-user { display: none !important; }
.sidebar-logout {
color: var(--accent-red) !important;
border-radius: var(--radius-sm);
}
.sidebar-logout:hover { background: rgba(239, 83, 80, 0.1) !important; }
[data-theme="light"] .sidebar {
border-right-color: var(--gold-dim);
box-shadow: 1px 0 4px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .sidebar-toggle {
color: #333;
border-color: #CCC;
}
[data-theme="light"] .sidebar-toggle:hover { background: #E8E8E8; }
[data-theme="light"] .sidebar-link,
[data-theme="light"] .sidebar-theme-toggle {
color: #333;
}
[data-theme="light"] .sidebar-link:hover,
[data-theme="light"] .sidebar-theme-toggle:hover {
background: #E8E8E8;
color: #111;
}
.wm-the {
font-family: var(--font-the);
font-weight: 300;
font-size: 0.5rem;
letter-spacing: 0.4em;
color: var(--gold-muted);
}
.wm-void {
font-family: var(--font-void);
font-weight: 800;
font-size: 1.3rem;
letter-spacing: 0.02em;
color: var(--signal-white);
line-height: 1;
}
/* --- Main --- */
main {
grid-area: main;
display: flex;
flex-direction: column;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
overflow-y: auto;
}
/* --- Footer --- */
footer {
grid-area: footer;
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-sm) var(--space-lg);
border-top: 1px solid var(--gold-muted);
background: var(--dark-surface);
}
.footer-brand {
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.3em;
color: var(--gold-dim);
}
.footer-company {
font-family: var(--font-mono);
font-size: 0.58rem;
color: var(--smoke);
}
/* --- Connection Modal --- */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(10,10,10,0.85);
z-index: 100;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
}
.modal-overlay.visible { display: flex; }
.modal {
background: var(--dark-surface);
border: 1px solid var(--charcoal);
border-radius: var(--radius-sm);
padding: var(--space-lg);
width: 380px;
}
.modal h3 {
margin-bottom: var(--space-md);
color: var(--eclipse-gold);
font-size: 0.95rem;
font-weight: 600;
}
.modal label {
display: block;
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--smoke);
margin-bottom: var(--space-xs);
margin-top: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.modal input {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--charcoal);
border-radius: var(--radius-sm);
background: var(--void-black);
color: var(--signal-white);
font-size: 0.85rem;
font-family: var(--font-mono);
transition: var(--transition);
}
.modal input:focus {
outline: none;
border-color: var(--gold-muted);
}
.modal .btn-primary {
margin-top: var(--space-md);
width: 100%;
padding: 10px;
border: none;
border-radius: var(--radius-sm);
background: var(--gold-muted);
color: var(--dark-surface);
font-weight: 700;
cursor: pointer;
font-size: 0.82rem;
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.03em;
transition: var(--transition);
}
.modal .btn-primary:hover { background: var(--gold-bright); }
.modal-divider {
height: 1px;
background: var(--charcoal);
margin: var(--space-md) 0 var(--space-sm);
}
.modal-hint {
display: block;
font-size: 0.62rem;
color: var(--ash);
margin-top: var(--space-xs);
}
/* --- Settings: Pesos das Dimensoes (pagina dedicada pesos.html) --- */
.settings-page-body {
padding: var(--space-sm) var(--space-lg) var(--space-md);
}
/* --- Login Overlay --- */
.login-overlay {
position: fixed;
inset: 0;
z-index: 1000;
background: var(--void-black);
display: flex;
align-items: center;
justify-content: center;
}
.login-overlay.hidden { display: none; }
.login-card {
background: var(--dark-surface);
border: 1px solid var(--charcoal);
border-radius: 8px;
padding: 40px 36px;
width: 100%;
max-width: 380px;
text-align: center;
}
.login-logo-wide {
max-width: 260px;
height: auto;
margin-bottom: 16px;
}
/* Light theme (default): show light logo, hide dark */
.logo-for-light { display: inline; }
.logo-for-dark { display: none; }
/* Dark theme: show dark logo, hide light */
[data-theme="dark"] .logo-for-light { display: none; }
[data-theme="dark"] .logo-for-dark { display: inline; }
.login-subtitle {
font-family: var(--font-the);
font-size: 0.75rem;
color: var(--smoke);
letter-spacing: 0.15em;
margin-bottom: 28px;
}
#login-form {
display: flex;
flex-direction: column;
gap: 12px;
}
#login-form input {
background: var(--void-black);
border: 1px solid var(--charcoal);
border-radius: var(--radius-sm);
padding: 12px 14px;
color: var(--signal-white);
font-family: var(--font-body);
font-size: 0.9rem;
}
#login-form input:focus {
outline: none;
border-color: var(--eclipse-gold);
}
.btn-login {
padding: 12px;
font-size: 0.9rem;
font-weight: 600;
background: var(--eclipse-gold);
color: var(--void-black);
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
margin-top: 4px;
}
.btn-login:hover {
background: var(--gold-bright);
}
.sso-section {
margin-top: 16px;
}
.sso-section.hidden { display: none; }
.login-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0;
color: var(--ash);
font-size: 0.75rem;
}
.login-divider::before,
.login-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--charcoal);
}
.btn-sso {
width: 100%;
padding: 12px;
font-size: 0.9rem;
font-weight: 500;
background: transparent;
color: var(--signal-white);
border: 1px solid var(--charcoal);
border-radius: var(--radius-sm);
cursor: pointer;
}
.btn-sso:hover {
border-color: var(--eclipse-gold);
color: var(--eclipse-gold);
}
.login-error {
margin-top: 12px;
padding: 8px 12px;
background: rgba(239, 83, 80, 0.15);
color: var(--accent-red);
border-radius: var(--radius-sm);
font-size: 0.8rem;
}
.login-error.hidden { display: none; }
/* Light theme login */
[data-theme="light"] .login-overlay {
background: #F5F5F5;
}
[data-theme="light"] .login-card {
background: #FFFFFF;
border-color: #E0E0E0;
box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}
[data-theme="light"] #login-form input {
background: #FAFAFA;
border-color: #DDD;
color: #333;
}
[data-theme="light"] .btn-sso {
color: #333;
border-color: #CCC;
}
/* ============================================================
Integration Page (integration.html)
============================================================ */
/* Content container */
.int-content {
max-width: 780px;
margin: 0 auto;
width: 100%;
padding-bottom: var(--space-xl);
}
/* Page header */
.int-page-header {
padding: var(--space-lg) 0 var(--space-md);
border-bottom: 1px solid var(--charcoal);
margin-bottom: var(--space-lg);
}
.int-page-title {
font-family: var(--font-void);
font-weight: 800;
font-size: 1.7rem;
color: var(--signal-white);
letter-spacing: 0.02em;
margin-bottom: var(--space-sm);
}
.int-page-subtitle {
font-size: 0.82rem;
color: var(--smoke);
line-height: 1.7;
max-width: 580px;
}
.int-page-subtitle code {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--eclipse-gold);
background: rgba(251,228,145,0.08);
padding: 1px 5px;
border-radius: 3px;
}
/* Error banner */
.int-error {
background: rgba(239,83,80,0.1);
border: 1px solid rgba(239,83,80,0.3);
border-radius: var(--radius-sm);
padding: var(--space-sm) var(--space-md);
color: var(--accent-red);
font-size: 0.82rem;
margin-bottom: var(--space-md);
}
.int-error.hidden { display: none; }
/* Cards */
.int-card {
background: var(--dark-card);
border: 1px solid var(--charcoal);
border-radius: var(--radius-sm);
margin-bottom: var(--space-md);
overflow: hidden;
}
.int-card--info {
border-color: rgba(66,165,245,0.15);
}
.int-card-title {
font-family: var(--font-mono);
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--eclipse-gold);
background: var(--dark-surface);
padding: 10px var(--space-lg);
border-bottom: 1px solid var(--charcoal);
}
/* State machine — API Key card */
.int-state { display: block; }
.int-state.hidden { display: none; }
/* none state */
.int-empty-state {
padding: var(--space-xl) var(--space-lg);
text-align: center;
}
.int-empty-title {
font-size: 0.88rem;
font-weight: 600;
color: var(--fog);
margin-bottom: var(--space-xs);
}
.int-empty-desc {
font-size: 0.78rem;
color: var(--smoke);
margin-bottom: var(--space-lg);
max-width: 360px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
/* loading state */
.int-loading-state {
padding: var(--space-xl) var(--space-lg);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
color: var(--smoke);
}
.int-spinner {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid var(--charcoal);
border-top-color: var(--eclipse-gold);
border-radius: 50%;
animation: spin 0.8s linear infinite;
flex-shrink: 0;
}
.int-loading-text {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.04em;
color: var(--smoke);
}
/* revealed state */
.int-revealed-state {
padding: var(--space-lg);
}
.int-warning-banner {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
background: rgba(255,213,79,0.07);
border: 1px solid rgba(255,213,79,0.2);
border-radius: var(--radius-sm);
padding: var(--space-sm) var(--space-md);
margin-bottom: var(--space-md);
font-size: 0.8rem;
color: var(--accent-yellow);
line-height: 1.6;
}
.int-warning-icon {
font-family: var(--font-mono);
font-weight: 700;
font-size: 0.9rem;
flex-shrink: 0;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid rgba(255,213,79,0.5);
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.int-key-row {
display: flex;
gap: var(--space-sm);
margin-bottom: var(--space-md);
align-items: stretch;
}
.int-key-input {
flex: 1;
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--eclipse-gold);
background: var(--void-black);
border: 1px solid var(--gold-dim);
border-radius: var(--radius-sm);
padding: 10px 14px;
letter-spacing: 0.01em;
min-width: 0;
cursor: text;
transition: var(--transition);
}
.int-key-input:focus { outline: none; border-color: var(--gold-muted); }
.int-key-input.copied,
.tnt-key-input.copied {
border-color: var(--accent-green);
box-shadow: 0 0 0 1px rgba(102,187,106,0.3);
}
.int-revealed-actions {
display: flex;
gap: var(--space-sm);
}
/* configured state */
.int-configured-state {
padding: var(--space-lg);
}
.int-key-status-row {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.int-key-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent-green);
box-shadow: 0 0 6px rgba(102,187,106,0.5);
flex-shrink: 0;
}
.int-key-status-text {
font-size: 0.82rem;
color: var(--accent-green);
font-weight: 500;
}
.int-key-date {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--smoke);
margin-left: var(--space-xs);
}
.int-configured-actions {
display: flex;
gap: var(--space-sm);
}
/* Endpoints card */
.int-endpoints { }
.int-endpoint-row {
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--charcoal);
}
.int-endpoint-row--last { border-bottom: none; }
.int-endpoint-meta {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-sm);
}
.int-endpoint-method {
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--accent-blue);
background: rgba(66,165,245,0.1);
border: 1px solid rgba(66,165,245,0.2);
padding: 1px 6px;
border-radius: var(--radius-sm);
}
.int-endpoint-name {
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 700;
color: var(--signal-white);
letter-spacing: 0.02em;
}
.int-endpoint-badge {
font-family: var(--font-mono);
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 2px 8px;
border-radius: var(--radius-sm);
}
.int-badge-quantitativa {
background: rgba(102,187,106,0.1);
color: var(--accent-green);
border: 1px solid rgba(102,187,106,0.2);
}
.int-badge-qualitativa {
background: rgba(171,71,188,0.1);
color: #ce93d8;
border: 1px solid rgba(171,71,188,0.2);
}
.int-badge-enrich {
background: rgba(66,165,245,0.1);
color: #64b5f6;
border: 1px solid rgba(66,165,245,0.2);
}
/* Dimension catalog (enrichment) */
.int-dims-label {
font-family: var(--font-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--smoke);
margin: var(--space-md) 0 var(--space-sm);
}
.int-dimensions {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
margin-bottom: var(--space-md);
}
.int-dim-chip {
font-family: var(--font-mono);
font-size: 0.68rem;
padding: 3px 9px;
border-radius: var(--radius-sm);
background: var(--void-black);
border: 1px solid var(--charcoal);
color: var(--ash);
}
.int-dim-chip[data-ondemand="true"] {
border-style: dashed;
color: #64b5f6;
}
.int-endpoint-url-row {
display: flex;
align-items: center;
gap: var(--space-sm);
background: var(--void-black);
border: 1px solid var(--charcoal);
border-radius: var(--radius-sm);
padding: 8px 12px;
margin-bottom: var(--space-sm);
}
.int-url {
flex: 1;
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--fog);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.int-endpoint-desc {
font-size: 0.78rem;
color: var(--smoke);
line-height: 1.6;
}
/* Curl block */
.int-curl-wrapper {
position: relative;
padding: var(--space-lg);
}
.int-curl-block {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--fog);
background: var(--void-black);
border: 1px solid var(--charcoal);
border-radius: var(--radius-sm);
padding: var(--space-md) var(--space-lg);
white-space: pre;
overflow-x: auto;
line-height: 1.75;
margin: 0;
}
.int-curl-copy-btn {
position: absolute;
top: calc(var(--space-lg) + var(--space-sm));
right: calc(var(--space-lg) + var(--space-sm));
}
/* Code language tabs */
.int-code-tabs-bar {
display: flex;
border-bottom: 1px solid var(--charcoal);
background: var(--dark-surface);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
overflow: hidden;
}
.int-ctab {
padding: 8px 18px;
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--smoke);
cursor: pointer;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 600;
text-transform: lowercase;
letter-spacing: 0.03em;
transition: color 0.15s, border-color 0.15s;
}
.int-ctab:hover {
color: var(--fog);
}
.int-ctab.active {
color: var(--text);
border-bottom-color: var(--accent);
}
.int-code-tabs-bar + .int-curl-wrapper {
padding-top: 0;
}
.int-code-tabs-bar + .int-curl-wrapper .int-curl-block {
border-top: none;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.int-code-pane.hidden { display: none; }
/* Response tabs */
.int-response-tabs-bar {
display: flex;
border-bottom: 1px solid var(--charcoal);
background: var(--dark-surface);
}
.int-rtab {
padding: 10px 24px;
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--smoke);
cursor: pointer;
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
transition: var(--transition);
}
.int-rtab:hover { color: var(--signal-white); }
.int-rtab.active {
color: var(--eclipse-gold);
border-bottom-color: var(--eclipse-gold);
}
.int-response-body {
padding: var(--space-md) var(--space-lg) var(--space-lg);
}
.int-response-sample { }
.int-response-sample.hidden { display: none; }
/* Rate limits card */
.int-limits {
padding: var(--space-md) var(--space-lg) var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.int-limit-row {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-sm) var(--space-md);
background: var(--void-black);
border-radius: var(--radius-sm);
border: 1px solid var(--charcoal);
}
.int-limit-endpoint {
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 700;
color: var(--signal-white);
text-transform: uppercase;
letter-spacing: 0.04em;
min-width: 36px;
}
.int-limit-value {
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 700;
color: var(--eclipse-gold);
}
.int-limit-note {
font-size: 0.75rem;
color: var(--smoke);
}
/* Integration page buttons */
.btn-int-primary {
padding: 10px 24px;
border: none;
border-radius: var(--radius-sm);
background: var(--gold-muted);
color: var(--dark-surface);
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
cursor: pointer;
transition: var(--transition);
}
.btn-int-primary:hover { background: var(--gold-bright); }
.btn-int-secondary {
padding: 9px 20px;
border: 1px solid var(--charcoal);
border-radius: var(--radius-sm);
background: none;
color: var(--fog);
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.03em;
cursor: pointer;
transition: var(--transition);
}
.btn-int-secondary:hover {
background: var(--charcoal);
color: var(--signal-white);
border-color: var(--ash);
}
.btn-int-danger {
padding: 9px 20px;
border: 1px solid rgba(239,83,80,0.3);
border-radius: var(--radius-sm);
background: none;
color: var(--accent-red);
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.03em;
cursor: pointer;
transition: var(--transition);
}
.btn-int-danger:hover {
background: rgba(239,83,80,0.1);
border-color: var(--accent-red);
}
/* Conteudo so para leitor de tela: confirmacao de copia sem poluir a UI. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.btn-int-copy {
/* min-height: o padding e so horizontal, e ao lado de um o botao nao
estica — ficava com ~15px de alvo de toque (WCAG 2.5.8 pede 24px). */
min-height: 24px;
padding: 0 20px;
border: 1px solid var(--charcoal);
border-radius: var(--radius-sm);
background: none;
color: var(--smoke);
font-family: var(--font-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: var(--transition);
}
.btn-int-copy:hover, .btn-int-copy.copied-btn {
background: var(--charcoal);
color: var(--signal-white);
border-color: var(--ash);
}
.btn-int-copy-sm {
padding: 4px 12px;
border: 1px solid var(--charcoal);
border-radius: var(--radius-sm);
background: none;
color: var(--smoke);
font-family: var(--font-mono);
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.04em;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: var(--transition);
}
.btn-int-copy-sm:hover, .btn-int-copy-sm.copied-btn {
background: var(--charcoal);
color: var(--signal-white);
}
/* Light theme overrides — Integration Page */
/* Page header text */
[data-theme="light"] .int-page-header { border-bottom-color: #E0E0E0; }
[data-theme="light"] .int-page-title { color: #1A1A1A; }
[data-theme="light"] .int-page-subtitle { color: #555; }
[data-theme="light"] .int-page-subtitle code { background: rgba(184,134,11,0.1); color: #8B6914; }
/* Error banner */
[data-theme="light"] .int-error { background: rgba(211,47,47,0.07); border-color: rgba(211,47,47,0.25); }
/* Cards — white on light-grey page background so they pop */
[data-theme="light"] .int-card {
background: #FFFFFF;
border-color: #E0E0E0;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="light"] .int-card--info { border-color: rgba(21,101,192,0.18); }
[data-theme="light"] .int-card-title {
background: #F7F7F7;
border-bottom-color: #E8E8E8;
color: #B8860B;
}
/* Empty / loading states */
[data-theme="light"] .int-empty-title { color: #222; }
[data-theme="light"] .int-empty-desc { color: #666; }
[data-theme="light"] .int-loading-text { color: #777; }
[data-theme="light"] .int-spinner { border-color: #E0E0E0; border-top-color: #B8860B; }
/* Warning banner (revealed state) */
[data-theme="light"] .int-warning-banner {
background: rgba(230,81,0,0.06);
border-color: rgba(230,81,0,0.22);
color: #BF360C;
}
[data-theme="light"] .int-warning-icon { border-color: rgba(230,81,0,0.4); }
/* API key input */
[data-theme="light"] .int-key-input {
background: #F7F7F7;
border-color: #C99B1D;
color: #7A5C10;
}
[data-theme="light"] .int-key-input:focus { border-color: #B8860B; }
/* Configured state */
[data-theme="light"] .int-key-dot { box-shadow: 0 0 5px rgba(46,125,50,0.4); }
[data-theme="light"] .int-key-date { color: #777; }
/* Endpoints */
[data-theme="light"] .int-endpoint-row { border-bottom-color: #EBEBEB; }
[data-theme="light"] .int-endpoint-method {
color: #1565C0;
background: rgba(21,101,192,0.08);
border-color: rgba(21,101,192,0.2);
}
[data-theme="light"] .int-endpoint-name { color: #1A1A1A; }
[data-theme="light"] .int-endpoint-desc { color: #666; }
[data-theme="light"] .int-badge-quantitativa {
background: rgba(46,125,50,0.08);
color: #2E7D32;
border-color: rgba(46,125,50,0.2);
}
[data-theme="light"] .int-badge-qualitativa {
background: rgba(123,31,162,0.08);
color: #7B1FA2;
border-color: rgba(123,31,162,0.2);
}
[data-theme="light"] .int-badge-enrich {
background: rgba(21,101,192,0.08);
color: #1565C0;
border-color: rgba(21,101,192,0.2);
}
[data-theme="light"] .int-dim-chip[data-ondemand="true"] { color: #1565C0; }
/* URL row — slightly inset vs card */
[data-theme="light"] .int-endpoint-url-row {
background: #F3F3F3;
border-color: #DEDEDE;
}
[data-theme="light"] .int-url { color: #444; }
/* Curl block — inset code area */
[data-theme="light"] .int-curl-block {
background: #F3F3F3;
border-color: #DEDEDE;
color: #333;
}
/* Response tabs */
[data-theme="light"] .int-response-tabs-bar { background: #F7F7F7; border-bottom-color: #E8E8E8; }
[data-theme="light"] .int-rtab { color: #777; }
[data-theme="light"] .int-rtab:hover { color: #1A1A1A; }
[data-theme="light"] .int-rtab.active { color: #B8860B; border-bottom-color: #B8860B; }
/* Rate limits */
[data-theme="light"] .int-limit-row { background: #F3F3F3; border-color: #DEDEDE; }
[data-theme="light"] .int-limit-endpoint { color: #1A1A1A; }
[data-theme="light"] .int-limit-value { color: #B8860B; }
[data-theme="light"] .int-limit-note { color: #777; }
/* Buttons */
[data-theme="light"] .btn-int-secondary { color: #555; border-color: #CECECE; }
[data-theme="light"] .btn-int-secondary:hover { background: #EBEBEB; color: #1A1A1A; border-color: #BDBDBD; }
[data-theme="light"] .btn-int-copy,
[data-theme="light"] .btn-int-copy-sm { color: #666; border-color: #CECECE; }
[data-theme="light"] .btn-int-copy:hover,
[data-theme="light"] .btn-int-copy-sm:hover,
[data-theme="light"] .btn-int-copy.copied-btn,
[data-theme="light"] .btn-int-copy-sm.copied-btn { background: #EBEBEB; color: #1A1A1A; border-color: #BDBDBD; }
[data-theme="light"] .btn-int-danger { border-color: rgba(211,47,47,0.3); color: #C62828; }
[data-theme="light"] .btn-int-danger:hover { background: rgba(211,47,47,0.08); border-color: #C62828; }
/* ---------------------------------------------------------------------------
Role badges — exibidos no header ao lado do nome do usuario
--------------------------------------------------------------------------- */
.role-badge {
font-size: .7rem;
padding: .15rem .45rem;
border-radius: 3px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
margin-left: .4rem;
vertical-align: middle;
line-height: 1;
}
.role-badge[data-role="admin-duranium"] { background: #1a237e; color: #90caf9; }
.role-badge[data-role="admin"] { background: #1b5e20; color: #a5d6a7; }
.role-badge[data-role="analyst"] { background: #37474f; color: #b0bec5; }
[data-theme="light"] .role-badge[data-role="admin-duranium"] { background: #e8eaf6; color: #283593; }
[data-theme="light"] .role-badge[data-role="admin"] { background: #e8f5e9; color: #1b5e20; }
[data-theme="light"] .role-badge[data-role="analyst"] { background: #eceff1; color: #37474f; }
/* --- Responsive: sidebar vira overlay off-canvas --- */
@media (max-width: 880px) {
.app {
margin-left: 0;
}
.sidebar {
transform: translateX(-100%);
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
}
body.sidebar-mobile-open .sidebar {
transform: translateX(0);
}
body.sidebar-mobile-open .sidebar-toggle-icon {
transform: rotate(180deg);
}
.sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 99;
}
body.sidebar-mobile-open .sidebar-backdrop {
display: block;
}
}
/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ---------------------------------------------------------------------------
Usuarios (usuarios.html) — tabela de usuarios + form de criacao
--------------------------------------------------------------------------- */
.int-card-title-row {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--dark-surface);
padding: 10px var(--space-lg);
border-bottom: 1px solid var(--charcoal);
}
.int-card-title-row .int-card-title {
padding: 0;
border-bottom: none;
background: none;
}
.int-card-title-row .btn-int-primary {
padding: 6px 14px;
font-size: 0.7rem;
}
.usr-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8rem;
}
.usr-table th {
font-family: var(--font-mono);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--smoke);
padding: 6px 8px;
border-bottom: 1px solid var(--charcoal);
text-align: left;
}
.usr-table td {
padding: 8px;
border-bottom: 1px solid var(--charcoal);
color: var(--signal-white);
font-family: var(--font-body);
}
.usr-table tr:last-child td { border-bottom: none; }
.usr-table tr:hover td { background: rgba(255,255,255,0.02); }
.usr-table .hidden { display: none; }
.usr-role-pill {
font-size: 0.68rem;
padding: 0.15rem 0.5rem;
border-radius: 3px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.6;
}
.usr-role-pill[data-role="admin-duranium"] { background: #1a237e; color: #90caf9; }
.usr-role-pill[data-role="admin"] { background: #1b5e20; color: #a5d6a7; }
.usr-role-pill[data-role="analyst"] { background: #37474f; color: #b0bec5; }
[data-theme="light"] .usr-role-pill[data-role="admin-duranium"] { background: #e8eaf6; color: #283593; }
[data-theme="light"] .usr-role-pill[data-role="admin"] { background: #e8f5e9; color: #1b5e20; }
[data-theme="light"] .usr-role-pill[data-role="analyst"] { background: #eceff1; color: #37474f; }
.usr-status-active { color: var(--accent-green); }
.usr-status-inactive { color: var(--smoke); }
.usr-tenant-group.hidden { display: none; }
#usr-active-group.hidden { display: none; }
#usr-password-group.hidden { display: none; }
.usr-self-badge {
font-size: 0.65rem;
color: var(--smoke);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.usr-actions {
display: flex;
gap: 6px;
}
.usr-btn-icon {
padding: 4px 10px;
font-size: 0.68rem;
border-radius: 3px;
border: 1px solid var(--charcoal);
background: transparent;
color: var(--signal-white);
cursor: pointer;
}
.usr-btn-icon:hover { background: rgba(255,255,255,0.06); }
.usr-btn-danger {
border-color: var(--accent-red);
color: var(--accent-red);
}
.usr-btn-danger:hover { background: rgba(239,83,80,0.12); }
[data-theme="light"] .usr-btn-icon { color: var(--charcoal); }
[data-theme="light"] .usr-btn-icon:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .usr-btn-danger { color: var(--accent-red); }
/* ---------------------------------------------------------------------------
Painel de Controle — Tenants (index.html)
--------------------------------------------------------------------------- */
/* Tabela de tenants precisa de mais largura que os 780px padrao do .int-content */
.int-content--wide { max-width: 1100px; }
.tnt-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8rem;
}
.tnt-table th {
font-family: var(--font-mono);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--smoke);
padding: 6px 8px;
border-bottom: 1px solid var(--charcoal);
text-align: left;
}
.tnt-table td {
padding: 8px;
border-bottom: 1px solid var(--charcoal);
color: var(--signal-white);
font-family: var(--font-body);
vertical-align: middle;
}
.tnt-table tr:last-child td { border-bottom: none; }
.tnt-table tr:hover td { background: rgba(255,255,255,0.02); }
.tnt-slug {
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--smoke);
}
/* Badge de status da API key (reaproveita a linguagem visual do .role-badge) */
.tnt-key-badge {
display: inline-block;
font-size: 0.66rem;
padding: 0.15rem 0.5rem;
border-radius: 3px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.6;
}
.tnt-key-badge[data-active="true"] { background: #1b5e20; color: #a5d6a7; }
.tnt-key-badge[data-active="false"] { background: #37474f; color: #b0bec5; }
[data-theme="light"] .tnt-key-badge[data-active="true"] { background: #e8f5e9; color: #1b5e20; }
[data-theme="light"] .tnt-key-badge[data-active="false"] { background: #eceff1; color: #37474f; }
.tnt-modules-count {
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--smoke);
}
/* Modal de detalhe do tenant — mais largo que o .modal padrao (380px) */
.modal--wide { width: min(640px, 92vw); max-height: 88vh; overflow-y: auto; }
.tnt-detail-section {
margin-top: var(--space-lg);
padding-top: var(--space-md);
border-top: 1px solid var(--charcoal);
}
.tnt-detail-section:first-of-type { border-top: none; padding-top: 0; }
.tnt-detail-label {
font-family: var(--font-mono);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--smoke);
margin-bottom: var(--space-xs);
}
.tnt-endpoint-row {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-sm);
}
.tnt-endpoint-url {
flex: 1;
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--signal-white);
background: var(--void-black);
border: 1px solid var(--charcoal);
border-radius: var(--radius-sm);
padding: 6px 8px;
overflow-x: auto;
white-space: nowrap;
}
/* Grid de modulos contratados — toggle por modulo */
.tnt-modules-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--space-sm);
}
.tnt-module-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding: 8px 10px;
border: 1px solid var(--charcoal);
border-radius: var(--radius-sm);
background: var(--void-black);
}
.tnt-module-label {
font-size: 0.78rem;
color: var(--signal-white);
}
.tnt-module-key {
display: block;
font-family: var(--font-mono);
font-size: 0.62rem;
color: var(--smoke);
margin-top: 2px;
}
/* Toggle switch acessivel (checkbox nativo estilizado) */
.tnt-switch {
position: relative;
display: inline-block;
width: 38px;
height: 20px;
flex-shrink: 0;
}
.tnt-switch input {
opacity: 0;
width: 0;
height: 0;
}
.tnt-switch-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: var(--charcoal);
border-radius: 20px;
transition: var(--transition);
}
.tnt-switch-slider::before {
content: '';
position: absolute;
height: 14px;
width: 14px;
left: 3px;
bottom: 3px;
background: var(--signal-white);
border-radius: 50%;
transition: var(--transition);
}
.tnt-switch input:checked + .tnt-switch-slider { background: var(--gold-muted); }
.tnt-switch input:checked + .tnt-switch-slider::before { transform: translateX(18px); }
.tnt-switch input:focus-visible + .tnt-switch-slider { outline: 2px solid var(--gold-muted); outline-offset: 2px; }
/* Estado da API key dentro do detalhe (reaproveita padroes do .int-*) */
.tnt-key-reveal {
margin-top: var(--space-sm);
}
.tnt-key-row {
display: flex;
gap: var(--space-sm);
align-items: center;
}
.tnt-key-input {
flex: 1;
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--signal-white);
background: var(--void-black);
border: 1px solid var(--gold-muted);
border-radius: var(--radius-sm);
padding: 8px 10px;
}
.tnt-curl-block {
margin-top: var(--space-sm);
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--smoke);
background: var(--void-black);
border: 1px solid var(--charcoal);
border-radius: var(--radius-sm);
padding: 10px;
overflow-x: auto;
white-space: pre;
}
.tnt-detail-actions {
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
margin-top: var(--space-sm);
}
/* --- Zona de risco: exclusao de tenant (irreversivel, impacta o FraudGate) --- */
.tnt-danger-zone { border-top-color: rgba(239,83,80,0.25); }
.tnt-danger-text {
font-size: 0.78rem;
color: var(--smoke);
line-height: 1.6;
margin-bottom: var(--space-sm);
}
.tnt-danger-text code { font-family: var(--font-mono); color: var(--fog); }
/* Checklist do preflight: cada item e uma trava do servidor (ok x pendente). */
.tnt-check-list {
list-style: none;
margin: 0 0 var(--space-md);
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.tnt-check {
position: relative;
padding-left: 22px;
font-size: 0.78rem;
line-height: 1.6;
color: var(--fog);
}
.tnt-check::before {
position: absolute;
left: 0;
top: 0;
font-family: var(--font-mono);
font-weight: 700;
}
.tnt-check[data-ok="true"]::before { content: "OK"; font-size: 0.6rem; color: var(--accent-green); top: 3px; }
.tnt-check[data-ok="false"]::before { content: "\2715"; color: var(--accent-red); }
.tnt-check[data-ok="false"] { color: var(--accent-red); }
.modal .tnt-delete-ack {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
margin: var(--space-md) 0 0;
font-family: var(--font-body);
font-size: 0.78rem;
line-height: 1.5;
color: var(--fog);
text-transform: none;
letter-spacing: normal;
cursor: pointer;
}
.modal .tnt-delete-ack input { width: auto; margin-top: 2px; flex-shrink: 0; }
.tnt-delete-submit { width: 100%; margin-top: var(--space-md); }
.tnt-delete-submit:disabled {
opacity: 0.45;
cursor: not-allowed;
border-color: var(--charcoal);
color: var(--smoke);
}
.tnt-delete-submit:disabled:hover { background: none; border-color: var(--charcoal); }
/* ===========================================================================
Debug de Enriquecimento (debug.html) — prefixo .dbg-*
Reaproveita .int-card / .btn-int-* / tokens; adiciona o form de consulta,
o seletor de dimensoes e a renderizacao do retorno bruto.
=========================================================================== */
.dbg-form { display: flex; flex-direction: column; gap: var(--space-md); }
.dbg-field { display: flex; flex-direction: column; gap: 4px; }
.dbg-field label { font-size: 0.72rem; font-weight: 600; color: var(--smoke); }
.dbg-field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
}
@media (max-width: 720px) { .dbg-field-row { grid-template-columns: 1fr; } }
.dbg-field select,
.dbg-field input[type="text"] {
width: 100%;
padding: 9px 11px;
background: var(--void-black);
border: 1px solid var(--charcoal);
border-radius: var(--radius-sm);
color: var(--signal-white);
font-family: var(--font-body);
font-size: 0.85rem;
}
.dbg-field select:focus,
.dbg-field input[type="text"]:focus { border-color: var(--gold-muted); outline: none; }
.dbg-hint { font-size: 0.68rem; color: var(--ash); }
.dbg-req { color: var(--accent-orange); font-weight: 500; }
.dbg-muted { color: var(--smoke); font-size: 0.8rem; margin: 0; }
.dbg-dims-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
flex-wrap: wrap;
}
.dbg-dims-actions { display: flex; align-items: center; gap: var(--space-sm); }
.dbg-only-enabled { display: flex; align-items: center; gap: 5px; font-size: 0.7rem; color: var(--smoke); cursor: pointer; }
.btn-int-sm { padding: 4px 9px; font-size: 0.68rem; }
.dbg-dimensions {
display: flex;
flex-direction: column;
gap: var(--space-md);
max-height: 420px;
overflow-y: auto;
padding: var(--space-sm);
border: 1px solid var(--charcoal);
border-radius: var(--radius-sm);
background: var(--void-black);
}
.dbg-dim-group-title {
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--gold-muted);
margin-bottom: 6px;
}
.dbg-dim-list { display: flex; flex-direction: column; gap: 3px; }
.dbg-dim {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: 6px 8px;
border-radius: var(--radius-sm);
cursor: pointer;
}
.dbg-dim:hover { background: var(--charcoal); }
.dbg-dim--disabled { opacity: 0.55; }
.dbg-dim-label { font-size: 0.8rem; color: var(--signal-white); }
.dbg-dim-key { font-family: var(--font-mono); font-size: 0.65rem; color: var(--smoke); }
.dbg-tag {
font-family: var(--font-mono);
font-size: 0.56rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 2px 6px;
border-radius: 3px;
white-space: nowrap;
}
.dbg-dim .dbg-tag { margin-left: auto; }
.dbg-dim .dbg-tag ~ .dbg-tag { margin-left: 4px; }
.dbg-tag--on { background: rgba(102,187,106,0.15); color: var(--accent-green); }
.dbg-tag--off { background: transparent; border: 1px solid var(--charcoal); color: var(--ash); }
.dbg-tag--od { background: rgba(66,165,245,0.14); color: var(--accent-blue); }
.dbg-run-row { display: flex; align-items: center; gap: var(--space-md); }
/* Resultados */
.dbg-entity {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--space-sm);
}
.dbg-entity-item {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 10px;
border: 1px solid var(--charcoal);
border-radius: var(--radius-sm);
background: var(--void-black);
}
.dbg-entity-k { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--smoke); }
.dbg-entity-v { font-size: 0.85rem; color: var(--signal-white); font-family: var(--font-mono); }
.dbg-charged { margin-top: var(--space-sm); font-size: 0.75rem; color: var(--smoke); }
.dbg-charged code { color: var(--gold-muted); font-family: var(--font-mono); }
.dbg-result-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.dbg-result { border: 1px solid var(--charcoal); border-radius: var(--radius-sm); overflow: hidden; }
.dbg-result-head {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: 7px 10px;
background: var(--dark-surface);
flex-wrap: wrap;
}
.dbg-result-key { font-family: var(--font-mono); font-size: 0.78rem; color: var(--signal-white); font-weight: 700; }
.dbg-result-meta { font-size: 0.68rem; color: var(--smoke); margin-left: auto; }
.dbg-st {
font-family: var(--font-mono);
font-size: 0.58rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 2px 7px;
border-radius: 3px;
}
.dbg-st--ok { background: rgba(102,187,106,0.15); color: var(--accent-green); }
.dbg-st--skip { background: rgba(255,152,0,0.14); color: var(--accent-orange); }
.dbg-st--err { background: rgba(239,83,80,0.15); color: var(--accent-red); }
.dbg-raw {
margin: 0;
padding: 10px 12px;
background: var(--void-black);
color: var(--signal-white);
font-family: var(--font-mono);
font-size: 0.72rem;
line-height: 1.5;
overflow-x: auto;
white-space: pre;
border-top: 1px solid var(--charcoal);
}