/* === VARIABLES === */
:root {
    /* === BASE COLORS === */
    --bg-color: #000000;
    --bg-secondary: #020617;
    --bg-tertiary: #0f172a;
    --bg-surface: #0a1428;

    /* === PANEL/CARD COLORS === */
    --panel-bg: rgba(20, 30, 50, 0.6);
    --panel-bg-solid: rgba(10, 20, 40, 0.9);
    --panel-border: rgba(100, 150, 255, 0.2);
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-bg-hover: rgba(255, 255, 255, 0.08);
    --card-border: rgba(255, 255, 255, 0.05);

    /* === TEXT COLORS === */
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --text-muted: rgba(255, 255, 255, 0.5);
    --text-inverted: #000000;

    /* === ACCENT COLORS === */
    --accent-color: #3eabf7;
    --accent-hover: #2d8acb;
    --accent-glow: rgba(62, 171, 247, 0.4);
    --accent-subtle: rgba(62, 171, 247, 0.1);
    --accent-border: rgba(62, 171, 247, 0.3);

    /* === OVERLAY COLORS === */
    --overlay-light: rgba(255, 255, 255, 0.1);
    --overlay-dark: rgba(0, 0, 0, 0.3);
    --shadow-color: rgba(0, 0, 0, 0.5);

    /* === LAYOUT === */
    --timeline-item-width: 300px;
    --font-family: 'Inter', sans-serif;
}

/* =========================================
   LIGHT THEME (clásico)
   ========================================= */
[data-theme="light"] {
    --bg-color: #f8fafc;
    --bg-secondary: #f1f5f9;
    --bg-tertiary: #e2e8f0;
    --bg-surface: #ffffff;

    --panel-bg: rgba(255, 255, 255, 0.9);
    --panel-bg-solid: rgba(255, 255, 255, 0.95);
    --panel-border: rgba(0, 0, 0, 0.1);
    --card-bg: rgba(0, 0, 0, 0.02);
    --card-bg-hover: rgba(0, 0, 0, 0.05);
    --card-border: rgba(0, 0, 0, 0.08);

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: rgba(0, 0, 0, 0.5);
    --text-inverted: #ffffff;

    --accent-color: #0284c7;
    --accent-hover: #0369a1;
    --accent-glow: rgba(2, 132, 199, 0.3);
    --accent-subtle: rgba(2, 132, 199, 0.1);
    --accent-border: rgba(2, 132, 199, 0.4);

    --overlay-light: rgba(0, 0, 0, 0.05);
    --overlay-dark: rgba(0, 0, 0, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.15);
}

/* =========================================
   RETRO THEME — periódico papel + tinta
   ========================================= */
[data-theme="retro"] {
    --paper: #F4F0E8;
    --paper-light: #FAF7F2;
    --paper-globe: #E8E2D6;
    --ink: #1A1A1A;
    --gray: #8A8A8A;
    --gray-light: #D4D0C8;
    --brand: #E03E3E;
    --analysis: #2B5CE6;
    --highlight: #F5D547;

    --shadow-paper: 4px 6px 20px rgba(0, 0, 0, 0.18), 1px 1px 0 rgba(0, 0, 0, 0.06);
    --shadow-ink: 8px 10px 30px rgba(0, 0, 0, 0.26);
    --font-serif: 'Playfair Display', Georgia, serif;

    --bg-color: var(--paper);
    --bg-secondary: var(--paper-light);
    --bg-tertiary: var(--gray-light);
    --bg-surface: var(--paper-light);

    --panel-bg: rgba(250, 247, 242, 0.92);
    --panel-bg-solid: var(--paper-light);
    --panel-border: rgba(26, 26, 26, 0.12);
    --card-bg: var(--paper-light);
    --card-bg-hover: var(--paper);
    --card-border: var(--gray-light);

    --text-primary: var(--ink);
    --text-secondary: #5C5C5C;
    --text-muted: var(--gray);
    --text-inverted: var(--paper-light);

    --accent-color: var(--brand);
    --accent-hover: #C43333;
    --accent-glow: rgba(224, 62, 62, 0.2);
    --accent-subtle: rgba(224, 62, 62, 0.08);
    --accent-border: rgba(224, 62, 62, 0.35);
    --accent-analysis: var(--analysis);
    --accent-analysis-subtle: rgba(43, 92, 230, 0.10);
    --accent-highlight: var(--highlight);
    --accent-highlight-subtle: rgba(245, 213, 71, 0.65);

    --overlay-light: rgba(26, 26, 26, 0.04);
    --overlay-dark: rgba(26, 26, 26, 0.08);
    --shadow-color: rgba(0, 0, 0, 0.18);
}

/* === RESET / BASE === */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-primary);
    /* Allow scrolling in specific containers */
    height: 100vh;
    margin: 0;
}

/* Main Globe Container (Hybrid Engine Wrapper)
   Oculto por defecto: si no, al refrescar se ve el fondo del globo
   un instante antes de que el feed (z-index 100) lo tape. */
#mainGlobeContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 50;
    overflow: hidden;
    background: #020617;
    display: none;
    visibility: hidden;
    pointer-events: none;
}

/* Por encima de #prismaSection (z-index 100) cuando el modo globo está activo */
#mainGlobeContainer.is-visible {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 200 !important;
}

#globeViz {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    z-index: 5;
    transition: opacity 0.5s ease-in-out;
}

#globeViz.hidden {
    opacity: 0;
    pointer-events: none;
}

#mainLeafletMap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}

#mainLeafletMap.active {
    opacity: 1;
    pointer-events: auto;
}

#mainGlobeHint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s;
}

#mainGlobeContainer:hover #mainGlobeHint {
    opacity: 1;
}

/* === LAYOUT === */
/* Panels */
.panel {
    position: absolute;
    z-index: 60;
    /* Higher than globeViz (50) */
    background: var(--panel-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 30px var(--shadow-color);
}

/* === LEFT PANEL === */
/* Solo visible en modo globe — si no, flash de “vista globe” al refrescar */
.left-panel {
    top: 20px;
    left: 20px;
    width: 320px;
    max-height: calc(100vh - 40px);
    display: none;
    flex-direction: column;
    gap: 20px;
    z-index: 250; /* por encima del globo grande (is-visible = 200) */
}

html[data-view-mode="globe"] .left-panel {
    display: flex !important;
}

/* Mapa Leaflet externo del motor híbrido legacy — oculto hasta transición */
#leafletMap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 190;
    display: none;
    opacity: 0;
    pointer-events: none;
    background: #020617;
}

#leafletMap.active {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 210 !important;
}

.header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-color);
}

.subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.main-nav {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.nav-btn {
    flex: 1;
    background: var(--card-bg);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--text-secondary);
    padding: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.nav-btn i {
    width: 14px;
}

.nav-btn:hover {
    background: var(--overlay-light);
    color: var(--text-primary);
}

.nav-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--text-inverted);
    box-shadow: 0 0 15px var(--accent-glow);
}

.date-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--overlay-dark);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--panel-border);
}

.icon-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
}

.icon-btn:hover {
    background: var(--overlay-light);
}

.topic-select label {
    display: block;
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.topic-select select {
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 10px;
    color: var(--text-primary);
    font-size: 0.95em;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}

.topic-select select:hover {
    border-color: var(--accent-border);
}

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

/* === NEWS LIST === */
.news-list h3 {
    font-size: 1rem;
    margin-bottom: 15px;
    color: var(--accent-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.results-badge {
    font-size: 0.65rem;
    background: var(--accent-subtle);
    color: var(--accent-color);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--accent-border);
    font-weight: 700;
}

.news-list ul {
    list-style: none;
}

.news-list li {
    margin-bottom: 12px;
    font-size: 0.9rem;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--card-border);
    cursor: pointer;
    transition: color 0.2s;
}

.news-list li:hover {
    color: var(--accent-color);
}

.news-list li:last-child {
    border-bottom: none;
}

/* Loading & Empty States */
.loading-state,
.empty-state {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--accent-subtle);
    border-radius: 50%;
    border-top-color: var(--accent-color);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.footer-links {
    margin-top: auto;
    display: flex;
    gap: 15px;
    font-size: 0.8rem;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* News Marker Styles */
.news-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    pointer-events: auto !important;
    transform: translate(-50%, -50%);
    /* Hit area ampliada: el punto solo es 12px y el click se pierde fácil */
    padding: 14px;
    margin: -14px;
}

.marker-dot {
    width: 14px;
    height: 14px;
    background: var(--accent-color);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-color), 0 0 20px rgba(62, 171, 247, 0.5);
    animation: pulse 2s infinite;
    transition: transform 0.3s;
    pointer-events: none; /* el padre .news-marker recibe el gesto */
}

.marker-dot--multi,
.news-marker .marker-dot[style*="ffaa00"] {
    background: #ffaa00;
    box-shadow: 0 0 10px #ffaa00;
}

.news-marker:hover .marker-dot {
    transform: scale(1.3);
    background: #fff;
    box-shadow: 0 0 20px #fff;
}

.marker-card {
    margin-top: 8px;
    background: var(--panel-bg-solid);
    border: 1px solid var(--accent-border);
    border-radius: 8px;
    padding: 10px 14px;
    width: 200px;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 25px var(--shadow-color);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* El tooltip es informativo; el gesto lo captura el padre (pointerdown) */
    pointer-events: none;
    text-align: center;
    position: absolute;
    top: 28px;
}

.news-marker:hover .marker-card {
    opacity: 1;
    transform: translateY(0);
    z-index: 100;
}

.marker-title {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.3;
    text-shadow: 0 1px 2px var(--shadow-color);
}

.marker-source {
    font-size: 0.7em;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(62, 171, 247, 0.7);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(62, 171, 247, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(62, 171, 247, 0);
    }
}

/* === LOCATION HECHOS FEED (panel dedicado sobre el globo) === */
.location-hechos-feed {
    position: fixed;
    top: 20px;
    right: 20px;
    width: min(420px, calc(100vw - 40px));
    max-height: calc(100vh - 40px);
    z-index: 10000 !important;
    display: flex;
    flex-direction: column;
    background: var(--panel-bg-solid, rgba(10, 18, 32, 0.96));
    border: 1px solid var(--accent-border, rgba(62, 171, 247, 0.45));
    border-radius: 14px;
    backdrop-filter: blur(18px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
    transform: translateX(120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
    overflow: hidden;
}

.location-hechos-feed.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.location-hechos-feed__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    flex-shrink: 0;
}

.location-hechos-feed__source {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-color, #3eabf7);
    margin-bottom: 6px;
}

.location-hechos-feed__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 650;
    color: var(--text-primary, #fff);
    line-height: 1.3;
}

.location-hechos-feed__close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #fff);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
}

.location-hechos-feed__close:hover {
    background: rgba(255, 255, 255, 0.12);
}

.location-hechos-feed__body {
    overflow-y: auto;
    padding: 8px;
    flex: 1;
    min-height: 0;
}

/* === NEWS READER === */
/* News Reader Panel — must sit above #mainGlobeContainer.is-visible (z-index 200)
   or location clicks on the vision globe open the panel behind the WebGL canvas. */
.news-reader-panel {
    position: fixed;
    top: 20px;
    right: 20px;
    max-height: calc(100vh - 40px);
    width: 400px;
    background: var(--panel-bg-solid);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    backdrop-filter: blur(16px);
    z-index: 260;
    box-shadow: -10px 0 40px var(--shadow-color);
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: none;
}

.news-reader-panel.open {
    transform: translateX(0);
    pointer-events: auto;
}

/* Location feed cards (shared by dedicated panel + legacy reader) */
.location-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

.location-feed--empty {
    padding: 24px 12px;
    text-align: center;
    opacity: 0.7;
    line-height: 1.5;
}

.location-feed-card {
    cursor: pointer;
    opacity: 0.92 !important;
    transform: none !important;
    min-height: auto;
    padding: 18px 16px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    margin-bottom: 4px;
}

.location-feed-card:hover,
.location-feed-card.active {
    opacity: 1 !important;
    background: var(--accent-subtle, rgba(62, 171, 247, 0.12));
    transform: none !important;
}

.location-feed-card h3 {
    font-size: 1rem;
    margin-bottom: 10px;
    max-width: 100%;
}

.location-feed-card p {
    font-size: 0.92rem;
    max-width: 100%;
    margin-bottom: 12px;
}

.location-feed-card .event-date {
    margin-top: 14px;
    font-size: 0.75rem;
    letter-spacing: 2px;
    padding: 4px 12px;
}

.location-feed-card .event-card-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.location-feed-card .event-card-logo {
    height: 18px;
    width: auto;
    border-radius: 2px;
    object-fit: contain;
}

.location-feed-card .event-card-preview-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    margin-bottom: 12px;
    background: #111;
}

.location-feed-card:has(.event-card-preview-img) h3 {
    margin-bottom: 8px;
}

.location-feed-card:has(.event-card-preview-img) p {
    font-size: 0.88rem;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.reader-header {
    padding: 20px;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: var(--card-bg);
}

.reader-source {
    color: var(--accent-color);
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.reader-title {
    margin: 0;
    font-size: 1.6em;
    line-height: 1.3;
    color: var(--text-primary);
}

.reader-content {
    padding: 25px;
    overflow-y: auto;
    flex: 1;
    font-size: 1.05em;
    line-height: 1.7;
    color: var(--text-secondary);
}

.reader-content p {
    margin-bottom: 20px;
}

.reader-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s;
}

.reader-close:hover {
    color: var(--text-primary);
}

.read-more-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background: var(--accent-subtle);
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9em;
    transition: all 0.2s;
}

.read-more-btn:hover {
    background: var(--accent-color);
    color: var(--text-inverted);
}

/* === DESCRIPTION MODAL (Read More in Feed) === */
.desc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 11000; /* above #locationHechosFeed (10000) and bubbles-dock (10001) */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 16px;
}

.desc-modal-overlay.active {
    opacity: 1;
}

.desc-modal-container,
.hds-container {
    background: var(--panel-bg-solid);
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    width: min(560px, 100%);
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 18px 50px var(--shadow-color);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

.desc-modal-overlay.active .desc-modal-container {
    transform: translateY(0) scale(1);
}

.desc-modal-content,
.hds-content {
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    min-height: 0;
}

.desc-modal-header,
.hds-header {
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--card-border);
    position: relative;
    flex-shrink: 0;
}

.desc-modal-tag {
    color: var(--accent-color);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
}

.desc-modal-header h2,
.hds-header-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.desc-modal-close {
    position: static;
    top: auto;
    right: auto;
    background: var(--overlay-light);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.desc-modal-close:hover {
    color: var(--text-primary);
    background: var(--card-bg-hover);
}

.hds-header-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hds-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--overlay-light);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s ease;
}

.hds-action-btn:hover:not(:disabled) {
    color: var(--text-primary);
    background: var(--card-bg-hover);
}

.hds-action-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.hds-action-btn svg {
    width: 16px;
    height: 16px;
}

.hds-export-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 18px 16px;
}

.hds-export-btn {
    flex: 1 1 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 12px;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.82rem;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.hds-export-btn:hover:not(:disabled) {
    background: var(--card-bg-hover);
}

.hds-export-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.hds-export-btn.whatsapp {
    border-color: #25d36655;
}

.hds-export-btn.whatsapp .hds-wa {
    color: #25d366;
}

.hds-capture-root {
    background: var(--panel-bg-solid);
}

.hds-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 4000;
    box-shadow: 0 8px 24px var(--shadow-color);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.hds-toast.show {
    opacity: 1;
}

.desc-modal-body,
.hds-body {
    padding: 0;
    overflow-y: auto;
    min-height: 0;
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.hds-loading {
    padding: 36px 20px;
    text-align: center;
    color: var(--text-muted);
}

.hds-hero {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--bg-tertiary);
}

.hds-hero img,
.hds-hero video,
.hds-hero .hds-hero-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hds-hero-ph {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-surface));
}

.hds-brand-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

.hds-brand {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: var(--accent-color);
}

.hds-brand-sub {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}

.hds-watermark {
    margin-top: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: right;
    color: var(--text-muted);
    opacity: 0.8;
}

