/* ═══════════════════════════════════════════════════════════════════════
   n0w-core.css — Gramática Visual Canónica
   Sistema de tokens, capas y ritmo del ecosistema n0w.
   Fuente de verdad: 03_N0W_DESIGN_SYSTEM.md
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS DE COLOR ─────────────────────────────────────────────── */
:root {
  /* Energía — estados del ecosistema (Design System §4) */
  --energy-dormant:    #C4B8A8;
  --energy-emergent:   #8FA87A;
  --energy-active:     #C4913A;
  --energy-mature:     #5B7A5B;
  --energy-transform:  #D4A843;

  /* Fondos y superficies — calidez (Design System §2.1) */
  --n0w-bg-warm:       #F5F0E8;
  --n0w-bg-soft:       #EDE6DA;
  --n0w-surface-warm:  #FFFAF3;
  --n0w-ink-warm:      #1C1814;
  --n0w-ink-soft:      #6B6258;
  --n0w-line-warm:     rgba(28,24,20,0.08);
  --n0w-line-strong:   rgba(28,24,20,0.14);

  /* Acentos derivados del sistema de energía */
  --n0w-gold:          #C8973F;
  --n0w-gold-soft:     rgba(200,151,63,0.10);
  --n0w-gold-glow:     rgba(200,151,63,0.22);
  --n0w-alive:         #7A8B6A;
  --n0w-alive-soft:    rgba(122,139,106,0.12);
  --n0w-earth:         #C4A882;
  --n0w-earth-soft:    rgba(196,168,130,0.12);
  --n0w-error:         #C44A4A;
  --n0w-error-soft:    rgba(196,74,74,0.08);
  --n0w-success:       #5A8F6A;
  --n0w-success-soft:  rgba(90,143,106,0.08);

  /* Profundidad — glassmorphism calida (Design System §2.3) */
  --n0w-glass:         rgba(245,240,232,0.78);
  --n0w-glass-heavy:   rgba(245,240,232,0.94);

  /* ── 2. TIPOGRAFÍA ────────────────────────────────────────────────── */
  /* Design System §11 */
  --n0w-serif:    'Fraunces', Georgia, serif;
  --n0w-sans:     'Inter', -apple-system, sans-serif;
  --n0w-lectura:  'Literata', Georgia, serif;

  /* Escala tipográfica (Design System §11.2) */
  --n0w-text-xs:      0.75rem;
  --n0w-text-sm:      0.85rem;
  --n0w-text-base:    0.95rem;
  --n0w-text-lg:      1.1rem;
  --n0w-text-xl:      1.4rem;
  --n0w-text-2xl:     1.8rem;
  --n0w-text-3xl:     2.4rem;
  --n0w-text-display: 3.2rem;

  /* Interlineado (Design System §11.3) */
  --n0w-leading-body:    1.6;
  --n0w-leading-heading: 1.2;

  /* Anchura máxima de texto */
  --n0w-text-max:     720px;

  /* ── 3. ESPACIADO ─────────────────────────────────────────────────── */
  /* Design System §13 */
  --n0w-space-1:  4px;
  --n0w-space-2:  8px;
  --n0w-space-3:  12px;
  --n0w-space-4:  16px;
  --n0w-space-5:  24px;
  --n0w-space-6:  32px;
  --n0w-space-7:  48px;
  --n0w-space-8:  64px;
  --n0w-space-9:  96px;

  /* ── 4. BORDES Y RADIOS ───────────────────────────────────────────── */
  --n0w-radius-xs:  4px;
  --n0w-radius-sm:  6px;
  --n0w-radius:     8px;    /* Células: 8px (Design System §5.2) */
  --n0w-radius-md:  10px;
  --n0w-radius-lg:  14px;
  --n0w-radius-xl:  18px;
  --n0w-radius-pill: 999px;

  /* ── 5. SOMBRAS ───────────────────────────────────────────────────── */
  /* Célula: §5.2 — Bloque: §6.2 */
  --n0w-shadow-block:    0 0.5px 1px rgba(28,24,20,0.04);
  --n0w-shadow-cell:     0 1px 3px rgba(28,24,20,0.06);
  --n0w-shadow-hover:    0 3px 12px rgba(28,24,20,0.09);
  --n0w-shadow-elevated: 0 8px 30px rgba(28,24,20,0.12);
  --n0w-shadow-drag:     0 16px 48px rgba(28,24,20,0.18);

  /* ── 6. MOVIMIENTO ────────────────────────────────────────────────── */
  /* Design System §10 */
  --n0w-ease:           cubic-bezier(0.4, 0, 0.2, 1);           /* organic */
  --n0w-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);      /* n0w bounce */
  --n0w-ease-connection:cubic-bezier(0.22, 1, 0.36, 1);         /* connection */

  --n0w-duration-micro: 120ms;
  --n0w-duration-fast:  200ms;
  --n0w-duration-base:  300ms;
  --n0w-duration-slow:  500ms;
  --n0w-duration-entry: 600ms;
  --n0w-duration-scene: 800ms;

  /* Transiciones compuestas frecuentes */
  --n0w-transition:     var(--n0w-duration-fast) var(--n0w-ease);
  --n0w-transition-spring: var(--n0w-duration-base) var(--n0w-ease-spring);

  /* ── 7. CAPAS (z-index) ───────────────────────────────────────────── */
  --n0w-z-canvas:    1;
  --n0w-z-block:     10;
  --n0w-z-toolbar:   100;
  --n0w-z-nav:       200;
  --n0w-z-overlay:   500;
  --n0w-z-toast:     900;
  --n0w-z-modal:     1000;
}

