/* ============================================================
   PALETA INDUSTRIAL / CASSETTE-FUTURISM
   Fósforo verde (datos), ámbar táctico (selección/aviso),
   azul radar (información secundaria). Gris acorazado mate de chasis.
   Todo el "chrome" de la app deriva de aquí.
   ============================================================ */
:root {
  /* --- Chasis y superficies --- */
  --bg-color: #0a1118;        /* vacío del espacio */
  --bg-surface: #10171c;      /* panel de aluminio cepillado */
  --card-bg: #161d21;         /* módulo atornillado */
  --card-bg-elevated: #1e2529;
  --border-color: #2c3335;    /* gris acorazado mate */
  --border-strong: #3a4348;
  --border-focus: #4af626;

  /* --- Emisión de pantalla --- */
  --phosphor: #4af626;        /* verde fósforo principal */
  --phosphor-dim: #2f9e28;
  --phosphor-deep: #171e23;
  --amber: #ffb000;           /* ámbar táctico */
  --amber-dim: #b57d00;
  --amber-deep: #10171c;
  --radar: #4a90e2;           /* azul radar */
  --radar-deep: #12212e;

  /* --- Texto --- */
  --text-main: #93a39a;
  --text-bright: #e6f3e8;
  --text-dim: #6b7a72;

  /* --- Acentos y estados --- */
  --accent-color: #4af626;
  --accent-hover: #8cff6b;
  --accent-purple: #4a90e2;
  --badge-bg: #181f23;
  --retro-color: #ff5a3d;
  --direct-color: #4af626;
  --warning-color: #ffb000;

  /* --- Tipografía técnica --- */
  --font-mono: 'Share Tech Mono', 'Cascadia Mono', ui-monospace, Consolas, 'Liberation Mono', monospace;
  --font-tech: 'Bahnschrift', 'Bahnschrift SemiCondensed', 'DIN Alternate', 'Segoe UI', Tahoma, sans-serif;
  --font-display: 'VT323', 'Share Tech Mono', 'Cascadia Mono', monospace;

  /* --- Iluminación y relieve --- */
  --focus-ring: 0 0 0 3px rgba(74, 246, 38, 0.45);
  --glow-phosphor: 0 0 6px rgba(74, 246, 38, 0.55), 0 0 14px rgba(74, 246, 38, 0.18);
  --glow-amber: 0 0 6px rgba(255, 176, 0, 0.55), 0 0 14px rgba(255, 176, 0, 0.18);
  --bevel-out: inset 0 1px 0 rgba(242, 251, 243, 0.06), inset 0 -2px 3px rgba(0, 0, 0, 0.65);
  --bevel-in: inset 0 2px 4px rgba(0, 0, 0, 0.7), inset 0 -1px 0 rgba(242, 251, 243, 0.04);
  --shadow-machine: 0 2px 0 #05080a, 0 8px 18px rgba(0, 0, 0, 0.55);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Escala tipográfica global: base 112.5% (~18px) para textos más legibles */
html {
  font-size: 112.5%;
}

/* Scrollbar moderna y discreta */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-surface);
}

::-webkit-scrollbar-thumb {
  background: #333c40;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4a5459;
}

/* Indicadores de foco accesibles para navegación por teclado */
:focus-visible {
  outline: 2px solid var(--accent-color) !important;
  outline-offset: 2px !important;
  box-shadow: var(--focus-ring);
}

/* --------------------------------------------------------------------------
   MOVIMIENTO REDUCIDO — SÓLO SI EL USUARIO LO PIDE
   --------------------------------------------------------------------------
   Antes esto colgaba de `@media (prefers-reduced-motion: reduce)`. El problema
   es que Brave (y algún otro navegador) pone esa media query en `reduce` POR
   DEFECTO, como defensa antifingerprinting, sin que nadie lo haya pedido.
   Comprobado con un perfil recién creado de Brave 155.

   Consecuencia: en Brave esta regla mataba con `!important` TODAS las
   animaciones y transiciones de la app, y encima en silencio. El encendido del
   tubo corría a 0,01 ms: negro y de golpe la rueda, sin punto, sin línea, sin
   parpadeo y sin distorsión.

   La preferencia se sigue consultando, pero ya no manda. Manda el interruptor
   explícito, que `ui_motion.js` traduce a esta clase en <html>:

       AstroMotion.setReduced(true)     // apagarlo todo, y se recuerda
       AstroMotion.setReduced(false)    // volver a encenderlo (por defecto)
   -------------------------------------------------------------------------- */
html.astro-reduce-motion *,
html.astro-reduce-motion *::before,
html.astro-reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

body {
  font-family: var(--font-tech);
  background-color: var(--bg-color);
  color: var(--text-main);
  padding: 10px 14px;
  margin: 0;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
}

/* ========================================================
   OPTIMIZACIONES DE RENDIMIENTO GRÁFICO (GPU ACCELERATION)
   ======================================================== */
/* Acelerar composición por GPU en lienzos SVG y animaciones */
#ephemeris-wheel-svg,
#astro-wheel-svg,
#transits-wheel-svg,
#eph-timeline-svg,
.saved-wheel-svg,
.wheel-wrapper {
  transform: translateZ(0);
  will-change: transform;
}

/* Optimizar renderizado vectorial en SVG dinámicos */
#ephemeris-wheel-svg path,
#ephemeris-wheel-svg line,
#ephemeris-wheel-svg circle,
#astro-wheel-svg path,
#astro-wheel-svg line,
#astro-wheel-svg circle,
#eph-timeline-svg path,
#eph-timeline-svg line {
  shape-rendering: geometricPrecision;
}

#ephemeris-wheel-svg text,
#astro-wheel-svg text,
#eph-timeline-svg text {
  text-rendering: optimizeSpeed;
}

/* Aislamiento de capas (CSS Containment) para evitar reflows y repaints masivos */
.card,
.transit-timeline-section,
.historical-matches-panel,
.controls-panel,
.results-panel {
  contain: layout style;
}

/* Renderizado diferido para listas largas fuera de pantalla */
.historical-events-grid,
.saved-cards-container.view-grid,
.potentials-bars-grid {
  content-visibility: auto;
  contain-intrinsic-size: 0 450px;
}

.app-container {
  max-width: 1820px;
  margin: 0 auto;
  width: 100%;
}

/* Header de la Aplicación Pro */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 12px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.brand-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  font-size: 1.8rem;
  line-height: 1;
}

.brand-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-bright);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.brand-badge {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: #2e8b3d26;
  border: 1px solid #4af62655;
  color: #4af626;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.subtitle {
  font-size: 0.8rem;
  color: var(--text-dim);
  font-weight: 400;
}

/* Tabs de Navegación */
.main-nav-tabs {
  display: flex;
  gap: 4px;
  background: #0c1216;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.nav-tab {
  background: transparent;
  color: var(--text-main);
  border: 1px solid transparent;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.nav-tab:hover {
  color: var(--text-bright);
  background: #1e2529;
}

.nav-tab.active {
  background: var(--card-bg-elevated);
  color: var(--text-bright);
  border-color: #4af62677;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.tab-icon {
  font-size: 0.95rem;
}

.header-quick-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Cabecera compacta */
.app-header {
  padding: 4px 12px;
  gap: 12px;
  margin-bottom: 8px;
  border-radius: 8px;
}
.brand-container { gap: 8px; }
.brand-logo { font-size: 1.3rem; }
.brand-title { font-size: 1rem; margin-bottom: 0; }
.main-nav-tabs { padding: 2px; }
.nav-tab { padding: 4px 10px; font-size: 0.82rem; }
.header-quick-actions .btn-action { padding: 4px 10px; font-size: 0.8rem; }
.app-container .top-bar { margin-bottom: 8px; padding-top: 8px; padding-bottom: 8px; }
.view-header-title h2 { margin-bottom: 0; }

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.view-header-title h2 {
  font-size: 1.15rem;
  margin-bottom: 2px;
}

.view-hint {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.name-field {
  flex: 1;
  min-width: 250px;
}

.name-field label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.name-field input {
  width: 100%;
  padding: 9px 12px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-bright);
  font-size: 1rem;
  font-weight: 500;
}

.name-field input:focus {
  outline: none;
  border-color: var(--border-focus);
}

.gender-field {
  min-width: 120px;
}

.gender-field label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gender-field select {
  width: 100%;
  padding: 9px 12px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-bright);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}

.gender-field select:focus {
  outline: none;
  border-color: var(--border-focus);
}

.deceased-field {
  min-width: 140px;
}

/* «Conocimiento»: marcador declarativo (la conoces o no), junto a género y
   estado vital en la barra superior de la carta. */
.known-field {
  min-width: 210px;
}

.deceased-field label,
.known-field label,
.death-date-field > label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.deceased-check-row,
.known-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-bright);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0;
}

.deceased-check-row input[type="checkbox"],
.known-check-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #8c9a90;
  cursor: pointer;
}

.known-check-row input[type="checkbox"]:checked {
  accent-color: #4af626;
}

.death-date-field {
  min-width: 280px;
}

.death-date-pickers {
  display: flex;
  gap: 6px;
  align-items: center;
}

.death-date-pickers input,
.death-date-pickers select {
  padding: 9px 10px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-bright);
  font-size: 0.95rem;
  font-weight: 500;
}

.death-date-pickers input[type="number"] {
  width: 78px;
}

.death-date-pickers select {
  min-width: 120px;
  cursor: pointer;
}

.death-date-pickers input:focus,
.death-date-pickers select:focus {
  outline: none;
  border-color: var(--border-focus);
}

.deceased-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  user-select: none;
  background: rgba(140, 154, 144, 0.16);
  color: #c6d4c9;
  border: 1px solid rgba(140, 154, 144, 0.4);
}

/* Marcador «conocido por mí»: verde cuando la persona es alguien que conoces
   personalmente, gris cuando es un desconocido (famoso, caso de estudio o carta
   importada). Es el mismo lenguaje visual que .deceased-tag. */
.known-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  user-select: none;
}

.known-tag.is-known {
  background: rgba(74, 246, 38, 0.14);
  color: #8ff06b;
  border: 1px solid rgba(74, 246, 38, 0.38);
}

.known-tag.is-unknown {
  background: rgba(140, 154, 144, 0.16);
  color: #8c9a90;
  border: 1px solid rgba(140, 154, 144, 0.4);
}

.chart-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-action {
  padding: 8px 14px;
  background-color: var(--card-bg-elevated);
  color: var(--text-bright);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
}

.btn-action:hover {
  background-color: #171e23;
  border-color: var(--accent-color);
  color: #fff;
}

.btn-save, .btn-success {
  background-color: #2a8f3c;
  border-color: #36b84a;
  color: #fff;
}

.btn-save:hover, .btn-success:hover {
  background-color: #36b84a;
  border-color: #4af626;
}

.btn-accent {
  background-color: #2e8b3d;
  border-color: #4af626;
  color: #fff;
}

.btn-accent:hover {
  background-color: #4af626;
}

.btn-file-label {
  cursor: pointer;
}

/* Panel de cartas guardadas */
.saved-charts-panel {
  margin-bottom: 14px;
}

.saved-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}

.saved-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.saved-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.saved-search-box input {
  padding: 6px 28px 6px 12px;
  background-color: #1a2126;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-bright);
  font-size: 0.85rem;
  width: 220px;
  transition: all 0.2s ease;
}

.saved-search-box input:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
  width: 250px;
}

.btn-clear-search {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  color: #8c9a90;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.btn-clear-search:hover {
  color: #e6f3e8;
}

.saved-sort-box, .saved-filter-box {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #8c9a90;
}

.saved-select {
  background-color: #1a2126;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-bright);
  padding: 5px 8px;
  font-size: 0.82rem;
  cursor: pointer;
}

.saved-select:focus {
  outline: none;
  border-color: #4a90e2;
}

.saved-view-toggle,
#saved-known-filter {
  display: flex;
  background: #1a2126;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}

.btn-view-mode {
  background: transparent;
  border: none;
  color: #8c9a90;
  padding: 5px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
  font-weight: 500;
}

.btn-view-mode:hover {
  color: #e6f3e8;
  background: rgba(242, 251, 243, 0.05);
}

.btn-view-mode.active {
  background: #4a90e2;
  color: #fff;
  font-weight: 600;
}

/* Filtro por hora de nacimiento: se distingue del conmutador de vistas (azul en
   vez de violeta) para que no se confundan dos grupos de botones pegados. */
#saved-time-filter .btn-view-mode.active {
  background: #2e8b3d;
  color: #fff;
  font-weight: 600;
}

/* Filtro por conocimiento (conocidas / desconocidas): color propio (ámbar) para
   distinguirlo a simple vista del conmutador de vistas y del filtro por hora. */
#saved-known-filter .btn-view-mode.active {
  background: #b06a1f;
  color: #fff;
  font-weight: 600;
}

/* Un botón neutralizado por el otro (p. ej. «Ocultar sin hora» mientras está
   activo «Solo sin hora»): sigue pulsable, pero se ve apagado y con borde
   discontinuo para que quede claro que su filtro no se está aplicando. */
#saved-time-filter .btn-view-mode.is-overridden {
  opacity: 0.55;
  color: #6e7c74;
  box-shadow: inset 0 0 0 1px #2c3335;
  background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(242, 251, 243, 0.04) 4px, rgba(242, 251, 243, 0.04) 8px);
}

/* Contenedores según modo de vista */
.saved-cards-container.view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

/* Modo Lista Compacta */
.saved-cards-container.view-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.saved-cards-container.view-list .saved-card {
  flex-direction: row;
  align-items: center;
  padding: 10px 14px;
  gap: 14px;
}

.saved-cards-container.view-list .saved-card-header {
  flex: 1;
  min-width: 0;
}

.saved-cards-container.view-list .saved-card-details {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.saved-cards-container.view-list .saved-card-actions {
  margin-top: 0;
  flex-shrink: 0;
}

/* Modo Rueda Astral */
.saved-cards-container.view-wheel {
  display: block;
  width: 100%;
}

.saved-wheel-view-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.saved-wheel-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
  max-width: 1200px;
  padding: 12px;
}

@media (max-width: 950px) {
  .saved-wheel-layout {
    flex-direction: column;
  }
}

