/*
  TNG CELESTIAL INTELLIGENCE — design system foundation.
  (Formerly "TNG Ultra" — same architecture, retinted palette. Every
  component below still reaches for --tng-* names, so this file is the only
  place that needed to change; nothing that already uses .tng-surface-deep /
  .tng-kpi-shell / etc. across the 8 converted screens needed to be touched.)

  Additive: does not redefine any existing --green/--gold/--bg token used by
  app.css, so nothing currently on screen changes until a component opts in
  to .tng-surface-deep / .tng-surface-light explicitly.
*/

:root{
  /* Canonical Celestial palette — the source of truth. New code (e.g. the
     Horóscopo Numérico module) should reach for these names directly. */
  --celestial-bg:#02120E;
  --celestial-bg-soft:#06241C;
  --celestial-panel:#093129;
  --celestial-panel-glass:rgba(8,42,34,.82);
  --celestial-gold:#D4A73A;
  --celestial-gold-light:#FFD974;
  --celestial-emerald:#0E8C68;
  --celestial-cyan:#21D4FD;
  --celestial-blue:#246BCE;
  --celestial-ruby:#B93832;
  --celestial-violet:#7B61FF;
  --celestial-ivory:#F8F2E5;
  --celestial-text:#FFF7DF;
  --celestial-muted:#A8C0B6;

  /* --tng-* names are kept as aliases so every rule already written against
     them (the whole rest of this file) picks up the new tones automatically. */
  --tng-black:var(--celestial-bg);
  --tng-night:var(--celestial-bg-soft);
  --tng-panel:var(--celestial-panel);
  --tng-panel-soft:#0F3F33;
  --tng-emerald:var(--celestial-emerald);
  --tng-emerald-bright:#17B384;
  --tng-gold:var(--celestial-gold);
  --tng-gold-bright:var(--celestial-gold-light);
  --tng-gold-soft:#FFE9B3;
  --tng-cyan:var(--celestial-cyan);
  --tng-blue:var(--celestial-blue);
  --tng-violet:var(--celestial-violet);
  --tng-magenta:var(--celestial-ruby);
  --tng-lime:#4ADE80;
  --tng-orange:#FB923C;
  --tng-red:#E5484D;
  --tng-ivory:var(--celestial-ivory);
  --tng-white:#FFFFFF;
  --tng-muted:var(--celestial-muted);
  --tng-text:var(--celestial-text);

  /* Semantic mapping — components should reach for these, not the raw hues,
     so the meaning of a color stays consistent across every dark panel. */
  --tng-accent-live:var(--tng-cyan);
  --tng-accent-verified:var(--tng-emerald-bright);
  --tng-accent-info:var(--tng-blue);
  --tng-accent-symbolic:var(--tng-violet);
  --tng-accent-apex:var(--tng-magenta);
  --tng-accent-watch:var(--tng-orange);
  --tng-accent-error:var(--tng-red);
  --tng-accent-premium:var(--tng-gold-bright);

  /* Typography scale (section 6). Fluid, never shrinks primary numbers to
     make room — containers must accommodate this, not the other way round. */
  --tng-font-serif:Georgia,"Times New Roman",serif;
  --tng-font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --tng-size-hero:clamp(2.8rem,5vw,5.5rem);
  --tng-size-code:clamp(3.5rem,7vw,7rem);
  --tng-size-module-title:clamp(2rem,3.2vw,3.8rem);
  --tng-size-structural:clamp(2rem,3.5vw,4rem);
  --tng-size-card-title:clamp(1.15rem,1.6vw,1.65rem);
  --tng-size-body:17px;
  --tng-size-body-secondary:15px;

  --tng-radius:22px;
  --tng-transition-micro:160ms cubic-bezier(.2,.7,.2,1);
  --tng-transition-card:220ms cubic-bezier(.2,.7,.2,1);
  --tng-transition-panel:290ms cubic-bezier(.2,.7,.2,1);
}