.hds-main {
    padding: 16px 18px 22px;
}

.hds-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    margin: 0 0 10px;
}

.hds-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.hds-pill {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 999px;
}

.hds-pill.muted {
    color: var(--text-secondary);
    background: var(--overlay-light);
}

.hds-macro {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: 12px;
}

.hds-desc {
    margin: 0 0 16px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

.hds-block {
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 16px;
}

.hds-block-ok {
    border-color: #22c55e33;
    background: #22c55e12;
}

.hds-block-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #22c55e;
    margin-bottom: 6px;
}

.hds-block-item {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 2px;
}

.hds-section {
    margin-bottom: 18px;
}

.hds-section-label {
    margin: 0 0 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary, var(--text-secondary));
}

.hds-local-press {
    padding-top: 4px;
}

.hds-local-country {
    margin-bottom: 12px;
}

.hds-local-country-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 8px;
}

.hds-cov-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.hds-cov-chip {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--overlay-light, rgba(255,255,255,0.06));
    color: var(--text-secondary);
}

.hds-cov-chip.warn {
    color: #f59e0b;
    background: #f59e0b22;
}

.hds-acc {
    border: 1px solid var(--card-border);
    border-radius: 12px;
    margin-bottom: 8px;
    background: var(--overlay-light, rgba(255,255,255,0.03));
    overflow: hidden;
}

.hds-acc-nested {
    margin: 0 0 8px;
    background: transparent;
}

.hds-acc-sum {
    cursor: pointer;
    list-style: none;
    padding: 10px 12px;
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hds-acc-sum::-webkit-details-marker {
    display: none;
}

.hds-acc-sum::before {
    content: '▸';
    color: var(--accent-color);
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}

.hds-acc[open] > .hds-acc-sum::before {
    transform: rotate(90deg);
}

.hds-acc-body {
    padding: 0 12px 12px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.55;
}

.hds-cov-prosa {
    white-space: pre-wrap;
}

.hds-cov-causa {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 6px;
    background: #f59e0b22;
    color: #f59e0b;
}

.hds-cov-ver {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--card-border);
}

.hds-cov-ver:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.hds-cov-medio {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 2px;
}

.hds-cov-afirma {
    font-size: 0.86rem;
    color: var(--text-primary);
}

.hds-cov-afirma.ausente {
    color: var(--text-tertiary, var(--text-secondary));
    font-style: italic;
}

.hds-cov-cita {
    margin: 6px 0 0;
    padding: 8px 10px;
    border-left: 3px solid var(--accent-color);
    background: var(--overlay-light, rgba(255,255,255,0.04));
    border-radius: 0 8px 8px 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-style: italic;
}

.hds-cov-detalle {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--text-tertiary, var(--text-secondary));
}

.hds-cov-disc-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hds-articles {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.hds-art-card {
    flex: 0 0 168px;
    width: 168px;
    border-radius: 14px;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    scroll-snap-align: start;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.hds-art-card:hover {
    background: var(--card-bg-hover);
    border-color: var(--accent-border);
}

.hds-art-thumb {
    width: 100%;
    height: 96px;
    object-fit: cover;
    display: block;
    background: var(--bg-tertiary);
}

.hds-art-ph {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hds-art-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hds-medio {
    align-self: flex-start;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 8px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hds-art-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    min-height: 2.9em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hds-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.hds-chip {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 6px;
}

.hds-entities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hds-entity {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    font-size: 0.78rem;
    font-weight: 600;
}

.hds-entity-actor {
    border-color: var(--accent-border);
    background: var(--accent-subtle);
    color: var(--text-primary);
}

.hds-entity-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hds-entity-tipo {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.9;
}

/* === ACTOR CONSTELLATION (fact sheet + comparison) === */
.actor-map {
    width: 100%;
    padding: 16px;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    background: var(--card-bg);
    color: var(--text-primary);
    overflow: hidden;
}

.actor-map-compact {
    padding: 4px 8px 10px;
}

.actor-map-title {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.actor-map-subtitle,
.actor-map-note {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.45;
}

.actor-map-note {
    color: var(--text-muted);
    font-size: 0.67rem;
    margin-top: 6px;
}

.actor-layer-label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
}

.actor-layer-select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--panel-bg-solid);
    color: var(--text-primary);
    padding: 8px 10px;
    font: inherit;
}

.actor-profile-stage {
    width: 100%;
}

.actor-map svg {
    display: block;
    width: 100%;
    height: min(390px, 56vw);
    min-height: 280px;
    animation: actor-map-enter 420ms cubic-bezier(.2,.8,.2,1) both;
}

.actor-map-compact svg {
    height: 270px;
    min-height: 270px;
}

.actor-profile-axes line,
.actor-profile-neutral {
    fill: none;
    stroke: var(--card-border);
    stroke-width: 1;
}

.actor-profile-neutral {
    stroke-dasharray: 4 5;
}

.actor-profile-shape {
    fill: none;
}

.actor-profile-wedge {
    stroke: none;
}

.actor-profile-edge {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.actor-profile-point {
    stroke: var(--panel-bg-solid);
    stroke-width: 2;
}

.actor-profile-center {
    fill: var(--text-muted);
}

.actor-profile-actor circle {
    fill: var(--bg-tertiary);
    stroke: var(--card-border);
    stroke-width: 1.5;
}

.actor-profile-actor text {
    dominant-baseline: middle;
    text-anchor: middle;
    pointer-events: none;
}

.actor-profile-name {
    fill: var(--text-primary);
    font-size: 8px;
    font-weight: 700;
}

.actor-profile-score {
    font-size: 7px;
    font-weight: 800;
}

.actor-profile-scale {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: -12px 4px 10px;
    color: var(--text-muted);
    font-size: 0.65rem;
}

.actor-profile-scale-neg {
    color: #ef4444;
}

.actor-profile-scale-pos {
    color: #3eabf7;
}

.actor-profile-scale span:nth-child(2) {
    text-align: center;
}

.actor-profile-scale span:last-child {
    text-align: right;
}

.actor-profile-details {
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--overlay-light);
}

.actor-profile-layer-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.actor-profile-layer-meta strong {
    color: var(--text-primary);
    font-size: 0.86rem;
}

.actor-profile-layer-meta span {
    color: var(--text-muted);
    font-size: 0.68rem;
    white-space: nowrap;
}

.actor-profile-row {
    padding: 9px 0;
    border-top: 1px solid var(--card-border);
}

.actor-profile-row-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-primary);
    font-size: 0.76rem;
}

.actor-profile-row-head span {
    font-weight: 800;
    white-space: nowrap;
}

.actor-profile-bar {
    position: relative;
    height: 5px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bg-tertiary);
}

.actor-profile-zero {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--text-muted);
    z-index: 2;
}

.actor-profile-value {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.actor-profile-row blockquote {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1.45;
    font-style: italic;
}

/* === SOURCE OVERLAP CLUSTERS === */
.src-clusters-intro {
    margin: -4px 0 14px;
    color: var(--text-muted);
    font-size: 0.74rem;
}

.src-cluster-group {
    margin-top: 14px;
}

.src-cluster-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.src-cluster-heading > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.src-cluster-heading strong {
    color: var(--text-primary);
    font-size: 0.82rem;
}

.src-cluster-heading span {
    color: var(--text-muted);
    font-size: 0.66rem;
}

.src-cluster-heading b {
    min-width: 26px;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--overlay-light);
    color: var(--text-secondary);
    text-align: center;
    font-size: 0.68rem;
}

.src-cluster-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 7px;
}

.src-cluster-card {
    min-width: 0;
    border: 1px solid var(--card-border);
    border-radius: 11px;
    background: var(--card-bg);
    overflow: hidden;
}

.src-cluster-card summary {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    cursor: pointer;
    list-style: none;
}

.src-cluster-card summary::-webkit-details-marker {
    display: none;
}

.src-cluster-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.src-cluster-name {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.76rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.src-cluster-count {
    color: var(--text-muted);
    font-size: 0.64rem;
    white-space: nowrap;
}

.src-cluster-body {
    padding: 0 10px 10px;
    border-top: 1px solid var(--card-border);
}

.src-cluster-media {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-top: 9px;
}

.src-cluster-media span {
    padding: 3px 6px;
    border-radius: 7px;
    background: var(--accent-subtle);
    color: var(--text-secondary);
    font-size: 0.63rem;
    font-weight: 700;
}

.src-cluster-role {
    margin: 7px 0 0;
    color: var(--text-muted);
    font-size: 0.68rem;
    line-height: 1.4;
}

.src-cluster-articles {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 8px;
}

.src-cluster-article {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    background: var(--overlay-light);
    color: inherit;
    text-decoration: none;
}

.src-cluster-article:hover {
    background: var(--card-bg-hover);
}

.src-cluster-article-title {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.src-cluster-article-medium {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.62rem;
}

.actor-map-axes polygon,
.actor-map-axes line {
    fill: none;
    stroke: var(--card-border);
    stroke-width: 1;
}

.actor-map-axes polygon {
    stroke-dasharray: 5 6;
}

.actor-map-actor circle {
    fill: var(--bg-tertiary);
    stroke: var(--card-border);
    stroke-width: 1.5;
}

.actor-map-actor text,
.actor-map-article text,
.actor-map-mean text {
    dominant-baseline: middle;
    text-anchor: middle;
    pointer-events: none;
}

.actor-map-actor-name {
    fill: var(--text-primary);
    font-size: 9px;
    font-weight: 700;
}

.actor-map-actor-mean {
    fill: var(--text-muted);
    font-size: 7px;
}

.actor-map-article circle {
    stroke: var(--panel-bg-solid);
    stroke-width: 2;
    transition: r 160ms ease, stroke 160ms ease, stroke-width 160ms ease;
}

.actor-map-article text {
    fill: #000;
    font-size: 8px;
    font-weight: 900;
}

.actor-map-article.active circle {
    r: 13;
    stroke: var(--text-primary);
    stroke-width: 3;
}

.actor-map-mean circle {
    fill: var(--panel-bg-solid);
    stroke: var(--accent-color);
    stroke-width: 3;
}

.actor-map-mean text {
    fill: var(--text-primary);
    font-size: 8px;
    font-weight: 800;
}

.actor-map-legend {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 0 2px 6px;
    scrollbar-width: thin;
}

.actor-map-legend-item {
    --article-color: var(--accent-color);
    flex: 0 0 auto;
    max-width: 150px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: var(--overlay-light);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
}

.actor-map-legend-item > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actor-map-legend-item.active {
    border-color: var(--article-color);
    background: color-mix(in srgb, var(--article-color) 12%, transparent);
}

.actor-map-legend-dot {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--article-color);
    color: #000;
    font-size: 0.58rem;
    font-weight: 900;
}

.actor-map-detail {
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--overlay-light);
}

.actor-map-detail-medium {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.actor-map-detail-title {
    margin-top: 3px;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.4;
}

.actor-map-position {
    margin-top: 10px;
}

.actor-map-position-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.78rem;
}

.actor-map-position-head span {
    font-weight: 900;
}

.actor-map-position blockquote {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 0.74rem;
    line-height: 1.45;
    font-style: italic;
}

@keyframes actor-map-enter {
    from { opacity: 0; transform: scale(.95); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .actor-map svg {
        animation: none;
    }
    .actor-map-article circle {
        transition: none;
    }
}

@media (max-width: 520px) {
    .desc-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .desc-modal-container,
    .hds-container {
        width: 100%;
        max-width: none;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
        transform: translateY(24px);
    }

    .desc-modal-overlay.active .desc-modal-container {
        transform: translateY(0);
    }

    .hds-hero {
        height: 180px;
    }
}

.read-more-inline-btn {
    background: none;
    border: none;
    color: var(--accent-color);
    font-weight: 600;
    font-size: 1.1em;
    cursor: pointer;
    padding: 0 4px;
    margin-left: 2px;
}

.read-more-inline-btn:hover {
    text-decoration: underline;
}

.event-card-title-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.event-card-title-btn:hover {
    color: var(--accent-color);
}
}

/* === CHATBOT === */
/* Chatbot */
/* Main container for the Toggle Button (keeps it bottom-right) */
.chatbot-container {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 2000;
    /* Removed flex/align-items to decouple the window */
}

/* Toggle button stays in container */
.chatbot-toggle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--accent-color);
    border: none;
    color: var(--text-inverted);
    cursor: pointer;
    box-shadow: 0 4px 15px var(--accent-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
}

.chatbot-toggle:hover {
    transform: scale(1.05);
    background: var(--accent-hover);
}

/* Bubbles Dock (Floating outside window) */
.bubbles-dock {
    position: fixed;
    bottom: 100px;
    /* Above the toggle button */
    right: 20px;
    z-index: 10001;
    /* Force above everything (window is 2001) */
    display: flex;
    flex-direction: column-reverse;
    /* Newest at bottom near toggle? Or top? Let's say stack up. */
    gap: 10px;
    align-items: center;
    pointer-events: none;
    /* Let clicks pass through empty space */
}

/* Conversations List / Bubbles */
.conversation-bubble,
.new-chat-bubble {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--panel-bg);
    /* Use panel bg to stand out? */
    backdrop-filter: blur(8px);
    border: 1px solid var(--panel-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    pointer-events: auto;
    /* Re-enable clicks */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.new-chat-bubble {
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.4);
}

.new-chat-bubble:hover {
    color: var(--accent-color);
    background: var(--panel-bg);
    transform: scale(1.1);
    border-color: var(--accent-color);
}

.conversation-bubble:hover {
    transform: scale(1.1);
    border-color: var(--accent-color);
}

.conversation-bubble.active {
    border-color: var(--accent-color);
    background: var(--accent-color);
    color: var(--text-inverted);
}

.conversation-bubble .bubble-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Chatbot Window - No longer has sidebar */
.chatbot-window {
    position: fixed;
    /* Fixed to viewport for dragging */
    /* Fixed to viewport for dragging */
    /* Initial position will be set by JS usually, but keep a default just in case */
    top: 100px;
    left: 100px;
    /* Remove fixed bottom/right to allow free movement */

    width: 400px;
    height: 600px;
    background: var(--panel-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    /* Back to column */
    overflow: hidden;
    z-index: 2001;
    transition: opacity 0.3s ease, transform 0.3s ease;
    resize: both;
    min-width: 320px;
    min-height: 400px;
    max-width: 90vw;
    max-height: 90vh;

    /* Hidden state */
    opacity: 0;
    pointer-events: none;
    transform: scale(0.9);
}

.chatbot-window.open {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

/* Hide sidebar classes if they exist */
.chat-sidebar {
    display: none;
}


/* Main Area */
.chat-main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Prevent flex overflow */
}

.chat-header {
    padding: 15px;
    background: var(--accent-subtle);
    border-bottom: 1px solid var(--panel-border);
    cursor: move;
    /* Indicates draggable */
    user-select: none;
    /* Prevent text selection while dragging */
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    /* Fixed height for header */
}

/* Header Actions */
.header-actions {
    display: flex;
    gap: 8px;
    /* Slightly tighter gap */
}

/* Unified Header Button Style */
.header-icon-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 4px;
    /* Slight rounding, or 50% for circle? User liked X style. */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.header-icon-btn:active {
    background: rgba(255, 255, 255, 0.2);
}

.chatbot-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s;
    padding: 5px;
}

.chatbot-close-btn:hover {
    color: var(--alert-color);
}