.saved-wheel-canvas-container {
  flex: 1 1 580px;
  max-width: 680px;
  min-width: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.saved-wheel-svg {
  width: 100%;
  height: auto;
  max-height: 680px;
}

.wheel-zodiac-slice {
  transition: fill 0.2s ease, filter 0.2s ease;
}

.wheel-zodiac-slice:hover {
  fill: #1e2529 !important;
  filter: brightness(1.2);
}

.wheel-chart-node {
  cursor: pointer;
}

.wheel-chart-node .node-circle-main,
.wheel-chart-node .node-halo {
  transition: r 0.2s ease, stroke-width 0.2s ease, filter 0.2s ease;
}

.wheel-chart-node:hover .node-circle-main {
  filter: brightness(1.2);
}

.wheel-chart-node.el-fire:hover .node-circle-main {
  stroke: #ff8a72;
  filter: drop-shadow(0 0 10px rgba(255, 90, 61, 0.7));
}

.wheel-chart-node.el-earth:hover .node-circle-main {
  stroke: #8cff6b;
  filter: drop-shadow(0 0 10px rgba(54, 184, 74, 0.7));
}

.wheel-chart-node.el-air:hover .node-circle-main {
  stroke: #8cff6b;
  filter: drop-shadow(0 0 10px rgba(74, 246, 38, 0.7));
}

.wheel-chart-node.el-water:hover .node-circle-main {
  stroke: #5fd3d8;
  filter: drop-shadow(0 0 10px rgba(95, 211, 216, 0.7));
}

.wheel-chart-node.active .node-circle-main {
  stroke: #4a90e2 !important;
  stroke-width: 2.8;
  filter: drop-shadow(0 0 12px rgba(74, 144, 226, 0.85));
}

.wheel-node-name {
  pointer-events: none;
  text-shadow: 0 1px 4px #000;
}

.solar-aspect-line {
  transition: stroke-opacity 0.25s ease, stroke-width 0.25s ease, filter 0.25s ease;
  pointer-events: stroke;
}

.solar-aspect-line:hover {
  stroke-opacity: 1 !important;
  stroke-width: 3.5px !important;
  cursor: pointer;
  filter: drop-shadow(0 0 6px currentColor);
}

.saved-wheel-info-card {
  flex: 0 0 340px;
  max-width: 380px;
  background: var(--card-bg, #1a2126);
  border: 1px solid var(--border-color, #2c3335);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.saved-wheel-info-placeholder {
  text-align: center;
  color: #8c9a90;
  padding: 30px 10px;
}

.saved-wheel-info-placeholder h4 {
  color: #dce9df;
  margin-bottom: 8px;
}

.saved-wheel-detail-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.saved-wheel-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.detail-name-wrap {
  flex: 1;
  min-width: 0;
}

.detail-name {
  margin: 0;
  font-size: 1.15rem;
  color: #e6f3e8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-date {
  font-size: 0.8rem;
  color: #8c9a90;
  display: block;
  margin-top: 2px;
}

.detail-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.detail-desc {
  font-size: 0.86rem;
  line-height: 1.45;
  color: #c6d4c9;
  background: rgba(0, 0, 0, 0.2);
  padding: 10px 12px;
  border-radius: 6px;
  border-left: 3px solid #4a90e2;
  margin: 0;
}

.detail-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.detail-actions-row button {
  flex: 1;
  padding: 7px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
}

/* Modo Tabla Detallada */
.saved-table-wrapper {
  overflow-x: auto;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
}

.saved-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  text-align: left;
}

.saved-table th {
  background: #1a2126;
  color: #8c9a90;
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.saved-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(242, 251, 243, 0.05);
  vertical-align: middle;
}

.saved-table tr:hover td {
  background-color: rgba(74, 144, 226, 0.08);
}

.saved-table tr.active td {
  background-color: rgba(74, 144, 226, 0.15);
}

.table-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.table-actions {
  display: flex;
  gap: 6px;
}

.saved-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.saved-card:hover {
  border-color: #4a90e2;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(74, 144, 226, 0.22);
}

.saved-card.active {
  border-color: #4a90e2;
  background: linear-gradient(145deg, #171e23, #10171c);
  box-shadow: 0 0 0 1px #4a90e2, 0 6px 20px rgba(74, 144, 226, 0.25);
}

.saved-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Insignia Solar */
.saved-card-sun-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease;
  border: 1px solid rgba(242, 251, 243, 0.15);
}

.saved-card:hover .saved-card-sun-badge {
  transform: scale(1.06) rotate(2deg);
}

.saved-card-sun-badge.fire {
  background: linear-gradient(135deg, rgba(255, 90, 61, 0.25), rgba(255, 176, 0, 0.25));
  border-color: rgba(255, 90, 61, 0.5);
  color: #ff8a72;
}

.saved-card-sun-badge.earth {
  background: linear-gradient(135deg, rgba(255, 176, 0, 0.25), rgba(54, 184, 74, 0.25));
  border-color: rgba(255, 176, 0, 0.5);
  color: #ffb000;
}

.saved-card-sun-badge.air {
  background: linear-gradient(135deg, rgba(74, 246, 38, 0.25), rgba(74, 144, 226, 0.25));
  border-color: rgba(74, 246, 38, 0.5);
  color: #8cff6b;
}

.saved-card-sun-badge.water {
  background: linear-gradient(135deg, rgba(74, 246, 38, 0.25), rgba(74, 246, 38, 0.25));
  border-color: rgba(74, 246, 38, 0.5);
  color: #4af626;
}

.saved-card-sun-badge .badge-symbol {
  font-size: 1.5rem;
  line-height: 1;
  font-weight: bold;
}

.saved-card-sun-badge .badge-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
  opacity: 0.9;
}

.saved-card-meta {
  flex: 1;
  min-width: 0;
}

.saved-card-title {
  font-weight: 600;
  color: #e6f3e8;
  font-size: 1.05rem;
  margin-bottom: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 6px;
}

.saved-card-date {
  font-size: 0.8rem;
  color: #8c9a90;
}

.saved-card-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-badge {
  font-size: 0.78rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 12px;
  background-color: rgba(110, 124, 116, 0.15);
  border: 1px solid rgba(110, 124, 116, 0.25);
  color: #c6d4c9;
}

.tag-badge.sun-tag {
  background-color: rgba(255, 176, 0, 0.12);
  border-color: rgba(255, 176, 0, 0.35);
  color: #ffb000;
}

.tag-badge.asc-tag {
  background-color: rgba(74, 144, 226, 0.12);
  border-color: rgba(74, 144, 226, 0.35);
  color: #8fc0f0;
}

.btn-delete-card {
  background: none;
  border: none;
  color: #8c9a90;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s ease, transform 0.15s ease;
}

.btn-delete-card:hover {
  color: #ff5a3d;
  transform: scale(1.2);
}

.empty-saved-msg {
  color: #8c9a90;
  font-size: 0.9rem;
  font-style: italic;
  padding: 8px 0;
}

@media (max-width: 950px) {
  .main-layout {
    grid-template-columns: 1fr;
  }
}

/* Layout del navegador astral: la rueda manda.
   Una sola columna con la rueda grande y centrada y los controles debajo
   (antes eran 2 columnas fijas de 400px que dejaban la rueda pequeña). */
#ephemeris-view .main-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

#ephemeris-view .controls-panel {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  min-width: 0;
}

#ephemeris-view .results-panel {
  max-width: 100%;
  min-width: 0;
}

#ephemeris-view .controls-panel {
  max-height: none;
  overflow-y: visible;
  padding: 18px;
}

#ephemeris-view .results-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px;
  min-height: 0;
  width: 100%;
}

/* La rueda ocupa el máximo ancho disponible sin obligar a hacer scroll, con el
   alto acotado: en pantallas anchas queda un rectángulo (no un cuadrado), de
   modo que el zoom con la rueda del ratón llena toda la sección. */
#ephemeris-view .wheel-wrapper {
  width: 100%;
  max-width: 100%;
  max-height: min(78vh, 860px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

h2 {
  font-size: 1.2rem;
  color: var(--text-bright);
  margin-bottom: 12px;
}

/* Selector amigable de fecha y hora */
.date-pickers-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.1fr 1fr 1fr 1.6fr;
  gap: 10px;
  margin-bottom: 10px;
}

.field-item label {
  display: block;
  font-size: 0.8rem;
  color: #8c9a90;
  margin-bottom: 4px;
}

.field-item input,
.field-item select {
  width: 100%;
  padding: 8px 10px;
  background-color: #10171c;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-bright);
  font-size: 0.95rem;
}

.field-item input:focus,
.field-item select:focus {
  outline: none;
  border-color: var(--accent-color);
}

.quick-dates {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.btn-chip {
  background-color: #232a2e;
  color: #c6d4c9;
  border: 1px solid var(--border-color);
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-chip:hover {
  background-color: #2c3335;
  color: #e6f3e8;
  border-color: var(--accent-color);
}

.hint {
  font-size: 0.85rem;
  color: #8c9a90;
  margin-bottom: 6px;
}

/* Contenedor del Mapa */
.location-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.location-summary-text strong {
  color: var(--accent-color);
}

.btn-toggle-map {
  white-space: nowrap;
  cursor: pointer;
}

#map-collapsible {
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.22s ease;
  max-height: 2000px;
  opacity: 1;
}

#map-collapsible.map-hidden {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

#map {
  width: 100%;
  height: 350px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: #0c1216;
  margin-bottom: 12px;
  z-index: 1;
}

/* Chincheta */
.custom-pin {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pin-marker {
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
  cursor: grab;
  user-select: none;
}

.pin-marker:active {
  cursor: grabbing;
}

.location-search-container {
  position: relative;
  margin-bottom: 10px;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrapper input {
  width: 100%;
  padding: 10px 36px 10px 14px;
  background-color: #10171c;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-bright);
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input-wrapper input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

.btn-clear-search {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: #8c9a90;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.btn-clear-search:hover {
  color: #e6f3e8;
}

.search-suggestions-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background-color: #1a2126;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.search-suggestion-item {
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(44, 51, 53, 0.5);
  font-size: 0.9rem;
  transition: background-color 0.15s;
}

.search-suggestion-item:last-child {
  border-bottom: none;
}

.search-suggestion-item:hover,
.search-suggestion-item.highlighted {
  background-color: #232a2e;
  color: var(--text-bright);
}

.search-suggestion-item .item-type {
  font-size: 0.75rem;
  color: #8c9a90;
  background-color: #10171c;
  padding: 2px 6px;
  border-radius: 4px;
}

.search-suggestion-item .item-detail {
  display: block;
  font-size: 0.72rem;
  color: #6e7c74;
  margin-top: 2px;
}

/* Nota de zona horaria detectada */
.tz-auto-note {
  margin-top: 6px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #8c9a90;
  background-color: rgba(16, 23, 28, 0.6);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px 7px;
}

.tz-auto-note.tz-auto {
  border-color: rgba(74, 246, 38, 0.35);
}

.tz-auto-note.tz-manual {
  border-color: rgba(255, 138, 61, 0.45);
  color: #ff8a3d;
}

.tz-auto-note a {
  color: var(--accent-color);
  text-decoration: underline;
}

.coords-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background-color: var(--bg-surface);
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  font-size: 0.86rem;
  margin-bottom: 12px;
  font-family: var(--font-mono);
}

.coords-display strong {
  color: var(--accent-color);
  font-weight: 600;
}

.manual-inputs {
  display: flex;
  gap: 12px;
}

.manual-inputs .coord-field {
  flex: 1;
}

.manual-inputs label {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 4px;
  display: block;
  font-weight: 500;
}

.manual-inputs input {
  width: 100%;
  padding: 7px 10px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.manual-inputs input:focus {
  outline: none;
  border-color: var(--border-focus);
}

.results-header {
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}

.key-points {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.badge {
  background-color: var(--badge-bg);
  border: 1px solid var(--border-color);
  color: var(--text-bright);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#badge-asc, #eph-badge-asc {
  border-color: #4af62666;
  color: #8cff6b;
}

#badge-mc, #eph-badge-mc {
  border-color: #4a90e266;
  color: #8fc0f0;
}

.table-responsive {
  overflow-x: auto;
}

.astro-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.astro-table th, 
.astro-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.astro-table th {
  color: var(--text-dim);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  background: var(--bg-surface);
  position: sticky;
  top: 0;
}

.astro-table td {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.astro-table td strong {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-bright);
}

.astro-table tr:hover {
  background-color: #10171c;
}

.status-retro {
  color: var(--retro-color);
  font-weight: 700;
  background: #ff5a3d15;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #ff5a3d33;
  display: inline-block;
  font-size: 0.78rem;
}

.status-direct {
  color: var(--direct-color);
  font-weight: 600;
  background: #4af62615;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #4af62633;
  display: inline-block;
  font-size: 0.78rem;
}

/* ========================================================
   MODAL DE CARTA NATAL (RUEDA Y MATRIZ DE ASPECTOS)
   ======================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(13, 20, 26, 0.85);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Scroll lock del fondo mientras hay un modal abierto */
html.modal-open,
body.modal-open {
  overflow: hidden !important;
}
html.modal-open {
  padding-right: var(--scrollbar-comp, 0px);
}
.modal-overlay {
  overscroll-behavior: contain;
}

/* Gestor de ventanas: el modal inferior no se pinta y el apilado no usa blur */
.modal-overlay.modal-suspended {
  visibility: hidden;
  content-visibility: hidden;
  pointer-events: none;
}
.modal-overlay.modal-stacked {
  backdrop-filter: none;
  background-color: rgba(13, 20, 26, 0.95);
}

.modal-container {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  width: 95vw;
  max-width: 1600px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
}

/* Carta natal: pantalla completa, no ventana */
#chart-modal {
  padding: 0;
  background-color: var(--card-bg);
  backdrop-filter: none;
}
#chart-modal > .modal-container {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
#chart-modal .modal-body {
  flex: 1;
  min-height: 0;
}

/* Pestañas de la carta: todas visibles, se reparten el ancho y recortan el texto */
#chart-modal .modal-nav-bar { padding: 4px 8px; }
#chart-modal .modal-tabs {
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 3px;
}
#chart-modal .modal-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 6px;
  font-size: 0.8rem;
  justify-content: center;
}
#chart-modal .modal-tab > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-color);
  background-color: #10171c;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-bright);
}

.modal-subtitle {
  font-size: 0.85rem;
  color: #8c9a90;
  margin-top: 4px;
}

.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-close-modal {
  background: none;
  border: none;
  color: #8c9a90;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s;
}

.btn-close-modal:hover {
  color: #ff5a3d;
}

.modal-body {
  padding: 10px 14px;
  overflow-y: auto;
  flex: 1;
}