/* ── 8. ESTADOS DE ENERGÍA — clases de utilidad ─────────────────────── */
/* Aplica en bordes y acentos de Células y Bloques (Design System §4) */

.energy-dormant    { --energy-color: var(--energy-dormant);   }
.energy-emergent   { --energy-color: var(--energy-emergent);  }
.energy-active     { --energy-color: var(--energy-active);    }
.energy-mature     { --energy-color: var(--energy-mature);    }
.energy-transform  { --energy-color: var(--energy-transform); }

/* ── 9. CÉLULA — átomo visual de n0w (Design System §5) ─────────────── */
.n0w-cell {
  background: var(--n0w-surface-warm);
  border: 1px solid var(--energy-color, var(--n0w-line-warm));
  border-radius: var(--n0w-radius);
  box-shadow: var(--n0w-shadow-cell);
  padding: var(--n0w-space-4);
  transition:
    box-shadow var(--n0w-transition),
    border-color var(--n0w-duration-slow) ease-in-out,
    transform var(--n0w-transition);
}
.n0w-cell:hover {
  box-shadow: var(--n0w-shadow-hover);
  transform: translateY(-1px);
}

/* ── 10. BLOQUE — unidad mínima de conocimiento (Design System §6) ── */
.n0w-block {
  background: var(--n0w-surface-warm);
  border: 0.5px solid var(--n0w-line-warm);
  border-radius: var(--n0w-radius);
  box-shadow: var(--n0w-shadow-block);
  cursor: grab;
  transition:
    box-shadow var(--n0w-transition),
    transform var(--n0w-transition);
}
.n0w-block:hover {
  box-shadow: var(--n0w-shadow-hover);
  transform: translateY(-1px);
}
.n0w-block.is-selected {
  border-color: var(--energy-color, var(--energy-active));
}
.n0w-block.is-dragging {
  box-shadow: var(--n0w-shadow-drag);
  opacity: 0.9;
  cursor: grabbing;
}
.n0w-block.is-related {
  border-color: var(--energy-color, var(--energy-emergent));
  box-shadow: 0 0 0 1px var(--energy-color, var(--energy-emergent));
}

/* ── 11. PROCEDENCIA — siempre visible (Design System §6.2) ───────── */
.n0w-provenance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--n0w-space-2);
  padding: var(--n0w-space-2) var(--n0w-space-3);
  font-size: var(--n0w-text-xs);
  color: var(--n0w-ink-soft);
  border-top: 0.5px solid var(--n0w-line-warm);
}

/* ── 12. CONEXIONES — siempre al final (Design System §3.1) ────────── */
.n0w-connections {
  display: flex;
  flex-wrap: wrap;
  gap: var(--n0w-space-2);
  padding: var(--n0w-space-2) var(--n0w-space-3);
  font-size: var(--n0w-text-xs);
  color: var(--n0w-ink-soft);
  border-top: 0.5px solid var(--n0w-line-warm);
}
.n0w-connection-link {
  color: var(--n0w-gold);
  text-decoration: none;
  transition: color var(--n0w-transition);
}
.n0w-connection-link:hover { color: var(--n0w-ink-warm); }

/* ── 13. TIPOGRAFÍA EDITORIAL ───────────────────────────────────────── */
.n0w-heading {
  font-family: var(--n0w-serif);
  line-height: var(--n0w-leading-heading);
  color: var(--n0w-ink-warm);
  letter-spacing: -0.02em;
}
.n0w-body {
  font-family: var(--n0w-sans);
  line-height: var(--n0w-leading-body);
  color: var(--n0w-ink-warm);
  max-width: var(--n0w-text-max);
}
.n0w-lectura {
  font-family: var(--n0w-lectura);
  line-height: var(--n0w-leading-body);
  color: var(--n0w-ink-warm);
  max-width: var(--n0w-text-max);
}

/* ── 14. ETIQUETAS DE ADN (Design System §3.1 — persona) ─────────── */
.n0w-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--n0w-radius-pill);
  background: var(--n0w-bg-soft);
  border: 0.5px solid var(--n0w-line-warm);
  font-size: var(--n0w-text-xs);
  font-weight: 600;
  color: var(--n0w-ink-soft);
  transition: background var(--n0w-transition);
}
.n0w-tag:hover { background: var(--n0w-gold-soft); }

/* ── 15. BARRA DE ENERGÍA (Design System §8.2) ────────────────────── */
.n0w-energy-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--n0w-line-warm);
  overflow: hidden;
}
.n0w-energy-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--energy-color, var(--energy-active));
  transition: width var(--n0w-duration-slow) var(--n0w-ease);
}

/* ── 16. PULSACIÓN — oportunidad viva (Design System §4.2, §10.2) ── */
@keyframes n0w-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}
.n0w-pulse {
  animation: n0w-pulse 2s var(--n0w-ease) infinite;
}

/* Globo breathing (Design System §10.2) */
@keyframes n0w-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.008); }
}
.n0w-breathe {
  animation: n0w-breathe 4s ease-in-out infinite;
}