/* ---------------------------------------------------------------------
   Environment: light reading / form areas.
   Opt-in wrapper — kept intentionally close to the existing app.css look
   so it can sit next to unconverted screens without clashing.
--------------------------------------------------------------------- */
.tng-surface-light{
  background:linear-gradient(180deg,var(--tng-white),var(--tng-ivory));
  color:var(--tng-panel);
  border:1px solid rgba(4,100,71,.14);
  border-radius:var(--tng-radius);
}

/* ---------------------------------------------------------------------
   Environment: dark "command center" analysis areas.
--------------------------------------------------------------------- */
.tng-surface-deep{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:18px;
  border-radius:var(--tng-radius);
  border:1px solid rgba(212,161,42,.22);
  background:
    radial-gradient(circle at 12% -10%,rgba(212,161,42,.16),transparent 42%),
    radial-gradient(circle at 100% 0%,rgba(0,216,255,.10),transparent 38%),
    linear-gradient(165deg,var(--tng-panel-soft),var(--tng-night) 60%,var(--tng-black));
  color:var(--tng-ivory);
  box-shadow:0 24px 60px rgba(2,10,8,.45);
}

.tng-surface-deep .tng-muted{color:var(--tng-muted)}

/* Sacred-geometry + grid backdrop, CSS-only (no DOM nodes). Sits behind
   content (z-index via stacking context from .tng-surface-deep) and never
   intercepts clicks. */
.tng-surface-deep::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.5;
  background:
    repeating-linear-gradient(0deg,rgba(242,238,222,.05) 0,rgba(242,238,222,.05) 1px,transparent 1px,transparent 42px),
    repeating-linear-gradient(90deg,rgba(242,238,222,.05) 0,rgba(242,238,222,.05) 1px,transparent 1px,transparent 42px);
}

/* Canvas mount point for the optional animated energy-line layer (see
   tng-ultra-bg.js). Absent script or reduced-motion => this stays empty and
   the static ::before grid above still reads as "deep" on its own. */
.tng-bg-canvas{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  display:block;
}

@media print{
  .tng-bg-canvas{display:none}
}

.tng-surface-deep > *:not(.tng-bg-canvas){
  position:relative;
  z-index:1;
}

/* ---------------------------------------------------------------------
   KPI strip, dark variant (Dashboard "command center" row — section 10).
   Reuses the existing .cards/.stat markup rendered by render.js; this only
   adds a modifier so no JS changes were needed to try the new system.
--------------------------------------------------------------------- */
.tng-kpi-shell{
  padding:22px;
  margin-bottom:18px;
}

.tng-kpi-shell .cards{margin-bottom:0}

.tng-kpi-shell .stat{
  background:
    radial-gradient(circle at 100% 0%,rgba(212,161,42,.16),transparent 40%),
    linear-gradient(180deg,rgba(16,54,44,.9),rgba(6,27,23,.94));
  border:1px solid rgba(212,161,42,.2);
  box-shadow:0 14px 30px rgba(2,10,8,.35);
}

.tng-kpi-shell .stat::before{
  background:linear-gradient(90deg,var(--tng-emerald-bright),var(--tng-gold-bright));
  opacity:.9;
}

.tng-kpi-shell .stat:hover{
  border-color:rgba(242,195,78,.45);
  box-shadow:0 20px 40px rgba(2,10,8,.5),0 0 0 1px rgba(242,195,78,.15);
}

.tng-kpi-shell .stat-label{color:var(--tng-muted)}

.tng-kpi-shell .stat-value{
  font-family:var(--tng-font-serif);
  color:var(--tng-gold-soft);
  text-shadow:0 0 22px rgba(242,195,78,.35);
}

.tng-kpi-shell .stat-note{color:var(--tng-muted)}