/* Barra de pestañas dentro de la carta modal */
.modal-nav-bar {
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  padding: 6px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.modal-tab {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid transparent;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.modal-tab:hover {
  color: var(--text-bright);
  background: #10171c;
}

.modal-tab.active {
  background: var(--card-bg-elevated);
  color: var(--text-bright);
  border-color: #4af62677;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.modal-view-panel {
  display: none;
  animation: fadeInModalView 0.15s ease;
}

.modal-view-panel.active {
  display: block;
}

@keyframes fadeInModalView {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sub-pestañas internas (Estadísticas y Tránsitos).
   Independientes de .modal-tab / .modal-view-panel para que el cambio de
   pestaña principal no oculte los subpaneles entre sí. */
.stats-subtabs,
.transit-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  margin-bottom: 18px;
  background: #10171c;
  border: 1px solid #2c3335;
  border-radius: 10px;
}

.stats-subtab,
.transit-subtab {
  background: transparent;
  color: #8c9a90;
  border: 1px solid transparent;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.stats-subtab:hover,
.transit-subtab:hover {
  color: var(--text-bright);
  background: #10171c;
}

.stats-subtab.active,
.transit-subtab.active {
  background: var(--card-bg-elevated);
  color: var(--text-bright);
  border-color: #4af62677;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.stats-subpanel,
.transit-subpanel {
  display: none;
  animation: fadeInModalView 0.15s ease;
}

.stats-subpanel.active,
.transit-subpanel.active {
  display: block;
}

/* Separador de secciones dentro de una misma sub-pestaña: agrupa varios
   bloques bajo un mismo tema (p. ej. módulos + detalle de honestidad). */
.stats-subhead {
  font-size: 0.82rem;
  font-weight: 700;
  color: #8c9a90;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 16px 0 8px 0;
  padding-top: 10px;
  border-top: 1px solid #232a2e;
}

@media (max-width: 640px) {
  .stats-subtab,
  .transit-subtab {
    flex: 1 1 auto;
    justify-content: center;
    font-size: 0.78rem;
    padding: 6px 9px;
  }
}

.chart-view-grid-two-col {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 1050px) {
  .chart-view-grid-two-col {
    grid-template-columns: 1fr;
  }
}

.transit-badges-indicator {
  display: flex;
  gap: 8px;
  align-items: center;
}

.transit-pill-natal {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(74, 246, 38, 0.15);
  border: 1px solid rgba(74, 246, 38, 0.35);
  color: #8cff6b;
}

.transit-pill-sky {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 138, 61, 0.15);
  border: 1px solid rgba(255, 138, 61, 0.35);
  color: #ff8a3d;
}

.transit-aspect-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  transition: all 0.15s ease;
}

.transit-aspect-card:hover {
  border-color: #4af626;
  background: #10171c;
}

.aspects-toggles.compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
}

/* Rueda */
.wheel-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #10171c;
}

/* Fecha debajo de la rueda */
.wheel-date-display {
  background-color: #1a2126;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 20px;
  margin-top: 16px;
  text-align: center;
  width: 100%;
  max-width: 100%;
}

.wheel-date-display .date-display-label {
  font-size: 0.85rem;
  color: #8c9a90;
  margin-bottom: 6px;
  font-weight: 600;
}

.wheel-date-display .date-display-value {
  font-size: 1.2rem;
  color: var(--accent-color);
  font-weight: bold;
  font-family: 'Courier New', monospace;
}

/* Sección de controles */
.controls-section {
  background-color: #10171c;
  display: flex;
  flex-direction: column;
}

/* Panel único de la rueda natal (#mview-wheel): la rueda al centro y sus
   controles repartidos a su alrededor —lo que se dibuja, a la izquierda; los
   aspectos y la limpieza del centro, a la derecha— dentro de la misma tarjeta. */
.wheel-panel {
  background-color: #10171c;
}

.wheel-stage {
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr) minmax(190px, 270px);
  grid-template-areas: "controls-left wheel-center controls-right";
  gap: 16px;
  align-items: start;
  max-width: 1340px;
  margin: 0 auto;
}

.wheel-controls-col {
  display: flex;
  flex-direction: column;
}

.wheel-controls-left { grid-area: controls-left; }
.wheel-controls-right { grid-area: controls-right; }

.wheel-center {
  grid-area: wheel-center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* La rueda manda: el visor usa todo el ancho de la columna central (hasta el
     ancho de la rejilla) en vez de quedarse en 660px con el bisel vacío. */
  max-width: min(100%, 760px);
  justify-self: center;
}

/* En las columnas laterales, la rejilla de planetas se aprieta a dos por fila */
.wheel-controls-col .aspects-toggles.compact-grid {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}

/* Sin sitio para las tres columnas: primero la rueda y los controles debajo */
@media (max-width: 1200px) {
  .wheel-stage {
    grid-template-columns: 1fr;
    grid-template-areas:
      "wheel-center"
      "controls-left"
      "controls-right";
  }
  .wheel-center {
    max-width: 620px;
  }
  .wheel-controls-col .aspects-toggles.compact-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* Control de hora al lado de la rueda */
/* Navegación de fecha */
.wheel-date-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.wheel-date-nav .btn-chip {
  flex: 1;
  min-width: 80px;
  text-align: center;
}

/* Controles de aspectos */
.aspects-controls {
  width: 100%;
  background-color: #1a2126;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.aspects-controls h4 {
  font-size: 0.85rem;
  color: var(--text-bright);
  margin-bottom: 8px;
}

.aspects-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.aspect-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-main);
  cursor: pointer;
  user-select: none;
}

.aspect-toggle input[type="checkbox"] {
  accent-color: var(--accent-color);
  cursor: pointer;
}

.aspect-toggle span {
  font-weight: 500;
}

.wheel-header {
  width: 100%;
  margin-bottom: 12px;
}

.wheel-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.78rem;
  color: #8c9a90;
  margin-top: 6px;
}

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}

/* Visor de la rueda de TRÁNSITOS (bicircular) y valor por defecto: rectangular
   a propósito, porque el SVG hereda la forma del visor y al ampliar con la
   rueda del ratón el dibujo llena TODA la sección en vez de quedar recortado
   dentro de un cuadrado centrado. La rueda natal (pestaña 1 «Rueda Zodiacal»)
   lo anula unas líneas más abajo para ser cuadrada de verdad. */
.wheel-wrapper {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  max-height: min(calc(100vh - 240px), 560px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Visor de la RUEDA NATAL (pestaña 1): cuadrado de verdad, no apaisado.
   El ancho lo manda la columna central, pero el alto se recortaba a 560px, así
   que el visor quedaba más ancho que alto y el círculo dejaba franjas vacías a
   cada lado. Sin tope de alto, el visor crece hacia abajo hasta igualar su
   ancho: la rueda llena el visor de lado a lado y gana tamaño. */
#mview-wheel .wheel-wrapper {
  max-height: none;
}

/* Control de zoom de la rueda (esquina: el círculo no llega ahí) */
.wheel-zoom-hud {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  background: rgba(16, 23, 28, 0.85);
  border: 1px solid #2c3335;
  border-radius: 999px;
  opacity: 0.5;
  transition: opacity 0.16s ease, border-color 0.16s ease;
  user-select: none;
}

.wheel-wrapper:hover .wheel-zoom-hud,
.wheel-zoom-hud:hover,
.wheel-zoom-hud:focus-within {
  opacity: 1;
  border-color: #4a5459;
}

.wheel-zoom-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1a2126;
  color: #c6d4c9;
  border: 1px solid #2c3335;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.wheel-zoom-btn:hover:not(:disabled) {
  background: #232a2e;
  color: #dce9df;
  border-color: #4af626;
}

.wheel-zoom-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.wheel-zoom-level {
  min-width: 34px;
  text-align: center;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #8c9a90;
}

#astro-wheel-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Matriz de aspectos */
.aspect-matrix-wrapper {
  max-width: 100%;
  overflow-x: auto;
  margin-top: 8px;
}

.aspect-matrix {
  border-collapse: collapse;
  font-size: 0.82rem;
  text-align: center;
  width: auto;
  table-layout: fixed;
  margin: 0 auto;
}

.aspect-matrix th, 
.aspect-matrix td {
  border: 1px solid #2c3335;
  width: 46px;
  min-width: 46px;
  max-width: 46px;
  height: 46px;
  box-sizing: border-box;
  padding: 2px;
  vertical-align: middle;
  overflow: hidden;
}

.aspect-matrix th {
  background-color: #1a2126;
  color: #c6d4c9;
  font-weight: 600;
  font-size: 0.85rem;
}

.aspect-matrix td.empty-cell {
  background-color: #0a1118;
}

.aspect-matrix td.aspect-cell {
  cursor: pointer;
  transition: transform 0.15s, background-color 0.15s;
}

.aspect-matrix td.aspect-cell:hover {
  transform: scale(1.1);
  background-color: rgba(242, 251, 243, 0.08);
  z-index: 2;
  position: relative;
}

.aspect-sym {
  font-size: 1.15rem;
  font-weight: bold;
  display: block;
  line-height: 1;
}

.aspect-orb {
  font-size: 0.65rem;
  color: #8c9a90;
  display: block;
}