/* === GLOBE === */
/* Mobile Full Screen Styles */
@media (max-width: 768px) {

    /* Safe area for bottom (iPhone home bar, browser nav) */
    .chatbot-container {
        bottom: calc(85px + env(safe-area-inset-bottom));
        /* Toggle position */
        right: 20px;
    }

    .bubbles-dock {
        /* User said it was "too high". Previous was 160px.
           Let's lower it. The toggle is roughly 60px height + 15px bottom = ~75px space.
           So dock should start around 90-100px.
        */
        bottom: calc(100px + env(safe-area-inset-bottom));
        right: 20px;
        gap: 12px;
        z-index: 10001 !important;
        /* Force above window (9999) */
        pointer-events: none;
        /* Container passes clicks */
    }

    .conversation-bubble,
    .new-chat-bubble {
        pointer-events: auto !important;
        /* Children capture clicks */
        width: 55px;
        /* Larger bubbles */
        height: 55px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        /* Stronger shadow */
    }

    .chatbot-window {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        resize: none;
        bottom: auto;
        right: auto;
        transform: none !important;
        z-index: 9999;
        /* Ensure on top of everything including dock */
        padding-top: env(safe-area-inset-top);
        /* Avoid notch/status bar */
    }

    .chat-header {
        cursor: default;
        /* No dragging on mobile */
        padding: 10px 15px;
        /* Comfier padding */
        height: auto;
        /* Let it grow if needed */
        min-height: 60px;
    }

    /* Larger touch targets for header buttons */
    .header-icon-btn {
        width: 48px;
        height: 48px;
        background: rgba(255, 255, 255, 0.05);
        /* Slight bg to see touch area */
    }

    /* Adjust Dock Position for Mobile */
    /* This rule is now superseded by the one above for .bubbles-dock */

    .conversation-bubble,
    .new-chat-bubble {
        width: 55px;
        /* Larger bubbles */
        height: 55px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        /* Stronger shadow */
    }

    /* Ensure toggle is visible and reachable */
    .chatbot-toggle {
        width: 60px;
        /* Larger toggle */
        height: 60px;
        /* Position is relative to container now? No, container has absolute/fixed?
           Check .chatbot-container definition. It says absolute bottom 20 right 20.
           In mobile media query we just overrode .chatbot-container bottom.
           .chatbot-toggle is inside it.
        */
    }

    .chatbot-window.minimized {
        width: 60px !important;
        height: 60px !important;
        top: auto !important;
        left: auto !important;
        bottom: 20px !important;
        right: 20px !important;
        border-radius: 50% !important;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--accent-color);
        box-shadow: 0 4px 15px var(--accent-glow);
        transform: scale(1) !important;
        /* Override drag scale */
        cursor: pointer;
    }

    /* Minimized state styles removed */

    .mobile-minimize-btn {
        display: flex;
    }

    /* The original .chat-header rule was here, but it's now replaced/modified above */
}

.chat-header {
    padding: 15px;
    background: var(--accent-subtle);
    border-bottom: 1px solid var(--panel-border);
    cursor: move;
    /* Indicates draggable */
    user-select: none;
    /* Prevent text selection while dragging */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.message.bot {
    background: var(--overlay-light);
    align-self: flex-start;
    border-bottom-left-radius: 2px;
}

.message.user {
    background: var(--accent-color);
    color: var(--text-inverted);
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}

.chat-input-area {
    padding: 15px;
    border-top: 1px solid var(--panel-border);
    display: flex;
    gap: 10px;
}

/* Chat Markdown Styles */
.chat-list-item {
    padding-left: 15px;
    position: relative;
    margin-bottom: 4px;
    line-height: 1.4;
}

.chat-list-item::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: bold;
}

.chat-messages strong {
    color: var(--accent-color);
    font-weight: 700;
}

/* Tablas markdown en respuestas del chat (comparativas de narrativas) */
.chat-table-wrap {
    overflow-x: auto;
    margin: 8px 0;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
}

.chat-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.82rem;
    line-height: 1.35;
}

.chat-table th,
.chat-table td {
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--panel-border);
}

.chat-table th {
    font-weight: 700;
    color: var(--accent-color);
    border-bottom-width: 2px;
    white-space: nowrap;
}

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

.chat-table td a {
    font-weight: 600;
}

.chat-messages a,
.chat-messages a.chat-hecho-link {
    color: var(--accent-color);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.chat-messages a:hover,
.chat-messages a.chat-hecho-link:hover {
    color: var(--accent-hover);
}

/* Botones de acción propuestos por el agente (filtro de plataforma) */
.chat-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.chat-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 18px;
    border: 1px solid var(--accent-color);
    background: transparent;
    color: var(--accent-color);
    font-size: 0.82rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.chat-action-btn:hover {
    background: var(--accent-color);
    color: var(--bg-primary, #0b1120);
    transform: translateY(-1px);
}

.chat-action-btn.applied {
    background: var(--accent-color);
    color: var(--bg-primary, #0b1120);
}

.chat-action-btn i,
.chat-action-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Chip de filtro temático activo en la cabecera del feed de eventos */
.theme-filter-chip {
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    margin-top: 6px;
    padding: 4px 6px 4px 10px;
    border-radius: 16px;
    border: 1px solid var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    color: var(--accent-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    max-width: 100%;
}

.theme-filter-chip i,
.theme-filter-chip svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.theme-filter-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-filter-chip-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease;
}

.theme-filter-chip-clear:hover {
    background: color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.chat-messages em {
    font-style: italic;
    color: var(--text-primary);
    opacity: 0.9;
}

.chat-messages h1,
.chat-messages h2,
.chat-messages h3 {
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 1.1em;
    color: var(--text-primary);
    font-weight: 700;
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: 2px;
}

.chat-input-area input {
    flex: 1;
    background: var(--overlay-dark);
    border: 1px solid var(--panel-border);
    border-radius: 20px;
    padding: 10px 15px;
    color: var(--text-primary);
    outline: none;
    font-family: var(--font-family);
}

.chat-input-area input:focus {
    border-color: var(--accent-color);
}

.chat-input-area button {
    background: none;
    border: none;
    color: var(--accent-color);
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s;
}

.chat-input-area button:hover {
    color: var(--text-primary);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 3px;
}

/* === CALENDAR === */
/* Calendar Styles */
.calendar-container {
    background: var(--overlay-dark);
    border-radius: 12px;
    border: 1px solid var(--panel-border);
    padding: 15px;
    margin-bottom: 20px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--text-primary);
}

.weekdays-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    text-align: center;
    font-size: 0.75em;
    color: var(--text-secondary);
    margin-bottom: 5px;
    text-transform: uppercase;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    text-align: center;
}

.calendar-day {
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85em;
    position: relative;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.calendar-day:hover {
    background: var(--overlay-light);
    color: var(--text-primary);
}

.calendar-day.active {
    background: var(--accent-color);
    color: var(--text-inverted);
    font-weight: bold;
    box-shadow: 0 0 10px var(--accent-glow);
}

.article-count {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.6rem;
    color: var(--text-inverted);
    background: var(--accent-color);
    padding: 1px 4px;
    border-radius: 6px;
    box-shadow: 0 2px 4px var(--shadow-color);
    z-index: 2;
}

.calendar-day.active .article-count {
    background: var(--bg-surface);
    color: var(--accent-color);
}

.calendar-day.empty {
    pointer-events: none;
}

/* === TIMELINE === */
/* Horizontal Timeline (Full-Screen) */
.timeline-full-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 5;
    background: radial-gradient(circle at center, var(--bg-tertiary) 0%, var(--bg-color) 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.timeline-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');
    opacity: 0.1;
    pointer-events: none;
}

.timeline-ui-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 60px;
    z-index: 10;
}

.timeline-tag {
    font-size: 0.75rem;
    letter-spacing: 4px;
    color: var(--accent-color);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
}

.timeline-title-container h2 {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(to right, #fff, #555);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.timeline-controls {
    display: flex;
    gap: 30px;
    background: var(--card-bg);
    padding: 20px 30px;
    border-radius: 16px;
    border: 1px solid var(--card-border);
    backdrop-filter: blur(10px);
}

.control-group label {
    display: block;
    font-size: 0.7rem;
    margin-bottom: 8px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.control-group select,
.control-group input {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 150px;
    height: 4px;
    background: var(--overlay-light);
    border-radius: 2px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent-color);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px var(--accent-glow);
}

.timeline-track-container {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 100px;
    overflow-x: auto;
    scrollbar-width: none;
    /* Firefox */
    scroll-behavior: smooth;
}

.timeline-track-container::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.timeline-horizontal-track {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
    padding: 0 50vw;
    /* Center the first/last items */
}

/* The actual central line */
.timeline-horizontal-track::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right,
            rgba(62, 171, 247, 0),
            rgba(62, 171, 247, 0.8) 10%,
            rgba(62, 171, 247, 0.8) 90%,
            rgba(62, 171, 247, 0));
    box-shadow: 0 0 15px rgba(62, 171, 247, 0.3);
    transform: translateY(-50%);
}

.timeline-item {
    position: relative;
    flex: 0 0 var(--timeline-item-width);
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 4px solid var(--accent-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px var(--accent-color);
    z-index: 5;
    transition: all 0.3s;
}

.timeline-item:hover::after {
    transform: translate(-50%, -50%) scale(1.5);
    background: var(--accent-color);
    box-shadow: 0 0 30px #fff;
}

.timeline-item .timeline-content {
    position: absolute;
    width: 260px;
    padding: 20px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    backdrop-filter: blur(5px);
    transition: all 0.3s;
    opacity: 0.6;
}

/* Alternating top/bottom */
.timeline-item:nth-child(odd) .timeline-content {
    bottom: calc(50% + 40px);
}

.timeline-item:nth-child(even) .timeline-content {
    top: calc(50% + 40px);
}

/* Vertical connector line */
.timeline-item::before {
    content: '';
    position: absolute;
    left: 50%;
    width: 1px;
    background: linear-gradient(to top, var(--accent-color), transparent);
    z-index: 1;
}

.timeline-item:nth-child(odd)::before {
    bottom: 50%;
    height: 100px;
}

.timeline-item:nth-child(even)::before {
    top: 50%;
    height: 100px;
    background: linear-gradient(to bottom, var(--accent-color), transparent);
}

.timeline-item:hover .timeline-content {
    opacity: 1;
    background: var(--accent-subtle);
    border-color: var(--accent-color);
    transform: translateY(-10px);
}

.timeline-item:nth-child(even):hover .timeline-content {
    transform: translateY(10px);
}

.timeline-date {
    font-size: 0.8rem;
    color: var(--accent-color);
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.timeline-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.2;
}

.macro-enter-btn {
    margin-top: 15px;
    background: var(--accent-color);
    color: var(--text-inverted);
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.macro-enter-btn:hover {
    background: var(--accent-hover);
    transform: scale(1.05);
}

.macro-item .timeline-tag {
    color: #ffaa00;
    /* Distinct color for macros */
}

.hecho-item .timeline-tag {
    color: var(--accent-color);
}

/* Comparison Panel Styles — fixed + high z so it stays above vision globe (200) */
.comparison-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 1000px;
    max-width: 95vw;
    height: 80vh;
    background: var(--panel-bg-solid);
    backdrop-filter: blur(20px);
    border: 1px solid var(--panel-border);
    border-radius: 20px;
    z-index: 1100;
    display: none;
    flex-direction: column;
    box-shadow: 0 20px 80px var(--shadow-color);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.comparison-panel.open {
    display: flex;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.comparison-header {
    padding: 30px;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comparison-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-color);
    background: var(--accent-subtle);
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 10px;
    display: inline-block;
}

.comparison-date {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 5px;
}

.comparison-close {
    background: none;
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.comparison-close:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
}

.comparison-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

/* Sources panel overrides the grid layout */
#globeSourcesPanel.comparison-body {
    display: flex;
    flex-direction: column;
    background: none;
    gap: 0;
    overflow-y: auto;
    padding: 24px 30px;
}

/* Ocultar panel de pestaña por encima de reglas `display:flex !important` del simulador móvil */
.comparison-pane-hidden {
    display: none !important;
}

/* Paneles de pestaña «Fuentes» / «Actores» (Prisma phone / desktop) */
#prismaSourcesPanel,
#desktopSourcesPanel,
#prismaActorsPanel,
#desktopActorsPanel,
#prismaRelationsPanel,
#desktopRelationsPanel {
    flex: 1;
    min-height: 0;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px 24px;
}

#globeActorsPanel.comparison-body,
#globeRelationsPanel.comparison-body {
    display: flex;
    flex-direction: column;
    background: none;
    gap: 0;
    overflow-y: auto;
    padding: 24px 30px;
}

.comparison-column {
    background: rgba(20, 25, 40, 0.2);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.column-header {
    padding: 20px;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid var(--card-border);
    background: var(--overlay-dark);
    position: sticky;
    top: 0;
    z-index: 5;
}

.column-header img {
    height: 30px;
    filter: brightness(0) invert(1);
}

.column-content {
    padding: 30px;
}

.comp-article {
    margin-bottom: 40px;
}

.comp-article-img {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
    display: block;
}

.comp-article h4 {
    font-size: 1.25rem;
    margin-bottom: 15px;
    line-height: 1.3;
    color: var(--text-primary);
}

.comp-article p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.comp-article .read-more {
    margin-top: 15px;
    display: inline-block;
    color: var(--accent-color);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.comp-article .read-more:hover {
    text-decoration: underline;
}

.newspaper-header {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--card-border);
}

.newspaper-header img {
    height: 35px;
    max-width: 80%;
    filter: brightness(0) invert(1);
    object-fit: contain;
}

/* === PRISMA === */
/* =========================================
   PRISMA 3D STYLES
   ========================================= */

/* ── Anti-flash de contenido al girar el prisma ───────────────────────────
   Las caras de comparativa y timeline muestran su contenido con una
   transición de opacidad rápida. Mientras el prisma gira (.rotating),
   el contenido se oculta para que el usuario nunca vea datos de un
   hecho anterior durante la animación de rotación.
   ──────────────────────────────────────────────────────────────────────── */
.face-comparison .comparison-columns,
.face-timeline .vertical-timeline {
    transition: opacity 0.12s ease;
}

.prisma.rotating .face-comparison .comparison-columns,
.prisma.rotating .face-timeline .vertical-timeline {
    opacity: 0;
}

.prisma-full-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-secondary);
    /* Even darker starting point */
    z-index: 100;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}

/* Cinematic Atmospheric Background */
.prisma-viewport {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 2000px;
    background: radial-gradient(circle at 50% 50%, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    position: relative;
}

.prisma-viewport::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 30%, var(--accent-subtle) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, var(--accent-subtle) 0%, transparent 40%);
    animation: atmosphericPulse 15s infinite alternate ease-in-out;
    pointer-events: none;
}

@keyframes atmosphericPulse {
    0% {
        opacity: 0.5;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Holographic HUD Overlay */
.prisma-viewport::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.01) 0px,
            rgba(255, 255, 255, 0.01) 1px,
            transparent 1px,
            transparent 2px);
    pointer-events: none;
    z-index: 10;
    opacity: 0.3;
}

/* Navigation Arrows - Tactical HUD Style */
.prisma-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 110;
    /* Above HUD */
    width: 70px;
    height: 70px;
    border-radius: 12px;
    background: var(--panel-bg);
    border: 1px solid var(--accent-border);
    color: var(--accent-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px var(--shadow-color);
}

.prisma-nav i {
    width: 32px;
    height: 32px;
    transition: transform 0.3s ease;
}

.prisma-nav:hover {
    background: rgba(62, 171, 247, 0.1);
    border-color: var(--accent-color);
    box-shadow: 0 0 30px rgba(62, 171, 247, 0.4);
    transform: translateY(-50%) scale(1.1);
}

.prisma-nav-left {
    left: 50px;
}

.prisma-nav-right {
    right: 50px;
}

/* Face Indicator - Minimalist HUD */
.prisma-face-indicator {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    z-index: 110;
    padding: 10px 25px;
    background: var(--panel-bg);
    border-radius: 100px;
    border: 1px solid var(--card-border);
    backdrop-filter: blur(5px);
}

.face-dot {
    width: 8px;
    height: 8px;
    background: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.face-dot.active {
    background: var(--accent-color);
    box-shadow: 0 0 15px var(--accent-color);
    transform: scale(1.5);
}

/* ==============================================
   PHONE SIMULATOR MODE
   iOS Simulator-style device frame
   ============================================== */
.phone-simulator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%);
    z-index: 1;
}

