@import url("./color-tokens.css");

body.with-sidebar {
  background-color: var(--color-background);
  color: var(--color-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.with-sidebar main {
  color: inherit;
}

body.with-sidebar footer {
  color: var(--color-text-secondary);
}

a {
  color: var(--color-link);
  transition: color 0.2s ease;
}

a:hover,
a:focus-visible {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:visited {
  color: var(--color-link-visited);
}

.no-underline a:hover,
.no-underline a:focus-visible {
  text-decoration: none;
}

.text-gray-900,
.text-gray-800,
.text-gray-700,
.text-neutral-900,
.text-neutral-800,
.text-neutral-700 {
  color: var(--color-text-primary) !important;
}

.text-gray-600,
.text-neutral-600 {
  color: var(--color-text-secondary) !important;
}

.text-gray-500,
.text-neutral-500 {
  color: var(--color-text-muted) !important;
}

.text-gray-400,
.text-neutral-400 {
  color: var(--color-text-soft) !important;
}

:root.theme-light .text-emerald-800,
:root.theme-light .text-emerald-700,
:root.theme-light .text-emerald-600,
:root.theme-light .text-emerald-500,
:root.theme-dark .text-emerald-800,
:root.theme-dark .text-emerald-700,
:root.theme-dark .text-emerald-600,
:root.theme-dark .text-emerald-500 {
  color: var(--color-link) !important;
}

.bg-white {
  background-color: var(--color-surface-strong) !important;
  color: var(--color-text-primary);
}

.bg-gray-50,
.bg-slate-50,
.bg-stone-50 {
  background-color: var(--color-surface) !important;
  color: var(--color-text-primary);
}

.border-gray-200,
.border-slate-200,
.border-stone-200 {
  border-color: var(--color-border-soft) !important;
}

input,
textarea,
select {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border-soft);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-soft);
}

.view-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--text-secondary, var(--color-text-secondary));
  opacity: 0.8;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.view-badge svg {
  width: 18px;
  height: 18px;
}

.view-badge:hover {
  opacity: 1;
  color: var(--text-primary, var(--color-text-primary));
}

.post-card:hover .view-badge,
.post-card:focus-within .view-badge,
.post-card[data-active="true"] .view-badge {
  color: var(--text-primary, var(--color-text-primary));
  opacity: 1;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--color-link);
  outline-offset: 1px;
}

.card-surface,
.referral-banner,
.post-card,
.weekly-card,
.vote-summary,
.vote-chart-wrapper,
.vote-chart-combined,
.vote-chart-segment,
.vote-chart-breakdown,
.featured-argument-card {
  background-color: var(--color-card-background);
  color: var(--color-text-primary);
}

.referral-banner,
.post-card,
.featured-argument-card,
.weekly-card,
.vote-chart-wrapper {
  border-color: var(--color-card-border);
  box-shadow: 0 12px 24px var(--color-card-shadow);
}

.post-card[data-kind="article"],
.referral-banner[data-variant="highlight"] {
  background: linear-gradient(145deg, var(--color-card-background) 0%, var(--color-card-background-alt) 45%, var(--color-card-background) 100%);
}

.post-card .meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.post-card .post-title {
  text-align: left !important;
}

.post-card .post-title__link {
  display: block;
  text-align: left !important;
  width: 100%;
  color: rgb(35, 68, 53);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.post-card .post-text {
  text-align: justify;
}

.post-card .post-text__link {
  color: #000000;
}

.post-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  margin-top: 1rem;
}

