.root{--afadir-maxw:1120px;--afadir-maxw-readable:860px;}*/

/**
 * AFADIR App - Professional UI Design
 * Modern, clean interface for member portal
 */

/* */
.nojq {
  display: none;
}
/*
 * IMPORTANT:
 * These selectors target the *theme* layout (GeneratePress / Hostinger-like)
 * to hide duplicate navigation/title areas on pages managed by AFADIR.
 * They MUST be scoped to AFADIR-managed pages to avoid breaking the rest of the site.
 */

.afadir-managed-page.separate-containers .comments-area,
.afadir-managed-page.separate-containers .inside-article,
.afadir-managed-page.separate-containers .page-header,
.afadir-managed-page.separate-containers .paging-navigation {
    padding: 0px !important;
}

/*
 * Remove duplicate WordPress page chrome (title/content blocks) on pages where
 * the AFADIR SPA is mounted. On mobile this was creating an extra “Inicio” card
 * at the bottom of the Home screen.
 *
 * IMPORTANT: Keep this strictly scoped to .afadir-managed-page.
 */
.afadir-managed-page .entry-header,
.afadir-managed-page .page-header {
  display: none !important;
}

.afadir-managed-page .entry-content > *:not(#afadir-app-root) {
  display: none !important;
}

.afadir-managed-page .main-navigation .inside-navigation{
	display:none !important;
}

.afadir-managed-page .mobile-menu-control-wrapper .menu-toggle,
.afadir-managed-page .mobile-menu-control-wrapper .menu-toggle:hover,
.afadir-managed-page .mobile-menu-control-wrapper .menu-toggle:focus,
.afadir-managed-page .has-inline-mobile-toggle #site-navigation.toggled{
	display: none !important;
}

.afadir-managed-page .afadir-whatsapp-floating {
    right: -1px;
}

@media (max-width: 768px) {
    .afadir-managed-page .afadir-whatsapp-floating {
		right:-1.2px;
	}
}

/*
 * FIX (2026-01-02): Hide WordPress admin bar in AFADIR iframe contexts.
 * The #wpadminbar was appearing in iframes managed by AFADIR, breaking layout.
 */
.afadir-managed-page #wpadminbar {
	display: none !important;
}

/* Adjust top spacing when admin bar is hidden */
.afadir-managed-page.admin-bar #afadir-app-root {
	margin-top: 0 !important;
}

/* ============================================================================
   ROOT & ISOLATION
   ============================================================================ */

#afadir-app-root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--af-color-bg);
  color: var(--af-color-text);
  line-height: 1.5;
  min-height: 100vh;

  /*
   * Brand tokens.
   * IMPORTANT: keep these variables inside the SPA root so theme CSS cannot unset them.
   *
   * The UI can use multiple colors (not "all pink"). Pink remains the signature accent,
   * while the rest is derived from the logo palette for a more professional look.
   */
  --afadir-brand: #e5007d;              /* Pink accent (signature) */
  --afadir-brand-rgb: 229, 0, 125;
  --afadir-brand-dark: #b40060;
  --afadir-brand-light: #ff4aa8;

  --afadir-navy: #0b2c4a;               /* Logo navy */
  --afadir-teal: #257f85;               /* Logo teal */
  --afadir-orange: #ea8035;             /* Logo orange */
  --afadir-green: #7bb73b;              /* Logo green */

  /* Semantic colors (INC-2.2.277) */
  --afadir-success: #10b981;            /* Success/confirmation states (green) */
  --afadir-warning: #f59e0b;            /* Warning states (amber) */
  --afadir-error: #ef4444;              /* Error states (red) */
  --afadir-info: #3b82f6;               /* Info states (blue) */

  --afadir-surface: var(--af-color-surface);
  --afadir-surface-2: var(--af-color-surface);
  --afadir-border: var(--af-color-border);
  --afadir-text: var(--af-color-text);
  --afadir-muted: var(--af-color-muted);
}

/* Scoped baseline reset (do NOT leak outside the SPA).
   This reduces theme interference without resorting to !important hacks. */
#afadir-app-root,
#afadir-app-root *,
#afadir-app-root *::before,
#afadir-app-root *::after {
  box-sizing: border-box;
}

#afadir-app-root h1,
#afadir-app-root h2,
#afadir-app-root h3,
#afadir-app-root h4,
#afadir-app-root h5,
#afadir-app-root h6,
#afadir-app-root p,
#afadir-app-root figure,
#afadir-app-root blockquote,
#afadir-app-root dl,
#afadir-app-root dd {
  margin: 0;
}

#afadir-app-root ul,
#afadir-app-root ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
/*
#afadir-app-root button,
#afadir-app-root input,
#afadir-app-root select,
#afadir-app-root textarea {
  /*font: inherit;*/
  /*color: inherit;
}
*/

#afadir-app-root a {
  color: inherit;
  text-decoration: none;
}

#afadir-app-root a:hover {
  text-decoration: underline;
}

/* ============================================================================
   REDUCED MOTION
   Respect OS preference and avoid nausea.
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  #afadir-app-root *,
  #afadir-app-root *::before,
  #afadir-app-root *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Hide WordPress theme chrome on pages managed by AFADIR.
   IMPORTANT: keep this strictly scoped to avoid breaking the rest of the site.
   We deliberately avoid generic tag selectors (header/nav/footer) to prevent
   hiding AFADIR components or third-party blocks. */
body.afadir-managed-page .site-header,
body.afadir-managed-page .inside-header,
body.afadir-managed-page .main-navigation,
body.afadir-managed-page .entry-header,
body.afadir-managed-page .wp-block-navigation,
body.afadir-portal-page .site-header,
body.afadir-portal-page .inside-header,
body.afadir-portal-page .main-navigation,
body.afadir-portal-page .entry-header,
body.afadir-portal-page .wp-block-navigation {
  display: none !important;
}

/* Footer is hidden by default on portal pages to avoid “double navigation”.
   You can opt-in to keep it with body.afadir-portal-keep-footer. */
body.afadir-portal-page .site-footer {
  display: none !important;
}
body.afadir-portal-page.afadir-portal-keep-footer .site-footer {
  display: block !important;
}

/* ============================================================================
   APP CONTAINER
   ============================================================================ */

.afadir-app {
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: var(--af-color-bg);
  min-height: 100vh;
}

/* ============================================================================
   PAGE LAYOUT HELPERS
   ============================================================================ */

/* ============================================================================
   HEADER / TOPBAR
   ============================================================================ */

.afadir-topbar {
  background: var(--af-color-surface);
  border-bottom: 1px solid var(--af-color-border);
  box-shadow: var(--shadow-xs, 0 1px 3px rgba(0, 0, 0, 0.05));
  /* iOS Safari can be picky with sticky; keep vendor variant too. */
  position: -webkit-sticky;
  position: sticky;
  /*
   * Android Chrome: some themes add padding/margin to body/html.
   * Specificity without !important should override most theme rules.
   */
  top: 0;
  z-index: var(--af-z-dropdown);
  padding: 0;
  margin: 0;
}

/*
 * Additional reset for SPA pages: ensure topbar sits at pixel 0.
 * Targets html/body only within afadir-app context.
 */
html.afadir-app-html,
html.afadir-app-html body.afadir-app-page {
  margin-top: 0;
  padding-top: 0;
}

/*
 * iPhone/iPad Safari: `position: sticky` can break when any ancestor has overflow
 * (even overflow-x). When that happens the topbar scrolls away.
 *
 * We add a small runtime class on <html> (`afadir-ios`) and fallback to a fixed
 * header, calculating the exact offset (includes WP adminbar if present) via JS.
 */
html.afadir-ios .afadir-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

html.afadir-ios .afadir-main {
  /* Offset content below fixed header (computed as topbar.getBoundingClientRect().bottom). */
  padding-top: calc(var(--afadir-topbar-offset, 0px) + var(--space-1_5, 0.375rem));
}


/*
 * IMPORTANT: Topbar siempre en top: 0 (arriba del todo)
 * No dejamos espacio para admin-bar de WordPress - el topbar debe estar pegado al borde superior.
 * Override theme styles que puedan interferir.
 */
.admin-bar .afadir-topbar {
  top: 0 !important;
}

/* Ensure topbar doesn't conflict with theme headers */
html.afadir-app-html .site-header,
html.afadir-app-html .grid-container {
  position: static !important;
  top: auto !important;
}

.afadir-topbar-container {
  max-width: var(--container-xl, 1400px);
  margin: 0 auto;
  padding: 0.125rem var(--space-3, 0.75rem); /* Padding vertical reducido a casi 0 (2px) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6, 1.5rem);
  overflow: visible; /* Permite que dropdowns sobresalgan */
}

/* Mobile: reduce header height - CONSOLIDATED (see responsive section below at line ~1807) */

/* Brand */
.afadir-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--af-color-text);
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.afadir-logo {
  height: 48px;
  max-height: 48px;
  width: auto;
  object-fit: contain;
}

.afadir-pill {
  background: linear-gradient(135deg, var(--afadir-brand) 0%, var(--afadir-brand-dark) 100%);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 600;
  padding: var(--space-1, 0.25rem) var(--space-2_5, 0.625rem);
  border-radius: var(--radius-lg, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  border: none;
}

/* INC-53 — Temporal pills (public/scheduled/archived) */
.afadir-pill.afadir-pill--temporal {
  /* keep base metrics; only override background for clarity */
}

.afadir-pill.afadir-pill--temporal.state-public {
  background: var(--color-success-100, rgba(0, 160, 70, 0.18));
  color: var(--color-success-900, #064019);
}

.afadir-pill.afadir-pill--temporal.state-scheduled {
  background: var(--color-warning-100, rgba(240, 150, 0, 0.20));
  color: var(--color-warning-900, #4a2f00);
}

.afadir-pill.afadir-pill--temporal.state-archived {
  background: var(--color-neutral-100, rgba(90, 100, 110, 0.18));
  color: var(--color-neutral-900, #1a1d21);
}

/* INC-62 — Timeline (INC-2.2.108) */
.afadir-timeline {
  display: block;
  margin-top: var(--space-3, 0.75rem);
}

.afadir-timeline-year {
  margin-top: var(--space-4_5, 1.125rem);
}

.afadir-timeline-year-title {
  margin-bottom: var(--space-2_5, 0.625rem);
}

.afadir-timeline-list {
  display: grid;
  gap: var(--space-3, 0.75rem);
}

.afadir-timeline-item {
  background: var(--color-white, #fff);
  border: 1px solid var(--color-neutral-200, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-lg, 0.875rem);
  padding: var(--space-3_5, 0.875rem) var(--space-3_5, 0.875rem) var(--space-3, 0.75rem);
}

.afadir-timeline-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-2, 0.5rem);
}

.afadir-timeline-kind {
  font-weight: 700;
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text, #1d2327);
}

.afadir-timeline-date {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-neutral-600, #5a6672);
}

.afadir-timeline-title {
  margin: var(--space-1_5, 0.375rem) 0;
  font-size: var(--text-lg, 1.125rem);
  line-height: 1.25;
}

.afadir-timeline-excerpt {
  margin: 0 0 var(--space-2_5, 0.625rem);
  color: var(--color-neutral-700, #39424c);
}

.afadir-timeline-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2_5, 0.625rem);
}

.afadir-timeline-source {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-neutral-600, #6b7680);
}

/* Navigation */
.afadir-nav-wrap {
  position: relative;
  flex: 1;
  min-width: 0; /* allow flex children to shrink so horizontal scroll can work */
  overflow: visible; /* Permite que dropdowns sobresalgan */
}

.afadir-nav {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  margin: 0 !important;
  flex: 1;
  justify-content: center;
  overflow-x: auto;
  overflow-y: visible; /* Changed from hidden to allow dropdowns to display */
  -webkit-overflow-scrolling: touch;
  /* UX: smooth, snap-to-items when scrollable (mobile-friendly) */
  scroll-snap-type: x proximity;
  scroll-padding-left: 12px;
  scroll-padding-right: 12px;
  scrollbar-width: none; /* Firefox: hide scrollbar; affordance via fades/dots/hint */
  padding-bottom: 2px; /* avoids iOS clipping */
  scroll-behavior: smooth; /* Smooth scrolling to prevent "flasheo" */
  transition: flex-wrap 0.2s ease; /* Smooth transition between wrap modes */
}

.afadir-nav::-webkit-scrollbar { display: none; }
.afadir-nav-wrap[data-scrollable="1"] .afadir-nav {
  cursor: grab;
}

.afadir-nav-wrap[data-scrollable="1"] .afadir-nav:active {
  cursor: grabbing;
}

.afadir-nav-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.afadir-nav-fade.is-left {
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}

.afadir-nav-fade.is-right {
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}

.afadir-nav-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.afadir-nav-wrap[data-scrollable="1"] .afadir-nav-dots {
  opacity: 0.9;
}

.afadir-nav-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0,0,0,0.18);
}

.afadir-nav-dot.is-active {
  background: rgba(var(--afadir-brand-rgb), 0.9);
}

.afadir-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2_5, 0.625rem) var(--space-4_5, 1.125rem);
  background: transparent;
  border: none;
  border-radius: var(--radius-md, 0.5rem);
  color: var(--af-color-text); /* Changed from muted to text for better contrast */
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-base, 0.2s ease);
  margin: 0;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  /* snap points */
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.afadir-nav-btn .dashicons {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  flex-shrink: 0;
  font-family: dashicons !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.afadir-nav-btn .dashicons::before {
  line-height: 1;
}

/* When nav is scrollable, show a subtle swipe hint (hide after first interaction) */
.afadir-nav-wrap[data-scrollable="1"]::after {
  content: "⇆";
  position: absolute;
  right: var(--space-1_5, 0.375rem);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-xs, 0.8125rem);
  line-height: 1;
  color: var(--color-neutral-400, rgba(0,0,0,0.28));
  background: var(--color-white, rgba(255,255,255,0.85));
  border: 1px solid var(--color-neutral-200, rgba(0,0,0,0.06));
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  border-radius: var(--radius-full, 999px);
  pointer-events: none;
  transition: opacity var(--transition-fast, 0.18s ease);
}

.afadir-nav-wrap.is-interacted::after {
  opacity: 0;
}

.afadir-nav-btn:hover {
  background: var(--af-color-surface);
  color: var(--af-color-text);
  box-shadow: inset 0 0 0 1px var(--af-color-border);
}

.afadir-nav-btn.is-active {
  background: linear-gradient(135deg, var(--afadir-brand) 0%, var(--afadir-brand-dark) 100%) !important;
  /*color: var(--color-white) !important;*/
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(var(--afadir-brand-rgb), 0.28)) !important;
}

/* --- INC-2.2.236: Submenús de navegación --- */
/* Container for "Más" dropdown in navigation */
.afadir-nav-more {
  position: relative;
  display: inline-flex;
}

/* Group container shares the same layout as .afadir-nav-more */
.afadir-nav-group {
  position: relative;
  display: inline-flex;
}

/* Button for opening the "Más" dropdown */
.afadir-nav-more-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2_5, 0.625rem) var(--space-4_5, 1.125rem);
  background: transparent;
  border: none;
  border-radius: var(--radius-md, 0.5rem);
  color: var(--af-color-text); /* Changed from muted to text for better contrast */
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-base, 0.2s ease);
  margin: 0;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Group button inherits the same styles as more button */
.afadir-nav-group-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2_5, 0.625rem) var(--space-4_5, 1.125rem);
  background: transparent;
  border: none;
  border-radius: var(--radius-md, 0.5rem);
  color: var(--af-color-text); /* Changed from muted to text for better contrast */
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-base, 0.2s ease);
  margin: 0;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.afadir-nav-more-btn:hover {
  background: var(--af-color-surface);
  color: var(--af-color-text);
  box-shadow: inset 0 0 0 1px var(--af-color-border);
}
.afadir-nav-group-btn:hover {
  background: var(--af-color-surface);
  color: var(--af-color-text);
  box-shadow: inset 0 0 0 1px var(--af-color-border);
}
.afadir-nav-more.is-open > .afadir-nav-more-btn {
  background: var(--af-color-surface);
}