/* ── 17. ENTRADA DE ESCENA ──────────────────────────────────────────── */
@keyframes n0w-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.n0w-enter {
  animation: n0w-enter var(--n0w-duration-entry) var(--n0w-ease-connection) both;
}
/* Stagger children */
.n0w-stagger > * {
  animation: n0w-enter var(--n0w-duration-entry) var(--n0w-ease-connection) both;
}
.n0w-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.n0w-stagger > *:nth-child(2)  { animation-delay: 60ms; }
.n0w-stagger > *:nth-child(3)  { animation-delay: 120ms; }
.n0w-stagger > *:nth-child(4)  { animation-delay: 180ms; }
.n0w-stagger > *:nth-child(5)  { animation-delay: 240ms; }
.n0w-stagger > *:nth-child(6)  { animation-delay: 300ms; }
.n0w-stagger > *:nth-child(7)  { animation-delay: 360ms; }
.n0w-stagger > *:nth-child(8)  { animation-delay: 420ms; }
.n0w-stagger > *:nth-child(9)  { animation-delay: 480ms; }
.n0w-stagger > *:nth-child(10) { animation-delay: 540ms; }

/* ── 18. ACCESIBILIDAD (Design System §14) ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .n0w-pulse,
  .n0w-breathe,
  .n0w-enter,
  .n0w-stagger > * {
    animation: none !important;
  }
  .n0w-cell,
  .n0w-block,
  .n0w-tag,
  .n0w-connection-link {
    transition-duration: 0s !important;
  }
}

/* ── 19. INDICADOR DE ETAPA (Design System §3.1 — proyecto) ─────── */
.n0w-stage {
  display: inline-flex;
  align-items: center;
  gap: var(--n0w-space-1);
  font-size: var(--n0w-text-xs);
  font-weight: 600;
  color: var(--n0w-ink-soft);
}
.n0w-stage-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--energy-color, var(--energy-dormant));
}

/* ── 20. ESTADO DORMIDO como loading (Design System §15.2) ──────── */
.n0w-dormant {
  opacity: 0.5;
  filter: saturate(0.4);
  transition: opacity var(--n0w-duration-slow) var(--n0w-ease),
              filter var(--n0w-duration-slow) var(--n0w-ease);
}
.n0w-dormant.is-awake {
  opacity: 1;
  filter: saturate(1);
}

/* ═══════════════════════════════════════════════════════════════════════
   Y0 — PRESENCIA HUMANA
   La persona como lugar, no como ficha.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero atmosférico ──────────────────────────────────────────────── */
.y0-presence {
  position: relative;
  overflow: hidden;
  padding: var(--n0w-space-9) var(--n0w-space-5) var(--n0w-space-7);
  background: linear-gradient(
    168deg,
    var(--n0w-bg-warm) 0%,
    #E8DFD0 35%,
    #D9CDB8 60%,
    var(--n0w-bg-soft) 100%
  );
}
.y0-presence-atmosphere {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(200,151,63,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 75% 80%, rgba(91,122,91,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.y0-presence-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: var(--n0w-text-max);
  margin: 0 auto;
}

/* ── Avatar ────────────────────────────────────────────────────────── */
.y0-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  position: relative;
  margin-bottom: var(--n0w-space-4);
  flex-shrink: 0;
  transition: transform var(--n0w-transition-spring);
}
.y0-avatar:hover { transform: scale(1.04); }
.y0-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--n0w-surface-warm);
  box-shadow: var(--n0w-shadow-hover);
}
.y0-avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  font-family: var(--n0w-serif);
  font-weight: 600;
  color: var(--n0w-surface-warm);
  background: linear-gradient(145deg, var(--energy-active), var(--n0w-gold));
  border: 3px solid var(--n0w-surface-warm);
  box-shadow: var(--n0w-shadow-hover);
  position: absolute;
  inset: 0;
}

/* ── Nombre ────────────────────────────────────────────────────────── */
.y0-name {
  font-size: var(--n0w-text-2xl);
  font-weight: 700;
  color: var(--n0w-ink-warm);
  margin-bottom: var(--n0w-space-1);
  letter-spacing: -0.03em;
}

/* ── Intención ─────────────────────────────────────────────────────── */
.y0-intention {
  font-size: var(--n0w-text-xs);
  font-weight: 700;
  color: var(--n0w-gold);
  padding: 3px 14px;
  border-radius: var(--n0w-radius-pill);
  background: var(--n0w-gold-soft);
  border: 0.5px solid rgba(200,151,63,0.18);
  margin-bottom: var(--n0w-space-3);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.y0-intention:empty { display: none; }

/* ── Bio ───────────────────────────────────────────────────────────── */
.y0-bio {
  font-size: var(--n0w-text-sm);
  color: var(--n0w-ink-soft);
  max-width: 380px;
  margin-bottom: 0;
}
.y0-bio:empty { display: none; }

/* ── ADN (tags) ────────────────────────────────────────────────────── */
.y0-adn {
  display: flex;
  flex-wrap: wrap;
  gap: var(--n0w-space-1);
  justify-content: center;
  padding: var(--n0w-space-3) var(--n0w-space-5) 0;
}
.y0-adn:empty { display: none; }

/* ── Social links ──────────────────────────────────────────────────── */
.y0-social {
  display: flex;
  gap: var(--n0w-space-2);
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--n0w-space-2) var(--n0w-space-5);
  min-height: 0;
}
.y0-social:empty { display: none; }