/* Colores de aspectos */
.asp-conjunction { color: #ffb000; }
.asp-opposition { color: #ff5a3d; }
.asp-trine { color: #4af626; }
.asp-square { color: #ff8a72; }
.asp-sextile { color: #4a90e2; }
/* Los seis menores comparten color neutro: no compiten con los mayores. */
.asp-minor { color: #8c9a90; }

/* Controles DE LA MATRIZ: van DEBAJO de ella (primero el dato, luego los
   mandos), dentro de la columna derecha. Comparten estado con los de la rueda. */
.aspects-tab-controls {
  border: 1px solid var(--border-color);
  background: #10171c;
  border-radius: 2px;
  padding: 12px 14px;
  margin-top: 16px;
}

.aspects-tab-orb {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.aspects-tab-orb label {
  font-size: 0.8rem;
  color: #c6d4c9;
  white-space: nowrap;
}

.aspects-tab-orb input[type="range"] {
  flex: 1;
  min-width: 160px;
  cursor: pointer;
}

.aspects-tab-orb-readout {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #c6d4c9;
  min-width: 48px;
  text-align: right;
}

.aspects-tab-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  align-items: center;
}

.aspect-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  color: #c6d4c9;
  background: #1a2126;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 3px 10px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, background-color 0.15s;
}

.aspect-chip:hover { border-color: var(--accent-color); }

.aspect-chip input {
  margin: 0;
  cursor: pointer;
  accent-color: #4af626;
}

.aspect-chip small { color: #6e7c74; }

/* Los menores se distinguen a simple vista de los mayores */
.aspect-chip-minor {
  border-style: dashed;
  background: #0a1118;
}

/* De arranque rige el preset «Solo mayores»: un menor apagado se apaga también
   a la vista, de modo que solo los mayores leen como activos. Sigue siendo
   clicable para encenderlo. */
.aspect-chip-minor:has(input:not(:checked)) {
  opacity: 0.55;
  filter: grayscale(0.5);
}

.aspect-chip-minor:has(input:not(:checked)):hover {
  opacity: 1;
  filter: none;
}

.aspect-chip-actions {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}

.aspects-tab-hint { margin: 8px 0 0 0; font-size: 0.72rem; line-height: 1.45; }

/* Los menores se distinguen también por forma, no solo por color. */
.aspect-matrix td.aspect-cell-minor {
  background-image: linear-gradient(135deg, rgba(140, 154, 144, 0.16) 0 6px, transparent 6px 12px);
}

.aspect-item-badge.aspect-item-minor {
  border-style: dashed;
}

/* Lista de aspectos */
.aspects-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 6px;
}

.aspect-item-badge {
  background-color: #1a2126;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.aspect-item-badge:hover {
  background-color: #232a2e;
  border-color: var(--accent-color);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Grilla y tarjetas de personajes célebres */
.celebrity-matches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 6px;
}

.celebrity-card {
  background-color: #1a2126;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s;
  cursor: pointer;
  position: relative;
}

.celebrity-card:hover {
  border-color: #4af626;
  background-color: #232a2e;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.celebrity-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.celebrity-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-bright);
}

.celebrity-cat-badge {
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.cat-Ciencia { background: rgba(74, 246, 38, 0.15); color: #4af626; border: 1px solid rgba(74, 246, 38, 0.3); }
.cat-Líderes { background: rgba(255, 90, 61, 0.15); color: #ff5a3d; border: 1px solid rgba(255, 90, 61, 0.3); }
.cat-Empresarios { background: rgba(74, 246, 38, 0.15); color: #4af626; border: 1px solid rgba(74, 246, 38, 0.3); }
.cat-Actores { background: rgba(255, 176, 0, 0.15); color: #ffb000; border: 1px solid rgba(255, 176, 0, 0.3); }
.cat-Artistas { background: rgba(143, 192, 240, 0.15); color: #8fc0f0; border: 1px solid rgba(143, 192, 240, 0.3); }

.celebrity-score-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0;
}

.celebrity-score-bar-bg {
  flex: 1;
  height: 6px;
  background: #232a2e;
  border-radius: 3px;
  overflow: hidden;
}

.celebrity-score-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #4af626, #36b84a);
  transition: width 0.4s ease;
}

.celebrity-score-val {
  font-weight: 700;
  font-size: 0.88rem;
  color: #4af626;
  min-width: 44px;
  text-align: right;
}

.celebrity-desc {
  font-size: 0.78rem;
  color: #8c9a90;
  line-height: 1.35;
}

.celebrity-shared-traits {
  font-size: 0.73rem;
  color: #8cff6b;
  background: rgba(54, 184, 74, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
  border-left: 2px solid #36b84a;
}

.saved-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.btn-card-open,
.btn-card-edit {
  background-color: #232a2e;
  color: #4af626;
  border: 1px solid #2c3335;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.78rem;
  cursor: pointer;
  flex: 1;
  text-align: center;
  transition: all 0.2s;
}

.btn-card-edit {
  color: #ff8a3d;
}

.btn-card-edit:hover {
  background-color: #ff8a3d;
  color: #10171c;
  border-color: #ffb000;
}

.btn-card-open:hover {
  background-color: #4af626;
  color: #fff;
  border-color: #4af626;
}

/* ========================================================
   NAVEGADOR ASTRAL - CONTROLES DE ANIMACIÓN TIPO TIMELINE
   ======================================================== */
.animation-controls {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  margin-top: 12px;
}

.increment-mode-label {
  margin-bottom: 8px;
}

.increment-mode-label label {
  font-size: 0.8rem;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.increment-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
  gap: 6px;
  margin-bottom: 16px;
}

.increment-modes .btn-chip {
  padding: 6px 8px;
  font-size: 0.78rem;
  font-family: var(--font-mono);
  text-align: center;
  border-radius: 4px;
}

.increment-modes .btn-chip.active {
  background-color: #2e8b3d;
  border-color: #4af626;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 0 1px #4af626;
}

.playback-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.btn-play {
  padding: 10px 14px;
  background-color: var(--card-bg-elevated);
  color: var(--text-bright);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  justify-content: center;
}

.btn-play:hover {
  background-color: #1e2529;
  border-color: var(--accent-color);
}

.btn-play.active {
  background-color: #2e8b3d;
  border-color: #4af626;
  color: #fff;
}

.step-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.step-controls .btn-chip {
  padding: 8px 12px;
  font-size: 0.84rem;
  font-family: var(--font-mono);
  text-align: center;
}

.current-time-display {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 12px 16px;
  margin-top: 16px;
  text-align: center;
}

.time-display-label {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.time-display-value {
  font-size: 1.25rem;
  color: var(--accent-color);
  font-weight: 700;
  font-family: var(--font-mono);
}

/* ==========================================
   PANEL DE SINCRONÍA HISTÓRICA MUNDIAL
   ========================================== */
.historical-matches-panel {
  width: 100%;
  margin-top: 24px;
}

.historical-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.historical-title-group h2 {
  font-size: 1.25rem;
  color: #e6f3e8;
  margin-bottom: 4px;
  font-weight: 700;
}

.historical-subtitle {
  font-size: 0.84rem;
  color: var(--text-dim);
  line-height: 1.4;
  margin: 0;
}

.historical-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.historical-filter-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.historical-filter-item label {
  font-size: 0.8rem;
  color: var(--text-dim);
  white-space: nowrap;
  font-weight: 500;
}

.filter-select {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-bright);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.82rem;
  cursor: pointer;
  outline: none;
}

.filter-select:focus {
  border-color: var(--border-focus);
}

.historical-summary-badge {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-left: 3px solid #4af626;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #dce9df;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
}

.historical-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}

.hist-event-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  overflow: hidden;
}

.hist-event-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-color);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.hist-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.hist-card-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: #e6f3e8;
  line-height: 1.3;
}

.hist-card-date {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 3px;
  font-family: var(--font-mono);
}

/* Badge de porcentaje de similitud con color dinámico */
.hist-sim-badge {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 1.1rem;
  min-width: 62px;
  text-align: center;
  line-height: 1;
  font-family: var(--font-mono);
}

.hist-sim-badge small {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
  opacity: 0.85;
}

.sim-level-high {
  background: rgba(54, 184, 74, 0.15);
  border: 1px solid #36b84a;
  color: #4af626;
}

.sim-level-medium {
  background: rgba(255, 176, 0, 0.15);
  border: 1px solid #ffb000;
  color: #ffb000;
}

.sim-level-mod {
  background: rgba(74, 246, 38, 0.2);
  border: 1px solid #4af626;
  color: #4af626;
}

.sim-level-low {
  background: rgba(140, 154, 144, 0.15);
  border: 1px solid #2c3335;
  color: #8c9a90;
}

.hist-card-cat {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 12px;
  background-color: #232a2e;
  color: #4a90e2;
  border: 1px solid rgba(74, 144, 226, 0.3);
}

.hist-card-desc {
  font-size: 0.85rem;
  color: #c6d4c9;
  line-height: 1.45;
  background-color: #10171c;
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 3px solid var(--accent-color);
}

.historical-mass-forces-panel {
  background: linear-gradient(145deg, #1a2126, #10171c);
  border: 1px solid rgba(74, 246, 38, 0.25);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.mass-forces-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid rgba(242, 251, 243, 0.08);
  padding-bottom: 10px;
}

.mass-forces-title {
  font-size: 1rem;
  font-weight: 700;
  color: #4af626;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mass-forces-subtitle {
  font-size: 0.78rem;
  color: #8c9a90;
  margin-top: 3px;
}

.mass-forces-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.mass-force-item {
  background: rgba(26, 33, 38, 0.85);
  border: 1px solid #2c3335;
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 4px solid #4af626;
}

.mass-force-item.conjunction { border-left-color: #4a90e2; }
.mass-force-item.opposition { border-left-color: #ff5a3d; }
.mass-force-item.square { border-left-color: #ff8a72; }
.mass-force-item.trine { border-left-color: #4af626; }
.mass-force-item.sextile { border-left-color: #4af626; }

.mass-force-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mass-force-aspect-label {
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mass-force-archetype {
  font-weight: 600;
  color: #e6f3e8;
  font-size: 0.84rem;
}

.mass-force-effect {
  font-size: 0.82rem;
  color: #c6d4c9;
  line-height: 1.45;
  background: rgba(0, 0, 0, 0.25);
  padding: 6px 8px;
  border-radius: 4px;
}

.mass-force-coincidence {
  font-size: 0.76rem;
  color: #8c9a90;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-top: 1px dashed rgba(242, 251, 243, 0.08);
  padding-top: 6px;
}

.mass-force-example-tag {
  color: #4af626;
  font-weight: 500;
}

.hist-aspects-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8rem;
}

.hist-aspects-title {
  color: #8c9a90;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
}

.hist-aspects-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hist-aspect-tag {
  background-color: #232a2e;
  border: 1px solid #2c3335;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.75rem;
  color: #dce9df;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hist-aspect-tag.conjunction { border-color: rgba(255, 176, 0, 0.5); color: #ffb000; }
.hist-aspect-tag.opposition { border-color: rgba(255, 90, 61, 0.5); color: #ff5a3d; }
.hist-aspect-tag.square { border-color: rgba(255, 90, 61, 0.5); color: #ff5a3d; }
.hist-aspect-tag.trine { border-color: rgba(74, 246, 38, 0.5); color: #4af626; }
.hist-aspect-tag.sextile { border-color: rgba(74, 246, 38, 0.5); color: #4af626; }

.hist-planets-table {
  font-size: 0.75rem;
  border-collapse: collapse;
  width: 100%;
  margin-top: 4px;
}

.hist-planets-table th, .hist-planets-table td {
  padding: 3px 6px;
  text-align: left;
  border-bottom: 1px solid #232a2e;
}

.hist-planets-table th {
  color: #8c9a90;
  font-weight: normal;
}

.hist-planets-table td {
  color: #c6d4c9;
}

.hist-planets-table .planet-match {
  color: #4af626;
  font-weight: bold;
}

/* ========================================================
   MODAL COMPARATIVO DE DOS CARTAS PARALELAS
   ======================================================== */
.celebrity-card-action-hint {
  font-size: 0.72rem;
  color: #4af626;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-weight: 500;
  border-top: 1px dashed rgba(74, 246, 38, 0.2);
  padding-top: 4px;
}

/* ========================================================
   LÍNEA DE TIEMPO INTERACTIVA DE TRÁNSITOS (TIMELINE)
   ======================================================== */
.transit-timeline-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
}

.timeline-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
}

.timeline-chart-wrapper {
  position: relative;
  user-select: none;
}

.timeline-tooltip {
  background: rgba(16, 23, 28, 0.94);
  border: 1px solid #4af626;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  padding: 8px 12px;
  color: #dce9df;
  font-size: 0.78rem;
  line-height: 1.4;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  pointer-events: none;
  transform: translate(-50%, -110%);
  transition: opacity 0.1s ease;
}

/* Cuadro flotante pequeño del timeline: fecha arriba y edad debajo.
   La posición la calcula posicionarTooltipTimeline() para no tapar los bordes. */
.timeline-tooltip.timeline-tooltip-compact {
  font-size: 0.72rem;
  line-height: 1.35;
  padding: 6px 9px;
  max-width: 300px;
  white-space: normal;
  transform: none;
}

.timeline-tooltip-compact .tl-tip-fecha {
  font-weight: 800;
  color: #4af626;
  font-family: var(--font-mono);
  border-bottom: 1px solid #2c3335;
  padding-bottom: 3px;
}

.timeline-tooltip-compact .tl-tip-edad {
  margin-top: 3px;
  font-weight: 700;
  font-size: 0.72rem;
  color: #8cff6b;
  font-family: var(--font-mono);
}

.timeline-tooltip-compact .tl-tip-aspecto {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 8px;
}

.timeline-tooltip-compact .tl-tip-orbe {
  color: #ffb000;
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

/* Inputs de fecha calendario modernos y sliders ergonómicos */
.timeline-date-picker {
  background: #10171c;
  border: 1px solid #2c3335;
  color: #dce9df;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  padding: 2px 6px;
  border-radius: 4px;
  color-scheme: dark;
  cursor: pointer;
}

.timeline-date-picker:focus {
  outline: none;
  border-color: #4af626;
  box-shadow: 0 0 0 2px rgba(74, 246, 38, 0.2);
}

/* Selector analítico por planetas en tránsito y píldoras de aspectos */
.timeline-planets-selector-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 2px 0;
}

/* ---- Botones de tránsitos destacados (presets que aíslan una sola curva) ---- */
.timeline-presets-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
  padding: 5px 8px;
  background: rgba(255, 176, 0, 0.04);
  border: 1px solid #2e2a1c;
  border-radius: 6px;
}

.tl-preset-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #10171c;
  border: 1px solid #2c3335;
  border-radius: 12px;
  padding: 2px 9px;
  font-size: 0.71rem;
  line-height: 1.45;
  color: #c6d4c9;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.tl-preset-btn:hover {
  background: #1a2126;
  border-color: #ffb000;
  color: #e6f3e8;
}

.tl-preset-btn.active {
  background: rgba(255, 176, 0, 0.18);
  border-color: #ffb000;
  color: #f2fbf3;
  font-weight: 700;
  box-shadow: 0 0 9px rgba(255, 176, 0, 0.28);
}

.tl-preset-btn .tl-preset-symbols {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.tl-preset-btn .tl-preset-aspects {
  font-size: 0.63rem;
  font-family: var(--font-mono);
  color: #8c9a90;
  background: rgba(242, 251, 243, 0.06);
  border-radius: 9px;
  padding: 0 5px;
}

.tl-preset-btn.active .tl-preset-aspects {
  color: #ffd27a;
  background: rgba(255, 176, 0, 0.16);
}

.tl-preset-btn.tl-preset-off {
  border-color: #6e7c74;
  border-style: dashed;
}

/* ---- Reorganización visual del gráfico temporal de tránsitos ---- */

/* Etiqueta breve que encabeza cada bloque de controles relacionados */
.tl-group-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8c9a90;
  margin-right: 2px;
  white-space: nowrap;
  user-select: none;
}

/* Contenedor de cada bloque temático dentro de la barra de herramientas */
.tl-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #1a2126;
  border: 1px solid #232a2e;
  border-radius: 6px;
  padding: 5px 9px;
}

/* Separador vertical fino entre bloques contiguos (en pantallas anchas) */
.tl-group + .tl-group {
  position: relative;
}

/* Indicador de orden (paso numerado) para guiar la lectura de izquierda a derecha */
.tl-planet-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #10171c;
  border: 1px solid #2c3335;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.78rem;
  color: #c6d4c9;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.tl-planet-btn:hover {
  background: #1a2126;
  border-color: #4af626;
  color: #e6f3e8;
}

.tl-planet-btn.active {
  background: rgba(74, 246, 38, 0.12);
  border-color: #4af626;
  color: #f2fbf3;
  box-shadow: 0 0 8px rgba(74, 246, 38, 0.2);
}

.tl-planet-btn.focused {
  outline: 2px solid #4af626;
}

.tl-planet-btn .planet-badge-count {
  font-size: 0.7rem;
  font-family: var(--font-mono);
  background: rgba(242, 251, 243, 0.08);
  padding: 1px 5px;
  border-radius: 10px;
  color: #8c9a90;
}

.tl-planet-btn.active .planet-badge-count {
  background: #2e8b3d;
  color: #f2fbf3;
}

.tl-aspect-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1a2126;
  border: 1px solid #2c3335;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.74rem;
  color: #8c9a90;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.tl-aspect-pill:hover {
  border-color: #4af626;
  color: #e6f3e8;
}

.tl-aspect-pill.active {
  background: rgba(74, 246, 38, 0.16);
  border-color: #4af626;
  color: #f2fbf3;
  font-weight: 600;
}

/* ========================================================
   EVENTOS DE VIDA ANOTADOS EN EL TIMELINE
   ======================================================== */
.life-event-card {
  background: #1a2126;
  border: 1px solid #232a2e;
  border-radius: 6px;
  padding: 6px 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

/* Refuerzo de legibilidad: subir el suelo de las fuentes pequeñas de toda la app.
   Los tamaños en rem escalan con el html al 112.5%; aquí se elevan además los
   mínimos en px y los rem más pequeños para que nada quede microscópico. */
body {
  font-size: 0.95rem;
  line-height: 1.5;
}

button, input, select, textarea {
  font-size: inherit;
}

.hint, .timeline-tooltip {
  font-size: 0.82rem;
}

.life-event-card:hover {
  border-color: #2c3335;
  background: #232a2e;
}

.life-event-input {
  background: #10171c;
  border: 1px solid #2c3335;
  color: #dce9df;
  font-size: 0.76rem;
  padding: 4px 7px;
  border-radius: 5px;
  color-scheme: dark;
  font-family: inherit;
}

.life-event-input:focus {
  outline: none;
  border-color: #2f6fa8;
  box-shadow: 0 0 0 2px rgba(47, 111, 168, 0.2);
}

/* Tarjetas de Tránsitos Prominentes */
.prominent-transit-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #1a2126;
  border: 1px solid #2c3335;
  border-left-width: 4px;
  border-radius: 6px;
  padding: 7px 10px;
  cursor: pointer;
  user-select: none;
  transition: all 0.18s ease;
}

.prominent-transit-card:hover {
  background: #232a2e;
  border-color: #4af626;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.prominent-transit-card.active {
  background: rgba(74, 246, 38, 0.14);
  border-color: #4af626;
  box-shadow: 0 0 10px rgba(74, 246, 38, 0.25);
}

.prominent-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.prominent-card-title {
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.prominent-card-aspect {
  font-size: 0.74rem;
  font-weight: 600;
}

.prominent-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: #8c9a90;
  font-family: var(--font-mono);
}

.prominent-orb-badge {
  background: rgba(255, 176, 0, 0.15);
  color: #ffb000;
  border-radius: 3px;
  padding: 1px 5px;
  font-weight: 600;
}

.prominent-intensity-bar {
  height: 4px;
  background: #232a2e;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 3px;
}

.prominent-intensity-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

@media (max-width: 900px) {
  .compare-wheels-grid {
    grid-template-columns: 1fr !important;
  }
  .timeline-header-bar {
    flex-direction: column;
  }
  /* En pantallas estrechas los grupos del timeline se apilan y el número de paso no aporta */
  .tl-step {
    display: none;
  }
}

/* ========================================================
   ESTILOS: GUÍA AMIGABLE DE LAS 12 CASAS
   ======================================================== */
/* ========================================================
   ESTILOS: PESTAÑA PLANETAS EN CASAS Y SIGNIFICADOS
   ======================================================== */
.badge-type-angular {
  background: rgba(255, 90, 61, 0.15);
  color: #ff8a72;
  border: 1px solid rgba(255, 90, 61, 0.35);
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.78rem;
}

.badge-type-succedent {
  background: rgba(255, 176, 0, 0.15);
  color: #ffb000;
  border: 1px solid rgba(255, 176, 0, 0.35);
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.78rem;
}

.badge-type-cadent {
  background: rgba(74, 144, 226, 0.15);
  color: #8fc0f0;
  border: 1px solid rgba(74, 144, 226, 0.35);
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.78rem;
}

/* Cuadrícula de las 12 casas: una casilla por casa */
.houses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

@media (min-width: 720px) {
  .houses-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .houses-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.house-cell {
  background: #1a2126;
  border: 1px solid #2c3335;
  border-top: 3px solid #2c3335;
  border-radius: 10px;
  padding: 8px 8px 9px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.house-cell:hover {
  background: #171e23;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

.house-cell-empty {
  background: #0a1118;
  border: 1px solid #2c3335;
  border-top: 3px solid #2c3335;
  border-style: dashed;
}

.house-cell-empty:hover {
  background: #10171c;
  border-color: #6e7c74;
}

/* Casilla con varios peldaños: el borde son bandas concéntricas pintadas con
   box-shadow interior (el peldaño más alto, en la banda exterior más ancha).
   Por eso el borde CSS se anula y la sombra se inyecta desde JS. */
.house-cell-ranked {
  border-width: 0;
}

/* El box-shadow de la casilla va ocupado por las bandas de jerarquía, así que
   el realce al pasar el ratón se hace con drop-shadow. */
.house-cell-ranked:hover {
  filter: drop-shadow(0 7px 11px rgba(0, 0, 0, 0.5));
}

.house-cell-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}

/* Distintivo principal de la casilla: el número de casa en romanos */
.house-cell-num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.4px;
  color: #4af626;
  text-shadow: 0 0 12px rgba(74, 246, 38, 0.35);
}

.house-cell-emoji {
  flex: 0 0 auto;
  font-size: 0.85rem;
  line-height: 1;
  margin-left: auto;
}

.house-cell-syms {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  min-height: 19px;
}

.house-cell-sym {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1;
  color: #e6f3e8;
  background: #10171c;
  border: 1px solid #2c3335;
  border-radius: 6px;
  padding: 2px 4px;
}

.house-cell-retro {
  font-size: 0.52rem;
  color: #ff8a72;
  margin-left: 1px;
}

.house-cell-dash {
  font-size: 0.95rem;
  color: #2c3335;
}

.house-cell-label {
  font-size: 0.57rem;
  color: #8c9a90;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

/* Pantallas muy estrechas: se compacta el contenido para que la casilla
   siga siendo un cuadrado y la definición no se recorte. */
@media (max-width: 400px) {
  .house-cell { padding: 7px 7px 8px; gap: 5px; }
  .house-cell-num { font-size: 1rem; }
  .house-cell-emoji { font-size: 0.85rem; }
  .house-cell-sym { font-size: 0.84rem; }
  .house-rank-badge { font-size: 0.82rem; min-width: 21px; padding: 2px 4px; }
  .house-cell-label { font-size: 0.57rem; }
}

/* Distintivos de jerarquía dentro de cada casilla: corona 👑 al regente y
   un símbolo por peldaño. Segundo elemento en importancia tras el número. */
.house-cell-rank {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.house-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  font-size: 0.82rem;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 8px;
  border: 1px solid currentColor;
  background: rgba(242, 251, 243, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  cursor: help;
}

/* Un color por peldaño, sin repetir gama: el #3 (luminarias) va en celeste y el
   #5 (dominante por aspectos) en verde, para que no se confundan en las bandas. */
.house-rank-1 { color: #ffb000; }
.house-rank-2 { color: #ff8a72; }
.house-rank-3 { color: #8cff6b; }
.house-rank-4 { color: #4a90e2; }
.house-rank-5 { color: #8cff6b; }

.house-rank-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 12px;
  font-size: 0.76rem;
  color: #8c9a90;
  line-height: 1.4;
}

.house-rank-legend-title {
  font-weight: 700;
  color: #c6d4c9;
}

.house-rank-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Aclara que el borde de cada casilla usa el color de la jerarquía. */
.house-rank-legend-hint {
  flex-basis: 100%;
  color: #6e7c74;
  font-size: 0.72rem;
}

/* ========================================================
   ESTADO DEL PLANETA EN LA MATRIZ (color del símbolo)
   El borde de la casilla = jerarquía. La chapa del planeta = estado:
   fuerte (verde) · neutro (gris) · con fricción (ámbar) · bloqueado (rojo).
   Los colores salen del veredicto real de getCosmicState, así que la matriz
   y la tabla "El estado de tus planetas" siempre dicen lo mismo.
   ======================================================== */
/* Verde fuerte: el planeta trabaja a favor. */
.house-cell-sym[data-verdict="muy-fuerte"],
.house-cell-sym[data-verdict="fuerte"] {
  font-weight: 700;
  text-shadow: 0 0 8px currentColor;
}

.house-cell-sym[data-verdict="friccion"] {
  text-shadow: 0 0 8px currentColor;
}

.house-cell-sym[data-verdict="bloqueado"] {
  font-weight: 700;
  text-shadow: 0 0 9px currentColor;
}

/* El retrógrado ℞ mantiene su color de aviso, pero dentro de una chapa
   "muy bloqueado" en rojo chocaría: se aclara para seguir leyéndose. */
.house-cell-sym[data-verdict="muy-fuerte"] .house-cell-retro,
.house-cell-sym[data-verdict="bloqueado"] .house-cell-retro {
  color: #ff8a72;
}

/* La misma chapa, para la leyenda: idéntica al símbolo de la matriz. */
.house-sym-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1;
  border-radius: 6px;
  border: 1px solid #2c3335;
  padding: 2px 4px;
}

/* Leyenda del estado: mismo lenguaje visual que la de jerarquía. */
.house-sym-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 10px;
  font-size: 0.76rem;
  color: #8c9a90;
  line-height: 1.4;
}

.house-sym-legend-title {
  font-weight: 700;
  color: #c6d4c9;
}

.house-sym-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: help;
}

/* Cuántos planetas de la carta están en cada estado. */
.house-sym-legend-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(242, 251, 243, 0.08);
  border: 1px solid #2c3335;
  color: #c6d4c9;
  font-size: 0.7rem;
  font-weight: 700;
}

.house-sym-legend-hint {
  flex-basis: 100%;
  color: #6e7c74;
  font-size: 0.72rem;
}

/* ========================================================
   ESTADO DE LA CASA (aviso en la casilla y resumen del panel)
   La casilla avisa sola si dentro hay un planeta con fricción o muy
   bloqueado; el panel, al pulsarla, traduce ese estado a una frase.
   Mismo código de color que la chapa del planeta y que la tabla de estado.
   ======================================================== */
.house-cell-state {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: #8c9a90;
  cursor: help;
}

/* El icono del estado va en un pseudo-elemento con su propio tamaño: así, en la
   maquetación de 6 columnas, se puede ocultar solo el texto (font-size: 0) y
   dejar el icono visible. */
.house-cell-state::before {
  content: attr(data-icon);
  margin-right: 3px;
}

.house-cell-state[data-verdict="friccion"] {
  color: #ffb000;
}

.house-cell-state[data-verdict="bloqueado"] {
  color: #ff8a72;
  text-shadow: 0 0 8px rgba(255, 138, 114, 0.45);
}

/* Resumen de estado: lo primero que se lee al pulsar una casa. */
.house-verdict-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #10171c;
  border: 1px solid #2c3335;
  border-left: 3px solid #6e7c74;
  border-radius: 8px;
  padding: 12px 14px;
}

.house-verdict-box[data-verdict="muy-fuerte"] { border-left-color: #4af626; background: rgba(74, 246, 38, 0.07); }
.house-verdict-box[data-verdict="fuerte"] { border-left-color: #8cff6b; background: rgba(140, 255, 107, 0.06); }
.house-verdict-box[data-verdict="neutro"] { border-left-color: #8c9a90; }
.house-verdict-box[data-verdict="friccion"] { border-left-color: #ffb000; background: rgba(255, 176, 0, 0.08); }
.house-verdict-box[data-verdict="bloqueado"] { border-left-color: #ff8a72; background: rgba(255, 138, 114, 0.09); }

.house-verdict-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8c9a90;
}

.house-verdict-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.house-state-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.house-verdict-head {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #e6f3e8;
}

.house-verdict-body {
  font-size: 0.83rem;
  line-height: 1.55;
  color: #c6d4c9;
}

/* Tira de estado de UN planeta dentro de la casa. NO es una caja: es una banda
   con el color del veredicto en la cabecera. Antes había aquí tres cajas
   redondeadas anidadas (panel > tarjeta > estado) y se leía como un laberinto. */
.house-planet-state {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 8px;
  margin-top: 2px;
  padding: 7px 10px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(242, 251, 243, 0.028);
}

.house-planet-state[data-verdict="muy-fuerte"] { background: rgba(74, 246, 38, 0.07);   border-top-color: rgba(74, 246, 38, 0.35); }
.house-planet-state[data-verdict="fuerte"]     { background: rgba(140, 255, 107, 0.05); border-top-color: rgba(140, 255, 107, 0.30); }
.house-planet-state[data-verdict="neutro"]     {                                        border-top-color: rgba(140, 154, 144, 0.35); }
.house-planet-state[data-verdict="friccion"]   { background: rgba(255, 176, 0, 0.07);   border-top-color: rgba(255, 176, 0, 0.38); }
.house-planet-state[data-verdict="bloqueado"]  { background: rgba(255, 138, 114, 0.08); border-top-color: rgba(255, 138, 114, 0.42); }

.house-planet-state-head {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8c9a90;
}

.house-planet-state[data-verdict="muy-fuerte"] .house-planet-state-head { color: #4af626; }
.house-planet-state[data-verdict="fuerte"]     .house-planet-state-head { color: #8cff6b; }
.house-planet-state[data-verdict="friccion"]   .house-planet-state-head { color: #ffb000; }
.house-planet-state[data-verdict="bloqueado"]  .house-planet-state-head { color: #ff8a72; }

.house-planet-state-gloss {
  font-weight: 400;
  color: #8c9a90;
}

.house-planet-state-what {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #e6f3e8;
}

/* =========================================================================
   FICHA DE LA CASA PULSADA (#house-detail-panel)
   -------------------------------------------------------------------------
   Antes esto era una pila de `style="..."` en línea: cajas con radio 8px,
   colores a mano y el contenido pegado al marco, encima de los tornillos del
   módulo. Aquí está la estructura; el acabado industrial lo pone
   theme_industrial.css, que carga después.

   Jerarquía visual, de fuera adentro: ficha > banda de cabecera > cuerpo >
   tarjeta de planeta > tira de estado. Cada nivel se separa con una línea de
   pelo o un raíl de color, nunca con otra caja redondeada.
   ========================================================================= */

.house-ficha {
  --house-rank: #6e7c74;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* --- Banda de cabecera ---------------------------------------------------- */

.house-ficha-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #2c3335;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 60%),
    rgba(0, 0, 0, 0.22);
}

/* El glifo de la casa, en caja FIJA. Suelto en el flujo se recortaba contra
   el borde del módulo y salía a medio dibujar. */
.house-ficha-bezel {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
  border: 1px solid #2c3335;
  border-radius: 2px;
  background: #0e1418;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -6px 10px rgba(0, 0, 0, 0.5);
  /* El color de la casa entra por el bisel, no pintando el marco entero. */
  border-bottom-color: var(--house-rank);
}

.house-ficha-titles { min-width: 0; }

.house-ficha-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--phosphor, #4af626);
  text-shadow: 0 0 10px rgba(74, 246, 38, 0.25);
}

.house-ficha-sub {
  margin: 3px 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #8c9a90;
}

/* --- Cuerpo --------------------------------------------------------------- */

.house-ficha-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 16px;
}

/* Casa vacía: una frase y el significado. Sin caja, con raíl. */
.house-ficha-note {
  margin: 0;
  padding-left: 11px;
  border-left: 2px solid var(--house-rank);
  font-size: 0.95rem;
  line-height: 1.6;
  color: #e6f3e8;
}

.house-ficha-native {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #c6d4c9;
}

.house-ficha-planets {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Tarjeta de un planeta en la casa ------------------------------------- */

.house-planet-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 13px;
  border: 1px solid #232a2e;
  border-left: 2px solid var(--house-rank);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.22);
}

.house-planet-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.house-planet-glyph {
  flex: 0 0 auto;
  font-size: 1.3rem;
  line-height: 1;
  color: #e6f3e8;
}

.house-planet-name {
  font-size: 0.96rem;
  font-weight: 700;
  color: #e6f3e8;
}

.house-planet-pos {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: #8c9a90;
}

.house-planet-retro { font-size: 0.68rem; padding: 1px 5px; }

/* El hecho: la frase que manda. Va sola, sin caja. */
.house-planet-what {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.55;
  color: #e6f3e8;
}

.house-planet-state-why {
  font-size: 0.78rem;
  line-height: 1.5;
  color: #8c9a90;
}

.house-planet-state-job {
  font-size: 0.82rem;
  line-height: 1.5;
  color: #c6d4c9;
}

/* Cómo se combinan los planetas que comparten casa: los aspectos que forman
   entre sí, con la definición del catálogo de aspectos. */
.house-link-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
  padding-top: 9px;
  border-top: 1px solid #2c3335;
}

.house-link-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8c9a90;
}

.house-link-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #e6f3e8;
}

.house-link-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 1px 4px;
  border-radius: 6px;
  border: 1px solid;
  font-size: 0.78rem;
  line-height: 1.3;
}

.house-link-text {
  min-width: 0;
}

.house-link-asp {
  color: #8c9a90;
  font-size: 0.78rem;
}

.house-link-why {
  margin-top: 2px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #93a39a;
}

.house-link-note {
  font-size: 0.78rem;
  line-height: 1.5;
  color: #8c9a90;
}

/* ========================================================
   GUÍA DE LECTURA BAJO LA CUADRÍCULA DE CASAS
   Sintaxis astrológica · dignidades esenciales · jerarquía de poder
   ======================================================== */
.houses-reading-guide {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.guide-section {
  background: #0a1118;
  border: 1px solid #1e2529;
  border-radius: 10px;
  padding: 16px 18px;
}

.guide-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: #e6f3e8;
  margin-bottom: 10px;
}

.guide-note {
  font-size: 0.88rem;
  color: #93a39a;
  line-height: 1.65;
  margin: 0 0 14px;
}

.guide-note strong {
  color: #e6f3e8;
}

.guide-mini {
  font-size: 0.8rem;
  color: #8c9a90;
  line-height: 1.55;
  margin: 10px 0 0;
}

.guide-mini strong {
  color: #c6d4c9;
}

.guide-table-wrap {
  overflow-x: auto;
  border: 1px solid #1e2529;
  border-radius: 8px;
}

.guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.guide-table th {
  text-align: left;
  padding: 9px 11px;
  background: #10171c;
  color: #8c9a90;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #1e2529;
  white-space: nowrap;
}

.guide-table td {
  padding: 9px 11px;
  border-bottom: 1px solid #171e23;
  color: #93a39a;
  line-height: 1.55;
  vertical-align: top;
}

.guide-table tbody tr:last-child td {
  border-bottom: none;
}

.guide-table tbody tr:hover td {
  background: rgba(74, 246, 38, 0.04);
}

.guide-table-compact td,
.guide-table-compact th {
  padding: 7px 9px;
  font-size: 0.78rem;
}

.guide-asp {
  font-family: var(--font-mono);
  font-size: 0.74rem !important;
  color: #8c9a90 !important;
}

.guide-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
}

.guide-retro {
  color: #ff5a3d;
  font-size: 0.75rem;
}

.guide-regente-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

.guide-regente-chip {
  background: #10171c;
  border: 1px solid #232a2e;
  border-radius: 8px;
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.guide-regente-head {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.8rem;
  color: #8cff6b;
}

.guide-regente-body {
  font-size: 0.78rem;
  color: #c6d4c9;
  line-height: 1.45;
}

.guide-regente-occ {
  font-size: 0.72rem;
  color: #8c9a90;
  line-height: 1.4;
}

/* Selector de Anclaje de Rotación de Rueda Astral */
.wheel-anchor-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Selector del Centro del Sistema (Tierra geocéntrica / Sol heliocéntrico) */
.wheel-center-bar {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wheel-center-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #8c9a90;
}

.center-toggle-group {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background-color: #10171c;
  border: 1px solid #2c3335;
  border-radius: 18px;
}

.center-toggle-group .center-btn {
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 0.8rem;
  text-align: center;
}

.center-toggle-group .center-btn.active[data-center="earth"] {
  background-color: #1b3f5f;
  border-color: #4af626;
  color: #8fc0f0;
  font-weight: 600;
  box-shadow: 0 0 0 1px #4af626;
}

.center-toggle-group .center-btn.active[data-center="sun"] {
  background-color: #6b4a00;
  border-color: #ffb000;
  color: #ffd27a;
  font-weight: 600;
  box-shadow: 0 0 0 1px #ffb000;
}

.center-toggle-group .center-btn.active[data-center="orbits"] {
  background-color: #6d3a1a;
  border-color: #ff8a3d;
  color: #ffb37a;
  font-weight: 600;
  box-shadow: 0 0 0 1px #ff8a3d;
}

/* Lectura de la Tierra-Luna bajo el mapa de órbitas */
.orbit-readout {
  margin: 12px auto 0 auto;
  padding: 7px 14px;
  background-color: #10171c;
  border: 1px solid #2c3335;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: #c6d4c9;
  text-align: center;
}

.wheel-anchor-select {
  background-color: #1a2126;
  color: #e6f3e8;
  border: 1px solid #2c3335;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 4px 10px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.wheel-anchor-select:hover {
  border-color: #4af626;
}

.wheel-anchor-select:focus {
  border-color: #4af626;
  box-shadow: 0 0 0 3px rgba(74, 246, 38, 0.25);
}

/* Indicadores de los Módulos Psicológicos Conductuales */
.potentials-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.potentials-card:hover {
  border-color: #4af626;
}

.potentials-bars-grid > div {
  transition: transform 0.15s ease;
}

.potentials-bars-grid > div:hover {
  transform: translateX(2px);
}

/* Badges e identificadores de Género (Hombre / Mujer) */
.gender-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  user-select: none;
}

.gender-tag.hombre {
  background: rgba(95, 211, 216, 0.15);
  color: #5fd3d8;
  border: 1px solid rgba(95, 211, 216, 0.35);
}

.gender-tag.mujer {
  background: rgba(232, 183, 200, 0.15);
  color: #e8b7c8;
  border: 1px solid rgba(232, 183, 200, 0.35);
}

/* Matriz de aspectos: dos columnas */
.aspects-split { display: flex; gap: 20px; align-items: flex-start; }
.aspects-split-left { flex: 1 1 50%; min-width: 0; }
.aspects-split-right { flex: 0 0 auto; max-width: 50%; }
.aspects-split h3 { margin-top: 0; }
@media (max-width: 1000px) { .aspects-split { flex-direction: column; } .aspects-split-right { max-width: 100%; } }

/* Ajustes: matriz más pequeña, lista sin scroll */
.aspects-list { max-height: none; overflow-y: visible; padding-right: 0; grid-template-columns: 1fr; }
.aspect-matrix { font-size: 0.7rem; }
.aspect-matrix th, .aspect-matrix td { width: 34px; min-width: 34px; max-width: 34px; height: 34px; padding: 1px; }
.aspect-matrix th { font-size: 0.75rem; }
.aspect-sym { font-size: 0.95rem; }
.aspect-orb { font-size: 0.55rem; }

/* Matriz tamaño intermedio */
.aspect-matrix { font-size: 0.76rem; }
.aspect-matrix th, .aspect-matrix td { width: 40px; min-width: 40px; max-width: 40px; height: 40px; }
.aspect-matrix th { font-size: 0.8rem; }
.aspect-sym { font-size: 1.05rem; }
.aspect-orb { font-size: 0.6rem; }

/* Casas: matriz pequeña a la DERECHA y lectura a la izquierda. Sin lectura
   abierta, la matriz se queda pegada al borde derecho. */
.houses-layout {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: flex-end;
}

.houses-layout-reading {
  flex: 0 1 auto;
  margin-right: auto;
  min-width: 0;
  max-width: 62%;
}

.houses-layout-matrix {
  flex: 0 0 auto;
  width: 100%;
  max-width: 380px;
}

@media (max-width: 1000px) {
  .houses-layout { flex-direction: column-reverse; }
  .houses-layout-reading,
  .houses-layout-matrix { max-width: 100%; width: 100%; }
}

/* La cuadrícula: 12 casillas cuadradas pequeñas, 3 o 4 por fila. El número de
   columnas lo decide el ancho REAL del contenedor (container query). */
#planets-houses-cards-container {
  container-type: inline-size;
  container-name: casas;
}

.houses-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@container casas (min-width: 300px) {
  .houses-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Respaldo sin container queries. */
@media (min-width: 1000px) {
  .houses-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Casilla mínima: el número de la casa y sus planetas con su estado (color).
   Todo centrado, sin etiquetas ni insignias dentro. */
.house-cell {
  padding: 6px;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.house-cell-head { width: 100%; justify-content: center; }
.house-cell-syms { justify-content: center; }
.house-cell-num { font-size: 0.86rem; }
.house-cell-sym { font-size: 0.72rem; padding: 1px 3px; }

/* Quién lleva la casa: una tira de datos, no una caja. El raíl lleva el color
   jerárquico de la casa, que es lo único que la identifica. */
.house-ruler {
  padding: 2px 0 2px 11px;
  border-left: 2px solid var(--house-rank, #4af626);
  font-size: 0.86rem;
  line-height: 1.55;
  color: #c6d4c9;
}

.house-planet-asp-line {
  margin-top: 2px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.82rem;
  line-height: 1.6;
  color: #c6d4c9;
}

.house-planet-asp-label {
  font-family: var(--font-mono);
  color: #8c9a90;
  text-transform: uppercase;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  margin-right: 4px;
}

.house-planet-asp { white-space: nowrap; }

.house-planet-asp-empty { color: #6e7c74; font-style: italic; }

/* =========================================================================
   PESTAÑA «PERFIL Y ESTADÍSTICAS» (#mview-stats) — maquetación compacta
   -------------------------------------------------------------------------
   Objetivo: leer el resultado de un golpe de vista. Los números mandan y las
   explicaciones del motor viven en tooltips (atributo title) o dentro de
   bloques plegados (.nx-more). Nada de párrafos metodológicos en el flujo
   principal de lectura.
   ========================================================================= */

.nx-panel { display: flex; flex-direction: column; gap: 10px; }

/* --- Cabecera de la pestaña --------------------------------------------- */
.nx-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.nx-head h2 {
  margin: 0;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e6f3e8;
}

.nx-head .nx-signature {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: #8c9a90;
  background: #10171c;
  border: 1px solid #2c3335;
  border-radius: 14px;
  padding: 4px 12px;
  white-space: nowrap;
}

/* --- Tarjetas y títulos internos ---------------------------------------- */
.nx-card {
  background: #10171c;
  border: 1px solid #2c3335;
  border-radius: 10px;
  padding: 14px 16px;
}

.nx-card-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #c6d4c9;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.nx-card-title .nx-hint {
  margin-left: auto;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.7rem;
  color: #6e7c74;
}

.nx-note {
  font-size: 0.76rem;
  color: #8c9a90;
  line-height: 1.5;
  margin: 10px 0 0 0;
}

.nx-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 10px;
  align-items: start;
}

/* --- Fichas de dato (tiles) --------------------------------------------- */
.nx-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
  gap: 10px;
}

/* Núcleo axiológico: los 6 módulos del criterio de la Escala de Valores.
   Columnas más anchas que .nx-tiles porque cada ficha lleva texto corrido. */
/* Las fichas del núcleo llevan texto largo (lecturas, enfoques, aspectos): a
   258 px de mínimo entraban cuatro en fila y el texto salía a tiras. Con 380
   son dos por fila en pantalla normal y respiran. */
.nx-nucleo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 10px;
}

.nx-nucleo .nx-tile {
  gap: 5px;
  align-items: flex-start;
}

.nx-tile {
  background: #1a2126;
  border: 1px solid #232a2e;
  border-radius: 9px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.nx-tile-label {
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8c9a90;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nx-tile-value {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
}

.nx-tile-value .nx-unit {
  font-size: 0.78rem;
  font-weight: 600;
  color: #6e7c74;
  margin-left: 1px;
}

.nx-tile-sub {
  font-size: 0.69rem;
  color: #6e7c74;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nx-tile-sub b { color: #c6d4c9; font-weight: 600; }

/* --- Barra bipolar (centro = 50 %) -------------------------------------- */
.nx-bip {
  position: relative;
  height: 9px;
  width: 100%;
  background: #232a2e;
  border-radius: 5px;
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 40px;
}

.nx-bip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(242, 251, 243, 0.38);
  z-index: 2;
}

.nx-bip > i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  opacity: 0.95;
}

/* Aguja: marca el valor exacto. Hace legible un resultado cercano al centro,
   donde el relleno apenas ocupa unos píxeles. */
.nx-bip > .nx-needle {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #e6f3e8;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
  z-index: 4;
}


/* =========================================================================
   PERFIL EN FRASES (#nx-module-list)
   -------------------------------------------------------------------------
   Sustituye a las 12 fichas de eje con sus pares de porcentajes y su valor
   firmado. Aquí no hay NINGUNA cifra en el flujo de lectura: un titular, la
   frase del eje que manda, los demás ejes como etiquetas y, plegados, los
   tres datos que sostienen la frase. Los números viven ahí dentro.
   ========================================================================= */

/* --- Cabecera: lo que más pesa ------------------------------------------ */

.pf-lead {
  border: 1px solid #232a2e;
  border-left: 3px solid var(--accent-color, #4af626);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.25);
  padding: 12px 16px 14px;
}

.pf-lead-title {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8c9a90;
}

.pf-lead-sentence {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: #c6d4c9;
}

.pf-lead-sentence b {
  color: #e6f3e8;
  font-weight: 700;
}

/* --- Un módulo ----------------------------------------------------------- */

.pf-mod {
  display: flex;
  flex-direction: column;
  gap: 9px;
  border: 1px solid #232a2e;
  border-left: 3px solid var(--pf-color, #2c3335);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.2);
  padding: 13px 16px 14px;
}

.pf-mod-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.pf-mod-icon { font-size: 1.1rem; line-height: 1; }

.pf-mod-name {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pf-color, #4af626);
}

/* La frase: el eje que manda y su dato. Es lo que se viene a leer. */
.pf-mod-sentence {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #e6f3e8;
}

.pf-mod-sentence b {
  color: var(--pf-color, #4af626);
  font-weight: 700;
}

/* Los demás ejes, en una línea y sin cifras. */
.pf-mod-others {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pf-others-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6e7c74;
  margin-right: 2px;
}

.pf-other {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.78rem;
  color: #c6d4c9;
  border: 1px solid #232a2e;
  border-radius: 2px;
  padding: 2px 8px;
}

.pf-other i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6e7c74;
}

.pf-other[data-side="pos"] i { color: #6bf955; }
.pf-other[data-side="neg"] i { color: #ff8a3d; }

/* --- La evidencia: plegada, con sus números y su causa ------------------ */

.pf-mod-why { margin-top: 1px; }

.pf-mod-why > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8c9a90;
  padding: 4px 0 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pf-mod-why > summary::-webkit-details-marker { display: none; }
.pf-mod-why > summary::before { content: '▸'; }
.pf-mod-why[open] > summary::before { content: '▾'; }
.pf-mod-why > summary:hover { color: var(--text-bright, #e6f3e8); }

.pf-ev-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pf-ev {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #c6d4c9;
}

.pf-ev-mark {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 800;
}

.pf-ev[data-side="pos"] .pf-ev-mark { color: #6bf955; }
.pf-ev[data-side="neg"] .pf-ev-mark { color: #ff8a3d; }

/* --- Barra de balance (elementos, polaridad, modalidades) ---------------- */
.nx-balance {
  display: flex;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  background: #232a2e;
}

.nx-balance > span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: #10171c;
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.35s ease;
}

.nx-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  font-size: 0.74rem;
  color: #8c9a90;
}

.nx-legend b { color: #c6d4c9; font-weight: 700; font-family: var(--font-mono); }

.nx-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

/* --- Filas de elementos -------------------------------------------------- */
.nx-el-rows { display: flex; flex-direction: column; gap: 9px; }

.nx-el-row {
  display: grid;
  grid-template-columns: 108px 1fr 46px;
  align-items: center;
  gap: 10px;
}

.nx-el-name { font-size: 0.8rem; color: #c6d4c9; white-space: nowrap; }
.nx-el-name span { font-weight: 700; }
.nx-el-pct { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; text-align: right; }
.nx-el-bar { height: 8px; background: #232a2e; border-radius: 4px; overflow: hidden; }
.nx-el-bar > i { display: block; height: 100%; border-radius: 4px; transition: width 0.35s ease; }

.nx-el-bodies {
  grid-column: 1 / -1;
  font-size: 0.7rem;
  color: #6e7c74;
  margin-top: -4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Medidor compacto (verdad y comunicación) ---------------------------- */
.nx-meter-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.nx-meter-value {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
}

.nx-meter-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #dce9df;
}

.nx-meter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
}

.nx-meter-pole {
  font-size: 0.68rem;
  color: #6e7c74;
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- Bloque plegado (explicaciones del motor) ---------------------------- */
.nx-more {
  margin-top: 11px;
  background: #10171c;
  border: 1px solid #232a2e;
  border-radius: 8px;
  overflow: hidden;
}

.nx-more > summary {
  cursor: pointer;
  padding: 9px 13px;
  font-size: 0.74rem;
  color: #8c9a90;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.nx-more > summary::-webkit-details-marker { display: none; }
.nx-more > summary::marker { content: ''; }
.nx-more > summary:hover { color: #c6d4c9; }
.nx-more[open] > summary { color: #dce9df; border-bottom: 1px solid #232a2e; }
.nx-more[open] > summary > span:first-child::first-letter { color: #4af626; }
.nx-more > summary .nx-more-meta { font-size: 0.68rem; color: #6e7c74; }

.nx-more-body { padding: 12px 13px 14px 13px; }

/* --- Factor de un eje (dentro de bloques plegados) ----------------------- */
.nx-factor {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.75rem;
  line-height: 1.45;
  padding: 4px 0;
  border-top: 1px solid #1a2126;
}

.nx-factor:first-child { border-top: none; }
.nx-factor-mark { font-weight: 800; flex-shrink: 0; }
.nx-factor-text { color: #8c9a90; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 720px) {
  .nx-el-row { grid-template-columns: 92px 1fr 42px; }
  .nx-meter-value { font-size: 1.6rem; }
  .nx-tile-value { font-size: 1.25rem; }
}

/* =========================================================================
   ESCALA DE VALORES (#mview-values) — lista jerárquica compacta
   -------------------------------------------------------------------------
   Una fila por valor, sin párrafos a la vista: la barra de afinidad es el
   propio fondo de la fila y el desarrollo se despliega al pulsarla.
   ========================================================================= */

.nx-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 10px 0;
  padding: 10px 12px;
  background: #10171c;
  border: 1px solid #2c3335;
  border-radius: 9px;
}

.nx-select,
.nx-search {
  background: #1a2126;
  color: #e6f3e8;
  border: 1px solid #2c3335;
  border-radius: 6px;
  padding: 6px 11px;
  font-size: 0.82rem;
  font-family: inherit;
}

.nx-select { cursor: pointer; }

.nx-search {
  flex: 1 1 190px;
  min-width: 160px;
}

.nx-select:focus,
.nx-search:focus {
  outline: none;
  border-color: #4af626;
}

.nx-toolbar .badge { margin-left: auto; }

/* --- Lista: una fila por valor ------------------------------------------ */
/* =========================================================================
   ESCALA DE VALORES (#mview-values): la escala primero
   -------------------------------------------------------------------------
   El orden de la pestaña es ESCALA → DE DÓNDE SALE → CONCLUSIÓN. Antes abría
   con los módulos del núcleo —que son el «porqué»— y la escala quedaba abajo,
   fuera de la pantalla. Y justo encima de la lista había un podio de tres
   fichas con los MISMOS tres valores y las MISMAS notas que sus tres primeras
   filas: decía lo mismo dos veces seguidas.

   El podio se quitó. El golpe de vista lo dan ahora esas tres filas, marcadas
   con `data-rank`, que crecen y llevan su medalla.
   ========================================================================= */

.vl-block { margin-top: 12px; }
.vl-block:first-of-type { margin-top: 0; }

.vl-block-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--phosphor, #4af626);
  border-bottom: 1px solid #232a2e;
  padding-bottom: 7px;
}

.vl-block-sub {
  font-family: var(--font-tech, inherit);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #8c9a90;
}

.vl-block-title .badge { margin-left: auto; }

/* Los tres que mandan: la escala abre con ellos y se ven sin buscar. */
.nx-vrow[data-rank="1"],
.nx-vrow[data-rank="2"],
.nx-vrow[data-rank="3"] {
  border-color: #2c3335;
}

.nx-vrow[data-rank="1"] > summary,
.nx-vrow[data-rank="2"] > summary,
.nx-vrow[data-rank="3"] > summary {
  min-height: 42px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.nx-vrow[data-rank="1"] .nx-vrow-title,
.nx-vrow[data-rank="2"] .nx-vrow-title,
.nx-vrow[data-rank="3"] .nx-vrow-title {
  font-size: 0.92rem;
  font-weight: 700;
}

.nx-vrow[data-rank="1"] .nx-vrow-rank,
.nx-vrow[data-rank="2"] .nx-vrow-rank,
.nx-vrow[data-rank="3"] .nx-vrow-rank { font-size: 1.05rem; }

.nx-vrow[data-rank="1"] .nx-vrow-score,
.nx-vrow[data-rank="2"] .nx-vrow-score,
.nx-vrow[data-rank="3"] .nx-vrow-score { font-size: 1.05rem; }

.nx-vlist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(372px, 1fr));
  gap: 5px;
}

.nx-vrow {
  background: #10171c;
  border: 1px solid #232a2e;
  border-radius: 7px;
  overflow: hidden;
  align-self: start;
}

.nx-vrow > summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  overflow: hidden;
}

.nx-vrow > summary::-webkit-details-marker { display: none; }
.nx-vrow > summary::marker { content: ''; }
.nx-vrow > summary:hover { background: #1a2126; }
.nx-vrow[open] { border-color: #2c3335; }
.nx-vrow[open] > summary { border-bottom: 1px solid #232a2e; }

/* Relleno de afinidad: da la forma de la jerarquía sin ocupar altura extra. */
.nx-vrow-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  opacity: 0.16;
  pointer-events: none;
}

.nx-vrow-rank,
.nx-vrow-title,
.nx-vrow-score,
.nx-vrow-caret { position: relative; }

.nx-vrow-rank {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #6e7c74;
  min-width: 26px;
  flex-shrink: 0;
}

.nx-vrow-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #dce9df;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nx-vrow-score {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 800;
  min-width: 24px;
  text-align: right;
  flex-shrink: 0;
}

.nx-vrow-caret {
  font-size: 0.6rem;
  color: #6e7c74;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.nx-vrow[open] .nx-vrow-caret { transform: rotate(90deg); }

.nx-vrow-body {
  padding: 10px 12px 12px 12px;
}

.nx-vrow-body p {
  margin: 0 0 8px 0;
  font-size: 0.79rem;
  color: #c6d4c9;
  line-height: 1.5;
}

.nx-vrow-motto {
  font-size: 0.76rem;
  font-style: italic;
  color: #8cff6b;
  border-left: 2px solid #4af626;
  padding-left: 9px;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .nx-vlist { grid-template-columns: 1fr; }
  .nx-vrow-title { white-space: normal; }
}

/* ============================================================================
 * MUDANZAS · editor de etapas de residencia (vista de creación/edición)
 * ----------------------------------------------------------------------------
 * La lista es la cronología de dónde vivió la persona; el formulario de debajo
 * añade o edita una etapa (fecha + lugar elegido por buscador o en el mapa).
 * ========================================================================== */
.reloc-editor {
  margin-top: 8px;
}

.reloc-list {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reloc-list .reloc-empty {
  font-size: 0.76rem;
  color: #8c9a90;
  font-style: italic;
  padding: 6px 2px;
}

.reloc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #2c3335;
  border-left: 3px solid #5fd3d8;
  border-radius: 6px;
  padding: 5px 8px;
  background: #10171c;
  font-size: 0.78rem;
}

/* La etapa en vigor hoy va resaltada; la que se está editando, marcada en oro. */
.reloc-item.active {
  border-color: #5fd3d8;
  background: rgba(95, 211, 216, 0.08);
}

.reloc-item.editing {
  outline: 1px solid #ffb000;
}

.reloc-when {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #5fd3d8;
  min-width: 112px;
}

.reloc-place {
  flex: 1;
  color: #c6d4c9;
  display: flex;
  flex-direction: column;
}

.reloc-coords {
  font-size: 0.66rem;
  color: #6e7c74;
  font-family: var(--font-mono);
}

.reloc-actions {
  display: flex;
  gap: 4px;
}

.reloc-form {
  border: 1px dashed #2c3335;
  border-radius: 8px;
  padding: 10px;
  background: #10171c;
}

.reloc-form-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #e6f3e8;
  margin-bottom: 8px;
}

.reloc-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 8px;
}

.reloc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reloc-field label {
  font-size: 0.72rem;
  color: #8c9a90;
}

.reloc-field input {
  padding: 6px 8px;
}

.reloc-undated-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: #8c9a90;
  cursor: pointer;
}

.reloc-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.reloc-draft {
  font-size: 0.72rem;
  color: #c6d4c9;
  font-family: var(--font-mono);
}

.reloc-draft.empty {
  color: #6e7c74;
  font-style: italic;
}

.reloc-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Chips de etapas del bloque de la pestaña de Tránsitos */
.reloc-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.reloc-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-family: var(--font-mono);
  background: #1a2126;
  border: 1px solid #2c3335;
  border-radius: 10px;
  padding: 1px 8px;
  color: #8c9a90;
}

.reloc-chip.active {
  border-color: #5fd3d8;
  color: #5fd3d8;
  background: rgba(95, 211, 216, 0.10);
}

/* Mapa del editor de mudanzas: mismo comportamiento que el del nacimiento,
   pero con su propio contenedor para no pisar el principal. */
#reloc-map-collapsible {
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.22s ease;
  max-height: 2000px;
  opacity: 1;
}

#reloc-map-collapsible.map-hidden {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

#reloc-map {
  width: 100%;
  height: 300px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: #0c1216;
  margin-bottom: 12px;
  z-index: 1;
}

/* Medición del salto de una etapa (editor de mudanzas): cuánto se recolocan el
   Ascendente y el Medio Cielo de la lectura de tránsitos respecto de la etapa
   anterior. Es la pista de si una mudanza se va a notar en la gráfica. */
.reloc-impact {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.64rem;
  font-family: var(--font-mono);
  color: #ffb000;
  background: rgba(255, 176, 0, 0.10);
  border: 1px solid rgba(255, 176, 0, 0.35);
  border-radius: 9px;
  padding: 0 7px;
  cursor: help;
}

/* ============================================================================
   PESTAÑA DE COMPATIBILIDAD DE CARTAS (synastry.js)
   Sinastría, carta compuesta y carta de relación de Davison. Todo el bloque
   vive bajo #mview-compat para no rozar ningún estilo existente.
   ========================================================================= */
#mview-compat .compat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#mview-compat .compat-verdict-card {
  border-width: 2px;
}

#mview-compat .compat-verdict-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

#mview-compat .compat-verdict-score {
  display: flex;
  align-items: baseline;
  gap: 2px;
  padding: 6px 16px;
  border: 2px solid;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-display);
  line-height: 1;
}

#mview-compat .compat-verdict-num {
  font-size: 2.6rem;
  font-weight: 700;
}

#mview-compat .compat-verdict-pct {
  font-size: 1.1rem;
}

#mview-compat .compat-verdict-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
  font-size: 0.82rem;
  color: var(--text-main);
}

/* --- Indicadores ponderados --------------------------------------------- */
#mview-compat .compat-indicators {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

#mview-compat .compat-indicator.is-off {
  opacity: 0.55;
}

#mview-compat .compat-indicator-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.85rem;
}

#mview-compat .compat-indicator-label {
  flex: 1;
  color: var(--text-bright);
  font-weight: 600;
}

#mview-compat .compat-indicator-weight {
  font-size: 0.7rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

#mview-compat .compat-indicator-score {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
}

#mview-compat .compat-bar {
  display: block;
  height: 8px;
  margin: 5px 0 0 0;
  background: #10171c;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  overflow: hidden;
}

#mview-compat .compat-bar-fill {
  display: block;
  height: 100%;
  transition: width 0.25s ease;
}

#mview-compat .compat-indicator-note {
  margin: 5px 0 0 0;
  font-size: 0.76rem;
  line-height: 1.4;
}

#mview-compat .compat-panels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

#mview-compat .compat-panel {
  background: #10171c;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 14px;
}

#mview-compat .compat-panel h4 {
  margin: 0 0 8px 0;
  font-size: 0.92rem;
  color: var(--text-bright);
}

/* --- Tablas ------------------------------------------------------------- */
#mview-compat .compat-table-wrap {
  margin-top: 12px;
  overflow-x: auto;
}

#mview-compat .compat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

#mview-compat .compat-table th {
  text-align: left;
  padding: 7px 9px;
  background: #171e23;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-color);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#mview-compat .compat-table td {
  padding: 7px 9px;
  border-bottom: 1px solid #1c2429;
  vertical-align: top;
  color: var(--text-main);
}

#mview-compat .compat-td-num {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--phosphor);
  text-align: center;
}

#mview-compat .compat-dim {
  color: var(--text-dim);
  font-size: 0.74rem;
}