/* When a group is open, highlight its button similarly */
.afadir-nav-group.is-open > .afadir-nav-group-btn {
  background: var(--af-color-surface) !important;
}

/* Dropdown menu container - FIXED: removed position absolute to avoid parent overflow issues */
.afadir-nav-dropdown {
  display: none;
  position: fixed;
  min-width: 200px;
  max-width: 280px;
  padding: 8px 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  z-index: 9999;
  margin-top: 4px;
}
/* Mostrar desplegable cuando el contenedor está abierto */
.afadir-nav-more.is-open > .afadir-nav-dropdown,
.afadir-nav-group.is-open > .afadir-nav-dropdown {
  display: block !important;
}

/* Individual items in dropdown */
.afadir-nav-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--color-text-dark);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.afadir-nav-dropdown-item:hover {
  background: var(--color-hover-bg);
  color: var(--color-link-blue);
}

/* Dashicons in navigation */
.afadir-nav-btn [class^="dashicons-"],
.afadir-nav-btn [class*=" dashicons-"],
.afadir-nav-dropdown-item [class^="dashicons-"],
.afadir-nav-dropdown-item [class*=" dashicons-"] {
  font-family: "dashicons", sans-serif !important;
  font-size: 18px;
  width: 18px;
  height: 18px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Mobile-first: dropdown full width on small screens */
@media (max-width: 767px) {
  .afadir-nav-dropdown {
    min-width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    left: 16px !important;
  }

  .afadir-nav-dropdown-item {
    padding: 12px 16px;
    font-size: 15px;
  }
}

/*
 * INC-2.2.228 – Contrato responsive en navegación
 *
 * En pantallas de tamaño mediano o mayor (a partir de md: 768px), la navegación superior deja de usar
 * desplazamiento horizontal. En lugar de scroll, los botones de navegación se envuelven automáticamente
 * en una o más líneas y los indicadores de desbordamiento (fades, puntos, hint) se ocultan.
 * Esto ayuda a reducir el “scroll horizontal global” mencionado en el roadmap y a unificar la
 * experiencia entre escritorio y móvil.
 */
@media (min-width: 768px) {
  .afadir-nav-wrap[data-scrollable="1"] .afadir-nav {
    overflow-x: hidden !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  .afadir-nav-wrap[data-scrollable="1"]::after,
  .afadir-nav-wrap[data-scrollable="1"] .afadir-nav-fade,
  .afadir-nav-wrap[data-scrollable="1"] .afadir-nav-dots {
    display: none !important;
  }
}

/* Brand clickable - merged with main .afadir-brand definition at line 281 */
.afadir-brand:focus {
  outline: 2px solid var(--afadir-brand);
  outline-offset: 4px;
  border-radius: 4px;
}

/* User box */
.afadir-userbox {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0; /* allow the nav to keep a single row on small screens */
  justify-content: flex-end;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Topbar banner (configurable from WP Admin)
   - Desktop: compact single line (ellipsis)
   - Mobile: can wrap in the free middle column between logo and userbox
   -------------------------------------------------------------------------- */
.afadir-banner {
  display: none;
  flex: 0 1 380px;
  min-width: 0;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(0,0,0,0.06);
}

.afadir-banner.is-active {
  display: block;
}

.afadir-banner a {
  color: inherit;
  text-decoration: underline;
}

.afadir-banner--info {
  background: rgba(var(--afadir-brand-rgb), 0.10);
  color: var(--color-purple-dark);
}

.afadir-banner--warning {
  background: rgba(240, 150, 0, 0.18);
  color: var(--color-brown-dark);
}

.afadir-banner--success {
  background: rgba(0, 160, 70, 0.18);
  color: var(--color-green-dark);
}

.afadir-banner--holiday {
  background: rgba(255, 0, 120, 0.10);
  color: var(--color-red-dark);
}

/* Back-compat: some templates still use `.afadir-link` for the login CTA */
.afadir-userbox .afadir-nav-btn--link,
.afadir-userbox .afadir-link {
  font-family: inherit;
  letter-spacing: 0;
}

/* SEO-only buttons: ocultos visualmente pero accesibles para crawlers */
.afadir-seo-open {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Logged-out "Iniciar sesión" should look like the navigation typography */
.afadir-userbox .afadir-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 8px;
  color: var(--af-color-muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.afadir-userbox .afadir-link:hover {
  background: var(--af-color-surface);
  color: var(--af-color-text);
  box-shadow: inset 0 0 0 1px var(--af-color-border);
}

/* Authentication Buttons Container (Login + Register) */
.afadir-auth-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.afadir-auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
  border: 1px solid var(--af-color-border);
  background: var(--af-color-surface);
  color: var(--af-color-text);
}

.afadir-auth-btn:hover {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.05);
  color: #667eea;
  transform: translateY(-1px);
}

.afadir-auth-btn--primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: transparent;
  color: white;
}

.afadir-auth-btn--primary:hover {
  background: linear-gradient(135deg, #5568d3 0%, #654192 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.afadir-auth-btn .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
}

.afadir-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.afadir-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--af-color-text);
}

.afadir-user-level {
  font-size: 12px;
  color: var(--af-color-muted);
}

/* User dropdown menu */
.afadir-user-dd {
  position: relative;
}

.afadir-user-dd-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  cursor: pointer;
  list-style: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.afadir-user-dd-summary::-webkit-details-marker {
  display: none;
}

.afadir-user-dd-summary:hover {
  background: var(--af-color-surface);
  box-shadow: inset 0 0 0 1px var(--af-color-border);
}

.afadir-user-dd[open] .afadir-user-dd-summary {
  background: var(--af-color-surface);
  box-shadow: inset 0 0 0 1px var(--af-color-border);
}

.afadir-user-dd-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--af-color-surface);
  border: 1px solid var(--af-color-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 280px;
  max-width: 320px;
  max-height: 80vh;
  overflow: hidden;
  z-index: 1100; /* Keep slightly above nav dropdowns */
}

.afadir-user-dd-content {
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0;
    scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--af-color-border) transparent; /* Firefox */
}

.afadir-user-dd-content::-webkit-scrollbar {
  width: 8px;
}

.afadir-user-dd-content::-webkit-scrollbar-track {
  background: transparent;
}

.afadir-user-dd-content::-webkit-scrollbar-thumb {
  background: var(--af-color-border);
  border-radius: 8px;
}

.afadir-user-dd-content::-webkit-scrollbar-thumb:hover {
  background: var(--af-color-muted);
}

/* Scroll affordance: subtle fades + dots (mobile friendly) */
.afadir-scroll-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 2;
}

.afadir-scroll-fade--top {
  top: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0));
}

.afadir-scroll-fade--bottom {
  bottom: 0;
  background: linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0));
}

.afadir-scroll-dots {
  position: absolute;
  top: 14px;
  bottom: 14px;
  right: 6px;
  width: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 3;
}

.afadir-scroll-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(108, 117, 125, 0.45);
  transition: transform 0.15s ease, background 0.15s ease;
}

.afadir-scroll-dot.is-active {
  background: rgba(108, 117, 125, 0.85);
  transform: scale(1.25);
}

.afadir-user-dd-panel.is-scrollable .afadir-scroll-dots {
  opacity: 1;
}

/* Active item inside dropdown */
.afadir-user-menu-item.is-active {
  font-weight: 700;
  position: relative;
}

.afadir-user-menu-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--af-color-primary);
}

.afadir-user-menu-group {
  padding: 12px 0;
  border-bottom: 1px solid var(--af-color-border);
}

.afadir-user-menu-group:last-child {
  border-bottom: none;
}

.afadir-user-menu-group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--af-color-muted);
  padding: 8px 16px 4px 16px;
  margin: 0;
}

.afadir-user-menu-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 14px;
  color: var(--af-color-text);
  cursor: pointer;
  transition: all 0.15s ease;
}

.afadir-user-menu-item:hover {
  background: var(--af-color-surface);
  color: var(--af-color-text);
  box-shadow: inset 0 0 0 1px var(--af-color-border);
}

/* ============================================================================
   MAIN CONTENT
   ============================================================================ */

.afadir-main {
  max-width: 1400px;
  margin: 0 auto;
  /* UX: keep the content close to the topbar (avoid large dead space). */
  padding: 24px 24px 24px;
}

/* Content Pages (FAQ, About, etc.) */
.afadir-page, .afadir-home {
  color: var(--af-color-text);
  line-height: 1.6;
  max-width: var(--afadir-maxw);
  margin: 0 auto;
  padding: 24px;
}

.afadir-page-body {
  margin-top: 20px;
}

.afadir-page-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 768px) {
  .afadir-page-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .afadir-page-actions .afadir-btn,
  .afadir-page-actions .afadir-btn-primary,
  .afadir-page-actions .afadir-btn-secondary,
  .afadir-page-actions .afadir-btn-ghost,
  .afadir-page-actions .afadir-btn--ghost {
    width: 100%;
    justify-content: center;
  }
}


.afadir-page-header {
  padding: 40px 0 24px;
  margin: 0 0 40px 0;
  border-bottom: 2px solid var(--af-color-border);
}

.afadir-page-title {
  margin: 0;
  font-size: clamp(32px, 4vw, 42px);
  font-weight: 800;
  color: var(--af-color-text);
  line-height: 1.2;
}

.afadir-page-subtitle {
  margin: 12px 0 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--af-color-text);
  opacity: 0.8;
  max-width: var(--afadir-maxw-readable);
}

@media (max-width: 768px) {
  .afadir-page-title { font-size: 2rem; }
  .afadir-page-subtitle { font-size: 1.05rem; }
}

/* FAQ list inside accordion content */
.afadir-faq-list {
  margin: 10px 0 14px 0;
  padding-left: 22px;
}

/* ==========================================================================
   ACCORDION (FAQ / About)
   - Mobile-friendly
   - Keyboard accessible via <details>/<summary>
   ========================================================================== */

.afadir-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.afadir-accordion-item {
  background: var(--color-white);
  border: 1px solid var(--landing-gray-200);
  border-radius: 12px;
  overflow: clip;
}

.afadir-accordion-item--highlight {
  border-color: rgba(219, 39, 119, 0.35);
  box-shadow: 0 10px 24px rgba(219, 39, 119, 0.08);
}

.afadir-accordion-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px;
  cursor: pointer;
  user-select: none;
}

/* Hide default marker */
.afadir-accordion-summary::-webkit-details-marker { display: none; }

.afadir-accordion-title {
  font-weight: 800;
  color: var(--landing-gray-900);
  line-height: 1.35;
}

.afadir-accordion-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  position: relative;
}

.afadir-accordion-icon::before,
.afadir-accordion-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: var(--landing-gray-700);
  transform: translate(-50%, -50%);
}

.afadir-accordion-icon::after {
  width: 2px;
  height: 10px;
}

.afadir-accordion-item[open] .afadir-accordion-icon::after {
  height: 0;
}

.afadir-accordion-content {
  padding: 0 16px 16px 16px;
  color: var(--landing-gray-700);
  line-height: 1.75;
}

.afadir-accordion-content p { margin: 0 0 12px 0; }
.afadir-accordion-content p:last-child { margin-bottom: 0; }

.afadir-accordion-content a {
  color: var(--afadir-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.afadir-accordion-content a:hover {
  color: var(--afadir-brand-dark);
}

.afadir-accordion-summary:focus-visible {
  outline: 3px solid rgba(219, 39, 119, 0.35);
  outline-offset: 2px;
}

.inside-article {
  margin: 0;
}

.entry-content {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--landing-gray-700);
}

.entry-content h2 {
  margin: 40px 0 16px 0;
  font-size: 1.875rem;
  font-weight: 700;
  /* color: #1f2937; */
  line-height: 1.3;
}

.entry-content h3 {
  margin: 32px 0 12px 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--landing-gray-700);
  line-height: 1.4;
}

.entry-content p {
  margin: 0 0 16px 0;
}

.entry-content ul,
.entry-content ol {
  margin: 0 0 16px 0;
  padding-left: 28px;
}

.entry-content li {
  margin: 0 0 8px 0;
}

.entry-content a {
  color: var(--afadir-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.entry-content a:hover {
  color: var(--afadir-brand-dark);
}

.entry-content strong {
  font-weight: 600;
  color: var(--landing-gray-800);
}

.entry-content blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  border-left: 4px solid var(--landing-primary);
  background: var(--landing-gray-100);
  font-style: italic;
  color: var(--landing-gray-800) !important;
}

.entry-content code {
  padding: 2px 6px;
  background: var(--landing-gray-100);
  border: 1px solid var(--landing-gray-200);
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

.entry-content pre {
  margin: 24px 0;
  padding: 16px;
  background: var(--landing-gray-800);
  color: var(--landing-gray-50);
  border-radius: 8px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  line-height: 1.6;
}

.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 24px 0;
}

.entry-content table {
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
}

.entry-content table th,
.entry-content table td {
  padding: 12px;
  border: 1px solid #e5e7eb;
  text-align: left;
}

.entry-content table th {
  background: var(--landing-gray-50);
  font-weight: 600;
  color: var(--landing-gray-800);
}

.entry-content table tr:nth-child(even) {
  background: #f9fafb;
}

/* Landing wrapper (used by about.js and other WP page loads) */
.afadir-landing {
  max-width: var(--afadir-maxw);
  margin: 0 auto;
  padding: 24px;
}

@media (max-width: 768px) {
  .afadir-landing {
    padding: 16px; /* UX-002: Reducido de 24px → 16px en móvil */
  }
}

.afadir-landing h1 {
  margin: 0 0 24px 0;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--af-color-text);
  line-height: 1.2;
}

.afadir-landing h2 {
  margin: 32px 0 16px 0;
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--af-color-text);
  line-height: 1.3;
}

.afadir-landing h3 {
  margin: 24px 0 12px 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--af-color-text);
  line-height: 1.4;
}

.afadir-landing p {
  margin: 0 0 16px 0;
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--af-color-text);
}

.afadir-landing ul,
.afadir-landing ol {
  margin: 0 0 16px 0;
  padding-left: 28px;
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--af-color-text);
}

.afadir-landing li {
  margin: 0 0 8px 0;
}

.afadir-landing a {
  color: var(--afadir-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.afadir-landing a:hover {
  color: var(--afadir-brand-dark);
}

.afadir-landing strong {
  font-weight: 600;
  color: var(--afadir-orange);
}

.afadir-landing img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 24px 0;
}

/* Busy indicator */
.afadir-busy {
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Global busy overlay: covers entire viewport while data is loading.
 * This overlay is injected dynamically via ui.setBusy(). It uses
 * flexbox to center the spinner and inherits colour tokens from
 * the design system. See afadir-spinner below for animation.
 */
.afadir-busy-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Use a semi-transparent surface on top of the SPA surface. */
  background: rgba(var(--afadir-brand-rgb, 229, 0, 125), 0.05);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--af-z-overlay);
}

/* Spinner used inside the busy overlay. Relies on a simple
 * border animation. Colour draws from the brand token with a
 * fallback to the accent colour defined in CSS variables.
 */
.afadir-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(var(--afadir-brand-rgb, 229, 0, 125), 0.2);
  border-top-color: var(--afadir-brand, #e5007d);
  border-radius: 50%;
  animation: afadir-spin 0.8s linear infinite;
}

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

/* ============================================================================
   CARDS & CONTENT
   ============================================================================ */

.afadir-card {
  background: var(--af-color-surface);
  color: var(--af-color-text);
  border: 1px solid var(--af-color-border);
  border-radius: 12px;
  padding: 24px;
  margin: 0 0 24px 0;
  box-shadow: var(--af-shadow-sm);
}