.phone-device {
    position: relative;
    width: 404px;
    height: 878px;
    background: linear-gradient(145deg, #2c2c2e, #1c1c1e);
    border-radius: 54px;
    padding: 7px;
    box-shadow:
        0 0 0 3px #3a3a3c,
        0 40px 80px rgba(0, 0, 0, 0.6),
        inset 0 0 2px rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.phone-notch {
    width: 120px;
    height: 34px;
    background: #000;
    border-radius: 0 0 20px 20px;
    margin: 0 auto 0 auto;
    position: relative;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.phone-notch::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 84px;
    height: 22px;
    background: #1a1a1a;
    border-radius: 12px;
}

.phone-screen {
    flex: 1;
    width: 390px;
    background: var(--bg-color);
    border-radius: 0 0 47px 47px;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
    /* Ensure vertical scroll is native everywhere */
}

.phone-home-bar {
    width: 134px;
    height: 5px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    margin: 8px auto 12px auto;
}

/* Adjust prisma-viewport for phone screen */
.phone-screen .prisma-viewport {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Phone screen face-events layout - CLEAN VERTICAL DESIGN */
.phone-screen .face-events {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    position: relative;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-surface) 100%);
    overflow: visible;
    padding: 0 !important;
    align-items: stretch !important;
}

/* Compact header at top */
.phone-screen .face-header {
    position: relative !important;
    flex-shrink: 0;
    padding: 12px 16px 0px 16px !important;
    background: linear-gradient(180deg, var(--panel-bg-solid) 0%, transparent 100%) !important;
    border-bottom: none !important;
    z-index: 20;
    text-align: left;
}

.phone-screen .face-header h2 {
    font-size: 0.65rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    font-weight: 600;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.phone-screen .face-tag {
    font-size: 0.45rem !important;
    margin-bottom: 2px !important;
    color: #3eabf7;
    letter-spacing: 1.5px;
}

.phone-screen .face-subtitle {
    display: none !important;
}

/* Globe - tight against header */
.phone-screen .mini-globe-wrapper {
    position: relative !important;
    flex-shrink: 0;
    width: 100% !important;
    height: 180px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    margin: 0 !important;
    z-index: 5;
    max-width: none !important;
    box-sizing: border-box;
    background: transparent;
}

.phone-screen .mini-globe-wrapper::after {
    display: none;
}

.phone-screen #miniGlobe {
    width: 180px !important;
    height: 180px !important;
    margin: 0 auto;
}

.phone-screen #miniGlobe canvas {
    width: 180px !important;
    height: 180px !important;
    margin: 0 auto;
    display: block;
}

.phone-screen .events-scroll-container {
    margin-top: 0 !important;
    mask-image: linear-gradient(to bottom, black 0%, black 90%, transparent 100%) !important;
    /* Removed the transparent fade at the top to prevent a fake visual gap below the globe */
}

/* Explicit styling for other faces in Phone Mode to avoid blank screens */
.phone-screen .face-comparison,
.phone-screen .face-timeline {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-color) 100%) !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.phone-screen .comparison-columns {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    background: transparent !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

.phone-screen .vertical-timeline {
    flex: 1 !important;
    height: auto !important;
    overflow-y: auto !important;
    background: transparent !important;
    position: relative !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    z-index: 20;
}

/* Hide navigation arrows on mobile */
.phone-screen .prisma-nav,
.phone-screen #prismaNavLeft,
.phone-screen #prismaNavRight {
    display: none !important;
}

/* ── Mobile comparison: logo grid + sources ─────────────────── */
.prisma-mobile-comparison {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
    gap: 14px;
    box-sizing: border-box;
}

.prisma-mobile-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 4px 0 8px;
}

.prisma-mobile-logo-badge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 68px;
    padding: 8px 4px 6px;
    background: var(--overlay-dark);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}

.prisma-mobile-logo-badge:active {
    transform: scale(0.93);
    border-color: var(--accent-color);
}

.prisma-mobile-logo-badge img {
    max-width: 48px;
    max-height: 32px;
    object-fit: contain;
    border-radius: 3px;
}

.prisma-mobile-logo-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--accent-color);
    color: #000;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

.prisma-mobile-tab-hint {
    text-align: center;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--text-secondary);
    opacity: 0.8;
    padding: 10px 14px 6px;
    margin: 0;
}

.prisma-mobile-sources {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.32) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
    flex-shrink: 0;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.prisma-mobile-src-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

/* Comparison face header: no uppercase, smaller to fit */
.phone-screen .face-comparison .face-header-fixed h2 {
    text-transform: none !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
}



/* Event cards */
/* Event cards */
/* Event cards */
/* Event cards */
.phone-screen .events-scroll-container {
    flex: 1;
    /* Take exactly the remaining space */
    position: relative !important;
    padding: 0 16px !important;
    margin: 0 !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    z-index: 20;

    /* STRICT SNAPPING */
    scroll-snap-type: y mandatory;
    scroll-padding-top: 0;

    /* KILL BOUNCE */
    overscroll-behavior-y: none;

    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
    width: 100% !important;
    height: 100% !important;
    /* Fill the flex item strictly */
    /* CRITICAL: explicit height so children can resolve height:100% */
    min-height: 0;

    background: transparent !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

.phone-screen .event-card {
    /* STRICT DIMENSIONS relative to container */
    padding: 8px 0 16px 0 !important;
    /* Added bottom padding for safety */
    width: 100% !important;
    height: 100% !important;
    /* Force height to match container */
    min-height: 100% !important;
    max-height: 100% !important;
    /* CRITICAL: Prevent growth beyond viewport */
    overflow: hidden !important;
    /* FAILSAFE: Cut off anything that overflows */

    /* STRICT SNAP STOP */
    scroll-snap-align: center;
    /* Center alignment forces perfect fit for 100% height cards */
    scroll-snap-stop: always;

    /* OPTIMIZATION */
    transition: none !important;
    transform: translateZ(0);

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Align content to top */

    margin: 0 !important;
    /* Ensure no margins cause offsets */
    max-width: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    /* CRITICAL: prevent card from shrinking below container height when content is short */
    flex-shrink: 0;
}

.phone-screen .event-card h3 {
    width: 100% !important;
    max-width: none !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
    flex-shrink: 0;
    display: block;
    overflow: visible;
    white-space: normal;
}

.phone-screen .event-card p {
    width: 100% !important;
    max-width: none !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    opacity: 0.9;
    flex: 1;
    min-height: 0;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Newspaper logo strip inside event card (mobile only) */
.phone-screen .event-card-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 10px;
    flex-shrink: 0;
}

.phone-screen .event-card-logo {
    height: 20px;
    width: auto;
    max-width: 52px;
    object-fit: contain;
    border-radius: 3px;
    opacity: 0.85;
    filter: brightness(1.1);
}

/* Hide logo strip on desktop/globe modes */
.prisma-desktop-layout .event-card-logos,
.comparison-panel .event-card-logos {
    display: none;
}

/* Show date in compact format */
.phone-screen .event-date {
    display: block !important;
    font-size: 0.75rem !important;
    margin-top: auto;
    /* Push to bottom */
    padding-top: 8px;
    color: var(--text-secondary);
    flex-shrink: 0;
    /* Never hide date */
}

.phone-screen .events-scroll-container::-webkit-scrollbar {
    display: none;
}


/* 3D Prisma Container */
/* 3D Prisma Container */
.prisma-container {
    width: 100%;
    /* Full immersive width */
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: pan-y;
    /* Allow vertical scroll even on background */
}

.prisma {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
    opacity: 0;
}

.prisma.loaded {
    opacity: 1;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease-out;
}

/* Prisma Faces - Holographic Panels */
.prisma-face {
    position: absolute;
    top: 0;
    left: 0;
    /* Slight overlap to prevent sub-pixel vertical lines during rotation */
    width: 100.2%;
    height: 100%;
    /* Solid background to hide internal structure ("boxes") */
    background: var(--bg-surface);

    /* Remove borders and shadows to eliminate "box" look */
    border: none;
    box-shadow: none;
    border-radius: 0;

    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    /* Allow scrolling in child containers */
    overflow: visible;
    pointer-events: none;
    /* Disable interaction on inactive faces */
}

.prisma-face.active {
    pointer-events: auto;
    /* Enable interaction on active face */
}

/* Position faces in 3D space - triangular prism */
/* ONLY apply 3D transforms on desktop screens */
/* Position faces in 3D space - triangular prism */
/* Global 3D positioning using dynamic variable */
.face-comparison {
    transform: rotateY(0deg) translateZ(var(--prisma-tz, 112px));
}

.face-events {
    transform: rotateY(120deg) translateZ(var(--prisma-tz, 112px));
}

.face-timeline {
    transform: rotateY(240deg) translateZ(var(--prisma-tz, 112px));
}

@media (min-width: 769px) {

    /* Desktop specific adjustments */
    .face-comparison {
        transform: rotateY(0deg) translateZ(195px);
    }

    .face-events {
        transform: rotateY(120deg) translateZ(195px);
    }

    .face-timeline {
        transform: rotateY(240deg) translateZ(195px);
    }

    .prisma-container {
        width: 600px;
        /* Force standard width */
        height: 80vh;
        top: 0;
        transform: none;
        /* Reset vertical center hack */
        margin: 0;
    }
}

/* Face Header - 'Aletheia Blade' Style */
.face-header-fixed {
    padding: 60px 25px 20px 25px !important;
    /* Visual adjustment: push content down */
    text-align: left;
    background: var(--panel-bg-solid);
    backdrop-filter: blur(25px) saturate(200%);
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--accent-border);
    box-shadow: 0 15px 40px var(--shadow-color);
    flex-shrink: 0;
    /* Prevent squashing */
    height: auto;
}

.face-header-fixed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-color);
    box-shadow: 0 0 20px var(--accent-color);
}

.face-tag {
    font-size: 0.8rem;
    letter-spacing: 3px;
    color: var(--accent-color);
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 8px;
    display: block;
    opacity: 0.8;
    white-space: normal;
    /* Allow wrapping */
}

.face-tag.face-tag-directo {
    color: #f59e0b;
}

.face-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.face-header-row .face-tag {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}

.feed-mode-toggle {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.feed-mode-btn {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.feed-mode-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.feed-mode-btn.active[data-feed-mode="editorial"] {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #000;
}

.feed-mode-btn.active[data-feed-mode="liveblog"] {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #000;
}

html[data-corpus="finance"] .feed-mode-toggle {
    display: none !important;
}

.feed-mode-btn.corpus-btn.active[data-corpus="geo"] {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #000;
}

.feed-mode-btn.corpus-btn.active[data-corpus="finance"] {
    background: #22c55e;
    border-color: #22c55e;
    color: #000;
}

[data-theme="light"] .feed-mode-btn {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.04);
}

.face-header-fixed h2 {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    text-shadow: 0 0 30px var(--accent-glow);
    white-space: normal;
    /* Allow wrapping */
    overflow: visible;
    /* show all text */
    text-overflow: clip;
    /* remove ellipsis */
    word-wrap: break-word;
    /* break long words */
}

.face-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 5px;
    font-weight: 500;
}

.face-hint {
    padding: 20px;
    text-align: center;
    color: var(--accent-color);
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--overlay-dark);
}

/* Mini globe wrapper — base phone; desktop lo sobrescribe por id */
.mini-globe-wrapper {
    position: relative;
    width: 320px;
    height: 320px;
    margin: 10px auto 15px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    flex-shrink: 0;
}

/* Desktop feed: NO heredar 320×320 del wrapper del teléfono */
#desktopMiniGlobeContainer.mini-globe-wrapper,
#desktopMiniGlobeContainer {
    width: 100% !important;
    max-width: none !important;
    height: clamp(420px, 52vh, 720px) !important;
    min-height: 420px !important;
    margin: 0 !important;
    display: block !important;
    overflow: hidden !important;
    flex-shrink: 1 !important;
    transform: none !important;
}

#miniGlobe {
    width: 320px;
    height: 320px;
}

#miniGlobe canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Removed globe-overlay-label */

.mini-globe-marker {
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.mini-globe-marker .marker-dot {
    width: 12px;
    height: 12px;
    background: var(--accent-color);
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 15px var(--accent-color), 0 0 30px rgba(62, 171, 247, 0.5);
}

.mini-globe-marker .marker-dot.pulse {
    animation: miniPulse 2s infinite;
}

@keyframes miniPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(62, 171, 247, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(62, 171, 247, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(62, 171, 247, 0);
    }
}

/* Face 1: Events Scroll Container */
.events-scroll-container {
    flex: 1;
    overflow-y: auto;
    /* Removed scroll-snap for smooth scrolling */
    scroll-behavior: smooth;
    padding: 0 40px;
    margin-top: 20px;
    /* Separation from globe */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 8%,
            black 92%,
            transparent 100%);
}

.event-card {
    min-height: auto;
    /* Removed scroll-snap-align */
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    border-bottom: 1px solid var(--card-border);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--card-bg) 0%, transparent 100%);

    /* Animation base */
    opacity: 0.3;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.2, 0, 0.2, 1);
}

.event-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-border), transparent);
}

.event-card.active {
    opacity: 1;
    transform: translateY(0);
}

/* Only apply 3D rotation effects on desktop */
@media (min-width: 769px) {
    .prisma.rotating {
        transform-style: preserve-3d;
        scale: 0.85;
        /* Shrink slightly during rotation for depth */
    }
}

/* Phone mode: no scale effect during transition */
.phone-screen .prisma.rotating {
    scale: 1 !important;
}

.event-card h3 {
    font-size: 1.1rem;
    /* Reduced for better fit */
    color: var(--text-primary);
    margin-bottom: 20px;
    line-height: 1.2;
    font-weight: 800;
    max-width: 95%;
    letter-spacing: -0.5px;
    text-decoration: none;
}

.event-card p {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 90%;
    font-weight: 400;
}

.event-card .event-date {
    margin-top: 35px;
    font-size: 0.85rem;
    color: var(--accent-color);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 6px 18px;
    background: var(--accent-subtle);
    border: 1px solid var(--accent-border);
    border-radius: 2px;
}

.event-card .event-macro {
    display: none;
    /* Already in header */
}

/* Preview image inside event card (from article, lazy-loaded via comparison) */
.event-card-preview-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    margin-bottom: 14px;
    background: #111;
    flex-shrink: 0;
}

.media-video-preview,
.media-video-thumb {
    position: relative;
    overflow: hidden;
    background: #111;
}

.media-video-preview video,
.media-video-thumb video,
.hds-hero-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #111;
}

.media-video-preview.event-card-preview-img,
.media-video-preview.comp-article-img {
    aspect-ratio: 16 / 9;
}

.media-video-preview.comp-article-img {
    max-height: 180px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.hds-hero-media {
    width: 100%;
    height: 100%;
}

.media-video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.85);
    pointer-events: none;
}

.media-video-play::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 13px;
    border-style: solid;
    border-width: 9px 0 9px 14px;
    border-color: transparent transparent transparent #fff;
}

.media-video-thumb .media-video-play {
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
}

.media-video-thumb .media-video-play::before {
    left: 10px;
    top: 7px;
    border-width: 7px 0 7px 11px;
}

.desktop-panel .event-card-preview-img {
    border-radius: 8px;
    margin-bottom: 10px;
}

.desktop-panel .event-card-preview-img {
    border-radius: 8px;
    margin-bottom: 10px;
}

/* Compact text when image is present (mobile) */
.phone-screen .event-card:has(.event-card-preview-img) h3 {
    font-size: 0.95rem !important;
    margin-bottom: 4px !important;
}

.phone-screen .event-card:has(.event-card-preview-img) p {
    font-size: 0.8rem !important;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}



/* Face 2: Comparison - 'Versus' Style */
.comparison-columns {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    background: var(--card-bg);
    position: relative;
}

/* Inner row of article columns */
.comparison-cols-row {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    gap: 0;
}

/* Versus Divider */


.comparison-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.comparison-col:hover {
    flex: 1.5;
    /* Dynamic expansion */
}

/* El País Theme - Deep Navy / Gold */
#prismaColPais {
    background: linear-gradient(135deg, var(--panel-bg-solid) 0%, var(--accent-subtle) 100%);
    border-right: 1px solid var(--accent-border);
}

