/* Hub Bajar a Tierra · sistema visual (tanda 2, 9/10/2026). Se activa con la clase html.sistema (probar con ?sistema=1,
   apagar con ?sistema=0). Pisa por selector lo que el monolito dibuja a mano: tokens de marca, nav, títulos, tarjetas,
   botones, chips, modales, foco y movimiento. No cambia el HTML. Especificación en hub_auditoria_2026-10/VISUAL.md. */

html.sistema {
  /* marca fija */
  --bt-plum: #540545; --bt-magenta: #b53c93; --bt-rosa: #f4d4ec; --bt-amber: #e7a83e; --bt-teal: #006666; --bt-bosque: #0b3b43; --bt-tinta: #0a1b2f; --bt-crema: #e5e0d3;
  /* superficies, líneas, sombras, glow, movimiento */
  --sup-0: #f6f2ec; --sup-1: #fffdfa; --sup-2: #ffffff; --linea: rgba(10, 27, 47, .08); --linea-fuerte: rgba(10, 27, 47, .14);
  --sh-1: 0 1px 2px rgba(84, 5, 69, .06); --sh-2: 0 6px 20px rgba(84, 5, 69, .12); --sh-3: 0 24px 60px rgba(84, 5, 69, .28);
  --glow: 0 0 0 1px rgba(181, 60, 147, .35), 0 8px 28px -10px rgba(181, 60, 147, .45);
  --glow-amber: 0 0 0 1px rgba(231, 168, 62, .5), 0 8px 28px -10px rgba(231, 168, 62, .6);
  --t: 180ms cubic-bezier(.2, .7, .2, 1);
  /* los tokens que el monolito ya usa, con marca de verdad en vez de gris (los proyectos con colores siguen pisándolos) */
  --plum-deep: #2a0a25; --plum: #540545; --plum-mid: #b53c93; --plum-light: #f4d4ec; --plum-pale: #faf0f7;
  --amber: #e7a83e; --amber-light: #f0c26b; --ink: #0a1b2f; --cream: #f6f2ec; --warm-white: #fffdfa;
  --text: #2a2430; --text-soft: #6f6372; --border: rgba(10, 27, 47, .1);
}
html.sistema body { background: var(--sup-0); color: var(--text); }

/* ===== íconos (Lucide por js/iconos.js) ===== */
html.sistema .ic, html.sistema svg.lucide { width: 1.05em; height: 1.05em; stroke: currentColor; stroke-width: 2; fill: none; vertical-align: -.18em; flex: none; }
html.sistema .ic-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; vertical-align: -.3em; border: 1px solid rgba(255, 255, 255, .6); }