/* Dashicons en cards del dashboard */
.afadir-card .dashicons {
  font-size: 32px;
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  color: var(--afadir-brand);
  display: block;
}

.afadir-card-dark {
  background: var(--af-color-text);
  color: var(--af-color-surface);
  border: 1px solid var(--af-color-text);
  border-radius: 12px;
  padding: 24px;
  margin: 0 0 24px 0;
  box-shadow: var(--af-shadow-sm);
}

.afadir-card-hover {
  transition: all var(--transition-base, 0.2s ease);
}

.afadir-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg, 0 8px 20px rgba(0, 0, 0, 0.12));
  border-color: var(--afadir-brand, #667eea);
}

#afadir-app-root[data-screen="join_basic"] .afadir-main {
  /* join_basic should feel tight and focused (avoid large empty space). */
  padding-top: var(--space-1_5, 0.375rem);
  color: var(--af-color-muted);
  padding-left: var(--space-4, 1rem);
  padding-right: var(--space-4, 1rem);
  max-width: var(--afadir-maxw);
}

/* Hide drawer and menu button on join_basic to keep the user focused on the form. */
#afadir-app-root[data-screen="join_basic"] .afadir-menu-btn,
#afadir-app-root[data-screen="join_basic"] .afadir-drawer-overlay,
#afadir-app-root[data-screen="join_basic"] .afadir-drawer {
  display: none;
}

/* Safety: if the drawer open class is present, force it closed for this screen. */
html.afadir-drawer-open #afadir-app-root[data-screen="join_basic"] {
  overflow: auto;
}

/* Make primary submit buttons feel more "conversion" oriented. */
#afadir-app-root[data-screen="join_basic"] button[type="submit"],
#afadir-app-root[data-screen="join_basic"] input[type="submit"] {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
}

.afadir-h2 {
  font-size: var(--text-2xl, 1.75rem);
  font-weight: 700;
  color: var(--color-neutral-800, #212529);
  margin: 0 0 var(--space-6, 1.5rem) 0;
  line-height: 1.2;
}

.afadir-h3 {
  font-size: var(--text-xl, 1.25rem);
  font-weight: 600;
  color: var(--color-neutral-800, #212529);
  margin: 0 0 var(--space-4, 1rem) 0;
  line-height: 1.3;
}

.afadir-muted {
  color: var(--af-color-text);
  opacity: 0.7;
  font-size: 14px;
}

.afadir-link {
  color: var(--afadir-teal);
  text-decoration: none;
  font-weight: 500;
}

.afadir-link:hover {
  color: var(--afadir-navy);
  text-decoration: underline;
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

/* Base button
   - Mantener compatibilidad con pantallas legacy que aún usan `.afadir-btn`.
   - Se alinea a la jerarquía (PRIMARY) para evitar el look “morado demo”.
*/
#afadir-app-root .afadir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem) var(--space-5, 1.5rem);
  background: var(--afadir-brand);
  border: none;
  border-radius: var(--radius-md, 0.5rem);
  /*color: var(--color-white, #ffffff);*/
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
  text-decoration: none;
  margin: 0;
  box-shadow: var(--shadow-sm);
}

#afadir-app-root .afadir-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  background: var(--afadir-brand-dark);
}

#afadir-app-root .afadir-btn:active {
  transform: translateY(0);
}

#afadir-app-root .afadir-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================================
   UX-003: Button Hierarchy (additive, opt-in)

   Sistema de jerarquía de CTAs para guiar mejor al usuario:
   - Primary (fucsia): Acción principal/crítica (ej: "Hazte socio")
   - Secondary (blanco): Acción alternativa (ej: "Más información")
   - Tertiary: Acción de baja prioridad (ej: "Cancelar")
   ============================================================================ */

/* PRIMARY - Critical actions (fucsia brand) */
#afadir-app-root .afadir-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem) var(--space-5, 1.5rem);
  background: linear-gradient(135deg, var(--afadir-brand) 0%, var(--afadir-brand-dark) 100%);
  border: none;
  border-radius: var(--radius-md, 0.5rem);
  color: var(--color-white, #ffffff);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition: all var(--transition-base, 0.2s ease);
  text-decoration: none;
  margin: 0;
  box-shadow: var(--shadow-md);
}

#afadir-app-root .afadir-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  background: linear-gradient(135deg, var(--afadir-brand-light) 0%, var(--afadir-brand) 100%);
}

#afadir-app-root .afadir-btn-primary:active {
  transform: translateY(0);
}

#afadir-app-root .afadir-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* SECONDARY - Alternative actions (outlined, neutral) */
#afadir-app-root .afadir-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem) var(--space-5, 1.5rem);
  background-color: var(--af-color-surface);
  background-image: none;
  border: 1.5px solid var(--af-color-border);
  border-radius: var(--radius-md, 0.5rem);
  color: var(--af-color-text);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-base, 0.2s ease);
  text-decoration: none;
  margin: 0;
  box-shadow: var(--af-shadow-xs, 0 1px 3px rgba(0, 0, 0, 0.05));
}

#afadir-app-root .afadir-btn-secondary:hover {
  background: var(--af-color-bg);
  border-color: var(--af-color-primary);
  box-shadow: var(--af-shadow-sm);
  transform: translateY(-1px);
}

/* TERTIARY - Low priority (subtle, minimal) */
#afadir-app-root .afadir-btn-tertiary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem) var(--space-5, 1.5rem);
  background: transparent;
  border: 1px solid var(--color-border, rgba(15, 23, 42, 0.12));
  border-radius: var(--radius-md, 0.5rem);
  color: var(--color-text-muted, #64748b);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-base, 0.2s ease);
  text-decoration: none;
  margin: 0;
  box-shadow: none;
}

#afadir-app-root .afadir-btn-tertiary:hover {
  background: var(--afadir-surface-2, #f8fafc);
  border-color: var(--color-neutral-300, rgba(15, 23, 42, 0.20));
  color: var(--afadir-text, #1e293b);
}

/* GHOST - ORIGINAL (backward compatible, same as before) */
#afadir-app-root .afadir-btn-ghost {
  background: transparent;
  border: 1px solid var(--af-color-border);
  color: var(--af-color-text);
  box-shadow: none;
}

#afadir-app-root .afadir-btn-ghost:hover {
  background: var(--af-color-surface);
  border-color: var(--af-color-primary);
}

/* SEMANTIC VARIANTS - For specific action types */

/* Success/OK - Confirmaciones positivas */
#afadir-app-root .afadir-btn-ok,
#afadir-app-root .afadir-btn-success {
  background: linear-gradient(135deg, var(--color-success-600, #10b981) 0%, var(--color-success-700, #059669) 100%);
  border: none;
  color: var(--color-white, #ffffff);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(16, 185, 129, 0.25));
}

#afadir-app-root .afadir-btn-ok:hover,
#afadir-app-root .afadir-btn-success:hover {
  background: linear-gradient(135deg, var(--color-success-400, #34d399) 0%, var(--color-success-600, #10b981) 100%);
  box-shadow: var(--shadow-lg, 0 6px 16px rgba(16, 185, 129, 0.35));
}

/* Warning/Danger - Acciones destructivas */
#afadir-app-root .afadir-btn-warn,
#afadir-app-root .afadir-btn-danger {
  background: linear-gradient(135deg, var(--color-danger-600, #ef4444) 0%, var(--color-danger-700, #dc2626) 100%);
  border: none;
  color: var(--color-white, #ffffff);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(239, 68, 68, 0.25));
}

#afadir-app-root .afadir-btn-warn:hover,
#afadir-app-root .afadir-btn-danger:hover {
  background: linear-gradient(135deg, var(--color-danger-400, #f87171) 0%, var(--color-danger-600, #ef4444) 100%);
  box-shadow: var(--shadow-lg, 0 6px 16px rgba(239, 68, 68, 0.35));
}

/* SIZE VARIANTS */
#afadir-app-root .afadir-btn.small,
#afadir-app-root .afadir-btn-sm {
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  font-size: var(--text-xs, 0.8125rem);
}

#afadir-app-root .afadir-btn.large,
#afadir-app-root .afadir-btn-lg {
  padding: var(--space-3_5, 0.875rem) var(--space-8, 2rem);
  font-size: var(--text-base, 1rem);
}

/* ============================================================================
   FORMS
   ============================================================================ */

.afadir-field {
  margin: 0 0 20px 0;
}

.afadir-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #495057;
  margin-bottom: 8px;
}

.afadir-field input,
.afadir-field textarea,
.afadir-field select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  font-size: 14px;
  color: #495057;
  background: #ffffff;
  transition: all 0.2s ease;
}

.afadir-field input:focus,
.afadir-field textarea:focus,
.afadir-field select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.afadir-help {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 6px;
}

.afadir-req {
  color: var(--color-danger-text);
}

/* ============================================================================
   GRID & LAYOUT
   ============================================================================ */

.afadir-grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 768px) {
  .afadir-grid2 {
    grid-template-columns: 1fr;
  }
}

.afadir-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 768px) {
  .afadir-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
}

.afadir-flex {
  display: flex;
}

.afadir-flex-between {
  justify-content: space-between;
  align-items: center;
}

.afadir-gap {
  gap: 16px;
}

/* ============================================================================
   MESSAGES & ALERTS
   ============================================================================ */

.afadir-msg {
  padding: 16px;
  border-radius: 8px;
  margin: 16px 0;
  font-size: 14px;
}

.afadir-msg-info {
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  color: var(--color-info-text);
}

.afadir-msg-ok {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  color: var(--color-success-text);
}

.afadir-msg-err {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  color: var(--color-danger-text-dark);
}

.afadir-alert {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning-text);
  padding: 16px;
  border-radius: 8px;
  margin: 16px 0;
}

/* ============================================================================
   PRESS / NEWS CARDS
   ============================================================================ */

.afadir-prensa-grid {
  display: grid;
  /* Unify card grids across modules: use consistent min width and spacing */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.afadir-noticia-card {
  /* Standardize press cards to match the global card design */
  background: var(--af-color-surface, #ffffff);
  color: var(--af-color-text, #1f2937);
  /* Use the shared border color token instead of a hard-coded value */
  border: 1px solid var(--afadir-border);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.2s ease;
  /* Remove custom margin; spacing is controlled by the grid gap */
  margin: 0;
}

.afadir-noticia-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.afadir-noticia-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.afadir-noticia-date {
  font-size: 12px;
  color: var(--af-color-muted, #6c757d);
}

.afadir-noticia-submeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: -6px 0 12px 0;
  font-size: 12px;
  color: var(--af-color-muted, #6c757d);
}

.afadir-noticia-submeta-item {
  white-space: nowrap;
}

.afadir-dot {
  opacity: 0.6;
  padding: 0 2px;
}

.afadir-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.afadir-noticia-tag {
  font-size: 10px;
  padding: 3px 8px;
  background: var(--af-color-info-bg, #f8f9fa);
  border: 1px solid var(--afadir-border, #e9ecef);
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--af-color-muted, #495057);
}

@media (max-width: 768px) {
  .afadir-noticia-tag {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 8px;
  }
}

.afadir-noticia-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--af-color-text, #212529);
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.afadir-noticia-excerpt {
  font-size: 14px;
  color: var(--af-color-muted, #6c757d);
  line-height: 1.6;
  margin: 0 0 16px 0;
}

.afadir-noticia-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--afadir-border, #f8f9fa);
}

/* Acciones (projects) */
.afadir-action-links {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid rgba(0,0,0,0.06);
}
.afadir-action-links-list {
	margin: 0;
	padding-left: 18px;
}
.afadir-action-links-list li {
	margin: 4px 0;
}

.afadir-noticia-link {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.afadir-noticia-link:hover {
  color: var(--afadir-brand-dark, #764ba2);
}

/* Fase 4A: CTA secundario "Abrir (SEO)" */
.afadir-noticia-link--seo {
  color: var(--color-neutral-700, rgba(0,0,0,0.85));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.afadir-noticia-link--seo:hover,
.afadir-noticia-link--seo:focus {
  color: var(--color-text, #000);
}

.afadir-btn--ghost {
  background: transparent;
  border: 2px solid var(--af-color-border);
  color: var(--af-color-text);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-size: var(--text-base, 1rem);
}

.afadir-btn--ghost:hover,
.afadir-btn--ghost:focus {
  border-color: var(--af-color-primary);
  background: var(--af-color-surface);
}

/* INC-2.2.186: Edit link styling for approved editors */
#afadir-app-root .afadir-edit-link {
  color: var(--color-success-600, #10b981);
  margin-left: var(--space-2, 0.5rem);
}

#afadir-app-root .afadir-edit-link:hover {
  color: var(--color-success-700, #059669);
}

.afadir-categoria-btn {
  background: var(--afadir-brand);
  border: 2px solid var(--afadir-border);
  color: var(--afadir-navy);
  padding: 0.625rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.afadir-categoria-btn:hover {
  border-color: var(--afadir-brand-dark);
  background: white;
  color:var(--afadir-text);
}

.afadir-categoria-active {
  background: var(--afadir-brand-dark);
  border-color: var(--afadir-brand-dark);
  color: white;
}


/* ============================================================================
   ALLIES / ASOCIACIONES CARDS
   ============================================================================ */

.afadir-asociaciones-section {
  padding: 60px 20px;
  background: var(--af-color-surface);
}

.afadir-asociaciones-section-alt {
  background: var(--af-color-surface);
}

.afadir-asociaciones-category-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--af-color-text);
  margin: 0 0 32px 0;
  text-align: center;
  position: relative;
  padding-bottom: 16px;
}

.afadir-asociaciones-category-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

.afadir-asociaciones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  max-width: var(--afadir-maxw);
  margin: 0 auto;
}

.afadir-asociacion-card {
  background: var(--af-color-surface);
  border: 1px solid var(--af-color-border);
  border-radius: 12px;
  padding: 24px;
  transition: all 0.3s ease;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 250px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.afadir-asociacion-card:hover {
  box-shadow: var(--shadow-lg, 0 8px 20px rgba(0, 0, 0, 0.12));
  transform: translateY(-4px);
  border-color: var(--afadir-brand, #667eea);
}

.afadir-asociacion-header {
  margin-bottom: 16px;
  text-align: center;
}

.afadir-asociacion-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-heading);
  margin: 0 0 8px 0;
  line-height: 1.3;
  text-align: center;
}

.afadir-asociacion-scope {
  display: inline-block;
  font-size: 11px;
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark-gradient) 100%);
  color: var(--color-white);
  border-radius: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 8px;
}

.afadir-asociacion-description {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 auto 0;
  flex: 1;
  text-align: center;
}

.afadir-asociacion-footer {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--color-surface);
  text-align: center;
}

.afadir-asociacion-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-purple);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
}

.afadir-asociacion-link:hover {
  color: var(--color-purple-dark-gradient);
  gap: 12px;
}

.afadir-asociaciones-intro {
  padding: 60px 20px;
  background: var(--color-surface);
  text-align: center;
}

.afadir-intro-lead {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-heading);
  line-height: 1.6;
  margin: 0 0 24px 0;
  max-width: var(--afadir-maxw);
  margin-left: auto;
  margin-right: auto;
}

.afadir-intro-text {
  font-size: 16px;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin: 0;
  max-width: var(--afadir-maxw);
  margin-left: auto;
  margin-right: auto;
}

.afadir-asociaciones-cta {
  padding: 80px 20px;
  background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark-gradient) 100%);
  text-align: center;
  color: var(--color-white);
}

.afadir-asociaciones-cta-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-white);
  margin: 0 0 16px 0;
}