/* --- Contactos e interaspectos ------------------------------------------ */
#mview-compat .compat-contact-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 640px;
  overflow-y: auto;
  padding-right: 4px;
}

#mview-compat .compat-contact {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: #10171c;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  font-size: 0.82rem;
}

#mview-compat .compat-contact-side {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
}

#mview-compat .compat-contact-side small {
  color: var(--text-dim);
  font-size: 0.72rem;
}

#mview-compat .compat-contact-right {
  justify-content: flex-end;
  text-align: right;
}

#mview-compat .compat-contact-mid {
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
}

#mview-compat .compat-contact-mid small {
  display: block;
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 400;
}

#mview-compat .compat-house-chip {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  font-size: 0.68rem;
  font-family: var(--font-mono);
  white-space: nowrap;
}

#mview-compat .compat-pillar-tag {
  font-size: 0.66rem;
  font-family: var(--font-mono);
  color: var(--amber);
  background: rgba(255, 176, 0, 0.12);
  border: 1px solid rgba(255, 176, 0, 0.35);
  border-radius: 9px;
  padding: 1px 8px;
  white-space: nowrap;
}

/* --- Superposición de casas --------------------------------------------- */
#mview-compat .compat-keys-summary {
  margin: 0 0 12px 0;
  padding-left: 18px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-main);
}

