/**
 * Sabias Que — Fresh Teal Educational Theme
 *
 * Clean, educational feel with subtle teal accents.
 * Light and airy with green highlights only where needed.
 * Optimized for reading curiosities and facts.
 * Inter (headlines & body) — highly legible at all sizes.
 */

:root {
    /* =======================================================================
     * PRIMARY — Teal for knowledge/curiosity (used sparingly)
     * ======================================================================= */
    --vr-primary: #26a69a;
    --vr-primary-hover: #00897b;
    --vr-primary-light: rgba(38, 166, 154, 0.06);
    --vr-primary-container: rgba(38, 166, 154, 0.12);
    --vr-primary-dim: #00897b;
    --vr-ripple-color: rgba(38, 166, 154, 0.25);

    /* =======================================================================
     * BACKGROUNDS — Very light, almost white with subtle warmth
     * ======================================================================= */
    --vr-background: #f8fafa;
    --vr-surface: #ffffff;
    --vr-surface-hover: #f5f7f7;
    --vr-surface-container: #f0f3f3;
    --vr-surface-container-high: #e8ebeb;
    --vr-surface-container-highest: #dfe3e3;
    --vr-surface-bright: #ffffff;

    /* =======================================================================
     * TEXT
     * ======================================================================= */
    --vr-text: #1a1a1a;
    --vr-text-secondary: #4a5568;
    --vr-text-muted: #8a9199;

    /* =======================================================================
     * BORDERS — Very subtle, neutral gray
     * ======================================================================= */
    --vr-border: #e5e8e8;
    --vr-border-subtle: rgba(0, 0, 0, 0.04);
    --vr-outline: #d0d5d5;

    /* =======================================================================
     * FEEDBACK
     * ======================================================================= */
    --vr-success: #4caf50;
    --vr-error: #ef5350;
    --vr-error-dim: #e53935;
    --vr-warning: #ff9800;

    /* =======================================================================
     * SECONDARY
     * ======================================================================= */
    --vr-secondary: #26a69a;
    --vr-secondary-dim: #00897b;
    --vr-tertiary: #80cbc4;

    /* =======================================================================
     * SHADOWS — Neutral, subtle
     * ======================================================================= */
    --vr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --vr-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
    --vr-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
    --vr-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.1);
    --vr-shadow-glow: 0 4px 20px rgba(38, 166, 154, 0.1);
    --vr-shadow-glow-strong: 0 6px 24px rgba(38, 166, 154, 0.15);

    /* =======================================================================
     * TYPOGRAPHY — Inter (highly legible, modern)
     * ======================================================================= */
    --vr-font-headline: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --vr-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --vr-font-family: var(--vr-font-body);

    /* =======================================================================
     * BORDER RADIUS
     * ======================================================================= */
    --vr-radius-sm: 6px;
    --vr-radius-md: 10px;
    --vr-radius-lg: 14px;
    --vr-radius-xl: 18px;
    --vr-radius-full: 9999px;

    /* =======================================================================
     * COMPONENT OVERRIDES — Subtle greens
     * ======================================================================= */
    --vr-reaction-bg: #f0f3f3;
    --vr-reaction-text: #4a5568;
    --vr-reaction-icon-color: var(--vr-primary);
    --vr-reaction-count-color: var(--vr-text-muted);
    --vr-reaction-count-active-color: var(--vr-primary);
    --vr-reaction-bg-hover: #e8ebeb;
    --vr-reaction-bg-active: rgba(38, 166, 154, 0.12);

    --vr-card-category-color: var(--vr-primary);
    --vr-card-text-hover-color: var(--vr-primary);
    --vr-card-featured-label-color: var(--vr-primary);

    --vr-nav-active-color: var(--vr-primary);
    --vr-fab-bg: var(--vr-primary);
    --vr-fab-color: #ffffff;

    --vr-badge-bg: var(--vr-primary);
    --vr-badge-color: #ffffff;

    --vr-focus-ring-color: var(--vr-primary);
    --vr-link-color: var(--vr-primary);
    --vr-link-hover-color: var(--vr-primary-hover);
}