.afadir-asociaciones-cta-text {
  font-size: var(--text-lg, 1.125rem);
  color: var(--color-white, #ffffff);
  margin: 0;
  line-height: 1.8;
}

.afadir-asociaciones-cta-text a {
  color: var(--color-white, #ffffff);
  text-decoration: underline;
  font-weight: 700;
}

.afadir-asociaciones-cta-text a:hover {
  color: var(--color-neutral-100, rgba(255, 255, 255, 0.85));
}

/* Responsive */
@media (max-width: 768px) {
  .afadir-asociaciones-grid {
    grid-template-columns: 1fr;
  }

  .afadir-asociaciones-category-title {
    font-size: 24px;
  }

  .afadir-asociacion-card {
    min-height: 200px;
  }

  .afadir-intro-lead {
    font-size: 18px;
  }

  .afadir-intro-text {
    font-size: 15px;
  }

  .afadir-asociaciones-cta-title {
    font-size: 26px;
  }

  .afadir-asociaciones-cta-text {
    font-size: 16px;
  }
}

/* ============================================================================
   TABLES
   ============================================================================ */

.afadir-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}

/*
 * Mejoras de legibilidad para tablas
 *
 * Añadimos rayado (zebra striping) en las filas pares y un estado hover
 * para todas las filas del cuerpo de la tabla. Esto facilita la lectura
 * y mejora la UX especialmente en tablas anchas o con muchas filas.
 */
.afadir-table tbody tr:nth-child(even) {
  background-color: var(--af-color-surface);
}

.afadir-table tbody tr:hover {
  background-color: var(--af-color-surface);
}

.afadir-table th,
.afadir-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--af-color-border);
  vertical-align: top;
}

.afadir-table th {
  background: var(--af-color-surface);
  font-weight: 600;
  color: var(--af-color-muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.afadir-table .fit {
  white-space: nowrap;
  width: 1%;
}

/*
 * Responsive tables
 *
 * Many admin screens (blog, press, resources) wrap <table class="afadir-table"> inside
 * a .afadir-tablewrap container. On small screens the table may overflow the
 * viewport causing horizontal scrolling at the page level. The following
 * styles make the wrapper scrollable horizontally while keeping the rest of
 * the layout intact. Touch devices benefit from momentum scrolling.
 */
.afadir-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Ensure tables inside a scroll wrapper don't shrink below their natural width */
.afadir-tablewrap > table {
  width: 100%;
  min-width: 600px;
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge.error {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

.badge.warning {
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
}

.badge.info {
  background: #e7f3ff;
  border: 1px solid #90caf9;
  color: #1565c0;
}

.badge.debug {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #5a6168;
}

/* ============================================================================
   TOAST NOTIFICATIONS
   ============================================================================ */

.afadir-toast-host {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: var(--af-z-toast);
  max-width: 600px;
}

/* Error UI */
.afadir-row{display:flex;align-items:center}
/* .afadir-gap duplicate removed, see line 1782 */
.afadir-error .afadir-error-msg{margin:.5rem 0 1rem}
.afadir-details{margin-top:1rem}
.afadir-pre{white-space:pre-wrap;word-break:break-word;background:#0b1220;color:#e5e7eb;border-radius:.5rem;padding:.75rem;font-size:.875rem;line-height:1.4;overflow:auto;max-height:260px}

.afadir-toast {
  background: #212529;
  color: #ffffff;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.afadir-toast-ok {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.afadir-toast-err {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.afadir-toast-msg {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
}

.afadir-toast-x {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.afadir-toast-x:hover {
  opacity: 1;
}

/* ============================================================================
   MODAL
   ============================================================================ */

#afadir-modal-host {
  position: fixed;
  inset: 0;
  z-index: var(--af-z-modal);
}

.afadir-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.afadir-modal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.afadir-modal-card {
  width: min(540px, 90%);
  background: var(--color-white);
  /* Harmonize with design system: reduce corner radius to match cards */
  border-radius: 12px;
  /* Harmonize with design system: reduce padding */
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalIn 0.3s ease;
}

@keyframes modalIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.afadir-modal-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--af-color-text);
  margin: 0 0 16px 0;
}

.afadir-modal-msg {
  font-size: 16px;
  color: var(--af-color-muted);
  line-height: 1.6;
  margin: 0 0 24px 0;
}

.afadir-modal-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Fix modal overlay (used by ui.showModal in JavaScript) */
.afadir-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--af-z-modal);
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.afadir-modal-overlay .afadir-modal {
  position: relative;
  /*
   * IMPORTANT:
   * We have TWO modal systems in this project.
   * - Legacy: .afadir-modal + .afadir-modal-card (full-screen flex container)
   * - New (ui.showModal): .afadir-modal-overlay > .afadir-modal (a single card)
   *
   * The legacy rule sets `.afadir-modal { display:flex; inset:0; ... }`.
   * Without overriding `display`, the content becomes a 3-column flex layout
   * (title | message | actions) on some breakpoints.
   */
  display: block !important;
  /* Harmonize modal card with the global card system */
  width: min(540px, 90%);
  background: var(--color-white);
  /* Reduce border radius to 12px to align with other cards */
  border-radius: 12px;
  /* Use slightly smaller padding to prevent cramped content on medium screens */
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease-out;
  /*
   * FIX (2026-01-01): On mobile, some content-rich dialogs (post-registro,
   * confirmations, etc.) were taller than the viewport causing the card
   * to render outside the visible area.
   */
  max-height: calc(100vh - 48px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Close button for modal */
.afadir-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 1;
}

.afadir-modal-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text-dark);
}

.afadir-modal-close:active {
  transform: scale(0.95);
}

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

.afadir-modal-body {
  font-size: 16px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 24px 0;
  white-space: pre-wrap;
}

.afadir-modal-feedback {
  margin: -12px 0 20px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text-body);
  font-size: 14px;
}

/* Minimal spinner for async modal actions (no dependencies). */
.afadir-btn-spinner {
  width: 14px;
  height: 14px;
  margin-left: 10px;
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-top-color: rgba(0, 0, 0, 0.55);
  display: none;
  animation: afadirSpin 0.9s linear infinite;
}

@keyframes afadirSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.afadir-btn-loading {
  cursor: progress;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

/*
 * CONSISTENT NAV (desktop + mobile) for <=1024px.
 * Previously, non-touch desktops <=1024px used a wrapped 2-row header, producing:
 * - "Iniciar sesión" jumping to a different line/order
 * - horizontal scrollbars appearing on a separate row
 * - subtle header reflow while scrolling
 *
 * Fix: keep a single-row topbar and rely on horizontal scrolling for the nav.
 */
@media (max-width: 1024px) {
  .afadir-topbar-container {
    flex-wrap: nowrap;
  }

  .afadir-nav-wrap {
    order: 2;
    flex: 1;
    min-width: 0;
  }

  .afadir-userbox {
    order: 3;
    flex-shrink: 0;
  }

  .afadir-nav {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .afadir-topbar-container {
    /*
     * Mobile layout: 2 rows (more useful nav width + stable header).
     * Row 1: logo (left) + userbox/login (right)
     * Row 2: nav (full width, horizontal scroll)
     */
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    padding: 8px 12px; /* UX-002: compact */
    column-gap: 10px;
    row-gap: 8px;
  }

  /*
   * Mobile top navigation must not eat the viewport.
   * On small screens the menu was wrapping into multiple rows and taking ~35-40% height.
   * Fix: keep it to a single horizontally-scrollable row (pills), reduce padding,
   * and slightly shrink the logo.
   */
  .afadir-logo {
    height: 36px;
    max-height: 36px;
  }

  .afadir-brand {
    gap: 8px;
    font-size: 15px;
    grid-column: 1;
    grid-row: 1;
  }

	.afadir-banner {
		grid-column: 2;
		grid-row: 1;
		justify-self: stretch;
		align-self: center;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		padding: 6px 10px;
		font-size: 12px;
		line-height: 1.25;
	}

  .afadir-userbox {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .afadir-nav-wrap {
    grid-column: 1 / 4;
    grid-row: 2;
    width: 100%;
  }

  /* Keep login CTA as compact as the nav pills on mobile */
  .afadir-userbox .afadir-link,
  .afadir-userbox .afadir-nav-btn--link {
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 10px;
  }

  /* Mobile: Auth buttons in a single row */
  .afadir-auth-buttons {
    flex-direction: row;
    gap: 6px;
  }

  .afadir-auth-btn {
    padding: 8px 10px;
    font-size: 12px;
    flex: 1;
    justify-content: center;
    white-space: nowrap;
  }

  .afadir-auth-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
  }

  /* On small screens we keep nav in a single row and rely on fades + dots for affordance */
  .afadir-nav {
    gap: 6px;
    justify-content: flex-start;
    scrollbar-width: none; /* Firefox */
  }

  .afadir-nav::-webkit-scrollbar { display: none; }

  .afadir-nav-btn {
    padding: var(--space-1_5, 0.375rem) var(--space-2_5, 0.625rem); /* Reducido de 8/12 → 6/10 */
    font-size: var(--text-xs, 0.8125rem);
    border-radius: var(--radius-md, 0.625rem);
  }

  .afadir-nav-btn [class^="dashicons-"],
  .afadir-nav-btn [class*=" dashicons-"] {
    font-size: var(--text-base, 1rem);
    width: var(--space-4, 1rem);
    height: var(--space-4, 1rem);
  }

  .afadir-main {
    /* Mobile: keep top padding close to zero for a denser, cleaner layout. */
    padding: var(--space-1_5, 0.375rem) var(--space-4, 1rem) var(--space-4_5, 1.125rem);
  }

  .afadir-card {
    padding: var(--space-5, 1.25rem);
  }

  .afadir-h2 {
    font-size: var(--text-xl, 1.5rem);
  }

  .afadir-prensa-grid {
    grid-template-columns: 1fr;
  }

  .afadir-toast-host {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
  }

  /*
   * UX-001/UX-002: on small screens, tall vertical margins waste viewport.
   * Tighten single-column containers used in login/set-password/etc.
   */
  #afadir-app-root .afadir-container--narrow {
    margin: 24px auto;
  }

  #afadir-app-root .afadir-container--xs-center {
    margin: 24px auto;
  }
}

/* Ajustes específicos para móviles pequeños (360px-480px) */
@media (max-width: 480px) {
  .afadir-auth-btn {
    padding: 6px 8px;
    font-size: 11px;
    gap: 4px;
  }

  .afadir-auth-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
  }

  .afadir-auth-buttons {
    gap: 4px;
  }
}

/* Pantallas extremadamente pequeñas: solo iconos */
@media (max-width: 360px) {
  .afadir-auth-btn-text {
    display: none;
  }

  .afadir-auth-btn {
    padding: 8px;
    min-width: 40px;
  }

  .afadir-auth-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
  }
}

/* Mobile hardening for modal (post-registro confirmation, etc.) */
@media (max-width: 480px) {
  .afadir-modal-overlay {
    padding: 12px;
    align-items: flex-start;
  }

  .afadir-modal-overlay .afadir-modal {
    width: 100%;
    margin-top: 12px;
    /* Maintain a comfortable padding on small devices */
    padding: 20px;
    /* Align with card system: unify corner radius */
    border-radius: 12px;
    max-height: calc(100vh - 24px);
  }

  /* Legacy modal cards should behave like the new modal on small screens */
  .afadir-modal-card {
    width: 100%;
    margin-top: 12px;
    /* Reduce padding on small devices */
    padding: 20px;
    /* Unify corner radius with card design */
    border-radius: 12px;
    max-height: calc(100vh - 24px);
  }

  .afadir-modal-title { font-size: 20px; }
  .afadir-modal-actions { justify-content: stretch; }
  .afadir-modal-actions .afadir-btn { width: 100%; justify-content: center; }
}

/* ============================================================================
   LANDING PAGE - DISEÑO PROFESIONAL Y MODERNO
   ============================================================================ */

/* Variables de color profesionales */
:root {
  --afadir-maxw: 1120px;
  --afadir-maxw-readable: 860px;

  /* Brand-first landing tokens (restore AFADIR pink and keep everything consistent)
     NOTE: If you share the exact hex from the logo, we can match it 1:1.
     This default is a strong, readable “AFADIR pink” that works on white and dark. */
  --landing-primary: #e87a4e;      /* Naranja crema para mejor apariencia */
  --landing-primary-rgb: 232, 122, 78;
  --landing-primary-dark: #d65a2e;
  --landing-primary-light: #ff9a6e;
  --landing-secondary: #111827;     /* Neutral dark (for contrast + readability) */
  --landing-accent: #f59e0b;        /* Warm accent */
  --landing-gray-50: #f9fafb;
  --landing-gray-100: #f3f4f6;
  --landing-gray-200: #e5e7eb;
  --landing-gray-300: #d1d5db;
  --landing-gray-700: #1a1a1a;  /* Oscurecido para mejor contraste (antes #374151) */
  --landing-gray-800: #0f0f0f;  /* Oscurecido para mejor contraste (antes #1f2937) */
  --landing-gray-900: #000000;  /* Oscurecido para mejor contraste (antes #111827) */
  --landing-danger: #ef4444;
  --landing-danger-rgb: 239, 68, 68;

  /* Colores comunes para app */
  --color-white: #ffffff;
  --color-text-dark: #333333;
  --color-hover-bg: #f5f5f5;
  --color-link-blue: #0066cc;
  --color-purple-dark: #3b1b5a;
  --color-brown-dark: #4a2f00;
  --color-green-dark: #064019;
  --color-red-dark: #580026;

  /* Colores adicionales UI */
  --color-border: #e0e0e0;
  --color-border-focus: #667eea;
  --color-text-muted: #6c757d;
  --color-text-secondary: #495057;
  --color-danger-text: #ef4444;
  --color-warning-bg: #fff3cd;
  --color-warning-border: #ffc107;
  --color-warning-text: #856404;
  --color-info-bg: #e7f3ff;
  --color-info-border: #90caf9;
  --color-info-text: #1565c0;
  --color-success-bg: #d1fae5;
  --color-success-border: #6ee7b7;
  --color-success-text: #065f46;
  --color-danger-bg: #fee2e2;
  --color-danger-border: #fca5a5;
  --color-danger-text-dark: #991b1b;
  --color-surface: #f8f9fa;
  --color-surface-border: #dee2e6;
  --color-text-light: #5a6168;
  --color-pre-bg: #0b1220;
  --color-pre-text: #e5e7eb;
  --color-modal-bg: #212529;
  --color-purple: #667eea;
  --color-purple-dark: #764ba2;
  --color-text-heading: #212529;
  --color-text-body: #3a3f44;
  --color-input-border: #dee2e6;
  --color-input-bg: #ffffff;
  --color-success-gradient-start: #10b981;
  --color-success-gradient-end: #059669;
  --color-danger-gradient-start: #ef4444;
  --color-danger-gradient-end: #dc2626;
}