#mview-compat .compat-overlays-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

#mview-compat .compat-overlays-grid h4 {
  margin: 0 0 8px 0;
  font-size: 0.86rem;
  color: var(--text-bright);
}

#mview-compat .compat-overlay-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#mview-compat .compat-overlay-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  background: #10171c;
  border: 1px solid var(--border-color);
  border-left: 3px solid transparent;
  border-radius: 6px;
  font-size: 0.8rem;
}

#mview-compat .compat-overlay-row.is-highlight {
  border-left-color: var(--phosphor);
  background: rgba(74, 246, 38, 0.05);
}

#mview-compat .compat-overlay-pos {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.74rem;
}

/* --- Ruedas compuesta y Davison ----------------------------------------- */
#mview-compat .compat-wheel-grid {
  display: grid;
  grid-template-columns: minmax(280px, 440px) 1fr;
  gap: 20px;
  align-items: start;
}

#mview-compat .compat-wheel-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

#mview-compat .compat-wheel-side {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-main);
  min-width: 0;
}

#mview-compat .compat-wheel-side h4 {
  color: var(--text-bright);
  font-size: 0.9rem;
}

#mview-compat .compat-facts {
  margin: 0;
  padding-left: 18px;
  font-size: 0.84rem;
  line-height: 1.6;
}