/* ===== barra de arriba y nav ===== */
html.sistema .topbar { box-shadow: 0 2px 12px rgba(42, 10, 37, .25); }
html.sistema .topbar-inner { padding: 9px 24px; gap: 16px; }
html.sistema .brand-emblem { border-color: rgba(255, 255, 255, .5); box-shadow: none; }
html.sistema .nav-tabs { gap: 2px; row-gap: 2px; }
html.sistema .nav-tab { border: 0; background: transparent; color: rgba(255, 255, 255, .74); padding: 7px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: 0; display: inline-flex; align-items: center; gap: 6px; line-height: 1; transition: background var(--t), color var(--t), box-shadow var(--t); }
html.sistema .nav-tab:hover { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: var(--glow); }
html.sistema .nav-tab.active { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 700; box-shadow: inset 0 -2px 0 var(--bt-amber); }
html.sistema .nav-tab .ic { width: 15px; height: 15px; opacity: .9; }
html.sistema .nav-tab-badge { background: var(--bt-magenta); color: #fff; border-radius: 999px; min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; padding: 0 5px; margin-left: 2px; }
html.sistema .nav-enlace { color: rgba(255, 255, 255, .74); font-size: 12.5px; font-weight: 600; padding: 7px 11px; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px; transition: background var(--t), color var(--t); }
html.sistema .nav-enlace:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* ===== cabeceras de vista: sin héroe, título a la izquierda ===== */
html.sistema .view-header { padding: 26px 24px 14px; text-align: left; background: transparent; color: var(--ink); overflow: visible; }
html.sistema .view-header::before { display: none; }
html.sistema .view-header-inner { max-width: 1300px; margin: 0 auto; }
html.sistema .view-header .eyebrow { color: var(--bt-magenta); margin-bottom: 6px; letter-spacing: .14em; font-size: 10.5px; }
html.sistema .view-header h1 { font-size: 26px; font-weight: 600; color: var(--ink); margin-bottom: 6px; line-height: 1.15; }
html.sistema .view-header h1 em { color: var(--bt-magenta); }
html.sistema .view-header p { color: var(--text-soft); font-size: 14px; }
html.sistema .subview-title { font-family: 'Playfair Display', serif; font-size: 21px; font-weight: 600; color: var(--ink); }

/* ===== sub-pestañas: un solo segmento ===== */
html.sistema .subtab, html.sistema .cal-view-btn, html.sistema .grilla-view-btn, html.sistema .plx-tab, html.sistema .crx-subtabs button, html.sistema .campana-filter-btn, html.sistema .channel-btn { background: transparent; border: 1px solid transparent; padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-soft); text-transform: none; letter-spacing: 0; transition: background var(--t), color var(--t), box-shadow var(--t); }
html.sistema .subtab:hover, html.sistema .cal-view-btn:hover, html.sistema .grilla-view-btn:hover, html.sistema .plx-tab:hover, html.sistema .crx-subtabs button:hover, html.sistema .campana-filter-btn:hover, html.sistema .channel-btn:hover { background: rgba(244, 212, 236, .45); color: var(--bt-plum); }
html.sistema .subtab.active, html.sistema .cal-view-btn.active, html.sistema .grilla-view-btn.active, html.sistema .plx-tab.active, html.sistema .crx-subtabs button.activa, html.sistema .campana-filter-btn.active, html.sistema .channel-btn.active { background: var(--bt-plum); color: #fff; }
html.sistema .estudio .est-tab { font-size: 12.5px; padding: 10px 0; }
html.sistema .estudio .est-tab.activa { color: var(--bt-plum); border-bottom-color: var(--bt-magenta); }

/* ===== tarjetas: una sola ===== */
html.sistema .card, html.sistema .idea-card, html.sistema .name-card, html.sistema .campana-item, html.sistema .inbox-item, html.sistema .pp-idea, html.sistema .tablero-card, html.sistema .plx-kpi, html.sistema .crx-card, html.sistema .section-card, html.sistema .grilla-piece, html.sistema .brief-doc, html.sistema .change-card, html.sistema .bell-item, html.sistema .checklist-widget, html.sistema .estudio .est-muestra, html.sistema .estudio .est-card {
  background: var(--sup-1); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sh-1); transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
html.sistema .card:hover, html.sistema .idea-card:hover, html.sistema .name-card:hover, html.sistema .campana-item:hover, html.sistema .inbox-item:hover, html.sistema .pp-idea:hover, html.sistema .tablero-card:hover, html.sistema .plx-kpi:hover, html.sistema .crx-card:hover, html.sistema .section-card:hover, html.sistema .grilla-piece:hover, html.sistema .change-card:hover, html.sistema .estudio .est-muestra:hover, html.sistema .estudio .est-card:hover {
  box-shadow: var(--glow); border-color: rgba(181, 60, 147, .35); transform: translateY(-1px);
}
html.sistema .campana-welcome { background: var(--sup-1); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sh-1); color: var(--text); }
html.sistema .plx-atencion { background: var(--sup-1); border: 1px solid rgba(181, 60, 147, .4); border-radius: 14px; }

/* ===== botones ===== */
html.sistema .btn-add, html.sistema .campana-btn-approve, html.sistema .brief-approve-btn, html.sistema .crx-go, html.sistema .estudio .btn.primario, html.sistema .estudio .est-chip.primario, html.sistema .estudio .btn.amber {
  background: var(--bt-magenta); color: #fff; border: 0; border-radius: 10px; text-transform: none; letter-spacing: 0; font-weight: 700; box-shadow: var(--sh-1); transition: box-shadow var(--t), transform var(--t), background var(--t);
}
html.sistema .btn-add:hover, html.sistema .campana-btn-approve:hover, html.sistema .brief-approve-btn:hover, html.sistema .crx-go:hover, html.sistema .estudio .btn.primario:hover, html.sistema .estudio .est-chip.primario:hover, html.sistema .estudio .btn.amber:hover { box-shadow: var(--glow-amber); transform: translateY(-1px); background: var(--bt-magenta); }
html.sistema .estudio .btn { border-radius: 10px; transition: box-shadow var(--t), border-color var(--t), background var(--t); }
html.sistema .estudio .btn:hover, html.sistema .estudio .est-chip:hover { border-color: rgba(181, 60, 147, .45); box-shadow: var(--glow); }
html.sistema .estudio .est-chip { transition: box-shadow var(--t), border-color var(--t), background var(--t); }