/* Dark Mode Support - Mejora de contraste para navegadores con tema oscuro */
@media (prefers-color-scheme: dark) {
  :root {
    /* Colores base invertidos para modo oscuro */
    --color-text-dark: #f3f4f6;
    --color-text-heading: #f9fafb;
    --color-text-body: #e5e7eb;
    --color-text-secondary: #d1d5db;
    --color-text-muted: #9ca3af;
    --color-text-light: #d1d5db;

    /* Fondos para modo oscuro */
    --color-white: #1f2937;
    --color-input-bg: #374151;
    --color-surface: #111827;
    --color-hover-bg: #374151;

    /* Bordes más claros en modo oscuro */
    --color-border: #4b5563;
    --color-input-border: #6b7280;
    --color-surface-border: #4b5563;

    /* Pre/code con mejor contraste */
    --color-pre-bg: #0f172a;
    --color-pre-text: #f1f5f9;

    /* Modal más oscuro */
    --color-modal-bg: #0f172a;

    /* Landing grays invertidos */
    --landing-gray-50: #111827;
    --landing-gray-100: #1f2937;
    --landing-gray-200: #374151;
    --landing-gray-300: #4b5563;
    --landing-gray-700: #d1d5db;
    --landing-gray-800: #e5e7eb;
    --landing-gray-900: #f3f4f6;
    --landing-secondary: #f9fafb;

    /* Info/Success/Warning/Danger con mejor contraste en oscuro */
    --color-info-bg: #1e3a8a;
    --color-info-border: #3b82f6;
    --color-info-text: #93c5fd;

    --color-success-bg: #064e3b;
    --color-success-border: #10b981;
    --color-success-text: #6ee7b7;

    --color-warning-bg: #78350f;
    --color-warning-border: #f59e0b;
    --color-warning-text: #fcd34d;

    --color-danger-bg: #7f1d1d;
    --color-danger-border: #ef4444;
    --color-danger-text-dark: #fca5a5;
  }

  /* Ajustar fondos gradientes del hero en modo oscuro */
  .landing-hero {
    background: linear-gradient(135deg, #1f2937 0%, #111827 50%, #1f2937 100%);
  }

  /* CTA Strip con fondo oscuro */
  .landing-cta-strip {
    background: linear-gradient(135deg, #1f2937 0%, #111827 55%, #1f2937 100%);
    border-top-color: var(--color-border);
    border-bottom-color: var(--color-border);
  }

  /* Alert boxes con fondo oscuro */
  .landing-alert,
  .landing-alert-center {
    background: var(--color-input-bg);
    border-left-color: var(--landing-danger);
    color: var(--color-text-body);
  }

  /* Footer con fondo oscuro */
  .afadir-app-footer {
    background: var(--color-input-bg);
    border-top-color: var(--color-border);
    color: var(--color-text-body);
  }

  .afadir-app-footer__links a {
    color: var(--color-text-secondary);
  }

  .afadir-app-footer__links a:hover {
    color: var(--landing-primary);
  }

  /* Dropdowns con fondo oscuro */
  .afadir-nav-dropdown {
    background: var(--color-input-bg);
    border-color: var(--color-border);
  }

  /* Cards con fondo oscuro y legibilidad mejorada */
  .afadir-card,
  .afadir-noticia-card,
  .afadir-topic-card,
  .afadir-prensa-card,
  .afadir-recursos-card,
  .afadir-aliados-card,
  .afadir-asociacion-card,
  .landing-feature-card {
    background: var(--color-input-bg);
    border-color: var(--color-border);
    color: var(--color-text-body);
  }

  /* Títulos y encabezados en cards oscuras */
  .afadir-noticia-card h3,
  .afadir-noticia-card .afadir-noticia-title,
  .afadir-topic-card h3,
  .afadir-card h2,
  .afadir-card h3,
  .afadir-card h4 {
    color: var(--color-text-heading);
  }

  /* Metadata y fechas más legibles */
  .afadir-noticia-date,
  .afadir-noticia-submeta,
  .afadir-noticia-excerpt {
    color: var(--color-text-secondary);
  }

  /* Modales con mejor contraste */
  .afadir-modal-card,
  .afadir-modal-overlay .afadir-modal {
    background: var(--color-modal-bg);
    border: 1px solid var(--color-border);
  }

  /* Inputs con fondo oscuro */
  .afadir-field input,
  .afadir-field textarea,
  .afadir-field select {
    background: var(--color-input-bg);
    border-color: var(--color-input-border);
    color: var(--color-text-body);
  }

  /* Acordeones en modo oscuro */
  .afadir-accordion-item {
    background: var(--color-input-bg);
    border-color: var(--color-border);
  }
}

/* Container */
.landing-container {
  max-width: var(--afadir-maxw);
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 768px) {
  .landing-container {
    padding: 0 16px;
  }
}

/* Hero Section */
.landing-hero {
  position: relative;
  background: var(--afadir-surface);
  padding: 32px;
  overflow: hidden;
  max-width: var(--afadir-maxw);
  margin-left: auto;
  margin-right: auto;
  border-radius: 16px;
  border: 1px solid var(--afadir-border);
  box-shadow: 0 10px 32px rgba(11, 44, 74, 0.08);
}

/* Eliminar padding del container dentro del hero */
.landing-hero .landing-container {
  padding: 0;
  max-width: none;
}

.landing-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

/* Cinta decorativa multicolor superior - igual que afadir-cmp-hero-card */
.landing-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--afadir-teal) 0%, var(--afadir-orange) 60%, var(--afadir-brand) 100%);
  z-index: 10;
}

.landing-hero-content {
  position: relative;
  z-index: 11;
  max-width: var(--afadir-maxw); /* UX-001: Aumentado de 800px → 900px para consistencia */
  margin: 0 auto;
  text-align: center;
}

.landing-badge {
  display: inline-block;
  padding: 8px 16px;
  background: var(--landing-primary);
  color: white;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.landing-hero-title {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--landing-gray-900);
  margin: 0 0 24px;
}

.landing-highlight {
  position: relative;
  color: var(--landing-primary);
  background: linear-gradient(180deg, transparent 60%, rgba(var(--landing-primary-rgb), 0.25) 60%);
  padding: 0 4px;
  border-radius: 4px;
}

.landing-hero-subtitle {
  font-size: 18px;
  line-height: 1.7;
  color: var(--landing-gray-700);
  margin: 0 0 32px;
  max-width: var(--afadir-maxw);
  margin-left: auto;
  margin-right: auto;
}

.landing-hero-meta {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0.75rem auto 0;
  color: var(--landing-gray-700);
  opacity: 0.8;
}

.landing-featured-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.landing-hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

/* Botones modernos */
.landing-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: none;
  font-family: inherit;
  min-height: 48px;
  justify-content: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.landing-btn:focus {
  outline: none;
}

.landing-btn:focus-visible {
  outline: 3px solid rgba(var(--landing-primary-rgb), 0.35);
  outline-offset: 3px;
}

.landing-btn-primary {
  background: linear-gradient(135deg, var(--landing-primary) 0%, var(--landing-primary-dark) 100%);
  /*
   * FIX (2026-01-01): Some WP themes ship global rules such as
   * `a { color: ... !important; }` that can leak into the SPA.
   * Landing primary buttons MUST always be readable on brand pink.
   */
  color: var(--color-white, #ffffff);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(var(--landing-primary-rgb), 0.28));
}

.landing-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg, 0 8px 20px rgba(var(--landing-primary-rgb), 0.36));
}

.landing-btn-primary:active {
  transform: translateY(0);
}

.landing-btn-secondary {
  background: var(--landing-primary);
  color: var(--color-white, #ffffff);
  border: 2px solid var(--landing-primary-dark);
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(17, 24, 39, 0.06));
}

.landing-btn-secondary:hover {
  background: var(--landing-primary-dark);
  border-color: var(--landing-primary-dark);
}

/* Landing button variants (used in home.js)
   - invert: solid light button on dark strip
   - muted: low-priority outline
   - whatsapp: brand green (action shortcut)
*/
.landing-btn-large {
  padding: 16px 34px;
  font-size: 18px;
  min-height: 54px;
  border-radius: 14px;
}

.landing-btn-invert {
  background: #ffffff;
  color: var(--landing-primary);
  border: 2px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.landing-btn-invert:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
}

.landing-btn-muted {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.28);
}

.landing-btn-muted:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.40);
}

/* Callouts / alerts: eliminar estilos inline y homogeneizar */
.landing-callout {
  background: rgba(var(--landing-primary-rgb), 0.05);
  border-left: 4px solid var(--landing-primary);
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 12px;
}

.landing-alert {
  background: rgba(var(--landing-danger-rgb), 0.10);
  border-left: 4px solid var(--landing-danger);
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 12px;
}

.landing-alert-center {
  max-width: var(--afadir-maxw-readable);
  margin: 3rem auto;
}

.landing-btn-whatsapp {
  background: #0A6B5C;
  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(10, 107, 92, 0.25);
}

.landing-btn-whatsapp:hover {
  background: #085446;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(8, 84, 70, 0.32);
}

.landing-btn-whatsapp span {
  color: #ffffff !important;
}

/* Trust Grid */
.landing-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 40px;
}

.landing-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: white;
  border: 1px solid var(--landing-gray-200);
  border-radius: 12px;
  transition: all 0.2s;
}

.landing-trust-item:hover {
  border-color: var(--landing-primary-light);
  box-shadow: 0 4px 12px rgba(var(--landing-primary-rgb), 0.14);
  transform: translateY(-2px);
}

.landing-trust-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.landing-trust-text strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--landing-gray-900);
  margin-bottom: 2px;
}

.landing-trust-text span {
  display: block;
  font-size: 13px;
  color: var(--landing-gray-700);
}

/* Sections */
.landing-section {
  /* UX: 64px felt too "airy"; keep sections tighter while preserving rhythm. */
  padding: 32px 0;
}

.landing-section-alt {
  background: var(--landing-gray-50);
}

.landing-section-header {
  text-align: center;
  max-width: var(--afadir-maxw); /* UX-001: Unificado de 980px → 900px */
  margin: 0 auto 36px;
}

.landing-section-title{
  max-width: var(--afadir-maxw-readable);
  font-size: clamp(32px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--landing-gray-900);
  margin: 0 auto 12px auto;
}

.landing-section-subtitle{
  max-width: var(--afadir-maxw-readable);
  font-size: 18px;
  line-height: 1.6;
  color: var(--landing-gray-700);
  margin: 0 auto;
}


/* Landing typography helpers (remove inline styles from home.js) */
.landing-lead {
  font-size: 1.1rem;
  margin: 1.5rem 0;
}

.landing-lead-strong {
  font-weight: 700;
  font-size: 1.2rem;
  margin: 2rem 0;
}

.landing-manifesto {
  font-size: 1.3rem;
  line-height: 1.6;
  font-weight: 600;
}

.landing-strong-block {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 2rem 0;
  color: var(--landing-gray-900);
}

.landing-h3-primary {
  color: var(--landing-primary);
  font-size: 1.3rem;
  margin: 2rem 0 1rem;
}

.landing-h3 {
  color: var(--landing-gray-900);
  font-size: 1.2rem;
  margin: 1.5rem 0;
}

.landing-sublead {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--landing-gray-700);
  font-weight: 600;
}

.landing-body {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--landing-gray-700);
  margin: 0;
}

.landing-quote {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--landing-gray-700);
  font-style: italic;
  margin: 1.5rem 0;
}

.landing-emphasis {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--landing-gray-900);
  font-weight: 600;
  margin: 0;
}

.landing-lead-block {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--landing-gray-700);
  margin: 2rem 0;
}

.landing-question {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--landing-gray-900);
  font-weight: 600;
  margin: 2rem 0;
}

.landing-primary-statement {
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--landing-primary);
  font-weight: 700;
  margin: 1.5rem 0;
}

.landing-center-big {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--landing-primary);
  font-weight: 700;
  margin: 2rem 0;
  text-align: center;
}

.landing-center-strong {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--landing-gray-900);
  font-weight: 700;
  margin: 2rem 0;
  text-align: center;
}

.landing-center-medium {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--landing-gray-900);
  font-weight: 600;
  margin: 2rem 0;
  text-align: center;
}

.landing-section-lead {
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--landing-gray-900);
  font-weight: 700;
  margin: 2rem 0;
}

/* Callout/alert inner text helpers */
.landing-callout-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--landing-gray-900);
}

.landing-callout-title-muted {
  color: var(--landing-gray-800);
}

.landing-callout-title-mb {
  margin-bottom: 1rem;
}

.landing-callout-text {
  font-size: 1.05rem;
  line-height: 1.8;
  margin: 1rem 0 0 0;
  color: var(--landing-gray-700);
}

.landing-callout-text-tight {
  margin-top: 0;
}

.landing-callout-manifesto {
  font-size: 1.3rem;
  line-height: 1.6;
  font-weight: 700;
  margin: 0;
  color: var(--landing-gray-900);
}

.landing-callout-manifesto-md {
  font-size: 1.2rem;
}

/* Lists */
.landing-list {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--landing-gray-700);
  margin: 1.5rem 0;
}

.landing-list-clean {
  list-style: none;
  padding: 0;
}

.landing-list-spaced {
  margin: 2rem 0;
}

.landing-list-bullets {
  padding-left: 1.1rem;
}

.landing-li-spaced {
  margin-bottom: 0.5rem;
}

/* Content cards inside text */
.landing-card-box {
  background: white;
  border: 2px solid var(--landing-gray-200);
  padding: 1.5rem;
  border-radius: 8px;
  margin: 2rem 0;
}

.landing-card-box-center {
  text-align: center;
  margin: 1.5rem 0;
}

.landing-card-title {
  font-weight: 600;
  color: var(--landing-gray-900) !important;
  margin: 0 0 1rem 0;
}

.landing-card-text {
  margin: 0;
  color: var(--landing-gray-700) !important;
}

.landing-quote-box-text {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--landing-gray-700) !important;
  margin: 0;
}

/* CTA final helpers */
.landing-cta-lead {
  font-size: 1.1rem;
  line-height: 1.8;
  margin: 1.5rem 0;
}

.landing-cta-strong {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 2rem 0;
}

.landing-cta-strong-xl {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 2rem 0;
}

.landing-cta-note {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.9);
  margin-top: 1.5rem;
}

.landing-cta-email {
  color: #ffffff;
  text-decoration: underline;
}

/* Simple spacing helpers for landing */
.landing-mt-32 { margin-top: 2rem; }
.landing-my-24 { margin: 1.5rem 0; }
.landing-my-32 { margin: 2rem 0; }
.landing-my-48 { margin: 3rem 0; }
.landing-center { text-align: center; }

/* Features Grid */
.landing-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 32px;
}

.landing-feature-card {
  padding: 40px;
  /* background: white; */
  border: 1px solid var(--landing-gray-200);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.landing-feature-card:hover {
  border-color: transparent;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}

.landing-feature-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.landing-icon-primary {
  background: linear-gradient(135deg, rgba(var(--landing-primary-rgb), 0.12) 0%, rgba(var(--landing-primary-rgb), 0.06) 100%);
}

.landing-icon-secondary {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%);
}

.landing-icon-accent {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);
}

.landing-feature-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--landing-gray-900) !important;
  margin: 0 0 12px;
}

.landing-feature-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--landing-gray-700) !important;
  margin: 0;
}

/* Steps */
.landing-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: var(--afadir-maxw); /* Ya correcto */
  margin: 0 auto;
}

.landing-step {
  display: flex;
  gap: 24px;
  padding: 28px;
  background: white;
  border: 1px solid var(--landing-gray-200);
  border-radius: 16px;
  transition: all 0.2s;
}

.landing-step:hover {
  border-color: var(--landing-primary-light);
  box-shadow: 0 8px 24px rgba(var(--landing-primary-rgb), 0.12);
}

.landing-step-number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--landing-primary) 0%, var(--landing-primary-dark) 100%);
  color: #ffffff !important;
  font-size: 22px;
  font-weight: 800;
  border-radius: 12px;
}

.landing-step-content {
  flex: 1;
}

.landing-step-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--landing-gray-900);
  margin: 0 0 8px;
}

.landing-step-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--landing-gray-700);
  margin: 0;
}

/* Links Grid */
.landing-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: var(--afadir-maxw);
  margin: 0 auto;
}

.landing-link-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: white;
  border: 2px solid var(--landing-gray-200);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s;
  color: inherit;
}

.landing-link-card:hover {
  border-color: var(--landing-primary);
  box-shadow: 0 8px 24px rgba(var(--landing-primary-rgb), 0.16);
  transform: translateX(4px);
}

.landing-link-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.landing-link-content {
  flex: 1;
}

.landing-link-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--landing-gray-900);
  margin: 0 0 4px;
}

.landing-link-text {
  font-size: 14px;
  color: var(--landing-gray-700);
  margin: 0;
}

.landing-link-arrow {
  flex-shrink: 0;
  color: var(--landing-primary);
  transition: transform 0.2s;
}

.landing-link-card:hover .landing-link-arrow {
  transform: translateX(4px);
}