/* =========================================================================
 * TYPOGRAPHY BASE
 * ========================================================================= */
body {
    font-family: var(--vr-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =========================================================================
 * HEADER — green header con iconos blancos
 * ========================================================================= */
.vr-header {
    background: var(--vr-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.vr-header__brand-text,
.vr-header__title {
    color: #ffffff;
    font-family: var(--vr-font-headline);
    font-weight: 700;
}

.vr-header__menu,
.vr-header__action {
    color: #ffffff;
}

.vr-header__menu:hover,
.vr-header__action:hover {
    background: rgba(255, 255, 255, 0.15);
}

.vr-header__avatar {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

.vr-header__avatar:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

.vr-header__logo {
    display: block;
    height: 50px;
    width: auto;
    object-fit: contain;
}

/* =========================================================================
 * BOTTOM NAV — clean white
 * ========================================================================= */
.vr-bottom-nav {
    background: #ffffff;
    border-top: 1px solid var(--vr-border);
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.03);
}

.vr-bottom-nav__label {
    color: var(--vr-text-muted);
    font-family: var(--vr-font-body);
    font-weight: 500;
}

.vr-bottom-nav__item.is-active .vr-bottom-nav__label {
    color: var(--vr-primary);
    font-weight: 600;
}

.vr-bottom-nav__item.is-active .vr-bottom-nav__icon {
    color: var(--vr-primary);
}

/* =========================================================================
 * CARDS — edge-to-edge in feed/trending (Tu Secreto style)
 * ========================================================================= */

/* Cards inside feed & trending: full-width, no rounded corners */
.vr-feed__list > .vr-card,
.vr-trending__list > .vr-card {
    border-radius: 0;
    margin-left: calc(-1 * var(--vr-spacing-md) - var(--vr-safe-area-left, 0px));
    margin-right: calc(-1 * var(--vr-spacing-md) - var(--vr-safe-area-right, 0px));
    margin-bottom: 1rem;
    border-left: none;
    border-right: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.vr-feed__list > .vr-card:hover,
.vr-trending__list > .vr-card:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border-color: var(--vr-border);
}

/* Gap between cards handled by margin-bottom, not flexbox gap */
.vr-feed__list {
    gap: 0;
}
.vr-trending__list {
    gap: 0;
}

/* Remove double borders between cards (margin handles spacing now) */
.vr-feed__list > .vr-card + .vr-card,
.vr-trending__list > .vr-card + .vr-card {
    border-top: 1px solid var(--vr-border);
}

/* First card in list: keep top border for separation from filters */
.vr-feed__list > .vr-card:first-child,
.vr-trending__list > .vr-card:first-child {
    border-top: 1px solid var(--vr-border);
}

/* Last card: no extra margin at bottom */
.vr-feed__list > .vr-card:last-child,
.vr-trending__list > .vr-card:last-child {
    margin-bottom: 0;
}

/* "More" wrapper between cards also goes edge-to-edge */
.vr-feed__list > .vr-more-wrapper {
    margin-left: calc(-1 * var(--vr-spacing-md) - var(--vr-safe-area-left, 0px));
    margin-right: calc(-1 * var(--vr-spacing-md) - var(--vr-safe-area-right, 0px));
}

/* Skeleton placeholders also edge-to-edge while loading */
.vr-feed__list .vr-skeleton-cards .vr-skeleton,
.vr-trending__list .vr-skeleton-cards .vr-skeleton {
    border-radius: 0;
    margin-left: calc(-1 * var(--vr-spacing-md) - var(--vr-safe-area-left, 0px));
    margin-right: calc(-1 * var(--vr-spacing-md) - var(--vr-safe-area-right, 0px));
}

/* Standalone cards (detail sheet, profile, etc.) keep normal style */
.vr-card {
    background: #ffffff;
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius-lg);
    box-shadow: var(--vr-shadow-sm);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.vr-card:hover {
    box-shadow: var(--vr-shadow-md);
    border-color: #d0d5d5;
}
/* Feed/trending cards keep flat on hover (already overridden above) */

/* ===========================================
   Card Header Layout Override for SabiasQue
   Category left, time right, dots far right
   All in ONE horizontal line
   =========================================== */

/* Header container: horizontal flex */
.vr-card__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: var(--vr-spacing-lg);
    padding-bottom: 0;
}

/* Meta: HORIZONTAL row (override base column layout) */
.vr-card__meta {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

/* Category stays at left */
.vr-card__category {
    flex-shrink: 0;
}

/* Sender row (contains time) — push to right edge of meta */
.vr-card__sender-row {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 6px;
    flex-shrink: 0;
}

/* Time styling */
.vr-card__time {
    color: var(--vr-text-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    white-space: nowrap;
}

/* Hide the dot separator in SabiasQue (no sender age/gender) */
.vr-card__dot {
    display: none;
}

/* More button wrapper — stays at far right of header */
.vr-card__more-wrapper {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    position: relative;
}

.vr-card__text {
    color: var(--vr-text);
    font-family: var(--vr-font-headline);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

.vr-card__category {
    color: var(--vr-primary);
    background: var(--vr-primary-light);
    border-radius: var(--vr-radius-full);
    padding: 4px 12px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: none;
    flex-shrink: 0;
}

/* Read more link */
.vr-card__read-more {
    color: var(--vr-primary);
    font-family: var(--vr-font-body);
    font-weight: 600;
}

.vr-card__read-more:hover {
    color: var(--vr-primary-hover);
    text-decoration: underline;
}

/* Featured card */
.vr-card.is-featured,
.vr-card--featured {
    border: 1px solid rgba(38, 166, 154, 0.2);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafa 100%);
    box-shadow: var(--vr-shadow-glow);
}

.vr-card__featured-label {
    color: var(--vr-primary);
    font-weight: 700;
}

/* More button (three dots) */
.vr-card__more {
    color: var(--vr-text-muted);
    transition: color 0.15s ease;
}

.vr-card__more:hover {
    color: var(--vr-text-secondary);
}

/* =========================================================================
 * REACTIONS — very subtle, light gray
 * ========================================================================= */
.vr-reactions__btn,
.vr-reaction {
    background: var(--vr-reaction-bg);
    border: 1px solid transparent;
    border-radius: var(--vr-radius-full);
    transition: all 0.15s ease;
    color: var(--vr-text-secondary);
}

.vr-reaction__icon {
    color: var(--vr-text-muted);
}

.vr-reaction__label {
    color: var(--vr-text-secondary);
    font-weight: 500;
}

.vr-reaction__count {
    color: var(--vr-text-muted);
}

.vr-reactions__btn:hover,
.vr-reaction:hover {
    background: var(--vr-reaction-bg-hover);
    border-color: var(--vr-border);
}

.vr-reactions__btn.is-active,
.vr-reaction.is-active {
    background: var(--vr-reaction-bg-active);
    border-color: rgba(38, 166, 154, 0.3);
}

.vr-reaction.is-active .vr-reaction__icon {
    color: var(--vr-primary);
}

.vr-reaction.is-active .vr-reaction__label {
    color: var(--vr-primary);
    font-weight: 600;
}

.vr-reaction.is-active .vr-reaction__count {
    color: var(--vr-primary);
}

/* =========================================================================
 * SHEET CLOSE BUTTON — subtle gray
 * ========================================================================= */
.vr-sheet__close {
    color: var(--vr-text-muted);
    transition: color 0.15s ease;
}

.vr-sheet__close:hover {
    color: var(--vr-text-secondary);
}

/* =========================================================================
 * COMMENT INPUT — very light background
 * ========================================================================= */
.vr-comment-input__field {
    background: var(--vr-surface-container);
    border: 1px solid var(--vr-border);
    color: var(--vr-text);
    border-radius: var(--vr-radius-full);
}

.vr-comment-input__field::placeholder {
    color: var(--vr-text-muted);
}

.vr-comment-input__field:focus {
    background: #ffffff;
    border-color: var(--vr-primary);
    box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.08);
}

/* =========================================================================
 * FILTER BAR — very light
 * ========================================================================= */
.vr-filter-bar {
    background: var(--vr-background);
    border-bottom: 1px solid var(--vr-border);
}

.vr-filter-bar__topic {
    background: #ffffff;
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius-md);
    box-shadow: var(--vr-shadow-sm);
}

.vr-filter-bar__topic:hover {
    border-color: var(--vr-outline);
}

.vr-filter-bar__refine {
    color: var(--vr-text-secondary);
}

.vr-filter-bar__refine:hover {
    color: var(--vr-text);
}

/* =========================================================================
 * REFINE PILLS — subtle gray, green when active
 * ========================================================================= */
.vr-refine-pill {
    background: var(--vr-surface-container);
    color: var(--vr-text-secondary);
    border: 1px solid transparent;
}

.vr-refine-pill:hover {
    background: var(--vr-surface-container-high);
}

.vr-refine-pill.is-active {
    background: var(--vr-primary);
    color: #ffffff;
    border-color: var(--vr-primary);
}

/* =========================================================================
 * DETAIL SHEET — reading mode
 * ========================================================================= */
.vr-sheet--reading-mode #vr-detail-text {
    font-family: var(--vr-font-headline);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--vr-text);
    margin-bottom: var(--vr-spacing-md);
}

/* Expanded content formatting */
.vr-curiosity-expanded,
#vr-detail-expanded {
    font-family: var(--vr-font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--vr-text-secondary);
    padding-top: var(--vr-spacing-md);
    border-top: 1px solid var(--vr-border);
    margin-top: var(--vr-spacing-md);
}