/* El Mundo Theme - Charcoal / Red accent */
#prismaColMundo {
    background: linear-gradient(135deg, var(--panel-bg-solid) 0%, rgba(127, 29, 29, 0.2) 100%);
}

.col-header {
    padding: 25px;
    background: var(--overlay-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--card-border);
}

.col-header img {
    height: 30px;
    filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}

#prismaColPais .col-header {
    border-bottom: 2px solid #3b82f6;
}

#prismaColMundo .col-header {
    border-bottom: 2px solid #ef4444;
}

.col-articles {
    flex: 1;
    overflow-y: auto;
    padding: 30px;
    -webkit-overflow-scrolling: touch;
}

.prisma-article {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    border: 1px solid var(--card-border);
    transition: all 0.3s ease;
    overflow: hidden;
}

.prisma-article .comp-article-img {
    margin: -20px -20px 12px -20px;
    width: calc(100% + 40px);
    max-height: 160px;
    border-radius: 12px 12px 0 0;
}

.prisma-article:hover {
    background: var(--card-bg-hover);
    transform: translateY(-2px);
    border-color: var(--accent-border);
    box-shadow: 0 12px 36px var(--shadow-color);
}

.prisma-article h4 {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    line-height: 1.3;
    font-weight: 700;
}

.prisma-article p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Face 3: Vertical Timeline - Tactical Nodes */
.vertical-timeline {
    flex: 1;
    overflow-y: auto;
    padding: 30px;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

.vertical-timeline::before {
    content: '';
    position: absolute;
    left: 40px;
    /* Offset to the left for a modern list feel */
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom,
            transparent,
            rgba(62, 171, 247, 0.4) 10%,
            rgba(62, 171, 247, 0.4) 90%,
            transparent);
}

.timeline-node {
    position: relative;
    padding: 10px 0 10px 70px;
    margin: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.timeline-node::before {
    content: '';
    position: absolute;
    left: 36px;
    top: 50%;
    width: 10px;
    height: 10px;
    background: var(--bg-secondary);
    border: 2px solid var(--accent-border);
    border-radius: 2px;
    /* Square tactical pips */
    transform: translateY(-50%) rotate(45deg);
    z-index: 2;
    transition: all 0.3s ease;
}

.timeline-node:hover::before {
    background: var(--accent-color);
    box-shadow: 0 0 15px var(--accent-glow);
    transform: translateY(-50%) rotate(45deg) scale(1.2);
}

.timeline-node.active::before {
    background: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 0 20px var(--accent-glow);
    transform: translateY(-50%) rotate(45deg) scale(1.4);
}

.timeline-node-content {
    width: 100%;
    /* Full width list */
    padding: 15px 25px;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--card-border);
    transition: all 0.3s ease;
}

.timeline-node:hover .timeline-node-content {
    background: var(--accent-subtle);
    border-color: var(--accent-border);
}

/* ==============================================
   MOBILE-FIRST PRISMA DESIGN
   For screens <= 480px (iPhone, Android phones)
   ============================================== */
@media (max-width: 480px) {

    /* Ultra-compact globe for mobile app feel */
    .mini-globe-wrapper {
        width: 120px;
        height: 120px;
        margin: 5px auto 5px auto;
    }

    #miniGlobe {
        width: 120px;
        height: 120px;
    }

    /* Ultra-compact face header */
    .face-header {
        padding: 10px 15px;
    }

    .face-header h2 {
        font-size: 0.9rem;
        line-height: 1.1;
        margin: 0;
    }

    .face-tag {
        font-size: 0.55rem;
        margin-bottom: 4px;
    }

    .face-subtitle {
        font-size: 0.65rem;
        margin-top: 3px;
    }

    /* Event cards - app-style feed */
    .events-scroll-container {
        padding: 0 15px;
        margin-top: 5px;
        flex: 1;
        max-height: calc(100vh - 180px);
    }

    .event-card {
        padding: 12px 15px;
        margin-bottom: 8px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(62, 171, 247, 0.2);
    }

    .event-card h3 {
        font-size: 0.95rem;
        margin-bottom: 8px;
        line-height: 1.3;
    }

    .event-card p {
        font-size: 0.8rem;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.7);
    }

    /* Face hint - smaller */
    .face-hint {
        padding: 8px;
        font-size: 0.6rem;
    }

    /* Prisma container - full mobile */
    .prisma-container {
        padding: 5px;
    }

    .prisma {
        width: 100%;
        height: 100%;
    }

    .prisma-face {
        border-radius: 12px;
        padding: 5px;
    }
}

/* =========================================
   PRISMA DESKTOP MODE
   ========================================= */

/* Mode Toggle Button */
.prisma-mode-toggle {
    position: fixed;
    /* Always visible regardless of container visibility */
    top: 30px;
    right: 30px;
    z-index: 9999;
    /* Above everything */
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--panel-bg);
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--accent-border);
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 40px var(--shadow-color);
    pointer-events: auto !important;
    /* CRITICAL: Ensure clicks are received */
}

.theme-divider {
    width: 1px;
    height: 32px;
    background: var(--panel-border);
    margin: 0 4px;
}

/* Carrusel de tema (3 modos) sobre el botón */
.theme-carousel-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.theme-carousel-viewport {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 18px;
    overflow: hidden;
    pointer-events: none;
    border: 1px solid var(--panel-border);
    background: var(--panel-bg-solid);
    box-shadow: 0 4px 12px var(--shadow-color);
}

.theme-carousel-track {
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.theme-carousel-item {
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex-shrink: 0;
}

.theme-carousel-item.is-active {
    color: var(--accent-color);
}

.theme-carousel-btn {
    position: relative;
}

[data-theme="retro"] .theme-carousel-viewport {
    border-radius: 0;
    border-color: var(--ink);
}

[data-theme="retro"] .theme-carousel-item.is-active {
    color: var(--brand);
}

.mode-btn {
    width: 48px;
    height: 48px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* display:flex de .mode-btn gana al atributo hidden del navegador. */
.mode-btn[hidden] {
    display: none;
}

.mode-btn:hover {
    color: var(--accent-color);
    background: var(--accent-subtle);
    border-color: var(--accent-border);
}

.mode-btn.active {
    color: var(--text-inverted);
    background: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 0 20px var(--accent-glow);
}

.mode-btn i {
    width: 24px;
    height: 24px;
}

.corpus-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
}

.corpus-btn {
    width: auto;
    min-width: 44px;
    padding: 0 10px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.vinculo-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 4px;
}

.vinculo-badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 8px;
}

.vinculo-badge.vinculo-cubre {
    background: rgba(96, 165, 250, 0.22);
    color: #93c5fd;
}

.vinculo-badge.vinculo-interpreta {
    background: rgba(251, 191, 36, 0.22);
    color: #fbbf24;
}

.vinculo-experto {
    font-size: 0.75rem;
    opacity: 0.75;
}

.vinculo-tesis {
    font-size: 0.82rem;
    opacity: 0.85;
    font-style: italic;
    margin: 0 0 8px;
}

[data-theme="light"] .vinculo-badge.vinculo-cubre {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

[data-theme="light"] .vinculo-badge.vinculo-interpreta {
    background: rgba(217, 119, 6, 0.14);
    color: #b45309;
}

.vinculo-dir {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 8px;
}

.vinculo-dir-alcista {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

.vinculo-dir-bajista {
    background: rgba(248, 113, 113, 0.22);
    color: #f87171;
}

.vinculo-dir-neutro {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
}

.vinculo-dir-condicional {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.vinculo-dir-na {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
}

.vinculo-horizonte {
    font-size: 0.7rem;
    opacity: 0.7;
}

.comp-vinculo-group {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 12px 0 8px;
    opacity: 0.72;
}

.comp-vinculo-group-cubre {
    color: #93c5fd;
}

.comp-vinculo-group-interpreta {
    color: #fbbf24;
}

.fin-comp-legend {
    width: 100%;
    font-size: 0.72rem;
    line-height: 1.4;
    opacity: 0.75;
    margin: 0 0 10px;
    padding: 0 4px;
}

.fin-comp-medio {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 4px;
}

.fin-comp-lectura-hint {
    font-size: 0.65rem;
    letter-spacing: 0.02em;
    opacity: 0.55;
    margin: 0 0 4px;
}

.fin-comp-article.fin-comp-interpreta {
    border-left: 3px solid rgba(251, 191, 36, 0.7);
}

.fin-comp-article {
    cursor: pointer;
}

.fin-comp-article.fin-comp-cubre {
    border-left: 3px solid rgba(96, 165, 250, 0.7);
}

.fin-comp-article .quality-chips-row-secondary {
    margin: 6px 0 0;
    opacity: 0.72;
}

.fin-comp-article .quality-score-chip {
    padding: 2px 7px;
    font-size: 0.62rem;
}

.fin-comp-desktop-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

.fin-comp-desktop-wrap .comparison-cols-row {
    flex: 1 1 0;
    min-height: 0;
}

.fin-comp-desktop-wrap .fin-comp-legend {
    flex: 0 0 auto;
    padding: 8px 16px 4px;
}

.comp-tab.comp-tab-hidden,
button.comp-tab[hidden] {
    display: none !important;
}

#prismaCompTabs.comparison-tabs-finance-single,
#desktopCompTabs.comparison-tabs-finance-single,
#comparisonPanel .comparison-tabs.comparison-tabs-finance-single,
#prismaSection[data-prisma-layout="phone"] #prismaCompTabs.comparison-tabs-finance-single,
.phone-screen #prismaCompTabs.comparison-tabs-finance-single,
#prismaSection:not(.desktop-mode) #prismaCompTabs.comparison-tabs-finance-single {
    display: none !important;
}

html[data-corpus="finance"] .prisma-mobile-tab-hint {
    display: none;
}

/* Desktop Layout Container - Full Immersion */
.prisma-desktop-layout {
    display: none;
    /* Hidden by default (Phone mode) */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* VIGNETTE border instead of physical border */
    background: transparent;
    box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.9);

    /* Layout */
    overflow: hidden;
    padding: 0;
    gap: 0;

    /* 3D Perspective for Carousel */
    perspective: 1500px;
}

/* Base Phone Frame visibility */
.phone-frame {
    display: block;
    width: 100%;
    height: 100%;
}

/* DESKTOP MODE ACTIVE STATE */
#prismaSection.desktop-mode {
    display: block !important;
    /* CRITICAL: Override inline display:none */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 80px !important;
    /* Room for mode toggle */
    max-width: none !important;
    max-height: none !important;
    z-index: 100;
    background: black;
    /* Ensure background is solid */
    box-sizing: border-box !important;
}

#prismaSection.desktop-mode .phone-frame {
    display: none !important;
}

#prismaSection.desktop-mode .prisma-desktop-layout {
    display: flex !important;
    /* Show Desktop Layout */
}

/* Show desktop layout when mode is active */
.prisma-full-view.desktop-mode .phone-simulator {
    display: none;
}

.prisma-full-view.desktop-mode .prisma-desktop-layout {
    display: flex;
}

/* Modo phone: ocultar siempre el carrusel de tres paneles (antes solo en @media 768px; en escritorio quedaba flex !important y tapaba mal el simulador) */
#prismaSection[data-prisma-layout="phone"] .prisma-desktop-layout {
    display: none !important;
}

/* Desktop Panel - Sections of the unified surface */
.desktop-panel {
    position: relative;
    flex: 1;
    min-width: 10%;
    height: 100%;
    min-height: 100vh;
    /* Force visibility */

    background: var(--panel-bg-solid);
    /* Debug: Visible dark background */
    border: none;
    border-radius: 0;
    box-shadow: none;

    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Subtle vertical division */
    border-right: 1px solid var(--card-border);

    /* Smooth fluid transition */
    transition: flex 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.5s ease;
}

.desktop-panel:last-child {
    border-right: none;
}

/* Focused Section (Center) */
.desktop-panel.focused {
    flex: 4;
    /* Dominant space */
    background: radial-gradient(circle at center, var(--accent-subtle) 0%, transparent 60%);
    z-index: 10;
    transform: translateZ(0);
    /* Bring to front logically */
    box-shadow: 0 0 50px var(--shadow-color);
    /* Lift it up */
}

/* Left Section */
.desktop-panel.left {
    transform-origin: right center;
    transform: scale(0.95);
    /* Subtle scale only, no rotation */
    filter: brightness(0.6) blur(1px);
    /* More focus separation */
    z-index: 1;
    opacity: 0.8;
}

/* Right Section */
.desktop-panel.right {
    transform-origin: left center;
    transform: scale(0.95);
    filter: brightness(0.6) blur(1px);
    z-index: 1;
    opacity: 0.8;
}

/* Unfocused Sections */
.desktop-panel:not(.focused) {
    flex: 0.8;
    /* Collapsed state */
    cursor: pointer;
}

.desktop-panel:not(.focused):hover {
    background: rgba(255, 255, 255, 0.02);
}

/* Content opacity transition for polish */
.desktop-panel>* {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.desktop-panel:not(.focused) .comparison-columns,
.desktop-panel:not(.focused) .timeline-node-content span,
.desktop-panel:not(.focused) .event-tag {
    opacity: 0.3;
}

/* Remove the top glow line - cleaner look */
.desktop-panel::before {
    display: none;
}

/* Desktop panel header */
.desktop-panel .face-header-fixed {
    padding: 30px 30px 20px 30px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--card-border) !important;
    box-shadow: none !important;
}

/* Right panel (Timeline) needs extra top padding to not overlap toggle */
.desktop-panel.panel-timeline .face-header-fixed,
.desktop-panel.right .face-header-fixed {
    padding-top: 100px !important;
    /* Clear space for mode toggle */
}

.desktop-panel:not(.focused) .face-header-fixed {
    padding: 30px 15px 20px 15px !important;
    text-align: center;
}

/* Headers in collapsed state */
.desktop-panel:not(.focused) .face-header-fixed h2 {
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.7;
}

.desktop-panel:not(.focused) .face-tag {
    display: none;
    /* Reduce visual noise */
}


/* Comparison columns */
.desktop-panel .comparison-columns {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;
    min-height: 0;
}

/* When comparison panel is focused, ensure columns fill the space */
.desktop-panel.focused .comparison-columns {
    flex: 1 1 0;
}

