/*
 * Por encima del layout del dashboard; por debajo de modales (10000) y toasts (10001).
 */
.api-global-loading-root {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.api-global-loading-inner {
  background: color-mix(in srgb, var(--bg-elevated, #f8fafc) 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border, rgba(15, 23, 42, 0.12));
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.1);
  overflow: hidden;
}

/* Franja de color animada (gradiente) */
.api-global-loading-spectrum {
  height: 5px;
  width: 100%;
  background: linear-gradient(
    90deg,
    #f59e0b,
    #ea580c,
    #dc2626,
    #a855f7,
    #6366f1,
    #0ea5e9,
    #14b8a6,
    #f59e0b
  );
  background-size: 240% 100%;
  animation: api-global-loading-spectrum-shift 4s linear infinite;
}

@keyframes api-global-loading-spectrum-shift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.api-global-loading-bar-track {
  position: relative;
  height: 3px;
  width: 100%;
  overflow: hidden;
  background: rgba(100, 116, 139, 0.2);
}

.api-global-loading-bar-fill {
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  border-radius: 0 2px 2px 0;
  background: var(--accent, #d97706);
  animation: api-global-loading-slide 1.05s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes api-global-loading-slide {
  0% {
    left: -40%;
  }
  100% {
    left: 100%;
  }
}

.api-global-loading-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.55rem 1rem 0.65rem;
  max-width: min(52rem, 100%);
  margin: 0 auto;
  box-sizing: border-box;
}

.api-global-loading-spinner-sm {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  align-self: center;
  border-radius: 50%;
  border: 2px solid rgba(100, 116, 139, 0.35);
  border-top-color: var(--accent, #d97706);
  animation: api-global-loading-spin 0.72s linear infinite;
}

@keyframes api-global-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.api-global-loading-texts {
  min-width: 0;
  flex: 0 1 auto;
  max-width: calc(100% - 2rem);
  text-align: center;
}

.api-global-loading-main {
  margin: 0 0 0.2rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--text, #0f172a);
  text-align: center;
}

.api-global-loading-sub {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-muted, #64748b);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .api-global-loading-spectrum {
    animation: none;
    background: linear-gradient(90deg, var(--accent, #d97706), #6366f1);
  }

  .api-global-loading-bar-fill {
    left: 0;
    width: 100%;
    animation: api-global-loading-pulse-bar 1.3s ease-in-out infinite;
    border-radius: 0;
  }

  .api-global-loading-spinner-sm {
    animation-duration: 1.2s;
  }

  @keyframes api-global-loading-pulse-bar {
    0%,
    100% {
      opacity: 0.45;
    }
    50% {
      opacity: 1;
    }
  }
}
.auth-page {
  min-height: 100vh;
  background: var(--bg);
  background-image: radial-gradient(ellipse 90% 60% at 50% -25%, rgba(245, 158, 11, 0.06), transparent 55%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth-page--loading {
  color: var(--text-muted);
}

.auth-loading-text {
  margin: 0;
  font-size: var(--text-sm, 0.95rem);
}

.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  padding: 2.5rem;
  width: 100%;
  max-width: 520px;
  min-width: 0;
  box-sizing: border-box;
}

/** Login: tarjeta al 100 % del ancho útil (viewport menos padding de `.auth-page`). */
.auth-card--login-full {
  max-width: 100%;
}

/* Formulario en 2 columnas (registro) */
.auth-form--two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
}

.auth-form--two-cols .auth-form-full {
  grid-column: 1 / -1;
}

.auth-form--two-cols label,
.auth-form--two-cols .auth-form-full {
  margin-bottom: 1rem;
}

.auth-form--two-cols .auth-form-full:last-of-type {
  margin-bottom: 0;
  margin-top: 0.25rem;
}

@media (max-width: 480px) {
  .auth-form--two-cols {
    grid-template-columns: 1fr;
  }
}

.auth-card h1 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  color: var(--text);
}

.auth-natural-notice {
  font-size: 0.9rem;
  color: var(--text);
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.85rem;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  line-height: 1.5;
}

.auth-natural-notice strong {
  color: var(--accent);
}

.auth-profile-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem 1rem;
  margin: 0 0 1rem;
  grid-column: 1 / -1;
}

.auth-profile-legend {
  padding: 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.auth-profile-hint {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.auth-profile-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.auth-profile-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-size: 0.95rem;
  color: var(--text);
}

.auth-profile-option:hover {
  border-color: var(--accent);
  background: var(--accent-soft, rgba(245, 158, 11, 0.08));
}

.auth-profile-option--checked {
  border-color: var(--accent);
  background: var(--accent-soft, rgba(245, 158, 11, 0.12));
}

.auth-profile-option input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.auth-trial-notice {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--accent-soft, rgba(59, 130, 246, 0.1));
  border-radius: var(--radius);
  border: 1px solid var(--accent, #3b82f6);
}

.auth-trial-notice strong {
  color: var(--text);
}

.auth-success-notice {
  font-size: 0.9rem;
  color: var(--text);
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: rgba(34, 197, 94, 0.15);
  border-radius: var(--radius);
  border: 1px solid rgba(34, 197, 94, 0.5);
  line-height: 1.5;
}

.auth-success-notice strong {
  color: var(--text);
}

.auth-error {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(248, 113, 113, 0.3);
}

/* Aviso: correo no verificado (tras login correcto) */
.auth-verification-notice {
  margin-bottom: 1rem;
  padding: 1rem;
  background: var(--accent-soft, rgba(59, 130, 246, 0.1));
  border: 1px solid var(--accent, #3b82f6);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--text);
}

.auth-verification-notice p {
  margin: 0 0 1rem;
  line-height: 1.5;
}

.auth-btn-resend {
  display: block;
  width: 100%;
  padding: 0.65rem 1rem;
  margin-bottom: 0.75rem;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.auth-btn-resend:hover:not(:disabled) {
  background: var(--accent-hover);
}

.auth-btn-resend:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.auth-link-dashboard {
  display: block;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
}

.auth-link-dashboard:hover {
  color: var(--accent);
  text-decoration: underline;
}

.auth-link-back {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 500;
}

.auth-link-back:hover {
  color: var(--accent);
  text-decoration: underline;
}

.auth-card form label {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
}

.auth-card form input,
.auth-card form select {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  background: var(--bg);
  color: var(--text);
}

.auth-card form input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

.auth-card form input:focus,
.auth-card form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.auth-card form button {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.85rem 1rem;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 14px var(--accent-glow);
}

.auth-card form button:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: 0 4px 24px var(--accent-glow);
}

.auth-card form button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Modificador solo para registro: ancho mayor */
.auth-card--register {
  max-width: 600px !important;
}

.auth-footer {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.auth-footer a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}

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

.auth-links {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.auth-links a {
  color: var(--text-muted);
  text-decoration: none;
}

.auth-links a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Inicio de sesión con Google (GIS) */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0 1rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-google-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  /* Evita salto vertical cuando el iframe de Google cambia de estado al pulsar Continuar */
  min-height: 3.75rem;
  margin-bottom: 0.25rem;
}

.auth-google-wrap--disabled {
  pointer-events: none;
  opacity: 0.55;
}

.auth-google-placeholder {
  width: 100%;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Contenedor del iframe GIS: min-width 0 evita que flex deje el botón ~400px pegado a la izquierda */
.auth-google-button-host {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 3.5rem;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  align-items: start;
}

/* Cadena típica GIS / FedCM: varios divs anidados con ancho fijo en línea */
.auth-google-button-host > div {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
  justify-self: stretch;
}

.auth-google-button-host > div > div {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.auth-google-button-host > div > div > div {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.auth-google-button-host iframe {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  min-height: 3.25rem;
  display: block;
  margin: 0 auto !important;
  box-sizing: border-box;
  border: none;
  vertical-align: top;
}

.auth-google-button-host--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.auth-google-hint {
  font-size: 0.85rem;
  text-align: center;
  margin: 0.5rem 0 0;
}

.auth-google-hint--error {
  color: var(--text-muted);
}
/* Landing: página de aterrizaje para visitantes no logueados */
.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -25%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
    radial-gradient(ellipse 80% 50% at 100% 50%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 50%),
    radial-gradient(ellipse 60% 40% at 0% 80%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 45%);
  color: var(--text);
}

.landing-main {
  flex: 1;
  width: 100%;
}

/* Sub-landings de producto: acentos distintos (la home sigue el ámbar global de :root) */
.landing.landing--theme-articles {
  --accent: #22c55e;
  --accent-hover: #4ade80;
  --accent-glow: rgba(34, 197, 94, 0.22);
}

.landing.landing--theme-articles .landing-hero {
  background: radial-gradient(ellipse 90% 55% at 50% -25%, rgba(34, 197, 94, 0.1), transparent 58%);
}

.landing.landing--theme-articles .landing-hero-terminal-cursor {
  color: #4ade80;
}

.landing.landing--theme-grillas {
  --accent: #a855f7;
  --accent-hover: #c4b5fd;
  --accent-glow: rgba(168, 85, 247, 0.24);
}

.landing.landing--theme-grillas .landing-hero {
  background: radial-gradient(ellipse 90% 55% at 50% -25%, rgba(168, 85, 247, 0.11), transparent 58%);
}

.landing.landing--theme-grillas .landing-hero-terminal-cursor {
  color: #d8b4fe;
}

.landing.landing--theme-media {
  --accent: #06b6d4;
  --accent-hover: #22d3ee;
  --accent-glow: rgba(6, 182, 212, 0.24);
}

.landing.landing--theme-media .landing-hero {
  background: radial-gradient(ellipse 90% 55% at 50% -25%, rgba(6, 182, 212, 0.11), transparent 58%);
}

.landing.landing--theme-media .landing-hero-terminal-cursor {
  color: #22d3ee;
}

.landing-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent) 15%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: var(--space-4) var(--space-6);
}

.landing-header-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

/* Wrapper logo + burger: en desktop se comporta como un solo bloque; en móvil es la barra superior del overlay */
.landing-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-width: 0;
}

.landing-logo {
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  transition: color 0.2s ease, filter 0.2s ease;
}

.landing-logo:hover {
  color: var(--accent);
  filter: brightness(1.08);
}

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex: 1;
  min-width: 0;
}

.landing-nav-left,
.landing-nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.landing-nav-link {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.landing-nav-link:hover {
  color: var(--accent);
}

.landing-nav-link--active {
  color: var(--accent);
  font-weight: var(--font-medium);
}

.landing-cta {
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.landing-cta--primary {
  background: var(--accent);
  color: var(--bg);
}

.landing-cta--primary:hover {
  background: var(--accent-hover);
  color: var(--bg);
}

/* Hero */
.landing-hero {
  position: relative;
  padding: clamp(3rem, 8vw, 5.5rem) var(--space-6);
  overflow: hidden;
}

.landing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 75% 15%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%);
  pointer-events: none;
}

.landing-hero-grid,
.landing-hero-inner {
  position: relative;
  z-index: 1;
}

.landing-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

.landing-hero-copy {
  text-align: left;
}

.landing-hero-tagline {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--accent);
  margin-bottom: var(--space-4);
  letter-spacing: 0.03em;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.landing-hero-title {
  font-size: clamp(1.85rem, 4.2vw, 2.75rem);
  font-weight: var(--font-bold);
  line-height: 1.15;
  margin-bottom: var(--space-6);
  color: var(--text);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.landing-hero-subtitle {
  font-size: var(--text-lg);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-5);
}

.landing-hero-highlights {
  list-style: none;
  margin: 0 0 var(--space-10);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
}

.landing-hero-highlights li {
  margin: 0;
  padding: 0.32rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: var(--font-medium);
  color: color-mix(in srgb, var(--text) 82%, var(--text-muted));
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent) 20%);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  letter-spacing: 0.01em;
}

.landing-hero-media {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.landing-hero-media-window {
  border-radius: var(--radius-xl);
  background: linear-gradient(155deg, var(--bg-card), var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--border) 75%, var(--accent) 25%);
  box-shadow:
    var(--shadow-card),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 48px color-mix(in srgb, var(--accent) 8%, transparent);
  padding: var(--space-4);
}

.landing-hero-terminal {
  border-radius: calc(var(--radius-xl) - 4px);
  padding: var(--space-5);
  /* Negro neutro (sin tinte azul/índigo del gradiente anterior) */
  background: #080808;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

/* Altura fija del mock terminal del hero: evita saltos de layout al animar líneas */
.landing-hero-media-window.landing-hero-terminal {
  display: flex;
  flex-direction: column;
  height: 22rem;
  min-height: 0;
  box-sizing: border-box;
}

.landing-hero-terminal-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  color: rgba(148, 163, 184, 0.8);
}

.landing-hero-terminal-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.6);
}

.landing-hero-terminal-dot:nth-child(1) {
  background: #f97373;
}

.landing-hero-terminal-dot:nth-child(2) {
  background: #facc15;
}

.landing-hero-terminal-dot:nth-child(3) {
  background: #22c55e;
}

.landing-hero-terminal-title {
  margin-left: var(--space-2);
}

.landing-hero-terminal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #e5e7eb;
}

.landing-hero-terminal-line {
  margin: 0 0 2px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.landing-hero-terminal-line--dim {
  color: #9ca3af;
}

.landing-hero-terminal-cursor {
  margin: 0;
  color: #facc15;
  animation: landing-terminal-blink 1.1s steps(2, start) infinite;
}

.landing-hero-media-caption {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.landing-pillars-demo {
  margin-top: var(--space-8);
  max-width: min(56rem, 100%);
  margin-left: auto;
  margin-right: auto;
}

.landing-pillars-demo-window {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background: linear-gradient(155deg, var(--bg-card), var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--border) 75%, var(--accent) 25%);
  box-shadow:
    var(--shadow-card),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 48px color-mix(in srgb, var(--accent) 8%, transparent);
  box-sizing: border-box;
}

.landing-pillars-demo-window .landing-hero-terminal-header {
  margin-bottom: var(--space-2);
}

.landing-demo-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(52vh, 480px);
  border-radius: calc(var(--radius-xl) - 8px);
  background: #080808;
}

.landing-pillars-demo-caption {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.45;
}

@keyframes landing-terminal-blink {
  0%,
  50% {
    opacity: 1;
  }
  50.1%,
  100% {
    opacity: 0;
  }
}

.landing-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: flex-start;
}

.landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: var(--font-medium);
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.landing-btn--primary {
  background: var(--accent);
  color: var(--bg);
}

.landing-btn--primary:hover {
  background: var(--accent-hover);
  color: var(--bg);
  box-shadow: var(--accent-glow) 0 4px 20px;
}

.landing-btn--secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border: 1px solid var(--border);
}

.landing-btn--secondary:hover {
  background: color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.06));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  color: var(--text);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent);
}

.landing-btn--large {
  padding: 1rem 2rem;
  font-size: var(--text-lg);
}

/* Qué resuelve */
.landing-resuelve {
  padding: var(--space-12) var(--space-6);
  background: var(--bg-elevated);
}

.landing-resuelve-list {
  max-width: 640px;
  margin: 0 auto;
  padding-left: 1.25rem;
  color: var(--text-muted);
  line-height: 1.7;
  font-size: var(--text-base);
}

.landing-resuelve-list li {
  margin-bottom: var(--space-3);
}

.landing-resuelve .landing-section-title {
  margin-bottom: var(--space-6);
}

/* Antes de generar: revisar dashboard */
.landing-prep {
  padding: clamp(2.75rem, 5vw, 4rem) var(--space-6);
  background: var(--bg-elevated);
  border-top: 1px solid color-mix(in srgb, var(--border) 92%, var(--accent) 8%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 92%, var(--accent) 8%);
}

.landing-prep .landing-section-title {
  margin-bottom: var(--space-4);
}

.landing-prep .landing-section-lead {
  margin-bottom: var(--space-8);
}

.landing-prep-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  width: 100%;
  text-align: left;
}

@media (min-width: 640px) {
  .landing-prep-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .landing-prep-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.landing-prep-item {
  margin: 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--bg-card), color-mix(in srgb, var(--bg-elevated) 88%, var(--bg-card)));
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--accent) 10%);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

/* Solo el título del bloque va en su línea; el resto de <strong> sigue en línea dentro del párrafo. */
.landing-prep-item > strong:first-child {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text);
  font-size: var(--text-base);
}

.landing-prep-item strong:not(:first-child) {
  color: var(--text);
  font-weight: 600;
}

/* Demo visual del asistente (p. ej. landing /asistente-marketing-ia) */
.landing-agent-demo {
  --primary: var(--accent);
  --primary-contrast: #0a0a0a;
  --bg-subtle: rgba(148, 163, 184, 0.06);
  max-width: 520px;
  margin: 0 auto;
}

.landing-agent-demo-stage {
  position: relative;
}

.landing-agent-demo .landing-agent-demo__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  min-height: 380px;
  max-height: min(560px, 70vh);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.landing-agent-demo .landing-agent-demo__messages {
  min-height: 140px;
  max-height: min(280px, 36vh);
}

.landing-agent-demo .landing-agent-demo__fake-close {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  pointer-events: none;
  opacity: 0.85;
}

.landing-agent-demo .agent-assistant-btn-text:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Avatar demo: círculo oscuro + iniciales (como en el panel real sin foto) */
.landing-agent-demo .agent-assistant-avatar-fallback {
  background: #0a0a0a;
  color: #fff;
  background-image: none;
}

.landing-agent-demo-caption {
  margin: var(--space-6) auto 0;
  max-width: 28rem;
  text-align: center;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

.landing-agent-demo-caption strong {
  color: color-mix(in srgb, var(--text) 88%, var(--text-muted));
  font-weight: var(--font-semibold);
}

@media (max-width: 520px) {
  .landing-agent-demo-stage {
    margin-bottom: var(--space-4);
  }

  .landing-agent-demo .landing-agent-demo__messages {
    max-height: 320px;
  }
}

/* Blog vs redes: dos bloques claros */
.landing-pillars {
  padding: clamp(3.5rem, 7vw, 5rem) var(--space-6);
  background: var(--bg);
  border-top: 1px solid color-mix(in srgb, var(--border) 92%, var(--accent) 8%);
}

.landing-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.landing-pillars-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-pillars-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Cinco tarjetas: 3 columnas en escritorio (3+2), más legible que una sola fila de 5 */
.landing-pillars-grid--five {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .landing-pillars-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-pillars-grid--five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .landing-pillars-grid--three {
    grid-template-columns: 1fr;
  }

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

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

/* .landing ancla especificidad frente al reset global (* { padding: 0 }) y otros estilos cargados después */
/* Las tres pilares comparten el mismo acento (borde, sombra, badge): ninguna es “secundaria”. */
.landing .landing-pillar {
  background: linear-gradient(165deg, color-mix(in srgb, var(--bg-card) 100%, transparent), var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: var(--radius-xl);
  padding-top: var(--space-6);
  padding-right: var(--space-6);
  padding-bottom: var(--space-7);
  padding-left: var(--space-6);
  text-align: left;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent),
    0 16px 40px color-mix(in srgb, var(--accent) 10%, transparent);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.landing .landing-pillar:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
    0 24px 52px color-mix(in srgb, var(--accent) 16%, transparent);
}

.landing-pillar-badge {
  display: inline-block;
  margin: 0 0 var(--space-3);
  padding: 0.2rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  border-radius: var(--radius);
}

.landing-pillar-badge--muted {
  background: var(--text-muted);
  color: var(--bg);
}

.landing-pillar-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--accent);
  margin: 0 0 var(--space-2);
}

.landing-pillar-lead {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.landing-pillar-list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.landing-pillar-list li {
  margin-bottom: var(--space-3);
}

.landing-pillar-list li:last-child {
  margin-bottom: 0;
}

.landing-pillars-credits {
  margin-top: clamp(3.25rem, 9vw, 5.5rem);
  max-width: min(42rem, 100%);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.landing-pillars-credits-title {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.125rem, 2.5vw, 1.35rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.landing-pillars-credits-text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
  padding-bottom: var(--space-2);
}

/* Tarjetas enlazadas tipo hub (landings) */
a.landing-hub-card {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color var(--transition), box-shadow var(--transition), transform 0.15s ease;
}

a.landing-hub-card:hover {
  border-color: var(--border-light);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

a.landing-hub-card .landing-pillar-lead {
  margin-bottom: 0;
}

.landing-hub-card-cta {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--accent);
}

.landing-step-card .landing-card-title a {
  color: var(--accent);
  text-decoration: none;
}

.landing-step-card .landing-card-title a:hover {
  text-decoration: underline;
}

/* Misma rejilla 3× que .landing-steps-grid--three (ancho y columnas alineados) */
.landing-benefits-grid.landing-benefits-grid--tight {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 992px) {
  .landing-benefits-grid.landing-benefits-grid--tight {
    grid-template-columns: 1fr;
  }
}

.landing-steps-note {
  max-width: 720px;
  margin: var(--space-10) auto 0;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

.landing-steps-note strong {
  color: var(--text);
}

/* Cómo funciona (pasos) */
.landing-steps {
  padding: clamp(3.5rem, 7vw, 5rem) var(--space-6);
}

.landing-steps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

/* Debe ir después de .landing-steps-grid: si no, las 2 columnas base pisan las 3. */
.landing-steps-grid.landing-steps-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-steps-grid.landing-steps-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .landing-steps-grid.landing-steps-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .landing-steps-grid.landing-steps-grid--three {
    grid-template-columns: 1fr;
  }

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

.landing-step-card {
  background: linear-gradient(160deg, var(--bg-card), color-mix(in srgb, var(--bg-elevated) 85%, var(--bg-card)));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  position: relative;
  transition:
    border-color 0.2s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

.landing-step-card:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border-light));
  box-shadow: var(--shadow-card), 0 0 32px color-mix(in srgb, var(--accent) 5%, transparent);
  transform: translateY(-2px);
}

.landing-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2rem;
  padding: 0 0.35rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--bg);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
}

.landing-step-card .landing-card-title {
  margin-bottom: var(--space-2);
}

.landing-step-card .landing-card-text {
  margin: 0;
}

/* Para quién (casos de uso) */
.landing-usecases {
  padding: clamp(3.5rem, 7vw, 5rem) var(--space-6);
  background: var(--bg-elevated);
}

/* Tecnologías */
.landing-tech {
  padding: var(--space-10) var(--space-6);
}

.landing-tech-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--text-muted);
}

.landing-tech-list li {
  padding: var(--space-2) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.landing-tech .landing-section-title {
  margin-bottom: var(--space-6);
}

.landing-keywords-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0 0 var(--space-10);
  padding: 0;
  font-size: var(--text-base);
  font-weight: 500;
}

.landing-keywords-list li {
  padding: var(--space-2) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Benefits */
.landing-benefits {
  padding: clamp(3.5rem, 7vw, 5rem) var(--space-6);
  background: var(--bg-elevated);
  border-top: 1px solid color-mix(in srgb, var(--border) 90%, var(--accent) 10%);
}

.landing-demo {
  padding: var(--space-16) var(--space-6);
}

.landing-demo-video {
  max-width: 920px;
  margin: 0 auto;
}

.landing-demo-video-placeholder {
  position: relative;
  width: 100%;
  padding-top: 0;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border);
  background: radial-gradient(circle at 30% 20%, rgba(148, 163, 184, 0.22), transparent 55%),
    var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.landing-demo-video-placeholder span {
  position: absolute;
  padding: 0 var(--space-4);
}

.landing-demo-image {
  position: relative;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
}

/* Mismo ancho que .landing-header-inner: max-width centrado; el gutter lateral va en la section/header, no aquí (evita doble margen y bloque más estrecho que la cabecera). */
.landing-benefits-inner,
.landing-hero-grid {
  max-width: var(--content-max);
  margin-inline: auto;
  width: 100%;
  box-sizing: border-box;
}

.landing-section-title {
  position: relative;
  font-size: clamp(1.35rem, 2.8vw, 1.95rem);
  font-weight: var(--font-bold);
  letter-spacing: -0.025em;
  text-align: center;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-5);
  color: var(--text);
}

.landing-section-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 2.75rem;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.9;
}

.landing-section-lead {
  text-align: center;
  color: var(--text-muted);
  max-width: 42rem;
  margin: 0 auto var(--space-12);
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.65;
}

.landing-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}

.landing-card {
  background: linear-gradient(160deg, var(--bg-card), color-mix(in srgb, var(--bg-elevated) 88%, var(--bg-card)));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-6) var(--space-7);
  transition:
    border-color 0.2s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

.landing-card:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-light));
  box-shadow: var(--shadow-card), 0 0 36px color-mix(in srgb, var(--accent) 6%, transparent);
  transform: translateY(-2px);
}

.landing-card-icon {
  font-size: 1.45rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.landing-card-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.landing-card-text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

/* Pricing teaser */
.landing-pricing-teaser {
  padding: var(--space-16) var(--space-6);
  text-align: center;
}

.landing-pricing-teaser-inner {
  max-width: 560px;
  margin: 0 auto;
}

.landing-pricing-teaser-inner .landing-section-title {
  margin-bottom: var(--space-4);
}

.landing-pricing-teaser-inner .landing-section-lead {
  margin-bottom: var(--space-8);
}

/* CTA final */
.landing-cta-section {
  padding: clamp(3rem, 7vw, 4.5rem) var(--space-6) clamp(3.5rem, 8vw, 5rem);
  text-align: center;
}

.landing-cta-section-inner {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.landing-cta-title {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: var(--font-bold);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
  color: var(--text);
}

.landing-cta-text {
  color: var(--text-muted);
  margin-bottom: var(--space-8);
  line-height: 1.65;
  font-size: var(--text-base);
}

.landing-cta-legal {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
}

.landing-cta-legal a {
  color: var(--accent);
  text-decoration: underline;
}

.landing-cta-legal a:hover {
  color: var(--accent-hover);
}

/* Contenedor de contenido para subpáginas (Precios, Ayuda) */
.landing-main-content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  width: 100%;
}

/* Footer (referencia: marca + columnas + barra inferior) */
.landing-footer {
  margin-top: auto;
  border-top: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
  background: var(--bg);
  color: var(--text);
}

.landing-footer-main {
  padding: clamp(2.75rem, 6vw, 4rem) var(--space-6);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 35%, var(--bg)), var(--bg));
}

.landing-footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.landing-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}

.landing-footer-brand {
  min-width: 0;
}

.landing-footer-logo-mark {
  display: inline-block;
  font-weight: 800;
  font-size: var(--text-xl);
  letter-spacing: -0.03em;
  color: var(--text);
  text-decoration: none;
  margin-bottom: var(--space-3);
}

.landing-footer-logo-mark:hover {
  color: var(--accent);
}

.landing-footer-tagline {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 22rem;
}

.landing-footer-col {
  min-width: 0;
}

.landing-footer-heading {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.landing-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.landing-footer-links a {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.landing-footer-links a:hover {
  color: var(--accent);
}

.landing-footer-bar {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid color-mix(in srgb, var(--border) 90%, var(--accent) 10%);
  background: color-mix(in srgb, var(--bg-elevated) 25%, var(--bg));
}

.landing-footer-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.landing-footer-copy {
  margin: 0;
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--text-muted) 92%, var(--text));
}

@media (max-width: 1100px) {
  .landing-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .landing-footer-brand {
    grid-column: 1 / -1;
    max-width: 36rem;
  }
}

@media (max-width: 640px) {
  .landing-footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Demo del asistente en hero (página asistente) */
.landing-hero-media--agent-demo {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.landing-hero-media--agent-demo .landing-agent-demo {
  margin: 0 auto;
}


@media (min-width: 901px) {
  .landing-hero-grid .landing-hero-media--agent-demo {
    margin: 0;
    justify-self: end;
  }
}

/* Botón hamburguesa: solo visible en móvil */
.landing-header-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text);
  transition: border-color var(--transition), background var(--transition);
}

.landing-header-burger:hover {
  background: var(--bg-card);
  border-color: var(--accent);
}

.landing-header-burger-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 640px) {
  .landing-header {
    padding: var(--space-3) var(--space-4);
  }

  .landing-header-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }

  .landing-header-top {
    width: 100%;
    order: 1;
    flex-shrink: 0;
  }

  .landing-header-burger {
    display: flex;
    order: 0;
  }

  .landing-logo {
    font-size: var(--text-base);
    text-align: left;
    order: 0;
  }

  .landing-nav {
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.2s ease;
    border-top: none;
  }

  .landing-header--menu-open.landing-header {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--bg-elevated);
    overflow: hidden;
    padding: var(--space-3) var(--space-4);
    box-sizing: border-box;
  }

  .landing-header--menu-open .landing-header-inner {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 100%;
    overflow-y: auto;
    padding-bottom: var(--space-8);
    box-sizing: border-box;
  }

  .landing-header--menu-open .landing-header-top {
    flex-shrink: 0;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
  }

  .landing-header--menu-open .landing-nav {
    max-height: 320px;
    opacity: 1;
    padding-top: var(--space-6);
    margin-top: 0;
    border-top: none;
  }

  .landing-header--menu-open .landing-header-burger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .landing-header--menu-open .landing-header-burger-bar:nth-child(2) {
    opacity: 0;
  }

  .landing-header--menu-open .landing-header-burger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .landing-nav .landing-nav-link,
  .landing-nav .landing-cta {
    display: block;
    padding: var(--space-3) 0;
    font-size: var(--text-base);
    text-align: left;
    border-radius: var(--radius);
  }

  .landing-nav .landing-cta--primary {
    margin-top: var(--space-2);
    text-align: center;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .landing-nav-left,
  .landing-nav-right {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .landing-nav-right {
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
  }

  .landing-hero {
    padding: var(--space-10) var(--space-4);
  }

  .landing-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .landing-hero-media-window.landing-hero-terminal {
    height: 19rem;
  }

  .landing-hero-copy {
    text-align: center;
  }

  .landing-hero-media-body {
    grid-template-columns: 88px 1fr;
  }

  .landing-hero-title {
    font-size: clamp(1.375rem, 5vw, 1.75rem);
    margin-bottom: var(--space-4);
  }

  .landing-hero-subtitle {
    font-size: var(--text-base);
    margin-bottom: var(--space-4);
  }

  .landing-hero-highlights {
    justify-content: center;
    margin-bottom: var(--space-8);
  }

  .landing-hero-ctas {
    flex-direction: column;
    gap: var(--space-3);
    justify-content: center;
  }

  .landing-btn {
    width: 100%;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
  }

  .landing-btn--large {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }

  /* Qué resuelve */
  .landing-resuelve {
    padding: var(--space-8) var(--space-4);
  }

  .landing-resuelve-list {
    padding-left: 1rem;
    font-size: var(--text-sm);
  }

  .landing-resuelve-list li {
    margin-bottom: var(--space-2);
  }

  .landing-resuelve .landing-section-title {
    margin-bottom: var(--space-4);
  }

  /* Cómo funciona */
  .landing-steps {
    padding: var(--space-10) var(--space-4);
  }

  .landing-steps-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .landing-step-card {
    padding: var(--space-4);
  }

  .landing-pillars {
    padding: var(--space-10) var(--space-4);
  }

  .landing-pillars-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .landing .landing-pillar {
    padding-top: var(--space-4);
    padding-right: var(--space-4);
    padding-bottom: var(--space-4);
    padding-left: var(--space-4);
  }

  .landing-steps-note {
    margin-top: var(--space-6);
    padding: var(--space-3) var(--space-4);
  }

  /* Benefits / Qué incluye */
  .landing-benefits {
    padding: var(--space-10) var(--space-4);
  }

  .landing-section-title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
  }

  .landing-section-lead {
    margin-bottom: var(--space-8);
    font-size: var(--text-sm);
    padding: 0 var(--space-2);
  }

  .landing-benefits-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .landing-card {
    padding: var(--space-4);
  }

  .landing-card-icon {
    font-size: 1.5rem;
    margin-bottom: var(--space-3);
  }

  .landing-card-title {
    font-size: var(--text-base);
  }

  .landing-card-text {
    font-size: 0.8125rem;
  }

  /* Para quién */
  .landing-usecases {
    padding: var(--space-10) var(--space-4);
  }

  /* Tecnologías */
  .landing-tech {
    padding: var(--space-8) var(--space-4);
  }

  .landing-tech-list {
    gap: var(--space-3);
    font-size: var(--text-base);
  }

  .landing-tech-list li {
    padding: var(--space-2) var(--space-3);
  }

  .landing-tech .landing-section-title {
    margin-bottom: var(--space-4);
  }

  .landing-keywords-list {
    gap: var(--space-3);
    margin-bottom: var(--space-8);
    font-size: var(--text-sm);
  }

  .landing-keywords-list li {
    padding: var(--space-2) var(--space-3);
  }

  /* Pricing teaser */
  .landing-pricing-teaser {
    padding: var(--space-10) var(--space-4);
  }

  .landing-pricing-teaser-inner .landing-section-lead {
    margin-bottom: var(--space-6);
  }

  /* CTA final */
  .landing-cta-section {
    padding: var(--space-10) var(--space-4);
  }

  .landing-cta-title {
    font-size: var(--text-xl);
  }

  .landing-cta-text {
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
  }

  /* Contenedor subpáginas (Precios, Ayuda) */
  .landing-main-content {
    padding: var(--space-6) var(--space-4);
  }

  /* Footer */
  .landing-footer-main {
    padding: var(--space-8) var(--space-4);
  }

  .landing-footer {
    padding-bottom: calc(var(--space-4) + 4rem);
  }

  .landing-footer-bar {
    padding: var(--space-4);
  }
}
.usage-history-chart {
  margin-top: var(--space-2);
}

.usage-history-chart--empty {
  padding: var(--space-6);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
}

.usage-history-chart-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.usage-history-chart-inner {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--space-2);
  align-items: stretch;
}

.usage-history-chart-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--text-muted);
  text-align: right;
  padding-bottom: 1.75rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.usage-history-chart-plot {
  min-width: 0;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0 4px 0 var(--space-2);
}

.usage-history-chart-bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2px;
  height: 200px;
  z-index: 0;
}

.usage-history-chart-limit-line {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 2px;
  margin-bottom: -1px;
  background: rgba(249, 115, 22, 0.95);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  z-index: 2;
  pointer-events: none;
}

.usage-history-chart-col {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  z-index: 1;
}

.usage-history-chart-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
}

.usage-history-chart-bar {
  width: 100%;
  max-width: 26px;
  min-height: 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-hover, var(--accent)));
  border-radius: 6px 6px 2px 2px;
  transition: height 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.usage-history-chart-x-label {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.65rem;
  line-height: 1.2;
  color: var(--text-muted);
  text-align: center;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.usage-history-chart-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.usage-history-chart-legend-bar {
  width: 24px;
  height: 3px;
  background: rgba(249, 115, 22, 0.95);
  border-radius: 2px;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .usage-history-chart-inner {
    grid-template-columns: 1.75rem 1fr;
  }

  .usage-history-chart-bars {
    height: 160px;
    gap: 1px;
  }

  .usage-history-chart-bar {
    max-width: 18px;
  }

  .usage-history-chart-x-label {
    font-size: 0.6rem;
  }
}
.article-consumption {
  margin-top: var(--space-2);
}

.article-consumption-toolbar {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

.article-consumption-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
}

.article-consumption-row--second {
  margin-top: var(--space-4);
  align-items: center;
  justify-content: space-between;
}

.article-consumption-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  min-width: 0;
}

.article-consumption-select,
.article-consumption-date {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  min-height: 40px;
}

.article-consumption-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.article-consumption-presets-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-right: var(--space-1);
}

.article-consumption-chip {
  font-size: 0.8125rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.article-consumption-chip:hover {
  border-color: var(--accent);
  background: var(--bg-card-hover);
}

.article-consumption-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.article-consumption-check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
}

.article-consumption-refresh {
  margin-left: auto;
}

.article-consumption-error {
  color: #f97316;
  font-size: 0.9rem;
  margin: 0 0 var(--space-3);
}

.article-consumption-loading {
  color: var(--text-muted);
  margin: 0;
}

.article-consumption-range-meta {
  margin: 0 0 var(--space-4);
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.article-consumption-limit-hint {
  margin: var(--space-4) 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.article-consumption-legend-domains {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.article-consumption-legend-domains li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Barras apiladas por dominio */
.usage-history-chart-bar-stack {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  max-width: 26px;
  margin: 0 auto;
  border-radius: 6px 6px 2px 2px;
  overflow: hidden;
  min-height: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.usage-history-chart-stack-seg {
  min-height: 2px;
  flex-shrink: 0;
}

.usage-history-chart-stack-seg--0 {
  background: var(--accent);
}

.usage-history-chart-stack-seg--1 {
  background: #3b82f6;
}

.usage-history-chart-stack-seg--2 {
  background: #a855f7;
}

.usage-history-chart-stack-seg--3 {
  background: #22c55e;
}

.usage-history-chart-stack-seg--4 {
  background: #eab308;
}

.usage-history-chart-stack-seg--5 {
  background: #f472b6;
}

.usage-history-chart-bars--dense .usage-history-chart-x-label {
  font-size: 0.55rem;
}

.usage-history-chart-bars--dense .usage-history-chart-bar,
.usage-history-chart-bars--dense .usage-history-chart-bar-stack {
  max-width: 14px;
}

/* Gráfico de créditos (CreditConsumptionChart): barras verdes */
.credit-consumption .credit-consumption-bar {
  background: linear-gradient(180deg, #22c55e, #16a34a) !important;
}

@media (max-width: 720px) {
  .article-consumption-row--second {
    flex-direction: column;
    align-items: stretch;
  }

  .article-consumption-refresh {
    margin-left: 0;
    width: 100%;
  }

  .article-consumption-label {
    flex: 1 1 100%;
  }

  .article-consumption-select,
  .article-consumption-date {
    width: 100%;
  }
}
.domain-google-ads-scan-context {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border, #2a2a2a);
  background: rgba(255, 255, 255, 0.03);
}

.domain-google-ads-scan-context-lead {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted, #a3a3a3);
}

.domain-google-ads-scan-context-lead strong {
  color: var(--text, #fff);
}

.domain-google-ads-scan-context-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}

.domain-google-ads-scan-context-facts li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.5rem 0.75rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

@media (max-width: 520px) {
  .domain-google-ads-scan-context-facts li {
    grid-template-columns: 1fr;
  }
}

.domain-google-ads-scan-context-facts li:first-of-type {
  border-top: none;
  padding-top: 0;
}

.domain-google-ads-scan-context-k {
  color: var(--text-muted, #a3a3a3);
  font-weight: 600;
}

.domain-google-ads-scan-context-v {
  color: var(--text, #fff);
  word-break: break-word;
}

.domain-google-ads-scan-context-v--favicon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.domain-google-ads-scan-favicon-thumb {
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid var(--border, #2a2a2a);
  background: rgba(255, 255, 255, 0.06);
}

.domain-google-ads-scan-favicon-url {
  font-size: 0.82em;
  word-break: break-all;
}

.domain-google-ads-scan-context-details {
  margin-top: 0.65rem;
  font-size: 0.82rem;
  color: var(--text-muted, #a3a3a3);
}

.domain-google-ads-scan-context-details summary {
  cursor: pointer;
  color: var(--accent, #f59e0b);
  font-weight: 600;
}

.domain-google-ads-scan-excerpt {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.65rem;
  max-height: 10rem;
  overflow: auto;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-muted, #a3a3a3);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  border: 1px solid var(--border, #2a2a2a);
}

.domain-google-ads-detail-back {
  margin: 0 0 0.75rem;
}

.domain-google-ads-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 1rem;
  padding: 0;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.1));
}

.domain-google-ads-tab {
  margin: 0;
  padding: 0.55rem 1rem 0.65rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted, #a3a3a3);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.domain-google-ads-tab:hover {
  color: var(--text, #fff);
}

.domain-google-ads-tab:focus-visible {
  outline: 2px solid var(--accent, #f59e0b);
  outline-offset: 2px;
  border-radius: 4px;
}

.domain-google-ads-tab--active {
  color: var(--accent, #f59e0b);
  border-bottom-color: var(--accent, #f59e0b);
}

.domain-google-ads-tab-panel {
  padding-top: 0.15rem;
}

.domain-google-ads-tab-intro {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted, #a3a3a3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: var(--radius-sm, 8px);
}

.domain-google-ads-tab-intro strong {
  color: var(--text, #fff);
  font-weight: 600;
}

.domain-google-ads-tab-intro a {
  color: var(--accent, #60a5fa);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.domain-google-ads-tab-intro a:hover {
  color: var(--text, #fff);
}

.domain-google-ads-main--compact .domain-google-ads-create-bar {
  margin-top: 0;
  margin-bottom: 0.25rem;
  align-items: flex-end;
}

.domain-google-ads-create-name,
.domain-google-ads-create-field {
  flex: 1 1 14rem;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.domain-google-ads-create-field:first-of-type {
  flex: 1 1 11rem;
  max-width: 22rem;
}

.domain-google-ads-create-label {
  margin: 0;
}

.domain-google-ads-create-input {
  margin: 0;
  width: 100%;
}

.domain-google-ads-create-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

.domain-google-ads-lead {
  max-width: 52rem;
}

.domain-google-ads-block {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--dashboard-border, rgba(0, 0, 0, 0.08));
}

.domain-google-ads-block:first-of-type {
  border-top: none;
  padding-top: 0;
}

.domain-google-ads-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.domain-google-ads-add-row-bottom {
  margin-top: 0.85rem !important;
  margin-bottom: 0;
}

.domain-google-ads-textarea {
  min-height: 3rem;
  resize: vertical;
}

.domain-google-ads-summary {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.domain-google-ads-summary--ok {
  background: rgba(52, 168, 83, 0.06);
  border-color: rgba(52, 168, 83, 0.25);
}

.domain-google-ads-summary--err {
  background: rgba(234, 67, 53, 0.06);
  border-color: rgba(234, 67, 53, 0.25);
}

.domain-google-ads-err {
  color: #c5221f;
  margin: 0;
}

.domain-google-ads-meta {
  margin: 0.35rem 0;
  font-size: 0.95rem;
}

.domain-google-ads-excerpt {
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  max-height: 14rem;
  overflow: auto;
}

.domain-google-ads-table-wrap {
  margin-top: 1rem;
}

.domain-google-ads-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.domain-google-ads-table th,
.domain-google-ads-table td {
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.domain-google-ads-table th {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(0, 0, 0, 0.55);
}

.domain-google-ads-tool .domain-google-ads-table th,
.domain-google-ads-tool .domain-google-ads-table td {
  border-bottom-color: var(--border, rgba(255, 255, 255, 0.1));
}

.domain-google-ads-tool .domain-google-ads-table th {
  color: var(--text-muted, #a3a3a3);
}

/* Grupo Google Ads: contenido y tabla al 100 % del ancho útil */
.domain-google-ads-tool .domain-tool-main-card,
.domain-google-ads-tool .video-scripts-page.domain-google-ads {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.domain-google-ads-tool .domain-google-ads-tab-panel {
  width: 100%;
  max-width: 100%;
}

.domain-google-ads-tool .domain-google-ads-table-wrap {
  width: 100%;
  max-width: 100%;
}

/* Palabras clave (2 columnas): término flexible, acciones en una sola fila */
.domain-google-ads-tool .domain-google-ads-table:not(.domain-google-ads-table--detail-neg) {
  table-layout: fixed;
}

.domain-google-ads-tool .domain-google-ads-table:not(.domain-google-ads-table--detail-neg) th:nth-child(1),
.domain-google-ads-tool .domain-google-ads-table:not(.domain-google-ads-table--detail-neg) td:nth-child(1) {
  width: auto;
  min-width: 0;
}

.domain-google-ads-tool .domain-google-ads-table:not(.domain-google-ads-table--detail-neg) th:nth-child(2),
.domain-google-ads-tool .domain-google-ads-table:not(.domain-google-ads-table--detail-neg) td:nth-child(2) {
  width: 13.5rem;
  max-width: 13.5rem;
  vertical-align: middle;
  white-space: nowrap;
}

.domain-google-ads-tool .domain-google-ads-kw-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  width: 100%;
  box-sizing: border-box;
}

.domain-google-ads-tool .domain-google-ads-kw-actions .btn-sm {
  flex-shrink: 0;
}

.domain-google-ads-tool .domain-google-ads-table .domain-form-input,
.domain-google-ads-tool .domain-google-ads-table select.domain-form-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.domain-google-ads-tool .domain-google-ads-table--detail-neg {
  table-layout: fixed;
}

.domain-google-ads-tool .domain-google-ads-table--detail-neg th:first-child,
.domain-google-ads-tool .domain-google-ads-table--detail-neg td:first-child {
  width: auto;
  min-width: 0;
}

.domain-google-ads-table--detail-neg th:last-child,
.domain-google-ads-table--detail-neg td:last-child {
  width: 6.5rem;
  vertical-align: middle;
  white-space: nowrap;
}

.domain-google-ads-rsa {
  margin-top: 1rem;
}

.domain-google-ads-rsa-title {
  margin: 1rem 0 0.4rem;
  font-size: 0.95rem;
}

.domain-google-ads-rsa-list li {
  margin: 0.35rem 0;
}

.domain-google-ads-len {
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.45);
  margin-left: 0.35rem;
}

.domain-google-ads-paths {
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

.domain-google-ads-subblock-title {
  margin: 1rem 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.domain-google-ads-neg-hint {
  margin-bottom: 0.65rem;
}

.domain-google-ads-table--neg th:first-child,
.domain-google-ads-table--neg td:first-child {
  width: 2.5rem;
  text-align: center;
  color: var(--text-muted);
}

.domain-google-ads-neg-block {
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border, rgba(0, 0, 0, 0.12));
}

.domain-google-ads-saved-lead {
  margin-top: 0.25rem;
}

.domain-google-ads-group-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1rem;
  margin-top: 0.35rem;
}

.domain-google-ads-group-card-main {
  flex: 1 1 14rem;
  min-width: 0;
}

.domain-google-ads-group-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.35rem;
}

.domain-google-ads-group-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}

.domain-google-ads-group-landing {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted, rgba(0, 0, 0, 0.55));
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domain-google-ads-group-landing--has {
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--dashboard-border, rgba(255, 255, 255, 0.08));
}

.domain-google-ads-group-meta {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.domain-google-ads-group-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

/* Lista de bloques RSA: dos columnas; misma altura por fila (stretch) */
.domain-google-ads-rsa-list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  align-items: stretch;
}

@media (max-width: 900px) {
  .domain-google-ads-rsa-list {
    grid-template-columns: 1fr;
  }
}

.domain-google-ads-rsa-list-block {
  margin-bottom: 0;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--border, #2a2a2a);
  min-width: 0;
}

/* Vista compacta (lista): la tarjeta y la fila de botones alinean altura entre columnas */
.domain-google-ads-rsa-list-block:not(.domain-google-ads-rsa-list-block--expanded) {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.domain-google-ads-rsa-list-block--expanded {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--accent, #f59e0b) 50%, var(--border, #2a2a2a));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #f59e0b) 28%, transparent);
}

.domain-google-ads-rsa-list-block-head {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.65rem;
}

.domain-google-ads-rsa-list-block-dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.35rem;
  border-radius: 50%;
  background: #34a853;
  box-shadow: 0 0 0 2px rgba(52, 168, 83, 0.28);
}

.domain-google-ads-rsa-list-block-head-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.domain-google-ads-rsa-list-block-head-text strong {
  font-size: 0.95rem;
  color: var(--text, #fff);
}

.domain-google-ads-rsa-list-block-sub {
  font-size: 0.8rem;
  color: var(--text-muted, #a3a3a3);
  line-height: 1.35;
}

.domain-google-ads-rsa-list-block-hit {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius-sm, 8px);
  transition: box-shadow 0.15s ease;
}

.domain-google-ads-rsa-list-block:not(.domain-google-ads-rsa-list-block--expanded) .domain-google-ads-rsa-list-block-hit {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
}

.domain-google-ads-rsa-list-block-hit:hover {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #f59e0b) 35%, transparent);
}

.domain-google-ads-rsa-list-block-hit:focus-visible {
  outline: 2px solid var(--accent, #f59e0b);
  outline-offset: 2px;
}

.domain-google-ads-rsa-preview-surface--in-list {
  padding: 0.65rem 0.75rem 0.8rem;
}

.domain-google-ads-rsa-list-block:not(.domain-google-ads-rsa-list-block--expanded) .domain-google-ads-rsa-preview-surface--in-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 11.5rem;
}

.domain-google-ads-rsa-list-block:not(.domain-google-ads-rsa-list-block--expanded)
  .domain-google-ads-rsa-preview-surface--in-list
  .domain-google-ads-serp-snippet-row--text-only {
  flex: 1;
  align-items: stretch;
}

.domain-google-ads-rsa-list-block:not(.domain-google-ads-rsa-list-block--expanded)
  .domain-google-ads-rsa-preview-surface--in-list
  .domain-google-ads-serp-snippet-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.domain-google-ads-rsa-list-block:not(.domain-google-ads-rsa-list-block--expanded) .domain-google-ads-rsa-list-block-toolbar {
  flex-shrink: 0;
  margin-top: 0.65rem;
}

.domain-google-ads-rsa-list-block-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.65rem;
}

.domain-google-ads-rsa-list-block-toolbar--expanded {
  margin-top: 0;
  margin-bottom: 0.85rem;
}

/* Editor + vista previa: dos columnas al 50 % (equivalente a 1fr 1fr con hueco) */
.domain-google-ads-rsa-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 960px) {
  .domain-google-ads-rsa-layout {
    grid-template-columns: 1fr;
  }
}

.domain-google-ads-rsa-editor {
  min-width: 0;
}

.domain-google-ads-rsa-path-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
  margin-bottom: 1.15rem;
}

.domain-google-ads-rsa-path-cell {
  margin: 0 !important;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.domain-google-ads-rsa-path-cell .domain-form-input {
  margin-top: 0 !important;
}

/* Sugerencias de palabras clave (cobertura en titulares / descripciones) */
.domain-google-ads-rsa-kw-performance {
  margin-bottom: 1.15rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border, #2a2a2a);
  background: rgba(0, 0, 0, 0.2);
}

.domain-google-ads-rsa-kw-performance-head {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted, #a3a3a3);
}

.domain-google-ads-rsa-kw-performance-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: center;
}

.domain-google-ads-rsa-kw-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text, #fff);
  border-bottom: 1px dashed var(--text-muted, #70757a);
  padding-bottom: 0.08rem;
  max-width: 100%;
  word-break: break-word;
}

.domain-google-ads-rsa-kw-chip-check {
  flex-shrink: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #188038;
  box-shadow: 0 0 0 2px rgba(24, 128, 56, 0.25);
}

.domain-google-ads-rsa-kw-chip--used {
  color: #6ee7a8;
  border-bottom-color: #188038;
  border-bottom-style: solid;
  font-weight: 500;
}

.domain-google-ads-rsa-kw-performance-list--more {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px dashed color-mix(in srgb, var(--border, #2a2a2a) 85%, var(--text-muted, #70757a));
}

.domain-google-ads-rsa-kw-empty-used {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted, #a3a3a3);
  font-style: italic;
}

.domain-google-ads-rsa-kw-more {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.2rem 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent, #f59e0b);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.domain-google-ads-rsa-kw-more:hover {
  color: color-mix(in srgb, var(--accent, #f59e0b) 88%, #fff);
}

.domain-google-ads-rsa-kw-more:focus-visible {
  outline: 2px solid var(--accent, #f59e0b);
  outline-offset: 2px;
  border-radius: 4px;
}

.domain-google-ads-rsa-list-block-toolbar--bottom {
  margin-top: 1rem;
  margin-bottom: 0 !important;
}

.domain-google-ads-rsa-fields-section {
  margin-bottom: 1.25rem;
}

.domain-google-ads-rsa-fields-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.65rem;
}

.domain-google-ads-rsa-fields-section-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent, #f59e0b);
}

.domain-google-ads-rsa-fields-section-meta {
  font-size: 0.78rem;
  color: var(--text-muted, #a3a3a3);
  line-height: 1.35;
}

.domain-google-ads-rsa-field-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.domain-google-ads-rsa-field-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}

.domain-google-ads-rsa-field-caption {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted, #a3a3a3);
}

.domain-google-ads-rsa-field-input {
  margin: 0 !important;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-family: inherit;
}

/* Una línea: si no cabe el texto, se puede desplazar en horizontal en lugar de recortarlo */
.domain-google-ads-rsa-field-row input.domain-google-ads-rsa-field-input {
  overflow-x: auto;
}

.domain-google-ads-rsa-field-textarea {
  resize: vertical;
  min-height: 4.25rem;
  max-height: 10rem;
  line-height: 1.45;
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.domain-google-ads-rsa-editor .domain-google-ads-row .domain-form-input {
  min-width: 0;
  overflow-x: auto;
  font-family: inherit;
}

.domain-google-ads-rsa-char-count {
  font-size: 0.75rem;
  color: var(--text-muted, #a3a3a3);
  text-align: right;
}

.domain-google-ads-rsa-field-remove {
  flex-shrink: 0;
  align-self: center;
}

.domain-google-ads-rsa-fields-add-row {
  margin-top: 0.1rem !important;
  margin-bottom: 0 !important;
}

.domain-google-ads-rsa-preview {
  position: sticky;
  top: 0.75rem;
  min-width: 0;
}

.domain-google-ads-rsa-preview-header {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #a3a3a3);
  margin: 0 0 0.35rem;
}

.domain-google-ads-rsa-preview-live {
  margin: 0 0 0.65rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted, #a3a3a3);
}

.domain-google-ads-rsa-preview-live strong {
  color: var(--accent, #f59e0b);
  font-weight: 600;
}

.domain-google-ads-rsa-preview-surface {
  background: #fff;
  color: #202124;
  border-radius: 12px;
  border: 1px solid #e8eaed;
  padding: 0.9rem 1rem 0.85rem;
  box-shadow: 0 1px 4px rgba(32, 33, 36, 0.08), 0 0 1px rgba(32, 33, 36, 0.06);
}

/* Ficha tipo resultado Google (texto reactivo al editor) */
.domain-google-ads-serp-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.domain-google-ads-serp-brand {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
}

.domain-google-ads-serp-favicon-wrap {
  flex-shrink: 0;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e8eaed;
  box-shadow: 0 1px 2px rgba(32, 33, 36, 0.06);
}

.domain-google-ads-serp-favicon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.domain-google-ads-serp-favicon.domain-google-ads-serp-favicon--fallback {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.domain-google-ads-serp-brand-text {
  min-width: 0;
}

.domain-google-ads-serp-brand-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #202124;
  line-height: 1.25;
  word-break: break-word;
  transition: color 0.12s ease;
}

.domain-google-ads-serp-brand-url {
  font-size: 0.78rem;
  color: #188038;
  line-height: 1.3;
  word-break: break-word;
  margin-top: 0.08rem;
  transition: color 0.12s ease;
}

.domain-google-ads-serp-menu {
  flex-shrink: 0;
  color: #70757a;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.15rem 0.25rem;
  letter-spacing: 0.06em;
}

.domain-google-ads-serp-headline-wrap {
  margin-bottom: 0.45rem;
}

.domain-google-ads-serp-headline {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.32;
  color: #1a0dab;
  word-break: break-word;
  transition: color 0.12s ease, opacity 0.12s ease;
}

.domain-google-ads-serp-headline-ph {
  padding-top: 0.15rem;
}

.domain-google-ads-serp-snippet-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.domain-google-ads-serp-snippet-row--text-only {
  gap: 0;
}

.domain-google-ads-serp-snippet-row--text-only .domain-google-ads-serp-snippet-main {
  flex: 1 1 100%;
  max-width: 100%;
}

.domain-google-ads-serp-snippet-main {
  flex: 1;
  min-width: 0;
}

.domain-google-ads-serp-snippet {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #4d5156;
  word-break: break-word;
  transition: color 0.12s ease;
}

.domain-google-ads-serp-snippet-body {
  color: #4d5156;
}

.domain-google-ads-serp-snippet--muted,
.domain-google-ads-serp-snippet--muted .domain-google-ads-serp-snippet-body {
  color: #70757a;
  font-size: 0.78rem;
}

.domain-google-ads-serp-snippet-ph {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.1rem;
}

.domain-google-ads-rsa-preview-surface--in-list {
  padding: 0.65rem 0.75rem 0.7rem;
}

.domain-google-ads-rsa-preview-surface--in-list .domain-google-ads-serp-headline {
  font-size: 1rem;
}

.domain-google-ads-rsa-preview-ph {
  display: block;
  height: 0.65rem;
  border-radius: 4px;
  background: linear-gradient(90deg, #e8eaed 0%, #f1f3f4 50%, #e8eaed 100%);
  background-size: 200% 100%;
  animation: domain-google-ads-preview-shimmer 2.2s ease-in-out infinite;
}

.domain-google-ads-rsa-preview-ph--lg {
  width: 92%;
  margin-bottom: 0.35rem;
}

.domain-google-ads-rsa-preview-ph--md {
  width: 68%;
}

.domain-google-ads-rsa-preview-ph--line {
  width: 100%;
  height: 0.55rem;
}

@keyframes domain-google-ads-preview-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .domain-google-ads-rsa-preview-ph {
    animation: none;
    background: #e8eaed;
  }
}

.domain-google-ads-rsa-preview-foot {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-muted, #a3a3a3);
}

.sitio-dashboard-quick-card--google-ads .sitio-dashboard-quick-icon {
  font-size: 1.35rem;
}
/* Vista previa: sin scroll interno; crece con el documento y el scroll es el de la página */
.domain-marketing-plan-detail .domain-marketing-plan-md-preview {
  width: 100%;
  box-sizing: border-box;
  min-height: 14rem;
  padding: 1.75rem 2rem 2.25rem;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border, #2a2a2a);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.95rem;
  line-height: 1.7;
  overflow: visible;
}

.domain-marketing-plan-detail .domain-marketing-plan-md-preview h1 {
  font-size: 1.5rem;
  margin: 0 0 1.25rem;
  line-height: 1.25;
  font-weight: 700;
}

.domain-marketing-plan-detail .domain-marketing-plan-md-preview h2 {
  font-size: 1.15rem;
  margin: 2rem 0 0.85rem;
  line-height: 1.3;
  padding-top: 0.25rem;
}

.domain-marketing-plan-detail .domain-marketing-plan-md-preview h2:first-of-type {
  margin-top: 1.25rem;
}

.domain-marketing-plan-detail .domain-marketing-plan-md-preview p {
  margin: 0 0 1.1rem;
}

.domain-marketing-plan-detail .domain-marketing-plan-md-preview p:last-child {
  margin-bottom: 0;
}

.domain-marketing-plan-detail .domain-marketing-plan-md-preview ul,
.domain-marketing-plan-detail .domain-marketing-plan-md-preview ol {
  margin: 0 0 1.15rem;
  padding-left: 1.5rem;
}

.domain-marketing-plan-detail .domain-marketing-plan-md-preview li {
  margin: 0.35rem 0;
}

.domain-marketing-plan-detail .domain-marketing-plan-md-preview li > p {
  margin: 0.25rem 0;
}

.domain-marketing-plan-detail .domain-marketing-plan-md-preview table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 1.25rem 0 1.75rem;
  line-height: 1.55;
}

.domain-marketing-plan-detail .domain-marketing-plan-md-preview th,
.domain-marketing-plan-detail .domain-marketing-plan-md-preview td {
  border: 1px solid var(--border, #333);
  padding: 0.65rem 0.85rem;
  text-align: left;
  vertical-align: top;
}

.domain-marketing-plan-detail .domain-marketing-plan-md-preview th {
  background: rgba(255, 255, 255, 0.04);
  font-weight: 600;
}

.domain-marketing-plan-detail .domain-marketing-plan-md-preview blockquote {
  margin: 1rem 0 1.25rem;
  padding: 0.5rem 0 0.5rem 1rem;
  border-left: 3px solid rgba(194, 65, 12, 0.45);
  color: var(--text-muted, #c4c4c4);
}

.domain-marketing-plan-detail .domain-marketing-plan-md-preview h3 {
  font-size: 1.02rem;
  margin: 1.35rem 0 0.55rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text, #e8e8e8);
}

.domain-marketing-plan-detail .domain-marketing-plan-md-preview a {
  color: #7dd3fc;
  text-decoration: underline;
}

.domain-marketing-plan-detail .domain-marketing-plan-md-preview a:hover {
  color: #bae6fd;
}

.domain-marketing-plan-detail .domain-marketing-plan-md-preview em {
  font-style: italic;
}

.domain-marketing-plan-detail .domain-marketing-plan-md-preview hr {
  border: none;
  border-top: 1px solid var(--border, #444);
  margin: 1.35rem 0;
}

.domain-marketing-plan-detail .domain-marketing-plan-md-preview code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.12rem 0.35rem;
  border-radius: 4px;
}

.domain-marketing-plan-detail .domain-marketing-plan-md-preview pre {
  margin: 0.85rem 0 1.1rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border, #333);
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.5;
}

.domain-marketing-plan-detail .domain-marketing-plan-md-preview pre code {
  background: none;
  padding: 0;
}

.domain-marketing-plan-detail .domain-marketing-plan-preview-empty {
  color: var(--text-muted, #888);
  margin: 0;
}

.domain-marketing-plan-view-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Portal en dashboard-header: alineado al titular */
.domain-marketing-plan-dashboard-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 0.65rem;
  width: 100%;
}

/* Pie del plan: mismos botones alineados a la derecha */
.domain-marketing-plan-footer-actions.domain-google-ads-create-actions {
  justify-content: flex-end;
  width: 100%;
  gap: 0.5rem 0.65rem;
}

.domain-marketing-plan-export-wrap {
  position: relative;
}

.domain-marketing-plan-export-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  min-width: 12rem;
  padding: 0.35rem 0;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border, #333);
  background: var(--surface-elevated, #1a1a1a);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* Pie: menú hacia arriba (evita que quede fuera del viewport) */
.domain-marketing-plan-export-wrap--up .domain-marketing-plan-export-menu {
  top: auto;
  bottom: calc(100% + 4px);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45);
}

.domain-marketing-plan-export-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.85rem;
  border: none;
  background: transparent;
  color: var(--text, #eee);
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.domain-marketing-plan-export-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}

.domain-marketing-plan-export-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .domain-marketing-plan-dashboard-header-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Píldora tipo referencia: carbón, texto blanco en negrita (Editar Plan / Ver Plan) */
.domain-marketing-plan-toggle-btn {
  padding: 0.52rem 1.35rem;
  border-radius: var(--radius-pill, 9999px);
  border: none;
  background: #2d2d2d;
  color: #ffffff;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: -0.01em;
  line-height: 1.25;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.domain-marketing-plan-toggle-btn:hover {
  background: #3d3d3d;
  color: #ffffff;
}

.domain-marketing-plan-toggle-btn:active {
  transform: scale(0.98);
}

/* Foco en vista previa (fuera del shell TipTap el *:focus-visible global sigue activo) */
.domain-marketing-plan-toggle-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
}

/* Editor tipo Word (TipTap) */
.domain-marketing-plan-rt-root {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.domain-marketing-plan-rt-root--editor-only {
  width: 100%;
}

.domain-marketing-plan-rt-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border, #2a2a2a);
  background: rgba(255, 255, 255, 0.02);
  overflow: visible;
}

.domain-marketing-plan-rt-toolbar-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-bottom: 1px solid var(--border, #2a2a2a);
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(18, 18, 18, 0.96);
}

.domain-marketing-plan-rt-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  background: rgba(0, 0, 0, 0.25);
}

.domain-marketing-plan-rt-toolbar--table {
  border-top: 1px solid rgba(194, 65, 12, 0.25);
  background: rgba(194, 65, 12, 0.08);
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.domain-marketing-plan-rt-toolbar-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fec6a2;
  margin-right: 0.25rem;
}

.domain-marketing-plan-rt-sep {
  display: inline-block;
  width: 1px;
  height: 1.1rem;
  background: var(--border, #444);
  margin: 0 0.15rem;
  flex-shrink: 0;
}

.domain-marketing-plan-rt-btn--danger:hover:not(:disabled) {
  border-color: #b91c1c;
  color: #fecaca;
}

.domain-marketing-plan-rt-select {
  font-size: 0.82rem;
  padding: 0.28rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--border, #444);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text, #fff);
  max-width: 11rem;
}

.domain-marketing-plan-rt-btn {
  font-size: 0.78rem;
  padding: 0.28rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border, #444);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted, #ccc);
  cursor: pointer;
}

.domain-marketing-plan-rt-btn:hover:not(:disabled) {
  color: var(--text, #fff);
  border-color: var(--text-muted, #666);
}

.domain-marketing-plan-rt-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.domain-marketing-plan-rt-btn--on {
  border-color: var(--accent, #c2410c);
  color: #fec6a2;
  background: rgba(194, 65, 12, 0.15);
}

.domain-marketing-plan-rt-editor-wrap {
  padding: 1.25rem 1.5rem 2rem;
  overflow: visible;
}

.domain-marketing-plan-prosemirror {
  outline: none;
  min-height: 18rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text, #eee);
}

.domain-marketing-plan-prosemirror p {
  margin: 0 0 1.05rem;
}

.domain-marketing-plan-prosemirror p:last-child {
  margin-bottom: 0;
}

.domain-marketing-plan-prosemirror h1 {
  font-size: 1.5rem;
  margin: 0 0 1.15rem;
  font-weight: 700;
  line-height: 1.25;
}

.domain-marketing-plan-prosemirror h2 {
  font-size: 1.15rem;
  margin: 1.85rem 0 0.75rem;
  font-weight: 600;
  color: #fec6a2;
  line-height: 1.3;
}

.domain-marketing-plan-prosemirror h2:first-child {
  margin-top: 0;
}

.domain-marketing-plan-prosemirror h3 {
  font-size: 1rem;
  margin: 1.35rem 0 0.55rem;
  font-weight: 600;
  line-height: 1.35;
}

.domain-marketing-plan-prosemirror h4 {
  font-size: 0.92rem;
  margin: 1.1rem 0 0.45rem;
  font-weight: 600;
  line-height: 1.4;
  color: #d4d4d4;
}

.domain-marketing-plan-prosemirror ul,
.domain-marketing-plan-prosemirror ol {
  margin: 0 0 1.1rem;
  padding-left: 1.5rem;
}

.domain-marketing-plan-prosemirror li {
  margin: 0.35rem 0;
}

.domain-marketing-plan-prosemirror table,
.domain-marketing-plan-prosemirror .marketing-plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 1.15rem 0 1.5rem;
  line-height: 1.55;
}

.domain-marketing-plan-prosemirror th,
.domain-marketing-plan-prosemirror td {
  border: 1px solid var(--border, #444);
  padding: 0.6rem 0.8rem;
  text-align: left;
  vertical-align: top;
}

.domain-marketing-plan-prosemirror th {
  background: rgba(255, 255, 255, 0.05);
  font-weight: 600;
}

.domain-marketing-plan-prosemirror hr {
  border: none;
  border-top: 1px solid var(--border, #444);
  margin: 1rem 0;
}

.domain-marketing-plan-prosemirror a {
  color: #7dd3fc;
}

.domain-marketing-plan-prosemirror .is-editor-empty:first-child::before {
  color: var(--text-muted, #666);
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

/* —— TipTap: cinta completa + lienzo negro (estilo plantilla, tema oscuro) —— */
.domain-marketing-plan-tiptap-dark-shell {
  background: #050505;
  border-color: #262626 !important;
}

.domain-marketing-plan-tiptap-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border, #2a2a2a);
  background: #050505;
  overflow: visible;
}

/* Barra TipTap sticky bajo el topbar del dashboard (index.css: .dashboard-topbar sticky z-index 100) */
.domain-marketing-plan-tiptap-sticky-chrome {
  position: sticky;
  top: var(--topbar-height, 4rem);
  z-index: 10;
  flex-shrink: 0;
  background: rgba(12, 12, 12, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #1f1f1f;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}

.domain-marketing-plan-tiptap-editor-body {
  min-width: 0;
}

.domain-marketing-plan-tiptap-editor-body .domain-marketing-plan-tiptap-editor-canvas {
  border-top: none;
}

.domain-marketing-plan-tiptap-editor-inner {
  position: relative;
  min-height: 22rem;
}

/* WYSIWYG sigue montado (TipTap) pero fuera de flujo mientras se edita Markdown */
.domain-marketing-plan-tiptap-wysiwyg-wrap--suspended {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Markdown en flujo normal: misma altura/scroll que el documento (sin caja con scroll propio) */
.domain-marketing-plan-md-flow {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
}

.domain-marketing-plan-md-textarea {
  display: block;
  width: 100%;
  min-height: 22rem;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #ececec;
  background: #000000;
  border: none;
  border-radius: 0;
  resize: none;
  overflow: hidden;
}

.domain-marketing-plan-md-textarea:focus {
  outline: none;
}

.domain-marketing-plan-md-textarea:focus-visible {
  outline: 2px solid rgba(249, 115, 22, 0.4);
  outline-offset: 2px;
}

.domain-marketing-plan-md-layer-hint {
  margin: 0;
  flex-shrink: 0;
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Anula el *:focus-visible global (index.css) dentro del editor WYSIWYG */
.domain-marketing-plan-tiptap-dark-shell *:focus-visible {
  outline: none;
  outline-offset: 0;
}

.domain-marketing-plan-tiptap-toolbar-stack {
  display: flex;
  flex-direction: column;
  background: #0a0a0a;
}

.domain-marketing-plan-tiptap-toolbar-ribbon {
  background: #0a0a0a;
}

.domain-marketing-plan-tiptap-toolbar-ribbon--table {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.55rem;
  border-top: 1px solid rgba(194, 65, 12, 0.35);
  background: rgba(194, 65, 12, 0.07);
}

.domain-marketing-plan-tiptap-table-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fdba74;
  margin-right: 0.35rem;
}

.domain-marketing-plan-tiptap-tmini {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
}

.domain-marketing-plan-tiptap-toolbar-scroll {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  padding: 0.45rem 0.5rem;
  max-width: 100%;
}

.domain-marketing-plan-tiptap-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0 0.35rem;
  border-right: 1px solid #2a2a2a;
}

.domain-marketing-plan-tiptap-toolbar-group:last-of-type {
  border-right: none;
}

.domain-marketing-plan-tiptap-insert-wrap {
  position: relative;
  padding: 0 0.35rem;
  border-right: none;
}

.domain-marketing-plan-tiptap-insert-wrap .domain-marketing-plan-tiptap-toolbar-group {
  border-right: none;
  padding: 0;
}

.domain-marketing-plan-tiptap-ibtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #b3b3b3;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.domain-marketing-plan-tiptap-ibtn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: #fafafa;
}

.domain-marketing-plan-tiptap-ibtn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

.domain-marketing-plan-tiptap-ibtn--active {
  background: rgba(194, 65, 12, 0.22) !important;
  color: #fed7aa !important;
}

.domain-marketing-plan-tiptap-ibtn--danger:hover:not(:disabled) {
  background: rgba(185, 28, 28, 0.25);
  color: #fecaca;
}

/* Desplegable «Titular» (bloque párrafo / H1–H4), alineado al tema oscuro del toolbar */
.domain-marketing-plan-tiptap-blocktype-wrap {
  position: relative;
}

.domain-marketing-plan-tiptap-blocktype-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2.1rem;
  min-width: 4.25rem;
  padding: 0 0.5rem 0 0.55rem;
  border-radius: 8px;
  border: 1px solid #3f3f3f;
  background: #141414;
  color: #e5e5e5;
  cursor: pointer;
  font: inherit;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.domain-marketing-plan-tiptap-blocktype-trigger:hover {
  background: #1c1c1c;
  border-color: #525252;
}

.domain-marketing-plan-tiptap-blocktype-trigger.is-open {
  border-color: rgba(194, 65, 12, 0.65);
  box-shadow: 0 0 0 2px rgba(194, 65, 12, 0.22);
  background: #1a1410;
}

.domain-marketing-plan-tiptap-blocktype-trigger:focus-visible {
  outline: none;
  border-color: #c2410c;
  box-shadow: 0 0 0 2px rgba(194, 65, 12, 0.35);
}

.domain-marketing-plan-tiptap-blocktype-trigger-badge {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #a5b4fc;
  line-height: 1;
}

.domain-marketing-plan-tiptap-blocktype-trigger-badge.is-p {
  color: #a3a3a3;
}

.domain-marketing-plan-tiptap-blocktype-trigger-chevron {
  flex-shrink: 0;
  color: #737373;
  opacity: 0.95;
}

.domain-marketing-plan-tiptap-blocktype-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 45;
  min-width: 13.5rem;
  padding: 0.4rem;
  border-radius: 10px;
  border: 1px solid #333;
  background: #121212;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65), 0 4px 14px rgba(0, 0, 0, 0.45);
}

.domain-marketing-plan-tiptap-blocktype-item {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  width: 100%;
  padding: 0.42rem 0.55rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #ececec;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background 0.1s ease;
}

.domain-marketing-plan-tiptap-blocktype-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.domain-marketing-plan-tiptap-blocktype-item.is-active {
  background: rgba(194, 65, 12, 0.18);
}

.domain-marketing-plan-tiptap-blocktype-prefix {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #737373;
  letter-spacing: -0.02em;
  min-width: 1.65rem;
}

.domain-marketing-plan-tiptap-blocktype-item.is-active .domain-marketing-plan-tiptap-blocktype-prefix {
  color: #fdba74;
}

.domain-marketing-plan-tiptap-blocktype-label {
  font-weight: 700;
  line-height: 1.25;
  color: #f5f5f5;
}

.domain-marketing-plan-tiptap-blocktype-label--p {
  font-size: 0.9rem;
  font-weight: 600;
}

.domain-marketing-plan-tiptap-blocktype-label--h1 {
  font-size: 1.125rem;
}

.domain-marketing-plan-tiptap-blocktype-label--h2 {
  font-size: 1.02rem;
}

.domain-marketing-plan-tiptap-blocktype-label--h3 {
  font-size: 0.95rem;
}

.domain-marketing-plan-tiptap-blocktype-label--h4 {
  font-size: 0.88rem;
}

.domain-marketing-plan-tiptap-insert-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2.1rem;
  padding: 0 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #d4d4d4;
  background: #141414;
  border: 1px solid #333;
  border-radius: 6px;
  cursor: pointer;
}

.domain-marketing-plan-tiptap-insert-btn:hover {
  background: #1c1c1c;
  color: #fff;
  border-color: #444;
}

.domain-marketing-plan-tiptap-insert-btn.is-open {
  border-color: #c2410c;
  background: rgba(194, 65, 12, 0.12);
  color: #fed7aa;
}

.domain-marketing-plan-tiptap-md-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.1rem;
  padding: 0 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  color: #d4d4d4;
  background: #141414;
  border: 1px solid #333;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.domain-marketing-plan-tiptap-md-toolbar-btn:hover {
  background: #1c1c1c;
  color: #fff;
  border-color: #444;
}

.domain-marketing-plan-tiptap-md-toolbar-btn.is-active {
  border-color: #c2410c;
  background: rgba(194, 65, 12, 0.12);
  color: #fed7aa;
}

.domain-marketing-plan-tiptap-insert-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  min-width: 12rem;
  padding: 0.35rem;
  border-radius: 8px;
  border: 1px solid #333;
  background: #121212;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

.domain-marketing-plan-tiptap-insert-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  font-size: 0.82rem;
  color: #e5e5e5;
  text-align: left;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.domain-marketing-plan-tiptap-insert-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.domain-marketing-plan-tiptap-insert-item svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.domain-marketing-plan-tiptap-editor-canvas {
  background: #000000;
  border-top: 1px solid #1a1a1a;
  padding: 1.35rem 1.5rem 2.25rem;
}

.domain-marketing-plan-tiptap-dark-shell .domain-marketing-plan-prosemirror {
  min-height: 22rem;
  background: #000000;
  color: #ececec;
}

.domain-marketing-plan-tiptap-dark-shell .domain-marketing-plan-prosemirror ::selection {
  background: rgba(194, 65, 12, 0.45);
  color: #fff;
}

.domain-marketing-plan-tiptap-dark-shell .domain-marketing-plan-prosemirror blockquote {
  margin: 1rem 0 1.1rem;
  padding: 0.5rem 0 0.5rem 1rem;
  border-left: 3px solid rgba(249, 115, 22, 0.65);
  background: rgba(255, 255, 255, 0.03);
  color: #c4c4c4;
}

.domain-marketing-plan-tiptap-dark-shell .domain-marketing-plan-prosemirror pre {
  margin: 0.85rem 0 1.1rem;
  padding: 0.9rem 1rem;
  border-radius: 8px;
  background: #111111;
  border: 1px solid #262626;
  font-size: 0.84rem;
  line-height: 1.5;
  overflow-x: auto;
  color: #e5e5e5;
}

.domain-marketing-plan-tiptap-dark-shell .domain-marketing-plan-prosemirror pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

.domain-marketing-plan-tiptap-dark-shell .domain-marketing-plan-prosemirror code {
  background: rgba(255, 255, 255, 0.08);
  color: #fbbf77;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.88em;
}

.domain-marketing-plan-tiptap-dark-shell .domain-marketing-plan-prosemirror th {
  background: rgba(255, 255, 255, 0.06);
}

.domain-marketing-plan-tiptap-dark-shell .domain-marketing-plan-prosemirror td,
.domain-marketing-plan-tiptap-dark-shell .domain-marketing-plan-prosemirror th {
  border-color: #333;
}
/*
 * Chat flotante: panel por encima del FAB (z-index mayor). Con panel abierto el FAB sigue ahí pero detrás.
 */
.agent-assistant-fab-wrap {
  --agent-fab-size: 56px;
  --agent-panel-fab-gap: 12px;
  position: fixed;
  right: calc(1.5rem + env(safe-area-inset-right, 0px));
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 9990;
}

/* Con el chat abierto, WhatsApp + FAB quedan por debajo del panel (no cubren Enviar ni el campo). */
.agent-assistant-fab-wrap--panel-open {
  z-index: 9970;
}

.agent-assistant-fab-cluster {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* A la izquierda del FAB cuando el panel está abierto (icono X) */
.agent-assistant-fab-side-whatsapp {
  flex-shrink: 0;
  width: var(--agent-fab-size);
  height: var(--agent-fab-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.agent-assistant-fab-side-whatsapp:hover {
  color: #fff;
  transform: scale(1.05);
  filter: brightness(1.05);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

.agent-assistant-fab-side-whatsapp:focus-visible {
  outline: 2px solid #25d366;
  outline-offset: 3px;
}


.agent-assistant-fab {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  /* Fondo opaco (en tema oscuro un degradado solo con --primary puede parecer “vacío”) */
  background-color: var(--primary);
  background: #1a1a1a;
  border: 2px solid color-mix(in srgb, var(--primary) 65%, #ffffff);
  color: var(--primary-contrast, #fff);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.22) inset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.agent-assistant-fab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.agent-assistant-fab-icon svg {
  flex-shrink: 0;
}

.agent-assistant-fab:hover {
  transform: scale(1.05);
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.28) inset;
}

.agent-assistant-fab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  transform: none;
}

.agent-assistant-panel {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Tarjeta encima del FAB (misma columna derecha); por debajo de modales (10000) */
.agent-assistant-panel--float {
  --agent-fab-size: 56px;
  --agent-panel-fab-gap: 12px;
  position: fixed;
  z-index: 9998;
  right: calc(1.5rem + env(safe-area-inset-right, 0px));
  bottom: calc(
    1.5rem + var(--agent-fab-size) + var(--agent-panel-fab-gap) + env(safe-area-inset-bottom, 0px)
  );
  width: min(420px, calc(100vw - 24px));
  max-height: min(72vh, 640px);
  min-height: min(72vh, 640px);
  animation: agent-assistant-float-in 0.22s ease;
  transition:
    width 0.2s ease,
    max-height 0.2s ease,
    min-height 0.2s ease;
}

.agent-assistant-panel--float.agent-assistant-panel--float-expanded {
  width: min(720px, calc(100vw - 24px));
  max-height: min(90vh, 900px);
  min-height: min(90vh, 900px);
}

@keyframes agent-assistant-float-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes agent-assistant-float-in-mobile {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .agent-assistant-panel--float {
    top: var(--topbar-height);
    right: 0;
    left: 0;
    width: 100%;
    max-width: none;
    min-height: 0;
    max-height: none;
    height: calc(100vh - var(--topbar-height));
    border-radius: 0;
    box-shadow: none;
    animation: agent-assistant-float-in-mobile 0.24s ease;
    transition: none;
  }

  .agent-assistant-panel--float.agent-assistant-panel--float-expanded {
    width: 100%;
    max-height: none;
    min-height: 0;
    height: calc(100vh - var(--topbar-height));
  }

  .agent-assistant-composer-expand {
    display: none !important;
  }

  @supports (height: 100dvh) {
    .agent-assistant-panel--float {
      height: calc(100dvh - var(--topbar-height));
    }
  }
}

.agent-assistant-panel-header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 96%, var(--primary));
}

.agent-assistant-panel-brand {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
  flex: 1 1 auto;
}

.agent-assistant-avatar-wrap {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--primary) 45%, var(--border));
  background: var(--bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.agent-assistant-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.agent-assistant-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-contrast, #fff);
  background: linear-gradient(145deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #000));
}

.agent-assistant-panel-brand-text {
  min-width: 0;
}

.agent-assistant-panel-hint {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
}

.agent-assistant-panel-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
}

.agent-assistant-panel-sub {
  margin: 4px 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.35;
}

.agent-assistant-panel-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.agent-assistant-btn-text {
  border: 2px solid color-mix(in srgb, var(--primary) 65%, #ffffff);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.22) inset;
  padding: 10px;
  background: transparent;
  color: var(--primary);
  font-size: var(--text-xs);
  cursor: pointer;
  border-radius: var(--radius-sm, 6px);
}

.agent-assistant-btn-text:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.agent-assistant-btn-text:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.agent-assistant-panel-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agent-assistant-panel-close:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}

.agent-assistant-panel-expand {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agent-assistant-panel-expand:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}

.agent-assistant-panel-expand[aria-pressed='true'] {
  color: var(--primary);
}

.agent-assistant-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: linear-gradient(
    165deg,
    rgba(249, 115, 22, 0.07) 0%,
    var(--bg-subtle, rgba(148, 163, 184, 0.05)) 42%,
    rgba(15, 23, 42, 0.35) 100%
  );
}

.agent-assistant-load-wrap {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding-bottom: 2px;
}

.agent-assistant-load-more {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 92%, var(--primary));
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-pill, 9999px);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.agent-assistant-load-more:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 14%, var(--bg-elevated));
}

.agent-assistant-load-more:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.agent-assistant-empty {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
  padding: var(--space-2);
}

.agent-assistant-bubble {
  max-width: 92%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md, 10px);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.agent-assistant-bubble--user {
  align-self: flex-end;
  background: color-mix(in srgb, var(--primary) 18%, #241a14);
  background: rgba(249, 115, 22, 0.08);
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.agent-assistant-bubble--assistant {
  align-self: flex-start;
  background: var(--bg);
  border: 1px solid var(--border);
}

.agent-assistant-bubble-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.agent-assistant-bubble-text {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}

/* Mensajes del asistente: Markdown (**negrita**, listas, `código`) vía react-markdown */
.agent-assistant-bubble-text--markdown {
  white-space: normal;
}

.agent-assistant-bubble-text--markdown p {
  margin: 0 0 0.65em;
}

.agent-assistant-bubble-text--markdown p:last-child {
  margin-bottom: 0;
}

.agent-assistant-bubble-text--markdown strong {
  font-weight: 600;
  color: var(--text);
}

.agent-assistant-bubble-text--markdown em {
  font-style: italic;
}

.agent-assistant-bubble-text--markdown ul,
.agent-assistant-bubble-text--markdown ol {
  margin: 0.35em 0 0.65em;
  padding-left: 1.35em;
}

.agent-assistant-bubble-text--markdown li {
  margin: 0.25em 0;
}

.agent-assistant-bubble-text--markdown li > p {
  margin: 0.25em 0;
}

.agent-assistant-bubble-text--markdown code {
  font-family: ui-monospace, monospace;
  font-size: 0.88em;
  padding: 0.12em 0.4em;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

.agent-assistant-bubble-text--markdown pre {
  margin: 0.5em 0;
  padding: 0.6em 0.75em;
  overflow-x: auto;
  border-radius: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.agent-assistant-bubble-text--markdown pre code {
  padding: 0;
  background: none;
  font-size: 0.85em;
}

.agent-assistant-bubble-text--markdown a {
  color: var(--primary);
  text-decoration: underline;
}

.agent-assistant-bubble-text--markdown a:hover {
  text-decoration: none;
}

.agent-assistant-bubble-text--markdown blockquote {
  margin: 0.5em 0;
  padding-left: 0.85em;
  border-left: 3px solid color-mix(in srgb, var(--primary) 55%, var(--border));
  color: var(--text-muted);
}

.agent-assistant-bubble-text--markdown h1,
.agent-assistant-bubble-text--markdown h2,
.agent-assistant-bubble-text--markdown h3 {
  margin: 0.75em 0 0.4em;
  font-size: 1.05em;
  font-weight: 600;
}

.agent-assistant-bubble-text--markdown h1:first-child,
.agent-assistant-bubble-text--markdown h2:first-child,
.agent-assistant-bubble-text--markdown h3:first-child {
  margin-top: 0;
}

.agent-assistant-bubble-text--markdown h4,
.agent-assistant-bubble-text--markdown h5,
.agent-assistant-bubble-text--markdown h6 {
  margin: 1.1em 0 0.5em;
  font-size: 0.98em;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.agent-assistant-bubble-text--markdown h4:first-child,
.agent-assistant-bubble-text--markdown h5:first-child,
.agent-assistant-bubble-text--markdown h6:first-child {
  margin-top: 0;
}

/* Separadores --- / *** : aire antes y después para que el texto no pegue a la línea */
.agent-assistant-bubble-text--markdown hr {
  margin: 1.35em 0;
  padding: 0;
  height: 0;
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--border) 88%, var(--text));
}

.agent-assistant-bubble-text--markdown p + hr {
  margin-top: 1.5em;
}

.agent-assistant-bubble-text--markdown hr + p,
.agent-assistant-bubble-text--markdown hr + ul,
.agent-assistant-bubble-text--markdown hr + ol,
.agent-assistant-bubble-text--markdown hr + h1,
.agent-assistant-bubble-text--markdown hr + h2,
.agent-assistant-bubble-text--markdown hr + h3,
.agent-assistant-bubble-text--markdown hr + h4,
.agent-assistant-bubble-text--markdown hr + h5,
.agent-assistant-bubble-text--markdown hr + h6 {
  margin-top: 0.35em;
}

.agent-assistant-bubble-text--markdown hr + h1,
.agent-assistant-bubble-text--markdown hr + h2,
.agent-assistant-bubble-text--markdown hr + h3,
.agent-assistant-bubble-text--markdown hr + h4,
.agent-assistant-bubble-text--markdown hr + h5,
.agent-assistant-bubble-text--markdown hr + h6 {
  margin-top: 0.85em;
}

.agent-assistant-bubble--typing {
  display: flex;
  gap: 5px;
  padding: 12px 16px;
}

.agent-assistant-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: agent-assistant-pulse 1s ease-in-out infinite;
}

.agent-assistant-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.agent-assistant-dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes agent-assistant-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.agent-assistant-composer {
  flex-shrink: 0;
  padding: var(--space-3);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: color-mix(in srgb, var(--bg-elevated) 88%, var(--bg));
}

.agent-assistant-composer-hint {
  margin: 0;
  font-size: var(--text-xs, 0.75rem);
  line-height: 1.35;
  color: color-mix(in srgb, var(--text) 72%, var(--bg));
}

.agent-assistant-composer-hint kbd,
.agent-assistant-empty kbd {
  display: inline-block;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
  font-family: ui-monospace, monospace;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg) 85%, var(--text));
}

.agent-assistant-input-field-wrap {
  position: relative;
  width: 100%;
}

/* Popover @ / — referencia: lista flotante, sombra, fila con avatar y foco con borde */
.agent-assistant-mention-popover {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin-bottom: 6px;
  z-index: 5;
  max-height: min(280px, 42vh);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 12px;
  background: var(--bg-elevated, var(--bg));
  box-shadow:
    0 -2px 4px color-mix(in srgb, var(--text) 6%, transparent),
    0 -12px 40px color-mix(in srgb, var(--text) 14%, transparent);
}

.agent-assistant-mention-empty {
  padding: var(--space-3) var(--space-2);
  font-size: var(--text-sm);
  text-align: center;
  color: color-mix(in srgb, var(--text) 62%, var(--bg));
}

.agent-assistant-mention-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  margin: 0 0 2px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

.agent-assistant-mention-option:last-child {
  margin-bottom: 0;
}

.agent-assistant-mention-option:hover:not(.is-active) {
  background: color-mix(in srgb, var(--text) 5%, var(--bg-elevated, var(--bg)));
}

.agent-assistant-mention-option.is-active {
  background: color-mix(in srgb, var(--bg-elevated, var(--bg)) 100%, transparent);
  border-color: color-mix(in srgb, var(--primary) 75%, #2563eb);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}

.agent-assistant-mention-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary) 14%, var(--bg));
  color: color-mix(in srgb, var(--primary) 88%, var(--text));
}

.agent-assistant-mention-popover--slash .agent-assistant-mention-avatar {
  background: color-mix(in srgb, var(--text) 10%, var(--bg));
  color: color-mix(in srgb, var(--text) 78%, var(--bg));
}

.agent-assistant-mention-icon-svg {
  display: block;
}

.agent-assistant-mention-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.agent-assistant-mention-title {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.agent-assistant-mention-meta {
  font-size: var(--text-xs, 0.75rem);
  line-height: 1.35;
  color: color-mix(in srgb, var(--text) 58%, var(--bg));
}

.agent-assistant-input {
  width: 100%;
  resize: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--bg);
}

.agent-assistant-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.agent-assistant-input:disabled {
  opacity: 0.65;
}

.agent-assistant-composer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.agent-assistant-composer-expand {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: var(--radius-sm, 6px);
}

.agent-assistant-composer-expand svg {
  width: 20px;
  height: 20px;
}

.agent-assistant-send {
  flex-shrink: 0;
  margin-left: auto;
}
/* ========== LAYOUT PRINCIPAL ========== */
.dashboard-layout {
  /* Altura mínima al viewport; el contenido puede crecer y el scroll lo gestiona el navegador (documento) */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  --sidebar-width: 260px;
  --sidebar-sub-width: 232px;
  --sidebar-rail-width: var(--sidebar-width);
}

@supports (height: 100dvh) {
  .dashboard-layout {
    min-height: 100dvh;
  }
}

.dashboard-layout.dashboard-layout--sidebar-collapsed {
  --sidebar-width: 72px;
}

/* Mismo contenido que .dashboard-sidebar-secondary: ocultar la franja horizontal en todos los anchos */
.dashboard-layout--dual-sidebar .dominio-subnav {
  display: none;
}

@media (max-width: 900px) {
  .dashboard-layout.dashboard-layout--sidebar-collapsed {
    --sidebar-width: 260px;
  }
}

.dashboard-body {
  display: flex;
  flex: 1 1 0%;
  min-height: 0;
  overflow: visible;
}

.dashboard-view-as-banner {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.15), rgba(234, 179, 8, 0.08));
  border-bottom: 1px solid rgba(234, 179, 8, 0.3);
  font-size: var(--text-sm);
  position: relative;
  z-index: 25;
}
.dashboard-view-as-text {
  color: var(--text);
}
.dashboard-view-as-exit {
  flex-shrink: 0;
}

.dashboard-topbar {
  flex-shrink: 0;
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.dashboard-topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
  min-height: var(--topbar-height);
  padding: 0 var(--space-6);
  max-width: none;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.dashboard-topbar-hamburger {
  display: none;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text);
  transition: background var(--transition), border-color var(--transition);
}

.dashboard-topbar-hamburger:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.dashboard-topbar-hamburger-icon {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.dashboard-topbar-logo {
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  margin-right: var(--space-2);
  transition: color var(--transition);
}

.dashboard-topbar-logo:hover {
  color: var(--accent);
  text-decoration: none;
}

.dashboard-topbar-title {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-muted);
}

.dashboard-topbar-breadcrumb-slot {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Visible solo en topbar móvil (≤900px); acceso rápido a artículos */
.dashboard-topbar-redaccion-ia {
  display: none;
  align-items: flex-end;
  justify-content: flex-start;
  max-width: 100%;
  padding: 0;
  font-size: clamp(1rem, 4.5vw, 1.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--transition);
}

.dashboard-topbar-redaccion-ia:hover {
  color: var(--accent);
  text-decoration: none;
}

/* .dashboard-topbar-redaccion-ia--active {
  color: var(--accent);
} */

.dashboard-breadcrumb--topbar {
  margin: 0;
  max-width: 100%;
  line-height: 1.35;
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-breadcrumb--topbar span:not([aria-hidden]) {
  color: var(--text-muted);
}

.dashboard-topbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.sites-dropdown-icon {
  display: none;
}

.sites-dropdown-text {
  display: inline;
}

.topbar-mis-sitios-icon {
  display: none;
}

.topbar-ayuda-icon {
  display: none;
}

.topbar-ayuda-text {
  display: inline;
}

.dashboard-topbar-user-menu {
  position: relative;
}

.dashboard-topbar-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.dashboard-topbar-user-trigger:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.topbar-user-icon {
  display: none;
}

.topbar-user-email-text {
  display: inline;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-topbar-user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.25rem;
  min-width: 220px;
  padding: var(--space-2) 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  z-index: 11;
}

.user-dropdown-email {
  padding: var(--space-2) var(--space-4) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  word-break: break-all;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--space-1);
}

.user-dropdown-nav {
  display: flex;
  flex-direction: column;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), color var(--transition);
  font-family: inherit;
}

.user-dropdown-item:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.user-dropdown-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
}

.user-dropdown-item:hover .user-dropdown-icon {
  color: var(--accent);
}

.user-dropdown-hr {
  margin: var(--space-2) 0;
  border: none;
  border-top: 1px solid var(--border-light);
}

.user-dropdown-item--logout {
  color: #f87171;
}

.user-dropdown-item--logout:hover {
  background: rgba(248, 113, 113, 0.1);
  color: #f87171;
}

.user-dropdown-item--logout .user-dropdown-icon {
  color: #f87171;
}

.nav-link.topbar-ayuda {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.nav-link.topbar-ayuda:hover {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--border);
}

.dashboard-topbar-mis-sitios {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--accent);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.dashboard-topbar-mis-sitios:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

/* Rail fijo: menú principal + segundo menú (sitio / redes / admin) a la derecha */
.dashboard-sidebar-rail {
  position: fixed;
  left: 0;
  top: var(--topbar-height);
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: var(--sidebar-rail-width);
  max-width: 100%;
  transition:
    width 0.22s ease,
    transform 0.25s ease;
  box-sizing: border-box;
  /* Franja encima del segundo menú (escritorio): mismo tono que la cabecera del primer sidebar */
  background: var(--bg-elevated);
}

.dashboard-sidebar {
  position: relative;
  width: var(--sidebar-width);
  min-width: 0;
  height: 100%;
  flex-shrink: 0;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: width 0.22s ease;
}

/* AdminLayout u otros layouts sin rail: una sola columna fija */
.dashboard-body > .dashboard-sidebar {
  position: fixed;
  left: 0;
  top: var(--topbar-height);
  bottom: 0;
  width: var(--sidebar-width);
  height: calc(100vh - var(--topbar-height));
  z-index: 9999;
  transition:
    width 0.22s ease,
    transform 0.25s ease;
}

.dashboard-sidebar-secondary {
  display: flex;
  flex-direction: column;
  width: var(--sidebar-sub-width);
  min-width: 0;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 0;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  box-sizing: border-box;
}

/* Escritorio: rail a tope del viewport; topbar solo sobre el área principal */
@media (min-width: 901px) {
  .dashboard-sidebar-rail {
    top: 0;
    height: 100vh;
  }

  .dashboard-body > .dashboard-sidebar {
    top: 0;
    height: 100vh;
  }

  .dashboard-topbar {
    margin-left: var(--sidebar-rail-width);
    width: calc(100% - var(--sidebar-rail-width));
    max-width: none;
    box-sizing: border-box;
  }

  .dashboard-topbar-inner {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr minmax(0, auto) 1fr;
    align-items: center;
    gap: var(--space-3);
    padding-left: var(--space-3);
    padding-right: var(--space-6);
  }

  .dashboard-topbar-hamburger {
    grid-column: 1;
    justify-self: start;
  }

  .dashboard-topbar-breadcrumb-slot {
    grid-column: 2;
    justify-self: center;
    max-width: min(58vw, 50rem);
  }

  .dashboard-topbar-nav {
    grid-column: 3;
    justify-self: end;
  }

  .dashboard-topbar-redaccion-ia {
    display: none !important;
  }

  .dashboard-main.dashboard-main--with-secondary {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: var(--space-8);
    box-sizing: border-box;
    /* Altura mínima = ventana menos topbar: el sidebar secundario llena el 100% del alto útil */
    min-height: calc(100vh - var(--topbar-height));
  }

  @supports (height: 100dvh) {
    .dashboard-main.dashboard-main--with-secondary {
      min-height: calc(100dvh - var(--topbar-height));
    }
  }

  /* Columna secundaria: mismo alto útil que el main (fondo hasta el borde inferior del viewport). El nav va sticky dentro. */
  .dashboard-main.dashboard-main--with-secondary .dashboard-sidebar-secondary {
    position: relative;
    align-self: stretch;
    flex-shrink: 0;
    z-index: 2;
    width: var(--sidebar-sub-width);
    min-height: calc(100vh - var(--topbar-height));
    max-height: none;
    overflow: visible;
    border-right: 1px solid var(--border);
  }

  @supports (height: 100dvh) {
    .dashboard-main.dashboard-main--with-secondary .dashboard-sidebar-secondary {
      min-height: calc(100dvh - var(--topbar-height));
    }
  }

  /* top: cabecera sticky (.dashboard-topbar en index.css); si fuera 0, el menú quedaría bajo el topbar */
  .dashboard-main.dashboard-main--with-secondary .dashboard-sidebar-secondary .dashboard-sidebar-nav--secondary {
    position: sticky;
    top: var(--topbar-height);
    align-self: flex-start;
    width: 100%;
    box-sizing: border-box;
    z-index: 50;
  }

  .dashboard-main.dashboard-main--with-secondary .dashboard-content-wrap {
    flex: 1;
    min-width: 0;
    padding-top: var(--space-6);
    padding-left: var(--space-6);
    padding-bottom: 0;
    box-sizing: border-box;
  }
}

.dashboard-sidebar-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.55rem 0.65rem 0.55rem 0.85rem;
  border-bottom: 1px solid var(--border);
  min-height: 3.1rem;
}

@media (min-width: 901px) {
  .dashboard-sidebar-header {
    min-height: var(--topbar-height);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    box-sizing: border-box;
  }
}

.dashboard-sidebar-brand {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  min-width: 0;
  text-decoration: none;
  color: var(--text);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.dashboard-sidebar-brand:hover {
  color: var(--text);
  opacity: 0.88;
  text-decoration: none;
}

.dashboard-sidebar-brand-strong {
  color: #fff;
}

.dashboard-sidebar-brand-rest {
  color: rgba(255, 255, 255, 0.82);
}

/* Móvil: sin cabecera marca/R en el drawer (enlace en el topbar) */
@media (max-width: 900px) {
  .dashboard-sidebar-header {
    display: none;
  }
}

.dashboard-sidebar-pin {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  cursor: pointer;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.dashboard-sidebar-pin:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

@media (min-width: 901px) {
  .dashboard-sidebar-pin {
    display: flex;
  }
}

.sidebar-nav-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 0.88;
}

.sidebar-nav-text {
  min-width: 0;
}

.dashboard-sidebar-nav a.active .sidebar-nav-icon {
  opacity: 1;
}

.sidebar-credits-meter {
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  margin: 0.45rem 0 0.65rem;
  overflow: hidden;
}

.sidebar-credits-meter-fill {
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--meter-start, #ef4444), var(--meter-end, #fb923c));
  transition: width 0.35s ease;
}

@media (min-width: 901px) {
  .dashboard-layout--sidebar-collapsed .dashboard-sidebar-brand-rest {
    display: none;
  }

  .dashboard-layout--sidebar-collapsed .dashboard-sidebar-header {
    flex-direction: column;
    justify-content: center;
    padding: 0.7rem 0.4rem 0.6rem;
    gap: 0.45rem;
    box-sizing: border-box;
  }

  .dashboard-layout--sidebar-collapsed .dashboard-sidebar-brand {
    justify-content: center;
    font-size: 1.05rem;
  }

  .dashboard-layout--sidebar-collapsed .dashboard-sidebar-brand-strong {
    padding: var(--space-2);
  }

  /* Solo el primer sidebar (menú principal); el segundo conserva textos e iconos */
  .dashboard-layout--sidebar-collapsed .dashboard-sidebar-rail > .dashboard-sidebar .dashboard-sidebar-nav a {
    justify-content: center;
    padding: 0.65rem;
    margin: 2px 0.4rem;
  }

  .dashboard-layout--sidebar-collapsed .dashboard-sidebar-rail > .dashboard-sidebar .sidebar-nav-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .dashboard-layout--sidebar-collapsed .sidebar-plan {
    display: none;
  }

  .dashboard-layout--sidebar-collapsed .sidebar-user-mobile {
    display: none;
  }
}

.dashboard-sidebar-logo {
  flex-shrink: 0;
  display: block;
  padding: var(--space-4);
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border-light);
  transition: color var(--transition);
}

.dashboard-sidebar-logo:hover {
  color: var(--accent);
  text-decoration: none;
}

.dashboard-sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Mayor especificidad que .dashboard-sidebar-nav: sin overflow propio para que sticky funcione respecto al viewport */
.dashboard-sidebar-nav.dashboard-sidebar-nav--secondary {
  flex: none;
  min-height: auto;
  overflow: visible;
  overflow-y: visible;
  padding-bottom: var(--space-3);
}

.dashboard-sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: var(--space-3) var(--space-4);
  margin: 2px var(--space-3);
  border-radius: var(--radius);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: color var(--transition), background var(--transition);
  border-left: none;
}

.dashboard-sidebar-nav a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.dashboard-sidebar-nav a.active {
  color: #fff;
  font-weight: var(--font-semibold);
  background: rgba(255, 255, 255, 0.1);
  border-left: none;
}

.sidebar-group {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-2);
}

.sidebar-group-title {
  padding: var(--space-2) var(--space-4) var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sidebar-group a {
  padding-left: var(--space-4);
}

/* Eliminar (sitio, perfil, proyecto): pie del menú lateral contextual */
.sidebar-context-delete {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: calc(100% - 2 * var(--space-3));
  box-sizing: border-box;
  margin: 0.75rem var(--space-3) 2px;
  margin-top: 0.85rem;
  padding: var(--space-3) var(--space-4);
  padding-top: 0.85rem;
  border: none;
  border-top: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: transparent;
  color: #f87171;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    color var(--transition),
    background var(--transition);
}

.sidebar-context-delete .sidebar-nav-icon {
  color: #f87171;
  opacity: 1;
}

.sidebar-context-delete:hover:not(:disabled) {
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.1);
}

.sidebar-context-delete:hover:not(:disabled) .sidebar-nav-icon {
  color: #fca5a5;
}

.sidebar-context-delete:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .sidebar-context-delete {
    display: none !important;
  }
}

/* Tarjeta “eliminar” en dashboard (dominio, proyecto, perfil): texto + botón pill rojo */
.dashboard-danger-zone {
  margin-top: var(--space-5);
  border-radius: var(--radius);
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(0, 0, 0, 0.28);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
}

.dashboard-danger-zone__text {
  flex: 1 1 14rem;
  min-width: 0;
  order: 1;
}

.dashboard-danger-zone__title {
  margin: 0 0 0.35rem;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: #fff;
}

.dashboard-danger-zone__desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.45;
}

.dashboard-danger-zone__action {
  flex: 0 0 auto;
  order: 1;
  align-self: center;
  margin-left: 0;
  margin-right: 0;
}

.dashboard-danger-zone__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, 0.85);
  background: transparent;
  color: #f87171;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  font-family: inherit;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.dashboard-danger-zone__btn:hover:not(:disabled) {
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.12);
  border-color: #fca5a5;
}

.dashboard-danger-zone__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sidebar-back-dominios {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
  border-top: 1px solid var(--border-light);
  transition: color var(--transition), background var(--transition);
  border-radius: var(--radius);
}

.sidebar-back-dominios:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-plan {
  margin-top: auto;
  padding: var(--space-4);
  border-top: 1px solid var(--border-light);
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--bg);
  flex-shrink: 0;
}

.sidebar-user-mobile {
  display: none;
}

.plan-name {
  font-weight: var(--font-semibold);
  color: var(--text);
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
}

.plan-usage,
.plan-remaining {
  margin: var(--space-1) 0;
}

.plan-usage--compact {
  line-height: 1.45;
}

.plan-remaining-inline {
  color: var(--text-muted);
  font-weight: var(--font-medium);
}

.plan-credit-period {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-muted);
}

.plan-usage-label {
  font-weight: var(--font-normal);
  opacity: 0.92;
}

.plan-usage-sep {
  opacity: 0.75;
}

.dashboard-stat-usage-explainer {
  font-size: var(--text-xs);
  line-height: 1.4;
  margin: 0.35rem 0 0.65rem;
  opacity: 0.82;
}

.plan-languages {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
}

.plan-upgrade {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--accent);
  text-decoration: none;
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  transition: color var(--transition), transform var(--transition);
}

.plan-upgrade:hover {
  color: var(--accent-hover);
  transform: translateX(2px);
  text-decoration: none;
}

.dashboard-main {
  flex: 1;
  margin-left: var(--sidebar-rail-width);
  padding: var(--space-6) var(--space-8);
  overflow: visible;
  min-width: 0;
  min-height: 0;
}

.dashboard-main--full {
  margin-left: 0;
}

.dashboard-main .dashboard-content-wrap {
  max-width: none;
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  /* flow-root: evita colapso de márgenes con el main para que .dashboard-section respete margin */
  display: flow-root;
}

.dashboard-main .dashboard-main-footer {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  padding-bottom: max(var(--space-8), calc(env(safe-area-inset-bottom, 0px) + 2.5rem));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-xs, 0.8125rem);
  color: rgba(255, 255, 255, 0.45);
}

.dashboard-main-footer__copy {
  margin: 0;
}

.dashboard-main-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

.dashboard-main-footer__nav a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color var(--transition, 0.15s ease);
}

.dashboard-main-footer__nav a:hover {
  color: var(--accent);
}

.dashboard-main.dashboard-main--with-secondary .dashboard-content-wrap {
  margin: 0;
}

/* Márgenes de sección dentro del main (p. ej. grilla contenido): mayor especificidad que el reset * y separación estable */
.dashboard-main .dashboard-content-wrap > section.dashboard-section {
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.dashboard-main .dashboard-content-wrap > section.dashboard-section:first-child {
  margin-top: 0;
}

/* Última sección: sin margen inferior extra; padding-bottom 0 salvo con submenú lateral del sitio/redes. */
.dashboard-main .dashboard-content-wrap > section.dashboard-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.dashboard-main.dashboard-main--with-secondary .dashboard-content-wrap > section.dashboard-section:last-child {
  padding-bottom: var(--space-8);
}

@media (max-width: 1024px) {
  .dashboard-main {
    padding: var(--space-4) var(--space-4);
  }
}

@media (max-width: 768px) {
  .dashboard-main {
    padding: var(--space-4) var(--space-3);
  }
}

/* ========== MOBILE (sidebar overlay + full width main) ========== */
@media (max-width: 900px) {
  .dashboard-topbar-hamburger {
    display: flex;
  }

  .dashboard-topbar-inner {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: end;
    padding: 0 var(--space-3);
    padding-bottom: 0.2rem;
    column-gap: 0.35rem;
    row-gap: 0;
  }

  .dashboard-topbar-hamburger {
    grid-column: 1;
    justify-self: start;
    align-self: end;
  }

  .dashboard-topbar-breadcrumb-slot {
    display: none;
  }

  .dashboard-topbar-logo {
    font-size: var(--text-base);
  }

  .dashboard-topbar-redaccion-ia {
    display: inline-flex;
    grid-column: 2;
    justify-self: start;
    align-self: center;
    min-width: 0;
    max-width: calc(100vw - 11rem);
    padding: 0;
  }

  /* Cabecera móvil: título alineado abajo con el menú; iconos a la derecha */
  .dashboard-topbar-nav {
    grid-column: 3;
    justify-self: end;
    align-self: end;
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
  }

  .add-domain-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    align-items: stretch;
  }

  .add-domain-field,
  .add-domain-field:first-child,
  .add-domain-field--select,
  .add-domain-field--button {
    width: 100%;
    max-width: none;
    min-height: auto;
    align-self: stretch;
  }

  .add-domain-field:first-child {
    flex: 0 0 auto !important;
    min-height: 0;
  }

  .add-domain-form input,
  .add-domain-language,
  .add-domain-form button {
    width: 100% !important;
    max-width: none;
  }

  .domain-item,
  .domain-item.domain-item--list {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--space-3);
    width: 100%;
  }

  .domain-item-info {
    width: 100%;
    overflow: visible;
    gap: 0.35rem;
  }

  .domain-item-domain-box {
    width: 100%;
    min-width: 0;
  }

  .domain-name {
    display: block;
    width: 100%;
    font-size: 1rem;
    font-weight: 700;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    word-break: break-word;
  }

  .domain-name-link {
    display: block;
    width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    word-break: break-word;
  }

  .domain-meta {
    font-size: 0.9rem;
  }

  .domain-item-actions {
    width: 100%;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-top: 0.25rem;
  }

  .sites-dropdown-icon,
  .topbar-mis-sitios-icon,
  .topbar-ayuda-icon,
  .topbar-user-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sites-dropdown-icon svg,
  .topbar-mis-sitios-icon svg,
  .topbar-ayuda-icon svg,
  .topbar-user-icon svg {
    flex-shrink: 0;
  }

  .sites-dropdown-text,
  .topbar-mis-sitios-text,
  .topbar-ayuda-text,
  .topbar-user-email-text {
    display: none !important;
  }

  .sites-dropdown-trigger,
  .dashboard-topbar-user-trigger {
    padding: var(--space-2);
    min-width: 2.5rem;
    min-height: 2.5rem;
    justify-content: center;
  }

  .dashboard-topbar-mis-sitios,
  .nav-link.topbar-ayuda {
    padding: var(--space-2);
    min-width: 2.5rem;
    min-height: 2.5rem;
    justify-content: center;
  }

  .dashboard-sidebar-rail {
    top: var(--topbar-height);
    height: calc(100vh - var(--topbar-height));
    width: min(300px, 88vw);
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
    z-index: 9999;
  }

  .dashboard-sidebar-rail .dashboard-sidebar {
    width: 100% !important;
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
    border-right: none;
  }

  .dashboard-main.dashboard-main--with-secondary {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-4) var(--space-3) 0;
    gap: 0;
    box-sizing: border-box;
  }

  .dashboard-main.dashboard-main--with-secondary .dashboard-content-wrap {
    padding-bottom: 0;
  }

  .dashboard-main.dashboard-main--with-secondary .dashboard-sidebar-secondary {
    width: 100% !important;
    max-width: none;
    position: static;
    max-height: none;
    overflow-y: visible;
    order: -1;
    border-right: none;
    border-bottom: 1px solid var(--border);
    align-self: stretch;
  }

  .dashboard-topbar {
    margin-left: 0;
    width: 100%;
    max-width: none;
  }

  .dashboard-topbar-inner {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  .dashboard-sidebar-rail--open {
    transform: translateX(0);
  }

  /* Sidebar suelta (p. ej. AdminLayout): slide overlay */
  .dashboard-body > .dashboard-sidebar {
    width: min(280px, 85vw);
    transform: translateX(-100%);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
  }

  .dashboard-body > .dashboard-sidebar.dashboard-sidebar--open {
    transform: translateX(0);
  }

  /* Justo debajo del rail (9999); por encima del contenido */
  .dashboard-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    animation: dashboard-backdrop-in 0.2s ease;
  }

  @keyframes dashboard-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .dashboard-main {
    margin-left: 0;
    padding: var(--space-4) var(--space-3);
  }

  .sidebar-user-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border-top: 1px solid var(--border-light);
    background: var(--bg);
    flex-shrink: 0;
  }

  .sidebar-user-email {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
    word-break: break-all;
  }

  .sidebar-user-logout {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: #f87171;
    background: transparent;
    border: 1px solid rgba(248, 113, 113, 0.4);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
    transition: background var(--transition), color var(--transition);
  }

  .sidebar-user-logout:hover {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
  }

  .dashboard-content-wrap {
    max-width: 100%;
  }

  .dashboard-header h1 {
    font-size: var(--text-lg);
    line-height: 1.3;
  }

  .dashboard-content-wrap .dashboard-header h1 {
    font-size: var(--text-lg);
    line-height: 1.3;
  }

  .dominio-subnav {
    gap: var(--space-2);
  }

  .dominio-subnav-link {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }

  .articles-filters {
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
  }

  .articles-filters .articles-filter-input {
    flex: 0 0 auto;
    width: 100%;
    align-self: stretch;
  }

  .articles-filters .articles-filter-label {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }

  .articles-filters .btn-primary,
  .articles-filters .btn-secondary {
    flex: 0 0 auto;
    width: 100%;
    justify-content: center;
  }

  .articles-filter-input {
    max-width: none;
  }

  .articles-filter-date,
  .articles-filter-select {
    min-width: 0;
    width: 100%;
  }

  .articles-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--space-3));
    padding: 0 var(--space-3);
  }

  .articles-table {
    min-width: 520px;
  }

  .articles-table th,
  .articles-table td {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }

  .credit-history-filters-grid {
    flex-direction: column;
    align-items: stretch;
  }

  .add-domain-form {
    flex-direction: column;
    align-items: stretch;
  }

  .add-domain-field,
  .add-domain-field:first-child,
  .add-domain-field--select,
  .add-domain-field--button {
    width: 100%;
    max-width: none;
  }

  .add-domain-field:first-child {
    flex: 0 0 auto !important;
    min-height: 0;
  }

  .add-domain-form input,
  .add-domain-language,
  .add-domain-form button {
    width: 100%;
    max-width: none !important;
  }

  .domain-item {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .domain-item-info {
    width: 100%;
    overflow: visible;
    gap: 0.35rem;
  }

  .domain-item-domain-box {
    width: 100%;
  }

  .domain-name,
  .domain-name-link {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    word-break: break-word;
  }

  .domain-name {
    font-size: 1rem;
    font-weight: 700;
  }

  .domain-meta {
    font-size: 0.9rem;
  }

  .domain-item-actions {
    width: 100%;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-top: 0.25rem;
  }

  .config-section {
    padding: var(--space-4);
  }

  .sites-dropdown-trigger {
    font-size: var(--text-xs);
    padding: var(--space-2);
  }
}

/* Topbar: selector de sitios (dentro de dominio) */
.dashboard-topbar-sites {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  .dashboard-topbar-sites .sites-dropdown-trigger {
    padding: var(--space-2);
  }

  .dashboard-topbar-sites .sites-dropdown-text {
    max-width: min(11.5rem, 42vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.sites-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.sites-dropdown-trigger:hover {
  background: rgba(245, 158, 11, 0.22);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.sites-dropdown {
  position: relative;
}

.sites-chevron {
  font-size: 0.7rem;
  opacity: 0.9;
}

.sites-dropdown-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
}

.sites-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.25rem;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 11;
  padding: 0.5rem 0;
}

.sites-dropdown-menu--combined {
  min-width: min(100vw - 2rem, 280px);
  max-height: min(70vh, 420px);
  overflow-y: auto;
}

.sites-dropdown-section-label {
  padding: 0.45rem 1rem 0.2rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  pointer-events: none;
}

.sites-dropdown-item {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  text-align: left;
  background: none;
  border: none;
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
}

.sites-dropdown-item:hover {
  background: var(--accent-soft);
}

.sites-dropdown-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.sites-dropdown-hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.35rem 0;
}

.sites-dropdown-link {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  color: var(--accent);
  text-decoration: none;
}

.sites-dropdown-link:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Contenido del dashboard */
.dashboard-content-wrap .dashboard-header {
  margin-bottom: var(--space-8);
}

.dashboard-content-wrap .dashboard-header h1 {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
  color: var(--text);
}

/* Search Console / GA4 / Google Ads: título + descripción a la izquierda; sitio y Actualizar a la derecha (portal).
   flex-wrap: en viewport estrecho el portal pasa debajo (ver media query). */
.dashboard-title-row--gsc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1.25rem;
  margin-bottom: var(--space-2);
}

.dashboard-gsc-title-stack {
  flex: 1 1 auto;
  min-width: min(100%, 12rem);
  text-align: left;
}

.dashboard-title-row--gsc .dashboard-gsc-title-stack h1 {
  margin-bottom: 0.35rem;
}

.dashboard-subtitle--gsc-header {
  margin: 0;
  max-width: calc(100% - 10rem);
}

/* Portal del sitio (GSC / GA4 / Ads): el nodo está en el header del dashboard, fuera de .project-gsc-dash */
/* Plan de marketing (grupo): título + portal Guardar / Exportar */
.dashboard-title-row--marketing-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1.25rem;
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.dashboard-title-row--marketing-plan h1 {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: min(100%, 10rem);
}

.dashboard-marketing-plan-header-slot {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

@media (max-width: 768px) {
  .dashboard-title-row--marketing-plan {
    align-items: flex-start;
  }

  .dashboard-marketing-plan-header-slot {
    margin-left: 0;
    width: 100%;
    justify-content: stretch;
  }
}

.dashboard-gsc-site-portal-root {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(100%, 28rem);
  /* Con flex-wrap, segunda fila: empujar a la derecha. Con align-items:center en la fila, misma sensación que GA4. */
  margin-left: auto;
  --gsc-inset-bg: rgba(0, 0, 0, 0.35);
  --gsc-inset-border: rgba(255, 255, 255, 0.1);
}

.dashboard-gsc-header-right {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.5rem 0.75rem;
}

/* Móvil / tablet estrecha: titular + descripción a ancho completo; Sitio y Actualizar debajo */
@media (max-width: 768px) {
  .dashboard-title-row--gsc {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.85rem 1rem;
  }

  .dashboard-gsc-title-stack {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  .dashboard-subtitle--gsc-header {
    max-width: 100%;
  }

  .dashboard-gsc-site-portal-root {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .dashboard-gsc-header-right {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .dashboard-gsc-header-right .project-gsc-dash__gsc-refresh-in-header {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }

  .dashboard-gsc-header-right .project-gsc-dash__gsc-site {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  .project-gsc-dash__gsc-site--in-dashboard-header {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  .dashboard-gsc-header-right .project-gsc-dash__gsc-site-select {
    width: 100%;
    max-width: 100%;
  }
}

.dashboard-site-context {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* /dashboard/dominios/:id — hub del sitio */
.sitio-dashboard-page {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 2rem);
  margin-top: var(--space-3);

}

.sitio-dashboard-page .sitio-dashboard-quick,
.sitio-dashboard-page .sitio-dashboard-metrics,
.sitio-dashboard-page .sitio-dashboard-last-section,
.sitio-dashboard-page .sitio-dashboard-consumo {
  margin-bottom: 0;
}

.sitio-dashboard-quick {
  margin-bottom: var(--space-7);
}

.sitio-dashboard-quick-intro {
  margin: 0 0 var(--space-4);
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: none;
}

.sitio-dashboard-status-badges {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.sitio-dashboard-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.sitio-dashboard-badge--ok {
  border-color: rgba(34, 197, 94, 0.45);
  color: #16a34a;
  background: rgba(34, 197, 94, 0.08);
}

.sitio-dashboard-badge--muted {
  opacity: 0.95;
}

.sitio-dashboard-quick-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.sitio-dashboard-quick-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: 100%;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

.sitio-dashboard-quick-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

.sitio-dashboard-quick-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.sitio-dashboard-quick-label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
}

.sitio-dashboard-quick-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.sitio-dashboard-quick-card--plan {
  border-top: 3px solid #a855f7;
}

.sitio-dashboard-quick-card--redaccion {
  border-top: 3px solid var(--accent);
}

.sitio-dashboard-quick-card--articulos {
  border-top: 3px solid #3b82f6;
}

.sitio-dashboard-quick-card--config {
  border-top: 3px solid #64748b;
}

.sitio-dashboard-quick-card--google-ads {
  border-top: 3px solid #0ea5e9;
}

.sitio-dashboard-quick-card--marketing-plan {
  border-top: 3px solid #f59e0b;
}

.sitio-dashboard-quick-card--buyer {
  border-top: 3px solid #0d9488;
}

.sitio-dashboard-metrics {
  margin-bottom: var(--space-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: stretch;
}

.sitio-dashboard-metric--site {
  border-top-color: #3b82f6;
}

.sitio-dashboard-metric--account {
  border-top-color: var(--accent);
}

.sitio-dashboard-metric--buyer {
  border-top-color: #0d9488;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.sitio-dashboard-metric--buyer:hover {
  border-color: color-mix(in srgb, #0d9488 45%, var(--border));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: inherit;
}

.sitio-dashboard-metric-credits-hint {
  margin-top: 0.35rem;
}

.sitio-dashboard-metric--cta {
  border-top-color: #a855f7;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.sitio-dashboard-metric--cta:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: inherit;
}

.sitio-dashboard-cta-line {
  font-size: 1.25rem !important;
  margin-bottom: 0 !important;
}

.sitio-dashboard-last-section {
  margin-bottom: var(--space-8);
}

.sitio-dashboard-config-head {
  margin-bottom: var(--space-5);
}

.sitio-dashboard-config-heading {
  margin: 0 0 var(--space-2);
  font-size: 1.25rem;
  font-weight: 700;
}

.sitio-dashboard-config-sub {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.45;
  max-width: none;
}

.sitio-dashboard-last-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.sitio-dashboard-last-loading,
.sitio-dashboard-last-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.sitio-dashboard-last-block-title {
  margin: 0 0 var(--space-4);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.sitio-dashboard-last-block--divider {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.sitio-dashboard-last-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sitio-dashboard-last-dl > div {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) 1fr;
  gap: var(--space-4);
  align-items: start;
}

.sitio-dashboard-last-dl dt {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

.sitio-dashboard-last-dl dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text);
  word-break: break-word;
  line-height: 1.45;
}

.sitio-dashboard-last-title {
  font-weight: 600;
}

.sitio-dashboard-last-message dd {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.sitio-dashboard-last-status {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  font-weight: 600;
}

.sitio-dashboard-last-status--completed {
  background: rgba(34, 197, 94, 0.14);
  color: #22c55e;
}

.sitio-dashboard-last-status--queued,
.sitio-dashboard-last-status--pending {
  background: rgba(234, 179, 8, 0.14);
  color: #ca8a04;
}

.sitio-dashboard-last-status--failed {
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
}

.sitio-dashboard-last-status--running {
  background: rgba(59, 130, 246, 0.14);
  color: #60a5fa;
}

.sitio-dashboard-last-status--unknown {
  background: var(--bg-elevated);
  color: var(--text-muted);
}

.sitio-dashboard-last-article-link {
  margin-top: var(--space-4);
}

.sitio-dashboard-last-link {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.sitio-dashboard-last-link:hover {
  text-decoration: underline;
}

.sitio-dashboard-last-actions {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.sitio-dashboard-consumo {
  margin-top: 0;
}

@media (max-width: 640px) {
  .sitio-dashboard-last-dl > div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .sitio-dashboard-last-dl dt {
    margin-bottom: 0.15rem;
  }
}

@media (max-width: 960px) {
  .sitio-dashboard-quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sitio-dashboard-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .sitio-dashboard-quick-grid {
    grid-template-columns: 1fr;
  }
}

.dashboard-site-config {
  margin-bottom: var(--space-6);
}

.config-summary-group {
  margin-bottom: var(--space-6);
}

.config-summary-group:last-of-type {
  margin-bottom: 0;
}

.config-summary-group-title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 var(--space-3) 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* Bloque interno: subtítulo + lista de URLs */
.config-summary-internal {
  margin-bottom: var(--space-2);
}

.config-summary-subtitle {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--accent);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  padding-left: 0;
  border-left: none;
}

.config-summary-subtitle:first-child {
  margin-top: 0;
}

.config-summary-subtitle--muted {
  color: var(--text-muted);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  border-left: none;
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
  padding-left: 0;
}

.config-summary-internal .config-summary-subtitle--muted {
  margin-top: 0;
}

.config-summary-url-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.config-summary-url-list li {
  padding: 0;
  border-bottom: none;
  line-height: 1.5;
}

.config-summary-empty {
  display: inline-block;
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.config-summary-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  border-bottom: none;
}

.config-summary-row--external {
  flex-wrap: wrap;
  padding: var(--space-2) 0;
}

.config-summary-row--external-empty {
  margin-top: var(--space-2);
}

.config-summary-label {
  flex: 0 0 10rem;
  min-width: 8rem;
  color: var(--text-muted);
  font-weight: var(--font-medium);
}

.config-summary-value {
  flex: 1;
  min-width: 0;
  color: var(--text);
  word-break: break-all;
}

.config-summary-value--url {
  flex: 1 1 100%;
}

.config-summary-url {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.config-summary-url:hover {
  border-bottom-color: var(--accent);
  text-decoration: none;
  color: var(--accent);
}

.config-summary-meta {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.config-summary-external-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.config-summary-external-list li {
  border-bottom: none;
  padding: var(--space-1) 0;
}

.config-summary-actions {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: none;
}

.config-summary-actions .link-editar-dominio {
  display: inline-flex;
  align-items: center;
}

.dashboard-site-config .domain-edit-card {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  align-items: stretch;
  padding-bottom: 0;
}

.dashboard-site-config .domain-edit-card input,
.dashboard-site-config .domain-edit-card select,
.dashboard-site-config .domain-edit-card textarea {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  background: var(--bg);
  color: var(--text);
}

.dashboard-config-plan-seo-link {
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.dashboard-config-plan-seo-link-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.dashboard-config-plan-seo-link-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.dashboard-config-plan-seo-link-desc {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  flex: 1;
  min-width: 200px;
}

/* Proyecto vincular / vinculado: fila compacta texto | controles (select+botón en línea) */
.dashboard-config-plan-seo-link--compact {
  padding: 0.65rem 1rem;
  margin-bottom: 1rem;
}

.dashboard-config-plan-seo-link-inner--split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  row-gap: 0.45rem;
}

.dashboard-config-plan-seo-link-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 12rem;
}

.dashboard-config-plan-seo-link-text .dashboard-config-plan-seo-link-title {
  font-size: 0.95rem;
}

.dashboard-config-plan-seo-link-text .dashboard-config-plan-seo-link-desc {
  flex: unset;
  min-width: 0;
  font-size: 0.85rem;
  line-height: 1.45;
}

.dashboard-config-plan-seo-link-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
  flex: 0 1 auto;
  min-width: 0;
}

.dashboard-config-plan-seo-link-actions .add-domain-form {
  margin-top: 0;
}

/* Formulario vincular: proyecto y botón en la misma línea */
.dashboard-project-link-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
  margin: 0;
}

.dashboard-project-link-inline-form .dashboard-project-link-inline-select {
  min-width: 10.5rem;
  max-width: 16rem;
  flex: 1 1 10.5rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  background: var(--bg);
  color: var(--text);
  box-sizing: border-box;
  min-height: 2.25rem;
}

.dashboard-project-link-inline-form .dashboard-project-link-inline-select:focus {
  outline: none;
  border-color: var(--accent);
}

.dashboard-project-link-inline-form .dashboard-project-link-inline-submit {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 2.25rem;
}

@media (max-width: 768px) {
  .dashboard-config-plan-seo-link-inner--split {
    align-items: stretch;
  }

  .dashboard-config-plan-seo-link-text {
    flex: 1 1 100%;
  }

  .dashboard-config-plan-seo-link-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .dashboard-project-link-inline-form {
    width: 100%;
  }

  .dashboard-project-link-inline-form .dashboard-project-link-inline-select {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
  }

  .dashboard-project-link-inline-form .dashboard-project-link-inline-submit {
    flex: 1 1 auto;
  }
}

/* Inicio /dashboard: panel de control y atajos */
.dashboard-home-intro {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.dashboard-home-title {
  margin: 0 0 var(--space-3);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text);
}

.dashboard-home-lead {
  margin: 0 0 var(--space-5);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: none;
}

.dashboard-home-lead a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
}

.dashboard-home-lead a:hover {
  color: var(--accent-hover);
}

.dashboard-home-quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.dashboard-home-quick-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.dashboard-home-quick-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-card-hover);
}

.dashboard-home-bottom {
  margin-top: var(--space-2);
}

@media (max-width: 560px) {
  .dashboard-home-intro {
    padding: var(--space-4);
  }

  .dashboard-home-quick {
    flex-direction: column;
  }

  .dashboard-home-quick-link {
    justify-content: center;
    min-height: 44px;
  }
}

/* Inicio /dashboard: bloque cupo (2 cols) + fila de contenido generado (4 cols) */
.dashboard-cards.dashboard-cards--home {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  width: 100%;
}

.dashboard-home-top-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: stretch;
}

.dashboard-home-credit-equiv-wrap {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.dashboard-home-credit-equiv-wrap .pricing-calc-equiv-intro a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.dashboard-home-credit-equiv-wrap .pricing-calc-equiv-intro a:hover {
  text-decoration: underline;
}

.dashboard-home-credit-equiv-title {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.dashboard-home-credit-equiv-lead {
  margin: 0 0 var(--space-4);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: none;
}

.dashboard-home-credit-equiv-period {
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: none;
}

.dashboard-home-generated-title {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.dashboard-home-generated-lead {
  margin: 0 0 var(--space-4);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: none;
}

.dashboard-home-generated-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.dashboard-gen-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-4) var(--space-3);
  text-decoration: none;
  color: inherit;
  border-top: 3px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), transform var(--transition-smooth), box-shadow var(--transition-smooth);
  min-height: 148px;
  box-sizing: border-box;
}

.dashboard-gen-card:hover {
  border-top-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.dashboard-gen-card--articles {
  border-top-color: #a855f7;
}

.dashboard-gen-card--grids {
  border-top-color: #06b6d4;
}

.dashboard-gen-card--images {
  border-top-color: #eab308;
}

.dashboard-gen-card--videos {
  border-top-color: #f97316;
}

.dashboard-gen-icon {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-size: 1.25rem;
  line-height: 1;
  opacity: 0.88;
}

.dashboard-gen-label {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.dashboard-gen-value {
  margin: 0 0 0.25rem;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
}

.dashboard-gen-hint {
  margin: 0 0 auto;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted);
  flex-grow: 1;
}

.dashboard-gen-cta {
  margin-top: var(--space-3);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
}

.dashboard-gen-card:hover .dashboard-gen-cta {
  text-decoration: underline;
}

.dashboard-cards .dashboard-gen-card {
  min-height: 148px;
  text-decoration: none;
  color: inherit;
}

@media (max-width: 1100px) {
  .dashboard-home-generated-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .dashboard-home-top-row {
    grid-template-columns: 1fr;
  }

  .dashboard-home-generated-grid {
    grid-template-columns: 1fr;
  }
}

.dashboard-stat-card {
  position: relative;
  padding-top: var(--space-5);
  padding-right: 2.75rem;
  border-top: 3px solid var(--border);
  overflow: hidden;
}

.dashboard-stat-card--usage {
  border-top-color: var(--accent);
}

.dashboard-stat-card--domains {
  border-top-color: #3b82f6;
}

.dashboard-stat-card--storage {
  border-top-color: #0d9488;
}

.dashboard-home-storage-block {
  width: 100%;
  box-sizing: border-box;
}

.dashboard-storage-breakdown {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  font-size: 0.84rem;
  color: var(--text-muted);
  display: grid;
  gap: 0.2rem 0;
}

.dashboard-storage-breakdown li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
}

.dashboard-storage-breakdown li:last-child {
  border-bottom: none;
}

.dashboard-storage-breakdown strong {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.dashboard-storage-total {
  margin-bottom: var(--space-2);
}

.dashboard-storage-loading {
  opacity: 0.65;
}

.dashboard-stat-card--articles {
  border-top-color: #a855f7;
}

.dashboard-stat-icon {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  font-size: 1.35rem;
  line-height: 1;
  opacity: 0.85;
}

.dashboard-stat-card h2 {
  margin-top: 0;
  margin-bottom: var(--space-2);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.dashboard-stat-caption {
  margin: 0 0 var(--space-2);
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.dashboard-stat-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.dashboard-stat-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover, var(--accent)));
  transition: width 0.35s ease;
}

.dashboard-stat-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.dashboard-stat-hint--warn {
  color: #f97316;
  font-weight: 600;
}

.dashboard-stat-period {
  margin: 0.65rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.dashboard-stat-credit-range {
  margin: 0.2rem 0 0.55rem;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  cursor: help;
}

.dashboard-stat-credit-range strong {
  color: var(--accent);
  font-weight: 700;
}

.plan-credit-range-dates {
  margin: 0 0 0.35rem;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--text-muted);
  cursor: help;
}

.plan-credit-range-dates strong {
  color: var(--accent);
  font-weight: 600;
}

.dashboard-stat-cta {
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.dashboard-stat-cta:hover {
  text-decoration: underline;
  color: var(--accent-hover);
}

/* Vista rápida de dominios en inicio */
.dashboard-home-domains {
  margin-bottom: var(--space-8);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.dashboard-home-social-profiles {
  margin-top: var(--space-2);
}

.dashboard-home-social-empty-hint {
  margin-bottom: var(--space-8);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border);
  background: var(--bg-elevated);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.dashboard-home-social-empty-hint a {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.dashboard-home-social-empty-hint a:hover {
  text-decoration: underline;
}

.dashboard-home-domains-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.dashboard-home-domains-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

.dashboard-home-domains-all {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.dashboard-home-domains-all:hover {
  text-decoration: underline;
}

.dashboard-home-domains-sub {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-muted);
  max-width: none;
}

.dashboard-home-domains-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dashboard-home-domain-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

/* Izquierda: dominio + idioma + enlaces juntos; derecha: uso del mes */
@media (min-width: 720px) {
  .dashboard-home-domain-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3) var(--space-5);
  }
}

.dashboard-home-domain-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
}

.dashboard-home-domain-actions-sep {
  color: var(--text-muted);
  font-weight: 600;
  user-select: none;
  font-size: 0.875rem;
  line-height: 1;
  opacity: 0.5;
}

.dashboard-home-domain-month {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  max-width: 11rem;
}

@media (min-width: 720px) {
  .dashboard-home-domain-month {
    justify-content: flex-end;
  }
}

.dashboard-home-domain-month-pending {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.dashboard-home-domain-month-line {
  margin: 0;
  line-height: 1.45;
  text-align: left;
}

@media (min-width: 720px) {
  .dashboard-home-domain-month-line {
    text-align: right;
  }
}

.dashboard-home-domain-month-num {
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.dashboard-home-domain-month-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

@media (max-width: 719px) {
  .dashboard-home-domain-month-text {
    white-space: normal;
  }
}

.dashboard-home-domain-name {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
  line-height: 1.35;
}

.dashboard-home-domain-name:hover {
  color: var(--accent);
}

.dashboard-home-domain-inline-lang {
  font-weight: 500;
  color: var(--text-muted);
}

.dashboard-home-domain-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.dashboard-home-domain-actions a {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  padding: 0.2rem 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

.dashboard-home-domain-actions a:hover {
  text-decoration: underline;
}

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.dashboard-cards .card {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  min-height: 140px;
}

/* Créditos: empuja barra hacia abajo en la fila superior */
.dashboard-home-top-row .card-usage .dashboard-stat-progress {
  margin-top: auto;
}

.dashboard-home-top-row .card-domains,
.dashboard-home-top-row .card-usage {
  min-height: 180px;
  height: 100%;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .dashboard-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .dashboard-cards {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.card-articles-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
  transition: background-color var(--transition), border-color var(--transition), transform var(--transition-smooth);
  box-shadow: var(--shadow-card);
}

.card-articles-link:hover {
  background: var(--bg-card-hover, rgba(59, 130, 246, 0.06));
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

.card-articles-link h2 {
  margin-bottom: 0.25rem;
}

.card-articles-count {
  margin: 0 0 0.25rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  transition: color var(--transition);
}

.card-articles-count span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-muted);
}

.card-articles-cta {
  margin: 0;
  margin-top: auto;
  font-size: 0.9rem;
  color: var(--accent);
  font-weight: var(--font-medium);
  transition: color var(--transition);
}

.card-articles-link:hover .card-articles-count {
  color: var(--accent);
}

.card-articles-link:hover .card-articles-cta {
  color: var(--accent-hover);
}

.card-articles-link p.card-articles-cta {
  color: var(--accent);
}

.big-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  transition: color var(--transition);
}

.big-number span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-muted);
}

.dashboard-section h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
  color: var(--accent);
  font-weight: var(--font-semibold);
}

/* Onboarding guiado (Pasos 1–3) */
.dashboard-onboarding {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
/* Dentro de .dashboard-cards--home el gap del flex ya separa del bloque siguiente */
.dashboard-onboarding--first {
  margin-bottom: 0;
}
.dashboard-onboarding-intro {
  margin: 0 0 var(--space-4);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--text);
}
.dashboard-onboarding--hint .dashboard-onboarding-intro {
  margin-bottom: var(--space-3);
}
.dashboard-onboarding--hint h2 {
  margin-top: 0;
}
.dashboard-onboarding h2 {
  margin-top: 0;
  color: var(--accent);
}
.dashboard-onboarding-steps {
  margin: 0 0 var(--space-4);
  padding-left: 0;
  list-style: none;
  line-height: 1.6;
}
.dashboard-onboarding-steps li {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-4);
}
.dashboard-onboarding-step-num {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  background: var(--accent);
  color: var(--bg, #fff);
}
.dashboard-onboarding-steps li strong {
  color: var(--text);
}
.dashboard-onboarding-cta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Gráfico consumo mensual (/dashboard) */
.dashboard-usage-history {
  margin-bottom: var(--space-10);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.dashboard-usage-history-heading {
  margin-top: 0;
  margin-bottom: var(--space-2);
}

.dashboard-usage-history-desc {
  margin: 0 0 var(--space-4);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: none;
}

/* Métricas por dominio */
.dashboard-metrics-by-domain {
  margin-top: var(--space-4);
}
.dashboard-usage-by-domain {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dashboard-usage-by-domain-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-light);
  gap: var(--space-4);
}
.dashboard-usage-by-domain-item:last-child {
  border-bottom: none;
}
.dashboard-usage-by-domain-name {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.dashboard-usage-by-domain-name:hover {
  text-decoration: underline;
}
.dashboard-usage-by-domain-info {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.dashboard-usage-by-domain-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.dashboard-usage-by-domain-count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 560px) {
  .dashboard-metrics-by-domain {
    padding: 0 var(--space-1);
  }

  .dashboard-usage-by-domain-item {
    padding: var(--space-3) 0;
    min-height: 48px;
  }
}
.dashboard-usage-by-domain-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.dashboard-error {
  color: #f87171;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.add-domain-form {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  align-items: flex-end;
}

.add-domain-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.add-domain-field:first-child {
  flex: 1 1 260px;
}

.add-domain-field--select,
.add-domain-field--button {
  flex: 0 0 auto;
}

.add-domain-form input {
  width: 100%;
  min-width: 200px;
  max-width: 320px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-base);
  background: var(--bg);
  color: var(--text);
}

.add-domain-language {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-base);
  background: var(--bg);
  color: var(--text);
  min-width: 160px;
}

.add-domain-language:focus {
  outline: none;
  border-color: var(--accent);
}

.add-domain-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.add-domain-form button {
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 2px 12px var(--accent-glow);
}

.add-domain-form button:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px var(--accent-glow);
}

.add-domain-form button:active:not(:disabled) {
  transform: translateY(0);
}

.add-domain-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Modal Editar proyecto: filas dominio/perfil con idioma y alinear select + botón */
.project-edit-resource-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
}

.project-edit-resource-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.4rem;
}

.project-edit-resource-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  min-width: 0;
  flex: 1;
}

.project-edit-lang-badge {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  line-height: 1.2;
  white-space: nowrap;
}

.project-edit-resource-quitar {
  flex-shrink: 0;
}

.add-domain-form.project-edit-add-form {
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.65rem 0.75rem;
}

.add-domain-form.project-edit-add-form .project-edit-add-form__select {
  flex: 1 1 0;
  min-width: 0;
}

.add-domain-form.project-edit-add-form .project-edit-add-form__control {
  width: 100%;
  min-width: 0;
  min-height: 2.65rem;
  box-sizing: border-box;
}

.add-domain-form.project-edit-add-form .project-edit-add-form__btn-wrap {
  flex: 0 0 auto;
  align-self: center;
}

.add-domain-form.project-edit-add-form .project-edit-add-form__btn {
  min-height: 2.65rem;
  padding: 0 1rem;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 480px) {
  .add-domain-form.project-edit-add-form {
    flex-wrap: wrap;
  }

  .add-domain-form.project-edit-add-form .project-edit-add-form__btn-wrap {
    width: 100%;
  }

  .add-domain-form.project-edit-add-form .project-edit-add-form__btn {
    width: 100%;
  }
}

.domains-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.domain-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.domain-item-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  overflow: visible;
}

.domain-item-domain-box {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.domain-item-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  flex-shrink: 0;
  width: auto;
}

.domain-item-actions .btn-delete {
  margin-left: var(--space-2);
}

.domain-item:hover {
  background: var(--bg-card-hover);
  border-color: rgba(245, 158, 11, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Lista dominios / proyectos / redes: columna de texto con ancho acotado para que los botones tengan sitio y puedan envolver */
.domain-item.domain-item--list {
  display: grid;
  grid-template-columns: minmax(0, clamp(10rem, 26vw, 17.5rem)) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3) var(--space-4);
  min-width: 0;
}

.domain-item.domain-item--list .domain-item-info {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.domain-item.domain-item--list .domain-item-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
  flex-shrink: 1;
}

@media (min-width: 901px) {
  .domain-item.domain-item--list .domain-name-link {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .domain-item.domain-item--list .domain-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .domain-item.domain-item--list .domain-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 900px) {
  .domain-item.domain-item--list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--space-3);
    width: 100%;
  }

  .domain-item.domain-item--list .domain-item-info {
    overflow: visible;
    max-width: none;
  }

  .domain-item.domain-item--list .domain-name-link,
  .domain-item.domain-item--list .domain-name,
  .domain-item.domain-item--list .domain-meta {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
  }

  /*
   * Listados principales (Mis dominios / proyectos / redes o mailing): ocultar rejilla de acciones
   * y usar .domain-item-list-stretched-link para que toda la tarjeta abra el dashboard del recurso.
   * Excluye las filas dentro del dashboard de un proyecto (.dashboard-project-dashboard-resource-list).
   */
  ul.domains-list:not(.dashboard-project-dashboard-resource-list) > li.domain-item.domain-item--list {
    position: relative;
    cursor: pointer;
  }

  ul.domains-list:not(.dashboard-project-dashboard-resource-list) > li.domain-item.domain-item--list .domain-item-info {
    position: relative;
    z-index: 0;
  }

  ul.domains-list:not(.dashboard-project-dashboard-resource-list) > li.domain-item.domain-item--list .domain-item-info a {
    pointer-events: none;
  }

  ul.domains-list:not(.dashboard-project-dashboard-resource-list) > li.domain-item.domain-item--list .domain-item-actions {
    display: none !important;
  }

  .domain-item-list-stretched-link {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    text-decoration: none;
  }

  .domain-item-list-stretched-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}

@media (min-width: 901px) {
  .domain-item-list-stretched-link {
    display: none !important;
  }
}

.domain-item-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.domain-name {
  font-weight: 500;
  color: var(--text);
  min-width: 0;
  overflow: visible;
  text-overflow: initial;
  white-space: normal;
  word-break: break-word;
}

.domain-name-link {
  color: var(--accent);
  text-decoration: none;
  display: block;
  overflow: visible;
  text-overflow: initial;
  white-space: normal;
  word-break: break-word;
}

.domain-name-link:hover {
  text-decoration: none;
  color: var(--accent-hover);
}

.domain-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Enlaces de acción en filas de dominio / redes (lista): gris + icono, alineado al menú lateral del sitio */
.domain-item-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition:
    color var(--transition),
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

.domain-item-nav-link:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  text-decoration: none;
  transform: translateY(-1px);
}

.domain-item-nav-link .domain-item-nav-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 0.92;
}

.domain-item-nav-link:hover .domain-item-nav-icon {
  opacity: 1;
}

.btn-dashboard {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.btn-dashboard:hover {
  background: var(--accent-soft);
  color: var(--accent);
  transform: translateY(-1px);
}

.link-editar-dominio {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.link-editar-dominio:hover {
  background: rgba(245, 158, 11, 0.28);
  color: var(--accent);
  transform: translateY(-1px);
}

.domain-form-full {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.domain-form-desc {
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}

.domain-form-section-title {
  font-size: 1rem;
  margin: 1.25rem 0 0.5rem;
  color: var(--accent);
  padding-bottom: 0.25rem;
}

.domain-form-hint {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0.25rem 0;
}

.domain-form-label {
  display: block;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.domain-form-label + .domain-form-label,
.domain-form-label + .domain-edit-actions {
  margin-top: 1rem;
}

.domain-form-input {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  margin-top: 0.25rem;
  background: var(--bg);
  color: var(--text);
}

.domain-form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.domain-form-textarea {
  resize: vertical;
  min-height: 6rem;
}

.domain-form-input--narrow {
  max-width: 6rem;
}

.domain-form-input--readonly:disabled {
  cursor: default;
  background: var(--bg);
  color: var(--text);
  opacity: 1;
}

/* Lista de temas (redacción): filas editables o solo lectura cuando la cola está bloqueada */
.redaccion-topics-lock-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius);
  background: rgba(120, 80, 40, 0.2);
}

.redaccion-topics-lock-banner p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text);
  flex: 1;
  min-width: 12rem;
}

.redaccion-topics-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

.redaccion-topics-list--readonly {
  padding: 0.5rem 0;
}

.redaccion-topics-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 4.85rem;
  align-items: center;
  gap: 0.5rem 0.6rem;
}

.redaccion-topics-row--readonly {
  grid-template-columns: 2.25rem 1fr;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}

.redaccion-topics-index {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

.redaccion-topics-line {
  font-size: var(--text-sm);
  color: var(--text);
  line-height: 1.4;
  word-break: break-word;
}

.redaccion-topics-row .domain-form-input {
  margin: 0;
  min-width: 0;
}

.redaccion-topics-remove {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  border-radius: var(--radius);
}

.redaccion-topics-add {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 4.85rem;
  gap: 0.5rem 0.6rem;
  align-items: center;
  margin-bottom: 0.5rem;
  margin-top: 0.15rem;
}

.redaccion-topics-add::before {
  content: '';
  display: block;
}

.redaccion-topics-add .domain-form-input {
  min-width: 0;
  margin: 0;
}

.redaccion-topics-add .redaccion-topics-add-btn {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.5rem;
  padding: 0 0.45rem;
  font-size: 0.8125rem;
  font-weight: var(--font-medium, 500);
  line-height: 1.2;
  border-radius: var(--radius);
  white-space: nowrap;
}

.redaccion-topics-empty {
  margin: 0.5rem 0 0.75rem;
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

/* Opciones de palabras: lista con círculo a la izquierda, seleccionado con borde naranja y fondo bronce */
.domain-form-wordcount-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.domain-form-wordcount-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.domain-form-wordcount-option:hover {
  border-color: rgba(245, 158, 11, 0.35);
}

.domain-form-wordcount-option--active {
  border-color: var(--accent);
  background: rgba(120, 80, 40, 0.25);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.4);
}

.domain-form-wordcount-option--active .domain-form-wordcount-radio {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 2px var(--bg);
}

.domain-form-wordcount-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.domain-form-wordcount-radio {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  background: transparent;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.domain-form-wordcount-option span:last-child {
  flex: 1;
  font-weight: 500;
  color: var(--text);
}

.domain-form-wordcount-option--readonly {
  cursor: default;
  pointer-events: none;
}

.domain-form-wordcount-option--readonly.domain-form-wordcount-option--active {
  border-color: var(--accent);
  background: rgba(120, 80, 40, 0.25);
}

.wp-category-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.wp-category-row--header {
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}

.wp-category-row--header .wp-category-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.wp-category-row--header .wp-category-label:first-of-type {
  width: 5rem;
  min-width: 5rem;
  flex-shrink: 0;
}

.wp-category-row--header .wp-category-label:nth-of-type(2) {
  flex: 1;
  min-width: 0;
}

.wp-category-label--action {
  width: 2rem;
  min-width: 2rem;
  flex-shrink: 0;
}

.wp-category-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wp-category-id {
  width: 5rem;
  min-width: 5rem;
  flex-shrink: 0;
}

.wp-category-name {
  flex: 1;
  min-width: 0;
}

.wp-category-remove {
  flex-shrink: 0;
  width: 2rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

.wp-category-remove:hover {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.08);
}

.manual-backlinks-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.manual-backlink-row--header {
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}

.manual-backlink-row--header .manual-backlink-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.manual-backlink-label {
  width: 14rem;
  min-width: 10rem;
  flex-shrink: 0;
}

.manual-backlink-row--header .manual-backlink-label:nth-of-type(2) {
  flex: 1;
  min-width: 0;
}

.manual-backlink-label--action {
  width: 2rem;
  min-width: 2rem;
  flex-shrink: 0;
}

.manual-backlink-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.manual-backlink-anchor {
  width: 14rem;
  min-width: 10rem;
  flex-shrink: 0;
}

.manual-backlink-url {
  flex: 1;
  min-width: 0;
}

.wp-category-add {
  margin-bottom: 0;
}

.sitemap-internal-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.sitemap-internal-row--header {
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}

.sitemap-internal-row--header .sitemap-internal-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.sitemap-internal-row--header .sitemap-internal-label:first-of-type {
  flex: 1;
  min-width: 0;
}

.sitemap-internal-label--action {
  width: 2rem;
  min-width: 2rem;
  flex-shrink: 0;
}

.sitemap-internal-row--header .sitemap-internal-label:nth-child(2) {
  width: auto;
  min-width: 6rem;
}

.sitemap-internal-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sitemap-internal-url {
  flex: 1;
  min-width: 0;
}

.sitemap-internal-row .btn-secondary.btn-sm {
  flex-shrink: 0;
}

.sitemap-external-rows {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.sitemap-external-row--header {
  padding: 0 0.35rem 0.25rem;
  border-bottom: 1px solid var(--border, #333);
  margin-bottom: 0.15rem;
}

.sitemap-external-row--header .sitemap-external-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted, #888);
  text-transform: none;
}

.sitemap-external-label {
  flex-shrink: 0;
}

.sitemap-external-row,
.sitemap-external-row--header {
  display: grid;
  grid-template-columns: minmax(260px, 2.2fr) minmax(170px, 1.1fr) 140px 150px 140px 120px minmax(160px, auto) 44px;
  gap: 0.75rem;
  align-items: center;
  min-width: 1230px;
}

.sitemap-external-row--header .sitemap-external-label--action {
  text-align: center;
}

.sitemap-external-row {
  padding: 0.8rem;
  border: 1px solid var(--border, #333);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card-bg, #161b22) 92%, white 8%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.sitemap-external-row .sitemap-external-url {
  width: 100%;
  min-width: 0;
}

.sitemap-external-row .sitemap-external-country {
  width: 100%;
  min-width: 0;
}

.sitemap-external-row .sitemap-external-date,
.sitemap-external-row .sitemap-external-date-readonly {
  width: 100%;
  min-width: 0;
}

.sitemap-external-row .sitemap-external-date-readonly {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 42px;
  padding: 0 0.8rem;
  border: 1px solid var(--border, #333);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-secondary, #10151d) 92%, white 8%);
  font-size: 0.9rem;
  color: var(--text-muted);
}
.sitemap-external-row .sitemap-external-today-count {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-left: 0.25rem;
}

.sitemap-external-row .sitemap-external-mindate {
  width: 100%;
  min-width: 0;
}

.sitemap-external-row .sitemap-external-mode,
.sitemap-external-row .sitemap-external-maxurls {
  width: 100%;
  min-width: 0;
}

.sitemap-external-row .sitemap-external-verify {
  width: 100%;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.sitemap-external-row .sitemap-external-remove {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sitemap-external-row .domain-form-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 1280px) {
  .sitemap-external-row,
  .sitemap-external-row--header {
    min-width: 1180px;
    grid-template-columns: minmax(240px, 2fr) minmax(160px, 1fr) 130px 140px 130px 110px minmax(150px, auto) 44px;
  }
}

.dashboard-sitemap-external-list {
  list-style: none;
  margin: 0.5rem 0 1rem 0;
  padding: 0;
}

.dashboard-sitemap-external-list li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}

.dashboard-sitemap-external-list li:last-child {
  border-bottom: none;
}

.dashboard-sitemap-external-list .sitemap-external-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.dashboard-sitemap-external-list .sitemap-external-date {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.domain-edit-actions .btn-primary-save {
  padding: 0.6rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--bg);
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  margin-top: 0.5rem;
}

.domain-edit-actions .btn-primary-save:hover:not(:disabled) {
  background: var(--accent-hover);
}

.domain-edit-actions .btn-primary-save:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.domain-edit-actions .btn-secondary {
  padding: 0.6rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  margin-top: 0.5rem;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.domain-edit-actions .btn-secondary:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.domain-edit-actions .btn-secondary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  color: var(--text-muted);
  border-color: var(--border);
}

.domain-edit-actions--inline {
  margin-top: 0.5rem;
}

.domain-edit-actions--inline .btn-primary-save {
  margin-top: 0;
}

.domain-edit-actions--row .btn-primary-save,
.domain-edit-actions--row .btn-secondary {
  margin-top: 0;
}

.domain-edit-actions--row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.domain-form-error {
  color: #f87171;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.domain-form-success {
  color: #4ade80;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.domain-form-label--checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.domain-form-label--checkbox input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent);
}

.domain-form-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-bottom: 0.5rem;
}

.domain-form-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--text);
}

.domain-form-radio input[type="radio"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent);
}

.redaccion-controls {
  margin-top: 0.5rem;
}

.redaccion-controls .domain-form-label {
  margin-bottom: 0.5rem;
}

.redaccion-worker-interval {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 1rem 1rem 1rem 1.25rem;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-left-width: 3px;
  border-left-color: var(--border);
}

.redaccion-worker-interval .domain-form-label:first-of-type {
  margin-top: 0;
}

.redaccion-worker-interval .domain-form-hint {
  margin-bottom: 0;
}

.redaccion-estado-texto {
  margin: 0.5rem 0 1rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.redaccion-estado-texto strong {
  color: var(--text);
}

.btn-delete {
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  color: #f87171;
  background: transparent;
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: var(--radius);
  cursor: pointer;
}

.btn-delete:hover {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

/* Eliminar en lista dominios / redes: icono + estilo gris (misma línea que otros enlaces) */
.domain-item-actions .btn-delete.domain-item-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  font-weight: 500;
  transition:
    color var(--transition),
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

.domain-item-actions .btn-delete.domain-item-delete-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(248, 113, 113, 0.35);
  transform: translateY(-1px);
}

.domain-item-actions .btn-delete.domain-item-delete-btn .domain-item-nav-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 0.92;
}

.domain-item-actions .btn-delete.domain-item-delete-btn:hover .domain-item-nav-icon {
  opacity: 1;
}

.articles-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.articles-table th,
.articles-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  transition: background var(--transition);
}

.articles-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-card);
}

.articles-table th {
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-4);
}

.articles-table td {
  color: var(--text);
}

.articles-table tbody tr:hover td {
  background: rgba(245, 158, 11, 0.06);
}

.articles-table a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}

.articles-table a:hover {
  text-decoration: none;
  color: var(--accent-hover);
}

.dashboard-worker-log-next {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.dashboard-worker-log-next strong {
  color: var(--accent);
}

.worker-log-terminal {
  background: #1a1a1a;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  min-height: 200px;
  max-height: 60vh;
  overflow: auto;
}

.worker-log-pre {
  margin: 0;
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #c2c2c2;
  white-space: pre-wrap;
  word-break: break-all;
}

.worker-log-loading,
.worker-log-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.articles-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-start;
  justify-content: flex-start;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}

.articles-filters .articles-filter-input {
  flex: 1 1 100%;
  min-width: 0;
  max-width: none;
  width: 100%;
  /* En columna (móvil), sin flex-grow: evita estirar el hueco vertical entre campos */
  align-self: stretch;
}

.articles-filters .articles-filter-label {
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 901px) {
  .articles-filters .articles-filter-label {
    flex: 1 1 min(11rem, 100%);
  }
}

.articles-filters .btn-primary,
.articles-filters .btn-secondary {
  flex: 0 0 auto;
}

.articles-filter-input {
  min-width: 0;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}

.articles-filter-input::placeholder {
  color: var(--text-muted);
}

.articles-filter-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.articles-filter-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.articles-filter-label-text {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-muted);
}

.articles-filter-date,
.articles-filter-select {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* iOS / Safari: el date nativo no ocupa el 100% del contenedor sin reset + pseudo WebKit */
.articles-filter-date {
  display: block;
  align-self: stretch;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.35;
}

.articles-filter-date::-webkit-datetime-edit {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.articles-filter-date::-webkit-datetime-edit-fields-wrapper {
  width: 100%;
  min-width: 0;
}

.articles-filter-date::-webkit-date-and-time-value {
  text-align: start;
}

.articles-filter-date:focus,
.articles-filter-select:focus {
  outline: none;
  border-color: var(--accent);
}

.articles-filter-select {
  cursor: pointer;
}

.articles-actions-cell {
  white-space: nowrap;
}

.articles-btn-action {
  margin-right: 0.35rem;
  margin-bottom: 0.25rem;
  transition: transform var(--transition), box-shadow var(--transition);
}

.articles-btn-action:hover:not(:disabled) {
  transform: translateY(-1px);
}

.articles-btn-action:active:not(:disabled) {
  transform: translateY(0);
}

/* Menú WordPress (artículos): mismo tema que el dashboard; evita fondo #fff + texto claro */
.articles-wp-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.articles-wp-cell-placeholder {
  color: var(--text-muted, inherit);
}

.articles-wp-menu-wrap {
  position: relative;
  flex-shrink: 0;
}

.articles-wp-dropdown {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
  color: var(--text);
}

.articles-wp-dropdown-header {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.articles-wp-dropdown-toolbar {
  display: flex;
  padding: 6px 14px 10px;
  gap: 8px;
}

.articles-wp-dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text);
  transition: background var(--transition);
}

.articles-wp-dropdown-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}

.articles-wp-dropdown-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.articles-wp-dropdown-item--sep {
  border-top: 1px solid var(--border);
}

.article-preview-body {
  max-height: 70vh;
  overflow-y: auto;
  text-align: left;
}

.article-preview-figure {
  margin: 0 0 1rem 0;
}

.article-preview-figure img {
  max-width: 100%;
  height: auto;
  display: block;
}

.article-preview-meta {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.article-preview-content {
  font-size: 0.95rem;
  line-height: 1.6;
}

.article-preview-content :first-child {
  margin-top: 0;
}

.article-view-page {
  max-width: 1180px;
  margin: 0 auto;
}

.article-view-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: 1.75rem 2rem;
  align-items: start;
}

.article-view-main {
  min-width: 0;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.article-view-main > .article-serp-preview {
  margin-bottom: 0;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}

.article-view-main > .article-view-seo-block,
.article-view-main > .article-view-meta-bar,
.article-view-main > .article-view-figure,
.article-view-main > .article-view-meta,
.article-view-main > .article-view-content {
  margin-bottom: 0;
}

.article-view-main > .article-view-figure {
  margin-top: 0;
}

.article-view-main > .article-view-downloads {
  margin-top: 0;
}

@media (max-width: 960px) {
  .article-view-layout {
    grid-template-columns: 1fr;
  }

  .article-view-main {
    max-width: none;
  }

  .article-view-aside {
    position: static;
  }

  .article-seo-panel {
    position: static;
  }
}

.article-view-aside {
  position: sticky;
  /* Debajo del topbar sticky (index.css) y de la cabecera “Artículos” sticky en vista artículo */
  top: calc(
    var(--topbar-height)
  );
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  align-self: start;
}

/* Vista previa SERP (orientativa, estilo resultado Google) */
.article-serp-preview-heading {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.article-serp-preview-card {
  background: #fff;
  color: #202124;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow:
    0 1px 3px rgba(32, 33, 36, 0.12),
    0 8px 28px rgba(0, 0, 0, 0.28);
  border: 1px solid #dadce0;
}

.article-serp-preview-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.article-serp-preview-favicon {
  border-radius: 50%;
  flex-shrink: 0;
  background: #f1f3f4;
}

.article-serp-preview-header-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.article-serp-preview-site-name {
  font-size: 14px;
  font-weight: 400;
  color: #202124;
  line-height: 1.3;
  word-break: break-word;
}

.article-serp-preview-url {
  font-size: 12px;
  color: #3c4043;
  line-height: 1.2;
  word-break: break-all;
}

.article-serp-preview-dots {
  color: #5f6368;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}

.article-serp-preview-title-line {
  font-size: 18px;
  line-height: 1.33;
  color: #1558d6;
  margin-bottom: 8px;
  word-break: break-word;
}

.article-serp-preview-snippet {
  font-size: 14px;
  line-height: 1.58;
  color: #3c4043;
}

.article-serp-preview-snippet--with-thumb {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.article-serp-preview-snippet-text {
  flex: 1;
  min-width: 0;
}

.article-serp-preview-date {
  color: #70757a;
}

.article-serp-preview-snippet--muted {
  color: #70757a;
}

.article-serp-preview-thumb-wrap {
  flex-shrink: 0;
}

.article-serp-preview-thumb {
  display: block;
  width: 104px;
  height: 104px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #dadce0;
}

/* Panel puntuación SEO (vista artículo) */
.article-seo-panel {
  position: static;
  padding: 1rem 1.1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.article-seo-panel-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.article-seo-panel-lead {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.article-seo-panel-gauge-wrap {
  text-align: center;
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.article-seo-gauge {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 0.35rem;
}

.article-seo-gauge-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.article-seo-gauge-track {
  stroke: color-mix(in srgb, var(--border) 85%, var(--text-muted));
}

.article-seo-gauge-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  pointer-events: none;
}

.article-seo-panel-overall-label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.article-seo-panel-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.article-seo-bar-row {
  margin: 0;
}

.article-seo-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.article-seo-bar-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.article-seo-bar-pct {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}

.article-seo-bar-track {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, transparent);
  overflow: hidden;
}

.article-seo-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent, #d97706), color-mix(in srgb, var(--accent, #d97706) 65%, #6366f1));
  transition: width 0.35s ease;
}

.article-seo-bar-hint {
  margin: 0.25rem 0 0;
  font-size: 0.65rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.article-seo-panel-footnote {
  margin: 0.85rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
  font-size: 0.65rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.article-view-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  padding: 0.7rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.article-view-meta-bar-item--domain {
  color: var(--accent);
  font-weight: 600;
}

.article-view-meta-bar-item--date {
  color: var(--text-muted);
  font-weight: 500;
}

.article-view-meta-bar-sep {
  color: var(--text-muted);
  opacity: 0.65;
  user-select: none;
}

.article-view-seo-block {
  margin-bottom: 0;
  padding: 1rem 1.15rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.article-view-seo-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.article-view-seo-title {
  font-size: 1rem;
  margin: 0;
  color: var(--text);
  line-height: 1.4;
}

.article-view-main-heading-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.article-view-back {
  margin-bottom: 1.25rem;
}

.article-view-back .dashboard-back-link {
  color: var(--accent);
  text-decoration: none;
}

.article-view-back .dashboard-back-link:hover {
  text-decoration: underline;
}

.mailing-article-view-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0, 0, 0, 0.55);
  overflow-y: auto;
  padding: 1rem;
  -webkit-overflow-scrolling: touch;
}

.mailing-article-view-panel {
  max-width: 920px;
  margin: 0 auto 2rem;
  padding: 1.25rem 1.5rem 2rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card, var(--bg));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.mailing-article-view-layout.article-view-layout {
  display: block;
}

.mailing-article-view-back-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.mailing-inbox-preview {
  margin-bottom: 1.25rem;
}

.mailing-inbox-preview-heading {
  margin: 0 0 0.5rem;
}

.mailing-inbox-preview-card {
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-card) 88%, var(--text-muted));
}

.mailing-inbox-preview-subject {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--text);
  margin: 0 0 0.35rem;
}

.mailing-inbox-preview-snippet {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 0;
}

.mailing-inbox-preview-snippet--muted {
  opacity: 0.75;
  font-style: italic;
}

.mailing-inbox-preview-hint {
  margin: 0.5rem 0 0;
  max-width: 42rem;
}

.mailing-article-resumen-label {
  display: block;
  margin: 1rem 0 0.35rem;
}

.mailing-article-plain-body {
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 4rem;
}

/* Pieza mailing en ruta propia (misma lectura que artículo, sin modal) */
.mailing-piece-article-layout.article-view-layout {
  display: block;
  grid-template-columns: none;
}

.article-view-figure {
  margin: 0;
}

.article-view-figure img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.article-view-meta {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0;
  padding: 0.85rem 1rem;
  line-height: 1.55;
  background: color-mix(in srgb, var(--bg-card) 92%, var(--text-muted));
  border: 1px solid var(--border);
  border-radius: 8px;
}

.article-view-content {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 0;
}

.article-view-content :first-child {
  margin-top: 0;
}

.article-view-content h1,
.article-view-content h2,
.article-view-content h3,
.article-view-content h4,
.article-view-content h5,
.article-view-content h6 {
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 0.5em;
}

.article-view-content h1:first-of-type {
  font-size: 1.5rem;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.article-view-content h1:not(:first-of-type) {
  font-size: 1.5rem;
  margin-top: 1.5rem;
}

.article-view-content h2 {
  font-size: 1.25rem;
  margin-top: 1.35rem;
}

.article-view-content h3 {
  font-size: 1.1rem;
  margin-top: 1.1rem;
}

.article-view-content h4 {
  font-size: 1.05rem;
  margin-top: 1rem;
}

.article-view-content h5 {
  font-size: 1rem;
  margin-top: 0.9rem;
}

.article-view-content h6 {
  font-size: 0.95rem;
  margin-top: 0.85rem;
}

/* Negritas: solo énfasis en el texto */
.article-view-content strong,
.article-view-content b {
  font-weight: 700;
  color: var(--text);
}

/* Backlinks: enlaces visibles y diferenciados */
.article-view-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-view-content a:hover {
  color: var(--accent-hover);
}

.article-view-downloads {
  margin-top: 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}

.article-view-downloads-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: var(--text);
}

.article-view-downloads-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem 0;
}

.article-view-downloads-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.article-view-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.article-action-loader {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: min(420px, calc(100vw - 2rem));
  padding: 0.9rem 1rem;
  background: rgba(15, 23, 42, 0.96);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
}

.article-action-loader-spinner {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 0.1rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  animation: article-action-loader-spin 0.8s linear infinite;
}

.article-action-loader-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.article-action-loader-copy strong {
  font-size: 0.95rem;
  line-height: 1.25;
}

.article-action-loader-copy span {
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}

@keyframes article-action-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

.articles-pagination-page {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.generation-log-card {
  padding: 1rem 1.25rem;
}

.generation-log-card .config-summary-group-title {
  margin-bottom: 0.5rem;
}

.generation-log-table-wrap {
  overflow-x: auto;
}

.generation-log-table {
  font-size: 0.85rem;
}

.generation-log-status {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}

.generation-log-status--queued {
  background: var(--accent-soft);
  color: var(--accent);
}

.generation-log-status--completed {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.generation-log-status--failed {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

.generation-log-status--running {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.generation-log-message {
  max-width: 20rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.dashboard-password {
  margin-top: 1rem;
}

.dashboard-password h2,
.dashboard-password .cuenta-card-title {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.dashboard-password label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.dashboard-password input {
  display: block;
  width: 100%;
  max-width: 320px;
  margin-top: 0.25rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.dashboard-password input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.dashboard-password button {
  margin-top: 0.5rem;
  padding: 0.6rem 1.25rem;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
}

.dashboard-password button:disabled {
  opacity: 0.7;
}

.dashboard-api {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.dashboard-api-auth-card,
.dashboard-api-endpoints-card,
.dashboard-api-examples-card {
  padding: 1.25rem 1.5rem;
}

.dashboard-api-card-title {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.dashboard-api-auth-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dashboard-api-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.dashboard-api-field-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.dashboard-api-field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.dashboard-api-key-display,
.dashboard-api-base-url {
  font-size: 0.85rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  word-break: break-all;
  color: var(--text);
  flex: 1;
  min-width: 0;
}

.dashboard-api-key-empty {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-style: italic;
}

.dashboard-api-copy-btn {
  flex-shrink: 0;
}

.dashboard-api-link {
  font-size: 0.9rem;
  color: var(--accent);
  text-decoration: none;
  flex-shrink: 0;
}

.dashboard-api-link:hover {
  text-decoration: underline;
}

.dashboard-api-endpoint-groups {
  margin-top: 0.25rem;
}

.dashboard-api-list-group-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin: 1.25rem 0 0.4rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-light);
}

.dashboard-api-list-group-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.dashboard-api-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dashboard-api-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.5rem;
  margin: 0.65rem 0;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.45;
}

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

.dashboard-api-method {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2em 0.5em;
  border-radius: 4px;
  flex-shrink: 0;
}

.dashboard-api-method--get {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.dashboard-api-method--post {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.dashboard-api-method--patch {
  background: rgba(234, 179, 8, 0.18);
  color: #eab308;
}

.dashboard-api-method--delete {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.dashboard-api-list code {
  font-size: 0.85em;
  padding: 0.15em 0.35em;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  color: var(--text);
}

.dashboard-api-examples-hint {
  margin: 0 0 1.25rem !important;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.dashboard-api-examples-hint code {
  font-size: 0.9em;
  padding: 0.1em 0.3em;
  background: var(--bg-elevated);
  border-radius: var(--radius);
}

.dashboard-api-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
  margin-bottom: 1rem;
}

.dashboard-api-tab {
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.dashboard-api-tab:hover {
  color: var(--text);
  border-color: var(--border);
}

.dashboard-api-tab--active {
  color: var(--accent);
  background: rgba(234, 179, 8, 0.1);
  border-color: var(--accent);
}

.dashboard-api-pre-wrap {
  position: relative;
  margin-bottom: 1rem;
}

.dashboard-api-pre-copy {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
}

.dashboard-api-pre {
  margin: 0;
  padding: 1.25rem 1rem 1rem;
  padding-right: 5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.8rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--text);
  min-height: 12rem;
}

.dashboard-api-note {
  margin: 0;
  padding: 0.75rem 1rem;
  background: rgba(234, 179, 8, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.dashboard-api-note strong {
  color: var(--text);
}

/* API — página mejorada (/dashboard/api) */
.dashboard-api.api-page {
  max-width: none;
  width: 100%;
  margin-bottom: var(--space-8);
  box-sizing: border-box;
}

.dashboard-main .dashboard-content-wrap > section.dashboard-section.dashboard-api.api-page:last-child {
  padding-bottom: 0;
}

.dashboard-main .dashboard-content-wrap > section.dashboard-section.dashboard-worker-log:last-child {
  padding-bottom: 0;
}

.dashboard-main .dashboard-content-wrap > section.dashboard-section.credit-history-layout:last-child {
  padding-bottom: 0;
}

.api-page-help.domain-page-help a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.api-page-help.domain-page-help a:hover {
  text-decoration: underline;
}

.api-page-inline-code {
  font-size: 1em;
  padding: 0.12em 0.35em;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: ui-monospace, monospace;
  color: var(--text);
}

.api-page .domain-page-lead .api-page-inline-code {
  font-size: 0.78em;
}

.api-card-section-title {
  margin-top: 0;
  margin-bottom: var(--space-2);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.api-auth-card-lead {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

.api-endpoints-lead {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.api-examples-hint {
  margin-top: 0 !important;
}

/* Log del worker — página mejorada (/dashboard/log) */
.log-page {
  margin-bottom: var(--space-8);
}

.log-page .domain-page-header {
  margin-bottom: var(--space-4);
}

.log-page .domain-page-lead a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.log-page .domain-page-lead a:hover {
  text-decoration: underline;
}

.log-page-help.domain-page-help a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.log-page-help.domain-page-help a:hover {
  text-decoration: underline;
}

.log-terminal-card {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
}

.log-terminal-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.log-terminal-card-title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.log-terminal-card-meta {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: none;
}

.log-terminal-card-meta strong {
  color: var(--text);
}

.log-terminal-refresh {
  flex-shrink: 0;
}

.log-terminal-schedule {
  margin: 0 0 var(--space-3) !important;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elevated);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 0.875rem;
}

.log-terminal-schedule strong {
  color: var(--accent);
}

.worker-log-terminal--framed {
  border-radius: var(--radius);
  min-height: 220px;
  max-height: min(60vh, 520px);
}

@media (max-width: 540px) {
  .log-terminal-card-head {
    flex-direction: column;
    align-items: stretch;
  }

  .log-terminal-refresh {
    align-self: flex-start;
  }
}

/* ========== Herramientas por dominio: cabecera y bloques de ayuda ========== */
.domain-tool-section {
  margin-bottom: var(--space-8);
}

.domain-page-header {
  margin-bottom: var(--space-5);
}

.domain-page-header--in-card {
  margin-bottom: var(--space-4);
}

.domain-page-title {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.2rem, 2.5vw, 1.45rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

.domain-page-lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: none;
}

.domain-page-context-secondary {
  margin-top: calc(var(--space-2) * -1);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.domain-page-help {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

.domain-page-help--compact {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
}

.domain-page-help-title {
  display: block;
  margin: 0 0 var(--space-3);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
}

.domain-page-help-list {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.domain-page-help-list li {
  margin: 0;
}

.domain-page-help-list strong {
  color: var(--text);
  font-weight: 600;
}

.domain-tool-main-card {
  margin-top: 0;
}

.domain-form-hint--block {
  display: block;
  margin-bottom: 0.75rem;
  max-width: none;
  line-height: 1.5;
}

.dashboard-plan-seo.domain-tool-section--plan-seo .dashboard-plan-seo-desc.domain-page-lead {
  margin-bottom: var(--space-4);
}

@media (max-width: 640px) {
  .domain-page-help {
    padding: var(--space-3) var(--space-4);
  }


}

/* ========== PLAN SEO / ESTRATEGIA DE CONTENIDOS ========== */
.dashboard-plan-seo {
  padding: 1.5rem 1.75rem;
}

.dashboard-plan-seo.domain-tool-section--plan-seo {
  padding: 0;
}

/* Plan SEO (dominio): titulares y botones con acento del panel */
.domain-tool-section--plan-seo .domain-page-title,
.domain-tool-section--plan-seo .dashboard-plan-seo-title {
  color: var(--accent);
}

.domain-tool-section--plan-seo .domain-page-help-title {
  color: var(--accent);
}

.domain-tool-section--plan-seo .dashboard-plan-seo-subtitle {
  color: var(--accent);
}

.domain-tool-section--plan-seo .dashboard-plan-seo-month-title {
  color: var(--accent);
}

.domain-tool-section--plan-seo .dashboard-plan-seo-select > .domain-form-label {
  color: var(--accent);
  font-weight: 600;
}

.domain-tool-section--plan-seo .btn-primary-save {
  color: var(--bg);
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 2px 14px var(--accent-glow);
  font-weight: 600;
}

.domain-tool-section--plan-seo .btn-primary-save:hover:not(:disabled) {
  background: var(--accent-hover);
  color: var(--bg);
  box-shadow: 0 6px 28px var(--accent-glow);
  transform: translateY(-2px);
}

.domain-tool-section--plan-seo .btn-primary-save:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.domain-tool-section--plan-seo .btn-secondary {
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  box-shadow: none;
}

.domain-tool-section--plan-seo .btn-secondary:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.28);
  color: var(--accent);
  border-color: var(--accent);
}

.domain-tool-section--plan-seo .btn-secondary:disabled {
  opacity: 0.55;
  color: var(--text-muted);
  border-color: var(--border);
  background: transparent;
}

.dashboard-plan-seo-title {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
}

.dashboard-plan-seo-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0 0 1.5rem;
  line-height: 1.5;
}

.dashboard-plan-seo-select .domain-form-label {
  margin-bottom: 0.75rem;
}

.dashboard-plan-seo-domain-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.dashboard-plan-seo-domain-card {
  padding: 1rem 1.25rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  min-width: 12rem;
}

.dashboard-plan-seo-domain-card:hover {
  background: var(--bg-elevated);
  border-color: var(--accent);
}

.dashboard-plan-seo-domain-name {
  display: block;
  font-weight: 600;
  color: var(--text);
}

.dashboard-plan-seo-domain-lang {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.dashboard-plan-seo-empty {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0.5rem 0 0;
}

.dashboard-plan-seo-back {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dashboard-plan-seo-domain-badge {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.dashboard-plan-seo-domain-badge--inline {
  font-weight: 500;
  color: var(--text);
}

.dashboard-plan-seo-back-link {
  margin-left: auto;
  font-size: 0.875rem;
  color: var(--accent);
  text-decoration: none;
}

.dashboard-plan-seo-back-link:hover {
  text-decoration: underline;
}

.dashboard-plan-seo-loading {
  color: var(--text-muted);
  margin: 1rem 0;
}

.dashboard-plan-seo-error {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.9rem;
}

.dashboard-plan-seo-form {
  margin-bottom: 1.5rem;
}

.dashboard-plan-seo-form .domain-form-label {
  display: block;
  margin-bottom: 1rem;
}

.dashboard-plan-seo-actions {
  margin-top: 1rem;
}

.dashboard-plan-seo-calendar-view-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.dashboard-plan-seo-month-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}

.dashboard-plan-seo-month-nav-label {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
}

.dashboard-plan-seo-suggest.card,
.dashboard-plan-seo-calendar.card,
.dashboard-plan-seo-sources.card,
.dashboard-plan-seo-export.card {
  margin-top: 1.25rem;
}

.dashboard-plan-seo-export.card {
  padding: 1.35rem 1.65rem 1.85rem;
}

.dashboard-plan-seo-export-desc {
  margin-top: 0.35rem;
  margin-bottom: 1.35rem;
  line-height: 1.55;
}

.dashboard-plan-seo-export-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.1rem;
  row-gap: 0.85rem;
  column-gap: 1.1rem;
  margin-top: 0.25rem;
  padding-top: 0.5rem;
}

.dashboard-plan-seo-sources.card {
  padding: 1.5rem 1.65rem 1.65rem;
  margin-bottom: 1.75rem;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft);
}

.dashboard-plan-seo-sources .dashboard-plan-seo-subtitle {
  margin-bottom: 0.65rem;
}

.dashboard-plan-seo-sources-lead {
  margin-top: 0.15rem;
  margin-bottom: 1.1rem;
  line-height: 1.55;
}

.dashboard-plan-seo-sources-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.75rem;
  margin: 0.35rem 0 1rem;
}

.dashboard-plan-seo-sources-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--bg-elevated, var(--bg));
}

.dashboard-plan-seo-sources-pill--ok {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.dashboard-plan-seo-sources-pill--off {
  opacity: 0.85;
}

.dashboard-plan-seo-sources-pill--warn {
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.12);
}

.dashboard-plan-seo-sources-ready {
  margin-top: 0.35rem;
  margin-bottom: 0.15rem;
  color: var(--text);
  line-height: 1.5;
}

.dashboard-plan-seo-sources .domain-form-hint:last-child {
  margin-top: 0.5rem;
  margin-bottom: 0;
  line-height: 1.5;
}

.dashboard-plan-seo-suggest.card {
  padding: 1.25rem 1.5rem;
}

.dashboard-plan-seo-calendar.card {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

.dashboard-plan-seo-calendar.card:hover {
  background: transparent;
  border: none;
  box-shadow: none;
  transform: none;
}

.dashboard-plan-seo-calendar .dashboard-plan-seo-subtitle {
  margin: 0 0 0.35rem;
}

.dashboard-plan-seo-calendar .domain-form-hint {
  margin-top: 0;
  margin-bottom: 0.35rem;
}

.dashboard-plan-seo-calendar .dashboard-plan-seo-actions {
  margin-top: 0.75rem;
}

.dashboard-plan-seo-subtitle {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.dashboard-plan-seo-source-toggles {
  margin: 1rem 0 1.1rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
}

.dashboard-plan-seo-source-toggles-title {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
}

.dashboard-plan-seo-source-toggles .dashboard-plan-seo-check {
  display: flex;
  margin: 0.45rem 0 0.15rem;
}

.dashboard-plan-seo-check--disabled {
  opacity: 0.72;
}

.dashboard-plan-seo-source-toggles-hint {
  margin: 0.15rem 0 0.5rem 1.5rem;
  font-size: 0.8125rem;
}

.dashboard-plan-seo-source-toggles-hint:last-child {
  margin-bottom: 0;
}

.dashboard-plan-seo-suggest-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 0.75rem 0 1rem;
}

.dashboard-plan-seo-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.75rem;
}

.dashboard-plan-seo-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.dashboard-plan-seo-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.25s ease;
}

.dashboard-plan-seo-progress-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  min-width: 2.5rem;
}

.dashboard-plan-seo-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: default;
}

.dashboard-plan-seo-suggest-list {
  margin-top: 1rem;
}

.dashboard-plan-seo-suggest-list ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.dashboard-plan-seo-suggest-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.9rem;
  color: var(--text);
}

.dashboard-plan-seo-suggest-item span {
  flex: 1;
  min-width: 200px;
}

.dashboard-plan-seo-month-select {
  width: auto;
  min-width: 10rem;
}

.dashboard-plan-seo-months {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin-top: 0.65rem;
}

.dashboard-plan-seo-month-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1rem 1.1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 0;
}

.dashboard-plan-seo-month-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.dashboard-plan-seo-month-topics-wrap {
  width: 100%;
  margin: 0;
  min-width: 0;
}

.dashboard-plan-seo-month-topics-empty {
  margin-top: 0.35rem;
  margin-bottom: 0.35rem;
}

.dashboard-plan-seo-month-topics-hint {
  display: block;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.dashboard-plan-seo-month-card .dashboard-plan-seo-month-topics-wrap .redaccion-topics-list {
  margin-top: 0.35rem;
}

.dashboard-plan-seo-month-card .dashboard-plan-seo-month-notes {
  margin-top: 0;
}

.dashboard-plan-seo-month-notes {
  width: 100%;
  font-size: 0.9rem;
  margin: 0;
}

.dashboard-plan-seo-month-card-actions {
  margin-top: 0;
}

.dashboard-plan-seo-month-card-actions .btn {
  width: fit-content;
  max-width: 100%;
}

.dashboard-api-note a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.dashboard-api-note a:hover {
  text-decoration: underline;
}

.dashboard-integraciones {
  margin-top: 1rem;
}

.dashboard-integraciones h2 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--accent);
}

.dashboard-integraciones-desc {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.dashboard-integraciones-api,
.dashboard-integraciones-webhooks {
  margin-top: 1.25rem;
}

.dashboard-integraciones-api h3,
.dashboard-integraciones-webhooks h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: var(--text);
}

.dashboard-integraciones-api p,
.dashboard-integraciones-webhooks p {
  margin: 0.5rem 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.dashboard-integraciones-api-key-show {
  margin-top: 0.5rem;
}

.dashboard-integraciones-api-key-value {
  display: block;
  margin: 0.5rem 0;
  padding: 0.75rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85rem;
  word-break: break-all;
}

.dashboard-integraciones-webhooks-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1rem;
}

.dashboard-integraciones-webhook-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-light);
}

.dashboard-integraciones-webhook-url {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-integraciones-webhook-events {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.dashboard-integraciones-webhook-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.dashboard-integraciones-webhook-form-field {
  margin-bottom: 0.75rem;
}

.dashboard-integraciones-webhook-form-field .dashboard-integraciones-webhook-form-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.dashboard-integraciones-webhook-form input[type="url"] {
  display: block;
  width: 100%;
  max-width: 400px;
  margin-top: 0.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.dashboard-integraciones-webhook-events-checkboxes {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.dashboard-integraciones-webhook-event-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  margin: 0;
}

.dashboard-integraciones-webhook-event-label input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.dashboard-integraciones-webhook-form button {
  margin-top: 0.75rem;
}

.dashboard-success {
  color: #22c55e;
  margin-bottom: 0.5rem;
}

.domains-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 1rem 0;
}

.dashboard-cuenta .cuenta-plan-card p,
.dashboard-cuenta .cuenta-section-card p {
  margin: 0.5rem 0;
  color: var(--text-muted);
}

/* Mi cuenta — layout mejorado */
.cuenta-page {
  margin-bottom: var(--space-8);
}

.cuenta-page .domain-page-header {
  margin-bottom: var(--space-4);
}

.cuenta-page-help.domain-page-help a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.cuenta-page-help.domain-page-help a:hover {
  text-decoration: underline;
}

.cuenta-quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.cuenta-quick-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.cuenta-quick-nav-link:hover {
  border-color: var(--accent);
  background: var(--bg-elevated);
  text-decoration: none;
  color: var(--accent);
}

.cuenta-card-title {
  margin: 0 0 var(--space-2);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.cuenta-card-desc {
  margin: 0 0 var(--space-4);
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: none;
}

.cuenta-plan-card {
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
}

.cuenta-plan-email {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

.cuenta-plan-email-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.cuenta-plan-email-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
}

.cuenta-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--space-3);
}

.cuenta-plan-tile {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 4.25rem;
}

.cuenta-plan-tile--wide {
  grid-column: 1 / -1;
}

.cuenta-plan-tile-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}

.cuenta-plan-tile-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.cuenta-plan-tile-value--accent {
  color: var(--accent);
  font-size: 1.2rem;
}

.cuenta-plan-inline-link {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.cuenta-plan-inline-link:hover {
  text-decoration: underline;
}

.cuenta-plan-footer {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.cuenta-section-card {
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
}

.cuenta-page .dashboard-profile-card {
  margin-top: 0;
}

.cuenta-page .dashboard-password {
  margin-top: 0;
}

.cuenta-page .dashboard-integraciones {
  margin-top: 0;
}

.cuenta-integracion-hint {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: none;
}

.cuenta-integracion-hint code {
  font-size: 0.8em;
  padding: 0.12em 0.35em;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  color: var(--text);
}

.cuenta-page .dashboard-integraciones h2.cuenta-card-title {
  color: var(--text);
  font-size: 1.1rem;
}

@media (max-width: 640px) {
  .cuenta-plan-card,
  .cuenta-section-card {
    padding: var(--space-4);
  }

  .cuenta-plan-grid {
    grid-template-columns: 1fr;
  }
}

.dashboard-cuenta-upgrade {
  margin-top: 1rem;
}

.dashboard-cuenta-upgrade a {
  color: var(--accent);
  text-decoration: none;
}

.dashboard-cuenta-upgrade a:hover {
  text-decoration: none;
  color: var(--accent-hover);
}

.dashboard-cuenta-plan-vencido,
.plan-name-vencido {
  color: #b91c1c;
  font-weight: 500;
}

.dashboard-profile-card {
  margin-top: 1rem;
}

.dashboard-profile-form label {
  display: block;
  margin-bottom: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.dashboard-profile-form .dashboard-form-input {
  display: block;
  width: 100%;
  max-width: 20rem;
  margin-top: 0.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  background: var(--bg);
  color: var(--text);
}

.dashboard-profile-form .dashboard-form-input:focus {
  outline: none;
  border-color: var(--accent);
}

.dashboard-profile-form button {
  margin-top: 0.5rem;
}

.dashboard-limit-alert {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: var(--text);
  font-size: 0.95rem;
}

.dashboard-limit-alert--zero {
  background: rgba(220, 80, 60, 0.12);
  border-color: rgba(220, 80, 60, 0.4);
}

.dashboard-limit-alert-link {
  font-weight: 600;
  color: var(--accent);
}

.dashboard-limit-alert-link:hover {
  color: var(--accent-hover);
}

/* Banner trial (prueba de 7 días) */
.dashboard-trial-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}
.dashboard-trial-banner--ended {
  background: #fef2f2;
  border-color: #f87171;
  color: #991b1b;
}
.dashboard-trial-banner-link {
  font-weight: 600;
  color: var(--accent);
}
.dashboard-trial-banner--ended .dashboard-trial-banner-link {
  color: #dc2626;
}
.dashboard-trial-banner-link:hover {
  text-decoration: underline;
}

/* Vencimiento membresía en Precios */
.dashboard-membership-expiry {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}
.dashboard-membership-expiry--ended {
  background: #fef2f2;
  border-color: #f87171;
  color: #991b1b;
}

.dashboard-enterprise-plan-notice {
  padding: 1.25rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}

.dashboard-enterprise-plan-notice h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.15rem;
  color: var(--text);
}

.dashboard-enterprise-plan-notice p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.dashboard-enterprise-plan-hint {
  margin-top: 0.65rem !important;
}

/* Precios: el área principal del dashboard sin tope --content-max */
.dashboard-content-wrap--precios-full {
  max-width: none;
  width: 100%;
}

/* Precios en panel: ancho completo y sin cajas tipo .card en la calculadora */
.page-pricing--dashboard .page-pricing-calculator-wrap,
.page-pricing--dashboard .pricing-calculator {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.page-pricing--dashboard .pricing-calculator-inner {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 22rem);
  gap: 1.5rem;
}

.page-pricing--dashboard .pricing-calc-plan-strip {
  background: transparent;
  border: none;
  padding: 0;
  /* No width:100%: comparte fila con Moneda (misma altura que los tabs). */
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
}

@media (min-width: 901px) {
  .page-pricing--dashboard .pricing-calc-plan-row {
    flex-wrap: nowrap;
  }
}

.page-pricing--dashboard .pricing-calc-field {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}

.page-pricing--dashboard .pricing-calc-field:hover {
  border-color: var(--border);
}

.page-pricing--dashboard .pricing-calculator-left > .pricing-calc-field:last-child {
  border-bottom: none;
}

.page-pricing--dashboard .pricing-calculator-summary {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

@media (min-width: 901px) {
  .page-pricing--dashboard .pricing-calculator-summary {
    border-left: 1px solid var(--border);
    padding-left: 1.25rem;
    margin-left: 0;
  }
}

.page-pricing--dashboard .pricing-calc-idioma-option {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  padding: 0.65rem;
  box-shadow: none;
}

.page-pricing--dashboard .pricing-calc-idioma-option--active {
  box-shadow: none;
  background: var(--accent-soft);
}

.page-pricing--dashboard .pricing-calc-wordcount-option {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  padding: 0.65rem 0;
  box-shadow: none;
}

.page-pricing--dashboard .pricing-calc-wordcount-option--active {
  box-shadow: none;
  background: rgba(120, 80, 40, 0.12);
}

.page-pricing--dashboard .pricing-calc-wordcount-option:hover {
  border-color: var(--border);
}

/* No aplicar al bloque del modal (.pricing-calc-transfer-instructions--modal): su diseño va en index.css */
.page-pricing--dashboard .pricing-calc-transfer-instructions:not(.pricing-calc-transfer-instructions--modal) {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
}

.page-pricing--dashboard .pricing-calc-transfer-instructions:not(.pricing-calc-transfer-instructions--modal) .pricing-calc-transfer-title,
.page-pricing--dashboard .pricing-calc-transfer-instructions:not(.pricing-calc-transfer-instructions--modal) .pricing-calc-transfer-ref,
.page-pricing--dashboard .pricing-calc-transfer-instructions:not(.pricing-calc-transfer-instructions--modal) .pricing-calc-transfer-concept,
.page-pricing--dashboard .pricing-calc-transfer-instructions:not(.pricing-calc-transfer-instructions--modal) .pricing-calc-transfer-amount,
.page-pricing--dashboard .pricing-calc-transfer-instructions:not(.pricing-calc-transfer-instructions--modal) .pricing-calc-transfer-bank,
.page-pricing--dashboard .pricing-calc-transfer-instructions:not(.pricing-calc-transfer-instructions--modal) .pricing-calc-transfer-extra {
  color: var(--text);
}

.page-pricing--dashboard .pricing-calc-transfer-note {
  color: var(--text-muted);
}

.page-pricing--dashboard .dashboard-enterprise-plan-notice {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

@media (max-width: 900px) {
  .page-pricing--dashboard .pricing-calculator-inner {
    grid-template-columns: 1fr;
  }

  .page-pricing--dashboard .pricing-calculator-summary {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
    margin-top: 0.5rem;
  }
}

@media (max-width: 640px) {
  .page-pricing--dashboard .pricing-calc-field {
    padding: 0.85rem 0;
  }
}

.dashboard-facturacion-note {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Facturación — layout mejorado */
.factura-page {
  margin-bottom: var(--space-8);
}

.factura-page .domain-page-header {
  margin-bottom: var(--space-4);
}

.factura-page-help.domain-page-help a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.factura-page-help.domain-page-help a:hover {
  text-decoration: underline;
}

.factura-enterprise-banner {
  margin-bottom: var(--space-5);
}

.factura-enterprise-banner-title {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--text);
}

.factura-main-card {
  padding: var(--space-6) var(--space-6);
  border-radius: var(--radius-lg);
}

.factura-main-card > p.cuenta-card-desc,
.factura-main-card p.factura-main-card-lead {
  margin: 0 0 var(--space-6);
  line-height: 1.65;
}

.factura-main-card .cuenta-card-title {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.factura-main-card-lead {
  margin-bottom: var(--space-6);
}

/* Rejilla de resumen: más hueco entre tarjetas y dentro */
.factura-page .factura-summary-grid.cuenta-plan-grid {
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(12.25rem, 1fr));
}

.factura-page .factura-summary-grid .cuenta-plan-tile {
  padding: 1.15rem 1.35rem;
  gap: 0.55rem;
  min-height: 5.75rem;
}

.factura-page .factura-summary-grid .cuenta-plan-tile-value {
  line-height: 1.45;
}

.factura-summary-grid {
  margin-bottom: var(--space-3);
}

.factura-tile-hint {
  margin: 0.55rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.factura-main-card .cuenta-plan-tile .factura-tile-hint {
  margin: 0.55rem 0 0;
}

.factura-historial-block {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.factura-historial-head {
  margin-bottom: var(--space-3);
}

.factura-historial-title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}

.factura-historial-desc {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.factura-invoices-wrap {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
}

.factura-invoices-wrap .dashboard-facturacion-table thead th {
  background: var(--bg-elevated);
}

.factura-invoices-wrap .dashboard-facturacion-pagination {
  margin-top: 1rem;
}

.factura-main-footnote {
  margin-top: var(--space-5);
  margin-bottom: 0;
}

.factura-main-footnote a {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.factura-main-footnote a:hover {
  text-decoration: underline;
}

.factura-cancel-card {
  margin-top: var(--space-6);
  padding: 1.85rem 1.85rem 0;
  border-radius: var(--radius-lg);
}

.factura-cancel-card .cuenta-card-title {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.factura-cancel-card > p.cuenta-card-desc,
.factura-cancel-card p.factura-cancel-desc {
  margin: 0 0 var(--space-5);
  line-height: 1.65;
}

.factura-cancel-desc {
  margin-bottom: var(--space-5);
}

.factura-cancel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.factura-cancel-actions .btn {
  margin-top: 0;
}

.factura-cancel-extra-hint {
  margin-top: var(--space-5);
  margin-bottom: 0;
  line-height: 1.55;
}

.factura-cancel-card p.factura-cancel-extra-hint {
  margin: var(--space-5) 0 0;
}

@media (max-width: 640px) {
  .factura-main-card {
    padding: var(--space-5) var(--space-4);
  }

  .factura-cancel-card {
    padding: var(--space-5) var(--space-4) 0;
  }

  .factura-page .factura-summary-grid.cuenta-plan-grid {
    gap: 1rem;
    grid-template-columns: 1fr;
  }
}

.factura-inline-code {
  font-size: 0.85em;
  padding: 0.12em 0.35em;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  font-family: ui-monospace, monospace;
  color: var(--text);
}

.factura-cancel-extra-hint a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.factura-cancel-extra-hint a:hover {
  text-decoration: underline;
}

.dashboard-facturacion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2rem;
  margin-top: 1rem;
}

@media (max-width: 560px) {
  .dashboard-facturacion-grid {
    grid-template-columns: 1fr;
  }
}

.dashboard-facturacion-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dashboard-facturacion-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.dashboard-facturacion-value {
  font-size: 1rem;
  color: var(--text);
  font-weight: 500;
}

.dashboard-facturacion-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

.dashboard-facturacion-historial {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.dashboard-facturacion-subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

.dashboard-facturacion-empty {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
  font-style: italic;
}

.dashboard-facturacion-invoices {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dashboard-facturacion-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.dashboard-facturacion-table th,
.dashboard-facturacion-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
.dashboard-facturacion-table thead th {
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--border);
}
.dashboard-facturacion-invoice-row {
  transition: background-color 0.15s ease;
}
.dashboard-facturacion-invoice-row:hover {
  background-color: var(--bg-soft);
}
.dashboard-facturacion-invoice-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: var(--space-3) var(--space-4);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-light);
  font-size: var(--text-sm);
}
.dashboard-facturacion-invoice-item:last-child {
  border-bottom: none;
}
.dashboard-facturacion-invoice-date {
  color: var(--text-muted);
}
.dashboard-facturacion-invoice-plan {
  font-weight: 500;
}
.dashboard-facturacion-invoice-amount {
  font-variant-numeric: tabular-nums;
}
.dashboard-facturacion-invoice-status {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}
.dashboard-facturacion-invoice-status--paid {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}
.dashboard-facturacion-invoice-status--pending {
  background: rgba(245, 158, 11, 0.2);
  color: #b45309;
}
.dashboard-facturacion-invoice-status--cancelled,
.dashboard-facturacion-invoice-status--refunded {
  background: var(--accent-soft);
  color: var(--text-muted);
}
.dashboard-facturacion-invoice-method {
  color: var(--text-muted);
  font-size: 0.85rem;
}
/* .dashboard-facturacion-pagination: estilos de caja en bloque unificado de paginación */
@media (max-width: 640px) {
  .dashboard-facturacion-table thead {
    display: none;
  }
  .dashboard-facturacion-invoice-row {
    display: block;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-light);
  }
  .dashboard-facturacion-invoice-row td {
    display: block;
    padding: 0.25rem 0;
    border: none;
  }
  .dashboard-facturacion-invoice-row td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-right: 0.5rem;
  }
  .dashboard-facturacion-invoice-date::before { content: 'Fecha: '; }
  .dashboard-facturacion-invoice-plan::before { content: 'Plan: '; }
  .dashboard-facturacion-invoice-amount::before { content: 'Importe: '; }
  .dashboard-facturacion-invoice-method::before { content: 'Método: '; }
}

.dashboard-facturacion-cancel {
  margin-top: 1rem;
}

.dashboard-facturacion-cancel-success {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 8px;
  color: #16a34a;
  font-weight: 500;
  font-size: 0.95rem;
}
.dashboard-facturacion-cancel-success-close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
  border-radius: 4px;
}
.dashboard-facturacion-cancel-success-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}

.dashboard-facturacion-cancel h2 {
  margin-top: 0;
}

.dashboard-facturacion-cancel .btn {
  margin-top: 0;
}

/* Modal actions (botones dentro del modal) */
.modal-actions .btn {
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
}

.modal-actions .btn-secondary {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.modal-actions .btn-secondary:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.modal-actions .btn-danger {
  background: #b91c1c;
  color: #fff;
}

.modal-actions .btn-danger:hover {
  background: #991b1b;
}

.loading-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  color: var(--text-muted);
}

.dashboard-page-loader {
  flex-direction: column;
  gap: 0.75rem;
  padding: 2rem 1.5rem;
  min-height: min(52vh, 420px);
}

.dashboard-page-loader-spinner {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: article-action-loader-spin 0.85s linear infinite;
}

.dashboard-page-loader-text {
  margin: 0;
  font-size: var(--text-lg, 1.125rem);
  font-weight: 600;
  color: var(--text);
  text-align: center;
}

.dashboard-page-loader-hint {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-muted);
  text-align: center;
  max-width: 22rem;
  line-height: 1.45;
  animation: loading-pulse 1.5s ease-in-out infinite;
}

/* Animación suave para estado de carga de artículos */
.articles-loading-text {
  animation: loading-pulse 1.5s ease-in-out infinite;
}

@keyframes loading-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Panel administración */
.admin-block-anchor {
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.sidebar-group--admin .sidebar-group-title {
  color: var(--accent);
}
.dashboard-admin .dashboard-section-title {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
}
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.admin-stat-card {
  padding: var(--space-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.admin-stat-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent);
}
.admin-stat-label {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 0.25rem;
}
.admin-media-studio-th-preview,
.admin-media-studio-cell-preview {
  width: 88px;
  max-width: 88px;
  vertical-align: middle;
}
.admin-media-studio-thumb {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--border);
  background: var(--bg-card, #1a1a1a);
}
video.admin-media-studio-thumb {
  object-fit: cover;
}
.admin-media-studio-thumb-loading-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-card, #1a1a1a);
  box-sizing: border-box;
}

.admin-media-studio-thumb-loading-wrap .content-grid-media-loading-ring {
  width: 1.5rem;
  height: 1.5rem;
  border-width: 2px;
}

.admin-media-studio-thumb-fail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  font-size: 0.85rem;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm, 4px);
  box-sizing: border-box;
}
.admin-media-studio-prompt-cell {
  max-width: 220px;
}
.admin-media-studio-prompt {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.35;
  word-break: break-word;
}
.admin-dashboard-links {
  margin-top: var(--space-6);
}
.admin-dashboard-links-title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
  color: var(--text);
}
.admin-dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}
.admin-dashboard-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-dashboard-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.admin-dashboard-card-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.admin-dashboard-card-label {
  font-weight: 600;
  color: var(--text);
}
.admin-dashboard-card-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 0.25rem;
}
.admin-plans-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
.admin-plans-card {
  width: 100%;
  max-width: 52rem;
  box-sizing: border-box;
  min-width: 0;
  padding: var(--space-5);
}
.admin-plans-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.admin-plans-card-id {
  margin: 0;
  font-size: 1.1rem;
}
/* Formulario de planes: mismas utilidades que admin-user-edit (inputs a ancho útil + rejilla en filas) */
.admin-plans-card .form-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  margin-bottom: var(--space-4);
}
.admin-plans-card .form-group label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: 0.35rem;
  color: var(--text);
}
.admin-plans-card .form-group input[type='text'],
.admin-plans-card .form-group input[type='number'],
.admin-plans-card .form-group input[type='search'],
.admin-plans-card .form-group select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  font-size: var(--text-sm);
  line-height: 1.35;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  background: var(--bg);
  color: var(--text);
}
.admin-plans-card .form-group .form-hint {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--text-xs, 0.8125rem);
  line-height: 1.45;
  color: var(--text-muted);
}
.admin-plans-card .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.75rem, 1fr));
  gap: var(--space-4);
  width: 100%;
  min-width: 0;
  margin-bottom: var(--space-4);
}
.admin-plans-card .form-row .form-group {
  margin-bottom: 0;
}
.admin-plans-storage-fieldset .form-group {
  margin-bottom: 0;
  margin-top: var(--space-2);
}
.admin-plans-prices-grid .form-group {
  margin-bottom: 0;
}
.admin-plans-prices-details .form-group input[type='text'] {
  font-variant-numeric: tabular-nums;
}
.admin-plans-storage-fieldset {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-3);
  margin: var(--space-3) 0;
}
.admin-plans-storage-fieldset legend {
  padding: 0 0.35rem;
  font-weight: 600;
  font-size: var(--text-sm);
}
.admin-plans-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}
.admin-plans-prices-details {
  margin-top: var(--space-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-2) var(--space-3);
  background: var(--bg);
}
.admin-plans-prices-details summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.25rem 0;
}
.admin-plans-prices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.admin-link-email {
  color: var(--accent);
  text-decoration: none;
}
.admin-link-email:hover {
  text-decoration: underline;
}
.admin-users-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-4);
}
.admin-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.admin-users-table th,
.admin-users-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.admin-users-table th {
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
}
.admin-users-table tbody tr:hover {
  background: var(--accent-soft);
}
.admin-users-table th.admin-users-th-actions {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}
.admin-users-cell-actions {
  white-space: nowrap;
  width: 1%;
  text-align: right;
}
.admin-users-cell-user {
  min-width: 180px;
}
.admin-users-user-block {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.35;
}
.admin-users-user-email {
  font-weight: 500;
  color: var(--text);
}
.admin-users-user-name {
  font-size: 0.9rem;
  color: var(--text);
}
.admin-users-user-company {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.admin-users-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}
.admin-users-actions .btn-sm {
  flex-shrink: 0;
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
}
.admin-role {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}
.admin-role--admin {
  background: rgba(234, 179, 8, 0.2);
  color: #b45309;
}
.admin-role--user {
  background: var(--accent-soft);
  color: var(--accent);
}
.admin-membership-status {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}
.admin-membership-status--active {
  background: rgba(34, 197, 94, 0.2);
  color: #15803d;
}
.admin-membership-status--expired {
  background: rgba(239, 68, 68, 0.15);
  color: #b91c1c;
}
.admin-verified-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
}
.admin-verified-badge--yes {
  background: rgba(34, 197, 94, 0.2);
  color: #15803d;
}
.admin-verified-badge--no {
  background: rgba(239, 68, 68, 0.15);
  color: #b91c1c;
}
.admin-verified-badge--clickable {
  cursor: pointer;
  border: none;
  font: inherit;
  padding: 0.2rem 0.5rem;
}
.admin-verified-badge--clickable:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #dc2626;
}
.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
}
.admin-modal-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-6);
  max-width: 400px;
  width: 100%;
}
.admin-modal-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text);
}
.admin-modal-text {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text);
}
.admin-modal-sub {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.admin-modal-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}
.admin-user-verified-status {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.admin-user-verified-status strong.admin-verified-badge--yes,
.admin-user-verified-status strong.admin-verified-badge--no {
  padding: 0.15rem 0.4rem;
}

/* Editar usuario: tarjeta cabecera (email, nombre, empresa + verificación + acciones) */
.admin-user-edit-header-card {
  margin-top: var(--space-4);
  padding: var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 560px;
}
.admin-user-edit-user-block {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.admin-user-edit-email {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}
.admin-user-edit-name {
  font-size: 0.95rem;
  color: var(--text);
}
.admin-user-edit-company {
  font-size: 0.9rem;
  color: var(--text-muted);
}
.admin-user-edit-verified-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.admin-user-edit-verified-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
}
.admin-user-edit-verify-btn {
  margin-left: 0;
}
.admin-user-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.admin-invoices-table-wrap {
  margin-bottom: 1.5rem;
}
.admin-invoice-ref {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.9em;
}
/* Admin: contenedor y tipografía en bloque unificado; botones en .dashboard-pagination-pill-btn */
.dashboard-admin .pagination-btn {
  padding: 0.45rem 1.1rem;
  font-size: var(--text-sm);
  font-weight: 600;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.dashboard-admin .pagination-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.dashboard-admin .pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.admin-historial-toolbar,
.admin-users-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.admin-filters-row {
  flex-wrap: wrap;
  gap: var(--space-4);
}
.admin-filter-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.admin-filter-group .admin-filter-label {
  white-space: nowrap;
}
.admin-filter-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
}
.admin-filter-select,
.admin-filter-input {
  padding: 0.4rem 0.75rem;
  font-size: var(--text-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  min-width: 160px;
}
.admin-filter-input {
  min-width: 220px;
}
.admin-filter-date {
  min-width: 140px;
}
.admin-article-title {
  max-width: 320px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.admin-invoice-status {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}
.admin-invoice-status--paid {
  background: rgba(34, 197, 94, 0.2);
  color: #15803d;
}
.admin-invoice-status--pending {
  background: rgba(234, 179, 8, 0.2);
  color: #b45309;
}
.admin-invoice-status--cancelled,
.admin-invoice-status--refunded {
  background: rgba(239, 68, 68, 0.15);
  color: #b91c1c;
}
.admin-invoice-status-select {
  padding: 0.25rem 0.5rem;
  font-size: var(--text-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  min-width: 120px;
}
.admin-invoice-updating {
  margin-left: 0.5rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.admin-usage-panel {
  max-width: 640px;
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card, var(--bg));
}

/* Editar usuario: panel de cupo al 100% del ancho de la columna principal */
.admin-usage-panel--full-width {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}

.admin-usage-panel-title {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.admin-usage-panel-lead {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-muted);
}

.admin-usage-panel .form-group {
  margin-bottom: var(--space-4);
}

.admin-extra-credits-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  width: 100%;
}

.admin-extra-credits-row input[type='number'] {
  flex: 1 1 8rem;
  min-width: 0;
  max-width: none;
}

.admin-extra-credits-row .btn {
  flex-shrink: 0;
}

/* El formulario fuerza width:100% en inputs; en fila flex debe mandar flex, no el 100% del padre */
.admin-user-edit-form .admin-extra-credits-row input[type='number'] {
  width: auto;
  min-width: 8rem;
}

.admin-pricing-estimate {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.admin-pricing-estimate-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.admin-pricing-estimate-lead {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-muted);
}

.admin-pricing-estimate-lead a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.admin-pricing-estimate-lead a:hover {
  text-decoration: underline;
}

.admin-pricing-estimate-dl {
  margin: 0;
  display: grid;
  gap: 0.5rem 1rem;
}

.admin-pricing-estimate-dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 0.35rem 0.75rem;
  align-items: baseline;
  font-size: var(--text-sm);
}

@media (max-width: 520px) {
  .admin-pricing-estimate-dl > div {
    grid-template-columns: 1fr;
  }
}

.admin-pricing-estimate-dl dt {
  margin: 0;
  color: var(--text-muted);
  font-weight: 500;
}

.admin-pricing-estimate-dl dd {
  margin: 0;
  color: var(--text);
}

.admin-pricing-estimate-muted {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0.25rem 0 0;
}

.admin-pricing-estimate-warn {
  color: var(--danger, #b91c1c);
  font-weight: 500;
}

.admin-pricing-estimate-note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-muted);
}

.admin-pricing-estimate-what {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}

.admin-pricing-estimate-what-summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  list-style-position: outside;
}

.admin-pricing-estimate-what-summary::-webkit-details-marker {
  color: var(--text-muted);
}

.admin-pricing-estimate-what-body {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-muted);
}

.admin-pricing-estimate-what-body p {
  margin: 0 0 0.65rem;
}

.admin-pricing-estimate-what-body p:last-child {
  margin-bottom: 0;
}

.admin-pricing-estimate-what-equiv-intro {
  margin-top: 0.35rem !important;
  color: var(--text);
}

.admin-pricing-estimate-what-list {
  margin: 0.35rem 0 0.65rem;
  padding-left: 1.25rem;
  color: var(--text-muted);
}

.admin-pricing-estimate-what-list li {
  margin-bottom: 0.35rem;
}

.admin-pricing-estimate-what-foot {
  font-size: var(--text-xs);
  font-style: italic;
  opacity: 0.95;
}

.admin-pricing-estimate-discount {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius);
  border: 1px solid rgba(245, 158, 11, 0.25);
  background: rgba(245, 158, 11, 0.06);
}

.admin-pricing-estimate-discount-title {
  margin: 0 0 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

.admin-pricing-estimate-discount-list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text);
}

.admin-pricing-estimate-discount-list li {
  margin-bottom: 0.45rem;
}

.admin-pricing-estimate-legal {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
}

.admin-usage-suggest-btn {
  margin-top: var(--space-2);
}

.admin-user-edit-form {
  max-width: 560px;
  margin-top: var(--space-2);
}

.admin-user-edit-form--full-width {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
.admin-user-edit-form .form-group {
  margin-bottom: var(--space-4);
}
.admin-user-edit-form .form-group label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: var(--text);
}
.admin-user-edit-form .form-group input,
.admin-user-edit-form .form-group select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: var(--text-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}
.admin-membership-langs-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text);
}
.admin-membership-langs {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 10px);
  padding: var(--space-5, 1.25rem);
  margin: 0 0 0.25rem;
  background: var(--bg-card, var(--bg));
}
.admin-membership-langs-legend {
  padding: 0;
}
.admin-membership-langs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem 0.85rem;
}
@media (min-width: 560px) {
  .admin-membership-langs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .admin-membership-langs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.admin-membership-langs-item {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 0.85rem;
  min-height: 3rem;
  padding: 0.65rem 0.85rem 0.65rem 1rem;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text);
  line-height: 1.45;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-membership-langs-item-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  flex: 1;
}
.admin-membership-langs-item:hover {
  border-color: color-mix(in srgb, var(--accent, #f59e0b) 45%, var(--border));
  background: var(--accent-soft, rgba(245, 158, 11, 0.08));
}
.admin-membership-langs-item:has(input:checked) {
  border-color: var(--accent, #f59e0b);
  background: color-mix(in srgb, var(--accent, #f59e0b) 14%, var(--bg));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #f59e0b) 25%, transparent);
}
.admin-membership-langs-item:has(input:disabled) {
  opacity: 0.85;
}
.admin-membership-langs-item:has(input:disabled):hover {
  background: var(--bg);
  border-color: var(--border);
  box-shadow: none;
}
.admin-membership-langs-item input[type='checkbox'] {
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  margin: 0;
  flex-shrink: 0;
  align-self: center;
  padding: 0;
  accent-color: var(--accent, #f59e0b);
  cursor: pointer;
}
.admin-membership-langs-item input[type='checkbox']:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.admin-membership-langs-item-text {
  min-width: 0;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-membership-langs-price {
  flex-shrink: 0;
  max-width: 48%;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.admin-membership-langs-price--included {
  color: color-mix(in srgb, var(--accent, #a78bfa) 50%, var(--text-muted));
}
.admin-membership-langs-price--addon {
  color: color-mix(in srgb, var(--accent, #a78bfa) 72%, var(--text));
}
/* Sobreescribe .admin-user-edit-form .form-group label { display:block } e input { width:100% } */
.admin-user-edit-form .form-group label.admin-membership-langs-item {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 0.85rem;
  margin-bottom: 0;
  font-weight: inherit;
  color: inherit;
}
.admin-user-edit-form .form-group .admin-membership-langs-item input[type='checkbox'] {
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  max-width: 1.25rem;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
}
.admin-membership-langs-code {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.form-group .admin-membership-langs-hint {
  display: block;
  margin-top: 0.65rem;
  line-height: 1.45;
}
.admin-user-edit-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.admin-user-edit-form .form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.admin-user-edit-form .form-actions .btn {
  padding: 0.5rem 1rem;
}
.admin-user-edit-section {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
.admin-user-edit-section-title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
  color: var(--text);
}
.admin-user-edit-form .form-error {
  font-size: var(--text-sm);
  color: var(--danger, #b91c1c);
  margin-top: 0.25rem;
  margin-bottom: var(--space-2);
}
.dashboard-breadcrumb {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: 0;
}
.dashboard-breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}
.dashboard-breadcrumb a:hover {
  text-decoration: underline;
}

/* Historial de créditos (/dashboard/historial-creditos) */
.credit-history-layout {
  margin-bottom: var(--space-8, 2rem);
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 0;
}

.credit-history-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.credit-history-quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.credit-history-quick-link {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft, rgba(245, 158, 11, 0.12));
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.credit-history-quick-link:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.55);
}

.credit-history-toolbar {
  padding: 1.25rem 1.35rem;
  border-radius: var(--radius-lg, 0.75rem);
  border: 1px solid var(--border);
  background: var(--bg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.credit-history-toolbar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.credit-history-toolbar-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.credit-history-count-badge {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--bg-elevated, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--border);
}

.credit-history-filters-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-start;
  gap: 1rem;
}

.credit-history-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 901px) {
  .credit-history-field {
    flex: 1 1 min(11rem, 100%);
  }
}

@media (max-width: 900px) {
  .credit-history-field {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }
}

.credit-history-field-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

.credit-history-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius, 0.5rem);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* iOS / Safari: date a ancho completo (mismo criterio que .articles-filter-date) */
.credit-history-input[type='date'] {
  display: block;
  align-self: stretch;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.35;
}

.credit-history-input[type='date']::-webkit-datetime-edit {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.credit-history-input[type='date']::-webkit-datetime-edit-fields-wrapper {
  width: 100%;
  min-width: 0;
}

.credit-history-input[type='date']::-webkit-date-and-time-value {
  text-align: start;
}

.credit-history-input:hover {
  border-color: rgba(245, 158, 11, 0.4);
}

.credit-history-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.credit-history-alert {
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--danger, #fecaca);
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.35);
}

.credit-history-loading {
  padding: 2rem 1.5rem;
  text-align: center;
}

.credit-history-loading-bar {
  height: 3px;
  max-width: 12rem;
  margin: 0 auto 1rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--border),
    var(--accent),
    var(--border)
  );
  background-size: 200% 100%;
  animation: credit-history-shimmer 1.2s ease-in-out infinite;
}

@keyframes credit-history-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.credit-history-loading-text {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.credit-history-empty {
  padding: 2rem 1.5rem;
  text-align: center;
  border-style: dashed;
}

.credit-history-empty-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.credit-history-empty-desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-left: auto;
  margin-right: auto;
}

.credit-history-table-card {
  padding: 0;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.credit-history-table-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0 0 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.credit-history-table-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.credit-history-table-meta {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.credit-history-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.credit-history-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.credit-history-table thead th {
  text-align: left;
  padding: 0.65rem 1.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.credit-history-th--num {
  text-align: right;
}

.credit-history-table tbody td {
  padding: 0.85rem 1.25rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.credit-history-row:last-child td {
  border-bottom: none;
}

.credit-history-row:hover td {
  background: rgba(245, 158, 11, 0.05);
}

.credit-history-cell-date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text);
}

.credit-history-cell-credits {
  text-align: right;
  width: 1%;
}

.credit-history-credits {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.9375rem;
}

.credit-history-credits--debit {
  color: var(--danger, #f87171);
}

.credit-history-credits--credit {
  color: var(--success, #4ade80);
}

.credit-history-pill {
  display: inline-block;
  max-width: 100%;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  border-radius: 6px;
  border: 1px solid transparent;
}

.credit-history-pill--new {
  color: #fdba74;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
}

.credit-history-pill--regen {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
}

.credit-history-pill--topics {
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(139, 92, 246, 0.35);
}

.credit-history-pill--other {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}

.credit-history-cell-site {
  min-width: 8rem;
}

.credit-history-site-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  word-break: break-word;
}

.credit-history-site-link:hover {
  text-decoration: underline;
}

.credit-history-muted {
  color: var(--text-muted);
}

/* Paginación unificada (mismo diseño que historial de créditos) */
.credit-history-pagination,
.articles-pagination,
.dashboard-facturacion-pagination,
.media-studio-pagination,
.dashboard-admin.articles-pagination {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg, 0.75rem);
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

@media (min-width: 560px) {
  .credit-history-pagination,
  .articles-pagination,
  .dashboard-facturacion-pagination,
  .media-studio-pagination,
  .dashboard-admin.articles-pagination {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.credit-history-pagination-info,
.articles-pagination-info,
.dashboard-facturacion-pagination-info,
.media-studio-pagination-info,
.dashboard-admin.articles-pagination .pagination-info {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 0;
}

.credit-history-pagination-actions,
.articles-pagination-buttons,
.dashboard-facturacion-pagination-buttons,
.media-studio-pagination-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}

.credit-history-pagination .btn.btn-secondary.btn-sm,
.articles-pagination .btn.btn-secondary.btn-sm,
.dashboard-facturacion-pagination .btn.btn-secondary.btn-sm,
.media-studio-pagination .btn.btn-secondary.btn-sm {
  border-radius: 999px;
  font-weight: 600;
  padding: 0.45rem 1.1rem;
}

.media-studio-pagination .btn.btn-secondary.btn-sm:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* Media Studio · móvil: dos columnas iguales y hueco para el FAB de WhatsApp */
@media (max-width: 559px) {
  .media-studio-pagination {
    padding-right: max(1.25rem, calc(3.75rem + env(safe-area-inset-right, 0px)));
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  }

  .media-studio-pagination-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
    width: 100%;
    gap: 0.5rem;
  }

  .media-studio-pagination-buttons .btn.btn-secondary.btn-sm {
    width: 100%;
    justify-content: center;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }
}

/* Perfil social · configuración (redes prioritarias = checkboxes; paleta, tags) */
.social-redes-extra-input {
  margin-top: 0.65rem;
}

.social-palette-fields {
  margin-top: 0.35rem;
}

.social-palette-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  align-items: flex-end;
}

.social-palette-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 7.5rem;
}

.social-palette-item-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

.social-palette-item-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.social-palette-color {
  width: 2.75rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--border, #e4e4e7);
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
}

.social-palette-color::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.social-palette-color::-webkit-color-swatch {
  border-radius: 6px;
  border: none;
}

.social-palette-hex-input {
  flex: 1;
  min-width: 5.75rem;
  max-width: 8rem;
  font-size: 0.8125rem;
  font-family: ui-monospace, monospace;
}

.social-palette-note-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.85rem;
}

.social-brand-tags-wrap {
  margin-top: 0.35rem;
}

.social-brand-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  margin-bottom: 0.5rem;
  min-height: 0.5rem;
}

.social-brand-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.45rem 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent, #4f46e5);
  border: 1px solid rgba(99, 102, 241, 0.35);
}

.social-brand-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  background: transparent;
  opacity: 0.75;
}

.social-brand-tag-remove:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
}

/* Lightbox miniaturas · fotos de referencia IA (perfil social) */
.social-brand-ref-thumb-btn {
  display: block;
  width: 72px;
  height: 72px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 6px;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--bg-muted, #f4f4f5);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.social-brand-ref-thumb-btn:hover,
.social-brand-ref-thumb-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent, #f5a623);
  transform: scale(1.02);
}

.social-brand-ref-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.social-brand-ref-thumb-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 6px;
  background: var(--bg-muted, #f4f4f5);
}

.social-brand-ref-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
}

.social-brand-ref-zoom-inner {
  position: relative;
  max-width: min(96vw, 1200px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  cursor: default;
}

.social-brand-ref-zoom-inner img {
  max-width: 100%;
  max-height: calc(90vh - 4rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius, 8px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
}

.social-brand-ref-zoom-close {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.2));
  border-radius: 50%;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text, #fff);
  background: var(--bg-elevated, #1a1d24);
  transition: background 0.15s ease, color 0.15s ease;
}

.social-brand-ref-zoom-close:hover {
  background: var(--accent, #f5a623);
  color: var(--bg, #0f1115);
}

.social-brand-ref-zoom-caption {
  margin: 0;
  max-width: 100%;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  word-break: break-all;
}

/* Listado grilla contenido: grupos por fecha + acordeón (tema oscuro; no usar --card-bg→#fff sin definir) */

.content-grid-detail-head {
  margin-bottom: 1rem;
  max-width: 52rem;
}

.content-grid-detail-topic {
  margin: 0 0 0.35rem;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.content-grid-detail-meta {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Barra «Nueva grilla»: perfil, tema y acciones; misma altura visual de controles */
.content-grid-create-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.65rem 1rem;
  margin-bottom: 0.35rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius, 12px);
  border: 1px solid var(--border);
  background: var(--bg-subtle, rgba(0, 0, 0, 0.12));
}

.content-grid-create-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  min-width: 0;
}

.content-grid-create-col--profile {
  flex: 0 1 240px;
  min-width: min(100%, 188px);
}

.content-grid-create-col--tema {
  flex: 1 1 220px;
  min-width: min(100%, 200px);
}

.content-grid-create-col--action {
  flex: 1 1 260px;
  min-width: min(100%, 220px);
  max-width: 100%;
}

@media (max-width: 720px) {
  .content-grid-create-col--action {
    flex: 1 1 100%;
  }

  .content-grid-create-col-body--actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .content-grid-create-submit--ia,
  .content-grid-create-submit--fija {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 9rem;
  }
}

.content-grid-create-col-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.25;
  min-height: 1.25em;
}

.content-grid-create-col-label--spacer {
  visibility: hidden;
  user-select: none;
}

.content-grid-create-col-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.content-grid-create-col-body--actions {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-start;
}

.content-grid-create-submit--ia,
.content-grid-create-submit--fija {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 2.55rem;
  padding-inline: 0.85rem;
  justify-content: center;
  text-align: center;
  line-height: 1.25;
}

.content-grid-create-submit--fija {
  white-space: nowrap;
}

.content-grid-create-profile-readonly {
  margin: 0;
  padding: 0.5rem 0.65rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  background: var(--bg-subtle, rgba(0, 0, 0, 0.12));
  min-height: 2.75rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.content-grid-create-select,
.content-grid-create-tema-input {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 2.75rem;
  box-sizing: border-box;
}

.content-grid-create-submit {
  white-space: nowrap;
  min-height: 2.75rem;
}

.content-grid-create-hint {
  margin-top: 0.25rem;
  margin-bottom: 0.65rem;
  font-size: 0.8125rem;
}

.content-grid-list-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 0.35rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated, var(--bg));
}

.content-grid-list-filter-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
  white-space: nowrap;
}

.content-grid-list-filter-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 12rem;
  min-width: 0;
}

.content-grid-list-filter-input {
  flex: 1 1 10rem;
  min-width: 0;
  margin: 0;
}

.content-grid-list-filter-select {
  width: auto;
  min-width: 7.5rem;
  max-width: 100%;
  margin: 0;
}

.content-grid-list-groups {
  margin-top: 0.65rem;
  margin-bottom: var(--space-2);
}

.content-grid-delete-modal-card {
  max-width: min(100%, 26rem);
}

.content-grid-delete-modal-text {
  margin: 0 0 1rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.content-grid-delete-modal-text strong {
  color: var(--text);
}

.content-grid-delete-type-hint {
  margin: 0 0 0.35rem;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text-muted);
}

.content-grid-delete-type-hint strong {
  color: var(--text);
}

.content-grid-delete-type-input {
  width: 100%;
  margin: 0 0 var(--space-4);
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  box-sizing: border-box;
}

.content-grid-delete-type-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.content-grid-delete-modal-confirm {
  min-width: 6.5rem;
  padding: 0.45rem 0.9rem;
  font-weight: 600;
}

.content-grid-list-date-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0.85rem 0 0.55rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}

.content-grid-list-day-block:first-child .content-grid-list-date-heading {
  margin-top: 0;
}

.content-grid-list-accordion {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 0.5rem;
  background: var(--bg-card);
  overflow: hidden;
  color: var(--text);
}

.content-grid-list-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
}

.content-grid-list-summary::-webkit-details-marker,
.content-grid-list-summary::marker {
  display: none;
}

.content-grid-list-summary-text {
  flex: 1;
  min-width: 200px;
}

.content-grid-list-tema {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}

.content-grid-list-meta {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.content-grid-list-summary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.content-grid-list-btn-open {
  font-size: 0.8125rem;
  padding: 0.35rem 0.75rem;
}

.content-grid-list-btn-secondary {
  font-size: 0.8125rem;
  padding: 0.3rem 0.65rem;
}

.content-grid-list-body {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
}

.content-grid-list-loading,
.content-grid-list-empty {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.content-grid-list-empty-page {
  color: var(--text-muted);
}

.content-grid-cell-outline {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}

.content-grid-cell-outline-item {
  margin-bottom: 0.85rem;
}

.content-grid-cell-outline-item:last-child {
  margin-bottom: 0;
}

.content-grid-cell-outline-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
}

.content-grid-cell-outline-head strong {
  color: var(--text);
  font-weight: 600;
}

.content-grid-cell-outline-format {
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 500;
}

.content-grid-cell-outline-text {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.content-grid-cell-outline-tags {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.content-grid-cell-outline-slides,
.content-grid-cell-outline-video {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.content-grid-cell-outline-slides li,
.content-grid-cell-outline-video li {
  margin: 0.2rem 0 0;
}

.content-grid-cell-outline-slide-label {
  display: inline-block;
  margin-right: 0.35rem;
  font-weight: 600;
  color: var(--accent);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.content-grid-list-footer {
  margin: 0.85rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--border);
  font-size: 0.875rem;
}

/* Vista detalle de grilla (celdas): mismo lenguaje visual que el dashboard oscuro */
.content-grid-detail-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.content-grid-detail-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.content-grid-detail-regen-status {
  margin: 0;
  max-width: 42rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.content-grid-detail-cell--bare-empty {
  padding-top: 0.7rem;
  padding-bottom: 0.75rem;
}

.content-grid-detail-cell-regen-hint {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.content-grid-detail-cell-actions-more {
  flex: 1 1 100%;
  margin-top: 0.15rem;
}

.content-grid-detail-cell-actions-more-summary {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  list-style: none;
  padding: 0.35rem 0;
}

.content-grid-detail-cell-actions-more-summary::-webkit-details-marker {
  display: none;
}

.content-grid-detail-cell-actions-more-summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--accent);
}

.content-grid-detail-cell-actions-more[open] .content-grid-detail-cell-actions-more-summary::before {
  transform: rotate(90deg);
}

.content-grid-detail-cell-actions-more-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: flex-start;
  padding: 0.35rem 0 0;
}

.content-grid-detail-empty-shell {
  margin-top: 0.5rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius, 12px);
  border: 1px dashed var(--border);
  background: var(--bg-subtle, rgba(0, 0, 0, 0.1));
  text-align: center;
  max-width: 36rem;
}

.content-grid-detail-empty-shell-text {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.content-grid-detail-empty-shell .btn {
  min-width: 8rem;
}

.content-grid-detail-empty-hint-after-create {
  margin: 0 0 1.25rem;
  max-width: 40rem;
  line-height: 1.5;
}

.content-grid-detail-downloads {
  margin-bottom: 1.5rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius, 12px);
  border: 1px solid var(--border);
  background: var(--bg-subtle, rgba(0, 0, 0, 0.08));
}

.content-grid-detail-downloads-title {
  margin: 0 0 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.content-grid-detail-downloads-desc {
  margin: 0 0 0.65rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.content-grid-detail-downloads-desc .video-scripts-export-filename-hint {
  font-size: 0.92em;
  padding: 0.08em 0.35em;
  border-radius: 4px;
  background: var(--bg-subtle, rgba(0, 0, 0, 0.12));
  color: var(--text);
}

.content-grid-detail-downloads-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.content-grid-cells {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Vista “ver grilla”: auto-fit colapsa huecos; con 1 celda la tarjeta usa todo el ancho (no queda relegada a 1/4). */
.content-grid-cells.content-grid-cells--auto-flow {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
  align-items: start;
}

.content-grid-detail-row {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}

.content-grid-detail-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  background: var(--card-bg, var(--bg-elevated));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
}

.content-grid-detail-cell-format {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.content-grid-detail-media-tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.content-grid-detail-media-tab {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-muted);
  background: var(--bg-subtle, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.content-grid-detail-media-tab:hover {
  color: var(--text);
  border-color: var(--border);
}

.content-grid-detail-media-tab--active {
  color: var(--accent);
  background: rgba(234, 179, 8, 0.12);
  border-color: var(--accent);
}

.content-grid-detail-cell-previews--tabs {
  gap: 0;
}

.content-grid-detail-cell-previews--video-only {
  margin-bottom: 0.75rem;
}

.content-grid-detail-media-gen-notice {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  text-align: center;
  border-radius: var(--radius, 8px);
  border: 1px solid rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.1);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.content-grid-detail-cell-media-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.content-grid-detail-cell-media {
  width: 100%;
  max-width: 220px;
  max-height: 200px;
  flex: 1 1 140px;
  object-fit: contain;
  border-radius: var(--radius, 8px);
  background: var(--bg-subtle, rgba(0, 0, 0, 0.2));
}

/* Bloque de previews (imagen + vídeo): marco centrado tipo 9:16, sin franjas laterales anchas */
.content-grid-detail-cell-previews {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  width: 100%;
}

/* Ancho completo de la tarjeta: el alto lo marca el medio (sin marco 9:16 fijo). */
.content-grid-detail-vertical-slot {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

.content-grid-detail-vertical-slot .content-grid-cell-carousel {
  margin-bottom: 0;
  width: 100%;
}

/* Carrusel: flechas sobre la imagen para no robar ancho al marco vertical */
.content-grid-detail-vertical-slot .content-grid-cell-carousel-viewport {
  position: relative;
  display: block;
}

.content-grid-detail-vertical-slot .content-grid-cell-carousel-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.content-grid-detail-vertical-slot .content-grid-cell-carousel-btn--prev {
  left: 0.35rem;
}

.content-grid-detail-vertical-slot .content-grid-cell-carousel-btn--next {
  right: 0.35rem;
}

.content-grid-detail-vertical-slot .content-grid-cell-carousel-frame {
  width: 100%;
  min-height: 0;
  max-height: min(480px, 62dvh);
}

.content-grid-detail-vertical-slot .content-grid-cell-carousel-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(480px, 62dvh);
  object-fit: contain;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.content-grid-detail-vertical-slot .content-grid-cell-carousel-img--ready {
  opacity: 1;
}

.content-grid-detail-vertical-slot .content-grid-cell-carousel-frame:has(.content-grid-media-loading) {
  min-height: min(200px, 35dvh);
}

.content-grid-detail-vertical-slot--placeholder .content-grid-detail-cell-media-placeholder {
  margin: 0;
  width: 100%;
  min-height: 72px;
  max-height: min(200px, 30dvh);
  aspect-ratio: unset;
  padding: 0.6rem;
  box-sizing: border-box;
}

/* Carrusel de imágenes en celda + hint para abrir zoom */
.content-grid-cell-carousel {
  margin-bottom: 0.75rem;
  width: 100%;
}

.content-grid-cell-carousel-viewport {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.content-grid-cell-carousel-frame {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius, 10px);
  background: linear-gradient(165deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.42));
  cursor: zoom-in;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-grid-cell-carousel-img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.content-grid-cell-carousel-img--ready {
  opacity: 1;
}

.content-grid-cell-carousel-frame:has(.content-grid-media-loading) {
  min-height: 140px;
}

.content-grid-media-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.content-grid-media-loading--lightbox {
  background: rgba(0, 0, 0, 0.35);
}

.content-grid-media-loading-ring {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--accent, #f59e0b);
  border-radius: 50%;
  animation: content-grid-media-loading-spin 0.75s linear infinite;
}

@keyframes content-grid-media-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.content-grid-cell-carousel-zoom-hint {
  position: absolute;
  right: 0.35rem;
  bottom: 0.35rem;
  z-index: 2;
  padding: 0.2rem 0.45rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bg, #0f172a);
  background: rgba(255, 255, 255, 0.88);
  border-radius: 6px;
  pointer-events: none;
  opacity: 0.92;
}

.content-grid-cell-carousel-btn {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  background: var(--bg-elevated);
  color: var(--accent);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.content-grid-cell-carousel-btn:hover {
  background: var(--bg-subtle);
  border-color: var(--accent);
}

.content-grid-cell-carousel-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-top: 0.45rem;
}

.content-grid-cell-carousel-counter {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.content-grid-cell-carousel-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.content-grid-cell-carousel-dot {
  width: 0.45rem;
  height: 0.45rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.content-grid-cell-carousel-dot:hover {
  background: var(--text-muted);
}

.content-grid-cell-carousel-dot.is-active {
  background: var(--accent);
  transform: scale(1.25);
}

/* Lightbox zoom (portal a body) — el stage ocupa el alto disponible para que la imagen quepa a 100% sin recortes */
.content-grid-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 3.25rem 0.75rem 0.75rem;
  background: rgba(0, 0, 0, 0.92);
  box-sizing: border-box;
  height: 100%;
  min-height: 100dvh;
  max-height: 100dvh;
}

.content-grid-zoom-close {
  position: absolute;
  top: 0.65rem;
  right: 0.85rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius, 8px);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.content-grid-zoom-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

.content-grid-zoom-toolbar {
  position: absolute;
  top: 0.65rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius, 8px);
  background: rgba(30, 30, 30, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.content-grid-zoom-pct {
  min-width: 3rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #f4f4f5;
}

.content-grid-zoom-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.content-grid-zoom-nav:hover {
  background: rgba(245, 158, 11, 0.35);
  border-color: var(--accent, #f59e0b);
}

.content-grid-zoom-nav--prev {
  left: 0.75rem;
}

.content-grid-zoom-nav--next {
  right: 0.75rem;
}

.content-grid-zoom-stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: min(96vw, 960px);
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.content-grid-zoom-stage:has(.content-grid-media-loading--lightbox) {
  min-height: min(42vh, 380px);
}

.content-grid-zoom-img {
  display: block;
  flex-shrink: 0;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.content-grid-zoom-img--ready {
  opacity: 1;
}

.content-grid-zoom-footer {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
}

.content-grid-detail-cell-media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-align: center;
  border-radius: var(--radius, 8px);
  border: 1px dashed var(--border);
  background: var(--bg-subtle, rgba(0, 0, 0, 0.15));
}

.content-grid-detail-cell-video-frame-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: inherit;
  background: transparent;
  font: inherit;
  cursor: zoom-in;
  text-align: center;
  color: inherit;
}

.content-grid-detail-cell-video-frame-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.content-grid-detail-cell-video-wrap {
  position: relative;
  margin: 0;
  width: 100%;
  min-height: 0;
  max-height: min(480px, 62dvh);
  border-radius: var(--radius, 12px);
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(165deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.88));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-grid-detail-cell-video-badge {
  position: absolute;
  top: 0.45rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  padding: 0.2rem 0.55rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  pointer-events: none;
}

.content-grid-detail-cell-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(480px, 62dvh);
  object-fit: contain;
  vertical-align: middle;
}

/* En la grilla: sin controles ni interacción directa (el clic va al botón que abre zoom). */
.content-grid-detail-cell-video--preview {
  pointer-events: none;
  user-select: none;
}

.content-grid-zoom-stage--video {
  align-items: center;
}

.content-grid-zoom-video {
  display: block;
  flex-shrink: 0;
  max-width: 100%;
  max-height: min(78dvh, 720px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.content-grid-detail-cell-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.content-grid-detail-cell-etiqueta {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.content-grid-detail-cell-etiqueta-label {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, #c9a227);
}

.content-grid-detail-cell-body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);
  white-space: pre-wrap;
}

/* Mailing: vista plan — acorta el cuerpo con puntos suspensivos (multilínea) */
.content-grid-detail-cell-body.content-grid-detail-cell-body--mailing-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  word-break: break-word;
  white-space: normal;
}

.content-grid-detail-cell-tags {
  margin: 0.65rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-muted);
  opacity: 0.95;
}

.content-grid-detail-extra {
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius, 8px);
  border: 1px solid var(--border);
  background: var(--bg-subtle, rgba(0, 0, 0, 0.12));
}

.content-grid-detail-extra-title {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.content-grid-detail-extra-list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.content-grid-detail-extra-list li {
  margin: 0.35rem 0 0;
}

.content-grid-detail-extra-list li:first-child {
  margin-top: 0;
}

.content-grid-detail-extra-label {
  font-weight: 600;
  color: var(--text);
}

.content-grid-detail-cell-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  margin-top: 0.85rem;
}

.content-grid-detail-cell-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

/* Ficha de celda (detalle grilla): apilar acciones al 100 % (Ver pieza, Editar, Rehacer imagen, Veo…) */
.content-grid-detail-cell-actions-row--fullwidth-stack {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}

.content-grid-detail-cell-actions-row--fullwidth-stack > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.content-grid-detail-cell-actions-row--fullwidth-stack .content-grid-cell-text-editor {
  width: 100%;
}

.content-grid-detail-cell-actions-row--fullwidth-stack .content-grid-cell-text-editor > .btn,
.content-grid-detail-cell-actions-row--fullwidth-stack > .btn {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

.content-grid-detail-cell-actions-row--fullwidth-stack .content-grid-gen-slides-inner {
  flex-direction: column;
}

.content-grid-detail-cell-actions-row--fullwidth-stack .content-grid-gen-slides-inner .btn {
  width: 100%;
  justify-content: center;
}

/* Mailing: CTA principal «Ver pieza completa» — ancho completo, contraste claro */
.content-grid-detail-mailing-piece-full {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
  font-weight: 600;
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

.content-grid-detail-mailing-piece-full:hover {
  background: #f3f4f6 !important;
  color: #0a0a0a !important;
}

.content-grid-detail-mailing-piece-full:focus-visible {
  outline: 2px solid var(--focus-ring, #3b82f6);
  outline-offset: 2px;
}

/* Carrusel / descargas: bloque desplegable a ancho completo solo en la fila principal */
.content-grid-detail-cell-actions-row--primary .content-grid-gen-slides-details {
  flex: 1 1 100%;
  min-width: 0;
}

.content-grid-detail-cell-actions-row--export {
  padding-top: 0.45rem;
  border-top: 1px solid var(--border);
}

/* Fila exportación: descargas + JSON + HTML en la misma línea cuando cabe */
.content-grid-detail-cell-actions-row--export .content-grid-gen-slides-details {
  flex: 0 1 auto;
  min-width: min(100%, 11rem);
  max-width: 100%;
}

/* Carrusel: muchos botones «Generar slide» dentro de un collapse nativo */
.content-grid-gen-slides-details {
  flex: 1 1 100%;
  min-width: min(100%, 12rem);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  background: var(--bg-subtle, rgba(0, 0, 0, 0.12));
  overflow: hidden;
}

.content-grid-gen-slides-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.content-grid-gen-slides-summary::-webkit-details-marker,
.content-grid-gen-slides-summary::marker {
  display: none;
}

.content-grid-gen-slides-summary::before {
  content: '▸';
  display: inline-block;
  width: 1em;
  font-size: 0.7rem;
  color: var(--accent);
  transition: transform 0.15s ease;
}

.content-grid-gen-slides-details[open] .content-grid-gen-slides-summary::before {
  transform: rotate(90deg);
}

.content-grid-gen-slides-badge {
  margin-left: auto;
  padding: 0.1rem 0.45rem;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: 999px;
  background: var(--accent-soft, rgba(245, 158, 11, 0.2));
  color: var(--accent);
}

.content-grid-gen-slides-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0 0.65rem 0.65rem;
  border-top: 1px dashed var(--border);
}

/* Editor de texto de celda (grilla social): botón en ficha + popup */
.content-grid-cell-text-editor {
  flex: 0 0 auto;
}

.content-grid-cell-edit-modal-overlay {
  z-index: 1050;
}

.content-grid-cell-edit-modal-card {
  max-width: min(560px, 100%);
  max-height: min(90vh, 880px);
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  overflow: hidden;
}

.content-grid-cell-edit-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-shrink: 0;
}

.content-grid-cell-edit-modal-heading {
  flex: 1;
  margin: 0;
  padding-right: 0.25rem;
  line-height: 1.25;
}

.content-grid-cell-edit-modal-close {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  margin: -0.35rem -0.25rem 0 0;
  border: none;
  border-radius: var(--radius, 8px);
  background: transparent;
  color: var(--text-muted, rgba(255, 255, 255, 0.65));
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.content-grid-cell-edit-modal-close:hover:not(:disabled) {
  background: var(--bg-subtle, rgba(255, 255, 255, 0.08));
  color: var(--text);
}

.content-grid-cell-edit-modal-close:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.content-grid-cell-edit-modal-meta {
  margin: 0 0 var(--space-3);
  font-size: 0.8125rem;
  color: var(--text-muted, rgba(255, 255, 255, 0.65));
  flex-shrink: 0;
}

.content-grid-cell-edit-modal-tema {
  font-weight: 500;
  color: var(--text);
}

.content-grid-cell-edit-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.25rem;
  margin-right: -0.25rem;
}

.content-grid-cell-edit-modal-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.content-grid-cell-text-editor-label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-muted, rgba(255, 255, 255, 0.72));
}

.content-grid-cell-text-editor-label .domain-form-input,
.content-grid-cell-text-editor-label .domain-form-textarea {
  margin-top: 0.25rem;
  width: 100%;
  box-sizing: border-box;
}

.content-grid-cell-text-editor-label .content-grid-cell-text-editor-select {
  margin-top: 0.25rem;
  width: 100%;
  box-sizing: border-box;
  min-height: 2.65rem;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  background: var(--bg-elevated, var(--bg));
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  padding: 0.4rem 0.55rem;
}

.content-grid-cell-text-editor-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.content-grid-cell-text-editor-subsection {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--border);
}

.content-grid-cell-text-editor-subtitle {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

.content-grid-cell-text-editor-vblock {
  margin-top: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.15);
}

/* Configuración perfil social: sugerencia IA */
.social-config-ai-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.social-config-ai-bar-title {
  margin: 0;
}

.btn-social-suggest {
  padding: 0.45rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.btn-social-suggest:hover:not(:disabled) {
  background: var(--accent-soft);
}

.btn-social-suggest:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.social-buyer-persona-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0.5rem;
}

.social-buyer-persona-tab {
  padding: 0.45rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  background: var(--surface-2, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.social-buyer-persona-tab:hover:not(:disabled) {
  color: var(--text, #0f172a);
  border-color: var(--accent, #2563eb);
}

.social-buyer-persona-tab--active {
  color: var(--accent, #2563eb);
  background: var(--accent-soft, rgba(37, 99, 235, 0.08));
  border-color: var(--accent, #2563eb);
}

.social-mailing-section .social-mailing-links-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius);
  background: var(--surface-1, #f8fafc);
}

.social-mailing-section .social-mailing-links-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.social-mailing-section .social-mailing-links-table th,
.social-mailing-section .social-mailing-links-table td {
  padding: 0.5rem 0.65rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.social-mailing-section .social-mailing-links-table th {
  font-weight: 600;
  color: var(--text-muted, #64748b);
  background: var(--surface-2, #f1f5f9);
}

.social-mailing-section .social-mailing-links-table-actions {
  width: 5.5rem;
  white-space: nowrap;
}

.social-mailing-section .social-mailing-footer-actions {
  border: 1px solid var(--border, #e2e8f0);
  gap: 0.75rem;
  align-items: center;
}

.social-buyer-persona-ia-panel {
  margin-top: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface-1, #f8fafc);
}

.social-buyer-persona-ia-actions {
  margin-top: 0.75rem;
}

.social-buyer-persona-ia-draft-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}

.social-buyer-persona-ia-bar .social-buyer-persona-ia-count-col,
.social-buyer-persona-ia-bar .social-buyer-persona-ia-lang-col {
  flex: 0 1 168px;
  min-width: min(100%, 132px);
}

.social-buyer-persona-ia-bar .social-buyer-persona-ia-field-label {
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

.social-buyer-persona-ia-count-input {
  width: 4.75rem;
  max-width: none;
}

/* Misma rejilla que grilla de contenido: acciones al pie de la “celda” */
.social-buyer-persona-section .content-grid-detail-cell {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.buyer-persona-list-grid.content-grid-cells--auto-flow {
  align-items: stretch;
}

.social-buyer-persona-section .buyer-persona-list-grid > .buyer-persona-grid-card {
  height: 100%;
}

.buyer-persona-grid-card-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.social-buyer-persona-section .content-grid-detail-cell .content-grid-detail-cell-actions {
  margin-top: auto;
  padding-top: 0.75rem;
}

.buyer-persona-grid-card-top .content-grid-detail-cell-format {
  margin-bottom: 0.2rem;
}

.buyer-persona-grid-card-meta {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.buyer-persona-grid-card-title {
  margin-top: 0.65rem;
  margin-bottom: 0.4rem;
}

.buyer-persona-grid-card-lead {
  margin: 0 0 0.85rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.buyer-persona-grid-card-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.45rem;
  align-items: center;
  justify-content: space-between;
}

.buyer-persona-grid-card-actions .buyer-persona-grid-card-link-btn {
  flex: 0 1 auto;
  min-width: 0;
  justify-content: center;
}

.buyer-persona-card-menu-anchor {
  position: relative;
  flex-shrink: 0;
}

.buyer-persona-card-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  margin: 0;
  border-radius: var(--radius, 8px);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.buyer-persona-card-more-btn:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--text-muted);
  background: var(--bg-subtle, rgba(255, 255, 255, 0.06));
}

.buyer-persona-card-more-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.buyer-persona-card-more-dots {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
}

.buyer-persona-card-more-dots span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.buyer-persona-card-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  bottom: auto;
  z-index: 30;
  min-width: 10.5rem;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  background: var(--bg-card, var(--bg-elevated));
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, 0.2));
}

.buyer-persona-card-dropdown-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.85rem;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}

.buyer-persona-card-dropdown-item:hover:not(:disabled) {
  background: var(--bg-subtle, rgba(255, 255, 255, 0.06));
}

.buyer-persona-card-dropdown-item:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.buyer-persona-card-dropdown-item--danger {
  color: #f87171;
}

.buyer-persona-card-dropdown-item--danger:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.12);
}

.buyer-persona-grid-card-btn-outline {
  border: 1px solid var(--border);
  background: transparent;
}

.social-buyer-persona-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.social-buyer-persona-grid {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.social-buyer-persona-card {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-0, #fff);
  cursor: pointer;
  padding: 0;
  transition: box-shadow var(--transition), transform 0.15s ease;
}

.social-buyer-persona-card:hover {
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.social-buyer-persona-card-head {
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.65rem 0.75rem;
  line-height: 1.25;
}

.social-buyer-persona-card-body {
  padding: 0.75rem;
  font-size: 0.9rem;
}

.social-buyer-persona-card-name {
  margin: 0 0 0.35rem;
  font-weight: 600;
}

.social-buyer-persona-card-snippet {
  margin: 0 0 0.5rem;
  color: var(--text-muted, #64748b);
  font-size: 0.85rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.social-buyer-persona-card-metrics {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
}

.social-buyer-persona-card-metrics li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.2rem 0;
  border-top: 1px solid var(--border, #e2e8f0);
}

.social-buyer-persona-card-metrics li:first-child {
  border-top: 0;
}

/* Vista previa buyer persona (modal) + segmentación pauta */
.buyer-persona-preview-modal-card {
  max-width: min(96vw, 44rem);
  max-height: min(92vh, 760px);
  display: flex;
  flex-direction: column;
  width: 100%;
}

.buyer-persona-preview-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0;
}

.buyer-persona-preview-modal-header .admin-modal-title {
  margin: 0;
  flex: 1;
  font-size: 1.15rem;
}

.buyer-persona-preview-modal-close {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  line-height: 1;
  font-size: 1.35rem;
  font-weight: 400;
  border: none;
  border-radius: var(--radius, 8px);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.buyer-persona-preview-modal-close:hover:not(:disabled) {
  background: var(--bg-subtle);
  color: var(--text);
}

.buyer-persona-preview-modal-close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.buyer-persona-preview-modal-subtitle {
  margin: 0 1rem 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.buyer-persona-preview-modal-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 0 1rem 1rem;
}

.admin-modal-actions.buyer-persona-preview-modal-footer {
  flex-shrink: 0;
  margin: 0;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--border);
}

.social-buyer-persona-help-card {
  border-radius: var(--radius, 12px);
  border: 1px solid var(--border);
  background: var(--surface-1, var(--bg-subtle, rgba(255, 255, 255, 0.04)));
  padding: 1rem 1.15rem;
}

.social-buyer-persona-help-lead {
  margin: 0.4rem 0 0.7rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.domain-page-help-list--compact li {
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.5;
}

.domain-page-help-list--compact li:last-child {
  margin-bottom: 0;
}

/* Ver ficha buyer: ancho completo del área de contenido */
.buyer-persona-view-page {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.buyer-persona-view-back {
  margin: 0 0 1rem;
}

.buyer-persona-view-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}

.buyer-persona-view-back-icon {
  display: flex;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.buyer-persona-view-back-icon svg {
  width: 100%;
  height: 100%;
}

.buyer-persona-view-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 1.15rem 1.35rem;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--border);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--accent, #f59e0b) 12%, var(--bg-elevated, #1e293b)) 0%,
    var(--bg-subtle, rgba(255, 255, 255, 0.035)) 55%,
    var(--bg-elevated, var(--card-bg)) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.buyer-persona-view-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.buyer-persona-view-title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.buyer-persona-view-meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.buyer-persona-view-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.buyer-persona-view-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.buyer-persona-view-header-btn-icon {
  display: flex;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  align-items: center;
  justify-content: center;
}

.buyer-persona-view-header-btn-icon svg {
  width: 100%;
  height: 100%;
}

.buyer-persona-view-body {
  width: 100%;
  padding-bottom: 0.25rem;
}

/* Cuerpo: columna principal + segmentación (escritorio) */
.buyer-persona-page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.35rem;
  width: 100%;
  align-items: start;
  box-sizing: border-box;
}

.buyer-persona-page-main {
  min-width: 0;
}

.buyer-persona-page-aside {
  min-width: 0;
}

@media (min-width: 1060px) {
  .buyer-persona-page-layout {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 24%);
    gap: 1.5rem 1.75rem;
  }

  .buyer-persona-page-aside {
    position: sticky;
    top: 1rem;
    align-self: start;
  }
}

/* Intro + métricas (ver ficha) */
.buyer-persona-page-intro {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.35rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
}

.buyer-persona-page-intro-badge {
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent, #f59e0b) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #f59e0b) 35%, var(--border));
}

.buyer-persona-page-intro-badge svg {
  width: 1.45rem;
  height: 1.45rem;
}

.buyer-persona-page-intro-copy {
  min-width: 0;
  flex: 1;
}

.buyer-persona-preview-sections--page .buyer-persona-page-intro .buyer-persona-preview-hero {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  margin-bottom: 0.45rem;
  line-height: 1.3;
}

.buyer-persona-preview-sections--page .buyer-persona-page-intro .buyer-persona-preview-lead {
  font-size: 0.9375rem;
  line-height: 1.55;
  margin-bottom: 0;
}

.buyer-persona-page-strip-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
}

.buyer-persona-page-strip-icon {
  display: flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent, #f59e0b) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #f59e0b) 28%, var(--border));
}

.buyer-persona-page-strip-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

.buyer-persona-page-strip-heading {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.buyer-persona-page-metrics-section {
  margin-bottom: 1.35rem;
}

.buyer-persona-preview-sections--page .buyer-persona-page-metrics-section .buyer-persona-preview-metrics {
  margin-bottom: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: 0.5rem 0.65rem;
}

.buyer-persona-preview-sections--page .buyer-persona-page-metrics-section .buyer-persona-preview-metrics li {
  padding: 0.55rem 0.7rem;
  min-height: 3.25rem;
  justify-content: center;
}

/* Solo columna lateral conserva caja; Demográfico / Digital / Resumen: plano */
.buyer-persona-preview-sections--page .buyer-persona-page-main .buyer-persona-preview-block {
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  margin-bottom: 1.35rem;
}

.buyer-persona-preview-sections--page .buyer-persona-page-main .buyer-persona-preview-block--elevated {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.buyer-persona-preview-sections--page .buyer-persona-page-main .buyer-persona-preview-block:last-child {
  margin-bottom: 0;
}

.buyer-persona-preview-block-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.65rem;
  line-height: 1.25;
}

.buyer-persona-preview-block-heading-icon {
  display: flex;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent, #f59e0b) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #f59e0b) 25%, var(--border));
}

.buyer-persona-preview-block-heading-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.buyer-persona-preview-sections--page .buyer-persona-preview-block--ads .buyer-persona-preview-block-heading {
  margin-bottom: 0.45rem;
}

.buyer-persona-preview-platform-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.3rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}

.buyer-persona-preview-platform-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, #f59e0b) 75%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #f59e0b) 22%, transparent);
}

/* Segmentación en columna lateral o ancho completo (móvil) */
.buyer-persona-page-aside .buyer-persona-preview-block--ads {
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 1059px) {
  .buyer-persona-page-aside .buyer-persona-preview-block--ads {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
    gap: 0.65rem;
  }

  .buyer-persona-page-aside .buyer-persona-preview-block--ads > .buyer-persona-preview-block-heading,
  .buyer-persona-page-aside .buyer-persona-preview-block--ads > .buyer-persona-preview-ads-hint {
    grid-column: 1 / -1;
  }

  .buyer-persona-page-aside .buyer-persona-preview-block--ads .buyer-persona-preview-platform {
    margin-top: 0;
  }
}

@media (min-width: 1060px) {
  .buyer-persona-page-aside .buyer-persona-preview-block--ads .buyer-persona-preview-platform {
    margin-top: 0.55rem;
  }
}

.buyer-persona-grid-card-link-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1.25;
}

.buyer-persona-preview-hero {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  line-height: 1.35;
  color: var(--text);
}

.buyer-persona-preview-lead {
  margin: 0 0 0.75rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.buyer-persona-preview-metrics {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.35rem 0.75rem;
  font-size: 0.8125rem;
}

.buyer-persona-preview-metrics li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius, 8px);
  border: 1px solid var(--border);
  background: var(--bg-subtle, rgba(0, 0, 0, 0.06));
}

.buyer-persona-preview-metrics span {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.buyer-persona-preview-metrics strong {
  font-weight: 600;
  color: var(--text);
}

.buyer-persona-preview-block {
  margin-top: 1rem;
}

.buyer-persona-preview-block h4 {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.buyer-persona-preview-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
}

.buyer-persona-preview-text--muted {
  color: var(--text-muted);
  font-style: italic;
  white-space: normal;
}

.buyer-persona-preview-bullets {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text);
}

.buyer-persona-preview-ads-hint {
  margin: 0 0 0.65rem;
}

.buyer-persona-preview-platform {
  margin-top: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius, 8px);
  border: 1px solid var(--border);
  background: var(--bg-elevated, rgba(0, 0, 0, 0.08));
}

.buyer-persona-preview-platform h5 {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
}

.buyer-persona-ads-editor-hint {
  margin-bottom: 0.75rem;
}

/* Por encima del popup de edición cuando ambos están abiertos */
.admin-modal-overlay.buyer-persona-preview-stack {
  z-index: 10000;
}

/* Popup generar buyer personas con IA (encima de api-global-loading 9999; debajo de toasts 10001) */
.admin-modal-overlay.buyer-persona-ia-generate-overlay {
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px))
    max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
}

.admin-modal-card.buyer-persona-ia-generate-modal-card {
  max-width: min(96vw, 28rem);
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.buyer-persona-ia-modal-lead {
  margin: 0 1rem 0.35rem;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.45;
}

.buyer-persona-ia-modal-body {
  padding: 0 1rem 0.25rem;
  max-height: min(55vh, 420px);
  overflow-y: auto;
}

.admin-modal-actions.buyer-persona-ia-modal-footer {
  flex-shrink: 0;
  margin: 0;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
  gap: 0.5rem;
}

.social-buyer-persona-ia-bar--compact .content-grid-create-col--action {
  flex: 1 1 220px;
  min-width: min(100%, 180px);
  max-width: 100%;
}

/* Buyer personas: perfil a la izquierda, acciones a la derecha */
.social-buyer-persona-section .social-buyer-persona-ia-bar--compact.content-grid-create-bar {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem 1rem;
}

.social-buyer-persona-section .social-buyer-persona-ia-bar--compact .content-grid-create-col--profile {
  flex: 1 1 200px;
  min-width: min(100%, 160px);
  width: auto;
  max-width: 100%;
}

/* Idioma (IA): no comprimir la columna (evita solapamiento con «Crear con IA») */
.social-buyer-persona-section .social-buyer-persona-ia-bar--compact .content-grid-create-col--select {
  flex: 0 0 auto;
  flex-shrink: 0;
  min-width: min(100%, 15rem);
  max-width: 100%;
  margin-inline-end: 0.65rem;
}

.social-buyer-persona-section .social-buyer-persona-ia-bar--compact .content-grid-create-col--select .content-grid-create-col-body {
  width: 100%;
  max-width: 11rem;
}

.social-buyer-persona-section .social-buyer-persona-ia-bar--compact .content-grid-create-col--select select.domain-form-input--narrow {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.social-buyer-persona-section .social-buyer-persona-ia-bar--compact .content-grid-create-col--action {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  min-width: 0;
  align-items: flex-end;
}

.social-buyer-persona-section .social-buyer-profile-readonly.content-grid-create-profile-readonly {
  width: 100%;
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.35rem;
  min-height: 0;
  padding: 0.55rem 0.75rem;
}

.social-buyer-profile-readonly-line {
  display: block;
  line-height: 1.4;
}

.social-buyer-profile-readonly-line--muted {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
}

.social-buyer-persona-section .social-buyer-persona-ia-bar--compact .content-grid-create-col--action .content-grid-create-col-label {
  width: 100%;
  text-align: right;
}

.social-buyer-persona-section .social-buyer-persona-ia-bar--compact .content-grid-create-col-body--actions {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  gap: 0.45rem;
}

.social-buyer-persona-actions-sep {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1;
  user-select: none;
  padding: 0 0.1rem;
  opacity: 0.65;
}

.social-buyer-persona-section .social-buyer-persona-ia-bar--compact .content-grid-create-submit--ia,
.social-buyer-persona-section .social-buyer-persona-ia-bar--compact .content-grid-create-submit--fija {
  flex: 0 0 auto;
  width: auto;
  min-width: min(100%, 9.5rem);
  box-sizing: border-box;
}

@media (max-width: 720px) {
  .social-buyer-persona-section .social-buyer-persona-ia-bar--compact.content-grid-create-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem 0.65rem;
    margin-bottom: 0.65rem;
    padding: 0.5rem 0.6rem;
  }

  .social-buyer-persona-section .social-buyer-persona-ia-bar--compact .content-grid-create-col--action {
    align-items: stretch;
  }

  .social-buyer-persona-section .social-buyer-persona-ia-bar--compact .content-grid-create-col--profile {
    display: block;
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .social-buyer-persona-section .social-buyer-persona-ia-bar--compact .content-grid-create-col--select {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-inline-end: 0;
  }

  .social-buyer-persona-section .social-buyer-persona-ia-bar--compact .content-grid-create-col--select .content-grid-create-col-body {
    max-width: none;
  }

  .social-buyer-persona-section .social-buyer-persona-ia-bar--compact .content-grid-create-col--action .content-grid-create-col-label {
    text-align: left;
    min-height: 0;
    font-size: 0.75rem;
    margin-bottom: 0.05rem;
  }

  .social-buyer-persona-section .social-buyer-persona-ia-bar--compact .content-grid-create-col--profile .content-grid-create-col-label {
    min-height: 0;
    font-size: 0.75rem;
  }

  .social-buyer-persona-section .social-buyer-profile-readonly.content-grid-create-profile-readonly {
    padding: 0.4rem 0.55rem;
    gap: 0.2rem;
    font-size: 0.8125rem;
  }

  .social-buyer-persona-section .social-buyer-profile-readonly-line--muted {
    font-size: 0.8125rem;
  }

  /* Misma fila: Crear con IA | Crear (no apilar) */
  .social-buyer-persona-section .social-buyer-persona-ia-bar--compact .content-grid-create-col-body--actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.35rem;
  }

  .social-buyer-persona-section .social-buyer-persona-ia-bar--compact .content-grid-create-submit--ia,
  .social-buyer-persona-section .social-buyer-persona-ia-bar--compact .content-grid-create-submit--fija {
    flex: 1 1 calc(50% - 0.2rem);
    width: auto;
    min-width: 0;
    min-height: 0;
    padding-block: 0.42rem;
    padding-inline: 0.55rem;
    font-size: 0.8125rem;
    line-height: 1.2;
  }

  .social-buyer-persona-section .social-buyer-persona-ia-bar--compact .social-buyer-persona-actions-sep {
    display: none;
  }

  .social-buyer-persona-section p.domain-form-hint.social-buyer-persona-toolbar-hint {
    margin-bottom: 0.45rem;
    font-size: 0.875rem;
  }
}

.buyer-persona-export-all-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
  margin: 0 0 0.75rem;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius, 10px);
  border: 1px solid var(--border);
  background: var(--bg-subtle, rgba(0, 0, 0, 0.08));
  font-size: 0.875rem;
}

.buyer-persona-export-all-label {
  color: var(--text-muted);
  font-weight: 600;
  margin-right: 0.15rem;
}

.buyer-persona-export-all-btn {
  min-height: 0;
  padding-block: 0.35rem;
}

.social-buyer-persona-section p.domain-form-hint.social-buyer-persona-toolbar-hint {
  display: block;
  margin-top: 0;
  margin-bottom: 0.45rem;
  line-height: 1.5;
}

/* Espacio un poco mayor solo cuando va seguido de la barra de exportar (hay fichas) */
.social-buyer-persona-section p.social-buyer-persona-toolbar-hint + .buyer-persona-export-all-bar {
  margin-top: 0.35rem;
}

.social-buyer-persona-section .buyer-persona-list-after-hint {
  margin-top: 0;
}

/* Mensaje vacío pegado al párrafo anterior (evita doble aire: margin del hint + padding de .domains-empty) */
.social-buyer-persona-section p.domains-empty.buyer-persona-list-after-hint {
  padding-top: 0.2rem;
  padding-bottom: 0.75rem;
}

/* Popup editor / nueva buyer persona */
.admin-modal-overlay.buyer-persona-editor-overlay {
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px))
    max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
}

.admin-modal-card.buyer-persona-editor-modal-card {
  max-width: min(96vw, 52rem);
  width: 100%;
  max-height: min(92vh, 900px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.buyer-persona-editor-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0;
  flex-shrink: 0;
}

.buyer-persona-editor-modal-header .admin-modal-title {
  margin: 0;
  flex: 1;
  font-size: 1.15rem;
}

.buyer-persona-editor-modal-lead {
  margin: 0 1rem 0.5rem;
  padding: 0;
}

.buyer-persona-editor-modal-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 0 1rem 1rem;
}

.buyer-persona-editor-modal-body.social-buyer-persona-editor {
  margin-top: 0;
}

.buyer-persona-editor-modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-card);
}

.social-buyer-persona-editor {
  margin-top: 1rem;
}

.social-buyer-metric-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.social-buyer-metric-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem;
  align-items: center;
}

@media (max-width: 640px) {
  .social-buyer-metric-row {
    grid-template-columns: 1fr;
  }
}

.social-buyer-persona-photo-preview {
  margin: 0.5rem 0 1rem;
}

.social-buyer-persona-photo-img {
  max-width: 160px;
  max-height: 160px;
  border-radius: var(--radius);
  object-fit: cover;
  border: 1px solid var(--border, #e2e8f0);
}

.social-suggest-modal-overlay {
  z-index: 1100;
}

.social-suggest-modal-card {
  max-width: 560px;
  max-height: min(90vh, 720px);
  overflow: auto;
}

.social-suggest-modal-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 140px;
  margin-bottom: var(--space-4);
}

/* ——— Guiones de vídeo: misma línea visual que «Grilla contenido» (content-grid-*) ——— */
.video-scripts-page {
  width: 100%;
}

.video-scripts-page .video-scripts-editor-panel {
  margin-top: 1rem;
}

.video-scripts-page--editor .video-scripts-editor-back {
  margin-bottom: 0.75rem;
}

.video-scripts-editor-title-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem 1rem;
  margin-bottom: 0.5rem;
}

.video-scripts-editor-title-label {
  flex: 1 1 100%;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}

.video-scripts-editor-title-input {
  flex: 1 1 220px;
  min-width: min(100%, 12rem);
  font-size: 1.05rem;
  font-weight: 600;
}

.video-scripts-editor-title-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.video-scripts-editor-meta {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.video-scripts-page--editor .content-grid-detail-downloads {
  border: none;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

.video-scripts-page .video-script-list-card__summary {
  cursor: default;
}

.video-script-preview-modal-card {
  max-width: min(100%, 58rem);
  max-height: min(92vh, 42rem);
  display: flex;
  flex-direction: column;
}

.video-script-preview-modal-body {
  overflow: hidden;
  margin: 0 0 1rem;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.video-script-preview-table-wrap {
  overflow: auto;
  flex: 1;
  min-height: 0;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border);
  background: var(--bg-elevated, var(--bg-card));
}

.video-script-preview-table {
  width: 100%;
  min-width: 52rem;
  border-collapse: collapse;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.video-script-preview-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: 0.5rem 0.6rem;
  background: var(--bg-subtle, rgba(0, 0, 0, 0.2));
  color: var(--text);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.video-script-preview-table-th-scene {
  width: 7.5rem;
}

.video-script-preview-table-tr:nth-child(even) {
  background: var(--bg-subtle, rgba(255, 255, 255, 0.02));
}

.video-script-preview-table-tr--empty .video-script-preview-table-td {
  color: var(--text-muted);
  font-style: italic;
}

.video-script-preview-table-td,
.video-script-preview-table-td-scene {
  vertical-align: top;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  word-break: break-word;
  white-space: pre-wrap;
  max-height: 10rem;
  overflow-y: auto;
}

.video-script-preview-table-td-scene {
  font-weight: 600;
  color: var(--text);
  white-space: normal;
  max-height: none;
  width: 7.5rem;
}

.video-script-preview-table-tr:last-child .video-script-preview-table-td,
.video-script-preview-table-tr:last-child .video-script-preview-table-td-scene {
  border-bottom: none;
}

.video-script-preview-table-td--refvisual {
  max-height: none;
  width: 9rem;
  vertical-align: top;
}

.video-script-preview-ref-thumb {
  display: block;
  max-width: 8.5rem;
  max-height: 5.5rem;
  width: auto;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border);
}

.video-script-preview-ref-fallback {
  display: block;
  font-size: 0.75rem;
  word-break: break-all;
  white-space: normal;
}

.video-scripts-page .video-scripts-page__ia-bar {
  margin-top: 0.65rem;
}

.video-scripts-page .content-grid-create-col--brief {
  flex: 2 1 280px;
  min-width: min(100%, 220px);
}

.video-scripts-page .content-grid-create-col--duration-field {
  flex: 0 1 7.5rem;
  min-width: min(100%, 6.5rem);
}

.video-scripts-page .video-scripts-page__brief-textarea {
  margin-top: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 6.5rem;
  font-size: 0.9375rem;
}

.video-scripts-page .content-grid-detail-downloads-field {
  display: block;
  margin-bottom: 0.65rem;
}

.video-scripts-page .content-grid-detail-downloads-field .content-grid-create-col-label {
  margin-bottom: 0.35rem;
}

.video-scripts-page .content-grid-detail-downloads-field .domain-form-input {
  margin-top: 0;
}

.video-scripts-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius, 10px);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

.video-scripts-table {
  width: 100%;
  min-width: 56rem;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.video-scripts-col-preview {
  width: 11.75rem;
  max-width: 13rem;
  vertical-align: top;
  padding: 0.4rem 0.35rem !important;
}

.video-scripts-preview-column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
}

.video-scripts-preview-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 8.5rem;
  max-height: 14rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-subtle, rgba(0, 0, 0, 0.1));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-scripts-preview-frame .video-scripts-ref-image-preview {
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-scripts-preview-frame .video-scripts-ref-image-preview img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  display: block;
}

.video-scripts-preview-frame--has-img {
  position: relative;
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

.video-scripts-preview-open-zoom {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: inherit;
  background: transparent;
  cursor: zoom-in;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font: inherit;
  text-align: center;
}

.video-scripts-preview-open-zoom:focus-visible {
  outline: 2px solid var(--accent, #f59e0b);
  outline-offset: -2px;
}

.video-scripts-preview-open-zoom .video-scripts-ref-image-preview {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.video-scripts-preview-corner-actions {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  pointer-events: auto;
}

.video-scripts-preview-remove-x {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-sm, 6px);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.video-scripts-preview-remove-x:hover {
  background: rgba(0, 0, 0, 0.78);
  border-color: rgba(255, 255, 255, 0.55);
}

.video-scripts-preview-remove-x:focus-visible {
  outline: 2px solid var(--accent, #f59e0b);
  outline-offset: 2px;
}

.video-scripts-preview-download {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-sm, 6px);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.video-scripts-preview-download:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.78);
  border-color: rgba(255, 255, 255, 0.55);
}

.video-scripts-preview-download:disabled {
  opacity: 0.75;
  cursor: wait;
}

.video-scripts-preview-download:focus-visible {
  outline: 2px solid var(--accent, #f59e0b);
  outline-offset: 2px;
}

.video-scripts-preview-download-spinner {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--accent, #f59e0b);
  border-radius: 50%;
  animation: video-scripts-preview-spin 0.65s linear infinite;
}

@keyframes video-scripts-preview-spin {
  to {
    transform: rotate(360deg);
  }
}

.video-scripts-preview-frame .video-scripts-ref-url-hint {
  padding: 0.35rem 0.5rem;
  text-align: center;
}

.video-scripts-preview-placeholder {
  padding: 0.75rem 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.video-scripts-preview-generate-btn {
  width: 100%;
  justify-content: center;
}

.video-scripts-preview-hint {
  margin: 0 !important;
  font-size: 0.7rem !important;
  line-height: 1.35 !important;
  text-align: center;
}

.video-scripts-ref-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 0.2rem;
}

.video-scripts-ref-hint {
  margin: 0 0 0.35rem !important;
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
}

.video-scripts-ref-url-input {
  width: 100%;
  margin: 0 0 0.35rem;
  box-sizing: border-box;
  font-size: 0.8125rem;
}

.video-scripts-ref-image-preview {
  margin-top: 0.35rem;
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-subtle, rgba(0, 0, 0, 0.12));
  max-width: 100%;
}

.video-scripts-ref-image-preview img {
  display: block;
  width: 100%;
  max-height: 10rem;
  object-fit: contain;
  vertical-align: middle;
}

.video-scripts-ref-url-hint--warn {
  margin: 0.25rem 0 0 !important;
  font-size: 0.75rem !important;
}

.video-scripts-drag-hint-icon {
  display: inline-block;
  font-size: 0.85em;
  opacity: 0.85;
  vertical-align: middle;
}

.video-scripts-col-drag {
  width: 2.25rem;
  padding: 0.25rem 0.15rem !important;
  text-align: center;
  vertical-align: top;
}

.video-scripts-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius, 6px);
  background: transparent;
  color: var(--text-muted);
  cursor: grab;
  font: inherit;
  line-height: 1;
}

.video-scripts-drag-handle:hover {
  color: var(--text);
  background: var(--bg-subtle, rgba(0, 0, 0, 0.12));
  border-color: var(--border);
}

.video-scripts-drag-handle:active {
  cursor: grabbing;
}

.video-scripts-drag-grip {
  font-size: 1rem;
  letter-spacing: -0.12em;
  user-select: none;
  pointer-events: none;
}

.video-scripts-row--drag-over {
  outline: 2px dashed var(--accent, #3b82f6);
  outline-offset: -2px;
  background: var(--accent-soft, rgba(59, 130, 246, 0.08));
}

.video-scripts-table thead th {
  text-align: left;
  padding: 0.55rem 0.5rem;
  background: var(--bg-subtle, rgba(0, 0, 0, 0.15));
  color: var(--text);
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}

.video-scripts-table tbody td {
  padding: 0.4rem 0.45rem;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.video-scripts-col-scene {
  width: 2.5rem;
  text-align: center;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  vertical-align: top;
  padding-top: 0.55rem !important;
}

.video-scripts-col-dur {
  width: 5rem;
}

.video-scripts-col-del {
  width: 2.5rem;
  text-align: center;
}

.video-scripts-table .domain-form-input.video-scripts-cell,
.video-scripts-table .domain-form-textarea.video-scripts-cell {
  margin-top: 0;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.8125rem;
  line-height: 1.45;
  min-height: 9.5rem;
  resize: vertical;
}

.video-scripts-table .video-scripts-dur-input {
  margin-top: 0;
  text-align: center;
}

.video-scripts-row-remove {
  padding: 0.15rem 0.45rem;
  min-width: 0;
  line-height: 1.2;
}

.video-scripts-scene-toolbar-row td {
  border-bottom: none;
  vertical-align: middle;
  background: var(--bg-subtle, rgba(0, 0, 0, 0.08));
}

.video-scripts-scene-actions-cell {
  padding: 0.5rem 0.45rem !important;
}

.video-scripts-scene-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.video-scripts-scene-actions--above-table {
  margin-bottom: 0.55rem;
}

.video-scripts-table tfoot td {
  padding: 0.55rem 0.5rem;
  font-weight: 700;
  background: var(--bg-subtle, rgba(0, 0, 0, 0.12));
  border-bottom: none;
  border-top: 1px solid var(--border);
}

.video-scripts-tfoot-label {
  text-align: right;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.video-scripts-tfoot-total {
  font-size: 0.95rem;
  color: var(--text);
}

/* ——— Generador imágenes / vídeos ——— */
/* Sin .dashboard-section: el bloque tipo tarjeta solo envuelve titular + galería (.media-studio-main) */
.media-studio-section {
  max-width: 100%;
  margin: 0 0 var(--space-6);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.media-studio-section:hover {
  border-color: transparent;
  box-shadow: none;
}

/* Fila: sidebar generador (fuera del bloque tarjeta) | columna titular + galería */
.media-studio-layout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
  max-width: none;
  margin: 0;
}

.media-studio-expired {
  flex: 1 1 100%;
  width: 100%;
  margin: 0 0 var(--space-4);
  box-sizing: border-box;
}

.media-studio-panel {
  --media-studio-panel-height: calc(100vh - var(--topbar-height) - var(--space-6) * 2);
  position: sticky;
  top: var(--topbar-height);
  align-self: flex-start;
  flex: 0 0 min(380px, 34vw);
  width: min(380px, 34vw);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  height: var(--media-studio-panel-height);
  min-height: var(--media-studio-panel-height);
  max-height: var(--media-studio-panel-height);
  padding: 0;
  border-radius: 0;
  border: none;
  background: var(--bg-elevated);
  box-shadow: none;
  overflow: hidden;
}

@supports (height: 100dvh) {
  .media-studio-panel {
    --media-studio-panel-height: calc(100dvh - var(--topbar-height) - var(--space-6) * 2);
  }
}

/* flex-start: la altura sigue al contenido de la galería; si stretch igualara al panel (~100vh),
   flex:1 + min-height:0 en .media-studio-gallery-wrap comprime la zona y la última fila parece “cortada”. */
.media-studio-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: flex-start;
}

.media-studio-page-heading {
  flex-shrink: 0;
  width: 100%;
  text-align: left;
  padding: 0 0 var(--space-4);
  margin: 0;
  box-sizing: border-box;
}

.media-studio-page-heading-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.media-studio-page-heading-text {
  min-width: 0;
  flex: 1 1 12rem;
}

.media-studio-page-refresh {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0.15rem;
}

.media-studio-page-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
  color: var(--text);
  line-height: 1.25;
}

.media-studio-page-subtitle {
  margin: 0;
  max-width: none;
  text-align: left;
}

.media-studio-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.15rem 1.25rem 0.85rem;
  scrollbar-gutter: stable;
}

.media-studio-panel-footer {
  flex-shrink: 0;
  padding: 1rem 1.25rem 1.15rem;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.12) 100%);
}

.media-studio-field-group {
  margin-bottom: 0.35rem;
}

.media-studio-field-group--prompt {
  margin-top: 0.15rem;
}

.media-studio-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.05rem;
  padding: 0.28rem;
  border-radius: 12px;
  background: var(--bg-subtle, rgba(0, 0, 0, 0.22));
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.media-studio-tab {
  flex: 1;
  padding: 0.55rem 0.7rem;
  border: none;
  border-radius: 9px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: var(--text-muted);
  background: transparent;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.media-studio-tab:hover:not(.is-active) {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.media-studio-tab.is-active {
  background: var(--accent-soft, rgba(245, 158, 11, 0.18));
  color: var(--accent, #f59e0b);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.media-studio-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0.85rem 0 0.4rem;
}

.media-studio-field-group:first-child .media-studio-label,
.media-studio-tabs + .media-studio-field-group .media-studio-label {
  margin-top: 0;
}

.media-studio-prompt {
  width: 100%;
  box-sizing: border-box;
  min-height: 148px;
  padding: 0.75rem 0.85rem;
  font-size: 0.875rem;
  line-height: 1.55;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg, #0f172a);
  color: var(--text);
  resize: vertical;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.media-studio-prompt:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.media-studio-prompt--invalid {
  border-color: #f87171;
  box-shadow: inset 0 1px 3px rgba(248, 113, 113, 0.12);
}

.media-studio-required {
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-muted, rgba(255, 255, 255, 0.55));
  font-size: 0.7rem;
}

.media-studio-field-error {
  margin: 0.45rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #f87171;
}

.media-studio-select {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.35rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.8125rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg, #0f172a);
  color: var(--text);
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.media-studio-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.media-studio-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.media-studio-hint {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.media-studio-hint--compact {
  margin-bottom: 0.35rem;
  font-size: 0.6875rem;
  opacity: 0.9;
}

.media-studio-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px dashed var(--border);
  background: var(--bg-subtle);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.media-studio-upload-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.media-studio-ref-grid {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 0.55rem;
}

.media-studio-ref-tile {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.media-studio-ref-thumb-wrap {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg, #0f172a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.media-studio-ref-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-studio-ref-thumb-skeleton {
  width: 100%;
  height: 100%;
  min-height: 72px;
  background: linear-gradient(135deg, var(--bg-subtle), var(--border));
  animation: media-studio-shimmer 1.1s ease-in-out infinite;
}

.media-studio-ref-tile-remove {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  transition: background 0.15s ease, transform 0.12s ease;
}

.media-studio-ref-tile-remove:hover {
  background: rgba(185, 50, 40, 0.9);
  transform: scale(1.05);
}

.media-studio-ref-tile-name {
  font-size: 0.625rem;
  line-height: 1.25;
  color: var(--text-muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-studio-credits-box {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(245, 158, 11, 0.32);
  background: linear-gradient(145deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.03));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.media-studio-credits-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.media-studio-credits-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #f59e0b);
}

.media-studio-credits-value {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
}

.media-studio-credits-unit {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}

.media-studio-credits-note {
  font-size: 0.65rem;
  line-height: 1.4;
  color: var(--text-muted);
  opacity: 0.92;
}

.media-studio-field-group--aspect {
  margin-bottom: 0.75rem;
}

.media-studio-aspect-label-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.45rem 1rem;
  margin-bottom: 0.65rem;
}

.media-studio-field-group--aspect .media-studio-aspect-label-row .media-studio-label {
  margin-top: 0;
}

.media-studio-aspect-label-row .media-studio-label {
  margin-bottom: 0;
}

.media-studio-aspect-dynamic-hint {
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.55;
}

.media-studio-field-group--aspect .media-studio-aspects {
  margin-top: 0.2rem;
}

.media-studio-aspect-help-link {
  padding: 0;
  border: none;
  background: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-family: inherit;
}

.media-studio-aspect-help-link:hover {
  color: var(--accent-hover);
}

/* Configuración perfil social · proporciones de imagen (misma ayuda que Media Studio) */
.social-aspect-ratio-field-label {
  display: block;
  margin-bottom: 0.5rem;
}

.social-aspect-ratio-help-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 1rem;
  margin-bottom: 0.75rem;
  margin-top: 0.15rem;
}

.social-aspect-ratio-help-hint {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
}

.media-studio-aspect-help-intro {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.media-studio-aspect-help-intro strong {
  color: var(--text);
  font-weight: 600;
}

/* Tabla sin “caja” extra: solo líneas suaves entre filas */
.media-studio-aspect-help-table-wrap {
  overflow-x: auto;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  -webkit-overflow-scrolling: touch;
}

.media-studio-aspect-help-table {
  width: 100%;
  min-width: 18rem;
  border-collapse: collapse;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.media-studio-aspect-help-table th,
.media-studio-aspect-help-table td {
  padding: 0.55rem 0.5rem 0.55rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}

.media-studio-aspect-help-table th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  background: transparent;
  padding-top: 0;
  padding-bottom: 0.45rem;
  border-bottom-color: var(--border);
}

.media-studio-aspect-help-table tbody tr:last-child td {
  border-bottom: none;
}

.media-studio-aspect-help-table td:first-child {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  width: 3.25rem;
  padding-right: 0.75rem;
  color: var(--text);
  font-weight: 600;
}

.media-studio-aspect-help-table td:nth-child(2) {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
  padding-right: 0.75rem;
}

.media-studio-aspect-help-table td:last-child {
  color: var(--text-muted);
  min-width: 8rem;
}

.media-studio-aspect-help-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* Modal genérico: más aire cuando el cuerpo incluye la tabla de proporciones */
.modal-box:has(.media-studio-aspect-help-table-wrap) {
  max-width: min(36rem, calc(100vw - 2rem));
  padding: 1.35rem 1.35rem 1.15rem;
}

.modal-box:has(.media-studio-aspect-help-table-wrap) .modal-title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin-bottom: 0.65rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
}

.modal-box:has(.media-studio-aspect-help-table-wrap) .modal-body {
  margin-bottom: 1rem;
}

.modal-box:has(.media-studio-aspect-help-table-wrap) .modal-actions {
  padding-top: 0.25rem;
  border-top: none;
}

.media-studio-aspects {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}

.media-studio-aspect-pill {
  min-width: 2.75rem;
  padding: 0.4rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    transform 0.12s ease;
}

.media-studio-aspect-pill:hover:not(:disabled):not(.is-active) {
  border-color: rgba(245, 158, 11, 0.35);
  color: var(--text);
}

.media-studio-aspect-pill.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  transform: scale(1.02);
}

.media-studio-duration-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.35rem;
  margin-bottom: 0.1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-subtle) 88%, transparent);
}

.media-studio-duration-row {
  display: grid;
  grid-template-columns: minmax(4.25rem, auto) 1fr auto;
  gap: 0.65rem 0.75rem;
  align-items: center;
  width: 100%;
  padding: 0.48rem 0.55rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

.media-studio-duration-row:hover:not(:disabled):not(.is-active) {
  border-color: rgba(245, 158, 11, 0.22);
  background: rgba(255, 255, 255, 0.03);
}

.media-studio-duration-row.is-active {
  border-color: rgba(245, 158, 11, 0.45);
  background: var(--accent-soft);
}

.media-studio-duration-row:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.media-studio-duration-range {
  font-size: 0.78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
}

.media-studio-duration-row.is-active .media-studio-duration-range {
  color: var(--accent);
}

.media-studio-duration-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}

.media-studio-duration-row.is-active .media-studio-duration-label {
  color: var(--text);
}

.media-studio-duration-credits {
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}

.media-studio-duration-row.is-active .media-studio-duration-credits {
  color: var(--accent);
}

.media-studio-generate {
  width: 100%;
  margin-top: 0.65rem;
  padding: 0.78rem 1rem;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.22);
}

.media-studio-generate:disabled {
  box-shadow: none;
}

.media-studio-cost-hint {
  margin: 0.6rem 0 0;
  font-size: 0.65rem;
  line-height: 1.45;
  color: var(--text-muted);
  opacity: 0.88;
  text-align: center;
}

.media-studio-gallery-wrap {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: var(--space-4) 0 calc(var(--space-8) + 3.5rem);
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  box-shadow: none;
}

.media-studio-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.25rem 1.25rem 2.5rem;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.03), transparent 55%);
}

.media-studio-empty-icon {
  display: block;
  margin-bottom: 0.65rem;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.55;
}

.media-studio-empty-title {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.media-studio-empty {
  margin: 0;
  max-width: 22rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.media-studio-gallery-error {
  border-color: rgba(248, 113, 113, 0.35);
  background: linear-gradient(165deg, rgba(248, 113, 113, 0.1), transparent 55%);
}

.media-studio-gallery-error .media-studio-empty-icon {
  color: #f87171;
  opacity: 0.9;
}

.media-studio-gallery-error .media-studio-empty-title {
  color: #fecaca;
}

.media-studio-gallery-error-retry {
  margin-top: 1rem;
}

/* Galería masonry: columnas flex; reparto de ítems en React (columna más baja). */
.media-studio-gallery-masonry {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}

.media-studio-gallery-masonry-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 560px) {
  .media-studio-gallery-masonry,
  .media-studio-gallery-masonry-col {
    gap: 0.625rem;
  }
}

.media-studio-card {
  display: block;
  width: 100%;
  margin-bottom: 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: visible;
  background: var(--card-bg, var(--bg-elevated));
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.media-studio-card:hover {
  border-color: rgba(245, 158, 11, 0.28);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.media-studio-card-media {
  position: relative;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45));
}

.media-studio-card-zoom-hit {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
  line-height: 0;
}

.media-studio-card-zoom-hit::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.5));
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.media-studio-card-zoom-hit:focus-visible {
  outline: 2px solid var(--accent, #f97316);
  outline-offset: 2px;
}

.media-studio-card-zoom-fab {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  /* Por encima de la capa del <video> (si no, los clics no llegan al botón) */
  z-index: 30;
  padding: 0.2rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    background 0.15s ease;
}

.media-studio-card-zoom-fab:hover {
  background: rgba(0, 0, 0, 0.72);
}

.media-studio-card-zoom-fab:focus-visible {
  outline: 2px solid var(--accent, #f97316);
  outline-offset: 2px;
}

.media-studio-card-img,
.media-studio-card-vid {
  display: block;
  width: 100%;
  vertical-align: middle;
}

/* Miniatura imagen: ver pieza completa (9:16 mailing, etc.); mismo tope que el vídeo */
.media-studio-card-img {
  max-height: 420px;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.media-studio-card-vid {
  position: relative;
  z-index: 0;
  max-height: 420px;
  background: #000;
}

/* Galería: solo fotograma; no controles ni reproducción hasta abrir el visor */
.media-studio-card-vid--thumb {
  pointer-events: none;
  object-fit: cover;
  min-height: 160px;
}

.media-studio-card-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: background 0.2s ease;
}

.media-studio-card-video-overlay:hover {
  background: rgba(0, 0, 0, 0.32);
}

.media-studio-card-video-overlay:focus-visible {
  outline: 2px solid var(--accent, #f97316);
  outline-offset: 2px;
}

.media-studio-card-play-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    opacity 0.2s ease;
}

.media-studio-card-video-overlay:hover .media-studio-card-play-fab {
  background: rgba(0, 0, 0, 0.78);
  transform: scale(1.04);
}

/* Ratón / trackpad: controles y velo solo al pasar el cursor (o teclado: focus-within en la tarjeta) */
@media (hover: hover) and (pointer: fine) {
  .media-studio-card-video-overlay {
    background: rgba(0, 0, 0, 0);
  }

  .media-studio-card:hover .media-studio-card-video-overlay,
  .media-studio-card:focus-within .media-studio-card-video-overlay {
    background: rgba(0, 0, 0, 0.28);
  }

  .media-studio-card-video-overlay:hover {
    background: rgba(0, 0, 0, 0.36);
  }

  .media-studio-card:not(:hover):not(:focus-within) .media-studio-card-play-fab {
    opacity: 0;
    transform: scale(0.9);
  }

  .media-studio-card:not(:hover):not(:focus-within) .media-studio-card-zoom-fab {
    opacity: 0;
    transform: translateY(-4px);
  }

  .media-studio-card:not(:hover):not(:focus-within) .media-studio-card-menu-trigger {
    opacity: 0;
    transform: translateY(-3px);
    pointer-events: none;
  }

  .media-studio-card:hover .media-studio-card-zoom-hit::after,
  .media-studio-card:focus-within .media-studio-card-zoom-hit::after {
    opacity: 1;
  }
}

.media-studio-card-skeleton {
  min-height: 180px;
  background: linear-gradient(90deg, var(--bg-subtle), var(--border), var(--bg-subtle));
  background-size: 200% 100%;
  animation: media-studio-shimmer 1.2s ease-in-out infinite;
}

@keyframes media-studio-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.media-studio-kind-badge {
  position: absolute;
  top: auto;
  bottom: 0.45rem;
  left: 0.45rem;
  right: auto;
  z-index: 25;
  padding: 0.15rem 0.45rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.media-studio-card-menu-wrap {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 42;
}

.media-studio-card-menu-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
}

.media-studio-card-menu-trigger:hover {
  background: rgba(0, 0, 0, 0.78);
  border-color: rgba(245, 158, 11, 0.45);
}

.media-studio-card-menu-trigger:focus-visible {
  outline: 2px solid var(--accent, #f97316);
  outline-offset: 2px;
}

.media-studio-card-menu-trigger[aria-expanded='true'] {
  background: rgba(0, 0, 0, 0.85);
  border-color: rgba(245, 158, 11, 0.55);
}

.media-studio-card-menu {
  position: absolute;
  top: calc(100% + 0.28rem);
  right: 0;
  min-width: 11.25rem;
  padding: 0.28rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(22, 22, 24, 0.98);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

.media-studio-card-menu-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.65rem;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.8rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.media-studio-card-menu-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}

.media-studio-card-menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.media-studio-card-menu-item--danger {
  color: #f87171;
}

.media-studio-card-menu-item--danger:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.12);
}

.media-studio-kind-badge--video {
  background: rgba(180, 80, 20, 0.75);
}

.media-studio-ref-count-badge {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  z-index: 24;
  padding: 0.15rem 0.45rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(30, 30, 35, 0.82);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.media-studio-card-meta {
  padding: 0.75rem 0.85rem 0.85rem;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.06));
}

.media-studio-card-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.media-studio-card-ratio {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.media-studio-card-model {
  display: inline-block;
  max-width: 100%;
  font-size: 0.6rem;
  font-weight: 600;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-studio-card-prompt {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 960px) {
  .media-studio-layout {
    flex-direction: column;
  }

  .media-studio-panel {
    position: static;
    flex: none;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .media-studio-panel-body {
    overflow: visible;
    max-height: none;
  }

  .media-studio-main {
    flex: none;
    width: 100%;
  }

  .media-studio-page-heading {
    text-align: left;
    padding: var(--space-4) 0;
  }

  .media-studio-page-subtitle {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    text-align: left;
  }

  .media-studio-page-title {
    font-size: var(--text-lg);
    line-height: 1.3;
  }

  .media-studio-gallery-wrap {
    flex: none;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-studio-card {
    transition: none;
  }

  .media-studio-card:hover {
    transform: none;
  }

  .media-studio-aspect-pill.is-active {
    transform: none;
  }

  .media-studio-card-play-fab,
  .media-studio-card-zoom-fab,
  .media-studio-card-menu-trigger,
  .media-studio-card-zoom-hit::after,
  .media-studio-card-video-overlay {
    transition: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .media-studio-card-video-overlay {
      background: rgba(0, 0, 0, 0.14);
    }

    .media-studio-card:not(:hover):not(:focus-within) .media-studio-card-play-fab,
    .media-studio-card:not(:hover):not(:focus-within) .media-studio-card-zoom-fab,
    .media-studio-card:not(:hover):not(:focus-within) .media-studio-card-menu-trigger {
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }
  }
}

.media-studio-pagination-info strong {
  color: var(--text);
  font-weight: 700;
}

.media-studio-pagination-sep {
  opacity: 0.65;
}

/* Lightbox Media Studio — media izquierda + panel detalle (referencia tipo app) */
.media-studio-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.5rem, 2vw, 1.25rem);
}

.media-studio-lightbox-backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.88);
  cursor: pointer;
}

.media-studio-lightbox-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(400px, 34vw);
  max-width: min(1420px, 98vw);
  max-height: min(900px, 92vh);
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg, 16px);
  background: #141414;
  border: 1px solid var(--border, #2a2a2a);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
  pointer-events: auto;
}

.media-studio-lightbox-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  padding: 1rem;
  background: #0a0a0a;
}

.media-studio-lightbox-close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 5;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.92);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.media-studio-lightbox-close:hover {
  background: rgba(40, 40, 40, 0.95);
}

.media-studio-lightbox-media {
  max-width: 100%;
  max-height: min(78vh, 820px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius, 12px);
}

video.media-studio-lightbox-media {
  background: #000;
  width: 100%;
  max-height: min(78vh, 820px);
}

.media-studio-lightbox-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border-left: 1px solid var(--border, #2a2a2a);
  background: #161616;
}

.media-studio-lightbox-side-head {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  padding: 0.5rem 2.85rem 0.5rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.media-studio-lightbox-side-head-inner {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.media-studio-lightbox-side-head-title {
  font-family: var(--font-sans, inherit);
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
}

.media-studio-lightbox-side-head-date {
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--text-muted);
}

.media-studio-lightbox-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.media-studio-lightbox-section {
  padding: 0.5rem 0.85rem 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.media-studio-lightbox-scroll > .media-studio-lightbox-section:first-child {
  padding-top: 0.4rem;
}

.media-studio-lightbox-section-title {
  margin: 0 0 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.media-studio-lightbox-prompt-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.media-studio-lightbox-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.media-studio-lightbox-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.88);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.media-studio-lightbox-refs-hint {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}

.media-studio-lightbox-section--refs {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.media-studio-lightbox-refs-preview-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.32);
  box-sizing: border-box;
  flex: 0 1 auto;
  min-height: 0;
}

.media-studio-lightbox-refs-preview-box--grid {
  align-items: flex-start;
  justify-content: flex-start;
}

.media-studio-lightbox-refs-status {
  margin: 0;
  padding: 0.75rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

.media-studio-lightbox-refs-status--error {
  color: #f87171;
}

.media-studio-lightbox-refs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.35rem, 1fr));
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.media-studio-lightbox-ref-item {
  margin: 0;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.28);
  aspect-ratio: 1;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.media-studio-lightbox-ref-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.media-studio-lightbox-ref-hit {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
  line-height: 0;
  border-radius: inherit;
}

.media-studio-lightbox-ref-hit:focus-visible {
  outline: 2px solid var(--accent, #f97316);
  outline-offset: 2px;
}

.media-studio-lightbox-ref-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Visor ampliado de referencia (encima del lightbox principal) */
.media-studio-ref-zoom-layer {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.5rem, 2vw, 1rem);
}

.media-studio-ref-zoom-backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.9);
  cursor: pointer;
}

.media-studio-ref-zoom-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-width: min(96vw, 1100px);
  max-height: min(90vh, 900px);
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #141414;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  pointer-events: auto;
}

.media-studio-ref-zoom-toolbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.4);
}

.media-studio-ref-zoom-title {
  flex: 1;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-studio-ref-zoom-controls {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.media-studio-ref-zoom-btn {
  min-width: 2rem;
  padding: 0.3rem 0.45rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease;
}

.media-studio-ref-zoom-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
}

.media-studio-ref-zoom-btn--reset {
  min-width: 3.35rem;
  font-size: 0.68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.media-studio-ref-zoom-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.media-studio-ref-zoom-close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease;
}

.media-studio-ref-zoom-close:hover {
  background: rgba(255, 255, 255, 0.12);
}

.media-studio-ref-zoom-viewport {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem;
  -webkit-overflow-scrolling: touch;
}

.media-studio-ref-zoom-img {
  max-width: min(100%, 92vw);
  width: auto;
  height: auto;
  max-height: min(68vh, 720px);
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.12s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .media-studio-ref-zoom-img {
    transition: none;
  }
}

.media-studio-lightbox-footer-actions {
  margin-top: auto;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: rgba(0, 0, 0, 0.22);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.media-studio-lightbox-outline-btn {
  width: 100%;
  padding: 0.7rem 1rem;
  font-family: var(--font-sans, inherit);
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius, 12px);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
}

.media-studio-lightbox-outline-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}

.media-studio-lightbox-outline-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.media-studio-lightbox-primary-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans, inherit);
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius, 12px);
  background: #fff;
  color: #0a0a0a;
  cursor: pointer;
  transition:
    opacity 0.15s ease,
    transform 0.1s ease;
}

.media-studio-lightbox-primary-btn:hover:not(:disabled) {
  opacity: 0.92;
}

.media-studio-lightbox-primary-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.media-studio-lightbox-secondary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.media-studio-lightbox-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  font-family: var(--font-sans, inherit);
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  transition: background 0.15s ease;
}

.media-studio-lightbox-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.media-studio-lightbox-secondary-btn--danger {
  border-color: rgba(248, 113, 113, 0.35);
  color: #f87171;
}

.media-studio-lightbox-secondary-btn--danger:hover {
  background: rgba(248, 113, 113, 0.12);
}

@media (max-width: 960px) {
  .media-studio-lightbox-shell {
    grid-template-columns: 1fr;
    max-height: 95vh;
    overflow-y: auto;
  }

  .media-studio-lightbox-stage {
    max-height: min(42vh, 380px);
    padding: 0.65rem;
  }

  .media-studio-lightbox-media,
  video.media-studio-lightbox-media {
    max-height: min(38vh, 340px);
  }

  .media-studio-lightbox-side {
    border-left: none;
    border-top: 1px solid var(--border);
  }
}

/* Dashboard de un proyecto (/dashboard/proyectos/:id) */
.dashboard-project-dashboard-hero {
  margin-bottom: 0.5rem;
}

.dashboard-project-dashboard-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.dashboard-project-dashboard-metric {
  flex: 1 1 8rem;
  min-width: 0;
  margin: 0;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dashboard-project-dashboard-metric-value {
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text, inherit);
}

.dashboard-project-dashboard-metric-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 600;
}

.dashboard-project-dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dashboard-project-dashboard-resource-list {
  margin-top: 0.35rem;
}

/* Proyecto → métricas Google (GSC, GA4, Ads) */
.project-google-metrics {
  margin: 1.5rem 0 1.25rem;
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: 12px;
  border: 1px solid var(--border-subtle, var(--border));
  background: var(--surface-raised, rgba(255, 255, 255, 0.02));
}

.project-google-metrics--muted {
  opacity: 0.95;
}

.project-google-metrics__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.project-google-metrics__head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
}

.project-google-metrics__print-banner {
  display: none;
}

.project-google-metrics__title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text, inherit);
}

.project-google-metrics__lead {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.45;
  max-width: 42rem;
}

.project-google-metrics__period {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.project-google-metrics__period-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle, var(--border));
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition, 0.15s ease), color 0.15s ease, border-color 0.15s ease;
}

.project-google-metrics__period-btn:hover:not(:disabled) {
  color: var(--text, inherit);
  border-color: var(--accent-soft, rgba(251, 191, 36, 0.45));
}

.project-google-metrics__period-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.project-google-metrics__period-btn--active {
  color: var(--accent, #f59e0b);
  border-color: var(--accent, #f59e0b);
  background: var(--accent-soft, rgba(251, 191, 36, 0.12));
}

.project-google-metrics__callout {
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
  font-size: 0.875rem;
}

.project-google-metrics__callout--soft {
  border-color: var(--border-subtle, var(--border));
  background: rgba(255, 255, 255, 0.03);
}

.project-google-metrics__range {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.project-google-metrics__range-note {
  display: inline-block;
  font-size: 0.72rem;
  opacity: 0.9;
}

.project-google-metrics__range--gsc {
  margin: 0 0 1rem;
  font-size: 0.78rem;
}

.project-google-metrics__ga4-spec {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.project-google-metrics__ga4-spec code {
  font-size: 0.72rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}

.project-google-metrics__totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.5rem;
}

.project-google-metrics__total-card {
  margin: 0;
  padding: 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.project-google-metrics__total-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.project-google-metrics__total-main {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
}

.project-google-metrics__total-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.project-google-metrics__hint {
  margin: 0 0 1.1rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.project-google-metrics__block {
  margin-bottom: 1.15rem;
}

.project-google-metrics__block:last-child {
  margin-bottom: 0;
}

.project-google-metrics__block-title {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text, inherit);
}

.project-google-metrics__gsc-scope-hint {
  margin: 0 0 0.65rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.project-google-metrics__gsc-site-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  min-width: 0;
}

.project-google-metrics__gsc-site-title {
  line-height: 1.35;
}

.project-google-metrics__gsc-property {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.35;
  word-break: break-all;
  max-width: 22rem;
}

.project-google-metrics__gsc-property--empty {
  font-style: italic;
  opacity: 0.9;
}

.project-google-metrics__table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--border-subtle, var(--border));
}

.project-google-metrics__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.project-google-metrics__table th,
.project-google-metrics__table td {
  padding: 0.55rem 0.65rem;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle, var(--border));
}

.project-google-metrics__table th {
  font-weight: 700;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(0, 0, 0, 0.2);
}

.project-google-metrics__table tr:last-child td {
  border-bottom: none;
}

.project-google-metrics__domain {
  font-weight: 600;
  color: var(--text, inherit);
}

.project-google-metrics__lang-inline {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}

.project-google-metrics__na {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.project-google-metrics__api-hint {
  display: block;
  line-height: 1.4;
  max-width: 22rem;
}

.project-google-metrics__api-hint a {
  color: var(--accent, #f59e0b);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.project-google-metrics__api-hint a:hover {
  color: var(--accent-hover, #fbbf24);
}

.project-google-metrics__ads-foot {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Proyecto → pestaña Search Console (informe completo) */
.project-gsc-dash {
  margin-top: 1.25rem;
  /* Paleta unificada barra filtros (estilo GSC oscuro) */
  --gsc-bar-bg: #0a0a0a;
  --gsc-bar-border: rgba(255, 255, 255, 0.07);
  --gsc-inset-bg: rgba(0, 0, 0, 0.35);
  --gsc-inset-border: rgba(255, 255, 255, 0.1);
  --gsc-pill-text: #c4cdd8;
  --gsc-pill-hover-bg: rgba(255, 255, 255, 0.055);
  --gsc-accent: #7eb8ff;
  --gsc-accent-bg: rgba(59, 130, 246, 0.12);
  --gsc-accent-border: rgba(100, 160, 240, 0.38);
  --gsc-panel: #151515;
  --gsc-panel-border: rgba(255, 255, 255, 0.09);
}

/* Gráficas de barras por dimensión (GSC + GA4) */
.project-gsc-dash__dim-charts-section {
  margin-top: 1rem;
}

.project-gsc-dash__dim-charts-head {
  margin-bottom: 1rem;
}

.project-gsc-dash__dim-charts-heading {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f3f4f6;
}

.project-gsc-dash__dim-charts-sub {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #9ca3af;
}

.project-gsc-dash__dim-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem 1.1rem;
  align-items: stretch;
}

.project-gsc-dash__dim-chart-card {
  padding: 1rem 1.05rem 1.1rem;
  border-radius: 12px;
  border: 1px solid var(--gsc-panel-border);
  background: var(--gsc-panel);
  min-width: 0;
}

.project-gsc-dash__dim-chart-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #e5e7eb;
}

.project-gsc-dash__dim-chart-hint {
  margin: 0.3rem 0 0.65rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #9ca3af;
}

.project-gsc-dash__dim-chart-error {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  color: var(--danger, #f87171);
}

.project-gsc-dash__dim-chart-empty {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #9ca3af;
}

.project-gsc-dash__dim-bar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.project-gsc-dash__dim-bar-item {
  margin-bottom: 0.55rem;
}

.project-gsc-dash__dim-bar-item:last-child {
  margin-bottom: 0;
}

.project-gsc-dash__dim-bar-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.project-gsc-dash__dim-bar-label {
  font-size: 0.75rem;
  color: #d1d5db;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-gsc-dash__dim-bar-val {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #f9fafb;
  flex-shrink: 0;
}

.project-gsc-dash__dim-bar-track {
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.project-gsc-dash__dim-bar-fill {
  height: 100%;
  min-width: 2px;
  border-radius: 4px;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  transition: width 0.2s ease;
}

.project-gsc-dash__dim-bar-fill--gsc-1 {
  background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.project-gsc-dash__dim-bar-fill--gsc-2 {
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
}

.project-gsc-dash__dim-bar-fill--gsc-3 {
  background: linear-gradient(90deg, #059669, #34d399);
}

.project-gsc-dash__dim-bar-fill--gsc-4 {
  background: linear-gradient(90deg, #d97706, #fbbf24);
}

.project-gsc-dash__dim-bar-fill--ga-1 {
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
}

.project-gsc-dash__dim-bar-fill--ga-2 {
  background: linear-gradient(90deg, #8b5cf6, #c4b5fd);
}

.project-gsc-dash__dim-bar-fill--ga-3 {
  background: linear-gradient(90deg, #10b981, #6ee7b7);
}

.project-gsc-dash__dim-bar-fill--ga-4 {
  background: linear-gradient(90deg, #f59e0b, #fcd34d);
}

/* Titular fuera del sticky: mismo estilo que la etiqueta «Sitio» (.project-gsc-dash__gsc-site-label) */
.project-gsc-dash__filter-heading {
  margin: 0;
  padding: 0;
  font: inherit;
  line-height: 1.2;
}

/* Por encima de .dashboard-section h2 { margin-bottom: var(--space-4) } (mayor especificidad). */
.dashboard-section h2.project-gsc-dash__filter-heading {
  margin: 0;
  margin-bottom: 0;
}

/* Contenedor sticky: solo la barra de herramientas (el titular va arriba, fuera) */
.project-gsc-dash__filter-bar {
  position: sticky;
  top: var(--topbar-height, 0px);
  z-index: 36;
  margin-bottom: 1.25rem;
  padding: 0.5rem 0 0.6rem;
  background: var(--gsc-bar-bg);
  border-bottom: 1px solid var(--gsc-bar-border);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

/* /informe-google/: sin cabecera fija del panel; si no, top: 4rem deja un hueco vacío sobre la barra */
.public-google-report-page .project-gsc-dash__filter-bar {
  top: 0;
  z-index: 40;
}

/* Informe público: texto (titular + descripción) a la izquierda; Sitio / Actualizar a la derecha */
.public-google-report-header__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.85rem 1.5rem;
  justify-content: space-between;
}

.public-google-report-header__left {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  text-align: left;
}

.public-google-report-header__badge {
  text-align: left;
}

.public-google-report-header__title {
  text-align: left;
}

.public-google-report-header__hint {
  text-align: left;
  max-width: 40rem;
}

.public-google-report-header__portals {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: flex-end;
  margin-left: auto;
  min-width: 0;
}

.public-google-report-page .public-google-report-header__portals .dashboard-gsc-site-portal-root {
  margin-left: 0;
  max-width: min(100%, 28rem);
}

.public-google-report-header__portals .dashboard-gsc-site-portal-root:empty {
  display: none;
}

@media (max-width: 640px) {
  .public-google-report-header__title-row {
    flex-direction: column;
    align-items: stretch;
  }

  .public-google-report-header__left {
    flex: 1 1 auto;
    max-width: 100%;
  }

  .public-google-report-header__hint {
    max-width: none;
  }

  .public-google-report-header__portals {
    justify-content: flex-start;
    width: 100%;
    margin-left: 0;
  }

  .public-google-report-page .public-google-report-header__portals .dashboard-gsc-site-portal-root {
    max-width: 100%;
  }

  .public-google-report-header__portals .dashboard-gsc-header-right {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
}

/* Barra tipo Search Console: píldoras, chips, modal (dentro del sticky .project-gsc-dash__filter-bar) */
.project-gsc-dash__gsc-toolbar {
  position: relative;
  z-index: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.1rem;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.project-gsc-dash__gsc-toolbar-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  flex: 1;
  min-width: 0;
}

.project-gsc-dash__gsc-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 0.85rem;
  flex-shrink: 0;
}

/* Móvil: una sola fila con scroll (reglas aquí para que ganen a .gsc-toolbar-main { flex-wrap: wrap } de arriba). */
@media (max-width: 768px) {
  .project-gsc-dash__gsc-toolbar {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.2rem;
    margin-left: -0.15rem;
    margin-right: -0.15rem;
    padding-left: 0.15rem;
    padding-right: 0.15rem;
  }

  .project-gsc-dash__gsc-toolbar::-webkit-scrollbar {
    height: 5px;
  }

  .project-gsc-dash__gsc-toolbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
  }

  .project-gsc-dash__gsc-toolbar-main {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    width: auto;
    min-width: min-content;
    max-width: none;
  }

  .project-gsc-dash__gsc-toolbar-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    flex-shrink: 0;
    margin-left: auto;
    justify-content: flex-end;
    align-items: center;
    align-self: center;
  }

  .project-gsc-dash__gsc-toolbar-actions .project-gsc-dash__gsc-reset-link {
    white-space: nowrap;
  }

  .project-gsc-dash__gsc-date-group {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    width: auto;
    min-width: min-content;
    flex-shrink: 0;
  }

  .project-gsc-dash__gsc-toolbar .project-gsc-dash__gsc-divider {
    flex-shrink: 0;
  }

  .project-gsc-dash__gsc-toolbar .project-gsc-dash__gsc-chips {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    max-width: none;
    min-width: 0;
  }

  .project-gsc-dash__gsc-toolbar .project-gsc-dash__gsc-chips:not(:empty) {
    overflow-x: visible;
    max-width: none;
    padding-bottom: 0;
  }

  .project-gsc-dash__gsc-toolbar .project-gsc-dash__gsc-add-menu {
    flex: 0 0 auto;
    flex-shrink: 0;
  }

  .project-gsc-dash__gsc-toolbar-fallback-site {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }

  /* Sin portal en cabecera: sitio + Actualizar en bloque a ancho completo (no en la fila con scroll). */
  .project-gsc-dash__gsc-toolbar:has(.project-gsc-dash__gsc-toolbar-fallback-site) {
    flex-wrap: wrap;
    overflow-x: visible;
    overflow-y: visible;
  }

  .project-gsc-dash__gsc-toolbar:has(.project-gsc-dash__gsc-toolbar-fallback-site) .project-gsc-dash__gsc-toolbar-main {
    flex: 1 1 100%;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .project-gsc-dash__gsc-toolbar:has(.project-gsc-dash__gsc-toolbar-fallback-site) .project-gsc-dash__gsc-toolbar-fallback-site {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .project-gsc-dash__gsc-toolbar:has(.project-gsc-dash__gsc-toolbar-fallback-site) .project-gsc-dash__gsc-toolbar-fallback-site > .project-gsc-dash__gsc-pill {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }

  .project-gsc-dash__gsc-toolbar:has(.project-gsc-dash__gsc-toolbar-fallback-site) .project-gsc-dash__gsc-date-group,
  .project-gsc-dash__gsc-toolbar:has(.project-gsc-dash__gsc-toolbar-fallback-site) .project-gsc-dash__gsc-divider,
  .project-gsc-dash__gsc-toolbar:has(.project-gsc-dash__gsc-toolbar-fallback-site) .project-gsc-dash__gsc-chips,
  .project-gsc-dash__gsc-toolbar:has(.project-gsc-dash__gsc-toolbar-fallback-site) .project-gsc-dash__gsc-add-menu {
    flex: 0 0 auto;
  }

  .project-gsc-dash__gsc-toolbar:has(.project-gsc-dash__gsc-toolbar-fallback-site) .project-gsc-dash__gsc-toolbar-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
    margin-left: 0;
    width: 100%;
  }

  .project-gsc-dash__gsc-toolbar .project-gsc-dash__gsc-add-menu-panel {
    top: auto;
    bottom: calc(100% + 0.35rem);
    left: 0;
    right: auto;
  }
}

.project-gsc-dash__gsc-site {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: min(100%, 20rem);
  max-width: 100%;
}

.project-gsc-dash__gsc-site--in-dashboard-header {
  min-width: min(100%, 14rem);
  max-width: 20rem;
}

.project-gsc-dash__gsc-toolbar-fallback-site {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
}

.project-gsc-dash__gsc-refresh-in-header {
  flex-shrink: 0;
}

.project-gsc-dash__gsc-site-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8b95a8;
}

.project-gsc-dash__gsc-site-select {
  appearance: none;
  padding: 0.48rem 2rem 0.48rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #e8edf4;
  background: var(--gsc-inset-bg, rgba(0, 0, 0, 0.35));
  border: 1px solid var(--gsc-inset-border, rgba(255, 255, 255, 0.1));
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%238b95a8'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  /* Lista nativa del <select>: evita panel blanco con texto invisible en Windows / Chrome oscuro */
  color-scheme: dark;
}

.project-gsc-dash__gsc-site-select option {
  background-color: #1a1f2a;
  color: #e8edf4;
}

.project-gsc-dash__gsc-site-select:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.04);
}

.project-gsc-dash__gsc-site-select:focus {
  outline: none;
  border-color: rgba(100, 160, 240, 0.45);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.project-gsc-dash__gsc-site-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.project-gsc-dash__gsc-date-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: 999px;
  border: 1px solid var(--gsc-inset-border);
  background: var(--gsc-inset-bg);
}

.project-gsc-dash__gsc-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.4rem 0.88rem;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--gsc-pill-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.project-gsc-dash__gsc-pill:hover:not(:disabled) {
  color: #e8edf4;
  background: var(--gsc-pill-hover-bg);
}

.project-gsc-dash__gsc-pill:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.project-gsc-dash__gsc-pill--active {
  color: var(--gsc-accent);
  background: var(--gsc-accent-bg);
  border-color: var(--gsc-accent-border);
}

.project-gsc-dash__gsc-pill--ghost {
  border-color: rgba(255, 255, 255, 0.1);
  color: #dce3ed;
  background: transparent;
}

.project-gsc-dash__gsc-pill--ghost:hover:not(:disabled) {
  background: var(--gsc-pill-hover-bg);
  border-color: rgba(255, 255, 255, 0.14);
}

.project-gsc-dash__gsc-add-menu[open] .project-gsc-dash__gsc-add-summary.project-gsc-dash__gsc-pill--ghost {
  background: var(--gsc-accent-bg);
  border-color: var(--gsc-accent-border);
  color: var(--gsc-accent);
}

.project-gsc-dash__gsc-pill--secondary {
  border-color: rgba(255, 255, 255, 0.1);
  color: #a8b4c4;
  background: transparent;
}

.project-gsc-dash__gsc-pill--secondary:hover:not(:disabled) {
  color: #dce3ed;
  border-color: rgba(255, 255, 255, 0.16);
  background: var(--gsc-pill-hover-bg);
}

.project-gsc-dash__gsc-pill--select {
  padding-right: 1.75rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%238b95a8'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  cursor: pointer;
}

.project-gsc-dash__gsc-custom-wrap {
  display: inline-flex;
  margin: 0;
}

.project-gsc-dash__gsc-pill--interval {
  border-color: transparent;
  color: var(--gsc-pill-text);
}

.project-gsc-dash__gsc-pill--interval.project-gsc-dash__gsc-pill--active {
  color: var(--gsc-accent);
}

.project-gsc-dash__gsc-interval-icon {
  display: inline-flex;
  opacity: 0.88;
}

.project-gsc-dash__gsc-plus {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  margin-right: 0.1rem;
  opacity: 0.95;
}

.project-gsc-dash__gsc-divider {
  width: 1px;
  height: 1.5rem;
  margin: 0 0.1rem;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.project-gsc-dash__gsc-chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
}

/* Con filtros activos: ocupa el hueco entre periodo y «Añadir filtro» y hace scroll horizontal si no caben. */
.project-gsc-dash__gsc-chips:not(:empty) {
  /* flex: 1 1 0; */
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) rgba(255, 255, 255, 0.06);
  padding-bottom: 0.15rem;
}

.project-gsc-dash__gsc-chips:not(:empty)::-webkit-scrollbar {
  height: 6px;
}

.project-gsc-dash__gsc-chips:not(:empty)::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
}

.project-gsc-dash__gsc-chips:not(:empty)::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 3px;
}

.project-gsc-dash__gsc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  max-width: min(100%, 20rem);
  padding: 0.3rem 0.2rem 0.3rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: #a8d4ff;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(100, 160, 240, 0.28);
  border-radius: 999px;
}

.project-gsc-dash__gsc-chip-edit {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.project-gsc-dash__gsc-chip-edit:hover:not(:disabled) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.project-gsc-dash__gsc-chip-edit:focus-visible {
  outline: 2px solid rgba(147, 197, 253, 0.9);
  outline-offset: 1px;
}

.project-gsc-dash__gsc-chip-edit:disabled {
  cursor: default;
  opacity: 0.7;
}

.project-gsc-dash__gsc-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  margin-right: 0.15rem;
  font-size: 1.1rem;
  line-height: 1;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.88;
}

.project-gsc-dash__gsc-chip-remove:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.25);
  opacity: 1;
}

.project-gsc-dash__gsc-add-menu {
  position: relative;
  align-self: center;
  color-scheme: dark;
}

.project-gsc-dash__gsc-export-menu {
  position: relative;
  align-self: center;
  color-scheme: dark;
}

.project-gsc-dash__gsc-export-menu .project-gsc-dash__gsc-add-menu-panel {
  left: auto;
  right: 0;
}

.project-gsc-dash__export-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

/* Menú CSV bajo las tablas: el panel se abre hacia arriba para no quedar fuera de vista. */
.project-gsc-dash__gsc-export-menu--footer .project-gsc-dash__gsc-add-menu-panel {
  top: auto;
  bottom: calc(100% + 0.35rem);
}

.project-gsc-dash__gsc-export-menu-panel.project-gsc-dash__gsc-add-menu-panel {
  min-width: 15.5rem;
}

.project-gsc-dash__gsc-export-menu-group {
  margin-bottom: 0.55rem;
}

.project-gsc-dash__gsc-export-menu-group:last-child {
  margin-bottom: 0;
}

.project-gsc-dash__gsc-export-menu-group-label {
  display: block;
  margin-bottom: 0.28rem;
  padding: 0 0.1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}

.project-gsc-dash__gsc-export-menu-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.project-gsc-dash__gsc-export-format-btn {
  flex: 1 1 30%;
  min-width: 0;
  margin: 0;
  padding: 0.42rem 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  color: #e4e9f1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.project-gsc-dash__gsc-export-format-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
}

.project-gsc-dash__gsc-add-summary {
  list-style: none;
}

.project-gsc-dash__gsc-add-summary::-webkit-details-marker {
  display: none;
}

/* Triángulo / marcador nativo del <details> (Firefox y otros): color visible en tema oscuro */
.project-gsc-dash__gsc-add-summary::marker {
  color: #94a3b8;
  font-size: 0.75em;
}

.project-gsc-dash__gsc-add-menu[open] > .project-gsc-dash__gsc-add-summary::marker {
  color: var(--gsc-accent, #7eb8ff);
}

.project-gsc-dash__gsc-add-summary::-moz-list-bullet {
  color: #94a3b8;
}

.project-gsc-dash__gsc-add-menu-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 0.35rem);
  z-index: 40;
  min-width: 12rem;
  padding: 0.4rem;
  border-radius: 12px;
  border: 1px solid var(--gsc-panel-border);
  background: var(--gsc-panel);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* Modales de dimensión Google Ads (mismo patrón que GA4: lista + popup). */
.project-gsc-dash__modal--ads-dim-filter {
  width: min(100%, 24rem);
}

/* Un solo scroll: el cuerpo del modal (no combinar con panel lateral con overflow). */
.project-gsc-dash__modal-body--ads-ad-detail {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.35rem;
}

.project-gsc-dash__ads-ad-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem 1.25rem;
  align-items: start;
  margin-bottom: 0.75rem;
}

@media (max-width: 720px) {
  .project-gsc-dash__ads-ad-detail-layout {
    grid-template-columns: 1fr;
  }
}

.project-gsc-dash__ads-ad-detail-layout__preview {
  min-width: 0;
}

.project-gsc-dash__ads-ad-detail-rotate-hint {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #94a3b8;
}

.project-gsc-dash__ads-ad-detail-creative-side {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.15);
}

.project-gsc-dash__ads-ad-detail-creative-side-title {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #e2e8f0;
}

.project-gsc-dash__ads-ad-detail-creative-empty {
  margin: 0;
  font-size: 0.8125rem;
}

.project-gsc-dash__ads-ad-detail-block--side {
  margin: 0;
  padding: 0;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.project-gsc-dash__ads-ad-detail-creative-side > .project-gsc-dash__ads-ad-detail-block--side:first-of-type {
  padding-top: 0;
  border-top: none;
}

.project-gsc-dash__serp-ad-preview__live .project-gsc-dash__serp-ad-preview__headline {
  margin-top: 0.45rem;
}

.project-gsc-dash__serp-ad-preview__live .project-gsc-dash__serp-ad-preview__description {
  margin-top: 0.35rem;
}

/* Vista previa tipo resultado de búsqueda (RSA / anuncio de texto). */
.project-gsc-dash__serp-ad-preview {
  margin-bottom: 0;
}

.project-gsc-dash__serp-ad-preview__card {
  background: #fff;
  color: #202124;
  border-radius: 12px;
  padding: 0.9rem 1rem 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.project-gsc-dash__serp-ad-preview__head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.35rem;
}

.project-gsc-dash__serp-ad-preview__favicon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: linear-gradient(135deg, #4285f4 0%, #7c4dff 100%);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  user-select: none;
}

.project-gsc-dash__serp-ad-preview__head-main {
  flex: 1;
  min-width: 0;
}

.project-gsc-dash__serp-ad-preview__advertiser {
  font-size: 0.875rem;
  font-weight: 600;
  color: #202124;
  line-height: 1.25;
  word-break: break-word;
}

.project-gsc-dash__serp-ad-preview__display-url {
  font-size: 0.75rem;
  line-height: 1.35;
  color: #006621;
  word-break: break-word;
  margin-top: 0.1rem;
}

.project-gsc-dash__serp-ad-preview__menu {
  flex-shrink: 0;
  color: #70757a;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.15rem;
  user-select: none;
}

.project-gsc-dash__serp-ad-preview__headline {
  display: block;
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 400;
  color: #1a0dab;
  text-decoration: none;
  margin: 0.45rem 0 0.35rem;
  word-break: break-word;
}

.project-gsc-dash__serp-ad-preview__headline:hover {
  text-decoration: underline;
}

.project-gsc-dash__serp-ad-preview__headline--static {
  cursor: default;
}

.project-gsc-dash__serp-ad-preview__headline--muted {
  color: #5f6368;
}

.project-gsc-dash__serp-ad-preview__description {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #4d5156;
  word-break: break-word;
}

.project-gsc-dash__serp-ad-preview__description--muted {
  color: #70757a;
}

.project-gsc-dash__ads-ad-detail-more {
  margin-top: 0.25rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.project-gsc-dash__ads-ad-detail-more-summary {
  cursor: pointer;
  list-style: none;
  padding: 0.55rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.04);
}

.project-gsc-dash__ads-ad-detail-more-summary::-webkit-details-marker {
  display: none;
}

.project-gsc-dash__ads-ad-detail-more-summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.15s ease;
}

.project-gsc-dash__ads-ad-detail-more[open] .project-gsc-dash__ads-ad-detail-more-summary::before {
  transform: rotate(90deg);
}

.project-gsc-dash__ads-ad-detail-more-inner {
  padding: 0.65rem 0.65rem 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.project-gsc-dash__ads-ad-row--clickable {
  cursor: pointer;
  transition: background 0.12s ease;
}

.project-gsc-dash__ads-ad-row--clickable:hover {
  background: rgba(255, 255, 255, 0.05);
}

.project-gsc-dash__ads-ad-row--clickable:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: -2px;
}

.project-gsc-dash__ads-ad-detail-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
  font-size: 0.875rem;
}

.project-gsc-dash__ads-ad-detail-dl dt {
  margin: 0;
  color: #94a3b8;
  font-weight: 500;
}

.project-gsc-dash__ads-ad-detail-dl dd {
  margin: 0;
  color: #e4e9f1;
  word-break: break-word;
}

.project-gsc-dash__ads-ad-detail-block {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.project-gsc-dash__ads-ad-creative-list {
  margin: 0.35rem 0 0;
  padding-left: 1.15rem;
  color: #e4e9f1;
  font-size: 0.875rem;
  line-height: 1.45;
}

.project-gsc-dash__ads-ad-creative-list--numbered {
  list-style-type: decimal;
}

.project-gsc-dash__ads-ad-url {
  color: #93c5fd;
  word-break: break-all;
}

.project-gsc-dash__ads-ad-url:hover {
  text-decoration: underline;
}

.project-gsc-dash__modal-body--ads-filter-scroll {
  max-height: min(56vh, 24rem);
  overflow-y: auto;
  padding-right: 0.2rem;
}

.project-gsc-dash__ads-filter-op {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  margin-bottom: 0.45rem;
}

.project-gsc-dash__ads-filter-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  cursor: pointer;
  color: #e4e9f1;
}

.project-gsc-dash__ads-filter-check-scroll {
  max-height: 10.5rem;
  overflow-y: auto;
  padding: 0.2rem 0.15rem 0.1rem 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.15);
}

.project-gsc-dash__ads-filter-check-scroll--compact {
  max-height: 6.5rem;
}

.project-gsc-dash__ads-filter-check-scroll--in-modal {
  max-height: min(40vh, 14rem);
}

.project-gsc-dash__ads-filter-check {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.28rem 0.4rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  cursor: pointer;
  color: #e4e9f1;
}

.project-gsc-dash__ads-filter-check input {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.project-gsc-dash__ads-filter-check-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.project-gsc-dash__gsc-add-menu-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.52rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  text-align: left;
  color: #e4e9f1;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}

.project-gsc-dash__gsc-add-menu-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.project-gsc-dash__dim-hint {
  margin: 0 0 0.65rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #d1d5db;
}

.project-gsc-dash__dim-error {
  margin: 0 0 0.65rem;
  font-size: 0.8125rem;
  color: var(--danger, #f87171);
}

.project-gsc-dash__gsc-reset-link {
  align-self: center;
  padding: 0.35rem 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  color: #8ebfff;
  text-decoration: none;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}

.project-gsc-dash__gsc-reset-link:hover:not(:disabled) {
  color: #b8d7ff;
  text-decoration: underline;
  background: rgba(59, 130, 246, 0.08);
}

.project-gsc-dash__gsc-reset-link:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.5;
}

/* Popups filtros GSC: mismo lenguaje visual que modal «Eliminar proyecto» (Modal.jsx / modal-box) */
.project-gsc-dash__modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.6);
  animation: modal-fade 0.2s ease;
}

.project-gsc-dash__modal {
  width: min(100%, 58rem);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 1.75rem 1.75rem 1.5rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #1a1a1a;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
  animation: modal-in 0.25s ease;
}

.project-gsc-dash__modal--compact {
  width: min(100%, 22rem);
}

/* Después de --compact: el detalle de anuncio usa ancho amplio aunque lleve --compact. */
.project-gsc-dash__modal--ads-ad-detail {
  width: min(100%, 58rem);
}

.project-gsc-dash__modal-title {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #f9fafb;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.project-gsc-dash__modal-tabs {
  display: flex;
  gap: 1.25rem;
  margin: -0.35rem 0 1.1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.project-gsc-dash__modal-tab {
  padding: 0.35rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #9ca3af;
  border-bottom: 2px solid transparent;
  margin-bottom: -0.55rem;
}

.project-gsc-dash__modal-tab--active {
  color: #e5e7eb;
  border-bottom-color: #6b7280;
}

.project-gsc-dash__modal-tabs button.project-gsc-dash__modal-tab {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.project-gsc-dash__date-range-radios {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.project-gsc-dash__date-range-radio-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  font-size: 0.875rem;
  color: #e5e7eb;
  cursor: pointer;
}

.project-gsc-dash__date-range-radio-row input[type='radio'] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: #ea580c;
  cursor: pointer;
}

.project-gsc-dash__date-range-hint {
  margin: 0 0 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #d1d5db;
}

.project-gsc-dash__date-range-custom {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.project-gsc-dash__date-range-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.65rem;
}

.project-gsc-dash__date-range-field {
  flex: 1 1 8rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.project-gsc-dash__date-range-date-input {
  width: 100%;
  padding: 0.5rem 0.65rem;
  font-size: 0.8125rem;
  color-scheme: dark;
}

.project-gsc-dash__date-range-dash {
  flex: 0 0 auto;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  color: #9ca3af;
}

.project-gsc-dash__compare-range {
  margin-top: -0.35rem;
  font-size: 0.875rem;
  color: #93c5fd;
}

.project-gsc-dash__modal-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  color: #d1d5db;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.project-gsc-dash__modal-input {
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0a0a0a;
  color: #f3f4f6;
}

.project-gsc-dash__modal-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.project-gsc-dash__modal-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
}

.project-gsc-dash__modal-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.project-gsc-dash__modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.project-gsc-dash__modal-btn {
  min-width: 6.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.project-gsc-dash__modal-btn--cancel {
  color: #f3f4f6;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.project-gsc-dash__modal-btn--cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.project-gsc-dash__modal-btn--primary {
  color: #fff;
  background: #ea580c;
  border: none;
  box-shadow: 0 2px 14px rgba(234, 88, 12, 0.42);
}

.project-gsc-dash__modal-btn--primary:hover:not(:disabled) {
  background: #f97316;
  box-shadow: 0 4px 22px rgba(249, 115, 22, 0.48);
  transform: translateY(-1px);
}

.project-gsc-dash__modal-btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.project-gsc-dash__filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.project-gsc-dash__filter-field-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
}

.project-gsc-dash__filter-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.project-gsc-dash__filter-op {
  flex: 0 0 auto;
  min-width: 6.5rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.8125rem;
}

.project-gsc-dash__filter-text {
  flex: 1 1 8rem;
  min-width: 0;
  padding: 0.5rem 0.65rem;
  font-size: 0.8125rem;
}

.project-gsc-dash__filter-text--full {
  width: 100%;
}

.project-gsc-dash__filter-select {
  width: 100%;
  padding: 0.5rem 0.65rem;
  font-size: 0.8125rem;
}

.project-gsc-dash__hint {
  margin: 0 0 1.25rem;
}

.project-gsc-dash__domain-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.project-gsc-dash__ads-tabs-toolbar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.15rem 0 0;
  margin-bottom: -0.25rem;
}
.project-gsc-dash__ads-tabs-toolbar--expand-active {
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border-subtle, var(--border));
}

.project-gsc-dash__ads-expand-all-btn {
  flex-shrink: 0;
  align-self: flex-start;
}

.project-gsc-dash__ads-expand-section-heading {
  margin: 0 0 0.65rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--border-subtle, var(--border));
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #f3f4f6);
}

.project-gsc-dash__report-tabs-section h3.project-gsc-dash__ads-expand-section-heading:first-of-type {
  padding-top: 0;
  border-top: none;
}

.project-gsc-dash__ads-main-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  padding: 0.35rem 0 0;
  border-bottom: 1px solid var(--border-subtle, var(--border));
  margin-bottom: -0.25rem;
}

.project-gsc-dash__ads-main-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: #9ca3af;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.45rem 0.7rem;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  margin-bottom: -1px;
}

.project-gsc-dash__ads-main-tab:hover {
  color: #e5e7eb;
  background: rgba(255, 255, 255, 0.04);
}

.project-gsc-dash__ads-main-tab--active {
  color: #f3f4f6;
  border-color: var(--border-subtle, var(--border));
  border-bottom-color: var(--card-bg, #1a1a1a);
  background: var(--card-bg, #1a1a1a);
}

.project-gsc-dash__ads-kpi-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle, var(--border));
}

.project-gsc-dash__ads-kpi-pill {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.4rem 0.65rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle, var(--border));
  min-width: 6.5rem;
}

.project-gsc-dash__ads-kpi-k {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
}

.project-gsc-dash__ads-kpi-v {
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #e5e7eb;
}

.project-gsc-dash__ads-table-filter {
  width: 100%;
  max-width: 22rem;
  margin: 0 0 0.85rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle, var(--border));
  background: var(--input-bg, rgba(0, 0, 0, 0.25));
  color: inherit;
  font-size: 0.875rem;
}

.project-gsc-dash__ads-table-hint {
  margin: 0 0 0.65rem !important;
}

.project-gsc-dash__ads-dim-sub {
  margin: 0.15rem 0 0;
  font-size: 0.68rem;
  color: #9ca3af;
  line-height: 1.35;
}

.project-gsc-dash__scorecard--conv .project-gsc-dash__scorecard-check {
  accent-color: #10b981;
}

.project-gsc-dash__scorecard--conv.project-gsc-dash__scorecard--on {
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: inset 0 3px 0 0 #10b981;
}

.project-gsc-dash__scorecard--conv.project-gsc-dash__scorecard--on .project-gsc-dash__scorecard-val {
  color: #6ee7b7;
}

.project-gsc-dash__domain-block {
  margin-bottom: 0;
  padding: 1.2rem 1.25rem 1.35rem;
}

.project-gsc-dash__section {
  margin: 0;
  padding: 1.2rem 1.25rem 1.35rem;
}

.project-gsc-dash__summary-chart-card .project-gsc-dash__chart-embed {
  padding-top: 0.35rem;
  margin-top: 0;
}

.project-gsc-dash__summary-chart-card .project-gsc-dash__chart-embed .project-gsc-dash__chart-wrap {
  margin-bottom: 0;
}

.project-gsc-dash__domain-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-subtle, var(--border));
}

.project-gsc-dash__domain-head .project-gsc-dash__scorecards {
  max-width: none;
  flex: 1 1 auto;
}

.project-gsc-dash__domain-title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 700;
}

.project-gsc-dash__property {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  word-break: break-all;
  max-width: 36rem;
}

.project-gsc-dash__property--muted {
  font-style: italic;
}

.project-gsc-dash__error {
  margin: 0;
  font-size: 0.875rem;
  color: var(--danger, #f87171);
  align-self: center;
}

/* Tarjetas métricas estilo Search Console */
.project-gsc-dash__scorecards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  width: 100%;
  max-width: 52rem;
  /* Sin esto, todas las tarjetas de la fila igualan la altura de la más alta y queda hueco abajo. */
  align-items: start;
}

@media (min-width: 720px) {
  .project-gsc-dash__scorecards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.project-gsc-dash__scorecard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 5.5rem;
  padding: 0.65rem 0.75rem 0.75rem 2rem;
  text-align: left;
  border-radius: 8px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  background: rgba(0, 0, 0, 0.18);
  cursor: default;
  transition: border-color 0.15s, box-shadow 0.15s;
}

label.project-gsc-dash__scorecard {
  cursor: pointer;
}

/* Métrica informativa sin checkbox (p. ej. coste en Google Ads) */
.project-gsc-dash__scorecard--no-check {
  padding-left: 0.75rem;
}

.project-gsc-dash__scorecard-check {
  position: absolute;
  left: 0.55rem;
  top: 0.55rem;
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: #3b82f6;
  cursor: pointer;
}

.project-gsc-dash__scorecard-head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem 0.45rem;
  width: 100%;
  min-width: 0;
}

.project-gsc-dash__scorecard-head-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 auto;
}

.project-gsc-dash__scorecard-delta-slot {
  flex: 0 0 auto;
  align-self: flex-start;
  text-align: right;
  max-width: 46%;
  line-height: 1.15;
}

.project-gsc-dash__scorecard-delta-slot .project-gsc-dash__scorecard-delta {
  font-size: 0.82rem;
  white-space: nowrap;
}

.project-gsc-dash__scorecard-lbl {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.25;
}

.project-gsc-dash__scorecard-val {
  font-size: 1.2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text, #f1f5f9);
  line-height: 1.2;
}

.project-gsc-dash__scorecard-compare {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.35rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  border-top: 1px dashed var(--border-subtle, rgba(255, 255, 255, 0.14));
}

.project-gsc-dash__scorecard-compare-k {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #94a3b8);
}

.project-gsc-dash__scorecard-compare-v {
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #cbd5e1);
  line-height: 1.2;
}

.project-gsc-dash__scorecard-compare-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.35rem 0.5rem;
  width: 100%;
}

.project-gsc-dash__scorecard-compare-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.project-gsc-dash__scorecard-pp--aside {
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
  line-height: 1.3;
  align-self: flex-start;
}

.project-gsc-dash__scorecard-delta {
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.project-gsc-dash__scorecard-delta--good {
  color: #4ade80;
}

.project-gsc-dash__scorecard-delta--bad {
  color: #f87171;
}

.project-gsc-dash__scorecard-delta--neutral {
  color: #9ca3af;
}

.project-gsc-dash__scorecard-pp {
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #94a3b8;
}

.project-gsc-dash__scorecard--clicks.project-gsc-dash__scorecard--on {
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: inset 0 3px 0 0 #3b82f6;
}

.project-gsc-dash__scorecard--clicks.project-gsc-dash__scorecard--on .project-gsc-dash__scorecard-val {
  color: #93c5fd;
}

.project-gsc-dash__scorecard--imp.project-gsc-dash__scorecard--on {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: inset 0 3px 0 0 #a855f7;
}

.project-gsc-dash__scorecard--imp.project-gsc-dash__scorecard--on .project-gsc-dash__scorecard-val {
  color: #d8b4fe;
}

.project-gsc-dash__scorecard--ctr .project-gsc-dash__scorecard-check {
  accent-color: #2dd4bf;
}

.project-gsc-dash__scorecard--ctr.project-gsc-dash__scorecard--on {
  border-color: rgba(45, 212, 191, 0.45);
  box-shadow: inset 0 3px 0 0 #14b8a6;
}

.project-gsc-dash__scorecard--ctr.project-gsc-dash__scorecard--on .project-gsc-dash__scorecard-val {
  color: #5eead4;
}

.project-gsc-dash__scorecard--pos .project-gsc-dash__scorecard-check {
  accent-color: #fbbf24;
}

.project-gsc-dash__scorecard--pos.project-gsc-dash__scorecard--on {
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow: inset 0 3px 0 0 #f59e0b;
}

.project-gsc-dash__scorecard--pos.project-gsc-dash__scorecard--on .project-gsc-dash__scorecard-val {
  color: #fcd34d;
}

.project-gsc-dash__chart-wrap {
  width: 100%;
  max-width: 100%;
  margin: 0 0 1.5rem;
  box-sizing: border-box;
}

.project-gsc-dash__chart-legend-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  margin-bottom: 0.45rem;
}

.project-gsc-dash__chart-legend-tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.project-gsc-dash__chart-legend-tag--clicks {
  color: #93c5fd;
}

.project-gsc-dash__chart-legend-tag--imp {
  color: #d8b4fe;
}

.project-gsc-dash__chart-legend-tag--conv {
  color: #34d399;
}

.project-gsc-dash__chart-legend-tag--ctr {
  color: #5eead4;
}

.project-gsc-dash__chart-legend-tag--pos {
  color: #fcd34d;
}

.project-gsc-dash__chart-legend-compare {
  flex: 1 1 100%;
  margin-top: 0.25rem;
  margin-left: 0;
  font-size: 0.68rem;
  font-weight: 500;
  color: #cbd5e1;
  line-height: 1.35;
  white-space: normal;
}

.project-gsc-dash__chart-interactive {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.project-gsc-dash__chart-svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 720 / 210;
  min-height: 180px;
  display: block;
}

.project-gsc-dash__chart-axis,
.project-gsc-dash__chart-line--clicks,
.project-gsc-dash__chart-line--imp,
.project-gsc-dash__chart-line--conv,
.project-gsc-dash__chart-line--ctr,
.project-gsc-dash__chart-line--pos {
  pointer-events: none;
}

.project-gsc-dash__chart-line--clicks {
  stroke: #3b82f6;
  stroke-width: 2.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.project-gsc-dash__chart-line--imp {
  stroke: #a855f7;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.9;
}

.project-gsc-dash__chart-line--conv {
  stroke: #10b981;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.95;
}

.project-gsc-dash__chart-line--ctr {
  stroke: #2dd4bf;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.92;
}

.project-gsc-dash__chart-line--pos {
  stroke: #fbbf24;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.92;
}

.project-gsc-dash__chart-line--compare {
  stroke-dasharray: 7 5;
  stroke-width: 2.6 !important;
  opacity: 0.92;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.35));
}

.project-gsc-dash__chart-line--compare.project-gsc-dash__chart-line--imp {
  opacity: 0.88;
}

.project-gsc-dash__chart-line--compare.project-gsc-dash__chart-line--ctr {
  opacity: 0.88;
}

.project-gsc-dash__chart-line--compare.project-gsc-dash__chart-line--pos {
  opacity: 0.88;
}

.project-gsc-dash__chart-axis {
  stroke: var(--border-subtle, rgba(255, 255, 255, 0.12));
  stroke-width: 1;
}

.project-gsc-dash__chart-hitarea {
  cursor: crosshair;
}

.project-gsc-dash__chart-hover-line {
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.project-gsc-dash__chart-tooltip {
  position: absolute;
  z-index: 6;
  min-width: 10.5rem;
  max-width: min(18rem, 92vw);
  padding: 0.55rem 0.65rem 0.6rem;
  border-radius: 10px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 8px));
}

.project-gsc-dash__chart-tooltip-date {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: capitalize;
  color: #e5e7eb;
  margin: 0 0 0.45rem;
  line-height: 1.35;
}

.project-gsc-dash__chart-tooltip-divider {
  margin: 0.45rem 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.project-gsc-dash__chart-tooltip-compare-h {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: capitalize;
  color: #9ca3af;
  margin: 0 0 0.4rem;
  line-height: 1.35;
}

.project-gsc-dash__chart-tooltip-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.12rem 0.65rem;
  margin: 0;
  font-size: 0.75rem;
}

.project-gsc-dash__chart-tooltip-dt,
.project-gsc-dash__chart-tooltip-dd {
  margin: 0;
}

.project-gsc-dash__chart-tooltip-dt {
  font-weight: 600;
  color: #9ca3af;
}

.project-gsc-dash__chart-tooltip-dd {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #f3f4f6;
}

.project-gsc-dash__chart-tooltip-dt--clicks {
  color: #93c5fd;
}

.project-gsc-dash__chart-tooltip-dt--imp {
  color: #d8b4fe;
}

.project-gsc-dash__chart-tooltip-dt--ctr {
  color: #5eead4;
}

.project-gsc-dash__chart-tooltip-dt--pos {
  color: #fcd34d;
}

.project-gsc-dash__chart-legend {
  font-size: 10px;
  font-weight: 600;
  fill: var(--text-muted);
}

.project-gsc-dash__chart-legend--clicks {
  fill: #93c5fd;
}

.project-gsc-dash__chart-legend--imp {
  fill: #d8b4fe;
}

.project-gsc-dash__chart-tick {
  font-size: 9px;
  fill: var(--text-muted);
  pointer-events: none;
}

.project-gsc-dash__chart-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

.project-gsc-dash__chart-empty {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.project-gsc-dash__table-section {
  margin-bottom: 0;
}

.project-gsc-dash__table-section--pair {
  padding-bottom: 0.25rem;
}

.project-gsc-dash__table-section-title {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text, inherit);
  letter-spacing: -0.01em;
}

.project-gsc-dash__table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--border-subtle, var(--border));
  overflow-y: visible;
}

.project-gsc-dash__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.project-gsc-dash__table--comfort th,
.project-gsc-dash__table--comfort td {
  padding: 0.7rem 0.85rem;
  vertical-align: top;
}

.project-gsc-dash__table th,
.project-gsc-dash__table td {
  padding: 0.45rem 0.55rem;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle, var(--border));
}

.project-gsc-dash__table th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.35);
}

.project-gsc-dash__th-num {
  text-align: right;
  white-space: nowrap;
}

.project-gsc-dash__cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.project-gsc-dash__cell-num--clicks {
  color: #93c5fd;
  font-weight: 600;
}

.project-gsc-dash__cell-num--imp {
  color: #d8b4fe;
  font-weight: 600;
}

.project-gsc-dash__cell-num--compare {
  color: var(--text-muted, #94a3b8);
  font-weight: 500;
  vertical-align: top;
}

.project-gsc-dash__table-compare-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 4.5rem;
}

.project-gsc-dash__table-compare-val {
  font-variant-numeric: tabular-nums;
}

.project-gsc-dash__table-compare-cell .project-gsc-dash__scorecard-delta {
  font-size: 0.65rem;
  font-weight: 700;
}

.project-gsc-dash__table tr:last-child td {
  border-bottom: none;
}

.project-gsc-dash__extras {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: 0.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-subtle, var(--border));
}

@media (min-width: 900px) {
  .project-gsc-dash__extras {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 2rem;
  }
}

.project-gsc-dash__extra-title {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text, inherit);
}

.project-gsc-dash__mini-error {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: var(--danger, #f87171);
}

.project-gsc-dash__cell-text {
  max-width: 14rem;
  word-break: break-word;
  font-size: 0.8rem;
  line-height: 1.45;
}

.project-gsc-dash__query-filter-btn {
  display: inline;
  margin: 0;
  padding: 0;
  max-width: 100%;
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
  vertical-align: baseline;
  background: none;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  word-break: break-word;
}

.project-gsc-dash__query-filter-btn:hover:not(:disabled) {
  color: var(--accent, #60a5fa);
  text-decoration: underline;
}

.project-gsc-dash__query-filter-btn:focus-visible {
  outline: 2px solid var(--accent, #60a5fa);
  outline-offset: 2px;
}

.project-gsc-dash__query-filter-btn:disabled {
  cursor: default;
}

.project-gsc-dash__table-section--pair .project-gsc-dash__cell-text {
  max-width: min(22rem, 42vw);
}

.project-gsc-dash__cell-url {
  max-width: 18rem;
  word-break: break-all;
  font-size: 0.75rem;
  line-height: 1.45;
}

.project-gsc-dash__table-section--pair .project-gsc-dash__cell-url {
  max-width: min(28rem, 48vw);
}

.project-gsc-dash__url-cell {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  max-width: 100%;
}

.project-gsc-dash__page-filter-btn {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  word-break: break-all;
}

.project-gsc-dash__page-filter-btn:hover:not(:disabled) {
  color: var(--accent, #f59e0b);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.project-gsc-dash__page-filter-btn:focus-visible {
  outline: 2px solid var(--accent, #f59e0b);
  outline-offset: 2px;
}

.project-gsc-dash__page-filter-btn:disabled {
  cursor: default;
}

.project-gsc-dash__url-external {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.05rem;
  padding: 0.2rem;
  line-height: 0;
  color: var(--accent, #f59e0b);
  text-decoration: none;
  border-radius: 4px;
}

.project-gsc-dash__url-external:hover {
  color: var(--accent-hover, #fbbf24);
  background: var(--accent-soft, rgba(245, 158, 11, 0.12));
}

.project-gsc-dash__url-external:focus-visible {
  outline: 2px solid var(--accent, #f59e0b);
  outline-offset: 1px;
}

.project-gsc-dash__report-tabs-section {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.project-gsc-dash__report-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
}

.project-gsc-dash__report-tab {
  position: relative;
  margin: 0 0 -1px;
  padding: 0.5rem 0.15rem 0.65rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.project-gsc-dash__report-tab:hover {
  color: var(--text, #e2e8f0);
}

.project-gsc-dash__report-tab--active {
  color: #93c5fd;
  border-bottom-color: #3b82f6;
}

.project-gsc-dash__report-panel {
  min-height: 2rem;
}

.project-gsc-dash__report-table-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.project-gsc-dash__table-pagination {
  margin-top: 0.65rem;
}

.project-gsc-dash__table-pagination-sep {
  opacity: 0.88;
}

.project-gsc-dash__th-sort-wrap {
  vertical-align: bottom;
}

.project-gsc-dash__th-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
  text-align: inherit;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.project-gsc-dash__th-sort:hover {
  color: var(--text, #e2e8f0);
}

.project-gsc-dash__th-sort:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
}

.project-gsc-dash__th-sort--end {
  width: 100%;
}

.project-gsc-dash__th-sort-label {
  min-width: 0;
  text-align: inherit;
}

.project-gsc-dash__th-sort-indicator {
  flex-shrink: 0;
  font-size: 0.65em;
  opacity: 0.75;
}

.project-gsc-dash__report-panel--pair .project-gsc-dash__cell-text {
  max-width: min(22rem, 42vw);
}

.project-gsc-dash__report-panel--pair .project-gsc-dash__cell-url {
  max-width: min(28rem, 48vw);
}

@media (max-width: 600px) {
  .project-google-metrics {
    padding: 1rem 0.85rem;
  }

  .project-google-metrics__table th,
  .project-google-metrics__table td {
    padding: 0.45rem 0.5rem;
  }
}

@media print {
  @page {
    margin: 12mm;
  }

  /* No usar visibility:hidden en body: en GSC/GA4/Ads el bloque no es .project-google-metrics y la página quedaba en blanco. */
  html,
  body {
    background: #fff !important;
  }

  .page-dashboard.dashboard-layout,
  .dashboard-main,
  .dashboard-content-wrap {
    background: #fff !important;
    color: #111 !important;
  }

  .dashboard-topbar,
  .dashboard-sidebar-rail,
  .dashboard-sidebar-secondary,
  .dashboard-sidebar-backdrop,
  .dashboard-view-as-banner {
    display: none !important;
  }

  .dashboard-main {
    margin: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  .dashboard-content-wrap {
    padding: 0.35rem 0.5rem 1rem !important;
    max-width: none !important;
  }

  .dashboard-main-footer {
    display: none !important;
  }

  .dashboard-header,
  .dashboard-title-row {
    background: #fff !important;
    color: #111 !important;
  }

  .dashboard-header h1,
  .dashboard-header .dashboard-subtitle,
  .dashboard-title-row h1,
  .dashboard-title-row .dashboard-subtitle {
    color: #111 !important;
  }

  /* Informes Google (Search Console, GA4, Ads): tema oscuro → texto legible en PDF */
  section.dashboard-section.project-gsc-dash {
    background: #fff !important;
    color: #111 !important;
  }

  .project-gsc-dash .domain-form-hint,
  .project-gsc-dash .project-google-metrics__range,
  .project-gsc-dash .project-google-metrics__range-note,
  .project-gsc-dash .project-gsc-dash__filter-heading,
  .project-gsc-dash .project-gsc-dash__gsc-site-label {
    color: #333 !important;
  }

  .project-gsc-dash .card {
    background: #f8f9fa !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    color: #111 !important;
  }

  .project-gsc-dash__chart-interactive,
  .project-gsc-dash__chart-svg,
  .project-gsc-dash__dim-charts-grid {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Rendimiento Google (resumen proyecto): estilos de impresión */
  .project-google-metrics {
    position: relative;
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
    border: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .project-google-metrics .card {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: none !important;
  }

  .project-google-metrics__no-print {
    display: none !important;
  }

  .project-google-metrics__print-banner {
    display: block !important;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #ccc;
    page-break-after: avoid;
    break-after: avoid;
  }

  .project-google-metrics__print-banner-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111 !important;
  }

  .project-google-metrics__print-banner-sub {
    font-size: 0.85rem;
    color: #444 !important;
    margin-top: 0.2rem;
  }

  .project-google-metrics__totals {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .project-google-metrics__block {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .project-google-metrics__table-wrap {
    overflow: visible !important;
  }

  .project-google-metrics a {
    color: inherit !important;
    text-decoration: none !important;
  }

  .project-google-metrics a[href^='http']::after,
  .project-google-metrics a[href^='/']::after {
    content: none !important;
  }
}

/* Identidad visual por dominio: mismo lenguaje visual que redes (social-palette-*, social-brand-ref-*) */
.domain-brand-identity-section {
  margin: 1.25rem 0;
  padding: 1rem 1rem 1.1rem;
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: 10px;
  background: var(--surface-raised, transparent);
}

.domain-brand-identity-lead {
  margin: -0.15rem 0 0.85rem;
}

.domain-brand-identity-hint-block {
  display: block;
  margin-bottom: 0.75rem;
}

.domain-brand-identity-subsection {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle, var(--border));
}

.domain-brand-identity-subsection:first-of-type {
  margin-top: 0.65rem;
  padding-top: 0;
  border-top: none;
}

.domain-brand-identity-field-label {
  margin-bottom: 0.25rem;
}

/* Proyecto → Integraciones (Google) */
.project-integrations__panel {
  margin-bottom: 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: 12px;
  border: 1px solid var(--border-subtle, var(--border));
  background: var(--surface-raised, rgba(255, 255, 255, 0.02));
}

.project-integrations__connect {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.project-integrations__connect-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
}

.project-integrations__reconnect,
.project-integrations__disconnect {
  border-radius: 10px;
}

.project-integrations__details {
  font-size: 0.8125rem;
  color: var(--text-muted, inherit);
  border-top: 1px solid var(--border-subtle, var(--border));
  padding-top: 0.65rem;
  margin-top: 0.15rem;
}

.project-integrations__details-summary {
  cursor: pointer;
  user-select: none;
  color: var(--text-muted, inherit);
  font-weight: 600;
}

.project-integrations__details-summary:hover {
  color: var(--text, inherit);
}

.project-integrations__details-body {
  margin: 0.5rem 0 0;
  line-height: 1.5;
}

.project-integrations__alert {
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(234, 179, 8, 0.45);
  background: rgba(234, 179, 8, 0.08);
  font-size: 0.875rem;
  color: var(--text, inherit);
}

.project-integrations__empty {
  margin-top: 0.5rem;
}

.project-integrations__grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.project-integrations-card {
  border-radius: 12px;
  border: 1px solid var(--border-subtle, var(--border));
  background: var(--surface-raised, rgba(255, 255, 255, 0.02));
  padding: 1rem 1.15rem 1.1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.project-integrations-card:hover {
  border-color: var(--border, rgba(255, 255, 255, 0.12));
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.project-integrations-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-subtle, var(--border));
}

.project-integrations-card__head-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  min-width: 0;
  flex: 1;
}

.project-integrations-card__title-block {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  min-width: 0;
}

.project-integrations-card__lang-inline {
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--text-muted, inherit);
  font-weight: 500;
}

.project-integrations-card__domain {
  font-size: 1.05rem;
  font-weight: 700;
}

.project-integrations-card__id {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted, inherit);
  font-variant-numeric: tabular-nums;
}

.project-integrations-card__save {
  flex-shrink: 0;
  padding: 0.45rem 1rem;
  font-size: 0.8125rem;
  border-radius: 10px;
}

.project-integrations-card__meta-code {
  font-weight: 500;
  opacity: 0.82;
  font-variant-numeric: tabular-nums;
}

.project-integrations-card__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 720px) {
  .project-integrations-card__fields {
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
  }

  .project-integrations-field--meta {
    grid-column: 1 / -1;
  }
}

.project-integrations-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.project-integrations-field__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, inherit);
}

.project-integrations-field__optional {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  opacity: 0.85;
}

.project-integrations-field--mcc {
  grid-column: 1 / -1;
  padding-top: 0.35rem;
  margin-top: 0.15rem;
  border-top: 1px dashed var(--border-subtle, var(--border));
}

.project-integrations-mcc-wrap {
  max-width: min(100%, 18rem);
}

.project-integrations-mcc-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  border-radius: 10px;
  border: 1px solid var(--border-subtle, var(--border));
  background: var(--surface, rgba(0, 0, 0, 0.22));
  color: var(--text, inherit);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.project-integrations-mcc-input::placeholder {
  color: var(--text-muted, inherit);
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}

.project-integrations-mcc-input:focus {
  outline: none;
  border-color: var(--accent, #f59e0b);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.22);
}

.project-integrations-mcc-input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.project-integrations-mcc-hint {
  margin: 0;
  max-width: 42rem;
  line-height: 1.5;
}

.project-integrations-mcc-hint-code {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.12);
  color: var(--accent, #f59e0b);
}

.project-integrations-field__select {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.45rem 0.65rem;
  font-size: 0.875rem;
  line-height: 1.35;
  border-radius: 10px;
  border: 1px solid var(--border-subtle, var(--border));
  background: var(--surface, rgba(0, 0, 0, 0.2));
  color: var(--text, inherit);
}

.project-integrations-field__select:focus {
  outline: none;
  border-color: var(--accent, #f59e0b);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.project-integrations-field__select:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.project-integrations-field__select--static {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.45rem 0.65rem;
  font-size: 0.875rem;
  line-height: 1.35;
  border-radius: 10px;
  border: 1px solid var(--border-subtle, var(--border));
  background: var(--surface, rgba(0, 0, 0, 0.2));
  color: var(--text-muted, inherit);
  opacity: 0.85;
  cursor: not-allowed;
}

/* Selector con buscador (Integraciones) */
.project-integrations-searchselect {
  position: relative;
  width: 100%;
}

.project-integrations-searchselect__trigger {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.45rem 0.65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.35;
  text-align: left;
  border-radius: 10px;
  border: 1px solid var(--border-subtle, var(--border));
  background: var(--surface, rgba(0, 0, 0, 0.2));
  color: var(--text, inherit);
  cursor: pointer;
  font-family: inherit;
}

.project-integrations-searchselect__trigger:hover:not(:disabled) {
  border-color: var(--border, rgba(255, 255, 255, 0.18));
}

.project-integrations-searchselect__trigger:focus-visible {
  outline: none;
  border-color: var(--accent, #f59e0b);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.project-integrations-searchselect__trigger:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.project-integrations-searchselect__trigger-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-integrations-searchselect__chev {
  flex-shrink: 0;
  display: inline-block;
  font-size: 0.65rem;
  opacity: 0.75;
  transition: transform 0.15s ease;
}

.project-integrations-searchselect--open .project-integrations-searchselect__chev {
  transform: rotate(180deg);
}

.project-integrations-searchselect__dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 80;
  border-radius: 10px;
  border: 1px solid var(--border-subtle, var(--border));
  background: var(--surface-raised, #1a1a1e);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.project-integrations-searchselect__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.65rem;
  font-size: 0.875rem;
  border: none;
  border-bottom: 1px solid var(--border-subtle, var(--border));
  background: var(--surface, rgba(0, 0, 0, 0.25));
  color: var(--text, inherit);
  font-family: inherit;
}

.project-integrations-searchselect__input::placeholder {
  color: var(--text-muted, inherit);
  opacity: 0.8;
}

.project-integrations-searchselect__input:focus {
  outline: none;
}

.project-integrations-searchselect__list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  max-height: min(240px, 45vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.project-integrations-searchselect__empty {
  padding: 0.65rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted, inherit);
}

.project-integrations-searchselect__opt {
  display: block;
  width: 100%;
  padding: 0.45rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text, inherit);
  cursor: pointer;
  font-family: inherit;
}

.project-integrations-searchselect__opt:hover,
.project-integrations-searchselect__opt:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.project-integrations-searchselect__opt--active {
  font-weight: 600;
  background: rgba(245, 158, 11, 0.12);
}

.project-integrations-field--meta {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.project-integrations-meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted, inherit);
  border: 1px dashed var(--border-subtle, var(--border));
  background: transparent;
}

.dashboard-project-integrations-callout {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle, var(--border));
  background: var(--surface-muted, rgba(0, 0, 0, 0.04));
  font-size: 0.9rem;
  line-height: 1.45;
}

.project-integrations__callout {
  margin: 0;
}

.dashboard-project-integrations-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.dashboard-project-integrations-badge--ok {
  background: rgba(34, 197, 94, 0.15);
  color: rgb(22, 163, 74);
}

/* —— Hub /dashboard/integraciones (tarjetas tipo marketplace) —— */
.integraciones-hub-page {
  max-width: 100%;
  margin: 0 auto;
}

.integraciones-hub-google-wrap {
  margin-bottom: 1.75rem;
}

.integraciones-hub-section-head--google {
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: none;
}

.integraciones-hub-section-icon--google {
  border: none;
  background: rgba(255, 255, 255, 0.06);
}

.integraciones-hub-block {
  margin-top: 0.25rem;
}

.integraciones-hub-block--after {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle, var(--border));
}

.integraciones-hub-section-head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1.35rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle, var(--border));
}

.integraciones-hub-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle, var(--border));
  background: var(--surface-muted, rgba(255, 255, 255, 0.06));
  color: var(--accent, #f59e0b);
  flex-shrink: 0;
}

.integraciones-hub-section-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text, inherit);
}

.integraciones-hub-section-sub {
  margin: 0.2rem 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-muted, inherit);
}

.integraciones-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

@media (min-width: 640px) {
  .integraciones-hub-grid--ads-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
  }
}

.integraciones-hub-card {
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: 12px;
  background: var(--surface-raised, rgba(255, 255, 255, 0.02));
  padding: 1rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.integraciones-hub-card:hover {
  border-color: var(--border, rgba(255, 255, 255, 0.12));
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.integraciones-hub-card--soon {
  background: var(--surface-muted, rgba(255, 255, 255, 0.04));
  opacity: 0.92;
}

.integraciones-hub-card--soon:hover {
  box-shadow: none;
}

.integraciones-hub-card-top {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}

.integraciones-hub-card-icon-wrap {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, inherit);
  background: var(--surface-muted, rgba(255, 255, 255, 0.04));
  flex-shrink: 0;
}

.integraciones-hub-card-icon-wrap svg {
  display: block;
}

.integraciones-hub-card-icon-wrap--brand {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-subtle, var(--border));
  padding: 2px;
  overflow: hidden;
}

.integraciones-hub-card--soon .integraciones-hub-card-title {
  color: var(--text-muted, inherit);
}

.integraciones-hub-card--soon .integraciones-hub-card-desc {
  color: var(--text-muted, inherit);
  opacity: 0.85;
}

.integraciones-hub-card-heading {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.integraciones-hub-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text, inherit);
  line-height: 1.25;
}

.integraciones-hub-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  font-size: 0.75rem;
  font-weight: 600;
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.14);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.integraciones-hub-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #60a5fa;
}

.integraciones-hub-badge--with-icon {
  gap: 0.3rem;
}

.integraciones-hub-badge-gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #93c5fd;
  line-height: 0;
}

.integraciones-hub-badge-gear svg {
  width: 13px;
  height: 13px;
}

.integraciones-hub-badge--soon {
  color: var(--text-muted, inherit);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle, var(--border));
  font-weight: 600;
}

.integraciones-hub-badge--soon svg {
  color: var(--text-muted, inherit);
  opacity: 0.8;
  flex-shrink: 0;
}

.integraciones-hub-card-desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-muted, inherit);
  flex: 1;
}

.integraciones-hub-card-actions {
  margin-top: 0.15rem;
}

.integraciones-hub-config-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-subtle, var(--border));
  background: var(--surface-muted, rgba(255, 255, 255, 0.04));
  color: var(--text, inherit);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.integraciones-hub-config-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent, #f59e0b);
  color: var(--accent, #f59e0b);
}

.integraciones-hub-config-btn:focus-visible {
  outline: 2px solid var(--accent, #f59e0b);
  outline-offset: 2px;
}

.integraciones-hub-config-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

a.integraciones-hub-config-btn--link {
  text-decoration: none;
}

.integraciones-hub-soon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-subtle, var(--border));
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted, inherit);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  cursor: not-allowed;
  opacity: 0.85;
}

.integraciones-hub-soon-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.85;
}

.integraciones-hub-panel {
  margin-top: 1.25rem;
  padding: 1.15rem 1.25rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle, var(--border));
  background: var(--surface-raised, rgba(0, 0, 0, 0.2));
}

.integraciones-hub-panel__title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text, inherit);
}

.integraciones-hub-panel__lead {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-muted, inherit);
}

.integraciones-hub-panel .project-integrations__panel--hub-embed {
  margin-bottom: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.integraciones-hub-panel .dashboard-integraciones-api h3,
.integraciones-hub-panel .dashboard-integraciones-webhooks h3 {
  margin-top: 0;
}

.integraciones-hub-panel-footer {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--text-muted, inherit);
}

.integraciones-hub-inline-link {
  color: var(--accent, #f59e0b);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.integraciones-hub-footnote {
  margin: 1.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-muted, inherit);
}

.integraciones-hub-footnote a {
  color: var(--accent, #f59e0b);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ——— Estrategia de proyecto: hub con pestañas Resumen | Configuración ——— */
.project-strategy-page__shell {
  padding: var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.project-strategy-page__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4) var(--space-5);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-light, var(--border));
}

.project-strategy-page__hero-main {
  flex: 1 1 17rem;
  min-width: 0;
}

.project-strategy-page__hero-actions {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
}

.project-strategy-page__title {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: var(--font-bold, 700);
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.project-strategy-page__subtitle {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 38rem;
}

.project-strategy-page__progress {
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 16%, transparent);
  overflow: hidden;
  margin-bottom: var(--space-2);
  max-width: 22rem;
}

.project-strategy-page__progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 75%, #1a1a1a),
    var(--accent)
  );
  transition: width 0.4s ease;
}

.project-strategy-page__meta {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-muted);
}

.project-strategy-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  padding: 0.3rem;
  margin-bottom: var(--space-4);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 10%, transparent);
  border: 1px solid var(--border-light, var(--border));
  width: fit-content;
  max-width: 100%;
}

.project-strategy-tabs__btn {
  padding: 0.45rem 1.15rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-semibold, 600);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.project-strategy-tabs__btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.project-strategy-tabs__btn.is-active {
  color: var(--bg-elevated, #fff);
  background: var(--accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
}

.project-strategy-tab-panel {
  min-height: 10rem;
}

.project-strategy-config__intro {
  margin-bottom: var(--space-4);
}

.project-strategy-config__intro .project-strategy-hero__hint {
  margin: 0;
}

.project-strategy-summary-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: min(62vh, 680px);
}

.project-strategy-summary-page__header {
  margin-bottom: var(--space-2);
}

.project-strategy-summary-page__header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}

.project-strategy-summary-page__header-text {
  flex: 1 1 14rem;
  min-width: 0;
}

.project-strategy-summary-page__exports {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  flex-shrink: 0;
}

.project-strategy-summary-page__export-hint {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm, 0.8125rem);
  line-height: 1.5;
  max-width: 52rem;
}

.project-strategy-summary-page__heading {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base, 1rem);
  font-weight: var(--font-bold, 700);
  color: var(--text);
}

.project-strategy-summary-page__intro {
  margin: 0;
  font-size: var(--text-sm, 0.8125rem);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 40rem;
}

.project-strategy-summary-page__loading {
  margin: 0;
}

.project-strategy-summary-page__body {
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--border-light, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--bg, #fff));
  overflow: auto;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 12%, transparent);
}

.project-strategy-summary-page__pre {
  margin: 0;
  padding: var(--space-5) var(--space-5);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--text) 92%, var(--accent));
  font-family: var(--font-mono, ui-monospace, 'Cascadia Code', monospace);
}

.project-strategy-summary-page__markdown {
  padding: var(--space-5) var(--space-5);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text);
}

.project-strategy-summary-page__empty {
  margin: 0;
  padding: var(--space-5) var(--space-5);
}

.project-strategy-summary-md__h1 {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: var(--font-bold, 700);
  color: var(--accent);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.project-strategy-summary-md__h2 {
  margin: var(--space-4) 0 var(--space-2);
  padding-bottom: var(--space-2);
  font-size: 1rem;
  font-weight: var(--font-bold, 700);
  color: var(--text);
  line-height: 1.35;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent));
}

.project-strategy-summary-md__h1 + .project-strategy-summary-md__h2 {
  margin-top: var(--space-3);
}

.project-strategy-summary-md__p {
  margin: 0 0 var(--space-3);
  color: color-mix(in srgb, var(--text) 94%, transparent);
}

.project-strategy-summary-md__ul,
.project-strategy-summary-md__ol {
  margin: 0 0 var(--space-3);
  padding-left: 1.35rem;
}

.project-strategy-summary-md__ul .project-strategy-summary-md__ul,
.project-strategy-summary-md__ol .project-strategy-summary-md__ol {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.project-strategy-summary-md__li {
  margin-bottom: var(--space-2);
}

.project-strategy-summary-md__li:last-child {
  margin-bottom: 0;
}

.project-strategy-summary-md__strong {
  font-weight: var(--font-bold, 700);
  color: var(--text);
}

.project-strategy-doc-modal__ai .domain-form-label:not(:first-child) {
  margin-top: var(--space-3);
}

.project-strategy-full-ai-modal .domain-form-label:not(:first-of-type) {
  margin-top: var(--space-3);
}

.project-strategy-hero__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.project-strategy-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.project-strategy-hero__label {
  margin: 0;
}

.project-strategy-hero__hint {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.project-strategy-board {
  margin-top: var(--space-4);
}

.project-strategy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 720px) {
  .project-strategy-grid {
    grid-template-columns: 1fr;
  }
}

.project-strategy-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-elevated, #fff);
  border-radius: 12px;
  border: 1px solid var(--border-light, var(--border));
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.project-strategy-card:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 14%, transparent);
  transform: translateY(-3px);
}

.project-strategy-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.project-strategy-card__title {
  margin: 0;
  font-size: var(--text-base, 1rem);
  font-weight: var(--font-bold, 700);
  color: var(--accent);
  line-height: 1.35;
  flex: 1 1 8rem;
}

.project-strategy-badge {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: var(--font-semibold, 600);
  letter-spacing: 0.02em;
  text-transform: none;
}

.project-strategy-badge--complete {
  background: color-mix(in srgb, #22c55e 18%, transparent);
  color: #15803d;
  border: 1px solid color-mix(in srgb, #22c55e 35%, transparent);
}

.project-strategy-badge--progress {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

.project-strategy-badge--pending {
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.project-strategy-card__desc {
  margin: 0;
  flex: 1 1 auto;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.5;
  color: color-mix(in srgb, var(--accent) 55%, var(--text-muted));
}

.project-strategy-card__edit {
  align-self: flex-start;
  margin-top: auto;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.project-strategy-editor-head {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-light, var(--border));
}

.project-strategy-back {
  margin-bottom: var(--space-3);
}

.project-strategy-editor-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--font-bold, 700);
  color: var(--text);
}

.project-strategy-editor-lead {
  margin: 0;
  max-width: 40rem;
}

.project-strategy-field-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.project-strategy-field-trigger {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-light, var(--border));
  border-radius: var(--radius, 8px);
  background: var(--bg, #fff);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.project-strategy-field-trigger:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.project-strategy-field-trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.project-strategy-field-trigger__label {
  font-weight: var(--font-semibold, 600);
  font-size: var(--text-sm, 0.875rem);
}

.project-strategy-field-trigger__state {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-muted);
}

.project-strategy-field-trigger__state.is-filled {
  color: #15803d;
}

.project-strategy-editor-actions {
  margin-bottom: var(--space-4);
}

.project-strategy-exclude-box {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light, var(--border));
}

.project-strategy-field-modal__ai-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}

.project-strategy-field-modal__ai-hint {
  margin: 0;
  flex: 1 1 12rem;
}

.project-strategy-field-modal__actions {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-2);
}

.modal-box--project-strategy-doc {
  max-width: min(42rem, 96vw);
  width: 100%;
}

.modal-box--project-strategy-doc .modal-title {
  color: var(--accent);
  font-weight: var(--font-bold, 700);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.project-strategy-doc-modal__lead {
  margin-top: 0;
}

.project-strategy-doc-modal__ai {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-light, var(--border));
}

.project-strategy-doc-modal__ai-textarea {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.project-strategy-doc-modal__scroll {
  max-height: min(58vh, 520px);
  overflow-y: auto;
  padding-right: var(--space-1);
  margin-top: var(--space-3);
}

.project-strategy-doc-modal__field {
  margin-bottom: var(--space-4);
}

.project-strategy-doc-modal__field:last-child {
  margin-bottom: 0;
}

.project-strategy-doc-modal__field-group {
  margin-bottom: var(--space-4);
}

.project-strategy-doc-modal__field-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.project-strategy-doc-modal__card {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  border: 1px solid var(--border-light, var(--border));
  border-radius: var(--radius, 8px);
  background: var(--bg-elevated, #fff);
}

.project-strategy-doc-modal__card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.project-strategy-doc-modal__card-title {
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-semibold, 600);
  color: var(--text);
}

.project-strategy-doc-modal__exclude {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
}

/* Página interna de edición de documento (layout al 100% del contenedor del dashboard) */
.project-strategy-document-page {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.project-strategy-document-page__shell {
  padding: var(--space-6) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.project-strategy-document-page__hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-light, var(--border));
}

.project-strategy-document-page__back {
  margin: 0;
  display: inline-flex;
  align-self: flex-start;
}

.project-strategy-document-page__hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4) var(--space-5);
  margin-top: 1rem;
}

.project-strategy-document-page__hero-text {
  flex: 1 1 18rem;
  min-width: 0;
  max-width: 48rem;
}

.project-strategy-document-page__hero-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /* Alinea el botón con la primera línea del título (cap-height) */
  padding-top: 0.2em;
}

.project-strategy-document-page__title {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: var(--font-bold, 700);
  color: var(--accent);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.project-strategy-document-page__subtitle {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 48rem;
}

@media (max-width: 640px) {
  .project-strategy-document-page__hero-actions {
    width: 100%;
    padding-top: 0;
  }

  .project-strategy-document-page__ai-btn {
    width: 100%;
    justify-content: center;
  }
}

.project-strategy-document-page__card {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.project-strategy-document-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light, var(--border));
}

.project-strategy-doc-page__body {
  margin-top: 0;
  padding-bottom: var(--space-2);
}

.project-strategy-doc-page__field {
  margin-bottom: var(--space-4);
}

.project-strategy-doc-page__field:last-child {
  margin-bottom: 0;
}

.project-strategy-doc-page__field-group {
  margin-bottom: var(--space-4);
}

.project-strategy-doc-page__field-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.project-strategy-doc-page__card {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  border: 1px solid var(--border-light, var(--border));
  border-radius: var(--radius, 8px);
  background: var(--bg-elevated, #fff);
}

.project-strategy-doc-page__card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.project-strategy-doc-page__card-title {
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-semibold, 600);
  color: var(--text);
}

.project-strategy-doc-page__exclude {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
}

/* Ayuda externa (/ayuda): tarjetas con títulos naranja, mismo estilo que la referencia */

.ayuda-page-header {
  margin-bottom: var(--space-8, 1.5rem);
}

.ayuda-page-header h1 {
  font-size: var(--text-2xl, 1.5rem);
  font-weight: var(--font-semibold, 600);
  margin: 0;
  color: var(--text);
}

.ayuda-meta {
  margin: 0.5rem 0 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-muted);
}

/* Cada sección es una tarjeta con fondo ligeramente más claro que la página */
.ayuda-content {
  margin-bottom: var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.ayuda-content:last-child {
  margin-bottom: 0;
}

.ayuda-content h2 {
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--font-semibold, 600);
  margin: 0 0 0.75rem;
  color: var(--accent);
}

.ayuda-content p {
  margin: 0;
  line-height: 1.6;
  color: var(--text);
}

.ayuda-content a {
  color: var(--accent);
  text-decoration: none;
  font-weight: var(--font-medium);
}

.ayuda-content a:hover {
  text-decoration: underline;
  color: var(--accent-hover);
}

.ayuda-sections {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ayuda-content p + p {
  margin-top: 0.75rem;
}

.ayuda-list {
  margin: 0.65rem 0 0;
  padding-left: 1.2rem;
  color: var(--text);
  line-height: 1.55;
  font-size: 0.95rem;
}

.ayuda-list li + li {
  margin-top: 0.45rem;
}

.ayuda-list--faq li {
  margin-top: 0.5rem;
}

.ayuda-inline-code {
  font-size: 0.85em;
  padding: 0.12em 0.35em;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  color: var(--text);
  font-family: ui-monospace, monospace;
}

/* Ayuda pública (/ayuda): bloque superior y chips */
.ayuda-landing-wrap .ayuda-page-header {
  margin-bottom: var(--space-5);
}

.ayuda-meta a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.ayuda-meta a:hover {
  text-decoration: underline;
}

.ayuda-landing-tip {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

.ayuda-landing-tip-title {
  display: block;
  margin: 0 0 var(--space-2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
}

.ayuda-landing-tip-list {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ayuda-landing-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.ayuda-landing-nav--secondary {
  margin-top: calc(-1 * var(--space-3));
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.ayuda-landing-nav-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: var(--space-1);
  width: 100%;
}

@media (min-width: 640px) {
  .ayuda-landing-nav-label {
    width: auto;
    margin-right: var(--space-2);
  }
}

.ayuda-landing-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.ayuda-landing-nav-link:hover {
  border-color: var(--accent);
  background: var(--bg-elevated);
  text-decoration: none;
  color: var(--accent);
}

/* Ayuda dentro del dashboard: enlaces en el aside */
.dashboard-ayuda.ayuda-page .ayuda-page-help.domain-page-help a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.dashboard-ayuda.ayuda-page .ayuda-page-help.domain-page-help a:hover {
  text-decoration: underline;
}

.dashboard-ayuda.ayuda-page {
  margin-bottom: var(--space-8);
}
/* Página Contacto: hero + dos columnas (canales | formulario) */

.contacto-page {
  padding-top: clamp(var(--space-6), 4vw, var(--space-10));
  padding-bottom: clamp(var(--space-8), 6vw, var(--space-12));
}

.contacto-hero {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto var(--space-10);
}

.contacto-eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-muted) 88%, var(--accent));
}

.contacto-title {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: var(--font-bold);
  letter-spacing: -0.03em;
  color: var(--text);
}

.contacto-lead {
  margin: 0;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.65;
  color: var(--text-muted);
}

.contacto-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  align-items: start;
}

.contacto-aside {
  position: sticky;
  top: calc(var(--space-4) + 4rem);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(165deg, color-mix(in srgb, var(--bg-card) 100%, transparent), var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent) 12%);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
}

.contacto-aside-heading {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text);
}

.contacto-aside-intro {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-muted);
}

.contacto-channel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contacto-channel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.contacto-channel:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}

.contacto-channel-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent);
  opacity: 0.95;
}

.contacto-channel--wa .contacto-channel-icon {
  color: #25d366;
}

.contacto-channel-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.contacto-channel-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text);
}

.contacto-channel-hint {
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-muted);
  word-break: break-word;
}

.contacto-form-column {
  min-width: 0;
}

/* Alertas */
.contacto-alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.contacto-alert--success {
  background: color-mix(in srgb, #22c55e 14%, var(--bg-card));
  border: 1px solid color-mix(in srgb, #22c55e 45%, var(--border));
  color: var(--text);
}

.contacto-alert--error {
  background: color-mix(in srgb, #ef4444 12%, var(--bg-card));
  border: 1px solid color-mix(in srgb, #ef4444 40%, var(--border));
  color: #f87171;
}

/* Formulario */
.contacto-form {
  max-width: 100%;
  background: linear-gradient(160deg, var(--bg-card), color-mix(in srgb, var(--bg-elevated) 88%, var(--bg-card)));
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--accent) 10%);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  box-shadow: 0 12px 40px color-mix(in srgb, #000 35%, transparent);
}

.contacto-form-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text);
}

.contacto-form-sub {
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.contacto-req {
  color: var(--accent);
  font-weight: var(--font-bold);
}

.contacto-optional {
  font-weight: var(--font-normal);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.contacto-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-5);
}

.contacto-form-grid > .contacto-field {
  min-width: 0;
}

@media (min-width: 560px) {
  .contacto-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contacto-field {
  margin-bottom: var(--space-5);
}

.contacto-field:last-of-type {
  margin-bottom: var(--space-6);
}

.contacto-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text);
  margin-bottom: 0.4rem;
}

.contacto-input,
.contacto-select,
.contacto-textarea {
  width: 100%;
  padding: 0.65rem 0.9rem;
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 92%, var(--text));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-sizing: border-box;
}

.contacto-input:focus,
.contacto-select:focus,
.contacto-textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.contacto-input::placeholder,
.contacto-textarea::placeholder {
  color: color-mix(in srgb, var(--text-muted) 85%, transparent);
}

.contacto-input:disabled,
.contacto-select:disabled,
.contacto-textarea:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.contacto-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.25rem;
}

/* País: combobox con buscador */
.contacto-country {
  position: relative;
  width: 100%;
}

.contacto-country-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: 0.65rem 0.9rem;
  padding-right: 2.25rem;
  font-size: var(--text-base);
  font-family: inherit;
  text-align: left;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 92%, var(--text));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.contacto-country-trigger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.contacto-country-trigger:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.contacto-country-trigger:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.contacto-country-trigger-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacto-country-chevron {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid color-mix(in srgb, var(--text-muted) 90%, var(--text));
  pointer-events: none;
}

.contacto-country-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 80;
  display: flex;
  flex-direction: column;
  max-height: min(320px, 55vh);
  background: color-mix(in srgb, var(--bg-card) 98%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent) 12%);
  border-radius: var(--radius-lg);
  box-shadow:
    0 12px 40px color-mix(in srgb, #000 45%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 6%, transparent);
  overflow: hidden;
}

.contacto-country-search {
  flex-shrink: 0;
  width: 100%;
  padding: 0.55rem 0.85rem;
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 94%, var(--text));
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-sizing: border-box;
}

.contacto-country-search:focus {
  outline: none;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 55%, transparent);
}

.contacto-country-search::placeholder {
  color: color-mix(in srgb, var(--text-muted) 85%, transparent);
}

.contacto-country-list {
  list-style: none;
  margin: 0;
  padding: var(--space-1);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.contacto-country-option {
  display: block;
  width: 100%;
  padding: 0.5rem 0.65rem;
  font-size: var(--text-sm);
  font-family: inherit;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.12s ease;
}

.contacto-country-option:hover,
.contacto-country-option:focus {
  outline: none;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
}

.contacto-country-option--active {
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-card));
  font-weight: var(--font-medium);
}

.contacto-country-empty {
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

.contacto-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.55;
}

.contacto-submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-1);
}

@media (min-width: 480px) {
  .contacto-submit {
    width: auto;
    min-width: 12rem;
  }
}

@media (max-width: 900px) {
  .contacto-aside {
    position: static;
  }

  .contacto-layout {
    grid-template-columns: 1fr;
  }
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Colores — blanco / negro tipo referencia; acento solo en CTAs y barras de estado */
  --bg: #0a0a0a;
  --bg-elevated: #141414;
  --bg-card: #1a1a1a;
  --bg-card-hover: #242424;
  --text: #ffffff;
  --text-muted: #a3a3a3;
  --accent: #f59e0b;
  --accent-hover: #fbbf24;
  --accent-soft: rgba(245, 158, 11, 0.16);
  --accent-glow: rgba(245, 158, 11, 0.25);
  --meter-start: #ef4444;
  --meter-end: #fb923c;
  --border: #2a2a2a;
  --border-light: #1f1f1f;
  /* Tipografía */
  --font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  /* Espaciado (sistema 4px base) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-7: 1.75rem;   /* 28px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  /* Layout */
  --content-max: 1280px;
  --sidebar-width: 260px;
  --topbar-height: 4rem;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 9999px;
  /* Sombras — más suaves y difusas */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.28);
  --transition: 0.2s ease;
  --transition-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  /* Barras de scroll coherentes con tema oscuro (Chrome/Edge/Safari + Firefox) */
  --scrollbar-track: var(--bg-elevated);
  --scrollbar-thumb: color-mix(in srgb, var(--border) 85%, var(--text-muted) 15%);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--accent) 35%, var(--scrollbar-thumb) 65%);
  --scrollbar-thumb-active: color-mix(in srgb, var(--accent) 50%, var(--scrollbar-thumb) 50%);
}

/* Firefox */
* {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* WebKit (Chrome, Edge, Safari) — contenedores con scroll (main, sidebar, tablas, modales…) */
*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid var(--scrollbar-track);
  min-height: 40px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  background-image: radial-gradient(ellipse 100% 70% at 50% -25%, rgba(255, 255, 255, 0.03), transparent 52%);
  background-attachment: fixed;
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#root {
  min-height: 100vh;
}

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.25;
}

h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-6);
  color: var(--text);
  letter-spacing: -0.02em;
  font-weight: var(--font-semibold);
}

h3 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  color: var(--accent);
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition),
    border-color var(--transition);
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 2px 14px var(--accent-glow);
}

.btn-primary:hover {
  background: var(--accent-hover);
  color: var(--bg);
  text-decoration: none;
  box-shadow: 0 6px 28px var(--accent-glow);
  transform: translateY(-2px);
}

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

.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.14);
  text-decoration: none;
  box-shadow: none;
  transform: translateY(-1px);
}

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

.btn-block {
  width: 100%;
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

/* Navbar / Dashboard topbar */
.navbar,
.dashboard-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  background: var(--bg-elevated);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.navbar-inner,
.dashboard-topbar-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
}

.dashboard-topbar-inner > .dashboard-topbar-logo {
  flex-shrink: 0;
}

.dashboard-topbar-inner .dashboard-topbar-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0 1rem;
}

.dashboard-topbar-inner .dashboard-topbar-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dashboard-topbar-nav .nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color var(--transition);
}

.dashboard-topbar-nav .nav-link:hover {
  color: var(--accent);
}

.dashboard-topbar-mis-sitios {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.dashboard-topbar-mis-sitios:hover {
  background: rgba(245, 158, 11, 0.28);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  text-decoration: none;
}

.navbar-logo,
.dashboard-topbar-logo {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  text-decoration: none;
}

.navbar-logo:hover,
.dashboard-topbar-logo:hover {
  color: var(--accent);
  text-decoration: none;
}

.dashboard-topbar-user {
  font-size: 0.9rem;
  color: var(--text-muted);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-topbar-logout {
  background: none;
  border: none;
  font: inherit;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  border-radius: var(--radius);
  transition: color 0.2s, background 0.2s;
}

.dashboard-topbar-logout:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

/* Auth pages */
.page-auth {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow);
}

.auth-title {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.auth-subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.auth-form label {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
}

.auth-form input {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.65rem 0.9rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}

.auth-form input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

.auth-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.auth-form button {
  margin-top: 0.5rem;
}

.auth-footer {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.auth-footer a {
  font-weight: 500;
}

/* Dashboard – layout y navegación */
.page-dashboard {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.dashboard-topbar + .dashboard-content-wrap {
  flex: 1;
}

.dashboard-content-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  padding: var(--space-8) var(--space-6) var(--space-16);
  box-sizing: border-box;
}

.page-dashboard--sub .dashboard-content-wrap {
  padding-top: var(--space-6);
}

.account-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.account-nav-link {
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition), transform var(--transition);
}

.account-nav-link:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.account-nav-link--active {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2);
}

.dashboard-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  margin-bottom: 0;
  color: var(--text-muted);
}

.dashboard-breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}

.dashboard-breadcrumb a:hover {
  text-decoration: none;
}

.dominio-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-light);
}

.dominio-subnav-link {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.dominio-subnav-link:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.dominio-subnav-link--active {
  color: var(--accent);
  font-weight: var(--font-semibold);
  background: var(--accent-soft);
  border-bottom: 2px solid var(--accent);
  padding-bottom: calc(var(--space-2) - 2px);
}

button.dominio-subnav-link {
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.dashboard-header {
  margin-bottom: 2rem;
}

.dashboard-header h1 {
  font-size: var(--text-xl);
  margin-bottom: 0.35rem;
  color: var(--text);
}

.dashboard-subtitle {
  color: var(--text-muted);
  font-size: var(--text-base);
}

/* Cupo de sitios (dominios + redes) en cabeceras de Mis dominios / Proyectos / Redes sociales */
.dashboard-sites-usage {
  display: block;
  margin-top: 0.45rem;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.dashboard-resumen {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
  transition: border-color var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-card);
}

.dashboard-resumen:hover {
  border-color: rgba(245, 158, 11, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.dashboard-resumen h2 {
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
  color: var(--accent);
}

.dashboard-resumen-list {
  list-style: none;
  margin-bottom: var(--space-3);
}

.dashboard-resumen-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
}

.dashboard-resumen-label {
  color: var(--text-muted);
  min-width: 10rem;
}

.dashboard-resumen-value {
  word-break: break-all;
  color: var(--text);
}

.dashboard-resumen-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.dashboard-section {
  margin-bottom: var(--space-6);
}

.dashboard-section h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
  color: var(--accent);
  font-weight: var(--font-semibold);
}

.dashboard-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Config sections (formularios) */
.config-section {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  transition: border-color var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-card);
}

.config-section:hover {
  border-color: rgba(245, 158, 11, 0.18);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

.config-section h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  color: var(--accent);
  font-weight: var(--font-semibold);
}

.config-section-desc {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.config-label {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
}

.config-label--inline {
  display: inline-flex;
  flex-direction: column;
  margin-right: 0;
  margin-bottom: 0.75rem;
  flex: 1 1 45%;
  min-width: 200px;
}

.config-input {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 0.35rem;
  padding: 0.7rem 0.95rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  box-sizing: border-box;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.config-input--narrow {
  width: 100%;
  max-width: 180px;
}

.config-input--tiny {
  max-width: 90px;
}

.config-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.config-textarea {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.65rem 0.9rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  resize: vertical;
  min-height: 120px;
}

.config-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.config-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.config-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* Card (uso en dashboard) */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition-smooth);
  box-shadow: var(--shadow-card);
}

.card:hover {
  border-color: rgba(245, 158, 11, 0.35);
  box-shadow: var(--shadow), 0 0 0 1px rgba(245, 158, 11, 0.1);
  transform: translateY(-2px);
}

.card h2 {
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
  color: var(--accent);
}

.card p {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  animation: modal-fade 0.2s ease;
}

.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
  max-width: 420px;
  width: 100%;
  padding: 1.5rem;
  animation: modal-in 0.25s ease;
}

.modal-title {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--text);
}

.modal-body {
  margin-bottom: 1.5rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.modal-confirm-type-hint {
  margin: 1rem 0 0.5rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.modal-confirm-type-input {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  box-sizing: border-box;
}

.modal-confirm-type-input:focus {
  outline: 2px solid var(--accent, #c9a227);
  outline-offset: 1px;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-end;
}

@keyframes modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Section genérica */
.section {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
}

.section-label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}

/* Pricing section (landing) */
.section-pricing {
  padding-top: 1rem;
}

.pricing-header {
  text-align: center;
  margin-bottom: 2rem;
}

.pricing-subtitle {
  color: var(--text-muted);
  font-size: 1rem;
  margin-top: 0.5rem;
}

.pricing-header-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
}

.pricing-currency-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pricing-currency-label {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

.pricing-currency-select {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b9cb3' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  transition: border-color var(--transition);
}

.pricing-currency-select:hover,
.pricing-currency-select:focus {
  border-color: var(--accent);
  outline: none;
}

.pricing-period-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.pricing-period-btn {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-card);
  border: none;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.pricing-period-btn:hover {
  color: var(--text);
}

.pricing-period-btn--active {
  color: var(--bg);
  background: var(--accent);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 1000px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pricing-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.pricing-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.pricing-card-highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 4px 24px var(--accent-glow);
}

.pricing-card-highlight .pricing-badge-recommended {
  display: block;
}

.pricing-badge-recommended {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--accent);
  color: var(--bg);
  border-radius: 6px;
}

.pricing-card--selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 4px 20px var(--accent-glow);
}

.pricing-card--actual {
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.3);
}

.pricing-badge-actual {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--text-muted);
  color: var(--bg);
  border-radius: 6px;
}

.pricing-card-highlight .pricing-badge-actual {
  right: 0.75rem;
  top: 2.25rem;
}

.pricing-cta--current {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: default;
}

.pricing-card--enterprise {
  border-style: dashed;
}

.pricing-name {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.pricing-price {
  margin-bottom: 0.5rem;
}

.pricing-primary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15rem;
  justify-content: center;
}

.pricing-secondary {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.pricing-amount {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
}

.pricing-currency {
  font-size: 1.1rem;
  color: var(--text-muted);
}

.pricing-period {
  font-size: 0.95rem;
  color: var(--text-muted);
}

.pricing-custom {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--accent);
}

.pricing-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.pricing-article-range {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.pricing-domain-extra {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.pricing-features {
  list-style: none;
  flex: 1;
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.pricing-features li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: left;
  align-self: center;
}

.pricing-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 600;
}

.pricing-cta {
  display: block;
  text-align: center;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.pricing-cta--select {
  width: 100%;
  text-align: center;
  cursor: pointer;
  font-weight: 600;
}

.pricing-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.pricing-note--addons {
  margin-top: 0.5rem;
}

/* Calculadora de precios */
.pricing-calculator {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0;
}

.pricing-calculator-inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  grid-template-rows: auto 1fr;
  gap: 1.25rem;
  align-items: start;
}

.pricing-calc-plan-strip {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: max-content;
  max-width: 100%;
}

.pricing-calc-plan-row {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pricing-calc-plan-tabs {
  display: flex;
  gap: 0.25rem;
}

.pricing-calc-currency-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
}

.pricing-calc-currency-inline .pricing-currency-label {
  margin-bottom: 0;
  font-size: 0.9rem;
}

.pricing-calc-plan-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.55rem 0.65rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.pricing-calc-plan-tab-name {
  line-height: 1.2;
}

.pricing-calc-plan-tab-range {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.2;
  opacity: 0.92;
  white-space: nowrap;
}

.pricing-calc-plan-tab--active .pricing-calc-plan-tab-range {
  opacity: 1;
}

.pricing-calc-plan-tab:hover {
  color: var(--text);
}

.pricing-calc-plan-tab--active {
  color: var(--bg);
  background: var(--accent);
}

.pricing-calculator-left {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pricing-calc-field {
  margin-bottom: 0;
  padding: 1rem 1.1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition);
}

.pricing-calc-field:hover {
  border-color: rgba(245, 158, 11, 0.2);
}

.pricing-calc-label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.pricing-calc-volume-value {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0.2rem 0 0.5rem 0;
}

.pricing-calc-range {
  display: block;
  width: 100%;
  height: 10px;
  margin: 0.75rem 0 0.25rem 0;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 5px;
  outline: none;
}

.pricing-calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 2px 10px var(--accent-glow);
  transition: transform 0.15s, box-shadow 0.15s;
}

.pricing-calc-range::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 14px var(--accent-glow);
}

.pricing-calc-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 10px var(--accent-glow);
}

.pricing-calc-range::-moz-range-track {
  background: var(--border);
  border-radius: 5px;
  height: 10px;
}

.pricing-calc-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

.pricing-calc-enterprise-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.pricing-calc-enterprise-link:hover {
  text-decoration: underline;
}

.pricing-calc-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  margin-bottom: 0;
  line-height: 1.45;
}

.pricing-calc-volume-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0.35rem 0 0.5rem;
  line-height: 1.45;
}

/* Equivalencias de cupo: panel + rejilla de tarjetas */
.pricing-calc-equiv-panel {
  margin-top: 0.9rem;
  padding: 1rem 1.1rem 1.05rem;
  border-radius: 12px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.28));
  background: linear-gradient(
    165deg,
    rgba(249, 115, 22, 0.07) 0%,
    var(--bg-subtle, rgba(148, 163, 184, 0.05)) 42%,
    rgba(15, 23, 42, 0.35) 100%
  );
}

.pricing-calc-equiv-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.pricing-calc-equiv-heading {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary, inherit);
  max-width: 100%;
}

.pricing-calc-equiv-badge {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  color: var(--accent, #f97316);
  background: rgba(249, 115, 22, 0.14);
  border: 1px solid rgba(249, 115, 22, 0.28);
}

.pricing-calc-equiv-pool-total {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.75rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-muted, #a3a3a3);
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius, 8px);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

.pricing-calc-equiv-pool-total strong {
  color: var(--text, #fafafa);
}

.pricing-calc-equiv-intro {
  margin: 0.65rem 0 0.85rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.pricing-calc-equiv-split-note {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: rgba(249, 115, 22, 0.08);
  border: 1px solid rgba(249, 115, 22, 0.2);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.pricing-calc-equiv-split-note strong {
  color: var(--accent, #f97316);
}

.pricing-calc-equiv-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

@media (max-width: 520px) {
  .pricing-calc-equiv-grid {
    grid-template-columns: 1fr;
  }
}

.pricing-calc-equiv-tile {
  position: relative;
  margin: 0;
  padding: 0.7rem 2.35rem 0.75rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.22));
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 0;
}

.pricing-calc-equiv-tile-check {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-calc-equiv-tile-check input[type='checkbox'] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--accent, #f97316);
  cursor: pointer;
}

.pricing-calc-equiv-value {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--accent, #f97316);
  font-variant-numeric: tabular-nums;
}

.pricing-calc-equiv-value--muted {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 1.15rem;
}

.pricing-calc-equiv-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary, inherit);
  line-height: 1.3;
}

.pricing-calc-equiv-desc {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.pricing-calc-equiv-desc strong {
  color: var(--text-primary, rgba(248, 250, 252, 0.92));
  font-weight: 600;
}

.pricing-calc-equiv-note {
  margin: 0.9rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color, rgba(148, 163, 184, 0.2));
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.pricing-calc-error {
  font-size: 0.9rem;
  color: #ef4444;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.pricing-calc-empty-summary {
  margin-top: 0.5rem;
}

.pricing-calc-empty-summary .pricing-calc-hint {
  margin-bottom: 0.5rem;
}

.pricing-calc-empty-summary .btn {
  margin-top: 0.75rem;
}

.pricing-calc-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-top: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}

.pricing-calc-stepper-btn {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.pricing-calc-stepper-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent);
}

.pricing-calc-stepper-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pricing-calc-stepper-value {
  min-width: 2.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 0 0.5rem;
}

.pricing-calc-idioma-options--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

@media (min-width: 360px) {
  .pricing-calc-idioma-options--grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 500px) {
  .pricing-calc-idioma-options--grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pricing-calc-idioma-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.pricing-calc-idioma-option:hover {
  border-color: rgba(245, 158, 11, 0.4);
}

.pricing-calc-idioma-option--active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25);
}

.pricing-calc-idioma-option--locked {
  cursor: default;
}

.pricing-calc-idioma-option--locked .pricing-calc-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.85;
}

/* Palabras por artículo: lista vertical con círculo a la izquierda, seleccionado con borde naranja y fondo bronce */
.pricing-calc-wordcount-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.pricing-calc-wordcount-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.pricing-calc-wordcount-option:hover {
  border-color: rgba(245, 158, 11, 0.35);
}

.pricing-calc-wordcount-option--active {
  border-color: var(--accent);
  background: rgba(120, 80, 40, 0.25);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.4);
}

.pricing-calc-wordcount-option--active .pricing-calc-wordcount-radio {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 2px var(--bg);
}

.pricing-calc-wordcount-option--disabled {
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
}

.pricing-calc-wordcount-option--disabled:hover {
  border-color: var(--border);
}

.pricing-calc-wordcount-option--disabled .pricing-calc-wordcount-radio {
  opacity: 0.55;
  border-style: dashed;
}

.pricing-calc-wordcount-legacy {
  font-weight: 400;
  font-size: 0.78em;
  color: var(--text-muted, #a3a3a3);
}

/* «Incluido» en la fila 350 bloqueada: mismo texto que 550 pero en gris para indicar no seleccionable */
.pricing-calc-wordcount-badge-blocked {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted, #a3a3a3);
}

.pricing-calc-wordcount-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.pricing-calc-wordcount-radio {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  background: transparent;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.pricing-calc-wordcount-label {
  flex: 1;
  font-weight: 500;
  color: var(--text);
}

.pricing-calc-idioma-label {
  font-weight: 500;
  color: var(--text);
  flex: 1;
}

.pricing-calc-idioma-badge {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.pricing-calc-addon-price {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
}

.pricing-calc-checkbox {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.pricing-calc-toggle-wrap--summary {
  margin-bottom: 1.25rem;
  margin-top: 0;
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.pricing-calc-toggle-wrap--summary .pricing-calc-toggle-btn {
  flex: 1;
  padding: 0.6rem 1rem;
}

.pricing-calc-toggle-btn {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-card);
  border: none;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.pricing-calc-toggle-btn:hover {
  color: var(--text);
}

.pricing-calc-toggle-btn--active {
  color: var(--bg);
  background: var(--accent);
}

.pricing-calculator-right {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  position: sticky;
  top: 6rem;
}

.pricing-calculator-summary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}

.pricing-calculator-summary-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text);
}

.pricing-calculator-breakdown {
  list-style: none;
  margin: 0 0 0.75rem 0;
  padding: 0;
}

.pricing-calculator-breakdown li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.45rem 0;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--border);
}

.pricing-calculator-breakdown li:last-of-type {
  border-bottom: none;
}

.pricing-calc-breakdown-label {
  color: var(--text-muted);
}

.pricing-calc-breakdown-value {
  font-weight: 500;
  color: var(--accent);
  flex-shrink: 0;
}

.pricing-calculator-total {
  margin: 0 0 0.35rem 0;
  font-size: 1.1rem;
}

.pricing-calculator-total-amount {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
}

.pricing-calculator-total-currency,
.pricing-calculator-total-period {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-muted);
}

.pricing-calculator-total-secondary {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.pricing-calculator-total--custom {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 1rem;
}

.pricing-calculator-monthly-equivalent {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
  margin-bottom: 0;
}

.pricing-calculator-cta {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
}

.pricing-calculator-active-plan {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  background: var(--bg-muted, #f3f4f6);
  border-radius: 0.5rem;
  margin-bottom: 0;
}

/* Caja clara solo fuera del modal; el modal usa .pricing-calc-transfer-instructions--modal */
.pricing-calc-transfer-instructions:not(.pricing-calc-transfer-instructions--modal) {
  margin-top: 1rem;
  padding: 1.25rem;
  background: #fff;
  color: #1a1a1a;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 0.5rem;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.pricing-calc-transfer-instructions:not(.pricing-calc-transfer-instructions--modal) .pricing-calc-transfer-title,
.pricing-calc-transfer-instructions:not(.pricing-calc-transfer-instructions--modal) .pricing-calc-transfer-ref,
.pricing-calc-transfer-instructions:not(.pricing-calc-transfer-instructions--modal) .pricing-calc-transfer-concept,
.pricing-calc-transfer-instructions:not(.pricing-calc-transfer-instructions--modal) .pricing-calc-transfer-amount,
.pricing-calc-transfer-instructions:not(.pricing-calc-transfer-instructions--modal) .pricing-calc-transfer-bank,
.pricing-calc-transfer-instructions:not(.pricing-calc-transfer-instructions--modal) .pricing-calc-transfer-extra {
  color: #1a1a1a;
}
.pricing-calc-transfer-title { margin: 0 0 0.75rem; font-size: 1.05rem; font-weight: 600; }
.pricing-calc-transfer-ref,
.pricing-calc-transfer-concept,
.pricing-calc-transfer-amount,
.pricing-calc-transfer-bank { margin: 0.4rem 0; font-size: 0.95rem; line-height: 1.45; }
.pricing-calc-transfer-extra {
  margin: 0.5rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-line;
  color: #1a1a1a;
}
.pricing-calc-transfer-note { margin: 0.75rem 0 0.5rem; font-size: 0.9rem; color: #374151; }
.pricing-calc-transfer-instructions:not(.pricing-calc-transfer-instructions--modal) .btn { margin-top: 0.5rem; }

/* Modal «Pago por transferencia»: jerarquía, panel de datos y espaciado */
.modal-box:has(.pricing-transfer-modal-body) {
  max-width: min(36rem, calc(100vw - 2rem));
  padding: var(--space-5) var(--space-6);
}

.modal-box:has(.pricing-transfer-modal-body) .modal-title {
  margin-bottom: var(--space-3);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  letter-spacing: -0.02em;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.modal-box:has(.pricing-transfer-modal-body) .modal-body {
  margin-bottom: var(--space-4);
  color: var(--text);
  line-height: 1.55;
}

.modal-box:has(.pricing-transfer-modal-body) .modal-actions {
  margin-top: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  gap: var(--space-3);
}

.pricing-transfer-modal-body {
  font-size: var(--text-sm);
}

.pricing-transfer-modal-body > .pricing-calc-hint,
.pricing-transfer-modal-body > .pricing-calc-error {
  margin: 0;
  text-align: center;
  padding: var(--space-8) var(--space-4);
}

.pricing-transfer-modal-body > .pricing-calc-hint {
  color: var(--text-muted);
}

.pricing-transfer-modal-body > .pricing-calc-error {
  color: var(--meter-start);
}

.pricing-calc-transfer-instructions--modal {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: 0;
  padding: var(--space-5);
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.pricing-calc-transfer-instructions--modal .pricing-calc-transfer-ref,
.pricing-calc-transfer-instructions--modal .pricing-calc-transfer-concept,
.pricing-calc-transfer-instructions--modal .pricing-calc-transfer-amount,
.pricing-calc-transfer-instructions--modal .pricing-calc-transfer-bank {
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text);
}

.pricing-calc-transfer-instructions--modal .pricing-calc-transfer-amount {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
}

.pricing-calc-transfer-instructions--modal strong {
  color: var(--text-muted);
  font-weight: var(--font-semibold);
}

.pricing-calc-transfer-instructions--modal .pricing-calc-transfer-eur-ref {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  color: var(--text-muted);
}

.pricing-calc-transfer-instructions--modal .pricing-calc-transfer-extra {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  line-height: 1.55;
  white-space: pre-line;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.pricing-calc-transfer-instructions--modal .pricing-calc-transfer-note {
  margin: var(--space-1) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

/* CTA WhatsApp bajo el contenido del modal de transferencia (encima de «Cerrar») */
.modal-box:has(.pricing-transfer-modal-body) .pricing-transfer-modal-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-4);
  padding: 0.7rem 1rem;
  background: #25d366;
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(37, 211, 102, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.modal-box:has(.pricing-transfer-modal-body) .pricing-transfer-modal-whatsapp:hover {
  color: #fff;
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
}

.modal-box:has(.pricing-transfer-modal-body) .pricing-transfer-modal-whatsapp:focus-visible {
  outline: 2px solid #25d366;
  outline-offset: 2px;
}

.pricing-transfer-modal-whatsapp-icon {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .pricing-calculator-inner {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .pricing-calc-plan-row {
    grid-column: 1;
    grid-row: auto;
  }
  .pricing-calculator-left {
    grid-column: 1;
    grid-row: auto;
  }
  .pricing-calculator-right {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
  .pricing-calc-plan-strip {
    max-width: 100%;
  }
}

/* Mobile: precios en columna, idiomas como tarjetas apiladas (landing y dashboard) */
@media (max-width: 640px) {
  .pricing-calculator {
    padding: 0;
  }

  .pricing-calculator-inner {
    gap: 1rem;
  }

  .pricing-calc-plan-row {
    flex-direction: column;
    align-items: stretch;
  }

  .pricing-calc-currency-inline {
    margin-left: 0;
    align-self: flex-end;
  }

  .pricing-calc-plan-strip {
    width: 100%;
    max-width: none;
  }

  .pricing-calc-plan-tabs {
    flex-wrap: wrap;
    justify-content: center;
  }

  .pricing-calc-plan-tab {
    min-width: 0;
    flex: 1 1 0;
    padding: 0.65rem 0.5rem;
    font-size: 0.85rem;
  }

  .pricing-calc-field {
    padding: 1rem;
  }

  /* Sección Idioma: una columna, cada opción como tarjeta vertical */
  .pricing-calc-idioma-options--grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }

  .pricing-calc-idioma-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1rem;
    border-radius: var(--radius-lg);
    background: var(--bg);
    border: 1px solid var(--border);
    min-height: 3.25rem;
  }

  .pricing-calc-idioma-option--active {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25);
  }

  .pricing-calc-idioma-label {
    flex: 1;
    font-weight: 500;
    color: var(--text);
  }

  .pricing-calc-idioma-badge {
    font-size: 0.875rem;
    color: var(--text);
    font-weight: 500;
  }

  .pricing-calc-addon-price {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
  }

  .pricing-calc-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
  }

  .pricing-calculator-summary {
    padding: 1rem;
  }

  .pricing-calculator-total-amount {
    font-size: 1.65rem;
  }
}

@media (max-width: 600px) {
  .pricing-calculator {
    padding: 0;
  }
  .pricing-calc-field {
    padding: 1rem;
  }
  .pricing-calc-plan-tab {
    padding: 0.5rem;
    font-size: 0.85rem;
  }
}

.pricing-calculator-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--text);
}

.pricing-calculator-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* Página Precios (contenedor) */
.page-pricing {
  padding: 0;
}

.page-pricing-intro {
  max-width: 560px;
  margin: 0 auto 2rem;
  text-align: center;
}

.page-pricing-intro-title {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.page-pricing-intro-desc {
  color: var(--text-muted);
}

.page-pricing-calculator-wrap {
  scroll-margin-top: 4rem;
}

.pricing-calc-controls-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.pricing-calc-controls-row .pricing-currency-label {
  margin-bottom: 0;
}

.page-pricing-cta {
  text-align: center;
  margin-top: 2rem;
}

.page-pricing-cta p {
  margin-bottom: 0.75rem;
  color: var(--text-muted);
}

/* Toasts / alertas globales */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 420px;
  pointer-events: none;
}

.toast-container > * {
  pointer-events: auto;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  border: 1px solid var(--border);
  opacity: 0;
  transform: translateX(1.5rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast--visible {
  opacity: 1;
  transform: translateX(0);
}

.toast--success {
  background: var(--bg-card);
  border-color: rgba(34, 197, 94, 0.4);
  color: var(--text);
}

.toast--success .toast-icon {
  color: #22c55e;
  font-weight: 700;
  font-size: 1.1rem;
}

.toast--error {
  background: var(--bg-card);
  border-color: rgba(239, 68, 68, 0.5);
  color: var(--text);
}

.toast--error .toast-icon {
  color: #ef4444;
  font-weight: 700;
  font-size: 1.1rem;
}

.toast--info {
  background: var(--bg-card);
  border-color: rgba(59, 130, 246, 0.45);
  color: var(--text);
}

.toast--info .toast-icon {
  color: #3b82f6;
  font-weight: 700;
  font-size: 1.1rem;
}

.toast-message {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.4;
}

.toast-close {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}

.toast-close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

/* Tooltip al hover / foco (botones flotantes WhatsApp + asistente) */
.float-action-label {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 2;
  padding: 6px 11px;
  max-width: min(200px, 70vw);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  box-shadow: var(--shadow);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;
}

.whatsapp-float-wrap:hover .float-action-label,
.whatsapp-float-wrap:focus-within .float-action-label,
.agent-assistant-fab-wrap:hover .float-action-label,
.agent-assistant-fab-wrap:focus-within .float-action-label {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .float-action-label {
    transition: none;
    transform: translateX(-50%);
  }

  .whatsapp-float-wrap:hover .float-action-label,
  .whatsapp-float-wrap:focus-within .float-action-label,
  .agent-assistant-fab-wrap:hover .float-action-label,
  .agent-assistant-fab-wrap:focus-within .float-action-label {
    transform: translateX(-50%);
  }
}

.whatsapp-float-wrap {
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  right: calc(1.5rem + env(safe-area-inset-right, 0px));
  z-index: 9980;
}

/* Botón flotante WhatsApp (por debajo del asistente y de los modales) */
.whatsapp-float {
  position: relative;
  width: 3.25rem;
  height: 3.25rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}
.whatsapp-float:hover {
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}
.whatsapp-float:focus-visible {
  outline: 2px solid #25d366;
  outline-offset: 3px;
}
.whatsapp-float-icon {
  width: 1.75rem;
  height: 1.75rem;
}

/* /informe-google/… — enlace compartido: sin WhatsApp ni asistente (incl. portales en body si venías del panel) */
body.is-public-google-report .whatsapp-float-wrap,
body.is-public-google-report .agent-assistant-fab-wrap,
body.is-public-google-report .agent-assistant-panel.agent-assistant-panel--float {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}