/* ===== chips de estado: punto + texto ===== */
html.sistema .dot-status { width: 8px; height: 8px; border-radius: 50%; }
html.sistema .trend-tipo, html.sistema .inbox-item-tag, html.sistema .campana-fase-badge, html.sistema .campana-due-badge, html.sistema .change-card-status, html.sistema .pp-idea-tag { border-radius: 999px; font-size: 11px; font-weight: 600; padding: 3px 9px; letter-spacing: 0; text-transform: none; }

/* ===== modales ===== */
html.sistema .modal-box, html.sistema .est-tipos-caja, html.sistema .est-pregunta-caja, html.sistema .est-feedback-caja { background: var(--sup-2); border-radius: 14px; box-shadow: var(--sh-3); animation: hubSubir var(--t) both; }
html.sistema .est-tipos, html.sistema .project-overlay, html.sistema .est-pregunta, html.sistema .est-feedback { background: rgba(10, 27, 47, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes hubSubir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===== tablas y listas ===== */
html.sistema table th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
html.sistema table td { font-variant-numeric: tabular-nums; }

/* ===== foco y movimiento ===== */
html.sistema :focus-visible { outline: 2px solid var(--bt-magenta); outline-offset: 2px; border-radius: 6px; }
html.sistema .nav-tab:focus-visible { outline-color: var(--bt-amber); }
@media (prefers-reduced-motion: reduce) { html.sistema *, html.sistema *::before, html.sistema *::after { transition: none !important; animation: none !important; } }

/* ===== esqueletos (para las listas que nacen con "Cargando…") ===== */
html.sistema .skel { position: relative; overflow: hidden; background: var(--sup-1); border: 1px solid var(--linea); border-radius: 14px; min-height: 96px; }
html.sistema .skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); transform: translateX(-100%); animation: hubBrillo 1.2s infinite; }
@keyframes hubBrillo { to { transform: translateX(100%); } }

/* ===== barra plegable (js/barra.js): una sola fila baja, pestañas solo con ícono ===== */
html.sistema .nav-plegar { margin-left: auto; border: 0; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85); width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer; flex: none; transition: background var(--t), box-shadow var(--t), transform var(--t); }
html.sistema .nav-plegar:hover { background: rgba(255, 255, 255, .18); box-shadow: var(--glow-amber); transform: translateY(-1px); }
html.sistema .nav-plegar .ic { width: 15px; height: 15px; }
html.sistema.barra-chica .topbar-inner { padding: 4px 16px; gap: 12px; }
html.sistema.barra-chica .brand-lockup { flex-direction: row; max-width: none; gap: 8px; }
html.sistema.barra-chica .brand-emblem { width: 24px; height: 24px; }
html.sistema.barra-chica .brand { -webkit-line-clamp: 1; font-size: 11px; max-width: 220px; }
html.sistema.barra-chica .brand .brand-sub, html.sistema.barra-chica #aiUsageMini { display: none !important; }
html.sistema.barra-chica .nav-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 1px; }
html.sistema.barra-chica .nav-tabs::-webkit-scrollbar { display: none; }
html.sistema.barra-chica .nav-tab, html.sistema.barra-chica .nav-enlace { padding: 6px 8px; }
html.sistema.barra-chica .nav-tab .nav-txt, html.sistema.barra-chica .nav-enlace .nav-txt { display: none; }
html.sistema.barra-chica .nav-tab.active .nav-txt { display: inline; }
html.sistema.barra-chica .nav-tab .ic { width: 17px; height: 17px; opacity: 1; }
html.sistema.barra-chica .user-chip, html.sistema.barra-chica .who-btn { padding: 3px 8px; }

/* ===== el Estudio ocupa lo que queda debajo de la barra real (una o dos filas), no un 64px fijo ===== */
html.sistema .estudio { height: calc(100vh - var(--nav-h, 64px)); }