.vr-curiosity-expanded p,
#vr-detail-expanded p {
    margin-bottom: 1em;
}

.vr-curiosity-expanded p:last-child,
#vr-detail-expanded p:last-child {
    margin-bottom: 0;
}

.vr-curiosity-list,
.vr-curiosity-expanded ul,
.vr-curiosity-expanded ol {
    margin: 1em 0;
    padding-left: 1.5em;
}

.vr-curiosity-list li,
.vr-curiosity-expanded li {
    margin-bottom: 0.5em;
    line-height: 1.6;
}

.vr-curiosity-expanded strong,
.vr-curiosity-expanded b {
    font-weight: 600;
    color: var(--vr-text);
}

.vr-curiosity-expanded em,
.vr-curiosity-expanded i {
    font-style: italic;
}

.vr-curiosity-expanded a {
    color: var(--vr-primary);
    text-decoration: underline;
}

.vr-curiosity-expanded a:hover {
    color: var(--vr-primary-hover);
}

/* =========================================================================
 * SEARCH INPUT — light
 * ========================================================================= */
.vr-search__input {
    background: #ffffff;
    border: 1px solid var(--vr-border);
    color: var(--vr-text);
    border-radius: var(--vr-radius-md);
}

.vr-search__input:focus {
    border-color: var(--vr-primary);
    box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.08);
}