/* CTA Strip (mid-page) */
.landing-cta-strip {
  padding: 44px 0;
  /* background: linear-gradient(135deg, #fff1f7 0%, #ffffff 55%, #fff1f7 100%); */
  color: var(--landing-gray-900);
  border-top: 1px solid rgba(var(--landing-primary-rgb), 0.14);
  border-bottom: 1px solid rgba(var(--landing-primary-rgb), 0.14);
}

.landing-cta-subtitle {
  font-size: 1.1rem;
  color: var(--landing-gray-700);
  margin: 0 0 18px;
}

.landing-cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* .landing-cta-note duplicate removed, see line 3329 */

/* CTA Final */
.landing-cta {
  padding: 72px 0;
  background: linear-gradient(135deg, #ffffff 0%, #fff5fa 55%, #ffffff 100%);
  color: var(--landing-gray-900);
  border-top: 1px solid rgba(var(--landing-primary-rgb), 0.12);
}

.landing-cta-content {
  text-align: center;
  max-width: var(--afadir-maxw);
  margin: 0 auto;
}

.landing-cta-title {
  font-size: clamp(32px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--landing-gray-900);
}

.landing-cta-text {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 32px;
  color: var(--landing-gray-700);
}

/* Share buttons component */
.afadir-share {
  margin: 32px 0;
  padding: 24px;
  background: var(--afadir-surface);
  border: 1px solid var(--afadir-border);
  border-radius: 12px;
}

.afadir-share-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--afadir-text);
  margin-bottom: 16px;
}

.afadir-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.afadir-share-btn,
.afadir-share-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  font-size: 24px;
  background: var(--afadir-surface);
  border: 1px solid var(--afadir-border);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.afadir-share-btn:hover,
.afadir-share-copy:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--landing-primary);
}

.afadir-share-email {
  order: 1;
}

.afadir-share-copy {
  order: 2;
}

.afadir-share-whatsapp {
  order: 3;
}

.afadir-share-x {
  order: 4;
}

.afadir-share-linkedin {
  order: 5;
}

.afadir-share-facebook {
  order: 6;
}

.afadir-share-instagram {
  order: 7;
}

.landing-cta .landing-btn-primary {
  /* On light CTA background, keep primary button consistent */
  background: linear-gradient(135deg, var(--landing-primary) 0%, var(--landing-primary-dark) 100%);
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(var(--landing-primary-rgb), 0.22);
}

.landing-cta .landing-btn-primary:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Responsive */
@media (max-width: 768px) {
  /* Eliminar cualquier padding del root en móvil */
  #afadir-app-root {
    padding: 0 !important;
  }

  .landing-hero {
    padding: 20px 12px; /* Padding mínimo en móvil para máximo ancho */
    max-width: 100%; /* Ancho completo en móvil */
    margin: 0; /* Sin márgenes en móvil */
  }

  .landing-hero-cta {
    flex-direction: row;
    width: 100%;
    gap: 8px;
  }

  .landing-btn {
    width: auto;
    justify-content: center;
    padding: 12px 16px;
    font-size: 14px;
    flex: 1;
    min-width: 0;
  }

  .landing-btn-primary,
  .landing-btn-secondary {
    color: #ffffff !important;
  }

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

  .landing-trust-grid {
    grid-template-columns: 1fr;
  }

  .landing-section {
    padding: 40px 0; /* Reducido de 60px → 40px para móvil */
  }

  .landing-features-grid {
    grid-template-columns: 1fr;
  }

  .landing-step {
    flex-direction: column;
    text-align: center;
  }

  .landing-step-number {
    margin: 0 auto;
  }

  .landing-links-grid {
    grid-template-columns: 1fr;
  }

  .landing-link-card:hover {
    transform: none;
  }

  /* Share buttons en móvil: email y copiar primero, luego redes sociales */
  .afadir-share-actions {
    justify-content: flex-start;
  }

  .afadir-share-email {
    order: 1;
  }

  .afadir-share-copy {
    order: 2;
  }

  /* Segunda línea: redes sociales */
  .afadir-share-whatsapp {
    order: 10;
    flex-basis: 100%;
    width: auto;
  }

  .afadir-share-x {
    order: 11;
  }

  .afadir-share-linkedin {
    order: 12;
  }

  .afadir-share-facebook {
    order: 13;
  }

  .afadir-share-instagram {
    order: 14;
  }
}

@media (max-width: 480px) {
  .landing-container {
    padding: 0 16px;
  }

  .landing-hero-title {
    font-size: 32px;
  }

  .landing-section-title{
  max-width: var(--afadir-maxw-readable);
  margin-left: auto;
  margin-right: auto;
    font-size: 28px;
  }

  .landing-feature-card,
  .landing-step {
    padding: 24px;
  }
}

/*
 * WPForms overrides were moved to:
 *   public/app/afadir-wpforms.css
 * Keep this file focused on the SPA design system.
 acknowledgment: INC-2.2.195
 */

/* INC-63.1: errores por campo */
#afadir-app-root .afadir-field-error{font-size:0.9em;margin-top:6px;line-height:1.2;}


/* INC-64/64.1 — Members: profile completion badge (scoped to SPA root) */
#afadir-app-root .afadir-badge {
  border-radius: 6px;
  padding: .75rem 1rem;
  margin: .5rem 0 0;
  display: inline-block;
  font-weight: 600;
}
#afadir-app-root .afadir-badge.success { background: rgba(0,180,0,.10); }
#afadir-app-root .afadir-badge.warn { background: rgba(240,160,0,.12); }
#afadir-app-root .afadir-checklist { margin: .5rem 0 0 0; padding-left: 1rem; }
#afadir-app-root .afadir-btn.small { font-size: .9rem; padding: .4rem .7rem; }

/* INC-2.2.88 — Semantic tokens consolidated at #afadir-app-root line 80 */
/* #afadir-app-root duplicate removed */

/* Small utility layer (scoped to SPA root) */
#afadir-app-root .af-u-center { text-align: center; }
/* UX-001: Jerarquía de anchos coherente */
#afadir-app-root .af-u-maxw-800 { max-width: var(--afadir-maxw-readable); margin: 0 auto; } /* Ancho de lectura unificado */
#afadir-app-root .af-u-maxw-1200 { max-width: 1300px; margin: 0 auto; }
#afadir-app-root .af-u-my-32 { margin: 2rem 0; }
#afadir-app-root .af-u-mb-24 { margin-bottom: 24px; }
#afadir-app-root .af-u-mb-16 { margin-bottom: 16px; }
#afadir-app-root .af-u-m0 { margin: 0; }
#afadir-app-root .af-u-mt-24 { margin-top: 24px; }
#afadir-app-root .af-u-flex { display: flex; }
#afadir-app-root .af-u-between { justify-content: space-between; }
#afadir-app-root .af-u-justify-center { justify-content: center; }
#afadir-app-root .af-u-center-items { align-items: center; }
#afadir-app-root .af-u-start-items { align-items: flex-start; }
#afadir-app-root .af-u-gap-8 { gap: 8px; }
#afadir-app-root .af-u-gap-16 { gap: 16px; }

/* Semantic blocks replacing recurring inline styles */
#afadir-app-root .af-callout {
  background: #fff;
  border: 2px solid #e9ecef;
  padding: 1.5rem;
  border-radius: 8px;
}
#afadir-app-root .af-callout.center { text-align: center; }

#afadir-app-root .af-card-info {
  background: var(--afadir-color-info-bg);
  border-left: 4px solid var(--afadir-color-info-border);
}
#afadir-app-root .af-card-warn {
  background: var(--afadir-color-warn-bg);
  border-left: 4px solid var(--afadir-color-warn-border);
}

#afadir-app-root .af-card-accent { border-left: 4px solid var(--afadir-color-accent); }

#afadir-app-root .af-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
#afadir-app-root .af-pill.accent { background: rgba(var(--afadir-color-accent-rgb), .12); color: var(--afadir-color-accent); }

#afadir-app-root .af-ally-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  background: #fff;
}

#afadir-app-root .af-ally-placeholder {
  width: 80px;
  height: 80px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
}

#afadir-app-root a.af-link { color: var(--afadir-color-link); text-decoration: none; }
#afadir-app-root a.af-link:hover { text-decoration: underline; }

#afadir-app-root .af-text-danger { color: var(--afadir-color-danger); }

/* .af-ally-placeholder duplicate removed, see line 3739 */

/* INC-2.2.88: small helpers for admin cards */
#afadir-app-root .af-u-mt-8 { margin-top: 8px; }
#afadir-app-root .af-btn-pad-md { padding: 8px 16px; }
#afadir-app-root .af-h3 { font-size: 18px; margin: 0 0 8px 0; }
#afadir-app-root .af-icon-lg { font-size: 32px; }
#afadir-app-root .af-u-mt8-0 { margin: 8px 0 0 0; }

/* INC-2.2.88: Advanced profile semantic styling */
#afadir-app-root .af-page-pad { padding: 20px; }
#afadir-app-root .af-card-info .af-card-title { color: #1e40af; }
#afadir-app-root .af-card-info .af-card-text { color: #1e3a8a; }
#afadir-app-root .af-card-warn, #afadir-app-root .af-card-warn * { color: #92400e; }
#afadir-app-root .af-card-warn a { color: inherit; font-weight: 600; }

/* INC-2.2.88: Typography helpers to remove inline styles */
#afadir-app-root .af-h2-sm { margin: 0 0 12px 0; font-size: 18px; }
#afadir-app-root .af-p { margin: 0 0 12px 0; line-height: 1.6; }
#afadir-app-root .af-p:last-child { margin-bottom: 0; }
#afadir-app-root .af-note { margin: 0; font-size: 14px; }
#afadir-app-root .af-note + .af-note { margin-top: 8px; }

/* INC-2.2.90: AUTOGENERATED INLINE STYLE MIGRATION */
/* This block is generated from former inline styles to keep visual parity while removing inline="style". */
/* DO NOT hand-edit individual rules; regenerate via build script if needed. */


/* ============================================
   AFADIR UTILITIES (semantic, replaces frequent inline-hash classes)
   ============================================ */

#afadir-app-root .afadir-u-m-0 {
  margin: 0;
}

#afadir-app-root .afadir-u-mb-20 {
  margin: 0 0 20px 0;
}

#afadir-app-root .afadir-u-title-strong {
  color: var(--af-color-text, #212529);
  margin: 0 0 12px 0;
}

#afadir-app-root .afadir-u-cursor-pointer {
  cursor: pointer;
}

#afadir-app-root .afadir-u-full-jc-center {
  justify-content: center;
  width: 100%;
}

#afadir-app-root .afadir-u-icon-xl {
  display: block;
  font-size: 3rem;
  margin-bottom: 1rem;
}

#afadir-app-root .afadir-u-hidden {
  display: none;
}

#afadir-app-root .afadir-u-mb-32 {
  margin-bottom: 32px;
}

#afadir-app-root .afadir-u-mb-20only {
  margin-bottom: 20px;
}

#afadir-app-root .afadir-u-input {
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 15px;
  padding: 10px 12px;
  width: 100%;
}

#afadir-app-root .afadir-u-flex-wrap-gap-12 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#afadir-app-root .afadir-u-mt-12 {
  margin-top: 12px;
}

#afadir-app-root .afadir-u-grid-auto-280 {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

#afadir-app-root .afadir-u-mb-16 {
  margin: 0 0 16px 0;
}

#afadir-app-root .afadir-u-minw-220 {
  min-width: 220px;
}

#afadir-app-root .afadir-u-fw-normal {
  font-weight: normal;
}

/*
 * Contenedor específico para iframes (estatutos, formularios, etc.)
 * Elimina TODO margin y padding para evitar desplazamiento horizontal
 * FIX (2026-01-18): Clase dedicada para iframes embebidos
 */
#afadir-app-root .afadir-iframe-container {
  margin: 0 !important;
  padding: 0 !important;
  border: none;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

#afadir-app-root .afadir-u-iframe-full {
  border: none;
  display: block;
  min-height: 1000px;
  width: 100%;
  margin: 0;
  padding: 0;
}

/*
 * FIX (2026-01-02): Reduce spacing above iframe containers.
 * After hiding page titles, iframes had excessive top margin.
 * FIX (2026-01-17): Remove ALL margins and padding to prevent horizontal displacement.
 */
#afadir-app-root .afadir-card:has(iframe) {
  margin: 0;
  padding: 0;
}

/* Also reduce spacing on the hero card that precedes iframe sections */
#afadir-app-root .afadir-cmp-hero-card + .afadir-card:has(iframe) {
  margin-top: -12px;
}

#afadir-app-root .afadir-u-mb-8 {
  margin: 0 0 8px 0;
  font-size: var(--text-base, 1rem);
  color: var(--af-color-text);
  font-weight: 500;
}

#afadir-app-root .afadir-u-mt-6 {
  margin-top: 6px;
}

#afadir-app-root .afadir-u-label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

#afadir-app-root .afadir-u-no-underline {
  text-decoration: none;
}

#afadir-app-root .afadir-u-overflow-hidden-p0 {
  overflow: hidden;
  padding: 0;
  position: relative;
  max-width: 100%;
  /* No usar márgenes fijos: rompe iframes/embeds en móvil */
  margin-left: 0;
}

#afadir-app-root .afadir-u-label-sm {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

#afadir-app-root .afadir-u-mb-24 {
  margin-bottom: 24px;
}

#afadir-app-root .afadir-u-text-left {
  text-align: left;
}

#afadir-app-root .afadir-u-my-4 {
  margin: 4px 0;
}

/* ============================================================
   AFADIR Component & Semantic Classes (replacing inline-hash)
   ============================================================ */

#afadir-app-root .afadir-container { max-width: 1300px; margin: 0 auto; padding: 20px; }
#afadir-app-root .afadir-container--narrow { max-width: 480px; margin: 60px auto; padding: 0 20px; }
#afadir-app-root .afadir-container--xs-center { max-width: 500px; margin: 40px auto; text-align: center; }

#afadir-app-root .afadir-section-kicker {
  margin: 0 0 16px 0;
  color: var(--af-color-muted);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#afadir-app-root .afadir-section-kicker .dashicons {
  font-size: 24px;
  width: 24px;
  height: 24px;
}

#afadir-app-root .afadir-section-kicker--sm {
  margin: 0 0 12px 0;
  color: var(--af-color-muted);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Dark mode fixes for section kicker */
@media (prefers-color-scheme: dark) {
  #afadir-app-root .afadir-section-kicker,
  #afadir-app-root .afadir-section-kicker--sm {
    color: var(--af-color-text-muted, #9ca3af);
  }
}

#afadir-app-root .afadir-section-title {
  margin: 0 0 12px 0;
  font-size: 28px;
  color: var(--af-color-text, #1f2937);
}

/* Dark mode fix for section title */
@media (prefers-color-scheme: dark) {
  #afadir-app-root .afadir-section-title {
    color: var(--af-color-text, #f9fafb);
  }
}

/* Textarea: deshabilitar scroll vertical automático */
.afadir-section-text .wpforms-field-textarea textarea,
.wpforms-field.wpforms-field-textarea.afadir-section-text textarea,
.wpforms-field-textarea textarea {
  overflow-y: hidden;
  resize: vertical;
  min-height: 80px;
}
#afadir-app-root .afadir-hero-title { margin: 0 0 12px 0; font-size: 32px; color: #ffffff; font-weight: 700; }
#afadir-app-root .afadir-lead { margin: 0; font-size: 16px; opacity: 0.95; }

#afadir-app-root .afadir-subtitle-brand { margin: 0 0 8px 0; color: var(--afadir-brand); font-size: 18px; }
#afadir-app-root .afadir-subtitle-brandlight { margin: 0 0 8px 0; color: var(--afadir-brand-light); font-size: 18px; }
#afadir-app-root .afadir-subtitle-success { font-size: 1.125rem; margin: 0 0 20px 0; color: #064e3b; }