.desktop-panel .comparison-cols-row {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.desktop-panel .comparison-col {
    background: transparent;
    border-right: 1px solid var(--card-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
}

.desktop-panel .comparison-col:last-child {
    border-right: none;
}

.desktop-panel .comparison-col .col-header {
    padding: 12px 16px;
    flex-shrink: 0;
}

.desktop-panel .comparison-col .col-articles {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.desktop-panel .comparison-col .prisma-article {
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 8px;
}

.desktop-panel .comparison-col .prisma-article h4 {
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.desktop-panel .comparison-col .prisma-article p {
    font-size: 0.78rem;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.desktop-panel:not(.focused) .comparison-columns {
    /* already column by default */
}

.desktop-panel:not(.focused) .comparison-cols-row {
    flex-direction: column;
}

/* Events scroll container */
.desktop-panel .events-scroll-container {
    flex: 1;
    overflow-y: auto;
    padding: 0 40px 30px 40px;

    /* Custom Scrollbar for cleaner look */
    scrollbar-width: thin;
    scrollbar-color: rgba(62, 171, 247, 0.3) transparent;
}

.desktop-panel:not(.focused) .events-scroll-container {
    padding: 0 10px;
    opacity: 0.5;
    /* Dim content in collapsed state */
}

/* Event cards */
.desktop-panel .event-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--card-border);
    border-radius: 0;
    padding: 25px 10px;
    margin: 0;
}

.desktop-panel .event-card.active {
    background: var(--accent-subtle);
    /* Very subtle highlight */
    padding-left: 20px;
    border-left: 3px solid var(--accent-color);
}


/* Mini globe wrapper */
.desktop-panel .mini-globe-wrapper {
    width: 100% !important;
    height: clamp(420px, 52vh, 720px) !important;
    min-height: 420px !important;
    display: block !important;
    justify-content: center;
    align-items: center;
    margin: 0;
    transform: none !important;
    background: radial-gradient(circle at center, var(--accent-subtle) 0%, transparent 60%);
}

.desktop-panel:not(.focused) .mini-globe-wrapper {
    /* Panel lateral no enfocado: más bajo, pero sin scale que deforma WebGL */
    height: 220px !important;
    min-height: 220px !important;
    background: transparent;
    transform: none !important;
}



/* --------------------------------------------------------- */
/* SPLIT SCREEN LAYOUT (Feature: desktop-split-layout) */
/* --------------------------------------------------------- */

/* Events Panel Grid Layout (When Focused) */
.desktop-panel.panel-events.focused {
    display: grid !important;
    /* Force Grid */
    grid-template-rows: auto minmax(500px, 1fr);
    /* Minimum 500px for globe row */
    grid-template-columns: 1fr 1fr;
    /* 50% Text, 50% Globe */
    grid-template-areas:
        "header header"
        "text globe";
    gap: 0;
    padding: 0;
}

.desktop-panel.panel-events.focused .face-header-fixed {
    grid-area: header;
    position: relative;
    /* Not absolute relative to whole panel anymore, but in grid flow */
    width: 100%;
    z-index: 10;
}

.desktop-panel.panel-events.focused .events-scroll-container {
    grid-area: text;
    position: relative;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    padding: 20px 40px;
    margin-top: 0;
    /* Removing absolute positioning margin */
    /* Ensure text is readable */
    background: linear-gradient(to right, var(--overlay-dark), transparent);
    order: 1;
    /* Ensure left */
    transform: translateY(-4vh);
    /* Nudge up for optical centering */
}

.desktop-panel.panel-events.focused .mini-globe-wrapper {
    grid-area: globe;
    position: relative;
    /* Reset from absolute */
    top: auto;
    left: auto;
    width: 100%;
    height: 100% !important;
    min-height: 500px !important;
    /* Ensure minimum size for globe */
    /* Fill grid height */
    max-height: 100vh;
    /* Prevent overflow */
    transform: translateY(-4vh);
    /* Nudge up for optical centering */
    /* Reset center translate handled by grid but we add nudge */
    display: block;
    order: 2;
    /* Ensure right */
    background: transparent;
    /* Clean bg for globe */
}

#desktopMiniGlobeContainer.mini-globe-wrapper,
.desktop-panel.panel-events.focused #desktopMiniGlobeContainer {
    height: 100% !important;
    min-height: 500px !important;
}

/* WebGL: max-width/max-height + object-fit pueden dejar el canvas sin pintar en algunos navegadores */
.desktop-panel.panel-events.focused .mini-globe-wrapper canvas {
    max-width: none;
    max-height: none;
    object-fit: fill;
}

#desktopMiniGlobe canvas {
    max-width: none !important;
    max-height: none !important;
}

/* --------------------------------------------------------- */


/* Timeline */
.desktop-panel .vertical-timeline {
    flex: 1;
    overflow-y: auto;
    padding: 20px 40px;
}

.desktop-panel .timeline-node {
    display: flex;
    /* Flex layout for node + content */
    align-items: flex-start;
    /* Align to top */
    gap: 20px;
    /* Clear gap between icon and text */
    padding: 20px 25px;
    border-left: 1px solid var(--card-border);
    margin-left: 10px;
    background: transparent;
    position: relative;
}

/* The diamond icon simulation if it's css, or the content adjustment */
.desktop-panel .timeline-node::before {
    content: '';
    position: absolute;
    left: -5px;
    /* Position on the border line */
    top: 28px;
    /* Align with first line of text roughly */
    width: 9px;
    height: 9px;
    background: var(--bg-tertiary);
    border: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: all 0.3s ease;
}

.desktop-panel .timeline-node:hover::before {
    border-color: var(--accent-color);
    background: var(--accent-color);
}

.desktop-panel .timeline-node.active::before {
    border-color: var(--accent-color);
    background: var(--accent-color);
    box-shadow: 0 0 10px var(--accent-color);
}

.desktop-panel .timeline-node-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.desktop-panel .timeline-node h4 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
}

.desktop-panel .timeline-node span {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.desktop-panel .timeline-node:hover {
    background: rgba(255, 255, 255, 0.03);
    border-left-color: var(--accent-color);
}

.desktop-panel .timeline-node.active {
    background: rgba(62, 171, 247, 0.08);
    border-left: 2px solid var(--accent-color);
}

.desktop-panel:not(.focused) .vertical-timeline {
    padding: 10px;
    opacity: 0.6;
}


/* Desktop Navigation Arrows - Positioned outside container or floating */
/* Desktop Navigation Arrows - Edge of screen */
.desktop-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;

    width: 60px;
    height: 100px;
    /* Taller touch area */

    /* transparent */
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.3);

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.desktop-nav:hover {
    background: radial-gradient(ellipse at center, rgba(62, 171, 247, 0.1) 0%, transparent 70%);
    color: var(--accent-color);
}

.desktop-nav i {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

.desktop-nav-left {
    left: 0;
}

.desktop-nav-right {
    right: 0;
}

/* Clean up hints */
.desktop-panel .face-hint {
    display: none;
}

/* === RESPONSIVE === */
/* =========================================
   RESPONSIVE / REAL MOBILE DEVICE STYLES
   ========================================= */

/* When on a real mobile device (width < 768px), remove the "Simulator Frame"
   and just show the screen content full width/height. */

@media (max-width: 768px) {

    /* 1. Hide the Simulator Container visuals */
    .phone-simulator {
        background: var(--bg-color);
        /* Plain bg instead of gradient */
    }

    /* FIX: Prevent lateral scrolling / rubber banding */
    html,
    body {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        position: fixed;
    }

    .phone-device {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        border: none;
        box-shadow: none;
        background: var(--bg-color);
        padding: 0;
        margin: 0;
    }

    /* 2. Hide specific frame elements */
    .phone-notch,
    .phone-home-bar {
        display: none !important;
    }

    /* 3. Screen fills viewport */
    .phone-screen {
        width: 100%;
        height: 100%;
        border-radius: 0;
        position: relative;
        background: var(--bg-color);
        overflow: hidden;
        display: block;
        /* Reset flex */
    }

    /* Pestañas comparativa — móvil real: barra clara y táctil (data-prisma-layout vía JS) */
    #prismaSection[data-prisma-layout="phone"] #prismaCompTabs.comparison-tabs,
    .phone-screen #prismaCompTabs.comparison-tabs {
        display: flex !important;
        flex-shrink: 0;
        min-height: 54px;
        padding: 6px 4px 8px;
        margin-top: 8px;
        margin-bottom: 0;
        gap: 2px;
        background: rgba(15, 23, 42, 0.92) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-bottom: none !important;
        border-radius: 14px 14px 0 0 !important;
        box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.35);
        z-index: 5;
        position: relative;
    }

    #prismaSection[data-prisma-layout="phone"] #prismaCompTabs .comp-tab,
    .phone-screen #prismaCompTabs .comp-tab {
        flex: 1;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 5px !important;
        min-height: 48px !important;
        padding: 10px 2px 11px !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        line-height: 1.12 !important;
        color: rgba(255, 255, 255, 0.55) !important;
        border-bottom-width: 3px !important;
    }

    #prismaSection[data-prisma-layout="phone"] #prismaCompTabs .comp-tab.active,
    .phone-screen #prismaCompTabs .comp-tab.active {
        color: var(--accent-color) !important;
    }

    #prismaSection[data-prisma-layout="phone"] #prismaCompTabs .comp-tab svg,
    #prismaSection[data-prisma-layout="phone"] #prismaCompTabs .comp-tab [data-lucide],
    .phone-screen #prismaCompTabs .comp-tab svg,
    .phone-screen #prismaCompTabs .comp-tab [data-lucide] {
        width: 22px !important;
        height: 22px !important;
    }

    [data-theme="light"] #prismaSection[data-prisma-layout="phone"] #prismaCompTabs.comparison-tabs,
    [data-theme="light"] .phone-screen #prismaCompTabs.comparison-tabs {
        background: rgba(248, 250, 252, 0.98) !important;
        border-color: rgba(15, 23, 42, 0.1) !important;
        box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
    }

    [data-theme="light"] #prismaSection[data-prisma-layout="phone"] #prismaCompTabs .comp-tab,
    [data-theme="light"] .phone-screen #prismaCompTabs .comp-tab {
        color: var(--text-secondary) !important;
    }

    /* 4. Ensure Prisma Viewport uses full space and centers content */
    .prisma-viewport {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        /* Centering power */
        align-items: center;
        justify-content: center;
        perspective: 1000px;
        overflow: hidden;
    }

    /* 5. Hide Global Toggles (User is already on Phone) */
    .prisma-mode-toggle {
        display: none !important;
    }

    /* 6. Carrusel desktop: ocultar en phone ya está definido globalmente; aquí forzamos visible en desktop + pantalla estrecha */

    /* Con modo desktop en pantalla estrecha, forzar el layout de tres paneles por encima del base display:none */
    #prismaSection.desktop-mode[data-prisma-layout="desktop"] .prisma-desktop-layout,
    #prismaSection[data-prisma-layout="desktop"].desktop-mode .prisma-desktop-layout {
        display: flex !important;
    }

    /* 7. Hide Left Panel definitively */
    .left-panel {
        display: none !important;
    }

    /* 8. Ensure Mini Globe is visible and sized correctly */
    .phone-screen .mini-globe-wrapper {
        height: 180px !important;
        min-height: 150px;
        margin: 0 !important;
    }

    /* 9. Adjust content padding for "Safe Area" (Notch/Dynamic Island) */
    .phone-screen .face-header {
        padding-top: env(safe-area-inset-top, 40px) !important;
        padding-bottom: 10px !important;
    }

    .phone-screen .events-scroll-container {
        padding-bottom: env(safe-area-inset-bottom, 20px) !important;
    }

    /* ==============================================
   MOBILE-FIRST PRISMA DESIGN
   For screens <= 480px (iPhone, Android phones)
   ============================================== */
    @media (max-width: 480px) {

        /* Ultra-compact globe for mobile app feel */
        .mini-globe-wrapper {
            width: 160px;
            height: 160px;
            margin: 5px auto 5px auto;
        }

        #miniGlobe {
            width: 160px;
            height: 160px;
        }

        /* Ultra-compact face header */
        .face-header {
            padding: 10px 15px;
        }

        .face-header h2 {
            font-size: 0.9rem;
            line-height: 1.1;
            margin: 0;
        }

        .face-tag {
            font-size: 0.55rem;
            margin-bottom: 4px;
        }

        .face-subtitle {
            font-size: 0.65rem;
            margin-top: 3px;
        }
    }

    /* Closing brace for media query */

    /* Event cards - app-style feed */
    .events-scroll-container {
        padding: 0 15px;
        margin-top: 5px;
        flex: 1;
        max-height: calc(100vh - 180px);
    }

    .event-card {
        padding: 12px 15px;
        margin-bottom: 8px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(62, 171, 247, 0.2);
    }

    .event-card h3 {
        font-size: 0.95rem;
        margin-bottom: 8px;
        line-height: 1.3;
    }

    .event-card p {
        font-size: 0.8rem;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.7);
    }

    /* Face hint - smaller */
    .face-hint {
        padding: 8px;
        font-size: 0.6rem;
    }

    /* Prisma container - full mobile */
    .prisma-container {
        padding: 5px;
        /* Ensure 3D is preserved */
        transform-style: preserve-3d;
    }

    .prisma {
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
    }

    .prisma-face {
        border-radius: 12px;
        padding: 5px;
        /* Ensure faces are visible in 3D */
        backface-visibility: hidden;
    }
}

/* =========================================
   HYBRID GLOBE-MAP ENGINE SWITCHING
   ========================================= */

/* Container must confine both engines — altura del panel enfocado la fija el grid;
   aquí solo el fallback cuando el panel aún no está focused. */
#desktopMiniGlobeContainer {
    position: relative;
    width: 100% !important;
    height: clamp(420px, 52vh, 720px);
    min-height: 420px;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
}

.desktop-panel.panel-events.focused #desktopMiniGlobeContainer {
    height: 100% !important;
    min-height: 500px !important;
}

/* Globo: relative para aportar tamaño; el mapa se superpone encima cuando está activo */
#desktopMiniGlobe {
    position: relative !important;
    width: 100% !important;
    min-width: 260px;
    height: 100% !important;
    min-height: 400px !important;
    overflow: hidden;
    z-index: 2;
    transition: opacity 0.5s ease-in-out;
}

#desktopLeafletMap {
    z-index: 1;
}

#desktopLeafletMap.active {
    z-index: 10 !important;
}

/* Phone Mode Map Container */
#phoneLeafletMap {
    z-index: 10;
    border-radius: 8px;
}

#miniGlobe {
    position: relative;
}

/* =========================================
   MOBILE TOUCH FIX: Improve touch handling
   WITHOUT breaking 3D visual effect
   ========================================= */
@media (pointer: coarse) {

    /* Ensure scrollable content receives touch events */
    .phone-screen .events-scroll-container,
    .phone-screen .vertical-timeline,
    .phone-screen .comparison-col {
        /* Use will-change to promote to own layer for touch */
        will-change: scroll-position;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* === THEME LIGHT === */
/* =========================================
   LIGHT THEME EXPLICIT OVERRIDES
   Force light backgrounds on all major sections
   ========================================= */
[data-theme="light"] body {
    background-color: #f8fafc !important;
}

[data-theme="light"] .prisma-full-view,
[data-theme="light"] .prisma-desktop-layout {
    background: #f1f5f9 !important;
}

[data-theme="light"] .desktop-panel {
    background: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="light"] .desktop-panel.focused {
    background: radial-gradient(circle at center, rgba(2, 132, 199, 0.08) 0%, rgba(255, 255, 255, 0.95) 60%) !important;
}

[data-theme="light"] .phone-screen,
[data-theme="light"] .phone-container {
    background: #f8fafc !important;
}

[data-theme="light"] .phone-screen .face-events,
[data-theme="light"] .phone-screen .face-comparison,
[data-theme="light"] .phone-screen .face-timeline {
    background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%) !important;
}

[data-theme="light"] .events-scroll-container {
    background: transparent !important;
}

[data-theme="light"] .desktop-panel .timeline-node h4 {
    color: #0f172a;
}

[data-theme="light"] .desktop-panel .timeline-node span {
    color: #475569;
}

[data-theme="light"] .desktop-panel .timeline-node:hover {
    background: rgba(2, 132, 199, 0.05);
}

[data-theme="light"] .event-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .event-card h3,
[data-theme="light"] .event-date,
[data-theme="light"] .event-card p {
    color: #0f172a;
}

[data-theme="light"] .face-tag {
    color: #0284c7;
}

[data-theme="light"] .face-header h2,
[data-theme="light"] .face-header-fixed h2 {
    color: #0f172a;
}

[data-theme="light"] .comparison-columns {
    background: transparent !important;
}

[data-theme="light"] .comparison-col {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .comparison-col-header h4 {
    color: #0f172a;
}

[data-theme="light"] .vertical-timeline {
    background: transparent;
}

[data-theme="light"] .timeline-node-content {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .timeline-node.active .timeline-node-content {
    background: rgba(2, 132, 199, 0.1);
    border-color: #0284c7;
}

[data-theme="light"] .desktop-panel .mini-globe-wrapper {
    background: radial-gradient(circle at center, rgba(2, 132, 199, 0.03) 0%, transparent 60%);
}

[data-theme="light"] .desktop-panel.panel-events.focused .events-scroll-container {
    background: transparent !important;
}

[data-theme="light"] #desktopMiniGlobeContainer {
    background: rgba(0, 0, 0, 0.03);
}

/* Retro: mismas superficies base que light clásico (detalle en styles-light-retro.css) */
[data-theme="retro"] body {
    background-color: var(--paper) !important;
}

[data-theme="retro"] .prisma-full-view,
[data-theme="retro"] .prisma-desktop-layout {
    background: var(--paper-light) !important;
}

[data-theme="retro"] .phone-screen,
[data-theme="retro"] .phone-container {
    background: var(--paper) !important;
}

[data-theme="retro"] .ling-card {
    background: linear-gradient(160deg, var(--paper-light) 0%, var(--paper) 100%);
    border-color: var(--gray-light);
    box-shadow: var(--shadow-paper);
}

[data-theme="retro"] .ling-acc-num {
    color: var(--accent-analysis);
}

/* =========================================
   HYBRID ENGINE STYLES (Remote Merge)
   ========================================= */

/* Por encima del div Leaflet cuando el mapa está a opacity 0 (evita tapar WebGL). */
#desktopMiniGlobe {
    position: relative !important;
    z-index: 2;
    transition: opacity 0.5s ease-in-out;
}

#desktopMiniGlobe.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* 2D Leaflet Map layer — absolute overlay; no quita altura al globo relative */
#desktopLeafletMap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
    border-radius: 12px;
}