/* =========================================================================
 * TOPICS / TRENDING
 * ========================================================================= */
.vr-topics-rant {
    background: #ffffff;
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius-lg);
    box-shadow: var(--vr-shadow-sm);
}

/* =========================================================================
 * TOAST — clean white
 * ========================================================================= */
.vr-toast {
    background: #ffffff;
    color: var(--vr-text);
    border: 1px solid var(--vr-border);
    box-shadow: var(--vr-shadow-lg);
    border-radius: var(--vr-radius-lg);
}

/* =========================================================================
 * DRAWER — white
 * ========================================================================= */
.vr-drawer__panel {
    background: #ffffff;
    color: var(--vr-text);
    box-shadow: var(--vr-shadow-xl);
}

.vr-drawer__header {
    border-bottom: 1px solid var(--vr-border);
}

.vr-drawer__close {
    color: var(--vr-text-muted);
}

.vr-drawer__close:hover {
    color: var(--vr-text-secondary);
}

/* =========================================================================
 * CATEGORIES PAGE
 * ========================================================================= */
.vr-categories__grid {
    gap: var(--vr-spacing-md);
}

.vr-categories__item {
    background: #ffffff;
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius-lg);
    box-shadow: var(--vr-shadow-sm);
    transition: all 0.15s ease;
}