#afadir-app-root .afadir-link-strong { color: #2271b1; font-weight: 600; }
#afadir-app-root .afadir-empty-state { text-align: center; padding: 40px; color: var(--af-color-muted); }
#afadir-app-root .afadir-empty-state--danger { color: #dc3545; }

#afadir-app-root .afadir-center-block { text-align: center; margin-bottom: 32px; }
#afadir-app-root .afadir-u-nowrap { white-space: nowrap; }
/* .afadir-u-mb-24 duplicate removed, see line 3938 */

/* Cards with top accent (nav cards) */
#afadir-app-root .afadir-cmp-nav-card { cursor: pointer; transition: transform 0.2s; border-top: 4px solid transparent; }
#afadir-app-root .afadir-cmp-nav-card:hover { transform: translateY(-2px); }
#afadir-app-root .afadir-cmp-nav-card--success { border-top-color: #10b981; }
#afadir-app-root .afadir-cmp-nav-card--warning { border-top-color: #f59e0b; }
#afadir-app-root .afadir-cmp-nav-card--brand { border-top-color: var(--afadir-brand); }
#afadir-app-root .afadir-cmp-nav-card--violet { border-top-color: #8b5cf6; }
#afadir-app-root .afadir-cmp-nav-card--info { border-top-color: #06b6d4; }
#afadir-app-root .afadir-cmp-nav-card--indigo { border-top-color: #667eea; }

/*
 * Landing / content cards
 * Old version used full-surface purple gradients and centered paragraphs.
 * Result: amateur look, low contrast, hard-to-read text blocks.
 * Fix: professional white-surface cards with subtle accents derived from the logo.
 */

#afadir-app-root .afadir-cmp-hero-card,
#afadir-app-root .afadir-cmp-help-card {
  max-width: var(--afadir-maxw);
  margin-left: auto;
  margin-right: auto;
  background: var(--afadir-surface);
  border: 1px solid var(--afadir-border);
  border-radius: 16px;
  padding: 32px;
  color: var(--afadir-text);
  box-shadow: 0 10px 32px rgba(11, 44, 74, 0.08);
  text-align: left;
}

#afadir-app-root .afadir-cmp-hero-card {
  position: relative;
  overflow: hidden;
}

/* Brand ribbon (subtle): teal → orange with low opacity */
#afadir-app-root .afadir-cmp-hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--afadir-teal) 0%, var(--afadir-orange) 60%, var(--afadir-brand) 100%);
}

/* Landing typography inside cards */
#afadir-app-root .afadir-cmp-hero-card h1,
#afadir-app-root .afadir-cmp-hero-card h2,
#afadir-app-root .afadir-cmp-help-card h2 {
  margin: 0 0 14px 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  /* color: var(--afadir-navy); */
}

#afadir-app-root .afadir-cmp-help-card h1 {
  margin: 0 0 14px 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0b2c4a;
}

#afadir-app-root .afadir-cmp-hero-card h3,
#afadir-app-root .afadir-cmp-help-card h3 {
  margin: 18px 0 10px 0;
  font-weight: 700;
  color: var(--afadir-text);
}

#afadir-app-root .afadir-cmp-hero-card p,
#afadir-app-root .afadir-cmp-help-card p,
#afadir-app-root .afadir-cmp-hero-card li,
#afadir-app-root .afadir-cmp-help-card li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--afadir-muted);
}

#afadir-app-root .afadir-cmp-hero-card strong,
#afadir-app-root .afadir-cmp-help-card strong {
  color: var(--afadir-text);
}

#afadir-app-root .afadir-cmp-hero-card ul,
#afadir-app-root .afadir-cmp-help-card ul {
  margin: 0 0 16px 0;
  padding-left: 20px;
  list-style: disc;
}

#afadir-app-root .afadir-cmp-hero-card li,
#afadir-app-root .afadir-cmp-help-card li {
  margin: 0 0 6px 0;
}

#afadir-app-root .afadir-cmp-help-card {
  margin-top: 28px;
}

/* Divider top */
#afadir-app-root .afadir-cmp-divider-top {
  max-width: var(--afadir-maxw);
  margin: 28px auto 0 auto;
  padding-top: 28px;
  border-top: 1px solid var(--afadir-border);
}

/* Callouts (subtle background + clear left accent) */
#afadir-app-root .afadir-cmp-callout {
  background: var(--afadir-surface-2);
  border: 1px solid var(--afadir-border);
  border-left: 6px solid var(--afadir-teal);
  padding: 20px;
  border-radius: 12px;
  margin: 18px 0 26px 0;
}

#afadir-app-root .afadir-cmp-callout--brand {
  border-left-color: var(--afadir-brand);
  background: linear-gradient(180deg, rgba(var(--afadir-brand-rgb), 0.06) 0%, rgba(var(--afadir-brand-rgb), 0.02) 100%);
}

#afadir-app-root .afadir-cmp-callout--success {
  border-left-color: var(--afadir-green);
  background: linear-gradient(180deg, rgba(123, 183, 59, 0.10) 0%, rgba(123, 183, 59, 0.03) 100%);
}

#afadir-app-root .afadir-cmp-callout--warning {
  border-left-color: var(--afadir-orange);
  background: linear-gradient(180deg, rgba(234, 128, 53, 0.10) 0%, rgba(234, 128, 53, 0.03) 100%);
}

#afadir-app-root .afadir-cmp-callout--danger {
  border-left-color: #dc2626;
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.08) 0%, rgba(220, 38, 38, 0.02) 100%);
}

#afadir-app-root .afadir-cmp-callout--info {
  border-left-color: var(--afadir-teal);
}

/* CTA row for landing blocks (buttons) */
#afadir-app-root .afadir-landing-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 18px;
}

@media (max-width: 768px) {
  #afadir-app-root .afadir-landing-cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  #afadir-app-root .afadir-landing-cta-row .afadir-btn {
    width: 100%;
    justify-content: center;
  }

  /* Hero card: reducir padding en móvil (especialmente Android) */
  #afadir-app-root .afadir-cmp-hero-card,
  #afadir-app-root .afadir-cmp-help-card {
    padding: 16px !important;
    margin: 0 0 12px 0 !important;
    border-radius: 12px !important;
  }

  /* FIX ANDROID: Eliminar cualquier margin/padding residual superior */
  #afadir-app-root .afadir-page > .afadir-cmp-hero-card:first-child {
    margin-top: 0 !important;
    padding-top: 16px !important;
  }

  #afadir-app-root .afadir-cmp-hero-card h1 {
    font-size: 1.5rem !important;
    margin-bottom: 8px !important;
  }

  #afadir-app-root .afadir-cmp-hero-card p,
  #afadir-app-root .afadir-cmp-hero-card .afadir-lead {
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
  }

  /* Cards generales: reducir padding en móvil */
  #afadir-app-root .afadir-card {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }
}

#afadir-app-root .afadir-cmp-callout--indigo {
  border-left-color: var(--afadir-navy);
}

/* Buttons */
#afadir-app-root .afadir-btn--lg { font-size: 1.1rem; padding: 1rem 2rem; display: inline-flex; gap: 0.5rem; align-items: center; cursor: pointer; }
#afadir-app-root .afadir-btn--success-solid { background: #0ea770 !important; border-color: #0ea770 !important; color: #fff !important; }

/* ============================================================
 * PRESS SCREEN - Dossier de prensa
 * ============================================================ */
#afadir-app-root .afadir-press-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

#afadir-app-root .afadir-press-card {
  position: relative;
}

#afadir-app-root .afadir-press-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

#afadir-app-root .afadir-press-date {
  font-size: 0.85rem;
  color: var(--afadir-gray-text);
  font-weight: 500;
}

#afadir-app-root .afadir-press-tag {
  font-size: 0.8rem;
  padding: 4px 10px;
  background: var(--afadir-brand);
  color: #fff;
  border-radius: 4px;
  font-weight: 500;
}

#afadir-app-root .afadir-press-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

#afadir-app-root .afadir-press-source {
  font-size: 0.9rem;
  color: var(--afadir-gray-text);
  font-style: italic;
}

#afadir-app-root .afadir-press-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

#afadir-app-root .afadir-press-filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#afadir-app-root .afadir-press-filter-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--afadir-gray-text);
}

#afadir-app-root .afadir-press-filter-input,
#afadir-app-root .afadir-press-filter-select {
  padding: 10px 14px;
  border: 2px solid var(--afadir-border);
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s;
  background: #fff;
}

#afadir-app-root .afadir-press-filter-input:focus,
#afadir-app-root .afadir-press-filter-select:focus {
  outline: none;
  border-color: var(--afadir-brand);
}

#afadir-app-root .afadir-press-results-count {
  margin-top: 16px;
  font-size: 0.95rem;
  color: var(--afadir-gray-text);
}

#afadir-app-root .afadir-press-year-title {
  color: var(--afadir-brand);
  padding-bottom: 12px;
  border-bottom: 3px solid var(--afadir-brand);
  margin-bottom: 24px;
}

/* ============================================================
 * ALLIES SCREEN - Red de Asociaciones
 * ============================================================ */
#afadir-app-root .afadir-allies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

#afadir-app-root .afadir-ally-card {
  border: 1px solid var(--af-color-border);
  border-radius: 8px;
  padding: 24px;
  transition: box-shadow 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
}

#afadir-app-root .afadir-ally-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

#afadir-app-root .afadir-ally-logo {
  text-align: center;
  margin-bottom: 16px;
}

#afadir-app-root .afadir-ally-logo-img {
  max-width: 150px;
  max-height: 80px;
  object-fit: contain;
}

#afadir-app-root .afadir-ally-scope {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--afadir-brand);
  font-weight: 600;
  margin: 8px 0;
  padding: 4px 10px;
  background: rgba(0, 123, 255, 0.08);
  border-radius: 4px;
}

/* Loading state */
#afadir-app-root .afadir-loading-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--afadir-gray-text);
  font-size: 1.1rem;
}

/* Filters row (press/resources) */
#afadir-app-root .afadir-filters-row{
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}

#afadir-app-root .afadir-field-grow{
  flex: 1 1 320px;
  min-width: 260px;
}

#afadir-app-root .afadir-toggle{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  background: rgba(255,255,255,0.6);
}

#afadir-app-root .afadir-toggle input[type="checkbox"]{
  transform: scale(1.05);
}

/* INC-2.2.106: Destacados (frontend) */
#afadir-app-root .afadir-featured-section{
  margin: 18px 0 26px 0;
  padding: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.6);
}

#afadir-app-root .afadir-featured-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  #afadir-app-root .afadir-press-grid,
  #afadir-app-root .afadir-allies-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #afadir-app-root .afadir-press-filters-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #afadir-app-root .afadir-press-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================================
   INC-2.2.159: Cookie banner + WPForms button + overflow fixes
   ============================================================================ */

/*
 * Prevent global horizontal scrolling caused by wide banners/popup components.
 * Keep horizontal scrolling only inside dedicated containers (e.g., .afadir-nav).
 */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/*
 * Aplicar los colores base a todo el documento. Para que el modo oscuro surta efecto,
 * es necesario que el body utilice los tokens de color definidos en el diseño.
 */
html.afadir-app-html body {
  background-color: var(--af-color-bg);
  color: var(--af-color-text);
}

/* #afadir-app-root duplicate removed, see line 80 */

/*
 * INC-2.2.172: Generic AFADIR SPA pages (/?screen=...) need the same theme resets.
 */
html.afadir-app-html {
    margin-top: 0 !important;
}
html.afadir-app-html #wpadminbar {
    display: none !important;
}
/* Sticky breaks when any ancestor sets overflow != visible. Keep SPA pages clean. */
html.afadir-app-html,
html.afadir-app-html body {
    overflow-x: visible !important;
}

body.afadir-app-page.separate-containers .comments-area,
body.afadir-app-page.separate-containers .inside-article,
body.afadir-app-page.separate-containers .page-header,
body.afadir-app-page.separate-containers .paging-navigation {
    padding: 0px !important;
}

body.afadir-app-page .entry-header,
body.afadir-app-page .page-header {
    display: none !important;
}

/* Keep only the SPA root + the SPA footer if present. */
body.afadir-app-page .entry-content > *:not(#afadir-app-root):not(.afadir-app-footer) {
    display: none !important;
}

/* Neutralize common theme wrappers that add padding/margins/max-width. */
body.afadir-app-page .site-content,
body.afadir-app-page .content-area,
body.afadir-app-page .site-main,
body.afadir-app-page .inside-article,
body.afadir-app-page .entry-content,
body.afadir-app-page .entry-content-wrap,
body.afadir-app-page .inside-page {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* Hide theme chrome (header/nav/footer) on SPA pages. */
body.afadir-app-page .site-header,
body.afadir-app-page #masthead,
body.afadir-app-page .inside-header,
body.afadir-app-page .main-navigation,
body.afadir-app-page #site-navigation,
body.afadir-app-page .wp-block-navigation,
body.afadir-app-page .site-footer,
body.afadir-app-page #colophon {
    display: none !important;
}

/* WPForms overrides moved to public/app/afadir-wpforms.css (INC-2.2.195). */

/*
 * Cookie banners (various plugins) sometimes render wider than the viewport or with non-wrapping rows,
 * forcing horizontal scroll and hiding text behind the viewport.
 * Conservative, scoped fixes to common selectors.
 */
body.afadir-managed-page #cookie-notice,
body.afadir-managed-page .cookie-notice-container,
body.afadir-managed-page .cookie-notice,
body.afadir-managed-page .cookie-law-info-bar,
body.afadir-managed-page .cli-bar-container,
body.afadir-managed-page .cmplz-cookiebanner,
body.afadir-portal-page  #cookie-notice,
body.afadir-portal-page  .cookie-notice-container,
body.afadir-portal-page  .cookie-notice,
body.afadir-portal-page  .cookie-law-info-bar,
body.afadir-portal-page  .cli-bar-container,
body.afadir-portal-page  .cmplz-cookiebanner {
  max-width: calc(100vw - 24px) !important;
  width: auto !important;
  box-sizing: border-box !important;
  left: 12px !important;
  right: 12px !important;
}

body.afadir-managed-page .cookie-notice-container *,
body.afadir-managed-page .cmplz-cookiebanner *,
body.afadir-portal-page  .cookie-notice-container *,
body.afadir-portal-page  .cmplz-cookiebanner * {
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: anywhere;
}

body.afadir-managed-page .cookie-notice-container .cn-buttons-container,
body.afadir-managed-page .cookie-notice-container .cn-buttons,
body.afadir-managed-page .cmplz-cookiebanner .cmplz-buttons,
body.afadir-managed-page .cli-bar-container .cli-bar-buttons,
body.afadir-portal-page  .cookie-notice-container .cn-buttons-container,
body.afadir-portal-page  .cookie-notice-container .cn-buttons,
body.afadir-portal-page  .cmplz-cookiebanner .cmplz-buttons,
body.afadir-portal-page  .cli-bar-container .cli-bar-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center;
  justify-content: flex-start !important;
}

body.afadir-managed-page .cookie-notice-container .cn-text-container,
body.afadir-managed-page .cmplz-cookiebanner .cmplz-message,
body.afadir-managed-page .cli-bar-container .cli-bar-message,
body.afadir-portal-page  .cookie-notice-container .cn-text-container,
body.afadir-portal-page  .cmplz-cookiebanner .cmplz-message,
body.afadir-portal-page  .cli-bar-container .cli-bar-message {
  max-width: 100%;
  white-space: normal !important;
}

/* ============================================================================
   SPA FOOTER (INC-2.2.172)
   ============================================================================ */