/* ── Energía (stats como pulso vital) ──────────────────────────────── */
.y0-energy {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--n0w-space-2);
  padding: var(--n0w-space-3) var(--n0w-space-5);
  max-width: 420px;
  margin: 0 auto;
}
.y0-energy-cell {
  background: var(--n0w-surface-warm);
  border: 0.5px solid var(--n0w-line-warm);
  border-radius: var(--n0w-radius);
  padding: var(--n0w-space-3) var(--n0w-space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: border-color var(--n0w-transition), box-shadow var(--n0w-transition);
}
.y0-energy-cell:hover {
  border-color: var(--n0w-gold-soft);
  box-shadow: var(--n0w-shadow-cell);
}
.y0-energy-value {
  font-family: var(--n0w-serif);
  font-size: var(--n0w-text-lg);
  font-weight: 700;
  color: var(--n0w-gold);
  line-height: 1;
}
.y0-energy-label {
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--n0w-ink-soft);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
/* g0z0 row stretches */
#profG0z0Stat {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: var(--n0w-space-2);
  justify-content: space-between;
  padding: var(--n0w-space-2) var(--n0w-space-3);
}
#profG0z0Detail {
  font-size: 0.5rem;
  white-space: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--n0w-gold);
}

/* ── Acciones ──────────────────────────────────────────────────────── */
.y0-actions {
  display: flex;
  justify-content: center;
  gap: var(--n0w-space-2);
  padding: var(--n0w-space-3) var(--n0w-space-5) var(--n0w-space-4);
}
.y0-action {
  padding: 7px 18px;
  border-radius: var(--n0w-radius-pill);
  border: 0.5px solid var(--n0w-line-warm);
  background: var(--n0w-surface-warm);
  color: var(--n0w-ink-soft);
  font-size: var(--n0w-text-xs);
  font-weight: 600;
  font-family: var(--n0w-sans);
  cursor: pointer;
  transition: all var(--n0w-transition);
}
.y0-action:hover {
  border-color: var(--n0w-gold-soft);
  color: var(--n0w-ink-warm);
  box-shadow: var(--n0w-shadow-cell);
}
.y0-action-primary {
  background: var(--n0w-ink-warm);
  color: var(--n0w-surface-warm);
  border-color: var(--n0w-ink-warm);
}
.y0-action-primary:hover {
  background: var(--n0w-gold);
  border-color: var(--n0w-gold);
  color: #fff;
}
.y0-action-follow {
  background: var(--n0w-surface-warm);
  border-color: var(--n0w-gold);
  color: var(--n0w-gold);
}
.y0-action-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--n0w-ink-soft);
  font-size: 0.7rem;
}
.y0-action-ghost:hover { color: var(--n0w-ink-warm); }

/* ── Afinidad ──────────────────────────────────────────────────────── */
.y0-affinity {
  padding: var(--n0w-space-3) var(--n0w-space-5);
}

/* ── Anillos de filtro ─────────────────────────────────────────────── */
.y0-rings {
  display: flex;
  gap: var(--n0w-space-1);
  padding: var(--n0w-space-2) var(--n0w-space-5) var(--n0w-space-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.y0-rings::-webkit-scrollbar { display: none; }
.y0-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  flex-shrink: 0;
  width: 56px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  transition: transform var(--n0w-transition);
}
.y0-ring:hover { transform: scale(1.05); }
.y0-ring span {
  font-size: 0.58rem;
  color: var(--n0w-ink-soft);
  font-weight: 500;
  white-space: nowrap;
}
.y0-ring.active span {
  color: var(--n0w-gold);
  font-weight: 700;
}

/* ── Tabs ──────────────────────────────────────────────────────────── */
.y0-tab-bar {
  display: flex;
  background: var(--n0w-line-warm);
  border-radius: var(--n0w-radius-pill);
  padding: 3px;
  gap: 2px;
  margin: 0 var(--n0w-space-5) var(--n0w-space-4);
}
.y0-tab {
  flex: 1;
  padding: 7px 8px;
  border: none;
  border-radius: var(--n0w-radius-pill);
  background: transparent;
  color: var(--n0w-ink-soft);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--n0w-transition);
  font-family: var(--n0w-sans);
  text-align: center;
}
.y0-tab.active {
  background: var(--n0w-surface-warm);
  color: var(--n0w-ink-warm);
}
.y0-tab:hover { color: var(--n0w-ink-warm); }

/* ── Contenido (señales, espacios, etc.) ───────────────────────────── */
.y0-content {
  min-height: 200px;
  padding: 0 var(--n0w-space-5);
}
/* Signal grid — masonry-inspired */
#profileContent:has(.profile-signal-card) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--n0w-space-2);
  padding: 0 var(--n0w-space-5);
}
#profileContent:not(:has(.profile-signal-card)) {
  display: block;
  padding: 0 var(--n0w-space-5);
}