#desktopLeafletMap.active {
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 10 !important;
}

/* Leaflet Map Custom Styling */
#desktopLeafletMap .leaflet-container {
    background: #1a1a2e;
    border-radius: 12px;
}

/* Hide Leaflet default attribution for cleaner look */
#desktopLeafletMap .leaflet-control-attribution {
    display: none;
}

/* Custom marker style for Leaflet */
.leaflet-marker-icon.map-marker {
    background: var(--accent-color);
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-glow);
}

/* Engine switch hint overlay */
.engine-switch-hint {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

#desktopMiniGlobeContainer:hover .engine-switch-hint {
    opacity: 1;
}

/* Chatbot Loading Animation */
.loading-message {
    opacity: 0.8;
}

.loading-dots {
    display: inline-block;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 2px;
}

.loading-dots::after {
    content: '.';
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0% {
        content: '.';
    }

    33% {
        content: '..';
    }

    66% {
        content: '...';
    }

    100% {
        content: '.';
    }
}

/* === DEV MODE === */
/* =========================================
   DEVELOPER MODE (VIDEO CURATION & SIDEBAR)
   ========================================= */

/* Button style when active */
#devModeToggle.active {
    background: var(--accent-color);
    color: var(--text-inverted);
    box-shadow: 0 0 15px var(--accent-glow);
}

/* Sidebar Container */
.dev-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    /* Hidden offscreen by default */
    width: 350px;
    height: 100vh;
    background: var(--panel-bg-solid);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid var(--panel-border);
    z-index: 3000;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0 25px var(--shadow-color);
}

body.dev-mode-active .dev-sidebar {
    right: 0;
}

.dev-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid var(--panel-border);
    background: var(--accent-subtle);
}

.dev-sidebar-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    color: var(--accent-color);
    margin: 0;
}

.dev-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    transition: color 0.2s;
}

.dev-close-btn:hover {
    color: var(--text-primary);
}

.dev-sidebar-content {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.dev-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Sidebar List Items */
.dev-event-item {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 15px;
}

.dev-event-title {
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.dev-input-group {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.dev-input-group input {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--panel-border);
    color: var(--text-primary);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
}

.dev-input-group input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.dev-input-group button {
    background: var(--accent-color);
    color: var(--text-inverted);
    border: none;
    border-radius: 6px;
    padding: 0 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.dev-input-group button:hover {
    background: var(--accent-hover);
}

.dev-event-status {
    font-size: 0.75rem;
    min-height: 14px;
}

/* =========================================
   TIKTOK FEED (FULL SCREEN VIDEO SCROLLING)
   ========================================= */

/* Make events scroll container snap if dev-mode allows vertical videos */
body.dev-mode-active .events-scroll-container,
.events-scroll-container.vertical-feed {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    /* Ensure it fills parent */
}

.events-scroll-container.has-vertical {
    scroll-snap-type: y mandatory;
}

.events-scroll-container.has-vertical .event-card {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.event-card.vertical-video-card {
    height: 100%;
    width: 100%;
    margin-bottom: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Text at bottom via overlay */
    position: relative;
    padding: 0;
    /* Remove padding, handled by absolute overlay */
}

/* Fullscreen Video styling */
.feed-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 1;
}

.feed-video-container iframe,
.feed-video-container video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* or cover depending on requested vertical style */
}

/* Event text overlay over video */
.event-card.vertical-video-card .event-card-content {
    position: relative;
    z-index: 2;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
    padding: 30px 20px 20px 20px;
    width: 100%;
    pointer-events: none;
    /* Let clicks pass to video if needed */
}

.event-card.vertical-video-card h3 {
    font-size: 1.1rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    margin-bottom: 8px;
}

.event-card.vertical-video-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    margin-bottom: 10px;
}

.event-card.vertical-video-card .event-date {
    color: rgba(255, 255, 255, 0.6);
}

/* Horizontal Video styling (16:9 embed inside normal card) */
.horizontal-video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
    z-index: 2;
    /* Sit above the normal card background */
}

.horizontal-video-container iframe,
.horizontal-video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Transparent overlay to allow scrolling over iframes (e.g. YouTube Horizontal) */
.iframe-scroll-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background: transparent;
}

/* Mute/unmute button overlay on video cards */
.video-unmute-btn {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background 0.2s;
}

.video-unmute-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* =========================================
   COMPARISON TABS
   ========================================= */

.comparison-tabs {
    display: flex;
    gap: 0;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.face-header-fixed .comparison-tabs {
    padding: 0 10px;
    margin-top: 6px;
    border-radius: 10px 10px 0 0;
}

.comparison-panel .comparison-tabs {
    padding: 0 24px;
    background: var(--overlay-dark);
    border-bottom-color: var(--card-border);
}

.comp-tab {
    flex: 1;
    justify-content: center;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255, 255, 255, 0.45);
    padding: 11px 10px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: -1px;
}

.comp-tab svg,
.comp-tab [data-lucide] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.85;
}

.comp-tab:hover {
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.03);
}

.comp-tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
    font-weight: 700;
}

.comp-tab.active svg,
.comp-tab.active [data-lucide] {
    opacity: 1;
}

[data-theme="light"] .comparison-tabs {
    background: rgba(248, 250, 252, 0.95);
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .comp-tab {
    color: var(--text-secondary);
}

[data-theme="light"] .comp-tab:hover {
    color: var(--text-primary);
    background: rgba(15, 23, 42, 0.04);
}

/* Tres pestañas — simulador móvil y modo Prisma “phone” (viewport estrecho) */
.phone-screen #prismaCompTabs.comparison-tabs,
#prismaSection:not(.desktop-mode) #prismaCompTabs.comparison-tabs {
    padding: 0 4px;
    margin-top: 10px;
    margin-bottom: 0;
    min-height: 52px;
    align-items: stretch;
    border-radius: 12px 12px 0 0;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: none;
}

.phone-screen #prismaCompTabs .comp-tab,
#prismaSection:not(.desktop-mode) #prismaCompTabs .comp-tab {
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-height: 48px;
    padding: 10px 3px 11px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
}

.phone-screen #prismaCompTabs .comp-tab svg,
.phone-screen #prismaCompTabs .comp-tab [data-lucide],
#prismaSection:not(.desktop-mode) #prismaCompTabs .comp-tab svg,
#prismaSection:not(.desktop-mode) #prismaCompTabs .comp-tab [data-lucide] {
    width: 20px;
    height: 20px;
}

@media (max-width: 420px) {

    .phone-screen #prismaCompTabs .comp-tab,
    #prismaSection:not(.desktop-mode) #prismaCompTabs .comp-tab {
        font-size: 0.63rem;
        min-height: 46px;
        padding: 8px 2px 9px;
    }
}

[data-theme="light"] #prismaSection:not(.desktop-mode) #prismaCompTabs.comparison-tabs,
[data-theme="light"] .phone-screen #prismaCompTabs.comparison-tabs {
    background: rgba(248, 250, 252, 0.96);
    border-color: rgba(15, 23, 42, 0.08);
}

/* =========================================
   RELACIONES (causal / timeline, alineado app)
   ========================================= */

.rel-root {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 20px;
}

.rel-empty {
    text-align: center;
    padding: 36px 16px;
    opacity: 0.85;
}

.rel-empty-title {
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--text-primary);
}

.rel-empty-hint {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.rel-macro-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-color);
    background: var(--accent-subtle);
    border: 1px solid var(--accent-border);
}

.rel-macro-chip svg,
.rel-macro-chip [data-lucide] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.rel-summary-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--overlay-dark);
    border: 1px solid var(--card-border);
    font-size: 0.78rem;
}

.rel-summary-item {
    flex: 1;
    text-align: center;
    color: var(--text-secondary);
}

.rel-summary-div {
    width: 1px;
    height: 22px;
    background: var(--card-border);
}

.rel-pillar {
    border-radius: 14px;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    overflow: hidden;
}

.rel-pillar-h {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-left: 4px solid var(--pillar);
    background: rgba(0, 0, 0, 0.12);
}

.rel-pillar-h svg,
.rel-pillar-h [data-lucide] {
    width: 20px;
    height: 20px;
    color: var(--pillar);
    flex-shrink: 0;
    margin-top: 2px;
}

.rel-pillar-h strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.rel-pillar-h span {
    display: block;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.35;
}

.rel-pillar-b {
    padding: 8px 10px 12px;
}

.rel-subsection {
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 6px;
}

.rel-subsection:last-child {
    border-bottom: none;
}

.rel-sub-sum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 6px;
    cursor: pointer;
    list-style: none;
    font-size: 0.82rem;
}

.rel-sub-sum::-webkit-details-marker {
    display: none;
}

.rel-sub-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rel-sub-title {
    font-weight: 700;
    color: var(--text-primary);
}

.rel-sub-count {
    font-weight: 500;
    color: var(--text-secondary);
}

.rel-sub-hint {
    width: 100%;
    flex-basis: 100%;
    margin-left: 16px;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    line-height: 1.35;
}

.rel-sub-body {
    padding: 0 4px 10px 16px;
}

.rel-row {
    border-left: 3px solid var(--rel-accent, var(--accent-color));
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 0 10px 10px 0;
    background: var(--overlay-dark);
}

.rel-row-desc {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-primary);
}

.rel-row-id {
    margin: 4px 0 0;
    font-size: 0.68rem;
    color: var(--text-tertiary);
    font-family: ui-monospace, monospace;
}

.rel-date-pill {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--rel-accent, var(--accent-color));
    background: rgba(62, 171, 247, 0.14);
}

.rel-timeline-block {
    margin-top: 6px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
}

.rel-tl-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 0.88rem;
    color: var(--text-primary);
}

.rel-tl-title svg,
.rel-tl-title [data-lucide] {
    width: 18px;
    height: 18px;
    color: var(--accent-color);
}

.rel-tl-row {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--card-border);
    font-size: 0.78rem;
}

.rel-tl-row:last-child {
    border-bottom: none;
}

.rel-tl-date {
    flex-shrink: 0;
    min-width: 88px;
    font-weight: 600;
    color: var(--accent-color);
}

.rel-tl-desc {
    color: var(--text-secondary);
    line-height: 1.4;
}

[data-theme="light"] .rel-row {
    background: rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .rel-pillar-h {
    background: rgba(15, 23, 42, 0.04);
}

/* =========================================
   SOURCE ANALYSIS MODULE
   ========================================= */

.src-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--card-border);
}

.src-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.src-section-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-color);
    font-weight: 700;
    margin-bottom: 14px;
}

/* Stats row */
.src-stats-row {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
}

.src-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 12px 20px;
    min-width: 80px;
}

.src-stat-num {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--accent-color);
    line-height: 1;
}

.src-stat-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 4px;
    text-align: center;
}

/* Type breakdown bar */
.src-type-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 10px;
    background: var(--overlay-dark);
}

.src-type-bar-mini {
    height: 6px;
    margin: 8px 0 4px;
}

.src-type-segment {
    height: 100%;
    transition: width 0.4s ease;
}

.src-type-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.src-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.src-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Source chips */
.src-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.src-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--card-border);
    font-size: 0.75rem;
    color: var(--text-primary);
    background: var(--card-bg);
}

.src-chip-common {
    background: var(--accent-subtle);
    font-weight: 600;
}

.src-chip-exclusive {
    background: rgba(126, 247, 62, 0.08);
}

.src-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Per-medio grid */
.src-medio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.src-medio-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 16px;
}

.src-medio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.src-medio-count {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.src-medio-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin: 10px 0 5px;
}

/* Publication time badge on articles */
.article-pub-time {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-color);
    background: var(--accent-subtle);
    border: 1px solid var(--accent-border);
    border-radius: 4px;
    padding: 2px 7px;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

/* Time badge on timeline nodes */
.timeline-node-time {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--accent-color);
    background: var(--accent-subtle);
    border-radius: 4px;
    padding: 1px 6px;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

/* Comparison tabs inside face-header-fixed */
.face-header-fixed .comparison-tabs {
    padding: 8px 0 0;
    border-bottom: none;
    background: none;
    margin-top: 6px;
}

/* =========================================
   INLINE SOURCES BLOCK (inside comparison columns)
   ========================================= */

.col-sources-block {
    padding: 10px 14px 12px;
    border-bottom: 1px solid var(--card-border);
    background: rgba(62, 171, 247, 0.04);
}

/* Type breakdown bar */
.col-src-bar {
    display: flex;
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
    background: var(--overlay-dark);
}

.col-src-bar-seg {
    height: 100%;
}

/* Source chips */
.col-src-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.col-src-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    background: var(--card-bg);
    white-space: nowrap;
    cursor: default;
}

.col-src-chip.common {
    border-color: rgba(62, 171, 247, 0.4);
    color: var(--accent-color);
    background: var(--accent-subtle);
}

.col-src-chip.excl {
    border-color: rgba(126, 247, 62, 0.4);
    color: #7ef73e;
    background: rgba(126, 247, 62, 0.06);
}

.excl-star {
    font-size: 0.6rem;
    margin-left: 2px;
    opacity: 0.8;
}

/* =========================================
   SOURCES DRAWER
   ========================================= */

.sources-drawer {
    width: 100%;
    border-top: 1px solid var(--accent-border);
    background: var(--panel-bg-solid);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-shrink: 0;
    /* Sits below the columns row, never grows */
    z-index: 10;
}

.sources-drawer-handle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: linear-gradient(90deg, rgba(62, 171, 247, 0.12) 0%, rgba(15, 23, 42, 0.4) 55%, rgba(15, 23, 42, 0.55) 100%);
    border: none;
    border-bottom: 1px solid transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    transition: background 0.2s, filter 0.2s;
    text-align: left;
}

.sources-drawer-handle:hover {
    background: linear-gradient(90deg, rgba(62, 171, 247, 0.2) 0%, rgba(15, 23, 42, 0.45) 55%, rgba(15, 23, 42, 0.6) 100%);
    filter: brightness(1.03);
}

.sources-drawer-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sources-drawer-icon {
    color: var(--accent-color);
    font-size: 1rem;
}

.sources-drawer-badge {
    font-size: 0.68rem;
    font-weight: 550;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 3px 10px;
}

.sources-drawer-chevron {
    font-size: 0.65rem;
    color: var(--accent-color);
    transition: transform 0.2s;
}

.sources-drawer-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.sources-drawer.open .sources-drawer-handle {
    border-bottom-color: var(--card-border);
}

.sources-drawer.open .sources-drawer-body {
    max-height: 45vh;
    overflow-y: auto;
    padding: 16px;
}

/* Light theme */
[data-theme="light"] .sources-drawer {
    background: rgba(255, 255, 255, 0.97);
}

[data-theme="light"] .sources-drawer-handle {
    background: rgba(2, 132, 199, 0.05);
}

[data-theme="light"] .sources-drawer-handle:hover {
    background: rgba(2, 132, 199, 0.1);
}
/* =========================================
   LINGUISTIC ANALYSIS INDICATOR
   ========================================= */
.ling-indicator {
    margin: 12px 0;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: var(--card-bg);
    overflow: hidden;
}

.ling-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: background 0.2s;
}

.ling-toggle:hover {
    background: var(--card-bg-hover);
}