.vr-categories__item:hover {
    border-color: var(--vr-outline);
    box-shadow: var(--vr-shadow-md);
}

.vr-categories__item-icon {
    color: var(--vr-primary);
}

.vr-categories__item-label {
    color: var(--vr-text);
    font-family: var(--vr-font-headline);
    font-weight: 600;
}

/* =========================================================================
 * BUTTONS — primary green stands out
 * ========================================================================= */
.vr-btn--primary {
    background: var(--vr-primary);
    color: #ffffff;
    font-weight: 600;
}

.vr-btn--primary:hover {
    background: var(--vr-primary-hover);
}

/* =========================================================================
 * CHIPS (topic, etc)
 * ========================================================================= */
.vr-chip {
    background: var(--vr-surface-container);
    color: var(--vr-text-secondary);
    border: 1px solid transparent;
}

.vr-chip:hover {
    background: var(--vr-surface-container-high);
}

.vr-chip.is-active {
    background: var(--vr-primary);
    color: #ffffff;
}

/* =========================================================================
 * SCROLLBAR — very subtle
 * ========================================================================= */
::-webkit-scrollbar-thumb {
    background: var(--vr-surface-container-high);
    border-radius: 4px;
}

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

/* =========================================================================
 * SKELETON LOADER
 * ========================================================================= */
.vr-skeleton {
    background: var(--vr-surface-container);
}

.vr-skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
}

/* =========================================================================
 * EMPTY STATE
 * ========================================================================= */
.vr-empty {
    color: var(--vr-text-muted);
}

.vr-empty__icon {
    color: var(--vr-text-muted);
    opacity: 0.5;
}

/* =========================================================================
 * TOPIC SELECTOR SHEET
 * ========================================================================= */
.vr-topic-item {
    color: var(--vr-text);
}

.vr-topic-item__icon {
    color: var(--vr-text-muted);
}

.vr-topic-item.is-active {
    background: var(--vr-primary-light);
}

.vr-topic-item.is-active .vr-topic-item__icon {
    color: var(--vr-primary);
}

.vr-topic-item.is-active .vr-topic-item__check {
    color: var(--vr-primary);
}

/* =========================================================================
 * SWIPE / BATTLES
 * ========================================================================= */
.vr-swipe__card {
    background: #ffffff;
    border: 1px solid var(--vr-border);
}

.vr-swipe__vs {
    background: var(--vr-surface-container);
    color: var(--vr-text-muted);
}

/* =========================================================================
 * REFINE SORT PILLS — horizontal layout, wrapping
 * ========================================================================= */
.vr-refine-sort {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vr-refine-sort .vr-refine-pill {
    flex: 0 0 auto;
}

/* =========================================================================
 * SABIASQUE SPECIFIC OVERRIDES
 * ========================================================================= */

/* Hide report button - content is curated, not user-generated */
.vr-detail__action--report,
.vr-dropdown__item[data-report],
[data-report] {
    display: none !important;
}

/* Smaller font for card text in feed */
.vr-card__text,
.vr-card--short .vr-card__text {
    font-size: 21px !important;
}

/* Expanded content - shorter paragraphs for mobile readability */
.vr-curiosity-expanded p {
    margin-bottom: 1.2em;
    line-height: 1.65;
}

/* Highlight key terms */
.vr-curiosity-expanded strong,
.vr-curiosity-expanded b {
    color: var(--vr-text);
    font-weight: 600;
}

/* AI-generated curiosity image */
.vr-curiosity-image {
    margin: 1.25em 0;
    border-radius: var(--vr-radius-lg);
    overflow: hidden;
    box-shadow: var(--vr-shadow-md);
}

.vr-curiosity-image img {
    width: 100%;
    max-width: 728px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
}