.post-footer__left {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

:root {
  --mobile-gutter: 14px;
}

main {
  width: 100%;
}

html.theme-dark {
  --color-link: #7ee0a3;
  --color-link-hover: #9af0bb;
  --color-link-visited: #7ee0a3;
}

html.theme-dark button,
html.theme-dark .btn,
html.theme-dark .badge,
html.theme-dark input,
html.theme-dark select,
html.theme-dark textarea,
html.theme-dark .chip,
html.theme-dark .post-card,
html.theme-dark .weekly-card,
html.theme-dark .debate-card {
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;
}

html.theme-dark .post-card .post-title__link,
html.theme-dark .post-card .post-text__link,
html.theme-dark .debate-card__vote-button,
html.theme-dark .btn-success,
html.theme-dark .btn-primary {
  color: #e9f7ed;
}

html.theme-dark .btn-success,
html.theme-dark .debate-card__vote-button.btn--active[data-vote-value="favor"],
html.theme-dark .chip[data-variant="success"] {
  background: #2f9f68 !important;
  border-color: #2f9f68 !important;
  color: #f5fff5 !important;
}

html.theme-dark input,
html.theme-dark textarea,
html.theme-dark select,
html.theme-dark .modal,
html.theme-dark .modal-content,
html.theme-dark .modal-dialog {
  background-color: var(--color-card-background, #0f1915);
  color: var(--color-text-primary);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

@media (max-width: 767px) {
  body.with-sidebar main {
    padding-left: var(--mobile-gutter);
    padding-right: var(--mobile-gutter);
  }

  .feed-wrap,
  .feed-list,
  .post-card,
  .debate-card,
  .weekly-card,
  .feed-article-preview,
  .immersive-editor,
  .immersive-editor__canvas {
    width: 100%;
    max-width: 100%;
  }

  .feed-page,
  .feed-header,
  .post-card,
  .debate-card,
  .weekly-card,
  .feed-article-preview,
  .referral-banner {
    margin-left: 0;
    margin-right: 0;
  }

  .post-card {
    padding: 14px 15px 12px;
  }

  .post-header {
    gap: 10px;
  }

  .post-card .meta {
    gap: 0.35rem;
  }

  .post-card .name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
  }

  .post-card .post-title {
    margin: 6px 0 4px;
  }

  .post-card .post-text {
    margin: 4px 0 2px;
    line-height: 1.55;
  }

  .post-media,
  .post-media__link img {
    width: 100%;
    max-height: 240px;
    border-radius: 14px;
    object-fit: cover;
  }

  .post-footer {
    margin-top: 0.65rem;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .post-footer__right {
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .post-footer__metrics {
    gap: 0.45rem;
  }

  .post-stat {
    gap: 0.3rem;
    font-size: 0.92rem;
  }

  .post-link {
    white-space: nowrap;
  }
}

.post-footer__right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.post-footer__metrics {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.post-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-text-secondary);
}

.post-stat__icon {
  color: inherit;
}

.post-stat__icon svg {
  width: 18px;
  height: 18px;
}

html.theme-dark .post-stat,
html.theme-dark .post-stat__icon,
html.theme-dark .post-stat__value {
  color: var(--color-link);
}

.post-card .meta .time {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

/* Enlarge Playfair article titles for better hierarchy */
.post-card[data-kind="article"] .post-title {
  font-size: clamp(1.25rem, 1.1vw + 1.1rem, 1.75rem);
  line-height: 1.25;
  text-align: left !important;
}

.post-card[data-kind="article"] .post-title__link {
  display: block;
  font-size: 1.08em;
  line-height: 1.2;
  text-align: left !important;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.post-meta__stats,
.article-meta__stats {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.view-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 2px 8px;
  border-radius: 999px;
  background-color: rgba(var(--color-neutral-ink-rgb), 0.08);
  border: 1px solid rgba(var(--color-neutral-ink-rgb), 0.08);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}

.view-badge__icon {
  width: 14px;
  height: 14px;
  display: block;
  color: inherit;
}

.view-badge__value {
  line-height: 1;
}

.article-meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
  text-align: left;
  margin: 0 auto;
}

.article-meta--center {
  align-items: center;
  text-align: center;
}

.article-view-footer {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.article-meta__details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
}

.article-meta__separator {
  color: var(--color-text-muted);
}

.vote-chart-combined {
  background-color: var(--color-progress-track);
}

.vote-chart-segment--favor,
.segment-green {
  background-color: var(--color-progress-positive);
  color: var(--color-progress-text);
}

.vote-chart-segment--neutral,
.segment-gray {
  background-color: var(--color-progress-neutral);
  color: var(--color-progress-text);
}

.vote-chart-segment--contra,
.segment-red {
  background-color: var(--color-progress-negative);
  color: var(--color-progress-text);
}

.segment-blue {
  background-color: var(--color-progress-highlight);
  color: var(--color-progress-text);
}

.vote-chart-bullet--neutral {
  background-color: var(--color-progress-neutral);
}

.vote-chart-bullet--favor {
  background-color: var(--color-progress-positive);
}

.vote-chart-bullet--contra {
  background-color: var(--color-progress-negative);
}

.vote-chart-breakdown,
.vote-meta {
  color: var(--color-text-secondary);
}

.vote-total,
.vote-chart-breakdown strong {
  color: var(--color-text-primary);
}

.weekly-link,
.weekly-link:visited {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.weekly-link:hover,
.weekly-link:focus-visible {
  color: var(--color-link-hover);
}

/* Perfil de usuarios */
[data-theme="dark"] .profile-content {
  background: var(--color-card-background);
  border-color: var(--color-card-border);
  box-shadow: 0 18px 40px var(--color-card-shadow);
}

[data-theme="dark"] .profile-content__title {
  color: var(--color-text-primary);
}

[data-theme="dark"] .profile-content__header .profile-btn--secondary {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .profile-card__actions .profile-btn--primary {
  background: var(--color-brand-primary-soft);
  color: var(--color-neutral-ink);
  box-shadow: 0 10px 18px rgba(var(--color-brand-primary-soft-rgb), 0.28);
}

[data-theme="dark"] .profile-card__actions .profile-btn--primary:hover,
[data-theme="dark"] .profile-card__actions .profile-btn--primary:focus-visible {
  background: var(--color-brand-primary-deep);
  color: var(--color-neutral-ink);
  box-shadow: 0 12px 22px rgba(var(--color-brand-primary-deep-rgb), 0.32);
}

[data-theme="dark"] .profile-card__actions .profile-btn--subtle {
  color: rgba(var(--color-neutral-50-rgb), 0.82);
  border-color: rgba(var(--color-neutral-50-rgb), 0.2);
}

[data-theme="dark"] .profile-card__actions .profile-btn--subtle:hover,
[data-theme="dark"] .profile-card__actions .profile-btn--subtle:focus-visible {
  color: var(--color-neutral-50);
  background: rgba(var(--color-neutral-50-rgb), 0.08);
  border-color: rgba(var(--color-neutral-50-rgb), 0.3);
}

[data-theme="dark"] .profile-section {
  background: var(--color-card-background-alt);
  border-color: var(--color-card-border);
  box-shadow: 0 10px 26px var(--color-card-shadow);
}

[data-theme="dark"] .profile-section[open] {
  background: var(--color-card-background);
  border-color: var(--color-card-border-strong);
  box-shadow: 0 16px 32px var(--color-card-shadow);
}

[data-theme="dark"] .profile-section__summary {
  color: var(--color-text-primary);
}

[data-theme="dark"] .profile-section__summary:hover {
  background: rgba(var(--color-brand-primary-rgb), 0.1);
}

[data-theme="dark"] .profile-section__meta {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .profile-section__icon {
  border-color: var(--color-border-soft);
  color: var(--color-brand-primary);
}

[data-theme="dark"] .profile-section__content {
  border-top-color: var(--color-border-soft);
}

[data-theme="dark"] .profile-content__empty {
  color: var(--color-text-secondary);
}

.badge-pionero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin-right: 4px;
  color: var(--color-link);
  fill: currentColor;
  vertical-align: middle;
  flex-shrink: 0;
}

html.theme-light .badge-pionero {
  color: rgb(15, 116, 81);
}

:root.theme-light .header-auth.header-auth--desktop .badge-pionero,
[data-theme="light"] .header-auth.header-auth--desktop .badge-pionero {
  color: rgb(141, 226, 180) !important;
}

.badge-pionero svg {
  width: 1em;
  height: 1em;
  display: block;
}

.theme-toggle-icon {
  color: var(--header-text-strong);
}

/* === Dark-theme UI overrides (centralized) === */
html.theme-dark .notifications-panel__context {
  /* lighter, high-contrast text for dark theme */
  color: #f4efdd;
}

/* Make the question card background use the new green in dark theme */
html.theme-dark .post-question {
  background: #234435 !important;
}

/* Text colors inside post-question for dark mode */
html.theme-dark .post-question__title {
  color: #dddbd1 !important;
}

html.theme-dark .post-question__excerpt {
  color: #dddbd1 !important;
}

html.theme-dark .post-question__label {
  background: #546856 !important;
  color: #dddbd1 !important;
}

/* End overrides */

/* Lighten the small comments badge in dark mode for readability */
html.theme-dark .post-stat {
  background-color: rgba(var(--color-neutral-surface-rgb), 0.22);
  color: var(--color-text-soft);
}

html.theme-dark .post-stat__icon svg,
html.theme-dark .post-stat__icon i {
  color: inherit;
}

html.theme-dark .post-stat--views {
  background: #546856;
  color: #dddbd1 !important;
}

html.theme-dark .post-stat--comments {
  background: #546856;
  color: #dddbd1 !important;
}

html.theme-dark .article-meta__details {
  color: var(--color-text-secondary);
}

html.theme-dark .article-meta__separator {
  color: var(--color-text-muted);
}

/* Make footer "Ver publicación" link clearer in dark theme */
html.theme-dark a.post-link {
  color: #f4efdd;
}
html.theme-dark a.post-link:hover,
html.theme-dark a.post-link:focus {
  color: #ffffff;
  text-decoration: underline;
}

/* Mobile notification badge (empty) should use a slightly lighter green in dark mode */
html.theme-dark .notification-badge.notification-badge--mobile.is-empty {
  background: #546856;
  opacity: 1; /* ensure it's fully visible over dark header */
  border-color: var(--header-bg); /* keep badge border matching header */
}

/* Force notifications status dot to mustard yellow only in dark theme.
   Leave light-mode appearance unchanged so the mustard/yellow badge and
   other base colors are preserved in light mode as requested. */
html.theme-dark .notifications-panel__status-dot {
  background-color: rgb(243, 189, 42) !important;
  box-shadow: 0 0 0 2px rgba(243, 189, 42, 0.12) !important;
}

/* Background for highlighted comment card in dark theme */
html.theme-dark .post-highlight {
  background-color: #234435 !important;
}

/* Text inside post-highlight in dark mode for better contrast */
html.theme-dark .post-highlight strong {
  color: #b7f5c8 !important;
}

html.theme-dark .post-highlight span {
  color: #dfe8df !important;
}

/* Lighten username in dark mode for better readability */
html.theme-dark .meta .name {
  color: #b7f5c8 !important;
}

/* Floating notifications button (desktop) - dark theme */
/* Make the bell button use the requested green and ensure readable icon/text */
html.theme-dark button.floating-notifications__button {
  background-color: rgb(31, 81, 51) !important;
  color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 6px 12px rgba(0,0,0,0.18) !important;
}

html.theme-dark button.floating-notifications__button:hover,
html.theme-dark button.floating-notifications__button:focus {
  background-color: rgb(23, 66, 42) !important; /* slightly darker on hover/focus */
}

/* Mobile: make article titles considerably larger for better legibility on small screens
   Targets headings that use Playfair font and the 'leading-tight' helper used in templates */
@media (max-width: 640px) {
  /* Specific to article header titles in templates like view_user_article.html */
  h1.font-playfair.leading-tight,
  h1.text-4xl.font-playfair.leading-tight,
  .article-header h1 {
    font-size: 3rem !important; /* 48px */
    line-height: 1.03 !important;
    letter-spacing: -0.01em !important;
  }

  /* Ensure the title doesn't overflow on very small screens */
  h1.font-playfair.leading-tight {
    word-break: break-word;
    hyphens: auto;
  }
}

/* Force black text on notification badge number in both themes */
.floating-notifications__badge {
  color: #000000 !important;
}

/* Light-mode override: make header nav text use #DDDBD1 as requested */
:root.theme-light .header-nav__text,
[data-theme="light"] .header-nav__text {
  color: #DDDBD1 !important;
}

/* Keep static highlight color for fixed menu items in both themes */
:root.theme-light .menu-static-highlight,
[data-theme="light"] .menu-static-highlight,
:root.theme-light .menu-static-highlight:where(:hover, :focus-visible, :active, :visited),
[data-theme="light"] .menu-static-highlight:where(:hover, :focus-visible, :active, :visited) {
  color: #DDDBD1 !important;
}

:root.theme-dark .menu-static-highlight,
[data-theme="dark"] .menu-static-highlight,
:root.theme-dark .menu-static-highlight:where(:hover, :focus-visible, :active, :visited),
[data-theme="dark"] .menu-static-highlight:where(:hover, :focus-visible, :active, :visited) {
  color: #DDDBD1 !important;
}

:root.theme-light .menu-static-highlight svg,
[data-theme="light"] .menu-static-highlight svg,
:root.theme-dark .menu-static-highlight svg,
[data-theme="dark"] .menu-static-highlight svg,
:root.theme-light .menu-static-highlight svg *,
[data-theme="light"] .menu-static-highlight svg *,
:root.theme-dark .menu-static-highlight svg *,
[data-theme="dark"] .menu-static-highlight svg * {
  fill: #DDDBD1 !important;
  stroke: #DDDBD1 !important;
}

/* Also ensure nav link text (in case markup uses header-nav__text within links) */
:root.theme-light .header-nav__link .header-nav__text,
[data-theme="light"] .header-nav__link .header-nav__text {
  color: #DDDBD1 !important;
}

/* Make header nav icons use the same color as the nav text in light mode */
:root.theme-light .header-nav__icon,
[data-theme="light"] .header-nav__icon {
  color: #DDDBD1 !important;
}

/* NAV: avoid green hover, no underline, and no active background for nav items */
/* Light mode: keep icons and text at the requested neutral, no background/underline on hover/active */
:root.theme-light .header-nav__link,
[data-theme="light"] .header-nav__link,
:root.theme-light .header-nav__link .header-nav__text,
[data-theme="light"] .header-nav__link .header-nav__text,
:root.theme-light .header-nav__link .header-nav__icon,
[data-theme="light"] .header-nav__link .header-nav__icon {
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  color: #DDDBD1 !important;
}

/* Active/current tab in light mode: add a subtle shadow in #546856 and keep text/icon neutral */
:root.theme-light .header-nav__link[aria-current="page"],
[data-theme="light"] .header-nav__link[aria-current="page"],
:root.theme-light .header-nav__link.active,
[data-theme="light"] .header-nav__link.active {
  background: transparent !important;
  /* keep static look */
  box-shadow: none !important;
  color: #DDDBD1 !important;
  text-decoration: none !important;
}

/* Ensure the active link's icon also matches the nav text color */
:root.theme-light .header-nav__link[aria-current="page"] .header-nav__icon,
[data-theme="light"] .header-nav__link[aria-current="page"] .header-nav__icon,
:root.theme-light .header-nav__link.active .header-nav__icon,
[data-theme="light"] .header-nav__link.active .header-nav__icon {
  color: #DDDBD1 !important;
}

/* Lighten the desktop auth pill in light theme */
:root.theme-light .header-auth.header-auth--desktop .header-user {
  background-color: #234435 !important;
  border-color: rgba(84, 104, 86, 0.55) !important;
}

/* Dark mode: keep icons matching nav text and avoid distinct active/hover backgrounds that conflict with the header */
html.theme-dark .header-nav__icon,
:root.theme-dark .header-nav__icon,
[data-theme="dark"] .header-nav__icon {
  color: var(--color-link) !important;
}

html.theme-dark .header-nav__link,
[data-theme="dark"] .header-nav__link {
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Also prevent active/current tab from showing a different background in dark mode */
html.theme-dark .header-nav__link[aria-current="page"],
[data-theme="dark"] .header-nav__link[aria-current="page"],
html.theme-dark .header-nav__link.active,
[data-theme="dark"] .header-nav__link.active {
  background: transparent !important;
  box-shadow: none !important;
  color: #f4efdd !important;
  text-decoration: none !important;
}

/* User pill styling - consistente en ambos temas */
/* Light mode */
:root.theme-light .header-user__profile,
[data-theme="light"] .header-user__profile,
html.theme-dark .header-user__profile,
[data-theme="dark"] .header-user__profile {
  border-right-color: rgb(124, 207, 161) !important;
  color: #DDDBD1 !important;
}

:root.theme-light .header-user__name,
[data-theme="light"] .header-user__name,
html.theme-dark .header-user__name,
[data-theme="dark"] .header-user__name {
  color: #DDDBD1 !important;
}


/* Asegurar que el greeting también tenga buen contraste */
:root.theme-light .header-user__greeting,
[data-theme="light"] .header-user__greeting,
html.theme-dark .header-user__greeting,
[data-theme="dark"] .header-user__greeting {
  color: #DDDBD1 !important;
  opacity: 0.8 !important;
}

/* Color base coherente para "Cerrar sesión" */
:root.theme-light .header-user__action,
[data-theme="light"] .header-user__action,
html.theme-dark .header-user__action,
[data-theme="dark"] .header-user__action {
  color: #DDDBD1 !important;
  transition: none !important;
  border-color: transparent !important;
}

/* === Feed Cards & Weekly - Dark Mode Improvements === */
/* Mejorar legibilidad de las tarjetas del feed y weekly en modo oscuro */

html.theme-dark .post-card,
html.theme-dark .post-card[data-kind="article"],
html.theme-dark .weekly-item,
html.theme-dark .vote-summary {
  background-color: var(--color-post-bg-dark) !important;
  background: var(--color-post-bg-dark) !important;
  color: var(--color-post-text-dark) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.theme-dark .post-title,
html.theme-dark .weekly-question-title,
html.theme-dark .text-neutral-900 {
  color: var(--color-post-title-dark) !important;
}

html.theme-dark .post-title__link {
  color: var(--color-post-title-dark) !important;
  text-decoration: none !important;
}

html.theme-dark .post-title__link:hover,
html.theme-dark .post-title__link:focus-visible {
  color: var(--color-post-link-hover-dark) !important;
  text-decoration: none !important;
}

html.theme-dark .post-text,
html.theme-dark .text-neutral-500,
html.theme-dark .vote-summary {
  color: var(--color-post-text-dark) !important;
}

html.theme-dark .post-text__link {
  color: var(--color-post-text-dark) !important;
  text-decoration: none !important;
}

html.theme-dark .post-text__link:hover,
html.theme-dark .post-text__link:focus-visible {
  color: var(--color-post-link-hover-dark) !important;
  text-decoration: none !important;
}

/* Eliminar underline en enlaces de tarjetas y weekly en modo oscuro */
html.theme-dark .post-card a:hover,
html.theme-dark .post-card a:focus-visible,
html.theme-dark .weekly-item a:hover,
html.theme-dark .weekly-item a:focus-visible,
html.theme-dark .weekly-link:hover,
html.theme-dark .weekly-link:focus-visible {
  text-decoration: none !important;
}

html.theme-dark .weekly-link:hover,
html.theme-dark .weekly-link:focus-visible {
  color: var(--color-post-link-hover-dark) !important;
}

/* === Badges - Dark Mode === */
/* Badge ACTIVA */
html.theme-dark .bg-emerald-600 {
  background-color: var(--color-active-badge-dark) !important;
  color: #0d2318 !important;
}

/* Badge ARCHIVADA */
html.theme-dark .bg-neutral-600 {
  background-color: var(--color-archived-badge-dark) !important;
  color: #e7efe9 !important;
}

/* === Badges - Light Mode === */
/* Badge ACTIVA - Light mode */
html.theme-light .bg-emerald-600,
:root.theme-light .bg-emerald-600 {
  background-color: var(--color-active-badge-light) !important;
  color: white !important;
}

/* Badge ARCHIVADA - Light mode */
html.theme-light .bg-neutral-600,
:root.theme-light .bg-neutral-600 {
  background-color: var(--color-archived-badge-light) !important;
  color: #27352a !important;
}

/* === Newsletter Subscription Button & Input === */
/* Light mode */
.newsletter-input {
  background-color: var(--color-surface-strong);
  border-color: var(--color-border-soft);
  color: var(--color-text-primary);
}

.newsletter-input:focus {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
  border-color: var(--color-brand-primary);
}

.newsletter-button {
  background-color: var(--color-brand-primary);
  color: var(--color-brand-primary-contrast);
}

.newsletter-button:hover {
  background-color: var(--color-brand-primary-strong);
}

.newsletter-button:active {
  background-color: var(--color-brand-primary-dark);
}

/* Dark mode */
html.theme-dark .newsletter-input {
  background-color: var(--color-surface);
  border-color: var(--color-border-soft);
  color: var(--color-text-primary);
}

html.theme-dark .newsletter-input:focus {
  outline-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

html.theme-dark .newsletter-button {
  background-color: var(--color-brand-primary);
  color: var(--color-brand-primary-contrast);
}

html.theme-dark .newsletter-button:hover {
  background-color: var(--color-brand-primary-strong);
}

html.theme-dark .newsletter-button:active {
  background-color: var(--color-brand-primary-mid);
}