/* ── Versión ───────────────────────────────────────────────────────── */
.y0-version {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--n0w-space-3);
  padding: var(--n0w-space-7) var(--n0w-space-5) var(--n0w-space-5);
  border-top: 0.5px solid var(--n0w-line-warm);
  margin-top: var(--n0w-space-7);
}
.y0-version-left {
  display: flex;
  align-items: center;
  gap: var(--n0w-space-2);
}
.y0-version-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--energy-emergent);
  flex-shrink: 0;
}
.y0-version-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.y0-version-text strong {
  font-size: var(--n0w-text-xs);
  color: var(--n0w-ink-soft);
  font-weight: 600;
}
.y0-version-text small {
  font-size: 0.6rem;
  color: var(--n0w-ink-soft);
  opacity: 0.6;
}

/* ── Profile padding-bottom override ───────────────────────────────── */
body:has(#viewProfile.active) .profile-scroll { padding-bottom: 150px; }

/* ── Mobile adjustments ────────────────────────────────────────────── */
/* ── Mobile adjustments ────────────────────────────────────────────── */
@media (max-width: 500px) {
  .y0-presence {
    padding: var(--n0w-space-7) var(--n0w-space-4) var(--n0w-space-6);
  }
  .y0-name { font-size: var(--n0w-text-xl); }
  .y0-avatar { width: 80px; height: 80px; }
  .y0-avatar-fallback { font-size: 2rem; }
  .y0-energy { grid-template-columns: repeat(2, 1fr); max-width: 280px; }
  #profG0z0Stat { grid-column: 1 / -1; }
  .y0-actions { flex-wrap: wrap; }
  #profileContent:has(.profile-signal-card) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ESPACIOS — ESTUDIO VIVO & PIEZAS (BLOCKS)
   03_N0W_DESIGN_SYSTEM.md §5, §6, §7, §8
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Space Hero & Atmosphere ───────────────────────────────────────── */
.space-hero {
  position: relative;
  background: var(--n0w-bg-warm);
  border-bottom: 0.5px solid var(--n0w-line-warm);
  padding: var(--n0w-space-4) var(--n0w-space-5);
  transition: background var(--n0w-transition);
}
.space-hero-cover {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  pointer-events: none;
}
.space-hero-body {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--n0w-space-3);
}
.space-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--n0w-space-3);
}
.space-picker {
  display: inline-flex;
  align-items: center;
  gap: var(--n0w-space-2);
  padding: var(--n0w-space-2) var(--n0w-space-4);
  background: var(--n0w-surface-warm);
  border: 0.5px solid var(--n0w-line-warm);
  border-radius: var(--n0w-radius-pill);
  font-family: var(--n0w-serif);
  font-weight: 700;
  font-size: var(--n0w-text-base);
  color: var(--n0w-ink-warm);
  cursor: pointer;
  box-shadow: var(--n0w-shadow-cell);
  transition: var(--n0w-transition);
}
.space-picker:hover {
  border-color: var(--n0w-gold-soft);
  box-shadow: var(--n0w-shadow-hover);
}
.space-hero-actions {
  display: flex;
  align-items: center;
  gap: var(--n0w-space-2);
}
.space-hero-actions .icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0.5px solid var(--n0w-line-warm);
  background: var(--n0w-surface-warm);
  color: var(--n0w-ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--n0w-transition);
}
.space-hero-actions .icon-btn:hover {
  background: var(--n0w-bg-soft);
  color: var(--n0w-ink-warm);
  border-color: var(--n0w-line-strong);
}
.space-hero-actions .icon-btn.primary {
  background: var(--n0w-ink-warm);
  color: var(--n0w-surface-warm);
  border-color: var(--n0w-ink-warm);
}
.space-hero-actions .icon-btn.primary:hover {
  background: var(--n0w-gold);
  border-color: var(--n0w-gold);
}

.space-hero-ambient {
  display: inline-flex;
  align-items: center;
  gap: var(--n0w-space-2);
  padding: 4px 12px;
  background: rgba(200,151,63,0.08);
  border: 0.5px solid rgba(200,151,63,0.2);
  border-radius: var(--n0w-radius-pill);
  font-size: var(--n0w-text-xs);
  color: var(--n0w-gold);
  width: fit-content;
}
.space-hero-ambient .hl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--n0w-gold);
  box-shadow: 0 0 8px var(--n0w-gold);
}

.space-hero-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.space-hero-name {
  font-family: var(--n0w-serif);
  font-size: var(--n0w-text-2xl);
  font-weight: 700;
  color: var(--n0w-ink-warm);
  letter-spacing: -0.02em;
}
.space-hero-desc {
  font-family: var(--n0w-sans);
  font-size: var(--n0w-text-sm);
  color: var(--n0w-ink-soft);
  max-width: 600px;
  line-height: 1.5;
}

