/**
 * Copyright (c) 2026 DNA Genics, S.L. All rights reserved.
 *
 * Relatives Analysis editorial catalog and interactive demo styles.
 */

.ra-page .container { margin-inline: auto; max-width: 1240px; padding-inline: clamp(1rem, 3vw, 2rem); width: 100%; }
.ra-page .ra-hero-preview { background: var(--catalog-surface); border: 1px solid var(--catalog-border); border-radius: 1rem; box-shadow: var(--catalog-shadow); margin: 0; overflow: hidden; }
.ra-page .ra-hero-preview figcaption { border-top: 1px solid var(--catalog-border); color: var(--catalog-muted); font-size: 0.8rem; padding: 0.75rem 1rem; }
.ra-page .ra-preview-header, .ra-page .ra-demo-header { align-items: center; background: #111820; border-bottom: 1px solid var(--catalog-border); display: flex; gap: 0.45rem; min-height: 48px; padding: 0.85rem 1rem; }
.ra-page .ra-preview-dot { background: var(--catalog-border-strong); border-radius: 50%; height: 0.55rem; width: 0.55rem; }
.ra-page .ra-preview-title { color: var(--catalog-muted); font-size: 0.8rem; font-weight: 700; margin-left: 0.35rem; }
.ra-page .ra-preview-content { padding: clamp(1rem, 3vw, 1.6rem); }
.ra-page .ra-mini-stats { display: grid; gap: 0.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ra-page .ra-mini-stat { background: var(--catalog-surface-raised); border: 1px solid var(--catalog-border); border-radius: 0.7rem; display: grid; gap: 0.25rem; padding: 0.85rem; }
.ra-page .ra-mini-stat .dna-icon { color: var(--catalog-gold); }
.ra-page .ra-mini-value { color: var(--catalog-cream); font-family: var(--dng-font-serif, Georgia, serif); font-size: 1.3rem; font-weight: 700; }
.ra-page .ra-mini-label { color: var(--catalog-soft); font-size: 0.72rem; }
.ra-page .ra-mini-chromo { display: grid; gap: 0.65rem; margin-top: 1.25rem; }
.ra-page .ra-chromo-bar { background: #0a0f15; border: 1px solid var(--catalog-border); border-radius: 999px; height: 0.8rem; overflow: hidden; position: relative; }
.ra-page .ra-chromo-segment { background: var(--catalog-gold); border-radius: 999px; bottom: 0; position: absolute; top: 0; }
.ra-page .ra-segment-alt { background: var(--catalog-success); }

.ra-page .ra-section-header { display: grid; grid-template-columns: 88px minmax(0, 1fr); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.ra-page .ra-section-header .catalog-chapter-number { grid-row: 1 / 4; }
.ra-page .ra-section-badge { color: var(--catalog-gold); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.ra-page .ra-section-title { color: var(--catalog-cream); font-family: var(--dng-font-serif, Georgia, serif); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; margin: 0.5rem 0 0; }
.ra-page .ra-section-subtitle { color: var(--catalog-muted); margin: 0.8rem 0 0; }
.ra-page .ra-features-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ra-page .ra-feature-card { background: var(--catalog-surface); border: 1px solid var(--catalog-border); border-radius: 1rem; padding: 1.5rem; }
.ra-page .ra-feature-icon { align-items: center; background: var(--catalog-surface-soft); border: 1px solid var(--catalog-border); border-radius: 0.75rem; color: var(--catalog-gold); display: flex; height: 3rem; justify-content: center; width: 3rem; }
.ra-page .ra-feature-card h3 { color: var(--catalog-cream); font-family: var(--dng-font-serif, Georgia, serif); font-size: 1.4rem; margin: 1rem 0 0.6rem; }
.ra-page .ra-feature-card p { color: var(--catalog-muted); margin: 0; }

.ra-page .ra-demo-tabs { display: flex; gap: 0.45rem; margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0.35rem; }
.ra-page .ra-demo-tab, .ra-page .ra-chromo-tab, .ra-page .ra-action-btn, .ra-page .ra-page-btn { background: var(--catalog-surface); border: 1px solid var(--catalog-border); color: var(--catalog-muted); cursor: pointer; font: inherit; }
.ra-page .ra-demo-tab { align-items: center; border-radius: 999px; display: inline-flex; flex: 0 0 auto; gap: 0.45rem; min-height: 44px; padding: 0.6rem 0.9rem; }
.ra-page .ra-demo-tab.active, .ra-page .ra-demo-tab:hover, .ra-page .ra-chromo-tab.active, .ra-page .ra-chromo-tab:hover { background: var(--catalog-gold); border-color: var(--catalog-gold); color: #12181f; }
.ra-page .ra-demo-container { background: var(--catalog-surface); border: 1px solid var(--catalog-border); border-radius: 1rem; box-shadow: var(--catalog-shadow); overflow: hidden; }
.ra-page .ra-demo-panel { display: none; min-height: 460px; padding: clamp(1rem, 3vw, 1.75rem); }
.ra-page .ra-demo-panel.active { display: block; }
.ra-page .ra-demo-header { border: 0; border-radius: 0.7rem; justify-content: space-between; margin-bottom: 1rem; }
.ra-page .ra-demo-header h3, .ra-page .ra-table-card h4, .ra-page .ra-chromo-legend h4, .ra-page .ra-cluster-details h4, .ra-page .ra-cluster-chromo h4, .ra-page .ra-map-sidebar h4 { color: var(--catalog-cream); font-size: 1rem; margin: 0; }
.ra-page .ra-demo-badge { border: 1px solid var(--catalog-gold); border-radius: 999px; color: var(--catalog-gold); font-size: 0.65rem; font-weight: 800; padding: 0.25rem 0.55rem; text-transform: uppercase; }

.ra-page .ra-overview-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ra-page .ra-stat-card { align-items: center; background: var(--catalog-surface-raised); border: 1px solid var(--catalog-border); border-radius: 0.75rem; display: flex; gap: 0.8rem; min-width: 0; padding: 1rem; }
.ra-page .ra-stat-icon { align-items: center; background: var(--catalog-surface-soft); border-radius: 0.6rem; color: var(--catalog-gold); display: flex; flex: 0 0 auto; height: 2.5rem; justify-content: center; width: 2.5rem; }
.ra-page .ra-stat-content { display: grid; min-width: 0; }
.ra-page .ra-stat-label, .ra-page .ra-stat-count { color: var(--catalog-soft); font-size: 0.72rem; }
.ra-page .ra-stat-value { color: var(--catalog-cream); font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.ra-page .ra-overview-tables { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
.ra-page .ra-table-card, .ra-page .ra-chromo-browser, .ra-page .ra-cluster-details, .ra-page .ra-cluster-chromo { background: var(--catalog-surface-raised); border: 1px solid var(--catalog-border); border-radius: 0.75rem; padding: 1rem; }
.ra-page .ra-distribution-list { display: grid; gap: 0.7rem; margin-top: 1rem; }
.ra-page .ra-distribution-item { align-items: center; display: grid; gap: 0.65rem; grid-template-columns: minmax(90px, 0.8fr) 2fr 2rem; }
.ra-page .ra-dist-name, .ra-page .ra-dist-count { color: var(--catalog-muted); font-size: 0.78rem; }
.ra-page .ra-dist-bar-container { background: #0a0f15; border-radius: 999px; height: 0.45rem; overflow: hidden; }
.ra-page .ra-dist-bar { background: var(--catalog-gold); height: 100%; }
.ra-page .ra-bar-location { background: var(--catalog-success); }

.ra-page .ra-chromo-tabs { display: flex; gap: 0.35rem; overflow-x: auto; padding-bottom: 0.6rem; }
.ra-page .ra-chromo-tab { border-radius: 0.45rem; flex: 0 0 auto; height: 2.2rem; min-width: 2.2rem; }
.ra-page .ra-chromo-display { margin-top: 1.25rem; }
.ra-page .ra-chromo-title { color: var(--catalog-cream); font-weight: 800; margin-bottom: 0.8rem; }
.ra-page .ra-chromo-visualization { background: #0a0f15; border: 1px solid var(--catalog-border); border-radius: 999px; min-height: 3rem; overflow: hidden; position: relative; }
.ra-page .ra-chromo-track { height: 3rem; position: relative; width: 100%; }
.ra-page .ra-segment { border: 1px solid rgba(255, 255, 255, 0.35); bottom: 0.45rem; position: absolute; top: 0.45rem; }
.ra-page .ra-chromo-empty { color: var(--catalog-soft); font-size: 0.8rem; padding: 0.85rem 1rem; text-align: center; }
.ra-page .ra-chromo-scale { color: var(--catalog-soft); display: flex; font-size: 0.65rem; justify-content: space-between; padding-top: 0.45rem; }
.ra-page .ra-chromo-legend { margin-top: 1.5rem; }
.ra-page .ra-legend-items { color: var(--catalog-muted); display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.ra-page .ra-legend-item { align-items: center; display: grid; gap: 0.6rem; grid-template-columns: 0.8rem 1fr auto; }
.ra-page .ra-legend-color { border-radius: 50%; height: 0.7rem; width: 0.7rem; }

.ra-page .ra-table-controls, .ra-page .ra-pagination { align-items: center; display: flex; gap: 0.75rem; justify-content: space-between; }
.ra-page .ra-search-box { align-items: center; background: var(--catalog-surface-raised); border: 1px solid var(--catalog-border); border-radius: 0.55rem; display: flex; gap: 0.5rem; padding: 0.55rem 0.75rem; }
.ra-page .ra-search-box input { background: transparent; border: 0; color: var(--catalog-text); min-width: 220px; outline: 0; }
.ra-page .ra-table-actions, .ra-page .ra-page-controls { display: flex; gap: 0.4rem; }
.ra-page .ra-action-btn, .ra-page .ra-page-btn { border-radius: 0.45rem; min-height: 38px; min-width: 38px; }
.ra-page .ra-table-wrapper { margin: 1rem 0; overflow-x: auto; }
.ra-page .ra-matches-table { border-collapse: collapse; min-width: 920px; width: 100%; }
.ra-page .ra-matches-table th, .ra-page .ra-matches-table td { border-bottom: 1px solid var(--catalog-border); color: var(--catalog-muted); font-size: 0.78rem; padding: 0.75rem; text-align: left; }
.ra-page .ra-matches-table th { color: var(--catalog-cream); cursor: default; }
.ra-page .ra-matches-table th.sortable { cursor: pointer; }
.ra-page .ra-page-info, .ra-page .ra-page-current { color: var(--catalog-soft); font-size: 0.78rem; }

.ra-page .ra-cluster-info, .ra-page .ra-cluster-hint, .ra-page .ra-mini-chromo-info { color: var(--catalog-muted); }
.ra-page .ra-cluster-grid { display: grid; gap: 0.55rem; grid-template-columns: repeat(8, minmax(54px, 1fr)); margin: 1rem 0; }
.ra-page .ra-cluster-card { border: 2px solid transparent; border-radius: 0.65rem; color: #10161d; cursor: pointer; display: grid; font: inherit; gap: 0.15rem; min-height: 84px; padding: 0.55rem; text-align: left; }
.ra-page .ra-cluster-card.active, .ra-page .ra-cluster-card:hover { border-color: var(--catalog-cream); }
.ra-page .ra-cluster-card strong { font-size: 1.2rem; }
.ra-page .ra-cluster-card span, .ra-page .ra-cluster-card small { font-size: 0.65rem; font-weight: 700; }
.ra-page .ra-cluster-details, .ra-page .ra-cluster-chromo { margin-top: 1rem; }
.ra-page .ra-cluster-members { color: var(--catalog-muted); margin-top: 0.75rem; }
.ra-page .ra-cluster-members-list { display: grid; gap: 0.55rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ra-page .ra-member-card { align-items: center; background: var(--catalog-surface-soft); border-radius: 0.55rem; display: flex; gap: 0.65rem; padding: 0.65rem; }
.ra-page .ra-member-avatar { align-items: center; border-radius: 50%; color: #10161d; display: flex; flex: 0 0 auto; font-weight: 800; height: 2rem; justify-content: center; width: 2rem; }
.ra-page .ra-member-card span:last-child { display: grid; }
.ra-page .ra-member-card strong { color: var(--catalog-cream); font-size: 0.78rem; }
.ra-page .ra-member-card small { color: var(--catalog-soft); font-size: 0.68rem; }
.ra-page .ra-mini-chromo-bar { background: #0a0f15; border: 1px solid var(--catalog-border); border-radius: 999px; min-height: 2rem; position: relative; }
.ra-page .ra-mini-chromo-segment { border-radius: 999px; bottom: 0.35rem; position: absolute; top: 0.35rem; }

.ra-page .ra-map-container { display: grid; gap: 1rem; grid-template-columns: minmax(190px, 0.3fr) minmax(0, 1fr); }
.ra-page .ra-map-sidebar { background: var(--catalog-surface-raised); border: 1px solid var(--catalog-border); border-radius: 0.75rem; padding: 1rem; }
.ra-page .ra-location-list { color: var(--catalog-muted); display: grid; gap: 0.45rem; margin-top: 0.75rem; }
.ra-page .ra-location-item { align-items: center; background: transparent; border: 1px solid var(--catalog-border); border-radius: 0.55rem; color: var(--catalog-muted); cursor: pointer; display: flex; font: inherit; gap: 0.6rem; padding: 0.55rem; text-align: left; }
.ra-page .ra-location-item:hover { border-color: var(--catalog-gold); }
.ra-page .ra-location-marker { align-items: center; background: var(--catalog-gold); border-radius: 50%; color: #10161d; display: flex; flex: 0 0 auto; font-size: 0.7rem; font-weight: 800; height: 1.7rem; justify-content: center; width: 1.7rem; }
.ra-page .ra-location-item span:last-child { display: grid; }
.ra-page .ra-location-item strong { color: var(--catalog-cream); font-size: 0.76rem; }
.ra-page .ra-location-item small { color: var(--catalog-soft); font-size: 0.66rem; }
.ra-page .ra-leaflet-map { background: #1b232d; border: 1px solid var(--catalog-border); border-radius: 0.75rem; height: 440px; overflow: hidden; }
.ra-page .ra-demo-cta { align-items: center; display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem; }
.ra-page .ra-demo-cta p { color: var(--catalog-muted); margin: 0; }
.ra-page .ra-btn-primary { align-items: center; background: var(--catalog-gold); border: 1px solid var(--catalog-gold); border-radius: 999px; color: #111820 !important; display: inline-flex; font-weight: 800; gap: 0.45rem; min-height: 44px; padding: 0.65rem 1rem; text-decoration: none !important; }

.ra-page .ra-steps { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ra-page .ra-step { background: var(--catalog-surface); border: 1px solid var(--catalog-border); border-top: 3px solid var(--catalog-gold); border-radius: 0 0 0.9rem 0.9rem; padding: 1.5rem; }
.ra-page .ra-step-number { color: var(--catalog-gold); font-family: var(--dng-font-serif, Georgia, serif); font-size: 2rem; }
.ra-page .ra-step-icon { color: var(--catalog-gold); margin-top: 1rem; }
.ra-page .ra-step h3 { color: var(--catalog-cream); margin: 0.7rem 0 0.5rem; }
.ra-page .ra-step p { color: var(--catalog-muted); margin: 0; }

@media (max-width: 1024px) { .ra-page .ra-features-grid, .ra-page .ra-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ra-page .ra-cluster-grid { grid-template-columns: repeat(4, minmax(54px, 1fr)); } }
@media (max-width: 767.98px) { .ra-page .ra-section-header { grid-template-columns: 1fr; } .ra-page .ra-section-header .catalog-chapter-number { grid-row: auto; } .ra-page .ra-features-grid, .ra-page .ra-overview-grid, .ra-page .ra-overview-tables, .ra-page .ra-steps, .ra-page .ra-map-container { grid-template-columns: 1fr; } .ra-page .ra-cluster-members-list { grid-template-columns: 1fr; } .ra-page .ra-demo-panel { min-height: 0; } .ra-page .ra-table-controls, .ra-page .ra-pagination, .ra-page .ra-demo-cta { align-items: stretch; flex-direction: column; } .ra-page .ra-search-box input { min-width: 0; width: 100%; } .ra-page .ra-leaflet-map { height: 360px; } }
@media (max-width: 479.98px) { .ra-page .ra-mini-stats { grid-template-columns: 1fr; } .ra-page .ra-cluster-grid { grid-template-columns: repeat(2, minmax(54px, 1fr)); } .ra-page .ra-distribution-item { grid-template-columns: 78px 1fr 1.5rem; } }
@media print { .ra-page .ra-demo-tabs, .ra-page .ra-demo-cta, .ra-page .ra-table-actions, .ra-page .ra-pagination, .ra-page .ra-map-container { display: none !important; } .ra-page .ra-demo-panel { display: none !important; } .ra-page #demo-overview { display: block !important; } }