#mview-compat .compat-aspect-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#mview-compat .compat-aspect-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 9px;
  background: #10171c;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  font-size: 0.8rem;
}

#mview-compat .compat-aspect-chip small {
  color: var(--text-dim);
  font-size: 0.68rem;
}

#mview-compat .compat-warn {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255, 90, 61, 0.08);
  border: 1px solid rgba(255, 90, 61, 0.35);
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #ffc9bd;
}

#mview-compat .compat-ok {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(74, 246, 38, 0.07);
  border: 1px solid rgba(74, 246, 38, 0.28);
  border-radius: 8px;
  font-size: 0.82rem;
  color: #b8f0b0;
}

/* --- Lo que molesta y lo que gusta: lectura directa ---------------------- */
#mview-compat .compat-sharp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

#mview-compat .compat-sharp-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#mview-compat .compat-sharp-col > h4 {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-bright);
}

#mview-compat .compat-focus-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

#mview-compat .compat-focus-sep {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--border-color);
}

#mview-compat .compat-focus {
  cursor: pointer;
}

#mview-compat .compat-focus.is-active {
  border-color: var(--phosphor);
  color: var(--phosphor);
  background: rgba(74, 246, 38, 0.1);
}

#mview-compat .compat-say-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#mview-compat .compat-say-group h5 {
  margin: 0;
  font-size: 0.74rem;
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

