/* ================================================================
SABIA v5.0 — Punto de entrada principal
sabia.css
Importa los 3 módulos en orden correcto.
Solo incluir ESTE fichero en los HTMLs del proyecto.
En cada HTML, antes de este CSS, añadir:
Uso por módulo:
· Admin:
· Autor:
· Frontend: no necesita clase de body
· DarkMode: añadir clase "dark-mode" al
================================================================ */
/* 1 · Variables y tokens visuales */
@import url('01-design-tokens.css');
/* 2 · Componentes UI reutilizables */
@import url('02-components.css');
/* 3 · Estructuras de página y responsive */
@import url('03-layouts.css');
/* ────────────────────────────────────────────────────────────
OVERRIDES ESPECÍFICOS DEL PROYECTO
(estilos únicos que no encajan en componentes genéricos)
────────────────────────────────────────────────────────────── */
/* Emoción tipográfica en títulos de sección dentro del admin */
.admin-content h1 {
font-family: var(--font-display);
letter-spacing: var(--ls-tight);
color: var(--verde-900);
}
/* Número de puntos SABIA */
.scrivax-points {
font-family: var(--font-display);
font-weight: var(--fw-bold);
color: var(--dorado-600);
}
.scrivax-points::after { content: ' ⭐'; font-size: 0.85em; }
/* Revenue amounts */
.revenue-amount {
font-family: var(--font-display);
font-weight: var(--fw-bold);
color: var(--verde-700);
font-size: var(--text-xl);
}
/* Código de licencia */
.license-code {
font-family: var(--font-mono);
font-size: var(--text-xs);
background: var(--verde-50);
border: 1px solid var(--verde-200);
border-radius: var(--r-sm);
padding: var(--sp-2) var(--sp-3);
color: var(--verde-700);
letter-spacing: 0.08em;
display: inline-block;
}
/* Health indicator dot */
.health-dot {
width: 8px; height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: var(--sp-1);
}
.health-dot.ok { background: var(--success); box-shadow: 0 0 0 3px rgba(74,155,126,0.2); }
.health-dot.warn { background: var(--warning); box-shadow: 0 0 0 3px rgba(212,165,116,0.2); }
.health-dot.error { background: var(--danger); box-shadow: 0 0 0 3px rgba(193,119,103,0.2); }
.health-dot.pulse { animation: pulse 1.5s infinite; }
/* Webhook status */
.webhook-status {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--text-xs);
font-weight: var(--fw-semibold);
}
/* AI streaming text */
.ai-stream-text {
font-size: var(--text-sm);
line-height: var(--lh-relaxed);
color: var(--color-text);
white-space: pre-wrap;
}
.ai-cursor::after {
content: '▊';
animation: pulse 0.8s infinite;
color: var(--verde-600);
}
/* Certificate badge display */
.certificate-badge {
background: linear-gradient(135deg, var(--verde-900) 0%, var(--verde-700) 100%);
border-radius: var(--r-xl);
padding: var(--sp-6);
text-align: center;
position: relative;
overflow: hidden;
border: 2px solid var(--dorado-600);
}
.certificate-badge::before {
content: '';
position: absolute; inset: 4px;
border: 1px solid rgba(212,165,116,0.3);
border-radius: calc(var(--r-xl) - 2px);
pointer-events: none;
}
.certificate-badge-title {
font-family: var(--font-display);
font-size: var(--text-2xl);
color: var(--dorado-300);
font-weight: var(--fw-light);
letter-spacing: var(--ls-wide);
margin-bottom: var(--sp-2);
}
.certificate-badge-name {
font-family: var(--font-display);
font-size: var(--text-4xl);
color: #fff;
font-weight: var(--fw-semibold);
}
/* Affiliate commission bar */
.commission-bar {
background: var(--verde-50);
border: 1px solid var(--verde-200);
border-radius: var(--r-lg);
padding: var(--sp-4) var(--sp-5);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
}
.commission-pct {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: var(--fw-bold);
color: var(--verde-700);
line-height: 1;
}
/* QA thread */
.qa-thread { display: flex; flex-direction: column; gap: var(--sp-4); }
.qa-message {
display: flex;
gap: var(--sp-3);
align-items: flex-start;
}
.qa-message.user { flex-direction: row-reverse; }
.qa-bubble {
max-width: 75%;
padding: var(--sp-3) var(--sp-4);
border-radius: var(--r-lg);
font-size: var(--text-sm);
line-height: var(--lh-relaxed);
}
.qa-message.user .qa-bubble { background: var(--verde-700); color: #fff; border-radius: var(--r-lg) var(--r-xs) var(--r-lg) var(--r-lg); }
.qa-message.ia .qa-bubble { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-xs) var(--r-lg) var(--r-lg) var(--r-lg); }
.qa-citation {
margin-top: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
background: var(--verde-50);
border-left: 2px solid var(--verde-400);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
font-size: var(--text-xs);
color: var(--verde-700);
font-style: italic;
}