.ling-score {
    min-width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.ling-label {
    flex: 1;
    text-align: left;
    font-weight: 500;
}

.ling-chevron {
    font-size: 0.65rem;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.ling-indicator.expanded .ling-chevron {
    transform: rotate(180deg);
}

.ling-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: var(--overlay-dark);
}

.ling-indicator.expanded .ling-details {
    max-height: 300px;
    overflow-y: auto;
    padding: 12px;
}

.ling-detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.ling-detail-row:last-child {
    margin-bottom: 0;
}

.ling-detail-label {
    width: 100px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.ling-bar {
    flex: 1;
    height: 6px;
    background: var(--card-bg);
    border-radius: 3px;
    overflow: hidden;
}

.ling-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.ling-value {
    width: 40px;
    font-size: 0.75rem;
    color: var(--text-primary);
    text-align: right;
    font-weight: 600;
}

.ling-explanation {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--card-border);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Light theme adjustments */
[data-theme="light"] .ling-indicator {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .ling-details {
    background: rgba(0, 0, 0, 0.03);
}

/* ── Quality chips + análisis lingüístico (comparativa refinada) ── */
.quality-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 12px;
}

.quality-score-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 5px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.quality-score-chip:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-1px);
}

.quality-score-chip-lbl {
    opacity: 0.75;
    font-weight: 700;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ling-card {
    margin: 14px 0 6px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(0, 0, 0, 0.15) inset;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ling-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ling-score-badge {
    min-width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) inset;
}

.ling-card-title {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.88);
}

.ling-card-metrics {
    padding: 10px 10px 12px;
    background: rgba(0, 0, 0, 0.12);
}

.ling-beta-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.18);
}

details.ling-acc {
    border: none;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

details.ling-acc:last-of-type {
    border-bottom: none;
}

details.ling-acc summary.ling-acc-sum {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    list-style: none;
    transition: background 0.15s ease;
}

details.ling-acc summary.ling-acc-sum:hover {
    background: rgba(255, 255, 255, 0.04);
}

details.ling-acc summary.ling-acc-sum::-webkit-details-marker {
    display: none;
}

details.ling-acc summary.ling-acc-sum::before {
    content: '';
    width: 5px;
    height: 5px;
    border-right: 2px solid rgba(255, 255, 255, 0.35);
    border-bottom: 2px solid rgba(255, 255, 255, 0.35);
    transform: rotate(-45deg);
    flex-shrink: 0;
    margin-right: 2px;
    transition: transform 0.2s ease;
}

details.ling-acc[open] summary.ling-acc-sum::before {
    transform: rotate(45deg);
    margin-top: 2px;
}

.ling-acc-num {
    margin-left: auto;
    color: rgba(125, 211, 252, 0.95);
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
}

.ling-acc-body {
    padding: 0 12px 14px 28px;
    font-size: 0.76rem;
}

.ling-beta-hint {
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    margin: 0 0 10px;
}

.ling-beta-hint.ling-beta-muted {
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.72rem;
}

.ling-beta-total {
    margin: 0 0 10px;
    font-size: 0.78rem;
    color: rgba(125, 211, 252, 0.9);
}

.ling-beta-total.ling-total-enc {
    color: rgba(251, 191, 36, 0.95);
}

.ling-beta-total.ling-total-ses {
    color: rgba(147, 197, 253, 0.95);
}

.ling-metric-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(48px, 1fr) 38px;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 10px;
}

.ling-metric-lbl {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    line-height: 1.3;
}

.ling-metric-val {
    text-align: right;
    font-weight: 750;
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.9);
}

.ling-metric-na {
    text-align: right;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.7rem;
}

.ling-progress-track {
    height: 5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.ling-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.12);
}

.ling-e3-block {
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(62, 171, 247, 0.08);
    border: 1px solid rgba(62, 171, 247, 0.12);
}

.ling-e3-title {
    font-size: 0.68rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(125, 211, 252, 0.75);
    margin: 0 0 8px;
}

.ling-e3-line {
    margin: 5px 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.78);
}

.ling-sesgo-card {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.2);
}

.ling-sesgo-lbl {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.4);
}

.ling-sesgo-actor {
    margin: 6px 0 2px;
    font-size: 0.78rem;
    font-weight: 650;
    color: rgba(255, 255, 255, 0.9);
}

.ling-sesgo-valor {
    font-size: 0.76rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    margin: 4px 0;
}

.ling-sesgo-ev {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
    margin: 6px 0 0;
}

.ling-marco-line {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

details.ling-more {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.1);
}

details.ling-more summary.ling-more-sum {
    padding: 12px 14px;
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 650;
    color: rgba(125, 211, 252, 0.9);
    list-style: none;
    transition: background 0.15s ease;
}

details.ling-more summary.ling-more-sum:hover {
    background: rgba(255, 255, 255, 0.03);
}

details.ling-more summary.ling-more-sum::-webkit-details-marker {
    display: none;
}

.ling-more-body {
    padding: 0 14px 16px;
}

.ling-extra-sec {
    margin-bottom: 14px;
}

.ling-extra-h {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.45);
}

.ling-extra-txt,
.ling-extra-line {
    font-size: 0.76rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.62);
    margin: 0;
}

.ling-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ling-tag {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
}

.ling-tag.ling-tag-warn {
    border-color: rgba(251, 191, 36, 0.35);
    color: rgba(253, 224, 71, 0.95);
    background: rgba(251, 191, 36, 0.08);
}

.ling-tag.ling-tag-fuente {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ling-fuente-tipo {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
}

.prisma-article .ling-card,
.comp-article .ling-card {
    margin-top: 12px;
}

/* Columnas estrechas (desktop prisma): filas apiladas, sin solapamientos */
.desktop-panel .comparison-col .ling-metric-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    margin-bottom: 12px;
}

.desktop-panel .comparison-col .ling-metric-row .ling-metric-lbl {
    font-size: 0.68rem;
}

.desktop-panel .comparison-col .ling-metric-row .ling-metric-val,
.desktop-panel .comparison-col .ling-metric-row .ling-metric-na {
    align-self: flex-end;
    margin-top: 2px;
}

.desktop-panel .comparison-col .ling-acc-body {
    padding-left: 10px;
    padding-right: 10px;
}

.desktop-panel .comparison-col .quality-score-chip {
    padding: 4px 9px;
    font-size: 0.64rem;
}

/* ── Fuentes: resumen y tarjetas (panel refinado) ── */
.src-section-stats {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 18px 18px 16px;
    margin-bottom: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.src-section-stats .src-section-title {
    margin-bottom: 16px;
    letter-spacing: 0.12em;
    font-size: 0.65rem;
    opacity: 0.95;
}

.src-section-stats .src-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.src-section-stats .src-stat {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 10px;
    min-width: 0;
}

.src-section-stats .src-stat-num {
    font-size: 1.55rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, rgba(125, 211, 252, 1) 0%, rgba(56, 189, 248, 0.75) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.src-section-stats .src-stat-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 6px;
    line-height: 1.25;
}

.src-global-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 14px;
}

.src-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.src-type-pill-ico {
    font-size: 0.85rem;
    line-height: 1;
}

.src-section-stats .src-type-bar {
    height: 8px;
    border-radius: 999px;
    margin-bottom: 0;
    background: rgba(0, 0, 0, 0.35);
}

.src-empty {
    text-align: center;
    padding: 40px 28px;
    max-width: 380px;
    margin: 0 auto;
}

.src-empty-ico {
    font-size: 2.75rem;
    opacity: 0.28;
    margin-bottom: 12px;
    filter: grayscale(0.2);
}

.src-empty-title {
    font-weight: 650;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 10px;
}

.src-empty-txt {
    font-size: 0.84rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.48);
    margin: 0;
}

.src-comunes-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.src-comun-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 550;
    color: rgba(255, 255, 255, 0.88);
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.src-comun-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.src-comun-ico {
    font-size: 0.95rem;
    line-height: 1;
}

details.src-medio-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 2px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

details.src-medio-card:hover {
    border-color: rgba(125, 211, 252, 0.2);
}

details.src-medio-card[open] {
    border-color: rgba(125, 211, 252, 0.25);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}

details.src-medio-card summary.src-medio-summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 14px 12px;
    transition: background 0.15s ease;
}

details.src-medio-card summary.src-medio-summary:hover {
    background: rgba(255, 255, 255, 0.03);
}

details.src-medio-card summary.src-medio-summary::-webkit-details-marker {
    display: none;
}

.src-medio-sum-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.src-medio-sum-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.src-medio-logo {
    height: 28px;
    width: auto;
    border-radius: 6px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.src-medio-name {
    font-size: 0.82rem;
    font-weight: 650;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.src-medio-sum-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}

.src-medio-sum-badges::after {
    content: '';
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.35);
    margin-left: 4px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

details.src-medio-card[open] .src-medio-sum-badges::after {
    transform: rotate(180deg);
    margin-top: 4px;
}

.src-stat-badge {
    font-size: 0.6rem;
    font-weight: 750;
    padding: 4px 9px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.src-stat-badge.src-stat-excl {
    background: rgba(168, 85, 247, 0.18);
    color: #d8b4fe;
    border: 1px solid rgba(168, 85, 247, 0.28);
}

.src-stat-badge.src-stat-total {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.src-medio-body {
    padding: 0 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.12);
}

.src-medio-subsec {
    margin-top: 14px;
}

.src-subsec-title {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.42);
    margin-bottom: 10px;
}

.src-subsec-title.src-subsec-excl {
    color: rgba(216, 180, 254, 0.85);
}

.src-source-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.src-source-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    padding: 6px 8px;
    margin: 0 -8px;
    border-radius: 8px;
    transition: background 0.12s ease;
}

.src-source-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.src-src-ico {
    flex-shrink: 0;
    width: 1.2rem;
    text-align: center;
    font-size: 0.95rem;
}

.src-src-name {
    flex: 1;
    min-width: 0;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 500;
}

.src-src-rol {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.4);
}

.src-src-type {
    font-size: 0.55rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}

/* Tema claro: análisis lingüístico y fuentes */
[data-theme="light"] .ling-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .ling-card-head {
    background: rgba(241, 245, 249, 0.9);
    border-bottom-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .ling-card-title {
    color: var(--text-primary);
}

[data-theme="light"] .ling-card-metrics {
    background: rgba(248, 250, 252, 0.8);
}

[data-theme="light"] .ling-beta-panel {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.7);
}

[data-theme="light"] details.ling-acc {
    border-bottom-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] details.ling-acc summary.ling-acc-sum {
    color: var(--text-primary);
}

[data-theme="light"] .ling-acc-num {
    color: var(--accent-color);
}

[data-theme="light"] .ling-beta-hint,
[data-theme="light"] .ling-e3-line,
[data-theme="light"] .ling-sesgo-actor {
    color: var(--text-secondary);
}

[data-theme="light"] .quality-score-chip {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .src-section-stats {
    background: linear-gradient(165deg, #fff 0%, #f8fafc 100%);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .src-section-stats .src-stat {
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .src-section-stats .src-stat-num {
    background: none;
    -webkit-text-fill-color: unset;
    color: var(--accent-color);
}

[data-theme="light"] .src-empty-title {
    color: var(--text-primary);
}

[data-theme="light"] .src-empty-txt {
    color: var(--text-secondary);
}

[data-theme="light"] details.src-medio-card {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .src-medio-name,
[data-theme="light"] .src-src-name {
    color: var(--text-primary);
}

[data-theme="light"] .src-medio-body {
    background: #f8fafc;
    border-top-color: rgba(15, 23, 42, 0.06);
}

/* Processing box for streaming agent thoughts */
.processing-box {
    background: rgba(0, 0, 0, 0.03);
    border-left: 3px solid var(--accent-color);
    padding: 8px 12px;
    margin: 8px 0;
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    max-height: 120px;
    overflow-y: auto;
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    line-height: 1.4;
    max-width: 80%;
    margin-left: 20px;
}

.processing-box > div:first-child {
    font-weight: bold;
    color: var(--accent-color);
    margin-bottom: 4px;
    font-size: 11px;
}

.processing-box > div:not(:first-child) {
    margin: 2px 0;
    padding-left: 8px;
    border-left: 2px solid var(--card-border);
    padding-left: 8px;
    font-size: 11px;
    color: var(--text-tertiary);
}

/* Dark theme adjustments */
[data-theme="dark"] .processing-box {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--accent-color);
}

[data-theme="dark"] .processing-box > div:first-child {
    color: var(--accent-color);
}

[data-theme="dark"] .processing-box > div:not(:first-child) {
    border-left-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

/* =========================================
   QUALITY METRICS - PIPELINE BETA
   ========================================= */

.quality-section {
    margin: 12px 0;
    padding: 12px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
    border: 1px solid var(--card-border);
}

.quality-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center;
}

/* Genre Badge */
.genre-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.genre-icon {
    font-size: 0.9rem;
}

.genre-label {
    line-height: 1;
}

/* Marco Badge */
.marco-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.marco-icon {
    font-size: 0.9rem;
}

/* Quality Metrics Grid */
.quality-metrics {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quality-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.quality-icon {
    font-size: 0.9rem;
    width: 18px;
    text-align: center;
}

.quality-label {
    width: 70px;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.quality-bar {
    flex: 1;
    height: 6px;
    background: rgba(128, 128, 128, 0.2);
    border-radius: 3px;
    overflow: hidden;
}

.quality-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.quality-value {
    width: 36px;
    text-align: right;
    font-weight: 600;
    font-size: 0.8rem;
}

/* Bias Track (for sesgo indicator) */
.bias-track {
    flex: 1;
    height: 6px;
    background: linear-gradient(to right, #f73e3e 0%, #f7a03e 25%, #7ef73e 50%, #3eabf7 75%, #2563eb 100%);
    border-radius: 3px;
    position: relative;
}

.bias-center {
    position: absolute;
    left: 50%;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: rgba(255, 255, 255, 0.8);
    transform: translateX(-50%);
}

.bias-marker {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Dark theme adjustments */
[data-theme="dark"] .quality-section {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .bias-center {
    background: rgba(0, 0, 0, 0.8);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .quality-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .quality-label {
        width: 60px;
    }
}

/* WebGL no disponible (visor sandbox, GPU off, etc.) */
.prisma-webgl-fallback {
    box-sizing: border-box;
    padding: 1rem 1.25rem;
    margin: 0;
    height: 100%;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--bg-tertiary, #0f172a);
    border: 1px solid var(--panel-border, rgba(100, 150, 255, 0.2));
    border-radius: 12px;
    color: var(--text-secondary, #a0a0a0);
    font-size: 0.85rem;
    line-height: 1.45;
}

.prisma-webgl-fallback--compact {
    min-height: 80px;
    padding: 0.65rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 10px;
}

.prisma-webgl-fallback-title {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary, #fff);
    font-size: 0.95rem;
    font-weight: 600;
}

.prisma-webgl-fallback--compact .prisma-webgl-fallback-title {
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
}

.prisma-webgl-fallback-hint {
    margin: 0;
    max-width: 28rem;
    opacity: 0.92;
}

/* --- Offline overlay (servidor local apagado) --- */
.offline-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(8px);
}

.offline-overlay[hidden] {
    display: none !important;
}

body.is-offline #mainGlobeContainer,
body.is-offline #timelineSection,
body.is-offline .prisma-mode-toggle,
body.is-offline #devSidebar,
body.is-offline .prisma-container {
    visibility: hidden;
}

.offline-card {
    max-width: 28rem;
    width: 100%;
    padding: 2rem 1.75rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(18, 18, 22, 0.96);
    color: #f2f2f2;
    text-align: center;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.offline-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.85;
}

.offline-card h1 {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    font-weight: 600;
}

.offline-card p {
    margin: 0;
    color: #b8b8c0;
    line-height: 1.5;
    font-size: 0.95rem;
}

.offline-retry-btn {
    margin-top: 1.25rem;
    padding: 0.7rem 1.25rem;
    border: none;
    border-radius: 10px;
    background: #4f8cff;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.offline-retry-btn:hover {
    background: #3d78e8;
}

.offline-retry-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.offline-hint {
    margin-top: 1rem !important;
    font-size: 0.82rem !important;
    opacity: 0.75;
}