#mview-compat .compat-say-item {
  padding: 7px 10px;
  background: #10171c;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--border-color);
  border-radius: 7px;
}

#mview-compat .compat-say-item.is-tense {
  border-left-color: #ff5a3d;
}

#mview-compat .compat-say-item.is-soft {
  border-left-color: var(--phosphor);
}

#mview-compat .compat-say {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-main);
}

#mview-compat .compat-say strong {
  color: var(--text-bright);
}

#mview-compat .compat-say-item.is-tense .compat-say strong {
  color: #ff9a7d;
}

#mview-compat .compat-say-item.is-soft .compat-say strong {
  color: #8cff6b;
}

#mview-compat .compat-say-chip {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-dim);
}

/* --- Señales ocultas: declinaciones, Vértice, Lilith y Quirón ------------ */
#mview-compat .compat-hidden-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  align-items: start;
}

#mview-compat .compat-hidden-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#mview-compat .compat-hidden-block h4 {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-bright);
}

#mview-compat .compat-hidden-block .compat-say-item {
  border-left-color: var(--amber);
}

/* --- Bloques plegados (relleno a un clic) -------------------------------- */
#mview-compat .compat-fold {
  background: #10171c;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-main);
}

#mview-compat .compat-fold > summary {
  cursor: pointer;
  color: var(--amber);
  font-weight: 600;
}

#mview-compat .compat-fold-body {
  margin-top: 10px;
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
}

@media (max-width: 1000px) {
  #mview-compat .compat-wheel-grid {
    grid-template-columns: 1fr;
  }

  #mview-compat .compat-contact {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  #mview-compat .compat-contact-right {
    justify-content: flex-start;
    text-align: left;
  }

  #mview-compat .compat-contact-mid {
    text-align: left;
  }
}

/* ========================================================
   PESTAÑA DE TRÁNSITOS: JERARQUÍA, AIRE Y MANDOS LEGIBLES
   --------------------------------------------------------
   El gráfico temporal manda. Vive en una tarjeta normal con
   sus mandos DEBAJO y agrupados por temas (vista, aspectos,
   destacados, planetas). El cristal de fósforo (scanlines,
   retícula y reflejo) queda sólo en el lienzo del gráfico: es
   la única pieza que se lee como una pantalla, así que los
   controles dejan de vivir debajo de las scanlines.
   Todo va prefijado con #mview-transits para no tocar nada
   fuera de esta pestaña.
   ======================================================== */

#mview-transits .tv-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#mview-transits .card {
  padding: 14px 16px;
}

/* Cabecera de tarjeta: título a la izquierda, acciones o contador a la derecha */
#mview-transits .tv-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

#mview-transits .tv-card-title {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-bright);
  letter-spacing: 0.02em;
}

#mview-transits .tv-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

#mview-transits .tv-card-hint {
  font-size: 0.74rem;
  line-height: 1.5;
  margin: 0 0 10px 0;
}

/* ---- 1 · Cronología: cabecera del gráfico ---- */
#mview-transits .tv-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

#mview-transits .tv-head-left,
#mview-transits .tv-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#mview-transits .tv-title {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text-bright);
  display: flex;
  align-items: center;
  gap: 8px;
}

#mview-transits .tv-axis-note {
  font-size: 0.72rem;
  color: var(--text-dim);
}

#mview-transits .tv-status {
  font-family: var(--font-mono);
  font-size: 0.73rem;
  color: #8cff6b;
  background: rgba(74, 246, 38, 0.07);
  border: 1px solid rgba(74, 246, 38, 0.28);
  border-radius: 10px;
  padding: 2px 9px;
  white-space: nowrap;
}

#mview-transits .tv-badge-res {
  background: #10171c;
  border-color: #36b84a;
  color: #8cff6b;
}

/* ---- El lienzo: única pantalla de fósforo de la pestaña ---- */
#mview-transits .tv-chart {
  position: relative;
  width: 100%;
  min-height: 440px;
  overflow-x: auto;
}

#mview-transits .tv-legend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.74rem;
  color: var(--text-main);
}

#mview-transits .tv-legend .timeline-legend-items {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ---- Mandos del gráfico: filas con etiqueta, nunca amontonados ---- */
#mview-transits .tv-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-color);
}

#mview-transits .tv-row {
  display: flex;
  align-items: center;
  gap: 8px 16px;
  flex-wrap: wrap;
}

#mview-transits .tv-row-block {
  display: block;
}

#mview-transits .tv-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 26px;
}

#mview-transits .tv-group-grow {
  flex: 1 1 340px;
}

#mview-transits .tv-chip {
  font-size: 0.68rem;
  padding: 2px 9px;
}

#mview-transits .tv-chip-danger {
  background: #171e23;
  border-color: #ff5a3d;
  color: #ff8a72;
}

#mview-transits .tv-chip-danger:hover {
  background: #2a1a16;
  color: #ffb3a0;
}

#mview-transits .tv-toggles {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

#mview-transits .tv-toggles .aspect-toggle {
  font-size: 0.72rem;
  padding: 1px 6px;
  border: 1px solid transparent;
  border-radius: 12px;
}

#mview-transits .tv-toggles .aspect-toggle:hover {
  border-color: var(--border-strong);
  background: #1a2126;
}

#mview-transits .tv-source {
  font-size: 0.66rem;
  font-family: var(--font-mono);
  color: #8c9a90;
}

/* Bandeja de series del planeta enfocado */
#mview-transits .tv-subseries {
  background: rgba(16, 23, 28, 0.9);
  border: 1px solid #2c3335;
  border-left: 3px solid #4af626;
  border-radius: 5px;
  padding: 7px 9px;
}

#mview-transits .tv-subseries-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

#mview-transits .tv-subseries-title {
  font-size: 0.74rem;
  font-weight: 600;
  color: #8cff6b;
}

#mview-transits .tv-subseries-count {
  font-size: 0.68rem;
  color: var(--text-dim);
}

#mview-transits .tv-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Nota simbólica (ámbar) del tránsito seleccionado */
#mview-transits .tv-note-amber {
  margin-top: 8px;
  font-size: 0.76rem;
  line-height: 1.5;
  background: rgba(255, 176, 0, 0.08);
  border: 1px solid rgba(255, 176, 0, 0.35);
  border-left: 3px solid #ffb000;
  border-radius: 6px;
  padding: 8px 10px;
}

/* ---- Plegables: el resumen siempre a la vista ---- */
#mview-transits .tv-events {
  padding: 0;
}

#mview-transits .tv-events-summary,
#mview-transits .tv-fold > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

#mview-transits .tv-events-summary {
  padding: 12px 16px;
}

#mview-transits .tv-events-summary::-webkit-details-marker,
#mview-transits .tv-fold > summary::-webkit-details-marker {
  display: none;
}

#mview-transits .tv-events-summary::marker,
#mview-transits .tv-fold > summary::marker {
  content: '';
}

#mview-transits .tv-fold-arrow::before {
  content: '▸';
}

#mview-transits .tv-fold-arrow {
  display: inline-block;
  color: var(--phosphor);
  font-size: 0.72rem;
  transition: transform 0.15s ease;
  transform-origin: 50% 55%;
}

#mview-transits .tv-events[open] .tv-fold-arrow {
  transform: rotate(90deg);
}

#mview-transits .tv-events-summary:hover .tv-events-title {
  color: var(--accent-hover);
}

#mview-transits .tv-events-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-bright);
}

#mview-transits .tv-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #8fc0f0;
  background: rgba(143, 192, 240, 0.10);
  border: 1px solid #2f6fa8;
  border-radius: 4px;
  padding: 1px 7px;
  white-space: nowrap;
}

#mview-transits .tv-events-hint {
  font-size: 0.7rem;
  color: var(--text-dim);
}

#mview-transits .tv-events-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 14px 16px;
  border-top: 1px solid var(--border-color);
}

#mview-transits .tv-events-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

#mview-transits .tv-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
  background: #1a2126;
  border: 1px solid #232a2e;
  border-radius: 6px;
  padding: 8px;
}

#mview-transits .tv-form .field-item {
  margin: 0;
}

#mview-transits .tv-form .field-item label {
  font-size: 0.66rem;
}

#mview-transits .tv-form .life-event-input {
  width: 100%;
}

#mview-transits #life-event-date {
  width: 145px;
}

#mview-transits #life-event-category {
  width: 170px;
}

#mview-transits .tv-field-grow-1 {
  flex: 1 1 180px;
}

#mview-transits .tv-field-grow-2 {
  flex: 2 1 220px;
}

#mview-transits .tv-form-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

#mview-transits .tv-form-actions .btn-action {
  padding: 5px 12px;
  font-size: 0.74rem;
}

#mview-transits .tv-color-preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 33px;
  padding: 0 9px;
  border-radius: 5px;
  border: 1px solid #2c3335;
  background: #10171c;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

#mview-transits .tv-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #8fc0f0;
  border: 1px solid #00000055;
}

#mview-transits .tv-events-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 230px;
  overflow-y: auto;
}

/* ---- 3 · Rueda + fecha + aspectos ---- */
#mview-transits .tv-grid {
  gap: 16px;
}

#mview-transits .tv-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ---- El parte del día: qué tránsitos se están pasando y qué te cae hoy ----
   Va el primero de la columna de lecturas y se lee en seco: titular, veredicto
   y una fila por tránsito. El filo izquierdo de cada fila marca la familia del
   aspecto con los MISMOS colores de la rueda (tensión / fluido / fusión). */
#mview-transits .tv-today-card {
  border-left: 3px solid #ff8a3d;
}

#mview-transits .tv-today-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

#mview-transits .tv-today-title {
  margin: 0;
  font-size: 0.95rem;
  color: #e6f3e8;
}

#mview-transits .tv-today-when {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
}

#mview-transits .tv-today-lead {
  margin: 0 0 4px 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #e6f3e8;
}

#mview-transits .tv-today-verdict {
  margin: 0 0 8px 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #c6d4c9;
}

#mview-transits .tv-today-hint {
  margin: 0 0 8px 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-dim);
}

#mview-transits .tv-today-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#mview-transits .tv-today-row {
  border: 1px solid #2c3335;
  border-left-width: 3px;
  border-radius: 6px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.02);
}

#mview-transits .tv-today-row[data-tone="tension"] { border-left-color: #ff5a3d; }
#mview-transits .tv-today-row[data-tone="fluido"] { border-left-color: #4af626; }
#mview-transits .tv-today-row[data-tone="fusion"] { border-left-color: #ffb000; }

#mview-transits .tv-today-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

#mview-transits .tv-today-flow {
  font-size: 0.78rem;
  font-weight: 700;
  color: #ff8a3d;
}

#mview-transits .tv-today-row[data-tone="tension"] .tv-today-flow { color: #ff8a72; }
#mview-transits .tv-today-row[data-tone="fluido"] .tv-today-flow { color: #8cff6b; }
#mview-transits .tv-today-row[data-tone="fusion"] .tv-today-flow { color: #ffb000; }

#mview-transits .tv-today-orb {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-dim);
}

#mview-transits .tv-today-text {
  margin: 3px 0 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: #c6d4c9;
}

#mview-transits .tv-today-warn {
  color: #ffd27a;
}

#mview-transits .tv-wheel-legend {
  margin-top: 0;
  margin-bottom: 12px;
}

#mview-transits .tv-dates {
  display: flex;
  justify-content: space-around;
  gap: 12px;
  margin-top: 14px;
}

#mview-transits .tv-dates .date-display-value {
  font-size: 1rem;
}

#mview-transits #transit-natal-date {
  color: #4af626;
}

#mview-transits #transit-current-date {
  color: #ff8a3d;
}

#mview-transits .tv-now-btn {
  padding: 4px 12px;
  font-size: 0.78rem;
}

#mview-transits .tv-date-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}

#mview-transits .tv-date-grid .field-item input,
#mview-transits .tv-date-grid .field-item select {
  padding: 6px 8px;
  font-size: 0.9rem;
}

#mview-transits .tv-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

#mview-transits .tv-jump {
  display: flex;
  align-items: center;
  gap: 4px;
}

#mview-transits .tv-jump-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  min-width: 30px;
}

#mview-transits .tv-jump .btn-chip {
  padding: 2px 9px;
  font-size: 0.76rem;
  min-width: 36px;
}

#mview-transits .tv-aspects-card {
  display: flex;
  flex-direction: column;
}

#mview-transits .tv-aspects-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

#mview-transits .tv-aspects-card .tv-note-amber {
  margin-top: 12px;
  flex-shrink: 0;
}

/* ---- 4 · Dónde vivías en esta fecha ---- */
#mview-transits .tv-residence {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#mview-transits .tv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#mview-transits .tv-markers-row {
  margin-top: 0;
}

#mview-transits .tv-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#mview-transits .tv-options .aspect-toggle {
  font-size: 0.74rem;
}

#mview-transits .tv-mode-note,
#mview-transits .tv-jump-note {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
}

#mview-transits .tv-jump-note {
  background: rgba(95, 211, 216, 0.08);
  border: 1px solid rgba(95, 211, 216, 0.35);
  border-left: 3px solid #5fd3d8;
  border-radius: 6px;
  padding: 7px 9px;
}

#mview-transits .tv-fold > summary {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--amber);
  padding-top: 2px;
}

#mview-transits .tv-fold > summary::before {
  content: '▸ ';
}

#mview-transits .tv-fold[open] > summary::before {
  content: '▾ ';
}

#mview-transits .tv-fold-body {
  margin-top: 8px;
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--text-main);
}

#mview-transits .tv-fold-body p {
  margin: 0;
}

/* ---- Adaptación a pantallas estrechas ---- */
@media (max-width: 1050px) {
  #mview-transits .tv-date-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #mview-transits .tv-date-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #mview-transits .tv-group-grow {
    flex-basis: 100%;
  }

  #mview-transits .tv-events-hint {
    display: none;
  }
}