/* Semantic halo per KPI, applied via data-tng-accent="live|verified|info|symbolic|apex|watch|error" */
.tng-kpi-shell .stat[data-tng-accent]{position:relative}
.tng-kpi-shell .stat[data-tng-accent]::after{
  content:"";
  position:absolute;
  top:-30%;
  right:-30%;
  width:60%;
  height:60%;
  border-radius:50%;
  filter:blur(28px);
  opacity:.35;
  pointer-events:none;
  background:var(--tng-halo-color,var(--tng-gold-bright));
}
.tng-kpi-shell .stat[data-tng-accent="live"]{--tng-halo-color:var(--tng-cyan)}
.tng-kpi-shell .stat[data-tng-accent="verified"]{--tng-halo-color:var(--tng-emerald-bright)}
.tng-kpi-shell .stat[data-tng-accent="info"]{--tng-halo-color:var(--tng-blue)}
.tng-kpi-shell .stat[data-tng-accent="symbolic"]{--tng-halo-color:var(--tng-violet)}
.tng-kpi-shell .stat[data-tng-accent="apex"]{--tng-halo-color:var(--tng-magenta)}
.tng-kpi-shell .stat[data-tng-accent="watch"]{--tng-halo-color:var(--tng-orange)}
.tng-kpi-shell .stat[data-tng-accent="error"]{--tng-halo-color:var(--tng-red)}
.tng-kpi-shell .stat[data-tng-accent="premium"]{--tng-halo-color:var(--tng-gold-bright)}

@media (max-width:760px){
  .tng-kpi-shell{padding:16px}
}

/* ---------------------------------------------------------------------
   Generic dark-context overrides — applied whenever .tng-surface-deep is
   added alongside an existing .panel (same element), so any analytical
   panel can opt in without restructuring its markup or its render.js call.
--------------------------------------------------------------------- */
.panel.tng-surface-deep{padding:22px}
.tng-surface-deep .panel-title{color:var(--tng-gold-soft)}
.tng-surface-deep .panel-sub{color:var(--tng-muted)}
.tng-surface-deep .badge{
  background:rgba(13,175,120,.16);
  color:var(--tng-emerald-bright);
  border:1px solid rgba(13,175,120,.35);
}

.tng-surface-deep .code-card{
  background:
    radial-gradient(circle at 100% 0%,rgba(212,161,42,.18),transparent 34%),
    linear-gradient(180deg,rgba(16,54,44,.9),rgba(6,27,23,.94));
  border:1px solid rgba(212,161,42,.22);
  box-shadow:0 14px 26px rgba(2,10,8,.35);
}
.tng-surface-deep .code-card:hover{
  border-color:rgba(242,195,78,.5);
  box-shadow:0 18px 34px rgba(2,10,8,.5);
}
.tng-surface-deep .code-card-kicker{color:var(--tng-muted)}
.tng-surface-deep .code-card-value,.tng-surface-deep .code-card strong{
  color:var(--tng-gold-soft);
  text-shadow:0 0 22px rgba(242,195,78,.3);
}
.tng-surface-deep .code-card-note,.tng-surface-deep .code-strength-note{color:var(--tng-muted)}

.tng-surface-deep .chart{border-bottom:1px solid rgba(242,238,222,.14)}
.tng-surface-deep .bar{background:linear-gradient(180deg,var(--tng-gold-bright),var(--tng-gold))}
.tng-surface-deep .bar-wrap b{color:var(--tng-gold-soft)}
.tng-surface-deep .bar-wrap span{color:var(--tng-muted)}

.tng-surface-deep .detail-row{
  background:linear-gradient(180deg,rgba(16,54,44,.75),rgba(6,27,23,.85));
  border:1px solid rgba(212,161,42,.18);
  box-shadow:none;
}
.tng-surface-deep .detail-row span{color:var(--tng-muted)}
.tng-surface-deep .detail-row b{color:var(--tng-gold-soft)}

.tng-surface-deep .reading{
  background:linear-gradient(180deg,rgba(16,54,44,.7),rgba(6,27,23,.82));
  border:1px solid rgba(13,175,120,.25);
  color:var(--tng-ivory);
}

.tng-surface-deep .table-detail summary{color:var(--tng-gold-soft)}
.tng-surface-deep .table-detail-body{
  background:rgba(6,27,23,.6);
  border:1px solid rgba(242,238,222,.14);
  color:var(--tng-ivory);
}