/* ===== BRILLO (pasada WOW, 9/10/2026): degradés de marca, destellos y halos suaves. Todo detrás de html.sistema. ===== */
/* barra: degradé ciruela a magenta y una línea de luz que recorre el borde de abajo */
/* los colores salen del proyecto abierto (--plum-deep, --plum, --amber los pisa applyProjectTheme): La Base en ciruela, El Mapa en bosque, DIAP en teal */
html.sistema .topbar { background: linear-gradient(100deg, var(--plum-deep) 0%, var(--plum) 48%, color-mix(in srgb, var(--plum) 78%, #fff) 100%); }
html.sistema .topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; will-change: background-position; background: linear-gradient(90deg, transparent 0%, var(--amber) 30%, var(--plum-mid) 50%, color-mix(in srgb, var(--amber) 45%, #fff) 70%, transparent 100%); background-size: 200% 100%; animation: hubBrilloLinea 10s linear infinite; opacity: .95; pointer-events: none; }
@keyframes hubBrilloLinea { to { background-position: -200% 0; } }
html.sistema .brand-emblem { box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 40%, transparent), 0 0 18px color-mix(in srgb, var(--amber) 40%, transparent); transition: box-shadow var(--t), transform var(--t); }
html.sistema .brand-lockup:hover .brand-emblem { box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 65%, transparent), 0 0 28px color-mix(in srgb, var(--amber) 65%, transparent); transform: rotate(-5deg) scale(1.05); }
html.sistema .nav-tab.active { background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .1)); box-shadow: inset 0 -2px 0 var(--amber), 0 0 18px -4px color-mix(in srgb, var(--amber) 65%, transparent); }
html.sistema .nav-tab-badge { background: linear-gradient(135deg, var(--amber), var(--amber-light)); color: var(--bt-tinta); box-shadow: 0 0 10px rgba(231, 168, 62, .5); }
/* fondo: crema con dos halos de marca, muy suaves */
html.sistema body { background: var(--sup-0); }
html.sistema body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 520px at 6% 0%, color-mix(in srgb, var(--plum) 9%, transparent), transparent 62%), radial-gradient(820px 520px at 100% 100%, color-mix(in srgb, var(--amber) 13%, transparent), transparent 62%); will-change: transform; }
/* cabeceras: destello en el eyebrow y el acento del título en degradé */
html.sistema .view-header .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
html.sistema .view-header .eyebrow::before { content: '✦'; font-size: 11px; color: var(--amber); text-shadow: 0 0 8px color-mix(in srgb, var(--amber) 90%, transparent); }
html.sistema .view-header h1 em { background: linear-gradient(92deg, var(--plum-mid) 0%, color-mix(in srgb, var(--plum-mid) 45%, var(--plum)) 55%, var(--plum) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.sistema .subview-title, html.sistema .pz-grupo summary span { position: relative; }
/* tarjetas: luz arriba, halo al pasar */
html.sistema .card, html.sistema .idea-card, html.sistema .name-card, html.sistema .campana-item, html.sistema .inbox-item, html.sistema .pp-idea, html.sistema .tablero-card, html.sistema .plx-kpi, html.sistema .crx-card, html.sistema .section-card, html.sistema .grilla-piece, html.sistema .brief-doc, html.sistema .change-card, html.sistema .checklist-widget, html.sistema .pz-grupo, html.sistema .pz-card, html.sistema .pz-col, html.sistema .hs-col, html.sistema .est-sec { box-shadow: var(--sh-1), inset 0 1px 0 rgba(255, 255, 255, .8); }
html.sistema .card:hover, html.sistema .idea-card:hover, html.sistema .campana-item:hover, html.sistema .inbox-item:hover, html.sistema .pp-idea:hover, html.sistema .tablero-card:hover, html.sistema .plx-kpi:hover, html.sistema .crx-card:hover, html.sistema .section-card:hover, html.sistema .change-card:hover, html.sistema .pz-card:hover, html.sistema .pz-dia:hover { box-shadow: var(--glow), 0 14px 32px -14px rgba(84, 5, 69, .4), inset 0 1px 0 rgba(255, 255, 255, .8); }
/* botones principales: degradé de marca y un destello que cruza al pasar */
html.sistema .btn-add, html.sistema .campana-btn-approve, html.sistema .brief-approve-btn, html.sistema .crx-go, html.sistema .estudio .btn.primario, html.sistema .estudio .est-chip.primario, html.sistema .estudio .btn.amber, html.sistema .pz-nueva { background: linear-gradient(135deg, var(--plum-mid) 0%, color-mix(in srgb, var(--plum-mid) 55%, var(--plum)) 60%, var(--plum) 100%); position: relative; overflow: hidden; }
html.sistema .btn-add::after, html.sistema .campana-btn-approve::after, html.sistema .brief-approve-btn::after, html.sistema .crx-go::after, html.sistema .estudio .btn.primario::after, html.sistema .estudio .btn.amber::after, html.sistema .pz-nueva::after { content: ''; position: absolute; top: -60%; bottom: -60%; left: -70%; width: 36%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-22deg); transition: left .55s ease; pointer-events: none; }
html.sistema .btn-add:hover::after, html.sistema .campana-btn-approve:hover::after, html.sistema .brief-approve-btn:hover::after, html.sistema .crx-go:hover::after, html.sistema .estudio .btn.primario:hover::after, html.sistema .estudio .btn.amber:hover::after, html.sistema .pz-nueva:hover::after { left: 140%; }
html.sistema .btn-add:hover, html.sistema .pz-nueva:hover { box-shadow: var(--glow-amber), 0 10px 24px -10px rgba(181, 60, 147, .7); }
/* segmentos y chips activos con degradé */
html.sistema .pz-segb.activa, html.sistema .subtab.active, html.sistema .cal-view-btn.active, html.sistema .grilla-view-btn.active, html.sistema .plx-tab.active, html.sistema .crx-subtabs button.activa, html.sistema .campana-filter-btn.active, html.sistema .channel-btn.active { background: linear-gradient(135deg, var(--plum) 0%, color-mix(in srgb, var(--plum) 70%, var(--plum-mid)) 100%); color: #fff; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--plum) 80%, transparent); }
html.sistema .pz-mio.activa { background: linear-gradient(135deg, var(--amber), var(--amber-light)); box-shadow: 0 0 14px color-mix(in srgb, var(--amber) 55%, transparent); }
html.sistema .pz-grupo summary em { background: linear-gradient(135deg, var(--bt-rosa), #fbe3f3); box-shadow: inset 0 0 0 1px rgba(181, 60, 147, .18); }
/* la escena del día: marco luminoso y el almanaque flotando */
html.sistema #homeDailyScene { border-radius: 18px !important; box-shadow: 0 0 0 3px #fff, 0 0 0 5px color-mix(in srgb, var(--plum-mid) 35%, transparent), 0 26px 56px -20px color-mix(in srgb, var(--plum) 55%, transparent) !important; transition: box-shadow var(--t), transform .4s ease; }
html.sistema #homeDailyScene:hover { box-shadow: 0 0 0 3px #fff, 0 0 0 6px color-mix(in srgb, var(--amber) 55%, transparent), 0 30px 60px -20px color-mix(in srgb, var(--plum) 60%, transparent) !important; }
html.sistema #homeAlmanaque { border-radius: 14px !important; box-shadow: 0 12px 32px rgba(42, 10, 37, .38), 0 0 0 1px rgba(255, 255, 255, .7) !important; overflow: hidden; }
html.sistema #homeSceneCaption { font-family: 'Lora', serif; }
/* el Estudio: pestañas con subrayado luminoso */
html.sistema .estudio .est-tab.activa { background: linear-gradient(180deg, transparent 70%, rgba(244, 212, 236, .7)); box-shadow: inset 0 -2px 0 var(--bt-magenta), 0 6px 14px -10px rgba(181, 60, 147, .9); }
html.sistema .estudio .est-sec summary:hover .est-sec-ic { box-shadow: 0 0 12px rgba(181, 60, 147, .5); }
/* barras de scroll finas, a tono */
html.sistema ::-webkit-scrollbar { width: 10px; height: 10px; }
html.sistema ::-webkit-scrollbar-thumb { background: rgba(84, 5, 69, .22); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
html.sistema ::-webkit-scrollbar-thumb:hover { background: rgba(181, 60, 147, .45); background-clip: padding-box; }
/* foco con halo */
html.sistema :focus-visible { box-shadow: 0 0 0 4px rgba(181, 60, 147, .22); }