/* ── Studio Toolbar ────────────────────────────────────────────────── */
.space-studio {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--n0w-space-3) var(--n0w-space-5);
  background: var(--n0w-surface-warm);
  border-bottom: 0.5px solid var(--n0w-line-warm);
  flex-wrap: wrap;
  gap: var(--n0w-space-3);
}
.space-studio-intro {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.space-studio-kicker {
  font-size: var(--n0w-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--n0w-gold);
  font-weight: 700;
}
.space-studio-intro strong {
  font-family: var(--n0w-serif);
  font-size: var(--n0w-text-base);
  color: var(--n0w-ink-warm);
}
.space-studio-intro small {
  font-size: var(--n0w-text-xs);
  color: var(--n0w-ink-soft);
}
.space-studio-tools {
  display: flex;
  align-items: center;
  gap: var(--n0w-space-2);
}
.space-tool {
  padding: 6px 14px;
  border-radius: var(--n0w-radius-pill);
  border: 0.5px solid var(--n0w-line-warm);
  background: var(--n0w-bg-warm);
  font-size: var(--n0w-text-xs);
  font-weight: 600;
  color: var(--n0w-ink-soft);
  cursor: pointer;
  transition: all var(--n0w-transition);
}
.space-tool:hover {
  background: var(--n0w-surface-warm);
  color: var(--n0w-ink-warm);
  border-color: var(--n0w-line-strong);
}
.space-tool.is-active {
  background: var(--n0w-ink-warm);
  color: var(--n0w-surface-warm);
  border-color: var(--n0w-ink-warm);
}
.space-tool-primary {
  background: var(--n0w-gold);
  color: #fff;
  border-color: var(--n0w-gold);
}
.space-tool-primary:hover {
  background: #B38332;
  border-color: #B38332;
}

/* ── Canvas Wrap ───────────────────────────────────────────────────── */
.space-canvas-wrap {
  position: relative;
  flex: 1;
  overflow: auto;
  background:
    radial-gradient(circle, var(--n0w-line-warm) 1px, transparent 1px);
  background-size: 18px 18px;
  background-color: var(--n0w-bg-warm);
  min-height: calc(100vh - 280px);
}
.canvas {
  position: relative;
  min-width: 100%;
  min-height: 100%;
  padding: var(--n0w-space-5);
}

/* ── Block Elements (Piezas) ───────────────────────────────────────── */
.block {
  position: absolute;
  background: var(--n0w-surface-warm);
  border: 0.5px solid var(--n0w-line-warm);
  border-radius: var(--n0w-radius);
  box-shadow: var(--n0w-shadow-block);
  overflow: hidden;
  transition: box-shadow var(--n0w-transition), transform var(--n0w-transition), border-color var(--n0w-transition);
  display: flex;
  flex-direction: column;
}
.block:hover {
  box-shadow: var(--n0w-shadow-hover);
  border-color: var(--n0w-line-strong);
}
.block.editing {
  cursor: grab;
}
.block.is-dragging {
  cursor: grabbing;
  box-shadow: var(--n0w-shadow-drag);
  z-index: var(--n0w-z-block);
}

/* Block Content Styles */
.block .b-caption {
  padding: var(--n0w-space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.block .b-cap-title {
  font-family: var(--n0w-serif);
  font-weight: 700;
  font-size: var(--n0w-text-sm);
  color: var(--n0w-ink-warm);
  line-height: 1.3;
}
.block .b-cap-body {
  font-family: var(--n0w-sans);
  font-size: var(--n0w-text-xs);
  color: var(--n0w-ink-soft);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.block .b-cap-geo {
  font-size: 0.65rem;
  color: var(--n0w-gold);
  margin-top: 2px;
}

/* Image blocks */
.block .b-img-wrap {
  width: 100%;
  height: 140px;
  background: var(--n0w-bg-soft);
  overflow: hidden;
}
.block .b-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--n0w-transition-spring);
}
.block:hover .b-img-wrap img {
  transform: scale(1.03);
}

/* Provenance badge on blocks */
.block-provenance-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--n0w-bg-soft);
  border-top: 0.5px solid var(--n0w-line-warm);
  font-size: 0.62rem;
  color: var(--n0w-ink-soft);
}
.block-provenance-badge span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* View counts & Collections */
.block-view-count {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 6px;
  border-radius: var(--n0w-radius-pill);
  background: rgba(255,250,243,0.85);
  backdrop-filter: blur(4px);
  border: 0.5px solid var(--n0w-line-warm);
  font-size: 0.6rem;
  color: var(--n0w-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.block-collection-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 6px;
  border-radius: var(--n0w-radius-pill);
  background: var(--n0w-gold-soft);
  border: 0.5px solid rgba(200,151,63,0.2);
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--n0w-gold);
}

/* Controls (Drag & Resize Handles) */
.block-drag {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: rgba(255,250,243,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--n0w-ink-soft);
  cursor: grab;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.block-handle {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  color: var(--n0w-ink-soft);
  opacity: 0.6;
  cursor: nwse-resize;
}
.block-handle:hover { opacity: 1; color: var(--n0w-gold); }

/* Block palette (FAB) */
.add-fab-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--n0w-space-2);
  z-index: var(--n0w-z-toolbar);
}
.add-main {
  padding: 10px 20px;
  border-radius: var(--n0w-radius-pill);
  border: none;
  background: var(--n0w-ink-warm);
  color: var(--n0w-surface-warm);
  font-family: var(--n0w-sans);
  font-weight: 700;
  font-size: var(--n0w-text-sm);
  cursor: pointer;
  box-shadow: var(--n0w-shadow-elevated);
  transition: all var(--n0w-transition-spring);
}
.add-main:hover {
  background: var(--n0w-gold);
  transform: scale(1.04);
}
.add-mini {
  padding: 6px 14px;
  border-radius: var(--n0w-radius-pill);
  border: 0.5px solid var(--n0w-line-warm);
  background: var(--n0w-surface-warm);
  color: var(--n0w-ink-warm);
  font-size: var(--n0w-text-xs);
  font-weight: 600;
  font-family: var(--n0w-sans);
  cursor: pointer;
  box-shadow: var(--n0w-shadow-cell);
  transition: all var(--n0w-transition);
}
.add-mini:hover {
  background: var(--n0w-bg-soft);
  border-color: var(--n0w-gold);
  color: var(--n0w-gold);
}

