@layer base, components, theme, utilities;
@layer base {
:root {
--color-bg: #ffffff;
--color-surface: #ffffff;
--color-surface-muted: #f5f7fb;
--color-surface-ghost: rgba(255, 255, 255, 0.92);
--color-primary: #F2B632;
--color-primary-strong: #0B3A67;
--color-accent: #1B5F9E;
--color-danger: #C0342C;
--color-danger-strong: #A12922;
--color-text: #0F172A;
--color-text-soft: #475569;
--color-border: #e2e8f0;
--shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.12);
--shadow-strong: 0 12px 24px rgba(15, 23, 42, 0.18);
/* Rediseño Fase 1 — escala de elevación de superficies */
--surface-1: #ffffff;
--surface-2: #f8fafc;
--surface-3: #f1f5f9;
--surface-card-grad: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.9) 100%);
/* Highlight interior superior (borde de luz tipo Linear) */
--hairline: rgba(15, 23, 42, 0.08);
--hairline-strong: rgba(15, 23, 42, 0.14);
--inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
/* Sombras multi-capa: contacto nítido + ambiente difuso */
--shadow-1: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.05);
--shadow-2: 0 2px 4px rgba(15,23,42,0.05), 0 6px 16px rgba(15,23,42,0.08);
--shadow-3: 0 4px 8px rgba(15,23,42,0.06), 0 16px 32px rgba(15,23,42,0.12);
/* Glow de acento (para hover y dark mode) */
--glow-primary: 0 0 0 1px rgba(242,182,50,0.0);
--glow-accent: 0 0 0 1px rgba(27,95,158,0.0);
/* Glass (navbar / sidebar) */
--glass-bg: rgba(255, 255, 255, 0.72);
--glass-blur: saturate(180%) blur(16px);
--glass-border: rgba(15, 23, 42, 0.08);
--panel-glass: rgba(255, 255, 255, 0.55);
/* Escala de espaciado unificada (vocabulario consistente) */
--space-1: 6px;
--space-2: 10px;
--space-3: 14px;
--space-4: 20px;
--space-5: 28px;
--space-6: 40px;
/* Estilo canónico de barras (igual para TODOS los gráficos de barras) */
--chart-bar-grad: linear-gradient(180deg, #1B5F9E 0%, #0B3A67 100%);
--chart-bar-grad-b: linear-gradient(180deg, #F2B632 0%, #D99A1E 100%);
--chart-bar-neg: linear-gradient(180deg, #C0342C 0%, #A12922 100%);
--chart-bar-radius: 6px;
--radius-lg: 16px;
--radius-md: 12px;
--radius-sm: 8px;
--dashboard-max-width: 1280px;
--font-headings: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
--font-body: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
--sidebar-width: 230px;
--sidebar-collapsed-width: 72px;
--sidebar-gap: 30px;
--sidebar-offset: calc(var(--sidebar-width) + var(--sidebar-gap));
--color-nav-bg: rgba(255, 255, 255, 0.94);
--color-nav-text: var(--color-text);
--color-nav-hover: var(--color-primary-strong);
--color-sidebar-bg: #ffffff;
--color-sidebar-text: #334155;
--color-sidebar-text-strong: #0f172a;
--color-sidebar-muted: #94a3b8;
--color-sidebar-hover: #f1f5f9;
--color-sidebar-active-bg: rgba(27, 95, 158, 0.12);
--color-sidebar-border: #e8edf4;
--color-sidebar-overlay: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.025) 100%);
--color-sidebar-shadow: 4px 0 24px -10px rgba(15, 23, 42, 0.12);
--color-sidebar-accent: var(--color-accent);
--color-sidebar-logo: url('/static/logo%20negro.webp');
--color-band-bg: #0B3A67;
}
html[data-theme="dark"] {
--color-bg: #0a1322;
--color-surface: #0f1e33;
--color-surface-muted: #132842;
--color-surface-ghost: rgba(15, 30, 51, 0.92);
--color-primary: #F2B632;
--color-primary-strong: #8BB6FF;
--color-accent: #4BA3F3;
--color-danger: #D24B43;
--color-danger-strong: #B23730;
--color-text: #F8FAFC;
--color-text-soft: #CBD5F5;
--color-border: rgba(255, 255, 255, 0.16);
--shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.45);
--shadow-strong: 0 14px 30px rgba(0, 0, 0, 0.55);
/* Rediseño Fase 1 — superficies que escalan en luz (dark) */
--surface-1: #101f36;
--surface-2: #16294473;
--surface-3: #1b3354;
--surface-card-grad: linear-gradient(180deg, rgba(22,41,68,0.55) 0%, rgba(15,30,51,0.55) 100%);
/* Hairlines claros + highlight interior tenue (sello Linear dark) */
--hairline: rgba(255, 255, 255, 0.10);
--hairline-strong: rgba(255, 255, 255, 0.18);
--inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
/* Sombras: más profundas y difusas sobre fondo oscuro */
--shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
--shadow-2: 0 2px 6px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.4);
--shadow-3: 0 6px 14px rgba(0,0,0,0.5), 0 20px 44px rgba(0,0,0,0.55);
/* Glows finos de acento (lo que hace 'vivo' el dark mode) */
--glow-primary: 0 0 0 1px rgba(242,182,50,0.25), 0 0 24px -6px rgba(242,182,50,0.35);
--glow-accent: 0 0 0 1px rgba(75,163,243,0.30), 0 0 24px -6px rgba(75,163,243,0.40);
/* Glass oscuro */
--glass-bg: rgba(13, 25, 43, 0.62);
--glass-blur: saturate(160%) blur(18px);
--glass-border: rgba(255, 255, 255, 0.10);
--panel-glass: rgba(13, 25, 43, 0.55);
/* Barras: en oscuro suben en luz (igual que ApexCharts en dark) */
--chart-bar-grad: linear-gradient(180deg, #4BA3F3 0%, #1B5F9E 100%);
--chart-bar-grad-b: linear-gradient(180deg, #F2B632 0%, #C9871A 100%);
--chart-bar-neg: linear-gradient(180deg, #D24B43 0%, #B23730 100%);
--color-nav-bg: rgba(10, 19, 34, 0.94);
--color-nav-text: #F8FAFC;
--color-nav-hover: #F2B632;
--color-sidebar-bg: #0B1C33;
--color-sidebar-text: rgba(255, 255, 255, 0.90);
--color-sidebar-text-strong: #ffffff;
--color-sidebar-muted: rgba(255, 255, 255, 0.55);
--color-sidebar-hover: rgba(255, 255, 255, 0.07);
--color-sidebar-active-bg: rgba(75, 163, 243, 0.16);
--color-sidebar-border: rgba(255, 255, 255, 0.10);
--color-sidebar-overlay: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.10) 100%);
--color-sidebar-shadow: 4px 0 24px -8px rgba(0, 0, 0, 0.35);
--color-sidebar-accent: var(--color-primary);
--color-sidebar-logo: url('/static/logo.webp');
--color-band-bg: #0F2747;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .idea-card,
html[data-theme="dark"] .productos-card,
html[data-theme="dark"] .credit-detail-card {
background: var(--color-surface);
background-image: var(--surface-card-grad);
border-color: var(--hairline);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
.icon {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: -0.125em;
flex-shrink: 0;
}
body {
font-family: var(--font-body);
/* Mesh claro DIRECCIONAL con azul de marca: diagonal marcada de claro
(arriba-izq) a azul medio (abajo-der) + halos navy en zona visible */
background-color: #c4d6ec;
background-image:
radial-gradient(900px 800px at 22% 4%, rgba(27, 95, 158, 0.38), transparent 55%),
radial-gradient(1000px 820px at 96% 100%, rgba(11, 58, 103, 0.34), transparent 58%),
linear-gradient(150deg, #eef4fc 0%, #cfdef1 45%, #aac5e4 100%);
background-repeat: no-repeat;
background-attachment: fixed;
color: var(--color-text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
html[data-theme="dark"] body {
background-color: #060c18;
/* Mesh oscuro reforzado: halo frío arriba-izq, cálido arriba-der, frío abajo */
background-image:
radial-gradient(1100px 820px at 0% -10%, rgba(75, 163, 243, 0.34), transparent 55%),
radial-gradient(1000px 760px at 108% 4%, rgba(242, 182, 50, 0.14), transparent 50%),
radial-gradient(1200px 900px at 50% 122%, rgba(27, 95, 158, 0.32), transparent 60%),
linear-gradient(180deg, #0d1a2c 0%, #060c18 100%);
background-repeat: no-repeat;
background-attachment: fixed;
}
body.sidebar-collapsed {
--sidebar-offset: calc(var(--sidebar-collapsed-width) + var(--sidebar-gap));
}
img { max-width: 100%; display: block; }
a { color: var(--color-primary-strong); text-decoration: none; font-weight: 400; }
a:hover { color: var(--color-primary); }
h1, h2, h3, h4, h5 {
font-family: var(--font-headings);
color: var(--color-primary);
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.02em;
}
h1 { font-size: 32px; margin-bottom: 14px; }
h2 { font-size: 26px; margin-bottom: 12px; }
h3 { font-size: 22px; margin-bottom: 10px; }
p, li { color: var(--color-text); }
ul { padding-left: 18px; }
/* Logo y navbar */
.logo-container {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 0;
}
.logo-img { height: 72px; width: auto; display: block; }
.nav-container {
width: 92%;
max-width: 1200px;
margin: 14px auto 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
position: relative;
z-index: 2;
}
.nav-links { display: flex; align-items: center; gap: 16px; }
.nav-links a { color: #ffffff; border-bottom: 2px solid transparent; padding: 6px 0; }
.nav-links a:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.btn-nav { background: var(--color-primary-strong); padding: 10px 14px; border-radius: 10px; font-weight: 400; } /* color → @layer components */
.btn-nav--signup { padding: 12px 22px; min-width: 110px; }
.btn-nav--logout { padding: 12px 20px; font-size: 0.95rem; min-width: 96px; }
.btn-nav:hover { background: #073566; } /* color → @layer components */
/* Layout contenedor */
.page {
width: 92%;
max-width: 1200px;
background: var(--color-surface);
margin: 24px auto 36px;
padding: 32px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
}
.page.wide { max-width: 1280px; width: 95%; }
.page--flat {
background: transparent;
box-shadow: none;
padding: 0;
}
/* Utilidades */
/* .text-white / .text-danger / .text-muted → @layer utilities */
.text-end { text-align: right; }
.text-center { text-align: center; }
.fw-semibold { font-weight: 600; }
/* Escala de espaciado (Bootstrap-compatible, base 14px en el paso 3) */
/* Utilidades de espaciado basadas en la escala --space-* */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.ms-2 { margin-left: var(--space-2); }
.ms-3 { margin-left: var(--space-3); }
.me-1 { margin-right: var(--space-1); }
.me-2 { margin-right: var(--space-2); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
/* Utilidades de layout/texto reutilizables (reemplazan estilos inline
repetidos; mismo render, pero centralizado y consistente). */
.nowrap { white-space: nowrap; }
.lh-1 { line-height: 1; }
.overflow-x-auto { overflow-x: auto; }
.justify-end { justify-content: flex-end; }
/* Fila/banda TOTAL de tablas: usa el token de banda (se adapta a tema
claro/oscuro, antes era un navy fijo #1f4e78 que no cambiaba). */
.row-band, .row-band td { background: var(--color-band-bg); color: #ffffff; }
/* Etiqueta sobre fondo de color (banda): texto claro centralizado. */
.label-light { color: #ffffff; }
.page-title { color: var(--color-primary-strong); font-weight: 800; letter-spacing: 0.2px; }
/* Encabezado de sección reutilizable: título a la izquierda, acción
principal a la derecha (patrón consistente en listas de finanzas). */
.section-header {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4);
}
.section-header .page-title { margin: 0; }
/* Mosaico de KPIs (reemplaza listas con viñetas): valor grande + etiqueta */
.stat-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-3);
}
.stat-tile {
padding: var(--space-3) var(--space-4);
border: 1px solid var(--hairline);
border-radius: var(--radius-md);
background: var(--color-surface-muted);
}
.stat-tile-value {
display: block; font-size: 1.25rem; font-weight: 700;
color: var(--color-text); line-height: 1.2; word-break: break-word;
}
.stat-tile-label {
display: block; margin-top: 4px;
font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--color-text-soft);
}
/* Lista clave-valor formal (reemplaza ) */
.data-list { display: grid; gap: 0; }
.data-list-item {
display: flex; justify-content: space-between; align-items: baseline;
gap: var(--space-3); padding: 3px 0;
border-bottom: 1px solid var(--hairline);
}
.data-list-item:last-child { border-bottom: none; }
.data-list-label { color: var(--color-text-soft); font-size: 0.76rem; }
.data-list-value { font-weight: 500; font-size: 0.8rem; color: var(--color-text); text-align: right; }
/* Lista sin viñetas, formal (listas explicativas o de enlaces en tarjetas) */
.info-list { list-style: none; padding-left: 0; margin: 0; }
.info-list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); line-height: 1.55; }
.info-list li:last-child { border-bottom: none; }
/* Slider (estacionalidad): estilizado acorde al diseño, reemplaza el nativo */
input[type="range"].form-range {
-webkit-appearance: none; appearance: none;
width: 100%; height: 6px; margin: 0; padding: 0;
background: transparent; cursor: pointer;
}
input[type="range"].form-range::-webkit-slider-runnable-track {
height: 6px; border-radius: 999px;
background: var(--color-surface-muted); border: 1px solid var(--color-border);
}
input[type="range"].form-range::-moz-range-track {
height: 6px; border-radius: 999px;
background: var(--color-surface-muted); border: 1px solid var(--color-border);
}
input[type="range"].form-range::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
background: var(--color-accent); border: 2px solid #ffffff;
box-shadow: var(--shadow-1);
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
input[type="range"].form-range::-moz-range-thumb {
width: 18px; height: 18px; border-radius: 50%;
background: var(--color-accent); border: 2px solid #ffffff;
box-shadow: var(--shadow-1);
}
input[type="range"].form-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"].form-range:focus { outline: none; }
input[type="range"].form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(27,95,158,0.25); }
input[type="range"].form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(27,95,158,0.25); }
/* Canvas del donut de inversionistas (ApexCharts) */
.investor-pie-canvas { min-height: 320px; width: 100%; }
.titulo-ideas { color: var(--color-primary-strong); font-weight: 800; }
.titulo-amarillo { color: var(--color-primary); }
.sin-ideas { color: var(--color-text-soft); }
.breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 15px;
font-size: 0.95rem;
color: var(--color-text-soft);
margin-bottom: 12px;
}
.breadcrumb-link { color: var(--color-accent); font-weight: 400; }
.breadcrumb-link:hover { color: var(--color-primary); }
.breadcrumb-current { color: var(--color-text); font-weight: 500; }
.breadcrumb-sep { color: var(--color-text-soft); margin: 0 6px; }
/* ═══════════════════════════════════════════════════════════
SISTEMA DE BOTONES — unificado por tipo (función)
· Claro: relleno sólido del color · Oscuro: sin fondo, texto + borde del color
· Cada tipo agrupa el nombre propio (btn--X) y el alias Bootstrap (btn-X)
Tipos: PRIMARY 🟡 amarillo · SECONDARY 🔵 azul · DANGER 🔴 rojo · GHOST · DISABLED
═══════════════════════════════════════════════════════════ */
/* Base: geometría compartida (Primary por defecto: amarillo, texto blanco) */
button, .btn, .idea-btn, .btn-nav, .btn-new-idea {
font-family: var(--font-body);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 14px;
border-radius: 10px;
font-weight: 400;
border: 1px solid transparent;
background: var(--color-primary);
color: #ffffff;
cursor: pointer;
text-decoration: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
button:hover, .btn:hover, .idea-btn:hover, .btn-new-idea:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
/* ── PRIMARY (amarillo) ──────────────────────────────────── */
.btn--primary, .btn-primary, .btn-success,
.idea-btn--convert, .btn-new-idea, .btn-guardar {
background: var(--color-primary);
color: #ffffff;
border-color: var(--color-primary);
}
.btn--primary:hover, .btn-primary:hover, .btn-success:hover,
.idea-btn--convert:hover, .btn-new-idea:hover, .btn-guardar:hover {
background: #D4A21F;
color: #ffffff;
border-color: #D4A21F;
}
/* ── SECONDARY (azul) ────────────────────────────────────── */
.btn--secondary, .btn-secondary, .idea-btn--edit {
background: var(--color-accent);
color: #ffffff;
border-color: var(--color-accent);
}
.btn--secondary:hover, .btn-secondary:hover, .idea-btn--edit:hover {
background: #073566;
color: #ffffff;
border-color: #073566;
}
/* ── DANGER (rojo) ───────────────────────────────────────── */
.btn--danger, .btn-danger, .idea-btn--delete, .btn-eliminar {
background: var(--color-danger);
color: #ffffff;
border-color: var(--color-danger);
}
.btn--danger:hover, .btn-danger:hover, .idea-btn--delete:hover, .btn-eliminar:hover {
background: var(--color-danger-strong);
color: #ffffff;
border-color: var(--color-danger-strong);
}
/* ── GHOST (terciario, sin relleno) ──────────────────────── */
.btn--ghost,
.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger {
background: transparent;
border-color: var(--color-border);
color: var(--color-text);
box-shadow: none;
}
.btn--ghost:hover,
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-danger:hover {
background: var(--color-surface-muted);
border-color: var(--color-border);
color: var(--color-text);
}
/* ── MUTED / DISABLED ────────────────────────────────────── */
.btn--muted { background: #6b7280; color: #ffffff; border-color: #6b7280; }
.idea-btn--disabled,
.btn:disabled, .idea-btn:disabled, button:disabled {
background: #94a3b8;
color: #f8fafc;
border-color: #94a3b8;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
/* ── Variante pequeña ────────────────────────────────────── */
.btn-sm { padding: 7px 11px; font-size: 0.85rem; border-radius: 8px; gap: 5px; }
/* ═══ MODO OSCURO — sin fondo, texto + borde del color del tipo ═══ */
html[data-theme="dark"] .btn--primary,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .idea-btn--convert,
html[data-theme="dark"] .btn-new-idea,
html[data-theme="dark"] .btn-guardar {
background: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
box-shadow: none;
}
html[data-theme="dark"] .btn--primary:hover,
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-success:hover,
html[data-theme="dark"] .idea-btn--convert:hover,
html[data-theme="dark"] .btn-new-idea:hover,
html[data-theme="dark"] .btn-guardar:hover {
background: rgba(242, 182, 50, 0.12);
color: var(--color-primary);
border-color: var(--color-primary);
box-shadow: none;
}
html[data-theme="dark"] .btn--secondary,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .idea-btn--edit {
background: transparent;
color: var(--color-accent);
border-color: var(--color-accent);
box-shadow: none;
}
html[data-theme="dark"] .btn--secondary:hover,
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .idea-btn--edit:hover {
background: rgba(75, 163, 243, 0.12);
color: var(--color-accent);
border-color: var(--color-accent);
box-shadow: none;
}
html[data-theme="dark"] .btn--danger,
html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .idea-btn--delete,
html[data-theme="dark"] .btn-eliminar {
background: transparent;
color: var(--color-danger);
border-color: var(--color-danger);
box-shadow: none;
}
html[data-theme="dark"] .btn--danger:hover,
html[data-theme="dark"] .btn-danger:hover,
html[data-theme="dark"] .idea-btn--delete:hover,
html[data-theme="dark"] .btn-eliminar:hover {
background: rgba(210, 75, 67, 0.14);
color: var(--color-danger);
border-color: var(--color-danger);
box-shadow: none;
}
/* Ghost en oscuro: hereda var(--color-text/border) — ya correcto vía tokens */
/* Cards */
.card, .idea-card, .productos-card, .credit-detail-card {
background: var(--color-surface);
background-image: var(--surface-card-grad);
border: 1px solid var(--hairline);
border-radius: var(--radius-md);
padding: 20px 22px;
box-shadow: var(--shadow-2), var(--inner-highlight);
transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
color: var(--color-text);
margin-bottom: 16px;
/* Permite que la tarjeta se encoja dentro de grids/flex en pantallas
pequeñas en vez de desbordar. */
min-width: 0;
}
.card:hover, .idea-card:hover, .productos-card:hover, .credit-detail-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-3), var(--inner-highlight);
border-color: var(--hairline-strong);
}
html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .idea-card:hover,
html[data-theme="dark"] .productos-card:hover,
html[data-theme="dark"] .credit-detail-card:hover {
box-shadow: var(--shadow-3), var(--inner-highlight), var(--glow-accent);
border-color: rgba(75,163,243,0.30);
}
.idea-card { background: var(--color-surface-ghost); display: flex; flex-direction: column; gap: 12px; }
.idea-card h3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Nombre de activo/entidad en columna sticky de tabla: truncar si es muy largo */
.sticky-name-col { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idea-card.home-card { justify-content: flex-start; }
.idea-info { display: flex; flex-direction: column; gap: 6px; }
.idea-title {
font-family: var(--font-headings);
color: var(--color-primary-strong);
font-size: 30px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
}
.idea-card.detail-card { color: var(--color-text); text-shadow: none; padding: var(--space-5); }
.idea-card.detail-card h2, .idea-card.detail-card h3, .idea-card.detail-card p { color: var(--color-text); }
.idea-detail-row { display: flex; flex-direction: row; gap: 24px; flex-wrap: wrap; }
.idea-detail-text { flex: 1 1 320px; }
.idea-detail-meta { flex: 1 1 280px; }
/* Tarjeta de detalle del proyecto: info a la izquierda, imagen a la
derecha estirada a la altura del contenido (sin hueco vacío). */
.project-detail-row { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: stretch; }
.project-detail-info { flex: 1 1 460px; display: flex; flex-direction: column; gap: var(--space-5); min-width: 300px; }
.idea-detail-media { flex: 1 1 320px; max-width: 440px; margin-left: auto; min-height: 220px; }
.project-detail-row .idea-detail-meta { order: 0; }
.project-detail-row .idea-detail-text { order: 1; }
.project-detail-row .idea-detail-media { order: 2; }
/* La imagen va en posición absoluta para NO empujar la altura de la
tarjeta: rellena exactamente la altura del contenido (detalles +
descripción). Si la descripción es corta, la foto es más pequeña. */
.idea-detail-media .detail-media {
position: relative;
width: 100%; height: 100%; min-height: 220px; margin-bottom: 0;
border-radius: var(--radius-md); box-shadow: var(--shadow-2);
}
.idea-detail-media .detail-media-img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
}
/* Título de sección minimalista (mayúsculas, mutado) */
.detail-section-title {
font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em;
font-weight: 700; color: var(--color-text-soft);
margin: 0 0 var(--space-3); display: block;
}
/* Cuadrícula clave-valor (reemplaza las viñetas) */
.detail-meta-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 var(--space-5);
}
.detail-meta-item {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline);
}
.detail-meta-icon {
flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 17px; color: var(--color-accent);
background: var(--color-surface-muted); border: 1px solid var(--color-border);
}
.detail-meta-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.detail-meta-label {
font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
color: var(--color-text-soft); line-height: 1.4;
}
.detail-meta-value {
font-size: 0.95rem; font-weight: 500; color: var(--color-text);
line-height: 1.3; word-break: break-word;
}
.detail-desc-text { color: var(--color-text-soft); line-height: 1.6; margin: 0; }
@media (max-width: 640px) {
.detail-meta-grid { grid-template-columns: 1fr; }
.idea-detail-media { max-width: none; }
}
.confirm-card { display: block; }
.confirm-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.confirm-actions form { margin: 0; }
.idea-actions, .idea-actions-bottom { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
/* ── Gráficas interactivas (productos, servicios, gastos, presupuesto) ── */
.spark-bar, .bar-item {
position: relative; cursor: pointer; border-radius: var(--chart-bar-radius) var(--chart-bar-radius) 0 0; min-width: 2px; flex: 1;
background: var(--chart-bar-grad);
transition: transform 240ms cubic-bezier(0.34,1.56,0.64,1), filter 200ms ease, box-shadow 200ms ease;
will-change: transform, filter;
animation: chartBarIn 480ms ease-out backwards;
}
.spark-bar:nth-child(3n+2), .bar-item:nth-child(3n+2) { animation-delay: 20ms; }
.spark-bar:nth-child(3n+3), .bar-item:nth-child(3n+3) { animation-delay: 40ms; }
.spark-bar:hover, .bar-item:hover {
filter: brightness(1.45) saturate(1.2);
transform: scaleX(1.12) scaleY(1.06);
box-shadow: 0 -8px 24px rgba(242,182,50,.55), 0 0 0 1px rgba(242,182,50,.25);
z-index: 10;
}
.stack-bar {
position: relative; cursor: pointer; min-width: 2px; flex: 1; height: 100%;
display: flex; flex-direction: column; justify-content: flex-end;
transition: transform 240ms cubic-bezier(0.34,1.56,0.64,1), filter 200ms ease, box-shadow 200ms ease;
will-change: transform, filter;
}
.stack-bar:hover {
filter: brightness(1.3) saturate(1.1);
transform: scaleX(1.12) scaleY(1.05);
box-shadow: 0 -8px 24px rgba(242,182,50,.5), 0 0 0 1px rgba(242,182,50,.25);
z-index: 10;
}
/* Contenedor único de la barra: recorta con la punta redondeada,
garantizando una sola barra continua de dos colores (sin gaps). */
.stack-fill {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
border-radius: 0;
overflow: hidden;
}
.stack-seg { width: 100%; }
.stack-seg--a { background: var(--chart-bar-grad); }
.stack-seg--b { background: var(--chart-bar-grad-b); }
.spark-bar::after, .bar-item::after, .stack-bar::after {
content: attr(data-tip);
position: absolute; left: 50%; bottom: calc(100% + 12px);
transform: translateX(-50%) translateY(6px);
background: rgba(7,33,61,.96); color: #f0f4ff;
font-size: 11.5px; font-weight: 600; padding: 7px 13px; border-radius: 9px;
white-space: nowrap; opacity: 0; pointer-events: none;
transition: opacity 220ms ease, transform 220ms ease;
box-shadow: 0 6px 22px rgba(0,0,0,.55);
border: 1px solid rgba(242,182,50,.3);
z-index: 100; letter-spacing: .015em;
}
.spark-bar:hover::after, .bar-item:hover::after, .stack-bar:hover::after {
opacity: 1; transform: translateX(-50%) translateY(0);
}
.chart-area-inner {
display: flex; align-items: flex-end; gap: 2px; padding: 8px 8px 0;
border: 1px solid var(--color-border); border-radius: 12px;
overflow: visible; position: relative;
background: linear-gradient(180deg, var(--color-surface-muted) 0%, var(--color-surface) 100%);
}
.chart-gridlines {
position: absolute; inset: 8px 8px 0 8px; display: flex;
flex-direction: column; justify-content: space-between; pointer-events: none; z-index: 0;
}
.chart-gridline { width: 100%; height: 1px; background: rgba(148,163,184,.12); }
html[data-theme="dark"] .chart-gridline { background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .chart-year { border-top-color: rgba(255,255,255,0.10); }
.chart-years {
display: flex; margin-top: 5px; overflow: hidden; padding: 0 8px;
}
.chart-year {
flex: 12; text-align: center; font-size: 9.5px; font-weight: 700;
color: var(--color-muted, #64748b); text-transform: uppercase; letter-spacing: .06em;
border-top: 1.5px solid rgba(148,163,184,.22); padding-top: 3px;
}
@keyframes chartBarIn {
from { opacity: 0; clip-path: inset(100% 0 0 0); }
to { opacity: 1; clip-path: inset(0% 0 0 0); }
}
.btn-comparar-escenarios { display: flex; align-items: center; gap: 8px; width: calc(100% - 32px); margin-top: 10px; padding: 10px 14px; background: linear-gradient(135deg, #07213d, #0b3a67); color: #F2B632 !important; font-size: .82rem; font-weight: 700; border-radius: 10px; text-decoration: none !important; letter-spacing: .02em; transition: opacity .18s; }
.btn-comparar-escenarios:hover { opacity: .88; transform: translateY(-1px); }
/* ── Tarjeta de grupo de escenarios ────────────────── */
.proyecto-grupo-card { background: var(--color-surface); border: 2px solid #F2B632; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.grupo-proyecto-summary { list-style: none; cursor: pointer; }
.grupo-proyecto-summary::-webkit-details-marker { display: none; }
.grupo-proyecto-summary::marker { display: none; }
/* La imagen ya tiene margin-bottom:10px de entity-card-media; aquí la quitamos */
.grupo-proyecto-summary .entity-card-media { margin-bottom: 0; border-radius: 0; border: none; border-bottom: 1px solid var(--color-border); }
.grupo-proyecto-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.grupo-proyecto-info { flex: 1; min-width: 0; }
.grupo-chevron { color: #F2B632; font-size: 1rem; transition: transform .25s; flex-shrink: 0; }
.proyecto-grupo-card[open] .grupo-chevron { transform: rotate(180deg); }
.escenarios-count-badge { display: inline-block; background: #F2B632; color: #07213d; font-size: .72rem; font-weight: 800; padding: 2px 10px; border-radius: 20px; margin-bottom: 6px; letter-spacing: .04em; }
.grupo-proyecto-titulo { font-size: 1.05rem; font-weight: 800; margin: 0 0 4px; color: var(--color-text); white-space: normal; overflow: hidden; text-overflow: ellipsis; }
.grupo-proyecto-hint { font-size: .8rem; color: var(--color-muted); margin: 0; }
.escenarios-expanded-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; padding: 14px 16px; border-top: 1px solid var(--color-border); background: var(--color-surface-muted); }
.mini-escenario-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.escenario-chip { display: inline-block; font-weight: 700; font-size: .8rem; color: var(--color-text); background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: 6px; padding: 3px 8px; }
.mini-escenario-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-escenario-actions .idea-btn { font-size: .75rem; padding: 6px 10px; }
.idea-btn--ingresar { background: #1b5f9e; color: #ffffff; }
.idea-btn--ingresar:hover { background: #154d82; color: #ffffff; }
html[data-theme="dark"] .idea-btn--ingresar { background: #2176c7; }
html[data-theme="dark"] .idea-btn--ingresar:hover { background: #1b5f9e; }
html[data-theme="dark"] .proyecto-grupo-card { border-color: #F2B632; }
html[data-theme="dark"] .mini-escenario-card { background: rgba(255,255,255,.04); }
.proyeccion-section { display: flex; flex-direction: column; gap: 12px; }
.proyeccion-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chart-title { margin-bottom: 16px; }
.view-toggle-group, .export-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.view-toggle.is-active { background: var(--color-primary-strong); color: #ffffff; }
.view-toggle.is-active:hover { background: #073566; color: #ffffff; }
.export-btn { background: transparent; color: var(--color-text); border-color: var(--color-border); box-shadow: none; }
.export-btn:hover { background: var(--color-surface-muted); color: var(--color-text); }
.export-btn--icon {
width: 38px;
height: 38px;
padding: 0;
border-radius: 10px;
font-size: 1rem;
}
.export-btn--icon .icon { font-size: 1rem; }
/* KPI dashboard */
.kpi-dashboard-top {
display: flex;
flex-direction: column;
gap: 16px;
align-items: stretch;
}
.kpi-section-title {
font-size: 14px;
margin-bottom: 8px;
color: var(--color-primary-strong);
font-family: var(--font-headings);
}
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
}
.kpi-grid--compact {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.kpi-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 12px 14px;
box-shadow: var(--shadow-soft);
display: flex;
flex-direction: column;
gap: 6px;
min-height: 92px;
/* Permite que la tarjeta se encoja dentro del grid en pantallas
pequeñas (sin esto, el contenido la fuerza a desbordar/recortarse). */
min-width: 0;
overflow: hidden;
}
.kpi-card--compact {
padding: 10px 12px;
min-height: 78px;
}
.kpi-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--color-text-soft);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.kpi-value {
/* Escala con el ancho disponible y parte líneas si el número es muy
largo, para que nunca se recorte en pantallas pequeñas. */
font-size: clamp(15px, 2.6vw, 20px);
font-weight: 800;
color: var(--color-primary-strong);
line-height: 1.2;
overflow-wrap: anywhere;
word-break: break-word;
}
.kpi-meta { font-size: 12px; color: var(--color-text-soft); }
.kpi-selector-card { background: var(--color-surface); }
.kpi-selector-group { margin-top: 10px; }
.kpi-selector-section {
border-bottom: 1px solid var(--color-border);
padding: 0;
background: transparent;
}
.kpi-selector-section:last-of-type { border-bottom: none; }
.kpi-selector-section + .kpi-selector-section { margin-top: 0; }
.kpi-selector-section[open] { background: transparent; }
.kpi-selector-summary {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
cursor: pointer;
padding: 10px 0;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-soft);
user-select: none;
}
.kpi-selector-summary::-webkit-details-marker { display: none; }
.kpi-selector-summary::after {
content: "▸";
font-size: 0.7rem;
color: var(--color-text-soft);
transition: transform 0.15s ease;
flex-shrink: 0;
}
.kpi-selector-section[open] > .kpi-selector-summary::after { transform: rotate(90deg); }
.kpi-summary-count {
font-size: 0.72rem; color: var(--color-text-soft);
font-weight: 500; margin-left: auto;
}
.kpi-selector-grid {
display: flex;
flex-direction: column;
padding-bottom: 6px;
}
.kpi-selector-item {
display: flex;
align-items: center;
gap: 10px;
padding: 5px 0;
border-bottom: 1px solid var(--hairline);
font-size: 0.82rem;
color: var(--color-text);
cursor: pointer;
}
.kpi-selector-item:last-child { border-bottom: none; }
.kpi-selector-item input[type="checkbox"] {
flex-shrink: 0;
width: 14px; height: 14px;
accent-color: var(--color-accent);
cursor: pointer;
margin: 0;
}
.kpi-table-card { margin-top: 14px; }
.kpi-table-card table { width: 100%; }
.kpi-table-card td { vertical-align: top; }
.kpi-hint { color: var(--color-text-soft); font-size: 12px; }
.investor-card { display: flex; flex-direction: column; gap: 14px; }
.investor-card-header { display: flex; flex-direction: column; gap: 12px; }
.investor-card-body { display: flex; flex-direction: column; gap: 12px; }
.investor-card-section { margin-top: 6px; }
.investor-card-chart { margin-top: 8px; }
.investor-chart-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 12px;
min-height: 220px;
}
.investor-summary-grid {
display: grid;
grid-template-columns: minmax(240px, 1fr) minmax(220px, 320px);
gap: 16px;
align-items: center;
}
.pie-chart-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pie-chart {
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid var(--color-border);
background: var(--color-surface-muted);
box-shadow: var(--shadow-soft);
}
.pie-chart-empty { text-align: center; }
.pie-legend { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.pie-legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text); }
.pie-legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid var(--color-border);
}
@media (max-width: 900px) {
.investor-summary-grid { grid-template-columns: 1fr; }
.pie-chart { width: 180px; height: 180px; }
}
.dashboard-chart-stack { display: flex; flex-direction: column; gap: 12px; }
.dashboard-items-grid {
--dashboard-row-height: 104px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: var(--dashboard-row-height);
gap: 12px;
align-items: stretch;
}
.dashboard-items-grid--compact { --dashboard-row-height: 88px; }
.dashboard-config-stack { display: flex; flex-direction: column; gap: 12px; }
.dashboard-chart-card {
display: flex;
flex-direction: column;
gap: 5px;
height: 100%;
min-height: 0;
padding: 8px 10px;
margin-bottom: 0;
overflow: hidden;
}
.dashboard-item { cursor: grab; user-select: none; }
.dashboard-item.dragging { opacity: 0.6; cursor: grabbing; }
.dashboard-item--kpi { align-self: start; }
.dashboard-item--chart {
grid-column: span 2;
grid-row: span 3;
min-width: 320px;
align-self: stretch;
}
.dashboard-chart-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.dashboard-chart-header h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0; }
.dashboard-chart-controls {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.dashboard-chart-select {
min-width: 120px;
padding: 3px 8px;
border-radius: 6px;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
font-size: 12px;
}
.dashboard-chart-canvas { flex: 1 1 0; min-height: 0; width: 100%; max-width: 100%; overflow: hidden; }
.dashboard-chart-canvas .apexcharts-canvas { max-width: 100% !important; }
.dashboard-chart-canvas svg { overflow: hidden; }
.dashboard-chart {
display: grid;
grid-template-columns: minmax(84px, 110px) 1fr;
gap: 10px;
align-items: stretch;
height: 100%;
}
.dashboard-chart-axis {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
padding: 8px 15px 8px 0;
font-size: 11px;
color: var(--color-text-soft);
text-align: right;
white-space: nowrap;
}
.dashboard-chart-bars {
display: flex;
align-items: flex-end;
height: 100%;
gap: 3px;
padding: 8px;
background: var(--color-surface-muted);
border: 1px solid var(--color-border);
border-radius: 8px;
overflow: hidden;
position: relative;
}
.dashboard-chart-bar-wrap {
flex: 1;
min-width: 2px;
position: relative;
height: 100%;
}
.dashboard-chart-bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: var(--color-accent);
border-radius: 4px 4px 0 0;
transition: transform 0.15s ease, filter 0.15s ease;
}
.dashboard-chart-bar--neg { background: var(--color-danger); }
.dashboard-chart-bar:hover {
filter: brightness(1.12);
transform: scaleY(1.02);
}
.dashboard-chart-zero {
position: absolute;
left: 8px;
right: 8px;
height: 1px;
background: var(--color-border);
opacity: 0.7;
}
.dashboard-item--chart-tall { grid-row: span 3; }
.dashboard-chart-controls--tight { gap: 4px; }
.dashboard-chart-controls--tight .dashboard-chart-select {
min-width: 120px;
padding: 5px 8px;
}
.dashboard-chart-empty {
border: 1px dashed var(--color-border);
border-radius: 10px;
padding: 24px;
text-align: center;
font-size: 13px;
color: var(--color-text-soft);
}
/* Rediseño Fase 3: estado vacío ilustrado con mascota robot */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 10px;
padding: 32px 24px;
color: var(--color-text-soft);
}
.empty-state-robot {
width: 110px;
height: auto;
opacity: 0.92;
filter: drop-shadow(0 8px 18px rgba(15, 23, 42, 0.18));
animation: kuent-float 3.5s ease-in-out infinite;
}
html[data-theme="dark"] .empty-state-robot {
filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.5));
}
.empty-state-title {
font-family: var(--font-headings);
font-weight: 700;
font-size: 1.05rem;
color: var(--color-text);
margin: 0;
}
.empty-state-msg { margin: 0; font-size: 0.92rem; max-width: 360px; }
.empty-state-action { margin-top: 6px; }
.empty-state--compact { padding: 18px 14px; gap: 6px; }
.empty-state--compact .empty-state-robot { width: 66px; }
@keyframes kuent-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@media (max-width: 900px) {
.dashboard-item--chart {
grid-column: span 1;
grid-row: span 1;
min-width: 0;
}
.dashboard-item--chart-tall { grid-row: span 1; }
.dashboard-items-grid { grid-auto-rows: auto; }
}
/* Grids de tarjetas */
.ideas-grid, .home-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
width: 100%;
margin-top: 16px;
}
.card p, .card li,
.idea-card p, .idea-card li,
.productos-card p, .productos-card li,
.credit-detail-card p, .credit-detail-card li { color: var(--color-text); }
/* Media helpers */
.entity-card-media {
width: 100%;
height: 140px;
border-radius: 12px;
overflow: hidden;
background: var(--color-surface-muted);
border: 1px solid var(--color-border);
margin-bottom: 10px;
}
.entity-card-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.detail-media {
width: 100%;
height: 220px;
border-radius: 14px;
overflow: hidden;
background: var(--color-surface-muted);
border: 1px solid var(--color-border);
margin-bottom: 12px;
}
.detail-media-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.form-image-preview {
width: 100%;
max-width: 280px;
height: 160px;
border-radius: 12px;
overflow: hidden;
background: var(--color-surface-muted);
border: 1px dashed var(--color-border);
margin-top: 8px;
}
.form-image-preview-img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Hero y home */
.hero-section {
background-image:
radial-gradient(900px 400px at 20% 0%, rgba(27, 95, 158, 0.18), transparent 60%),
linear-gradient(145deg, #07213d 0%, #0B3A67 55%, #1B5F9E 100%);
background-repeat: no-repeat;
padding: 120px 20px;
border-radius: var(--radius-lg);
margin-bottom: 28px;
box-shadow: var(--shadow-strong);
}
.hero-content { background: rgba(255, 255, 255, 0.85); padding: 24px 32px; border-radius: var(--radius-lg); max-width: 640px; margin: auto; text-align: center; backdrop-filter: blur(6px); }
.hero-content h2 { color: var(--color-primary-strong); }
.home-cards-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
width: 100%;
margin-top: 28px;
align-items: stretch;
}
.home-card { background: var(--color-surface); padding: 24px; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 10px; }
.home-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-strong); }
.home-card h3 { color: var(--color-primary-strong); }
.home-card p, .home-card li { color: var(--color-text); }
.home-full { width: 100%; margin-top: 28px; }
.home-full .home-card { max-width: 100%; }
/* Home layout v2 */
.page.home-landing { background: transparent; box-shadow: none; padding: 0; position: relative; z-index: 1; }
.page.home-landing > *:not(.home-bg-gradient) { position: relative; z-index: 1; }
.home-bg-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 240px;
background: linear-gradient(180deg, rgba(15, 21, 38, 0.96) 0%, rgba(15, 21, 38, 0.0) 100%);
pointer-events: none;
z-index: 0;
}
.home-landing { display: flex; flex-direction: column; gap: 22px; }
.home-hero {
background: linear-gradient(120deg, var(--color-surface) 0%, var(--color-surface-muted) 60%, rgba(242, 182, 50, 0.18) 100%);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 48px 44px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 32px;
box-shadow: var(--shadow-soft);
}
.home-hero-title { font-size: 38px; color: var(--color-primary-strong); margin-bottom: 12px; }
.home-hero-copy { font-size: 1.02rem; color: var(--color-text); }
.home-hero-text { display: flex; flex-direction: column; }
.home-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
background: var(--color-surface-ghost);
color: var(--color-primary-strong);
font-weight: 700;
border: 1px solid var(--color-border);
margin-bottom: 12px;
}
.home-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.home-hero-metrics { display: grid; gap: 14px; align-content: start; }
.home-metric {
padding: 14px 16px;
border-left: 4px solid var(--color-primary);
background: var(--color-surface-ghost);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
gap: 4px;
}
.home-metric strong { font-size: 20px; color: var(--color-primary-strong); }
.home-section {
background: var(--color-surface);
border-radius: var(--radius-lg);
padding: 28px 30px;
border: 1px solid var(--color-border);
box-shadow: var(--shadow-soft);
}
.home-section-title { margin-bottom: 12px; color: var(--color-primary-strong); }
.home-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.home-feature { padding: 4px 0 4px 12px; border-left: 3px solid var(--color-primary); }
.home-feature h3 { margin-bottom: 6px; color: var(--color-primary-strong); }
.home-feature p { color: var(--color-text-soft); }
.home-tool-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
align-items: stretch;
margin-top: 16px;
}
.home-tool-toggle {
background: var(--color-surface-muted);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
overflow: hidden;
}
.home-tool-toggle + .home-tool-toggle { margin-top: 16px; }
.home-tool-intro { margin-bottom: 18px; }
.home-tool-summary {
cursor: pointer;
list-style: none;
padding: 16px 20px;
font-weight: 700;
color: var(--color-primary-strong);
display: flex;
align-items: center;
justify-content: space-between;
}
.home-tool-summary::-webkit-details-marker { display: none; }
.home-tool-summary::after { content: "+"; font-size: 18px; color: var(--color-text-soft); }
.home-tool-toggle[open] .home-tool-summary::after { content: "-"; }
.home-tool-body {
padding: 18px 20px 22px;
border-top: 1px solid var(--color-border);
display: grid;
gap: 18px;
}
.home-tool-combo { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.home-tool-block { display: flex; flex-direction: column; min-width: 0; }
.home-tool-subtitle { margin: 0; color: var(--color-primary-strong); }
.home-tool-time-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
}
.home-tool-time-item { display: flex; flex-direction: column; gap: 6px; }
.home-tool-inline-label { font-size: 0.85rem; color: var(--color-text-soft); }
.home-tool-panel {
background: var(--color-surface-muted);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 20px 22px;
height: 100%;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: var(--shadow-soft);
}
.home-tool-panel--full { grid-column: 1 / -1; }
.home-tool-title { color: var(--color-primary-strong); margin-bottom: 4px; }
.home-tool-note { color: var(--color-text-soft); font-size: 0.9rem; }
.home-tool-help { color: var(--color-text-soft); font-size: 0.85rem; }
.home-tool-table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
}
.home-tool-table th,
.home-tool-table td {
padding: 8px 6px;
border-bottom: 1px solid var(--color-border);
text-align: right;
}
.home-tool-table th:first-child,
.home-tool-table td:first-child {
text-align: left;
color: var(--color-text);
font-weight: 600;
}
.home-tool-table th {
color: var(--color-text-soft);
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.home-tool-flow-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
}
.home-tool-flow-item .form-label {
margin-top: 0;
font-size: 0.85rem;
color: var(--color-text-soft);
}
.home-tool-flow-item .form-input { margin-bottom: 0; }
.home-tool-result {
border: 1px dashed var(--color-border);
border-radius: 12px;
padding: 10px 12px;
background: var(--color-surface);
display: grid;
gap: 6px;
}
.home-tool-result strong { color: var(--color-primary-strong); }
.home-tool-error { color: var(--color-danger); font-size: 0.9rem; min-height: 18px; }
.home-band {
background: var(--color-band-bg);
color: #ffffff;
border-radius: var(--radius-lg);
padding: 28px 30px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
align-items: center;
gap: 20px;
box-shadow: var(--shadow-strong);
}
.home-band h3 { color: #ffffff; }
.home-band p { color: #f8fafc; }
.home-band .btn { background: var(--color-primary); color: #ffffff; }
.home-band .btn:hover { background: #D4A21F; color: #ffffff; }
/* Explore page */
.explore-page { gap: 26px; }
.explore-hero { position: relative; overflow: hidden; }
.explore-hero::after {
content: "";
position: absolute;
right: -120px;
top: -80px;
width: 240px;
height: 240px;
background: radial-gradient(circle, rgba(242, 182, 50, 0.35) 0%, rgba(242, 182, 50, 0) 70%);
pointer-events: none;
}
.explore-nav { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.explore-nav-btn {
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-surface-ghost);
color: var(--color-primary-strong);
}
.explore-nav-btn:hover {
border-color: var(--color-accent);
background: var(--color-surface-muted);
}
.explore-sections { display: flex; flex-direction: column; gap: 20px; }
.explore-section {
position: relative;
border-left: 6px solid var(--color-primary);
background: linear-gradient(120deg, var(--color-surface) 0%, var(--color-surface-muted) 100%);
scroll-margin-top: 110px;
}
.explore-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.explore-index {
font-weight: 700;
color: var(--color-primary-strong);
background: var(--color-surface-ghost);
border: 1px solid var(--color-border);
border-radius: 999px;
padding: 4px 10px;
}
.explore-invite { color: var(--color-primary-strong); font-weight: 600; margin-top: 6px; }
.explore-chart-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
margin-top: 16px;
}
.explore-chart-card {
background: var(--color-surface-ghost);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: var(--shadow-soft);
}
.explore-chart-title { margin: 0; color: var(--color-primary-strong); }
.explore-chart-subtitle { margin-top: -4px; font-size: 0.9rem; }
.explore-bar-chart { display: flex; flex-direction: column; gap: 10px; }
.explore-bar-row {
display: grid;
grid-template-columns: 38px 1fr 56px;
gap: 10px;
align-items: center;
}
.explore-bar-label { font-size: 0.85rem; color: var(--color-text-soft); font-weight: 600; }
.explore-bar-track {
position: relative;
height: 10px;
background: var(--color-surface-muted);
border-radius: 999px;
border: 1px solid var(--color-border);
overflow: hidden;
}
.explore-bar-fill {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
border-radius: inherit;
}
.explore-bar-value { font-size: 0.85rem; color: var(--color-text-soft); text-align: right; }
.explore-pie-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.explore-pie {
width: 140px;
height: 140px;
border-radius: 50%;
background: conic-gradient(
var(--color-primary) 0 40%,
var(--color-accent) 40% 90%,
#9ec8ff 90% 100%
);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-soft);
}
.explore-legend { display: flex; flex-direction: column; gap: 8px; }
.explore-legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--color-text-soft); }
.explore-legend-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); }
.explore-legend-dot--b { background: var(--color-accent); }
.explore-legend-dot--c { background: #9ec8ff; }
/* Menu principal */
.menu-page { gap: 24px; }
.menu-hero { background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-muted) 65%, rgba(27, 95, 158, 0.12) 100%); }
.menu-ideas-title {
font-size: 44px;
letter-spacing: 4px;
text-transform: uppercase;
font-weight: 800;
color: var(--color-primary);
text-shadow: 0 2px 0 rgba(11, 58, 103, 0.45), 0 8px 18px rgba(11, 58, 103, 0.25);
margin-bottom: 6px;
}
.menu-projects-title {
font-size: 42px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 800;
color: var(--color-primary-strong);
text-shadow: 0 2px 0 rgba(11, 58, 103, 0.35), 0 8px 18px rgba(11, 58, 103, 0.2);
margin-bottom: 6px;
}
.menu-hero--projects {
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-muted) 60%, rgba(27, 95, 158, 0.18) 100%);
}
.tools-menu { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.tools-section { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}
.scenario-controls {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
align-items: end;
}
.scenario-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.scenario-field { min-width: 0; }
.tool-card {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 140px;
text-decoration: none;
color: var(--color-text);
}
.tool-card h3 {
color: var(--color-primary-strong);
font-family: var(--font-headings);
letter-spacing: 1px;
}
.tool-card span { color: var(--color-text-soft); }
/* ── Educación financiera ─────────────────────────────── */
.edu-section-header { display: flex; flex-direction: column; gap: 4px; }
.edu-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.edu-badge--accent { background: var(--color-accent, #f5c518); color: #222; }
.edu-badge--soft { background: var(--color-surface-muted); color: var(--color-text-soft); }
.edu-badge--new { background: #22c55e; color: #fff; }
/* Video grid */
.edu-video-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
}
.edu-video-card {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
overflow: hidden;
cursor: pointer;
text-decoration: none;
color: var(--color-text);
transition: transform 0.15s, box-shadow 0.15s;
}
.edu-video-card:hover { transform: translateY(-2px); }
.edu-video-thumb {
width: 100%;
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.edu-video-thumb--embed { padding: 0; background: #000; }
.edu-video-iframe { width: 100%; height: 100%; border: 0; display: block; }
.edu-canal-btn { align-self: flex-start; margin-top: 10px; }
.edu-canal-mention { margin-top: 18px; font-size: 0.95rem; }
.edu-canal-inline-link { color: var(--color-accent); font-weight: 600; text-decoration: underline; }
.edu-canal-inline-link:hover { color: var(--color-primary); }
.edu-video-search-wrap { position: relative; margin-bottom: 20px; max-width: 420px; }
.edu-video-search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--color-text-soft); pointer-events: none; }
.edu-video-search { width: 100%; padding: 10px 14px 10px 38px; border: 1.5px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font-size: 14px; outline: none; transition: border-color 0.15s; box-sizing: border-box; }
.edu-video-search::placeholder { color: var(--color-text-soft); }
.edu-video-search:focus { border-color: var(--color-primary); box-shadow: none; }
.edu-no-results { display: none; grid-column: 1 / -1; padding: 28px 16px; text-align: center; color: var(--color-text-soft); font-size: 0.95rem; }
.edu-video-play-icon {
font-size: 36px;
color: rgba(255,255,255,0.75);
transition: color 0.15s, transform 0.15s;
}
.edu-video-card:hover .edu-video-play-icon {
color: #fff;
transform: scale(1.12);
}
.edu-video-info { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.edu-video-meta { display: flex; align-items: center; gap: 8px; }
.edu-video-duration { font-size: 12px; color: var(--color-text-soft); }
.edu-video-title {
font-size: 15px;
font-weight: 700;
color: var(--color-primary-strong);
font-family: var(--font-headings);
letter-spacing: 0.5px;
margin: 0;
}
.edu-video-desc { font-size: 13px; color: var(--color-text-soft); margin: 0; line-height: 1.5; }
/* Activity cards */
.edu-activity-card { cursor: pointer; }
.edu-activity-card--soon { opacity: 0.7; cursor: default; }
.edu-activity-inner { display: flex; flex-direction: column; gap: 8px; }
.edu-activity-icon-wrap {
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--color-surface-muted);
display: flex;
align-items: center;
justify-content: center;
}
.edu-activity-icon { font-size: 18px; color: var(--color-primary-strong); }
.edu-activity-title {
font-size: 15px;
font-weight: 700;
color: var(--color-primary-strong);
font-family: var(--font-headings);
letter-spacing: 0.5px;
margin: 0;
}
.edu-activity-desc { font-size: 13px; color: var(--color-text-soft); margin: 0; }
.edu-activity-cta { font-size: 12px; color: var(--color-text-soft); margin-top: 4px; }
/* Glosario card */
.edu-glosario-card { display: flex; flex-direction: column; gap: 12px; }
.edu-glosario-body { display: flex; flex-direction: column; gap: 10px; }
.edu-glosario-icon { font-size: 28px; color: var(--color-primary-strong); }
.edu-glosario-title {
font-size: 18px;
font-weight: 700;
color: var(--color-primary-strong);
font-family: var(--font-headings);
letter-spacing: 0.5px;
margin: 0;
}
.edu-glosario-desc { font-size: 14px; color: var(--color-text); margin: 0; line-height: 1.6; }
.edu-glosario-note {
font-size: 13px;
color: var(--color-text-soft);
margin: 0;
padding: 10px 14px;
border-left: 3px solid var(--color-accent, #f5c518);
background: var(--color-surface-muted);
border-radius: 0 6px 6px 0;
}
/* ── Glosario financiero (página dedicada) ────────────── */
.glosario-search-wrap {
position: relative;
max-width: 560px;
margin-bottom: 16px;
}
.glosario-search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-soft);
font-size: 14px;
pointer-events: none;
}
.glosario-search-input {
width: 100%;
padding: 10px 14px 10px 40px;
border: 1.5px solid var(--color-border);
border-radius: 10px;
background: var(--color-surface);
color: var(--color-text);
font-size: 15px;
outline: none;
transition: border-color 0.15s;
box-sizing: border-box;
}
.glosario-search-input:focus { border-color: var(--color-primary); }
.glosario-cat-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.glosario-cat-btn {
padding: 5px 14px;
border-radius: 999px;
border: 1.5px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text-soft);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.glosario-cat-btn:hover {
border-color: var(--cat-color, var(--color-primary));
color: var(--cat-color, var(--color-primary));
}
.glosario-cat-btn.active {
background: var(--cat-color, var(--color-primary));
border-color: var(--cat-color, var(--color-primary));
color: #fff;
}
.glosario-cat-btn:first-child.active { background: var(--color-primary); border-color: var(--color-primary); }
.glosario-counter {
font-size: 13px;
color: var(--color-text-soft);
margin: 0 0 16px;
}
.glosario-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}
.glosario-term-card {
display: flex;
flex-direction: column;
gap: 8px;
}
.glosario-card-top { display: flex; align-items: center; }
.glosario-cat-badge {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
}
.glosario-term-name {
font-family: var(--font-headings);
font-size: 20px;
font-weight: 700;
color: var(--color-primary-strong);
letter-spacing: 0.5px;
margin: 0;
line-height: 1.2;
}
.glosario-term-def {
font-size: 13.5px;
color: var(--color-text);
line-height: 1.65;
margin: 0;
}
.glosario-empty-state {
grid-column: 1 / -1;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 48px 24px;
text-align: center;
}
.tool-title,
.tool-section-title,
.portfolio-section-title,
.credit-policy-title,
.compare-panel-title {
font-family: var(--font-headings);
letter-spacing: 1px;
}
.compare-controls {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: flex-end;
}
.compare-field { min-width: 200px; flex: 1 1 200px; }
.compare-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
.compare-panel {
display: flex;
flex-direction: column;
gap: 12px;
}
.compare-panel-title {
margin: 0;
color: var(--color-primary-strong);
font-size: 18px;
}
.compare-panel-meta {
color: var(--color-text-soft);
font-size: 0.9rem;
}
.compare-table-wrap { margin-top: 4px; }
.compare-empty {
border: 1px dashed var(--color-border);
border-radius: 12px;
padding: 12px;
text-align: center;
color: var(--color-text-soft);
}
.amort-chart {
display: grid;
grid-template-columns: minmax(84px, 110px) 1fr;
gap: 10px;
align-items: stretch;
min-height: 260px;
}
.amort-chart-axis {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
padding: 8px 15px 8px 0;
font-size: 11px;
color: var(--color-text-soft);
text-align: right;
white-space: nowrap;
}
.amort-chart-bars {
display: flex;
align-items: flex-end;
height: 100%;
gap: 3px;
padding: 8px;
background: var(--color-surface-muted);
border: 1px solid var(--color-border);
border-radius: 8px;
overflow: hidden;
position: relative;
}
.amort-bar-wrap {
flex: 1;
min-width: 6px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: stretch;
gap: 4px;
}
.amort-bar-stack {
display: flex;
flex-direction: column;
justify-content: flex-end;
flex: 1 1 auto;
min-height: 0;
}
.amort-bar-seg {
width: 100%;
border-radius: var(--chart-bar-radius) var(--chart-bar-radius) 0 0;
transition: transform 0.15s ease, filter 0.15s ease;
}
.amort-bar-interes { background: var(--chart-bar-grad-b); }
.amort-bar-capital { background: var(--chart-bar-grad); }
.amort-bar-label {
font-size: 10px;
text-align: center;
color: var(--color-text-soft);
line-height: 1;
}
.amort-legend {
display: flex;
gap: 12px;
align-items: center;
font-size: 12px;
color: var(--color-text-soft);
margin-bottom: 6px;
}
.amort-legend-item {
display: inline-flex;
gap: 6px;
align-items: center;
}
.amort-legend-item::before {
content: "";
width: 12px;
height: 12px;
border-radius: 4px;
background: var(--color-primary);
}
.amort-legend-item--capital::before { background: var(--color-accent); }
.portfolio-grid {
display: grid;
grid-template-columns: minmax(280px, 380px) 1fr;
gap: 18px;
align-items: start;
}
.portfolio-inputs,
.portfolio-outputs {
display: flex;
flex-direction: column;
gap: 16px;
}
.portfolio-section-title { color: var(--color-primary-strong); margin-bottom: 12px; }
.portfolio-inline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
margin-bottom: 10px;
}
.portfolio-asset-row {
display: grid;
grid-template-columns: 1.4fr 0.8fr 0.9fr 0.9fr auto;
gap: 10px;
align-items: center;
}
.portfolio-asset-row--cash { opacity: 0.85; }
.portfolio-asset-row--cash input { background: var(--color-surface-muted); color: var(--color-text-soft); }
.portfolio-cash-tag { font-size: 0.75rem; color: var(--color-text-soft); }
.portfolio-asset-row--head {
font-size: 0.75rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-text-soft);
margin-bottom: 6px;
}
.portfolio-asset-head { font-weight: 700; }
.portfolio-asset-body { display: grid; gap: 8px; }
.portfolio-asset-row input,
.portfolio-asset-row select,
.portfolio-asset-row .form-input {
margin: 0;
padding: 8px 10px;
}
.portfolio-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.portfolio-remove-btn { padding: 8px 10px; font-size: 0.85rem; }
.portfolio-kpis { margin-top: 12px; }
.portfolio-chart { display: flex; flex-direction: column; gap: 10px; }
.portfolio-canvas {
width: 100%;
height: 240px;
border: 1px solid var(--color-border);
border-radius: 12px;
background: var(--color-surface-muted);
}
.portfolio-canvas--small { height: 200px; }
.portfolio-legend {
display: flex;
gap: 12px;
flex-wrap: wrap;
font-size: 0.85rem;
color: var(--color-text-soft);
}
.portfolio-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.portfolio-legend-swatch {
width: 12px;
height: 12px;
border-radius: 4px;
background: var(--color-primary-strong);
}
.portfolio-legend-p5 { background: var(--color-accent); }
.portfolio-legend-p50 { background: var(--color-primary-strong); }
.portfolio-legend-p95 { background: var(--color-primary); }
.portfolio-table-controls { display: flex; gap: 12px; align-items: center; }
@media (max-width: 980px) {
.portfolio-grid { grid-template-columns: 1fr; }
}
.credit-policy-grid {
display: flex;
flex-direction: column;
gap: 18px;
}
.credit-policy-section {
padding: 12px 0;
border-bottom: 1px solid var(--color-border);
}
.credit-policy-section:last-child { border-bottom: none; }
.credit-policy-title { color: var(--color-primary-strong); margin-bottom: 14px; }
.credit-policy-note { color: var(--color-text-soft); font-size: 0.9rem; }
.credit-bar-chart { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.credit-bar-row { display: grid; grid-template-columns: 140px 1fr auto; gap: 10px; align-items: center; }
.credit-bar-label { color: var(--color-text-soft); font-size: 0.9rem; }
.credit-bar-track {
height: 10px;
background: var(--color-surface-muted);
border-radius: 999px;
border: 1px solid var(--color-border);
overflow: hidden;
}
.credit-bar-fill { height: 100%; background: var(--color-primary-strong); }
.credit-bar-fill--neg { background: var(--color-danger); }
.credit-bar-value { font-size: 0.9rem; color: var(--color-text); text-align: right; }
.tool-pie-wrap { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.tool-pie {
width: 140px;
height: 140px;
border-radius: 50%;
border: 1px solid var(--color-border);
box-shadow: var(--shadow-soft);
background: conic-gradient(
var(--color-primary-strong) 0 120deg,
var(--color-primary) 120deg 240deg,
var(--color-accent) 240deg 360deg
);
}
.tool-legend { display: flex; flex-direction: column; gap: 8px; }
.tool-legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--color-text-soft); }
.tool-legend-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary-strong); }
.tool-legend-dot--interest { background: var(--color-accent); }
.tool-legend-dot--deposits { background: var(--color-primary); }
.tool-chart-block { margin-top: 30px; }
.tool-section-title { color: var(--color-primary-strong); margin-bottom: 12px; }
.tool-bar-chart { display: flex; flex-direction: column; gap: 8px; }
.tool-bar-item { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; align-items: center; }
.tool-bar { height: 10px; background: var(--color-primary); border-radius: 999px; }
.tool-bar-label { font-size: 0.9rem; color: var(--color-text-soft); }
.tool-bar-value { font-size: 0.9rem; color: var(--color-text); }
.menu-favorites { display: flex; flex-direction: column; gap: 16px; }
.menu-favorites-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.favorite-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 16px;
box-shadow: var(--shadow-soft);
}
.favorite-card-title { font-size: 18px; color: var(--color-primary-strong); margin-bottom: 8px; }
.favorite-list { display: flex; flex-direction: column; gap: 8px; }
.favorite-item { display: flex; align-items: center; gap: 8px; }
.favorite-item a { color: var(--color-text); font-weight: 600; }
.favorite-item a:hover { color: var(--color-primary); }
.favorite-empty { color: var(--color-text-soft); }
.favorite-title {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-headings);
font-size: 32px;
font-weight: 800;
letter-spacing: -0.02em;
}
.favorite-item a {
font-family: var(--font-headings);
font-size: 17px;
font-weight: 600;
}
.favorite-star { color: var(--color-primary); font-size: 0.9em; }
.form-checkbox { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.form-checkbox input { width: 18px; height: 18px; accent-color: var(--color-primary); }
.menu-hero-title { font-size: 34px; color: var(--color-primary-strong); margin-bottom: 10px; }
.inicio-secciones .menu-ideas-title,
.inicio-secciones .menu-projects-title,
.inicio-secciones .home-hero-title,
.inicio-secciones .home-section-title {
font-family: var(--font-headings);
letter-spacing: 1.5px;
}
.inicio-secciones .menu-ideas-title { font-size: 54px; }
.inicio-secciones .menu-projects-title { font-size: 52px; }
.inicio-secciones .home-hero-title { font-size: 42px; }
.inicio-secciones .home-section-title { font-size: 32px; }
.inicio-home .home-hero-title,
.inicio-home .home-section-title {
font-family: var(--font-headings);
letter-spacing: 1.5px;
}
.inicio-home .home-hero-title { font-size: 44px; }
.inicio-home .home-section-title { font-size: 34px; }
.page.auth-scene {
width: min(1280px, 94vw);
max-width: 1280px;
background: transparent;
box-shadow: none;
padding: 0;
margin: 22px auto 42px;
}
.auth-stage-page {
width: min(1280px, 100%);
max-width: 1280px;
background: transparent;
box-shadow: none;
padding: 0;
}
.auth-scene {
width: 100%;
display: flex;
justify-content: center;
}
.auth-shell {
position: relative;
width: 100%;
display: grid;
grid-template-columns: minmax(360px, 1.08fr) minmax(340px, 0.92fr);
gap: 24px;
align-items: stretch;
}
.auth-shell::before {
content: "";
position: absolute;
inset: 36px auto auto 52%;
width: 240px;
height: 240px;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(circle, rgba(242, 182, 50, 0.24) 0%, rgba(242, 182, 50, 0) 72%);
filter: blur(6px);
pointer-events: none;
}
.auth-panel {
position: relative;
min-height: 100%;
border-radius: 28px;
overflow: hidden;
}
.auth-panel--hero {
padding: 34px;
display: flex;
flex-direction: column;
gap: 22px;
color: #ffffff;
background:
radial-gradient(700px 320px at 15% 0%, rgba(75, 163, 243, 0.16), transparent 60%),
linear-gradient(145deg, #07213d 0%, #0B3A67 48%, #1B5F9E 100%);
background-size: cover;
background-position: center;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: var(--shadow-strong);
isolation: isolate;
}
.auth-panel--hero::before {
content: "";
position: absolute;
inset: -12% auto auto -10%;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 72%);
pointer-events: none;
z-index: 0;
}
.auth-panel--hero::after {
content: "";
position: absolute;
right: -70px;
bottom: -70px;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(242, 182, 50, 0.28) 0%, rgba(242, 182, 50, 0) 72%);
pointer-events: none;
z-index: 0;
}
.auth-kicker {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 7px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.16);
color: #f8fbff;
font-size: 0.84rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
backdrop-filter: blur(8px);
position: relative;
z-index: 1;
}
.auth-chip-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.auth-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #f8fbff;
font-size: 0.88rem;
backdrop-filter: blur(8px);
}
.auth-chip .icon { color: var(--color-primary); }
.auth-hero-title {
margin: 0;
max-width: 11ch;
color: #ffffff;
font-family: var(--font-headings);
font-size: clamp(2.2rem, 4vw, 3.5rem);
line-height: 0.98;
position: relative;
z-index: 1;
}
.auth-hero-copy {
margin: 0;
max-width: 54ch;
color: rgba(255, 255, 255, 0.82);
font-size: 1rem;
position: relative;
z-index: 1;
}
.auth-metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
position: relative;
z-index: 1;
}
.auth-metric {
padding: 16px 18px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(10px);
}
.auth-metric-value {
display: block;
color: #ffffff;
font-family: var(--font-headings);
font-size: 1.3rem;
font-weight: 800;
line-height: 1.1;
}
.auth-metric-label {
display: block;
margin-top: 5px;
color: rgba(255, 255, 255, 0.72);
font-size: 0.86rem;
}
.auth-hero-body {
display: grid;
gap: 12px;
position: relative;
z-index: 1;
}
.auth-feature-list,
.auth-step-list {
display: grid;
gap: 12px;
}
.auth-feature-card,
.auth-step-card {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 16px 18px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.auth-feature-icon,
.auth-step-number {
flex: 0 0 42px;
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: rgba(242, 182, 50, 0.16);
color: var(--color-primary);
font-size: 1rem;
font-weight: 800;
}
.auth-feature-title,
.auth-step-title {
display: block;
color: #ffffff;
font-weight: 700;
margin-bottom: 4px;
}
.auth-feature-text,
.auth-step-text {
margin: 0;
color: rgba(255, 255, 255, 0.76);
font-size: 0.92rem;
}
.auth-panel--form {
padding: 34px 34px 28px;
display: flex;
flex-direction: column;
gap: 22px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(245, 247, 251, 0.97) 74%, rgba(255, 255, 255, 0.99) 100%);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 28px 70px rgba(15, 23, 42, 0.16);
}
.auth-form-header {
display: flex;
flex-direction: column;
gap: 12px;
}
.auth-form-tag {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 6px 12px;
border-radius: 999px;
background: rgba(11, 58, 103, 0.08);
color: var(--color-primary-strong);
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.auth-form-title {
margin: 0;
color: var(--color-primary-strong);
font-family: var(--font-headings);
font-size: clamp(1.9rem, 3vw, 2.4rem);
line-height: 1.04;
}
.auth-form-subtitle {
margin: 0;
color: var(--color-text-soft);
font-size: 0.98rem;
max-width: 46ch;
}
.auth-alert {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-radius: 16px;
border: 1px solid var(--color-border);
background: var(--color-surface);
}
.auth-alert--error {
background: rgba(192, 52, 44, 0.08);
border-color: rgba(192, 52, 44, 0.16);
}
.auth-alert--success {
background: rgba(27, 95, 158, 0.09);
border-color: rgba(27, 95, 158, 0.18);
}
.auth-alert--info {
background: rgba(11, 58, 103, 0.06);
border-color: rgba(11, 58, 103, 0.12);
}
.auth-alert-icon { margin-top: 2px; font-size: 1rem; }
.auth-alert--error .auth-alert-icon { color: var(--color-danger); }
.auth-alert--success .auth-alert-icon { color: var(--color-accent); }
.auth-alert--info .auth-alert-icon { color: var(--color-primary-strong); }
.auth-alert-copy { display: flex; flex-direction: column; gap: 2px; }
.auth-alert-title { font-weight: 800; color: var(--color-text); }
.auth-alert-text { margin: 0; color: var(--color-text); }
.auth-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.auth-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.auth-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.auth-field-label {
margin: 0;
color: var(--color-primary-strong);
font-size: 0.92rem;
font-weight: 700;
}
.auth-field-hint {
margin: -2px 0 0;
color: var(--color-text-soft);
font-size: 0.84rem;
}
.auth-input {
margin: 0;
min-height: 54px;
padding: 14px 16px;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.34);
background: rgba(255, 255, 255, 0.9);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.auth-input::placeholder { color: #94a3b8; }
.auth-input:focus {
background: #ffffff;
border-color: rgba(242, 182, 50, 0.92);
box-shadow: 0 0 0 4px rgba(242, 182, 50, 0.16);
transform: translateY(-1px);
}
.auth-input--code {
letter-spacing: 0.28em;
text-align: center;
font-weight: 800;
}
.auth-form-actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 2px;
}
.auth-submit {
width: 100%;
min-height: 54px;
font-size: 1rem;
font-weight: 700;
border-radius: 14px;
}
.auth-form-note {
margin: 0;
color: var(--color-text-soft);
font-size: 0.9rem;
}
.auth-link-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.auth-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-primary-strong);
font-weight: 700;
box-shadow: none;
}
.auth-link:hover {
background: rgba(11, 58, 103, 0.04);
border-color: rgba(11, 58, 103, 0.18);
color: var(--color-primary-strong);
}
.auth-link--primary {
background: var(--color-primary-strong);
border-color: var(--color-primary-strong);
color: #ffffff;
}
.auth-link--primary:hover {
background: #073566;
border-color: #073566;
color: #ffffff;
}
.auth-support {
margin-top: auto;
display: flex;
gap: 10px;
align-items: flex-start;
padding-top: 16px;
border-top: 1px solid rgba(148, 163, 184, 0.22);
color: var(--color-text-soft);
font-size: 0.9rem;
}
.auth-support .icon {
color: var(--color-primary);
margin-top: 3px;
}
.auth-support-text { margin: 0; color: var(--color-text-soft); }
.auth-completion-card {
display: flex;
flex-direction: column;
gap: 10px;
}
.auth-tip {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid var(--color-border);
background: var(--color-surface);
}
.auth-tip .icon {
color: var(--color-primary-strong);
margin-top: 2px;
}
.auth-error { color: var(--color-danger); font-size: 0.9rem; }
.auth-success { color: var(--color-accent); font-size: 0.9rem; }
html[data-theme="dark"] .auth-panel--form {
background: linear-gradient(180deg, rgba(15, 30, 51, 0.96) 0%, rgba(19, 40, 66, 0.97) 100%);
border-color: rgba(255, 255, 255, 0.08);
box-shadow: var(--shadow-strong);
}
html[data-theme="dark"] .auth-form-tag {
background: rgba(255, 255, 255, 0.08);
color: var(--color-primary-strong);
}
html[data-theme="dark"] .auth-input {
background: rgba(10, 19, 34, 0.76);
border-color: rgba(255, 255, 255, 0.12);
box-shadow: none;
}
html[data-theme="dark"] .auth-input:focus {
background: rgba(15, 30, 51, 0.95);
box-shadow: 0 0 0 4px rgba(242, 182, 50, 0.16);
}
html[data-theme="dark"] .auth-link,
html[data-theme="dark"] .auth-tip,
html[data-theme="dark"] .auth-alert {
background: rgba(10, 19, 34, 0.56);
border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .auth-link--primary {
background: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
html[data-theme="dark"] .auth-link--primary:hover {
background: transparent;
color: var(--color-primary);
border-color: var(--color-primary-strong);
}
html[data-theme="dark"] .auth-alert--error {
background: rgba(210, 75, 67, 0.12);
border-color: rgba(210, 75, 67, 0.24);
}
html[data-theme="dark"] .auth-alert--success {
background: rgba(75, 163, 243, 0.12);
border-color: rgba(75, 163, 243, 0.22);
}
html[data-theme="dark"] .auth-alert--info {
background: rgba(139, 182, 255, 0.1);
border-color: rgba(139, 182, 255, 0.18);
}
html[data-theme="dark"] .auth-support {
border-top-color: rgba(255, 255, 255, 0.08);
}
@media (max-width: 1100px) {
.auth-shell {
grid-template-columns: 1fr;
}
.auth-panel--form {
order: -1;
}
.auth-hero-title {
max-width: none;
}
}
@media (max-width: 720px) {
.page.auth-scene,
.auth-stage-page {
width: calc(100vw - 24px);
}
.auth-panel--hero,
.auth-panel--form {
padding: 24px 20px;
border-radius: 22px;
}
.auth-form-grid {
grid-template-columns: 1fr;
}
.auth-hero-title {
font-size: 2rem;
}
.auth-chip-row,
.auth-link-grid {
gap: 8px;
}
.auth-feature-card,
.auth-step-card {
padding: 14px;
}
}
.menu-hero-text { display: flex; flex-direction: column; }
.menu-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.menu-step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.menu-step {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 16px;
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
background: var(--color-surface-ghost);
}
.menu-step h4 { margin-bottom: 6px; color: var(--color-primary-strong); }
.menu-step-number {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--color-primary);
color: #0E1B2D;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.menu-callout { border-left: 5px solid var(--color-primary); }
.menu-pill-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.menu-pill {
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-surface-muted);
color: var(--color-text);
font-size: 0.85rem;
}
.menu-cta { background: var(--color-surface-muted); }
@media (max-width: 720px) {
.home-hero { padding: 32px 24px; }
.home-hero-title { font-size: 30px; }
.home-section { padding: 22px 20px; }
.home-band { padding: 22px 20px; }
}
/* Titulo */
.title-box {
background: var(--color-surface);
padding: 22px 28px;
margin-bottom: 22px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
text-align: center;
border: 1px solid var(--color-border);
border-left: 6px solid var(--color-primary);
}
.title-box h1 { font-size: 34px; margin-bottom: 8px; }
.title-box--left { text-align: left; }
.ideas-bg .title-box h1,
.proyectos-bg .title-box h1,
.empresas-bg .title-box h1 {
font-size: 40px;
}
.tittle-box--left { text-align: left; }
.tittle-box--left .tooltip-wrapper {
display: flex;
justify-content: flex-start;
width: 100%;
}
/* Formularios */
form { width: 100%; }
label { font-weight: 500; font-size: 0.9rem; color: var(--color-text); display: block; margin-bottom: 6px; }
input, select, textarea {
width: 100%;
padding: 12px 12px;
margin-bottom: 14px;
border: 1px solid var(--color-border);
border-radius: 10px;
font-size: 15px;
background: var(--color-surface-muted);
font-family: var(--font-body);
color: var(--color-text);
}
input:focus, select:focus, textarea:focus {
outline: 2px solid rgba(227, 186, 50, 0.35);
border-color: var(--color-primary);
background: #fff;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
background: var(--color-surface);
color: var(--color-text);
}
.form-card {
background: var(--color-surface);
padding: 26px 28px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
border: 1px solid var(--color-border);
}
.form-card:hover { box-shadow: var(--shadow-strong); }
.form-label { font-weight: 500; font-size: 0.9rem; color: var(--color-text); margin-top: 6px; display: block; }
.form-input, .form-textarea, .form-select { margin-top: 6px; margin-bottom: 16px; }
.form-textarea { min-height: 120px; }
.form-button { width: 100%; }
.form-blanco { background: var(--color-surface); padding: 22px 24px; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); border: 1px solid var(--color-border); }
/* Configuracion */
.settings-page { display: flex; flex-direction: column; gap: 16px; }
.settings-section {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 24px 26px;
box-shadow: var(--shadow-soft);
}
.settings-section h3 { color: var(--color-primary-strong); margin-bottom: 6px; }
.setting-options { display: grid; gap: 12px; margin-top: 14px; }
.setting-option {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: 12px;
background: var(--color-surface-muted);
margin: 0;
cursor: pointer;
}
.setting-option input { width: 18px; height: 18px; margin: 0; padding: 0; border: none; background: transparent; }
.setting-option strong { color: var(--color-text); }
.setting-option span { color: var(--color-text-soft); }
.setting-option-text { display: flex; flex-direction: column; gap: 4px; }
.settings-grid { display: grid; gap: 12px; margin-top: 14px; }
.settings-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: 12px;
background: var(--color-surface-muted);
}
.settings-row select { width: 180px; margin: 0; }
.settings-label { font-weight: 500; color: var(--color-text); }
/* Fondos por seccion */
.ideas-bg, .proyectos-bg, .empresas-bg, .productos-bg {
background: var(--color-surface);
padding: 26px;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
color: var(--color-text);
box-shadow: var(--shadow-soft);
margin: 0 auto;
max-width: var(--dashboard-max-width);
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}
.ideas-bg h1, .ideas-bg h2, .ideas-bg h3,
.proyectos-bg h1, .proyectos-bg h2, .proyectos-bg h3,
.empresas-bg h1, .empresas-bg h2, .empresas-bg h3,
.productos-bg h1, .productos-bg h2, .productos-bg h3 { color: var(--color-primary-strong) !important; text-shadow: none; }
.ideas-bg p, .ideas-bg li,
.proyectos-bg p, .proyectos-bg li,
.empresas-bg p, .empresas-bg li,
.productos-bg p, .productos-bg li { color: var(--color-text); }
.ideas-bg label, .proyectos-bg label, .empresas-bg label, .productos-bg label {
color: var(--color-text) !important;
}
.ideas-bg a:not(.idea-btn):not(.btn):not(.btn-new-idea),
.proyectos-bg a:not(.idea-btn):not(.btn):not(.btn-new-idea),
.empresas-bg a:not(.idea-btn):not(.btn):not(.btn-new-idea),
.productos-bg a:not(.idea-btn):not(.btn):not(.btn-new-idea) {
color: var(--color-accent);
font-weight: 600;
}
.ideas-bg a:not(.idea-btn):not(.btn):not(.btn-new-idea):hover,
.proyectos-bg a:not(.idea-btn):not(.btn):not(.btn-new-idea):hover,
.empresas-bg a:not(.idea-btn):not(.btn):not(.btn-new-idea):hover,
.productos-bg a:not(.idea-btn):not(.btn):not(.btn-new-idea):hover {
color: var(--color-primary);
}
/* Tarjetas dentro de fondos con overlay: texto siempre oscuro */
.ideas-bg .card, .ideas-bg .idea-card, .ideas-bg .productos-card, .ideas-bg .credit-detail-card,
.proyectos-bg .card, .proyectos-bg .idea-card, .proyectos-bg .productos-card, .proyectos-bg .credit-detail-card,
.empresas-bg .card, .empresas-bg .idea-card, .empresas-bg .productos-card, .empresas-bg .credit-detail-card,
.productos-bg .card, .productos-bg .idea-card, .productos-bg .productos-card, .productos-bg .credit-detail-card {
color: var(--color-text);
text-shadow: none;
}
.ideas-bg .card h1, .ideas-bg .card h2, .ideas-bg .card h3,
.proyectos-bg .card h1, .proyectos-bg .card h2, .proyectos-bg .card h3,
.empresas-bg .card h1, .empresas-bg .card h2, .empresas-bg .card h3,
.productos-bg .card h1, .productos-bg .card h2, .productos-bg .card h3,
.ideas-bg .idea-card h1, .ideas-bg .idea-card h2, .ideas-bg .idea-card h3,
.proyectos-bg .idea-card h1, .proyectos-bg .idea-card h2, .proyectos-bg .idea-card h3,
.empresas-bg .idea-card h1, .empresas-bg .idea-card h2, .empresas-bg .idea-card h3,
.productos-bg .idea-card h1, .productos-bg .idea-card h2, .productos-bg .idea-card h3 {
color: var(--color-primary-strong);
}
.ideas-bg .card p, .ideas-bg .card li,
.proyectos-bg .card p, .proyectos-bg .card li,
.empresas-bg .card p, .empresas-bg .card li,
.productos-bg .card p, .productos-bg .card li,
.ideas-bg .idea-card p, .ideas-bg .idea-card li, .ideas-bg .idea-card span,
.proyectos-bg .idea-card p, .proyectos-bg .idea-card li, .proyectos-bg .idea-card span,
.empresas-bg .idea-card p, .empresas-bg .idea-card li, .empresas-bg .idea-card span,
.productos-bg .idea-card p, .productos-bg .idea-card li, .productos-bg .idea-card span,
.ideas-bg .productos-card p, .ideas-bg .productos-card li, .ideas-bg .productos-card span,
.proyectos-bg .productos-card p, .proyectos-bg .productos-card li, .proyectos-bg .productos-card span,
.empresas-bg .productos-card p, .empresas-bg .productos-card li, .empresas-bg .productos-card span,
.productos-bg .productos-card p, .productos-bg .productos-card li, .productos-bg .productos-card span,
.ideas-bg .credit-detail-card p, .ideas-bg .credit-detail-card li, .ideas-bg .credit-detail-card span,
.proyectos-bg .credit-detail-card p, .proyectos-bg .credit-detail-card li, .proyectos-bg .credit-detail-card span,
.empresas-bg .credit-detail-card p, .empresas-bg .credit-detail-card li, .empresas-bg .credit-detail-card span,
.productos-bg .credit-detail-card p, .productos-bg .credit-detail-card li, .productos-bg .credit-detail-card span {
color: var(--color-text);
}
.idea-card span.section-title {
color: var(--color-primary-strong);
font-family: var(--font-headings);
font-weight: 700;
}
.ideas-bg .card a:not(.idea-btn):not(.btn):not(.btn-new-idea),
.ideas-bg .idea-card a:not(.idea-btn):not(.btn):not(.btn-new-idea),
.proyectos-bg .card a:not(.idea-btn):not(.btn):not(.btn-new-idea),
.proyectos-bg .idea-card a:not(.idea-btn):not(.btn):not(.btn-new-idea),
.empresas-bg .card a:not(.idea-btn):not(.btn):not(.btn-new-idea),
.empresas-bg .idea-card a:not(.idea-btn):not(.btn):not(.btn-new-idea),
.productos-bg .card a:not(.idea-btn):not(.btn):not(.btn-new-idea),
.productos-bg .idea-card a:not(.idea-btn):not(.btn):not(.btn-new-idea) {
color: var(--color-accent);
}
.ideas-bg .card a:not(.idea-btn):not(.btn):not(.btn-new-idea):hover,
.ideas-bg .idea-card a:not(.idea-btn):not(.btn):not(.btn-new-idea):hover,
.proyectos-bg .card a:not(.idea-btn):not(.btn):not(.btn-new-idea):hover,
.proyectos-bg .idea-card a:not(.idea-btn):not(.btn):not(.btn-new-idea):hover,
.empresas-bg .card a:not(.idea-btn):not(.btn):not(.btn-new-idea):hover,
.empresas-bg .idea-card a:not(.idea-btn):not(.btn):not(.btn-new-idea):hover,
.productos-bg .card a:not(.idea-btn):not(.btn):not(.btn-new-idea):hover,
.productos-bg .idea-card a:not(.idea-btn):not(.btn):not(.btn-new-idea):hover {
color: var(--color-primary);
}
/* Tooltips */
.tooltip-wrapper { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.tooltip-icon {
background: var(--color-primary);
color: #0E1B2D;
font-weight: 800;
border-radius: 50%;
width: 22px;
height: 22px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: transform 0.2s ease;
}
.tooltip-icon:hover { transform: scale(1.08); }
.tooltip-icon--xs {
width: 15px;
height: 15px;
font-size: 9px;
font-weight: 900;
flex-shrink: 0;
}
/* Flex row: label text + '?' icon inside KPI cards */
.kpi-label-wrap { display: flex; align-items: center; gap: 4px; }
/* Flex row: label text + '?' icon inside table cells */
.escenario-kpi-inner { display: inline-flex; align-items: center; gap: 4px; }
/* Flex row: form label + '?' icon in form inputs */
.label-tooltip-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.tooltip-box {
position: absolute;
top: 32px;
left: 0;
width: 260px;
padding: 14px 16px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 14px;
border-radius: 10px;
backdrop-filter: blur(4px);
box-shadow: var(--shadow-strong);
opacity: 0;
pointer-events: none;
transform: translateY(-4px);
transition: opacity 0.25s ease, transform 0.25s ease;
z-index: 20;
}
.tooltip-wrapper:hover .tooltip-box { opacity: 1; transform: translateY(0px); }
/* Con JS activo, el tooltip in-place (recortable) se oculta y se usa el
flotante anclado a , que pasa por encima de cualquier tarjeta. */
.js-tooltips .tooltip-wrapper .tooltip-box { display: none; }
.tooltip-floating {
position: fixed;
z-index: 9999;
transform: none;
transition: opacity 0.18s ease;
}
/* Sidebar / dashboard */
.sidebar {
width: var(--sidebar-width);
min-height: 100vh;
background: var(--color-sidebar-bg);
background-image: var(--color-sidebar-overlay);
color: var(--color-sidebar-text);
padding: 18px 12px 30px 12px;
position: fixed;
left: 0;
top: 0;
transition: width 0.2s ease;
display: flex;
flex-direction: column;
border-right: 1px solid var(--color-sidebar-border);
box-shadow: var(--color-sidebar-shadow);
}
.side-menu {
display: flex;
flex-direction: column;
gap: 8px;
padding-left: 0;
flex: 1;
}
.side-menu-bottom {
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--color-sidebar-border);
display: flex;
flex-direction: column;
gap: 8px;
}
.side-item {
color: var(--color-sidebar-text);
font-size: 15px;
padding: 10px 12px;
border-radius: 9px;
transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
font-weight: 600;
display: flex;
align-items: center;
gap: 11px;
}
.side-item:hover {
background: var(--color-sidebar-hover);
color: var(--color-sidebar-text-strong);
}
.side-item.is-active {
background: var(--color-sidebar-active-bg);
color: var(--color-sidebar-text-strong);
box-shadow: inset 3px 0 0 var(--color-sidebar-accent);
}
.side-item.is-active .side-icon { color: var(--color-sidebar-accent); }
/* Etiquetas de sección */
.side-section-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--color-sidebar-muted);
padding: 14px 12px 4px;
}
body.sidebar-collapsed .side-section-label { display: none; }
/* Footer de perfil */
.side-profile {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: 11px;
margin-bottom: 8px;
background: var(--color-sidebar-hover);
border: 1px solid var(--color-sidebar-border);
transition: background 0.18s ease;
overflow: hidden;
}
.side-profile:hover { background: var(--color-sidebar-active-bg); }
.side-profile-avatar {
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary), #d99a1e);
color: #07213d;
font-weight: 800;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.side-profile-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
/* Fila nombre + chip de plan: el chip NUNCA se encoge/corta; solo el
nombre trunca con ellipsis cuando no hay espacio. */
.side-profile-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.side-profile-name {
font-size: 13px;
font-weight: 700;
color: var(--color-sidebar-text-strong);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.side-profile-name-row .pro-badge,
.side-profile-name-row .side-plan-chip { flex-shrink: 0; }
.side-profile-email {
font-size: 11px;
color: var(--color-sidebar-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.sidebar-collapsed .side-profile-text { display: none; }
body.sidebar-collapsed .side-profile {
justify-content: center;
padding: 6px;
background: transparent;
border-color: transparent;
}
.side-group { display: flex; flex-direction: column; gap: 6px; padding-bottom: 2px; }
.side-group-header { display: flex; align-items: center; gap: 6px; }
.side-item--main { flex: 1; border-bottom: 0; }
.side-toggle-btn {
width: 20px;
height: 20px;
border: 1px solid var(--color-sidebar-border);
background: transparent;
color: var(--color-sidebar-text);
border-radius: 6px;
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.side-toggle-btn:hover { background: var(--color-sidebar-hover); border-color: var(--color-sidebar-muted); }
.side-toggle-btn[disabled] { opacity: 0.5; cursor: default; }
.side-group.is-open .side-toggle-btn { transform: rotate(90deg); }
.side-sublist { display: none; flex-direction: column; gap: 4px; padding-left: 28px; }
.side-group.is-open .side-sublist { display: flex; }
.side-subitem {
color: var(--color-sidebar-text);
font-size: 14px;
padding: 6px 8px;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
display: block;
}
.side-subitem:hover { background: var(--color-sidebar-hover); }
.side-subitem.is-active {
background: var(--color-sidebar-active-bg);
color: var(--color-sidebar-text-strong);
box-shadow: inset 3px 0 0 var(--color-sidebar-accent);
}
.side-subitem--empty { opacity: 0.7; cursor: default; }
.dashboard-wrapper { display: flex; overflow-x: clip; }
.dashboard-wrapper .page {
margin: 0;
margin-left: var(--sidebar-offset);
width: calc(100% - var(--sidebar-offset));
max-width: none;
background: transparent;
box-shadow: none;
padding: 14px 18px 24px;
position: relative;
z-index: 0;
/* Hijo flex: sin esto NO se encoge por debajo del ancho de su
contenido, y una tabla/gráfica ancha lo empuja fuera de la
pantalla (y overflow-x:clip lo recorta). */
min-width: 0;
}
.dashboard-wrapper .page-shell {
position: relative;
width: 100%;
max-width: var(--dashboard-max-width);
margin: 0 auto;
overflow: visible;
isolation: isolate;
z-index: 2;
min-width: 0;
}
.dashboard-wrapper .page-content { position: relative; z-index: 2; min-width: 0; }
.dashboard-wrapper .page-content > div:not(.ideas-bg):not(.proyectos-bg):not(.empresas-bg):not(.productos-bg) {
/* Panel de vidrio esmerilado: deja ver el degradado del fondo detrás
del contenido sin perder legibilidad (estilo Linear/Vercel). */
background: var(--panel-glass);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
padding: 24px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-2);
max-width: var(--dashboard-max-width);
width: 100%;
margin: 0 auto;
}
.sidebar-logo-box {
width: 100%;
padding: 8px 6px 20px 6px;
margin: 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.sidebar-logo-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 0;
background: transparent;
}
.sidebar-logo { height: auto; display: block; }
.sidebar-logo-full { width: 140px; transition: width 0.2s ease; content: var(--color-sidebar-logo); }
.sidebar-logo-icon { width: 40px; display: none; }
.side-icon {
width: 22px;
min-width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.side-label { white-space: nowrap; }
.sidebar-toggle {
border: 1px solid var(--color-sidebar-border);
background: transparent;
color: var(--color-sidebar-text);
border-radius: 8px;
width: 34px;
height: 34px;
margin-top: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
}
.sidebar-toggle:hover { background: var(--color-sidebar-hover); border-color: var(--color-sidebar-muted); }
body.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .side-label { display: none; }
body.sidebar-collapsed .side-item { justify-content: center; padding-left: 6px; padding-right: 6px; }
body.sidebar-collapsed .side-item:hover { padding-left: 6px; }
body.sidebar-collapsed .sidebar-logo-full { display: none; }
body.sidebar-collapsed .sidebar-logo-icon { display: block; }
body.sidebar-collapsed .sidebar-logo-box { flex-direction: column; justify-content: center; }
body.sidebar-collapsed .side-toggle-btn { display: none; }
body.sidebar-collapsed .side-sublist { display: none !important; }
body.sidebar-collapsed .side-group { border-bottom: 1px solid var(--color-sidebar-border); }
body.sidebar-collapsed .side-group-header { gap: 0; }
/* Tablas y alerts */
/* Tablas modernas: divisores horizontales (no rejilla), encabezado
sutil y hover de fila. Consistente en claro/oscuro vía tokens.
(Antes: borde completo en cada celda y, en oscuro, líneas blancas.) */
.table { width: 100%; border-collapse: collapse; color: var(--color-text); text-shadow: none; font-size: 0.92rem; }
.table th, .table td { padding: 11px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.table thead th {
font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
font-weight: 700; color: var(--color-text-soft);
background: var(--color-surface-muted);
border-bottom: 1px solid var(--color-border);
}
.table thead th:not(.text-end) { text-align: left; }
.table tbody tr:not(.row-band):hover td { background: var(--color-surface-muted); }
.table tbody tr:last-child td { border-bottom: none; }
.table-sm th, .table-sm td { padding: 8px 10px; }
.table-responsive { overflow-x: auto; }
.table .mes-cero td { font-weight: 600; background: var(--color-surface-muted); }
/* ── Tablas con scroll horizontal: primera columna FIJA + scrollbar acorde ──
La primera columna (la etiqueta de la cuenta) queda anclada a la
izquierda para no perder la referencia al deslizar. */
.table-responsive, .overflow-x-auto { scrollbar-width: thin; scrollbar-color: var(--color-border) var(--color-surface-muted); }
.table-responsive::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar { height: 10px; width: 10px; }
.table-responsive::-webkit-scrollbar-track,
.overflow-x-auto::-webkit-scrollbar-track { background: var(--color-surface-muted); border-radius: 999px; }
.table-responsive::-webkit-scrollbar-thumb,
.overflow-x-auto::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }
.table-responsive::-webkit-scrollbar-thumb:hover,
.overflow-x-auto::-webkit-scrollbar-thumb:hover { background: var(--color-text-soft); }
/* Columna fija (sticky). Fondo opaco para tapar lo que se desliza debajo
y un divisor a la derecha vía box-shadow (robusto con border-collapse). */
.table-responsive .table th:first-child,
.table-responsive .table td:first-child,
.overflow-x-auto .table th:first-child,
.overflow-x-auto .table td:first-child {
position: sticky; left: 0; z-index: 1;
background: var(--color-surface);
box-shadow: 1px 0 0 var(--color-border);
}
.table-responsive .table thead th:first-child,
.overflow-x-auto .table thead th:first-child {
z-index: 2; background: var(--color-surface-muted);
}
/* La columna fija sigue el color de la fila en hover y en filas TOTAL */
.table-responsive .table tbody tr:not(.row-band):hover td:first-child,
.overflow-x-auto .table tbody tr:not(.row-band):hover td:first-child { background: var(--color-surface-muted); }
.table-responsive .table .row-band td:first-child,
.overflow-x-auto .table .row-band td:first-child { background: var(--color-band-bg); }
.table-responsive .table .mes-cero td:first-child,
.overflow-x-auto .table .mes-cero td:first-child { background: var(--color-surface-muted); }
.table-action-group { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.table-action-link { text-decoration: none; } /* font-weight → @layer components */
.table-action-link:hover { text-decoration: underline; }
.table-action-link--edit { color: var(--color-primary-strong); }
.table-action-link--edit:hover { color: var(--color-primary); }
/* .table-action-link--delete[:hover] → @layer components */
.table-action-link--aux { color: var(--color-accent); }
.credit-detail-card { background: var(--color-surface-ghost); }
.alert { border-radius: var(--radius-md); padding: 12px 14px; border: 1px solid var(--color-border); background: var(--color-surface-muted); color: var(--color-text); }
.alert-secondary { background: var(--color-surface-muted); color: var(--color-text); }
/* Insumos / moneda */
.insumos-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; margin-bottom: 12px; }
.insumos-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.insumos-summary { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-weight: 500; color: var(--color-text); gap: 10px; }
.pill { background: transparent; border: 1px solid var(--color-border); color: var(--color-text); padding: 6px 10px; border-radius: 10px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.currency-field { display: flex; align-items: center; gap: 8px; }
.currency-suffix { display: inline-flex; align-items: center; padding: 0; background: transparent; border: none; font-weight: 400; color: #495057; white-space: nowrap; }
.currency-input { border-radius: 8px; }
/* Links auxiliares */
.label-ideas { font-weight: 500; }
.cancelar-link { color: var(--color-primary-strong); font-weight: 400; }
/* .credit-name-link[:hover] → @layer components */
/* ── Páginas de error (404 / 500) ─────────────────────────────── */
.error-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
background: var(--color-bg);
font-family: var(--font-body);
}
.error-card {
text-align: center;
max-width: 480px;
width: 100%;
padding: 56px 40px 48px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-strong);
}
.error-code-number {
font-family: var(--font-headings);
font-size: 100px;
font-weight: 800;
line-height: 1;
letter-spacing: -4px;
margin-bottom: 4px;
}
.error-code--404 { color: var(--color-primary); }
.error-code--500 { color: var(--color-danger); }
.error-icon-line {
font-size: 32px;
color: var(--color-text-soft);
margin-bottom: 20px;
opacity: 0.6;
}
.error-title {
font-family: var(--font-headings);
font-size: 22px;
font-weight: 700;
color: var(--color-text);
margin: 0 0 10px;
}
.error-message {
color: var(--color-text-soft);
font-size: 15px;
line-height: 1.65;
margin: 0 0 32px;
}
.error-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.error-btn {
display: inline-block;
background: var(--color-primary-strong);
color: #fff !important;
font-weight: 600;
font-size: 14px;
padding: 11px 24px;
border-radius: var(--radius-md);
text-decoration: none;
transition: opacity 0.18s;
}
.error-btn:hover { opacity: 0.85; }
.error-btn--secondary {
background: transparent;
color: var(--color-text) !important;
border: 1.5px solid var(--color-border);
}
.error-btn--secondary:hover {
background: var(--color-surface-muted);
opacity: 1;
}
/* Respuesta parcial para peticiones HTMX */
.error-inline {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
background: var(--color-surface-muted);
color: var(--color-text-soft);
font-size: 14px;
}
.error-inline a {
margin-left: auto;
color: var(--color-primary-strong);
font-weight: 600;
text-decoration: none;
}
/* ─── Escenarios ─────────────────────────────────────────── */
.escenario-table-wrap {
overflow-x: auto;
}
.escenario-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
table-layout: fixed;
}
.escenario-col-label { width: 36%; }
.escenario-col-data { width: auto; }
.escenario-th {
padding: 10px 14px;
text-align: left;
border-bottom: 2px solid var(--color-border);
font-weight: 600;
white-space: nowrap;
background: var(--color-surface-muted);
}
.escenario-th-inner {
display: flex;
align-items: center;
gap: 6px;
}
.escenario-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.escenario-td {
padding: 8px 14px;
border-bottom: 1px solid var(--color-border);
vertical-align: middle;
}
.escenario-val {
font-variant-numeric: tabular-nums;
text-align: right;
font-weight: 500;
}
.escenario-val--neg {
color: #EF4444;
}
.escenario-kpi-label {
display: flex;
flex-direction: column;
gap: 1px;
}
.escenario-year {
font-size: 11px;
color: var(--color-text-soft);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.escenario-separator td {
padding: 4px 0;
border-bottom: 2px solid var(--color-border);
}
.escenario-tr:hover td {
background: var(--color-surface-muted);
}
.escenario-card {
margin-bottom: 16px;
}
.escenario-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
gap: 12px;
}
.escenario-form-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
}
.escenario-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.escenario-badge--pos { background: #DCFCE7; color: #16A34A; }
.escenario-badge--neg { background: #FEE2E2; color: #DC2626; }
.escenario-badge--neu { background: var(--color-surface-muted); color: var(--color-text-soft); }
.escenario-val--muted { color: var(--color-text-soft); font-size: 13px; }
.escenario-tr--highlight td { background: rgba(255,255,255,0.04); font-weight: 600; }
.escenario-tr--section td { background: var(--color-surface-muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; padding-top: 10px; padding-bottom: 10px; }
.escenario-tr--total td { font-weight: 600; border-top: 2px solid var(--color-border); }
.escenario-tr--sub td { font-size: 13px; color: var(--color-text-soft); }
/* ── Selector de píldoras (KPI / año) ─────────────────── */
.esc-pill-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 20px;
padding: 4px;
background: var(--color-bg);
border-radius: 12px;
border: 1px solid var(--color-border);
width: fit-content;
}
.esc-pill-btn {
padding: 6px 20px;
border-radius: 8px;
border: none;
background: transparent;
color: var(--color-text-soft);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
white-space: nowrap;
}
.esc-pill-btn:hover {
background: var(--color-surface);
color: var(--color-text);
}
.esc-pill-btn--active {
background: var(--color-primary);
color: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
/* ── Tarjetas de KPI de síntesis ──────────────────────── */
.esc-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
}
.esc-summary-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 18px 20px;
}
.esc-sc-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.esc-sc-name-row {
display: flex;
align-items: center;
gap: 8px;
}
.esc-sc-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.esc-sc-nombre {
font-size: 13px;
font-weight: 700;
color: var(--color-text);
}
.esc-sc-value {
font-size: 28px;
font-weight: 800;
color: var(--color-primary-strong);
font-family: var(--font-headings);
line-height: 1.1;
}
.esc-sc-value--neg { color: #ef4444; }
.esc-sc-subtitle {
font-size: 11px;
color: var(--color-text-soft);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ─── View Transitions (Tarea 6) ───────────────────────────────── */
#content-inner { view-transition-name: content-inner; }
@keyframes _vt-out {
to { opacity: 0; transform: translateY(-6px); }
}
@keyframes _vt-in {
from { opacity: 0; transform: translateY(8px); }
}
::view-transition-old(content-inner) {
animation: 140ms ease-in both _vt-out;
}
::view-transition-new(content-inner) {
animation: 240ms ease-out both _vt-in;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(content-inner),
::view-transition-new(content-inner) { animation: none; }
}
/* ─── Barra de progreso de navegación ───────────────────────────── */
.page-progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--color-primary);
transform: scaleX(0);
transform-origin: left;
z-index: 9999;
pointer-events: none;
opacity: 0;
border-radius: 0 2px 2px 0;
}
.page-progress--active {
opacity: 1;
animation: _pb-fill 1.8s ease-out forwards;
}
@keyframes _pb-fill {
0% { transform: scaleX(0); }
20% { transform: scaleX(0.25); }
50% { transform: scaleX(0.55); }
80% { transform: scaleX(0.80); }
100% { transform: scaleX(0.90); }
}
/* ─── Micro-interacciones (Tarea 9) ─────────────────────────────── */
/* Transición suave en todos los links */
a { transition: color 0.15s ease; }
.nav-links a { transition: color 0.15s ease, border-bottom-color 0.15s ease; }
.breadcrumb-link { transition: color 0.15s ease; }
/* focus-visible — anillo consistente para navegación por teclado */
/* Solo se muestra con Tab, no con el ratón (mejora accesibilidad + look) */
button:focus-visible,
.btn:focus-visible,
.idea-btn:focus-visible,
.btn-nav:focus-visible,
.btn-new-idea:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.side-item:focus-visible,
.side-toggle-btn:focus-visible,
.sidebar-toggle:focus-visible,
.view-toggle:focus-visible,
.glosario-cat-btn:focus-visible {
outline: 2.5px solid var(--color-primary);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] .btn:focus-visible,
html[data-theme="dark"] .idea-btn:focus-visible,
html[data-theme="dark"] a:focus-visible {
outline-color: var(--color-primary);
box-shadow: 0 0 0 4px rgba(242, 182, 50, 0.25);
}
/* :active — sensación de pulsación física en botones */
button:active,
.btn:active,
.idea-btn:active,
.btn-new-idea:active,
.btn-guardar:active,
.btn-eliminar:active {
transform: translateY(0px) scale(0.97) !important;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.18) !important;
transition-duration: 0.05s !important;
}
/* Cursor de espera mientras navega por HTMX */
body.htmx-loading,
body.htmx-loading * { cursor: wait !important; }
/* ─── Skeleton — clases de utilidad para estados de carga ───────── */
@keyframes _sk-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
.skeleton {
background: var(--color-surface-muted);
border-radius: var(--radius-sm);
animation: _sk-pulse 1.6s ease-in-out infinite;
display: block;
min-height: 1em;
}
.skeleton-line { height: 1em; margin-bottom: 0.5em; }
.skeleton-line--short { width: 40%; }
.skeleton-line--medium { width: 70%; }
.skeleton-line--full { width: 100%; }
.skeleton-title { height: 1.75em; margin-bottom: 0.75em; width: 55%; }
.skeleton-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 20px 22px;
box-shadow: var(--shadow-soft);
margin-bottom: 16px;
}
@media (prefers-reduced-motion: reduce) {
.skeleton { animation: none; opacity: 0.6; }
}
/* ─── Responsive / Móvil (Tarea 8) ──────────────────────────────── */
/* Overlay del drawer — se activa solo en móvil con body.sidebar-open */
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 199;
}
body.sidebar-open .sidebar-overlay { display: block; }
/* Botón hamburguesa — solo visible en móvil */
.mobile-nav-btn { display: none; }
@media (max-width: 768px) {
/* ── Sidebar como drawer ────────────────────────────────── */
.sidebar {
transform: translateX(-100%);
transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.26s ease;
z-index: 200;
min-height: 100svh;
}
body.sidebar-open .sidebar {
transform: translateX(0);
box-shadow: 6px 0 32px rgba(0, 0, 0, 0.4);
}
/* Anular estado "collapsed" en móvil — el drawer siempre se muestra completo */
body.sidebar-collapsed .sidebar { width: var(--sidebar-width) !important; }
body.sidebar-collapsed .side-label { display: flex !important; }
body.sidebar-collapsed .side-item { justify-content: flex-start !important; padding-left: 8px !important; }
body.sidebar-collapsed .sidebar-logo-full { display: block !important; }
body.sidebar-collapsed .sidebar-logo-icon { display: none !important; }
body.sidebar-collapsed .side-toggle-btn { display: inline-flex !important; }
/* ── Contenido a ancho completo ─────────────────────────── */
.dashboard-wrapper .page,
.dashboard-wrapper .page--flat {
margin-left: 0 !important;
width: 100% !important;
}
/* Espacio para el botón hamburguesa fijo */
.page-content { padding-top: 52px; }
/* ── Botón hamburguesa ──────────────────────────────────── */
.mobile-nav-btn {
display: inline-flex;
position: fixed;
top: 10px;
left: 10px;
z-index: 198;
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--color-sidebar-bg);
color: var(--color-sidebar-text);
border: 1px solid rgba(255, 255, 255, 0.25);
align-items: center;
justify-content: center;
box-shadow: var(--shadow-soft);
cursor: pointer;
transition: background 0.15s ease;
}
.mobile-nav-btn:hover,
.mobile-nav-btn:focus-visible { background: var(--color-sidebar-hover); }
body.sidebar-open .mobile-nav-btn { display: none; }
/* ── Tablas con scroll horizontal ───────────────────────── */
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* Sombra lateral que indica contenido fuera de pantalla */
background:
linear-gradient(to right, var(--color-surface) 30%, transparent) 0 0,
linear-gradient(to left, var(--color-surface) 30%, transparent) 100% 0,
radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.10), transparent) 0 0,
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.10), transparent) 100% 0;
background-repeat: no-repeat;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;
}
.table { min-width: 520px; }
/* Tablas puestas directamente dentro de una tarjeta (sin envoltorio
.table-responsive): la tarjeta permite scroll horizontal para que
la tabla no se desborde de la pantalla. */
.page-content .card:has(> .table),
.page-content .card:has(> table) {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ── Grids a 1 columna ──────────────────────────────────── */
.ideas-grid, .home-grid { grid-template-columns: 1fr !important; }
.dashboard-items-grid { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; }
.dashboard-item--chart { grid-column: span 1 !important; grid-row: span 1 !important; }
/* ── KPIs: tarjetas más estrechas para que quepan en móvil ─ */
.kpi-grid, .kpi-grid--compact {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
}
/* ── Tipografía fluida ──────────────────────────────────── */
h1, .page-title { font-size: clamp(1.3rem, 5vw, 1.9rem) !important; }
h2 { font-size: clamp(1.1rem, 4vw, 1.45rem); }
/* ── Padding de contenido interior ──────────────────────── */
.dashboard-wrapper .page-content > div:not(.ideas-bg):not(.proyectos-bg):not(.empresas-bg):not(.productos-bg) {
padding: 16px !important;
}
/* ── Botones y acciones ─────────────────────────────────── */
.auth-actions,
.idea-actions,
.idea-actions-bottom { flex-wrap: wrap; }
}
/* ─── Celulares (pantallas muy estrechas) ───────────────────── */
@media (max-width: 480px) {
/* Menos relleno lateral para aprovechar el ancho del teléfono. */
.dashboard-wrapper .page { padding: 10px 8px 20px; }
.dashboard-wrapper .page-content > div:not(.ideas-bg):not(.proyectos-bg):not(.empresas-bg):not(.productos-bg) {
padding: 12px !important;
}
.kpi-grid, .kpi-grid--compact { gap: 8px; }
/* Filas de pestañas/píldoras: que se deslicen en vez de desbordar. */
.esc-pill-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
}
/* ═══════════════════════════════════════════════════════════════
@layer components — reglas que deben ganar a selectores de
contexto de mayor especificidad SIN usar !important.
═══════════════════════════════════════════════════════════════ */
@layer components {
/* Estas reglas deben ganar a selectores de contexto de mayor
especificidad (.nav-links a [0,1,1] · .X-bg a:not(...) [0,4,1])
SIN !important. El orden de capas (components > base) lo garantiza. */
.btn-nav { color: #ffffff; }
.btn-nav:hover { color: #fff; }
.table-action-link { font-weight: 400; }
.table-action-link--delete { color: var(--color-danger); }
.table-action-link--delete:hover { color: var(--color-danger-strong); }
.credit-name-link { color: var(--color-primary-strong); }
.credit-name-link:hover { color: var(--color-primary); }
}
/* ═══════════════════════════════════════════════════════════════
@layer utilities — clases utilitarias que ganan a componentes.
═══════════════════════════════════════════════════════════════ */
@layer utilities {
/* Clases utilitarias: ganan a componentes y tema (utilities es la
última capa). Antes usaban !important para forzar esto. */
.text-white { color: #ffffff; }
.text-danger { color: var(--color-danger); }
.text-muted { color: var(--color-text-soft); }
}
/* ═══════════════════════════════════════════════════════════════
REDISEÑO FASE 2 — Movimiento y micro-interacciones
Entrada escalonada · micro-interacciones · shimmer de carga.
Todo respeta prefers-reduced-motion (ver bloque final).
═══════════════════════════════════════════════════════════════ */
@layer base {
@keyframes kuent-fade-up {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Entrada escalonada: las tarjetas aparecen con un suave fade-up.
Se dispara automáticamente al cargar y tras cada swap de HTMX
(los elementos recién insertados ejecutan su animación). */
.page-content .card,
.page-content .idea-card,
.page-content .productos-card,
.page-content .credit-detail-card,
.page-content .kpi-card,
.page-content .edu-video-card,
.page-content .favorite-card {
animation: kuent-fade-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Escalonado por posición (hasta 8; el resto comparte el último delay) */
.page-content .card:nth-child(1),
.page-content .kpi-card:nth-child(1) { animation-delay: 0.02s; }
.page-content .card:nth-child(2),
.page-content .kpi-card:nth-child(2) { animation-delay: 0.07s; }
.page-content .card:nth-child(3),
.page-content .kpi-card:nth-child(3) { animation-delay: 0.12s; }
.page-content .card:nth-child(4),
.page-content .kpi-card:nth-child(4) { animation-delay: 0.17s; }
.page-content .card:nth-child(5),
.page-content .kpi-card:nth-child(5) { animation-delay: 0.22s; }
.page-content .card:nth-child(6),
.page-content .kpi-card:nth-child(6) { animation-delay: 0.27s; }
/* Tarjetas dentro de grids (videos / favoritos) también escalonan */
.edu-video-grid > .edu-video-card:nth-child(1),
.menu-favorites-grid > .favorite-card:nth-child(1) { animation-delay: 0.04s; }
.edu-video-grid > .edu-video-card:nth-child(2),
.menu-favorites-grid > .favorite-card:nth-child(2) { animation-delay: 0.10s; }
.edu-video-grid > .edu-video-card:nth-child(3),
.menu-favorites-grid > .favorite-card:nth-child(3) { animation-delay: 0.16s; }
.edu-video-grid > .edu-video-card:nth-child(4) { animation-delay: 0.22s; }
.edu-video-grid > .edu-video-card:nth-child(5) { animation-delay: 0.28s; }
.edu-video-grid > .edu-video-card:nth-child(6) { animation-delay: 0.34s; }
.edu-video-grid > .edu-video-card:nth-child(7) { animation-delay: 0.40s; }
.edu-video-grid > .edu-video-card:nth-child(8) { animation-delay: 0.46s; }
/* Micro-interacción de botones: realce al pasar + hundido al presionar */
button:not(:disabled):hover, .btn:not(:disabled):hover,
.idea-btn:not(.idea-btn--disabled):hover, .btn-new-idea:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-2);
}
button:not(:disabled):active, .btn:not(:disabled):active,
.idea-btn:not(.idea-btn--disabled):active, .btn-new-idea:active {
transform: translateY(1px);
box-shadow: var(--shadow-1);
transition-duration: 0.05s;
}
/* Conteo animado: leve aparición de la cifra al iniciar el count-up */
.kpi-value.is-counting { color: var(--color-primary-strong); }
/* Shimmer de carga HTMX (skeleton-lite): mientras navega, el contenido
saliente se atenúa y una banda de luz lo recorre. Da feedback de
"algo está pasando" sin construir skeletons por página. */
body.htmx-loading .page-content {
position: relative;
opacity: 0.55;
transition: opacity 0.15s ease;
}
body.htmx-loading .page-content::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg,
transparent 30%,
rgba(148, 163, 184, 0.10) 50%,
transparent 70%);
background-size: 200% 100%;
animation: kuent-shimmer 1.1s ease-in-out infinite;
pointer-events: none;
z-index: 1;
}
@keyframes kuent-shimmer {
from { background-position: 180% 0; }
to { background-position: -80% 0; }
}
/* ── Fase 4: Command palette (Ctrl/Cmd+K) ─────────────────────── */
.cmdk-overlay {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: flex-start;
justify-content: center;
padding: 12vh 16px 16px;
background: rgba(8, 15, 28, 0.45);
backdrop-filter: saturate(140%) blur(4px);
-webkit-backdrop-filter: saturate(140%) blur(4px);
}
.cmdk-overlay--open { display: flex; animation: kuent-fade-up 0.15s ease both; }
.cmdk-modal {
width: 100%;
max-width: 560px;
background: var(--color-surface);
background-image: var(--surface-card-grad);
border: 1px solid var(--hairline-strong);
border-radius: 14px;
box-shadow: var(--shadow-3), var(--inner-highlight);
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 70vh;
}
.cmdk-search-row {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--hairline);
}
.cmdk-search-icon { color: var(--color-text-soft); display: inline-flex; font-size: 18px; }
.cmdk-input {
flex: 1;
border: none;
outline: none;
background: transparent;
color: var(--color-text);
font-size: 16px;
font-family: var(--font-body);
}
.cmdk-input::placeholder { color: var(--color-text-soft); }
.cmdk-esc {
font-size: 11px;
color: var(--color-text-soft);
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 2px 7px;
}
.cmdk-list { overflow-y: auto; padding: 8px; flex: 1; }
.cmdk-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 9px;
color: var(--color-text);
font-weight: 500;
cursor: pointer;
scroll-margin: 8px;
}
.cmdk-item-icon { color: var(--color-text-soft); display: inline-flex; font-size: 16px; flex-shrink: 0; }
.cmdk-item-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item-group {
font-size: 11px;
color: var(--color-text-soft);
background: var(--color-surface-muted);
border: 1px solid var(--hairline);
border-radius: 6px;
padding: 2px 8px;
flex-shrink: 0;
}
.cmdk-item.is-active,
.cmdk-item:hover {
background: var(--color-surface-muted);
color: var(--color-text);
}
.cmdk-item.is-active { box-shadow: inset 3px 0 0 var(--color-primary); }
.cmdk-item.is-active .cmdk-item-icon { color: var(--color-primary); }
html[data-theme="dark"] .cmdk-item.is-active {
background: rgba(75, 163, 243, 0.12);
box-shadow: inset 3px 0 0 var(--color-accent);
}
html[data-theme="dark"] .cmdk-item.is-active .cmdk-item-icon { color: var(--color-accent); }
.cmdk-empty { display: none; text-align: center; color: var(--color-text-soft); padding: 24px; font-size: 0.92rem; }
.cmdk-footer {
display: flex;
gap: 16px;
padding: 10px 16px;
border-top: 1px solid var(--hairline);
font-size: 11px;
color: var(--color-text-soft);
}
.cmdk-footer span { white-space: nowrap; }
@media (max-width: 600px) {
.cmdk-overlay { padding-top: 8vh; }
.cmdk-item-group { display: none; }
.cmdk-footer { display: none; }
}
/* ── Fase 0: FAB de escenarios económicos ─────────────────── */
.scenario-fab { position: fixed; right: 22px; bottom: 22px; z-index: 900; }
.scenario-fab[hidden] { display: none; }
.scfab-btn {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 12px 18px;
border-radius: 999px;
border: 1px solid var(--hairline-strong);
background: linear-gradient(135deg, var(--color-accent), var(--color-primary-strong));
color: #ffffff;
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
cursor: pointer;
box-shadow: var(--shadow-3);
transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s ease;
}
.scfab-btn-icon { display: inline-flex; font-size: 17px; }
.scenario-fab:hover .scfab-btn,
.scenario-fab:focus-within .scfab-btn {
transform: scale(1.07);
box-shadow: var(--shadow-3), 0 0 0 4px rgba(27,95,158,0.18);
}
.scfab-panel {
position: absolute;
bottom: calc(100% + 12px);
right: 0;
width: 300px;
background: var(--color-surface);
background-image: var(--surface-card-grad);
border: 1px solid var(--hairline-strong);
border-radius: 14px;
box-shadow: var(--shadow-3), var(--inner-highlight);
padding: 14px;
opacity: 0;
transform: translateY(10px) scale(0.98);
transform-origin: bottom right;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);
}
.scenario-fab:hover .scfab-panel,
.scenario-fab:focus-within .scfab-panel {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.scfab-panel-head { display: flex; align-items: center; gap: 8px; }
.scfab-panel-icon { color: var(--color-accent); display: inline-flex; font-size: 18px; }
.scfab-panel-title { font-family: var(--font-headings); font-weight: 800; font-size: 15px; color: var(--color-text); letter-spacing: -0.01em; }
.scfab-panel-sub { margin: 6px 0 12px; font-size: 12px; color: var(--color-text-soft); line-height: 1.45; }
.scfab-list { display: flex; flex-direction: column; gap: 3px; }
.scfab-item {
display: flex;
align-items: center;
gap: 11px;
width: 100%;
padding: 9px 10px;
border-radius: 10px;
border: 1px solid transparent;
background: transparent;
color: var(--color-text);
font-family: inherit;
text-align: left;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.scfab-item:hover { background: var(--color-surface-muted); }
.scfab-item--activo { border-color: var(--hairline-strong); background: var(--color-surface-muted); }
.scfab-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(15,23,42,0.05); }
.scfab-item-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.22; flex: 1; }
.scfab-item-name { font-size: 13.5px; font-weight: 700; }
.scfab-item-desc { font-size: 11px; color: var(--color-text-soft); }
.scfab-item-active-tag {
display: none;
font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--color-accent);
background: rgba(27,95,158,0.12);
padding: 2px 7px; border-radius: 999px; flex-shrink: 0;
}
.scfab-item--activo .scfab-item-active-tag { display: inline-block; }
/* Indicador del escenario actual en el panel y el botón */
.scfab-current {
display: flex; align-items: center; gap: 7px;
margin: 0 0 10px; padding: 7px 10px;
border-radius: 9px; background: var(--color-surface-muted);
font-size: 12px;
}
.scfab-current-label { color: var(--color-text-soft); }
.scfab-current-dot { width: 9px; height: 9px; border-radius: 50%; background: #6B7280; flex-shrink: 0; }
.scfab-current-name { font-weight: 700; color: var(--color-text); }
.scfab-btn-dot { width: 10px; height: 10px; border-radius: 50%; background: #6B7280; box-shadow: 0 0 0 2px rgba(255,255,255,0.5); }
.scfab-btn-dot[hidden] { display: none; }
.scenario-fab--activo .scfab-btn { box-shadow: var(--shadow-3), 0 0 0 3px rgba(255,255,255,0.25); }
.scfab-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin-top: 12px;
padding: 10px;
border-radius: 10px;
background: var(--color-accent);
color: #ffffff;
font-weight: 700;
font-size: 13px;
}
.scfab-cta:hover { background: var(--color-primary-strong); color: #ffffff; }
.scfab-cta svg, .scfab-cta .icon { font-size: 15px; }
@media (max-width: 600px) {
.scenario-fab { right: 14px; bottom: 14px; }
.scfab-btn-label { display: none; }
.scfab-panel { width: min(82vw, 300px); }
}
/* Modal in situ de comparación de escenarios */
.scfab-modal {
position: fixed;
inset: 0;
z-index: 1100;
display: none;
align-items: flex-start;
justify-content: center;
padding: 6vh 16px 16px;
background: rgba(8, 15, 28, 0.5);
backdrop-filter: saturate(140%) blur(4px);
-webkit-backdrop-filter: saturate(140%) blur(4px);
}
.scfab-modal--open { display: flex; animation: kuent-fade-up 0.18s ease both; }
.scfab-modal-panel {
width: 100%;
max-width: 940px;
max-height: 86vh;
display: flex;
flex-direction: column;
background: var(--color-surface);
background-image: var(--surface-card-grad);
border: 1px solid var(--hairline-strong);
border-radius: 16px;
box-shadow: var(--shadow-3), var(--inner-highlight);
overflow: hidden;
}
.scfab-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid var(--hairline);
}
.scfab-modal-title { font-family: var(--font-headings); font-weight: 800; font-size: 16px; color: var(--color-text); letter-spacing: -0.01em; }
.scfab-modal-close {
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid var(--color-border);
background: transparent;
color: var(--color-text-soft);
cursor: pointer;
font-size: 15px;
line-height: 1;
}
.scfab-modal-close:hover { background: var(--color-surface-muted); color: var(--color-text); }
.scfab-modal-body { padding: 16px 18px; overflow-y: auto; }
.scfab-modal-loading { padding: 40px; text-align: center; color: var(--color-text-soft); }
@media (max-width: 600px) { .scfab-modal { padding: 2vh 8px; } .scfab-modal-panel { max-height: 94vh; } }
/* Modal de confirmación de cambio de escenario (recalcula todo el proyecto) */
.scfab-confirm {
position: fixed;
inset: 0;
z-index: 1200;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(15,23,42,0.46);
backdrop-filter: blur(2px);
}
.scfab-confirm--open { display: flex; animation: kuent-fade-up 0.16s ease both; }
.scfab-confirm-panel {
width: min(420px, 94vw);
background: var(--color-surface);
background-image: var(--surface-card-grad);
border: 1px solid var(--hairline-strong);
border-radius: 16px;
box-shadow: var(--shadow-3), var(--inner-highlight);
padding: 20px;
}
.scfab-confirm-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.scfab-confirm-dot { width: 13px; height: 13px; border-radius: 50%; background: #6B7280; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(15,23,42,0.06); }
.scfab-confirm-title { font-family: var(--font-headings); font-weight: 800; font-size: 16px; color: var(--color-text); letter-spacing: -0.01em; }
.scfab-confirm-text { margin: 0 0 8px; font-size: 13.5px; color: var(--color-text); line-height: 1.5; }
.scfab-confirm-note { margin: 0 0 16px; font-size: 12px; color: var(--color-text-soft); line-height: 1.45; }
.scfab-confirm-actions { display: flex; justify-content: flex-end; gap: 9px; }
/* Resumen de perfil económico en tarjetas de escenario */
.escenario-perfil {
margin: 10px 0 14px;
padding: 12px 14px;
border-radius: 12px;
background: var(--color-surface-muted);
border: 1px solid var(--hairline);
}
.perfil-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.perfil-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-soft); }
.perfil-name { font-family: var(--font-headings); font-weight: 800; color: var(--color-primary-strong); font-size: 14px; }
.perfil-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.perfil-rate {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
padding: 6px 10px;
border-radius: 8px;
background: var(--color-surface);
border: 1px solid var(--hairline);
}
.perfil-rate-label { font-size: 11.5px; color: var(--color-text-soft); }
.perfil-rate-value { font-size: 14px; font-weight: 800; color: var(--color-text); }
.perfil-note { font-size: 11px; margin: 10px 0 0; line-height: 1.45; }
@media (max-width: 560px) { .perfil-rates { grid-template-columns: 1fr; } }
/* Tasas macro editables en la tarjeta de escenario */
.escenario-econ-fields { display: flex; flex-direction: column; gap: 6px; }
.escenario-econ-fields > .mb-2 { max-width: 420px; }
.escenario-rates-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; margin-top: 4px; max-width: 720px; }
/* Tabla de configuración de escenarios (una fila por escenario) */
.config-table { width: 100%; border-collapse: collapse; }
.config-table th {
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid var(--hairline);
vertical-align: bottom;
}
.config-th { display: flex; flex-direction: column; }
.config-th { font-size: 13px; font-weight: 700; color: var(--color-text); }
.config-th-sub { font-size: 10.5px; font-weight: 500; color: var(--color-text-soft); text-transform: none; letter-spacing: 0; }
.config-table td {
padding: 9px 12px;
border-bottom: 1px solid var(--hairline);
vertical-align: middle;
}
.config-table tr:last-child td { border-bottom: none; }
.config-name-wrap { display: flex; align-items: center; gap: 9px; }
.config-name { font-weight: 700; font-size: 14px; color: var(--color-text); }
.config-name-input {
width: 150px; padding: 7px 10px;
border: 1px solid var(--color-border); border-radius: 8px;
background: var(--color-surface); color: var(--color-text); font-size: 13px;
}
.config-rate-input {
width: 78px; padding: 7px 9px;
border: 1px solid var(--color-border); border-radius: 8px;
background: var(--color-surface); color: var(--color-text);
font-size: 13px; font-weight: 600; text-align: right;
}
.config-rate-input:focus { border-color: var(--color-primary); outline: none; }
.config-rate-input[readonly] { background: var(--color-surface-muted); color: var(--color-text-soft); font-weight: 500; }
.config-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.config-actions-td { text-align: right; white-space: nowrap; }
.config-ref { font-size: 12px; font-style: italic; }
.config-row--new td { background: var(--color-surface-muted); border-top: 2px dashed var(--hairline); border-bottom: none; }
.config-row--new .config-name-input::placeholder { color: var(--color-text-soft); }
/* ── Topbar contextual del panel (auto-hide al scroll) ───────── */
.topbar {
position: sticky;
top: 8px;
z-index: 50;
display: flex;
align-items: center;
gap: 12px;
padding: 9px 12px;
margin-bottom: 16px;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: 14px;
box-shadow: var(--shadow-2);
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
.topbar--hidden { transform: translateY(-150%); opacity: 0; }
.topbar-burger {
display: none;
width: 38px; height: 38px;
align-items: center; justify-content: center;
border-radius: 10px; border: 1px solid var(--color-border);
background: transparent; color: var(--color-text); cursor: pointer; font-size: 17px;
}
.topbar-burger:hover { background: var(--color-surface-muted); }
.topbar-search {
flex: 1;
display: flex; align-items: center; gap: 9px;
max-width: 460px;
padding: 9px 12px;
border-radius: 10px;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text-soft);
cursor: text;
font-family: var(--font-body); font-size: 13.5px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.topbar-search:hover { border-color: var(--color-primary); }
.topbar-search-icon { display: inline-flex; font-size: 16px; color: var(--color-text-soft); }
.topbar-search-text { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-search-kbd {
font-size: 11px; font-weight: 700; color: var(--color-text-soft);
border: 1px solid var(--color-border); border-radius: 6px; padding: 1px 7px; white-space: nowrap;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar-icon-btn {
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px; border: 1px solid var(--color-border);
background: transparent; color: var(--color-text); cursor: pointer; font-size: 16px;
transition: background 0.15s ease;
}
.topbar-icon-btn:hover { background: var(--color-surface-muted); }
.topbar-theme-glyph { line-height: 1; }
.topbar-theme-sun { display: none; }
.topbar-theme-moon { display: inline; }
html[data-theme="dark"] .topbar-theme-sun { display: inline; }
html[data-theme="dark"] .topbar-theme-moon { display: none; }
.topbar-user { display: inline-flex; }
.topbar-avatar {
width: 34px; height: 34px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--color-primary), #d99a1e);
color: #07213d; font-weight: 800; font-size: 14px;
}
@media (max-width: 768px) {
.topbar-burger { display: inline-flex; }
.topbar-search-text { display: none; }
.topbar-search { flex: 0 0 auto; max-width: none; }
.topbar-search-kbd { display: none; }
.topbar { top: 6px; }
}
.escenario-rates-grid .rate-field { margin-bottom: 6px; }
.escenario-perfil-badge {
font-size: 11px;
font-weight: 700;
color: var(--color-primary-strong);
background: var(--color-surface-muted);
border: 1px solid var(--hairline);
border-radius: 999px;
padding: 3px 10px;
}
@media (max-width: 560px) { .escenario-rates-grid { grid-template-columns: 1fr; } }
}
/* Accesibilidad: quien pida menos movimiento, no recibe animaciones. */
@media (prefers-reduced-motion: reduce) {
.page-content .card,
.page-content .idea-card,
.page-content .productos-card,
.page-content .credit-detail-card,
.page-content .kpi-card,
.page-content .edu-video-card,
.page-content .favorite-card {
animation: none !important;
}
body.htmx-loading .page-content::after { animation: none !important; }
button, .btn, .idea-btn, .btn-new-idea, .card { transition: none !important; }
}
/* Spinner del botón "Descargar proyecto" */
.download-spinner {
display: inline-block;
width: 0.9em;
height: 0.9em;
margin-right: 0.15em;
vertical-align: -0.1em;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: kf-download-spin 0.6s linear infinite;
}
@keyframes kf-download-spin {
to { transform: rotate(360deg); }
}
.idea-btn.is-downloading { cursor: progress; }
/* =============================================================
* Asistente Kuenty (onboarding)
* ============================================================= */
/* Botón en la topbar */
.topbar-assistant { position: relative; }
.topbar-assistant-glyph { display: inline-flex; }
.kuenty-badge {
position: absolute; top: 4px; right: 4px;
width: 9px; height: 9px; border-radius: 50%;
background: var(--color-primary);
box-shadow: 0 0 0 2px var(--color-surface);
}
/* Modal de bienvenida */
.kuenty-overlay {
position: fixed; inset: 0; z-index: 10000;
display: flex; align-items: center; justify-content: center;
padding: 16px;
background: rgba(2, 8, 20, 0.55);
backdrop-filter: blur(3px);
padding: 18px;
}
.kuenty-overlay[hidden] { display: none; }
.kuenty-modal {
position: relative;
width: min(440px, 100%);
max-height: calc(100vh - 32px);
overflow-y: auto;
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: 18px;
padding: 28px 26px 22px;
box-shadow: var(--shadow-strong, 0 24px 60px rgba(0,0,0,0.35));
text-align: center;
animation: kuenty-pop 0.25s ease;
}
@keyframes kuenty-pop {
from { opacity: 0; transform: translateY(10px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.kuenty-modal-close {
position: absolute; top: 10px; right: 12px;
background: transparent; border: 0; cursor: pointer;
font-size: 18px; line-height: 1; color: var(--color-text-soft);
}
.kuenty-mascota { width: 92px; height: auto; margin: 0 auto 6px; display: block; }
.kuenty-modal-title { margin: 4px 0 8px; font-size: 22px; }
.kuenty-modal-text { color: var(--color-text-soft); font-size: 15px; line-height: 1.5; margin-bottom: 18px; }
.kuenty-modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.kuenty-etapas-resumen { margin-top: 18px; text-align: left; display: grid; gap: 6px; }
.kuenty-etapa-row {
font-size: 13px; color: var(--color-text-soft);
padding: 7px 12px; border: 1px dashed var(--color-border); border-radius: 10px;
}
/* Botones del asistente */
.kuenty-btn {
border: 0; border-radius: 10px; cursor: pointer;
padding: 10px 16px; font-size: 14px; font-weight: 700;
font-family: inherit; transition: filter 0.15s ease, opacity 0.15s ease;
}
.kuenty-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.kuenty-btn--primary { background: var(--color-primary); color: #0E1B2D; }
.kuenty-btn--primary:hover:not(:disabled) { filter: brightness(1.05); }
.kuenty-btn--ghost {
background: transparent; color: var(--color-text);
border: 1px solid var(--color-border);
}
.kuenty-btn--ghost:hover:not(:disabled) { background: var(--color-surface-muted); }
/* Panel lateral (drawer) */
.kuenty-drawer {
position: fixed; right: 18px; bottom: 18px; z-index: 9998;
width: min(360px, calc(100vw - 24px));
max-height: calc(100vh - 36px);
display: flex; flex-direction: column;
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: 16px;
box-shadow: var(--shadow-strong, 0 18px 44px rgba(0,0,0,0.3));
overflow: hidden;
animation: kuenty-slide 0.25s ease;
}
.kuenty-drawer[hidden] { display: none; }
@keyframes kuenty-slide {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.kuenty-drawer-head {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px; border-bottom: 1px solid var(--color-border);
}
.kuenty-drawer-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.kuenty-drawer-titlebox { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.kuenty-drawer-name { font-weight: 800; font-size: 14px; }
.kuenty-drawer-sub { font-size: 12px; color: var(--color-text-soft); }
.kuenty-drawer-min {
background: transparent; border: 0; cursor: pointer;
font-size: 18px; line-height: 1; color: var(--color-text-soft); padding: 4px 8px;
}
/* Barra de progreso por etapas */
.kuenty-progress { display: flex; gap: 6px; padding: 12px 14px 4px; }
.kuenty-progress-seg {
flex: 1; height: 6px; border-radius: 4px;
background: var(--color-surface-muted); position: relative;
border: 1px solid var(--color-border);
}
.kuenty-progress-seg.is-done { background: #22C55E; border-color: #22C55E; }
.kuenty-progress-seg.is-active { background: var(--color-primary); border-color: var(--color-primary); }
.kuenty-progress-label {
position: absolute; top: 10px; left: 0; font-size: 10px;
color: var(--color-text-soft); white-space: nowrap;
}
/* Cuerpo del paso (scrollea si el contenido es largo; el resto del panel queda fijo) */
.kuenty-drawer-body { padding: 22px 14px 12px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.kuenty-step-title { margin: 0 0 6px; font-size: 16px; }
.kuenty-step-title.is-done { color: #22C55E; }
.kuenty-step-text { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--color-text-soft); }
.kuenty-step-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.kuenty-drawer-nav {
display: flex; gap: 8px; justify-content: space-between;
padding: 8px 14px 4px;
}
.kuenty-drawer-nav .kuenty-btn { flex: 1; }
.kuenty-drawer-foot {
display: flex; justify-content: space-between; align-items: center;
gap: 8px; padding: 8px 14px 14px;
}
.kuenty-foot-link {
-webkit-appearance: none; appearance: none;
background: none; border: 0; box-shadow: none; border-radius: 0;
cursor: pointer; font-family: inherit;
color: var(--color-text-soft); font-size: 12px; padding: 4px 2px;
}
.kuenty-foot-link:hover { text-decoration: underline; color: var(--color-text); }
.kuenty-foot-link:focus { outline: none; }
.kuenty-foot-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Dashboard bloqueado */
.is-locked { opacity: 0.55; pointer-events: none; position: relative; }
.kuenty-locked-card { text-align: left; }
.kuenty-locked-card .idea-actions { margin-top: 12px; }
.kuenty-locked-screen {
max-width: 520px; margin: 8vh auto 0; text-align: center;
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: 18px; padding: 32px 28px;
box-shadow: var(--shadow-strong, 0 18px 44px rgba(0,0,0,0.25));
}
.kuenty-locked-screen .kuenty-mascota { width: 100px; }
.kuenty-locked-screen .idea-actions { justify-content: center; margin-top: 18px; gap: 10px; }
/* Spotlight / coachmark: oscurece todo menos el elemento resaltado */
.kuenty-spot { position: fixed; inset: 0; z-index: 9997; pointer-events: none; }
.kuenty-spot-ring {
position: fixed; border-radius: 10px;
border: 2px solid var(--color-primary);
box-shadow: 0 0 0 9999px rgba(2, 8, 20, 0.55), 0 0 14px 2px var(--color-primary);
transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
pointer-events: none; /* deja hacer clic en el botón real debajo */
}
.kuenty-spot-tip {
position: fixed; width: 260px;
background: var(--color-surface); color: var(--color-text);
border: 1px solid var(--color-border); border-radius: 12px;
padding: 14px; box-shadow: var(--shadow-strong, 0 18px 44px rgba(0,0,0,0.3));
pointer-events: auto;
}
.kuenty-spot-msg { margin: 0 0 10px; font-size: 14px; line-height: 1.45; }
.kuenty-spot-count {
display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
letter-spacing: 0.04em; color: var(--color-text-soft); margin-bottom: 3px;
}
.kuenty-spot-title { display: block; font-size: 14px; line-height: 1.3; margin-bottom: 6px; }
.kuenty-spot-nav { display: flex; gap: 8px; }
.kuenty-spot-nav .kuenty-btn { flex: 1; padding: 7px 12px; font-size: 13px; }
/* Confeti de celebración */
.kuenty-confetti { position: fixed; inset: 0; z-index: 10001; pointer-events: none; overflow: hidden; }
.kuenty-confetti i {
position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px;
animation: kuenty-fall 2.2s linear forwards;
}
@keyframes kuenty-fall {
to { transform: translateY(105vh) rotate(540deg); opacity: 0.2; }
}
/* ---- Contenido financiero rico (qué es / para qué / tip) ---- */
.kuenty-step-rich { display: grid; gap: 10px; margin: 4px 0 12px; }
.kuenty-rich-row { display: flex; gap: 9px; align-items: flex-start; }
.kuenty-rich-ico { font-size: 15px; line-height: 1.4; flex-shrink: 0; }
.kuenty-rich-body { display: flex; flex-direction: column; }
.kuenty-rich-label {
font-size: 11px; font-weight: 800; text-transform: uppercase;
letter-spacing: 0.03em; color: var(--color-text-soft);
}
.kuenty-rich-text { margin: 1px 0 0; font-size: 13.5px; line-height: 1.5; }
/* ---- Supuestos de la sección ---- */
.kuenty-supuestos {
margin-top: 4px; padding: 10px 12px;
background: var(--color-surface-muted); border: 1px solid var(--color-border);
border-radius: 12px; display: flex; flex-direction: column; gap: 8px;
}
.kuenty-supuestos-title {
font-size: 11px; font-weight: 800; text-transform: uppercase;
letter-spacing: 0.03em; color: var(--color-text-soft);
}
.kuenty-sup-row { display: flex; flex-direction: column; gap: 1px; }
.kuenty-sup-top {
display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
justify-content: space-between;
}
.kuenty-sup-label { font-size: 13px; font-weight: 700; color: var(--color-text); }
.kuenty-sup-default {
font-size: 11.5px; font-weight: 700; color: var(--color-primary);
background: rgba(242, 182, 50, 0.12); border-radius: 999px; padding: 1px 9px;
}
.kuenty-sup-why { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--color-text-soft); }
/* ---- Chips de glosario ---- */
.kuenty-glos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.kuenty-glos-title { font-size: 12px; color: var(--color-text-soft); margin-right: 2px; }
.kuenty-chip {
border: 1px solid var(--color-border); background: var(--color-surface-muted);
color: var(--color-text); border-radius: 999px; padding: 4px 11px;
font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
transition: background 0.15s ease, border-color 0.15s ease;
}
.kuenty-chip:hover { border-color: var(--color-primary); }
.kuenty-glos-def {
font-size: 13px; line-height: 1.5; color: var(--color-text);
background: var(--color-surface-muted); border: 1px solid var(--color-border);
border-left: 3px solid var(--color-primary);
border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
animation: kuenty-fade-in 0.2s ease;
}
/* ---- Transición entre pasos + mascota viva ---- */
.kuenty-anim { animation: kuenty-fade-in 0.28s ease; }
@keyframes kuenty-fade-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.kuenty-drawer-avatar, .kuenty-mascota { animation: kuenty-float 3.2s ease-in-out infinite; }
@keyframes kuenty-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.kuenty-drawer-head {
background: linear-gradient(120deg, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent);
}
.kuenty-progress-seg.is-active { animation: kuenty-seg-pulse 1.8s ease-in-out infinite; }
@keyframes kuenty-seg-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(242, 182, 50, 0.0); }
50% { box-shadow: 0 0 0 4px rgba(242, 182, 50, 0.18); }
}
/* ---- Spotlight: flecha animada + anillo pulsante ---- */
.kuenty-spot-arrow {
position: fixed; font-size: 26px; z-index: 9998;
pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
animation: kuenty-bounce 1s ease-in-out infinite;
}
@keyframes kuenty-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(7px); }
}
.kuenty-spot-ring { animation: kuenty-ring-pulse 1.6s ease-in-out infinite; }
@keyframes kuenty-ring-pulse {
0%, 100% { box-shadow: 0 0 0 9999px rgba(2, 8, 20, 0.55), 0 0 0 1px rgba(242, 182, 50, 0.7); }
50% { box-shadow: 0 0 0 9999px rgba(2, 8, 20, 0.55), 0 0 0 9px rgba(242, 182, 50, 0); }
}
/* =============================================================
* Capa visual freemium (PLANES_FREEMIUM.md §1.5)
* Lo premium se ve pero no se usa: muestra difuminada + candado + CTA.
* El contenido bajo .premium-blur es SIEMPRE de muestra (nunca datos reales).
* ============================================================= */
/* Chip PRO */
.pro-badge {
display: inline-flex; align-items: center; gap: 4px;
background: linear-gradient(135deg, var(--color-primary), #E09E1A);
color: #0E1B2D; font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
text-transform: uppercase; border-radius: 999px; padding: 2px 8px;
vertical-align: middle;
}
/* Contenido censurado (solo datos de muestra) */
.premium-blur {
filter: blur(7px); opacity: 0.8;
pointer-events: none; user-select: none;
}
/* Teaser */
.premium-teaser {
position: relative; overflow: hidden;
border: 1px solid var(--color-border); border-radius: var(--radius-md, 12px);
background: var(--color-surface); min-height: 220px;
}
.premium-overlay {
position: absolute; inset: 0; z-index: 2;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; text-align: center; padding: 18px;
background: linear-gradient(
180deg,
transparent 0%,
color-mix(in srgb, var(--color-surface) 82%, transparent) 55%,
var(--color-surface) 100%
);
}
.premium-overlay .lock { font-size: 28px; line-height: 1; }
.premium-overlay h4 { margin: 0; font-size: 16px; color: var(--color-text); }
.premium-overlay p { margin: 0; font-size: 13px; color: var(--color-text-soft); max-width: 360px; }
/* CTA dorado */
.btn-pro {
display: inline-block;
background: var(--color-primary); color: #0E1B2D !important; font-weight: 800;
border: 0; border-radius: 10px; padding: 10px 18px; cursor: pointer;
font-size: 14px; text-decoration: none;
box-shadow: 0 6px 18px rgba(242, 182, 50, 0.35);
transition: filter 0.15s ease;
}
.btn-pro:hover { filter: brightness(1.06); text-decoration: none; }
/* Enlace secundario al demo */
.premium-demo-link { font-size: 12.5px; color: var(--color-text-soft); text-decoration: underline; }
.premium-demo-link:hover { color: var(--color-text); }
/* Variante compacta (tarjetas KPI / dashboard) */
.premium-teaser--compact { min-height: 120px; }
.premium-teaser--compact .premium-overlay { padding: 10px; gap: 4px; }
.premium-teaser--compact .lock { font-size: 20px; }
.premium-teaser--compact h4 { font-size: 13.5px; }
.premium-teaser--compact p { font-size: 11.5px; }
.premium-teaser--compact .btn-pro { padding: 6px 12px; font-size: 12px; }
/* Cifra grande de muestra (valoración) */
.premium-cifra-muestra {
font-size: 42px; font-weight: 800; text-align: center; padding: 40px 16px;
font-variant-numeric: tabular-nums; color: var(--color-text);
}
/* Tope alcanzado */
.premium-limite {
border: 1px solid var(--color-border); border-radius: var(--radius-md, 12px);
background: var(--color-surface); padding: 18px;
display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.premium-limite-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.premium-limite-texto { font-weight: 700; font-size: 14px; }
.premium-limite-bar {
width: 100%; max-width: 380px; height: 8px; border-radius: 999px;
background: var(--color-surface-muted); border: 1px solid var(--color-border);
overflow: hidden;
}
.premium-limite-fill {
height: 100%; border-radius: 999px;
background: linear-gradient(90deg, var(--color-primary), #E09E1A);
}
.premium-limite-sub { margin: 0; font-size: 13px; color: var(--color-text-soft); }
/* Variante del aviso del demo (sandbox) y tarjeta de plan destacada */
.premium-limite--demo {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
/* Banner de vencimiento próximo del Premium */
.premium-expira-banner {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin: 12px 16px 0; padding: 10px 16px;
border: 1px solid #E8C86A; border-radius: var(--radius-md, 12px);
background: linear-gradient(120deg, #FFF8E6, #FFEFC2);
color: #6b5200; font-size: 13.5px; font-weight: 600;
}
:root[data-theme="dark"] .premium-expira-banner {
background: linear-gradient(120deg, #3d3311, #57470f);
border-color: #8a6d1d; color: #FFE9B0;
}
.premium-expira-cta { margin-left: auto; padding: 6px 14px; font-size: 12.5px; }
/* Chips de plan (sidebar + topbar) */
.side-plan-chip {
display: inline-block; padding: 1px 7px; border-radius: 999px;
font-size: 10px; font-weight: 700; letter-spacing: .04em;
background: var(--color-surface-muted); color: var(--color-text-soft);
border: 1px solid var(--color-border); vertical-align: middle;
}
.topbar-plan-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px; border-radius: 999px; text-decoration: none;
font-size: 12.5px; font-weight: 700; white-space: nowrap; flex-shrink: 0;
color: #7A5B00;
background: linear-gradient(120deg, #FFF3D6, #FFE7A8);
border: 1px solid #E8C86A;
transition: transform .12s ease, box-shadow .12s ease;
}
.topbar-plan-chip:hover {
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(242, 182, 50, .35);
}
.topbar-plan-icon svg { width: 14px; height: 14px; }
:root[data-theme="dark"] .topbar-plan-chip {
color: #FFE9B0; background: linear-gradient(120deg, #4a3a10, #6b530f);
border-color: #8a6d1d;
}
@media (max-width: 640px) {
.topbar-plan-text { display: none; }
.topbar-plan-chip { padding: 5px 8px; }
}
/* Grid de KPIs del panel admin: auto-fit responsivo (nunca fuerza columnas
fijas, así que nunca desborda en pantallas angostas). */
.admin-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
}
.admin-kpi {
border: 1px solid var(--color-border); border-radius: var(--radius-md, 12px);
background: var(--color-surface); padding: 14px 10px;
display: flex; flex-direction: column; align-items: center; gap: 4px;
min-width: 0;
}
.admin-kpi-valor {
font-size: 26px; font-weight: 800; color: var(--color-text);
font-variant-numeric: tabular-nums;
max-width: 100%; overflow-wrap: anywhere; text-align: center;
}
.admin-kpi-label { margin: 0; font-size: 12.5px; color: var(--color-text-soft); text-align: center; }
/* Acciones de la tabla de usuarios (admin): varios