/* Métodos numéricos — código activo hero + chart panels. */
.tng-surface-deep .method-hero-eyebrow{color:var(--tng-gold-bright)}
.tng-surface-deep .method-hero-code{
  color:var(--tng-gold-soft);
  text-shadow:0 0 26px rgba(242,195,78,.35);
}
.tng-surface-deep .method-hero-label{color:var(--tng-ivory)}
.tng-surface-deep .method-hero-stats{color:var(--tng-ivory)}
.tng-surface-deep .method-hero-meta,
.tng-surface-deep .muted{color:var(--tng-muted)}
.tng-surface-deep .saved-pill{
  background:rgba(13,175,120,.16);
  color:var(--tng-emerald-bright);
  border:1px solid rgba(13,175,120,.35);
}
.tng-surface-deep .tng-bar-label{fill:var(--tng-muted)}
.tng-surface-deep .tng-bar-value{fill:var(--tng-gold-bright)}
.tng-surface-deep .tng-network-edge{stroke:rgba(242,238,222,.45)}

/* Estadísticas — data tables and combination chips. */
.tng-surface-deep .statistics-table-wrap{
  background:linear-gradient(180deg,rgba(16,54,44,.7),rgba(6,27,23,.85));
  border:1px solid rgba(242,238,222,.14);
}
.tng-surface-deep .statistics-table th,
.tng-surface-deep .statistics-table td{border-bottom:1px solid rgba(242,238,222,.1)}
.tng-surface-deep .statistics-table th{
  background:rgba(3,16,13,.6);
  color:var(--tng-gold-soft);
}
.tng-surface-deep .statistics-table td{color:var(--tng-ivory)}
.tng-surface-deep .statistics-table tbody tr:hover td{background:rgba(242,195,78,.06)}

.tng-surface-deep .statistics-chip{
  background:linear-gradient(180deg,rgba(16,54,44,.85),rgba(6,27,23,.92));
  border:1px solid rgba(212,161,42,.25);
  color:var(--tng-gold-soft);
}
.tng-surface-deep .statistics-chip:hover{border-color:rgba(242,195,78,.5)}
.tng-surface-deep .statistics-combo-block h4{color:var(--tng-gold-soft)}

.tng-surface-deep .digit-badge{
  background:rgba(242,195,78,.14);
  border-color:rgba(242,195,78,.35);
  color:var(--tng-gold-soft);
}
.tng-surface-deep .table-root-badge{
  background:rgba(13,175,120,.14);
  border-color:rgba(13,175,120,.35);
  color:var(--tng-emerald-bright);
}
.tng-surface-deep .empty{color:var(--tng-muted)}

/* Nombre y destino — main-number cards and profile matrix. */
.tng-surface-deep .name-card{
  background:
    radial-gradient(circle at 100% 0%,rgba(212,161,42,.16),transparent 35%),
    linear-gradient(180deg,rgba(16,54,44,.9),rgba(6,27,23,.94));
  border:1px solid rgba(212,161,42,.2);
}
.tng-surface-deep .name-card-label{color:var(--tng-muted)}
.tng-surface-deep .name-card-value{
  color:var(--tng-gold-soft);
  text-shadow:0 0 22px rgba(242,195,78,.3);
}
.tng-surface-deep .name-matrix-card{
  background:linear-gradient(180deg,rgba(16,54,44,.85),rgba(6,27,23,.92));
  border:1px solid rgba(242,238,222,.14);
}
.tng-surface-deep .name-matrix-number{color:var(--tng-gold-soft)}
.tng-surface-deep .name-matrix-count{color:var(--tng-gold-bright)}
.tng-surface-deep .name-matrix-status{color:var(--tng-muted)}

/* Generic plain tables (comparator results, pyramid rows, reference tables). */
.tng-surface-deep th,.tng-surface-deep td{border-bottom:1px solid rgba(242,238,222,.12)}
.tng-surface-deep th{color:var(--tng-muted)}
.tng-surface-deep td{color:var(--tng-ivory)}
.tng-surface-deep td strong{color:var(--tng-gold-soft)}

/* .table-wrap (Laboratorio Matemático routines, etc.) ships a light,
   almost-white scroll-fade background by default (app.css). Inside a dark
   panel that left td text (--tng-ivory, near-white) sitting on a near-white
   surface — unreadable. Re-tone the wrap itself to match the panel instead
   of just recoloring the text. */