/* ═══════════════════════════════════════════════════════════════════════
   FASE 5: COMPOSER (CREADOR DE SEÑALES & BANDEJA DE COMPARTIR)
   03_N0W_DESIGN_SYSTEM.md §2, §6, §11
   ═══════════════════════════════════════════════════════════════════════ */
.share-inbox-overlay {
  backdrop-filter: blur(16px) saturate(1.1);
  background: rgba(28,24,20,0.35);
}
.share-inbox-card {
  background: var(--n0w-surface-warm);
  border: 1px solid var(--n0w-line-warm);
  border-radius: var(--n0w-radius-lg);
  box-shadow: var(--n0w-shadow-elevated);
  max-width: 540px;
  padding: var(--n0w-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--n0w-space-4);
}
.share-inbox-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.share-inbox-kicker {
  font-size: var(--n0w-text-xs);
  color: var(--n0w-gold);
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: 0.05em;
}
#shareInboxTitle {
  font-family: var(--n0w-serif);
  font-size: var(--n0w-text-xl);
  font-weight: 700;
  color: var(--n0w-ink-warm);
  margin-top: 2px;
}
.share-inbox-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.share-inbox-field span {
  font-size: var(--n0w-text-xs);
  font-weight: 600;
  color: var(--n0w-ink-soft);
}
#shareInboxText {
  width: 100%;
  border: 1px solid var(--n0w-line-warm);
  border-radius: var(--n0w-radius);
  padding: var(--n0w-space-3);
  font-family: var(--n0w-sans);
  font-size: var(--n0w-text-base);
  color: var(--n0w-ink-warm);
  background: var(--n0w-bg-warm);
  resize: vertical;
  line-height: 1.5;
  transition: border-color var(--n0w-transition);
}
#shareInboxText:focus {
  outline: none;
  border-color: var(--n0w-gold);
  background: var(--n0w-surface-warm);
}
#shareInboxUrl {
  width: 100%;
  border: 1px solid var(--n0w-line-warm);
  border-radius: var(--n0w-radius-pill);
  padding: 8px 16px;
  font-family: var(--n0w-sans);
  font-size: var(--n0w-text-sm);
  color: var(--n0w-ink-warm);
  background: var(--n0w-bg-warm);
}
.share-inbox-preview {
  border: 1px dashed var(--n0w-line-strong);
  border-radius: var(--n0w-radius);
  padding: var(--n0w-space-4);
  text-align: center;
  background: var(--n0w-bg-warm);
  font-size: var(--n0w-text-xs);
  color: var(--n0w-ink-soft);
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--n0w-space-2);
}
.share-inbox-preview img,
.share-inbox-preview video {
  max-width: 100%;
  max-height: 200px;
  border-radius: var(--n0w-radius-sm);
}
.share-inbox-import-actions {
  display: flex;
  gap: var(--n0w-space-2);
}
.celestial-body-picker {
  display: flex;
  gap: var(--n0w-space-2);
  margin-bottom: var(--n0w-space-2);
}
.celestial-body-picker button {
  flex: 1;
  padding: 6px 12px;
  border-radius: var(--n0w-radius-pill);
  border: 0.5px solid var(--n0w-line-warm);
  background: var(--n0w-bg-warm);
  font-size: var(--n0w-text-xs);
  font-weight: 600;
  color: var(--n0w-ink-soft);
  cursor: pointer;
  transition: all var(--n0w-transition);
}
.celestial-body-picker button.active,
.celestial-body-picker button[aria-pressed="true"] {
  background: var(--n0w-ink-warm);
  color: var(--n0w-surface-warm);
  border-color: var(--n0w-ink-warm);
}
.share-inbox-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--n0w-space-2);
  margin-top: var(--n0w-space-2);
}

/* ═══════════════════════════════════════════════════════════════════════
   FASE 6: PUBLICACIÓN & TARJETAS DE SEÑALES (FEED / CORRIENTE)
   03_N0W_DESIGN_SYSTEM.md §3, §6, §11
   ═══════════════════════════════════════════════════════════════════════ */