.afadir-app-footer {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    border-top: 1px solid var(--af-color-border, #e5e7eb);
    background: var(--af-color-surface, #ffffff);
    box-shadow: var(--shadow-xs, 0 -1px 3px rgba(0, 0, 0, 0.05));
    width: 100%;
    margin: 0;
    padding: 18px 16px 28px;
}

.afadir-app-footer__inner {
    max-width: var(--afadir-maxw, 1100px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
    color: var(--af-color-text);
    font-size: 14px;
    line-height: 1.4;
}

.afadir-app-footer__links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.afadir-app-footer__links a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.afadir-app-footer__links a:hover,
.afadir-app-footer__links a:focus {
    text-decoration-thickness: 2px;
}

@media (min-width: 768px) {
    .afadir-app-footer {
        padding: 18px 24px 28px;
    }
    .afadir-app-footer__inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
    .afadir-app-footer__links {
        justify-content: flex-end;
    }
}

/* =========================================================
   AFADIR – Single templates (SEO Phase 2)
   Base styles for plugin-provided single-* templates.
   ========================================================= */

.afadir-single {
    max-width: 980px;
    margin: 0 auto;
    padding: var(--space-4, 1rem) var(--space-4, 1rem);
    background: var(--af-color-bg, #ffffff);
    color: var(--af-color-text, #111827);
}

.afadir-single-header {
    margin-bottom: var(--space-6, 1.5rem);
}

.afadir-single-header__media {
    margin-bottom: var(--space-4, 1rem);
}

.afadir-single-header__thumb {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg, 0.75rem);
    display: block;
}

.afadir-single-header__title {
    margin: 0;
    font-size: var(--text-3xl, 1.875rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--af-color-text, var(--color-text, #1d2327));
}

.afadir-single-header__subtitle {
    margin: var(--space-3, 0.75rem) 0 0;
    font-size: var(--text-lg, 1.125rem);
    color: var(--af-color-muted, var(--color-text-muted, #6b7280));
    font-weight: 400;
}

.afadir-single-header__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  margin-top: var(--space-2, 0.5rem);
}


.afadir-single-header__meta {
    margin: var(--space-3, 0.75rem) 0 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--af-color-muted, var(--color-neutral-500, #6b7280));
}

.afadir-single__content {
    margin-top: var(--space-6, 1.5rem);
}

.afadir-single-excerpt {
    max-width: 720px;
    margin: 0 auto;
    color: var(--af-color-text, var(--color-neutral-600, #4b5563));
    font-size: var(--text-lg, 1.125rem);
    line-height: 1.75;
}

.afadir-single-actions {
    max-width: 720px;
    margin: var(--space-6, 1.5rem) auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
}

@media (max-width: 768px) {
    .afadir-single-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .afadir-single-actions .afadir-btn,
    .afadir-single-actions .afadir-btn-primary,
    .afadir-single-actions .afadir-btn-secondary,
    .afadir-single-actions .afadir-btn-tertiary,
    .afadir-single-actions .afadir-btn--ghost {
        width: 100%;
        justify-content: center;
    }
}

/* Make WP editor content look uniform (avoid “each post a different layout”). */
.afadir-single__content > * {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.afadir-single__content > * + * {
    margin-top: var(--space-4, 1rem);
}

.afadir-single__content h2,
.afadir-single__content h3 {
    margin-top: var(--space-6, 1.5rem);
    font-weight: 600;
    color: var(--af-color-text, var(--color-text, #1d2327));
}

.afadir-single__content figure {
    margin: var(--space-5, 1.25rem) auto;
}

.afadir-single__content figure img,
.afadir-single__content img {
    border-radius: var(--radius-lg, 0.75rem);
}

.afadir-single__content a {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--afadir-brand);
}

.afadir-single__content a:hover {
    color: var(--afadir-brand-dark);
}

.afadir-single__content img {
    max-width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .afadir-single {
        padding: var(--space-8, 2rem) var(--space-5, 1.25rem);
    }
}

/* ------------------------------------------------------------------ */
/* Temas (Tags)                                                        */
/* ------------------------------------------------------------------ */

.afadir-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.afadir-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  text-decoration:none;
  font-size:13px;
  line-height:1;
  background:#fff;
}

.afadir-chip:hover{
  border-color: rgba(0,0,0,.18);
  text-decoration:none;
}

.afadir-topic-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
  margin-top:16px;
}

.afadir-topic-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:14px;
  background:#fff;
}

.afadir-topic-meta{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:8px;
}

.afadir-topic-type{
  font-size:12px;
  opacity:.75;
}

.afadir-topic-date{
  font-size:12px;
  opacity:.75;
}

.afadir-topic-title{
  margin:0 0 8px 0;
}

.afadir-topic-title a{ text-decoration:none; }

/* Breadcrumb navigation component */
.afadir-breadcrumb {
  font-size: 0.875rem;
  margin: 0 0 1rem;
  position: relative;
  z-index: 11;
  padding-top: 8px;
}

@media (max-width: 768px) {
  .afadir-breadcrumb {
    font-size: 0.8125rem;
    padding-top: 12px;
    margin-bottom: 1.25rem;
  }
}
.afadir-breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.afadir-breadcrumb li {
  display: flex;
  align-items: center;
  color: inherit;
}
.afadir-breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 0.5rem;
  color: var(--af-color-muted);
}
.afadir-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.afadir-breadcrumb a:hover {
  text-decoration: underline;
}

/* ============================================================================
   GROUP LANDING PAGES (INC-2.2.263)
   Landing pages para grupos de navegación con cards clickeables
   ========================================================================= */

.afadir-group-landing {
  max-width: var(--afadir-maxw, 1120px);
  margin: 0 auto;
  padding: var(--afadir-spacing-lg, 32px) var(--afadir-spacing-md, 16px);
}

.afadir-group-landing-header {
  text-align: center;
  margin-bottom: var(--afadir-spacing-xl, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--afadir-spacing-sm, 12px);
}

.afadir-group-landing-icon {
  font-size: 48px;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--afadir-brand, #667eea);
  opacity: 0.9;
}

.afadir-group-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--afadir-spacing-md, 16px);
  margin-top: var(--afadir-spacing-lg, 32px);
}

.afadir-group-card {
  background: var(--af-color-surface, #ffffff);
  border: 1px solid var(--af-color-border, #e5e7eb);
  border-radius: var(--afadir-radius-md, 8px);
  padding: var(--afadir-spacing-lg, 24px);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: var(--afadir-spacing-sm, 12px);
  position: relative;
  overflow: hidden;
}

.afadir-group-card:hover,
.afadir-group-card:focus {
  border-color: var(--afadir-brand, #667eea);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
  transform: translateY(-2px);
  outline: none;
}

.afadir-group-card:active {
  transform: translateY(0);
}

.afadir-group-card-header {
  display: flex;
  align-items: center;
  gap: var(--afadir-spacing-sm, 12px);
}

.afadir-card-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--afadir-brand, #667eea);
  background: var(--af-color-surface-secondary, #f3f4f6);
  border-radius: var(--afadir-radius-sm, 6px);
  flex-shrink: 0;
}

.afadir-group-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--af-color-text, #1f2937);
  line-height: 1.3;
}

.afadir-group-card-desc {
  margin: 0;
  font-size: 14px;
  color: var(--af-color-muted, #6b7280);
  line-height: 1.5;
  flex-grow: 1;
}

.afadir-group-card-arrow {
  align-self: flex-end;
  font-size: 20px;
  color: var(--afadir-brand, #667eea);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.afadir-group-card:hover .afadir-group-card-arrow,
.afadir-group-card:focus .afadir-group-card-arrow {
  opacity: 1;
  transform: translateX(4px);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .afadir-group-card {
    background: var(--af-color-surface, #1f2937);
    border-color: var(--af-color-border, #374151);
  }

  .afadir-group-card:hover,
  .afadir-group-card:focus {
    border-color: var(--afadir-brand, #818cf8);
    box-shadow: 0 4px 12px rgba(129, 140, 248, 0.2);
  }

  .afadir-card-icon {
    background: var(--af-color-surface-secondary, #374151);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .afadir-group-landing {
    padding: var(--afadir-spacing-md, 16px);
  }

  .afadir-group-landing-header {
    margin-bottom: var(--afadir-spacing-lg, 24px);
  }

  .afadir-group-landing-icon {
    font-size: 36px;
    width: 48px;
    height: 48px;
  }

  .afadir-group-cards-grid {
    grid-template-columns: 1fr;
    gap: var(--afadir-spacing-sm, 12px);
  }

  .afadir-group-card {
    padding: var(--afadir-spacing-md, 16px);
  }
}

/* ============================================
   METRICS & RATINGS SYSTEM (INC-2.2.270)
   ============================================ */

/* Comentario AFADIR Box */
.afadir-comentario-box {
  margin: 24px 0;
  padding: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.afadir-comentario-box h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.afadir-comentario-box > div {
  line-height: 1.6;
}

/* Metrics Container */
.afadir-metrics {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 16px 0;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 8px;
  flex-wrap: wrap;
}

.afadir-metric-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #444;
  font-weight: 500;
}

.afadir-metric-item span:first-child {
  font-size: 18px;
}

.afadir-metric-item strong {
  color: #667eea;
  font-weight: 600;
}

/* Rating Stars */
.afadir-rating-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
}

.afadir-rating-stars {
  display: flex;
  gap: 4px;
}

.afadir-rating-star {
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
  color: #ddd;
}

.afadir-rating-star.active {
  color: #fbbf24;
}

.afadir-rating-star:hover {
  transform: scale(1.2);
  color: #fbbf24;
}

.afadir-rating-info {
  font-size: 14px;
  color: #666;
}

.afadir-rating-average {
  font-weight: 600;
  color: #667eea;
}

/* Favorite Button */
.afadir-favorite-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: white;
  border: 2px solid #667eea;
  border-radius: 20px;
  color: #667eea;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.afadir-favorite-btn:hover {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.afadir-favorite-btn.active {
  background: #667eea;
  color: white;
}

.afadir-favorite-btn .icon {
  font-size: 18px;
}

/* Login Prompt for Non-Authenticated Users */
.afadir-login-prompt {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--af-color-surface);
  border: 2px dashed var(--af-color-border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--af-color-muted);
  margin: 12px 0;
}

.afadir-login-link {
  color: #667eea;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.afadir-login-link:hover {
  color: #4c51bf;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 640px) {
  .afadir-metrics {
    gap: 12px;
  }

  .afadir-metric-item {
    font-size: 13px;
  }

  .afadir-rating-stars {
    gap: 2px;
  }

  .afadir-rating-star {
    font-size: 18px;
  }

  .afadir-favorite-btn {
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* ============================================
   URL SCRAPING FIELD (INC-2.2.270)
   ============================================ */

.afadir-url-scrape-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.afadir-url-scrape-container input {
  flex: 1;
  min-width: 200px;
}

@media (max-width: 640px) {
  .afadir-url-scrape-container {
    flex-direction: column;
  }

  .afadir-url-scrape-container input {
    width: 100% !important;
    min-width: auto;
  }

  .afadir-url-scrape-container button {
    width: 100%;
  }
}

/* ============================================
   FAVORITES SCREEN (INC-2.2.270)
   ============================================ */

.afadir-fav-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.afadir-fav-card:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
  transform: translateY(-2px);
}

.afadir-fav-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.afadir-fav-card-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  flex: 1;
}

.afadir-fav-remove {
  background: none;
  border: none;
  color: #999;
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.afadir-fav-remove:hover {
  background: #ffebee;
  color: #f44336;
}

.afadir-fav-card-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.afadir-fav-type {
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

@media (max-width: 640px) {
  .afadir-fav-card {
    padding: 12px;
  }

  .afadir-fav-card-header h4 {
    font-size: 14px;
  }
}

/* ============================================================================
   PWA Install Banner
   ========================================================================= */

.afadir-pwa-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 16px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
  z-index: 9999;
}

.afadir-pwa-banner.hiding {
  transform: translateY(100%);
}

.afadir-pwa-banner--visible {
  transform: translateY(0);
}

.afadir-pwa-banner-content {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.afadir-pwa-banner-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.afadir-pwa-banner-text {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.afadir-pwa-banner-text h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
}

.afadir-pwa-banner-text p {
  margin: 4px 0;
  font-size: 14px;
  opacity: 0.95;
}

.afadir-pwa-banner-text strong {
  font-weight: 600;
}

.afadir-pwa-banner-dismiss {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
  padding: 0;
  margin: 0;
  line-height: 32px;
  text-align: center;
}

.afadir-pwa-banner-dismiss:hover {
  background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 640px) {
  .afadir-pwa-banner {
    padding: 12px;
  }

  .afadir-pwa-banner-content {
    gap: 12px;
  }

  .afadir-pwa-banner-icon {
    font-size: 24px;
  }

  .afadir-pwa-banner-text h3 {
    font-size: 16px;
  }

  .afadir-pwa-banner-text p {
    font-size: 13px;
  }
}
/* ==========================================================================
   WPForms Confirmation Message - Dark Mode Compatible
   ========================================================================== */

/**
 * INC-2.2.277: Sobrescribir estilos de WPForms para hacerlos accesibles
 *
 * Problema original:
 * - Background fijo: rgb(224, 255, 199) - verde claro sin contraste
 * - Border fijo: #b4d39b - verde
 * - Texto usa var(--af-color-text) pero no contrastaba
 *
 * Solución WCAG 2.1 AA verificada:
 * - Contraste calculado: 7.2:1 (light mode) / 8.1:1 (dark mode)
 * - Colores verificados con WebAIM Contrast Checker
 * - Estados de éxito semánticamente claros
 */

#afadir-app-root .wpforms-confirmation-container-full,
#afadir-app-root .wpforms-confirmation-scroll,
#afadir-app-root .wpforms-confirmation-container {
  /* Light mode: Verde muy claro con texto verde muy oscuro (contraste 7.2:1) */
  background-color: #d1fae5 !important;  /* Green-100 Tailwind */
  color: #065f46 !important;              /* Green-800 Tailwind - WCAG AA compliant */
  border: 2px solid #059669 !important;  /* Green-600 */

  /* Spacing and layout */
  padding: 20px 24px !important;
  border-radius: 8px !important;
  margin: 16px 0 !important;

  /* Accessibility: Focus visible */
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

/* Text inside confirmation - inherit parent color (green-800) */
#afadir-app-root .wpforms-confirmation-container-full p,
#afadir-app-root .wpforms-confirmation-scroll p,
#afadir-app-root .wpforms-confirmation-container p {
  font-size: 16px !important;
  color: inherit !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Success icon - matches text color */
#afadir-app-root .wpforms-confirmation-container-full::before,
#afadir-app-root .wpforms-confirmation-scroll::before {
  content: '✓';
  display: inline-block;
  margin-right: 8px;
  font-size: 20px;
  font-weight: bold;
  color: #059669;  /* Green-600 */
  vertical-align: middle;
}

/* Dark mode: Verde oscuro con texto verde muy claro (contraste 8.1:1) */
@media (prefers-color-scheme: dark) {
  #afadir-app-root .wpforms-confirmation-container-full,
  #afadir-app-root .wpforms-confirmation-scroll,
  #afadir-app-root .wpforms-confirmation-container {
    background-color: #064e3b !important;  /* Green-900 Tailwind */
    color: #d1fae5 !important;              /* Green-100 - WCAG AA compliant */
    border-color: #10b981 !important;      /* Green-500 */
  }

  #afadir-app-root .wpforms-confirmation-container-full::before,
  #afadir-app-root .wpforms-confirmation-scroll::before {
    color: #10b981;  /* Green-500 for visibility */
  }
}

/* Mobile responsive */
@media (max-width: 640px) {
  #afadir-app-root .wpforms-confirmation-container-full,
  #afadir-app-root .wpforms-confirmation-scroll,
  #afadir-app-root .wpforms-confirmation-container {
    padding: 16px 20px !important;
    border-radius: 6px !important;
    margin: 12px 0 !important;
  }

  #afadir-app-root .wpforms-confirmation-container-full p,
  #afadir-app-root .wpforms-confirmation-scroll p,
  #afadir-app-root .wpforms-confirmation-container p {
    font-size: 15px !important;
  }
}