.tng-surface-deep .table-wrap{
  background:
    linear-gradient(90deg,var(--tng-night) 30%,transparent),
    linear-gradient(90deg,transparent,var(--tng-night) 70%) 100% 0,
    linear-gradient(90deg,rgba(0,0,0,.35),transparent),
    linear-gradient(90deg,transparent,rgba(0,0,0,.35)) 100% 0;
  background-repeat:no-repeat;
  background-color:var(--tng-night);
  background-size:32px 100%,32px 100%,12px 100%,12px 100%;
  background-attachment:local,local,scroll,scroll;
  border:1px solid rgba(242,238,222,.14);
  border-radius:12px;
}
.tng-surface-deep .table-wrap th{background:rgba(3,16,13,.55)}
.tng-surface-deep .table-wrap tbody tr:hover td{background:rgba(242,195,78,.06)}
.tng-surface-deep tr.math-lab-row-highlight{background:none}
.tng-surface-deep .math-lab-row-highlight td{
  background:rgba(242,195,78,.12);
  color:var(--tng-gold-soft);
  font-weight:800;
}

/* Form controls inside a fully-dark panel (Laboratorio Matemático). Kept as
   near-white "light islands" for legibility, rather than themed dark inputs —
   consistent with how buttons/badges already behave on dark surfaces. */
.tng-surface-deep .field label{color:var(--tng-ivory)}
.tng-surface-deep input,
.tng-surface-deep select,
.tng-surface-deep textarea{
  background:rgba(248,244,234,.96);
  color:var(--tng-panel);
  border-color:rgba(212,161,42,.3);
}
.tng-surface-deep .check-line{color:var(--tng-ivory)}

/* Historial — saved-analysis cards. */
.tng-surface-deep .history-item{
  background:
    radial-gradient(circle at 100% 0%,rgba(212,161,42,.14),transparent 34%),
    linear-gradient(180deg,rgba(16,54,44,.85),rgba(6,27,23,.92));
  border:1px solid rgba(212,161,42,.2);
}
.tng-surface-deep .history-item:hover{border-color:rgba(242,195,78,.45)}
.tng-surface-deep .history-kicker{color:var(--tng-muted)}
.tng-surface-deep .history-number{
  color:var(--tng-gold-soft);
  text-shadow:0 0 20px rgba(242,195,78,.3);
}
.tng-surface-deep .history-item p{color:var(--tng-muted)}

.tng-key-cards.tng-surface-deep{padding:14px}
.tng-surface-deep .tng-key-card{
  background:linear-gradient(180deg,rgba(16,54,44,.85),rgba(6,27,23,.92));
  border:1px solid rgba(212,161,42,.2);
}
.tng-surface-deep .tng-key-card small{color:var(--tng-muted)}
.tng-surface-deep .tng-key-card b{color:var(--tng-gold-soft)}

/* Alert / insight cards — keep the semantic left-border meaning (rojo=error,
   ámbar=observación, verde=verificado, azul=información) on a dark card. */
.tng-surface-deep .tng-alert-card{
  background:linear-gradient(180deg,rgba(16,54,44,.85),rgba(6,27,23,.92));
  border-color:rgba(242,238,222,.14);
}
.tng-surface-deep .tng-alert-critical{border-left-color:var(--tng-red)}
.tng-surface-deep .tng-alert-watch{border-left-color:var(--tng-orange)}
.tng-surface-deep .tng-alert-balanced{border-left-color:var(--tng-emerald-bright)}
.tng-surface-deep .tng-alert-info{border-left-color:var(--tng-blue)}
.tng-surface-deep .tng-alert-critical .tng-alert-badge{color:var(--tng-red)}
.tng-surface-deep .tng-alert-watch .tng-alert-badge{color:var(--tng-orange)}
.tng-surface-deep .tng-alert-balanced .tng-alert-badge{color:var(--tng-emerald-bright)}
.tng-surface-deep .tng-alert-info .tng-alert-badge{color:var(--tng-blue)}
.tng-surface-deep .tng-alert-time,
.tng-surface-deep .tng-alert-source{color:var(--tng-muted)}
.tng-surface-deep .tng-alert-title{color:var(--tng-ivory)}
.tng-surface-deep .tng-alert-description{color:var(--tng-muted)}