.feed-card,
.actuality-card {
  background: var(--n0w-surface-warm);
  border: 0.5px solid var(--n0w-line-warm);
  border-radius: var(--n0w-radius-lg);
  box-shadow: var(--n0w-shadow-cell);
  padding: var(--n0w-space-4);
  margin-bottom: var(--n0w-space-4);
  transition: box-shadow var(--n0w-transition), transform var(--n0w-transition);
}
.feed-card:hover,
.actuality-card:hover {
  box-shadow: var(--n0w-shadow-hover);
  transform: translateY(-1px);
}
.actuality-header {
  padding: var(--n0w-space-5) var(--n0w-space-5) var(--n0w-space-3);
}
.actuality-kicker {
  font-size: var(--n0w-text-xs);
  font-weight: 700;
  color: var(--n0w-gold);
  letter-spacing: 0.08em;
}
.actuality-header h1 {
  font-family: var(--n0w-serif);
  font-size: var(--n0w-text-3xl);
  font-weight: 700;
  color: var(--n0w-ink-warm);
  letter-spacing: -0.02em;
}
.actuality-header p {
  font-family: var(--n0w-sans);
  font-size: var(--n0w-text-sm);
  color: var(--n0w-ink-soft);
  max-width: 600px;
}
.profile-signal-relatives {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 8px 6px;
}
.profile-signal-rel {
  font-size: 0.58rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--n0w-radius-pill);
  background: var(--n0w-bg-soft);
  color: var(--n0w-ink-soft);
  border: 0.5px solid var(--n0w-line-warm);
}
.profile-signal-rel.project-badge {
  background: rgba(143,168,122,0.12);
  color: var(--energy-emergent);
  border-color: rgba(143,168,122,0.25);
}
.profile-signal-rel.space-badge {
  background: var(--n0w-gold-soft);
  color: var(--n0w-gold);
  border-color: rgba(200,151,63,0.25);
}
.profile-signal-rel.globe-badge {
  background: rgba(196,168,130,0.15);
  color: var(--n0w-earth);
  border-color: rgba(196,168,130,0.3);
}

/* ═══════════════════════════════════════════════════════════════════════
   FASE 7: EXPLORAR / DISCOVER (REFINAMIENTO VISUAL & RESPONSIVE)
   ═══════════════════════════════════════════════════════════════════════ */
#viewDiscover .fi-scroll {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--n0w-space-4) var(--n0w-space-4) 140px;
}
.eco-section {
  margin-bottom: var(--n0w-space-6);
}
.eco-section-title {
  font-family: var(--n0w-serif);
  font-size: var(--n0w-text-2xl);
  font-weight: 700;
  color: var(--n0w-ink-warm);
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}
.eco-section-sub {
  font-family: var(--n0w-sans);
  font-size: var(--n0w-text-xs);
  color: var(--n0w-ink-soft);
  margin-bottom: var(--n0w-space-3);
}
.eco-search {
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--n0w-radius-pill);
  background: var(--n0w-surface-warm);
  border: 1px solid var(--n0w-line-warm);
  font-family: var(--n0w-sans);
  font-size: var(--n0w-text-sm);
  color: var(--n0w-ink-warm);
  margin-bottom: var(--n0w-space-3);
  transition: border-color var(--n0w-transition), box-shadow var(--n0w-transition);
}
.eco-search:focus {
  outline: none;
  border-color: var(--n0w-gold);
  box-shadow: 0 0 0 3px var(--n0w-gold-soft);
}
.eco-people-list,
.eco-nearby-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--n0w-space-3);
}
@media (max-width: 640px) {
  .eco-people-list,
  .eco-nearby-list {
    grid-template-columns: 1fr;
  }
}
.eco-alive-card,
.discover-card,
.affinity-card,
.eco-live-card {
  background: var(--n0w-surface-warm);
  border: 0.5px solid var(--n0w-line-warm);
  border-radius: var(--n0w-radius);
  padding: var(--n0w-space-3) var(--n0w-space-4);
  box-shadow: var(--n0w-shadow-cell);
  transition: transform var(--n0w-transition), box-shadow var(--n0w-transition);
  cursor: pointer;
}
.eco-alive-card:hover,
.discover-card:hover,
.affinity-card:hover,
.eco-live-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--n0w-shadow-hover);
  border-color: var(--n0w-gold);
}
.eco-empty {
  padding: var(--n0w-space-4);
  color: var(--n0w-ink-soft);
  font-size: var(--n0w-text-xs);
  text-align: center;
  border-radius: var(--n0w-radius);
  background: var(--n0w-bg-soft);
}
.eco-loading {
  padding: var(--n0w-space-3);
  color: var(--n0w-ink-soft);
  font-size: var(--n0w-text-xs);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   FASE 10: OPERATING LAYER (CAPA INTERNA — PRODUCTO HUMANO)
   ═══════════════════════════════════════════════════════════════════════ */
.operations-shell {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--n0w-space-5) var(--n0w-space-4) 140px;
}
.operations-header h2 {
  font-family: var(--n0w-serif);
  font-size: var(--n0w-text-3xl);
  font-weight: 700;
  color: var(--n0w-ink-warm);
  letter-spacing: -0.03em;
}
.operations-context-bar {
  background: var(--n0w-surface-warm);
  border: 0.5px solid var(--n0w-line-warm);
  border-radius: var(--n0w-radius-lg);
  padding: var(--n0w-space-4);
  margin-bottom: var(--n0w-space-4);
  box-shadow: var(--n0w-shadow-cell);
}
.operations-tag {
  font-size: var(--n0w-text-xs);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--n0w-radius-pill);
  background: var(--n0w-gold-soft);
  color: var(--n0w-gold);
  border: 0.5px solid rgba(200,151,63,0.2);
}
.operations-role-badge {
  font-size: var(--n0w-text-xs);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--n0w-radius-pill);
  background: rgba(143,168,122,0.14);
  color: var(--energy-emergent);
  border: 0.5px solid rgba(143,168,122,0.25);
}
.operations-status-pill {
  font-size: var(--n0w-text-xs);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--n0w-radius-pill);
  background: var(--n0w-bg-soft);
  color: var(--n0w-ink-soft);
  border: 0.5px solid var(--n0w-line-warm);
}